/* ==========================================================
   PADRA IT HELPDESK
   Main Application Stylesheet
   ========================================================== */


/* ==========================================================
   VARIABLES
   ========================================================== */

:root {

    --blue: #0b5cab;
    --blue2: #127bdc;

    --navy: #103556;

    --orange: #f28c28;
    --orange2: #ff6a00;

    --ink: #17324d;
    --muted: #6b7f93;

    --bg: #f4f8fc;

    --line: #dce7f1;

    --white: #ffffff;

    --green: #147043;
    --red: #a62a2a;

    --shadow:
        0 14px 34px rgba(18, 65, 106, 0.10);
}


/* ==========================================================
   RESET
   ========================================================== */

html {
    box-sizing: border-box;
    min-height: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}


body {

    min-height: 100vh;

    margin: 0;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background: var(--bg);

    color: var(--ink);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


img {
    max-width: 100%;
}


a {
    color: var(--blue);
    text-decoration: none;
}


button,
input,
select,
textarea {
    font-family: inherit;
}


/* ==========================================================
   STANDARD CONTAINER
   ========================================================== */

.container {

    width: 100%;
    max-width: 1280px;

    margin: 26px auto;

    padding: 0 20px;
}


/* ==========================================================
   TOP BAR
   ========================================================== */

.topbar {

    position: sticky;

    top: 0;

    z-index: 30;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 4vw;

    background: #ffffff;

    border-bottom: 1px solid var(--line);

    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.04);
}


.brand {

    display: flex;

    gap: 12px;

    align-items: center;

    color: var(--ink);
}


.brand img {

    width: 104px;

    height: 48px;

    object-fit: contain;

    object-position: left center;
}


.brand strong {

    display: block;

    font-size: 16px;
}


.brand small {

    display: block;

    color: var(--muted);

    font-size: 11px;
}


.topbar nav {

    display: flex;

    gap: 15px;

    align-items: center;

    flex-wrap: wrap;
}


.topbar nav a {

    font-size: 13px;

    font-weight: 700;
}


/* ==========================================================
   STANDARD BUTTONS
   ========================================================== */

.btn-nav,
.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 11px 17px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--blue2)
        );

    color: #ffffff !important;

    border: 0;

    border-radius: 10px;

    cursor: pointer;

    font: inherit;

    font-weight: 800;

    text-decoration: none;
}


.btn.orange {

    background:
        linear-gradient(
            135deg,
            var(--orange2),
            var(--orange)
        );
}


.btn.light {

    background: #eaf3fc;

    color: var(--blue) !important;
}


.btn.danger {

    background: #b93232;
}


.btn.small {

    padding: 7px 10px;

    font-size: 12px;
}


/* ==========================================================
   HERO
   ========================================================== */

.hero {

    position: relative;

    overflow: hidden;

    padding: 32px;

    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            #083f77,
            #0d75d8
        );

    border-radius: 22px;

    box-shadow: var(--shadow);
}


.hero::after {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    right: -60px;

    top: -90px;

    background:
        rgba(242, 140, 40, 0.24);

    border-radius: 50%;
}


.hero h1 {

    margin: 0 0 8px;

    font-size: 31px;
}


.hero p {

    max-width: 800px;

    line-height: 1.55;

    opacity: 0.92;
}


.hero-actions {

    display: flex;

    gap: 12px;

    margin-top: 20px;

    flex-wrap: wrap;
}


/* ==========================================================
   GRID
   ========================================================== */

.grid {

    display: grid;

    grid-template-columns:
        repeat(12, 1fr);

    gap: 18px;

    margin-top: 20px;
}


.span-3 {
    grid-column: span 3;
}

.span-4 {
    grid-column: span 4;
}

.span-5 {
    grid-column: span 5;
}

.span-6 {
    grid-column: span 6;
}

.span-7 {
    grid-column: span 7;
}

.span-8 {
    grid-column: span 8;
}

.span-9 {
    grid-column: span 9;
}

.span-12 {
    grid-column: span 12;
}


/* ==========================================================
   CARDS
   ========================================================== */

.card {

    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--line);

    border-radius: 16px;

    box-shadow:
        0 8px 22px rgba(20, 60, 95, 0.06);
}


.orange-line {

    border-top:
        4px solid var(--orange);
}


.blue-line {

    border-top:
        4px solid var(--blue2);
}


/* ==========================================================
   METRICS
   ========================================================== */

.metric h3 {

    margin: 6px 0;

    font-size: 30px;
}


.metric small {

    color: var(--muted);

    font-weight: 700;
}


.metric .sub {

    color: var(--muted);

    font-size: 12px;
}


/* ==========================================================
   HEADINGS
   ========================================================== */

h1,
h2,
h3 {

    color: inherit;
}


