/* /Layout/LoginLayout.razor.rz.scp.css */
.login-main[b-jda7yagoz1] {
    width: 100%;
    height: 100vh;
    overflow: auto;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-lxsvdpzrpw] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Slim brand blue bar pinned to the top, spanning the full width. EE / DigiDocs
   chrome: deep brand blue strip carrying the portal title + a status pill. */
.brand-bar[b-lxsvdpzrpw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 2.25rem;
    padding: 0 1.25rem;
    background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
    color: var(--white);
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--shadow-sm);
}

.brand-bar__title[b-lxsvdpzrpw] {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.95;
}

/* Status pill on the right of the blue bar. */
.brand-bar__pill[b-lxsvdpzrpw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1;
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
    white-space: nowrap;
}

.brand-bar__pill-dot[b-lxsvdpzrpw] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.25);
}

/* Embedded-in-shell pill reads as a context badge, not a live-status dot. */
.brand-bar__pill--shell .brand-bar__pill-dot[b-lxsvdpzrpw] {
    background: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.25);
}

/* The row that holds the sidebar + main content, beneath the brand bar. */
.page-body[b-lxsvdpzrpw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

main[b-lxsvdpzrpw] {
    flex: 1;
    /* Allow the content column to shrink to the space beside the sidebar. Without min-width:0 a
       flex item defaults to min-width:auto (its content's min-content), so a wide descendant (e.g.
       a dense table) stretches <main> past the viewport and produces a document-level horizontal
       scrollbar. With this, wide content scrolls inside its own scroll container instead. */
    min-width: 0;
    max-width: 100%;
    background: var(--bg-main);
}

.sidebar[b-lxsvdpzrpw] {
    /* Sidebar component handles its own styling */
    background: transparent;
    border: none;
}

@media (min-width: 641px) {
    .page-body[b-lxsvdpzrpw] {
        flex-direction: row;
    }

    .sidebar[b-lxsvdpzrpw] {
        /* Sidebar component handles its own width; layout sticks it below the brand bar */
        height: calc(100vh - 2.25rem);
        position: sticky;
        top: 2.25rem;
        overflow: visible;
    }

    article[b-lxsvdpzrpw] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-pnd6s4hptb] {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.top-row[b-pnd6s4hptb] {
    min-height: 3.5rem;
    background-color: var(--primary);
    padding: 0 1rem;
}

.navbar-brand[b-pnd6s4hptb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.5px;
}

.bi[b-pnd6s4hptb] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-pnd6s4hptb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-person-circle[b-pnd6s4hptb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-circle' viewBox='0 0 16 16'%3E%3Cpath d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z'/%3E%3C/svg%3E");
}

.bi-box-arrow-in-right[b-pnd6s4hptb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-arrow-in-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z'/%3E%3Cpath fill-rule='evenodd' d='M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
}

.nav-scrollable[b-pnd6s4hptb] {
    background-color: var(--secondary);
}

.nav-item[b-pnd6s4hptb] {
    font-size: 0.9rem;
    padding: 4px 12px;
}

.nav-item:first-of-type[b-pnd6s4hptb] {
    padding-top: 1rem;
}

.nav-item:last-of-type[b-pnd6s4hptb] {
    padding-bottom: 1rem;
}

.nav-item[b-pnd6s4hptb]  a {
    color: rgba(255, 255, 255, 0.75);
    border-radius: var(--radius-md);
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    padding: 0 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-item[b-pnd6s4hptb]  a.active {
    background-color: var(--primary);
    color: var(--white);
    font-weight: 600;
}

.nav-item[b-pnd6s4hptb]  a:hover {
    background-color: rgba(0, 43, 130, 0.2);
    color: var(--white);
}

@media (min-width: 641px) {
    .navbar-toggler[b-pnd6s4hptb] {
        display: none;
    }

    .collapse[b-pnd6s4hptb] {
        display: block;
    }

    .nav-scrollable[b-pnd6s4hptb] {
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/AddCommentToTicket.razor.rz.scp.css */
/* Moved from inline <style> in AddCommentToTicket.razor (:root vars relocated to app.css) */

    .add-comment-container[b-ifz93l2vda] {
        width: 100%;
        display: flex;
        overflow-x: hidden;
        min-height: 100vh;
        align-items: center;
        flex-direction: column;
        background-color: rgba(246, 246, 246, 1);
        padding: 14px;
    }

    .add-comment-frame[b-ifz93l2vda] {
        width: 100%;
        max-width: 1164px;
        display: flex;
        overflow: hidden;
        position: relative;
        align-items: flex-start;
        border-color: rgba(204, 204, 204, 1);
        border-style: solid;
        border-width: 0.5px;
        border-radius: 8px;
        background-color: rgba(246, 246, 246, 1);
        padding: 22px;
    }

    .add-comment-form[b-ifz93l2vda] {
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 1);
        padding: 20px;
        gap: 29px;
    }

    .form-title[b-ifz93l2vda] {
        color: rgba(0, 31, 87, 1);
        font-size: 20px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: normal;
    }

    /* Ticket Context Card */
    .ticket-context-card[b-ifz93l2vda] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        background-color: rgba(246, 246, 246, 1);
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 12px;
    }

    .context-row[b-ifz93l2vda] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .context-label[b-ifz93l2vda] {
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        color: rgba(134, 134, 134, 1);
        min-width: 80px;
    }

    .context-value[b-ifz93l2vda] {
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 600;
        color: rgba(20, 20, 20, 1);
    }

    /* Warning Message */
    .warning-message[b-ifz93l2vda] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background-color: rgba(255, 149, 0, 0.1);
        border: 1px solid rgba(255, 149, 0, 1);
        border-radius: 12px;
        color: rgba(255, 149, 0, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
    }

    .warning-message svg[b-ifz93l2vda] {
        flex-shrink: 0;
    }

    /* Error Message */
    .error-message[b-ifz93l2vda] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background-color: rgba(255, 59, 48, 0.1);
        border: 1px solid rgba(255, 59, 48, 1);
        border-radius: 12px;
        color: rgba(255, 59, 48, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
    }

    .error-message svg[b-ifz93l2vda] {
        flex-shrink: 0;
    }

    /* Upload Success Message */
    .upload-success-message[b-ifz93l2vda] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background-color: rgba(52, 199, 89, 0.10);
        border: 1px solid rgba(52, 199, 89, 0.6);
        border-radius: 12px;
        color: rgba(20, 110, 52, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        margin-top: 12px;
    }

    .upload-success-message svg[b-ifz93l2vda] {
        flex-shrink: 0;
    }

    /* Form Fields - Reuse from CreateServiceRequest.razor */
    .form-field-full[b-ifz93l2vda] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .field-label[b-ifz93l2vda] {
        color: rgba(20, 20, 20, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: normal;
    }

    .field-label-hint[b-ifz93l2vda] {
        color: rgba(134, 134, 134, 1);
        font-weight: 400;
    }

    .textarea-container[b-ifz93l2vda] {
        width: 100%;
        height: 140px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 12px;
    }

    .textarea-field[b-ifz93l2vda] {
        width: 100%;
        height: 100%;
        padding: 12px;
        border: none;
        background-color: transparent;
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        color: rgba(20, 20, 20, 1);
        resize: none;
        outline: none;
    }

    .textarea-field[b-ifz93l2vda]::placeholder {
        color: rgba(134, 134, 134, 1);
    }

    .resize-handle[b-ifz93l2vda] {
        position: absolute;
        bottom: 4px;
        right: 4px;
        display: flex;
        align-items: center;
        gap: 2px;
        pointer-events: none;
    }

    .word-count[b-ifz93l2vda] {
        color: rgba(134, 134, 134, 1);
        font-size: 12px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        text-align: right;
        align-self: flex-end;
    }

    .file-upload-area[b-ifz93l2vda] {
        width: 100%;
        min-height: 156px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        align-items: center;
        justify-content: center;
        border: 1.5px solid rgba(50, 173, 230, 1);
        border-radius: 12px;
        background-color: rgba(50, 173, 230, 0.06);
        gap: 8px;
        cursor: pointer;
    }

    /* ::deep — targets the <input> rendered by the <InputFile> child component. */
    [b-ifz93l2vda] .file-input-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }

    .file-upload-area:hover[b-ifz93l2vda] {
        background-color: rgba(50, 173, 230, 0.1);
    }

    .upload-text[b-ifz93l2vda] {
        color: rgba(20, 20, 20, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
    }

    .upload-hint[b-ifz93l2vda] {
        color: rgba(134, 134, 134, 1);
        font-size: 12px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
    }

    .upload-button[b-ifz93l2vda] {
        gap: 12px;
        padding: 8px 16px;
        display: flex;
        align-items: center;
        border-radius: 12px;
        justify-content: center;
        background-color: rgba(0, 90, 255, 1);
        margin-top: 4px;
    }

    .upload-button span[b-ifz93l2vda] {
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        line-height: normal;
    }

    .uploaded-files-section[b-ifz93l2vda] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .uploaded-files-title[b-ifz93l2vda] {
        color: rgba(20, 20, 20, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: normal;
    }

    .uploaded-files-grid[b-ifz93l2vda] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }

    .file-preview-card[b-ifz93l2vda] {
        width: 200px;
        height: 132px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 12px;
        overflow: hidden;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .file-preview-header[b-ifz93l2vda] {
        display: flex;
        gap: 8px;
        padding: 16px 12px 12px 12px;
        align-items: center;
    }

    .file-preview-info[b-ifz93l2vda] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }

    .file-preview-name[b-ifz93l2vda] {
        color: rgba(20, 20, 20, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-preview-size[b-ifz93l2vda] {
        color: rgba(134, 134, 134, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
    }

    .file-preview-actions[b-ifz93l2vda] {
        display: flex;
        gap: 12px;
        padding: 0 12px 12px 12px;
        align-items: center;
    }

    .file-delete-btn[b-ifz93l2vda] {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(246, 246, 246, 1) 0%, rgba(230, 230, 230, 1) 100%);
        cursor: pointer;
        padding: 0;
    }

    .file-delete-btn:hover[b-ifz93l2vda] {
        background: linear-gradient(180deg, rgba(230, 230, 230, 1) 0%, rgba(220, 220, 220, 1) 100%);
    }

    .file-preview-btn[b-ifz93l2vda] {
        flex: 1;
        padding: 12px 24px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 8px;
        background-color: transparent;
        cursor: pointer;
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        color: rgba(20, 20, 20, 1);
    }

    .file-preview-btn:disabled[b-ifz93l2vda] {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .form-actions[b-ifz93l2vda] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
    }

    .btn-cancel[b-ifz93l2vda],
    .btn-submit[b-ifz93l2vda] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        padding: 16px 24px;
        cursor: pointer;
        font-family: Ubuntu, sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
        transition: all 0.2s ease;
    }

    .btn-cancel[b-ifz93l2vda] {
        width: 150px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        background-color: transparent;
    }

    .btn-cancel span[b-ifz93l2vda] {
        color: rgba(20, 20, 20, 1);
    }

    .btn-cancel:hover[b-ifz93l2vda] {
        background-color: rgba(246, 246, 246, 1);
    }

    .btn-submit[b-ifz93l2vda] {
        width: 173px;
        background-color: rgba(0, 31, 87, 1);
        border: none;
    }

    .btn-submit span[b-ifz93l2vda] {
        color: rgba(255, 255, 255, 1);
    }

    .btn-submit:hover[b-ifz93l2vda] {
        background-color: rgba(0, 25, 70, 1);
    }

    /* Status Badges */
    .status-badge[b-ifz93l2vda] {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        display: inline-block;
    }

    .status-open[b-ifz93l2vda] {
        border: 0.5px solid rgba(255, 59, 48, 1);
        background-color: rgba(255, 59, 48, 0.12);
        color: rgba(255, 59, 48, 1);
    }

    .status-in-progress[b-ifz93l2vda] {
        border: 0.5px solid rgba(0, 122, 255, 1);
        background-color: rgba(0, 122, 255, 0.12);
        color: rgba(0, 122, 255, 1);
    }

    .status-resolved[b-ifz93l2vda] {
        border: 0.5px solid rgba(255, 149, 0, 1);
        background-color: rgba(255, 149, 0, 0.12);
        color: rgba(255, 149, 0, 1);
    }

    .status-reopened[b-ifz93l2vda] {
        border: 0.5px solid rgba(255, 149, 0, 1);
        background-color: rgba(255, 149, 0, 0.12);
        color: rgba(255, 149, 0, 1);
    }

    .status-closed[b-ifz93l2vda] {
        border: 0.5px solid rgba(52, 199, 89, 1);
        background-color: rgba(52, 199, 89, 0.12);
        color: rgba(52, 199, 89, 1);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .add-comment-container[b-ifz93l2vda] {
            padding: 8px;
        }

        .add-comment-frame[b-ifz93l2vda] {
            padding: 16px;
        }

        .add-comment-form[b-ifz93l2vda] {
            padding: 16px;
        }

        .form-actions[b-ifz93l2vda] {
            flex-direction: column-reverse;
            gap: 12px;
        }

        .btn-cancel[b-ifz93l2vda],
        .btn-submit[b-ifz93l2vda] {
            width: 100%;
        }

        .uploaded-files-grid[b-ifz93l2vda] {
            grid-template-columns: 1fr;
        }
    }
/* /Pages/AdminCanteenAnalytics.razor.rz.scp.css */
/* Canteen Analytics — visual drill-down for Weekly Insights */

.analytics-page[b-0soccrf2i3] {
    font-family: 'Ubuntu', sans-serif;
}

.analytics-header[b-0soccrf2i3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}

.analytics-header__text[b-0soccrf2i3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3);
}

.analytics-header__text h1[b-0soccrf2i3] {
    color: var(--primary-blue);
    font-size: var(--font-size-2xl);
    font-weight: 500;
    margin: 0;
}

.analytics-header__actions[b-0soccrf2i3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.window-toggle[b-0soccrf2i3] {
    display: inline-flex;
    background: var(--panel);
    border-radius: var(--radius-md);
    padding: 4px;
    border: 0.5px solid var(--border-color);
}

.window-toggle__btn[b-0soccrf2i3] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 6px 14px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.window-toggle__btn:hover[b-0soccrf2i3] {
    color: var(--primary-blue);
}

.window-toggle__btn.active[b-0soccrf2i3] {
    background: var(--card-background);
    color: var(--primary-blue);
    box-shadow: var(--shadow-sm);
}

.analytics-loading[b-0soccrf2i3] {
    text-align: center;
    padding: 80px 0;
}

/* Summary stat row */
.analytics-summary[b-0soccrf2i3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.summary-card[b-0soccrf2i3] {
    background: var(--card-background);
    border: 0.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.summary-card__label[b-0soccrf2i3] {
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
}

.summary-card__value[b-0soccrf2i3] {
    font-size: 2rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.1;
}

.summary-card__value--small[b-0soccrf2i3] {
    font-size: var(--font-size-lg);
    font-weight: 500;
}

.summary-card__unit[b-0soccrf2i3] {
    font-size: var(--font-size-base);
    color: var(--text-light);
    font-weight: 400;
}

.summary-card__sub[b-0soccrf2i3] {
    font-size: var(--font-size-xs);
    color: var(--text-light);
}

.summary-card__delta[b-0soccrf2i3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.summary-card__delta--up[b-0soccrf2i3]    { color: var(--success-green); }
.summary-card__delta--down[b-0soccrf2i3]  { color: #B91C1C; }
.summary-card__delta--neutral[b-0soccrf2i3] { color: var(--text-light); }

.summary-card__stars[b-0soccrf2i3] {
    display: inline-flex;
    gap: 2px;
}

.summary-card__star[b-0soccrf2i3] {
    color: var(--gray-300);
    font-size: var(--font-size-base);
}

.summary-card__star--on[b-0soccrf2i3] {
    color: #F59E0B;
}

/* Chart sections */
.analytics-chart[b-0soccrf2i3] {
    background: var(--card-background);
    border: 0.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.analytics-chart__header[b-0soccrf2i3] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    flex-wrap: wrap;
}

.analytics-chart__header h2[b-0soccrf2i3] {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.analytics-chart__hint[b-0soccrf2i3] {
    font-size: var(--font-size-xs);
    color: var(--text-light);
}

.analytics-chart__empty[b-0soccrf2i3] {
    text-align: center;
    padding: 40px 0;
    color: var(--text-light);
    font-size: var(--font-size-sm);
}

/* Trend chart (SVG) */
.trend-chart[b-0soccrf2i3] {
    width: 100%;
    height: 220px;
    display: block;
}

.trend-chart__grid[b-0soccrf2i3] {
    stroke: var(--gray-200);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}

.trend-chart__axis[b-0soccrf2i3] {
    stroke: var(--border-color);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.trend-chart__line[b-0soccrf2i3] {
    fill: none;
    stroke: var(--primary-blue);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.trend-chart__dot[b-0soccrf2i3] {
    fill: var(--card-background);
    stroke: var(--primary-blue);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}

.trend-chart__dot:hover[b-0soccrf2i3] {
    fill: var(--primary-blue);
}

.trend-chart__legend[b-0soccrf2i3] {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-3);
    font-size: var(--font-size-xs);
    color: var(--text-light);
}

/* Rating distribution rows */
.distribution-row[b-0soccrf2i3] {
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-2) 0;
}

.distribution-row__label[b-0soccrf2i3] {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 500;
}

.distribution-row__bar-track[b-0soccrf2i3] {
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    height: 12px;
    overflow: hidden;
}

.distribution-row__bar[b-0soccrf2i3] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-blue), #1E40AF);
    border-radius: var(--radius-sm);
    transition: width var(--transition-slow);
}

.distribution-row__count[b-0soccrf2i3] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: right;
}

.analytics-footer[b-0soccrf2i3] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-6);
}

/* Responsive */
@media (max-width: 768px) {
    .analytics-header[b-0soccrf2i3] {
        flex-direction: column;
        align-items: stretch;
    }

    .analytics-header__actions[b-0soccrf2i3] {
        width: 100%;
        justify-content: space-between;
    }

    .window-toggle[b-0soccrf2i3] {
        flex: 1;
    }

    .window-toggle__btn[b-0soccrf2i3] {
        flex: 1;
    }

    .analytics-summary[b-0soccrf2i3] {
        grid-template-columns: 1fr 1fr;
    }

    .summary-card__value[b-0soccrf2i3] {
        font-size: 1.5rem;
    }
}
/* /Pages/Components/AddMealInput.razor.rz.scp.css */
.add-meal-input[b-349nuicvpl] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-family: 'Ubuntu', sans-serif;
}

.add-meal-input.disabled[b-349nuicvpl] {
    opacity: 0.6;
    pointer-events: none;
}

.input-wrapper[b-349nuicvpl] {
    position: relative;
    flex: 1;
}

/* Input field */
.meal-input[b-349nuicvpl] {
    width: 100%;
    padding: 10px 16px;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
    color: #000F29;
    background: #FFFFFF;
    border: 0.5px solid #CCCCCC;
    border-radius: 12px;
    outline: none;
    transition: all 0.2s ease;
}

.meal-input[b-349nuicvpl]::placeholder {
    color: #8B8B8B;
}

.meal-input:focus[b-349nuicvpl] {
    border-color: #002B82;
    box-shadow: 0 0 0 3px rgba(0, 43, 130, 0.1);
}

.meal-input:disabled[b-349nuicvpl] {
    background: #F9FAFB;
    color: #9CA3AF;
    cursor: not-allowed;
}

/* Suggestions dropdown */
.suggestions-dropdown[b-349nuicvpl] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: #FFFFFF;
    border: 0.5px solid #CCCCCC;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.suggestion-item[b-349nuicvpl] {
    padding: 10px 16px;
    font-size: 15px;
    color: #000F29;
    cursor: pointer;
    transition: background 0.2s ease;
}

.suggestion-item:hover[b-349nuicvpl] {
    background: #F3F5F8;
}

.suggestion-item:first-child[b-349nuicvpl] {
    border-radius: 8px 8px 0 0;
}

.suggestion-item:last-child[b-349nuicvpl] {
    border-radius: 0 0 8px 8px;
}

/* Add button */
.btn-add-meal[b-349nuicvpl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Ubuntu', sans-serif;
    color: #FFFFFF;
    background: #002B82;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-add-meal:hover:not(:disabled)[b-349nuicvpl] {
    background: #001D5C;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 43, 130, 0.2);
}

.btn-add-meal:disabled[b-349nuicvpl] {
    background: #D1D5DB;
    cursor: not-allowed;
    transform: none;
}

.btn-add-meal svg[b-349nuicvpl] {
    flex-shrink: 0;
}

/* Loading spinner */
.spinner-small[b-349nuicvpl] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin-b-349nuicvpl 0.6s linear infinite;
}

@keyframes spin-b-349nuicvpl {
    to {
        transform: rotate(360deg);
    }
}

/* Meal Counter */
.meal-counter[b-349nuicvpl] {
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
    text-align: right;
    transition: color 0.2s ease;
}

.counter-normal[b-349nuicvpl] {
    color: #6B7280;
}

.counter-warning[b-349nuicvpl] {
    color: #F59E0B;
}

.counter-limit-reached[b-349nuicvpl] {
    color: #DC2626;
    font-weight: 600;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .add-meal-input[b-349nuicvpl] {
        flex-direction: column;
        align-items: stretch;
    }

    .meal-input[b-349nuicvpl] {
        font-size: 15px;
        padding: 9px 14px;
    }

    .btn-add-meal[b-349nuicvpl] {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        font-size: 15px;
    }

    .suggestion-item[b-349nuicvpl] {
        padding: 9px 14px;
        font-size: 14px;
    }

    .meal-counter[b-349nuicvpl] {
        font-size: 11px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .meal-input[b-349nuicvpl] {
        font-size: 14px;
        padding: 8px 12px;
    }

    .btn-add-meal[b-349nuicvpl] {
        font-size: 14px;
        padding: 9px 14px;
    }

    .suggestion-item[b-349nuicvpl] {
        padding: 8px 12px;
        font-size: 13px;
    }

    .meal-counter[b-349nuicvpl] {
        font-size: 10px;
    }
}
/* /Pages/Components/AdminDashboardSidebar.razor.rz.scp.css */
/* ========================================
   Admin Sidebar Component Styles
   Ported from VMS visual language, adapted to E_Service structure
   (top-level buttons, Food Zone / Service Requests submenus, settings dropdown)
   ======================================== */

/* ========================================
   Mobile Overlay
   ======================================== */
.sidebar-overlay[b-11jazju4gy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 998;
}

.sidebar-overlay.show[b-11jazju4gy] {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   Sidebar Navigation Container
   ======================================== */
.sidebar-nav[b-11jazju4gy] {
    --sidebar-bg: rgba(255, 255, 255, 1);
    --sidebar-line: rgba(229, 231, 235, 1);
    --sidebar-text: rgba(20, 20, 20, 1);
    --sidebar-primary: rgba(0, 31, 87, 1);
    --sidebar-primary-soft: rgba(243, 246, 255, 1);
    --sidebar-primary-faint: rgba(0, 31, 87, 0.06);
    --sidebar-danger: rgba(245, 31, 0, 1);
    --sidebar-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.35);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: 100vh;
    padding: 0;
    background: var(--sidebar-bg);
    border-right: none;
    gap: 0;
    position: relative;
    transition: width 0.3s ease;
}

/* Kill underlines everywhere inside the sidebar */
.sidebar-nav a[b-11jazju4gy],
.sidebar-nav a:hover[b-11jazju4gy],
.sidebar-nav a:active[b-11jazju4gy],
.sidebar-nav a:focus[b-11jazju4gy],
.sidebar-nav a:visited[b-11jazju4gy],
.sidebar-nav a.active[b-11jazju4gy] {
    text-decoration: none !important;
}

/* ========================================
   Collapsed State
   ======================================== */
.sidebar-nav.collapsed[b-11jazju4gy] {
    width: 64px;
    padding: 0;
}

.sidebar-nav.collapsed .sidebar-menu__link[b-11jazju4gy],
.sidebar-nav.collapsed .sidebar-dashboard__btn[b-11jazju4gy],
.sidebar-nav.collapsed .sidebar-food-zone__btn[b-11jazju4gy] {
    justify-content: center;
    padding: 8px;
}

.sidebar-nav.collapsed .sidebar-footer__link[b-11jazju4gy] {
    justify-content: center;
    padding: 0;
}

/* ========================================
   Mobile Toggle Button (Hamburger)
   ======================================== */
.sidebar-toggle[b-11jazju4gy] {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1000;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle:hover[b-11jazju4gy] {
    background: rgba(15, 23, 42, 0.06);
    border-radius: 6px;
}

.sidebar-toggle:focus[b-11jazju4gy] {
    outline: 2px solid rgba(0, 31, 87, 0.35);
    outline-offset: 2px;
    border-radius: 6px;
}

.hamburger-icon[b-11jazju4gy] {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--sidebar-text);
    position: relative;
    transition: background 0.3s ease;
}

.hamburger-icon[b-11jazju4gy]::before,
.hamburger-icon[b-11jazju4gy]::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background: var(--sidebar-text);
    transition: transform 0.3s ease;
}

.hamburger-icon[b-11jazju4gy]::before {
    top: -8px;
}

.hamburger-icon[b-11jazju4gy]::after {
    top: 8px;
}

/* ========================================
   Collapse/Expand Toggle Button (Desktop Only)
   Round chevron pinned to sidebar's right edge
   ======================================== */
.sidebar-collapse-toggle[b-11jazju4gy] {
    display: none;
    position: absolute;
    top: 72px;
    right: -12px;
    width: 24px;
    height: 24px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border: 1px solid var(--sidebar-line);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 2px 6px rgba(15, 23, 42, 0.06);
    transition: background-color 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease,
                transform 0.15s ease;
}

.sidebar-collapse-toggle:hover[b-11jazju4gy] {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(0, 31, 87, 0.20);
    color: var(--sidebar-primary);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08),
                0 4px 10px rgba(15, 23, 42, 0.08);
}

.sidebar-collapse-toggle:focus-visible[b-11jazju4gy] {
    outline: 2px solid rgba(0, 31, 87, 0.35);
    outline-offset: 2px;
}

.sidebar-collapse-toggle:active[b-11jazju4gy] {
    transform: scale(0.94);
    background: rgba(15, 23, 42, 0.10);
}

.sidebar-collapse-icon[b-11jazju4gy] {
    display: block;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transform-origin: center;
    margin-left: 2px;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    background: transparent;
    border-right: none;
    border-bottom: none;
}

.sidebar-collapse-icon.collapsed[b-11jazju4gy] {
    transform: rotate(135deg);
    margin-left: -2px;
}

.sidebar-collapse-toggle[b-11jazju4gy]::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    background: rgba(20, 20, 20, 0.92);
    color: #FFFFFF;
    font: 12px/1 Ubuntu, sans-serif;
    white-space: nowrap;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease 0.4s, visibility 0.15s ease 0.4s;
    z-index: 1002;
}

.sidebar-collapse-toggle:hover[b-11jazju4gy]::after,
.sidebar-collapse-toggle:focus-visible[b-11jazju4gy]::after {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   Sidebar Header - Logo Section
   ======================================== */
.sidebar-top[b-11jazju4gy] {
    padding: 30px 30px 0;
}

.sidebar-header[b-11jazju4gy] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}

.sidebar-header a[b-11jazju4gy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    text-decoration: none !important;
}

.sidebar-logo[b-11jazju4gy] {
    width: 120px;
    height: 53px;
    object-fit: contain;
    max-width: 100%;
}

.sidebar-logo-divider[b-11jazju4gy] {
    margin-top: 24px;
    height: 1px;
    width: 100%;
    background-color: var(--sidebar-line);
}

.sidebar-header.hidden[b-11jazju4gy] {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.sidebar-logo-divider.hidden[b-11jazju4gy] {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

/* ========================================
   Sidebar Menu
   ======================================== */
.sidebar-menu[b-11jazju4gy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    padding: 40px 16px 0 14px;
    margin: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.sidebar-menu__item[b-11jazju4gy] {
    width: 100%;
}

/* Shared pill base — applies to NavLinks AND the two top-level buttons */
.sidebar-menu__link[b-11jazju4gy],
.sidebar-dashboard__btn[b-11jazju4gy],
.sidebar-food-zone__btn[b-11jazju4gy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    color: var(--sidebar-text);
    text-decoration: none !important;
    border-radius: 50px;
    transition: background-color 0.15s ease, color 0.15s ease;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 400;
    min-height: 40px;
    background-color: transparent;
    text-align: left;
    width: 100%;
    border: none;
    cursor: pointer;
}

/* Hover is intentionally a no-op (matches VMS) */
.sidebar-menu__link:hover[b-11jazju4gy],
.sidebar-dashboard__btn:hover[b-11jazju4gy],
.sidebar-food-zone__btn:hover[b-11jazju4gy] {
    background-color: transparent;
    color: var(--sidebar-text);
    text-decoration: none !important;
}

/* Focus: outline ring only, NEVER a navy fill */
.sidebar-menu__link:focus[b-11jazju4gy],
.sidebar-dashboard__btn:focus[b-11jazju4gy],
.sidebar-food-zone__btn:focus[b-11jazju4gy] {
    outline: 2px solid rgba(0, 31, 87, 0.35);
    outline-offset: 2px;
    text-decoration: none !important;
}

.sidebar-menu__link:focus:not(:focus-visible)[b-11jazju4gy],
.sidebar-dashboard__btn:focus:not(:focus-visible)[b-11jazju4gy],
.sidebar-food-zone__btn:focus:not(:focus-visible)[b-11jazju4gy] {
    outline: none;
}

/* Active / Active-parent: navy pill, white text */
.sidebar-menu__link.active[b-11jazju4gy],
.sidebar-menu__link.active-parent[b-11jazju4gy],
.sidebar-dashboard__btn.active[b-11jazju4gy],
.sidebar-dashboard__btn.active-parent[b-11jazju4gy],
.sidebar-food-zone__btn.active[b-11jazju4gy],
.sidebar-food-zone__btn.active-parent[b-11jazju4gy] {
    background-color: var(--sidebar-primary);
    color: rgba(255, 255, 255, 1);
    box-shadow: none;
    text-decoration: none !important;
}

.sidebar-menu__link.active:hover[b-11jazju4gy],
.sidebar-menu__link.active-parent:hover[b-11jazju4gy],
.sidebar-dashboard__btn.active:hover[b-11jazju4gy],
.sidebar-dashboard__btn.active-parent:hover[b-11jazju4gy],
.sidebar-food-zone__btn.active:hover[b-11jazju4gy],
.sidebar-food-zone__btn.active-parent:hover[b-11jazju4gy] {
    background-color: var(--sidebar-primary);
    color: rgba(255, 255, 255, 1);
    text-decoration: none !important;
}

/* ========================================
   Sidebar Menu Icons (image-based)
   Turn icons white when their row is active
   ======================================== */
.sidebar-menu__icon[b-11jazju4gy] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: filter 0.15s ease, opacity 0.15s ease;
    opacity: 1;
}

.sidebar-menu__link.active .sidebar-menu__icon[b-11jazju4gy],
.sidebar-menu__link.active-parent .sidebar-menu__icon[b-11jazju4gy],
.sidebar-dashboard__btn.active .sidebar-menu__icon[b-11jazju4gy],
.sidebar-dashboard__btn.active-parent .sidebar-menu__icon[b-11jazju4gy],
.sidebar-food-zone__btn.active .sidebar-menu__icon[b-11jazju4gy],
.sidebar-food-zone__btn.active-parent .sidebar-menu__icon[b-11jazju4gy] {
    filter: brightness(0) invert(1);
}

.sidebar-menu__icon--composite[b-11jazju4gy] {
    width: 20px;
    height: 20px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
}

.sidebar-menu__icon--composite img[b-11jazju4gy] {
    position: absolute;
    transition: filter 0.2s ease;
}

.sidebar-menu__link.active .sidebar-menu__icon--composite img[b-11jazju4gy],
.sidebar-menu__link.active-parent .sidebar-menu__icon--composite img[b-11jazju4gy] {
    filter: brightness(0) invert(1);
}

.regulatory-icon-1[b-11jazju4gy] {
    width: 15px;
    height: 13px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
}

.regulatory-icon-2[b-11jazju4gy] {
    width: 12px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
}

.sidebar-menu__text[b-11jazju4gy] {
    flex: 1;
    vertical-align: middle;
    line-height: 20px;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    text-decoration: none !important;
}

.sidebar-menu__text.hidden[b-11jazju4gy] {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

/* ========================================
   Food Zone / Service Requests submenu (E_Service-specific)
   ======================================== */
.sidebar-food-zone[b-11jazju4gy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.sidebar-food-zone.hidden[b-11jazju4gy],
.sidebar-dashboard-link.hidden[b-11jazju4gy] {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.sidebar-food-zone__chevron[b-11jazju4gy] {
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.sidebar-food-zone__chevron.open[b-11jazju4gy] {
    transform: rotate(180deg);
}

.sidebar-food-zone__submenu[b-11jazju4gy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    padding: 8px 0 0 8px;
    margin: 0 0 0 20px;
    border-left: 2px solid var(--sidebar-line);
    position: relative;
    transition: border-left-color 0.2s ease;
}

/* When the open submenu contains the current sub-route, paint its guide rail navy */
/*
.sidebar-food-zone__submenu:has(.sidebar-food-zone__submenu-link.active) {
    border-left-color: var(--sidebar-primary);
}
*/
.sidebar-food-zone__submenu-item[b-11jazju4gy] {
    width: 100%;
}

[b-11jazju4gy] .sidebar-food-zone__submenu-link {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    color: var(--sidebar-text);
    text-decoration: none !important;
    border-radius: 50px;
    transition: background-color 0.15s ease, color 0.15s ease;
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px;
    font-weight: 400;
    min-height: 36px;
    line-height: 1.4;
    background-color: transparent;
}

[b-11jazju4gy] .sidebar-food-zone__submenu-link:hover {
    background-color: var(--sidebar-primary-faint);
    color: var(--sidebar-text);
    text-decoration: none !important;
}

[b-11jazju4gy] .sidebar-food-zone__submenu-link:focus-visible {
    outline: 2px solid rgba(0, 31, 87, 0.35);
    outline-offset: 2px;
    text-decoration: none !important;
}

[b-11jazju4gy] .sidebar-food-zone__submenu-link.active {
    background-color: var(--sidebar-primary-soft);
    color: var(--sidebar-primary);
    font-weight: 500;
    text-decoration: none !important;
}

[b-11jazju4gy] .sidebar-food-zone__submenu-link.active:hover {
    background-color: var(--sidebar-primary-soft);
    color: var(--sidebar-primary);
    text-decoration: none !important;
}

/* Belt-and-suspenders: defeat the global `a:hover { text-decoration: underline }` in app.css */
[b-11jazju4gy] .sidebar-food-zone__submenu-link,
[b-11jazju4gy] .sidebar-food-zone__submenu-link *,
[b-11jazju4gy] .sidebar-food-zone__submenu-link:hover,
[b-11jazju4gy] .sidebar-food-zone__submenu-link:hover *,
[b-11jazju4gy] .sidebar-food-zone__submenu-link:focus,
[b-11jazju4gy] .sidebar-food-zone__submenu-link:focus * {
    text-decoration: none !important;
}

/* ========================================
   Sidebar Bottom (Footer area)
   ======================================== */
.sidebar-bottom[b-11jazju4gy] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 32px 26px;
    border-top: none;
}

.sidebar-nav.collapsed .sidebar-bottom[b-11jazju4gy] {
    padding-left: 0;
    padding-right: 0;
}

/* Hidden when embedded in the OnePortal shell (MainLayout passes Embedded=true). */
.sidebar-bottom.hidden[b-11jazju4gy] {
    display: none;
}

.sidebar-footer[b-11jazju4gy] {
    display: flex;
    justify-content: stretch;
    align-items: center;
    padding-top: 0;
    border-top: none;
}

.sidebar-footer__link[b-11jazju4gy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    color: var(--sidebar-text);
    text-decoration: none !important;
    border-radius: 0;
    transition: color 0.15s ease;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 400;
    min-height: 24px;
    width: 100%;
    background-color: transparent;
}

button.sidebar-footer__link[b-11jazju4gy] {
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.sidebar-footer__link:hover[b-11jazju4gy] {
    background-color: transparent;
    color: var(--sidebar-text);
    text-decoration: none !important;
}

.sidebar-footer__link:focus[b-11jazju4gy] {
    outline: 2px solid rgba(0, 31, 87, 0.35);
    outline-offset: 2px;
    text-decoration: none !important;
}

.sidebar-footer__link:focus:not(:focus-visible)[b-11jazju4gy] {
    outline: none;
}

.sidebar-footer__link.active[b-11jazju4gy] {
    background-color: transparent;
    color: var(--sidebar-text);
    text-decoration: none !important;
}

.sidebar-footer__icon[b-11jazju4gy] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    opacity: 0.95;
    transition: opacity 0.15s ease;
}

.sidebar-footer__text[b-11jazju4gy] {
    transition: opacity 0.2s ease, visibility 0.2s ease;
    text-decoration: none !important;
}

.sidebar-footer__text.hidden[b-11jazju4gy] {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

/* Logout: red text on transparent bg (NO black background) */
.sidebar-footer__link.sidebar-logout[b-11jazju4gy] {
    color: var(--sidebar-danger);
    background-color: transparent;
    text-decoration: none !important;
}

.sidebar-footer__link.sidebar-logout:hover[b-11jazju4gy],
.sidebar-footer__link.sidebar-logout.active[b-11jazju4gy] {
    color: var(--sidebar-danger);
    background-color: transparent;
    text-decoration: none !important;
}

/* ========================================
   Mobile Responsive Styles (< 641px)
   ======================================== */
@media (max-width: 640.98px) {
    .sidebar-overlay[b-11jazju4gy] {
        display: block;
    }

    .sidebar-nav[b-11jazju4gy] {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 999;
        box-shadow: var(--sidebar-shadow-lg);
    }

    .sidebar-nav.show[b-11jazju4gy] {
        transform: translateX(0);
    }

    .sidebar-toggle[b-11jazju4gy] {
        display: flex;
    }

    .sidebar-collapse-toggle[b-11jazju4gy] {
        display: none !important;
    }

    .sidebar-top[b-11jazju4gy] {
        padding-top: 3rem;
    }
}

/* ========================================
   Desktop Styles (>= 641px)
   ======================================== */
@media (min-width: 641px) {
    .sidebar-overlay[b-11jazju4gy] {
        display: none !important;
    }

    .sidebar-nav[b-11jazju4gy] {
        width: 260px;
        position: sticky;
        top: 0;
        transform: none !important;
    }

    .sidebar-nav.collapsed[b-11jazju4gy] {
        width: 64px;
    }

    .sidebar-toggle[b-11jazju4gy] {
        display: none !important;
    }

    .sidebar-collapse-toggle[b-11jazju4gy] {
        display: flex;
    }

    .sidebar-header[b-11jazju4gy] {
        padding-top: 0;
        transition: opacity 0.2s ease, visibility 0.2s ease, height 0.2s ease;
    }

    .sidebar-nav.collapsed .sidebar-food-zone[b-11jazju4gy],
    .sidebar-nav.collapsed .sidebar-dashboard-link[b-11jazju4gy] {
        display: none;
    }
}

/* ========================================
   Accessibility - High Contrast Mode
   ======================================== */
@media (prefers-contrast: high) {
    .sidebar-menu__link:focus[b-11jazju4gy],
    .sidebar-dashboard__btn:focus[b-11jazju4gy],
    .sidebar-food-zone__btn:focus[b-11jazju4gy],
    [b-11jazju4gy] .sidebar-food-zone__submenu-link:focus,
    .sidebar-footer__link:focus[b-11jazju4gy] {
        outline-width: 3px;
    }

    .sidebar-menu__link.active[b-11jazju4gy],
    .sidebar-menu__link.active-parent[b-11jazju4gy],
    .sidebar-dashboard__btn.active-parent[b-11jazju4gy],
    .sidebar-food-zone__btn.active-parent[b-11jazju4gy] {
        border: 2px solid rgba(255, 255, 255, 0.85);
    }

    [b-11jazju4gy] .sidebar-food-zone__submenu-link.active {
        border: 2px solid var(--sidebar-primary);
    }
}

/* ========================================
   Accessibility - Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .sidebar-nav[b-11jazju4gy],
    .sidebar-overlay[b-11jazju4gy],
    .sidebar-menu__link[b-11jazju4gy],
    .sidebar-dashboard__btn[b-11jazju4gy],
    .sidebar-food-zone__btn[b-11jazju4gy],
    .sidebar-footer__link[b-11jazju4gy],
    .sidebar-menu__icon[b-11jazju4gy],
    .sidebar-footer__icon[b-11jazju4gy],
    .hamburger-icon[b-11jazju4gy],
    .hamburger-icon[b-11jazju4gy]::before,
    .hamburger-icon[b-11jazju4gy]::after,
    .sidebar-collapse-toggle[b-11jazju4gy],
    .sidebar-collapse-icon[b-11jazju4gy],
    .sidebar-menu__text[b-11jazju4gy],
    .sidebar-footer__text[b-11jazju4gy],
    .sidebar-food-zone__chevron[b-11jazju4gy],
    .sidebar-header[b-11jazju4gy] {
        transition: none;
    }

    [b-11jazju4gy] .sidebar-food-zone__submenu-link {
        transition: none;
    }
}
/* /Pages/Components/BarChart.razor.rz.scp.css */
.bar-chart[b-eijwuyke9n] {
    width: 100%;
    font-family: 'Ubuntu', sans-serif;
}

.bar-chart__svg[b-eijwuyke9n] {
    width: 100%;
    height: auto;
    display: block;
}

.bar-chart__grid[b-eijwuyke9n] {
    stroke: rgba(148, 163, 184, 0.35);
    stroke-width: 1;
}

.bar-chart__axis-label[b-eijwuyke9n] {
    font-size: 9px;
    fill: #94a3b8;
}

.bar-chart__value-label[b-eijwuyke9n] {
    font-size: 10px;
    font-weight: 600;
    fill: #1f2937;
}

.bar-chart-empty[b-eijwuyke9n] {
    text-align: center;
    padding: 40px 0;
    color: var(--text-light, #8B8B8B);
    font-size: 14px;
}
/* /Pages/Components/Breadcrumb.razor.rz.scp.css */
/* Global breadcrumb strip — sits below PageHeader, above page content */
.breadcrumb[b-0p7vqd2zlx] {
    font-family: 'Ubuntu', sans-serif;
    padding: var(--spacing-3, 12px) var(--spacing-6, 24px);
    background-color: transparent;
    border-bottom: 0.5px solid var(--border-color, #CCCCCC);
}

.breadcrumb__list[b-0p7vqd2zlx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm, 14px);
}

.breadcrumb__item[b-0p7vqd2zlx] {
    display: inline-flex;
    align-items: center;
}

.breadcrumb__item a[b-0p7vqd2zlx] {
    color: var(--text-secondary, #4B5563);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb__item a:hover[b-0p7vqd2zlx],
.breadcrumb__item a:focus-visible[b-0p7vqd2zlx] {
    color: var(--primary-blue, #002B82);
    text-decoration: underline;
    outline: none;
}

.breadcrumb__item.is-current span[b-0p7vqd2zlx] {
    color: var(--primary-blue, #002B82);
    font-weight: 500;
}

.breadcrumb__sep[b-0p7vqd2zlx] {
    color: var(--text-light, #8B8B8B);
    user-select: none;
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 768px) {
    .breadcrumb[b-0p7vqd2zlx] {
        padding: 8px 16px;
    }

    .breadcrumb__list[b-0p7vqd2zlx] {
        font-size: 13px;
        gap: 6px;
    }
}
/* /Pages/Components/ConfirmationModal.razor.rz.scp.css */
/* Confirmation Modal Component - Matches Figma Design */
.figma-modal-overlay[b-x16wxefifw] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-x16wxefifw 0.2s ease;
}

@keyframes fadeIn-b-x16wxefifw {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.figma-modal-container[b-x16wxefifw] {
    width: 629px;
    max-width: calc(100vw - 48px);
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp-b-x16wxefifw 0.3s ease;
}

@keyframes slideUp-b-x16wxefifw {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Content */
.figma-modal-content[b-x16wxefifw] {
    padding: 32px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
    position: relative;
}

.modal-text-section[b-x16wxefifw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.figma-modal-title[b-x16wxefifw] {
    color: var(--dl-color-default-secondary);
    font-size: 20px;
    font-family: Ubuntu;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.figma-modal-message[b-x16wxefifw] {
    color: var(--dl-color-default-subbody);
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    white-space: pre-line;
}

.modal-close-icon[b-x16wxefifw] {
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--dl-color-default-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.modal-close-icon:hover[b-x16wxefifw] {
    color: var(--dl-color-default-secondary);
}

/* Modal Actions */
.figma-modal-actions[b-x16wxefifw] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 0 32px 32px 32px;
}

.figma-modal-btn[b-x16wxefifw] {
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-family: Ubuntu;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.figma-btn-cancel[b-x16wxefifw] {
    background-color: rgba(255, 255, 255, 1);
    color: var(--dl-color-default-headings);
    border: 0.5px solid rgba(204, 204, 204, 1);
    font-weight: 400;
}

.figma-btn-cancel:hover[b-x16wxefifw] {
    background-color: rgba(248, 248, 248, 1);
}

.figma-btn-confirm[b-x16wxefifw] {
    background-color: var(--dl-color-default-accent);
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
}

.figma-btn-confirm:hover:not(:disabled):not(.loading)[b-x16wxefifw] {
    background-color: rgba(0, 31, 92, 1);
}

.figma-btn-confirm.loading[b-x16wxefifw] {
    background-color: rgba(0, 43, 130, 0.35);
    cursor: not-allowed;
}

.figma-btn-confirm.danger[b-x16wxefifw] {
    background-color: #DC2626;
}

.figma-btn-confirm.danger:hover:not(:disabled)[b-x16wxefifw] {
    background-color: #B91C1C;
}

/* Responsive */
@media (max-width: 768px) {
    .figma-modal-container[b-x16wxefifw] {
        width: calc(100vw - 32px);
    }

    .figma-modal-content[b-x16wxefifw] {
        padding: 24px;
        flex-direction: column;
    }

    .figma-modal-actions[b-x16wxefifw] {
        padding: 0 24px 24px 24px;
        flex-direction: column;
    }

    .figma-modal-btn[b-x16wxefifw] {
        width: 100%;
    }
}
/* /Pages/Components/CustomCalendar.razor.rz.scp.css */
/* Custom Calendar Component - Matches Figma Design */
.custom-calendar[b-q262p89t3h] {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(224, 230, 237, 1);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0px 4px 10px 1px rgba(0, 15, 41, 0.08);
    width: 288px;
    font-family: Ubuntu, sans-serif;
}

/* Calendar Header */
.calendar-header[b-q262p89t3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.calendar-nav-btn[b-q262p89t3h] {
    background: rgba(246, 246, 246, 1);
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dl-color-default-secondary);
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
}

.calendar-nav-btn:hover[b-q262p89t3h] {
    background-color: var(--dl-color-default-lightbackground);
}

.calendar-month-year[b-q262p89t3h] {
    font-size: 14px;
    font-weight: 600;
    color: var(--dl-color-default-secondary);
    font-family: Ubuntu;
}

/* Weekdays */
.calendar-weekdays[b-q262p89t3h] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.calendar-weekday[b-q262p89t3h] {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    padding: 8px 0;
}

/* Calendar Days Grid */
.calendar-days[b-q262p89t3h] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day[b-q262p89t3h] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #000F29;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.calendar-day:not(.disabled):not(.other-month):hover[b-q262p89t3h] {
    background-color: #EEF1F6;
}

/* Other month days */
.calendar-day.other-month[b-q262p89t3h] {
    color: #D1D5DB;
}

/* Today */
.calendar-day.today[b-q262p89t3h] {
    font-weight: 600;
    color: #002B82;
}

.calendar-day.today[b-q262p89t3h]::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    background-color: #002B82;
    border-radius: 50%;
}

/* Selected */
.calendar-day.selected[b-q262p89t3h],
.calendar-day.range-endpoint[b-q262p89t3h] {
    background-color: rgba(59, 130, 246, 1);
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 60px;
}

.calendar-day.selected:hover[b-q262p89t3h],
.calendar-day.range-endpoint:hover[b-q262p89t3h] {
    background-color: rgba(37, 99, 235, 1);
}

/* Range mode */
.calendar-day.range-start[b-q262p89t3h] {
    background-color: rgba(59, 130, 246, 1);
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 60px;
}

.calendar-day.in-range[b-q262p89t3h] {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--dl-color-default-secondary);
    border-radius: 0;
}

/* Disabled */
.calendar-day.disabled[b-q262p89t3h] {
    color: #D1D5DB;
    cursor: not-allowed;
    pointer-events: none;
}

.calendar-day.disabled:hover[b-q262p89t3h] {
    background-color: transparent;
}

/* Responsive */
@media (max-width: 640px) {
    .custom-calendar[b-q262p89t3h] {
        width: 100%;
        max-width: 320px;
    }
}

/* /Pages/Components/DailyMealSection.razor.rz.scp.css */
/* Daily Meal Section Component - Matches Figma Design */
.daily-meal-section-card[b-q7mjninadx] {
    border-bottom: 0.5px solid rgba(204, 204, 204, 1);
}

.daily-meal-section-card:last-child[b-q7mjninadx] {
    border-bottom: none;
}

/* Section Header */
.section-header[b-q7mjninadx] {
    width: 100%;
    background: transparent;
    border: none;
    padding: 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
    text-align: left;
}

.section-header:hover[b-q7mjninadx] {
    background-color: rgba(248, 248, 248, 1);
}

.header-left[b-q7mjninadx] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.checkbox-icon[b-q7mjninadx] {
    width: 24px;
    height: 24px;
    color: var(--dl-color-default-light);
    flex-shrink: 0;
}

.day-info-text[b-q7mjninadx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.day-name[b-q7mjninadx] {
    color: var(--dl-color-default-secondary);
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
}

.day-date[b-q7mjninadx] {
    color: var(--dl-color-default-light);
    font-size: 14px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
}

.header-right[b-q7mjninadx] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.meals-count-badge[b-q7mjninadx] {
    padding: 6px 10px;
    border-radius: 8px;
    background-color: rgba(246, 246, 246, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.meals-count-badge span[b-q7mjninadx] {
    color: var(--dl-color-default-secondary);
    font-size: 14px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
}

.meals-count-badge.complete[b-q7mjninadx] {
    background-color: var(--dl-color-default-accent);
}

.meals-count-badge.complete span[b-q7mjninadx] {
    color: rgba(255, 255, 255, 1);
}

.expand-arrow[b-q7mjninadx] {
    width: 24px;
    height: 24px;
    color: var(--dl-color-default-light);
    transition: transform 0.3s ease;
}

.expand-arrow.rotated[b-q7mjninadx] {
    transform: rotate(180deg);
}

/* Section Content */
.section-content[b-q7mjninadx] {
    background-color: var(--dl-color-default-lightbackground);
    padding: 24px;
    border-radius: 8px;
    margin: 0 24px 24px 24px;
    border: 0.5px solid rgba(204, 204, 204, 0.4);
}

.meals-container[b-q7mjninadx] {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Meal Type Section */
.meal-type-section[b-q7mjninadx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.meal-type-title[b-q7mjninadx] {
    color: var(--dl-color-default-subheading);
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.meal-content[b-q7mjninadx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dishes-and-input[b-q7mjninadx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Dishes Tags - Inline Layout */
.dishes-tags[b-q7mjninadx] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
}

.dish-tag[b-q7mjninadx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: rgba(246, 246, 246, 1);
    border-radius: 8px;
}

.dish-text[b-q7mjninadx] {
    color: var(--dl-color-default-secondary);
    font-size: 14px;
    font-family: Ubuntu;
    font-weight: 500;
    line-height: normal;
}

.dish-remove-btn[b-q7mjninadx] {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--dl-color-default-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.dish-remove-btn:hover[b-q7mjninadx] {
    color: #DC2626;
}

.dish-remove-btn svg[b-q7mjninadx] {
    width: 16px;
    height: 16px;
}

/* Empty Placeholder */
.empty-placeholder[b-q7mjninadx] {
    padding: 12px 14px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    text-align: center;
}

.empty-placeholder span[b-q7mjninadx] {
    color: var(--dl-color-default-light);
    font-size: 14px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
}

/* Character Limit Text */
.char-limit-text[b-q7mjninadx] {
    color: var(--dl-color-default-light);
    font-size: 14px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
}

/* Responsive */
@media (max-width: 768px) {
    .section-header[b-q7mjninadx] {
        padding: 16px;
    }

    .section-content[b-q7mjninadx] {
        margin: 0 16px 16px 16px;
        padding: 16px;
    }

    .header-left[b-q7mjninadx] {
        gap: 12px;
    }

    .header-right[b-q7mjninadx] {
        gap: 12px;
    }
}
/* /Pages/Components/DateRangePicker.razor.rz.scp.css */
/* Date Range Picker Component - Matches Figma Design */
.date-range-picker-card[b-186lowk2u4] {
    position: relative;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.card-title[b-186lowk2u4] {
    color: var(--dl-color-default-headings);
    font-size: 20px;
    font-family: Ubuntu;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

/* Date Inputs - Vertical Layout */
.date-inputs-vertical[b-186lowk2u4] {
    display: flex;
    gap: 26px;
}

.date-input-group[b-186lowk2u4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.date-label[b-186lowk2u4] {
    color: var(--dl-color-default-subbody);
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
}

.date-input-wrapper[b-186lowk2u4] {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    border: 1px solid rgba(224, 230, 237, 1);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 1);
    transition: all 0.2s ease;
}

.date-input-wrapper:hover[b-186lowk2u4] {
    border-color: var(--dl-color-default-accent);
}

.calendar-icon[b-186lowk2u4] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--dl-color-default-subbody);
}

.date-input[b-186lowk2u4] {
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    font-size: 14px;
    font-family: Ubuntu;
    font-weight: 400;
    color: var(--dl-color-default-secondary);
    cursor: pointer;
}

.date-input[b-186lowk2u4]::placeholder {
    color: var(--dl-color-default-light);
}

.date-input:focus[b-186lowk2u4] {
    outline: none;
}

/* Planning Range Text */
.planning-range-text[b-186lowk2u4] {
    color: rgba(89, 89, 89, 1);
    font-size: 14px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
}

.text-label[b-186lowk2u4] {
    color: var(--dl-color-default-subbody);
}

.text-range[b-186lowk2u4] {
    color: rgba(89, 89, 89, 1);
}

/* Helper Text */
.helper-text[b-186lowk2u4] {
    color: var(--dl-color-default-light);
    font-size: 14px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
}

/* Calendar Popup */
.calendar-overlay[b-186lowk2u4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.calendar-popup[b-186lowk2u4] {
    position: absolute;
    top: 131px;
    z-index: 1000;
    animation: slideDown-b-186lowk2u4 0.2s ease;
}

.calendar-popup.calendar-from[b-186lowk2u4] {
    left: 24px;
}

.calendar-popup.calendar-to[b-186lowk2u4] {
    left: calc(50% + 13px);
}

@keyframes slideDown-b-186lowk2u4 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Validation Message */
.validation-message[b-186lowk2u4] {
    padding: 8px 12px;
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid #dc3545;
    border-radius: 4px;
    color: #dc3545;
    font-size: 14px;
    font-family: Ubuntu;
}

/* Responsive */
@media (max-width: 768px) {
    .date-inputs-vertical[b-186lowk2u4] {
        flex-direction: column;
        gap: 16px;
    }

    .calendar-popup.calendar-to[b-186lowk2u4] {
        left: 24px;
    }
}

/* /Pages/Components/DonutChart.razor.rz.scp.css */
.donut[b-a29dkrk884] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    font-family: 'Ubuntu', sans-serif;
}

.donut__svg[b-a29dkrk884] {
    width: 200px;
    height: 200px;
    display: block;
}

.donut__total[b-a29dkrk884] {
    font-size: 22px;
    font-weight: 500;
    fill: var(--primary-blue, #001F57);
}

.donut__label[b-a29dkrk884] {
    font-size: 11px;
    font-weight: 500;
    fill: var(--text-light, #8B8B8B);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.donut__legend[b-a29dkrk884] {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.donut__legend-item[b-a29dkrk884] {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.donut__swatch[b-a29dkrk884] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.donut__legend-label[b-a29dkrk884] {
    color: var(--text-primary, #000F29);
}

.donut__legend-count[b-a29dkrk884] {
    color: var(--text-secondary, #4B5563);
    font-weight: 500;
}

.donut-empty[b-a29dkrk884] {
    text-align: center;
    padding: 40px 0;
    color: var(--text-light, #8B8B8B);
    font-size: 14px;
}
/* /Pages/Components/EditableMealRow.razor.rz.scp.css */
.editable-meal-row[b-4i4uc31nmf] {
    display: flex !important;
    visibility: visible !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: #FFFFFF;
    border: 0.5px solid #E5E7EB;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-family: 'Ubuntu', sans-serif;
}

.editable-meal-row:hover[b-4i4uc31nmf] {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.editable-meal-row.disabled[b-4i4uc31nmf] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Meal input-style display (default state) */
.meal-input-display[b-4i4uc31nmf] {
    flex: 1;
    padding: 14px 16px;
    font-size: 14px;
    font-family: 'Ubuntu', sans-serif;
    color: #000F29;
    background: #FFFFFF;
    border: 1px solid #E0E6ED;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.meal-input-display:hover[b-4i4uc31nmf] {
    border-color: #D1D5DB;
    background: #FAFAFA;
}

.editable-meal-row:not(.disabled) .meal-input-display:hover[b-4i4uc31nmf] {
    border-color: #002B82;
}

.meal-name-text[b-4i4uc31nmf] {
    color: #000F29;
    font-weight: 400;
}

/* Edit mode input */
.meal-edit-input[b-4i4uc31nmf] {
    flex: 1;
    padding: 8px 12px;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
    color: #000F29;
    border: 1.5px solid #002B82;
    border-radius: 6px;
    outline: none;
    transition: all 0.2s ease;
}

.meal-edit-input:focus[b-4i4uc31nmf] {
    border-color: #002B82;
    box-shadow: 0 0 0 3px rgba(0, 43, 130, 0.1);
}

/* Action buttons container */
.row-actions[b-4i4uc31nmf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-actions[b-4i4uc31nmf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Button styles */
.btn-edit[b-4i4uc31nmf],
.btn-delete[b-4i4uc31nmf],
.btn-save[b-4i4uc31nmf],
.btn-cancel[b-4i4uc31nmf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    flex-shrink: 0;
}

.btn-edit[b-4i4uc31nmf] {
    color: #6B7280;
}

.btn-edit:hover[b-4i4uc31nmf] {
    background: #EEF1F6;
    color: #002B82;
}

.btn-delete[b-4i4uc31nmf] {
    color: #6B7280;
}

.btn-delete:hover:not(:disabled)[b-4i4uc31nmf] {
    background: #FEE2E2;
    color: #DC2626;
}

.btn-delete:disabled[b-4i4uc31nmf] {
    color: #D1D5DB;
    cursor: not-allowed;
    opacity: 0.4;
}

.btn-save[b-4i4uc31nmf] {
    background: #059669;
    color: #FFFFFF;
}

.btn-save:hover:not(:disabled)[b-4i4uc31nmf] {
    background: #047857;
}

.btn-save:disabled[b-4i4uc31nmf] {
    background: #D1D5DB;
    cursor: not-allowed;
}

.btn-cancel[b-4i4uc31nmf] {
    background: #6B7280;
    color: #FFFFFF;
}

.btn-cancel:hover[b-4i4uc31nmf] {
    background: #4B5563;
}

/* Loading spinner */
.spinner-small[b-4i4uc31nmf] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin-b-4i4uc31nmf 0.6s linear infinite;
}

@keyframes spin-b-4i4uc31nmf {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .editable-meal-row[b-4i4uc31nmf] {
        padding: 10px 12px;
    }

    .meal-name[b-4i4uc31nmf] {
        font-size: 15px;
    }

    .meal-edit-input[b-4i4uc31nmf] {
        font-size: 15px;
        padding: 6px 10px;
    }

    .btn-edit[b-4i4uc31nmf],
    .btn-delete[b-4i4uc31nmf],
    .btn-save[b-4i4uc31nmf],
    .btn-cancel[b-4i4uc31nmf] {
        width: 28px;
        height: 28px;
        padding: 4px;
    }
}

@media (max-width: 480px) {
    .editable-meal-row[b-4i4uc31nmf] {
        padding: 8px 10px;
    }

    .meal-name[b-4i4uc31nmf] {
        font-size: 14px;
    }

    .meal-edit-input[b-4i4uc31nmf] {
        font-size: 14px;
    }
}
/* /Pages/Components/ErrorToast.razor.rz.scp.css */
/* Error Toast - red themed sibling of SuccessToast */
.error-toast[b-yx05rogc5g] {
    position: fixed;
    top: 100px;
    right: 24px;
    width: 435px;
    max-width: calc(100vw - 48px);
    background-color: rgba(253, 253, 253, 1);
    border: 0.5px solid rgba(220, 38, 38, 0.4);
    border-left: 4px solid rgba(220, 38, 38, 1);
    border-radius: 12px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    padding: 32px;
    z-index: 1400;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(450px);
}

.error-toast.show[b-yx05rogc5g] {
    opacity: 1;
    transform: translateX(0);
}

.error-toast.hide[b-yx05rogc5g] {
    opacity: 0;
    transform: translateX(450px);
}

.toast-content[b-yx05rogc5g] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.toast-icon[b-yx05rogc5g] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.toast-text[b-yx05rogc5g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.toast-title[b-yx05rogc5g] {
    color: rgba(220, 38, 38, 1);
    font-size: 20px;
    font-family: Ubuntu;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.toast-message[b-yx05rogc5g] {
    color: var(--dl-color-default-subbody, rgba(75, 85, 99, 1));
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.toast-close[b-yx05rogc5g] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--dl-color-default-subbody, rgba(75, 85, 99, 1));
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.toast-close:hover[b-yx05rogc5g],
.toast-close:focus-visible[b-yx05rogc5g] {
    background-color: rgba(0, 0, 0, 0.06);
    color: rgba(220, 38, 38, 1);
    outline: none;
}

/* Responsive */
@media (max-width: 768px) {
    .error-toast[b-yx05rogc5g] {
        top: 80px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}
/* /Pages/Components/ExpandableDayCard.razor.rz.scp.css */
/* Day Card Container */
.day-card[b-o5xidl4f00] {
    background: #FFFFFF;
    border: 0.5px solid #CCCCCC;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.day-card.past-day[b-o5xidl4f00] {
    background: #F9FAFB;
    opacity: 0.7;
}

/* Day Header */
.day-header[b-o5xidl4f00] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #E5E7EB;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
}

.day-header:hover[b-o5xidl4f00] {
    background: rgba(243, 245, 248, 0.5);
}

.day-info[b-o5xidl4f00] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.day-name[b-o5xidl4f00] {
    font-size: 16px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    color: #000F29;
}

.day-date[b-o5xidl4f00] {
    font-size: 14px;
    font-family: 'Ubuntu', sans-serif;
    color: #8B8B8B;
}

.day-header-right[b-o5xidl4f00] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.chevron-icon[b-o5xidl4f00] {
    display: flex;
    align-items: center;
    color: #8B8B8B;
    transition: transform 0.3s ease;
}

.chevron-icon.rotated[b-o5xidl4f00] {
    transform: rotate(180deg);
}

.past-badge[b-o5xidl4f00] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #92400E;
    margin: 0;
}

/* Hide bottom border when collapsed */
.day-card:not(:has(.tab-navigation)) .day-header[b-o5xidl4f00] {
    border-bottom: none;
}

/* Tab Navigation */
.tab-navigation[b-o5xidl4f00] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #E5E7EB;
    background: #F9FAFB;
}

.tab-button[b-o5xidl4f00] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    color: #6B7280;
    transition: all 0.2s ease;
}

.tab-button:hover[b-o5xidl4f00] {
    background: #F3F5F8;
    color: #002B82;
}

.tab-button.active[b-o5xidl4f00] {
    background: #FFFFFF;
    color: #002B82;
    border-bottom-color: #002B82;
}

.tab-button svg[b-o5xidl4f00] {
    width: 16px;
    height: 16px;
}

.tab-count[b-o5xidl4f00] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #E5E7EB;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.tab-button.active .tab-count[b-o5xidl4f00] {
    background: #002B82;
    color: #FFFFFF;
}

/* Tab Content */
.tab-content[b-o5xidl4f00] {
    padding: 20px 24px;
    min-height: 200px;
}

.meal-list[b-o5xidl4f00] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.no-meals[b-o5xidl4f00] {
    padding: 24px;
    text-align: center;
    color: #9CA3AF;
    font-size: 14px;
    font-style: italic;
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .day-header[b-o5xidl4f00] {
        padding: 16px;
    }

    .tab-button[b-o5xidl4f00] {
        padding: 12px 8px;
        font-size: 13px;
        gap: 6px;
    }

    .tab-button svg[b-o5xidl4f00] {
        width: 14px;
        height: 14px;
    }

    .tab-content[b-o5xidl4f00] {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .day-header[b-o5xidl4f00] {
        padding: 12px;
    }

    .tab-button[b-o5xidl4f00] {
        flex-direction: column;
        gap: 4px;
        padding: 10px 6px;
        font-size: 12px;
    }

    .tab-button svg[b-o5xidl4f00] {
        display: none;
    }

    .tab-content[b-o5xidl4f00] {
        padding: 12px;
    }
}
/* /Pages/Components/FeedbackModal.razor.rz.scp.css */
/* Feedback Modal Component Styles - Based on Figma Designs */

.modal-overlay[b-ylyd42v0tn] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

.modal-overlay.show[b-ylyd42v0tn] {
    opacity: 1;
    visibility: visible;
}

.modal-container[b-ylyd42v0tn] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s ease;
}

.modal-overlay.show .modal-container[b-ylyd42v0tn] {
    transform: scale(1) translateY(0);
}

.modal-step[b-ylyd42v0tn] {
    padding: 32px;
}

/* Modal Header */
.modal-header[b-ylyd42v0tn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h2[b-ylyd42v0tn] {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
}

.close-btn[b-ylyd42v0tn] {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    color: #64748b;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover[b-ylyd42v0tn] {
    background: #f1f5f9;
    color: #1e293b;
}

.close-btn svg[b-ylyd42v0tn] {
    width: 24px;
    height: 24px;
}

/* Step 1: Meal Type Selection */
.meal-type-selector[b-ylyd42v0tn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0;
}

.meal-type-card[b-ylyd42v0tn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

.meal-type-card:hover[b-ylyd42v0tn] {
    background: #f1f5f9;
    border-color: #002B82;
    transform: translateY(-2px);
}

.meal-type-icon[b-ylyd42v0tn] {
    font-size: 32px;
}

.meal-type-label[b-ylyd42v0tn] {
    font-size: 18px;
    font-weight: 600;
}

/* Selection Summary Badges */
.selection-summary[b-ylyd42v0tn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.selection-badge[b-ylyd42v0tn] {
    padding: 6px 12px;
    background: linear-gradient(135deg, #002B82 0%, #1e40af 100%);
    color: white;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
}

/* Dropdown Fields */
.dropdown-fields[b-ylyd42v0tn] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dropdown-field[b-ylyd42v0tn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dropdown-field label[b-ylyd42v0tn] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.custom-dropdown[b-ylyd42v0tn],
.custom-input[b-ylyd42v0tn] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #1e293b;
    background: white;
    transition: all 0.2s ease;
}

.custom-dropdown:focus[b-ylyd42v0tn],
.custom-input:focus[b-ylyd42v0tn] {
    outline: none;
    border-color: #002B82;
    box-shadow: 0 0 0 3px rgba(0, 43, 130, 0.1);
}

.custom-input[readonly][b-ylyd42v0tn] {
    background: #f8fafc;
    cursor: not-allowed;
}

.comment-section[b-ylyd42v0tn] {
    margin-bottom: 32px;
}

.comment-label[b-ylyd42v0tn] {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

.comment-textarea[b-ylyd42v0tn] {
    width: 100%;
    min-height: 120px;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    color: #1e293b;
    resize: vertical;
    transition: all 0.2s ease;
}

.comment-textarea:focus[b-ylyd42v0tn] {
    outline: none;
    border-color: #002B82;
    box-shadow: 0 0 0 3px rgba(0, 43, 130, 0.1);
}

.comment-textarea[b-ylyd42v0tn]::placeholder {
    color: #94a3b8;
}

/* Comment Validation */
.character-info[b-ylyd42v0tn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-top: 8px;
}

.character-info .valid[b-ylyd42v0tn] {
    color: #10b981;
}

.character-info .invalid[b-ylyd42v0tn] {
    color: #ef4444;
}

.validation-msg[b-ylyd42v0tn] {
    font-weight: 600;
}

/* Rating Section */
.rating-section[b-ylyd42v0tn] {
    margin-bottom: 24px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
}

.rating-label[b-ylyd42v0tn] {
    display: block;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 16px;
    color: #1e293b;
}

.rating-label .required[b-ylyd42v0tn] {
    color: #ef4444;
    margin-left: 4px;
    font-size: 18px;
}

.star-rating[b-ylyd42v0tn] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    justify-content: center;
}

.star-btn[b-ylyd42v0tn] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.star-btn:hover[b-ylyd42v0tn] {
    transform: scale(1.2);
}

.star-btn:active[b-ylyd42v0tn] {
    transform: scale(1.1);
}

.star-btn.filled[b-ylyd42v0tn] {
    color: #ffc107;
    filter: drop-shadow(0 2px 4px rgba(255, 193, 7, 0.3));
}

.star-btn.empty[b-ylyd42v0tn] {
    color: #cbd5e1;
}

.star-btn.empty:hover[b-ylyd42v0tn] {
    color: #ffd54f;
}

.rating-text[b-ylyd42v0tn] {
    display: block;
    font-size: 15px;
    color: #64748b;
    font-weight: 500;
    text-align: center;
    margin-top: 8px;
}

.rating-text.selected[b-ylyd42v0tn] {
    color: #ffc107;
    font-weight: 600;
    font-size: 16px;
}

.rating-error[b-ylyd42v0tn] {
    color: #ef4444;
    font-size: 14px;
    margin-top: 12px;
    font-weight: 600;
    text-align: center;
    padding: 8px 12px;
    background: #fee2e2;
    border-radius: 8px;
    border: 1px solid #fecaca;
}

/* Step 3: Success Screen */
.success-content[b-ylyd42v0tn] {
    text-align: center;
    padding: 40px 20px;
}

.success-icon[b-ylyd42v0tn] {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32px;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
}

.success-icon svg[b-ylyd42v0tn] {
    color: white;
    width: 64px;
    height: 64px;
}

.success-content h2[b-ylyd42v0tn] {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.success-content p[b-ylyd42v0tn] {
    font-size: 18px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* Modal Actions */
.modal-actions[b-ylyd42v0tn] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.cancel-btn[b-ylyd42v0tn],
.back-btn[b-ylyd42v0tn],
.close-success-btn[b-ylyd42v0tn] {
    padding: 12px 24px;
    border: 2px solid #e2e8f0;
    background: white;
    color: #64748b;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.cancel-btn:hover[b-ylyd42v0tn],
.back-btn:hover[b-ylyd42v0tn],
.close-success-btn:hover[b-ylyd42v0tn] {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #1e293b;
}

.submit-btn[b-ylyd42v0tn] {
    padding: 12px 24px;
    border: none;
    background: linear-gradient(135deg, #002B82 0%, #1e40af 100%);
    color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
}

.submit-btn:hover:not(.disabled)[b-ylyd42v0tn] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 43, 130, 0.3);
}

.submit-btn.disabled[b-ylyd42v0tn] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-spinner[b-ylyd42v0tn] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-ylyd42v0tn 1s linear infinite;
}

@keyframes spin-b-ylyd42v0tn {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-overlay[b-ylyd42v0tn] {
        padding: 16px;
    }

    .modal-step[b-ylyd42v0tn] {
        padding: 24px;
    }

    .modal-header h2[b-ylyd42v0tn] {
        font-size: 20px;
    }

    .meal-selection-item[b-ylyd42v0tn] {
        padding: 12px;
    }

    .meal-name[b-ylyd42v0tn] {
        font-size: 15px;
    }

    .meal-description[b-ylyd42v0tn] {
        font-size: 13px;
    }

    .selected-meal-info[b-ylyd42v0tn] {
        padding: 16px;
    }

    .selected-meal-info h3[b-ylyd42v0tn] {
        font-size: 16px;
    }

    .star-rating[b-ylyd42v0tn] {
        gap: 4px;
    }

    .star-btn svg[b-ylyd42v0tn] {
        width: 28px;
        height: 28px;
    }

    .comment-textarea[b-ylyd42v0tn] {
        min-height: 100px;
        padding: 12px;
    }

    .success-content[b-ylyd42v0tn] {
        padding: 32px 16px;
    }

    .success-icon[b-ylyd42v0tn] {
        width: 100px;
        height: 100px;
    }

    .success-icon svg[b-ylyd42v0tn] {
        width: 48px;
        height: 48px;
    }

    .success-content h2[b-ylyd42v0tn] {
        font-size: 24px;
    }

    .success-content p[b-ylyd42v0tn] {
        font-size: 16px;
    }

    .modal-actions[b-ylyd42v0tn] {
        flex-direction: column;
        gap: 8px;
    }

    .cancel-btn[b-ylyd42v0tn],
    .back-btn[b-ylyd42v0tn],
    .close-success-btn[b-ylyd42v0tn],
    .submit-btn[b-ylyd42v0tn] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .modal-overlay[b-ylyd42v0tn] {
        padding: 12px;
    }

    .modal-step[b-ylyd42v0tn] {
        padding: 20px;
    }

    .modal-header h2[b-ylyd42v0tn] {
        font-size: 18px;
    }

    .meal-selection-item[b-ylyd42v0tn] {
        padding: 10px;
    }

    .meal-name[b-ylyd42v0tn] {
        font-size: 14px;
    }

    .meal-description[b-ylyd42v0tn] {
        font-size: 12px;
    }

    .star-btn svg[b-ylyd42v0tn] {
        width: 24px;
        height: 24px;
    }

    .success-icon[b-ylyd42v0tn] {
        width: 80px;
        height: 80px;
    }

    .success-icon svg[b-ylyd42v0tn] {
        width: 40px;
        height: 40px;
    }

    .success-content h2[b-ylyd42v0tn] {
        font-size: 20px;
    }

    .success-content p[b-ylyd42v0tn] {
        font-size: 14px;
    }
}


/* /Pages/Components/FilePreviewModal.razor.rz.scp.css */
/* File Preview Modal - Matches CreateServiceRequest.razor preview-modal implementation */

.preview-modal-overlay[b-6z3hyozb5o] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    animation: fadeIn-b-6z3hyozb5o 0.2s ease;
}

@keyframes fadeIn-b-6z3hyozb5o {
    from { opacity: 0; }
    to { opacity: 1; }
}

.preview-modal-container[b-6z3hyozb5o] {
    width: 800px;
    max-width: calc(100vw - 64px);
    height: 654px;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 49px 14px 0px rgba(0, 0, 0, 0);
    animation: slideUp-b-6z3hyozb5o 0.3s ease;
}

@keyframes slideUp-b-6z3hyozb5o {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.preview-modal-header[b-6z3hyozb5o] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.preview-zoom-btn[b-6z3hyozb5o] {
    width: 40px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.001);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
}

.preview-zoom-btn:hover[b-6z3hyozb5o] {
    background-color: rgba(0, 0, 0, 0.05);
}

.preview-image-container[b-6z3hyozb5o] {
    width: 768px;
    height: 400px;
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px;
    background-color: rgba(246, 246, 246, 1);
}

.preview-image[b-6z3hyozb5o] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.preview-pdf[b-6z3hyozb5o] {
    width: 100%;
    height: 100%;
    border: none;
}

.preview-text-content[b-6z3hyozb5o] {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 16px;
    margin: 0;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    color: rgba(20, 20, 20, 1);
    background-color: rgba(246, 246, 246, 1);
    border-radius: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.preview-unsupported-message[b-6z3hyozb5o] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.preview-unsupported-text[b-6z3hyozb5o] {
    color: rgba(134, 134, 134, 1);
    font-size: 16px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    line-height: normal;
}

.preview-file-details[b-6z3hyozb5o] {
    position: absolute;
    top: 448px;
    left: 16px;
    width: 198px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.preview-filename[b-6z3hyozb5o] {
    color: rgba(20, 20, 20, 1);
    font-size: 20px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    line-height: normal;
}

.preview-file-info[b-6z3hyozb5o] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.preview-file-info span[b-6z3hyozb5o] {
    color: rgba(20, 20, 20, 1);
    font-size: 16px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    line-height: normal;
}

.preview-file-info strong[b-6z3hyozb5o] {
    font-weight: 500;
}

.preview-modal-footer[b-6z3hyozb5o] {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 200px;
}

.preview-done-btn[b-6z3hyozb5o] {
    width: 100%;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: rgba(0, 31, 87, 1);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.preview-done-btn span[b-6z3hyozb5o] {
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    line-height: normal;
}

.preview-done-btn:hover[b-6z3hyozb5o] {
    background-color: rgba(0, 25, 70, 1);
}

@media (max-width: 768px) {
    .preview-modal-container[b-6z3hyozb5o] {
        width: 90vw;
        height: 90vh;
        max-height: 600px;
    }

    .preview-image-container[b-6z3hyozb5o] {
        width: calc(90vw - 32px);
        max-width: 768px;
        height: 300px;
    }

    .preview-file-details[b-6z3hyozb5o] {
        left: auto;
        right: 16px;
        text-align: right;
    }
}

@media (max-width: 768px) {
    .preview-modal-container[b-6z3hyozb5o] {
        width: 95vw;
        height: 85vh;
    }

    .preview-image-container[b-6z3hyozb5o] {
        width: calc(95vw - 32px);
        height: 250px;
    }

    .preview-modal-header[b-6z3hyozb5o] {
        top: 8px;
        right: 8px;
    }

    .preview-file-details[b-6z3hyozb5o] {
        top: 280px;
        width: calc(95vw - 64px);
        max-width: 198px;
    }

    .preview-modal-footer[b-6z3hyozb5o] {
        bottom: 8px;
        left: 8px;
        width: calc(95vw - 16px);
        max-width: 200px;
    }
}
/* /Pages/Components/InProgressModal.razor.rz.scp.css */
/* In Progress Modal Component Styles - Based on ResolvedModal Design */

.in-progress-modal-overlay[b-ld7noc2i2s] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-ld7noc2i2s 0.2s ease;
}

@keyframes fadeIn-b-ld7noc2i2s {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.in-progress-modal-container[b-ld7noc2i2s] {
    width: 600px;
    max-width: calc(100vw - 48px);
    max-height: 90vh;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0px 49px 14px 0px rgba(0, 0, 0, 0);
    animation: slideUp-b-ld7noc2i2s 0.3s ease;
}

@keyframes slideUp-b-ld7noc2i2s {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.in-progress-modal-header[b-ld7noc2i2s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
}

.in-progress-modal-title[b-ld7noc2i2s] {
    color: rgba(20, 20, 20, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    line-height: normal;
    margin: 0;
}

.in-progress-modal-title span[b-ld7noc2i2s] {
    color: rgba(20, 20, 20, 1);
}

.modal-close-btn[b-ld7noc2i2s] {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(134, 134, 134, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.modal-close-btn:hover[b-ld7noc2i2s] {
    color: rgba(20, 20, 20, 1);
}

.in-progress-modal-content[b-ld7noc2i2s] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.remarks-label[b-ld7noc2i2s] {
    color: rgba(134, 134, 134, 1);
    font-size: 12px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    line-height: normal;
}

.remarks-textarea[b-ld7noc2i2s] {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    font-size: 14px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: rgba(255, 255, 255, 1);
    resize: vertical;
    line-height: 1.5;
}

.remarks-textarea[b-ld7noc2i2s]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.remarks-textarea:focus[b-ld7noc2i2s] {
    outline: none;
    border-color: rgba(0, 31, 87, 1);
}

.in-progress-modal-actions[b-ld7noc2i2s] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid rgba(204, 204, 204, 1);
}

.btn-cancel-modal[b-ld7noc2i2s],
.btn-start-progress[b-ld7noc2i2s] {
    padding: 16px 24px;
    border: none;
    border-radius: 12px;
    font-size: 20px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: normal;
}

.btn-cancel-modal[b-ld7noc2i2s] {
    background-color: transparent;
    color: rgba(20, 20, 20, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
}

.btn-cancel-modal:hover[b-ld7noc2i2s] {
    background-color: rgba(247, 247, 247, 1);
}

.btn-start-progress[b-ld7noc2i2s] {
    background-color: rgba(0, 31, 87, 1);
    color: rgba(255, 255, 255, 1);
    text-align: right;
}

.btn-start-progress:hover:not(:disabled)[b-ld7noc2i2s] {
    background-color: rgba(0, 31, 87, 0.9);
}

.btn-start-progress:disabled[b-ld7noc2i2s] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
    .in-progress-modal-container[b-ld7noc2i2s] {
        width: calc(100vw - 32px);
        border-radius: 12px;
    }
    
    .in-progress-modal-header[b-ld7noc2i2s] {
        padding: 20px 16px;
    }
    
    .in-progress-modal-content[b-ld7noc2i2s] {
        padding: 16px;
    }
    
    .in-progress-modal-actions[b-ld7noc2i2s] {
        padding: 16px;
        flex-direction: column-reverse;
    }
    
    .btn-cancel-modal[b-ld7noc2i2s],
    .btn-start-progress[b-ld7noc2i2s] {
        width: 100%;
    }
}








/* /Pages/Components/IssueDetailsModal.razor.rz.scp.css */
.idm-overlay[b-3usd71egcu] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: idmFade-b-3usd71egcu 0.2s ease;
}

@keyframes idmFade-b-3usd71egcu { from { opacity: 0; } to { opacity: 1; } }

.idm-panel[b-3usd71egcu] {
    width: 760px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    background-color: #ffffff;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Ubuntu', sans-serif;
}

.idm-header[b-3usd71egcu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 12px 24px;
    border-bottom: 0.5px solid rgba(204, 204, 204, 1);
}

.idm-title-row[b-3usd71egcu] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.idm-title[b-3usd71egcu] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--dl-color-default-secondary, #141414);
}

.idm-badges[b-3usd71egcu] { display: flex; gap: 6px; }

.idm-badge[b-3usd71egcu] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.idm-badge--active[b-3usd71egcu] { background-color: #e6f4ea; color: #1e7e34; }
.idm-badge--inactive[b-3usd71egcu] { background-color: #f1f1f1; color: #6b7280; }
.idm-badge--sealed[b-3usd71egcu] { background-color: #fde8e8; color: #b91c1c; }

.idm-close[b-3usd71egcu] {
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 4px;
}

.idm-close:hover[b-3usd71egcu] { color: #141414; }

.idm-body[b-3usd71egcu] {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.idm-meta-grid[b-3usd71egcu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    margin-bottom: 18px;
}

.idm-meta[b-3usd71egcu] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.idm-meta--full[b-3usd71egcu] { grid-column: 1 / -1; }

.idm-meta-label[b-3usd71egcu] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(134, 134, 134, 1);
}

.idm-meta-value[b-3usd71egcu] { font-size: 14px; color: rgba(20, 20, 20, 1); }

.idm-section-title[b-3usd71egcu] {
    font-size: 13px;
    font-weight: 700;
    color: var(--dl-color-default-primary, #001f57);
    margin-bottom: 8px;
}

.idm-table-wrap[b-3usd71egcu] {
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    overflow: hidden;
}

.idm-table[b-3usd71egcu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.idm-table thead th[b-3usd71egcu] {
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(0, 31, 87, 1);
    background-color: rgba(0, 43, 130, 0.06);
    padding: 10px 12px;
    border-bottom: 1px solid rgba(204, 204, 204, 0.5);
}

.idm-table tbody td[b-3usd71egcu] {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    color: rgba(20, 20, 20, 1);
    vertical-align: top;
}

.idm-table tbody tr:last-child td[b-3usd71egcu] { border-bottom: none; }
.idm-strong[b-3usd71egcu] { font-weight: 500; }
.idm-center[b-3usd71egcu] { text-align: center; }

.idm-empty[b-3usd71egcu] {
    text-align: center;
    color: rgba(134, 134, 134, 1);
    padding: 18px 12px;
}

.idm-actions[b-3usd71egcu] {
    display: flex;
    justify-content: flex-end;
    padding: 12px 24px 20px 24px;
}

.idm-btn[b-3usd71egcu] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    cursor: pointer;
    border: none;
    background-color: var(--dl-color-default-accent, #002b82);
    color: #ffffff;
}

.idm-btn:hover[b-3usd71egcu] { background-color: rgba(0, 31, 92, 1); }

@media (max-width: 768px) {
    .idm-meta-grid[b-3usd71egcu] { grid-template-columns: 1fr; }
}
/* /Pages/Components/LineChart.razor.rz.scp.css */
.line-chart[b-dsuakmh6dx] {
    width: 100%;
    font-family: 'Ubuntu', sans-serif;
}

.line-chart__svg[b-dsuakmh6dx] {
    width: 100%;
    height: auto;
    display: block;
}

.line-chart__grid[b-dsuakmh6dx] {
    stroke: rgba(148, 163, 184, 0.35);
    stroke-width: 1;
}

.line-chart__axis-label[b-dsuakmh6dx] {
    font-size: 9px;
    fill: #94a3b8;
}

.line-chart-empty[b-dsuakmh6dx] {
    text-align: center;
    padding: 40px 0;
    color: var(--text-light, #8B8B8B);
    font-size: 14px;
}
/* /Pages/Components/MealDaySelector.razor.rz.scp.css */
/* Meal Day Selector Component Styles - Based on Figma Designs */

.day-selector-container[b-4d0mwb72qx] {
    margin-bottom: 32px;
}

.day-selector[b-4d0mwb72qx] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding: 0 16px;
}

.day-card[b-4d0mwb72qx] {
    width: calc((100% - 72px) / 7); /* 7 cards with 6 gaps of 12px each = 72px total gap */
    min-width: 100px;
    max-width: 140px;
    height: 70px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.day-card:hover[b-4d0mwb72qx] {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.day-card.selected[b-4d0mwb72qx] {
    border-color: #002B82;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: 0 4px 16px rgba(0, 43, 130, 0.15);
}

.day-card.today[b-4d0mwb72qx] {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}

.day-card.today.selected[b-4d0mwb72qx] {
    border-color: #002B82;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.day-abbreviation[b-4d0mwb72qx] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.day-card.selected .day-abbreviation[b-4d0mwb72qx] {
    color: #002B82;
}

.day-card.today:not(.selected) .day-abbreviation[b-4d0mwb72qx] {
    color: #10b981;
}

.day-number[b-4d0mwb72qx] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.day-card.selected .day-number[b-4d0mwb72qx] {
    color: #002B82;
}

.day-card.today:not(.selected) .day-number[b-4d0mwb72qx] {
    color: #10b981;
}

.day-indicator[b-4d0mwb72qx] {
    position: absolute;
    bottom: 6px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.today-dot[b-4d0mwb72qx] {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
}

.day-card.selected .today-dot[b-4d0mwb72qx] {
    background: #002B82;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .day-card[b-4d0mwb72qx] {
        width: calc((100% - 60px) / 7);
        min-width: 90px;
        max-width: 120px;
    }
}

@media (max-width: 768px) {
    .day-selector[b-4d0mwb72qx] {
        gap: 8px;
        padding: 0 12px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .day-selector[b-4d0mwb72qx]::-webkit-scrollbar {
        display: none;
    }

    .day-card[b-4d0mwb72qx] {
        width: calc((100% - 48px) / 7);
        min-width: 80px;
        max-width: 100px;
        height: 65px;
        padding: 8px;
    }

    .day-number[b-4d0mwb72qx] {
        font-size: 18px;
    }

    .day-abbreviation[b-4d0mwb72qx] {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .day-selector[b-4d0mwb72qx] {
        gap: 6px;
        padding: 0 8px;
    }

    .day-card[b-4d0mwb72qx] {
        width: calc((100% - 36px) / 7);
        min-width: 70px;
        max-width: 90px;
        height: 60px;
        padding: 6px;
    }

    .day-number[b-4d0mwb72qx] {
        font-size: 16px;
    }

    .day-abbreviation[b-4d0mwb72qx] {
        font-size: 9px;
    }
}















/* /Pages/Components/MealInput.razor.rz.scp.css */
/* Meal Input Component - Matches Figma Design */
.meal-input-component[b-difpwf1eid] {
    width: 100%;
}

.input-with-button[b-difpwf1eid] {
    display: flex;
    gap: 24px;
    align-items: center;
}

.input-wrapper[b-difpwf1eid] {
    flex: 1;
}

.meal-text-input[b-difpwf1eid] {
    width: 100%;
    padding: 16px 14px;
    border: 1px solid var(--dl-color-default-strokecolor);
    border-radius: 8px;
    font-size: 14px;
    font-family: Ubuntu;
    font-weight: 400;
    color: var(--dl-color-default-secondary);
    background-color: rgba(255, 255, 255, 1);
    transition: all 0.2s ease;
}

.meal-text-input[b-difpwf1eid]::placeholder {
    color: var(--dl-color-default-light);
}

.meal-text-input:focus[b-difpwf1eid] {
    outline: none;
    border-color: var(--dl-color-default-accent);
}

.meal-text-input:disabled[b-difpwf1eid] {
    background-color: rgba(246, 246, 246, 1);
    cursor: not-allowed;
}

.meal-add-button[b-difpwf1eid] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    background-color: var(--dl-color-default-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.4;
}

.meal-add-button svg[b-difpwf1eid] {
    width: 20px;
    height: 20px;
    stroke: rgba(255, 255, 255, 1);
}

.meal-add-button span[b-difpwf1eid] {
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 500;
    line-height: normal;
}

.meal-add-button.active[b-difpwf1eid] {
    opacity: 1;
}

.meal-add-button.active:hover[b-difpwf1eid] {
    background-color: rgba(0, 31, 92, 1);
}

.meal-add-button:disabled[b-difpwf1eid] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 640px) {
    .input-with-button[b-difpwf1eid] {
        flex-direction: column;
        gap: 12px;
    }

    .meal-add-button[b-difpwf1eid] {
        width: 100%;
    }
}
/* /Pages/Components/MealScheduleProgress.razor.rz.scp.css */
/* Progress Tracker Component - Matches Figma Design */
.progress-tracker-card[b-54rlizv4tg] {
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.tracker-title[b-54rlizv4tg] {
    color: var(--dl-color-default-headings);
    font-size: 20px;
    font-family: Ubuntu;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

/* Progress Sections Container */
.progress-sections[b-54rlizv4tg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Progress Section */
.progress-section[b-54rlizv4tg] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.section-content[b-54rlizv4tg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stat-row[b-54rlizv4tg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label[b-54rlizv4tg] {
    color: var(--dl-color-default-subbody);
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
}

.stat-value[b-54rlizv4tg] {
    color: var(--dl-color-default-headings);
    font-size: 18px;
    font-family: Ubuntu;
    font-weight: 500;
    line-height: normal;
}

/* Progress Bar */
.progress-bar-wrapper[b-54rlizv4tg] {
    width: 100%;
    position: relative;
}

.progress-bar-background[b-54rlizv4tg] {
    width: 100%;
    height: 10px;
    background-color: var(--dl-color-default-lightbackground);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill[b-54rlizv4tg] {
    height: 100%;
    background-color: var(--dl-color-default-accent);
    border-radius: 24px;
    transition: width 0.5s ease;
}

/* Section Divider */
.section-divider[b-54rlizv4tg] {
    width: 100%;
    height: 1px;
    background-color: rgba(204, 204, 204, 1);
}

/* Section Header for Total Meals */
.section-header[b-54rlizv4tg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-label[b-54rlizv4tg] {
    color: var(--dl-color-default-subbody);
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
}

.total-meals-badge[b-54rlizv4tg] {
    width: 40px;
    padding: 8px 14px;
    background-color: rgba(246, 246, 246, 1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-number[b-54rlizv4tg] {
    color: var(--dl-color-default-headings);
    font-size: 18px;
    font-family: Ubuntu;
    font-weight: 500;
    line-height: normal;
}

/* Daily Progress List */
.daily-progress-list[b-54rlizv4tg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.day-progress-row[b-54rlizv4tg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.day-abbr[b-54rlizv4tg] {
    color: var(--dl-color-default-subbody);
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
}

.day-meals-count[b-54rlizv4tg] {
    color: var(--dl-color-default-subbody);
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
}

.day-meals-count.complete[b-54rlizv4tg] {
    color: var(--dl-color-default-accent);
}

/* Responsive */
@media (max-width: 768px) {
    .progress-tracker-card[b-54rlizv4tg] {
        padding: 20px;
    }
}

/* /Pages/Components/MealTypeCard.razor.rz.scp.css */
/* Meal Type Card Component Styles - Based on Figma Designs */

.meal-type-card[b-v87zw2qvbz] {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.meal-type-card:hover[b-v87zw2qvbz] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Meal Type Header */
.meal-type-header[b-v87zw2qvbz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
}

.meal-type-info[b-v87zw2qvbz] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.meal-type-icon[b-v87zw2qvbz] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meal-type-icon svg[b-v87zw2qvbz] {
    color: #002B82;
    width: 24px;
    height: 24px;
}

.meal-type-details[b-v87zw2qvbz] {
    flex: 1;
    min-width: 0;
}

.meal-type-title[b-v87zw2qvbz] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.date-badge[b-v87zw2qvbz] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    width: fit-content;
}

.date-badge svg[b-v87zw2qvbz] {
    color: #64748b;
    width: 16px;
    height: 16px;
}

.date-badge span[b-v87zw2qvbz] {
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
}

.meal-count[b-v87zw2qvbz] {
    background: linear-gradient(135deg, #002B82 0%, #1e40af 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Meal Items Container */
.meal-items-container[b-v87zw2qvbz] {
    min-height: 60px;
}

.meal-items[b-v87zw2qvbz] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.meal-item-pill[b-v87zw2qvbz] {
    background: rgba(243, 245, 248, 0.8);
    border: 1px solid #d8e3f1;
    border-radius: 20px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.meal-item-pill:hover[b-v87zw2qvbz] {
    background: rgba(243, 245, 248, 1);
    border-color: #002B82;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 43, 130, 0.1);
}

.meal-item-name[b-v87zw2qvbz] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.meal-item-description[b-v87zw2qvbz] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* No Meals State */
.no-meals[b-v87zw2qvbz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #64748b;
}

.no-meals-icon[b-v87zw2qvbz] {
    width: 64px;
    height: 64px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.no-meals-icon svg[b-v87zw2qvbz] {
    color: #94a3b8;
    width: 32px;
    height: 32px;
}

.no-meals p[b-v87zw2qvbz] {
    font-size: 16px;
    margin: 0;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .meal-type-card[b-v87zw2qvbz] {
        padding: 20px;
    }

    .meal-type-header[b-v87zw2qvbz] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .meal-type-info[b-v87zw2qvbz] {
        width: 100%;
        gap: 12px;
    }

    .meal-type-icon[b-v87zw2qvbz] {
        width: 40px;
        height: 40px;
    }

    .meal-type-icon svg[b-v87zw2qvbz] {
        width: 20px;
        height: 20px;
    }

    .meal-type-title[b-v87zw2qvbz] {
        font-size: 18px;
    }

    .meal-count[b-v87zw2qvbz] {
        align-self: flex-end;
        font-size: 13px;
        padding: 6px 12px;
    }

    .meal-items[b-v87zw2qvbz] {
        gap: 8px;
    }

    .meal-item-pill[b-v87zw2qvbz] {
        padding: 10px 16px;
        min-width: 100px;
    }

    .meal-item-name[b-v87zw2qvbz] {
        font-size: 13px;
    }

    .meal-item-description[b-v87zw2qvbz] {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .meal-type-card[b-v87zw2qvbz] {
        padding: 16px;
        border-radius: 12px;
    }

    .meal-type-icon[b-v87zw2qvbz] {
        width: 36px;
        height: 36px;
    }

    .meal-type-icon svg[b-v87zw2qvbz] {
        width: 18px;
        height: 18px;
    }

    .meal-type-title[b-v87zw2qvbz] {
        font-size: 16px;
    }

    .date-badge[b-v87zw2qvbz] {
        padding: 4px 8px;
        font-size: 12px;
    }

    .date-badge svg[b-v87zw2qvbz] {
        width: 14px;
        height: 14px;
    }

    .meal-count[b-v87zw2qvbz] {
        font-size: 12px;
        padding: 4px 10px;
    }

    .meal-items[b-v87zw2qvbz] {
        gap: 6px;
    }

    .meal-item-pill[b-v87zw2qvbz] {
        padding: 8px 12px;
        min-width: 80px;
        border-radius: 16px;
    }

    .meal-item-name[b-v87zw2qvbz] {
        font-size: 12px;
    }

    .meal-item-description[b-v87zw2qvbz] {
        font-size: 10px;
    }

    .no-meals[b-v87zw2qvbz] {
        padding: 30px 16px;
    }

    .no-meals-icon[b-v87zw2qvbz] {
        width: 48px;
        height: 48px;
    }

    .no-meals-icon svg[b-v87zw2qvbz] {
        width: 24px;
        height: 24px;
    }

    .no-meals p[b-v87zw2qvbz] {
        font-size: 14px;
    }
}

























































/* /Pages/Components/PageHeader.razor.rz.scp.css */
/* OnePortal "blue pill" header card — ported from IT-Asset Management's
   allocator-header-card so E-Service matches the shell-wide look:
   gradient rounded banner, white title/subtitle, date + bell + identity
   (name over UPPERCASE role) + circular avatar on the right. */

.page-header-wrapper[b-5axymn1ue0] {
    width: 100%;
}

.esv-header-card[b-5axymn1ue0] {
    background: linear-gradient(90deg, #0b3478 0%, #0a47b0 100%);
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(10, 71, 176, 0.18);
    border: 0;
    margin: 16px 24px 8px 24px;
    padding: 12px 18px;
}

.esv-topbar[b-5axymn1ue0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.esv-topbar-left[b-5axymn1ue0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.esv-topbar-title[b-5axymn1ue0] {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    font-family: Ubuntu, system-ui, sans-serif;
}

.esv-topbar-subtitle[b-5axymn1ue0] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-family: Ubuntu, system-ui, sans-serif;
}

.esv-topbar-actions[b-5axymn1ue0] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.esv-topbar-date[b-5axymn1ue0] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    font-family: Ubuntu, system-ui, sans-serif;
}

.esv-topbar-icon[b-5axymn1ue0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    flex-shrink: 0;
}

.esv-user[b-5axymn1ue0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.esv-user-text[b-5axymn1ue0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.esv-user-name[b-5axymn1ue0] {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    font-family: Ubuntu, system-ui, sans-serif;
}

.esv-user-role[b-5axymn1ue0] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-family: Ubuntu, system-ui, sans-serif;
}

.esv-user-avatar[b-5axymn1ue0] {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: background 120ms ease;
}

.esv-user-avatar:hover[b-5axymn1ue0] {
    background: rgba(255, 255, 255, 0.32);
}

.esv-user-avatar img[b-5axymn1ue0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

.avatar-initials[b-5axymn1ue0] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Avatar dropdown (standalone only — the shell owns logout when embedded) */
.user-avatar-container[b-5axymn1ue0] {
    position: relative;
}

.avatar-dropdown[b-5axymn1ue0] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 140px;
    background: #ffffff;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    padding: 6px;
    z-index: 60;
}

.avatar-dropdown-item[b-5axymn1ue0] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    color: #b42318;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: Ubuntu, system-ui, sans-serif;
}

.avatar-dropdown-item:hover[b-5axymn1ue0] {
    background: #fef3f2;
}

@media (max-width: 720px) {
    .esv-header-card[b-5axymn1ue0] {
        margin: 12px 12px 6px 12px;
    }

    .esv-topbar-date[b-5axymn1ue0],
    .esv-topbar-subtitle[b-5axymn1ue0] {
        display: none;
    }
}
/* /Pages/Components/PageSection.razor.rz.scp.css */
/* Unified page section header — used across modules */
.page-section__header[b-j9i68e020h] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4, 16px);
    padding: var(--spacing-5, 20px) var(--spacing-6, 24px);
    background-color: var(--card-background, #FFFFFF);
    border: 0.5px solid var(--border-color, #CCCCCC);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    margin-bottom: var(--spacing-6, 24px);
    font-family: 'Ubuntu', sans-serif;
    flex-wrap: wrap;
}

.page-section__back[b-j9i68e020h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background-color: var(--panel, #F3F5F8);
    border: 0.5px solid var(--border-color, #CCCCCC);
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary, #000F29);
    font-size: var(--font-size-sm, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.page-section__back:hover[b-j9i68e020h],
.page-section__back:focus-visible[b-j9i68e020h] {
    background-color: var(--gray-100, #F3F4F6);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    outline: none;
}

.page-section__back svg[b-j9i68e020h] {
    flex-shrink: 0;
}

.page-section__titles[b-j9i68e020h] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-section__title[b-j9i68e020h] {
    color: var(--primary-blue, #002B82);
    font-size: var(--font-size-xl, 20px);
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
}

.page-section__subtitle[b-j9i68e020h] {
    color: var(--text-secondary, #4B5563);
    font-size: var(--font-size-sm, 14px);
    margin: 0;
}

.page-section__actions[b-j9i68e020h] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .page-section__header[b-j9i68e020h] {
        padding: 16px;
        gap: 12px;
    }

    .page-section__actions[b-j9i68e020h] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Pages/Components/RcaCapPanel.razor.rz.scp.css */
.rca-cap-card[b-gr4jfctclc] { border: 1px solid rgba(204,204,204,1); border-radius: 12px; padding: 20px; margin-top: 20px; background: #fff; }
.rca-cap-header[b-gr4jfctclc] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.rca-cap-title[b-gr4jfctclc] { font-weight: 600; font-size: 16px; }
.rca-cap-due[b-gr4jfctclc] { font-size: 13px; color: #555; }
.rca-cap-due.overdue[b-gr4jfctclc] { color: #b00020; font-weight: 600; }
.rca-cap-badge[b-gr4jfctclc] { background: #b00020; color: #fff; border-radius: 4px; padding: 1px 6px; margin-left: 6px; font-size: 11px; }
.rca-cap-section[b-gr4jfctclc] { border-top: 1px solid #eee; padding-top: 14px; margin-top: 8px; }
.rca-cap-subtitle[b-gr4jfctclc] { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.rca-cap-field[b-gr4jfctclc] { margin-bottom: 10px; }
.rca-cap-field label[b-gr4jfctclc] { display: block; font-size: 13px; color: #444; margin-bottom: 4px; }
.rca-cap-actions[b-gr4jfctclc] { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.rca-cap-meta[b-gr4jfctclc] { font-size: 12px; color: #777; margin-right: auto; }

/* Pending state: RCA/CAP not yet required (pre Level-2). Lighter than the active workflow card. */
.rca-cap-pending[b-gr4jfctclc] { background: #fafafa; border-style: dashed; }
.rca-cap-pending .rca-cap-header[b-gr4jfctclc] { margin-bottom: 8px; }
.rca-cap-pending-note[b-gr4jfctclc] { font-size: 13px; color: #666; margin: 0; line-height: 1.5; }

/* Multi-entry list + add-forms. */
.rca-cap-entry[b-gr4jfctclc] { border: 1px solid #eee; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: #fafafa; }
.rca-cap-entry__body[b-gr4jfctclc] { font-size: 14px; color: #222; white-space: pre-wrap; }
.rca-cap-add[b-gr4jfctclc] { border: 1px dashed #cfcfcf; border-radius: 8px; padding: 12px; margin-top: 8px; }
.rca-cap-submit[b-gr4jfctclc] { border-top: 1px solid #eee; padding-top: 14px; margin-top: 14px; }

/* SuperAdmin review status banners. */
.rca-cap-review-banner[b-gr4jfctclc] { font-size: 13px; border-radius: 8px; padding: 10px 12px; margin: 8px 0 14px; line-height: 1.5; }
.rca-cap-review-banner.returned[b-gr4jfctclc] { background: #fdecea; color: #b00020; }
.rca-cap-review-banner.approved[b-gr4jfctclc] { background: #e8f5e9; color: #1b5e20; }
.rca-cap-review-banner.pending[b-gr4jfctclc] { background: #f4f6f8; color: #555; }

/* "Supporting documents" upload — mirrors the create-ticket "Attach Document" control
   (copied from CreateServiceRequest.razor.css). Scoped under .rca-cap-docs. */
.rca-cap-docs .file-upload-area[b-gr4jfctclc] {
    width: 100%;
    min-height: 156px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(50, 173, 230, 1);
    border-radius: 12px;
    background-color: rgba(50, 173, 230, 0.06);
    gap: 8px;
    cursor: pointer;
}

.rca-cap-docs .file-upload-area:hover[b-gr4jfctclc] {
    background-color: rgba(50, 173, 230, 0.1);
}

/* ::deep — targets the <input> rendered by <InputFile>, which lacks this component's scope attribute. */
.rca-cap-docs[b-gr4jfctclc]  .file-input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.rca-cap-docs .upload-text[b-gr4jfctclc] {
    color: rgba(20, 20, 20, 1);
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
}

.rca-cap-docs .upload-hint[b-gr4jfctclc] {
    color: rgba(134, 134, 134, 1);
    font-size: 12px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
}

.rca-cap-docs .upload-button[b-gr4jfctclc] {
    gap: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    justify-content: center;
    background-color: rgba(0, 90, 255, 1);
    margin-top: 4px;
}

.rca-cap-docs .upload-button span[b-gr4jfctclc] {
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    line-height: normal;
}

.rca-cap-docs .upload-button:hover[b-gr4jfctclc] {
    background-color: rgba(0, 75, 215, 1);
}

.rca-cap-docs .upload-text-warning[b-gr4jfctclc] {
    color: #ff3b30;
    font-size: 20px;
}

.rca-cap-docs .uploaded-files-section[b-gr4jfctclc] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.rca-cap-docs .uploaded-files-title[b-gr4jfctclc] {
    color: rgba(20, 20, 20, 1);
    font-size: 16px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    line-height: normal;
}

.rca-cap-docs .uploaded-files-grid[b-gr4jfctclc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.rca-cap-docs .file-preview-card[b-gr4jfctclc] {
    width: 200px;
    height: 132px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    overflow: hidden;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    position: relative;
}

.rca-cap-docs .file-preview-header[b-gr4jfctclc] {
    display: flex;
    gap: 8px;
    padding: 16px 12px 12px 12px;
    align-items: center;
}

.rca-cap-docs .file-preview-info[b-gr4jfctclc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.rca-cap-docs .file-preview-name[b-gr4jfctclc] {
    color: rgba(20, 20, 20, 1);
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rca-cap-docs .file-preview-size[b-gr4jfctclc] {
    color: rgba(134, 134, 134, 1);
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
}

/* "Pending" pill marking a staged (not-yet-uploaded) supporting document. */
.rca-cap-docs .file-pending-tag[b-gr4jfctclc] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(255, 149, 0, 0.12);
    color: rgba(180, 95, 0, 1);
    font-size: 11px;
    font-weight: 500;
    vertical-align: middle;
}

.rca-cap-docs .file-preview-actions[b-gr4jfctclc] {
    display: flex;
    gap: 12px;
    padding: 0 12px 12px 12px;
    align-items: center;
    margin-top: auto;
}

.rca-cap-docs .file-preview-btn[b-gr4jfctclc] {
    flex: 1;
    padding: 12px 24px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    background-color: transparent;
    cursor: pointer;
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
}

.rca-cap-docs .file-preview-btn:disabled[b-gr4jfctclc] {
    cursor: not-allowed;
    opacity: 0.6;
}

.rca-cap-docs .file-delete-btn[b-gr4jfctclc] {
    width: 36px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(246, 246, 246, 1) 0%, rgba(230, 230, 230, 1) 100%);
    cursor: pointer;
    padding: 0;
}

.rca-cap-docs .file-delete-btn:hover[b-gr4jfctclc] {
    background: linear-gradient(180deg, rgba(230, 230, 230, 1) 0%, rgba(220, 220, 220, 1) 100%);
}

@media (max-width: 1024px) {
    .rca-cap-docs .uploaded-files-grid[b-gr4jfctclc] { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .rca-cap-docs .file-preview-card[b-gr4jfctclc] { width: 100%; }
}

@media (max-width: 768px) {
    .rca-cap-docs .uploaded-files-grid[b-gr4jfctclc] { grid-template-columns: 1fr; }
    .rca-cap-docs .file-preview-card[b-gr4jfctclc] { width: 100%; }
}
/* /Pages/Components/ResolutionModal.razor.rz.scp.css */
/* Modal Overlay */
.resolution-modal-overlay[b-d1vqn5pb4f] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-d1vqn5pb4f 0.2s ease;
}

@keyframes fadeIn-b-d1vqn5pb4f {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container */
.resolution-modal-container[b-d1vqn5pb4f] {
    width: 500px;
    max-width: 90vw;
    max-height: 90vh;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: scaleIn-b-d1vqn5pb4f 0.3s ease;
    overflow: hidden;
}

@keyframes scaleIn-b-d1vqn5pb4f {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Header */
.resolution-modal-header[b-d1vqn5pb4f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
}

.resolution-modal-title[b-d1vqn5pb4f] {
    font-size: 20px;
    font-family: Ubuntu, sans-serif;
    font-weight: 600;
    color: rgba(0, 31, 87, 1);
    margin: 0;
}

.resolution-close-btn[b-d1vqn5pb4f] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    color: rgba(134, 134, 134, 1);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.resolution-close-btn:hover[b-d1vqn5pb4f] {
    background-color: rgba(246, 246, 246, 1);
    color: rgba(20, 20, 20, 1);
}

/* Body */
.resolution-modal-body[b-d1vqn5pb4f] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ticket-context[b-d1vqn5pb4f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: rgba(246, 246, 246, 1);
    border-radius: 8px;
}

.context-label[b-d1vqn5pb4f] {
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    color: rgba(134, 134, 134, 1);
}

.context-value[b-d1vqn5pb4f] {
    font-size: 16px;
    font-family: Ubuntu, sans-serif;
    font-weight: 600;
    color: rgba(0, 31, 87, 1);
}

/* Resolution Options */
.resolution-options[b-d1vqn5pb4f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.resolution-option[b-d1vqn5pb4f] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resolution-option:hover[b-d1vqn5pb4f] {
    border-color: rgba(0, 90, 255, 1);
    background-color: rgba(0, 90, 255, 0.02);
}

.resolution-option:has(input:checked)[b-d1vqn5pb4f] {
    border-color: rgba(0, 90, 255, 1);
    background-color: rgba(0, 90, 255, 0.06);
}

.resolution-option input[type="radio"][b-d1vqn5pb4f] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: rgba(0, 90, 255, 1);
}

.option-content[b-d1vqn5pb4f] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.option-header[b-d1vqn5pb4f] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.option-title[b-d1vqn5pb4f] {
    font-size: 16px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
}

.option-description[b-d1vqn5pb4f] {
    font-size: 13px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    color: rgba(134, 134, 134, 1);
}

/* Comment Section */
.comment-section[b-d1vqn5pb4f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-label[b-d1vqn5pb4f] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.label-text[b-d1vqn5pb4f] {
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
}

.label-hint[b-d1vqn5pb4f] {
    font-size: 13px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    color: rgba(134, 134, 134, 1);
}

.textarea-wrapper[b-d1vqn5pb4f] {
    width: 100%;
    min-height: 100px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    overflow: hidden;
}

.comment-textarea[b-d1vqn5pb4f] {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: none;
    background-color: transparent;
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    color: rgba(20, 20, 20, 1);
    resize: vertical;
    outline: none;
}

.comment-textarea[b-d1vqn5pb4f]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.word-count[b-d1vqn5pb4f] {
    font-size: 12px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    color: rgba(134, 134, 134, 1);
    text-align: right;
}

/* Error Message */
.error-message[b-d1vqn5pb4f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 1);
    border-radius: 8px;
    color: rgba(255, 59, 48, 1);
    font-size: 13px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
}

.error-message svg[b-d1vqn5pb4f] {
    flex-shrink: 0;
}

/* Footer */
.resolution-modal-footer[b-d1vqn5pb4f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-top: 1px solid rgba(204, 204, 204, 1);
    gap: 12px;
}

.resolution-btn-cancel[b-d1vqn5pb4f],
.resolution-btn-submit[b-d1vqn5pb4f] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 12px 24px;
    cursor: pointer;
    font-family: Ubuntu, sans-serif;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.resolution-btn-cancel[b-d1vqn5pb4f] {
    border: 0.5px solid rgba(204, 204, 204, 1);
    background-color: transparent;
    color: rgba(20, 20, 20, 1);
}

.resolution-btn-cancel:hover[b-d1vqn5pb4f] {
    background-color: rgba(246, 246, 246, 1);
}

.resolution-btn-submit[b-d1vqn5pb4f] {
    background-color: rgba(0, 31, 87, 1);
    border: none;
    color: rgba(255, 255, 255, 1);
}

.resolution-btn-submit:hover:not(:disabled)[b-d1vqn5pb4f] {
    background-color: rgba(0, 25, 70, 1);
}

.resolution-btn-submit:disabled[b-d1vqn5pb4f] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .resolution-modal-container[b-d1vqn5pb4f] {
        width: 95vw;
        max-height: 85vh;
    }

    .resolution-modal-header[b-d1vqn5pb4f] {
        padding: 16px 20px;
    }

    .resolution-modal-title[b-d1vqn5pb4f] {
        font-size: 18px;
    }

    .resolution-modal-body[b-d1vqn5pb4f] {
        padding: 20px;
    }

    .resolution-option[b-d1vqn5pb4f] {
        padding: 12px;
    }

    .option-title[b-d1vqn5pb4f] {
        font-size: 15px;
    }

    .resolution-modal-footer[b-d1vqn5pb4f] {
        padding: 16px 20px;
        flex-direction: column-reverse;
    }

    .resolution-btn-cancel[b-d1vqn5pb4f],
    .resolution-btn-submit[b-d1vqn5pb4f] {
        width: 100%;
    }
}
/* /Pages/Components/ResolvedModal.razor.rz.scp.css */
/* Resolved Modal Component Styles - Based on DU 10-11 Design */

.resolved-modal-overlay[b-zqqo7f1gyh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-zqqo7f1gyh 0.2s ease;
}

@keyframes fadeIn-b-zqqo7f1gyh {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.resolved-modal-container[b-zqqo7f1gyh] {
    width: 600px;
    max-width: calc(100vw - 48px);
    max-height: 90vh;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0px 49px 14px 0px rgba(0, 0, 0, 0);
    animation: slideUp-b-zqqo7f1gyh 0.3s ease;
}

@keyframes slideUp-b-zqqo7f1gyh {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.resolved-modal-header[b-zqqo7f1gyh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
}

.resolved-modal-title[b-zqqo7f1gyh] {
    color: rgba(20, 20, 20, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    line-height: normal;
    margin: 0;
}

.resolved-modal-title span[b-zqqo7f1gyh] {
    color: rgba(20, 20, 20, 1);
}

.modal-close-btn[b-zqqo7f1gyh] {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(134, 134, 134, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.modal-close-btn:hover[b-zqqo7f1gyh] {
    color: rgba(20, 20, 20, 1);
}

.resolved-modal-content[b-zqqo7f1gyh] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resolution-label[b-zqqo7f1gyh] {
    color: rgba(134, 134, 134, 1);
    font-size: 12px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    line-height: normal;
}

.resolution-textarea[b-zqqo7f1gyh] {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    font-size: 14px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: rgba(255, 255, 255, 1);
    resize: vertical;
    line-height: 1.5;
}

.resolution-textarea[b-zqqo7f1gyh]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.resolution-textarea:focus[b-zqqo7f1gyh] {
    outline: none;
    border-color: rgba(0, 31, 87, 1);
}

.resolved-modal-actions[b-zqqo7f1gyh] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid rgba(204, 204, 204, 1);
}

.btn-cancel-modal[b-zqqo7f1gyh],
.btn-mark-resolved[b-zqqo7f1gyh] {
    padding: 16px 24px;
    border: none;
    border-radius: 12px;
    font-size: 20px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: normal;
}

.btn-cancel-modal[b-zqqo7f1gyh] {
    background-color: transparent;
    color: rgba(20, 20, 20, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
}

.btn-cancel-modal:hover[b-zqqo7f1gyh] {
    background-color: rgba(247, 247, 247, 1);
}

.btn-mark-resolved[b-zqqo7f1gyh] {
    background-color: rgba(0, 31, 87, 1);
    color: rgba(255, 255, 255, 1);
    text-align: right;
}

.btn-mark-resolved:hover:not(:disabled)[b-zqqo7f1gyh] {
    background-color: rgba(0, 31, 87, 0.9);
}

.btn-mark-resolved:disabled[b-zqqo7f1gyh] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
    .resolved-modal-container[b-zqqo7f1gyh] {
        width: calc(100vw - 32px);
        border-radius: 12px;
    }
    
    .resolved-modal-header[b-zqqo7f1gyh] {
        padding: 20px 16px;
    }
    
    .resolved-modal-content[b-zqqo7f1gyh] {
        padding: 16px;
    }
    
    .resolved-modal-actions[b-zqqo7f1gyh] {
        padding: 16px;
        flex-direction: column-reverse;
    }
    
    .btn-cancel-modal[b-zqqo7f1gyh],
    .btn-mark-resolved[b-zqqo7f1gyh] {
        width: 100%;
    }
}

/* /Pages/Components/SelectionModal.razor.rz.scp.css */
.selection-modal-overlay[b-tz9s2fr37r] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1300;
    animation: selectionModalFadeIn-b-tz9s2fr37r 0.2s ease;
}

@keyframes selectionModalFadeIn-b-tz9s2fr37r {
    from { opacity: 0; }
    to { opacity: 1; }
}

.selection-modal-panel[b-tz9s2fr37r] {
    width: 480px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    background-color: #ffffff;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.animate-modal-enter[b-tz9s2fr37r] {
    animation: animateModalEnter-b-tz9s2fr37r 0.3s ease;
}

@keyframes animateModalEnter-b-tz9s2fr37r {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.selection-modal-header[b-tz9s2fr37r] {
    padding: 24px 24px 0 24px;
}

.selection-modal-title[b-tz9s2fr37r] {
    margin: 0;
    color: var(--dl-color-default-secondary, #141414);
    font-size: 20px;
    font-family: Ubuntu, sans-serif;
    font-weight: 700;
    line-height: normal;
}

.selection-modal-body[b-tz9s2fr37r] {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.selection-modal-search[b-tz9s2fr37r] {
    width: 100%;
    height: 44px;
    padding: 10px 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 15px;
    font-family: Ubuntu, sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: transparent;
    box-sizing: border-box;
}

.selection-modal-search:focus[b-tz9s2fr37r] {
    outline: none;
    border-color: var(--dl-color-default-primary, #001f57);
    box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
}

.selection-modal-search[b-tz9s2fr37r]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.selection-modal-list[b-tz9s2fr37r] {
    overflow-y: auto;
    max-height: 320px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
}

.selection-modal-item[b-tz9s2fr37r] {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 15px;
    font-family: Ubuntu, sans-serif;
    color: rgba(20, 20, 20, 1);
    border-bottom: 1px solid #f3f4f6;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.selection-modal-item:last-child[b-tz9s2fr37r] {
    border-bottom: none;
}

.selection-modal-item:hover[b-tz9s2fr37r] {
    background-color: #f5f8ff;
    color: var(--dl-color-default-primary, #001f57);
}

.selection-modal-item--selected[b-tz9s2fr37r] {
    background-color: #eef3ff;
    border-left-color: var(--dl-color-default-primary, #001f57);
    color: var(--dl-color-default-primary, #001f57);
    font-weight: 500;
}

.selection-modal-empty[b-tz9s2fr37r] {
    padding: 24px 16px;
    text-align: center;
    font-size: 15px;
    font-family: Ubuntu, sans-serif;
    color: rgba(134, 134, 134, 1);
}

.selection-modal-pagination[b-tz9s2fr37r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.selection-modal-page-info[b-tz9s2fr37r] {
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    color: rgba(134, 134, 134, 1);
    white-space: nowrap;
}

.selection-modal-page-btn[b-tz9s2fr37r] {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #ffffff;
    color: var(--dl-color-default-headings, #141414);
    border: 0.5px solid rgba(204, 204, 204, 1);
}

.selection-modal-page-btn:hover:not(:disabled)[b-tz9s2fr37r] {
    background-color: #f8f8f8;
}

.selection-modal-page-btn:disabled[b-tz9s2fr37r] {
    opacity: 0.5;
    cursor: not-allowed;
}

.selection-modal-actions[b-tz9s2fr37r] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 0 24px 24px 24px;
}

.selection-modal-btn[b-tz9s2fr37r] {
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-family: Ubuntu, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.selection-modal-btn-cancel[b-tz9s2fr37r] {
    background-color: #ffffff;
    color: var(--dl-color-default-headings, #141414);
    border: 0.5px solid rgba(204, 204, 204, 1);
    font-weight: 400;
}

.selection-modal-btn-cancel:hover[b-tz9s2fr37r] {
    background-color: #f8f8f8;
}

.selection-modal-btn-confirm[b-tz9s2fr37r] {
    background-color: var(--dl-color-default-accent, #002b82);
    color: #ffffff;
    font-weight: 700;
}

.selection-modal-btn-confirm:hover:not(:disabled)[b-tz9s2fr37r] {
    background-color: rgba(0, 31, 92, 1);
}

.selection-modal-btn-confirm:disabled[b-tz9s2fr37r] {
    background-color: rgba(0, 43, 130, 0.35);
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .selection-modal-panel[b-tz9s2fr37r] {
        width: calc(100vw - 32px);
    }

    .selection-modal-pagination[b-tz9s2fr37r] {
        flex-direction: column;
    }

    .selection-modal-page-btn[b-tz9s2fr37r] {
        width: 100%;
    }

    .selection-modal-actions[b-tz9s2fr37r] {
        flex-direction: column;
    }

    .selection-modal-btn[b-tz9s2fr37r] {
        width: 100%;
    }
}
/* /Pages/Components/SessionWarningToast.razor.rz.scp.css */
/* Session-expiry warning toast — amber sibling of SuccessToast/ErrorToast */
.session-warning-toast[b-8eyxbh74hv] {
    position: fixed;
    top: 100px;
    right: 24px;
    width: 435px;
    max-width: calc(100vw - 48px);
    background-color: rgba(253, 253, 253, 1);
    border: 0.5px solid rgba(245, 158, 11, 0.4);
    border-left: 4px solid rgba(245, 158, 11, 1);
    border-radius: 12px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
    padding: 24px;
    z-index: 1500;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(450px);
    font-family: 'Ubuntu', sans-serif;
}

.session-warning-toast.show[b-8eyxbh74hv] {
    opacity: 1;
    transform: translateX(0);
}

.toast-content[b-8eyxbh74hv] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.toast-icon[b-8eyxbh74hv] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.toast-text[b-8eyxbh74hv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.toast-title[b-8eyxbh74hv] {
    color: rgba(245, 158, 11, 1);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

.toast-message[b-8eyxbh74hv] {
    color: rgba(75, 85, 99, 1);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

.toast-message strong[b-8eyxbh74hv] {
    color: rgba(0, 31, 87, 1);
    font-weight: 500;
}

.toast-actions[b-8eyxbh74hv] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.toast-btn[b-8eyxbh74hv] {
    flex: 1;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.toast-btn:disabled[b-8eyxbh74hv] {
    opacity: 0.7;
    cursor: not-allowed;
}

.toast-btn--primary[b-8eyxbh74hv] {
    background-color: rgba(0, 31, 87, 1);
    color: white;
    border: none;
}

.toast-btn--primary:hover:not(:disabled)[b-8eyxbh74hv] {
    background-color: rgba(0, 23, 65, 1);
    transform: translateY(-1px);
}

.toast-btn--secondary[b-8eyxbh74hv] {
    background-color: white;
    color: rgba(75, 85, 99, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
}

.toast-btn--secondary:hover[b-8eyxbh74hv] {
    background-color: rgba(243, 244, 246, 1);
}

@media (max-width: 768px) {
    .session-warning-toast[b-8eyxbh74hv] {
        top: 80px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
        padding: 16px;
    }
}
/* /Pages/Components/SeveritySlaMappingPicker.razor.rz.scp.css */
.ssm-picker[b-3fqgik33oi] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ssm-panels[b-3fqgik33oi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ssm-panel[b-3fqgik33oi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ssm-panel-title[b-3fqgik33oi] {
    font-size: 14px;
    font-weight: 700;
    font-family: Ubuntu, sans-serif;
    color: var(--dl-color-default-secondary, #141414);
}

.ssm-search-row[b-3fqgik33oi] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ssm-search[b-3fqgik33oi] {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 15px;
    font-family: Ubuntu, sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: transparent;
    box-sizing: border-box;
}

.ssm-select-all[b-3fqgik33oi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    font-family: Ubuntu, sans-serif;
    color: var(--dl-color-default-primary, #001f57);
    cursor: pointer;
}

.ssm-select-all input[b-3fqgik33oi] {
    width: 16px;
    height: 16px;
    accent-color: var(--dl-color-default-primary, #001f57);
    cursor: pointer;
}

.ssm-search:focus[b-3fqgik33oi] {
    outline: none;
    border-color: var(--dl-color-default-primary, #001f57);
    box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
}

.ssm-search[b-3fqgik33oi]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.ssm-list[b-3fqgik33oi] {
    overflow-y: auto;
    max-height: 320px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    background-color: #ffffff;
}

.ssm-item[b-3fqgik33oi] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 15px;
    font-family: Ubuntu, sans-serif;
    color: rgba(20, 20, 20, 1);
    border-bottom: 1px solid #f3f4f6;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    margin: 0;
}

.ssm-item:last-child[b-3fqgik33oi] {
    border-bottom: none;
}

.ssm-item:hover[b-3fqgik33oi] {
    background-color: #f5f8ff;
    color: var(--dl-color-default-primary, #001f57);
}

.ssm-item--selected[b-3fqgik33oi] {
    background-color: #eef3ff;
    border-left-color: var(--dl-color-default-primary, #001f57);
    color: var(--dl-color-default-primary, #001f57);
    font-weight: 500;
}

.ssm-item--mapped[b-3fqgik33oi] {
    background-color: #f1f5ff;
    color: #6b7280;
    cursor: not-allowed;
}

.ssm-check[b-3fqgik33oi],
.ssm-radio[b-3fqgik33oi] {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--dl-color-default-primary, #001f57);
    cursor: pointer;
    flex-shrink: 0;
}

.ssm-item--mapped .ssm-check[b-3fqgik33oi] {
    cursor: not-allowed;
}

.ssm-item-label[b-3fqgik33oi] {
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ssm-empty[b-3fqgik33oi] {
    padding: 24px 16px;
    text-align: center;
    font-size: 15px;
    font-family: Ubuntu, sans-serif;
    color: rgba(134, 134, 134, 1);
}

.ssm-add-row[b-3fqgik33oi] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ssm-add-btn[b-3fqgik33oi] {
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 15px;
    font-family: Ubuntu, sans-serif;
    font-weight: 700;
    cursor: pointer;
    border: none;
    background-color: var(--dl-color-default-accent, #002b82);
    color: #ffffff;
    transition: all 0.2s ease;
}

.ssm-add-btn:hover:not(:disabled)[b-3fqgik33oi] {
    background-color: rgba(0, 31, 92, 1);
}

.ssm-add-btn:disabled[b-3fqgik33oi] {
    background-color: rgba(0, 43, 130, 0.35);
    cursor: not-allowed;
}

.ssm-hint[b-3fqgik33oi] {
    font-size: 13px;
    font-family: Ubuntu, sans-serif;
    color: rgba(134, 134, 134, 1);
}

.ssm-mappings[b-3fqgik33oi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    padding: 14px 16px;
    background-color: #fafbff;
}

.ssm-mapping-group[b-3fqgik33oi] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.ssm-mapping-sla[b-3fqgik33oi] {
    font-size: 14px;
    font-weight: 700;
    font-family: Ubuntu, sans-serif;
    color: var(--dl-color-default-primary, #001f57);
    min-width: 120px;
    padding-top: 4px;
}

.ssm-chips[b-3fqgik33oi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.ssm-chip[b-3fqgik33oi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 12px;
    border-radius: 16px;
    background-color: #eef3ff;
    color: var(--dl-color-default-primary, #001f57);
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    border: 0.5px solid rgba(0, 31, 87, 0.2);
}

.ssm-chip-remove[b-3fqgik33oi] {
    border: none;
    background: transparent;
    color: var(--dl-color-default-primary, #001f57);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.ssm-chip-remove:hover[b-3fqgik33oi] {
    color: #b91c1c;
}

@media (max-width: 768px) {
    .ssm-panels[b-3fqgik33oi] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Components/StatusHistoryTimeline.razor.rz.scp.css */
/* Self-contained styles for the shared Status History timeline. Mirrors the per-page modal
   styles (previously duplicated in each ServiceRequest*.razor.css) so the component renders
   identically, plus the routing-row variants (kind badge + sub-department from → to). */

.details-row[b-650bqm88dz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.details-row label[b-650bqm88dz] {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.details-remark[b-650bqm88dz] {
    background: #f9fafb;
    border-radius: 16px;
    padding: 16px 18px;
    line-height: 1.5;
    margin: 0;
    font-size: 15px;
    color: #111827;
}

.details-timeline-list[b-650bqm88dz] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.details-timeline-entry[b-650bqm88dz] {
    padding: 14px 18px;
    border-radius: 12px;
    background: #f9fafb;
    border-left: 3px solid #2563eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Routing rows get a distinct amber accent to read apart from status changes. */
.details-timeline-entry.timeline-entry-routing[b-650bqm88dz] {
    border-left-color: #d97706;
}

.timeline-status-change[b-650bqm88dz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    flex-wrap: wrap;
}

.timeline-status-old[b-650bqm88dz] {
    color: #6b7280;
    text-decoration: line-through;
}

.timeline-arrow[b-650bqm88dz] {
    color: #9ca3af;
    font-weight: 400;
}

.timeline-status-new[b-650bqm88dz] {
    color: #2563eb;
}

/* Routing-row parts: a small kind pill + plain (non-struck-through) sub-department names. */
.timeline-kind-badge[b-650bqm88dz] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.timeline-route-old[b-650bqm88dz] {
    color: #6b7280;
}

.timeline-route-new[b-650bqm88dz] {
    color: #b45309;
}

.timeline-meta[b-650bqm88dz] {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.timeline-remarks[b-650bqm88dz] {
    margin: 0;
    font-size: 13px;
    color: #374151;
    font-style: italic;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}
/* /Pages/Components/SuccessToast.razor.rz.scp.css */
/* Success Toast - Matches Figma Screen 13/14 Design */
.success-toast[b-7du5grxyho] {
    position: fixed;
    top: 100px;
    right: 24px;
    width: 435px;
    max-width: calc(100vw - 48px);
    background-color: rgba(253, 253, 253, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    padding: 32px;
    z-index: 1400;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(450px);
}

.success-toast.show[b-7du5grxyho] {
    opacity: 1;
    transform: translateX(0);
}

.success-toast.hide[b-7du5grxyho] {
    opacity: 0;
    transform: translateX(450px);
}

.toast-content[b-7du5grxyho] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.toast-icon[b-7du5grxyho] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.toast-text[b-7du5grxyho] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.toast-title[b-7du5grxyho] {
    color: var(--dl-color-default-secondary);
    font-size: 20px;
    font-family: Ubuntu;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.toast-message[b-7du5grxyho] {
    color: var(--dl-color-default-subbody);
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.toast-close[b-7du5grxyho] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--dl-color-default-subbody);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.toast-close:hover[b-7du5grxyho],
.toast-close:focus-visible[b-7du5grxyho] {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--dl-color-default-secondary);
    outline: none;
}

/* Responsive */
@media (max-width: 768px) {
    .success-toast[b-7du5grxyho] {
        top: 80px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}

/* /Pages/Components/TicketDetailsModal.razor.rz.scp.css */
/* Modal Overlay */
.ticket-modal-overlay[b-d4lq4qlr4p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    animation: fadeIn-b-d4lq4qlr4p 0.2s ease;
}

@keyframes fadeIn-b-d4lq4qlr4p {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container */
.ticket-modal-container[b-d4lq4qlr4p] {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    min-width: 600px;
    height: 100vh;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: slideInRight-b-d4lq4qlr4p 0.3s ease;
    overflow: hidden;
}

@keyframes slideInRight-b-d4lq4qlr4p {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Header */
.ticket-modal-header[b-d4lq4qlr4p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    background-color: rgba(255, 255, 255, 1);
}

.ticket-header-left[b-d4lq4qlr4p] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ticket-number[b-d4lq4qlr4p] {
    font-size: 24px;
    font-family: Ubuntu, sans-serif;
    font-weight: 600;
    color: rgba(0, 31, 87, 1);
}

.ticket-close-btn[b-d4lq4qlr4p] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    color: rgba(134, 134, 134, 1);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.ticket-close-btn:hover[b-d4lq4qlr4p] {
    background-color: rgba(246, 246, 246, 1);
    color: rgba(20, 20, 20, 1);
}

/* Body */
.ticket-modal-body[b-d4lq4qlr4p] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ticket-section[b-d4lq4qlr4p] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title[b-d4lq4qlr4p] {
    font-size: 18px;
    font-family: Ubuntu, sans-serif;
    font-weight: 600;
    color: rgba(20, 20, 20, 1);
    margin: 0;
}

/* Ticket Info Grid */
.ticket-info-grid[b-d4lq4qlr4p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.info-item[b-d4lq4qlr4p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-item-full[b-d4lq4qlr4p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.info-label[b-d4lq4qlr4p] {
    font-size: 12px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    color: rgba(134, 134, 134, 1);
    text-transform: uppercase;
}

.info-value[b-d4lq4qlr4p] {
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    color: rgba(20, 20, 20, 1);
}

.info-description[b-d4lq4qlr4p] {
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    color: rgba(20, 20, 20, 1);
    line-height: 1.6;
    margin: 0;
}

/* Attachments Grid */
.attachments-grid[b-d4lq4qlr4p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.attachment-card[b-d4lq4qlr4p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.attachment-card:hover[b-d4lq4qlr4p] {
    background-color: rgba(246, 246, 246, 1);
    border-color: rgba(0, 90, 255, 1);
}

.attachment-icon[b-d4lq4qlr4p] {
    width: 40px;
    height: 40px;
}

.attachment-info[b-d4lq4qlr4p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.attachment-name[b-d4lq4qlr4p] {
    font-size: 12px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.attachment-size[b-d4lq4qlr4p] {
    font-size: 11px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    color: rgba(134, 134, 134, 1);
}

/* Comments & History – card style matching CustomerCare remarks */
.remark-cards-list[b-d4lq4qlr4p] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.remark-card[b-d4lq4qlr4p] {
    padding: 14px 18px;
    border-radius: 14px;
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
    color: #111827;
}

.remark-card-description[b-d4lq4qlr4p] {
    margin: 0;
    line-height: 1.5;
}

.remark-card-meta[b-d4lq4qlr4p] {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.remark-card-attachments[b-d4lq4qlr4p] {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.remark-card-attachment-item[b-d4lq4qlr4p] {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.remark-card-attachment-link[b-d4lq4qlr4p] {
    color: #1d4ed8;
    text-decoration: none;
}

.remark-card-attachment-link:hover[b-d4lq4qlr4p] {
    text-decoration: underline;
}

.remark-card-attachment-name[b-d4lq4qlr4p] {
    color: #374151;
}

.remark-card-attachment-size[b-d4lq4qlr4p] {
    color: #9ca3af;
    font-size: 12px;
}

/* Footer */
.ticket-modal-footer[b-d4lq4qlr4p] {
    padding: 20px 24px;
    border-top: 1px solid rgba(204, 204, 204, 1);
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Optional action buttons (e.g. a handler's work-actions) rendered above the footer content. */
.ticket-modal-actions[b-d4lq4qlr4p] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.resolution-badge[b-d4lq4qlr4p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: rgba(255, 149, 0, 0.12);
    border: 1px solid rgba(255, 149, 0, 1);
    border-radius: 8px;
    color: rgba(255, 149, 0, 1);
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resolution-badge:hover[b-d4lq4qlr4p] {
    background-color: rgba(255, 149, 0, 0.2);
}

.add-comment-link[b-d4lq4qlr4p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: rgba(0, 90, 255, 1);
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-comment-link:hover[b-d4lq4qlr4p] {
    background-color: rgba(0, 75, 215, 1);
}

.ticket-closed-message[b-d4lq4qlr4p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: rgba(52, 199, 89, 0.12);
    border: 1px solid rgba(52, 199, 89, 1);
    border-radius: 8px;
    color: rgba(52, 199, 89, 1);
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
}

.resolution-rating-display[b-d4lq4qlr4p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 20px;
    background-color: rgba(246, 246, 246, 1);
    border-radius: 8px;
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
}

.resolution-rating-display .rating-label[b-d4lq4qlr4p] { font-weight: 600; color: #374151; }
.resolution-rating-display .rating-value[b-d4lq4qlr4p] { color: #111827; }
.resolution-rating-display .rating-comment[b-d4lq4qlr4p] { margin: 4px 0 0 0; color: #6b7280; font-style: italic; }
.resolution-rating-display .rating-date[b-d4lq4qlr4p] { font-size: 12px; color: #9ca3af; }

.rate-resolution-link[b-d4lq4qlr4p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 1);
    border-radius: 8px;
    color: rgba(139, 92, 246, 1);
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rate-resolution-link:hover[b-d4lq4qlr4p] {
    background-color: rgba(139, 92, 246, 0.2);
}

/* Rate ticket modal – styled like Resolve Ticket modal */
.rating-modal-overlay[b-d4lq4qlr4p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ratingModalFadeIn-b-d4lq4qlr4p 0.2s ease;
}

@keyframes ratingModalFadeIn-b-d4lq4qlr4p {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rating-modal-container[b-d4lq4qlr4p] {
    width: 500px;
    max-width: 90vw;
    max-height: 90vh;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: ratingModalScaleIn-b-d4lq4qlr4p 0.3s ease;
    overflow: hidden;
}

@keyframes ratingModalScaleIn-b-d4lq4qlr4p {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.rating-modal-header[b-d4lq4qlr4p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
}

.rating-modal-title[b-d4lq4qlr4p] {
    font-size: 20px;
    font-family: Ubuntu, sans-serif;
    font-weight: 600;
    color: rgba(0, 31, 87, 1);
    margin: 0;
}

.rating-modal-close-btn[b-d4lq4qlr4p] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    color: rgba(134, 134, 134, 1);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.rating-modal-close-btn:hover[b-d4lq4qlr4p] {
    background-color: rgba(246, 246, 246, 1);
    color: rgba(20, 20, 20, 1);
}

.rating-modal-body[b-d4lq4qlr4p] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rating-modal-ticket-context[b-d4lq4qlr4p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: rgba(246, 246, 246, 1);
    border-radius: 8px;
}

.rating-context-label[b-d4lq4qlr4p] {
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    color: rgba(134, 134, 134, 1);
}

.rating-context-value[b-d4lq4qlr4p] {
    font-size: 16px;
    font-family: Ubuntu, sans-serif;
    font-weight: 600;
    color: rgba(0, 31, 87, 1);
}

.rating-modal-hint[b-d4lq4qlr4p] {
    font-size: 13px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    color: rgba(134, 134, 134, 1);
    margin: 0;
}

.rating-modal-options[b-d4lq4qlr4p] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rating-modal-option[b-d4lq4qlr4p] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rating-modal-option:hover[b-d4lq4qlr4p] {
    border-color: rgba(0, 90, 255, 1);
    background-color: rgba(0, 90, 255, 0.02);
}

.rating-modal-option.selected[b-d4lq4qlr4p],
.rating-modal-option:has(input:checked)[b-d4lq4qlr4p] {
    border-color: rgba(0, 90, 255, 1);
    background-color: rgba(0, 90, 255, 0.06);
}

.rating-modal-option input[type="radio"][b-d4lq4qlr4p] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: rgba(0, 90, 255, 1);
}

.rating-option-content[b-d4lq4qlr4p] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rating-option-title[b-d4lq4qlr4p] {
    font-size: 16px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
}

.rating-modal-comment-section[b-d4lq4qlr4p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rating-comment-label[b-d4lq4qlr4p] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rating-label-text[b-d4lq4qlr4p] {
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
}

.rating-textarea-wrapper[b-d4lq4qlr4p] {
    width: 100%;
    min-height: 100px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    overflow: hidden;
}

.rating-comment-textarea[b-d4lq4qlr4p] {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: none;
    background-color: transparent;
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    color: rgba(20, 20, 20, 1);
    resize: vertical;
    outline: none;
}

.rating-comment-textarea[b-d4lq4qlr4p]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.rating-modal-footer[b-d4lq4qlr4p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-top: 1px solid rgba(204, 204, 204, 1);
    gap: 12px;
}

.rating-btn-cancel[b-d4lq4qlr4p],
.rating-btn-submit[b-d4lq4qlr4p] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 12px 24px;
    cursor: pointer;
    font-family: Ubuntu, sans-serif;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.rating-btn-cancel[b-d4lq4qlr4p] {
    border: 0.5px solid rgba(204, 204, 204, 1);
    background-color: transparent;
    color: rgba(20, 20, 20, 1);
}

.rating-btn-cancel:hover[b-d4lq4qlr4p] {
    background-color: rgba(246, 246, 246, 1);
}

.rating-btn-submit[b-d4lq4qlr4p] {
    background-color: rgba(0, 31, 87, 1);
    border: none;
    color: rgba(255, 255, 255, 1);
}

.rating-btn-submit:hover:not(:disabled)[b-d4lq4qlr4p] {
    background-color: rgba(0, 25, 70, 1);
}

.rating-btn-submit:disabled[b-d4lq4qlr4p] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .rating-modal-container[b-d4lq4qlr4p] {
        width: 95vw;
        max-height: 85vh;
    }

    .rating-modal-header[b-d4lq4qlr4p] {
        padding: 16px 20px;
    }

    .rating-modal-title[b-d4lq4qlr4p] {
        font-size: 18px;
    }

    .rating-modal-body[b-d4lq4qlr4p] {
        padding: 20px;
    }

    .rating-modal-option[b-d4lq4qlr4p] {
        padding: 12px;
    }

    .rating-option-title[b-d4lq4qlr4p] {
        font-size: 15px;
    }

    .rating-modal-footer[b-d4lq4qlr4p] {
        padding: 16px 20px;
        flex-direction: column-reverse;
    }

    .rating-btn-cancel[b-d4lq4qlr4p],
    .rating-btn-submit[b-d4lq4qlr4p] {
        width: 100%;
    }
}

/* Status Badges */
.status-badge[b-d4lq4qlr4p] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    display: inline-block;
}

.status-open[b-d4lq4qlr4p] {
    border: 0.5px solid rgba(255, 59, 48, 1);
    background-color: rgba(255, 59, 48, 0.12);
    color: rgba(255, 59, 48, 1);
}

.status-in-progress[b-d4lq4qlr4p] {
    border: 0.5px solid rgba(0, 122, 255, 1);
    background-color: rgba(0, 122, 255, 0.12);
    color: rgba(0, 122, 255, 1);
}

.status-resolved[b-d4lq4qlr4p] {
    border: 0.5px solid rgba(255, 149, 0, 1);
    background-color: rgba(255, 149, 0, 0.12);
    color: rgba(255, 149, 0, 1);
}

.status-closed[b-d4lq4qlr4p] {
    border: 0.5px solid rgba(52, 199, 89, 1);
    background-color: rgba(52, 199, 89, 0.12);
    color: rgba(52, 199, 89, 1);
}

.status-reopened[b-d4lq4qlr4p] {
    border: 0.5px solid rgba(255, 149, 0, 1);
    background-color: rgba(255, 149, 0, 0.12);
    color: rgba(255, 149, 0, 1);
}

/* Severity Badges */
.severity-badge[b-d4lq4qlr4p] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    display: inline-block;
}

.severity-critical[b-d4lq4qlr4p] {
    border: 0.5px solid rgba(255, 59, 48, 1);
    background-color: rgba(255, 59, 48, 0.12);
    color: rgba(255, 59, 48, 1);
}

.severity-high[b-d4lq4qlr4p] {
    border: 0.5px solid rgba(162, 132, 94, 1);
    background-color: rgba(162, 132, 94, 0.12);
    color: rgba(162, 132, 94, 1);
}

.severity-medium[b-d4lq4qlr4p] {
    border: 0.5px solid rgba(255, 149, 0, 1);
    background-color: rgba(255, 149, 0, 0.12);
    color: rgba(255, 149, 0, 1);
}

.severity-low[b-d4lq4qlr4p] {
    border: 0.5px solid rgba(0, 199, 190, 1);
    background-color: rgba(0, 199, 190, 0.12);
    color: rgba(0, 199, 190, 1);
}

/* Responsive */
@media (max-width: 1024px) {
    .ticket-modal-container[b-d4lq4qlr4p] {
        width: 70%;
        min-width: 400px;
    }

    .ticket-info-grid[b-d4lq4qlr4p] {
        grid-template-columns: 1fr;
    }

    .attachments-grid[b-d4lq4qlr4p] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

@media (max-width: 768px) {
    .ticket-modal-container[b-d4lq4qlr4p] {
        width: 100%;
        min-width: 100%;
    }

    .ticket-modal-header[b-d4lq4qlr4p] {
        padding: 16px;
    }

    .ticket-number[b-d4lq4qlr4p] {
        font-size: 20px;
    }

    .ticket-modal-body[b-d4lq4qlr4p] {
        padding: 16px;
    }

    .attachments-grid[b-d4lq4qlr4p] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

/* Assigned handlers list (handler view only) */
.assigned-handlers-list[b-d4lq4qlr4p] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assigned-handler-item[b-d4lq4qlr4p] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background-color: rgba(247, 247, 247, 1);
    border: 1px solid rgba(229, 231, 235, 1);
    border-radius: 8px;
}

.assigned-handler-name[b-d4lq4qlr4p] {
    font-size: 14px;
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
}

.assigned-handler-email[b-d4lq4qlr4p] {
    font-size: 12px;
    color: rgba(107, 114, 128, 1);
}
/* /Pages/Components/WarningToast.razor.rz.scp.css */
/* Warning Toast - amber themed sibling of SuccessToast / ErrorToast */
.warning-toast[b-kzsldzpyic] {
    position: fixed;
    top: 100px;
    right: 24px;
    width: 435px;
    max-width: calc(100vw - 48px);
    background-color: rgba(253, 253, 253, 1);
    border: 0.5px solid rgba(245, 158, 11, 0.4);
    border-left: 4px solid rgba(245, 158, 11, 1);
    border-radius: 12px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    padding: 32px;
    z-index: 1400;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(450px);
}

.warning-toast.show[b-kzsldzpyic] {
    opacity: 1;
    transform: translateX(0);
}

.warning-toast.hide[b-kzsldzpyic] {
    opacity: 0;
    transform: translateX(450px);
}

.toast-content[b-kzsldzpyic] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.toast-icon[b-kzsldzpyic] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.toast-text[b-kzsldzpyic] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.toast-title[b-kzsldzpyic] {
    color: rgba(180, 83, 9, 1);
    font-size: 20px;
    font-family: Ubuntu;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.toast-message[b-kzsldzpyic] {
    color: var(--dl-color-default-subbody, rgba(75, 85, 99, 1));
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.toast-close[b-kzsldzpyic] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--dl-color-default-subbody, rgba(75, 85, 99, 1));
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.toast-close:hover[b-kzsldzpyic],
.toast-close:focus-visible[b-kzsldzpyic] {
    background-color: rgba(0, 0, 0, 0.06);
    color: rgba(180, 83, 9, 1);
    outline: none;
}

/* Responsive */
@media (max-width: 768px) {
    .warning-toast[b-kzsldzpyic] {
        top: 80px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}
/* /Pages/CreateMealSchedule.razor.rz.scp.css */
/* Create Meal Schedule Page - Matches Figma Design */
.create-meal-schedule-container[b-08a7vi52za] {
    background-color: rgba(253, 253, 253, 1);
    display: flex;
    flex-direction: column;
}

/* Content Wrapper */
.content-wrapper[b-08a7vi52za] {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Title & Actions Section */
.title-actions-section[b-08a7vi52za] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.title-section[b-08a7vi52za] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-title[b-08a7vi52za] {
    color: var(--dl-color-default-secondary);
    font-size: 20px;
    font-family: Ubuntu;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.page-subtitle[b-08a7vi52za] {
    color: var(--dl-color-default-subbody);
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

/* Action Buttons */
.action-buttons-section[b-08a7vi52za] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.action-btn[b-08a7vi52za] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-family: Ubuntu;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

.btn-save-draft[b-08a7vi52za] {
    background-color: rgba(255, 255, 255, 1);
    color: var(--dl-color-default-headings);
    border: 0.5px solid rgba(204, 204, 204, 1);
    font-weight: 500;
}

.btn-save-draft:hover[b-08a7vi52za] {
    background-color: rgba(248, 248, 248, 1);
}

.btn-save-draft svg[b-08a7vi52za] {
    width: 20px;
    height: 20px;
}

.btn-publish-meals[b-08a7vi52za] {
    background-color: var(--dl-color-default-accent);
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
}

.btn-publish-meals:hover:not(:disabled)[b-08a7vi52za] {
    background-color: rgba(0, 31, 92, 1);
}

.btn-publish-meals:disabled[b-08a7vi52za] {
    background-color: rgba(0, 43, 130, 0.35);
    cursor: not-allowed;
}

.btn-publish-meals svg[b-08a7vi52za] {
    width: 20px;
    height: 20px;
}

/* .btn-navigate-dashboard replaced by the shared .btn-back in wwwroot/css/app.css.
   The Back button now lives inside .title-section (above the page title), not in the
   action-buttons-section, so the right-hand button group is just Save Draft + Publish. */


/* Empty State Wrapper */

.btn-back[b-08a7vi52za]{
    width:80px;
}

.empty-state-wrapper[b-08a7vi52za] {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(280px, 1fr);
    gap: 32px;
    align-items: start;
}

.empty-state-content[b-08a7vi52za] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.empty-state-center[b-08a7vi52za] {
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    min-height: 400px;
}

.empty-icon-large[b-08a7vi52za] {
    width: 96px;
    height: 96px;
    background-color: var(--dl-color-default-lightbackground);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dl-color-default-accent);
}

.empty-title[b-08a7vi52za] {
    color: var(--dl-color-default-secondary);
    font-size: 20px;
    font-family: Ubuntu;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

.empty-subtitle[b-08a7vi52za] {
    color: var(--dl-color-default-subbody);
    font-size: 16px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.progress-placeholder[b-08a7vi52za] {
    position: sticky;
    top: 100px;
}

.empty-progress-content[b-08a7vi52za] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 0;
}

.empty-stat[b-08a7vi52za] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Schedule Editing Layout */
.schedule-editing-layout[b-08a7vi52za] {
    display: grid;
    grid-template-columns: minmax(0, 2.3fr) minmax(280px, 1fr);
    gap: 32px;
    align-items: start;
}

.main-content-column[b-08a7vi52za] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sidebar-column[b-08a7vi52za] {
    position: sticky;
    top: 100px;
}

/* Daily Planning Section */
.daily-planning-section[b-08a7vi52za] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-heading[b-08a7vi52za] {
    color: var(--dl-color-default-secondary);
    font-size: 20px;
    font-family: Ubuntu;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.daily-meals-list[b-08a7vi52za] {
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    overflow: hidden;
}

/* Loading Overlay */
.loading-overlay-figma[b-08a7vi52za] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.loading-spinner-figma[b-08a7vi52za] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(224, 230, 237, 1);
    border-top-color: var(--dl-color-default-accent);
    border-radius: 50%;
    animation: spin-b-08a7vi52za 0.8s linear infinite;
}

@keyframes spin-b-08a7vi52za {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .empty-state-wrapper[b-08a7vi52za],
    .schedule-editing-layout[b-08a7vi52za] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sidebar-column[b-08a7vi52za],
    .progress-placeholder[b-08a7vi52za] {
        position: static;
    }
}

@media (max-width: 768px) {
    .content-wrapper[b-08a7vi52za] {
        padding: 16px;
    }

    .title-actions-section[b-08a7vi52za] {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-buttons-section[b-08a7vi52za] {
        width: 100%;
        flex-direction: column;
    }

    .action-btn[b-08a7vi52za] {
        width: 100%;
    }

    .empty-state-center[b-08a7vi52za] {
        padding: 40px 24px;
    }
}

@media (max-width: 480px) {
    .content-wrapper[b-08a7vi52za] {
        padding: 12px;
        gap: 20px;
    }

    .page-title[b-08a7vi52za] {
        font-size: 18px;
    }

    .page-subtitle[b-08a7vi52za] {
        font-size: 14px;
    }

    .action-btn[b-08a7vi52za] {
        padding: 12px 16px;
        font-size: 14px;
    }

    .action-btn span[b-08a7vi52za] {
        display: none;
    }

    .action-btn svg[b-08a7vi52za] {
        width: 18px;
        height: 18px;
    }
}
/* /Pages/CreateServiceRequest.razor.rz.scp.css */
/* Moved from inline <style> in CreateServiceRequest.razor (:root vars relocated to app.css) */

    .create-service-request-container[b-pu89tja8b2] {
        width: 100%;
        display: flex;
        overflow-x: hidden;
        min-height: 100vh;
        align-items: center;
        flex-direction: column;
        background-color: rgba(246, 246, 246, 1);
        padding: 14px;
    }

    .upload-text-warning[b-pu89tja8b2]{
        color:  #ff3b30;
        font-size: 20px;
    }
    .create-service-request-frame[b-pu89tja8b2] {
        width: 100%;
        max-width: 1164px;
        min-height: 992px;
        display: flex;
        overflow: hidden;
        position: relative;
        align-items: flex-start;
        border-color: rgba(204, 204, 204, 1);
        border-style: solid;
        border-width: 0.5px;
        border-radius: 8px;
        background-color: rgba(246, 246, 246, 1);
        padding: 22px;
    }

    .create-ticket-form[b-pu89tja8b2] {
        width: 100%;
        min-height: 784px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 1);
        padding: 20px;
        gap: 29px;
    }

    .form-title[b-pu89tja8b2] {
        color: rgba(0, 31, 87, 1);
        font-size: 20px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: normal;
    }

    .form-field-container[b-pu89tja8b2] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .form-field[b-pu89tja8b2],
    .form-field-full[b-pu89tja8b2] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .form-field-full[b-pu89tja8b2] {
        width: 100%;
    }

    .field-label[b-pu89tja8b2] {
        color: rgba(20, 20, 20, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: normal;
    }

    .field-label-hint[b-pu89tja8b2] {
        color: rgba(134, 134, 134, 1);
        font-weight: 400;
    }

    .select-container[b-pu89tja8b2] {
        position: relative;
        width: 100%;
    }

    .select-field[b-pu89tja8b2] {
        width: 100%;
        height: 50px;
        padding: 11px 12px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 12px;
        background-color: transparent;
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        color: rgba(20, 20, 20, 1);
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    .select-field option:first-child[b-pu89tja8b2] {
        color: rgba(134, 134, 134, 1);
    }

    .select-icon[b-pu89tja8b2] {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .issue-picker-trigger[b-pu89tja8b2] {
        cursor: pointer;
    }

    .issue-picker-trigger--disabled[b-pu89tja8b2] {
        cursor: not-allowed;
        opacity: 0.7;
        pointer-events: none;
    }

    /* "Add new issue" free-text input (matches the picker box). */
    .new-issue-input[b-pu89tja8b2] {
        box-sizing: border-box;
        outline: none;
    }

    .new-issue-input:focus[b-pu89tja8b2] {
        border-color: rgba(0, 31, 87, 1);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.1);
    }

    .new-issue-input[b-pu89tja8b2]::placeholder {
        color: rgba(134, 134, 134, 1);
    }

    /* "Can't find your issue?" toggle switch. */
    .new-issue-toggle[b-pu89tja8b2] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        cursor: pointer;
        user-select: none;
    }

    .new-issue-toggle input[b-pu89tja8b2] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .new-issue-toggle-track[b-pu89tja8b2] {
        position: relative;
        flex-shrink: 0;
        width: 38px;
        height: 22px;
        border-radius: 11px;
        background-color: rgba(204, 204, 204, 1);
        transition: background-color 0.2s ease;
    }

    .new-issue-toggle-thumb[b-pu89tja8b2] {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #ffffff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
        transition: transform 0.2s ease;
    }

    .new-issue-toggle input:checked + .new-issue-toggle-track[b-pu89tja8b2] {
        background-color: rgba(0, 31, 87, 1);
    }

    .new-issue-toggle input:checked + .new-issue-toggle-track .new-issue-toggle-thumb[b-pu89tja8b2] {
        transform: translateX(16px);
    }

    .new-issue-toggle input:focus-visible + .new-issue-toggle-track[b-pu89tja8b2] {
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.2);
    }

    .new-issue-toggle-text[b-pu89tja8b2] {
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        color: rgba(134, 134, 134, 1);
    }

    .issue-picker-value[b-pu89tja8b2] {
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }

    .issue-picker-value.placeholder[b-pu89tja8b2] {
        color: rgba(134, 134, 134, 1);
    }

    /* Location autocomplete (same as CreateServiceRequestCustomerCare) */
    .subdepartment-filter-wrapper[b-pu89tja8b2] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .subdepartment-autocomplete-wrapper[b-pu89tja8b2] {
        position: relative;
        width: 100%;
    }

    .subdepartment-search-input[b-pu89tja8b2] {
        width: 100%;
        height: 50px;
        border-radius: 12px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        padding: 11px 12px;
        background-color: transparent;
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        color: rgba(20, 20, 20, 1);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .subdepartment-search-input:focus[b-pu89tja8b2] {
        outline: none;
        border-color: var(--dl-color-default-primary);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
    }

    .subdepartment-search-input:disabled[b-pu89tja8b2] {
        background-color: #f1f1f1;
        color: rgba(134, 134, 134, 1);
        cursor: not-allowed;
    }

    .subdepartment-search-input[b-pu89tja8b2]::placeholder {
        color: rgba(134, 134, 134, 1);
    }

    .subdepartment-dropdown[b-pu89tja8b2] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        border: 1px solid rgba(204, 204, 204, 1);
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
        max-height: 300px;
        overflow-y: auto;
        z-index: 1000;
        margin-top: 4px;
    }

    .subdepartment-dropdown-item[b-pu89tja8b2] {
        padding: 12px 16px;
        cursor: pointer;
        font-size: 15px;
        color: rgba(20, 20, 20, 1);
        transition: background-color 0.15s ease;
        border-bottom: 1px solid #f3f4f6;
    }

    .subdepartment-dropdown-item:last-child[b-pu89tja8b2] {
        border-bottom: none;
    }

    .subdepartment-dropdown-item:hover[b-pu89tja8b2] {
        background-color: #f5f8ff;
        color: var(--dl-color-default-primary);
    }

    .subdepartment-dropdown-item:active[b-pu89tja8b2] {
        background-color: #e0e7ff;
    }

    .textarea-container[b-pu89tja8b2] {
        width: 100%;
        height: 140px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 12px;
    }

    .textarea-field[b-pu89tja8b2] {
        width: 100%;
        height: 100%;
        padding: 12px;
        border: none;
        background-color: transparent;
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        color: rgba(20, 20, 20, 1);
        resize: none;
        outline: none;
    }

    .textarea-field[b-pu89tja8b2]::placeholder {
        color: rgba(134, 134, 134, 1);
    }

    .resize-handle[b-pu89tja8b2] {
        position: absolute;
        bottom: 4px;
        right: 4px;
        display: flex;
        align-items: center;
        gap: 2px;
        pointer-events: none;
    }

    .word-count[b-pu89tja8b2] {
        color: rgba(134, 134, 134, 1);
        font-size: 12px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        text-align: right;
        align-self: flex-end;
    }

    .file-upload-area[b-pu89tja8b2] {
        width: 100%;
        min-height: 156px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        align-items: center;
        justify-content: center;
        border: 1.5px solid rgba(50, 173, 230, 1);
        border-radius: 12px;
        background-color: rgba(50, 173, 230, 0.06);
        gap: 8px;
        cursor: pointer;
    }

    /* ::deep — targets the <input> rendered by the <InputFile> child component,
       which does not carry this page's CSS-isolation scope attribute. */
    [b-pu89tja8b2] .file-input-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }

    .file-upload-area:hover[b-pu89tja8b2] {
        background-color: rgba(50, 173, 230, 0.1);
    }

    .upload-text[b-pu89tja8b2] {
        color: rgba(20, 20, 20, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
    }

    .upload-hint[b-pu89tja8b2] {
        color: rgba(134, 134, 134, 1);
        font-size: 12px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
    }

    .upload-button[b-pu89tja8b2] {
        gap: 12px;
        padding: 8px 16px;
        display: flex;
        align-items: center;
        border-radius: 12px;
        justify-content: center;
        background-color: rgba(0, 90, 255, 1);
        margin-top: 4px;
    }

    .upload-button span[b-pu89tja8b2] {
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        line-height: normal;
    }

    .upload-button:hover[b-pu89tja8b2] {
        background-color: rgba(0, 75, 215, 1);
    }

    .uploaded-files-section[b-pu89tja8b2] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .uploaded-files-title[b-pu89tja8b2] {
        color: rgba(20, 20, 20, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: normal;
    }

    .uploaded-files-grid[b-pu89tja8b2] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }

    .file-preview-card[b-pu89tja8b2] {
        width: 200px;
        height: 132px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 12px;
        overflow: hidden;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .file-preview-header[b-pu89tja8b2] {
        display: flex;
        gap: 8px;
        padding: 16px 12px 12px 12px;
        align-items: center;
    }

    .file-preview-info[b-pu89tja8b2] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }

    .file-preview-name[b-pu89tja8b2] {
        color: rgba(20, 20, 20, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-preview-size[b-pu89tja8b2] {
        color: rgba(134, 134, 134, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
    }

    .file-preview-actions[b-pu89tja8b2] {
        display: flex;
        gap: 12px;
        padding: 0 12px 12px 12px;
        align-items: center;
    }

    .file-preview-btn[b-pu89tja8b2] {
        flex: 1;
        padding: 12px 24px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 8px;
        background-color: transparent;
        cursor: pointer;
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        color: rgba(20, 20, 20, 1);
    }

    .file-preview-btn:disabled[b-pu89tja8b2] {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .file-delete-btn[b-pu89tja8b2] {
        width: 36px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(246, 246, 246, 1) 0%, rgba(230, 230, 230, 1) 100%);
        cursor: pointer;
        padding: 0;
    }

    .file-delete-btn:hover[b-pu89tja8b2] {
        background: linear-gradient(180deg, rgba(230, 230, 230, 1) 0%, rgba(220, 220, 220, 1) 100%);
    }

    .form-actions[b-pu89tja8b2] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
    }

    .btn-cancel[b-pu89tja8b2],
    .btn-submit[b-pu89tja8b2] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        padding: 16px 24px;
        cursor: pointer;
        font-family: Ubuntu, sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
        transition: all 0.2s ease;
    }

    .btn-cancel[b-pu89tja8b2] {
        width: 150px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        background-color: transparent;
    }

    .btn-cancel span[b-pu89tja8b2] {
        color: rgba(20, 20, 20, 1);
    }

    .btn-cancel:hover[b-pu89tja8b2] {
        background-color: rgba(246, 246, 246, 1);
    }

    .btn-submit[b-pu89tja8b2] {
        width: 173px;
        background-color: rgba(0, 31, 87, 1);
        border: none;
    }

    .btn-submit span[b-pu89tja8b2] {
        color: rgba(255, 255, 255, 1);
    }

    .btn-submit:hover[b-pu89tja8b2] {
        background-color: rgba(0, 25, 70, 1);
    }

    /* Responsive adjustments */
    @media (max-width: 1024px) {
        .form-field-container[b-pu89tja8b2] {
            grid-template-columns: 1fr;
        }

        .create-service-request-frame[b-pu89tja8b2] {
            padding: 16px;
        }

        .create-ticket-form[b-pu89tja8b2] {
            padding: 16px;
        }

        .uploaded-files-grid[b-pu89tja8b2] {
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        }

        .file-preview-card[b-pu89tja8b2] {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .create-service-request-container[b-pu89tja8b2] {
            padding: 8px;
        }

        .form-actions[b-pu89tja8b2] {
            flex-direction: column-reverse;
            gap: 12px;
        }

        .btn-cancel[b-pu89tja8b2],
        .btn-submit[b-pu89tja8b2] {
            width: 100%;
        }

        .uploaded-files-grid[b-pu89tja8b2] {
            grid-template-columns: 1fr;
        }

        .file-preview-card[b-pu89tja8b2] {
            width: 100%;
        }
    }

    /* Error Message */
    .error-message[b-pu89tja8b2] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background-color: rgba(255, 59, 48, 0.1);
        border: 1px solid rgba(255, 59, 48, 1);
        border-radius: 12px;
        color: rgba(255, 59, 48, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        margin-top: 20px;
    }

    .error-message svg[b-pu89tja8b2] {
        flex-shrink: 0;
    }

    /* Upload Success Message */
    .upload-success-message[b-pu89tja8b2] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background-color: rgba(52, 199, 89, 0.10);
        border: 1px solid rgba(52, 199, 89, 0.6);
        border-radius: 12px;
        color: rgba(20, 110, 52, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        margin-top: 12px;
    }

    .upload-success-message svg[b-pu89tja8b2] {
        flex-shrink: 0;
    }

    .btn-submit:disabled[b-pu89tja8b2],
    .btn-cancel:disabled[b-pu89tja8b2] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .field-error[b-pu89tja8b2] {
        font-size: 13px;
        color: #b91c1c;
        margin-top: 4px;
        display: block;
    }

    .input-invalid[b-pu89tja8b2] {
        border-color: #dc2626 !important;
    }
/* /Pages/CreateServiceRequestCustomerCare.razor.rz.scp.css */
/* Moved from inline <style> in CreateServiceRequestCustomerCare.razor (:root vars relocated to app.css) */

    .upload-text-warning[b-f3ujnsfkqy] {
        color: #ff3b30;
        font-size: 20px;
    }

    .cscc-attach-error[b-f3ujnsfkqy] {
        margin-top: 12px;
        padding: 10px 14px;
        background-color: rgba(255, 59, 48, 0.10);
        border: 1px solid rgba(255, 59, 48, 0.6);
        border-radius: 10px;
        color: #c2261d;
        font-size: 14px;
        font-weight: 500;
    }

    .cscc-attach-success[b-f3ujnsfkqy] {
        margin-top: 12px;
        padding: 10px 14px;
        background-color: rgba(52, 199, 89, 0.10);
        border: 1px solid rgba(52, 199, 89, 0.6);
        border-radius: 10px;
        color: #1f8a4a;
        font-size: 14px;
        font-weight: 500;
    }

    .cscc-shell[b-f3ujnsfkqy] {
        min-height: 100vh;
        padding: 24px;
        background-color: var(--cscc-frame);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cscc-card[b-f3ujnsfkqy] {
        width: 100%;
        max-width: 1164px;
        background-color: var(--cscc-surface);
        border: 1px solid var(--cscc-border);
        border-radius: 16px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.04);
        padding: 32px 36px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .cscc-header[b-f3ujnsfkqy] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .cscc-breadcrumb[b-f3ujnsfkqy] {
        display: flex;
        gap: 8px;
        font-size: 14px;
        color: var(--cscc-muted);
    }

    .cscc-breadcrumb .current[b-f3ujnsfkqy] {
        color: var(--cscc-text);
        font-weight: 500;
    }

    .cscc-title-block h1[b-f3ujnsfkqy] {
        font-size: 28px;
        font-weight: 600;
        color: var(--cscc-text);
        margin-bottom: 8px;
    }

    .cscc-title-block p[b-f3ujnsfkqy] {
        font-size: 16px;
        color: var(--cscc-muted);
        max-width: 640px;
    }

    .cscc-body[b-f3ujnsfkqy] {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .cscc-grid[b-f3ujnsfkqy] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    /* Segmented two-column create form: left = Department (entry), right = 3 stacked segments. */
    .cscc-columns[b-f3ujnsfkqy] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    .cscc-col[b-f3ujnsfkqy] {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .cscc-segment[b-f3ujnsfkqy] {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        border: 1px solid var(--cscc-border);
        border-radius: 12px;
        background-color: var(--cscc-surface);
    }

    .cscc-field[b-f3ujnsfkqy] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .cscc-field-wide[b-f3ujnsfkqy] {
        gap: 16px;
    }

    .cscc-label[b-f3ujnsfkqy] {
        font-size: 16px;
        font-weight: 500;
        color: var(--cscc-text);
    }

    .cscc-row-subdept-enterprise[b-f3ujnsfkqy] {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 20px;
        align-items: flex-end;
    }

    .cscc-row-subdept-enterprise .cscc-subdept-cell[b-f3ujnsfkqy] {
        grid-column: span 4;
        min-width: 0;
    }

    .cscc-row-subdept-enterprise .cscc-toggle-cell[b-f3ujnsfkqy] {
        grid-column: span 4;
    }

    .cscc-row-subdept-enterprise .cscc-enterprise-cell[b-f3ujnsfkqy] {
        grid-column: span 4;
        min-width: 0;
    }

    .cscc-enterprise-placeholder[b-f3ujnsfkqy] {
        min-height: 48px;
    }

    .cscc-toggle-switch[b-f3ujnsfkqy] {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 24px;
        cursor: pointer;
    }

    .cscc-toggle-switch input[b-f3ujnsfkqy] {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .cscc-toggle-slider[b-f3ujnsfkqy] {
        position: absolute;
        inset: 0;
        background-color: var(--cscc-border);
        border-radius: 24px;
        transition: background-color 0.2s;
    }

    .cscc-toggle-slider[b-f3ujnsfkqy]::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s;
    }

    .cscc-toggle-switch input:checked + .cscc-toggle-slider[b-f3ujnsfkqy] {
        background-color: var(--cscc-blue);
    }

    .cscc-toggle-switch input:checked + .cscc-toggle-slider[b-f3ujnsfkqy]::before {
        transform: translateX(24px);
    }

    .cscc-select[b-f3ujnsfkqy] {
        position: relative;
        display: flex;
        align-items: center;
    }

    .cscc-select select[b-f3ujnsfkqy] {
        width: 100%;
        height: 48px;
        border-radius: 12px;
        border: 1px solid var(--cscc-border);
        padding: 0 44px 0 16px;
        background-color: var(--cscc-surface);
        font-size: 16px;
        color: var(--cscc-text);
    }

    .cscc-select select:disabled[b-f3ujnsfkqy] {
        background-color: #f1f1f1;
        color: var(--cscc-muted);
        cursor: not-allowed;
    }

    .cscc-picker-trigger[b-f3ujnsfkqy] {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 48px;
        border-radius: 12px;
        border: 1px solid var(--cscc-border);
        padding: 0 44px 0 16px;
        /*background-color: var(--cscc-surface);*/
        cursor: pointer !important;
        box-sizing: border-box;
        transition: border-color 0.15s ease, background-color 0.15s ease;
    }

    /* Override Chrome's busy/progress cursor while the tab is still "loading". */
    .cscc-picker-trigger:not(.cscc-picker-trigger--disabled)[b-f3ujnsfkqy] {
        cursor: pointer !important;
    }

    /* Make an enabled picker visibly read as a clickable dropdown. */
    .cscc-picker-trigger:not(.cscc-picker-trigger--disabled):hover[b-f3ujnsfkqy],
    .cscc-picker-trigger:not(.cscc-picker-trigger--disabled):focus-visible[b-f3ujnsfkqy] {
        border-color: var(--cscc-text);
        background-color: #f5f7fb;
        outline: none;
    }

    .cscc-picker-trigger--disabled[b-f3ujnsfkqy] {
        background-color: #f1f1f1;
        color: var(--cscc-muted);
        cursor: not-allowed;
        pointer-events: none;
    }

    .cscc-picker-value[b-f3ujnsfkqy] {
        flex: 1;
        font-size: 16px;
        color: var(--cscc-text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cscc-picker-value.placeholder[b-f3ujnsfkqy] {
            color: var(--cscc-custom);
    }

    /* Clear down-chevron so the field reads as a clickable dropdown (not a status glyph). */
    .cscc-caret[b-f3ujnsfkqy] {
        position: absolute;
        right: 18px;
        width: 9px;
        height: 9px;
        border: solid var(--cscc-text);
        border-width: 0 2px 2px 0;
        transform: translateY(-2px) rotate(45deg);
        pointer-events: none;
    }

    .field-status[b-f3ujnsfkqy] {
        font-size: 14px;
        color: var(--cscc-muted);
    }

    .field-status.error[b-f3ujnsfkqy] {
        color: var(--cscc-danger);
    }

    .cscc-upload-zone[b-f3ujnsfkqy] {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 32px;
        border: 1.5px dashed var(--cscc-border);
        border-radius: 12px;
        background-color: #f8fbff;
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }

    .cscc-upload-zone.drag-over[b-f3ujnsfkqy] {
        border-color: var(--cscc-navy);
        background-color: rgba(0, 49, 85, 0.05);
    }

    /* ::deep — targets the <input> rendered by the <InputFile> child component. */
    [b-f3ujnsfkqy] .cscc-upload-input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .cscc-upload-icon[b-f3ujnsfkqy] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(180deg, rgba(0, 49, 85, 0.1) 0%, rgba(0, 49, 85, 0.05) 100%);
    }

    .cscc-upload-title[b-f3ujnsfkqy] {
        font-weight: 500;
        color: var(--cscc-text);
    }

    .cscc-upload-subtitle[b-f3ujnsfkqy] {
        font-size: 14px;
        color: var(--cscc-muted);
    }

    .cscc-upload-btn[b-f3ujnsfkqy] {
        padding: 10px 20px;
        border-radius: 10px;
        background-color: var(--cscc-navy);
        color: #ffffff;
        font-size: 15px;
    }

    /* Uploaded Files section - matches CreateServiceRequest.razor */
    .uploaded-files-section[b-f3ujnsfkqy] {
        width: 100%;
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .uploaded-files-title[b-f3ujnsfkqy] {
        color: rgba(20, 20, 20, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: normal;
    }

    .uploaded-files-grid[b-f3ujnsfkqy] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }

    .file-preview-card[b-f3ujnsfkqy] {
        width: 200px;
        height: 132px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 12px;
        overflow: hidden;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .file-preview-header[b-f3ujnsfkqy] {
        display: flex;
        gap: 8px;
        padding: 16px 12px 12px 12px;
        align-items: center;
    }

    .file-preview-info[b-f3ujnsfkqy] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }

    .file-preview-name[b-f3ujnsfkqy] {
        color: rgba(20, 20, 20, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-preview-size[b-f3ujnsfkqy] {
        color: rgba(134, 134, 134, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
    }

    .file-preview-actions[b-f3ujnsfkqy] {
        display: flex;
        gap: 12px;
        padding: 0 12px 12px 12px;
        align-items: center;
    }

    .file-preview-btn[b-f3ujnsfkqy] {
        flex: 1;
        padding: 12px 24px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 8px;
        background-color: transparent;
        cursor: pointer;
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        color: rgba(20, 20, 20, 1);
    }

    .file-preview-btn:disabled[b-f3ujnsfkqy] {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .file-delete-btn[b-f3ujnsfkqy] {
        width: 36px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(246, 246, 246, 1) 0%, rgba(230, 230, 230, 1) 100%);
        cursor: pointer;
        padding: 0;
    }

    .file-delete-btn:hover[b-f3ujnsfkqy] {
        background: linear-gradient(180deg, rgba(230, 230, 230, 1) 0%, rgba(220, 220, 220, 1) 100%);
    }


    .cscc-actions[b-f3ujnsfkqy] {
        margin-top: 12px;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }

    .cscc-btn[b-f3ujnsfkqy] {
        padding: 14px 26px;
        border-radius: 12px;
        border: none;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .cscc-btn.primary[b-f3ujnsfkqy] {
        background-color: var(--cscc-navy);
        color: #ffffff;
    }

    .cscc-btn.ghost[b-f3ujnsfkqy] {
        background-color: transparent;
        border: 1px solid var(--cscc-border);
        color: var(--cscc-text);
    }

    .cscc-btn:hover[b-f3ujnsfkqy] {
        opacity: 0.9;
    }

    .cscc-link-button[b-f3ujnsfkqy] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        padding: 10px 16px;
        border-radius: 10px;
        border: 1px solid var(--cscc-border);
        background-color: #f8fbff;
        color: var(--cscc-navy);
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
        width: fit-content;
    }

    .cscc-link-button:hover[b-f3ujnsfkqy] {
        background-color: rgba(0, 31, 87, 0.08);
        border-color: var(--cscc-navy);
    }

    .cscc-link-button-icon[b-f3ujnsfkqy] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: var(--cscc-navy);
        color: #ffffff;
        font-size: 16px;
        line-height: 1;
    }

    @media (max-width: 768px) {
        .cscc-card[b-f3ujnsfkqy] {
            padding: 24px;
        }

        .cscc-actions[b-f3ujnsfkqy] {
            flex-direction: column-reverse;
        }

        .cscc-btn[b-f3ujnsfkqy] {
            width: 100%;
        }

        .cscc-grid[b-f3ujnsfkqy] {
            grid-template-columns: 1fr;
        }

        .cscc-columns[b-f3ujnsfkqy] {
            grid-template-columns: 1fr;
        }
    }

    /* SubDepartment Filter Wrapper - Dual Control Layout */
    .subdepartment-filter-wrapper[b-f3ujnsfkqy] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    /* SubDepartment Autocomplete Styles */
    .subdepartment-autocomplete-wrapper[b-f3ujnsfkqy] {
        position: relative;
        width: 100%;
    }

    .subdepartment-search-input[b-f3ujnsfkqy] {
        width: 100%;
        height: 48px;
        border-radius: 12px;
        border: 1px solid var(--cscc-border);
        padding: 8px 16px;
        background-color: var(--cscc-surface);
        font-size: 16px;
        color: var(--cscc-text);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .subdepartment-search-input:focus[b-f3ujnsfkqy] {
        outline: none;
        border-color: var(--cscc-navy);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
    }

    .subdepartment-search-input:disabled[b-f3ujnsfkqy] {
        background-color: #f1f1f1;
        color: var(--cscc-muted);
        cursor: not-allowed;
    }

    .subdepartment-search-input[b-f3ujnsfkqy]::placeholder {
        color: var(--cscc-muted);
    }

    .subdepartment-dropdown[b-f3ujnsfkqy] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        border: 1px solid var(--cscc-border);
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
        max-height: 300px;
        overflow-y: auto;
        z-index: 1000;
        margin-top: 4px;
    }

    .subdepartment-dropdown-item[b-f3ujnsfkqy] {
        padding: 12px 16px;
        cursor: pointer;
        font-size: 15px;
        color: var(--cscc-text);
        transition: background-color 0.15s ease;
        border-bottom: 1px solid #f3f4f6;
    }

    .subdepartment-dropdown-item:last-child[b-f3ujnsfkqy] {
        border-bottom: none;
    }

    .subdepartment-dropdown-item:hover[b-f3ujnsfkqy] {
        background-color: #f5f8ff;
        color: var(--cscc-navy);
    }

    .subdepartment-dropdown-item:active[b-f3ujnsfkqy] {
        background-color: #e0e7ff;
    }

    .subdepartment-select-dropdown[b-f3ujnsfkqy] {
        width: 100%;
    }

    .cscc-textarea[b-f3ujnsfkqy] {
        width: 100%;
        min-height: 96px;
        border-radius: 12px;
        border: 1px solid var(--cscc-border);
        padding: 10px 14px;
        font-size: 16px;
        font-family: inherit;
        resize: vertical;
        color: var(--cscc-text);
        background-color: var(--cscc-surface);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .cscc-textarea[b-f3ujnsfkqy]::placeholder {
        color: var(--cscc-muted);
    }

    .cscc-textarea:focus[b-f3ujnsfkqy] {
        outline: none;
        border-color: var(--cscc-navy);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
    }

    .sub-search-input[b-f3ujnsfkqy]{
        width: 40%;
    }

    /* Per-field inline validation feedback (matches CreateUser.razor convention). */
    .field-error[b-f3ujnsfkqy] {
        font-size: 13px;
        color: #b91c1c;
        margin-top: 4px;
        display: block;
    }

    .input-invalid[b-f3ujnsfkqy] {
        border-color: #dc2626 !important;
    }

/* /Pages/CreateServiceRequestFacilityManagement.razor.rz.scp.css */
/* Moved from inline <style> in CreateServiceRequestFacilityManagement.razor (:root vars relocated to app.css) */

    .upload-text-warning[b-ij1qwn0tea] {
        color: #ff3b30;
        font-size: 20px;
    }

    .cscc-attach-error[b-ij1qwn0tea] {
        margin-top: 12px;
        padding: 10px 14px;
        background-color: rgba(255, 59, 48, 0.10);
        border: 1px solid rgba(255, 59, 48, 0.6);
        border-radius: 10px;
        color: #c2261d;
        font-size: 14px;
        font-weight: 500;
    }

    .cscc-attach-success[b-ij1qwn0tea] {
        margin-top: 12px;
        padding: 10px 14px;
        background-color: rgba(52, 199, 89, 0.10);
        border: 1px solid rgba(52, 199, 89, 0.6);
        border-radius: 10px;
        color: #1f8a4a;
        font-size: 14px;
        font-weight: 500;
    }

    .cscc-shell[b-ij1qwn0tea] {
        min-height: 100vh;
        padding: 24px;
        background-color: var(--cscc-frame);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cscc-card[b-ij1qwn0tea] {
        width: 100%;
        max-width: 1164px;
        background-color: var(--cscc-surface);
        border: 1px solid var(--cscc-border);
        border-radius: 16px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.04);
        padding: 32px 36px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .cscc-header[b-ij1qwn0tea] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .cscc-breadcrumb[b-ij1qwn0tea] {
        display: flex;
        gap: 8px;
        font-size: 14px;
        color: var(--cscc-muted);
    }

    .cscc-breadcrumb .current[b-ij1qwn0tea] {
        color: var(--cscc-text);
        font-weight: 500;
    }

    .cscc-title-block h1[b-ij1qwn0tea] {
        font-size: 28px;
        font-weight: 600;
        color: var(--cscc-text);
        margin-bottom: 8px;
    }

    .cscc-title-block p[b-ij1qwn0tea] {
        font-size: 16px;
        color: var(--cscc-muted);
        max-width: 640px;
    }

    .cscc-body[b-ij1qwn0tea] {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .cscc-grid[b-ij1qwn0tea] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    /* Segmented two-column create form: left = Department (entry), right = 3 stacked segments. */
    .cscc-columns[b-ij1qwn0tea] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    .cscc-col[b-ij1qwn0tea] {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .cscc-segment[b-ij1qwn0tea] {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        border: 1px solid var(--cscc-border);
        border-radius: 12px;
        background-color: var(--cscc-surface);
    }

    .cscc-field[b-ij1qwn0tea] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .cscc-field-wide[b-ij1qwn0tea] {
        gap: 16px;
    }

    .cscc-label[b-ij1qwn0tea] {
        font-size: 16px;
        font-weight: 500;
        color: var(--cscc-text);
    }

    .cscc-row-subdept-enterprise[b-ij1qwn0tea] {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 20px;
        align-items: flex-end;
    }

    .cscc-row-subdept-enterprise .cscc-subdept-cell[b-ij1qwn0tea] {
        grid-column: span 4;
        min-width: 0;
    }

    .cscc-row-subdept-enterprise .cscc-toggle-cell[b-ij1qwn0tea] {
        grid-column: span 4;
    }

    .cscc-row-subdept-enterprise .cscc-enterprise-cell[b-ij1qwn0tea] {
        grid-column: span 4;
        min-width: 0;
    }

    .cscc-enterprise-placeholder[b-ij1qwn0tea] {
        min-height: 48px;
    }

    .cscc-toggle-switch[b-ij1qwn0tea] {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 24px;
        cursor: pointer;
    }

    .cscc-toggle-switch input[b-ij1qwn0tea] {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .cscc-toggle-slider[b-ij1qwn0tea] {
        position: absolute;
        inset: 0;
        background-color: var(--cscc-border);
        border-radius: 24px;
        transition: background-color 0.2s;
    }

    .cscc-toggle-slider[b-ij1qwn0tea]::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s;
    }

    .cscc-toggle-switch input:checked + .cscc-toggle-slider[b-ij1qwn0tea] {
        background-color: var(--cscc-blue);
    }

    .cscc-toggle-switch input:checked + .cscc-toggle-slider[b-ij1qwn0tea]::before {
        transform: translateX(24px);
    }

    .cscc-select[b-ij1qwn0tea] {
        position: relative;
        display: flex;
        align-items: center;
    }

    .cscc-select select[b-ij1qwn0tea] {
        width: 100%;
        height: 48px;
        border-radius: 12px;
        border: 1px solid var(--cscc-border);
        padding: 0 44px 0 16px;
        background-color: var(--cscc-surface);
        font-size: 16px;
        color: var(--cscc-text);
    }

    .cscc-select select:disabled[b-ij1qwn0tea] {
        background-color: #f1f1f1;
        color: var(--cscc-muted);
        cursor: not-allowed;
    }

    .cscc-picker-trigger[b-ij1qwn0tea] {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 48px;
        border-radius: 12px;
        border: 1px solid var(--cscc-border);
        padding: 0 44px 0 16px;
        background-color: var(--cscc-surface);
        cursor: pointer !important;
        box-sizing: border-box;
        transition: border-color 0.15s ease, background-color 0.15s ease;
    }

    /* Override Chrome's busy/progress cursor while the tab is still "loading". */
    .cscc-picker-trigger:not(.cscc-picker-trigger--disabled)[b-ij1qwn0tea] {
        cursor: pointer !important;
    }

    /* Make an enabled picker visibly read as a clickable dropdown. */
    .cscc-picker-trigger:not(.cscc-picker-trigger--disabled):hover[b-ij1qwn0tea],
    .cscc-picker-trigger:not(.cscc-picker-trigger--disabled):focus-visible[b-ij1qwn0tea] {
        border-color: var(--cscc-text);
        background-color: #f5f7fb;
        outline: none;
    }

    .cscc-picker-trigger--disabled[b-ij1qwn0tea] {
        background-color: #f1f1f1;
        color: var(--cscc-muted);
        cursor: not-allowed;
        pointer-events: none;
    }

    .cscc-picker-value[b-ij1qwn0tea] {
        flex: 1;
        font-size: 16px;
        color: var(--cscc-text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cscc-picker-value.placeholder[b-ij1qwn0tea] {
        color: var(--cscc-custom);
    }

    /* Clear down-chevron so the field reads as a clickable dropdown (not a status glyph). */
    .cscc-caret[b-ij1qwn0tea] {
        position: absolute;
        right: 18px;
        width: 9px;
        height: 9px;
        border: solid var(--cscc-text);
        border-width: 0 2px 2px 0;
        transform: translateY(-2px) rotate(45deg);
        pointer-events: none;
    }

    .field-status[b-ij1qwn0tea] {
        font-size: 14px;
        color: var(--cscc-muted);
    }

    .field-status.error[b-ij1qwn0tea] {
        color: var(--cscc-danger);
    }

    .cscc-upload-zone[b-ij1qwn0tea] {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 32px;
        border: 1.5px dashed var(--cscc-border);
        border-radius: 12px;
        background-color: #f8fbff;
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }

    .cscc-upload-zone.drag-over[b-ij1qwn0tea] {
        border-color: var(--cscc-navy);
        background-color: rgba(0, 49, 85, 0.05);
    }

    /* ::deep — targets the <input> rendered by the <InputFile> child component. */
    [b-ij1qwn0tea] .cscc-upload-input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .cscc-upload-icon[b-ij1qwn0tea] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(180deg, rgba(0, 49, 85, 0.1) 0%, rgba(0, 49, 85, 0.05) 100%);
    }

    .cscc-upload-title[b-ij1qwn0tea] {
        font-weight: 500;
        color: var(--cscc-text);
    }

    .cscc-upload-subtitle[b-ij1qwn0tea] {
        font-size: 14px;
        color: var(--cscc-muted);
    }

    .cscc-upload-btn[b-ij1qwn0tea] {
        padding: 10px 20px;
        border-radius: 10px;
        background-color: var(--cscc-navy);
        color: #ffffff;
        font-size: 15px;
    }

    .cscc-file-grid[b-ij1qwn0tea] {
        margin-top: 16px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 12px;
    }

    .cscc-file-card[b-ij1qwn0tea] {
        border: 1px solid var(--cscc-border);
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background-color: #fafafa;
    }

    .cscc-file-meta[b-ij1qwn0tea] {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .cscc-file-thumb[b-ij1qwn0tea] {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: linear-gradient(180deg, rgba(0, 49, 85, 0.12) 0%, rgba(0, 49, 85, 0.04) 100%);
    }

    .cscc-file-text[b-ij1qwn0tea] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .cscc-file-name[b-ij1qwn0tea] {
        font-weight: 500;
        color: var(--cscc-text);
    }

    .cscc-file-size[b-ij1qwn0tea] {
        font-size: 14px;
        color: var(--cscc-muted);
    }

    .cscc-file-actions[b-ij1qwn0tea] {
        display: flex;
        gap: 12px;
    }

    .cscc-link[b-ij1qwn0tea] {
        background: none;
        border: none;
        color: var(--cscc-navy);
        font-weight: 500;
        cursor: pointer;
    }

    .cscc-link.danger[b-ij1qwn0tea] {
        color: var(--cscc-danger);
    }


    .cscc-actions[b-ij1qwn0tea] {
        margin-top: 12px;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }

    .cscc-btn[b-ij1qwn0tea] {
        padding: 14px 26px;
        border-radius: 12px;
        border: none;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .cscc-btn.primary[b-ij1qwn0tea] {
        background-color: var(--cscc-navy);
        color: #ffffff;
    }

    .cscc-btn.ghost[b-ij1qwn0tea] {
        background-color: transparent;
        border: 1px solid var(--cscc-border);
        color: var(--cscc-text);
    }

    .cscc-btn:hover[b-ij1qwn0tea] {
        opacity: 0.9;
    }

    .cscc-link-button[b-ij1qwn0tea] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        padding: 10px 16px;
        border-radius: 10px;
        border: 1px solid var(--cscc-border);
        background-color: #f8fbff;
        color: var(--cscc-navy);
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
        width: fit-content;
    }

    .cscc-link-button:hover[b-ij1qwn0tea] {
        background-color: rgba(0, 31, 87, 0.08);
        border-color: var(--cscc-navy);
    }

    .cscc-link-button-icon[b-ij1qwn0tea] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: var(--cscc-navy);
        color: #ffffff;
        font-size: 16px;
        line-height: 1;
    }

    @media (max-width: 768px) {
        .cscc-card[b-ij1qwn0tea] {
            padding: 24px;
        }

        .cscc-actions[b-ij1qwn0tea] {
            flex-direction: column-reverse;
        }

        .cscc-btn[b-ij1qwn0tea] {
            width: 100%;
        }

        .cscc-grid[b-ij1qwn0tea] {
            grid-template-columns: 1fr;
        }

        .cscc-columns[b-ij1qwn0tea] {
            grid-template-columns: 1fr;
        }
    }

    /* SubDepartment Filter Wrapper - Dual Control Layout */
    .subdepartment-filter-wrapper[b-ij1qwn0tea] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    /* SubDepartment Autocomplete Styles */
    .subdepartment-autocomplete-wrapper[b-ij1qwn0tea] {
        position: relative;
        width: 100%;
    }

    .subdepartment-search-input[b-ij1qwn0tea] {
        width: 100%;
        height: 48px;
        border-radius: 12px;
        border: 1px solid var(--cscc-border);
        padding: 8px 16px;
        background-color: var(--cscc-surface);
        font-size: 16px;
        color: var(--cscc-text);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .subdepartment-search-input:focus[b-ij1qwn0tea] {
        outline: none;
        border-color: var(--cscc-navy);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
    }

    .subdepartment-search-input:disabled[b-ij1qwn0tea] {
        background-color: #f1f1f1;
        color: var(--cscc-muted);
        cursor: not-allowed;
    }

    .subdepartment-search-input[b-ij1qwn0tea]::placeholder {
        color: var(--cscc-muted);
    }

    .subdepartment-dropdown[b-ij1qwn0tea] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        border: 1px solid var(--cscc-border);
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
        max-height: 300px;
        overflow-y: auto;
        z-index: 1000;
        margin-top: 4px;
    }

    .subdepartment-dropdown-item[b-ij1qwn0tea] {
        padding: 12px 16px;
        cursor: pointer;
        font-size: 15px;
        color: var(--cscc-text);
        transition: background-color 0.15s ease;
        border-bottom: 1px solid #f3f4f6;
    }

    .subdepartment-dropdown-item:last-child[b-ij1qwn0tea] {
        border-bottom: none;
    }

    .subdepartment-dropdown-item:hover[b-ij1qwn0tea] {
        background-color: #f5f8ff;
        color: var(--cscc-navy);
    }

    .subdepartment-dropdown-item:active[b-ij1qwn0tea] {
        background-color: #e0e7ff;
    }

    .subdepartment-select-dropdown[b-ij1qwn0tea] {
        width: 100%;
    }

    .cscc-textarea[b-ij1qwn0tea] {
        width: 100%;
        min-height: 96px;
        border-radius: 12px;
        border: 1px solid var(--cscc-border);
        padding: 10px 14px;
        font-size: 16px;
        font-family: inherit;
        resize: vertical;
        color: var(--cscc-text);
        background-color: var(--cscc-surface);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .cscc-textarea[b-ij1qwn0tea]::placeholder {
        color: var(--cscc-muted);
    }

    .cscc-textarea:focus[b-ij1qwn0tea] {
        outline: none;
        border-color: var(--cscc-navy);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
    }

    /* Per-field inline validation feedback (matches CreateUser.razor convention). */
    .field-error[b-ij1qwn0tea] {
        font-size: 13px;
        color: #b91c1c;
        margin-top: 4px;
        display: block;
    }

    .input-invalid[b-ij1qwn0tea] {
        border-color: #dc2626 !important;
    }
/* /Pages/CreateServiceRequestGuest.razor.rz.scp.css */
.guest-request-page[b-5kf2mpztts] {
    display: flex;
    justify-content: center;
    background: #f6f6f6;
    padding: 24px 0 64px;
    font-family: 'Ubuntu', 'Inter', sans-serif;
}

.guest-request-shell[b-5kf2mpztts] {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 8px;
}

.guest-request-card[b-5kf2mpztts] {
    background: #ffffff;
    border-radius: 8px;
    border: 0.5px solid #cccccc;
    box-shadow: 0 8px 24px rgba(43, 56, 86, 0.05);
    overflow: hidden;
}

.guest-request-card-header[b-5kf2mpztts] {
    padding: 24px;
    border-bottom: 1px solid #e6e6e6;
}

.guest-request-card-header h1[b-5kf2mpztts] {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: #001f57;
}

.guest-request-card-body[b-5kf2mpztts] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 510px));
    justify-content: space-between;
    padding: 36px 24px 24px;
    row-gap: 36px;
    column-gap: 60px;
}

.guest-request-card-footer[b-5kf2mpztts] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px 24px;
    gap: 16px;
}

.guest-request-field[b-5kf2mpztts] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 510px;
}

.guest-request-field label[b-5kf2mpztts] {
    font-size: 16px;
    font-weight: 500;
    color: #141414;
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.guest-request-field label span[b-5kf2mpztts] {
    font-weight: 400;
    font-size: 14px;
    color: #868686;
}

.guest-request-select[b-5kf2mpztts] {
    position: relative;
    border: 0.5px solid #cccccc;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.guest-request-select select[b-5kf2mpztts] {
    appearance: none;
    width: 100%;
    padding: 10px 40px 10px 12px;
    border: none;
    font-size: 16px;
    color: #141414;
    background: transparent;
}

.guest-request-select-icon[b-5kf2mpztts] {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #141414;
    pointer-events: none;
}

.guest-request-field input[b-5kf2mpztts],
.guest-request-field textarea[b-5kf2mpztts] {
    border: 0.5px solid #cccccc;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 16px;
    font-family: inherit;
    color: #141414;
    background: #ffffff;
}

.guest-request-field textarea[b-5kf2mpztts] {
    min-height: 140px;
    resize: vertical;
}

.guest-request-field--wide[b-5kf2mpztts] {
    grid-column: 1 / -1;
    max-width: none;
}

.guest-request-textarea-trail[b-5kf2mpztts] {
    position: relative;
    width: 20px;
    height: 20px;
    align-self: flex-end;
    margin-top: -24px;
    margin-right: 8px;
    pointer-events: none;
}

.guest-request-textarea-trail[b-5kf2mpztts]::before,
.guest-request-textarea-trail[b-5kf2mpztts]::after {
    content: "";
    position: absolute;
    background: #cccccc;
    border-radius: 99px;
}

.guest-request-textarea-trail[b-5kf2mpztts]::before {
    width: 28px;
    height: 1px;
    top: 60%;
    right: -10px;
}

.guest-request-textarea-trail[b-5kf2mpztts]::after {
    width: 12px;
    height: 1px;
    top: 50%;
    right: -6px;
}

.guest-request-dropzone[b-5kf2mpztts] {
    position: relative;
    border: 1.5px solid #32ade6;
    border-radius: 12px;
    background: rgba(50, 173, 230, 0.08);
    text-align: center;
    padding: 36px 24px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-height: 156px;
    width: 100%;
}

.guest-request-dropzone-icon[b-5kf2mpztts] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(180deg, #005aff 0%, #00a6ff 100%);
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="white" d="M16 6L6 16h6v10h8V16h6z"/></svg>') center / 20px 20px no-repeat;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="white" d="M16 6L6 16h6v10h8V16h6z"/></svg>') center / 20px 20px no-repeat;
}

.guest-request-dropzone-title[b-5kf2mpztts] {
    font-size: 14px;
    color: #141414;
}

.guest-request-dropzone-sub[b-5kf2mpztts] {
    font-size: 12px;
    color: #868686;
}

.guest-request-secondary-button[b-5kf2mpztts],
.guest-request-primary-button[b-5kf2mpztts],
.guest-request-outline-button[b-5kf2mpztts],
.guest-request-tertiary-button[b-5kf2mpztts],
.guest-request-icon-button[b-5kf2mpztts] {
    font-family: inherit;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.guest-request-secondary-button[b-5kf2mpztts] {
    background: #005aff;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 400;
}

.guest-request-primary-button[b-5kf2mpztts] {
    background: #001f57;
    color: #ffffff;
    border: none;
    min-width: 114px;
    padding: 16px 24px;
    font-size: 20px;
    font-weight: 500;
}

.guest-request-outline-button[b-5kf2mpztts] {
    background: #ffffff;
    color: #141414;
    border: 0.5px solid #cccccc;
    padding: 16px 8px;
    font-size: 20px;
    font-weight: 500;
    border-radius: 12px;
    min-width: 150px;
}

.guest-request-tertiary-button[b-5kf2mpztts] {
    background: #ffffff;
    border: 0.5px solid #cccccc;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    color: #141414;
    border-radius: 8px;
}

.guest-request-icon-button[b-5kf2mpztts] {
    width: 40px;
    height: 40px;
    background: linear-gradient(180deg, #f6f6f6 0%, #e6e6e6 100%);
    border: 0.5px solid #cccccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #141414;
}

.guest-request-icon-button span[b-5kf2mpztts] {
    line-height: 1;
}

button:focus-visible[b-5kf2mpztts],
select:focus-visible[b-5kf2mpztts],
input:focus-visible[b-5kf2mpztts],
textarea:focus-visible[b-5kf2mpztts] {
    outline: 2px solid #005aff;
    outline-offset: 2px;
}

button:hover:not(:disabled)[b-5kf2mpztts] {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 90, 255, 0.12);
}

button:active:not(:disabled)[b-5kf2mpztts] {
    transform: translateY(0);
    box-shadow: none;
}

button:disabled[b-5kf2mpztts] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.guest-request-file-list[b-5kf2mpztts] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.guest-request-file-card[b-5kf2mpztts] {
    width: 200px;
    border: 0.5px solid #cccccc;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
    min-height: 132px;
}

.guest-request-file-meta[b-5kf2mpztts] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.guest-request-file-icon[b-5kf2mpztts] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(180deg, #005aff 0%, #00a6ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.guest-request-file-icon[b-5kf2mpztts]::before {
    content: "";
    width: 18px;
    height: 22px;
    background: #ffffff;
    clip-path: polygon(0 0, 65% 0, 100% 35%, 100% 100%, 0 100%);
}

.guest-request-file-name[b-5kf2mpztts] {
    font-size: 14px;
    font-weight: 500;
    color: #141414;
}

.guest-request-file-size[b-5kf2mpztts] {
    font-size: 14px;
    color: #868686;
}

.guest-request-file-actions[b-5kf2mpztts] {
    display: flex;
    justify-content: space-between;
}

.guest-request-overlay[b-5kf2mpztts] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    backdrop-filter: blur(4px);
    z-index: 1000;
}

.guest-request-overlay-panel[b-5kf2mpztts] {
    width: min(860px, 100%);
    background: #f6f6f6;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

.guest-request-overlay-header[b-5kf2mpztts] {
    display: flex;
    justify-content: flex-end;
}

.guest-request-overlay-body[b-5kf2mpztts] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.guest-request-overlay-preview[b-5kf2mpztts] {
    border-radius: 20px;
    background: linear-gradient(135deg, #005aff 0%, #32ade6 100%);
    min-height: 340px;
}

.guest-request-overlay-meta[b-5kf2mpztts] {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border: 0.5px solid #cccccc;
}

.guest-request-chip[b-5kf2mpztts] {
    align-self: flex-start;
    background: #001f57;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
}

.guest-request-overlay-meta dl[b-5kf2mpztts] {
    display: grid;
    gap: 12px;
}

.guest-request-overlay-meta dt[b-5kf2mpztts] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #868686;
}

.guest-request-overlay-meta dd[b-5kf2mpztts] {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #141414;
}

.guest-request-overlay-zoom[b-5kf2mpztts] {
    display: flex;
    gap: 12px;
}

.guest-request-overlay--success[b-5kf2mpztts] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.guest-request-success[b-5kf2mpztts] {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    border: 0.5px solid #cccccc;
}

.guest-request-success-icon[b-5kf2mpztts] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #0fbf6b;
    color: #ffffff;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guest-request-success p[b-5kf2mpztts] {
    font-size: 20px;
    font-weight: 500;
    color: #141414;
    text-align: center;
}

.visually-hidden[b-5kf2mpztts] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.guest-request-hint[b-5kf2mpztts] {
    font-size: 12px;
    color: #868686;
}

.guest-request-word-count[b-5kf2mpztts] {
    display: block;
    margin-top: -4px;
    color: #868686;
    font-size: 12px;
    text-align: right;
}

.guest-request-file-input[b-5kf2mpztts] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.guest-request-dropzone--active[b-5kf2mpztts] {
    border-color: #005aff;
    background: rgba(0, 90, 255, 0.08);
}

.guest-request-empty-files[b-5kf2mpztts] {
    font-size: 14px;
    color: #868686;
    margin: 0;
}

.guest-request-error[b-5kf2mpztts] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 59, 48, 1);
    background: rgba(255, 59, 48, 0.1);
    color: rgba(255, 59, 48, 1);
    font-size: 14px;
}

.guest-request-error svg[b-5kf2mpztts] {
    flex-shrink: 0;
}

.guest-request-success[b-5kf2mpztts] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(52, 199, 89, 0.6);
    background: rgba(52, 199, 89, 0.10);
    color: rgba(20, 110, 52, 1);
    font-size: 14px;
    font-weight: 500;
    margin-top: 12px;
}

.guest-request-success svg[b-5kf2mpztts] {
    flex-shrink: 0;
}

.guest-request-overlay-preview-image[b-5kf2mpztts] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.guest-request-overlay-preview-pdf[b-5kf2mpztts] {
    width: 100%;
    height: 100%;
    border: none;
}

.guest-request-overlay-preview-text[b-5kf2mpztts] {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 16px;
    margin: 0;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    color: rgba(20, 20, 20, 1);
    background-color: rgba(246, 246, 246, 1);
    border-radius: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.guest-request-overlay-preview-unsupported[b-5kf2mpztts] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #868686;
    font-size: 16px;
}

.guest-request-success-detail[b-5kf2mpztts] {
    font-size: 16px;
    margin: 0;
}

.guest-request-success-hint[b-5kf2mpztts] {
    font-size: 14px;
    color: #868686;
    margin: 0;
}

@media (max-width: 1200px) {
    .guest-request-card-body[b-5kf2mpztts] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        column-gap: 36px;
    }

    .guest-request-field[b-5kf2mpztts] {
        max-width: none;
    }
}

@media (max-width: 1024px) {
    .guest-request-card-body[b-5kf2mpztts] {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }

    .guest-request-card-footer[b-5kf2mpztts] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .guest-request-card-footer button[b-5kf2mpztts] {
        width: 100%;
    }

    .guest-request-field--wide[b-5kf2mpztts] {
        grid-column: auto;
    }

    .guest-request-overlay-body[b-5kf2mpztts] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/CreateUser.razor.rz.scp.css */
.service-request-admin-form-container[b-kl53s51cdt] {
    width: 100%;
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Ubuntu', sans-serif;
    background-color: rgba(246, 246, 246, 1);
}

.form-card[b-kl53s51cdt] {
    width: 100%;
    max-width: 520px;
    background-color: #fff;
    border-radius: 14px;
    border: 1px solid rgba(229, 231, 235, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.form-card-header[b-kl53s51cdt] {
    padding: 24px;
    border-bottom: 1px solid rgba(229, 231, 235, 1);
}

.form-title[b-kl53s51cdt] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: rgba(0, 31, 87, 1);
}

.form-card-body[b-kl53s51cdt] {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.form-row[b-kl53s51cdt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-field[b-kl53s51cdt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-label[b-kl53s51cdt] {
    font-size: 14px;
    font-weight: 500;
    color: rgba(55, 65, 81, 1);
}

.input-wrapper[b-kl53s51cdt] {
    height: 46px;
    border-radius: 10px;
    border: 1px solid rgba(209, 213, 219, 1);
    display: flex;
    align-items: center;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .input-wrapper:focus-within[b-kl53s51cdt] {
        border-color: rgba(0, 43, 130, 1);
        box-shadow: 0 0 0 4px rgba(0, 43, 130, 0.12);
    }

.form-input[b-kl53s51cdt] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 16px;
    font-size: 15px;
    background: transparent;
}

    .form-input[b-kl53s51cdt]::placeholder {
        color: rgba(156, 163, 175, 1);
    }

.input-wrapper select.form-input[b-kl53s51cdt] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236B7280' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.input-invalid[b-kl53s51cdt] {
    border-color: #dc2626 !important;
}

.field-error[b-kl53s51cdt] {
    font-size: 13px;
    color: #b91c1c;
}

.required[b-kl53s51cdt] {
    color: #dc2626;
}

.form-divider[b-kl53s51cdt] {
    height: 1px;
    background-color: rgba(229, 231, 235, 1);
}

.form-actions[b-kl53s51cdt] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.cancel-btn[b-kl53s51cdt],
.save-btn[b-kl53s51cdt] {
    height: 44px;
    padding: 0 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-btn[b-kl53s51cdt] {
    background: #fff;
    border: 1px solid rgba(209, 213, 219, 1);
}

    .cancel-btn:hover[b-kl53s51cdt] {
        background-color: rgba(243, 244, 246, 1);
    }

.save-btn[b-kl53s51cdt] {
    background-color: rgba(0, 43, 130, 1);
    color: #fff;
    border: none;
}

    .save-btn:hover[b-kl53s51cdt] {
        background-color: rgba(0, 31, 87, 1);
    }

    .save-btn:disabled[b-kl53s51cdt] {
        background-color: rgba(156, 163, 175, 1);
        cursor: not-allowed;
    }

.alert[b-kl53s51cdt] {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
}

.alert-success[b-kl53s51cdt] {
    background-color: rgba(220, 252, 231, 1);
    color: rgba(5, 46, 22, 1);
}

.alert-danger[b-kl53s51cdt] {
    background-color: rgba(254, 242, 242, 1);
    color: rgba(127, 29, 29, 1);
}

@media (max-width: 768px) {
    .form-row[b-kl53s51cdt] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-kl53s51cdt] {
        flex-direction: column-reverse;
    }

    .cancel-btn[b-kl53s51cdt],
    .save-btn[b-kl53s51cdt] {
        width: 100%;
    }
}
/* /Pages/Dashboard.razor.rz.scp.css */
.dashboard-container[b-mra5mrx17k] {
    min-height: 100vh;
    background-color: var(--bg-subtle);
    padding: 24px;
}

.dashboard-header[b-mra5mrx17k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dashboard-header h1[b-mra5mrx17k] {
    color: var(--text-primary);
    margin: 0;
    font-size: 26px;
    font-weight: 700;
}

.user-actions[b-mra5mrx17k] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.welcome-text[b-mra5mrx17k] {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 14px;
}

.dashboard-content[b-mra5mrx17k] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.info-cards[b-mra5mrx17k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.info-card[b-mra5mrx17k] {
    background: var(--white);
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-card:hover[b-mra5mrx17k] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card-header-section[b-mra5mrx17k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-light);
}

.card-header-section svg[b-mra5mrx17k] {
    color: var(--primary);
    flex-shrink: 0;
}

.card-header-section h3[b-mra5mrx17k] {
    color: var(--text-primary);
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.card-body[b-mra5mrx17k] {
    padding: 20px;
}

.info-item[b-mra5mrx17k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--bg-panel);
}

.info-item:last-child[b-mra5mrx17k] {
    border-bottom: none;
    padding-bottom: 0;
}

.info-item:first-child[b-mra5mrx17k] {
    padding-top: 0;
}

.info-label[b-mra5mrx17k] {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 14px;
}

.info-value[b-mra5mrx17k] {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
}

.badges-list[b-mra5mrx17k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.badge[b-mra5mrx17k] {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: capitalize;
}

.badge-primary[b-mra5mrx17k] {
    background-color: var(--primary);
    color: var(--white);
}

.badge-secondary[b-mra5mrx17k] {
    background-color: var(--bg-panel);
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
}

.empty-state[b-mra5mrx17k] {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 12px 0;
    margin: 0;
}

.actions-section[b-mra5mrx17k] {
    background: var(--white);
    padding: 24px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.actions-section h2[b-mra5mrx17k] {
    color: var(--text-primary);
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 700;
}

.action-buttons[b-mra5mrx17k] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.btn[b-mra5mrx17k] {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Ubuntu', sans-serif;
}

.btn-primary[b-mra5mrx17k] {
    background-color: var(--primary);
    color: var(--white);
}

.btn-primary:hover:not(:disabled)[b-mra5mrx17k] {
    background-color: var(--primary-hover);
    box-shadow: var(--shadow-md);
}

.btn-primary:disabled[b-mra5mrx17k] {
    background-color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-outline-secondary[b-mra5mrx17k] {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
}

.btn-outline-secondary:hover[b-mra5mrx17k] {
    background-color: var(--text-secondary);
    color: var(--white);
}

.btn-sm[b-mra5mrx17k] {
    padding: 8px 16px;
    font-size: 13px;
}

.text-muted[b-mra5mrx17k] {
    color: var(--text-muted);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-container[b-mra5mrx17k] {
        padding: 16px;
    }

    .dashboard-header[b-mra5mrx17k] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }

    .dashboard-header h1[b-mra5mrx17k] {
        font-size: 22px;
    }

    .info-cards[b-mra5mrx17k] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-mra5mrx17k] {
        flex-direction: column;
    }

    .action-buttons .btn[b-mra5mrx17k] {
        width: 100%;
    }
}
/* /Pages/EditCurrentWeekMeals.razor.rz.scp.css */
.edit-current-week-container[b-wtdcl2a6if] {
    max-width: 1152px;
    margin: 0 auto;
    padding: 24px;
    font-family: 'Ubuntu', sans-serif;
}

/* Header Section */
.page-header[b-wtdcl2a6if] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 24px;
    gap: 24px;
}

.header-left[b-wtdcl2a6if] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* .btn-back now lives in wwwroot/css/app.css so every Food Zone page shares one rule. */

.page-title[b-wtdcl2a6if] {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Ubuntu', sans-serif;
    color: #000F29;
    margin: 0 0 12px 0;
}

.page-subtitle[b-wtdcl2a6if] {
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    color: #595959;
    margin: 0;
    line-height: 1.5;
}

/* Loading State */
.loading-state[b-wtdcl2a6if] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.loading-spinner[b-wtdcl2a6if] {
    width: 48px;
    height: 48px;
    border: 4px solid #EEF1F6;
    border-top-color: #002B82;
    border-radius: 50%;
    animation: spin-b-wtdcl2a6if 0.8s linear infinite;
}

.loading-text[b-wtdcl2a6if] {
    margin-top: 16px;
    font-size: 16px;
    color: #6B7280;
}

@keyframes spin-b-wtdcl2a6if {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state[b-wtdcl2a6if] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-icon[b-wtdcl2a6if] {
    color: #D1D5DB;
    margin-bottom: 24px;
}

.empty-title[b-wtdcl2a6if] {
    font-size: 22px;
    font-weight: 600;
    color: #000F29;
    margin: 0 0 12px 0;
}

.empty-message[b-wtdcl2a6if] {
    font-size: 15px;
    color: #6B7280;
    max-width: 500px;
    margin: 0 0 24px 0;
    line-height: 1.6;
}

.btn-create-schedule[b-wtdcl2a6if] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #002B82;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.2s ease;
}

.btn-create-schedule:hover[b-wtdcl2a6if] {
    background: #001D5C;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 43, 130, 0.2);
}

/* Schedule Content */
.schedule-content[b-wtdcl2a6if] {
    padding: 24px 0;
}

.info-banner[b-wtdcl2a6if] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: #DBEAFE;
    border: 0.5px solid #93C5FD;
    border-radius: 12px;
    margin-bottom: 24px;
}

.info-banner svg[b-wtdcl2a6if] {
    flex-shrink: 0;
    color: #1E40AF;
    margin-top: 2px;
}

.banner-text[b-wtdcl2a6if] {
    font-size: 14px;
    font-family: 'Ubuntu', sans-serif;
    color: #1E3A8A;
    line-height: 1.6;
}

.banner-text strong[b-wtdcl2a6if] {
    font-weight: 600;
}

.days-list[b-wtdcl2a6if] {
    margin-bottom: 24px;
}

/* Footer Section */
.schedule-footer[b-wtdcl2a6if] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid #E5E7EB;
    margin-top: 24px;
}

.save-info[b-wtdcl2a6if] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6B7280;
    font-size: 14px;
}

.save-info svg[b-wtdcl2a6if] {
    color: #059669;
}

.btn-confirm-return[b-wtdcl2a6if] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #002B82;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-confirm-return:hover[b-wtdcl2a6if] {
    background: #001D5C;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 43, 130, 0.2);
}

.btn-confirm-return:active[b-wtdcl2a6if] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 43, 130, 0.2);
}

.btn-confirm-return svg[b-wtdcl2a6if] {
    color: #FFFFFF;
}

/* Error Toast */
.error-toast[b-wtdcl2a6if] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #FEE2E2;
    border: 1px solid #FCA5A5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    z-index: 1000;
    animation: slideIn-b-wtdcl2a6if 0.3s ease;
}

@keyframes slideIn-b-wtdcl2a6if {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-content[b-wtdcl2a6if] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.toast-content svg[b-wtdcl2a6if] {
    flex-shrink: 0;
    color: #DC2626;
}

.toast-content span[b-wtdcl2a6if] {
    font-size: 14px;
    color: #991B1B;
}

.toast-close[b-wtdcl2a6if] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
    border: none;
    color: #DC2626;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.toast-close:hover[b-wtdcl2a6if] {
    background: rgba(220, 38, 38, 0.1);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .edit-current-week-container[b-wtdcl2a6if] {
        padding: 16px;
    }

    .page-header[b-wtdcl2a6if] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding-bottom: 16px;
    }

    .page-title[b-wtdcl2a6if] {
        font-size: 18px;
    }

    .page-subtitle[b-wtdcl2a6if] {
        font-size: 14px;
    }

    .info-banner[b-wtdcl2a6if] {
        padding: 14px 16px;
    }

    .banner-text[b-wtdcl2a6if] {
        font-size: 13px;
    }

    .error-toast[b-wtdcl2a6if] {
        bottom: 16px;
        right: 16px;
        left: 16px;
        max-width: none;
    }

    .schedule-footer[b-wtdcl2a6if] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px 0;
    }

    .btn-confirm-return[b-wtdcl2a6if] {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
}

@media (max-width: 480px) {
    .edit-current-week-container[b-wtdcl2a6if] {
        padding: 12px;
    }

    .page-title[b-wtdcl2a6if] {
        font-size: 17px;
    }

    .page-subtitle[b-wtdcl2a6if] {
        font-size: 13px;
    }

    .empty-title[b-wtdcl2a6if] {
        font-size: 18px;
    }

    .empty-message[b-wtdcl2a6if] {
        font-size: 14px;
    }

    .info-banner[b-wtdcl2a6if] {
        padding: 12px;
    }

    .banner-text[b-wtdcl2a6if] {
        font-size: 12px;
    }

    .btn-confirm-return[b-wtdcl2a6if] {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* /Pages/EServiceDashboard.razor.rz.scp.css */
.eservice-dashboard-container[b-lkohqfmlhf] {
    min-height: 100vh;
    background: var(--bg-main);
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

.foodtitle[b-lkohqfmlhf]{
    text-align:center;
    padding-top:30px;
}
/* Header Styles */
.dashboard-header[b-lkohqfmlhf] {
    background: var(--primary);
    color: var(--white);
    padding: 32px 40px;
    box-shadow: var(--shadow-sm);
}

.header-content[b-lkohqfmlhf] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header-left h1[b-lkohqfmlhf] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--white);
}

.subtitle[b-lkohqfmlhf] {
    margin: 6px 0 0 0;
    font-size: 15px;
    opacity: 0.9;
    color: var(--white);
}

.header-right[b-lkohqfmlhf] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-badge[b-lkohqfmlhf] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.user-avatar[b-lkohqfmlhf] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.user-details[b-lkohqfmlhf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name[b-lkohqfmlhf] {
    font-weight: 600;
    font-size: 14px;
    color: var(--white);
}

.user-role[b-lkohqfmlhf] {
    font-size: 12px;
    opacity: 0.8;
    color: var(--white);
}

.btn-logout[b-lkohqfmlhf] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Ubuntu', sans-serif;
}

    .btn-logout:hover[b-lkohqfmlhf] {
        background: rgba(255, 255, 255, 0.25);
        box-shadow: var(--shadow-sm);
    }

/* Quick Stats */
.quick-stats[b-lkohqfmlhf] {
    max-width: 1400px;
    margin: -28px auto 0;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 20px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
}

.stat-card[b-lkohqfmlhf] {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .stat-card:hover[b-lkohqfmlhf] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

.stat-icon[b-lkohqfmlhf] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-primary[b-lkohqfmlhf] {
    background: var(--primary);
}

.stat-icon-secondary[b-lkohqfmlhf] {
    background: var(--secondary);
}

.stat-icon-success[b-lkohqfmlhf] {
    background: var(--success);
}

.stat-icon-info[b-lkohqfmlhf] {
    background: var(--info);
}

.stat-info h3[b-lkohqfmlhf] {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-info p[b-lkohqfmlhf] {
    margin: 4px 0 0 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Modules Section */
.modules-section[b-lkohqfmlhf] {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 40px;
    box-sizing: border-box;
    width: 100%;
}

.section-title[b-lkohqfmlhf] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 24px 0;
}

.modules-grid[b-lkohqfmlhf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.module-card[b-lkohqfmlhf] {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

    .module-card.active:hover[b-lkohqfmlhf] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary);
    }

    .module-card.coming-soon[b-lkohqfmlhf] {
        opacity: 0.6;
        cursor: not-allowed;
    }

        .module-card.coming-soon:hover[b-lkohqfmlhf] {
            transform: none;
        }

.module-header[b-lkohqfmlhf] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-light);
}

.module-icon-wrapper[b-lkohqfmlhf] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.module-icon-primary[b-lkohqfmlhf] {
    background: var(--primary);
}

.module-icon-muted[b-lkohqfmlhf] {
    background: var(--text-muted);
}

.module-badge[b-lkohqfmlhf] {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.active-badge[b-lkohqfmlhf] {
    background: var(--success);
    color: var(--white);
}

.coming-badge[b-lkohqfmlhf] {
    background: var(--warning);
    color: #000;
}

.module-content[b-lkohqfmlhf] {
    padding: 20px;
    flex: 1;
}

    .module-content h3[b-lkohqfmlhf] {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .module-content p[b-lkohqfmlhf] {
        margin: 0 0 16px 0;
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.5;
    }

.module-features[b-lkohqfmlhf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-tag[b-lkohqfmlhf] {
    background: var(--bg-panel);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border-light);
}

.module-footer[b-lkohqfmlhf] {
    padding: 16px 20px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-panel);
}

.module-link[b-lkohqfmlhf] {
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
}

.module-status[b-lkohqfmlhf] {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

/* User Info Section */
.user-info-section[b-lkohqfmlhf] {
    max-width: 1400px;
    margin: 40px auto 60px;
    padding: 0 40px;
    box-sizing: border-box;
    width: 100%;
}

.collapse-btn[b-lkohqfmlhf] {
    width: 100%;
    background: var(--white);
    border: 1px solid var(--border-light);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Ubuntu', sans-serif;
    box-shadow: var(--shadow-sm);
}

    .collapse-btn:hover[b-lkohqfmlhf] {
        background: var(--bg-panel);
        border-color: var(--primary);
    }

.user-info-grid[b-lkohqfmlhf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.info-card[b-lkohqfmlhf] {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

    .info-card h4[b-lkohqfmlhf] {
        margin: 0 0 16px 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-light);
    }

.info-row[b-lkohqfmlhf] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--bg-panel);
}

    .info-row:last-child[b-lkohqfmlhf] {
        border-bottom: none;
    }

.info-label[b-lkohqfmlhf] {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 14px;
}

.info-value[b-lkohqfmlhf] {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
}

.role-list[b-lkohqfmlhf], .permission-list[b-lkohqfmlhf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.role-badge[b-lkohqfmlhf] {
    background: var(--primary);
    color: var(--white);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
}

.permission-badge[b-lkohqfmlhf] {
    background: var(--bg-panel);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border-light);
}

.empty-state[b-lkohqfmlhf] {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 16px 0;
    font-size: 14px;
}

/* Food Zone Beautification - Style Only */
.foodZone[b-lkohqfmlhf] {
    background: linear-gradient(135deg, var(--white) 0%, var(--bg-subtle) 100%);
    border: 2px solid var(--primary-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    /* Remove grid-column: span 2 to make it same size as other cards */
}

.foodZone[b-lkohqfmlhf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

.foodZone:hover[b-lkohqfmlhf] {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 43, 130, 0.15);
    border-color: var(--primary);
}

.foodZone .module-card[b-lkohqfmlhf] {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative;
}

.foodZone .module-card:hover[b-lkohqfmlhf] {
    background: rgba(0, 43, 130, 0.02);
    transform: none;
}

.foodZone .module-header[b-lkohqfmlhf] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: var(--white);
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.foodZone .module-icon-wrapper[b-lkohqfmlhf] {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.foodZone .module-card:hover .module-icon-wrapper[b-lkohqfmlhf] {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.foodZone .module-content[b-lkohqfmlhf] {
    padding: 24px;
    background: var(--white);
}

.foodZone .module-content h3[b-lkohqfmlhf] {
    color: var(--primary);
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 700;
}

.foodZone .module-content p[b-lkohqfmlhf] {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.foodZone .module-features[b-lkohqfmlhf] {
    gap: 10px;
}

.foodZone .feature-tag[b-lkohqfmlhf] {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    transition: all 0.2s ease;
}

.foodZone .feature-tag:hover[b-lkohqfmlhf] {
    background: var(--primary);
    color: var(--white);
}

.weeklymeals[b-lkohqfmlhf] {
    background: var(--white);
    border-top: 1px solid var(--border-light);
    padding: 0;
    transition: all 0.3s ease;
}

.weeklymeals:hover[b-lkohqfmlhf] {
    background: var(--bg-subtle);
}

.weeklymeals .module-card[b-lkohqfmlhf] {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 20px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 16px;
}

.weeklymeals .module-card:hover[b-lkohqfmlhf] {
    background: rgba(0, 43, 130, 0.05);
    transform: translateX(8px);
}

.weeklymeals .module-card[b-lkohqfmlhf]::before {
    content: '📅';
    font-size: 24px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.weeklymeals .module-card:hover[b-lkohqfmlhf]::before {
    opacity: 1;
    transform: scale(1.1);
}

.weeklymeals .module-card p[b-lkohqfmlhf] {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
    transition: color 0.3s ease;
}

.weeklymeals .module-card:hover p[b-lkohqfmlhf] {
    color: var(--primary);
}

.foodZone .module-footer[b-lkohqfmlhf] {
    background: var(--bg-panel);
    padding: 20px 24px;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.foodZone .module-link[b-lkohqfmlhf] {
    color: var(--primary);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.foodZone .module-link[b-lkohqfmlhf]::after {
    content: '→';
    transition: transform 0.3s ease;
}

.foodZone:hover .module-link[b-lkohqfmlhf]::after {
    transform: translateX(4px);
}

.foodZone .module-link:hover[b-lkohqfmlhf] {
    color: var(--primary-hover);
    text-decoration: none;
}

@media (max-width: 1200px) {
    .modules-grid[b-lkohqfmlhf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-header[b-lkohqfmlhf] {
        padding: 24px 20px;
    }

    .header-content[b-lkohqfmlhf] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-left h1[b-lkohqfmlhf] {
        font-size: 22px;
    }

    .quick-stats[b-lkohqfmlhf], .modules-section[b-lkohqfmlhf], .user-info-section[b-lkohqfmlhf] {
        padding: 0 20px;
    }

    .quick-stats[b-lkohqfmlhf] {
        grid-template-columns: 1fr;
        margin-top: 20px;
    }

    .modules-grid[b-lkohqfmlhf] {
        grid-template-columns: 1fr;
    }

    .user-info-grid[b-lkohqfmlhf] {
        grid-template-columns: 1fr;
    }

    .foodZone .module-header[b-lkohqfmlhf] {
        padding: 20px;
    }

    .foodZone .module-content[b-lkohqfmlhf] {
        padding: 20px;
    }

    .foodZone .module-footer[b-lkohqfmlhf] {
        padding: 16px 20px;
    }

    .weeklymeals .module-card[b-lkohqfmlhf] {
        padding: 16px 20px;
    }
}
/* /Pages/Login.razor.rz.scp.css */
.password-input-wrapper[b-o6m14jodnw] {
    position: relative;
}

.password-input-wrapper .password-input[b-o6m14jodnw] {
    padding-right: 2.5rem;
}

.password-toggle-btn[b-o6m14jodnw] {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    cursor: pointer;
    border-radius: 4px;
}

.password-toggle-btn:hover[b-o6m14jodnw],
.password-toggle-btn:focus-visible[b-o6m14jodnw] {
    color: #212529;
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}

/* Inline login-failure banner (replaces the former error toast). */
.login-error[b-o6m14jodnw] {
    background: #fde8e8;
    color: #b91c1c;
    border: 1px solid rgba(185, 28, 28, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 14px;
}

/* Moved from inline <style> in Login.razor */
.login-container[b-o6m14jodnw] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    padding: 20px;
}

.login-card[b-o6m14jodnw] {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 48px 40px;
    width: 100%;
    max-width: 440px;
}

.login-header[b-o6m14jodnw] {
    text-align: center;
    margin-bottom: 32px;
}

.brand-mark[b-o6m14jodnw] {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-mark img[b-o6m14jodnw] {
    max-width: 100%;
    height: auto;
    display: block;
}

.login-header h1[b-o6m14jodnw] {
    color: var(--text-primary);
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
}

.login-header p[b-o6m14jodnw] {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

.form-group[b-o6m14jodnw] {
    margin-bottom: 20px;
}

.form-label[b-o6m14jodnw] {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
}

.form-control[b-o6m14jodnw] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    color: var(--text-primary);
    background-color: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus[b-o6m14jodnw] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-lighter);
}

.form-control[b-o6m14jodnw]::placeholder {
    color: var(--text-light);
}

.btn-login[b-o6m14jodnw] {
    width: 100%;
    padding: 14px 20px;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.btn-login:hover:not(:disabled)[b-o6m14jodnw] {
    background: var(--primary-hover);
    box-shadow: var(--shadow-md);
}

.btn-login:disabled[b-o6m14jodnw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.alert[b-o6m14jodnw] {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid transparent;
}

.alert-danger[b-o6m14jodnw] {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: var(--danger);
    color: var(--danger);
}

.loading-state[b-o6m14jodnw] {
    text-align: center;
    padding: 20px 0;
}

.loading-state .spinner-border[b-o6m14jodnw] {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 12px;
}

.loading-state p[b-o6m14jodnw] {
    color: var(--text-muted);
    margin: 0;
    font-size: 14px;
}

.login-footer[b-o6m14jodnw] {
    text-align: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}

.login-footer p[b-o6m14jodnw] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.validation-message[b-o6m14jodnw] {
    color: var(--danger);
    font-size: 13px;
    margin-top: 6px;
    display: block;
}

/* Responsive */
@media (max-width: 480px) {
    .login-card[b-o6m14jodnw] {
        padding: 32px 24px;
    }

    .login-header h1[b-o6m14jodnw] {
        font-size: 22px;
    }

    .brand-mark[b-o6m14jodnw] {
        width: 70px;
        height: 70px;
    }
}
/* /Pages/MySubdepartmentRequest.razor.rz.scp.css */
.handler-page[b-10awad53am] {
    padding: 20px;
    font-family: 'Ubuntu', sans-serif;
}

.handler-page-header[b-10awad53am] {
    margin-bottom: 20px;
}

.handler-page-title[b-10awad53am] {
    font-size: 22px;
    font-weight: 500;
    color: #141414;
    margin: 0 0 4px 0;
}

.handler-page-subtitle[b-10awad53am] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.handler-loading[b-10awad53am],
.handler-empty-card[b-10awad53am] {
    background-color: #fff;
    border: 0.5px solid #cccccc;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    color: #6b7280;
}

.handler-table-wrapper[b-10awad53am] {
    background-color: #fff;
    border: 0.5px solid #cccccc;
    border-radius: 8px;
    overflow-x: auto;
}

.handler-table[b-10awad53am] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.handler-table thead th[b-10awad53am] {
    text-align: left;
    padding: 12px 16px;
    background-color: #f7f7f7;
    color: #6b7280;
    font-weight: 500;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.handler-table tbody td[b-10awad53am] {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f1f1;
    color: #141414;
    vertical-align: middle;
}

.handler-ticket-number[b-10awad53am] {
    font-weight: 500;
    color: #001f57;
}

.handler-actions-col[b-10awad53am] {
    white-space: nowrap;
}

.status-badge[b-10awad53am] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 400;
}

.status-open[b-10awad53am],
.status-reopened[b-10awad53am] {
    background-color: rgba(255, 149, 0, 0.12);
    color: rgba(255, 149, 0, 1);
    border: 0.5px solid rgba(255, 149, 0, 1);
}

.status-in-progress[b-10awad53am] {
    background-color: rgba(0, 122, 255, 0.12);
    color: rgba(0, 122, 255, 1);
    border: 0.5px solid rgba(0, 122, 255, 1);
}

.status-pending-customer[b-10awad53am],
.status-pending-third-party[b-10awad53am] {
    background-color: rgba(148, 163, 184, 0.15);
    color: rgba(71, 85, 105, 1);
    border: 0.5px solid rgba(148, 163, 184, 1);
}

.status-treated[b-10awad53am] {
    background-color: rgba(20, 184, 166, 0.12);
    color: rgba(13, 148, 136, 1);
    border: 0.5px solid rgba(20, 184, 166, 1);
}

.status-resolved[b-10awad53am] {
    background-color: rgba(52, 199, 89, 0.12);
    color: rgba(52, 199, 89, 1);
    border: 0.5px solid rgba(52, 199, 89, 1);
}

.status-closed[b-10awad53am] {
    background-color: rgba(100, 116, 139, 0.12);
    color: rgba(71, 85, 105, 1);
    border: 0.5px solid rgba(100, 116, 139, 1);
}

/* Action buttons */
.btn-handler[b-10awad53am] {
    padding: 6px 12px;
    margin-right: 6px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #d1d5db;
    background-color: #fff;
    color: #374151;
}

.btn-handler:last-child[b-10awad53am] {
    margin-right: 0;
}

.btn-handler:disabled[b-10awad53am] {
    opacity: 0.6;
    cursor: not-allowed;
}

.handler-escalated-note[b-10awad53am] {
    width: 100%;
    font-size: 12px;
    color: #b45309;
    background-color: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
}

.btn-handler-view[b-10awad53am] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    color: #334155;
    background-color: #fff;
    border-color: #cbd5e1;
}

.btn-handler-view:hover[b-10awad53am] {
    background-color: #f1f5f9;
    color: #0f172a;
}

.btn-handler-primary[b-10awad53am] {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.btn-handler-terminal[b-10awad53am] {
    background-color: #0d9488;
    border-color: #0d9488;
    color: #fff;
}

.btn-handler-hold[b-10awad53am] {
    background-color: #fff;
    border-color: #f59e0b;
    color: #b45309;
}

.btn-handler-resume[b-10awad53am] {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

/* Modals */
.handler-modal-overlay[b-10awad53am] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.handler-modal[b-10awad53am] {
    background-color: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.handler-modal-header[b-10awad53am] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.handler-modal-header h3[b-10awad53am] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.handler-modal-close[b-10awad53am] {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
}

.handler-modal-body[b-10awad53am] {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.handler-modal-hint[b-10awad53am] {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 6px 0;
}

.handler-field-label[b-10awad53am] {
    font-size: 13px;
    color: #374151;
    margin-top: 6px;
}

.required-marker[b-10awad53am] {
    color: #dc2626;
}

.handler-input[b-10awad53am],
.handler-textarea[b-10awad53am] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
}

.handler-modal-footer[b-10awad53am] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
}
/* /Pages/ServiceRequestAdmin.razor.rz.scp.css */




.date-filter-item[b-nml56p8cox] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

.filter-label[b-nml56p8cox] {
    color: rgba(134, 134, 134, 1);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    flex-direction: column;
}

.filter-help[b-nml56p8cox] {
    display: inline-block;
    margin-left: 6px;
    color: rgba(110, 110, 110, 1);
    font-size: 14px;
    cursor: help;
    user-select: none;
}

.filter-help:hover[b-nml56p8cox],
.filter-help:focus[b-nml56p8cox] {
    color: rgba(40, 40, 40, 1);
    outline: none;
}

.date-input[b-nml56p8cox] {
    width: 100%;
    height: 48px;
    padding: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: rgba(255, 255, 255, 1);
}


.apply-btn[b-nml56p8cox] {
    height: 48px;
    padding: 12px 20px;
    background-color: rgba(0, 31, 87, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    margin-right: 20px;
}

.date-filter-actions[b-nml56p8cox] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.date-filter-actions .apply-btn[b-nml56p8cox] {
    margin-right: 0;
}

.clear-filters-btn[b-nml56p8cox] {
    height: 48px;
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 1);
    background-color: rgba(255, 255, 255, 1);
    color: rgba(51, 65, 85, 1);
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.clear-filters-btn:hover[b-nml56p8cox] {
    background-color: rgba(241, 245, 249, 1);
    border-color: rgba(100, 116, 139, 1);
    color: rgba(15, 23, 42, 1);
}

.clear-filters-btn svg[b-nml56p8cox] {
    width: 16px;
    height: 16px;
}

.clear-icon[b-nml56p8cox] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filters-row[b-nml56p8cox] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    background: rgba(241, 245, 249, 1);
    padding: 2px 0px;
    border-radius: 10px;
}

.apply-export-btn[b-nml56p8cox]{
    margin-top: 30px;
}

.filter-select-row[b-nml56p8cox] {
    margin-top: 10px;
    /*background: rgba(248, 250, 252, 1);*/
}

.filter-select[b-nml56p8cox] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    flex: 1;
}

.filter-select-input[b-nml56p8cox] {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(204, 204, 204, 1);
    padding: 0 14px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 15px;
    color: rgba(20, 20, 20, 1);
    background-color: rgba(255, 255, 255, 1);
}

.filters-hint[b-nml56p8cox] {
    margin: 8px 0 0 4px;
    font-size: 13px;
    color: rgba(71, 85, 105, 1);
}

.filters-hint.error[b-nml56p8cox] {
    color: rgba(190, 18, 60, 1);
}

.filters-container[b-nml56p8cox] {
    background-color: rgba(250, 252, 255, 1);
    border: 1px solid rgba(226, 232, 240, 1);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.filters-toolbar[b-nml56p8cox] {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    /*background: rgba(241, 245, 249, 1);*/
}

.filters-actions[b-nml56p8cox] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    background: rgba(241, 245, 249, 1);
    padding: 10px;
    margin-top: 20px;
}

.filters-inputs-row[b-nml56p8cox] {
    display: flex;
    gap: 16px;
    width: 100%;
    align-items: flex-end;
    flex-wrap: wrap;
}

.date-filter-item.compact[b-nml56p8cox],
.filter-select.compact[b-nml56p8cox] {
    flex: 1 1 18%;
    min-width: 140px;
    max-width: 100%;
}

.filters-action-row[b-nml56p8cox] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: nowrap;
}

.filters-action-left[b-nml56p8cox] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filters-action-right[b-nml56p8cox] {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.apply-row[b-nml56p8cox] {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.filter-presets[b-nml56p8cox] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preset-header[b-nml56p8cox] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.preset-actions[b-nml56p8cox] {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    max-width: 420px;
}

.preset-input[b-nml56p8cox] {
    flex: 1;
    height: 40px;
    padding: 8px 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 10px;
    font-family: 'Ubuntu', sans-serif;
}

.preset-save-btn[b-nml56p8cox] {
    height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background-color: rgba(0, 31, 87, 1);
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.preset-save-btn:disabled[b-nml56p8cox] {
    opacity: 0.4;
    cursor: not-allowed;
}

.preset-chip-row[b-nml56p8cox] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.preset-chip[b-nml56p8cox] {
    display: flex;
    align-items: center;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
}

.preset-apply-btn[b-nml56p8cox],
.preset-delete-btn[b-nml56p8cox] {
    border: none;
    background: none;
    padding: 6px 14px;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
}

.preset-delete-btn[b-nml56p8cox] {
    padding-left: 0;
    color: rgba(134, 134, 134, 1);
}

.date-filter-error[b-nml56p8cox] {
    margin-top: 8px;
    color: rgba(255, 59, 48, 1);
    font-size: 14px;
    font-weight: 500;
}








.service-request-admin-container[b-nml56p8cox] {
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    background-color: rgba(241, 245, 249, 1);
    padding: 24px 32px;
    font-family: 'Ubuntu', sans-serif;
    box-sizing: border-box;
    overflow-x: hidden;
}

.dashboard-header-section[b-nml56p8cox] {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(226, 232, 240, 1);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.header-top[b-nml56p8cox] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.header-controls[b-nml56p8cox] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-right-controls[b-nml56p8cox] {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Date Picker Container */
.date-picker-container[b-nml56p8cox] {
    position: relative;
}

/* Calendar Dropdown Container */
.calendar-dropdown-container[b-nml56p8cox] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
    margin-top: 8px;
}

/* Calendar Overlay */
.calendar-overlay[b-nml56p8cox] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

/* Calendar Popup */
.calendar-popup[b-nml56p8cox] {
    position: relative;
    z-index: 1000;
    animation: slideDown-b-nml56p8cox 0.2s ease;
}

.calendar-popup-from[b-nml56p8cox] {
    left: 0;
}

.calendar-popup-to[b-nml56p8cox] {
    left: 0;
}

@keyframes slideDown-b-nml56p8cox {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.export-controls[b-nml56p8cox] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex-wrap: wrap;
    max-width: 100%;
}

.export-label[b-nml56p8cox] {
    font-size: 14px;
    color: rgba(71, 85, 105, 1);
    font-weight: 500;
}

.export-format-select[b-nml56p8cox] {
    appearance: none;
    width: 130px;
    padding: 12px 16px;
    border: 1px solid rgba(209, 213, 219, 1);
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(15, 23, 42, 1);
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    line-height: 1.2;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23273955' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 8px;
}

.export-format-select:focus[b-nml56p8cox] {
    outline: none;
    border-color: rgba(99, 102, 241, 1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.export-btn[b-nml56p8cox] {
    padding: 12px 20px;
    background-color: rgba(0, 31, 87, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.export-btn:disabled[b-nml56p8cox] {
    opacity: 0.5;
    cursor: not-allowed;
}

.header-divider[b-nml56p8cox] {
    width: 100%;
    height: 1px;
    background-color: rgba(204, 204, 204, 1);
    margin-bottom: 16px;
}

.metrics-cards-section[b-nml56p8cox] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.metric-card[b-nml56p8cox] {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(226, 232, 240, 1);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Clickable variant — used by Backlog Overview to drill into details */
.metric-card--link[b-nml56p8cox] {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.metric-card--link:hover[b-nml56p8cox],
.metric-card--link:focus-visible[b-nml56p8cox] {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
    border-color: rgba(0, 43, 130, 0.4);
    outline: none;
}

.metric-card__heading[b-nml56p8cox] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.metric-card__view-details[b-nml56p8cox] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(0, 31, 87, 1);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-card__view-details svg[b-nml56p8cox] {
    transition: transform 0.15s ease;
}

.metric-card--link:hover .metric-card__view-details svg[b-nml56p8cox],
.metric-card--link:focus-visible .metric-card__view-details svg[b-nml56p8cox] {
    transform: translateX(3px);
}

/* Filter variant — same hover behaviour as the navigational link card (.metric-card--link),
   but uses a brand-navy outline ring to indicate "this filter is currently applied"
   rather than a forward-pointing affordance. Today's Intake is the first user of this. */
.metric-card--filter.is-active[b-nml56p8cox] {
    border-color: rgba(0, 43, 130, 1);
    box-shadow: 0 0 0 2px rgba(0, 43, 130, 0.18), 0 8px 18px rgba(15, 23, 42, 0.08);
}

.metric-card__filter-hint[b-nml56p8cox] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(0, 31, 87, 1);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 43, 130, 0.08);
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
}

.metric-card--filter.is-active .metric-card__filter-hint[b-nml56p8cox] {
    background: rgba(0, 43, 130, 1);
    color: #ffffff;
}

.metric-label[b-nml56p8cox] {
    color: rgba(71, 85, 105, 1);
    font-size: 16px;
    font-weight: 500;
}

.metric-value[b-nml56p8cox] {
    font-size: 48px;
    font-weight: 600;
    color: rgba(15, 23, 42, 1);
    line-height: 1;
}

.metric-subtext[b-nml56p8cox] {
    color: rgba(100, 116, 139, 1);
    font-size: 14px;
}

.metric-value[b-nml56p8cox][b-nml56p8cox] {
    font-size: 20px;
    /*line-height: 1;*/
    font-weight: 30;
}


.aging-list[b-nml56p8cox] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: rgba(15, 23, 42, 1);
    font-size: 16px;
}

.aging-list div[b-nml56p8cox] {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(226, 232, 240, 1);
    padding-bottom: 4px;
}

/* Customer Satisfaction tile (B2) — uses .metric-card base and adds a
   rating-distribution bar list. */
.metric-card--satisfaction .metric-suffix[b-nml56p8cox] {
    font-size: 14px;
    color: rgba(100, 116, 139, 1);
    font-weight: 500;
    margin-left: 4px;
}

.satisfaction-bars[b-nml56p8cox] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.satisfaction-bar-row[b-nml56p8cox] {
    display: grid;
    grid-template-columns: 70px 1fr 32px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(71, 85, 105, 1);
}

.satisfaction-bar-label[b-nml56p8cox] {
    text-align: left;
}

.satisfaction-bar-count[b-nml56p8cox] {
    text-align: right;
    font-weight: 600;
    color: rgba(15, 23, 42, 1);
}

.satisfaction-bar-track[b-nml56p8cox] {
    height: 6px;
    background: rgba(226, 232, 240, 1);
    border-radius: 999px;
    overflow: hidden;
}

.satisfaction-bar-fill[b-nml56p8cox] {
    height: 100%;
    border-radius: 999px;
    background: rgba(100, 116, 139, 1);
    transition: width 200ms ease;
}

.satisfaction-bar-fill--excellent[b-nml56p8cox] { background: #16a34a; }
.satisfaction-bar-fill--good[b-nml56p8cox]      { background: #84cc16; }
.satisfaction-bar-fill--average[b-nml56p8cox]   { background: #f59e0b; }
.satisfaction-bar-fill--poor[b-nml56p8cox]      { background: #f97316; }
.satisfaction-bar-fill--verypoor[b-nml56p8cox]  { background: #ef4444; }

.requests-panel[b-nml56p8cox] {
    margin-top: 32px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 1);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.requests-header[b-nml56p8cox] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.requests-header h2[b-nml56p8cox] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #0f172a;
}

.requests-subtitle[b-nml56p8cox] {
    margin: 4px 0 0;
    font-size: 14px;
    color: #64748b;
}

.requests-meta[b-nml56p8cox] {
    font-size: 13px;
    color: #475569;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.requests-state[b-nml56p8cox] {
    padding: 32px;
    border-radius: 16px;
    border: 1px dashed #d1d5db;
    text-align: center;
    color: #475569;
    background: #f8fafc;
}

.requests-state.error[b-nml56p8cox] {
    color: #b91c1c;
    border-color: #fecaca;
    /*background: #fef2f2;*/
    background: red;
}

.requests-state.empty[b-nml56p8cox] {
    color: #6b7280;
}

.requests-table[b-nml56p8cox] {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, 1);
}

.requests-table table[b-nml56p8cox] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.requests-table thead th[b-nml56p8cox] {
    text-align: left;
    padding: 14px 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    background: #f8fafc;
    font-weight: 600;
}

.requests-table tbody td[b-nml56p8cox] {
    padding: 14px 10px;
    font-size: 14px;
    color: #0f172a;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    background: #fff;
}

.requests-table tbody tr:hover td[b-nml56p8cox] {
    background: #f1f5f9;
}

.request-id[b-nml56p8cox] {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.created-cell[b-nml56p8cox] {
    white-space: nowrap;
}

.pill-badge[b-nml56p8cox] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid transparent;
}

.pill-badge--clickable[b-nml56p8cox] {
    cursor: pointer;
    transition: transform 80ms ease, box-shadow 80ms ease;
}

.pill-badge--clickable:hover[b-nml56p8cox] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.pill-badge--clickable:focus-visible[b-nml56p8cox] {
    outline: 2px solid rgba(56, 132, 255, 0.55);
    outline-offset: 2px;
}

.status-open[b-nml56p8cox] {
    border-color: #f97316;
    color: #c2410c;
    background: rgba(249, 115, 22, 0.12);
    width: 100%;
}

.modal-status[b-nml56p8cox] {
    border-color: #f97316;
    color: #c2410c;
    background: rgba(249, 115, 22, 0.12);
    width: 20%;
}

.status-inprogress[b-nml56p8cox],
.status-in-progress[b-nml56p8cox],
.status-reopened[b-nml56p8cox] {
    border-color: #facc15;
    color: #854d0e;
    background: rgba(250, 204, 21, 0.15);
}

.status-resolved[b-nml56p8cox],
.status-closed[b-nml56p8cox] {
    border-color: #22c55e;
    color: #166534;
    background: rgba(34, 197, 94, 0.12);
}

.status-pending-customer[b-nml56p8cox],
.status-pending-third-party[b-nml56p8cox] {
    border-color: #94a3b8;
    color: #475569;
    background: rgba(148, 163, 184, 0.15);
}

/* SLA status pill badges (details modal) */
.status-ok[b-nml56p8cox] {
    border-color: #22c55e;
    color: #166534;
    background: rgba(34, 197, 94, 0.12);
}

.status-breached[b-nml56p8cox] {
    border-color: #ef4444;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}

.status-escalated[b-nml56p8cox] {
    border-color: #7c3aed;
    color: #5b21b6;
    background: rgba(124, 58, 237, 0.12);
}

.status-unknown[b-nml56p8cox] {
    border-color: #6b7280;
    color: #374151;
    background: rgba(107, 114, 128, 0.12);
}

.severity-urgent[b-nml56p8cox],
.severity-critical[b-nml56p8cox] {
    border-color: #ef4444;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}

.severity-high[b-nml56p8cox] {
    border-color: #f97316;
    color: #c2410c;
    background: rgba(249, 115, 22, 0.12);
}


.severity-high-stastus[b-nml56p8cox] {
    border-color: #f97316;
    color: #c2410c;
    background: rgba(249, 115, 22, 0.12);
    width: 20%;
}

.severity-medium[b-nml56p8cox] {
    border-color: #2563eb;
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.12);
}

.severity-low[b-nml56p8cox] {
    border-color: #0ea5e9;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.12);
}

.table-actions[b-nml56p8cox] {
    display: flex;
    gap: 8px;
}

.table-action-button[b-nml56p8cox] {
    border: 1px solid #2563eb;
    background: transparent;
    color: #1d4ed8;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
}

.table-action-button:hover[b-nml56p8cox] {
    background: #2563eb;
    color: #fff;
}

/* Icon-only View button: centre the eye SVG. */
.table-action-button--icon[b-nml56p8cox] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    line-height: 0;
}

.table-action-button--icon svg[b-nml56p8cox] {
    display: block;
}

.pagination-footer[b-nml56p8cox] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pagination-status[b-nml56p8cox] {
    font-size: 13px;
    color: #475569;
    font-weight: 500;
}

.pagination-controls[b-nml56p8cox] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination-page[b-nml56p8cox],
.pagination-nav-button[b-nml56p8cox] {
    border: 1px solid #cbd5f5;
    background: #fff;
    color: #1d4ed8;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    min-width: 40px;
    transition: background 0.2s ease, color 0.2s ease;
}

.pagination-page.active[b-nml56p8cox],
.pagination-page:hover:not(:disabled)[b-nml56p8cox],
.pagination-nav-button:hover:not(:disabled)[b-nml56p8cox] {
    background: #1d4ed8;
    color: #fff;
}

.pagination-page:disabled[b-nml56p8cox],
.pagination-nav-button:disabled[b-nml56p8cox] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-ellipsis[b-nml56p8cox] {
    font-size: 13px;
    color: #94a3b8;
    padding: 0 4px;
}

.alert-container[b-nml56p8cox] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 20px 0;
}

.alert-banner[b-nml56p8cox] {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
}

.alert-banner.warning[b-nml56p8cox] {
    background-color: rgba(255, 243, 207, 1);
    border: 0.5px solid rgba(255, 196, 0, 0.4);
    color: rgba(120, 87, 0, 1);
}

.alert-banner.danger[b-nml56p8cox] {
    background-color: rgba(254, 226, 226, 1);
    border: 0.5px solid rgba(252, 165, 165, 1);
    color: rgba(153, 27, 27, 1);
}

.filter-context-banner[b-nml56p8cox] {
    background-color: rgba(219, 234, 254, 1);
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(30, 64, 175, 1);
    margin: 12px 0 8px;
}

.info-icon[b-nml56p8cox] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(59, 130, 246, 1);
    color: white;
    font-weight: 600;
    font-size: 13px;
}

.banner-accent[b-nml56p8cox] {
    text-decoration: underline;
    font-weight: 600;
}

.muted[b-nml56p8cox] {
    color: rgba(134, 134, 134, 1);
    font-size: 14px;
}

.export-range[b-nml56p8cox] {
    margin-top: 8px;
    font-size: 14px;
}





.reload-btn[b-nml56p8cox] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
    background-color: rgba(250, 252, 255, 1);
}

    .reload-btn:hover[b-nml56p8cox] {
        background: #e5e7eb;
       
    }

.reload-icon[b-nml56p8cox] {
    width: 20px;
    height: 20px;
    fill: #374151;
    transition: 0.4s ease;
    /*color: #fff;*/
    /*background:#fff;*/
}

/* Spin animation on click */
.reload-btn:active .reload-icon[b-nml56p8cox] {
    transform: rotate(360deg);
}






@media (max-width: 1200px) {
    .filters-toolbar[b-nml56p8cox] {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-actions[b-nml56p8cox] {
        width: 100%;
        justify-content: space-between;
        background: rgba(241, 245, 249, 1);
        padding: 10px;
    }

    .filters-inputs-row[b-nml56p8cox] {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .service-request-admin-container[b-nml56p8cox] {
        padding: 16px;
    }

    .filters-actions[b-nml56p8cox] {
        flex-direction: column;
        align-items: stretch;
    }

    .date-filter-item.compact[b-nml56p8cox],
    .filter-select.compact[b-nml56p8cox] {
        flex: 1 1 100%;
        min-width: unset;
    }

    .filters-action-row[b-nml56p8cox] {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-action-right[b-nml56p8cox] {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .details-panel[b-nml56p8cox] {
        width: 100%;
        border-radius: 24px 24px 0 0;
        max-height: calc(100vh - 24px);
    }

    .details-overlay[b-nml56p8cox] {
        padding: 0;
        align-items: flex-end;
    }
}

/* Details Modal Styles */
.details-overlay[b-nml56p8cox] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    justify-content: flex-end;
    padding: 24px;
    z-index: 1150;
}

.details-panel[b-nml56p8cox] {
    width: min(720px, 92vw);
    min-width: 320px;
    background: #ffffff;
    border-radius: 32px 0 0 32px;
    box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    padding: 32px;
    gap: 28px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}

.details-header[b-nml56p8cox] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.details-title h3[b-nml56p8cox] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.01em;
}

.details-title span[b-nml56p8cox] {
    font-weight: 500;
    color: #6b7280;
}

.details-meta[b-nml56p8cox] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
}

.details-resolution-time[b-nml56p8cox] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-shrink: 0;
    gap: 8px;
}

.details-resolution-time-label[b-nml56p8cox] {
    font-size: 26px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.details-resolution-time-value[b-nml56p8cox] {
    font-size: 26px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.details-close[b-nml56p8cox] {
    border: none;
    background: rgba(15, 23, 42, 0.05);
    color: #6b7280;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.details-close:hover[b-nml56p8cox] {
    background: rgba(15, 23, 42, 0.1);
}

.details-body[b-nml56p8cox] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    overflow-y: auto;
}

.details-row[b-nml56p8cox] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.details-row label[b-nml56p8cox] {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.details-row p[b-nml56p8cox] {
    margin: 0;
    font-size: 15px;
    color: #111827;
}

.details-remark[b-nml56p8cox] {
    background: #f9fafb;
    border-radius: 16px;
    padding: 16px 18px;
    line-height: 1.5;
    font-size: 15px;
    color: #111827;
}

.details-remark-primary[b-nml56p8cox] {
    margin-bottom: 12px;
}

.details-resolution-rating[b-nml56p8cox] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 15px;
    color: #111827;
}

.details-rating-value[b-nml56p8cox] {
    font-weight: 600;
}

.details-rating-comment[b-nml56p8cox] {
    margin: 0;
    color: #6b7280;
    font-style: italic;
    font-size: 14px;
}

.details-rating-meta[b-nml56p8cox] {
    display: block;
    font-size: 12px;
    color: #9ca3af;
}

.details-remarks-list[b-nml56p8cox] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.details-remark-entry[b-nml56p8cox] {
    padding: 14px 18px;
    border-radius: 14px;
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
    color: #111827;
}

.details-remark-entry p[b-nml56p8cox] {
    margin: 0;
    line-height: 1.5;
}

.details-remark-meta[b-nml56p8cox] {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.details-remark-attachments-block[b-nml56p8cox] {
    margin-top: 8px;
}

.details-remark-attachments[b-nml56p8cox] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.details-remark-attachment-item[b-nml56p8cox] {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.details-remark-attachment-link[b-nml56p8cox] {
    border: none;
    background: transparent;
    color: #1d4ed8;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.details-remark-attachment-link:hover:not(:disabled)[b-nml56p8cox] {
    text-decoration: underline;
}

.details-remark-attachment-link:disabled[b-nml56p8cox] {
    opacity: 0.6;
    cursor: not-allowed;
}

.details-remark-attachment-name[b-nml56p8cox] {
    color: #374151;
    font-weight: 600;
}

.details-remark-attachment-size[b-nml56p8cox] {
    color: #9ca3af;
    font-size: 12px;
}

.details-loading[b-nml56p8cox] {
    padding: 40px;
    text-align: center;
    color: #6b7280;
    font-size: 15px;
}

.details-error[b-nml56p8cox] {
    font-size: 13px;
    color: #dc2626;
    padding: 12px;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 8px;
}

.details-footer[b-nml56p8cox] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 16px;
    margin-top: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 40%, #ffffff 100%);
}

.action-button[b-nml56p8cox] {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.action-button:hover:not(:disabled)[b-nml56p8cox] {
    background: #f3f4f6;
}

.action-button.ghost[b-nml56p8cox] {
    border-color: #d1d5db;
    color: #374151;
    background: #fff;
}

.action-button.ghost:hover:not(:disabled)[b-nml56p8cox] {
    background: #f3f4f6;
}

.action-button:disabled[b-nml56p8cox] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Attachments Styles */
.details-attachments-list[b-nml56p8cox] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.details-attachment-entry[b-nml56p8cox] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.details-attachment-entry:hover[b-nml56p8cox] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.attachment-info[b-nml56p8cox] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.attachment-name[b-nml56p8cox] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    word-break: break-word;
}

.attachment-size[b-nml56p8cox] {
    font-size: 12px;
    color: #6b7280;
}

.attachment-download[b-nml56p8cox] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #2563eb;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.attachment-download:hover[b-nml56p8cox] {
    background: #eff6ff;
    border-color: #2563eb;
    color: #1d4ed8;
}

.attachment-download svg[b-nml56p8cox] {
    width: 16px;
    height: 16px;
}

/* Timeline Styles */
.details-timeline-list[b-nml56p8cox] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.details-timeline-entry[b-nml56p8cox] {
    padding: 14px 18px;
    border-radius: 12px;
    background: #f9fafb;
    border-left: 3px solid #2563eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeline-status-change[b-nml56p8cox] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.timeline-status-old[b-nml56p8cox] {
    color: #6b7280;
    text-decoration: line-through;
}

.timeline-arrow[b-nml56p8cox] {
    color: #9ca3af;
    font-weight: 400;
}

.timeline-status-new[b-nml56p8cox] {
    color: #2563eb;
}

.timeline-meta[b-nml56p8cox] {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.timeline-remarks[b-nml56p8cox] {
    margin: 0;
    font-size: 13px;
    color: #374151;
    font-style: italic;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.aging-option[b-nml56p8cox] {
    width: 50%;
}
/* Moved from inline <style> in ServiceRequestAdmin.razor — picker trigger affordance */
.picker-trigger[b-nml56p8cox] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-right: 36px;
}

.picker-trigger:not(.picker-trigger--disabled):hover[b-nml56p8cox],
.picker-trigger:not(.picker-trigger--disabled):focus-visible[b-nml56p8cox] {
    border-color: #374151;
    background-color: #f5f7fb;
    outline: none;
}

.picker-trigger--disabled[b-nml56p8cox] {
    background-color: #f1f1f1;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

.picker-value[b-nml56p8cox] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-value.placeholder[b-nml56p8cox] {
    color: #9ca3af;
}

.picker-caret[b-nml56p8cox] {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 9px;
    height: 9px;
    border: solid #374151;
    border-width: 0 2px 2px 0;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}
/* /Pages/ServiceRequestAdminBacklog.razor.rz.scp.css */
/* Backlog drill-down page — scoped styles only. The outer container shell
   (.service-request-admin-form-container, .form-card, .form-card-header,
   .form-card-body, .form-title, .header-title-row, .header-actions, .done-btn)
   comes from the global Admin list/form shared block in app.css — do NOT
   redefine them here. */

/* Small two-line title block inside .header-title-row (title + subtitle).
   The .form-title styling comes from app.css; we only add the subtitle row. */
.header-title-stack[b-czgaww8fs5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* allow text wrap inside flex */
}

/* Export controls in the page header — sit next to the Go Back button. */
.export-format-select[b-czgaww8fs5] {
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(203, 213, 225, 1);
    padding: 0 10px;
    font-size: 13px;
    background: #ffffff;
    color: rgba(15, 23, 42, 1);
}

.export-btn[b-czgaww8fs5] {
    margin-left: 4px;
}

.export-error[b-czgaww8fs5] {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255, 59, 48, 0.10);
    border: 1px solid rgba(255, 59, 48, 0.5);
    border-radius: 8px;
    color: #c2261d;
    font-size: 13px;
}

.form-subtitle[b-czgaww8fs5] {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    font-family: 'Ubuntu', sans-serif;
}

/* ---- KPI summary tiles (Total Open / Critical / >7 Days / Top Status) ----
   These stay as individual stat cards (they ARE cards, semantically), but
   shadow is tightened to the global --shadow-sm so they don't compete with
   the outer .form-card's shadow. */
.backlog-summary[b-czgaww8fs5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.summary-tile[b-czgaww8fs5] {
    /* native button reset — tiles are <button> so keyboard / screen readers treat them as such */
    appearance: none;
    background: #ffffff;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    width: 100%;
    font-family: 'Ubuntu', sans-serif;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.summary-tile:hover:not([disabled])[b-czgaww8fs5] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.summary-tile:focus-visible[b-czgaww8fs5] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.summary-tile.is-active[b-czgaww8fs5] {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.summary-tile[disabled][b-czgaww8fs5] {
    cursor: not-allowed;
    opacity: 0.55;
}

.summary-tile__label[b-czgaww8fs5] {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-family: 'Ubuntu', sans-serif;
}

.summary-tile__value[b-czgaww8fs5] {
    font-size: 32px;
    font-weight: 500;
    color: var(--primary);
    line-height: 1.1;
    font-family: 'Ubuntu', sans-serif;
}

.summary-tile__value--danger[b-czgaww8fs5] { color: #DC2626; }
.summary-tile__value--warning[b-czgaww8fs5] { color: #F59E0B; }
.summary-tile__value--small[b-czgaww8fs5] { font-size: 18px; }

/* ---- Dashboard section (flat sections inside form-card-body) ----
   Used for the donuts row, aging bars, and records table. No standalone
   card chrome — the outer form-card already provides that. */
.dashboard-section[b-czgaww8fs5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard-section__header[b-czgaww8fs5] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.section-title[b-czgaww8fs5] {
    color: var(--primary);
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
    line-height: 1.2;
}

.section-hint[b-czgaww8fs5] {
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'Ubuntu', sans-serif;
}

/* Title + filter chip cluster on the Backlog Records section header */
.section-title-group[b-czgaww8fs5] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-chip[b-czgaww8fs5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
}

.filter-chip__label[b-czgaww8fs5] {
    line-height: 1;
}

.filter-chip__clear[b-czgaww8fs5] {
    background: transparent;
    border: 0;
    color: var(--primary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 999px;
    transition: background 0.15s ease;
}

.filter-chip__clear:hover[b-czgaww8fs5] {
    background: rgba(0, 43, 130, 0.15);
}

.filter-chip__clear:focus-visible[b-czgaww8fs5] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---- Donut charts row ----
   2-column at desktop, stacks at narrow. Each block is just a labeled
   container holding the chart; no border/shadow of its own. */
.backlog-charts[b-czgaww8fs5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.chart-block[b-czgaww8fs5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ---- Aging horizontal bars ---- */
.aging-list[b-czgaww8fs5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aging-row[b-czgaww8fs5] {
    display: grid;
    grid-template-columns: 100px 1fr 60px;
    align-items: center;
    gap: 16px;
    padding: 6px 0;
}

.aging-row__label[b-czgaww8fs5] {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
}

.aging-row__bar-track[b-czgaww8fs5] {
    background: #F3F4F6;
    border-radius: 6px;
    height: 14px;
    overflow: hidden;
}

.aging-row__bar[b-czgaww8fs5] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-hover));
    border-radius: 6px;
    transition: width 0.3s ease;
}

.aging-row__count[b-czgaww8fs5] {
    text-align: right;
    font-size: 14px;
    color: rgba(75, 85, 99, 1);
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
}

/* ---- Severity + status pills (records table) ----
   Semantic colours kept (red/amber/blue/grey) — these are accessibility
   conventions, not brand. */
.severity-pill[b-czgaww8fs5],
.status-pill[b-czgaww8fs5] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
}

.pill--critical[b-czgaww8fs5] { background: #FEE2E2; color: #DC2626; }
.pill--high[b-czgaww8fs5]     { background: #FEF3C7; color: #B45309; }
.pill--medium[b-czgaww8fs5]   { background: #DBEAFE; color: #1E40AF; }
.pill--low[b-czgaww8fs5]      { background: #F3F4F6; color: #4B5563; }

.pill--open[b-czgaww8fs5]     { background: #DBEAFE; color: #1E40AF; }
.pill--progress[b-czgaww8fs5] { background: #FEF3C7; color: #B45309; }
.pill--reopened[b-czgaww8fs5] { background: #FEE2E2; color: #B91C1C; }

/* ---- Pagination ---- */
.pagination-controls[b-czgaww8fs5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
    border-top: 1px solid rgba(204, 204, 204, 0.3);
    margin-top: 16px;
}

.pagination-info[b-czgaww8fs5] {
    font-size: 14px;
    color: var(--primary);
    font-family: 'Ubuntu', sans-serif;
}

.pagination-buttons .btn[b-czgaww8fs5] {
    min-width: 100px;
}

/* ---- Records table tweaks (scoped) ---- */
.dashboard-section .table[b-czgaww8fs5] {
    margin-bottom: 0;
    font-size: 14px;
}

.dashboard-section .table thead th[b-czgaww8fs5] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 12px 14px;
}

.dashboard-section .table tbody td[b-czgaww8fs5] {
    padding: 14px;
    vertical-align: middle;
}

/* ---- Mobile / narrow viewports ---- */
@media (max-width: 768px) {
    .backlog-charts[b-czgaww8fs5] {
        grid-template-columns: 1fr;
    }

    .summary-tile__value[b-czgaww8fs5] {
        font-size: 24px;
    }

    .aging-row[b-czgaww8fs5] {
        grid-template-columns: 80px 1fr 50px;
        gap: 10px;
    }

    .dashboard-section__header[b-czgaww8fs5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}
/* /Pages/ServiceRequestAdminDepartment.razor.rz.scp.css */
.service-request-admin-form-container[b-h4hyk800ss] {
    width: 100%;
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    font-family: 'Ubuntu', sans-serif;
    background-color: rgba(246, 246, 246, 1);
}

.form-card[b-h4hyk800ss] {
    width: 100%;
    max-width: 1200px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.form-card-header[b-h4hyk800ss] {
    padding: 24px 24px 20px 24px;
    border-bottom: 0.5px solid rgba(204, 204, 204, 1);
    background-color: rgba(255, 255, 255, 1);
}

.header-title-row[b-h4hyk800ss] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.form-title[b-h4hyk800ss] {
    color: rgba(0, 31, 87, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
}

.form-card-body[b-h4hyk800ss] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.modal-overlay[b-h4hyk800ss] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    padding: 16px;
}

.modal-card[b-h4hyk800ss] {
    width: min(520px, 100%);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header[b-h4hyk800ss] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(226, 232, 240, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-h4hyk800ss] {
    margin: 0;
    font-size: 20px;
    color: #0f172a;
}

.modal-close[b-h4hyk800ss] {
    border: none;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    color: #6b7280;
}

.modal-body[b-h4hyk800ss] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-field[b-h4hyk800ss] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-field label[b-h4hyk800ss] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.modal-input[b-h4hyk800ss],
.modal-textarea[b-h4hyk800ss] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
}

.modal-textarea[b-h4hyk800ss] {
    min-height: 90px;
}

.input-invalid[b-h4hyk800ss] {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.25);
}

.field-error[b-h4hyk800ss] {
    font-size: 13px;
    color: #b91c1c;
}

.modal-checkbox[b-h4hyk800ss] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
}

.modal-error[b-h4hyk800ss] {
    color: #b91c1c;
    font-size: 13px;
}

.modal-footer[b-h4hyk800ss] {
    padding: 16px 24px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-footer .btn[b-h4hyk800ss] {
    min-width: 110px;
}

.required[b-h4hyk800ss] {
    color: #dc2626;
}

.form-field[b-h4hyk800ss] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.field-label[b-h4hyk800ss] {
    color: rgba(20, 20, 20, 1);
    font-size: 16px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
}

.input-wrapper[b-h4hyk800ss] {
    width: 100%;
    height: 44px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: rgba(255, 255, 255, 1);
}

.input-wrapper:focus-within[b-h4hyk800ss] {
    border-color: rgba(0, 43, 130, 1);
    box-shadow: 0 0 0 3px rgba(0, 43, 130, 0.1);
}

.form-input[b-h4hyk800ss] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: transparent;
}

.form-input[b-h4hyk800ss]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.form-actions[b-h4hyk800ss] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

.cancel-btn[b-h4hyk800ss],
.save-btn[b-h4hyk800ss] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    height: 44px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.cancel-btn[b-h4hyk800ss] {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(20, 20, 20, 1);
}

.cancel-btn:hover[b-h4hyk800ss] {
    background-color: rgba(246, 246, 246, 1);
    border-color: rgba(179, 179, 179, 1);
}

.save-btn[b-h4hyk800ss] {
    background-color: rgba(0, 43, 130, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
}

.save-btn:hover[b-h4hyk800ss] {
    background-color: rgba(0, 31, 87, 1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 43, 130, 0.2);
}

/* Bootstrap Table Enhancements */
.table[b-h4hyk800ss] {
    margin-bottom: 0;
    font-size: 15px;
}

.table thead th[b-h4hyk800ss] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(0, 43, 130, 0.2);
    padding: 14px 16px;
}

.table tbody td[b-h4hyk800ss] {
    padding: 16px;
    vertical-align: middle;
}

.table-hover tbody tr:hover[b-h4hyk800ss] {
    background-color: rgba(0, 43, 130, 0.05);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table-striped > tbody > tr:nth-of-type(odd) > td[b-h4hyk800ss] {
    background-color: rgba(246, 246, 246, 0.5);
}

.table-bordered[b-h4hyk800ss] {
    border: 1px solid rgba(204, 204, 204, 0.3);
}

.table-bordered th[b-h4hyk800ss],
.table-bordered td[b-h4hyk800ss] {
    border: 1px solid rgba(204, 204, 204, 0.2);
}

.table-primary[b-h4hyk800ss] {
    background-color: rgba(0, 43, 130, 0.1);
    color: rgba(0, 31, 87, 1);
}

/* Badge Styling */
.badge[b-h4hyk800ss] {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

/* Edit Button Styling */
.btn-outline-primary[b-h4hyk800ss] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.btn-outline-primary:hover[b-h4hyk800ss] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 43, 130, 0.2);
}

/* Pagination Controls */
.pagination-controls[b-h4hyk800ss] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid rgba(204, 204, 204, 0.3);
    margin-top: 16px;
}

.pagination-info[b-h4hyk800ss] {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(0, 31, 87, 1);
}

.pagination-buttons[b-h4hyk800ss] {
    display: flex;
    gap: 8px;
}

.pagination-buttons .btn[b-h4hyk800ss] {
    min-width: 100px;
}

@media (max-width: 768px) {
    .service-request-admin-form-container[b-h4hyk800ss] {
        padding: 16px;
    }
    
    .form-card[b-h4hyk800ss] {
        max-width: 100%;
    }
    
    .form-card-header[b-h4hyk800ss],
    .form-card-body[b-h4hyk800ss] {
        padding: 20px;
    }
    
    .header-title-row[b-h4hyk800ss] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .form-actions[b-h4hyk800ss] {
        flex-direction: column-reverse;
        width: 100%;
    }
    
    .cancel-btn[b-h4hyk800ss],
    .save-btn[b-h4hyk800ss] {
        width: 100%;
        min-width: unset;
    }
    
    .table[b-h4hyk800ss] {
        font-size: 14px;
    }
    
    .table thead th[b-h4hyk800ss],
    .table tbody td[b-h4hyk800ss] {
        padding: 12px 8px;
    }
    
    .btn-outline-primary span[b-h4hyk800ss] {
        display: none;
    }
    
    .pagination-controls[b-h4hyk800ss] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .pagination-buttons[b-h4hyk800ss] {
        width: 100%;
        justify-content: space-between;
    }
    
    .pagination-buttons .btn[b-h4hyk800ss] {
        flex: 1;
    }
}

/* /Pages/ServiceRequestAdminDepartmentEdit.razor.rz.scp.css */
.service-request-admin-form-container[b-yliot6ywjo] {
    width: 100%;
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Ubuntu', sans-serif;
    background-color: rgba(246, 246, 246, 1);
}

.form-card[b-yliot6ywjo] {
    width: 100%;
    max-width: 500px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.form-card-header[b-yliot6ywjo] {
    padding: 24px 24px 20px 24px;
    border-bottom: 0.5px solid rgba(204, 204, 204, 1);
    background-color: rgba(255, 255, 255, 1);
}

.form-title[b-yliot6ywjo] {
    color: rgba(0, 31, 87, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
}

.form-card-body[b-yliot6ywjo] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-field[b-yliot6ywjo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.field-label[b-yliot6ywjo] {
    color: rgba(20, 20, 20, 1);
    font-size: 16px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
}

.input-wrapper[b-yliot6ywjo] {
    width: 100%;
    min-height: 44px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: rgba(255, 255, 255, 1);
}

.input-wrapper:focus-within[b-yliot6ywjo] {
    border-color: rgba(0, 43, 130, 1);
    box-shadow: 0 0 0 3px rgba(0, 43, 130, 0.1);
}

.form-input[b-yliot6ywjo] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: transparent;
}

.form-input[b-yliot6ywjo]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.form-actions[b-yliot6ywjo] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

.cancel-btn[b-yliot6ywjo],
.save-btn[b-yliot6ywjo] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    height: 44px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.cancel-btn[b-yliot6ywjo] {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(20, 20, 20, 1);
}

.cancel-btn:hover[b-yliot6ywjo] {
    background-color: rgba(246, 246, 246, 1);
    border-color: rgba(179, 179, 179, 1);
}

.save-btn[b-yliot6ywjo] {
    background-color: rgba(0, 43, 130, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
}

.save-btn:hover[b-yliot6ywjo] {
    background-color: rgba(0, 31, 87, 1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 43, 130, 0.2);
}

@media (max-width: 768px) {
    .service-request-admin-form-container[b-yliot6ywjo] {
        padding: 16px;
    }
    
    .form-card[b-yliot6ywjo] {
        max-width: 100%;
    }
    
    .form-card-header[b-yliot6ywjo],
    .form-card-body[b-yliot6ywjo] {
        padding: 20px;
    }
    
    .form-actions[b-yliot6ywjo] {
        flex-direction: column-reverse;
        width: 100%;
    }
    
    .cancel-btn[b-yliot6ywjo],
    .save-btn[b-yliot6ywjo] {
        width: 100%;
        min-width: unset;
    }
}


























/* /Pages/ServiceRequestAdminEnterprise.razor.rz.scp.css */
/* Search toolbar */
.ent-toolbar[b-n9nuvzl2i2] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.ent-search-wrap[b-n9nuvzl2i2] {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.ent-search-icon[b-n9nuvzl2i2] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(134, 134, 134, 1);
    pointer-events: none;
}

.ent-search[b-n9nuvzl2i2] {
    width: 100%;
    height: 40px;
    padding: 8px 12px 8px 38px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: #ffffff;
    box-sizing: border-box;
}

.ent-search:focus[b-n9nuvzl2i2] {
    outline: none;
    border-color: var(--dl-color-default-primary, #001f57);
    box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
}

.ent-search[b-n9nuvzl2i2]::placeholder {
    color: rgba(134, 134, 134, 1);
}
/* /Pages/ServiceRequestAdminEscalationContact.razor.rz.scp.css */
/* Sub-department multi-select panel (Department -> checkboxes).
   Adapted from Components/SeveritySlaMappingPicker.razor.css. */

.ecsd-panel[b-n38udwbjty] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ecsd-panel.is-invalid .ecsd-list[b-n38udwbjty] {
    border-color: #dc2626;
}

.ecsd-search-row[b-n38udwbjty] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ecsd-search[b-n38udwbjty] {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 15px;
    font-family: Ubuntu, sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: transparent;
    box-sizing: border-box;
}

.ecsd-search:disabled[b-n38udwbjty] {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

.ecsd-select-all[b-n38udwbjty] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    font-family: Ubuntu, sans-serif;
    color: var(--dl-color-default-primary, #001f57);
    cursor: pointer;
}

.ecsd-select-all input[b-n38udwbjty] {
    width: 16px;
    height: 16px;
    accent-color: var(--dl-color-default-primary, #001f57);
    cursor: pointer;
}

.ecsd-list[b-n38udwbjty] {
    overflow-y: auto;
    max-height: 320px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    background-color: #fff;
}

.ecsd-item[b-n38udwbjty] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 15px;
    font-family: Ubuntu, sans-serif;
    color: rgba(20, 20, 20, 1);
    border-bottom: 1px solid #f3f4f6;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    margin: 0;
}

.ecsd-item:last-child[b-n38udwbjty] {
    border-bottom: none;
}

.ecsd-item:hover[b-n38udwbjty] {
    background-color: #f5f8ff;
    color: var(--dl-color-default-primary, #001f57);
}

.ecsd-item--selected[b-n38udwbjty] {
    background-color: #eef3ff;
    border-left-color: var(--dl-color-default-primary, #001f57);
    color: var(--dl-color-default-primary, #001f57);
    font-weight: 500;
}

.ecsd-check[b-n38udwbjty] {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--dl-color-default-primary, #001f57);
    cursor: pointer;
    flex-shrink: 0;
}

.ecsd-item-label[b-n38udwbjty] {
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ecsd-empty[b-n38udwbjty] {
    padding: 24px 16px;
    text-align: center;
    font-size: 15px;
    font-family: Ubuntu, sans-serif;
    color: rgba(134, 134, 134, 1);
}
/* /Pages/ServiceRequestAdminEscalationContacts.razor.rz.scp.css */
.ec-toolbar[b-jidjudxpva] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.ec-search-wrap[b-jidjudxpva] {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.ec-search-icon[b-jidjudxpva] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(134, 134, 134, 1);
    pointer-events: none;
}

.ec-search[b-jidjudxpva] {
    width: 100%;
    height: 40px;
    padding: 8px 12px 8px 38px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: #ffffff;
    box-sizing: border-box;
}

.ec-search:focus[b-jidjudxpva] {
    outline: none;
    border-color: var(--dl-color-default-primary, #001f57);
    box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
}

.ec-search[b-jidjudxpva]::placeholder {
    color: rgba(134, 134, 134, 1);
}
/* /Pages/ServiceRequestAdminIssue.razor.rz.scp.css */
.service-request-admin-form-container[b-anild1ficv] {
    width: 100%;
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Ubuntu', sans-serif;
    background-color: rgba(246, 246, 246, 1);
}

.form-card[b-anild1ficv] {
    width: 100%;
    max-width: 1000px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Wider than the global .form-card.is-form (600px) so long SLA names are readable. */
.form-card.is-form[b-anild1ficv] {
    max-width: 1000px;
}

.form-card-header[b-anild1ficv] {
    padding: 24px 24px 20px 24px;
    border-bottom: 0.5px solid rgba(204, 204, 204, 1);
    background-color: rgba(255, 255, 255, 1);
}

.form-title[b-anild1ficv] {
    color: rgba(0, 31, 87, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
}

.form-card-body[b-anild1ficv] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-fields-grid[b-anild1ficv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-field[b-anild1ficv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-field.full-width[b-anild1ficv] {
    grid-column: 1 / -1;
}

.field-label[b-anild1ficv] {
    color: rgba(20, 20, 20, 1);
    font-size: 16px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    display: flex;
    gap: 4px;
}

.label-text[b-anild1ficv] {
    font-weight: 500;
}

.optional-text[b-anild1ficv] {
    font-weight: 400;
    color: rgba(134, 134, 134, 1);
}

.input-wrapper[b-anild1ficv],
.textarea-wrapper[b-anild1ficv],
.dropdown-wrapper[b-anild1ficv] {
    width: 100%;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-wrapper:focus-within[b-anild1ficv],
.textarea-wrapper:focus-within[b-anild1ficv],
.dropdown-wrapper:focus-within[b-anild1ficv] {
    border-color: rgba(0, 43, 130, 1);
    box-shadow: 0 0 0 3px rgba(0, 43, 130, 0.1);
}

.input-wrapper[b-anild1ficv] {
    height: 40px;
}

.textarea-wrapper[b-anild1ficv] {
    min-height: 100px;
    align-items: flex-start;
}

.form-input[b-anild1ficv] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: transparent;
}

.form-input[b-anild1ficv]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.form-select[b-anild1ficv] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 40px 0 16px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px 24px;
}

.form-select option[b-anild1ficv] {
    color: rgba(20, 20, 20, 1);
    background-color: rgba(255, 255, 255, 1);
    padding: 12px 16px;
}

.form-select option[value=""][b-anild1ficv] {
    color: rgba(134, 134, 134, 1);
}

.form-textarea[b-anild1ficv] {
    width: 100%;
    min-height: 100px;
    border: none;
    outline: none;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: transparent;
    resize: vertical;
}

.form-textarea[b-anild1ficv]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.dropdown-wrapper[b-anild1ficv] {
    position: relative;
    cursor: pointer;
    height: 40px;
}

.dropdown-wrapper.subdepartment-dropdown-container[b-anild1ficv] {
    overflow: visible;
}

.dropdown-wrapper.sla-dropdown-container[b-anild1ficv] {
    overflow: visible;
}

/* SubDepartment Autocomplete Styles */
.subdepartment-autocomplete-wrapper[b-anild1ficv] {
    position: relative;
    width: 100%;
    height: 100%;
}

.subdepartment-search-input[b-anild1ficv] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: transparent;
}

.subdepartment-search-input:focus[b-anild1ficv] {
    outline: none;
}

.subdepartment-search-input:disabled[b-anild1ficv] {
    background-color: rgba(246, 246, 246, 1);
    color: rgba(134, 134, 134, 1);
    cursor: not-allowed;
}

.subdepartment-search-input[b-anild1ficv]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.subdepartment-dropdown[b-anild1ficv] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    box-shadow: 0px 4px 10px 1px rgba(0, 15, 41, 0.08);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}

.subdepartment-dropdown-item[b-anild1ficv] {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    transition: background-color 0.15s ease;
    border-bottom: 1px solid rgba(246, 246, 246, 1);
}

.subdepartment-dropdown-item:last-child[b-anild1ficv] {
    border-bottom: none;
}

.subdepartment-dropdown-item:hover[b-anild1ficv] {
    background-color: rgba(246, 246, 246, 1);
    color: rgba(0, 31, 87, 1);
}

.subdepartment-dropdown-item:active[b-anild1ficv] {
    background-color: rgba(243, 246, 255, 1);
}

.dropdown-display[b-anild1ficv] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.dropdown-display span[b-anild1ficv] {
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
}

.dropdown-display span.placeholder[b-anild1ficv] {
    color: rgba(134, 134, 134, 1);
}

.dropdown-display svg[b-anild1ficv] {
    width: 24px;
    height: 24px;
    transition: transform 0.2s;
    color: rgba(20, 20, 20, 1);
}

.dropdown-display svg.rotate[b-anild1ficv] {
    transform: rotate(180deg);
}

.dropdown-menu[b-anild1ficv] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    box-shadow: 0px 4px 10px 1px rgba(0, 15, 41, 0.08);
    z-index: 100;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-header-item[b-anild1ficv] {
    padding: 8px 16px;
    background-color: rgba(243, 246, 255, 1);
    color: rgba(134, 134, 134, 1);
    font-size: 16px;
    font-style: italic;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
}

.dropdown-item[b-anild1ficv] {
    padding: 12px 16px;
    color: rgba(20, 20, 20, 1);
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s;
    opacity: 0.8;
}

.dropdown-item:hover[b-anild1ficv] {
    background-color: rgba(246, 246, 246, 1);
}

.form-actions[b-anild1ficv] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

.cancel-btn[b-anild1ficv],
.save-btn[b-anild1ficv] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    height: auto;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    font-size: 20px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.cancel-btn[b-anild1ficv] {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(20, 20, 20, 1);
}

.cancel-btn:hover[b-anild1ficv] {
    background-color: rgba(246, 246, 246, 1);
    border-color: rgba(179, 179, 179, 1);
}

.save-btn[b-anild1ficv] {
    background-color: rgba(0, 31, 87, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
}

.save-btn:hover[b-anild1ficv] {
    background-color: rgba(0, 23, 65, 1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 31, 87, 0.2);
}

@media (max-width: 768px) {
    .service-request-admin-form-container[b-anild1ficv] {
        padding: 16px;
    }
    
    .form-card[b-anild1ficv] {
        max-width: 100%;
    }
    
    .form-card-header[b-anild1ficv],
    .form-card-body[b-anild1ficv] {
        padding: 20px;
    }
    
    .form-fields-grid[b-anild1ficv] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .form-actions[b-anild1ficv] {
        flex-direction: column-reverse;
        width: 100%;
    }
    
    .cancel-btn[b-anild1ficv],
    .save-btn[b-anild1ficv] {
        width: 100%;
        min-width: unset;
    }
}


/* Moved from inline <style> in ServiceRequestAdminIssue.razor — picker trigger affordance */
.picker-trigger[b-anild1ficv] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-right: 36px;
}

.picker-trigger:not(.picker-trigger--disabled):hover[b-anild1ficv],
.picker-trigger:not(.picker-trigger--disabled):focus-visible[b-anild1ficv] {
    border-color: #374151;
    background-color: #f5f7fb;
    outline: none;
}

.picker-trigger--disabled[b-anild1ficv] {
    background-color: #f1f1f1;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

.picker-value[b-anild1ficv] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-value.placeholder[b-anild1ficv] {
    color: #9ca3af;
}

.picker-caret[b-anild1ficv] {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 9px;
    height: 9px;
    border: solid #374151;
    border-width: 0 2px 2px 0;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}
/* /Pages/ServiceRequestAdminIssues.razor.rz.scp.css */
.service-request-admin-form-container[b-faqu5ndht7] {
    width: 100%;
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    font-family: 'Ubuntu', sans-serif;
    background-color: rgba(246, 246, 246, 1);
}

.form-card[b-faqu5ndht7] {
    width: 100%;
    max-width: 1200px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.form-card-header[b-faqu5ndht7] {
    padding: 24px 24px 20px 24px;
    border-bottom: 0.5px solid rgba(204, 204, 204, 1);
    background-color: rgba(255, 255, 255, 1);
}

.header-title-row[b-faqu5ndht7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.form-title[b-faqu5ndht7] {
    color: rgba(0, 31, 87, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
}

.form-actions[b-faqu5ndht7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.done-btn[b-faqu5ndht7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.done-btn:hover[b-faqu5ndht7] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 43, 130, 0.2);
}

.create-issue-btn[b-faqu5ndht7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.create-issue-btn svg[b-faqu5ndht7] {
    flex-shrink: 0;
}

.create-issue-btn:hover[b-faqu5ndht7] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 43, 130, 0.2);
}

.form-card-body[b-faqu5ndht7] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Bootstrap Table Enhancements */
.table[b-faqu5ndht7] {
    margin-bottom: 0;
    font-size: 15px;
}

.table thead th[b-faqu5ndht7] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(0, 43, 130, 0.2);
    padding: 14px 16px;
}

.table tbody td[b-faqu5ndht7] {
    padding: 16px;
    vertical-align: middle;
}

.table-hover tbody tr:hover[b-faqu5ndht7] {
    background-color: rgba(0, 43, 130, 0.05);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table-striped > tbody > tr:nth-of-type(odd) > td[b-faqu5ndht7] {
    background-color: rgba(246, 246, 246, 0.5);
}

.table-bordered[b-faqu5ndht7] {
    border: 1px solid rgba(204, 204, 204, 0.3);
}

.table-bordered th[b-faqu5ndht7],
.table-bordered td[b-faqu5ndht7] {
    border: 1px solid rgba(204, 204, 204, 0.2);
}

.table-primary[b-faqu5ndht7] {
    background-color: rgba(0, 43, 130, 0.1);
    color: rgba(0, 31, 87, 1);
}

/* Badge Styling */
.badge[b-faqu5ndht7] {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

/* Edit Button Styling */
.btn-outline-primary[b-faqu5ndht7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.btn-outline-primary:hover[b-faqu5ndht7] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 43, 130, 0.2);
}

/* SLA Cell */
.sla-cell[b-faqu5ndht7] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.sla-name[b-faqu5ndht7] {
    font-weight: 500;
    color: rgba(0, 31, 87, 1);
}

.sla-value[b-faqu5ndht7] {
    font-size: 12px;
    color: #4a5568;
}

/* Description Cell - truncate long text */
.description-cell[b-faqu5ndht7] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
    word-break: break-word;
}

/* Search toolbar */
.issue-toolbar[b-faqu5ndht7] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.issue-search-wrap[b-faqu5ndht7] {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.issue-search-icon[b-faqu5ndht7] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(134, 134, 134, 1);
    pointer-events: none;
}

.issue-search[b-faqu5ndht7] {
    width: 100%;
    height: 40px;
    padding: 8px 12px 8px 38px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: #ffffff;
    box-sizing: border-box;
}

.issue-search:focus[b-faqu5ndht7] {
    outline: none;
    border-color: var(--dl-color-default-primary, #001f57);
    box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
}

.issue-search[b-faqu5ndht7]::placeholder {
    color: rgba(134, 134, 134, 1);
}

/* Issue card grid */
/* Shared column template for the header strip + each row-card */
.issue-list[b-faqu5ndht7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.issue-col-head[b-faqu5ndht7],
.issue-row[b-faqu5ndht7] {
    display: grid;
    grid-template-columns: 1.2fr 2fr 1.2fr 2.5fr 1.3fr 120px;
    align-items: center;
    gap: 16px;
}

.issue-col-head[b-faqu5ndht7] {
    padding: 4px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(134, 134, 134, 1);
}

.issue-col-head .issue-col-actions[b-faqu5ndht7] {
    text-align: center;
}

.issue-row[b-faqu5ndht7] {
    background-color: #ffffff;
    border: 1px solid rgba(204, 204, 204, 0.7);
    border-radius: 10px;
    padding: 10px 16px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.issue-row:hover[b-faqu5ndht7] {
    box-shadow: 0 2px 8px rgba(0, 31, 87, 0.08);
    border-color: rgba(0, 31, 87, 0.25);
}

.issue-row--sealed[b-faqu5ndht7] {
    background-color: #fafbff;
    border-color: rgba(0, 31, 87, 0.2);
}

.issue-cell[b-faqu5ndht7] {
    font-size: 13px;
    color: rgba(20, 20, 20, 1);
    min-width: 0;
}

.issue-cell--title[b-faqu5ndht7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.issue-row-title[b-faqu5ndht7] {
    font-weight: 600;
    font-size: 14px;
    color: rgba(0, 31, 87, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.issue-cell--code[b-faqu5ndht7] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--dl-color-default-primary, #001f57);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.issue-row-badges[b-faqu5ndht7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.issue-badge[b-faqu5ndht7] {
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    white-space: nowrap;
}

.issue-badge--active[b-faqu5ndht7] {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.issue-badge--inactive[b-faqu5ndht7] {
    background-color: rgba(108, 117, 125, 0.15);
    color: #6c757d;
}

.issue-badge--sealed[b-faqu5ndht7] {
    background-color: rgba(0, 31, 87, 0.12);
    color: rgba(0, 31, 87, 1);
}

.issue-cell--dept[b-faqu5ndht7],
.issue-cell--desc[b-faqu5ndht7],
.issue-cell--map[b-faqu5ndht7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.issue-cell--desc[b-faqu5ndht7] {
    color: #4a5568;
}

.issue-cell--map[b-faqu5ndht7] {
    color: rgba(0, 31, 87, 0.85);
    font-weight: 500;
}

.issue-cell--actions[b-faqu5ndht7] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.issue-icon-btn[b-faqu5ndht7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    border: 0.5px solid rgba(204, 204, 204, 1);
    background-color: #ffffff;
    color: rgba(0, 31, 87, 1);
    transition: all 0.15s ease;
}

.issue-icon-btn:hover:not(:disabled)[b-faqu5ndht7] {
    background-color: #f5f8ff;
    border-color: rgba(0, 31, 87, 0.4);
}

.issue-icon-btn--seal[b-faqu5ndht7] {
    color: #ffffff;
    background-color: var(--dl-color-default-accent, #002b82);
    border-color: transparent;
}

.issue-icon-btn--seal:hover:not(:disabled)[b-faqu5ndht7] {
    background-color: rgba(0, 31, 92, 1);
}

.issue-icon-btn--sealed[b-faqu5ndht7] {
    color: rgba(0, 31, 87, 0.6);
    background-color: rgba(0, 31, 87, 0.08);
    border-color: rgba(0, 31, 87, 0.2);
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .issue-col-head[b-faqu5ndht7] {
        display: none;
    }

    .issue-row[b-faqu5ndht7] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .issue-cell--actions[b-faqu5ndht7] {
        justify-content: flex-start;
    }
}

/* Pagination Controls */
.pagination-controls[b-faqu5ndht7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid rgba(204, 204, 204, 0.3);
    margin-top: 16px;
}

.pagination-info[b-faqu5ndht7] {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(0, 31, 87, 1);
}

.pagination-buttons[b-faqu5ndht7] {
    display: flex;
    gap: 8px;
}

.pagination-buttons .btn[b-faqu5ndht7] {
    min-width: 100px;
}

/* Responsive */
@media (max-width: 768px) {
    .service-request-admin-form-container[b-faqu5ndht7] {
        padding: 16px;
    }
    
    .form-card[b-faqu5ndht7] {
        max-width: 100%;
    }
    
    .form-card-header[b-faqu5ndht7],
    .form-card-body[b-faqu5ndht7] {
        padding: 20px;
    }
    
    .header-title-row[b-faqu5ndht7] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .issue-grid[b-faqu5ndht7] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-actions[b-faqu5ndht7] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .done-btn[b-faqu5ndht7],
    .create-issue-btn[b-faqu5ndht7] {
        width: 100%;
        justify-content: center;
    }

    .table[b-faqu5ndht7] {
        font-size: 14px;
    }

    .table thead th[b-faqu5ndht7],
    .table tbody td[b-faqu5ndht7] {
        padding: 12px 8px;
    }

    .btn-outline-primary span[b-faqu5ndht7] {
        display: none;
    }

    .description-cell[b-faqu5ndht7] {
        -webkit-line-clamp: 1;
        max-width: 200px;
    }

    .pagination-controls[b-faqu5ndht7] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .pagination-buttons[b-faqu5ndht7] {
        width: 100%;
        justify-content: space-between;
    }
    
    .pagination-buttons .btn[b-faqu5ndht7] {
        flex: 1;
    }
}
































/* /Pages/ServiceRequestAdminLocation.razor.rz.scp.css */
.service-request-admin-form-container[b-c1xd2gmlv8] {
    width: 100%;
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Ubuntu', sans-serif;
    background-color: rgba(246, 246, 246, 1);
}

.form-card[b-c1xd2gmlv8] {
    width: 100%;
    max-width: 500px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.form-card-header[b-c1xd2gmlv8] {
    padding: 24px 24px 20px 24px;
    border-bottom: 0.5px solid rgba(204, 204, 204, 1);
    background-color: rgba(255, 255, 255, 1);
}

.form-title[b-c1xd2gmlv8] {
    color: rgba(0, 31, 87, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
}

.form-card-body[b-c1xd2gmlv8] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-field[b-c1xd2gmlv8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.field-label[b-c1xd2gmlv8] {
    color: rgba(20, 20, 20, 1);
    font-size: 16px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
}

.input-wrapper[b-c1xd2gmlv8] {
    width: 100%;
    height: 44px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: rgba(255, 255, 255, 1);
}

.input-wrapper:focus-within[b-c1xd2gmlv8] {
    border-color: rgba(0, 43, 130, 1);
    box-shadow: 0 0 0 3px rgba(0, 43, 130, 0.1);
}

.form-input[b-c1xd2gmlv8] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: transparent;
}

.form-input[b-c1xd2gmlv8]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.form-actions[b-c1xd2gmlv8] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

.cancel-btn[b-c1xd2gmlv8],
.save-btn[b-c1xd2gmlv8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    height: 44px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.cancel-btn[b-c1xd2gmlv8] {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(20, 20, 20, 1);
}

.cancel-btn:hover[b-c1xd2gmlv8] {
    background-color: rgba(246, 246, 246, 1);
    border-color: rgba(179, 179, 179, 1);
}

.save-btn[b-c1xd2gmlv8] {
    background-color: rgba(0, 43, 130, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
}

.save-btn:hover[b-c1xd2gmlv8] {
    background-color: rgba(0, 31, 87, 1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 43, 130, 0.2);
}

@media (max-width: 768px) {
    .service-request-admin-form-container[b-c1xd2gmlv8] {
        padding: 16px;
    }
    
    .form-card[b-c1xd2gmlv8] {
        max-width: 100%;
    }
    
    .form-card-header[b-c1xd2gmlv8],
    .form-card-body[b-c1xd2gmlv8] {
        padding: 20px;
    }
    
    .form-actions[b-c1xd2gmlv8] {
        flex-direction: column-reverse;
        width: 100%;
    }
    
    .cancel-btn[b-c1xd2gmlv8],
    .save-btn[b-c1xd2gmlv8] {
        width: 100%;
        min-width: unset;
    }
}

/* /Pages/ServiceRequestAdminLocations.razor.rz.scp.css */
.service-request-admin-form-container[b-nwghgwxn6h] {
    width: 100%;
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    font-family: 'Ubuntu', sans-serif;
    background-color: rgba(246, 246, 246, 1);
}

.form-card[b-nwghgwxn6h] {
    width: 100%;
    max-width: 1200px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.form-card-header[b-nwghgwxn6h] {
    padding: 24px 24px 20px 24px;
    border-bottom: 0.5px solid rgba(204, 204, 204, 1);
    background-color: rgba(255, 255, 255, 1);
}

.header-title-row[b-nwghgwxn6h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.form-title[b-nwghgwxn6h] {
    color: rgba(0, 31, 87, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
}

.create-location-btn[b-nwghgwxn6h] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.create-location-btn:hover[b-nwghgwxn6h] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 43, 130, 0.2);
}

.create-location-btn svg[b-nwghgwxn6h] {
    flex-shrink: 0;
}

.form-card-body[b-nwghgwxn6h] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Bootstrap Table Enhancements */
.table[b-nwghgwxn6h] {
    margin-bottom: 0;
    font-size: 15px;
}

.table thead th[b-nwghgwxn6h] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(0, 43, 130, 0.2);
    padding: 14px 16px;
}

.table tbody td[b-nwghgwxn6h] {
    padding: 16px;
    vertical-align: middle;
}

.table-hover tbody tr:hover[b-nwghgwxn6h] {
    background-color: rgba(0, 43, 130, 0.05);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table-striped > tbody > tr:nth-of-type(odd) > td[b-nwghgwxn6h] {
    background-color: rgba(246, 246, 246, 0.5);
}

.table-bordered[b-nwghgwxn6h] {
    border: 1px solid rgba(204, 204, 204, 0.3);
}

.table-bordered th[b-nwghgwxn6h],
.table-bordered td[b-nwghgwxn6h] {
    border: 1px solid rgba(204, 204, 204, 0.2);
}

.table-primary[b-nwghgwxn6h] {
    background-color: rgba(0, 43, 130, 0.1);
    color: rgba(0, 31, 87, 1);
}

/* Badge Styling */
.badge[b-nwghgwxn6h] {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

/* Edit Button Styling */
.btn-outline-primary[b-nwghgwxn6h] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.btn-outline-primary:hover[b-nwghgwxn6h] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 43, 130, 0.2);
}

/* Pagination Controls */
.pagination-controls[b-nwghgwxn6h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid rgba(204, 204, 204, 0.3);
    margin-top: 16px;
}

.pagination-info[b-nwghgwxn6h] {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(0, 31, 87, 1);
}

.pagination-buttons[b-nwghgwxn6h] {
    display: flex;
    gap: 8px;
}

.pagination-buttons .btn[b-nwghgwxn6h] {
    min-width: 100px;
}

/* Responsive */
@media (max-width: 768px) {
    .service-request-admin-form-container[b-nwghgwxn6h] {
        padding: 16px;
    }
    
    .form-card[b-nwghgwxn6h] {
        max-width: 100%;
    }
    
    .form-card-header[b-nwghgwxn6h],
    .form-card-body[b-nwghgwxn6h] {
        padding: 20px;
    }
    
    .header-title-row[b-nwghgwxn6h] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .create-location-btn[b-nwghgwxn6h] {
        width: 100%;
        justify-content: center;
    }
    
    .table[b-nwghgwxn6h] {
        font-size: 14px;
    }
    
    .table thead th[b-nwghgwxn6h],
    .table tbody td[b-nwghgwxn6h] {
        padding: 12px 8px;
    }
    
    .btn-outline-primary span[b-nwghgwxn6h] {
        display: none;
    }
    
    .pagination-controls[b-nwghgwxn6h] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .pagination-buttons[b-nwghgwxn6h] {
        width: 100%;
        justify-content: space-between;
    }
    
    .pagination-buttons .btn[b-nwghgwxn6h] {
        flex: 1;
    }
}

/* Search toolbar */
.loc-toolbar[b-nwghgwxn6h] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.loc-search-wrap[b-nwghgwxn6h] {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.loc-search-icon[b-nwghgwxn6h] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(134, 134, 134, 1);
    pointer-events: none;
}

.loc-search[b-nwghgwxn6h] {
    width: 100%;
    height: 40px;
    padding: 8px 12px 8px 38px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: #ffffff;
    box-sizing: border-box;
}

.loc-search:focus[b-nwghgwxn6h] {
    outline: none;
    border-color: var(--dl-color-default-primary, #001f57);
    box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
}

.loc-search[b-nwghgwxn6h]::placeholder {
    color: rgba(134, 134, 134, 1);
}
/* /Pages/ServiceRequestAdminSla.razor.rz.scp.css */
.service-request-admin-form-container[b-j25a7oxxa0] {
    width: 100%;
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Ubuntu', sans-serif;
    background-color: rgba(246, 246, 246, 1);
}

.form-card[b-j25a7oxxa0] {
    width: 100%;
    max-width: 600px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.form-card-header[b-j25a7oxxa0] {
    padding: 24px 24px 20px 24px;
    border-bottom: 0.5px solid rgba(204, 204, 204, 1);
    background-color: rgba(255, 255, 255, 1);
}

.form-title[b-j25a7oxxa0] {
    color: rgba(0, 31, 87, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
}

.form-card-body[b-j25a7oxxa0] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-fields-grid[b-j25a7oxxa0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-field[b-j25a7oxxa0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-field.full-width[b-j25a7oxxa0] {
    grid-column: 1 / -1;
}

.field-label[b-j25a7oxxa0] {
    color: rgba(20, 20, 20, 1);
    font-size: 16px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    display: flex;
    gap: 4px;
}

.label-text[b-j25a7oxxa0] {
    font-weight: 500;
}

.optional-text[b-j25a7oxxa0] {
    font-weight: 400;
    color: rgba(134, 134, 134, 1);
}

.form-hint[b-j25a7oxxa0] {
    margin: 8px 0 0 28px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(75, 85, 99, 1);
    font-family: 'Ubuntu', sans-serif;
    line-height: 1.4;
}

.input-wrapper[b-j25a7oxxa0],
.textarea-wrapper[b-j25a7oxxa0],
.dropdown-wrapper[b-j25a7oxxa0] {
    width: 100%;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-wrapper:focus-within[b-j25a7oxxa0],
.textarea-wrapper:focus-within[b-j25a7oxxa0],
.dropdown-wrapper:focus-within[b-j25a7oxxa0] {
    border-color: rgba(0, 43, 130, 1);
    box-shadow: 0 0 0 3px rgba(0, 43, 130, 0.1);
}

.input-wrapper[b-j25a7oxxa0] {
    height: 40px;
}

.textarea-wrapper[b-j25a7oxxa0] {
    min-height: 100px;
    align-items: flex-start;
}

.form-input[b-j25a7oxxa0] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: transparent;
}

.form-input[b-j25a7oxxa0]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.form-textarea[b-j25a7oxxa0] {
    width: 100%;
    min-height: 100px;
    border: none;
    outline: none;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: transparent;
    resize: vertical;
}

.form-textarea[b-j25a7oxxa0]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.form-actions[b-j25a7oxxa0] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

.cancel-btn[b-j25a7oxxa0],
.save-btn[b-j25a7oxxa0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    height: auto;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    font-size: 20px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.cancel-btn[b-j25a7oxxa0] {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(20, 20, 20, 1);
}

.cancel-btn:hover[b-j25a7oxxa0] {
    background-color: rgba(246, 246, 246, 1);
    border-color: rgba(179, 179, 179, 1);
}

.save-btn[b-j25a7oxxa0] {
    background-color: rgba(0, 31, 87, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
}

.save-btn:hover[b-j25a7oxxa0] {
    background-color: rgba(0, 23, 65, 1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 31, 87, 0.2);
}

.save-btn:disabled[b-j25a7oxxa0] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.input-wrapper.is-invalid[b-j25a7oxxa0],
.textarea-wrapper.is-invalid[b-j25a7oxxa0],
.dropdown-wrapper.is-invalid[b-j25a7oxxa0] {
    border-color: rgba(220, 38, 38, 1);
    background-color: rgba(220, 38, 38, 0.04);
}

.input-wrapper.is-invalid:focus-within[b-j25a7oxxa0],
.textarea-wrapper.is-invalid:focus-within[b-j25a7oxxa0],
.dropdown-wrapper.is-invalid:focus-within[b-j25a7oxxa0] {
    border-color: rgba(220, 38, 38, 1);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

@media (max-width: 768px) {
    .service-request-admin-form-container[b-j25a7oxxa0] {
        padding: 16px;
    }
    
    .form-card[b-j25a7oxxa0] {
        max-width: 100%;
    }
    
    .form-card-header[b-j25a7oxxa0],
    .form-card-body[b-j25a7oxxa0] {
        padding: 20px;
    }
    
    .form-fields-grid[b-j25a7oxxa0] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .form-actions[b-j25a7oxxa0] {
        flex-direction: column-reverse;
        width: 100%;
    }
    
    .cancel-btn[b-j25a7oxxa0],
    .save-btn[b-j25a7oxxa0] {
        width: 100%;
        min-width: unset;
    }
}
/* /Pages/ServiceRequestAdminSlaConfiguration.razor.rz.scp.css */
/* Wider than the default 600px is-form card so section titles and labels aren't cramped. */
.form-card.is-form.sla-config-card[b-vsibv1548v] { max-width: 920px; }

.config-section[b-vsibv1548v] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px 24px 24px;
    margin-bottom: 24px;
    background: #fafafa;
}
.config-section-header[b-vsibv1548v] { margin-bottom: 16px; }
.config-section-title[b-vsibv1548v] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
}
.config-section-desc[b-vsibv1548v] {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: #6b7280;
}
.working-days-row[b-vsibv1548v] { display: flex; flex-wrap: wrap; gap: 16px; }
.day-check[b-vsibv1548v] { display: inline-flex; align-items: center; gap: 6px; }
.inline-value-unit[b-vsibv1548v] { display: flex; gap: 8px; }
.inline-value-unit .form-input[b-vsibv1548v] { flex: 1; }

/* Spans the full grid width so the reorder list isn't squeezed into one column. */
.form-field-full[b-vsibv1548v] { grid-column: 1 / -1; }

.reviewer-order-list[b-vsibv1548v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 420px;
}
.reviewer-order-row[b-vsibv1548v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.reviewer-order-rank[b-vsibv1548v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.8rem;
    font-weight: 600;
    flex: 0 0 auto;
}
.reviewer-order-label[b-vsibv1548v] {
    flex: 1;
    font-size: 0.9rem;
    color: #1f2937;
}
.reviewer-order-controls[b-vsibv1548v] { display: inline-flex; gap: 4px; }
.reviewer-order-btn[b-vsibv1548v] {
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #374151;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    line-height: 1;
    cursor: pointer;
    font-size: 0.75rem;
}
.reviewer-order-btn:hover:not(:disabled)[b-vsibv1548v] { background: #eef2ff; border-color: #a5b4fc; }
.reviewer-order-btn:disabled[b-vsibv1548v] { opacity: 0.4; cursor: not-allowed; }
/* /Pages/ServiceRequestAdminSlas.razor.rz.scp.css */
.service-request-admin-form-container[b-yp07u151qf] {
    width: 100%;
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    font-family: 'Ubuntu', sans-serif;
    background-color: rgba(246, 246, 246, 1);
}

.form-card[b-yp07u151qf] {
    width: 100%;
    max-width: 1200px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.form-card-header[b-yp07u151qf] {
    padding: 24px 24px 20px 24px;
    border-bottom: 0.5px solid rgba(204, 204, 204, 1);
    background-color: rgba(255, 255, 255, 1);
}

.header-title-row[b-yp07u151qf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.form-title[b-yp07u151qf] {
    color: rgba(0, 31, 87, 1);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
}

.done-btn[b-yp07u151qf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.done-btn:hover[b-yp07u151qf] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 43, 130, 0.2);
}

.form-card-body[b-yp07u151qf] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Bootstrap Table Enhancements */
.table[b-yp07u151qf] {
    margin-bottom: 0;
    font-size: 15px;
}

.table thead th[b-yp07u151qf] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(0, 43, 130, 0.2);
    padding: 14px 16px;
}

.table tbody td[b-yp07u151qf] {
    padding: 16px;
    vertical-align: middle;
}

.table-hover tbody tr:hover[b-yp07u151qf] {
    background-color: rgba(0, 43, 130, 0.05);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table-striped > tbody > tr:nth-of-type(odd) > td[b-yp07u151qf] {
    background-color: rgba(246, 246, 246, 0.5);
}

.table-bordered[b-yp07u151qf] {
    border: 1px solid rgba(204, 204, 204, 0.3);
}

.table-bordered th[b-yp07u151qf],
.table-bordered td[b-yp07u151qf] {
    border: 1px solid rgba(204, 204, 204, 0.2);
}

.table-primary[b-yp07u151qf] {
    background-color: rgba(0, 43, 130, 0.1);
    color: rgba(0, 31, 87, 1);
}

/* Pagination Controls */
.pagination-controls[b-yp07u151qf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid rgba(204, 204, 204, 0.3);
    margin-top: 16px;
}

.pagination-info[b-yp07u151qf] {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(0, 31, 87, 1);
}

.pagination-buttons[b-yp07u151qf] {
    display: flex;
    gap: 8px;
}

.pagination-buttons .btn[b-yp07u151qf] {
    min-width: 100px;
}

/* Responsive */
@media (max-width: 768px) {
    .service-request-admin-form-container[b-yp07u151qf] {
        padding: 16px;
    }
    
    .form-card[b-yp07u151qf] {
        max-width: 100%;
    }
    
    .form-card-header[b-yp07u151qf],
    .form-card-body[b-yp07u151qf] {
        padding: 20px;
    }
    
    .header-title-row[b-yp07u151qf] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .done-btn[b-yp07u151qf] {
        width: 100%;
        justify-content: center;
    }
    
    .table[b-yp07u151qf] {
        font-size: 14px;
    }
    
    .table thead th[b-yp07u151qf],
    .table tbody td[b-yp07u151qf] {
        padding: 12px 8px;
    }
    
    .pagination-controls[b-yp07u151qf] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .pagination-buttons[b-yp07u151qf] {
        width: 100%;
        justify-content: space-between;
    }
    
    .pagination-buttons .btn[b-yp07u151qf] {
        flex: 1;
    }
}

/* Moved from inline <style> in ServiceRequestAdminSlas.razor */
.sla-search-group[b-yp07u151qf] { max-width: 360px; }
/* /Pages/ServiceRequestAdminSubDepartment.razor.rz.scp.css */
/* Search toolbar */
.subdept-toolbar[b-e4b0vbdgmy] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.subdept-search-wrap[b-e4b0vbdgmy] {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.subdept-search-icon[b-e4b0vbdgmy] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(134, 134, 134, 1);
    pointer-events: none;
}

.subdept-search[b-e4b0vbdgmy] {
    width: 100%;
    height: 40px;
    padding: 8px 12px 8px 38px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: #ffffff;
    box-sizing: border-box;
}

.subdept-search:focus[b-e4b0vbdgmy] {
    outline: none;
    border-color: var(--dl-color-default-primary, #001f57);
    box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
}

.subdept-search[b-e4b0vbdgmy]::placeholder {
    color: rgba(134, 134, 134, 1);
}
/* /Pages/ServiceRequestAdminSubDepartmentEdit.razor.rz.scp.css */
/* Picker trigger for the HOD (LFZ user) field. Mirrors ServiceRequestAdminEscalationContact.razor.css
   — scoped CSS is per-component, so the rules are duplicated here rather than shared. */
.picker-trigger[b-ju56n6fz77] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-right: 36px; /* room for the caret */
}

.picker-trigger:not(.picker-trigger--disabled):hover[b-ju56n6fz77],
.picker-trigger:not(.picker-trigger--disabled):focus-visible[b-ju56n6fz77] {
    border-color: #374151;
    background-color: #f5f7fb;
    outline: none;
}

.picker-trigger--disabled[b-ju56n6fz77] {
    background-color: #f1f1f1;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

.picker-value[b-ju56n6fz77] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-value.placeholder[b-ju56n6fz77] {
    color: #9ca3af;
}

.picker-caret[b-ju56n6fz77] {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 9px;
    height: 9px;
    border: solid #374151;
    border-width: 0 2px 2px 0;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}
/* /Pages/ServiceRequestAdminSurveyAssignments.razor.rz.scp.css */
.assign-subtitle[b-gx2w7abxb2] {
    margin: 0 0 12px 0;
    font-size: 15px;
    font-weight: 500;
    color: rgba(0, 31, 87, 1);
    font-family: 'Ubuntu', sans-serif;
}

.assign-list-header[b-gx2w7abxb2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.assign-list-header .assign-subtitle[b-gx2w7abxb2] {
    margin-bottom: 12px;
}

.assign-picker-row[b-gx2w7abxb2] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.assign-field[b-gx2w7abxb2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}

.assign-field--grow[b-gx2w7abxb2] {
    flex: 1;
}

.assign-label[b-gx2w7abxb2] {
    font-size: 13px;
    font-weight: 500;
    color: #4a5568;
}

.assign-search-row[b-gx2w7abxb2] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.assign-input[b-gx2w7abxb2] {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: #ffffff;
    box-sizing: border-box;
}

.assign-input:focus[b-gx2w7abxb2] {
    outline: none;
    border-color: var(--dl-color-default-primary, #001f57);
    box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
}

/* Enterprise picker trigger — opens the shared SelectionModal (search + paged list).
   Classes are CSS-isolated per page, so this mirrors the escalation-contact page copy. */
.picker-trigger[b-gx2w7abxb2] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-right: 36px; /* room for the caret */
}

.picker-trigger:not(.picker-trigger--disabled):hover[b-gx2w7abxb2],
.picker-trigger:not(.picker-trigger--disabled):focus-visible[b-gx2w7abxb2] {
    border-color: #374151;
    background-color: #f5f7fb;
    outline: none;
}

.picker-trigger--disabled[b-gx2w7abxb2] {
    background-color: #f1f1f1;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

.picker-value[b-gx2w7abxb2] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-value.placeholder[b-gx2w7abxb2] {
    color: #9ca3af;
}

.picker-caret[b-gx2w7abxb2] {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 9px;
    height: 9px;
    border: solid #374151;
    border-width: 0 2px 2px 0;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

/* User multi-select checklist — mirrors the SeveritySlaMappingPicker severity panel. */
.user-pick-search-row[b-gx2w7abxb2] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.user-pick-search[b-gx2w7abxb2] {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 8px 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: #ffffff;
    box-sizing: border-box;
}

.user-pick-search:focus[b-gx2w7abxb2] {
    outline: none;
    border-color: var(--dl-color-default-primary, #001f57);
    box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
}

.user-pick-search[b-gx2w7abxb2]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.user-pick-all[b-gx2w7abxb2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    color: var(--dl-color-default-primary, #001f57);
    cursor: pointer;
}

.user-pick-all input[b-gx2w7abxb2] {
    width: 16px;
    height: 16px;
    accent-color: var(--dl-color-default-primary, #001f57);
    cursor: pointer;
}

.user-pick-list[b-gx2w7abxb2] {
    overflow-y: auto;
    max-height: 320px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    background-color: #ffffff;
}

.user-pick-item[b-gx2w7abxb2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    border-bottom: 1px solid #f3f4f6;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    margin: 0;
}

.user-pick-item:last-child[b-gx2w7abxb2] {
    border-bottom: none;
}

.user-pick-item:hover[b-gx2w7abxb2] {
    background-color: #f5f8ff;
}

.user-pick-item--assigned[b-gx2w7abxb2] {
    background-color: #f1f5ff;
    color: #6b7280;
    cursor: not-allowed;
}

.user-pick-check[b-gx2w7abxb2] {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--dl-color-default-primary, #001f57);
    cursor: pointer;
    flex-shrink: 0;
}

.user-pick-item--assigned .user-pick-check[b-gx2w7abxb2] {
    cursor: not-allowed;
}

.user-pick-label[b-gx2w7abxb2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-pick-name[b-gx2w7abxb2] {
    font-weight: 500;
}

.user-pick-email[b-gx2w7abxb2] {
    font-size: 13px;
    color: #6b7280;
    overflow-wrap: anywhere;
}

.user-pick-empty[b-gx2w7abxb2] {
    padding: 24px 16px;
    text-align: center;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(134, 134, 134, 1);
}

.user-pick-actions[b-gx2w7abxb2] {
    margin-top: 12px;
}
/* /Pages/ServiceRequestAdminSurveyBuilder.razor.rz.scp.css */
/* Step indicator */
.wizard-steps[b-jsjldvs6r2] {
    display: flex;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    flex-wrap: wrap;
}

.wizard-step[b-jsjldvs6r2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 0;
    min-width: 140px;
    padding: .55rem .85rem;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    background: #f8f9fa;
    color: #6c757d;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

.wizard-step:hover[b-jsjldvs6r2] {
    border-color: #adb5bd;
}

.wizard-step-num[b-jsjldvs6r2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #dee2e6;
    color: #495057;
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
}

.wizard-step-label[b-jsjldvs6r2] {
    font-weight: 600;
    font-size: .9rem;
}

.wizard-step.active[b-jsjldvs6r2] {
    border-color: #0d6efd;
    background: #e7f1ff;
    color: #0d6efd;
}

.wizard-step.active .wizard-step-num[b-jsjldvs6r2] {
    background: #0d6efd;
    color: #fff;
}

.wizard-step.done[b-jsjldvs6r2] {
    color: #198754;
    border-color: #a3cfbb;
    background: #f2fbf6;
}

.wizard-step.done .wizard-step-num[b-jsjldvs6r2] {
    background: #198754;
    color: #fff;
}

/* Scroll boxes (replace inline max-height styles) */
.scroll-box[b-jsjldvs6r2] {
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .5rem;
    max-height: 180px;
    overflow: auto;
}

.scroll-box-short[b-jsjldvs6r2] {
    max-height: 140px;
}

.scroll-box-tall[b-jsjldvs6r2] {
    max-height: 240px;
}

/* Index section header in the questions preview — solid navy brand band */
.indice-header[b-jsjldvs6r2] {
    background: var(--primary, #002B82);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .6rem 1rem;
    margin: 1.25rem 0 .75rem;
    border-radius: 6px;
    border-left: 5px solid var(--dl-color-light-blue, #32ADE6);
    box-shadow: 0 1px 3px rgba(0, 43, 130, .25);
}
/* /Pages/ServiceRequestAdminSurveyReport.razor.rz.scp.css */
.indice-header[b-uiya6035zn] {
    background: var(--primary, #002B82);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .6rem 1rem;
    margin: 1.25rem 0 .75rem;
    border-radius: 6px;
    border-left: 5px solid var(--dl-color-light-blue, #32ADE6);
    box-shadow: 0 1px 3px rgba(0, 43, 130, .25);
}

.indice-summary-card[b-uiya6035zn] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

.compare-table th[b-uiya6035zn],
.compare-table td[b-uiya6035zn] {
    font-size: .875rem;
    vertical-align: middle;
}

.matrix-table th[b-uiya6035zn],
.matrix-table td[b-uiya6035zn] {
    font-size: .8125rem;
    vertical-align: middle;
}

.matrix-table thead th[b-uiya6035zn] {
    white-space: nowrap;
}
/* /Pages/ServiceRequestAgingBuckets.razor.rz.scp.css */
.bucket-toggle[b-35nyg2dy1z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(0, 31, 87, 1);
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
}

.bucket-toggle input[b-35nyg2dy1z] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.bucket-row-actions[b-35nyg2dy1z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.bucket-modal-backdrop[b-35nyg2dy1z] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1200;
    padding: 24px;
}

.bucket-modal[b-35nyg2dy1z] {
    width: min(560px, 92vw);
    background: rgba(255, 255, 255, 1);
    border-radius: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Ubuntu', sans-serif;
}

@media (max-width: 768px) {
    .bucket-modal[b-35nyg2dy1z] {
        width: 100%;
    }
}
/* /Pages/ServiceRequestCustomerCare.razor.rz.scp.css */
button[b-pjssc31m2l] {
  font-family: inherit;
}

.customer-care-section[b-pjssc31m2l] {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 0 64px;
  color: #141414;
  font-family: "Ubuntu", "Inter", "Segoe UI", sans-serif;
  background: linear-gradient(180deg, rgba(247, 249, 253, 0.92) 0%, rgba(230, 236, 248, 0.72) 100%);
}

.customer-care-masthead[b-pjssc31m2l] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.customer-care-breadcrumb[b-pjssc31m2l] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(77, 91, 120, 0.85);
  letter-spacing: 0.2px;
}

.customer-care-breadcrumb .current[b-pjssc31m2l] {
  color: #001f57;
  font-weight: 600;
}

.customer-care-intro[b-pjssc31m2l] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.customer-care-intro h1[b-pjssc31m2l] {
  font-size: 24px;
  font-weight: 600;
  color: #0b1b43;
  margin: 0;
}

.customer-care-intro p[b-pjssc31m2l] {
  font-size: 15px;
  color: rgba(71, 77, 90, 0.78);
  margin: 0;
}

.stats-grid[b-pjssc31m2l] {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: nowrap;
}

.stat-card[b-pjssc31m2l] {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 20px;
  border: 1px solid #e2e8f4;
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 55%, #eef3ff 100%);
  padding: 20px;
  min-height: 164px;
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.1);
}

.stat-card--link[b-pjssc31m2l] {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stat-card--link:hover[b-pjssc31m2l],
.stat-card--link:focus-visible[b-pjssc31m2l] {
  transform: translateY(-2px);
  box-shadow: 0 24px 38px rgba(15, 23, 42, 0.16);
  outline: none;
}

.stat-card--link.is-active[b-pjssc31m2l] {
  border-color: rgba(0, 43, 130, 1);
  box-shadow: 0 0 0 2px rgba(0, 43, 130, 0.22), 0 18px 30px rgba(15, 23, 42, 0.12);
}

.stat-card-filter-hint[b-pjssc31m2l] {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 43, 130, 0.08);
  color: rgba(0, 43, 130, 0.85);
  align-self: flex-start;
}

.stat-card--link.is-active .stat-card-filter-hint[b-pjssc31m2l] {
  background: rgba(0, 43, 130, 0.85);
  color: #ffffff;
}
/*
.stat-card-overlay {
  content: "";
  position: absolute;
  inset: -10% -6% auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 70% 20%, rgba(0, 77, 181, 0.26) 0%, rgba(0, 77, 181, 0.06) 60%, rgba(0, 77, 181, 0) 80%);
  pointer-events: none;
}*/

.stat-card-header[b-pjssc31m2l] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.stat-card-header h3[b-pjssc31m2l] {
  font-size: 14px;
  font-weight: 600;
  color: #454a57;
  margin: 0;
}

.stat-card-header span[b-pjssc31m2l] {
  font-size: 13px;
  color: rgba(69, 74, 87, 0.68);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.stat-card-value[b-pjssc31m2l] {
  font-size: 28px;
  font-weight: 600;
  color: #0b1b43;
  line-height: 1.1;
  margin: 0;
}

.stat-card-footnote[b-pjssc31m2l] {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(71, 77, 90, 0.7);
}

.actions-row[b-pjssc31m2l] {
  display: flex;
  justify-content: flex-end;
}

.primary-action[b-pjssc31m2l] {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #032669 0%, #001f57 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 18px 28px rgba(0, 31, 87, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.primary-action svg[b-pjssc31m2l] {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.primary-action:hover[b-pjssc31m2l] {
  transform: translateY(-1px);
  box-shadow: 0 24px 36px rgba(0, 31, 87, 0.26);
}

.split-grid[b-pjssc31m2l],
.analytics-grid[b-pjssc31m2l] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

.filters-container[b-pjssc31m2l] {
  background-color: rgba(250, 252, 255, 1);
  border: 1px solid rgba(226, 232, 240, 1);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 24px;
}

.filters-toolbar[b-pjssc31m2l] {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.filters-actions[b-pjssc31m2l] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  background: rgba(241, 245, 249, 1);
  padding: 10px;
}

.filters-inputs-row[b-pjssc31m2l] {
  display: flex;
  gap: 16px;
  width: 100%;
  align-items: flex-end;
  flex-wrap: wrap;
}

.filters-segments[b-pjssc31m2l] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  align-items: stretch;
}

.filter-segment[b-pjssc31m2l] {
  margin: 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  background: #ffffff;
  box-sizing: border-box;
}

.filter-segment-title[b-pjssc31m2l] {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 4px;
}

.filter-segment-fields[b-pjssc31m2l] {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 8px;
}

.filter-segment--triple[b-pjssc31m2l] {
  flex: 1 1 520px;
  min-width: 0;
}

.filter-segment--single[b-pjssc31m2l] {
  flex: 1 1 220px;
  min-width: 0;
}

.filter-segment-fields .filter-field.compact[b-pjssc31m2l] {
  flex: 1 1 160px;
  min-width: 160px;
}

.filters-row[b-pjssc31m2l] {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 16px;
}

.filters-hint[b-pjssc31m2l] {
  margin: 0 0 8px 4px;
  font-size: 13px;
  color: rgba(71, 85, 105, 1);
}

.date-filter-actions[b-pjssc31m2l] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.clear-filters-btn[b-pjssc31m2l] {
  height: 48px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 1);
  background-color: rgba(255, 255, 255, 1);
  color: rgba(51, 65, 85, 1);
  font-size: 15px;
  font-family: 'Ubuntu', sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.clear-filters-btn:hover[b-pjssc31m2l] {
  background-color: rgba(241, 245, 249, 1);
  border-color: rgba(100, 116, 139, 1);
  color: rgba(15, 23, 42, 1);
}

.clear-filters-btn svg[b-pjssc31m2l] {
  width: 16px;
  height: 16px;
}

.filter-field.compact[b-pjssc31m2l] {
  flex: 1 1 18%;
  min-width: 160px;
  max-width: 100%;
}

.filter-control[b-pjssc31m2l] {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  padding: 0 16px;
  font-size: 15px;
  color: #1f2937;
  background: #ffffff;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-control:focus[b-pjssc31m2l] {
  outline: none;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.filter-control[b-pjssc31m2l]::placeholder {
  color: #9ca3af;
}

.stats-panel-header[b-pjssc31m2l] {
  flex-wrap: wrap;
  align-items: center;
}

.stats-toggle[b-pjssc31m2l] {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  overflow: hidden;
  background: #f9fafb;
}

.stats-toggle-btn[b-pjssc31m2l] {
  border: none;
  background: transparent;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.stats-toggle-btn.is-active[b-pjssc31m2l] {
  background: #1d4ed8;
  color: #ffffff;
}

.stats-chart-body[b-pjssc31m2l] {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.stats-chart-body .line-chart[b-pjssc31m2l] {
  width: 100%;
  max-width: 460px;
}

.panel[b-pjssc31m2l] {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f4;
  padding: 28px;
  box-shadow: 0 28px 48px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panel-header[b-pjssc31m2l] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.panel-header h2[b-pjssc31m2l] {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.panel-header span[b-pjssc31m2l] {
  font-size: 14px;
  color: rgba(98, 108, 132, 0.8);
}

.filters-panel h2[b-pjssc31m2l],
.customer-care-filters .filter-label[b-pjssc31m2l] {
  margin: 0;
}

.filter-fields[b-pjssc31m2l] {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.filter-field[b-pjssc31m2l] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-label[b-pjssc31m2l] {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: 0.3px;
}

.filter-field select[b-pjssc31m2l],
.filter-field input[b-pjssc31m2l] {
  height: 40px;
  border-radius: 12px;
  border: 1px solid #d3daeb;
  padding: 0 16px;
  font-size: 14px;
  color: #111827;
  background-color: #ffffff;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.filter-field select[b-pjssc31m2l] {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236c7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 46px;
}

.filter-field select:focus[b-pjssc31m2l],
.filter-field input:focus[b-pjssc31m2l] {
  border-color: #0057ff;
  box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.18);
  outline: none;
}

.filter-actions[b-pjssc31m2l] {
  display: flex;
  gap: 16px;
}

.ghost-button[b-pjssc31m2l],
.primary-button[b-pjssc31m2l] {
  flex: 1;
  height: 48px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ghost-button[b-pjssc31m2l] {
  border: 1px solid #d3daeb;
  background: #ffffff;
  color: #1f2937;
}

.ghost-button:hover[b-pjssc31m2l] {
  transform: translateY(-1px);
  background: rgba(248, 249, 255, 0.88);
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.1);
}

.primary-button[b-pjssc31m2l] {
  border: none;
  background: linear-gradient(135deg, #032b78 0%, #001f57 100%);
  color: #ffffff;
  box-shadow: 0 16px 24px rgba(0, 31, 87, 0.22);
}

.primary-button:hover[b-pjssc31m2l] {
  transform: translateY(-1px);
  box-shadow: 0 22px 32px rgba(0, 31, 87, 0.28);
}

.requests-panel[b-pjssc31m2l] {
  gap: 24px;
  padding-bottom: 32px;
  min-height: 320px;
}

.requests-empty[b-pjssc31m2l] {
  font-size: 20px;
  color: rgba(87, 96, 115, 0.76);
  text-align: center;
  border: 1px dashed rgba(189, 197, 216, 0.68);
  border-radius: 18px;
  padding: 64px 16px;
  background: rgba(249, 250, 255, 0.7);
}

.requests-table[b-pjssc31m2l] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.table-header[b-pjssc31m2l],
.table-row[b-pjssc31m2l] {
  display: grid;
  grid-template-columns: 140px 1.1fr 1fr 128px 120px 148px 90px;
  align-items: center;
  gap: 12px;
}

.table-header[b-pjssc31m2l] {
  padding: 0 4px 8px;
  border-bottom: 1px solid #e1e7f5;
  color: rgba(71, 77, 90, 0.72);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.table-row[b-pjssc31m2l] {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(245, 248, 255, 0.8);
  border: 1px solid rgba(216, 223, 239, 0.9);
  box-shadow: 0 18px 24px rgba(15, 23, 42, 0.08);
}

.table-row span[b-pjssc31m2l] {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
}

.badge[b-pjssc31m2l] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  height: 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.badge.status-open[b-pjssc31m2l] {
  background: rgba(255, 232, 214, 0.9);
  color: #c4661a;
}

.badge.status-inprogress[b-pjssc31m2l],
.badge.status-in-progress[b-pjssc31m2l] {
  background: rgba(233, 240, 255, 0.9);
  color: #0f49c2;
}

.badge.status-resolved[b-pjssc31m2l] {
  background: rgba(209, 245, 229, 0.9);
  color: #1a8a55;
}

.badge.status-closed[b-pjssc31m2l] {
  background: rgba(226, 226, 234, 0.9);
  color: #4c4f5d;
}

.badge.severity-low[b-pjssc31m2l] {
  background: rgba(209, 245, 229, 0.9);
  color: #1a8a55;
}

.badge.severity-medium[b-pjssc31m2l] {
  background: rgba(255, 246, 207, 0.95);
  color: #b27a00;
}

.badge.severity-high[b-pjssc31m2l] {
  background: rgba(255, 226, 226, 0.95);
  color: #c53030;
}

.badge.severity-critical[b-pjssc31m2l] {
  background: rgba(255, 209, 213, 0.95);
  color: #b91c1c;
}

.link-button[b-pjssc31m2l] {
  justify-self: end;
  border: none;
  background: transparent;
  color: #0057ff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.link-button:hover[b-pjssc31m2l] {
  text-decoration: underline;
}

@media (max-width: 1280px) {
  .stats-grid[b-pjssc31m2l] {
    flex-wrap: wrap;
  }

  .stat-card[b-pjssc31m2l] {
    flex: 1 1 calc(50% - 12px);
  }

  .table-header[b-pjssc31m2l],
  .table-row[b-pjssc31m2l] {
    grid-template-columns: 120px 1.1fr 1fr 120px 110px 140px 80px;
  }
}

@media (max-width: 1100px) {
  .split-grid[b-pjssc31m2l],
  .analytics-grid[b-pjssc31m2l] {
    grid-template-columns: 1fr;
  }

  .filter-segment--triple[b-pjssc31m2l],
  .filter-segment--single[b-pjssc31m2l] {
    flex: 1 1 calc(50% - 8px);
  }

  .filter-field.compact[b-pjssc31m2l] {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }

  .panel[b-pjssc31m2l] {
    padding: 24px;
  }
}

@media (max-width: 960px) {
  .customer-care-section[b-pjssc31m2l] {
    padding: 16px 0 48px;
  }

  .customer-care-intro h1[b-pjssc31m2l] {
    font-size: 20px;
  }
}

@media (max-width: 760px) {
  .stats-grid[b-pjssc31m2l] {
    flex-wrap: wrap;
  }

  .stat-card[b-pjssc31m2l] {
    flex: 1 1 100%;
  }

  .actions-row[b-pjssc31m2l] {
    justify-content: stretch;
  }

  .primary-action[b-pjssc31m2l] {
    width: 100%;
    justify-content: center;
  }

  .filter-segment--triple[b-pjssc31m2l],
  .filter-segment--single[b-pjssc31m2l] {
    flex: 1 1 100%;
  }

  .filter-segment-fields .filter-field.compact[b-pjssc31m2l] {
    flex: 1 1 100%;
    min-width: unset;
  }

  .filter-field.compact[b-pjssc31m2l] {
    flex: 1 1 100%;
    min-width: unset;
  }

  .date-filter-actions[b-pjssc31m2l] {
    margin-left: 0;
    width: 100%;
  }

  .clear-filters-btn[b-pjssc31m2l] {
    width: 100%;
    justify-content: center;
  }

  .table-header[b-pjssc31m2l],
  .table-row[b-pjssc31m2l] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 8px;
  }

  .table-row .badge[b-pjssc31m2l],
  .table-row span:nth-last-child(2)[b-pjssc31m2l],
  .table-row .link-button[b-pjssc31m2l] {
    justify-self: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *[b-pjssc31m2l],
  *[b-pjssc31m2l]::before,
  *[b-pjssc31m2l]::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.details-resolution-rating[b-pjssc31m2l] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  color: #111827;
}

.details-rating-value[b-pjssc31m2l] {
  font-weight: 600;
}

.details-rating-comment[b-pjssc31m2l] {
  margin: 0;
  color: #6b7280;
  font-style: italic;
  font-size: 14px;
}

.details-rating-meta[b-pjssc31m2l] {
  display: block;
  font-size: 12px;
  color: #9ca3af;
}

/* Destructive Close-Ticket action — red-outlined variant of the existing .action-button. */
.action-button.danger[b-pjssc31m2l] {
    border-color: #dc2626;
    background: #fff;
    color: #b91c1c;
}

.action-button.danger:hover:not(:disabled)[b-pjssc31m2l] {
    background: #dc2626;
    color: #ffffff;
}

.action-button.danger:disabled[b-pjssc31m2l] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* === Moved from inline <style> block in .razor === */

.remark-text-label.with-top-gap[b-pjssc31m2l] {
    margin-top: 12px;
}

.escalation-summary-card[b-pjssc31m2l] {
    margin: 24px 0;
    padding: 20px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.65), rgba(191, 219, 254, 0.35));
    border: 1px solid #bfdbfe;
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.escalation-summary-card header[b-pjssc31m2l] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.escalation-summary-card h3[b-pjssc31m2l] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d4ed8;
}

.escalation-summary-card span[b-pjssc31m2l] {
    font-size: 13px;
    color: #1f2937;
}

.escalation-summary-card p[b-pjssc31m2l] {
    margin: 0;
    font-size: 14px;
    color: #0f172a;
}

.stats-grid[b-pjssc31m2l] {
    display: flex;
    gap: 20px;
}

.stats-grid .stat-card[b-pjssc31m2l] {
    flex: 1 1 0;
}

.stat-card-footnote.loading[b-pjssc31m2l] {
    color: #6b7280;
    font-style: italic;
}

.stat-card-error[b-pjssc31m2l] {
    color: #dc2626;
    font-weight: 600;
}

.split-grid[b-pjssc31m2l],
.analytics-grid[b-pjssc31m2l] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr);
    gap: 24px;
}

.filters-container.customer-care-filters[b-pjssc31m2l] {
    background-color: rgba(250, 252, 255, 1);
    border: 1px solid rgba(226, 232, 240, 1);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    margin-bottom: 24px;
}

.filters-toolbar[b-pjssc31m2l] {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.filters-actions[b-pjssc31m2l] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    background: rgba(241, 245, 249, 1);
    padding: 10px;
}

.filters-inputs-row[b-pjssc31m2l] {
    display: flex;
    gap: 16px;
    width: 100%;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filters-segments[b-pjssc31m2l] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    align-items: stretch;
}

.filter-segment[b-pjssc31m2l] {
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    background: #ffffff;
    box-sizing: border-box;
}

.filter-segment-title[b-pjssc31m2l] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 4px;
}

.filter-segment-fields[b-pjssc31m2l] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 8px;
}

.filter-segment--triple[b-pjssc31m2l] {
    flex: 1 1 520px;
    min-width: 0;
}

.filter-segment--single[b-pjssc31m2l] {
    flex: 1 1 220px;
    min-width: 0;
}

.filter-segment-fields .filter-field.compact[b-pjssc31m2l] {
    flex: 1 1 160px;
    min-width: 160px;
}

.filters-row.customer-care-filters-actions[b-pjssc31m2l] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 16px;
}

.filters-hint[b-pjssc31m2l] {
    margin: 0 0 8px 4px;
    font-size: 13px;
    color: rgba(71, 85, 105, 1);
}

.date-filter-actions[b-pjssc31m2l] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.clear-filters-btn[b-pjssc31m2l] {
    height: 48px;
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 1);
    background-color: rgba(255, 255, 255, 1);
    color: rgba(51, 65, 85, 1);
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.clear-filters-btn svg[b-pjssc31m2l] {
    width: 16px;
    height: 16px;
}

.filter-field.compact[b-pjssc31m2l] {
    flex: 1 1 18%;
    min-width: 160px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-panel-header[b-pjssc31m2l] {
    flex-wrap: wrap;
    align-items: center;
}

.stats-toggle[b-pjssc31m2l] {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    overflow: hidden;
    background: #f9fafb;
}

.stats-toggle-btn[b-pjssc31m2l] {
    border: none;
    background: transparent;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
}

.stats-toggle-btn.is-active[b-pjssc31m2l] {
    background: #1d4ed8;
    color: #ffffff;
}

.stats-chart-body[b-pjssc31m2l] {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-label[b-pjssc31m2l] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.04em;
}

.filter-control[b-pjssc31m2l] {
    width: 100%;
    border-radius: 16px;
    border: 1px solid #d1d5db;
    padding: 12px 16px;
    font-size: 15px;
    color: #1f2937;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-control:focus[b-pjssc31m2l] {
    outline: none;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.filter-control[b-pjssc31m2l]::placeholder {
    color: #9ca3af;
}

.cscc-picker-trigger[b-pjssc31m2l] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 16px;
    border: 1px solid #d1d5db;
    padding: 12px 44px 12px 16px;
    font-size: 15px;
    color: #1f2937;
    background: #ffffff;
    cursor: pointer !important;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cscc-picker-trigger:not(.cscc-picker-trigger--disabled)[b-pjssc31m2l] {
    cursor: pointer !important;
}

.cscc-picker-trigger:not(.cscc-picker-trigger--disabled):hover[b-pjssc31m2l],
.cscc-picker-trigger:not(.cscc-picker-trigger--disabled):focus-visible[b-pjssc31m2l] {
    border-color: #374151;
    background-color: #f5f7fb;
    outline: none;
}

.cscc-picker-trigger--disabled[b-pjssc31m2l] {
    background-color: #f1f1f1;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

.cscc-picker-value[b-pjssc31m2l] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cscc-picker-value.placeholder[b-pjssc31m2l] {
    color: #9ca3af;
}

.cscc-caret[b-pjssc31m2l] {
    position: absolute;
    right: 18px;
    width: 9px;
    height: 9px;
    border: solid #374151;
    border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg);
    pointer-events: none;
}

.request-id-header[b-pjssc31m2l],
.request-id-cell[b-pjssc31m2l] {
    white-space: nowrap;
}

.panel.chart-panel[b-pjssc31m2l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.panel.chart-panel .panel-header span[b-pjssc31m2l] {
    font-size: 14px;
    color: #6b7280;
}

.chart-body[b-pjssc31m2l] {
    position: relative;
    min-height: 240px;
}

.requests-panel[b-pjssc31m2l] {
    padding: 24px;
}

.requests-panel .panel-header h2[b-pjssc31m2l] {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.requests-table[b-pjssc31m2l] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    overflow-x: auto;   /* safety net: scroll rather than clip if the panel is ever narrower than the compact table */
    overflow-y: hidden;
}

.pagination-footer[b-pjssc31m2l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-status[b-pjssc31m2l] {
    font-size: 13px;
    color: #4b5563;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.pagination-controls[b-pjssc31m2l] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination-page[b-pjssc31m2l],
.pagination-nav-button[b-pjssc31m2l] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #1f2937;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    min-width: 40px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pagination-page:hover:not(:disabled)[b-pjssc31m2l],
.pagination-nav-button:hover:not(:disabled)[b-pjssc31m2l] {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
}

.pagination-page.active[b-pjssc31m2l] {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
    cursor: default;
}

.pagination-page:disabled[b-pjssc31m2l],
.pagination-nav-button:disabled[b-pjssc31m2l] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pagination-ellipsis[b-pjssc31m2l] {
    font-size: 13px;
    color: #9ca3af;
    padding: 0 4px;
}

.enterprise-table[b-pjssc31m2l] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.enterprise-table thead th[b-pjssc31m2l] {
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    padding: 12px clamp(4px, 0.6vw, 10px);
    background: #f9fafb;
}

.enterprise-table tbody td[b-pjssc31m2l] {
    padding: clamp(10px, 1vw, 16px) clamp(4px, 0.6vw, 10px);
    font-size: clamp(11px, 1vw, 14px);
    color: #1f2937;
    border-top: 1px solid #edf1f5;
    vertical-align: middle;
}

/* Department cell (4th column): cap width + ellipsis so a long sub-department
   name can't widen the table. Full name shows on hover via the title attribute. */
.enterprise-table tbody td:nth-child(4)[b-pjssc31m2l] {
    max-width: clamp(80px, 10vw, 130px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-table tbody tr:hover[b-pjssc31m2l] {
    background: #f5f8ff;
}

.enterprise-name-cell[b-pjssc31m2l] {
    font-weight: 600;
    letter-spacing: 0.04em;
}

.pill-badge[b-pjssc31m2l] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    text-transform: capitalize;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Enterprise column: owner name only (origin/email moved to the detail modal).
   Long names are truncated with an ellipsis; the full name shows on hover via the title attribute. */
.enterprise-cell .enterprise-name[b-pjssc31m2l] {
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
    max-width: clamp(90px, 12vw, 150px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Date Raised column: keep the timestamp on a single line. */
.date-raised-cell[b-pjssc31m2l] {
    white-space: nowrap;
    color: rgba(60, 60, 60, 1);
    font-size: 13px;
}

.enterprise-onbehalf[b-pjssc31m2l] {
    font-size: 12px;
    color: rgba(134, 134, 134, 1);
    margin-top: 2px;
    word-break: break-word;
}

.enterprise-tag[b-pjssc31m2l] {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.enterprise-tag--for[b-pjssc31m2l] {
    background-color: rgba(0, 31, 87, 0.1);
    color: rgba(0, 31, 87, 1);
    border: 0.5px solid rgba(0, 31, 87, 0.4);
}

.enterprise-tag--by[b-pjssc31m2l] {
    background-color: rgba(134, 134, 134, 0.12);
    color: rgba(90, 90, 90, 1);
    border: 0.5px solid rgba(134, 134, 134, 0.5);
}

.pill-badge--clickable[b-pjssc31m2l] {
    cursor: pointer;
    transition: transform 80ms ease, box-shadow 80ms ease;
}

.pill-badge--clickable:hover[b-pjssc31m2l] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.pill-badge--clickable:focus-visible[b-pjssc31m2l] {
    outline: 2px solid rgba(56, 132, 255, 0.55);
    outline-offset: 2px;
}

.status-open[b-pjssc31m2l] {
    border-color: #f87171;
    color: #f87171;
    background: rgba(248, 113, 113, 0.08);
}

.status-open-modal[b-pjssc31m2l] {
    border-color: #f87171;
    color: #f87171;
    background: rgba(248, 113, 113, 0.08);
    width: 20%;
}
.status-inprogress[b-pjssc31m2l],
.status-in-progress[b-pjssc31m2l],
.status-reopened[b-pjssc31m2l] {
    border-color: #fbbf24;
    color: #b45309;
    background: rgba(251, 191, 36, 0.12);
}

.status-resolved[b-pjssc31m2l],
.status-closed[b-pjssc31m2l] {
    border-color: #34d399;
    color: #047857;
    background: rgba(52, 211, 153, 0.12);
}

.status-pending-customer[b-pjssc31m2l],
.status-pending-third-party[b-pjssc31m2l] {
    border-color: #94a3b8;
    color: #475569;
    background: rgba(148, 163, 184, 0.15);
}

.severity-critical[b-pjssc31m2l] {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.severity-high[b-pjssc31m2l] {
    border-color: #d97706;
    color: #92400e;
    background: rgba(217, 119, 6, 0.12);
}

.severity-medium[b-pjssc31m2l] {
    border-color: #2563eb;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
}

.severity-low[b-pjssc31m2l] {
    border-color: #10b981;
    color: #047857;
    background: rgba(16, 185, 129, 0.1);
}

.action-buttons[b-pjssc31m2l] {
    display: flex;
    gap: 8px;
}

.action-pill.disabled[b-pjssc31m2l] {
    padding: 6px 14px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
    border: 1px dashed #e5e7eb;
    align-self: center;
    white-space: nowrap;
}

.action-button[b-pjssc31m2l] {
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid #2563eb;
    background: transparent;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, color 0.2s ease;
}

.action-button:hover[b-pjssc31m2l] {
    background: #2563eb;
    color: #fff;
}

/* Icon-only action buttons (View eye icon, Add Remark icon): square, centered SVG. */
.action-button.icon-only[b-pjssc31m2l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    line-height: 0;
}

.action-button.icon-only svg[b-pjssc31m2l] {
    display: block;
}

.action-button.secondary[b-pjssc31m2l] {
    border-color: #f87171;
    color: #b91c1c;
}

.action-button.secondary:hover:not(:disabled)[b-pjssc31m2l] {
    background: #f87171;
    color: #fff;
}

.action-button.secondary:disabled[b-pjssc31m2l] {
    opacity: 0.6;
    cursor: not-allowed;
}

.action-button.ghost[b-pjssc31m2l] {
    border-color: #d1d5db;
    color: #374151;
    background: #fff;
}

.action-button.ghost:hover[b-pjssc31m2l] {
    background: #f3f4f6;
}

.action-button.submit[b-pjssc31m2l] {
    border-color: #1d4ed8;
        background: #001F57;
    color: #fff;
}

.action-button.submit:hover[b-pjssc31m2l] {
            background: #001F57;
    border-color: #1e3a8a;
}

.requests-empty[b-pjssc31m2l],
.requests-loading[b-pjssc31m2l] {
    padding: 40px;
    text-align: center;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 16px;
    border: 1px dashed #e5e7eb;
}

.remark-overlay[b-pjssc31m2l] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    backdrop-filter: blur(2px);
    padding: 24px;
}

.remark-modal[b-pjssc31m2l] {
    width: min(520px, 100%);
    max-height: 90vh;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 70px rgba(15, 23, 42, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.remark-modal-header[b-pjssc31m2l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px 8px 28px;
}

.remark-modal-header h3[b-pjssc31m2l] {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: #111827;
}

.remark-modal-header span[b-pjssc31m2l] {
    color: #1d4ed8;
}

.remark-close[b-pjssc31m2l] {
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
}

.remark-modal-body[b-pjssc31m2l] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 28px 12px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.remark-text-label[b-pjssc31m2l] {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
}

.remark-textarea[b-pjssc31m2l] {
    min-height: 140px;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    padding: 16px;
    font-size: 14px;
    color: #111827;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.remark-textarea:focus[b-pjssc31m2l] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.remark-textarea:disabled[b-pjssc31m2l] {
    background: #f3f4f6;
    cursor: not-allowed;
}

.remark-error[b-pjssc31m2l] {
    font-size: 13px;
    color: #dc2626;
}

.remark-modal-footer[b-pjssc31m2l] {
    padding: 16px 28px 28px 28px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Add-remark file upload (matches CreateServiceRequest) */
.file-upload-area[b-pjssc31m2l] {
    width: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(50, 173, 230, 1);
    border-radius: 12px;
    background-color: rgba(50, 173, 230, 0.06);
    gap: 6px;
    cursor: pointer;
}
.file-upload-area.drag-over[b-pjssc31m2l] {
    background-color: rgba(50, 173, 230, 0.15);
}
/* ::deep — targets the <input> rendered by the <InputFile> child component. */
[b-pjssc31m2l] .file-input-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.file-upload-area .upload-text[b-pjssc31m2l] {
    color: rgba(20, 20, 20, 1);
    font-size: 14px;
    font-weight: 400;
}
.file-upload-area .upload-hint[b-pjssc31m2l] {
    color: rgba(134, 134, 134, 1);
    font-size: 12px;
}
.file-upload-area .upload-button[b-pjssc31m2l] {
    padding: 6px 14px;
    border-radius: 10px;
    background-color: rgba(0, 90, 255, 1);
}
.file-upload-area .upload-button span[b-pjssc31m2l] {
    color: #fff;
    font-size: 14px;
}
.upload-text-warning[b-pjssc31m2l] {
    font-size: 11px;
    color: rgba(134, 134, 134, 1);
}
.uploaded-files-section[b-pjssc31m2l] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.uploaded-files-title[b-pjssc31m2l] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}
.uploaded-files-grid[b-pjssc31m2l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.file-preview-card[b-pjssc31m2l] {
    min-width: 0;
    height: 120px;
    border: 0.5px solid #d1d5db;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.file-preview-header[b-pjssc31m2l] {
    display: flex;
    gap: 8px;
    padding: 12px 10px 8px 10px;
    align-items: center;
}
.file-preview-info[b-pjssc31m2l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.file-preview-name[b-pjssc31m2l] {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-preview-size[b-pjssc31m2l] {
    font-size: 12px;
    color: #6b7280;
}
.file-preview-actions[b-pjssc31m2l] {
    display: flex;
    gap: 8px;
    padding: 0 10px 10px 10px;
    align-items: center;
}
.file-preview-btn[b-pjssc31m2l] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}
.file-preview-btn:disabled[b-pjssc31m2l] {
    cursor: not-allowed;
    opacity: 0.6;
}
.file-delete-btn[b-pjssc31m2l] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    cursor: pointer;
    padding: 0;
}
.file-delete-btn:hover:not(:disabled)[b-pjssc31m2l] {
    background: #f3f4f6;
}

.remark-overlay.success[b-pjssc31m2l] {
    background: rgba(15, 23, 42, 0.2);
}

.remark-success-card[b-pjssc31m2l] {
    width: min(420px, 100%);
    background: linear-gradient(180deg, #fdfdfd 0%, #f5f6fb 100%);
    border-radius: 32px;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.22);
    text-align: center;
}

.remark-success-icon[b-pjssc31m2l] {
    width: 140px;
    height: 140px;
}

.remark-success-icon svg[b-pjssc31m2l] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 12px 24px rgba(10, 49, 130, 0.35));
}

.remark-success-icon .outer-ring[b-pjssc31m2l] {
    fill: #dbe6ff;
}

.remark-success-icon .inner-fill[b-pjssc31m2l] {
    fill: #0b3b92;
}

.remark-success-icon .check-mark[b-pjssc31m2l] {
    fill: #eff3ff;
}

.remark-success-card h3[b-pjssc31m2l] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: #101828;
    letter-spacing: 0.02em;
}

.details-overlay[b-pjssc31m2l] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    justify-content: flex-end;
    padding: 24px;
    z-index: 1150;
}

.details-panel[b-pjssc31m2l] {
    width: min(520px, 100%);
    background: #ffffff;
    border-radius: 32px 0 0 32px;
    box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    padding: 32px;
    gap: 28px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}

.details-header[b-pjssc31m2l] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.details-title h3[b-pjssc31m2l] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.01em;
}

.details-title span[b-pjssc31m2l] {
    font-weight: 500;
    color: #6b7280;
}

.details-meta[b-pjssc31m2l] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
}

.details-close[b-pjssc31m2l] {
    border: none;
    background: rgba(15, 23, 42, 0.05);
    color: #6b7280;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.details-body[b-pjssc31m2l] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    overflow-y: auto;
}

.details-row[b-pjssc31m2l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.details-row label[b-pjssc31m2l] {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.details-row.escalation-row[b-pjssc31m2l] {
    margin-top: 12px;
}

.details-checkbox[b-pjssc31m2l] {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    font-size: 15px;
    color: #111827;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.details-checkbox input[type="checkbox"][b-pjssc31m2l] {
    width: 18px;
    height: 18px;
    accent-color: #1d4ed8;
}

.details-row p[b-pjssc31m2l] {
    margin: 0;
    font-size: 15px;
    color: #111827;
}

.sla-within[b-pjssc31m2l] {
    color: #16a34a;
    font-weight: 500;
}

.sla-breach[b-pjssc31m2l] {
    color: #dc2626;
    font-weight: 500;
}

.details-remark[b-pjssc31m2l] {
    background: #f9fafb;
    border-radius: 16px;
    padding: 16px 18px;
    line-height: 1.5;
}

.details-remark-primary[b-pjssc31m2l] {
    margin-bottom: 12px;
}

.details-remarks-list[b-pjssc31m2l] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.details-remark-entry[b-pjssc31m2l] {
    padding: 14px 18px;
    border-radius: 14px;
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
    color: #111827;
}

.details-remark-entry p[b-pjssc31m2l] {
    margin: 0;
    line-height: 1.5;
}

.details-remark-meta[b-pjssc31m2l] {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.details-remark-attachments-block[b-pjssc31m2l] {
    margin-top: 8px;
    margin-bottom: 4px;
}

.details-remark-attachments[b-pjssc31m2l] {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.details-remark-attachment-item[b-pjssc31m2l] {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.details-remark-attachment-link[b-pjssc31m2l] {
    color: #1d4ed8;
    text-decoration: none;
}

.details-remark-attachment-link:hover[b-pjssc31m2l] {
    text-decoration: underline;
}

.details-remark-attachment-name[b-pjssc31m2l] {
    color: #374151;
}

.details-remark-attachment-size[b-pjssc31m2l] {
    color: #9ca3af;
    font-size: 12px;
}

/* Timeline (Status History) */
.details-timeline-list[b-pjssc31m2l] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.details-timeline-entry[b-pjssc31m2l] {
    padding: 14px 18px;
    border-radius: 12px;
    background: #f9fafb;
    border-left: 3px solid #2563eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeline-status-change[b-pjssc31m2l] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.timeline-status-old[b-pjssc31m2l] {
    color: #6b7280;
    text-decoration: line-through;
}

.timeline-arrow[b-pjssc31m2l] {
    color: #9ca3af;
    font-weight: 400;
}

.timeline-status-new[b-pjssc31m2l] {
    color: #2563eb;
}

.timeline-meta[b-pjssc31m2l] {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.timeline-remarks[b-pjssc31m2l] {
    margin: 0;
    font-size: 13px;
    color: #374151;
    font-style: italic;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.details-select select[b-pjssc31m2l] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    font-size: 15px;
    color: #1f2937;
    background-color: #fff;
}

.details-select select:disabled[b-pjssc31m2l] {
    background: #f3f4f6;
    color: #9ca3af;
}

.details-picker-trigger[b-pjssc31m2l] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 44px 12px 16px;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

.details-picker-trigger:not(.details-picker-trigger--disabled):hover[b-pjssc31m2l],
.details-picker-trigger:not(.details-picker-trigger--disabled):focus-visible[b-pjssc31m2l] {
    border-color: #374151;
    background-color: #f5f7fb;
    outline: none;
}

.details-picker-trigger--disabled[b-pjssc31m2l] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

.details-picker-value[b-pjssc31m2l] {
    flex: 1;
    font-size: 15px;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.details-picker-value.placeholder[b-pjssc31m2l] {
    color: #9ca3af;
}

.details-picker-caret[b-pjssc31m2l] {
    position: absolute;
    right: 18px;
    width: 9px;
    height: 9px;
    border: solid #374151;
    border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg);
    pointer-events: none;
}

.details-loading[b-pjssc31m2l] {
    padding: 40px;
    text-align: center;
    color: #6b7280;
    font-size: 15px;
}

.details-info[b-pjssc31m2l] {
    font-size: 13px;
    color: #6b7280;
}

.details-error[b-pjssc31m2l] {
    font-size: 13px;
    color: #dc2626;
}

.details-success[b-pjssc31m2l] {
    font-size: 13px;
    color: #047857;
}

.details-footer[b-pjssc31m2l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    margin-top: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 40%, #ffffff 100%);
}

.details-footer-actions[b-pjssc31m2l] {
    display: flex;
    gap: 16px;
}

.confirm-overlay[b-pjssc31m2l] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 24px;
}

.confirm-card[b-pjssc31m2l] {
    width: min(420px, 100%);
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.confirm-card header h3[b-pjssc31m2l] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #111827;
}

.confirm-card p[b-pjssc31m2l] {
    font-size: 16px;
    color: #374151;
    margin: 0;
}

.confirm-card footer[b-pjssc31m2l] {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* Enterprise Autocomplete Styles */
.enterprise-autocomplete-wrapper[b-pjssc31m2l] {
    position: relative;
    width: 100%;
}

.enterprise-search-input[b-pjssc31m2l] {
    width: 100%;
    padding: 8px 16px;
}

.enterprise-dropdown[b-pjssc31m2l] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.enterprise-dropdown-item[b-pjssc31m2l] {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 15px;
    color: #1f2937;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.enterprise-dropdown-item:last-child[b-pjssc31m2l] {
    border-bottom: none;
}

.enterprise-dropdown-item:hover[b-pjssc31m2l] {
    background-color: #f5f8ff;
    color: #1d4ed8;
}

.enterprise-dropdown-item:active[b-pjssc31m2l] {
    background-color: #e0e7ff;
}

/* Enterprise Filter Wrapper - Dual Control Layout */
.enterprise-filter-wrapper[b-pjssc31m2l] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.enterprise-select-dropdown[b-pjssc31m2l] {
    width: 100%;
}

/* SubDepartment Autocomplete Styles */
.subdepartment-autocomplete-wrapper[b-pjssc31m2l] {
    position: relative;
    width: 100%;
}

.subdepartment-search-input[b-pjssc31m2l] {
    width: 100%;
    padding: 8px 16px;
}

.subdepartment-dropdown[b-pjssc31m2l] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.subdepartment-dropdown-item[b-pjssc31m2l] {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 15px;
    color: #1f2937;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.subdepartment-dropdown-item:last-child[b-pjssc31m2l] {
    border-bottom: none;
}

.subdepartment-dropdown-item:hover[b-pjssc31m2l] {
    background-color: #f5f8ff;
    color: #1d4ed8;
}

.subdepartment-dropdown-item:active[b-pjssc31m2l] {
    background-color: #e0e7ff;
}

/* SubDepartment Filter Wrapper - Dual Control Layout */
.subdepartment-filter-wrapper[b-pjssc31m2l] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.subdepartment-select-dropdown[b-pjssc31m2l] {
    width: 100%;
}
/* /Pages/ServiceRequestCustomerCareCreate.razor.rz.scp.css */
.srcc-create[b-vbg90wcevf] {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 24px 0 64px;
  font-family: "Ubuntu", "Inter", "Segoe UI", sans-serif;
  color: #141414;
  background: linear-gradient(180deg, rgba(247, 249, 253, 0.92) 0%, rgba(230, 236, 248, 0.6) 120%);
}

.srcc-layout[b-vbg90wcevf] {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.7fr);
  gap: 32px;
}

.srcc-main[b-vbg90wcevf] {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.srcc-breadcrumb[b-vbg90wcevf] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(86, 99, 125, 0.9);
}

.srcc-breadcrumb .current[b-vbg90wcevf] {
  color: #001f57;
  font-weight: 600;
}

.srcc-hero[b-vbg90wcevf] {
  display: flex;
  gap: 20px;
  align-items: stretch;
  justify-content: space-between;
}

.srcc-hero-copy[b-vbg90wcevf] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.srcc-hero-copy h1[b-vbg90wcevf] {
  font-size: 30px;
  margin: 0;
  font-weight: 600;
  color: #0b1b43;
}

.srcc-hero-copy p[b-vbg90wcevf] {
  margin: 0;
  font-size: 15px;
  color: rgba(71, 77, 90, 0.78);
  max-width: 520px;
}

.srcc-hero-stats[b-vbg90wcevf] {
  display: flex;
  gap: 16px;
}

.srcc-hero-card[b-vbg90wcevf] {
  min-width: 132px;
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid rgba(222, 228, 244, 0.9);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 243, 255, 0.74) 100%);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-label[b-vbg90wcevf] {
  font-size: 13px;
  color: rgba(86, 99, 125, 0.86);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.metric-value[b-vbg90wcevf] {
  font-size: 26px;
  font-weight: 600;
  color: #001f57;
}

.srcc-form-card[b-vbg90wcevf] {
  background: #ffffff;
  border-radius: 28px;
  border: 1px solid rgba(222, 228, 244, 0.9);
  box-shadow: 0 32px 48px rgba(15, 23, 42, 0.12);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.srcc-form-header[b-vbg90wcevf] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.srcc-form-header h2[b-vbg90wcevf] {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #0b1b43;
}

.srcc-form-subtitle[b-vbg90wcevf] {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: rgba(86, 99, 125, 0.78);
}

.srcc-step-indicator[b-vbg90wcevf] {
  display: inline-flex;
  gap: 10px;
}

.step-dot[b-vbg90wcevf] {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(200, 210, 230, 0.8);
  transition: background 0.24s ease, transform 0.24s ease;
}

.step-dot.active[b-vbg90wcevf] {
  background: linear-gradient(135deg, #001f57 0%, #003a9f 100%);
  transform: scale(1.08);
}

.srcc-fieldset[b-vbg90wcevf] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.srcc-label[b-vbg90wcevf] {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.srcc-fieldset-header[b-vbg90wcevf] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.srcc-hint[b-vbg90wcevf] {
  font-size: 13px;
  color: rgba(98, 108, 132, 0.78);
}

.srcc-select[b-vbg90wcevf] {
  position: relative;
}

.srcc-select-display[b-vbg90wcevf] {
  width: 100%;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid #d3daeb;
  background: #ffffff;
  color: #141414;
  font-size: 15px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.srcc-select-display:disabled[b-vbg90wcevf] {
  cursor: not-allowed;
  opacity: 0.6;
}

.srcc-select-display:not(:disabled):hover[b-vbg90wcevf] {
  border-color: #0057ff;
  box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.12);
}

.srcc-caret[b-vbg90wcevf] {
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='m5 8 5 5 5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='m5 8 5 5 5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  color: #6a7288;
}

.srcc-select-list[b-vbg90wcevf] {
  position: absolute;
  z-index: 2;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  border-radius: 16px;
  border: 1px solid rgba(205, 213, 232, 0.9);
  background: #ffffff;
  box-shadow: 0 24px 40px rgba(15, 23, 42, 0.14);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.srcc-select-option[b-vbg90wcevf] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: #1f2937;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.srcc-select-option:hover[b-vbg90wcevf] {
  background: rgba(236, 242, 255, 0.8);
  color: #032b78;
}

.srcc-select-option.active[b-vbg90wcevf] {
  background: linear-gradient(135deg, rgba(0, 31, 87, 0.12) 0%, rgba(0, 94, 255, 0.12) 100%);
  color: #001f57;
}

.srcc-chip-row[b-vbg90wcevf],
.srcc-chip-grid[b-vbg90wcevf] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.srcc-chip-grid[b-vbg90wcevf] {
  gap: 10px;
}

.srcc-chip[b-vbg90wcevf] {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(205, 213, 232, 0.8);
  background: rgba(247, 249, 255, 0.72);
  color: #1f2937;
  font-size: 13px;
  cursor: pointer;
  transition: border 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.srcc-chip:hover:not(:disabled)[b-vbg90wcevf] {
  border-color: #0057ff;
  background: rgba(227, 236, 255, 0.9);
  transform: translateY(-1px);
}

.srcc-chip:disabled[b-vbg90wcevf] {
  cursor: not-allowed;
  opacity: 0.4;
}

.srcc-chip.active[b-vbg90wcevf] {
  border-color: #001f57;
  background: linear-gradient(135deg, rgba(0, 31, 87, 0.18) 0%, rgba(0, 90, 255, 0.22) 100%);
  color: #ffffff;
  box-shadow: 0 16px 24px rgba(0, 31, 87, 0.18);
}

.srcc-textarea-wrapper[b-vbg90wcevf] {
  position: relative;
}

.srcc-textarea[b-vbg90wcevf] {
  width: 100%;
  min-height: 156px;
  border-radius: 16px;
  border: 1px solid #d3daeb;
  padding: 18px 20px;
  font-size: 15px;
  color: #1f2937;
  resize: vertical;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
}

.srcc-textarea:focus[b-vbg90wcevf] {
  outline: none;
  border-color: #0057ff;
  box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.16);
}

.srcc-textarea-resize[b-vbg90wcevf] {
  position: absolute;
  width: 18px;
  height: 18px;
  bottom: 14px;
  right: 16px;
  background: currentColor;
  opacity: 0.26;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M11.293 10.293 4 17.586V16H2v4h4v-2H4.414l7.293-7.293z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M11.293 10.293 4 17.586V16H2v4h4v-2H4.414l7.293-7.293z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.srcc-word-count[b-vbg90wcevf] {
  font-size: 13px;
  color: rgba(98, 108, 132, 0.8);
  text-align: right;
}

.srcc-upload-zone[b-vbg90wcevf] {
  border: 1.5px dashed rgba(126, 143, 178, 0.5);
  border-radius: 20px;
  padding: 36px 24px;
  background: rgba(241, 245, 255, 0.55);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}

.srcc-upload-icon[b-vbg90wcevf] {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 120, 255, 0.28) 0%, rgba(0, 66, 181, 0.32) 100%);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 20h14v-2H5zm7-16-7 8h4v6h6v-6h4z'/%3E%3C/svg%3E") center/22px 22px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 20h14v-2H5zm7-16-7 8h4v6h6v-6h4z'/%3E%3C/svg%3E") center/22px 22px no-repeat;
}

.srcc-upload-copy[b-vbg90wcevf] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.srcc-upload-title[b-vbg90wcevf] {
  font-size: 16px;
  font-weight: 600;
  color: #0b1b43;
}

.srcc-upload-subtitle[b-vbg90wcevf] {
  font-size: 13px;
  color: rgba(86, 99, 125, 0.76);
}

.srcc-upload-button[b-vbg90wcevf] {
  padding: 12px 24px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #032b78 0%, #001f57 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 16px 24px rgba(0, 31, 87, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.srcc-upload-button:hover[b-vbg90wcevf] {
  transform: translateY(-1px);
  box-shadow: 0 22px 32px rgba(0, 31, 87, 0.26);
}

.srcc-uploaded-files[b-vbg90wcevf] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.srcc-uploaded-title[b-vbg90wcevf] {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.srcc-uploaded-grid[b-vbg90wcevf] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.srcc-file-card[b-vbg90wcevf] {
  border-radius: 16px;
  border: 1px solid rgba(209, 218, 238, 0.9);
  padding: 14px 16px;
  background: rgba(248, 250, 255, 0.92);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 14px 22px rgba(15, 23, 42, 0.08);
}

.srcc-file-meta[b-vbg90wcevf] {
  display: flex;
  align-items: center;
  gap: 12px;
}

.srcc-file-icon[b-vbg90wcevf] {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 31, 87, 0.18) 0%, rgba(0, 90, 255, 0.22) 100%);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h7l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m7 1.5V9h5.5'/%3E%3C/svg%3E") center/22px 22px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h7l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m7 1.5V9h5.5'/%3E%3C/svg%3E") center/22px 22px no-repeat;
}

.srcc-file-text[b-vbg90wcevf] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.srcc-file-name[b-vbg90wcevf] {
  font-size: 14px;
  font-weight: 600;
  color: #0b1b43;
}

.srcc-file-size[b-vbg90wcevf] {
  font-size: 12px;
  color: rgba(98, 108, 132, 0.8);
}

.srcc-file-remove[b-vbg90wcevf] {
  align-self: flex-end;
  border: none;
  background: transparent;
  color: #0057ff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.srcc-file-remove:hover[b-vbg90wcevf] {
  text-decoration: underline;
}

.srcc-actions[b-vbg90wcevf] {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.srcc-btn[b-vbg90wcevf] {
  min-width: 140px;
  padding: 14px 24px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.srcc-btn.ghost[b-vbg90wcevf] {
  border: 1px solid #d3daeb;
  background: #ffffff;
  color: #1f2937;
}

.srcc-btn.primary[b-vbg90wcevf] {
  border: none;
  background: linear-gradient(135deg, #032b78 0%, #001f57 100%);
  color: #ffffff;
  box-shadow: 0 18px 28px rgba(0, 31, 87, 0.22);
}

.srcc-btn.outline[b-vbg90wcevf] {
  border: 1px solid #001f57;
  background: transparent;
  color: #001f57;
}

.srcc-btn:hover[b-vbg90wcevf] {
  transform: translateY(-1px);
}

.srcc-btn.primary:hover[b-vbg90wcevf] {
  box-shadow: 0 24px 36px rgba(0, 31, 87, 0.26);
}

.srcc-btn.ghost:hover[b-vbg90wcevf] {
  background: rgba(247, 249, 255, 0.88);
  box-shadow: 0 16px 24px rgba(15, 23, 42, 0.08);
}

.srcc-btn.outline:hover[b-vbg90wcevf] {
  background: rgba(0, 31, 87, 0.08);
}

.srcc-preview[b-vbg90wcevf] {
  position: relative;
}

.srcc-preview-shell[b-vbg90wcevf] {
  border-radius: 28px;
  border: 1px solid rgba(222, 228, 244, 0.9);
  background: linear-gradient(160deg, rgba(0, 31, 87, 0.88) 0%, rgba(0, 52, 151, 0.84) 62%, rgba(0, 81, 204, 0.88) 100%);
  color: #f4f6ff;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 36px 52px rgba(3, 27, 84, 0.28);
}

.srcc-preview-shell h3[b-vbg90wcevf] {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.srcc-preview-list[b-vbg90wcevf] {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}

.srcc-preview-list div[b-vbg90wcevf] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.srcc-preview-list dt[b-vbg90wcevf] {
  font-size: 12px;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  color: rgba(214, 224, 255, 0.7);
}

.srcc-preview-list dd[b-vbg90wcevf] {
  margin: 0;
  font-size: 15px;
  color: #ffffff;
}

.srcc-preview-hint[b-vbg90wcevf] {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: rgba(214, 224, 255, 0.82);
}

.srcc-preview-icon[b-vbg90wcevf] {
  width: 18px;
  height: 18px;
  opacity: 0.76;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M7 2h2v2H7zm0 3h2v7H7z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M7 2h2v2H7zm0 3h2v7H7z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.srcc-success-card[b-vbg90wcevf] {
  margin-top: 24px;
  border-radius: 24px;
  border: 1px solid rgba(214, 224, 255, 0.5);
  background: rgba(242, 247, 255, 0.92);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #0b1b43;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.srcc-success-card.visible[b-vbg90wcevf] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.srcc-success-icon[b-vbg90wcevf] {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 158, 105, 0.32) 0%, rgba(0, 104, 129, 0.36) 100%);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 17.12 5.43 13l1.41-1.41 2.71 2.7 7.07-7.07L18.02 8z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 17.12 5.43 13l1.41-1.41 2.71 2.7 7.07-7.07L18.02 8z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}

.srcc-success-copy h4[b-vbg90wcevf] {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.srcc-success-copy p[b-vbg90wcevf] {
  margin: 0;
  font-size: 14px;
  color: rgba(71, 77, 90, 0.78);
}

.srcc-success-overlay[b-vbg90wcevf] {
  position: fixed;
  inset: 0;
  background: rgba(8, 20, 49, 0.46);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  z-index: 40;
}

.srcc-success-banner[b-vbg90wcevf] {
  backdrop-filter: blur(12px);
  border-radius: 22px;
  border: 1px solid rgba(222, 228, 244, 0.6);
  background: rgba(248, 250, 255, 0.92);
  box-shadow: 0 36px 60px rgba(15, 23, 42, 0.32);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.srcc-success-banner-icon[b-vbg90wcevf] {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 158, 105, 0.32) 0%, rgba(0, 104, 129, 0.36) 100%);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 17.12 5.43 13l1.41-1.41 2.71 2.7 7.07-7.07L18.02 8z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 17.12 5.43 13l1.41-1.41 2.71 2.7 7.07-7.07L18.02 8z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}

.srcc-success-banner-copy[b-vbg90wcevf] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.srcc-success-title[b-vbg90wcevf] {
  font-size: 16px;
  font-weight: 600;
  color: #0b1b43;
}

.srcc-success-message[b-vbg90wcevf] {
  font-size: 14px;
  color: rgba(71, 77, 90, 0.78);
}

.srcc-banner-close[b-vbg90wcevf] {
  border: none;
  background: transparent;
  color: #0057ff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.srcc-banner-close:hover[b-vbg90wcevf] {
  text-decoration: underline;
}

@media (max-width: 1280px) {
  .srcc-layout[b-vbg90wcevf] {
    grid-template-columns: minmax(0, 1fr);
  }

  .srcc-preview[b-vbg90wcevf] {
    order: -1;
  }

  .srcc-preview-shell[b-vbg90wcevf] {
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
  }

  .srcc-preview-shell h3[b-vbg90wcevf] {
    min-width: 140px;
  }

  .srcc-success-card[b-vbg90wcevf] {
    margin-top: 16px;
  }
}

@media (max-width: 980px) {
  .srcc-hero[b-vbg90wcevf] {
    flex-direction: column;
  }

  .srcc-hero-stats[b-vbg90wcevf] {
    justify-content: flex-start;
  }

  .srcc-form-card[b-vbg90wcevf] {
    padding: 28px 24px;
  }
}

@media (max-width: 720px) {
  .srcc-create[b-vbg90wcevf] {
    padding: 16px 0 48px;
    gap: 28px;
  }

  .srcc-form-header[b-vbg90wcevf] {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .srcc-actions[b-vbg90wcevf] {
    flex-direction: column-reverse;
  }

  .srcc-btn[b-vbg90wcevf] {
    width: 100%;
  }

  .srcc-preview-shell[b-vbg90wcevf] {
    flex-direction: column;
  }

  .srcc-success-banner[b-vbg90wcevf] {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *[b-vbg90wcevf],
  *[b-vbg90wcevf]::before,
  *[b-vbg90wcevf]::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}



















/* Moved from inline <style> in ServiceRequestCustomerCareCreate.razor (:root vars relocated to app.css) */

    .create-service-request-container[b-vbg90wcevf] {
        width: 100%;
        display: flex;
        overflow-x: hidden;
        min-height: 100vh;
        align-items: center;
        flex-direction: column;
        background-color: rgba(246, 246, 246, 1);
        padding: 14px;
    }

    .create-service-request-frame[b-vbg90wcevf] {
        width: 100%;
        max-width: 1164px;
        min-height: 992px;
        display: flex;
        overflow: hidden;
        position: relative;
        align-items: flex-start;
        border-color: rgba(204, 204, 204, 1);
        border-style: solid;
        border-width: 0.5px;
        border-radius: 8px;
        background-color: rgba(246, 246, 246, 1);
        padding: 22px;
    }

    .create-ticket-form[b-vbg90wcevf] {
        width: 100%;
        min-height: 784px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 1);
        padding: 20px;
        gap: 29px;
    }

    .form-title[b-vbg90wcevf] {
        color: rgba(0, 31, 87, 1);
        font-size: 20px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: normal;
    }

    .form-field-container[b-vbg90wcevf] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .form-field[b-vbg90wcevf],
    .form-field-full[b-vbg90wcevf] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .form-field-full[b-vbg90wcevf] {
        width: 100%;
    }

    .field-label[b-vbg90wcevf] {
        color: rgba(20, 20, 20, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: normal;
    }

    .field-label-hint[b-vbg90wcevf] {
        color: rgba(134, 134, 134, 1);
        font-weight: 400;
    }

    .select-container[b-vbg90wcevf] {
        position: relative;
        width: 100%;
    }

    .select-field[b-vbg90wcevf] {
        width: 100%;
        height: 40px;
        padding: 11px 12px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 12px;
        background-color: transparent;
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        color: rgba(20, 20, 20, 1);
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    .select-field option:first-child[b-vbg90wcevf] {
        color: rgba(134, 134, 134, 1);
    }

    .select-field:disabled[b-vbg90wcevf] {
        background-color: rgba(246, 246, 246, 1);
        cursor: not-allowed;
    }

    .select-icon[b-vbg90wcevf] {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .textarea-container[b-vbg90wcevf] {
        width: 100%;
        height: 140px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 12px;
    }

    .textarea-field[b-vbg90wcevf] {
        width: 100%;
        height: 100%;
        padding: 12px;
        border: none;
        background-color: transparent;
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        color: rgba(20, 20, 20, 1);
        resize: none;
        outline: none;
    }

    .textarea-field[b-vbg90wcevf]::placeholder {
        color: rgba(134, 134, 134, 1);
    }

    .resize-handle[b-vbg90wcevf] {
        position: absolute;
        bottom: 4px;
        right: 4px;
        display: flex;
        align-items: center;
        gap: 2px;
        pointer-events: none;
    }

    .word-count[b-vbg90wcevf] {
        color: rgba(134, 134, 134, 1);
        font-size: 12px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        text-align: right;
        align-self: flex-end;
    }

    .file-upload-area[b-vbg90wcevf] {
        width: 100%;
        min-height: 156px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        align-items: center;
        justify-content: center;
        border: 1.5px solid rgba(50, 173, 230, 1);
        border-radius: 12px;
        background-color: rgba(50, 173, 230, 0.06);
        gap: 8px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .file-upload-area:hover[b-vbg90wcevf] {
        background-color: rgba(50, 173, 230, 0.1);
    }

    .file-upload-area.drag-over[b-vbg90wcevf] {
        border-color: rgba(0, 122, 255, 1);
        background-color: rgba(50, 173, 230, 0.12);
    }

    /* ::deep — targets the <input> rendered by the <InputFile> child component. */
    [b-vbg90wcevf] .file-input-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }

    .upload-text[b-vbg90wcevf] {
        color: rgba(20, 20, 20, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
    }

    .upload-hint[b-vbg90wcevf] {
        color: rgba(134, 134, 134, 1);
        font-size: 12px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
    }

    .upload-button[b-vbg90wcevf] {
        gap: 12px;
        padding: 8px 16px;
        display: flex;
        align-items: center;
        border-radius: 12px;
        justify-content: center;
        background-color: rgba(0, 90, 255, 1);
        margin-top: 4px;
    }

    .upload-button span[b-vbg90wcevf] {
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        line-height: normal;
    }

    .upload-button:hover[b-vbg90wcevf] {
        background-color: rgba(0, 75, 215, 1);
    }

    .uploaded-files-section[b-vbg90wcevf] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .uploaded-files-title[b-vbg90wcevf] {
        color: rgba(20, 20, 20, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: normal;
    }

    .uploaded-files-grid[b-vbg90wcevf] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }

    .file-preview-card[b-vbg90wcevf] {
        width: 200px;
        height: 132px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 12px;
        overflow: hidden;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .file-preview-header[b-vbg90wcevf] {
        display: flex;
        gap: 8px;
        padding: 16px 12px 12px 12px;
        align-items: center;
    }

    .file-preview-info[b-vbg90wcevf] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }

    .file-preview-name[b-vbg90wcevf] {
        color: rgba(20, 20, 20, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-preview-size[b-vbg90wcevf] {
        color: rgba(134, 134, 134, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
    }

    .file-preview-actions[b-vbg90wcevf] {
        display: flex;
        gap: 12px;
        padding: 0 12px 12px 12px;
        align-items: center;
    }

    .file-preview-btn[b-vbg90wcevf] {
        flex: 1;
        padding: 12px 24px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 8px;
        background-color: transparent;
        cursor: pointer;
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        color: rgba(20, 20, 20, 1);
    }

    .file-preview-btn:disabled[b-vbg90wcevf] {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .file-delete-btn[b-vbg90wcevf] {
        width: 36px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(246, 246, 246, 1) 0%, rgba(230, 230, 230, 1) 100%);
        cursor: pointer;
        padding: 0;
    }

    .file-delete-btn:hover[b-vbg90wcevf] {
        background: linear-gradient(180deg, rgba(230, 230, 230, 1) 0%, rgba(220, 220, 220, 1) 100%);
    }

    .form-actions[b-vbg90wcevf] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
    }

    .btn-cancel[b-vbg90wcevf],
    .btn-submit[b-vbg90wcevf] {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        padding: 16px 24px;
        cursor: pointer;
        font-family: Ubuntu, sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
        transition: all 0.2s ease;
    }

    .btn-cancel[b-vbg90wcevf] {
        width: 150px;
        border: 0.5px solid rgba(204, 204, 204, 1);
        background-color: transparent;
    }

    .btn-cancel span[b-vbg90wcevf] {
        color: rgba(20, 20, 20, 1);
    }

    .btn-cancel:hover[b-vbg90wcevf] {
        background-color: rgba(246, 246, 246, 1);
    }

    .btn-submit[b-vbg90wcevf] {
        width: 173px;
        background-color: rgba(0, 31, 87, 1);
        border: none;
    }

    .btn-submit span[b-vbg90wcevf] {
        color: rgba(255, 255, 255, 1);
    }

    .btn-submit:hover[b-vbg90wcevf] {
        background-color: rgba(0, 25, 70, 1);
    }

    .btn-submit:disabled[b-vbg90wcevf],
    .btn-cancel:disabled[b-vbg90wcevf] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .error-message[b-vbg90wcevf] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background-color: rgba(255, 59, 48, 0.1);
        border: 1px solid rgba(255, 59, 48, 1);
        border-radius: 12px;
        color: rgba(255, 59, 48, 1);
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        margin-top: 12px;
    }

    /* Responsive adjustments */
    @media (max-width: 1024px) {
        .form-field-container[b-vbg90wcevf] {
            grid-template-columns: 1fr;
        }

        .create-service-request-frame[b-vbg90wcevf] {
            padding: 16px;
        }

        .create-ticket-form[b-vbg90wcevf] {
            padding: 16px;
        }

        .uploaded-files-grid[b-vbg90wcevf] {
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        }

        .file-preview-card[b-vbg90wcevf] {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .create-service-request-container[b-vbg90wcevf] {
            padding: 8px;
        }

        .form-actions[b-vbg90wcevf] {
            flex-direction: column-reverse;
            gap: 12px;
        }

        .btn-cancel[b-vbg90wcevf],
        .btn-submit[b-vbg90wcevf] {
            width: 100%;
        }

        .uploaded-files-grid[b-vbg90wcevf] {
            grid-template-columns: 1fr;
        }

        .file-preview-card[b-vbg90wcevf] {
            width: 100%;
        }
    }
/* /Pages/ServiceRequestDepartment.razor.rz.scp.css */
/* Department Head Dashboard Styles - Based on DU 1 Design */

.department-head-dashboard-container[b-7gt1z3ek4w] {
    width: 100%;
    min-height: 100vh;
    background-color: rgba(246, 246, 246, 1);
    padding: 20px;
    font-family: 'Ubuntu', sans-serif;
}

.dashboard-content[b-7gt1z3ek4w] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Stats Row */
.stats-row[b-7gt1z3ek4w] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card[b-7gt1z3ek4w] {
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    padding: 20px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.stat-label[b-7gt1z3ek4w] {
    color: rgba(20, 20, 20, 1);
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
}

.stat-value[b-7gt1z3ek4w] {
    color: rgba(20, 20, 20, 1);
    font-size: 32px;
    font-weight: 500;
    line-height: normal;
}

/* Filters Section */
.filters-section[b-7gt1z3ek4w] {
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Search now lives in the table header row (title · search · results-count),
   so it shrinks to fit rather than filling the width. */
.search-container[b-7gt1z3ek4w] {
    flex: 0 1 auto;
}

.search-input[b-7gt1z3ek4w] {
    width: 100%;
    max-width: 320px;
    height: 38px;
    padding: 8px 14px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: rgba(255, 255, 255, 1);
}

.search-input[b-7gt1z3ek4w]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.filters-container[b-7gt1z3ek4w] {
    background-color: rgba(247, 247, 247, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    padding: 16px 18px;
}

.filters-row[b-7gt1z3ek4w] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.date-filter-item[b-7gt1z3ek4w] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 160px;
}

.filter-label[b-7gt1z3ek4w] {
    color: rgba(134, 134, 134, 1);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.filter-help[b-7gt1z3ek4w] {
    display: inline-block;
    margin-left: 6px;
    color: rgba(110, 110, 110, 1);
    font-size: 14px;
    cursor: help;
    user-select: none;
}

.filter-help:hover[b-7gt1z3ek4w],
.filter-help:focus[b-7gt1z3ek4w] {
    color: rgba(40, 40, 40, 1);
    outline: none;
}

.date-input[b-7gt1z3ek4w] {
    width: 100%;
    height: 48px;
    padding: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: rgba(255, 255, 255, 1);
}

.apply-btn[b-7gt1z3ek4w] {
    height: 48px;
    padding: 12px 20px;
    background-color: rgba(0, 31, 87, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    margin-right: 20px;
}

.apply-btn:hover[b-7gt1z3ek4w] {
    background-color: rgba(0, 31, 87, 0.9);
}

.dropdown-filter-item[b-7gt1z3ek4w] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 160px;
}

.filter-dropdown[b-7gt1z3ek4w] {
    width: 100%;
    height: 48px;
    padding: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: rgba(255, 255, 255, 1);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6.5 6.5L12 1' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 13px 8px;
    padding-right: 40px;
}

/* Requests Table Section */
.requests-table-section[b-7gt1z3ek4w] {
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    padding: 20px;
}

.table-header-section[b-7gt1z3ek4w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
}

.table-title[b-7gt1z3ek4w] {
    color: rgba(20, 20, 20, 1);
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.table-subtitle[b-7gt1z3ek4w] {
    color: rgba(134, 134, 134, 1);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
}

.table-container[b-7gt1z3ek4w] {
    overflow-x: auto;
}

.requests-table[b-7gt1z3ek4w] {
    width: 100%;
    border-collapse: collapse;
}

.requests-table thead[b-7gt1z3ek4w] {
    border-bottom: 1px solid rgba(204, 204, 204, 1);
}

.requests-table th[b-7gt1z3ek4w] {
    color: rgba(134, 134, 134, 1);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    white-space: nowrap;
}

.requests-table td[b-7gt1z3ek4w] {
    color: rgba(20, 20, 20, 1);
    font-size: 14px;
    font-weight: 400;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    white-space: nowrap;
}

.requests-table tbody tr:hover[b-7gt1z3ek4w] {
    background-color: rgba(247, 247, 247, 1);
}

/* Request ID column hugs its content so Category sits right beside it
   (width:1% collapses the column to its minimum in an auto-layout table). */
.requests-table th:first-child[b-7gt1z3ek4w],
.requests-table td:first-child[b-7gt1z3ek4w] {
    width: 1%;
    white-space: nowrap;
}

/* Date Raised column: keep the timestamp on a single line. */
.date-raised-cell[b-7gt1z3ek4w] {
    white-space: nowrap;
}

.request-id-link[b-7gt1z3ek4w] {
    color: rgba(0, 31, 87, 1);
    font-size: 13px;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
}

.request-id-link:hover[b-7gt1z3ek4w] {
    color: rgba(0, 31, 87, 0.8);
}

.request-id-cell-stack[b-7gt1z3ek4w] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Status-aware flag on tickets with an RCA/CAP lifecycle (overdue / pending / returned / approved). */
.rca-cap-flag[b-7gt1z3ek4w] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0, 31, 87, 0.1);
    color: rgba(0, 31, 87, 1);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    vertical-align: middle;
    white-space: nowrap;
}

.rca-cap-flag--overdue[b-7gt1z3ek4w] {
    background: rgba(255, 59, 48, 0.12);
    color: rgba(197, 34, 31, 1);
}

.rca-cap-flag--pending[b-7gt1z3ek4w] {
    background: rgba(0, 122, 255, 0.12);
    color: rgba(0, 90, 200, 1);
}

.rca-cap-flag--returned[b-7gt1z3ek4w] {
    background: rgba(255, 149, 0, 0.16);
    color: rgba(178, 98, 0, 1);
}

.rca-cap-flag--approved[b-7gt1z3ek4w] {
    background: rgba(52, 199, 89, 0.15);
    color: rgba(30, 126, 52, 1);
}

/* Severity Badges */
.severity-badge[b-7gt1z3ek4w] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

/* Enterprise column: owner name + who raised it (on-behalf vs self).
   Long names truncate with an ellipsis; the full name shows on hover (title attr). */
.enterprise-cell .enterprise-name[b-7gt1z3ek4w] {
    font-weight: 500;
    font-size: 12px;
    color: rgba(20, 20, 20, 1);
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-onbehalf[b-7gt1z3ek4w] {
    font-size: 12px;
    color: rgba(134, 134, 134, 1);
    margin-top: 2px;
    word-break: break-word;
}

.enterprise-tag[b-7gt1z3ek4w] {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.enterprise-tag--for[b-7gt1z3ek4w] {
    background-color: rgba(0, 31, 87, 0.1);
    color: rgba(0, 31, 87, 1);
    border: 0.5px solid rgba(0, 31, 87, 0.4);
}

.enterprise-tag--by[b-7gt1z3ek4w] {
    background-color: rgba(134, 134, 134, 0.12);
    color: rgba(90, 90, 90, 1);
    border: 0.5px solid rgba(134, 134, 134, 0.5);
}

.severity-critical[b-7gt1z3ek4w] {
    background-color: rgba(255, 59, 48, 0.12);
    color: rgba(255, 59, 48, 1);
    border: 0.5px solid rgba(255, 59, 48, 1);
}

.severity-high[b-7gt1z3ek4w] {
    background-color: rgba(162, 132, 94, 0.12);
    color: rgba(162, 132, 94, 1);
    border: 0.5px solid rgba(162, 132, 94, 1);
}

.severity-medium[b-7gt1z3ek4w] {
    background-color: rgba(255, 149, 0, 0.12);
    color: rgba(255, 149, 0, 1);
    border: 0.5px solid rgba(255, 149, 0, 1);
}

.severity-low[b-7gt1z3ek4w] {
    background-color: rgba(0, 199, 190, 0.12);
    color: rgba(0, 199, 190, 1);
    border: 0.5px solid rgba(0, 199, 190, 1);
}

/* Status Badges */
.status-badge[b-7gt1z3ek4w] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.status-badge--clickable[b-7gt1z3ek4w] {
    cursor: pointer;
    transition: transform 80ms ease, box-shadow 80ms ease;
}

.status-badge--clickable:hover[b-7gt1z3ek4w] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.status-badge--clickable:focus-visible[b-7gt1z3ek4w] {
    outline: 2px solid rgba(56, 132, 255, 0.55);
    outline-offset: 2px;
}

.status-open[b-7gt1z3ek4w] {
    background-color: rgba(255, 149, 0, 0.12);
    color: rgba(255, 149, 0, 1);
    border: 0.5px solid rgba(255, 149, 0, 1);
}

.status-in-progress[b-7gt1z3ek4w] {
    background-color: rgba(0, 122, 255, 0.12);
    color: rgba(0, 122, 255, 1);
    border: 0.5px solid rgba(0, 122, 255, 1);
}

.status-resolved[b-7gt1z3ek4w] {
    background-color: rgba(52, 199, 89, 0.12);
    color: rgba(52, 199, 89, 1);
    border: 0.5px solid rgba(52, 199, 89, 1);
}

.status-reopened[b-7gt1z3ek4w] {
    background-color: rgba(255, 59, 48, 0.12);
    color: rgba(255, 59, 48, 1);
    border: 0.5px solid rgba(255, 59, 48, 1);
}

.status-closed[b-7gt1z3ek4w] {
    background-color: rgba(162, 132, 94, 0.12);
    color: rgba(162, 132, 94, 1);
    border: 0.5px solid rgba(162, 132, 94, 1);
}

.status-pending-customer[b-7gt1z3ek4w],
.status-pending-third-party[b-7gt1z3ek4w] {
    background-color: rgba(148, 163, 184, 0.18);
    color: rgba(71, 85, 105, 1);
    border: 0.5px solid rgba(148, 163, 184, 1);
}

/* On-hold SLA-state cue: green while the (paused) resolution deadline is still ahead,
   red once it has elapsed — so a director can triage held tickets at a glance. */
.status-onhold-ok[b-7gt1z3ek4w] {
    background-color: rgba(52, 199, 89, 0.12);
    color: rgba(52, 199, 89, 1);
    border: 0.5px solid rgba(52, 199, 89, 1);
}

.status-onhold-elapsed[b-7gt1z3ek4w] {
    background-color: rgba(255, 59, 48, 0.12);
    color: rgba(255, 59, 48, 1);
    border: 0.5px solid rgba(255, 59, 48, 1);
}

/* Resolution-due cell when the deadline has elapsed on a held ticket. */
.sla-due--overdue[b-7gt1z3ek4w] {
    color: rgba(255, 59, 48, 1);
    font-weight: 500;
}

.view-btn[b-7gt1z3ek4w] {
    padding: 6px 8px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 4px;
    background-color: transparent;
    color: rgba(20, 20, 20, 1);
    font-size: 12px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-btn:hover[b-7gt1z3ek4w] {
    background-color: rgba(247, 247, 247, 1);
    border-color: rgba(0, 31, 87, 1);
}

/* Icon-only View button: centre the eye SVG. */
.view-btn--icon[b-7gt1z3ek4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: rgba(0, 31, 87, 1);
}

.view-btn--icon:hover[b-7gt1z3ek4w] {
    color: rgba(0, 31, 87, 1);
}

/* Pagination Controls */
.pagination-controls[b-7gt1z3ek4w] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    flex-wrap: wrap;
}

.pagination-btn[b-7gt1z3ek4w] {
    height: 28px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 4px;
    background-color: transparent;
    color: rgba(20, 20, 20, 1);
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
}

.pagination-btn:hover:not(:disabled)[b-7gt1z3ek4w] {
    background-color: rgba(247, 247, 247, 1);
    border-color: rgba(0, 31, 87, 1);
}

.pagination-btn:disabled[b-7gt1z3ek4w] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn svg[b-7gt1z3ek4w] {
    width: 12px;
    height: 12px;
}

.pagination-number[b-7gt1z3ek4w] {
    min-width: 40px;
    font-size: 14px;
}

.pagination-text-btn[b-7gt1z3ek4w] {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pagination-btn.active[b-7gt1z3ek4w] {
    background-color: rgba(0, 31, 87, 1);
    color: rgba(255, 255, 255, 1);
    border-color: rgba(0, 31, 87, 1);
}

.pagination-ellipsis[b-7gt1z3ek4w] {
    padding: 0 4px;
    color: rgba(134, 134, 134, 1);
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-row[b-7gt1z3ek4w] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filters-row[b-7gt1z3ek4w] {
        flex-wrap: wrap;
    }
    
    .date-filter-item[b-7gt1z3ek4w],
    .dropdown-filter-item[b-7gt1z3ek4w] {
        min-width: 150px;
        flex: 1 1 auto;
    }
}

@media (max-width: 768px) {
    .stats-row[b-7gt1z3ek4w] {
        grid-template-columns: 1fr;
    }
    
    .dashboard-content[b-7gt1z3ek4w] {
        padding: 12px;
    }
    
    .filters-row[b-7gt1z3ek4w] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-filter-item[b-7gt1z3ek4w],
    .dropdown-filter-item[b-7gt1z3ek4w] {
        width: 100%;
        min-width: 100%;
    }
    
    .apply-btn[b-7gt1z3ek4w] {
        width: 100%;
    }
    
    .table-header-section[b-7gt1z3ek4w] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .search-container[b-7gt1z3ek4w] {
        width: 100%;
    }

    .search-input[b-7gt1z3ek4w] {
        max-width: 100%;
    }
    
    .requests-table[b-7gt1z3ek4w] {
        font-size: 12px;
    }
    
    .requests-table th[b-7gt1z3ek4w],
    .requests-table td[b-7gt1z3ek4w] {
        padding: 8px;
    }
}

/* Loading and Error States */
.loading-message[b-7gt1z3ek4w],
.empty-message[b-7gt1z3ek4w] {
    text-align: center;
    padding: 40px 20px;
    color: rgba(134, 134, 134, 1);
    font-size: 16px;
}

.error-message[b-7gt1z3ek4w] {
    background-color: rgba(255, 245, 245, 1);
    border: 1px solid rgba(255, 0, 0, 0.3);
    color: rgba(200, 0, 0, 1);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

/* Inline date-range validation error under the filter row */
.date-filter-error[b-7gt1z3ek4w] {
    color: rgba(176, 0, 32, 1);
    font-size: 13px;
    font-family: 'Ubuntu', sans-serif;
    margin-top: 6px;
    flex-basis: 100%;
}

/* Reset-filter actions — pushed to the extreme right of the filter row. */
.date-filter-actions[b-7gt1z3ek4w] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Circular reset button — matches the admin page treatment. */
.reload-btn[b-7gt1z3ek4w] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.reload-btn:hover[b-7gt1z3ek4w] {
    background: #e5e7eb;
}

.reload-icon[b-7gt1z3ek4w] {
    width: 20px;
    height: 20px;
    fill: #374151;
}

/* Export controls sit on their own line, right-aligned, beneath the reset button. */
.export-row[b-7gt1z3ek4w] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

/* Compact format picker sitting beside the Export button. Override the inherited
   .filter-dropdown padding/font so the label fits the 40px height without clipping. */
.export-format-select[b-7gt1z3ek4w] {
    height: 40px;
    min-width: 92px;
    padding: 0 34px 0 12px;
    font-size: 14px;
    border-radius: 8px;
}

/* Primary-style Export button — brand navy, matches the page's primary controls. */
.export-btn[b-7gt1z3ek4w] {
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: 6px;
    background: rgba(0, 31, 87, 1);
    color: #ffffff;
    font-size: 14px;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.export-btn:hover[b-7gt1z3ek4w] {
    background: rgba(0, 24, 68, 1);
}

.export-btn:disabled[b-7gt1z3ek4w] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---- Tab strip (All Requests / Paused / Re-assigned Out) ----
   Sits between the page title and the stat cards. Visually anchored to the same
   white card vocabulary as the filter section so it reads as part of the page chrome,
   not a floating control. Active tab is filled with the brand navy used elsewhere
   for primary buttons; inactive tabs are flat with a hover lift. */

.tab-strip[b-7gt1z3ek4w] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    align-self: flex-start;
}

.tab-strip__btn[b-7gt1z3ek4w] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: rgba(20, 20, 20, 1);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.tab-strip__btn:hover:not(.is-active)[b-7gt1z3ek4w] {
    background-color: rgba(0, 43, 130, 0.05);
}

.tab-strip__btn:focus-visible[b-7gt1z3ek4w] {
    outline: 2px solid rgba(0, 43, 130, 0.4);
    outline-offset: 2px;
}

.tab-strip__btn.is-active[b-7gt1z3ek4w] {
    background-color: rgba(0, 31, 87, 1);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 31, 87, 0.2);
}

/* ---- Paused tab — small badge under the status pill showing the pause-reason code,
   plus a "Paused Since" cell. Kept low-key so it doesn't compete with the status badge. */

.pause-reason-code[b-7gt1z3ek4w] {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(0, 31, 87, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ---- Re-assigned Out tab — long remarks need to clamp so the row height stays
   uniform. The full text is exposed via the title attribute on hover. */

.remarks-cell[b-7gt1z3ek4w] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
    color: rgba(20, 20, 20, 0.8);
}

.text-muted[b-7gt1z3ek4w] {
    color: rgba(134, 134, 134, 1);
}

@media (max-width: 768px) {
    .tab-strip[b-7gt1z3ek4w] {
        width: 100%;
        justify-content: stretch;
    }

    .tab-strip__btn[b-7gt1z3ek4w] {
        flex: 1 1 0;
        padding: 10px 12px;
        font-size: 14px;
    }

    .remarks-cell[b-7gt1z3ek4w] {
        max-width: 200px;
    }
}


/* Handler-assignment badge on the department list */
.handler-count-badge[b-7gt1z3ek4w] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background-color: rgba(29, 78, 216, 0.10);
    color: #1d4ed8;
    border: 0.5px solid rgba(29, 78, 216, 0.5);
    white-space: nowrap;
    cursor: default;
}
/* /Pages/ServiceRequestDepartmentDetails.razor.rz.scp.css */
/* Service Request Details Page Styles - Based on DU 2-3 Design */

.request-details-container[b-8485enx16m] {
    width: 100%;
    min-height: 100vh;
    background-color: rgba(246, 246, 246, 1);
    padding: 20px;
    font-family: 'Ubuntu', sans-serif;
}

.details-header[b-8485enx16m] {
    margin-bottom: 24px;
}

.details-title[b-8485enx16m] {
    color: rgba(20, 20, 20, 1);
    font-size: 22px;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.details-title span[b-8485enx16m] {
    font-weight: 500;
}

/* Bottom-of-page Cancel action (replaces the old top back button). */
.details-footer[b-8485enx16m] {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid rgba(204, 204, 204, 1);
}

/* Same shape as the operational buttons (Reassign / Start Progress), but a light outline
   (matching .btn-cancel) so it reads as a secondary action. */
.btn-cancel-page[b-8485enx16m] {
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: transparent;
    color: rgba(20, 20, 20, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
}

.btn-cancel-page:hover[b-8485enx16m] {
    background-color: rgba(245, 245, 245, 1);
}

/* Read-only banner — shown when a DepartmentHead opens a ticket that has been
   re-assigned out of their sub-department. Sits between the title and the main
   content; uses an amber palette so it reads as informational, not an error. */
.reassigned-banner[b-8485enx16m] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background-color: #FFF8E5;
    border: 1px solid #F4D77A;
    border-radius: 8px;
    color: #5C4A0E;
    font-size: 14px;
    line-height: 1.5;
}

.reassigned-banner svg[b-8485enx16m] {
    flex: 0 0 20px;
    margin-top: 2px;
    color: #B48708;
}

.reassigned-banner strong[b-8485enx16m] {
    font-weight: 600;
    color: #3F320A;
}

.details-content[b-8485enx16m] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

/* Main Section */
.main-section[b-8485enx16m] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Status Card */
.status-card[b-8485enx16m] {
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-badges[b-8485enx16m] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.status-badge[b-8485enx16m],
.severity-badge[b-8485enx16m] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.status-pending[b-8485enx16m] {
    background-color: rgba(255, 149, 0, 0.12);
    color: rgba(255, 149, 0, 1);
    border: 0.5px solid rgba(255, 149, 0, 1);
}

.status-in-progress[b-8485enx16m] {
    background-color: rgba(0, 122, 255, 0.12);
    color: rgba(0, 122, 255, 1);
    border: 0.5px solid rgba(0, 122, 255, 1);
}

.status-resolved[b-8485enx16m] {
    background-color: rgba(52, 199, 89, 0.12);
    color: rgba(52, 199, 89, 1);
    border: 0.5px solid rgba(52, 199, 89, 1);
}

.status-treated[b-8485enx16m] {
    background-color: rgba(20, 184, 166, 0.12);
    color: rgba(13, 148, 136, 1);
    border: 0.5px solid rgba(20, 184, 166, 1);
}

/* Open - Assigned: DH has assigned a handler; ticket acknowledged but not yet In-Progress. */
.status-assigned[b-8485enx16m] {
    background-color: rgba(217, 119, 6, 0.12);
    color: rgba(180, 83, 9, 1);
    border: 0.5px solid rgba(217, 119, 6, 1);
}

.severity-critical[b-8485enx16m] {
    background-color: rgba(255, 59, 48, 0.12);
    color: rgba(255, 59, 48, 1);
    border: 0.5px solid rgba(255, 59, 48, 1);
}

.severity-high[b-8485enx16m] {
    background-color: rgba(162, 132, 94, 0.12);
    color: rgba(162, 132, 94, 1);
    border: 0.5px solid rgba(162, 132, 94, 1);
}

.severity-medium[b-8485enx16m] {
    background-color: rgba(255, 149, 0, 0.12);
    color: rgba(255, 149, 0, 1);
    border: 0.5px solid rgba(255, 149, 0, 1);
}

.severity-low[b-8485enx16m] {
    background-color: rgba(0, 199, 190, 0.12);
    color: rgba(0, 199, 190, 1);
    border: 0.5px solid rgba(0, 199, 190, 1);
}

.age-badge[b-8485enx16m] {
    color: rgba(134, 134, 134, 1);
    font-size: 16px;
    font-weight: 400;
}

.email-address[b-8485enx16m] {
    color: rgba(0, 31, 87, 1);
    font-size: 16px;
    font-weight: 400;
    text-align: right;
}

/* SLA Card */
.sla-card[b-8485enx16m] {
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-left: 4px solid rgba(0, 31, 87, 0.6);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sla-title[b-8485enx16m] {
    color: rgba(134, 134, 134, 1);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.sla-title label[b-8485enx16m] {
    margin: 0;
}

.sla-info[b-8485enx16m] {
    /*color: rgba(20, 20, 20, 1);*/
    color: rgba(255, 59, 48, 1);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* Breached / escalated: emphasise the overdue state. */
.sla-breached[b-8485enx16m] {
    font-weight: 600;
}

/* Neutral note (resolved / paused): de-emphasise vs the red warning text. */
.sla-note[b-8485enx16m] {
    color: rgba(134, 134, 134, 1);
}

/* Info Cards */
.info-card[b-8485enx16m] {
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-card label[b-8485enx16m] {
    color: rgba(134, 134, 134, 1);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.info-row[b-8485enx16m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}



.info-item span[b-8485enx16m] {
    color: rgba(20, 20, 20, 1);
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
}

.description-text[b-8485enx16m] {
    color: rgba(134, 134, 134, 1);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

/* Attachments */
.attachments-list[b-8485enx16m] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attachment-item[b-8485enx16m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: rgba(247, 247, 247, 1);
    border-radius: 8px;
}

.attachment-name[b-8485enx16m] {
    color: rgba(20, 20, 20, 1);
    font-size: 14px;
    font-weight: 400;
}

.attachment-size[b-8485enx16m] {
    color: rgba(134, 134, 134, 1);
    font-size: 12px;
    font-weight: 400;
}

.attachment-link[b-8485enx16m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: #0066cc;
    cursor: pointer;
    transition: all 0.2s ease;
}

.attachment-link:hover[b-8485enx16m] {
    color: #0052a3;
    text-decoration: underline;
}

.attachment-link .attachment-name[b-8485enx16m] {
    color: #0066cc;
    text-decoration: underline;
}

.attachment-link:hover .attachment-name[b-8485enx16m] {
    color: #0052a3;
}

/* Timeline */
.timeline-card[b-8485enx16m] {
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    padding: 20px;
}

.timeline-header[b-8485enx16m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
}

.timeline-title[b-8485enx16m] {
    color: rgba(20, 20, 20, 1);
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.timeline-count[b-8485enx16m] {
    color: rgba(134, 134, 134, 1);
    font-size: 14px;
    font-weight: 400;
}

.timeline-items[b-8485enx16m] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-item[b-8485enx16m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeline-item-header[b-8485enx16m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-user-info[b-8485enx16m] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.timeline-user[b-8485enx16m] {
    color: rgba(20, 20, 20, 1);
    font-size: 14px;
    font-weight: 500;
}

.timeline-action[b-8485enx16m] {
    color: rgba(134, 134, 134, 1);
    font-size: 14px;
    font-weight: 400;
}

.timeline-date-info[b-8485enx16m] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.timeline-date[b-8485enx16m],
.timeline-time[b-8485enx16m] {
    color: rgba(134, 134, 134, 1);
    font-size: 12px;
    font-weight: 400;
}

.timeline-description[b-8485enx16m] {
    color: rgba(20, 20, 20, 1);
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    padding-left: 20px;
}

/* Minor Section */
.minor-section[b-8485enx16m] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.remark-card[b-8485enx16m],
.reassign-card[b-8485enx16m] {
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card-title[b-8485enx16m] {
    color: rgba(20, 20, 20, 1);
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.card-subtitle[b-8485enx16m] {
    color: rgba(134, 134, 134, 1);
    font-size: 14px;
    font-weight: 400;
}

.reassign-header[b-8485enx16m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reassign-content[b-8485enx16m] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-label[b-8485enx16m] {
    color: rgba(134, 134, 134, 1);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.remark-textarea[b-8485enx16m],
.reason-textarea[b-8485enx16m] {
    width: 100%;
    padding: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: rgba(255, 255, 255, 1);
    resize: vertical;
    height: 60px;
}

.remark-textarea[b-8485enx16m]::placeholder,
.reason-textarea[b-8485enx16m]::placeholder {
    color: rgba(134, 134, 134, 1);
}

.department-dropdown[b-8485enx16m] {
    width: 100%;
    height: 48px;
    padding: 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
    color: rgba(20, 20, 20, 1);
    background-color: rgba(255, 255, 255, 1);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6.5 6.5L12 1' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 13px 8px;
    padding-right: 40px;
}

/* Clickable trigger that opens the shared SelectionModal — mirrors .department-dropdown's box
   (size/border/caret) while behaving like a button (div) instead of a native <select>. */
.department-picker-trigger[b-8485enx16m] {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.department-picker-trigger .placeholder[b-8485enx16m] {
    color: rgba(134, 134, 134, 1);
}

.department-picker-trigger.is-disabled[b-8485enx16m] {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

.remark-actions[b-8485enx16m] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-cancel[b-8485enx16m],
.btn-add-remark[b-8485enx16m],
.btn-reassign[b-8485enx16m],
.btn-resolve[b-8485enx16m],
.btn-start-progress-page[b-8485enx16m],
.btn-done[b-8485enx16m] {
    padding: 16px 24px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel[b-8485enx16m] {
    background-color: transparent;
    color: rgba(20, 20, 20, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
}

.btn-cancel:hover[b-8485enx16m] {
    background-color: rgba(247, 247, 247, 1);
}

.btn-add-remark[b-8485enx16m],
.btn-reassign[b-8485enx16m],
.btn-resolve[b-8485enx16m],
.btn-start-progress-page[b-8485enx16m],
.btn-done[b-8485enx16m] {
    background-color: rgba(0, 31, 87, 1);
    color: rgba(255, 255, 255, 1);
}

.btn-add-remark:hover[b-8485enx16m],
.btn-reassign:hover[b-8485enx16m],
.btn-resolve:hover[b-8485enx16m],
.btn-start-progress-page:hover[b-8485enx16m],
.btn-done:hover[b-8485enx16m] {
    background-color: rgba(0, 31, 87, 0.9);
}

.btn-start-progress-page[b-8485enx16m] {
    width: 100%;
    margin-bottom: 8px;
}

/* Disabled state for the DH hand-off: once a handler is assigned, Start Progress, Reassign and
   Add-comments/files are greyed out for the Department Head. */
.btn-start-progress-page:disabled[b-8485enx16m],
.btn-start-progress-page:disabled:hover[b-8485enx16m],
.btn-reassign:disabled[b-8485enx16m],
.btn-reassign:disabled:hover[b-8485enx16m],
.btn-add-remark:disabled[b-8485enx16m],
.btn-add-remark:disabled:hover[b-8485enx16m] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-resolve[b-8485enx16m] {
    width: 100%;
    margin-top: 8px;
}

.btn-done[b-8485enx16m] {
    align-self: flex-end;
    padding: 12px 24px;
    font-size: 14px;
}

.loading-container[b-8485enx16m] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    font-size: 16px;
    color: rgba(134, 134, 134, 1);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .details-content[b-8485enx16m] {
        grid-template-columns: 1fr;
    }
    
    .info-row[b-8485enx16m] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .request-details-container[b-8485enx16m] {
        padding: 12px;
    }
    
    .status-card[b-8485enx16m] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .email-address[b-8485enx16m] {
        text-align: left;
    }
    
    .timeline-item-header[b-8485enx16m] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/* Moved from inline <style> in ServiceRequestDepartmentDetails.razor */
/* Reassignment confirmation modal — guards the user against an accidental
   reassign click since the action sends emails and removes the ticket from
   the active queue. */
.reassign-confirm-overlay[b-8485enx16m] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 16px;
}

.reassign-confirm-card[b-8485enx16m] {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.reassign-confirm-card h3[b-8485enx16m] {
    margin: 0 0 12px;
    font-size: 1.15rem;
    color: #0f172a;
}

.reassign-confirm-card p[b-8485enx16m] {
    margin: 0 0 8px;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.45;
}

.reassign-confirm-detail[b-8485enx16m] {
    color: #64748b;
    font-size: 0.85rem;
}

.reassign-confirm-reason[b-8485enx16m] {
    margin-top: 4px;
    padding: 8px 12px;
    background: #f8fafc;
    border-left: 3px solid #94a3b8;
    border-radius: 4px;
    color: #475569;
    font-size: 0.88rem;
}

.reassign-confirm-actions[b-8485enx16m] {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.resolved-actions-note[b-8485enx16m] {
    padding: 20px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.95rem;
    text-align: center;
}

/* Put on Hold / Resume actions */
.btn-hold[b-8485enx16m] {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    background: #001F57;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
}

.btn-hold:hover:not(:disabled)[b-8485enx16m] {
        background: #001F57;
}

.btn-resume[b-8485enx16m] {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    background: #001F57;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
}

.btn-resume:hover:not(:disabled)[b-8485enx16m] {
        background: #001F57;
}

.btn-hold:disabled[b-8485enx16m],
.btn-resume:disabled[b-8485enx16m] {
    opacity: 0.6;
    cursor: not-allowed;
}

.hold-modal-overlay[b-8485enx16m] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.hold-modal[b-8485enx16m] {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.hold-modal-header[b-8485enx16m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e5e7eb;
}

.hold-modal-header h3[b-8485enx16m] {
    margin: 0;
    font-size: 1.05rem;
    color: #111827;
}

.hold-modal-close[b-8485enx16m] {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
}

.hold-modal-body[b-8485enx16m] {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hold-modal-hint[b-8485enx16m] {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.hold-field[b-8485enx16m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hold-field label[b-8485enx16m] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

.required-marker[b-8485enx16m] {
    color: #dc2626;
    margin-left: 2px;
}

.hold-input[b-8485enx16m] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #111827;
    box-sizing: border-box;
}

.hold-modal-footer[b-8485enx16m] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 22px;
    border-top: 1px solid #e5e7eb;
}

.hold-modal-footer .btn-hold[b-8485enx16m] {
    width: auto;
    margin-top: 0;
}

/* Remark History: card style per comment (like CustomerCare) */
.remark-history-list[b-8485enx16m] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.remark-history-card[b-8485enx16m] {
    padding: 14px 18px;
    border-radius: 14px;
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
    color: #111827;
}

.remark-card-description[b-8485enx16m] {
    margin: 0;
    line-height: 1.5;
}

.remark-card-meta[b-8485enx16m] {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.remark-card-attachments[b-8485enx16m] {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.remark-card-attachment-item[b-8485enx16m] {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.remark-card-attachment-link[b-8485enx16m] {
    color: #1d4ed8;
    text-decoration: none;
}

.remark-card-attachment-link:hover[b-8485enx16m] {
    text-decoration: underline;
}

.remark-card-attachment-name[b-8485enx16m] {
    color: #374151;
}

.remark-card-attachment-size[b-8485enx16m] {
    color: #9ca3af;
    font-size: 12px;
}

/* ----- Sub-department handler assignment ----- */
.handlers-card[b-8485enx16m] {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background-color: #fafafa;
}

.handlers-header[b-8485enx16m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.handlers-title[b-8485enx16m] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.btn-assign-handlers[b-8485enx16m] {
    padding: 6px 12px;
    border: 1px solid #1d4ed8;
    border-radius: 8px;
    background-color: #1d4ed8;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.btn-assign-handlers:disabled[b-8485enx16m] {
    opacity: 0.6;
    cursor: not-allowed;
}

.handlers-empty[b-8485enx16m] {
    font-size: 13px;
    color: #6b7280;
    margin: 4px 0 0 0;
}

.handlers-list[b-8485enx16m] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.handler-row[b-8485enx16m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.handler-info[b-8485enx16m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.handler-name[b-8485enx16m] {
    font-size: 14px;
    color: #111827;
    font-weight: 500;
}

.handler-email[b-8485enx16m] {
    font-size: 12px;
    color: #6b7280;
}

.handler-remove[b-8485enx16m] {
    padding: 4px 10px;
    border: 1px solid #dc2626;
    border-radius: 6px;
    background-color: #fff;
    color: #dc2626;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.handler-remove:disabled[b-8485enx16m] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ----- Assign handlers modal ----- */
.assign-modal-overlay[b-8485enx16m] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.assign-modal[b-8485enx16m] {
    background-color: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.assign-modal-header[b-8485enx16m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.assign-modal-header h3[b-8485enx16m] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.assign-modal-close[b-8485enx16m] {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
}

.assign-modal-body[b-8485enx16m] {
    padding: 16px 20px;
    overflow-y: auto;
}

.assign-modal-hint[b-8485enx16m] {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px 0;
}

.assign-search[b-8485enx16m] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
}

.assign-selectall[b-8485enx16m] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    margin-bottom: 8px;
    cursor: pointer;
}

.assign-candidate-list[b-8485enx16m] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.assign-candidate label[b-8485enx16m] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
}

.assign-candidate .candidate-name[b-8485enx16m] {
    font-size: 14px;
    color: #111827;
}

.assign-candidate .candidate-email[b-8485enx16m] {
    font-size: 12px;
    color: #6b7280;
    margin-left: auto;
}

.assign-modal-footer[b-8485enx16m] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
}

.btn-assign-confirm[b-8485enx16m] {
    padding: 8px 16px;
    border: 1px solid #1d4ed8;
    border-radius: 8px;
    background-color: #1d4ed8;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.btn-assign-confirm:disabled[b-8485enx16m] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Pages/ServiceRequestFacilityManagement.razor.rz.scp.css */
button[b-9i9ddy19ty] {
  font-family: inherit;
}

.facility-management-section[b-9i9ddy19ty] {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 0 64px;
  color: #141414;
  font-family: "Ubuntu", "Inter", "Segoe UI", sans-serif;
  background: linear-gradient(180deg, rgba(247, 249, 253, 0.92) 0%, rgba(230, 236, 248, 0.72) 100%);
}

.facility-management-masthead[b-9i9ddy19ty] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.facility-management-breadcrumb[b-9i9ddy19ty] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(77, 91, 120, 0.85);
  letter-spacing: 0.2px;
}

.facility-management-breadcrumb .current[b-9i9ddy19ty] {
  color: #001f57;
  font-weight: 600;
}

.facility-management-intro[b-9i9ddy19ty] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.facility-management-intro h1[b-9i9ddy19ty] {
  font-size: 24px;
  font-weight: 600;
  color: #0b1b43;
  margin: 0;
}

.facility-management-intro p[b-9i9ddy19ty] {
  font-size: 15px;
  color: rgba(71, 77, 90, 0.78);
  margin: 0;
}

.stats-grid[b-9i9ddy19ty] {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: nowrap;
}

.stat-card[b-9i9ddy19ty] {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 20px;
  border: 1px solid #e2e8f4;
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 55%, #eef3ff 100%);
  padding: 20px;
  min-height: 164px;
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.1);
}

.stat-card--link[b-9i9ddy19ty] {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stat-card--link:hover[b-9i9ddy19ty],
.stat-card--link:focus-visible[b-9i9ddy19ty] {
  transform: translateY(-2px);
  box-shadow: 0 24px 38px rgba(15, 23, 42, 0.16);
  outline: none;
}

.stat-card--link.is-active[b-9i9ddy19ty] {
  border-color: rgba(0, 43, 130, 1);
  box-shadow: 0 0 0 2px rgba(0, 43, 130, 0.22), 0 18px 30px rgba(15, 23, 42, 0.12);
}

.stat-card-filter-hint[b-9i9ddy19ty] {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 43, 130, 0.08);
  color: rgba(0, 43, 130, 0.85);
  align-self: flex-start;
}

.stat-card--link.is-active .stat-card-filter-hint[b-9i9ddy19ty] {
  background: rgba(0, 43, 130, 0.85);
  color: #ffffff;
}
/*
.stat-card-overlay {
  content: "";
  position: absolute;
  inset: -10% -6% auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 70% 20%, rgba(0, 77, 181, 0.26) 0%, rgba(0, 77, 181, 0.06) 60%, rgba(0, 77, 181, 0) 80%);
  pointer-events: none;
}*/

.stat-card-header[b-9i9ddy19ty] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.stat-card-header h3[b-9i9ddy19ty] {
  font-size: 14px;
  font-weight: 600;
  color: #454a57;
  margin: 0;
}

.stat-card-header span[b-9i9ddy19ty] {
  font-size: 13px;
  color: rgba(69, 74, 87, 0.68);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.stat-card-value[b-9i9ddy19ty] {
  font-size: 28px;
  font-weight: 600;
  color: #0b1b43;
  line-height: 1.1;
  margin: 0;
}

.stat-card-footnote[b-9i9ddy19ty] {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(71, 77, 90, 0.7);
}

.actions-row[b-9i9ddy19ty] {
  display: flex;
  justify-content: flex-end;
}

.primary-action[b-9i9ddy19ty] {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #032669 0%, #001f57 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 18px 28px rgba(0, 31, 87, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.primary-action svg[b-9i9ddy19ty] {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.primary-action:hover[b-9i9ddy19ty] {
  transform: translateY(-1px);
  box-shadow: 0 24px 36px rgba(0, 31, 87, 0.26);
}

.split-grid[b-9i9ddy19ty],
.analytics-grid[b-9i9ddy19ty] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

.filters-container[b-9i9ddy19ty] {
  background-color: rgba(250, 252, 255, 1);
  border: 1px solid rgba(226, 232, 240, 1);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 24px;
}

.filters-toolbar[b-9i9ddy19ty] {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.filters-actions[b-9i9ddy19ty] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  background: rgba(241, 245, 249, 1);
  padding: 10px;
}

.filters-inputs-row[b-9i9ddy19ty] {
  display: flex;
  gap: 16px;
  width: 100%;
  align-items: flex-end;
  flex-wrap: wrap;
}

.filters-segments[b-9i9ddy19ty] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  align-items: stretch;
}

.filter-segment[b-9i9ddy19ty] {
  margin: 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  background: #ffffff;
  box-sizing: border-box;
}

.filter-segment-title[b-9i9ddy19ty] {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 4px;
}

.filter-segment-fields[b-9i9ddy19ty] {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 8px;
}

.filter-segment--triple[b-9i9ddy19ty] {
  flex: 1 1 520px;
  min-width: 0;
}

.filter-segment--single[b-9i9ddy19ty] {
  flex: 1 1 220px;
  min-width: 0;
}

.filter-segment-fields .filter-field.compact[b-9i9ddy19ty] {
  flex: 1 1 160px;
  min-width: 160px;
}

.filters-row[b-9i9ddy19ty] {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 16px;
}

.filters-hint[b-9i9ddy19ty] {
  margin: 0 0 8px 4px;
  font-size: 13px;
  color: rgba(71, 85, 105, 1);
}

.date-filter-actions[b-9i9ddy19ty] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.clear-filters-btn[b-9i9ddy19ty] {
  height: 48px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 1);
  background-color: rgba(255, 255, 255, 1);
  color: rgba(51, 65, 85, 1);
  font-size: 15px;
  font-family: 'Ubuntu', sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.clear-filters-btn:hover[b-9i9ddy19ty] {
  background-color: rgba(241, 245, 249, 1);
  border-color: rgba(100, 116, 139, 1);
  color: rgba(15, 23, 42, 1);
}

.clear-filters-btn svg[b-9i9ddy19ty] {
  width: 16px;
  height: 16px;
}

.filter-field.compact[b-9i9ddy19ty] {
  flex: 1 1 18%;
  min-width: 160px;
  max-width: 100%;
}

.filter-control[b-9i9ddy19ty] {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  padding: 0 16px;
  font-size: 15px;
  color: #1f2937;
  background: #ffffff;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-control:focus[b-9i9ddy19ty] {
  outline: none;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.filter-control[b-9i9ddy19ty]::placeholder {
  color: #9ca3af;
}

.stats-panel-header[b-9i9ddy19ty] {
  flex-wrap: wrap;
  align-items: center;
}

.stats-toggle[b-9i9ddy19ty] {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  overflow: hidden;
  background: #f9fafb;
}

.stats-toggle-btn[b-9i9ddy19ty] {
  border: none;
  background: transparent;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.stats-toggle-btn.is-active[b-9i9ddy19ty] {
  background: #1d4ed8;
  color: #ffffff;
}

.stats-chart-body[b-9i9ddy19ty] {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.stats-chart-body .line-chart[b-9i9ddy19ty] {
  width: 100%;
  max-width: 460px;
}

.panel[b-9i9ddy19ty] {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f4;
  padding: 28px;
  box-shadow: 0 28px 48px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panel-header[b-9i9ddy19ty] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.panel-header h2[b-9i9ddy19ty] {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.panel-header span[b-9i9ddy19ty] {
  font-size: 14px;
  color: rgba(98, 108, 132, 0.8);
}

.filters-panel h2[b-9i9ddy19ty] {
  margin: 0;
}

.filter-fields[b-9i9ddy19ty] {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.filter-field[b-9i9ddy19ty] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-label[b-9i9ddy19ty] {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: 0.3px;
}

.filter-field select[b-9i9ddy19ty],
.filter-field input[b-9i9ddy19ty] {
  height: 40px;
  border-radius: 12px;
  border: 1px solid #d3daeb;
  padding: 0 16px;
  font-size: 14px;
  color: #111827;
  background-color: #ffffff;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.filter-field select[b-9i9ddy19ty] {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236c7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 46px;
}

.filter-field select:focus[b-9i9ddy19ty],
.filter-field input:focus[b-9i9ddy19ty] {
  border-color: #0057ff;
  box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.18);
  outline: none;
}

.filter-actions[b-9i9ddy19ty] {
  display: flex;
  gap: 16px;
}

.ghost-button[b-9i9ddy19ty],
.primary-button[b-9i9ddy19ty] {
  flex: 1;
  height: 48px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ghost-button[b-9i9ddy19ty] {
  border: 1px solid #d3daeb;
  background: #ffffff;
  color: #1f2937;
}

.ghost-button:hover[b-9i9ddy19ty] {
  transform: translateY(-1px);
  background: rgba(248, 249, 255, 0.88);
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.1);
}

.primary-button[b-9i9ddy19ty] {
  border: none;
  background: linear-gradient(135deg, #032b78 0%, #001f57 100%);
  color: #ffffff;
  box-shadow: 0 16px 24px rgba(0, 31, 87, 0.22);
}

.primary-button:hover[b-9i9ddy19ty] {
  transform: translateY(-1px);
  box-shadow: 0 22px 32px rgba(0, 31, 87, 0.28);
}

.requests-panel[b-9i9ddy19ty] {
  gap: 24px;
  padding-bottom: 32px;
  min-height: 320px;
}

.requests-empty[b-9i9ddy19ty] {
  font-size: 20px;
  color: rgba(87, 96, 115, 0.76);
  text-align: center;
  border: 1px dashed rgba(189, 197, 216, 0.68);
  border-radius: 18px;
  padding: 64px 16px;
  background: rgba(249, 250, 255, 0.7);
}

.requests-table[b-9i9ddy19ty] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.table-header[b-9i9ddy19ty],
.table-row[b-9i9ddy19ty] {
  display: grid;
  grid-template-columns: 140px 1.1fr 1fr 128px 120px 148px 90px;
  align-items: center;
  gap: 12px;
}

.table-header[b-9i9ddy19ty] {
  padding: 0 4px 8px;
  border-bottom: 1px solid #e1e7f5;
  color: rgba(71, 77, 90, 0.72);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.table-row[b-9i9ddy19ty] {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(245, 248, 255, 0.8);
  border: 1px solid rgba(216, 223, 239, 0.9);
  box-shadow: 0 18px 24px rgba(15, 23, 42, 0.08);
}

.table-row span[b-9i9ddy19ty] {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
}

.badge[b-9i9ddy19ty] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  height: 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.badge.status-open[b-9i9ddy19ty] {
  background: rgba(255, 232, 214, 0.9);
  color: #c4661a;
}

.badge.status-inprogress[b-9i9ddy19ty],
.badge.status-in-progress[b-9i9ddy19ty] {
  background: rgba(233, 240, 255, 0.9);
  color: #0f49c2;
}

.badge.status-resolved[b-9i9ddy19ty] {
  background: rgba(209, 245, 229, 0.9);
  color: #1a8a55;
}

.badge.status-closed[b-9i9ddy19ty] {
  background: rgba(226, 226, 234, 0.9);
  color: #4c4f5d;
}

.badge.severity-low[b-9i9ddy19ty] {
  background: rgba(209, 245, 229, 0.9);
  color: #1a8a55;
}

.badge.severity-medium[b-9i9ddy19ty] {
  background: rgba(255, 246, 207, 0.95);
  color: #b27a00;
}

.badge.severity-high[b-9i9ddy19ty] {
  background: rgba(255, 226, 226, 0.95);
  color: #c53030;
}

.badge.severity-critical[b-9i9ddy19ty] {
  background: rgba(255, 209, 213, 0.95);
  color: #b91c1c;
}

.link-button[b-9i9ddy19ty] {
  justify-self: end;
  border: none;
  background: transparent;
  color: #0057ff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.link-button:hover[b-9i9ddy19ty] {
  text-decoration: underline;
}

@media (max-width: 1280px) {
  .stats-grid[b-9i9ddy19ty] {
    flex-wrap: wrap;
  }

  .stat-card[b-9i9ddy19ty] {
    flex: 1 1 calc(50% - 12px);
  }

  .table-header[b-9i9ddy19ty],
  .table-row[b-9i9ddy19ty] {
    grid-template-columns: 120px 1.1fr 1fr 120px 110px 140px 80px;
  }
}

@media (max-width: 1100px) {
  .split-grid[b-9i9ddy19ty],
  .analytics-grid[b-9i9ddy19ty] {
    grid-template-columns: 1fr;
  }

  .filter-segment--triple[b-9i9ddy19ty],
  .filter-segment--single[b-9i9ddy19ty] {
    flex: 1 1 calc(50% - 8px);
  }

  .filter-field.compact[b-9i9ddy19ty] {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }

  .panel[b-9i9ddy19ty] {
    padding: 24px;
  }
}

@media (max-width: 960px) {
  .facility-management-section[b-9i9ddy19ty] {
    padding: 16px 0 48px;
  }

  .facility-management-intro h1[b-9i9ddy19ty] {
    font-size: 20px;
  }
}

@media (max-width: 760px) {
  .stats-grid[b-9i9ddy19ty] {
    flex-wrap: wrap;
  }

  .stat-card[b-9i9ddy19ty] {
    flex: 1 1 100%;
  }

  .actions-row[b-9i9ddy19ty] {
    justify-content: stretch;
  }

  .primary-action[b-9i9ddy19ty] {
    width: 100%;
    justify-content: center;
  }

  .filter-segment--triple[b-9i9ddy19ty],
  .filter-segment--single[b-9i9ddy19ty] {
    flex: 1 1 100%;
  }

  .filter-segment-fields .filter-field.compact[b-9i9ddy19ty] {
    flex: 1 1 100%;
    min-width: 0;
  }

  .table-header[b-9i9ddy19ty],
  .table-row[b-9i9ddy19ty] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 8px;
  }

  .table-row .badge[b-9i9ddy19ty],
  .table-row span:nth-last-child(2)[b-9i9ddy19ty],
  .table-row .link-button[b-9i9ddy19ty] {
    justify-self: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *[b-9i9ddy19ty],
  *[b-9i9ddy19ty]::before,
  *[b-9i9ddy19ty]::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.details-resolution-rating[b-9i9ddy19ty] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  color: #111827;
}

.details-rating-value[b-9i9ddy19ty] {
  font-weight: 600;
}

.details-rating-comment[b-9i9ddy19ty] {
  margin: 0;
  color: #6b7280;
  font-style: italic;
  font-size: 14px;
}

.details-rating-meta[b-9i9ddy19ty] {
  display: block;
  font-size: 12px;
  color: #9ca3af;
}

/* Destructive Close-Ticket action — red-outlined variant of the existing .action-button. */
.action-button.danger[b-9i9ddy19ty] {
    border-color: #dc2626;
    background: #fff;
    color: #b91c1c;
}

.action-button.danger:hover:not(:disabled)[b-9i9ddy19ty] {
    background: #dc2626;
    color: #ffffff;
}

.action-button.danger:disabled[b-9i9ddy19ty] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* === Moved from inline <style> block in .razor === */

.remark-text-label.with-top-gap[b-9i9ddy19ty] {
    margin-top: 12px;
}

.escalation-summary-card[b-9i9ddy19ty] {
    margin: 24px 0;
    padding: 20px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.65), rgba(191, 219, 254, 0.35));
    border: 1px solid #bfdbfe;
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.escalation-summary-card header[b-9i9ddy19ty] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.escalation-summary-card h3[b-9i9ddy19ty] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d4ed8;
}

.escalation-summary-card span[b-9i9ddy19ty] {
    font-size: 13px;
    color: #1f2937;
}

.escalation-summary-card p[b-9i9ddy19ty] {
    margin: 0;
    font-size: 14px;
    color: #0f172a;
}

.stats-grid[b-9i9ddy19ty] {
    display: flex;
    gap: 20px;
}

.stats-grid .stat-card[b-9i9ddy19ty] {
    flex: 1 1 0;
}

.stat-card-footnote.loading[b-9i9ddy19ty] {
    color: #6b7280;
    font-style: italic;
}

.stat-card-error[b-9i9ddy19ty] {
    color: #dc2626;
    font-weight: 600;
}

.split-grid[b-9i9ddy19ty],
.analytics-grid[b-9i9ddy19ty] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
}

.filters-container.facility-management-filters[b-9i9ddy19ty] {
    background-color: rgba(250, 252, 255, 1);
    border: 1px solid rgba(226, 232, 240, 1);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    margin-bottom: 24px;
}

.filters-toolbar[b-9i9ddy19ty] {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.filters-actions[b-9i9ddy19ty] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    background: rgba(241, 245, 249, 1);
    padding: 10px;
}

.filters-inputs-row[b-9i9ddy19ty] {
    display: flex;
    gap: 16px;
    width: 100%;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filters-segments[b-9i9ddy19ty] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    align-items: stretch;
}

.filter-segment[b-9i9ddy19ty] {
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    background: #ffffff;
    box-sizing: border-box;
}

.filter-segment-title[b-9i9ddy19ty] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 4px;
}

.filter-segment-fields[b-9i9ddy19ty] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 8px;
}

.filter-segment--triple[b-9i9ddy19ty] {
    flex: 1 1 520px;
    min-width: 0;
}

.filter-segment--single[b-9i9ddy19ty] {
    flex: 1 1 220px;
    min-width: 0;
}

.filter-segment-fields .filter-field.compact[b-9i9ddy19ty] {
    flex: 1 1 160px;
    min-width: 160px;
}

.filters-row.facility-management-filters-actions[b-9i9ddy19ty] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 16px;
}

.filters-hint[b-9i9ddy19ty] {
    margin: 0 0 8px 4px;
    font-size: 13px;
    color: rgba(71, 85, 105, 1);
}

.date-filter-actions[b-9i9ddy19ty] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.clear-filters-btn[b-9i9ddy19ty] {
    height: 48px;
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 1);
    background-color: rgba(255, 255, 255, 1);
    color: rgba(51, 65, 85, 1);
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.clear-filters-btn svg[b-9i9ddy19ty] {
    width: 16px;
    height: 16px;
}

.filter-field.compact[b-9i9ddy19ty] {
    flex: 1 1 18%;
    min-width: 160px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-panel-header[b-9i9ddy19ty] {
    flex-wrap: wrap;
    align-items: center;
}

.stats-toggle[b-9i9ddy19ty] {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    overflow: hidden;
    background: #f9fafb;
}

.stats-toggle-btn[b-9i9ddy19ty] {
    border: none;
    background: transparent;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
}

.stats-toggle-btn.is-active[b-9i9ddy19ty] {
    background: #1d4ed8;
    color: #ffffff;
}

.stats-chart-body[b-9i9ddy19ty] {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.stats-chart-body .line-chart[b-9i9ddy19ty] {
    width: 100%;
    max-width: 460px;
}

.filter-fields[b-9i9ddy19ty] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-field[b-9i9ddy19ty] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label[b-9i9ddy19ty] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.04em;
}

.filter-control[b-9i9ddy19ty] {
    width: 100%;
    border-radius: 16px;
    border: 1px solid #d1d5db;
    padding: 12px 16px;
    font-size: 15px;
    color: #1f2937;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-control:focus[b-9i9ddy19ty] {
    outline: none;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.filter-control[b-9i9ddy19ty]::placeholder {
    color: #9ca3af;
}

.cscc-picker-trigger[b-9i9ddy19ty] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 16px;
    border: 1px solid #d1d5db;
    padding: 12px 44px 12px 16px;
    font-size: 15px;
    color: #1f2937;
    background: #ffffff;
    cursor: pointer !important;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cscc-picker-trigger:not(.cscc-picker-trigger--disabled)[b-9i9ddy19ty] {
    cursor: pointer !important;
}

.cscc-picker-trigger:not(.cscc-picker-trigger--disabled):hover[b-9i9ddy19ty],
.cscc-picker-trigger:not(.cscc-picker-trigger--disabled):focus-visible[b-9i9ddy19ty] {
    border-color: #374151;
    background-color: #f5f7fb;
    outline: none;
}

.cscc-picker-trigger--disabled[b-9i9ddy19ty] {
    background-color: #f1f1f1;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

.cscc-picker-value[b-9i9ddy19ty] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cscc-picker-value.placeholder[b-9i9ddy19ty] {
    color: #9ca3af;
}

.cscc-caret[b-9i9ddy19ty] {
    position: absolute;
    right: 18px;
    width: 9px;
    height: 9px;
    border: solid #374151;
    border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg);
    pointer-events: none;
}

.request-id-header[b-9i9ddy19ty],
.request-id-cell[b-9i9ddy19ty] {
    white-space: nowrap;
}

.panel.chart-panel[b-9i9ddy19ty] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.panel.chart-panel .panel-header span[b-9i9ddy19ty] {
    font-size: 14px;
    color: #6b7280;
}

.chart-body[b-9i9ddy19ty] {
    position: relative;
    min-height: 240px;
}

.requests-panel[b-9i9ddy19ty] {
    padding: 24px;
}

.requests-panel .panel-header h2[b-9i9ddy19ty] {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.requests-table[b-9i9ddy19ty] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    overflow-x: auto;   /* safety net: scroll rather than clip if the panel is ever narrower than the compact table */
    overflow-y: hidden;
}

.pagination-footer[b-9i9ddy19ty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-status[b-9i9ddy19ty] {
    font-size: 13px;
    color: #4b5563;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.pagination-controls[b-9i9ddy19ty] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination-page[b-9i9ddy19ty],
.pagination-nav-button[b-9i9ddy19ty] {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #1f2937;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    min-width: 40px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pagination-page:hover:not(:disabled)[b-9i9ddy19ty],
.pagination-nav-button:hover:not(:disabled)[b-9i9ddy19ty] {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
}

.pagination-page.active[b-9i9ddy19ty] {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
    cursor: default;
}

.pagination-page:disabled[b-9i9ddy19ty],
.pagination-nav-button:disabled[b-9i9ddy19ty] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pagination-ellipsis[b-9i9ddy19ty] {
    font-size: 13px;
    color: #9ca3af;
    padding: 0 4px;
}

.enterprise-table[b-9i9ddy19ty] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.enterprise-table thead th[b-9i9ddy19ty] {
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    padding: 12px clamp(4px, 0.6vw, 10px);
    background: #f9fafb;
}

.enterprise-table tbody td[b-9i9ddy19ty] {
    padding: clamp(10px, 1vw, 16px) clamp(4px, 0.6vw, 10px);
    font-size: clamp(11px, 1vw, 14px);
    color: #1f2937;
    border-top: 1px solid #edf1f5;
    vertical-align: middle;
}

/* Department cell (4th column): cap width + ellipsis so a long sub-department
   name can't widen the table. Full name shows on hover via the title attribute. */
.enterprise-table tbody td:nth-child(4)[b-9i9ddy19ty] {
    max-width: clamp(80px, 10vw, 130px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-table tbody tr:hover[b-9i9ddy19ty] {
    background: #f5f8ff;
}

.enterprise-name-cell[b-9i9ddy19ty] {
    font-weight: 600;
    letter-spacing: 0.04em;
}

.pill-badge[b-9i9ddy19ty] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    text-transform: capitalize;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Enterprise column: owner name + who raised it (on-behalf vs self). */
/* Enterprise column: owner name only (origin/email moved to the detail modal).
   Long names are truncated with an ellipsis; the full name shows on hover via the title attribute. */
.enterprise-cell .enterprise-name[b-9i9ddy19ty] {
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
    max-width: clamp(90px, 12vw, 150px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Date Raised column: keep the timestamp on a single line. */
.date-raised-cell[b-9i9ddy19ty] {
    white-space: nowrap;
    color: rgba(60, 60, 60, 1);
    font-size: 13px;
}

.enterprise-onbehalf[b-9i9ddy19ty] {
    font-size: 12px;
    color: rgba(134, 134, 134, 1);
    margin-top: 2px;
    word-break: break-word;
}

.enterprise-tag[b-9i9ddy19ty] {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.enterprise-tag--for[b-9i9ddy19ty] {
    background-color: rgba(0, 31, 87, 0.1);
    color: rgba(0, 31, 87, 1);
    border: 0.5px solid rgba(0, 31, 87, 0.4);
}

.enterprise-tag--by[b-9i9ddy19ty] {
    background-color: rgba(134, 134, 134, 0.12);
    color: rgba(90, 90, 90, 1);
    border: 0.5px solid rgba(134, 134, 134, 0.5);
}

.pill-badge--clickable[b-9i9ddy19ty] {
    cursor: pointer;
    transition: transform 80ms ease, box-shadow 80ms ease;
}

.pill-badge--clickable:hover[b-9i9ddy19ty] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.pill-badge--clickable:focus-visible[b-9i9ddy19ty] {
    outline: 2px solid rgba(56, 132, 255, 0.55);
    outline-offset: 2px;
}

.status-open[b-9i9ddy19ty] {
    border-color: #f87171;
    color: #f87171;
    background: rgba(248, 113, 113, 0.08);
}

.status-open-modal[b-9i9ddy19ty] {
    border-color: #f87171;
    color: #f87171;
    background: rgba(248, 113, 113, 0.08);
    width: 20%;
}
.status-inprogress[b-9i9ddy19ty],
.status-in-progress[b-9i9ddy19ty],
.status-reopened[b-9i9ddy19ty] {
    border-color: #fbbf24;
    color: #b45309;
    background: rgba(251, 191, 36, 0.12);
}

.status-resolved[b-9i9ddy19ty],
.status-closed[b-9i9ddy19ty] {
    border-color: #34d399;
    color: #047857;
    background: rgba(52, 211, 153, 0.12);
}

.status-pending-customer[b-9i9ddy19ty],
.status-pending-third-party[b-9i9ddy19ty] {
    border-color: #94a3b8;
    color: #475569;
    background: rgba(148, 163, 184, 0.15);
}

.severity-critical[b-9i9ddy19ty] {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.severity-high[b-9i9ddy19ty] {
    border-color: #d97706;
    color: #92400e;
    background: rgba(217, 119, 6, 0.12);
}

.severity-medium[b-9i9ddy19ty] {
    border-color: #2563eb;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
}

.severity-low[b-9i9ddy19ty] {
    border-color: #10b981;
    color: #047857;
    background: rgba(16, 185, 129, 0.1);
}

.action-buttons[b-9i9ddy19ty] {
    display: flex;
    gap: 8px;
}

.action-pill.disabled[b-9i9ddy19ty] {
    padding: 6px 14px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
    border: 1px dashed #e5e7eb;
    align-self: center;
    white-space: nowrap;
}

.action-button[b-9i9ddy19ty] {
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid #2563eb;
    background: transparent;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, color 0.2s ease;
}

.action-button:hover[b-9i9ddy19ty] {
    background: #2563eb;
    color: #fff;
}

/* Icon-only action buttons (View eye icon, Add Remark icon): square, centered SVG. */
.action-button.icon-only[b-9i9ddy19ty] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    line-height: 0;
}

.action-button.icon-only svg[b-9i9ddy19ty] {
    display: block;
}

.action-button.secondary[b-9i9ddy19ty] {
    border-color: #f87171;
    color: #b91c1c;
}

.action-button.secondary:hover:not(:disabled)[b-9i9ddy19ty] {
    background: #f87171;
    color: #fff;
}

.action-button.secondary:disabled[b-9i9ddy19ty] {
    opacity: 0.6;
    cursor: not-allowed;
}

.action-button.ghost[b-9i9ddy19ty] {
    border-color: #d1d5db;
    color: #374151;
    background: #fff;
}

.action-button.ghost:hover[b-9i9ddy19ty] {
    background: #f3f4f6;
}

.action-button.submit[b-9i9ddy19ty] {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
}

.action-button.submit:hover[b-9i9ddy19ty] {
    background: #1e3a8a;
    border-color: #1e3a8a;
}

.requests-empty[b-9i9ddy19ty],
.requests-loading[b-9i9ddy19ty] {
    padding: 40px;
    text-align: center;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 16px;
    border: 1px dashed #e5e7eb;
}

.remark-overlay[b-9i9ddy19ty] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    backdrop-filter: blur(2px);
    padding: 24px;
}

.remark-modal[b-9i9ddy19ty] {
    width: min(520px, 100%);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 70px rgba(15, 23, 42, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.remark-modal-header[b-9i9ddy19ty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px 8px 28px;
}

.remark-modal-header h3[b-9i9ddy19ty] {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: #111827;
}

.remark-modal-header span[b-9i9ddy19ty] {
    color: #1d4ed8;
}

.remark-close[b-9i9ddy19ty] {
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
}

.remark-modal-body[b-9i9ddy19ty] {
    padding: 0 28px 12px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.remark-text-label[b-9i9ddy19ty] {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
}

.remark-textarea[b-9i9ddy19ty] {
    min-height: 140px;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    padding: 16px;
    font-size: 14px;
    color: #111827;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.remark-textarea:focus[b-9i9ddy19ty] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.remark-textarea:disabled[b-9i9ddy19ty] {
    background: #f3f4f6;
    cursor: not-allowed;
}

.remark-error[b-9i9ddy19ty] {
    font-size: 13px;
    color: #dc2626;
}

.remark-modal-footer[b-9i9ddy19ty] {
    padding: 16px 28px 28px 28px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Add-remark file upload */
.file-upload-area[b-9i9ddy19ty] {
    width: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(50, 173, 230, 1);
    border-radius: 12px;
    background-color: rgba(50, 173, 230, 0.06);
    gap: 6px;
    cursor: pointer;
}
.file-upload-area.drag-over[b-9i9ddy19ty] {
    background-color: rgba(50, 173, 230, 0.15);
}
/* ::deep — targets the <input> rendered by the <InputFile> child component. */
[b-9i9ddy19ty] .file-input-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.file-upload-area .upload-text[b-9i9ddy19ty] {
    color: rgba(20, 20, 20, 1);
    font-size: 14px;
    font-weight: 400;
}
.file-upload-area .upload-hint[b-9i9ddy19ty] {
    color: rgba(134, 134, 134, 1);
    font-size: 12px;
}
.file-upload-area .upload-button[b-9i9ddy19ty] {
    padding: 6px 14px;
    border-radius: 10px;
    background-color: rgba(0, 90, 255, 1);
}
.file-upload-area .upload-button span[b-9i9ddy19ty] {
    color: #fff;
    font-size: 14px;
}
.upload-text-warning[b-9i9ddy19ty] {
    font-size: 11px;
    color: rgba(134, 134, 134, 1);
}
.uploaded-files-section[b-9i9ddy19ty] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.uploaded-files-title[b-9i9ddy19ty] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}
.uploaded-files-grid[b-9i9ddy19ty] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.file-preview-card[b-9i9ddy19ty] {
    min-width: 0;
    height: 120px;
    border: 0.5px solid #d1d5db;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.file-preview-header[b-9i9ddy19ty] {
    display: flex;
    gap: 8px;
    padding: 12px 10px 8px 10px;
    align-items: center;
}
.file-preview-info[b-9i9ddy19ty] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.file-preview-name[b-9i9ddy19ty] {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-preview-size[b-9i9ddy19ty] {
    font-size: 12px;
    color: #6b7280;
}
.file-preview-actions[b-9i9ddy19ty] {
    display: flex;
    gap: 8px;
    padding: 0 10px 10px 10px;
    align-items: center;
}
.file-preview-btn[b-9i9ddy19ty] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}
.file-preview-btn:disabled[b-9i9ddy19ty] {
    cursor: not-allowed;
    opacity: 0.6;
}
.file-delete-btn[b-9i9ddy19ty] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    cursor: pointer;
    padding: 0;
}
.file-delete-btn:hover:not(:disabled)[b-9i9ddy19ty] {
    background: #f3f4f6;
}

/* Remark file preview modal */
.remark-overlay.success[b-9i9ddy19ty] {
    background: rgba(15, 23, 42, 0.2);
}

.remark-success-card[b-9i9ddy19ty] {
    width: min(420px, 100%);
    background: linear-gradient(180deg, #fdfdfd 0%, #f5f6fb 100%);
    border-radius: 32px;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.22);
    text-align: center;
}

.remark-success-icon[b-9i9ddy19ty] {
    width: 140px;
    height: 140px;
}

.remark-success-icon svg[b-9i9ddy19ty] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 12px 24px rgba(10, 49, 130, 0.35));
}

.remark-success-icon .outer-ring[b-9i9ddy19ty] {
    fill: #dbe6ff;
}

.remark-success-icon .inner-fill[b-9i9ddy19ty] {
    fill: #0b3b92;
}

.remark-success-icon .check-mark[b-9i9ddy19ty] {
    fill: #eff3ff;
}

.remark-success-card h3[b-9i9ddy19ty] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: #101828;
    letter-spacing: 0.02em;
}

.details-overlay[b-9i9ddy19ty] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    justify-content: flex-end;
    padding: 24px;
    z-index: 1150;
}

.details-panel[b-9i9ddy19ty] {
    width: min(520px, 100%);
    background: #ffffff;
    border-radius: 32px 0 0 32px;
    box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    padding: 32px;
    gap: 28px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}

.details-header[b-9i9ddy19ty] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.details-title h3[b-9i9ddy19ty] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.01em;
}

.details-title span[b-9i9ddy19ty] {
    font-weight: 500;
    color: #6b7280;
}

.details-meta[b-9i9ddy19ty] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
}

.details-close[b-9i9ddy19ty] {
    border: none;
    background: rgba(15, 23, 42, 0.05);
    color: #6b7280;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.details-body[b-9i9ddy19ty] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    overflow-y: auto;
}

.details-row[b-9i9ddy19ty] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.details-row label[b-9i9ddy19ty] {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.details-row.escalation-row[b-9i9ddy19ty] {
    margin-top: 12px;
}

.details-checkbox[b-9i9ddy19ty] {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    font-size: 15px;
    color: #111827;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.details-checkbox input[type="checkbox"][b-9i9ddy19ty] {
    width: 18px;
    height: 18px;
    accent-color: #1d4ed8;
}

.details-row p[b-9i9ddy19ty] {
    margin: 0;
    font-size: 15px;
    color: #111827;
}

.details-remark[b-9i9ddy19ty] {
    background: #f9fafb;
    border-radius: 16px;
    padding: 16px 18px;
    line-height: 1.5;
}

.details-remark-primary[b-9i9ddy19ty] {
    margin-bottom: 12px;
}

.details-remarks-list[b-9i9ddy19ty] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.details-remark-entry[b-9i9ddy19ty] {
    padding: 14px 18px;
    border-radius: 14px;
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
    color: #111827;
}

.details-remark-entry p[b-9i9ddy19ty] {
    margin: 0;
    line-height: 1.5;
}

.details-remark-meta[b-9i9ddy19ty] {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.details-remark-attachments-block[b-9i9ddy19ty] {
    margin-top: 8px;
    margin-bottom: 4px;
}

.details-remark-attachments[b-9i9ddy19ty] {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.details-remark-attachment-item[b-9i9ddy19ty] {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.details-remark-attachment-link[b-9i9ddy19ty] {
    color: #1d4ed8;
    text-decoration: none;
}

.details-remark-attachment-link:hover[b-9i9ddy19ty] {
    text-decoration: underline;
}

.details-remark-attachment-name[b-9i9ddy19ty] {
    color: #374151;
}

.details-remark-attachment-size[b-9i9ddy19ty] {
    color: #9ca3af;
    font-size: 12px;
}

.details-select select[b-9i9ddy19ty] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    font-size: 15px;
    color: #1f2937;
    background-color: #fff;
}

.details-select select:disabled[b-9i9ddy19ty] {
    background: #f3f4f6;
    color: #9ca3af;
}

.details-picker-trigger[b-9i9ddy19ty] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 44px 12px 16px;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

.details-picker-trigger:not(.details-picker-trigger--disabled):hover[b-9i9ddy19ty],
.details-picker-trigger:not(.details-picker-trigger--disabled):focus-visible[b-9i9ddy19ty] {
    border-color: #374151;
    background-color: #f5f7fb;
    outline: none;
}

.details-picker-trigger--disabled[b-9i9ddy19ty] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

.details-picker-value[b-9i9ddy19ty] {
    flex: 1;
    font-size: 15px;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.details-picker-value.placeholder[b-9i9ddy19ty] {
    color: #9ca3af;
}

.details-picker-caret[b-9i9ddy19ty] {
    position: absolute;
    right: 18px;
    width: 9px;
    height: 9px;
    border: solid #374151;
    border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg);
    pointer-events: none;
}

.details-loading[b-9i9ddy19ty] {
    padding: 40px;
    text-align: center;
    color: #6b7280;
    font-size: 15px;
}

.details-info[b-9i9ddy19ty] {
    font-size: 13px;
    color: #6b7280;
}

.details-error[b-9i9ddy19ty] {
    font-size: 13px;
    color: #dc2626;
}

.details-success[b-9i9ddy19ty] {
    font-size: 13px;
    color: #047857;
}

.sla-within[b-9i9ddy19ty] {
    color: #16a34a;
    font-weight: 500;
}

.sla-breach[b-9i9ddy19ty] {
    color: #dc2626;
    font-weight: 500;
}

/* Timeline (Status History) */
.details-timeline-list[b-9i9ddy19ty] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.details-timeline-entry[b-9i9ddy19ty] {
    padding: 14px 18px;
    border-radius: 12px;
    background: #f9fafb;
    border-left: 3px solid #2563eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeline-status-change[b-9i9ddy19ty] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.timeline-status-old[b-9i9ddy19ty] {
    color: #6b7280;
    text-decoration: line-through;
}

.timeline-arrow[b-9i9ddy19ty] {
    color: #9ca3af;
    font-weight: 400;
}

.timeline-status-new[b-9i9ddy19ty] {
    color: #2563eb;
}

.timeline-meta[b-9i9ddy19ty] {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.timeline-remarks[b-9i9ddy19ty] {
    margin: 0;
    font-size: 13px;
    color: #374151;
    font-style: italic;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.details-footer[b-9i9ddy19ty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    margin-top: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 40%, #ffffff 100%);
}

.details-footer-actions[b-9i9ddy19ty] {
    display: flex;
    gap: 16px;
}

.confirm-overlay[b-9i9ddy19ty] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 24px;
}

.confirm-card[b-9i9ddy19ty] {
    width: min(420px, 100%);
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.confirm-card header h3[b-9i9ddy19ty] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #111827;
}

.confirm-card p[b-9i9ddy19ty] {
    font-size: 16px;
    color: #374151;
    margin: 0;
}

.confirm-card footer[b-9i9ddy19ty] {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* Enterprise Autocomplete Styles */
.enterprise-autocomplete-wrapper[b-9i9ddy19ty] {
    position: relative;
    width: 100%;
}

.enterprise-search-input[b-9i9ddy19ty] {
    width: 100%;
    padding: 8px 16px;
}

.enterprise-dropdown[b-9i9ddy19ty] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.enterprise-dropdown-item[b-9i9ddy19ty] {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 15px;
    color: #1f2937;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.enterprise-dropdown-item:last-child[b-9i9ddy19ty] {
    border-bottom: none;
}

.enterprise-dropdown-item:hover[b-9i9ddy19ty] {
    background-color: #f5f8ff;
    color: #1d4ed8;
}

.enterprise-dropdown-item:active[b-9i9ddy19ty] {
    background-color: #e0e7ff;
}

/* Enterprise Filter Wrapper - Dual Control Layout */
.enterprise-filter-wrapper[b-9i9ddy19ty] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.enterprise-select-dropdown[b-9i9ddy19ty] {
    width: 100%;
}

/* SubDepartment Autocomplete Styles */
.subdepartment-autocomplete-wrapper[b-9i9ddy19ty] {
    position: relative;
    width: 100%;
}

.subdepartment-search-input[b-9i9ddy19ty] {
    width: 100%;
    padding: 8px 16px;
}

.subdepartment-dropdown[b-9i9ddy19ty] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.subdepartment-dropdown-item[b-9i9ddy19ty] {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 15px;
    color: #1f2937;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.subdepartment-dropdown-item:last-child[b-9i9ddy19ty] {
    border-bottom: none;
}

.subdepartment-dropdown-item:hover[b-9i9ddy19ty] {
    background-color: #f5f8ff;
    color: #1d4ed8;
}

.subdepartment-dropdown-item:active[b-9i9ddy19ty] {
    background-color: #e0e7ff;
}

/* SubDepartment Filter Wrapper - Dual Control Layout */
.subdepartment-filter-wrapper[b-9i9ddy19ty] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.subdepartment-select-dropdown[b-9i9ddy19ty] {
    width: 100%;
}
/* /Pages/ServiceRequestGuest.razor.rz.scp.css */
.service-request-guest-container[b-79z4x8k1je] {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(246, 246, 246, 1);
    padding: 40px 20px;
}

.service-request-guest-content[b-79z4x8k1je] {
    max-width: 1164px;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.placeholder-text[b-79z4x8k1je] {
    color: rgba(20, 20, 20, 1);
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .service-request-guest-container[b-79z4x8k1je] {
        padding: 20px 16px;
    }

    .service-request-guest-content[b-79z4x8k1je] {
        padding: 24px 16px;
    }

    .placeholder-text[b-79z4x8k1je] {
        font-size: 14px;
    }
}
/* /Pages/ServiceRequestOtherIssueDetail.razor.rz.scp.css */
/* Scoped styles for ServiceRequestOtherIssueDetail.razor — copied from sibling
   pages so this detail view inherits the same look as the list page. */

button[b-ff2tka0mlw] {
    font-family: inherit;
}

/* ---------- Section / masthead ---------- */
.customer-care-section[b-ff2tka0mlw] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 0 64px;
    color: #141414;
    font-family: "Ubuntu", "Inter", "Segoe UI", sans-serif;
    background: linear-gradient(180deg, rgba(247, 249, 253, 0.92) 0%, rgba(230, 236, 248, 0.72) 100%);
}

.customer-care-masthead[b-ff2tka0mlw] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.customer-care-intro[b-ff2tka0mlw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.customer-care-intro h1[b-ff2tka0mlw] {
    font-size: 28px;
    font-weight: 600;
    color: #0b1b43;
    margin: 0;
}

.customer-care-intro p[b-ff2tka0mlw] {
    font-size: 15px;
    color: rgba(71, 77, 90, 0.78);
    margin: 0;
}

/* ---------- Panels ---------- */
.panel[b-ff2tka0mlw] {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid #e2e8f4;
    padding: 28px;
    box-shadow: 0 28px 48px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.panel-header[b-ff2tka0mlw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.panel-header h2[b-ff2tka0mlw] {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.panel-header span[b-ff2tka0mlw] {
    font-size: 14px;
    color: rgba(98, 108, 132, 0.8);
}

/* ---------- Ticket summary grid ---------- */
.summary-grid[b-ff2tka0mlw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
}

.summary-cell[b-ff2tka0mlw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-cell strong[b-ff2tka0mlw] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    font-weight: 600;
}

.summary-cell-value[b-ff2tka0mlw] {
    font-size: 15px;
    color: #0f172a;
    margin: 0;
    word-break: break-word;
}

.summary-cell.full[b-ff2tka0mlw] {
    grid-column: 1 / -1;
}

/* ---------- Form panel ---------- */
.detail-form .filter-field[b-ff2tka0mlw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.filter-label[b-ff2tka0mlw] {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    letter-spacing: 0.3px;
}

.filter-control[b-ff2tka0mlw],
.detail-form select[b-ff2tka0mlw],
.detail-form textarea[b-ff2tka0mlw] {
    border-radius: 12px;
    border: 1px solid #d3daeb;
    padding: 0 16px;
    font-size: 14px;
    color: #111827;
    background-color: #ffffff;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
    transition: border 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.detail-form select[b-ff2tka0mlw] {
    height: 40px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236c7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 46px;
}

.detail-form textarea[b-ff2tka0mlw] {
    resize: vertical;
    min-height: 96px;
    padding: 12px 16px;
    line-height: 1.5;
}

.detail-form select:focus[b-ff2tka0mlw],
.detail-form textarea:focus[b-ff2tka0mlw],
.filter-control:focus[b-ff2tka0mlw] {
    border-color: #0057ff;
    box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.18);
    outline: none;
}

.filter-actions[b-ff2tka0mlw] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid #eef2f9;
    margin-top: 8px;
}

.primary-button[b-ff2tka0mlw] {
    height: 44px;
    padding: 0 24px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #032b78 0%, #001f57 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 16px 24px rgba(0, 31, 87, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.primary-button:hover:not(:disabled)[b-ff2tka0mlw] {
    transform: translateY(-1px);
    box-shadow: 0 22px 32px rgba(0, 31, 87, 0.28);
}

.primary-button:disabled[b-ff2tka0mlw] {
    opacity: 0.55;
    cursor: not-allowed;
}

.secondary-button[b-ff2tka0mlw] {
    height: 44px;
    padding: 0 20px;
    border-radius: 12px;
    border: 1px solid #cbd5f5;
    background: #fff;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.secondary-button:hover:not(:disabled)[b-ff2tka0mlw] {
    background: #1d4ed8;
    color: #fff;
}

.secondary-button:disabled[b-ff2tka0mlw] {
    opacity: 0.55;
    cursor: not-allowed;
}

.back-button[b-ff2tka0mlw] {
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid #cbd5f5;
    background: #fff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.back-button:hover[b-ff2tka0mlw] {
    background: #1d4ed8;
    color: #fff;
}

/* ---------- Pill badges ---------- */
.pill-badge[b-ff2tka0mlw] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid transparent;
    line-height: 1.4;
}

.status-open[b-ff2tka0mlw] {
    border-color: #f97316;
    color: #c2410c;
    background: rgba(249, 115, 22, 0.12);
}

.status-inprogress[b-ff2tka0mlw],
.status-in-progress[b-ff2tka0mlw],
.status-reopened[b-ff2tka0mlw] {
    border-color: #facc15;
    color: #854d0e;
    background: rgba(250, 204, 21, 0.15);
}

.status-onhold[b-ff2tka0mlw],
.status-pendingcustomer[b-ff2tka0mlw],
.status-pendingthirdparty[b-ff2tka0mlw],
.status-pending-customer[b-ff2tka0mlw],
.status-pending-third-party[b-ff2tka0mlw] {
    border-color: #94a3b8;
    color: #475569;
    background: rgba(148, 163, 184, 0.2);
}

.status-resolved[b-ff2tka0mlw],
.status-closed[b-ff2tka0mlw] {
    border-color: #22c55e;
    color: #166534;
    background: rgba(34, 197, 94, 0.12);
}

.severity-low[b-ff2tka0mlw] {
    border-color: #0ea5e9;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.12);
}

.severity-medium[b-ff2tka0mlw] {
    border-color: #2563eb;
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.12);
}

.severity-high[b-ff2tka0mlw] {
    border-color: #f97316;
    color: #c2410c;
    background: rgba(249, 115, 22, 0.12);
}

.severity-critical[b-ff2tka0mlw],
.severity-urgent[b-ff2tka0mlw] {
    border-color: #ef4444;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}

/* ---------- States ---------- */
.requests-loading[b-ff2tka0mlw],
.requests-empty[b-ff2tka0mlw] {
    font-size: 16px;
    color: rgba(87, 96, 115, 0.78);
    text-align: center;
    border: 1px dashed rgba(189, 197, 216, 0.68);
    border-radius: 18px;
    padding: 48px 16px;
    background: rgba(249, 250, 255, 0.7);
}

.details-error[b-ff2tka0mlw] {
    font-size: 13px;
    color: #dc2626;
    padding: 12px 14px;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 10px;
    margin-bottom: 8px;
}

.terminal-notice[b-ff2tka0mlw] {
    margin: 0;
    color: rgba(87, 96, 115, 0.78);
    font-size: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .summary-grid[b-ff2tka0mlw] {
        grid-template-columns: 1fr;
    }

    .customer-care-section[b-ff2tka0mlw] {
        padding: 16px 0 48px;
    }

    .customer-care-intro h1[b-ff2tka0mlw] {
        font-size: 24px;
    }

    .panel[b-ff2tka0mlw] {
        padding: 22px;
    }
}

/* ---------- Issue picker (searchable modal trigger — box styled to match the create-ticket picker
   and this page's own selects; the box lives on the trigger div so an inline span can't collapse it). ---------- */
.issue-picker-trigger[b-ff2tka0mlw] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0 44px 0 16px;
    border: 1px solid #d3daeb;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

.issue-picker-trigger:focus[b-ff2tka0mlw],
.issue-picker-trigger:focus-within[b-ff2tka0mlw] {
    border-color: #0057ff;
    box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.18);
    outline: none;
}

.issue-picker-trigger--disabled[b-ff2tka0mlw] {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

.issue-picker-value[b-ff2tka0mlw] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.issue-picker-value.placeholder[b-ff2tka0mlw] {
    color: #6b7280;
}

.select-icon[b-ff2tka0mlw] {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Pages/ServiceRequestOtherIssues.razor.rz.scp.css */
/* Scoped styles for ServiceRequestOtherIssues.razor — copied from sibling pages
   (ServiceRequestCustomerCare.razor.css for layout, ServiceRequestAdmin.razor.css
   for table/pill/pagination/action-button) so the page looks consistent without
   relying on cross-component scope leaks. */

button[b-bm23o0132p] {
    font-family: inherit;
}

/* ---------- Section masthead ---------- */
.customer-care-section[b-bm23o0132p] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 24px 0 64px;
    color: #141414;
    font-family: "Ubuntu", "Inter", "Segoe UI", sans-serif;
    background: linear-gradient(180deg, rgba(247, 249, 253, 0.92) 0%, rgba(230, 236, 248, 0.72) 100%);
}

.customer-care-masthead[b-bm23o0132p] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.customer-care-intro[b-bm23o0132p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.customer-care-intro h1[b-bm23o0132p] {
    font-size: 30px;
    font-weight: 600;
    color: #0b1b43;
    margin: 0;
}

.customer-care-intro p[b-bm23o0132p] {
    font-size: 15px;
    color: rgba(71, 77, 90, 0.78);
    margin: 0;
}

/* ---------- KPI stat cards ---------- */
.stats-grid[b-bm23o0132p] {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: nowrap;
}

.stat-card[b-bm23o0132p] {
    position: relative;
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 20px;
    border: 1px solid #e2e8f4;
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 55%, #eef3ff 100%);
    padding: 20px;
    min-height: 164px;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.1);
}

.stat-card-header[b-bm23o0132p] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.stat-card-header h3[b-bm23o0132p] {
    font-size: 17px;
    font-weight: 600;
    color: #454a57;
    margin: 0;
}

.stat-card-header span[b-bm23o0132p] {
    font-size: 13px;
    color: rgba(69, 74, 87, 0.68);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.stat-card-value[b-bm23o0132p] {
    font-size: 38px;
    font-weight: 600;
    color: #0b1b43;
    line-height: 1.1;
    margin: 0;
}

/* ---------- Panels ---------- */
.split-grid[b-bm23o0132p] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.panel[b-bm23o0132p] {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid #e2e8f4;
    padding: 28px;
    box-shadow: 0 28px 48px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.panel-header[b-bm23o0132p] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.panel-header h2[b-bm23o0132p] {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.panel-header span[b-bm23o0132p] {
    font-size: 14px;
    color: rgba(98, 108, 132, 0.8);
}

.chart-panel[b-bm23o0132p] {
    min-height: 320px;
}

.chart-body[b-bm23o0132p] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

/* ---------- Top destinations bar list ---------- */
.destinations-list[b-bm23o0132p] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.destinations-item[b-bm23o0132p] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.destinations-name[b-bm23o0132p] {
    min-width: 200px;
    font-weight: 500;
    color: #1f2937;
    font-size: 14px;
}

.destinations-bar-track[b-bm23o0132p] {
    flex: 1;
    background: #eef1f6;
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
}

.destinations-bar-fill[b-bm23o0132p] {
    background: linear-gradient(90deg, #032b78 0%, #1678ff 100%);
    height: 100%;
}

.destinations-count[b-bm23o0132p] {
    min-width: 36px;
    text-align: right;
    font-weight: 600;
    color: #0b1b43;
    font-size: 14px;
}

.destinations-empty[b-bm23o0132p] {
    margin: 0;
    color: rgba(87, 96, 115, 0.78);
    font-size: 14px;
}

/* ---------- Filters ---------- */
.filters-panel h2[b-bm23o0132p] {
    margin: 0;
}

.filter-fields[b-bm23o0132p] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.filter-field[b-bm23o0132p] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-label[b-bm23o0132p] {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    letter-spacing: 0.3px;
}

.filter-field select[b-bm23o0132p],
.filter-field input[b-bm23o0132p] {
    height: 40px;
    border-radius: 12px;
    border: 1px solid #d3daeb;
    padding: 0 16px;
    font-size: 14px;
    color: #111827;
    background-color: #ffffff;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

.filter-field select[b-bm23o0132p] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236c7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 46px;
}

.filter-field select:focus[b-bm23o0132p],
.filter-field input:focus[b-bm23o0132p] {
    border-color: #0057ff;
    box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.18);
    outline: none;
}

.filter-actions[b-bm23o0132p] {
    display: flex;
    gap: 16px;
}

.primary-button[b-bm23o0132p] {
    height: 44px;
    padding: 0 24px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #032b78 0%, #001f57 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 16px 24px rgba(0, 31, 87, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.primary-button:hover[b-bm23o0132p] {
    transform: translateY(-1px);
    box-shadow: 0 22px 32px rgba(0, 31, 87, 0.28);
}

/* ---------- Requests panel + table ---------- */
.requests-panel[b-bm23o0132p] {
    gap: 24px;
    min-height: 320px;
}

.requests-loading[b-bm23o0132p],
.requests-empty[b-bm23o0132p] {
    font-size: 16px;
    color: rgba(87, 96, 115, 0.78);
    text-align: center;
    border: 1px dashed rgba(189, 197, 216, 0.68);
    border-radius: 18px;
    padding: 48px 16px;
    background: rgba(249, 250, 255, 0.7);
}

.requests-table[b-bm23o0132p] {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, 1);
}

.enterprise-table[b-bm23o0132p] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.enterprise-table thead th[b-bm23o0132p] {
    text-align: left;
    padding: 16px 20px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    background: #f8fafc;
    font-weight: 600;
}

.enterprise-table tbody td[b-bm23o0132p] {
    padding: 16px 20px;
    font-size: 14px;
    color: #0f172a;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    background: #fff;
    vertical-align: middle;
}

.enterprise-table tbody tr:hover td[b-bm23o0132p] {
    background: #f1f5f9;
}

.request-id-cell[b-bm23o0132p] {
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ---------- Pill badges (severity / status) ---------- */
.pill-badge[b-bm23o0132p] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid transparent;
    line-height: 1.4;
}

.status-open[b-bm23o0132p] {
    border-color: #f97316;
    color: #c2410c;
    background: rgba(249, 115, 22, 0.12);
}

.status-inprogress[b-bm23o0132p],
.status-in-progress[b-bm23o0132p],
.status-reopened[b-bm23o0132p] {
    border-color: #facc15;
    color: #854d0e;
    background: rgba(250, 204, 21, 0.15);
}

.status-onhold[b-bm23o0132p],
.status-pendingcustomer[b-bm23o0132p],
.status-pendingthirdparty[b-bm23o0132p],
.status-pending-customer[b-bm23o0132p],
.status-pending-third-party[b-bm23o0132p] {
    border-color: #94a3b8;
    color: #475569;
    background: rgba(148, 163, 184, 0.2);
}

.status-resolved[b-bm23o0132p],
.status-closed[b-bm23o0132p] {
    border-color: #22c55e;
    color: #166534;
    background: rgba(34, 197, 94, 0.12);
}

.severity-low[b-bm23o0132p] {
    border-color: #0ea5e9;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.12);
}

.severity-medium[b-bm23o0132p] {
    border-color: #2563eb;
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.12);
}

.severity-high[b-bm23o0132p] {
    border-color: #f97316;
    color: #c2410c;
    background: rgba(249, 115, 22, 0.12);
}

.severity-critical[b-bm23o0132p],
.severity-urgent[b-bm23o0132p] {
    border-color: #ef4444;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}

/* ---------- Action buttons ---------- */
.action-buttons[b-bm23o0132p] {
    display: flex;
    gap: 8px;
}

.action-button[b-bm23o0132p] {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #2563eb;
    background: transparent;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.action-button:hover:not(:disabled)[b-bm23o0132p] {
    background: #2563eb;
    color: #fff;
}

.action-button:disabled[b-bm23o0132p] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- Pagination ---------- */
.pagination-footer[b-bm23o0132p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
}

.pagination-status[b-bm23o0132p] {
    font-size: 13px;
    color: #475569;
    font-weight: 500;
}

.pagination-controls[b-bm23o0132p] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination-nav-button[b-bm23o0132p] {
    border: 1px solid #cbd5f5;
    background: #fff;
    color: #1d4ed8;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    min-width: 80px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.pagination-nav-button:hover:not(:disabled)[b-bm23o0132p] {
    background: #1d4ed8;
    color: #fff;
}

.pagination-nav-button:disabled[b-bm23o0132p] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .stats-grid[b-bm23o0132p] {
        flex-wrap: wrap;
    }

    .stat-card[b-bm23o0132p] {
        flex: 1 1 calc(50% - 12px);
    }
}

@media (max-width: 1100px) {
    .split-grid[b-bm23o0132p],
    .filter-fields[b-bm23o0132p] {
        grid-template-columns: 1fr;
    }

    .panel[b-bm23o0132p] {
        padding: 24px;
    }
}

@media (max-width: 960px) {
    .customer-care-section[b-bm23o0132p] {
        padding: 16px 0 48px;
    }

    .customer-care-intro h1[b-bm23o0132p] {
        font-size: 26px;
    }
}

@media (max-width: 760px) {
    .stats-grid[b-bm23o0132p] {
        flex-wrap: wrap;
    }

    .stat-card[b-bm23o0132p] {
        flex: 1 1 100%;
    }

    .destinations-name[b-bm23o0132p] {
        min-width: 140px;
    }
}
/* /Pages/ServiceRequestRcaCapOwnerReview.razor.rz.scp.css */
.rca-review-page[b-otzpnufgbl] { padding: 24px; max-width: 1000px; }
.rca-review-title[b-otzpnufgbl] { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.rca-review-sub[b-otzpnufgbl] { color: #666; font-size: 14px; margin-bottom: 20px; }

.rca-review-card[b-otzpnufgbl] {
    border: 1px solid rgba(204,204,204,1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
    background: #fff;
}
.rca-review-card__header[b-otzpnufgbl] { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.rca-review-ticket[b-otzpnufgbl] { font-weight: 600; font-size: 16px; }
.rca-review-dept[b-otzpnufgbl] { color: #555; font-size: 14px; }
.rca-review-due[b-otzpnufgbl] { margin-left: auto; font-size: 13px; color: #555; }

/* RCA (left) and CAP (right) side by side. */
.rca-review-columns[b-otzpnufgbl] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) {
    .rca-review-columns[b-otzpnufgbl] { grid-template-columns: 1fr; }
}

.rca-review-section[b-otzpnufgbl] { border-top: 1px solid #eee; padding-top: 12px; margin-top: 10px; }
.rca-review-section__title[b-otzpnufgbl] { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.rca-review-section p[b-otzpnufgbl] { margin: 0 0 6px; font-size: 14px; }
.rca-review-entry[b-otzpnufgbl] { border: 1px solid #eee; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fafafa; }
.rca-review-meta[b-otzpnufgbl] { color: #777; font-size: 12px; }

.rca-review-actions[b-otzpnufgbl] { margin-top: 12px; border-top: 1px solid #eee; padding-top: 12px; }
.rca-review-notes[b-otzpnufgbl] { width: 100%; margin-bottom: 8px; }
.rca-review-buttons[b-otzpnufgbl] { display: flex; gap: 10px; }
/* /Pages/ServiceRequestRcaCapReview.razor.rz.scp.css */
.rca-review-page[b-r7oz1zvp64] { padding: 24px; max-width: 1000px; }
.rca-review-title[b-r7oz1zvp64] { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.rca-review-sub[b-r7oz1zvp64] { color: #666; font-size: 14px; margin-bottom: 20px; }

.rca-review-card[b-r7oz1zvp64] {
    border: 1px solid rgba(204,204,204,1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
    background: #fff;
}
.rca-review-card__header[b-r7oz1zvp64] { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.rca-review-ticket[b-r7oz1zvp64] { font-weight: 600; font-size: 16px; }
.rca-review-dept[b-r7oz1zvp64] { color: #555; font-size: 14px; }
.rca-review-due[b-r7oz1zvp64] { margin-left: auto; font-size: 13px; color: #555; }

/* RCA (left) and CAP (right) side by side so each ticket's two artifacts are worked on together. */
.rca-review-columns[b-r7oz1zvp64] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) {
    .rca-review-columns[b-r7oz1zvp64] { grid-template-columns: 1fr; }
}

.rca-review-section[b-r7oz1zvp64] { border-top: 1px solid #eee; padding-top: 12px; margin-top: 10px; }
.rca-review-section__title[b-r7oz1zvp64] { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.rca-review-section p[b-r7oz1zvp64] { margin: 0 0 6px; font-size: 14px; }
.rca-review-entry[b-r7oz1zvp64] { border: 1px solid #eee; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fafafa; }
.rca-review-meta[b-r7oz1zvp64] { color: #777; font-size: 12px; }

.rca-review-badge[b-r7oz1zvp64] { font-size: 11px; border-radius: 4px; padding: 1px 8px; margin-left: 6px; }
.rca-review-badge.approved[b-r7oz1zvp64] { background: #e8f5e9; color: #1b5e20; }
.rca-review-badge.returned[b-r7oz1zvp64] { background: #fdecea; color: #b00020; }
.rca-review-badge.pending[b-r7oz1zvp64] { background: #f4f6f8; color: #555; }

.rca-review-lastnote[b-r7oz1zvp64] { font-size: 13px; color: #555; margin: 10px 0 0; }

.rca-review-filters[b-r7oz1zvp64] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}
.rca-review-filter-input[b-r7oz1zvp64] {
    padding: 8px 10px;
    border: 1px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 14px;
}

.rca-review-pager[b-r7oz1zvp64] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}
.rca-review-pager-info[b-r7oz1zvp64] { font-size: 13px; color: #555; }

.rca-review-actions[b-r7oz1zvp64] { margin-top: 10px; }
.rca-review-notes[b-r7oz1zvp64] { width: 100%; margin-bottom: 8px; }
.rca-review-buttons[b-r7oz1zvp64] { display: flex; gap: 10px; }
/* /Pages/ServiceRequestSlaCompliance.razor.rz.scp.css */
/* Page surface can never produce a document-level horizontal scrollbar. Wide tables keep
   their own scroll inside .table-responsive, so nothing legitimate is clipped here. */
.sla-compliance-page[b-6v8kt1xc33] {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* Compact, scoped table styling so the dense metric tables fit the content area on a normal
   laptop without needing the per-table scroll. Overrides the heavier global .form-card .table
   padding/size for this page only. Headers may wrap; the table still scrolls inside its own
   .table-responsive on genuinely narrow viewports. */
.sla-compliance-page .table th[b-6v8kt1xc33],
.sla-compliance-page .table td[b-6v8kt1xc33] {
    padding: 8px 10px;
    font-size: 13px;
}

.sla-compliance-page .table thead th[b-6v8kt1xc33] {
    white-space: normal;
    vertical-align: bottom;
    letter-spacing: 0;
}

.compliance-filters[b-6v8kt1xc33] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding: 16px;
    background: rgba(246, 246, 246, 0.5);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
}

.filter-field[b-6v8kt1xc33] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
}

.filter-label[b-6v8kt1xc33] {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 31, 87, 1);
    font-family: 'Ubuntu', sans-serif;
}

.filter-actions[b-6v8kt1xc33] {
    display: flex;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
}

.kpi-grid[b-6v8kt1xc33] {
    display: grid;
    /* min(180px, 100%) keeps a single column from forcing the grid wider than its
       container on very narrow viewports (which caused page-level horizontal scroll). */
    grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
    gap: 16px;
}

.kpi-card[b-6v8kt1xc33] {
    background: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.kpi-label[b-6v8kt1xc33] {
    font-size: 12px;
    color: rgba(0, 31, 87, 1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-value[b-6v8kt1xc33] {
    font-size: 1.7rem;
    font-weight: 700;
    color: rgba(20, 20, 20, 1);
}

.kpi-sub[b-6v8kt1xc33] {
    font-size: 12px;
    color: #4a5568;
}

.charts-grid[b-6v8kt1xc33] {
    display: grid;
    /* Three equal columns so Response, Resolution and SLA donuts share one row.
       minmax(0, 1fr) lets the tracks shrink; the ≤768px query below stacks them. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.report-section[b-6v8kt1xc33] {
    background: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    padding: 18px;
    /* Allow this flex/grid item to shrink so the inner .table-responsive scrolls instead of
       widening the page (grid/flex items default to min-width:auto = min-content). */
    min-width: 0;
}

/* Wide tables scroll horizontally within their own section, never the page. */
.report-section .table-responsive[b-6v8kt1xc33] {
    width: 100%;
    max-width: 100%;
}

.section-title[b-6v8kt1xc33] {
    margin: 0 0 14px 0;
    font-size: 16px;
    font-weight: 500;
    color: rgba(0, 31, 87, 1);
    font-family: 'Ubuntu', sans-serif;
}

/* Explanatory note under a section title (attribution caveats). */
.section-note[b-6v8kt1xc33] {
    margin: -6px 0 14px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #4a5568;
}

/* Customer Service triage aggregate, surfaced beside the By-Department table. It is an aggregate
   (not a per-handler row) to avoid attributing triage to the handler a ticket ends up under. */
.cs-triage-summary[b-6v8kt1xc33] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 0.5px solid rgba(0, 31, 87, 0.25);
    border-left: 3px solid rgba(0, 31, 87, 1);
    border-radius: 8px;
    background: rgba(0, 31, 87, 0.04);
}

.cs-triage-summary-label[b-6v8kt1xc33] {
    font-weight: 600;
    color: rgba(0, 31, 87, 1);
}

.cs-triage-summary-metrics[b-6v8kt1xc33] {
    color: #2d3748;
}

.cs-triage-summary--empty[b-6v8kt1xc33] {
    border-left-color: #cbd5e0;
    background: #f7fafc;
}

.cs-triage-summary--empty .cs-triage-summary-label[b-6v8kt1xc33] {
    color: #4a5568;
}

.cs-triage-summary--empty .cs-triage-summary-metrics[b-6v8kt1xc33] {
    color: #718096;
    font-style: italic;
}

/* Clickable KPI cards (drill-down). Mirrors the Backlog summary-tile affordance. The base
   look comes from .kpi-card; here we add button reset + interaction states. */
.kpi-card--clickable[b-6v8kt1xc33] {
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.kpi-card--clickable:hover[b-6v8kt1xc33] {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 43, 130, 0.4);
}

.kpi-card--clickable:focus-visible[b-6v8kt1xc33] {
    outline: 2px solid rgba(0, 43, 130, 1);
    outline-offset: 2px;
}

.kpi-card--clickable.is-active[b-6v8kt1xc33] {
    border-color: rgba(0, 43, 130, 1);
    box-shadow: 0 0 0 2px rgba(0, 43, 130, 0.15);
}

.drill-header[b-6v8kt1xc33] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.drill-title[b-6v8kt1xc33] {
    margin: 0;
}

.drill-note[b-6v8kt1xc33] {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #b45309;
}

.drill-breached[b-6v8kt1xc33] {
    color: #b91c1c;
    font-weight: 500;
}

/* Clickable breakdown-table rows (By Department, root cause) → open the drill panel. */
.drill-row[b-6v8kt1xc33] {
    cursor: pointer;
}

.drill-row:hover[b-6v8kt1xc33] {
    background-color: rgba(0, 43, 130, 0.06) !important;
}

.drill-row:focus-visible[b-6v8kt1xc33] {
    outline: 2px solid rgba(0, 43, 130, 1);
    outline-offset: -2px;
}

/* Narrow viewports: stack the charts and filters so nothing forces the page wider
   than the screen (mirrors the responsive pattern used on the Backlog page). */
@media (max-width: 768px) {
    .charts-grid[b-6v8kt1xc33] {
        grid-template-columns: 1fr;
    }

    .compliance-filters[b-6v8kt1xc33] {
        gap: 12px;
    }

    .filter-field[b-6v8kt1xc33] {
        min-width: 0;
        width: 100%;
    }

    .filter-actions[b-6v8kt1xc33] {
        margin-left: 0;
        width: 100%;
    }

    .filter-actions .btn[b-6v8kt1xc33] {
        flex: 1 1 auto;
    }
}

/* Department modal-picker trigger affordance (mirrors ServiceRequestAdminIssue.razor.css). */
.picker-trigger[b-6v8kt1xc33] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-right: 36px;
}

.picker-trigger:not(.picker-trigger--disabled):hover[b-6v8kt1xc33],
.picker-trigger:not(.picker-trigger--disabled):focus-visible[b-6v8kt1xc33] {
    border-color: #374151;
    background-color: #f5f7fb;
    outline: none;
}

.picker-trigger--disabled[b-6v8kt1xc33] {
    background-color: #f1f1f1;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

.picker-value[b-6v8kt1xc33] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-value.placeholder[b-6v8kt1xc33] {
    color: #9ca3af;
}

.picker-caret[b-6v8kt1xc33] {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 9px;
    height: 9px;
    border: solid #374151;
    border-width: 0 2px 2px 0;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}
/* /Pages/ServiceRequestUser.razor.rz.scp.css */
/* Moved from inline <style> in ServiceRequestUser.razor (:root vars relocated to app.css) */

    .service-request-container[b-eihe29trkr] {
        width: 100%;
        display: flex;
        overflow-x: hidden;
        min-height: 100vh;
        align-items: center;
        flex-direction: column;
        background-color: rgba(246, 246, 246, 1);
        padding: 14px;
    }

    .service-request-frame[b-eihe29trkr] {
        width: 100%;
        max-width: 1164px;
        min-height: 992px;
        display: flex;
        overflow: hidden;
        position: relative;
        align-items: flex-start;
        border-color: rgba(204, 204, 204, 1);
        border-style: solid;
        border-width: 0.5px;
        border-radius: 8px;
        background-color: rgba(246, 246, 246, 1);
    }

    .service-request-content[b-eihe29trkr] {
        gap: 20px;
        width: 100%;
        display: flex;
        padding: 22px;
        align-items: flex-start;
        flex-direction: column;
    }

    /* Stats Section */
    .service-request-stats-section[b-eihe29trkr] {
        gap: 14px;
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        width: 100%;
    }

    .service-request-stat-card[b-eihe29trkr] {
        flex: 1 1 0;
        min-width: 0;
        height: 136px;
        display: flex;
        overflow: hidden;
        position: relative;
        align-items: flex-start;
        border-color: rgba(204, 204, 204, 1);
        border-style: solid;
        border-width: 0.5px;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 1);
    }

    /* Card 1 - Total Requests Raised */
    .stat-card-1[b-eihe29trkr] {
        position: relative;
    }

    .card-1-content[b-eihe29trkr] {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        flex-direction: column;
        padding: 20px 16px 16px 16px;
        z-index: 2;
    }

    .card-1-text[b-eihe29trkr] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        width: 100%;
        margin-bottom: auto;
    }

    .stat-card-1 .stat-card-label[b-eihe29trkr] {
        color: rgba(20, 20, 20, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        line-height: 1.5;
        margin: 0;
    }

    .stat-card-1 .stat-card-value[b-eihe29trkr] {
        color: rgba(20, 20, 20, 1);
        font-size: 48px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: 1;
        margin: 0;
    }

    /* Card 1 Trend Indicator - Bottom Right */
    .stat-card-1 .stat-card-trend[b-eihe29trkr] {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: auto;
        align-self: flex-end;
        margin-right: 0;
    }

    .stat-card-1 .trend-icon[b-eihe29trkr] {
        width: 33px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .stat-card-1 .trend-icon svg[b-eihe29trkr] {
        display: block;
    }

    .stat-card-1 .trend-text[b-eihe29trkr] {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    .stat-card-1 .trend-value[b-eihe29trkr] {
        color: #52C759;
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: 1;
    }

    .stat-card-1 .trend-dot[b-eihe29trkr] {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: rgba(20, 20, 20, 1);
        flex-shrink: 0;
        display: inline-block;
    }

    .stat-card-1 .trend-period[b-eihe29trkr] {
        color: rgba(20, 20, 20, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        line-height: 1;
    }

    /* Wave Background for Card 1 */
    .stat-card-1-wave[b-eihe29trkr] {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
    }

    .stat-card-1-wave svg[b-eihe29trkr] {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Card 2 - Open */
    .card-2-content[b-eihe29trkr] {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 20px 16px 16px 16px;
        z-index: 2;
    }

    .card-2-text[b-eihe29trkr] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        flex-shrink: 0;
    }

    .card-2-text .stat-card-label[b-eihe29trkr] {
        color: rgba(0, 0, 0, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        line-height: 1.5;
        margin: 0;
    }

    .card-2-value[b-eihe29trkr] {
        color: rgba(0, 0, 0, 1);
        font-size: 48px;
        font-family: Ubuntu, sans-serif;
        font-weight: 700;
        line-height: 1;
        margin: 0;
    }

    .card-2-icon[b-eihe29trkr] {
        width: 35px;
        height: 23px;
        display: flex;
        overflow: visible;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
        flex-shrink: 0;
    }

    .card-2-icon svg[b-eihe29trkr] {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* Wave Background for Card 2 */
    .stat-card-2-wave[b-eihe29trkr] {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
    }

    .stat-card-2-wave svg[b-eihe29trkr] {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Override for card 2 - use SVG wave instead of gradient */
    .stat-card-2 .stat-card-wave-bg:not(.stat-card-2-wave)[b-eihe29trkr] {
        display: none;
    }

    /* Card 3 - In-Progress */
    .card-3-content[b-eihe29trkr] {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 20px 16px 16px 16px;
        z-index: 2;
    }

    .card-3-text[b-eihe29trkr] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        flex-shrink: 0;
    }

    .card-3-text .stat-card-label[b-eihe29trkr] {
        color: rgba(0, 0, 0, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        line-height: 1.5;
        margin: 0;
    }

    .card-3-value[b-eihe29trkr] {
        color: rgba(0, 0, 0, 1);
        font-size: 48px;
        font-family: Ubuntu, sans-serif;
        font-weight: 700;
        line-height: 1;
        margin: 0;
    }

    .card-3-icon[b-eihe29trkr] {
        width: 37px;
        height: 37px;
        display: flex;
        overflow: visible;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
        flex-shrink: 0;
    }

    .card-3-icon svg[b-eihe29trkr] {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* Wave Background for Card 3 */
    .stat-card-3-wave[b-eihe29trkr] {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
    }

    .stat-card-3-wave svg[b-eihe29trkr] {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Override for card 3 - use SVG wave instead of gradient */
    .stat-card-3 .stat-card-wave-bg:not(.stat-card-3-wave)[b-eihe29trkr] {
        display: none;
    }

    /* Card 4 - Resolved */
    .card-4-content[b-eihe29trkr] {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 20px 16px 16px 16px;
        z-index: 2;
    }

    .card-4-text[b-eihe29trkr] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        flex-shrink: 0;
    }

    .card-4-text .stat-card-label[b-eihe29trkr] {
        color: rgba(0, 0, 0, 1);
        font-size: 16px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        line-height: 1.5;
        margin: 0;
    }

    .card-4-value[b-eihe29trkr] {
        color: rgba(0, 0, 0, 1);
        font-size: 48px;
        font-family: Ubuntu, sans-serif;
        font-weight: 700;
        line-height: 1;
        margin: 0;
    }

    .card-4-icon[b-eihe29trkr] {
        width: 42px;
        height: 42px;
        display: flex;
        overflow: visible;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start;
        flex-shrink: 0;
    }

    .card-4-icon svg[b-eihe29trkr] {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* Wave Background for Card 4 */
    .stat-card-4-wave[b-eihe29trkr] {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
    }

    .stat-card-4-wave svg[b-eihe29trkr] {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Override for card 4 - use SVG wave instead of gradient */
    .stat-card-4 .stat-card-wave-bg:not(.stat-card-4-wave)[b-eihe29trkr] {
        display: none;
    }

    /* Common styles */
    .stat-card-label[b-eihe29trkr] {
        color: rgba(20, 20, 20, 1);
        font-size: 20px;
        font-family: Ubuntu;
        font-weight: 400;
        line-height: normal;
        align-self: stretch;
    }

    .stat-card-value[b-eihe29trkr] {
        color: rgba(20, 20, 20, 1);
        font-size: 32px;
        font-family: Ubuntu;
        font-weight: 500;
        line-height: normal;
        align-self: stretch;
    }

    .stat-card-icon[b-eihe29trkr] {
        color: var(--dl-color-colors-blue);
    }

    .stat-card-wave-bg[b-eihe29trkr] {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(180deg, 
            rgba(240, 240, 240, 0.1) 0%, 
            rgba(220, 220, 220, 0.15) 25%,
            rgba(200, 200, 200, 0.1) 50%,
            rgba(220, 220, 220, 0.15) 75%,
            rgba(240, 240, 240, 0.1) 100%);
        opacity: 0.3;
        pointer-events: none;
    }
    
    /* Override for card 1 - use SVG wave instead */
    .stat-card-1 .stat-card-wave-bg:not(.stat-card-1-wave)[b-eihe29trkr] {
        display: none;
    }

    /* Create Ticket Button */
    .service-request-create-button[b-eihe29trkr] {
        display: flex;
        align-self: flex-end;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .create-ticket-btn[b-eihe29trkr] {
        gap: 8px;
        display: flex;
        padding: 12px 16px;
        align-items: center;
        border-radius: 12px;
        justify-content: center;
        background-color: rgba(0, 31, 87, 1);
        color: rgba(255, 255, 255, 1);
        border: none;
        cursor: pointer;
        font-size: 16px;
        font-family: Ubuntu;
        font-weight: 500;
        transition: background-color 0.2s;
    }

    .create-ticket-btn:hover[b-eihe29trkr] {
        background-color: rgba(0, 25, 70, 1);
    }

    .create-ticket-btn svg[b-eihe29trkr] {
        width: 20px;
        height: 20px;
    }

    /* Table Section */
    .service-request-table-section[b-eihe29trkr] {
        margin-top: 10px;
        width: 100%;
        min-height: 504px;
        display: flex;
        overflow: hidden;
        position: relative;
        align-items: flex-start;
        border-color: rgba(204, 204, 204, 1);
        border-style: solid;
        border-width: 0.5px;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 1);
        flex-direction: column;
    }

    .table-header-section[b-eihe29trkr] {
        width: 100%;
        display: flex;
        padding: 20px 12px 0 12px;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .table-header-right[b-eihe29trkr] {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .table-title[b-eihe29trkr] {
        color: rgba(20, 20, 20, 1);
        font-size: 20px;
        font-family: Ubuntu;
        font-weight: 400;
        line-height: normal;
    }

    .table-subtitle[b-eihe29trkr] {
        color: rgba(134, 134, 134, 1);
        font-size: 12px;
        font-family: Ubuntu;
        font-weight: 400;
        text-align: right;
    }

    /* Status filter for Recent Requests — native select styled to match the page palette. */
    .recent-filter[b-eihe29trkr] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .recent-filter__label[b-eihe29trkr] {
        color: rgba(134, 134, 134, 1);
        font-family: Ubuntu, sans-serif;
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0;
    }

    .recent-filter__wrapper[b-eihe29trkr] {
        position: relative;
        display: inline-flex;
        align-items: center;
    }

    .recent-filter__select[b-eihe29trkr] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(204, 204, 204, 1);
        border-radius: 12px;
        color: rgba(20, 20, 20, 1);
        font-family: Ubuntu, sans-serif;
        font-size: 14px;
        font-weight: 400;
        height: 40px;
        padding: 0 36px 0 14px;
        min-width: 170px;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .recent-filter__select:hover:not(:disabled)[b-eihe29trkr] {
        border-color: rgba(0, 31, 87, 0.4);
    }

    .recent-filter__select:focus-visible[b-eihe29trkr] {
        outline: none;
        border-color: rgba(0, 31, 87, 1);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
    }

    .recent-filter__select:disabled[b-eihe29trkr] {
        background-color: rgba(246, 246, 246, 1);
        color: rgba(134, 134, 134, 1);
        cursor: not-allowed;
    }

    .recent-filter__chevron[b-eihe29trkr] {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(0, 31, 87, 1);
        pointer-events: none;
    }

    @media (max-width: 768px) {
        .table-header-right[b-eihe29trkr] { width: 100%; justify-content: space-between; }
        .recent-filter__select[b-eihe29trkr] { min-width: 140px; }
    }

    .table-container[b-eihe29trkr] {
        width: 100%;
        position: relative;
        padding: 20px 12px 60px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Bootstrap Table Overrides */
    .service-request-table[b-eihe29trkr] {
        margin-bottom: 0;
        font-family: Ubuntu, sans-serif;
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        background-color: transparent;
    }

    .service-request-table thead[b-eihe29trkr] {
        border-bottom: 1px solid var(--dl-color-default-frames);
    }

    .service-request-table thead th[b-eihe29trkr] {
        border-top: none;
        border-bottom: 1px solid var(--dl-color-default-frames);
        padding: 12px 16px;
        vertical-align: middle;
        background-color: transparent;
        border-left: none;
        border-right: none;
    }

    .service-request-table tbody tr[b-eihe29trkr] {
        border-bottom: 1px solid var(--dl-color-default-frames);
    }

    .service-request-table tbody tr:hover[b-eihe29trkr] {
        background-color: transparent;
    }

    .service-request-table tbody tr:last-child[b-eihe29trkr] {
        border-bottom: none;
    }

    .service-request-table tbody td[b-eihe29trkr] {
        padding: 16px;
        vertical-align: middle;
        border-top: none;
        border-bottom: 1px solid var(--dl-color-default-frames);
        border-left: none;
        border-right: none;
    }

    .table-header-cell[b-eihe29trkr] {
        color: var(--dl-color-default-grey100);
        font-size: 12px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .table-cell[b-eihe29trkr] {
        font-size: 14px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        color: var(--dl-color-default-textcolor);
        white-space: nowrap;
    }

    .request-id[b-eihe29trkr] {
        font-weight: 500;
        color: rgba(0, 31, 87, 1);
    }

    /* Status Badges */
    .status-badge[b-eihe29trkr] {
        padding: 4px 8px;
        border-radius: 20px;
        font-size: 14px;
        font-family: Ubuntu;
        font-weight: 400;
        display: inline-block;
    }

    .status-open[b-eihe29trkr] {
        border: 0.5px solid rgba(255, 59, 48, 1);
        background-color: rgba(255, 59, 48, 0.12);
        color: var(--dl-color-colors-red);
    }

    .status-in-progress[b-eihe29trkr] {
        border: 0.5px solid rgba(0, 122, 255, 1);
        background-color: rgba(0, 122, 255, 0.12);
        color: var(--dl-color-colors-blue);
    }

    .status-resolved[b-eihe29trkr] {
        border: 0.5px solid rgba(52, 199, 89, 1);
        background-color: rgba(52, 199, 89, 0.12);
        color: var(--dl-color-colors-green);
    }

    .status-closed[b-eihe29trkr] {
        border: 0.5px solid rgb(216 11 131);
        background-color: rgb(14 238 49 / 32%);
        color: var(--dl-color-colors-red);
    }

    .status-reopened[b-eihe29trkr] {
        border: 0.5px solid rgba(255, 149, 0, 1);
        background-color: rgba(255, 149, 0, 0.12);
        color: var(--dl-color-colors-orange);
    }

    /* Severity Badges */
    .severity-badge[b-eihe29trkr] {
        padding: 4px 8px;
        border-radius: 20px;
        font-size: 14px;
        font-family: Ubuntu;
        font-weight: 400;
        display: inline-block;
    }

    .severity-critical[b-eihe29trkr] {
        border: 0.5px solid rgba(255, 59, 48, 1);
        background-color: rgba(255, 59, 48, 0.12);
        color: var(--dl-color-colors-red);
    }

    .severity-high[b-eihe29trkr] {
        border: 0.5px solid rgba(162, 132, 94, 1);
        background-color: rgba(162, 132, 94, 0.12);
        color: var(--dl-color-colors-brown);
    }

    .severity-medium[b-eihe29trkr] {
        border: 0.5px solid rgba(255, 149, 0, 1);
        background-color: rgba(255, 149, 0, 0.12);
        color: var(--dl-color-colors-orange);
    }

    .severity-low[b-eihe29trkr] {
        border: 0.5px solid rgba(0, 199, 190, 1);
        background-color: rgba(0, 199, 190, 0.12);
        color: var(--dl-color-colors-mint);
    }

    .view-btn[b-eihe29trkr] {
        gap: 8px;
        display: inline-flex;
        padding: 6px 8px;
        align-items: center;
        border: 0.5px solid rgba(204, 204, 204, 1);
        border-radius: 4px;
        justify-content: center;
        background-color: transparent;
        color: rgba(20, 20, 20, 1);
        font-size: 12px;
        font-family: Ubuntu, sans-serif;
        font-weight: 400;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .view-btn:hover[b-eihe29trkr] {
        background-color: rgba(246, 246, 246, 1);
        border-color: rgba(204, 204, 204, 1);
        color: rgba(20, 20, 20, 1);
    }

    /* Icon-only View button: centre the eye SVG. */
    .view-btn--icon[b-eihe29trkr] {
        line-height: 0;
        color: rgba(0, 31, 87, 1);
    }

    .view-btn--icon svg[b-eihe29trkr] {
        display: block;
    }

    .row-actions[b-eihe29trkr] {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

    .resolution-action-btn[b-eihe29trkr] {
        gap: 6px;
        display: inline-flex;
        padding: 6px 8px;
        align-items: center;
        border: 0.5px solid rgba(52, 199, 89, 1);
        border-radius: 4px;
        justify-content: center;
        background-color: rgba(52, 199, 89, 0.12);
        color: var(--dl-color-colors-green);
        font-size: 12px;
        font-family: Ubuntu, sans-serif;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .resolution-action-btn:hover:not(:disabled)[b-eihe29trkr] {
        background-color: rgba(52, 199, 89, 0.2);
    }

    .resolution-action-btn:disabled[b-eihe29trkr] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .table-pagination[b-eihe29trkr] {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 9px;
        align-items: center;
        flex-wrap: wrap;
    }

    .pagination-btn[b-eihe29trkr] {
        gap: 12px;
        width: 36px;
        height: 28px;
        display: flex;
        padding: 6px 12px;
        align-items: center;
        border-color: rgba(204, 204, 204, 1);
        border-style: solid;
        border-width: 0.5px;
        border-radius: 4px;
        justify-content: center;
        background-color: transparent;
        color: var(--dl-color-default-textcolor);
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .pagination-btn:hover[b-eihe29trkr] {
        background-color: rgba(246, 246, 246, 1);
    }

    .pagination-btn svg[b-eihe29trkr] {
        width: 12px;
        height: 12px;
    }

    .pagination-text-btn[b-eihe29trkr] {
        width: auto;
        padding: 6px 12px;
        font-size: 12px;
        text-transform: uppercase;
    }

    .pagination-number[b-eihe29trkr] {
        min-width: 32px;
        height: 28px;
    }

    .pagination-number.active[b-eihe29trkr] {
        background-color: rgba(0, 31, 87, 1);
        color: rgba(255, 255, 255, 1);
        border-color: rgba(0, 31, 87, 1);
    }

    .pagination-ellipsis[b-eihe29trkr] {
        font-size: 12px;
        color: var(--dl-color-default-grey100);
        padding: 0 4px;
    }

    /* Responsive adjustments */
    @media (max-width: 1400px) {
        .service-request-frame[b-eihe29trkr] {
            width: 100%;
        }
    }

    @media (max-width: 1024px) {
        .service-request-stats-section[b-eihe29trkr] {
            gap: 10px;
        }

        .service-request-stat-card[b-eihe29trkr] {
            flex: 1 1 0;
            min-width: 0;
        }

        .stat-card-content[b-eihe29trkr] {
            width: auto;
            max-width: 100%;
        }

        .stat-card-label[b-eihe29trkr] {
            font-size: 16px;
        }

        .stat-card-value[b-eihe29trkr] {
            font-size: 26px;
        }

        .service-request-content[b-eihe29trkr] {
            padding: 16px;
        }

        .table-container[b-eihe29trkr] {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .service-request-table[b-eihe29trkr] {
            min-width: 1000px;
        }

        .service-request-table thead[b-eihe29trkr] {
            position: sticky;
            top: 0;
            background-color: rgba(255, 255, 255, 1);
            z-index: 10;
        }
    }

    @media (max-width: 768px) {
        .service-request-container[b-eihe29trkr] {
            padding: 8px;
        }

        .service-request-frame[b-eihe29trkr] {
            border-radius: 4px;
        }

        .service-request-content[b-eihe29trkr] {
            padding: 12px;
            gap: 16px;
        }

        .service-request-stats-section[b-eihe29trkr] {
            gap: 8px;
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
        }

        .service-request-stat-card[b-eihe29trkr] {
            flex: 0 0 calc(50% - 4px);
            min-width: calc(50% - 4px);
            scroll-snap-align: start;
        }

        .stat-card-content[b-eihe29trkr] {
            width: 100%;
            position: relative;
            gap: 16px;
        }

        .stat-card-label[b-eihe29trkr] {
            font-size: 14px;
        }

        .stat-card-value[b-eihe29trkr] {
            font-size: 24px;
        }

        .trend-value[b-eihe29trkr],
        .trend-period[b-eihe29trkr] {
            font-size: 14px;
        }

        .service-request-create-button[b-eihe29trkr] {
            width: 100%;
            align-self: stretch;
        }

        .create-ticket-btn[b-eihe29trkr] {
            width: 100%;
        }

        .service-request-table-section[b-eihe29trkr] {
            border-radius: 4px;
        }

        .table-header-section[b-eihe29trkr] {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            padding: 16px 12px 0 12px;
        }

        .table-container[b-eihe29trkr] {
            padding: 40px 0 60px 0;
        }

        .service-request-table thead[b-eihe29trkr] {
            display: none;
        }

        .service-request-table tbody tr[b-eihe29trkr] {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px;
            border: 1px solid var(--dl-color-default-frames);
            border-radius: 4px;
            margin-bottom: 12px;
        }

        .service-request-table tbody tr:last-child[b-eihe29trkr] {
            margin-bottom: 0;
        }

        .service-request-table tbody td[b-eihe29trkr] {
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 8px 0;
            border-bottom: 1px solid rgba(204, 204, 204, 0.3);
            white-space: normal;
        }

        .service-request-table tbody td:last-child[b-eihe29trkr] {
            border-bottom: none;
        }

        .service-request-table tbody td[b-eihe29trkr]::before {
            content: attr(data-label);
            font-weight: 600;
            color: var(--dl-color-default-grey100);
            font-size: 12px;
            text-transform: uppercase;
            display: block;
            margin-bottom: 4px;
        }

        .table-pagination[b-eihe29trkr] {
            position: relative;
            bottom: auto;
            left: auto;
            transform: none;
            margin-top: 16px;
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .service-request-container[b-eihe29trkr] {
            padding: 4px;
        }

        .service-request-content[b-eihe29trkr] {
            padding: 8px;
            gap: 12px;
        }

        .service-request-stats-section[b-eihe29trkr] {
            gap: 6px;
        }

        .service-request-stat-card[b-eihe29trkr] {
            flex: 0 0 calc(50% - 3px);
            min-width: calc(50% - 3px);
        }

        .stat-card-label[b-eihe29trkr] {
            font-size: 12px;
        }

        .stat-card-value[b-eihe29trkr] {
            font-size: 20px;
        }

        .stat-card-content[b-eihe29trkr] {
            gap: 12px;
            padding: 16px 8px;
        }

        .trend-value[b-eihe29trkr],
        .trend-period[b-eihe29trkr] {
            font-size: 12px;
        }

        .trend-icon[b-eihe29trkr] {
            width: 28px;
            height: 28px;
        }

        .stat-card-icon[b-eihe29trkr] {
            width: 32px;
            height: 32px;
        }

        .table-header-section[b-eihe29trkr] {
            padding: 12px 8px 0 8px;
        }

        .table-title[b-eihe29trkr] {
            font-size: 18px;
        }

        .table-subtitle[b-eihe29trkr] {
            font-size: 11px;
        }

        .table-container[b-eihe29trkr] {
            padding: 36px 0 50px 0;
        }

        .table-row[b-eihe29trkr] {
            padding: 10px 8px;
        }

        .table-cell[b-eihe29trkr] {
            font-size: 13px;
        }

        .status-badge[b-eihe29trkr],
        .severity-badge[b-eihe29trkr] {
            font-size: 12px;
            padding: 3px 6px;
        }

        .view-btn[b-eihe29trkr] {
            width: 100%;
            padding: 8px;
        }
    }

/* Enterprise column: owner name + who raised it (on-behalf vs self). */
.enterprise-cell .enterprise-name[b-eihe29trkr] {
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
}

.enterprise-onbehalf[b-eihe29trkr] {
    font-size: 12px;
    color: rgba(134, 134, 134, 1);
    margin-top: 2px;
    word-break: break-word;
}

.enterprise-tag[b-eihe29trkr] {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.enterprise-tag--for[b-eihe29trkr] {
    background-color: rgba(0, 31, 87, 0.1);
    color: rgba(0, 31, 87, 1);
    border: 0.5px solid rgba(0, 31, 87, 0.4);
}

.enterprise-tag--by[b-eihe29trkr] {
    background-color: rgba(134, 134, 134, 0.12);
    color: rgba(90, 90, 90, 1);
    border: 0.5px solid rgba(134, 134, 134, 0.5);
}
/* /Pages/TakeSurvey.razor.rz.scp.css */
.ts-banner[b-9fcjlqnyos] {
    background: #f7fafc;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-left: 3px solid rgba(0, 31, 87, 1);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    color: #4a5568;
}

.ts-card[b-9fcjlqnyos] {
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    padding: 20px;
    background: #ffffff;
    max-width: 820px;
}

.ts-qtext[b-9fcjlqnyos] {
    font-size: 16px;
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
    margin-bottom: 16px;
}

.ts-qnum[b-9fcjlqnyos] { color: rgba(0, 31, 87, 1); margin-right: 4px; }
.ts-required[b-9fcjlqnyos] { color: #dc2626; margin-left: 4px; }

.ts-option[b-9fcjlqnyos] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    cursor: pointer;
}

.ts-input[b-9fcjlqnyos] {
    width: 100%;
    padding: 8px 12px;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    box-sizing: border-box;
}

.ts-input:focus[b-9fcjlqnyos] {
    outline: none;
    border-color: var(--dl-color-default-primary, #001f57);
    box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
}

.ts-rating[b-9fcjlqnyos] { display: flex; gap: 18px; flex-wrap: wrap; }
.ts-rating-item[b-9fcjlqnyos] { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.ts-matrix td[b-9fcjlqnyos], .ts-matrix th[b-9fcjlqnyos] { vertical-align: middle; }
.ts-num[b-9fcjlqnyos] { width: 90px; padding: 6px 8px; border: 0.5px solid rgba(204,204,204,1); border-radius: 6px; }

.ts-comment[b-9fcjlqnyos] { margin-top: 18px; }
.ts-label[b-9fcjlqnyos] { font-size: 13px; font-weight: 500; color: #4a5568; display: block; margin-bottom: 6px; }

.ts-footer[b-9fcjlqnyos] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    max-width: 820px;
}

.ts-nav[b-9fcjlqnyos] { display: flex; gap: 10px; }
.ts-page[b-9fcjlqnyos] { color: #4a5568; font-size: 14px; }

/* Per-index step header — solid navy brand band (matches builder .indice-header) */
.ts-step-header[b-9fcjlqnyos] {
    background: var(--primary, #002B82);
    color: #fff;
    padding: 14px 18px;
    border-radius: 8px;
    border-left: 5px solid var(--dl-color-light-blue, #32ADE6);
    box-shadow: 0 1px 3px rgba(0, 43, 130, .25);
}

.ts-step-eyebrow[b-9fcjlqnyos] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .75);
}

.ts-step-title[b-9fcjlqnyos] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
}

.ts-step-count[b-9fcjlqnyos] {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    white-space: nowrap;
}
/* /Pages/ViewCanteenFeedback.razor.rz.scp.css */
/* View Canteen Feedback - matches admin-dashboard.css design tokens */

.feedback-page[b-gijg7v9c85] {
    padding: 24px;
    max-width: 1440px;
    margin: 0 auto;
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #000F29;
}

.feedback-header[b-gijg7v9c85] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.feedback-header__text h1[b-gijg7v9c85] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #4B5563;
    margin: 0 0 4px;
}

.feedback-header__text .dashboard-subtitle[b-gijg7v9c85] {
    color: #6B7280;
    margin: 0;
    font-size: 0.875rem;
}

.feedback-header__actions .module-link[b-gijg7v9c85] {
    text-decoration: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.875rem;
    border: 1px solid #002B82;
    color: #002B82;
    background-color: rgba(0, 43, 130, 0.04);
    cursor: pointer;
}

/* ---------------- Analytics strip ---------------- */
.feedback-analytics[b-gijg7v9c85] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.analytics-card[b-gijg7v9c85] {
    background: #FFFFFF;
    border: 0.5px solid #CCCCCC;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.analytics-card__header[b-gijg7v9c85] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.analytics-card__icon[b-gijg7v9c85] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: #EEF1F6;
    color: #002B82;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.analytics-card__title[b-gijg7v9c85] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #000F29;
}

.analytics-card__subtitle[b-gijg7v9c85] {
    margin: 2px 0 0;
    color: #6B7280;
    font-size: 0.8125rem;
}

.analytics-card__empty[b-gijg7v9c85],
.analytics-card__skeleton[b-gijg7v9c85] {
    color: #6B7280;
    font-size: 0.875rem;
    padding: 12px 0;
}

.summary-grid[b-gijg7v9c85] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.summary-stat[b-gijg7v9c85] {
    background-color: #F3F5F8;
    border: 0.5px solid #D8E3F1;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.summary-stat__value[b-gijg7v9c85] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #002B82;
}

.summary-stat__unit[b-gijg7v9c85] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6B7280;
    margin-left: 4px;
}

.summary-stat__label[b-gijg7v9c85] {
    color: #4B5563;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.summary-stat__sub[b-gijg7v9c85] {
    font-size: 0.75rem;
    color: #6B7280;
}

.summary-stat__delta[b-gijg7v9c85] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
    width: fit-content;
}

.summary-stat__delta--up[b-gijg7v9c85] {
    color: #22C55E;
    background-color: rgba(34, 197, 94, 0.1);
}

.summary-stat__delta--down[b-gijg7v9c85] {
    color: #DC2626;
    background-color: rgba(220, 38, 38, 0.1);
}

.summary-stat__delta--neutral[b-gijg7v9c85] {
    color: #6B7280;
    background-color: rgba(107, 114, 128, 0.1);
}

.summary-stat__stars[b-gijg7v9c85] {
    color: #F59E0B;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.summary-stat--ghost[b-gijg7v9c85] {
    background-color: #FFFFFF;
    border-style: dashed;
}

/* Rating distribution */
.rating-distribution[b-gijg7v9c85] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rating-row[b-gijg7v9c85] {
    display: grid;
    grid-template-columns: 36px 1fr 40px;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
}

.rating-row__label[b-gijg7v9c85] {
    color: #4B5563;
    font-weight: 600;
}

.rating-row__bar[b-gijg7v9c85] {
    height: 8px;
    border-radius: 999px;
    background-color: #EEF1F6;
    overflow: hidden;
}

.rating-row__fill[b-gijg7v9c85] {
    height: 100%;
    background: linear-gradient(90deg, #002B82, #4F6FBF);
    border-radius: 999px;
    transition: width 200ms ease-in-out;
}

.rating-row__count[b-gijg7v9c85] {
    text-align: right;
    color: #6B7280;
    font-variant-numeric: tabular-nums;
}

/* Trend chart */
.trend-chart[b-gijg7v9c85] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trend-chart__svg[b-gijg7v9c85] {
    width: 100%;
    height: 100px;
    color: #002B82;
}

.trend-chart__footer[b-gijg7v9c85] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #6B7280;
}

/* ---------------- Filter bar ---------------- */
.form-card[b-gijg7v9c85] {
    background: #FFFFFF;
    border: 0.5px solid #CCCCCC;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 18px 20px;
    margin-bottom: 20px;
}

.filter-grid[b-gijg7v9c85] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
}

.filter-field[b-gijg7v9c85] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
    color: #4B5563;
}

.filter-field label[b-gijg7v9c85] {
    font-weight: 600;
    color: #000F29;
}

.filter-field .form-control[b-gijg7v9c85] {
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.875rem;
    background-color: #FFFFFF;
}

.filter-field--search[b-gijg7v9c85] {
    grid-column: span 2;
}

.filter-field--toggle[b-gijg7v9c85] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 18px;
}

.form-toggle[b-gijg7v9c85] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: #4B5563;
    cursor: pointer;
}

.filter-field--actions[b-gijg7v9c85] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn[b-gijg7v9c85] {
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary[b-gijg7v9c85] {
    background-color: #002B82;
    color: #FFFFFF;
}

.btn-primary:hover[b-gijg7v9c85] {
    background-color: #001f5e;
}

.btn-outline-primary[b-gijg7v9c85] {
    background-color: #FFFFFF;
    color: #002B82;
    border-color: #002B82;
}

.btn-outline-secondary[b-gijg7v9c85] {
    background-color: #FFFFFF;
    color: #4B5563;
    border-color: #D1D5DB;
}

.btn:disabled[b-gijg7v9c85] {
    opacity: 0.5;
    cursor: not-allowed;
}

.feedback-filters__error[b-gijg7v9c85] {
    margin-top: 10px;
    color: #DC2626;
    font-size: 0.8125rem;
}

/* ---------------- List ---------------- */
.feedback-list__header[b-gijg7v9c85] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.feedback-list__header h2[b-gijg7v9c85] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.feedback-list__count[b-gijg7v9c85] {
    color: #6B7280;
    font-size: 0.8125rem;
}

.feedback-list__empty[b-gijg7v9c85] {
    text-align: center;
    color: #6B7280;
    padding: 28px 12px;
    font-size: 0.9rem;
}

.table-responsive[b-gijg7v9c85] {
    overflow-x: auto;
}

.feedback-table[b-gijg7v9c85] {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
}

.feedback-table thead th[b-gijg7v9c85] {
    background-color: #F3F5F8;
    color: #000F29;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding: 10px 8px;
    border-bottom: 2px solid rgba(0, 43, 130, 0.15);
    text-align: left;
}

.feedback-table tbody td[b-gijg7v9c85] {
    padding: 12px 8px;
    vertical-align: top;
    border-bottom: 1px solid #EEF1F6;
}

.feedback-row--hidden td[b-gijg7v9c85] {
    background-color: rgba(220, 38, 38, 0.04);
    color: #9CA3AF;
    text-decoration: line-through;
}

.feedback-comment-cell[b-gijg7v9c85] {
    background: none;
    border: none;
    padding: 0;
    color: #002B82;
    text-align: left;
    cursor: pointer;
    font-size: inherit;
    max-width: 260px;
    line-height: 1.35;
}

.feedback-comment-cell:hover[b-gijg7v9c85] {
    text-decoration: underline;
}

.rating-stars[b-gijg7v9c85] {
    color: #F59E0B;
    letter-spacing: 1px;
    font-size: 0.95rem;
}

.star[b-gijg7v9c85] {
    color: #D1D5DB;
}

.star--on[b-gijg7v9c85] {
    color: #F59E0B;
}

.status-badge[b-gijg7v9c85] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-badge--new[b-gijg7v9c85] {
    background-color: rgba(0, 43, 130, 0.08);
    color: #002B82;
}

.status-badge--reviewed[b-gijg7v9c85] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #166534;
}

.status-badge--hidden[b-gijg7v9c85] {
    background-color: rgba(107, 114, 128, 0.15);
    color: #4B5563;
}

.actions-col[b-gijg7v9c85] {
    white-space: nowrap;
    width: 1%;
}

.btn-action[b-gijg7v9c85] {
    border: 1px solid #D1D5DB;
    background-color: #FFFFFF;
    color: #002B82;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    margin-right: 6px;
}

.btn-action:hover[b-gijg7v9c85] {
    background-color: #EEF1F6;
}

.btn-action--danger[b-gijg7v9c85] {
    color: #DC2626;
    border-color: rgba(220, 38, 38, 0.4);
}

.btn-action--danger:hover[b-gijg7v9c85] {
    background-color: rgba(220, 38, 38, 0.05);
}

.feedback-list__pagination[b-gijg7v9c85] {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    font-size: 0.8125rem;
    color: #4B5563;
}

/* ---------------- Drawer ---------------- */
.feedback-drawer-backdrop[b-gijg7v9c85] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 15, 41, 0.4);
    z-index: 1000;
}

.feedback-drawer[b-gijg7v9c85] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    background-color: #FFFFFF;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-gijg7v9c85 200ms ease-out;
}

@keyframes slideIn-b-gijg7v9c85 {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.feedback-drawer__header[b-gijg7v9c85] {
    padding: 20px;
    border-bottom: 1px solid #EEF1F6;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.feedback-drawer__header h2[b-gijg7v9c85] {
    margin: 0;
    font-size: 1.1rem;
}

.feedback-drawer__header p[b-gijg7v9c85] {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: #6B7280;
}

.feedback-drawer__close[b-gijg7v9c85] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6B7280;
    cursor: pointer;
    line-height: 1;
}

.feedback-drawer__body[b-gijg7v9c85] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.feedback-drawer__stars[b-gijg7v9c85] {
    color: #F59E0B;
    font-size: 1.1rem;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.feedback-drawer__stars span[b-gijg7v9c85] {
    color: #4B5563;
    font-size: 0.85rem;
}

.feedback-drawer__meta[b-gijg7v9c85] {
    display: grid;
    grid-template-columns: 110px 1fr;
    row-gap: 6px;
    column-gap: 12px;
    font-size: 0.8125rem;
    margin: 0 0 16px;
}

.feedback-drawer__meta dt[b-gijg7v9c85] {
    color: #6B7280;
}

.feedback-drawer__meta dd[b-gijg7v9c85] {
    margin: 0;
    color: #000F29;
}

.feedback-drawer__comment[b-gijg7v9c85] {
    background-color: #F3F5F8;
    border-radius: 8px;
    padding: 12px;
    white-space: pre-wrap;
    line-height: 1.45;
    font-size: 0.875rem;
    color: #000F29;
}

.feedback-drawer__footer[b-gijg7v9c85] {
    border-top: 1px solid #EEF1F6;
    padding: 16px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}


.summary-stat__label[b-gijg7v9c85][b-gijg7v9c85] {
    font-size: 0.6rem;
    padding: 13px 13px;
    margin-left: -10px;
}


/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
    .feedback-analytics[b-gijg7v9c85] {
        grid-template-columns: 1fr;
    }

    .summary-grid[b-gijg7v9c85] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .summary-grid[b-gijg7v9c85] {
        grid-template-columns: 1fr;
    }

    .feedback-header[b-gijg7v9c85] {
        flex-direction: column;
    }

    .filter-field--search[b-gijg7v9c85] {
        grid-column: span 1;
    }
}
/* /Pages/ViewFullSchedule.razor.rz.scp.css */
/* View Full Schedule Styles */
.view-full-schedule[b-0q6yv02ql2] {
    min-height: 100vh;
    background-color: rgba(253, 253, 253, 1);
    padding: 24px;
    font-family: 'Ubuntu', sans-serif;
}

/* Header Section */
.schedule-header[b-0q6yv02ql2] {
    margin-bottom: 32px;
}

.header-content[b-0q6yv02ql2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.header-left[b-0q6yv02ql2] {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* .back-btn replaced by shared .btn-back in wwwroot/css/app.css */

.header-text h1[b-0q6yv02ql2] {
    font-size: 24px;
    font-weight: 700;
    color: rgba(0, 15, 41, 1);
    margin: 0 0 4px 0;
    font-family: 'Ubuntu', sans-serif;
}

.schedule-subtitle[b-0q6yv02ql2] {
    font-size: 16px;
    color: rgba(139, 139, 139, 1);
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
}

.status-badge[b-0q6yv02ql2] {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Ubuntu', sans-serif;
}

.status-badge.published[b-0q6yv02ql2] {
    background: rgba(0, 43, 130, 0.05);
    color: rgba(0, 43, 130, 1);
    border: 1px solid rgba(0, 43, 130, 0.2);
}

/* Loading State */
.loading-container[b-0q6yv02ql2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.loading-spinner[b-0q6yv02ql2] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(216, 227, 241, 1);
    border-top: 3px solid rgba(0, 43, 130, 1);
    border-radius: 50%;
    animation: spin-b-0q6yv02ql2 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-0q6yv02ql2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container p[b-0q6yv02ql2] {
    color: rgba(139, 139, 139, 1);
    font-size: 16px;
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
}

/* No Schedule State */
.no-schedule-container[b-0q6yv02ql2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.no-schedule-icon[b-0q6yv02ql2] {
    color: rgba(139, 139, 139, 1);
    margin-bottom: 24px;
}

.no-schedule-container h2[b-0q6yv02ql2] {
    font-size: 24px;
    font-weight: 700;
    color: rgba(0, 15, 41, 1);
    margin: 0 0 8px 0;
    font-family: 'Ubuntu', sans-serif;
}

.no-schedule-container p[b-0q6yv02ql2] {
    color: rgba(139, 139, 139, 1);
    font-size: 16px;
    margin: 0 0 24px 0;
    font-family: 'Ubuntu', sans-serif;
}

.create-schedule-btn[b-0q6yv02ql2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(0, 43, 130, 1);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.create-schedule-btn:hover[b-0q6yv02ql2] {
    background: rgba(0, 43, 130, 0.9);
}

/* Schedule Content */
.schedule-content[b-0q6yv02ql2] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Day Card */
.day-card[b-0q6yv02ql2] {
    background: white;
    border: 0.5px solid rgba(204, 204, 204, 1);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
}

.day-header[b-0q6yv02ql2] {
    margin-bottom: 24px;
}

.day-info[b-0q6yv02ql2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.day-name[b-0q6yv02ql2] {
    font-size: 20px;
    font-weight: 700;
    color: rgba(0, 15, 41, 1);
    font-family: 'Ubuntu', sans-serif;
}

.day-date[b-0q6yv02ql2] {
    font-size: 16px;
    color: rgba(139, 139, 139, 1);
    font-family: 'Ubuntu', sans-serif;
}

/* Meals Container */
.meals-container[b-0q6yv02ql2] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

/* Meal Card */
.meal-card[b-0q6yv02ql2] {
    flex: 1;
    min-width: 200px;
    background: rgba(247, 248, 251, 1);
    border: 0.5px solid rgba(216, 227, 241, 1);
    border-radius: 8px;
    padding: 16px;
}

.meal-header[b-0q6yv02ql2] {
    margin-bottom: 12px;
}

.meal-type[b-0q6yv02ql2] {
    font-size: 14px;
    font-weight: 700;
    color: rgba(0, 15, 41, 1);
    font-family: 'Ubuntu', sans-serif;
}

.meal-items[b-0q6yv02ql2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meal-item[b-0q6yv02ql2] {
    font-size: 14px;
    color: rgba(139, 139, 139, 1);
    font-family: 'Ubuntu', sans-serif;
    line-height: 1.4;
}

.meal-item.no-meals[b-0q6yv02ql2] {
    font-style: italic;
    color: rgba(139, 139, 139, 0.7);
}

/* Responsive Design */
@media (max-width: 768px) {
    .view-full-schedule[b-0q6yv02ql2] {
        padding: 16px;
    }
    
    .header-content[b-0q6yv02ql2] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .header-left[b-0q6yv02ql2] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .meals-container[b-0q6yv02ql2] {
        flex-direction: column;
        gap: 16px;
    }
    
    .meal-card[b-0q6yv02ql2] {
        min-width: unset;
    }
}

@media (max-width: 480px) {
    .view-full-schedule[b-0q6yv02ql2] {
        padding: 12px;
    }
    
    .day-card[b-0q6yv02ql2] {
        padding: 16px;
    }
    
    .meal-card[b-0q6yv02ql2] {
        padding: 12px;
    }
}
/* /Pages/ViewPublishedMeals.razor.rz.scp.css */
/* User Meal View Page Styles - Based on Figma Designs */

.user-meal-view-container[b-6wnop820eb] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1e293b;
}

/* Header Section */
.meal-view-header[b-6wnop820eb] {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 24px 0;
    margin-bottom: 32px;
}

.header-content[b-6wnop820eb] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.header-left h1[b-6wnop820eb] {
    font-size: 32px;
    font-weight: 700;
    color: #002B82;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.date-info[b-6wnop820eb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.date-info svg[b-6wnop820eb] {
    color: #64748b;
    width: 20px;
    height: 20px;
}

.current-date[b-6wnop820eb] {
    font-size: 16px;
    color: #64748b;
    font-weight: 500;
}

.header-subtitle[b-6wnop820eb] {
    font-size: 16px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.header-right[b-6wnop820eb] {
    flex-shrink: 0;
}

/* Week Navigation */
.week-navigation[b-6wnop820eb] {
    display: flex;
    gap: 12px;
}

.nav-btn[b-6wnop820eb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #002B82;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.nav-btn:hover:not(.disabled)[b-6wnop820eb] {
    border-color: #002B82;
    background: #f8fafc;
    transform: translateY(-1px);
}

.nav-btn.disabled[b-6wnop820eb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-btn svg[b-6wnop820eb] {
    width: 16px;
    height: 16px;
}

/* Main Content */
.main-content[b-6wnop820eb] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px 120px 24px; /* Bottom padding for fixed feedback button */
}

/* Loading State */
.loading-state[b-6wnop820eb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    gap: 16px;
}

.spinner[b-6wnop820eb] {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #002B82;
    border-radius: 50%;
    animation: spin-b-6wnop820eb 1s linear infinite;
}

@keyframes spin-b-6wnop820eb {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-state p[b-6wnop820eb] {
    color: #64748b;
    font-size: 16px;
    margin: 0;
}

/* Empty State (UserScreen_1 Design) */
.empty-state[b-6wnop820eb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.empty-state-icon[b-6wnop820eb] {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    border: 2px solid #e2e8f0;
}

.empty-state-icon svg[b-6wnop820eb] {
    color: #94a3b8;
    width: 64px;
    height: 64px;
}

.empty-state h2[b-6wnop820eb] {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.empty-state p[b-6wnop820eb] {
    font-size: 18px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* Meal Display */
.meal-display[b-6wnop820eb] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.no-meals-day[b-6wnop820eb] {
    text-align: center;
    padding: 60px 24px;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.no-meals-day p[b-6wnop820eb] {
    font-size: 18px;
    color: #64748b;
    margin: 0;
}

/* Feedback Button (Fixed at Bottom) */
.feedback-button-container[b-6wnop820eb] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
}

.feedback-btn[b-6wnop820eb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #002B82 0%, #1e40af 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 43, 130, 0.3);
    font-family: inherit;
}

.feedback-btn:hover[b-6wnop820eb] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 43, 130, 0.4);
}

.feedback-btn svg[b-6wnop820eb] {
    width: 20px;
    height: 20px;
}

/* Toast Container */
.toast-container[b-6wnop820eb] {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1001;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.toast-container.show[b-6wnop820eb] {
    opacity: 1;
    transform: translateX(0);
}

.toast[b-6wnop820eb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-left: 4px solid;
    min-width: 300px;
    max-width: 400px;
}

.toast.info[b-6wnop820eb] {
    border-left-color: #3b82f6;
}

.toast.success[b-6wnop820eb] {
    border-left-color: #10b981;
}

.toast.warning[b-6wnop820eb] {
    border-left-color: #f59e0b;
}

.toast.error[b-6wnop820eb] {
    border-left-color: #ef4444;
}

.toast span[b-6wnop820eb] {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    flex: 1;
}

.toast-close[b-6wnop820eb] {
    background: none;
    border: none;
    font-size: 20px;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.toast-close:hover[b-6wnop820eb] {
    background: #f1f5f9;
    color: #1e293b;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content[b-6wnop820eb] {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .header-left h1[b-6wnop820eb] {
        font-size: 24px;
    }

    .week-navigation[b-6wnop820eb] {
        width: 100%;
        justify-content: center;
    }

    .nav-btn[b-6wnop820eb] {
        flex: 1;
        justify-content: center;
        min-width: 120px;
    }

    .main-content[b-6wnop820eb] {
        padding: 0 16px 120px 16px;
    }

    .feedback-button-container[b-6wnop820eb] {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }

    .feedback-btn[b-6wnop820eb] {
        width: 100%;
        justify-content: center;
    }

    .toast-container[b-6wnop820eb] {
        top: 16px;
        right: 16px;
        left: 16px;
    }

    .toast[b-6wnop820eb] {
        min-width: auto;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .header-content[b-6wnop820eb] {
        padding: 0 16px;
    }

    .main-content[b-6wnop820eb] {
        padding: 0 12px 120px 12px;
    }

    .empty-state[b-6wnop820eb] {
        padding: 60px 16px;
    }

    .empty-state-icon[b-6wnop820eb] {
        width: 100px;
        height: 100px;
    }

    .empty-state-icon svg[b-6wnop820eb] {
        width: 48px;
        height: 48px;
    }

    .empty-state h2[b-6wnop820eb] {
        font-size: 24px;
    }

    .empty-state p[b-6wnop820eb] {
        font-size: 16px;
    }
}