h2 {

    margin-top: 0;
}


/* ==========================================================
   FORMS
   ========================================================== */

.form-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 16px;
}


.field {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.field.full {

    grid-column: 1 / -1;
}


label {

    color: #35516a;

    font-size: 13px;

    font-weight: 800;
}


input,
select,
textarea {

    width: 100%;

    padding: 12px 13px;

    color: var(--ink);

    background: #ffffff;

    border: 1px solid #cbdbe8;

    border-radius: 10px;

    font: inherit;
}


textarea {

    min-height: 120px;

    resize: vertical;
}


input:focus,
select:focus,
textarea:focus {

    outline: 2px solid
        rgba(13, 117, 216, 0.15);

    border-color: var(--blue2);
}


.hint {

    color: var(--muted);

    font-size: 12px;
}


/* ==========================================================
   ALERTS
   ========================================================== */

.alert {

    padding: 12px 14px;

    margin-bottom: 16px;

    border-radius: 10px;
}


.alert.success {

    background: #e9f8f0;

    color: #12613a;
}


.alert.error {

    background: #fff0f0;

    color: #9c2828;
}


.alert.info {

    background: #edf6ff;

    color: #165d93;
}


/* ==========================================================
   TABLES
   ========================================================== */

.table-wrap {

    overflow: auto;
}


.table {

    width: 100%;

    border-collapse: collapse;

    background: #ffffff;
}


.table th,
.table td {

    padding: 12px;

    border-bottom:
        1px solid var(--line);

    text-align: left;

    font-size: 13px;

    vertical-align: top;
}


.table th {

    position: sticky;

    top: 0;

    background: #f1f7fc;

    color: #35516a;
}


/* ==========================================================
   BADGES
   ========================================================== */

.badge {

    display: inline-block;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}


.badge.new {

    background: #e7f2ff;

    color: #145c9e;
}


.badge.assigned {

    background: #fff3df;

    color: #9a5b00;
}


.badge.process {

    background: #efe8ff;

    color: #6132a8;
}


.badge.escalated {

    background: #ffe9dc;

    color: #a74600;
}


.badge.completed {

    background: #e7f8ee;

    color: #147043;
}


.badge.rejected {

    background: #ffe7e7;

    color: #9d2a2a;
}


.badge.backlog {

    background: #edf0f3;

    color: #5d6670;
}


.badge.neutral {

    background: #eef3f7;

    color: #526679;
}


/* ==========================================================
   TICKET
   ========================================================== */

.ticket-no {

    font-family:
        ui-monospace,
        Consolas,
        monospace;

    font-weight: 900;
}


/* ==========================================================
   TOOLBAR / FILTERS
   ========================================================== */

.toolbar {

    display: flex;

    gap: 10px;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    margin-bottom: 16px;
}


.filters {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    align-items: end;
}


.filters select,
.filters input {

    width: auto;

    min-width: 145px;
}


/* ==========================================================
   LOGIN PAGE
   ========================================================== */

.login-page {

    min-height: 100vh;

    margin: 0;

    background:
        radial-gradient(
            circle at 50% 15%,
            #ffffff 0,
            #f8fbfe 32%,
            #f4f8fc 70%
        );
}


/* ==========================================================
   LOGIN PUBLIC NAVIGATION
   ========================================================== */

.public-nav {

    position: fixed;

    top: 22px;

    right: 28px;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    max-width:
        calc(100vw - 40px);
}


.public-nav .nav-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 0 18px;

    background: #ffffff;

    color: #0b5cab;

    border:
        1px solid #dce7f1;

    border-radius: 10px;

    text-decoration: none;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 800;

    line-height: 1;

    box-shadow:
        0 5px 16px
        rgba(18, 65, 106, 0.08);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.public-nav .nav-btn:hover {

    background: #f5f9fd;

    color: #0b5cab;

    border-color: #127bdc;

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(18, 65, 106, 0.13);
}


.public-nav .nav-primary {

    background:
        linear-gradient(
            135deg,
            #ff6a00,
            #f28c28
        );

    color: #ffffff !important;

    border-color: transparent;

    box-shadow:
        0 6px 18px
        rgba(242, 140, 40, 0.20);
}


.public-nav .nav-primary:hover {

    background:
        linear-gradient(
            135deg,
            #e95f00,
            #df7a1d
        );

    color: #ffffff !important;

    border-color: transparent;

    box-shadow:
        0 8px 22px
        rgba(242, 140, 40, 0.28);
}


/* ==========================================================
   LOGIN MAIN
   ========================================================== */

.login-main {

    width: 100%;

    min-height: 100vh;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    padding:
        100px
        20px
        50px;
}


/* ==========================================================
   LOGIN SHELL
   ========================================================== */

.login-shell {

    width: 100%;

    max-width: 520px;

    margin: 0 auto;
}


/* ==========================================================
   LOGIN CARD
   ========================================================== */

.login-card {

    width: 100%;

    padding: 32px;

    background: #ffffff;

    border:
        1px solid var(--line);

    border-radius: 20px;

    box-shadow: var(--shadow);
}


/* ==========================================================
   LOGIN LOGO
   ========================================================== */

.login-logo {

    display: block;

    width: 70%;

    max-width: 260px;

    height: auto;

    margin:
        0 auto 22px;

    object-fit: contain;
}


/* ==========================================================
   LOGIN HEADING
   ========================================================== */

.login-heading {

    margin-bottom: 24px;
}


.login-heading h1 {

    margin:
        0 0 10px;

    color: #17324d;

    font-size: 25px;

    font-weight: 800;

    line-height: 1.25;
}


.login-heading p {

    margin: 0;

    color: #6b7f93;

    font-size: 12px;

    line-height: 1.55;
}


/* ==========================================================
   LOGIN FORM
   ========================================================== */

.login-form {

    width: 100%;
}


.login-field {

    width: 100%;

    margin-bottom: 18px;
}


.login-field label {

    display: block;

    margin-bottom: 7px;

    color: #35516a;

    font-size: 13px;

    font-weight: 800;
}


.login-field input {

    display: block;

    width: 100%;

    height: 48px;

    padding:
        10px 13px;

    background: #ffffff;

    color: #17324d;

    border:
        1px solid #cbdbe8;

    border-radius: 10px;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.login-field input:focus {

    border-color: #127bdc;

    box-shadow:
        0 0 0 3px
        rgba(18, 123, 220, 0.12);
}


.login-field input::placeholder {

    color: #9aabb9;
}


/* ==========================================================
   LOGIN BUTTON
   ========================================================== */

.login-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 110px;

    min-height: 46px;

    padding: 0 24px;

    background:
        linear-gradient(
            135deg,
            #0b5cab,
            #127bdc
        );

    color: #ffffff;

    border: 0;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 5px 15px
        rgba(11, 92, 171, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.login-button:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(11, 92, 171, 0.25);
}


/* ==========================================================
   LOGIN ERROR
   ========================================================== */

.login-alert {

    padding: 12px 14px;

    margin-bottom: 20px;

    background: #fff0f0;

    color: #9c2828;

    border:
        1px solid #ffd6d6;

    border-radius: 10px;

    font-size: 13px;

    line-height: 1.4;
}


/* ==========================================================
   LOGIN FOOTER
   ========================================================== */

.login-footer {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    margin-top: 28px;

    padding-top: 18px;

    color: #8293a3;

    border-top:
        1px solid #e7eef5;

    font-size: 11px;
}


.login-footer-dot {

    color: #f28c28;
}


/* ==========================================================
   TIMELINE
   ========================================================== */

.timeline {

    margin-left: 8px;

    padding-left: 18px;

    border-left:
        3px solid #d6e6f3;
}


.timeline-item {

    margin:
        0 0 16px;
}


.timeline-item small {

    color: var(--muted);
}


/* ==========================================================
   SPLIT
   ========================================================== */

.split {

    display: grid;

    grid-template-columns:
        2fr 1fr;

    gap: 18px;
}


/* ==========================================================
   KEY / VALUE
   ========================================================== */

.kv {

    display: grid;

    grid-template-columns:
        170px 1fr;

    gap: 9px;

    font-size: 14px;
}


.kv div:nth-child(odd) {

    color: #476178;

    font-weight: 800;
}


/* ==========================================================
   ATTACHMENTS
   ========================================================== */

.attachment img {

    max-width: 100%;

    border:
        1px solid var(--line);

    border-radius: 12px;
}


/* ==========================================================
   FOOTER
   ========================================================== */

footer {

    padding: 30px;

    color: var(--muted);

    text-align: center;

    font-size: 12px;
}


/* ==========================================================
   ROLE
   ========================================================== */

.role-pill {

    padding: 4px 8px;

    background: #eef5fb;

    color: #476178;

    border-radius: 999px;

    font-size: 11px;
}


/* ==========================================================
   STATUS HELP
   ========================================================== */

.status-help {

    display: grid;

    gap: 9px;
}


.status-help div {

    padding: 10px;

    background: #f8fbfe;

    border:
        1px solid var(--line);

    border-radius: 10px;
}


.status-help strong {

    display: block;

    margin-bottom: 3px;
}


/* ==========================================================
   MODAL
   ========================================================== */

.modal-backdrop {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: grid;

    place-items: center;

    padding: 20px;

    background:
        rgba(5, 24, 41, 0.68);
}


.modal-backdrop[hidden] {

    display: none;
}


.modal-card {

    width:
        min(500px, 95vw);

    padding: 28px;

    background: #ffffff;

    border-top:
        5px solid var(--orange);

    border-radius: 20px;

    text-align: center;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.28);
}


.modal-icon {

    display: grid;

    place-items: center;

    width: 58px;

    height: 58px;

    margin:
        0 auto 14px;

    background: #fff0e3;

    color: #b85100;

    border-radius: 50%;

    font-size: 30px;

    font-weight: 900;
}


.modal-open {

    overflow: hidden;
}


/* ==========================================================
   CALENDAR
   ========================================================== */

.calendar-shell {

    display: grid;

    grid-template-columns:
        1.6fr 1fr;

    gap: 18px;
}


.calendar-grid {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 7px;
}


.cal-head {

    padding: 7px;

    color: var(--muted);

    text-align: center;

    font-size: 11px;

    font-weight: 900;
}


.cal-day {

    min-height: 94px;

    padding: 8px;

    background: #ffffff;

    border:
        1px solid var(--line);

    border-radius: 12px;

    cursor: pointer;

    transition: 0.15s;
}


.cal-day:hover,
.cal-day.active {

    border-color: var(--orange);

    box-shadow:
        0 0 0 2px
        rgba(242, 140, 40, 0.12);
}


.cal-day.muted {

    opacity: 0.35;
}


.cal-num {

    font-weight: 900;
}


.cal-count {

    display: inline-block;

    margin-top: 8px;

    padding: 3px 7px;

    background: #e8f3fd;

    color: var(--blue);

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}


/* ==========================================================
   TASKS
   ========================================================== */

.task-list {

    display: grid;

    gap: 10px;
}


.task-card {

    padding: 12px;

    background: #ffffff;

    border:
        1px solid var(--line);

    border-left:
        4px solid var(--blue2);

    border-radius: 11px;
}


.task-card.urgent {

    border-left-color:
        var(--orange2);
}


.task-card small {

    color: var(--muted);
}


.user-choice {

    display: flex;

    align-items: center;

    gap: 10px;
}


.empty {

    padding: 26px;

    color: var(--muted);

    text-align: center;
}


.escalation-box {

    padding: 14px;

    background: #fff7ed;

    border:
        1px solid #ffd9ad;

    border-radius: 12px;
}


.kpi-good {

    color: var(--green);
}


.kpi-bad {

    color: var(--red);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .span-3,
    .span-4,
    .span-5,
    .span-6,
    .span-7,
    .span-8,
    .span-9 {

        grid-column:
            1 / -1;
    }


    .form-grid,
    .split,
    .calendar-shell {

        grid-template-columns:
            1fr;
    }


    .topbar {

        align-items:
            flex-start;

        gap: 12px;

        flex-direction:
            column;
    }


    .container {

        margin-top: 18px;
    }


    .hero h1 {

        font-size: 26px;
    }


    .kv {

        grid-template-columns:
            1fr;
    }


    .kv div:nth-child(odd) {

        margin-top: 8px;
    }


    .cal-day {

        min-height: 76px;
    }


    .brand img {

        width: 88px;
    }


    .public-nav {

        top: 16px;

        right: 18px;

        gap: 7px;
    }


    .public-nav .nav-btn {

        min-height: 39px;

        padding: 0 13px;

        font-size: 12px;
    }


    .login-main {

        padding-top: 90px;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 650px) {

    .public-nav {

        position: relative;

        top: auto;

        right: auto;

        width: 100%;

        max-width: none;

        padding:
            14px 14px 0;

        justify-content: center;

        flex-wrap: wrap;
    }


    .public-nav .nav-btn {

        flex:
            1 1 auto;

        min-width: 105px;

        min-height: 38px;

        padding: 0 11px;

        font-size: 11px;
    }


    .login-main {

        min-height: auto;

        padding:
            24px
            14px
            40px;
    }


    .login-shell {

        max-width: 100%;
    }


    .login-card {

        padding:
            24px 20px;

        border-radius: 16px;
    }


    .login-logo {

        width: 68%;

        max-width: 220px;

        margin-bottom: 18px;
    }


    .login-heading h1 {

        font-size: 21px;
    }


    .login-field input {

        height: 46px;
    }


    .login-button {

        width: 100%;
    }
}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media (max-width: 420px) {

    .public-nav {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 8px;
    }


    .public-nav .nav-primary {

        grid-column:
            1 / -1;
    }


    .public-nav .nav-btn {

        width: 100%;
    }


    .login-main {

        padding-left: 10px;

        padding-right: 10px;
    }


    .login-card {

        padding:
            22px 16px;
    }


    .login-logo {

        width: 72%;

        max-width: 200px;
    }


    .login-footer {

        flex-wrap: wrap;
    }
}