/* NOTES */
.note-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.note-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* key: allows shrinking */
    flex: 1 1 auto; /* take remaining space */
}

.note-date {
    white-space: nowrap;
}

.note-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto; /* never shrink */
    margin-left: auto;
}

    .note-menu .k-button {
        border: 1px solid var(--kendo-color-border, #ccc);
        border-radius: 6px;
        padding: 4px 6px;
    }

        .note-menu .k-button:hover {
            background: var(--kendo-color-base-subtle, rgba(0,0,0,.06));
        }

.note-content {
    overflow-wrap: anywhere;
    word-break: break-word;
}






/* ========================================================== */
/*                    DEBUG/OPERATIONS                        */
/* ========================================================== */
/* | - Debugging features, operations page, health widgets   |
   | - Connection status badge                               |
   | - Live log console                                      |
   | - Health monitoring widgets                             |
   | - System status indicators                              |
   =========================================================== */

/*================= Connection Status Badge ===================*/
   
#conn-badge {
    position: fixed;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    border-radius: .5rem;
    background: #222;
    color: #fff;
    font-size: .85rem;
    line-height: 1.1;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    z-index: 9999;
    transition: padding .15s ease, background .15s ease, box-shadow .15s ease;
}

    #conn-badge .dot {
        width: .6rem;
        height: .6rem;
        border-radius: 50%;
        background: #32cd32;
    }

    #conn-badge .label {
        display: inline;
    }

    /* Ready state - green dot only */
    #conn-badge.conn-ready {
        padding: 0;
        background: transparent;
        box-shadow: none;
        gap: 0;
    }

        #conn-badge.conn-ready .dot {
            background: #32cd32;
        }

        #conn-badge.conn-ready .label {
            display: none;
        }

        #conn-badge.conn-ready:hover {
            padding: .4rem .6rem;
            background: #222;
            box-shadow: 0 4px 16px rgba(0,0,0,.2);
            gap: .5rem;
        }

            #conn-badge.conn-ready:hover .label {
                display: inline;
            }

    /* Reconnecting state - yellow pill */
    #conn-badge.conn-reconnecting {
        padding: .4rem .6rem;
        background: #222;
        box-shadow: 0 4px 16px rgba(0,0,0,.2);
    }

        #conn-badge.conn-reconnecting .dot {
            background: #ffb000;
        }

    /* Down state - red pill with pulse */
    #conn-badge.conn-down {
        padding: .4rem .6rem;
        background: #3a2222;
    }

        #conn-badge.conn-down .dot {
            background: #ff3b30;
        }

@media (prefers-reduced-motion: no-preference) {
    #conn-badge.conn-down .dot {
        animation: conn-pulse 1.2s ease-in-out infinite;
    }

    @keyframes conn-pulse {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }

        50% {
            transform: scale(1.3);
            opacity: .8;
        }
    }
}


/*====================== Live Logs Console =======================*/

.log-console__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
}

    .log-console__header .spacer {
        flex: 1;
    }

.log-console__area {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: auto;
    resize: none;
    white-space: pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.3;
    color: #e6e6e6;
    background: #0b0b0b;
    border: 0;
    border-radius: .25rem;
    padding: .5rem;
}

.pane-logs-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
}

/* Override for pane header - prevent space stealing */
.pane-logs-header {
    flex: 0 0 auto !important;
}
/* ====================================================================================================== */
/* ========================================================== */
/*                    LOGIN PAGE LAYOUT                       */
/* ========================================================== */
/* | - Authentication page structure and styling             |
   | - Login container and centering                         |
   | - Form card/panel layout                                |
   | - Input field styling                                   |
   | - Button positioning                                    |
   | - Branding and logo placement                           |
   =========================================================== */

/*==================== Page Container & Background ====================*/
.login-bg {
    background: radial-gradient(circle at center, #7a7a7a 0%, /* darker gray center (was #999999) */
    #6b6b6b 10%, /* darker gray (was #8a8a8a) */
    #5a5a5a 50%, /* darker transition (was #6b6b6b) */
    #4a4a4a 80%, /* same very dark gray */
    #3a3a3a 100% /* same near black at edge */
    ) !important;
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.login-container {
    max-width: 800px;
    margin: 0 auto;
    background: transparent;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    text-align: center;
    font-size: small;
    text-align: center;
    font-size: small;
    padding: 0;
    min-height: 100vh;
}

.login-footer {
    text-align: center;
    padding: 1rem;
    color: #cbd5e0;
    font-size: 0.875rem;
}

/*========================= Branding & Logo ===========================*/

.login-logo {
    display: block;
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
    margin-bottom: 2rem;
    margin-top: 0rem;
}

/*======================= Warning Text =========================*/

.login-warning-text {
    background: linear-gradient(145deg, #ffffff 0%, /* Pure white corner */
    #f8f8f8 50%, /* Barely gray */
    #ffffff 100% /* White again */
    ) !important;
    margin-top: 0rem !important;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    border: 1px solid #ececec !important;
    border-radius: 12px !important;
    padding: 30px 40px !important;
    line-height: 1.85;
    font-size: 0.95rem;
    color: #1a1a1a;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.login-warning {
    margin-top: 0rem !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.warning-text {
    font-size: .8rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: #333;
}

    .warning-text:last-child {
        margin-bottom: 0;
    }

.terms-agreement {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .terms-agreement input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    .terms-agreement label {
        cursor: pointer;
        user-select: none;
    }

/*======================== Login Components ==============================*/

.login-block {
    margin-bottom: .5rem !important;
    padding: 0 2rem 1rem;
    background: #f8f8f8;
    border-radius: 8px;
}

.login-button {
    background-color: #007ACC !important;
    color: white !important;
    border: none;
    border-radius: 8px;
    width: 100%;
    height: 40px;
    font-weight: 600;
    font-size: 16px;
}

    .login-button:hover {
        background-color: #005A99 !important;
        color: #fff !important;
    }
/* ====================================================================================================== */
/* ========================================================== */
/*                    APPBAR/FOOTER STYLES                    */
/* ========================================================== */
/* | - Header/AppBar positioning and structure               |
   | - Classification banner                                 |
   | - AppBar buttons and navigation                         |
   | - Search bar                                            |
   | - Notifications popup                                   |
   | - Footer positioning                                    |
   =========================================================== */

/*=================== Classification Banner ====================*/

.classification-banner {
    position: relative;
    width: 100%;
    background: linear-gradient(to bottom, #1b7042 0%, #14522d 100%);
    clip-path: polygon(0% 0px, 0% 8px,39% 8px, 42% 35px, 58% 35px, 61% 8px, 100% 8px, 100% 0px);
    z-index: 1000 !important;
}

.classification-tab {
    font-size: clamp(12px, 1.5vw, 20px);
    font-weight: bold;
    text-align: center;
}

.demo-label {
    color: red !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    color: #444;
    margin-top: 0rem;
}

/*====================== HEADER STRUCTURE ======================*/

.header-container {
    flex: 0 0 auto;
    width: 100%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    position: static;
    top: 0;
}

.k-appbar.appbar-stack {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    background: linear-gradient(to bottom, #dddddd 0%, #aaaaaa 60%, #999999 75%,  #9b9b9b 90%, #888888 100%);
    margin-top: -50px !important;
    z-index: 999 !important;
    gap: 2px !important;
    overflow: visible !important;
    padding: 2rem .5rem .5rem .5rem !important;
}

/* ========================================================== */
/*                  APPBAR LEFT SECTION                       */
/* ========================================================== */
.k-appbar-section.appbar-left {
    flex: 1 1 22% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.appbar-logo {
    filter: brightness(.6) !important;
    height: 65px !important;
    width: auto !important;
    margin-left: -5px !important
}

/* ========================================================== */
/*                  APPBAR CENTER SECTION                     */
/* ========================================================== */
.k-appbar-section.appbar-center {
    flex: 1 1 56% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    align-self: stretch !important;
    margin-top: 1.5rem !important;
    gap: 8px !important;
}

/*============= Top Center Buttons (Info/FAQ/Files) =============*/
.top-appbar-button-group {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 2px !important;
    gap: 1.5rem !important;
}

.appbar-button {
    background: transparent !important;
    color: #252525 !important;
    font-weight: 600 !important;
    border: transparent !important;
    white-space: nowrap;
    font-size: 13px !important;
}

    .appbar-button:hover {
        background-color: #636363 !important;
        color: #f8f8f8 !important;
    }

.navbar-button-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
}

.navbar-button {
    flex: 1;
    font-weight: 600 !important;
    background: #f8f8f8 !important;
    color: #4a4a4a !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    padding: .5rem 1rem;
}

    .navbar-button:hover {
        background-color: #636363 !important;
        color: #f8f8f8 !important;
        border: none !important;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
    }

/* ========================================================== */
/*                  APPBAR RIGHT SECTION                      */
/* ========================================================== */
.k-appbar-section.appbar-right {
    flex: 1 1 22% !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    overflow: visible !important;
}

    .appbar-right-stack {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        height: 100% !important;
        justify-content: space-between !important;
    }

/*============== AppBar Buttons (Profile/FAQ/Etc ==============*/
.appbar-right-button-group {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: .65rem !important;
    margin-top: 2px !important;
}

.modern-dropdown-popup .k-menu-link {
    background: transparent !important;
    color: #252525 !important;
    font-weight: 600 !important;
    border: transparent !important;
    white-space: nowrap;
    font-size: 13px !important;
    padding: 8px 12px !important;
}

    .modern-dropdown-popup .k-menu-item:hover .k-menu-link,
    .modern-dropdown-popup .k-menu-link:hover {
        background-color: #636363 !important;
        color: #f8f8f8 !important;
    }

.popup-target {
    background: transparent !important;
    color: #535353 !important;
    border: transparent !important;
    padding: 8px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.my-profile-button {
    color: #535353 !important;
    background: transparent !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0rem !important;
}

    .my-profile-button svg {
        width: 54px !important;
        height: 54px !important;
        padding: 0 !important;
    }

    .my-profile-button:hover {
        background-color: #636363 !important;
        color: #f8f8f8 !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        outline: #dddddd !important;
        border: #dddddd !important;
    }

    .my-profile-button:focus,
    .my-profile-button:active,
    .my-profile-button.k-button-solid-base {
        border: none !important;
        transform: none !important;
    }

/*========================== Search Master ============================*/
.appbar-search {
    display: flex !important;
    justify-content: flex-end !important;
}

.search-master {
    position: relative;
    display: flex;
    gap: 3px;
    align-items: center;
}

.search-textbox {
    width: 210px !important;
    height: 29px !important;
    background: #f8f8f8 !important;
    color: #4a4a4a !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.search-dropdown {
    position: absolute;
    width: 250px;
    top: 100%;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 99999;
}

.search-dropdown-item {
    display: flex;
    flex-direction: column;
    padding: .5rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

    .search-dropdown-item:hover {
        background: #d8d8d8;
    }

.search-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.item-name {
    font-weight: 500;
    font-size: .8rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-domain {
    font-weight: 500;
    font-size: 0.6rem;
    text-transform: uppercase;
    background: #dbe9f9;
    padding: 2px 6px;
    border-radius: 3px;
    color: #444;
    flex-shrink: 0;
}

.search-item-bottom {
    margin-top: 0px;
    line-height: 1;
}

.item-secondary {
    font-size: 0.70rem;
    color: #888;
}

.search-dropdown-more {
    padding: 10px 12px;
    text-align: center;
    color: #0066cc;
    cursor: pointer;
    font-size: 0.9rem;
    background: #f8f9fa;
}

    .search-dropdown-more:hover {
        background: #e9ecef;
    }

.search-results-grid {
    height: 100%;
}

.search-button {
    background-color: #535353 !important;
    color: #e5e5e5 !important;
    border-radius: 4px !important;
    height: 29px;
    width: 60px;
    cursor: pointer !important;
}

    .search-button:hover {
        background-color: #636363 !important;
        color: white !important;
    }

/*======================== Notifications ===========================*/
.notifications-popup {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    border-radius: 8px !important;
    border: 1px solid #e5e5e5 !important;
}

.notifications-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .35rem .5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

    .notifications-header h4 {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: #343a40;
    }

.close-btn {
    color: #6c757d !important;
    padding: 2px !important;
}

    .close-btn:hover {
        color: #495057 !important;
        background-color: rgba(0, 0, 0, 0.05) !important;
    }

.notifications-list {
    max-height: 250px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 8px 10px;
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

    .notification-item:hover {
        background-color: #f8f9fa;
    }

    .notification-item:last-child {
        border-bottom: none;
    }

.notification-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    flex-shrink: 0;
}

    .notification-icon .k-svg-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .notification-icon.critical {
        background-color: rgba(220, 53, 69, 0.1);
        color: #dc3545;
    }

    .notification-icon.warning {
        background-color: rgba(255, 193, 7, 0.1);
        color: #ffc107;
    }

    .notification-icon.info {
        background-color: rgba(25, 135, 84, 0.1);
        color: #198754;
    }

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 500;
    font-size: 12px;
    color: #343a40;
    margin-bottom: 1px;
    line-height: 1.2;
}

.notification-subtitle {
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 2px;
    font-weight: 500;
}

.notification-time {
    font-size: 10px;
    color: #adb5bd;
}

#notifications-button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: .5rem !important;
}

    #notifications-button:hover,
    #notifications-button:focus,
    #notifications-button:active,
    #notifications-button.k-selected,
    #notifications-button.k-state-selected {
        background-color: #535353 !important;
        color: #f8f8f8 !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        outline: #dddddd !important;
        border: #dddddd !important;
    }

    #notifications-button .k-svg-icon {
        width: 28px !important;
        height: 28px !important;
    }

.notifications-footer {
    padding: 6px 10px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.view-all-btn {
    color: #6f6f6f !important;
    font-weight: 500 !important;
    font-size: 11px !important;
}

    .view-all-btn:hover {
        color: #5e5e5e !important;
        background-color: rgba(0, 0, 0, 0.05) !important;
    }

/* ====================================================================================================== */
/* ========================================================== */
/*                    MAINLAYOUT MEDIA QUERIES                */
/* ========================================================== */

/* ========================================================== */
/*                  FOOTER APPBAR SECTION                     */
/* ========================================================== */
.footer-appbar {
    display: flex;
    width: 100%;
    background: radial-gradient(ellipse at top left, #f0f0f0 0%, #e2e2e2 50%, transparent 70%), radial-gradient(ellipse at center, #dedede 0%, #d2d2d2 100%);
    border-top: 1px solid #cecece !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    color: #444444 !important;
    height: 36px;
}

.footer-left,
.footer-center,
.footer-right {
    display: flex;
    align-items: center;
}

.footer-left {
    flex: 0 0 auto;
    justify-content: flex-start;
    white-space: nowrap;
}

.footer-center {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
}

.footer-right {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-end;
    white-space: nowrap;
    margin-right: 10px;
    font-size: 13px;
}

.footer-appbar .role-badge {
    margin-left: 10px;
    border: none !important;
    font: 600 12px arial !important;
    pointer-events: none !important;
}

.footer-appbar .k-button.k-button-primary:hover {
    background-color: #E5554B !important;
    border-color: #E5554B !important;
}

.footer-appbar .k-button.k-button-primary:active {
    background-color: #CC4A40 !important;
    border-color: #CC4A40 !important;
}

.logout-button {
    padding: 2px 8px 4px 8px !important;
    margin-top: 1px !important;
}

.footer-policy-button {
    font-size: 13px !important;
    padding: 2px 0px !important;
}

    /* ====================================================================================================== */
    /* ========================================================== */
    /*                         DASHBOARD                          */
    /* ========================================================== */
    /* | - Dashboard page layout and widget styling              |
   | - Widget grid/container layout                          |
   | - Widget cards and panels                               |
   | - Dashboard card templates                              |
   | - Chart styling and tooltips                            |
   =========================================================== */

    /*====================== Dashboard Cards =======================*/
    .commercial-dashboard-card {
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
        background: linear-gradient(145deg, #ffffff 0%, #f8f8f8 50%, #ffffff 100%) !important;
        border: 1px solid #ececec !important;
        border-radius: 12px !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
        overflow: hidden;
    }

    .commercial-dashboard-card-header {
        color: #5e5e5e !important;
        font-size: 18px;
        font-weight: 600;
        background: linear-gradient(to bottom, #eeeeee 0%, #ebebeb 50%, #eeeeee 100%);
        text-align: center;
        padding: .15rem !important;
        flex-shrink: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 30px !important;
        max-height: 60px !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        cursor: move;
    }

        .commercial-dashboard-card-header span {
            font-size: clamp(12px, 2vw, 14px) !important;
            font-weight: 600;
            color: #5e5e5e !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            flex-shrink: 1 !important;
        }

        .commercial-dashboard-card-header .k-card-title {
            font-size: clamp(12px, 2vw, 14px) !important;
            font-weight: 600;
            color: #5e5e5e !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            flex-shrink: 1 !important;
            margin-left: 5px;
        }

    .commercial-dashboard-card-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    /*===================== Tile Layout ======================*/

    /* Main container background - dark modern like login */
    .k-tilelayout {
        /*background: linear-gradient(to bottom, #fcfcfc 0%, #f6f6f6 50%, #f0f0f0 100%) !important;*/
        background: #f5f5f5 !important;
    }

    /* Tile Container Style */
    .k-tilelayout-item {
        background: #ffffff !important;
        border: 1px solid #c3c3c3 !important;
        border-radius: 8px !important;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.08), 0 0 3px rgba(0, 0, 0, 0.06) !important;
        overflow: hidden !important;
    }

    /* Tile Header Style */
    .k-tilelayout-item-header {
        background: linear-gradient(to bottom, #d8d8d8 0%, #c0c0c0 100%);
        border: none !important;
        padding: .25rem .5rem !important;
    }

        .k-tilelayout-item-header .k-card-title {
            font-weight: 600 !important;
            font-size: 1rem !important;
            color: #3a3a3a !important;
            padding: .25rem !important;
        }

    /* Tile Body Style */
    .k-tilelayout-item-body {
        display: flex;
        align-items: center; /* vertical center */
        justify-content: center; /* horizontal center */
        border: none !important;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 0 !important;
    }

    /*===================== Dashboard Widgets ======================*/

    .admin-widget {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 1rem !important;
        gap: 10px;
    }

        .admin-widget img, .admin-widget svg {
            height: 125%;
            width: auto;
            object-fit: contain;
        }

        .admin-widget span {
            flex: 1;
            font-size: clamp(12px, 2.5vh, 18px);
            font-weight: 600;
            text-align: center;
        }

    /*======================= Chart Styling ========================*/

    .chart-container {
        width: 100%;
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .timeframe-button .k-button-text {
        font: 600 13px arial !important;
        padding: .15rem !important;
    }

    /* ====================================================================================================== */
    /* ========================================================== */
    /*                       BREADCRUMBS                          */
    /* ========================================================== */
    /* | - Breadcrumb navigation styling                         |
   | - Breadcrumb container and layout                       |
   | - Breadcrumb items and links                            |
   | - Separator styling                                     |
   | - Active/current page indicator                         |
   =========================================================== */

    .breadcrumb-wrapper {
        margin-left: 2px;
        margin-right: 0;
        padding: .25rem 0rem;
        background-color: transparent !important;
    }

    .k-breadcrumb {
        justify-content: flex-start !important;
        background-color: transparent !important;
    }

    .k-breadcrumb-item-text {
        color: #FF6358 !important;
        font-weight: 500;
        margin-left: 5px !important;
    }

    .k-breadcrumb-last-item .k-breadcrumb-item-text {
        font-weight: 400 !important;
    }

    .k-breadcrumb-link:hover {
        background-color: transparent !important;
        opacity: 1;
        color: #2c2c2c;
        text-decoration: underline;
    }

    .k-breadcrumb .k-breadcrumb-link.k-disabled {
        filter: none !important;
        opacity: 1 !important;
    }

    .k-breadcrumb-root-link:hover .k-breadcrumb-item-text {
        text-decoration: underline;
    }

    .k-breadcrumb-root-link:hover .k-icon {
        text-decoration: none;
    }

    .k-breadcrumb-root-link .k-icon {
        width: 18px !important;
        height: 18px !important;
        color: #ff6358 !important;
    }

    .k-breadcrumb-root-link, .k-breadcrumb-icontext-link {
        padding: .25rem 0rem !important;
    }

    /* ====================================================================================================== */
    /* ========================================================== */
    /*                       ADMIN PAGES                          */
    /* ========================================================== */
    /* | - Administrative interface styling                      |
   | - Admin portal layout and containers                    |
   | - FAQ page                                              |
   | - Info page                                             |
   | - Files page with FileManager                           |
   =========================================================== */

    /*========================== FAQ Page ==========================*/

    .faq-container {
        width: 80%;
        margin: 2rem auto;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background-color: white;
    }

    main.content > .faq-container:first-child {
        margin-top: 1.5rem !important;
    }

    .faq-title {
        text-align: center;
        margin-bottom: 20px;
        font-size: 30px;
        font-weight: 600 !important;
        color: #5e5e5e !important;
    }

    /*========================= Info Page ==========================*/

    .infopage-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    .infopage-row {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }

        .infopage-row:last-child {
            margin-bottom: 0;
        }

    .infopage-section {
        flex: 1;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
        background-color: white;
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .infopage-section:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
        }

        .infopage-section h3 {
            margin: 0;
            padding: 15px 20px;
            color: #5a5a5a;
            font-size: 22px;
            font-weight: 600;
            background: linear-gradient(to bottom, #e7e7e7 0%, #dcdcdc 60%, #d2d2d2 100%);
            border-bottom: 1px solid #ddd;
            position: relative;
        }

        .infopage-section div {
            padding-top: 20px;
            padding-left: 30px;
            padding-right: 30px;
            padding-bottom: 20px;
            line-height: 1.6;
            color: #444;
            font-size: 1em;
        }

    @media (max-width: 768px) {
        .infopage-row {
            flex-direction: column;
        }

        .infopage-section h3 {
            padding: 15px 20px;
            font-size: 1.2em;
        }

        .infopage-section div {
            padding: 20px;
        }
    }

    /*========================= Files Page =========================*/

    main.content > .adminfiles-container:first-child {
        margin-top: 1.5rem !important;
    }

    .adminfiles-container {
        width: 90%;
        margin: 20px auto;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background: transparent;
    }

    .adminfiles-title {
        text-align: center;
        color: #5a5a5a;
        font-size: 28px;
        font-weight: 600;
        background: linear-gradient(to bottom, #eeeeee 0%, #ebebeb 50%, #eeeeee 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px !important;
        margin-bottom: 0 !important;
    }

    .adminfiles-filemanager .k-filemanager {
        height: 800px !important;
    }

    .adminfiles-filemanager {
        margin: 0 auto;
    }

    .k-filemanager-listview .k-file-name,
    .k-filemanager-listview .k-listview-item {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .adminfiles-container .k-filemanager .k-breadcrumb-root-link.k-breadcrumb-icon-link {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }

    /*========================= Files Page =========================*/
    .template-grid {
        font-size: 13px !important;
    }

    .template-preview-btn {
        font-size: 12px !important;
        margin: .5rem !important;
    }

    /* ====================================================================================================== */
    /* ========================================================== */
    /*                       SIDE NAVBARS                         */
    /* ========================================================== */
    /* | - Sidebar navigation styling and behavior               |
   | - Sidebar container and positioning                     |
   | - Navigation menu items                                 |
   | - Active/selected state styling                         |
   | - Hover and focus states                                |
   | - Icons and labels                                      |
   =========================================================== */

    .page-frame-row-layout .k-drawer-expanded .k-drawer.k-drawer-start {
        border-inline-end-width: 0px !important;
    }

    .drawer-container,
    .k-drawer-container {
        height: 100%;
    }

    .k-drawer-wrapper {
        border-right: var(--pageframe-border) !important;
        height: 100%;
        background-color: #f6f7f9 !important;
    }

    .k-drawer-item {
        color: #444 !important;
        font-weight: 400 !important;
        padding: .5rem !important;
        border: none !important;
        line-height: 1 !important;
        background-color: #f6f7f9 !important;
    }

        .k-drawer-item.k-level-0 {
            font-size: 0.9rem;
        }

        .k-drawer-item.k-level-1 {
            font-size: 0.8rem;
            font-weight: 600 !important;
        }

        .k-drawer-item.k-selected {
            background-color: #e7f1ff !important;
            color: #2563eb !important;
            border-left: 4px solid #2563eb;
            font-weight: 600 !important;
        }

        .k-drawer-item:hover {
            background-color: #f1f5ff !important;
            color: #2563eb !important;
            border-left: 4px solid #d0e4ff !important;
            font-weight: 600 !important;
            opacity: .85;
        }

    /*=================== Facility Drawer Only ===================*/
    .facility-drawer {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

        .facility-drawer .k-drawer-container {
            height: 100%;
            flex: 1 1 auto;
        }

        .facility-drawer .k-drawer {
            height: 100%;
        }

        .facility-drawer .k-drawer-wrapper {
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .facility-drawer .k-drawer-item {
            flex: 1 1 auto;
            min-height: 0;
            max-height: 40px;
            display: flex;
            align-items: center;
            overflow: hidden;
            padding: .25rem .5rem !important;
        }

            .facility-drawer .k-drawer-item.k-level-1.drawer-item-main {
                padding-left: 2rem !important;
            }

            .facility-drawer .k-drawer-item.k-expanded {
                font-weight: 600 !important;
                background-color: #e6eaee !important;
            }

        .facility-drawer .k-card-header.drawer-header-title-facility {
            flex-shrink: 0;
        }

    /*=================== Drawer Header & Labels ===================*/

    .k-drawer .k-card-header.drawer-header-title-facility h4.facname-font-large {
        font-size: 22px !important;
    }

    .k-drawer .k-card-header.drawer-header-title-facility h4.facname-font-medium {
        font-size: 20px !important;
    }

    .k-drawer .k-card-header.drawer-header-title-facility h4.facname-font-small {
        font-size: 16px !important;
    }

    .k-drawer .k-card-header.drawer-header-title-facility {
        background: linear-gradient(to bottom, #d8d8d8 0%, #d0d0d0 30%, #c4c4c4 60%, #b8b8b8 100%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px !important;
        padding: 0 0 0 .25rem !important;
    }

    .drawer-header-title-facility h4 {
        font-weight: 600 !important;
        color: #4e4e4e !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
    }

    .isactive-status-icon {
        vertical-align: middle;
        width: 34px !important;
        height: 34px !important;
        margin-top: 1px;
    }

        .isactive-status-icon.status-gray {
            color: #9e9e9e;
        }

        .isactive-status-icon.status-green {
            color: #4caf50;
        }

        .isactive-status-icon.status-red {
            color: #f44336;
        }

    /* ====================================================================================================== */
    /* ========================================================== */
    /*                       PAGE LAYOUT                          */
    /* ========================================================== */
    /* | - Core layout classes for primary page components       |
   | - Page frame/container                                  |
   | - Main content areas                                    |
   | - Section wrappers                                      |
   | - Structural spacing and positioning                    |
   =========================================================== */

    .min-vh-100 {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    html, body {
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    body, layout-body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: white;
    }

    :root {
        --pageframe-border: 2px solid rgba(0, 0, 0, 0.25);
        --pageframe-border-soft: 1px solid rgba(0, 0, 0, 0.2);
        --pageframe-radius: 8px;
    }

    .page-frame-row-layout {
        display: flex;
        align-items: stretch;
        height: calc(100vh - 63px);
        width: 100%;
        margin: 0 auto;
        margin-bottom: .5rem;
        box-sizing: border-box;
        border: var(--pageframe-border-soft);
        border-radius: 8px !important;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.08), 0 0 3px rgba(0, 0, 0, 0.06) !important;
        overflow: hidden !important;
    }

        .page-frame-row-layout > .main-content {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            min-height: 0;
            min-width: 0;
            height: 100%;
            overflow-x: hidden;
            background-color: #f8f9fa !important;
        }

    .page-frame-container {
        gap: 1rem;
        padding: 0rem 1.5rem;
    }


    .commandbar-section {
        padding: 6px 8px;
        display: flex;
        gap: .5rem;
        align-items: center;
    }

    main.content {
        height: 100%;
        overscroll-behavior-y: contain;
        padding: .5rem 1rem;
        background-color: var(--main-bg);
        color: var(--main-text);
        z-index: 800;
        position: relative;
    }

        main.content > *:first-child {
            margin-top: 0 !important;
        }

    .files-page-nonsplit {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        padding: 1rem;
        border-radius: 8px;
        background-color: #f8f9fa !important;
        align-items: center;
        justify-content: center;
    }

    /* ====================================================================================================== */
    /* ========================================================== */
    /*                  Overview Card                             */
    /* ========================================================== */
    /* | - Fac/Site/Org/Pers DataPage                           |
   ========================================================== */

    .overview-page-container {
        padding: 2rem;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem;
        grid-auto-rows: auto;
        align-content: start;
    }

    @media (max-width: 769px) {
        .overview-page-container {
            grid-template-columns: 1fr !important;
        }
    }

    .overview-card-wrapper {
        min-width: 0;
    }

    .overview-card {
        border-radius: 8px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
        border: 1px solid rgba(0,0,0,0.15) !important;
        overflow: hidden !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
        padding: 0 !important;
        height: 100% !important;
    }

        .overview-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .overview-card .k-form-legend {
            display: none !important;
        }

.overview-card-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    padding: .5rem 1rem !important;
    background: linear-gradient(to bottom, #e8eaed 0%, #d4d8de 100%);
    color: #333;
    border-bottom: 1px solid #eee;
    border-radius: 8px 8px 0px 0px !important;
}

    .overview-card-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 1rem !important;
    }

        .overview-card-body .k-form,
        .overview-card-body > .k-form > .k-form-layout.k-grid-cols-1,
        .overview-card-body .k-form-fieldset {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
        }

            .overview-card-body .k-form-fieldset > .k-form-layout.k-grid-cols-6 {
                display: grid !important;
                flex: 1 !important;
                align-content: stretch;
            }

        .overview-card-body .k-form-layout.k-grid-cols-6 {
            row-gap: 1rem;
        }

        .overview-card-body .k-form-field {
            margin-top: 0 !important;
        }

            .overview-card-body .k-form-field.k-col-span-6:only-child {
                flex: 1;
                display: flex;
                flex-direction: column;
                margin: 0 !important;
            }

                .overview-card-body .k-form-field.k-col-span-6:only-child .form-row {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                }

                .overview-card-body .k-form-field.k-col-span-6:only-child .ro-input {
                    flex: 1;
                }

        .overview-card-body .k-form-buttons {
            display: none !important;
        }

 /* ============================================
   FILES PAGE SPLITTER - CUSTOM TAB STYLE
   ============================================ */

    .files-page-splitter {
        background-color: #f8f9fa;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border: none !important;
        position: relative !important;
    }

        .files-page-splitter .k-pane {
            overflow: auto !important;
            min-height: 0 !important;
        }

            .files-page-splitter .k-pane:first-child {
                display: flex !important;
                flex-direction: column !important;
            }

            .files-page-splitter .k-pane:last-child {
                flex: 1 1 auto !important;
            }

        /* ============================================
           DEFAULT STATE (BOTH PANES VISIBLE)
           ============================================ */

        /* Splitbar: zero height, transparent - only the tab shows */
        .files-page-splitter.k-splitter .k-splitbar-vertical {
            height: 0 !important;
            min-height: 0 !important;
            overflow: visible !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            position: relative;
            z-index: 5;
            margin-bottom: -.5px !important;
        }

            /* Tab background - centered pseudo-element */
            .files-page-splitter.k-splitter .k-splitbar-vertical::after {
                content: "";
                position: absolute;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 70px;
                height: 12px;
                border-radius: 6px 6px 0 0;
            }

        /* All three buttons - base styles */
        .files-page-splitter .k-collapse-prev,
        .files-page-splitter .k-resize-handle,
        .files-page-splitter .k-collapse-next {
            padding: 5px !important;
            margin: 0 !important;
            transform: translate(0, -50%) !important;
            z-index: 100000 !important;
            height: 12px !important;
            width: 36px !important;
            background: linear-gradient(to bottom, #d8d8d8 0%, #d0d0d0 30%, #c4c4c4 60%, #b8b8b8 100%);
        }

            .files-page-splitter .k-resize-handle::before {
                content: '' !important;
                position: absolute !important;
                top: 52% !important;
                left: 50% !important;
                transform: translate(-50%, -100%) !important;
                width: 16px !important;
                height: 2px !important;
                background: #3d3d3d !important;
                box-shadow: 0 3px 0 #3d3d3d !important;
            }

        .files-page-splitter .k-splitter .k-resize-handle {
            position: relative !important;
        }

        .files-page-splitter .k-splitbar .k-resize-handle {
            background-color: transparent !important;
        }

    /* Prev button (collapse TOP) - left rounded */
    .files-page-splitter .k-pane:not(.k-hidden) + .k-splitbar-vertical:not(:has(+ .k-pane.k-hidden)) .k-collapse-prev {
        border-radius: 4px 0 0 0 !important;
        z-index: 4 !important;
    }
    /* Next button (collapse BOTTOM) - right rounded */
    .files-page-splitter .k-pane:not(.k-hidden) + .k-splitbar-vertical:not(:has(+ .k-pane.k-hidden)) .k-collapse-next {
        border-radius: 0 4px 0 0 !important;
        z-index: 4 !important;
    }
    /* Icon positioning */
    .files-page-splitter .k-collapse-prev .k-svg-icon {
        transform: translate(55%, -90%) !important;
        color: #3d3d3d !important;
    }

    .files-page-splitter .k-collapse-next .k-svg-icon {
        transform: translate(55%, -85%) !important;
        color: #3d3d3d !important;
    }
    /* Hover - all buttons */
    .files-page-splitter .k-collapse-prev:hover,
    .files-page-splitter .k-collapse-next:hover,
    .files-page-splitter .k-resize-handle:hover {
        background: #ff6358 !important;
        color: white !important;
    }
    /* ============================================
        COLLAPSED STATE (EITHER PANE HIDDEN)
        ============================================ */
    /* Splitbar becomes full-width bar when collapsed */
    .files-page-splitter .k-pane.k-hidden + .k-splitbar-vertical,
    .files-page-splitter .k-splitbar-vertical:has(+ .k-pane.k-hidden) {
        height: 12px !important;
        min-height: 12px !important;
        background: #ff6358 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
        /* Hide resize handle when collapsed */
        .files-page-splitter .k-pane.k-hidden + .k-splitbar-vertical .k-resize-handle,
        .files-page-splitter .k-splitbar-vertical:has(+ .k-pane.k-hidden) .k-resize-handle {
            display: none !important;
        }
        /* ============================================
           TOP PANE COLLAPSED (show prev to expand)
           ============================================ */
        /* Hide next button - can't collapse bottom further */
        .files-page-splitter .k-pane.k-hidden + .k-splitbar-vertical .k-collapse-next {
            display: none !important;
        }
        /* When TOP pane is collapsed - prev button full width */
        .files-page-splitter .k-pane.k-hidden + .k-splitbar-vertical .k-collapse-prev {
            height: 18px !important;
            width: 100% !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            border-radius: 0 !important;
            transform: none !important;
            background-color: var(--kendo-color-primary, #e5574d) !important;
        }
            /* Style prev button - centered, both corners rounded */
            .files-page-splitter .k-pane.k-hidden + .k-splitbar-vertical .k-collapse-prev:hover {
                background-color: var(--kendo-color-primary-hover, #e5574d) !important;
            }

            .files-page-splitter .k-pane.k-hidden + .k-splitbar-vertical .k-collapse-prev .k-svg-icon {
                transform: translateY(2px) !important;
                color: #3d3d3d !important;
            }
        /* ============================================
           BOTTOM PANE COLLAPSED (show next to expand)
           ============================================ */
        /* Hide next button - can't collapse bottom further */
        .files-page-splitter .k-splitbar-vertical:has(+ .k-pane.k-hidden)::after,
        .files-page-splitter .k-splitbar-vertical:has(+ .k-pane.k-hidden) .k-collapse-prev {
            display: none !important;
        }
        /* When BOTTOM pane is collapsed - next button full width */
        .files-page-splitter .k-splitbar-vertical:has(+ .k-pane.k-hidden) .k-collapse-next {
            height: 18px !important;
            width: 100% !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            border-radius: 0 !important;
            transform: none !important;
            background-color: var(--kendo-color-primary, #e5574d) !important;
        }

            .files-page-splitter .k-splitbar-vertical:has(+ .k-pane.k-hidden) .k-collapse-next:hover {
                background-color: var(--kendo-color-primary-hover, #e5574d) !important;
            }

            .files-page-splitter .k-splitbar-vertical:has(+ .k-pane.k-hidden) .k-collapse-next .k-svg-icon {
                transform: translateY(-2px) !important;
                color: #3d3d3d !important;
            }
    /* ============================================
   BOTTOM PANE
   ============================================ */
    .files-page-splitter-top {
    }
    /* ============================================
   BOTTOM PANE
   ============================================ */
    .files-page-splitter-bottom {
    }

/* ====================================================================================================== */
/* ========================================================== */
/*                  ACCREDITATION SPLIT                       */
/* ========================================================== */
/* | - FacilityFilesPage Top Split                           |
| - Accreditation content                                 |
=========================================================== */
    /* Layout */
.accreditation-layout {
    display: grid;
    grid-template-columns: 2fr 1.75fr 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1rem;
    background: transparent !important;
    overflow: visible;
}

    @media (max-width: 900px) {
        .accreditation-layout {
            display: flex;
            flex-direction: column;
            padding: .25rem .5rem;
            gap: 1rem;
            height: auto;
            min-height: 100%;
        }

        .accreditation-card {
            order: 1;
        }

        .accreditation-widget-primary {
            order: 2;
        }

        .accreditation-widget-secondary {
            order: 3;
        }

        .accreditation-widgets-right {
            order: 4;
            flex-direction: row;
        }

        .accreditation-widget-status-card {
            min-height: 80px;
        }
    }
    /* Column 1: Accreditation Card */
    .accreditation-card {
        grid-column: 1;
        grid-row: 1 / 3;
        background: white;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.15);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

        .accreditation-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-radius: 8px;
        }

    .accreditation-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        font-weight: 600;
        font-size: 14px;
        background: linear-gradient(to bottom, #eaeae8 0%, #d8d8d6 100%);
        color: #333;
    }

    .accreditation-body {
        padding: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: .25rem;
    }

    .accreditation-info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 .75rem;
        border-bottom: 1px solid #ddd;
        flex: 1;
    }

        .accreditation-info-row:last-child {
            border-bottom: none;
        }

    .accreditation-info-label {
        color: #374151;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1px;
    }

    .accreditation-info-value {
        font-weight: 400;
        font-size: 14px;
        color: #111827;
        text-align: right;
        letter-spacing: 0.1px;
    }

        .accreditation-info-value.empty {
            color: #999;
            font-weight: 400;
        }
    /* Column 2: Primary & Secondary Widgets */
    .accreditation-widget-primary,
    .accreditation-widget-secondary {
        background: white;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.15);
        overflow: hidden;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

        .accreditation-widget-primary:hover,
        .accreditation-widget-secondary:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

    .accreditation-widget-primary {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .accreditation-widget-secondary {
        grid-column: 2;
        grid-row: 2;
    }

    .accreditation-widget-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        font-weight: 600;
        font-size: 14px;
        background: linear-gradient(to bottom, #eaeae8 0%, #d8d8d6 100%);
        color: #333;
    }
    /* Primary Widget: Progress */
    .accreditation-progress-widget {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        align-items: center; /* center horizontally */
        justify-content: center;
        padding: .5rem 1rem;
        gap: 0px;
        width: 100%;
        overflow: hidden;
    }

    .accreditation-progress-stat {
        display: flex;
        flex-direction: column; /* number above, label below */
        align-items: center; /* horizontal centering */
        justify-content: center;
        text-align: center;
        gap: 4px; /* spacing between number and label */
        margin-bottom: -12px; /* pulls it down toward the bar */
    }

    .accreditation-progress-stat-value {
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
    }

    .accreditation-progress-stat-label {
        color: #444;
        font-size: 14px;
        font-weight: 600;
    }

    .accreditation-progress-track-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px; /* distance between dates and bar */
        margin: 0;
        padding: 0;
    }

    .accreditation-progress-dates {
        width: 100%;
        font-size: 12px;
        font-weight: 600;
        color: #444;
        display: flex;
        justify-content: space-between; /* keep ends aligned */
        margin: 0;
    }

    .accreditation-progress-track {
        height: 20px;
        background: #e0e0e0;
        border-radius: 4px;
        overflow: hidden;
    }

    .accreditation-progress-track-fill {
        height: 100%;
        border-radius: 4px;
    }

    .accreditation-popover {
        font-weight: 600 !important;
    }

        .accreditation-popover .k-popover-body {
            padding: .5rem !important;
        }

    .accreditation-popover-warning {
        background-color: #fff3cd !important;
        border: 1px solid #b8860b !important;
        color: #856404 !important;
    }

        .accreditation-popover-warning .k-popover-callout.k-callout {
            border-color: #b8860b !important;
        }

    .accreditation-popover-urgent {
        background-color: #ffe0b2 !important;
        border: 1px solid #e65100 !important; /* deep orange border */
        color: #e65100 !important; /* deep orange text */
    }

        .accreditation-popover-urgent .k-popover-callout.k-callout {
            border-color: #e65100 !important; /* deep orange border */
        }

    .accreditation-popover-critical {
        background-color: #f8d7da !important;
        border: 1px solid #a91b30 !important;
        color: #a91b30 !important;
    }

        .accreditation-popover-critical .k-popover-callout {
            border-color: #a91b30 !important;
        }
    /* Secondary Widget: Inspection */
    .accreditation-inspection-widget {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
    }

    .inspection-date {
        font-size: 24px;
        font-weight: 700;
        color: #666;
    }

    .inspection-label {
        font-size: 11px;
        color: #888;
    }
    /* Column 3: Status Cards */
    .accreditation-widgets-right {
        grid-column: 3;
        grid-row: 1 / 3;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .accreditation-widget-status-card {
        flex: 1;
        border-radius: 8px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: white;
        text-align: center;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    }

        .accreditation-widget-status-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .accreditation-widget-status-card span {
            font-size: 9px;
            font-weight: 600;
            text-transform: uppercase;
        }
    /* No Data Placeholder */
    .no-accreditation-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 50%;
        width: 50%;
        min-height: 100px;
        gap: 12px;
        transform: translate(50%, 50%);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

        .no-accreditation-placeholder svg {
            opacity: 1;
        }

        .no-accreditation-placeholder span {
            font-size: 14px;
            font-weight: 500;
        }
    /* Override the TemplateField styles inside the card */
    .accreditation-card .form-row {
        margin: 0 !important;
    }

    .accreditation-card .k-label {
        font-size: 10px !important;
        color: #888 !important;
        text-transform: uppercase !important;
        margin-bottom: 2px !important;
    }

    .accreditation-card .ro-input {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    .accreditation-card .ro-text {
        font-size: 13px !important;
        color: #333 !important;
    }

    .accreditation-card .ro-placeholder {
        font-size: 13px !important;
        color: #bbb !important;
    }
    /* ====================================================================================================== */
    /* ========================================================== */
    /*                  APPOINTMENT SPLIT                         */
    /* ========================================================== */
    /* | - FacilityFilesPage Top Split                           |
   =========================================================== */
    /* Appointments Layout */
    .appointments-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        background: transparent;
        overflow: visible;
        padding: 1rem 2rem;
    }

    @media (max-width: 900px) {
        .appointments-layout {
            display: flex;
            flex-direction: column;
            padding: .25rem .5rem;
            gap: 1rem;
            height: auto;
            min-height: 100%;
        }

        .coverage-content {
            flex-direction: column;
            gap: 0.75rem;
        }

        .coverage-chart-section {
            flex: none;
            width: 100%;
            aspect-ratio: 1.2 / 1;
            max-height: 200px;
        }

        .coverage-vacant-section {
            flex: none;
            width: 100%;
        }

        .coverage-card {
            height: auto;
        }
    }
    /* Left Card - Active Appointments */
    .appointments-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.15);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

        .appointments-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

    .appointments-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        font-weight: 600;
        font-size: 14px;
        background: linear-gradient(to bottom, #eaeae8 0%, #d8d8d6 100%);
        color: #333;
    }

    .appointments-body {
        padding: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .appointments-table {
        width: 100%;
        border-collapse: collapse;
        height: 100%;
    }

        .appointments-table thead {
            background: #f8f9fa;
        }

        .appointments-table th {
            padding: 8px 14px;
            text-align: left;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #64748b;
            border-bottom: 1px solid #e2e8f0;
        }

        .appointments-table td {
            padding: 0 14px;
            border-bottom: 1px solid #eee;
            vertical-align: middle;
        }

        .appointments-table tbody tr:last-child td {
            border-bottom: none;
        }

        .appointments-table tbody tr:hover {
            background: #f8fafc;
        }

    .role-name {
        font-weight: 600;
        font-size: 14px;
        color: #1e293b;
    }

    .status-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 9999px;
        font-size: 10px;
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    .status-badge-filled {
        background: linear-gradient(to bottom, #1e7a47 0%, #1a5c3a 100%);
    }

    .status-badge-vacant {
        background: linear-gradient(to bottom, #c41e3a 0%, #a91b30 100%);
    }

    .days-badge-unknown {
        background: linear-gradient(to bottom, #6c757d 0%, #5a6268 100%);
    }

    .days-badge-warning {
        background: linear-gradient(to bottom, #d4a106 0%, #b8860b 100%);
    }

    .days-badge-urgent {
        background: linear-gradient(to bottom, #f57c00 0%, #e65100 100%);
    }

    .days-badge-critical {
        background: linear-gradient(to bottom, #c41e3a 0%, #a91b30 100%);
    }

    .assigned-names {
        color: #475569;
        font-size: 14px;
    }
    /* Right Card - Coverage Gaps */
    .coverage-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.15);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

        .coverage-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

.coverage-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 14px;
    background: linear-gradient(to bottom, #eaeae8 0%, #d8d8d6 100%);
    color: #333;
}

    .coverage-body {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        flex: 1;
        min-height: 0;
    }

    .coverage-content {
        display: flex;
        gap: 1rem;
        flex: 1;
        min-height: 0;
    }

    .coverage-chart-section {
        flex: 2;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
    }

    .appointments-coverage {
    }

    .coverage-percent-overlay {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .coverage-percent-value {
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
        line-height: 1;
    }

    .coverage-percent-label {
        font-size: 10px;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
    }

    .coverage-vacant-section {
        flex: 2;
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
    }

    .vacant-roles-header {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        margin-bottom: 0.5rem;
        flex-shrink: 0;
    }

    .vacant-roles-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        overflow-y: auto;
    }

    .vacant-role-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 8px;
        background: #f8f9fa;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .vacant-role-name {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
    }

    .days-vacant-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        color: #fff;
        min-width: 36px;
        text-align: center;
    }

    .coverage-summary {
        text-align: center;
        padding-top: 0.5rem;
        border-top: 1px solid #eee;
        flex-shrink: 0;
    }

    .coverage-summary-text {
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
    }
    /* All Filled Message */
    .all-filled-message {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: #1a5c3a;
        flex: 1;
    }

        .all-filled-message span {
            font-weight: 600;
            font-size: 13px;
        }
    /* ====================================================================================================== */
    /* ========================================================== */
    /*                  APPROVAL SPLIT                            */
    /* ========================================================== */
    /* | - FacilityFilesPage Top Split                           |
   =========================================================== */
    .equipment-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1rem;
        padding: 1rem;
    }

    .equipment-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.15);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

        .equipment-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

    .equipment-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        font-weight: 600;
        font-size: 14px;
        color: white;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

        .equipment-card-header.has-items {
            background: linear-gradient(to bottom, #1e7a47 0%, #1a5c3a 100%);
        }

        .equipment-card-header.no-items {
            background: linear-gradient(to bottom, #c41e3a 0%, #a91b30 100%);
        }

    .equipment-card-body {
        padding: .5rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .equipment-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

        .equipment-list li {
            display: flex;
            flex-direction: column;
            padding: .5rem .75rem;
            border-bottom: 1px solid #ddd;
        }

            .equipment-list li:last-child {
                border-bottom: none;
            }

    .equipment-nickname {
        font-weight: 500;
        font-size: 14px;
        color: #111827;
    }

    .equipment-details {
        font-size: 12px;
        color: #6b7280;
    }

    .no-equipment {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        gap: 8px;
        padding: 1rem;
        color: #dc3545;
    }

    .no-equipment-icon {
        opacity: 0.4;
    }

    .no-equipment-text {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    @media (max-width: 1200px) {
        .equipment-grid {
            grid-template-columns: repeat(3, 1fr);
            height: auto;
            overflow: visible;
        }

        .equipment-card {
            height: auto;
            min-height: 0;
        }

        .equipment-card-body {
            flex: none;
        }
    }

    @media (max-width: 900px) {
        .equipment-grid {
            grid-template-columns: repeat(2, 1fr);
            height: auto;
            overflow: visible;
        }

        .equipment-card {
            height: auto;
            min-height: 0;
        }

        .equipment-card-body {
            overflow: visible;
            flex: none;
        }
    }

    @media (max-width: 700px) {
        .equipment-grid {
            grid-template-columns: 1fr;
            height: auto;
            overflow: visible;
        }

        .equipment-card {
            height: auto;
            min-height: 0;
        }

        .equipment-card-body {
            overflow: visible;
            flex: none;
        }
    }
    /* ========================================================== */
    /*                  COMSEC GRID                               */
    /* ========================================================== */
    .comsec-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        padding: 1rem;
    }

    .comsec-empty {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 3rem;
        color: #6c757d;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .comsec-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.15);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

        .comsec-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

    .comsec-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        font-weight: 600;
        font-size: 14px;
        color: white;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

        .comsec-card-header.status-active {
            background: linear-gradient(to bottom, #1e7a47 0%, #1a5c3a 100%);
        }

        .comsec-card-header.status-warning {
            background: linear-gradient(to bottom, #d4a106 0%, #b8860b 100%);
        }

        .comsec-card-header.status-urgent {
            background: linear-gradient(to bottom, #f57c00 0%, #e65100 100%);
        }

        .comsec-card-header.status-expired {
            background: linear-gradient(to bottom, #e04555 0%, #dc3545 100%);
        }

        .comsec-card-header.status-unknown {
            background: linear-gradient(to bottom, #6c757d 0%, #5a6268 100%);
        }

    .comsec-card-body {
        padding: .75rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .comsec-details {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .comsec-detail {
        font-size: 12px;
        color: #6b7280;
    }

        .comsec-detail strong {
            color: #374151;
        }

    .comsec-tracker-section {
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        gap: 4px;
        padding: .5rem 0;
        border-top: 1px solid #e5e7eb;
    }

        .comsec-tracker-section:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

    .comsec-tracker-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .comsec-tracker-label {
        font-size: 12px;
        font-weight: 600;
        color: #374151;
    }

    .comsec-tracker-value {
        font-size: 12px;
        font-weight: 600;
    }

    .comsec-tracker-days {
        font-weight: 700;
    }

    .comsec-progress-track {
        height: 14px;
        background: #e0e0e0;
        border-radius: 4px;
        overflow: hidden;
    }

    .comsec-progress-track-fill {
        height: 100%;
        border-radius: 4px;
    }

    @media (max-width: 600px) {
        .comsec-grid {
            grid-template-columns: 1fr;
        }
    }
    /* ====================================================================================================== */
    /* ========================================================== */
    /*                      DD-254 SPLIT                          */
    /* ========================================================== */

    .dd254-layout {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
        padding: 1rem;
        background: transparent !important;
        overflow: auto;
    }

    .dd254-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.15);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

        .dd254-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

    .dd254-card-info {
        grid-column: 1;
        grid-row: 1;
    }

    .dd254-column-middle {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .dd254-card-tracker {
        flex: 0 0 auto;
    }

    .dd254-card-checklist {
        flex: 1;
    }

    .dd254-card-performance {
        grid-column: 3;
        grid-row: 1;
    }

    .dd254-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        font-weight: 600;
        font-size: 14px;
        background: linear-gradient(to bottom, #eaeae8 0%, #d8d8d6 100%);
        color: #333;
    }

    .dd254-body {
        padding: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: .25rem;
    }

    .dd254-info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 .75rem;
        border-bottom: 1px solid #ddd;
        flex: 1;
    }

        .dd254-info-row:last-child {
            border-bottom: none;
        }

    .dd254-info-label {
        color: #374151;
        font-size: 14px;
        font-weight: 500;
    }

    .dd254-info-value {
        font-weight: 400;
        font-size: 14px;
        color: #111827;
        text-align: right;
    }
    /* Progress Tracker */
    .dd254-progress-widget {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: .5rem 1rem;
        gap: 0;
    }

    .dd254-progress-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
        margin-bottom: -12px;
    }

    .dd254-progress-stat-value {
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
    }

    .dd254-progress-stat-label {
        color: #444;
        font-size: 14px;
        font-weight: 600;
    }

    .dd254-progress-track-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .dd254-progress-dates {
        width: 100%;
        font-size: 12px;
        font-weight: 600;
        color: #444;
        display: flex;
        justify-content: space-between;
    }

    .dd254-progress-track {
        height: 20px;
        background: #e0e0e0;
        border-radius: 4px;
        overflow: hidden;
    }

    .dd254-progress-track-fill {
        height: 100%;
        border-radius: 4px;
    }

    .dd254-checklist-access {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-auto-flow: row;
        gap: 0;
        flex: 1;
        padding: .25rem;
    }

    .dd254-checklist-performance {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: row;
        gap: 0;
        flex: 1;
        padding: .25rem;
    }

    .dd254-check-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .25rem .5rem;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
    }

    .dd254-check-label {
        color: #374151;
        font-size: 12px;
        font-weight: 500;
    }

    .dd254-check-value {
        font-weight: 600;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 3px;
        text-transform: uppercase;
    }

        .dd254-check-value.yes {
            background: #d4edda;
            color: #155724;
        }

        .dd254-check-value.no {
            background: #f8d7da;
            color: #721c24;
        }

    @media (max-width: 900px) {
        .dd254-layout {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .dd254-column-middle {
            order: 2;
        }

        .dd254-card-performance {
            order: 3;
        }
    }

/* ========================================================== */
/*                  GOVERNMENT INSPECTION                     */
/* ========================================================== */
.inspection-dashboard {
    padding: 1rem;
}

.inspection-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

.inspection-left {
    display: flex;
    flex-direction: column;
}

.inspection-card {
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
}

    .inspection-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

.inspection-widgets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    height: 100%;
}

.inspection-rating-card {
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: linear-gradient(to bottom, #3a3a4a 0%, #2a2a3a 100%);
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .inspection-rating-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

.rating-value {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.rating-category {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.inspection-metrics-row {
    display: flex;
    border-top: 1px solid #ddd;
    margin-top: auto;
    padding: .5rem;
}

    .inspection-metrics-row .dd254-check-item {
        flex: 1;
        border-bottom: none;
    }

    /* ====================================================================================================== */
    /* ========================================================== */
    /*                  INCIDENT SPLIT                            */
    /* ========================================================== */
    /* | - FacilityFilesPage Top Split                           |
   =========================================================== */
    /* Incident Dashboard Layout */
    .incident-dashboard {
        display: grid;
        grid-template-columns: 2fr 4fr 2fr;
        gap: 1rem;
        padding: 1rem;
        min-height: 0;
        height: 280px;
    }

    @media (max-width: 900px) {
        .incident-dashboard {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            height: auto;
            padding: 0rem;
            min-height: 100%;
            overflow: auto;
        }

        .incident-stats-stack {
            display: flex !important;
            flex-direction: row !important;
            gap: .5rem;
        }

        .incident-stat-card {
            flex: 1;
        }

        .incident-cards-row {
            display: flex;
            flex-direction: row;
            gap: 1rem;
        }

        .incident-card {
            flex: 1;
        }
    }

    @media (max-width: 600px) {
        .incident-stats-stack {
            flex-direction: column;
        }

        .incident-cards-row {
            flex-direction: column;
        }

        .incident-card {
            min-height: 280px;
        }
    }
    /* Incident Cards */
    .incident-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.15);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        min-height: 0;
    }

        .incident-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

    .incident-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        font-weight: 600;
        font-size: 14px;
        background: linear-gradient(to bottom, #eaeae8 0%, #d8d8d6 100%);
        color: #333;
    }

    .incident-card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: white;
        min-height: 0;
    }

        .incident-card-body .k-chart {
            flex: 1;
            min-height: 0;
        }
    /* Incident Stats Stack (Left Column) */
    .incident-stats-stack {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .incident-stat-card {
        flex: 1;
        border-radius: 8px;
        padding: 1rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        color: white;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

        .incident-stat-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

    .incident-stat-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
    }

    .incident-stat-value {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
    }

    .incident-stat-label {
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.9;
    }
    /* No Data States */
    .no-data {
        color: #999;
        font-size: 12px;
        font-style: italic;
    }

    .no-chart-data {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #999;
        padding: 2rem;
    }

        .no-chart-data span {
            font-size: 12px;
        }

/* ====================================================================================================== */
/* ========================================================== */
/*                  INVENTORY SPLIT                           */
/* ========================================================== */
.inventory-dashboard {
    padding: 1rem;
}

.inventory-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

.inventory-widgets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    height: 100%;
}

.inventory-card {
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
}

    .inventory-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

.inventory-widget-card {
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3rem;
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.widget-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.inventory-widget-count {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.inventory-widget-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
    /* ====================================================================================================== */
    /* ========================================================== */
    /*                  SOP/OPSEC SPLIT                           */
    /* ========================================================== */
    /* | - FacilityFilesPage Top Split                           |
   =========================================================== */
    .sop-dashboard {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        padding: 1rem;
    }

    .sop-card {
        border-radius: 8px;
        overflow: hidden;
        background: white;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.15);
        display: flex;
        flex-direction: column;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

        .sop-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

    .sop-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        color: white;
        font-weight: 600;
        font-size: 14px;
    }

        .sop-card-header.active {
            background: linear-gradient(to bottom, #1e7a47 0%, #1a5c3a 100%);
        }

        .sop-card-header.inactive {
            background: linear-gradient(to bottom, #c41e3a 0%, #a91b30 100%);
        }

    .sop-card-body {
        padding: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .sop-download {
        padding: .75rem;
        border-top: 1px solid #ddd;
    }

        .sop-download .k-button {
            width: 100%;
        }

    .sop-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .5rem .75rem;
        border-bottom: 1px solid #ddd;
        min-height: 36px;
    }

        .sop-detail:last-child {
            border-bottom: none;
        }

    .sop-detail-label {
        color: #374151;
        font-size: 14px;
        font-weight: 500;
    }

.sop-detail-value {
    font-weight: 400;
    font-size: 14px;
    color: #111827;
    text-align: right;
    word-break: break-word;
    white-space: pre-line;
    flex-grow: 1;
}

    .sop-gaps {
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 4px;
        padding: 0.5rem 0.75rem;
        margin: 0.5rem 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .sop-gaps-label {
        color: #dc2626;
        font-weight: 600;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .sop-gap-item {
        color: #991b1b;
        font-size: 12px;
        padding-left: 20px;
    }

    .sop-gap-more {
        color: #6b7280;
        font-size: 11px;
        font-style: italic;
        padding-left: 20px;
    }

    .no-sop {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        color: #999;
        padding: 2rem 1rem;
        flex: 1;
    }

        .no-sop span {
            font-size: 13px;
            font-weight: 500;
        }

    @media (max-width: 900px) {
        .sop-dashboard {
            grid-template-columns: 1fr;
        }
    }
    /* ====================================================================================================== */
    /* ========================================================== */
    /*                  FACILITY LOGS                             */
    /* ========================================================== */

    .logs-dashboard {
        display: grid;
        gap: 1.5rem;
        padding: 1em;
        align-items: start;
    }

    .logs-card {
        border-radius: 8px;
        overflow: hidden;
        background: white;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.15);
        display: flex;
        flex-direction: column;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        min-width: 200px;
    }

        .logs-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

    .logs-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        color: white;
        font-weight: 600;
        font-size: 14px;
    }

    .logs-card-body {
        padding: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .logs-download {
        padding: .75rem;
        border-top: 1px solid #ddd;
        margin-top: auto;
    }

        .logs-download .k-button {
            width: 100%;
        }

    .logs-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .5rem .75rem;
        border-bottom: 1px solid #ddd;
        min-height: 36px;
    }

        .logs-detail:last-child {
            border-bottom: none;
        }

    .logs-detail-label {
        color: #374151;
        font-size: 14px;
        font-weight: 500;
    }

    .logs-detail-value {
        font-weight: 400;
        font-size: 14px;
        color: #111827;
        text-align: right;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .logs-gaps {
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 4px;
        padding: 0.5rem 0.75rem;
        margin: 0.5rem 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .logs-gaps-label {
        color: #dc2626;
        font-weight: 600;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .logs-gap-item {
        color: #991b1b;
        font-size: 12px;
        padding-left: 20px;
    }

    .logs-gap-more {
        color: #6b7280;
        font-size: 11px;
        font-style: italic;
        padding-left: 20px;
    }

    @media (max-width: 900px) {
        .logs-dashboard {
            grid-template-columns: 1fr !important;
        }
    }

    .logs-popover-critical {
        background: #f8d7da !important;
        color: #a91b30 !important;
        border: 1px solid #a91b30 !important;
        font-weight: 600 !important;
    }

        .logs-popover-critical .k-popover-body {
            padding: .75rem !important;
        }

        .logs-popover-critical .k-popover-callout.k-callout-s {
            border: 1px solid #a91b30 !important; /* deep orange border */
        }

    .no-logs {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #dc3545;
        padding: 1rem .75rem;
        min-height: 72px;
    }

        .no-logs span {
            font-size: 13px;
            font-weight: 500;
        }
    /* ====================================================================================================== */
    /* ========================================================== */
    /*                  FACILITY NOTES                            */
    /* ========================================================== */
    .facility-notes {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .notes-list {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }

    .no-notes {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: #999;
        padding: 2rem;
        flex: 1;
    }
    /* Note Item */
    .note-item {
        background: white;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 0.75rem;
    }

        .note-item:hover {
            box-shadow: 0 1px 4px rgba(0,0,0,0.06);
        }

        .note-item.is-owner {
            border-left: 3px solid #4a90a4;
        }
    /* Header */
    .note-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .note-author {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .note-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4a90a4 0%, #357a8c 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        flex-shrink: 0;
    }

    .note-avatar-sm {
        width: 24px;
        height: 24px;
    }

    .note-author-name {
        font-weight: 600;
        font-size: 13px;
        color: #333;
    }

    .note-date {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: #666;
        background: #e8f4f8;
        padding: 2px 8px;
        border-radius: 12px;
        cursor: default;
    }

        .note-date .k-svg-icon {
            width: 12px;
            height: 12px;
        }

    .note-edited {
        font-style: italic;
        color: #aaa;
    }
    /* Menu - show on hover */
    .note-menu {
        display: flex;
        gap: 2px;
        opacity: 0;
        transition: opacity 0.15s;
    }

    .note-item:hover > .note-header .note-menu {
        opacity: 1;
    }

    .note-menu .k-button {
        padding: 2px 4px;
    }
    /* Body */
    .note-body {
        padding-left: 36px;
        margin: .5rem 0;
    }

    .note-content {
        font-size: 14px;
        color: #444;
        line-height: 1.5;
    }

        .note-content p {
            margin: 0 0 0.25rem 0;
        }

            .note-content p:last-child {
                margin-bottom: 0;
            }

        .note-content ul,
        .note-content ol {
            margin: 0.25rem 0;
            padding-left: 1.25rem;
        }

        .note-content li {
            margin-bottom: 0.125rem;
        }
    /* Footer - hidden by default */
    .note-footer {
        display: none;
    }

        .note-footer:has(.note-reply-count) {
            display: flex;
            padding-left: 36px;
            padding-top: 0.5rem;
            margin-top: 0.5rem;
            border-top: 1px solid #f0f0f0;
        }

    .note-reply-count {
        font-size: 11px;
        color: #888;
    }
    /* Reply composer */
    .note-reply-composer {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-radius: 8px;
    }

        .note-reply-composer .k-content {
            border-radius: 8px !important;
        }
    /* Replies thread */
    .note-replies {
        margin-top: 0.5rem;
        margin-left: .5rem;
        padding-left: 0.5rem;
        border-left: 2px solid #ccc;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .note-reply {
        background: #f8f9fa;
        border: 1px solid #eee;
        padding: 0.5rem;
        border-radius: 4px;
    }

        .note-reply .note-body {
            padding-left: 32px;
        }

        .note-reply .note-avatar {
            width: 24px;
            height: 24px;
        }
    /* New Note Modal */
    .new-note-modal .k-window-content {
        display: flex;
        flex-direction: column;
        padding: 0 !important;
        overflow: hidden;
    }

    .new-note-modal .k-editor {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .facility-notes .k-editor {
        flex: 1;
        display: flex;
        flex-direction: column;
        border: 2px solid #ccc !important;
        border-radius: 8px !important;
    }

    .new-note-modal .k-editor-content {
        flex: 1;
        overflow-y: auto;
    }

    .facility-notes .k-editor-toolbar {
        border-radius: 8px !important;
    }
        /* Push custom Discard and Save buttons to right */
        .facility-notes .k-editor-toolbar .k-toolbar-item:nth-last-child(2),
        .new-note-modal .k-editor-toolbar .k-toolbar-item:nth-last-child(2) {
            margin-left: auto;
        }
    /* Owner indicator */
    .note-item.is-owner {
        border-left: 3px solid #4a90a4;
    }

/* ====================================================================================================== */
/* ========================================================== */
/*                     TEMPEST CONTENT                        */
/* ========================================================== */
/* TEMPEST Layout - 3 cards */
.tempest-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background: transparent !important;
    overflow: visible;
}

@media (max-width: 900px) {
    .tempest-layout {
        grid-template-columns: 1fr;
        gap: .75rem;
    }
}

/* Card Base */
.tempest-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .tempest-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

.tempest-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 14px;
    background: linear-gradient(to bottom, #3a3a4a 0%, #2a2a3a 100%);
    color: #e0e0e0;
}

    /* Header states */
    .tempest-card-header.active {
        background: linear-gradient(to bottom, #1e7a47 0%, #1a5c3a 100%);
        color: white;
    }

    .tempest-card-header.warning {
        background: linear-gradient(to bottom, #d4a106 0%, #b8860b 100%);
        color: white;
    }

    .tempest-card-header.urgent {
        background: linear-gradient(to bottom, #f57c00 0%, #e65100 100%);
        color: white;
    }

    .tempest-card-header.critical {
        background: linear-gradient(to bottom, #c41e3a 0%, #a91b30 100%);
        color: white;
    }

    .tempest-card-header.inactive {
        background: linear-gradient(to bottom, #c41e3a 0%, #a91b30 100%);
        color: white;
    }

.tempest-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: .75rem;
}

/* Details */
.tempest-details {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.tempest-detail {
    font-size: 14px;
    color: #333;
}

    .tempest-detail strong {
        color: #374151;
    }

/* Tracker Section */

.tempest-tracker-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 1rem;
    padding: .5rem 0;
    border-top: 1px solid #e5e7eb;
}

    .tempest-tracker-section:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.tempest-tracker-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.tempest-tracker-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.tempest-tracker-value {
    font-size: 13px;
    font-weight: 600;
}

.tempest-tracker-days {
    font-weight: 700;
}

.tempest-progress-track {
    height: 18px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.tempest-progress-track-fill {
    height: 100%;
    border-radius: 4px;
}

/* No Data */
.tempest-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 8px;
    color: #dc3545;
    padding: 1rem;
}

    .tempest-no-data svg {
        opacity: 0.5;
    }

    .tempest-no-data span {
        font-size: 13px;
        font-weight: 500;
    }

    /* ====================================================================================================== */
    /* ========================================================== */
    /*                     PDF PREVIEW PANE                       */
    /* ========================================================== */
    /* | - PDF viewer/preview component styling                  |
   | - Preview container and sizing                          |
   | - PDF canvas layout                                     |
   | - Zoom and navigation controls                          |
   | - Toolbar and action buttons                            |
   =========================================================== */

    .file-preview-modal .k-window-content {
        padding: 0 !important;
        overflow: hidden !important;
    }

    .file-preview-modal .k-splitter {
        height: 100% !important;
    }

    .file-preview-modal .k-splitter-pane {
        overflow: hidden !important;
    }

    .metadata-panel {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

        .metadata-panel .k-card,
        .metadata-panel .file-preview-card {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .metadata-panel .k-card-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

    .pdf-splitter .k-splitbar,
    .pdf-splitter .k-splitbar .k-collapse-prev,
    .pdf-splitter .k-splitbar .k-collapse-next {
        background-color: #d0d0d0 !important;
    }

        .pdf-splitter .k-splitbar:hover,
        .pdf-splitter .k-splitbar:hover .k-collapse-prev,
        .pdf-splitter .k-splitbar:hover .k-collapse-next {
            background-color: #ff6358 !important;
        }

        .pdf-splitter .k-splitbar .k-resize-handle,
        .pdf-splitter .k-splitbar .k-svg-icon {
            color: #666;
        }

        .pdf-splitter .k-splitbar:hover .k-resize-handle,
        .pdf-splitter .k-splitbar:hover .k-svg-icon {
            color: black;
        }

    .metadata-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        height: 47.5px;
    }

        .metadata-header > div {
            display: flex;
            gap: 8px;
        }

        .metadata-header h5 {
            margin: 0;
            font-size: 1rem;
        }

    .file-preview-card {
        background-color: #fafafa !important;
    }

    .no-preview-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #999;
    }
    /* ====================================================================================================== */
    /* ========================================================== */
    /*                          MODALS                            */
    /* ========================================================== */
    /* | - Modal dialog styling and behavior                     |
   | - Modal backdrop/overlay                                |
   | - Dialog container and sizing                           |
   | - Header, body, and footer layout                       |
   | - Close buttons and actions                             |
   | - Responsive modal sizing                               |
   =========================================================== */

    .entity-entry-modal {
        padding: 1rem;
    }

    .k-window-titlebar {
        background: linear-gradient(to bottom, #e7e7e7 0%, #dcdcdc 60%, #d2d2d2 100%) !important;
        border-bottom: 1px solid #cecece !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
        color: #3e3e3e !important;
    }

    .k-window-content {
        background-color: white !important;
        padding: 1.5rem !important;
    }

    .structured-document-modal .k-window-content {
        background: #eeeeee !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        height: 100% !important;
    }

    .structured-document-modal .modal-scroll {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 24px !important;
        min-height: 0 !important;
    }

    .structured-document-modal .k-form {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    .structured-document-modal .k-form-buttons {
        margin: 0 !important;
        margin-bottom: -8px !important;
    }

    .structured-document-modal .k-resize-s {
        background: #eeeeee !important;
    }

    .classification-confirmation .k-window-content {
        background: #f8f8f8 !important;
        padding: 1rem 2rem !important;
    }

    .classification-confirmation .k-window-actions {
        background: #f8f8f8 !important;
        border: none !important;
        padding: 0rem 1.5rem 1rem 1.5rem !important;
    }

    .policy-modal .k-window-content {
        padding: 0 !important;
    }
    /* ====================================================================================================== */
    /* ========================================================== */
    /*                   TEMPLATE/INFOCARD/FORM STYLES                     */
    /* ========================================================== */
    /* | - Data entry and form field styling                     |
   | - Telerik form components                               |
   | - Input fields (text, select, date, etc.)               |
   | - Edit mode styling                                     |
   | - Read-only/disabled states                             |
   | - Field labels and validation messages                  |
   =========================================================== */
    /*==================== Read-Only Form Groups =======================*/
    .infocard .k-form-fieldset {
        background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%) !important;
        border: 1px solid #dee2e6;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        border-radius: 8px !important;
        padding: 20px !important;
        margin-bottom: 16px !important;
        transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
    }

        .infocard .k-form-fieldset:hover {
            box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
        }

    .infocard .k-form-legend {
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        color: #333 !important;
        border-bottom: 2px solid #b8b8b8 !important;
        padding-bottom: 2px !important;
        position: relative !important;
        margin-top: 0px !important;
    }
    /* Field labels */
    .infocard .k-label,
    .infocard .form-row > label {
    }
    /* Hide empty form buttons area */
    .infocard .k-form-buttons:empty {
        display: none;
    }
    /*==================== Read-Only Form Items =======================*/

    .ro-input {
        width: 100%;
        min-height: 2.25rem;
        padding: .5rem .75rem;
        border-radius: 4px;
        border: 1px solid rgba(0,0,0,.08);
        background: rgba(0,0,0,.03);
        color: inherit;
        line-height: 1.5;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    @media (prefers-color-scheme: dark) {
        .ro-input {
            border-color: rgba(255,255,255,.12);
            background: rgba(255,255,255,.06);
        }
    }

    @media (forced-colors: active) {
        .ro-input {
            border: 1px solid CanvasText;
            background: Canvas;
        }
    }

    .ro-text {
        user-select: text;
    }

    .ro-placeholder {
        opacity: .6;
        font-style: italic;
        user-select: none;
    }
    /*===================== TEMPLATE FORM GROUPS =====================*/

    .structured-document-modal .k-form-fieldset.structured-document-form-group {
        background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%) !important;
        border: 1px solid #dee2e6;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        border-radius: 8px !important;
        padding: 24px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
        transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
        min-height: 0 !important;
    }

        .structured-document-modal .k-form-fieldset.structured-document-form-group:hover {
            box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
        }

        .structured-document-modal .k-form-fieldset.structured-document-form-group .k-form-legend {
            font-size: 1.25rem !important;
            font-weight: 600 !important;
            color: #333 !important;
            border-bottom: 2px solid #b8b8b8 !important;
            padding-bottom: 2px !important;
            position: relative !important;
            margin-top: 0px !important;
        }

    .structured-document-modal .k-form-fieldset.template-file-upload {
        display: flex;
        flex-direction: column;
    }

        .structured-document-modal .k-form-fieldset.template-file-upload > .k-form-layout {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }

        .structured-document-modal .k-form-fieldset.template-file-upload .k-form-field {
            margin-top: 10px !important;
        }
    /*===================== TEMPLATE FORM ITEMS =====================*/
    .template-textbox {
        background-color: white !important;
        border-color: #b8b8b8 !important;
    }

        .template-textbox.k-input-outline:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
        }

        .template-textbox.k-input.k-disabled .k-input-inner {
            background-color: white !important;
            color: black !important;
        }

    .template-dropdownlist {
        background-color: white !important;
        border-color: #b8b8b8 !important;
    }

        .template-dropdownlist.k-picker-outline:hover,
        .template-dropdownlist.k-picker-outline.k-hover {
            color: #b8b8b8 !important;
            background-color: white !important;
        }

    .classification-dropdownlist {
        color: #000000 !important;
        background-color: white !important;
        border-color: #b8b8b8 !important;
    }

    .template-multiselect {
        background-color: white !important;
        border-color: #b8b8b8 !important;
    }

    .template-personnel-multiselect {
        background-color: white !important;
        border-color: #b8b8b8 !important;
    }

    .template-combobox {
        background-color: white !important;
        border-color: #b8b8b8 !important;
    }

    .template-personnel-combobox {
        background-color: white !important;
        border-color: #b8b8b8 !important;
    }

        .template-personnel-combobox .k-button {
            display: none !important;
        }

    .template-textarea {
        background-color: white !important;
        border-color: #b8b8b8 !important;
    }

        .template-textarea,
        .template-textarea .k-input-inner {
            height: 100% !important;
            min-height: 100px !important;
            resize: vertical;
        }

    .template-numerictextbox {
        background-color: white !important;
        border-color: #b8b8b8 !important;
    }

    .template-datetimepicker {
        background-color: white !important;
        border-color: #b8b8b8 !important;
    }

    .template-datepicker {
        background-color: white !important;
        border-color: #b8b8b8 !important;
    }

    .template-timepicker {
        background-color: white !important;
        border-color: #b8b8b8 !important;
    }

    .template-checkbox {
        border-color: #666 !important;
    }
    /* When checkbox is the control, make label+checkbox inline and align to bottom */
    .form-row:has(.template-checkbox) {
        display: flex;
        flex-direction: column;
    }
    /*===================== File Uploader Design =====================*/
    .structured-document-upload {
        background-color: transparent !important;
        border: none !important;
        min-height: auto !important;
    }

        .structured-document-upload .k-upload {
            min-height: auto !important;
        }

        .structured-document-upload .k-dropzone {
            background: #f1f5f9 !important;
            border: 2px dashed #94a3b8 !important;
            border-radius: 8px !important;
            padding: 0rem .5rem !important;
            margin-top: 5px;
            transition: all 0.2s ease !important;
            min-height: 50px !important;
        }

            .structured-document-upload .k-dropzone.k-hover {
                background: #e0e7ff !important;
                border-color: #6366f1 !important;
            }

        .structured-document-upload.invalid-file .k-dropzone {
            border-color: #dc2626 !important;
            background: #fef2f2 !important;
        }

        .structured-document-upload .k-dropzone-hint {
            color: #64748b !important;
            font-size: 13px !important;
            font-weight: 400 !important;
        }

        .structured-document-upload.invalid-file .k-file-icon {
            color: #dc2626 !important;
        }

        .structured-document-upload.invalid-file .k-upload-action {
            color: #f44336 !important;
        }

        .structured-document-upload .k-upload-files {
            display: none !important;
            overflow-y: visible !important;
        }

        .structured-document-upload.k-upload .k-upload-files .k-file {
            padding: 0 !important;
        }

        .structured-document-upload .k-file-info {
            display: flex !important;
            justify-content: flex-start !important;
            align-items: center !important;
            font-size: 14px !important;
            border: none !important;
            flex: 1 !important;
        }

        .structured-document-upload:not(.k-upload-empty) .k-upload-files {
            display: block !important;
        }

            .structured-document-upload:not(.k-upload-empty) .k-upload-files .k-file {
                display: flex !important;
                padding: 0.5rem !important;
            }

    .invalid-file-message {
        color: #dc2626 !important;
        font-size: 13px !important;
        margin-top: 0.5rem !important;
    }

        .invalid-file-message strong {
            margin-right: 0.25rem !important;
        }

    .structured-document-upload:not(.k-upload-empty) .k-upload-files .k-file.k-file-invalid {
        padding: 0 !important;
    }

    .structured-document-upload .k-upload-button {
        min-width: 120px !important;
        padding: .375rem .75rem !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        background: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
        transition: all 0.2s ease !important;
    }

        .structured-document-upload .k-upload-button:hover {
            background: #e9ecef !important;
            border-color: #adb5bd !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
            transform: translateY(-1px) !important;
        }

        .structured-document-upload .k-upload-button:active {
            background: #dee2e6 !important;
            border-color: #adb5bd !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset !important;
            transform: translateY(0) !important;
        }

    .file-upload-warning .structured-document-upload {
        border: 2px solid #fca5a5 !important;
        background: #fef2f2 !important;
    }

    .file-upload-success .structured-document-upload {
        border: 2px dashed #86efac !important;
        background: #f0fdf4 !important;
    }

    .structured-document-upload .k-upload-button {
        min-width: 150px !important;
        flex: 1 1 clamp(100px, 10vw, 200px);
        max-width: 200px;
        background: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
        padding: .5rem 1rem;
        transition: all 0.2s ease !important;
        font-weight: 500 !important;
    }

        .structured-document-upload .k-upload-button:hover {
            background: #e9ecef !important;
            border-color: #adb5bd !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
            transform: translateY(-1px) !important;
        }
    /*===================== InfoCard Structure =====================*/
    .main-content .infocard {
        flex: 1 !important;
        min-height: 0;
        border: 1px solid #c3c3c3 !important;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        border-radius: 0 !important;
        background: #eeeeee !important;
    }

        .main-content .infocard .k-card-body {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
            overflow-y: auto !important;
            padding-top: 1rem !important;
        }

    .main-content > div:last-child:not(.report-wizard) {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .k-card.infocard {
        border-radius: 0px !important;
        border: none !important;
        flex-grow: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .infocard.k-card.k-card-vertical {
        border-radius: 0 !important;
        border: none !important;
    }

    .infocard .k-card-body {
        flex-grow: 1;
        min-height: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .infocard .k-disabled,
    .infocard .k-input.k-disabled .k-input-inner {
        color: #212529 !important;
        opacity: 1 !important;
    }

    .infocard .k-disabled {
        margin-top: 0rem !important;
        margin-bottom: .5rem;
    }

    .infocard-header {
        background: linear-gradient(to bottom, #d8d8d8 0%, #d0d0d0 30%, #c4c4c4 60%, #b8b8b8 100%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px !important;
        min-width: 0;
        padding: 0 .5rem !important;
        border-left: none !important;
    }

        .infocard-header h4 {
            font-size: 22px !important;
            font-weight: 600 !important;
            flex-shrink: 1;
            word-wrap: break-word;
            color: #4e4e4e !important;
            margin: 0 !important;
        }
    /*==================== Form Field Styling ======================*/

    .k-form legend.k-form-legend {
        font-weight: bold;
        margin-bottom: 0rem !important;
        font-size: 16px;
        /*    margin-top: 15px !important;
*/
    }

    .k-label {
        font-weight: 500;
    }

    .k-form-fieldset {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
    /*=================== Custom File Card ========================*/

    .main-content .custom-file-card {
        flex: 1 !important;
        min-height: 0;
        border: 1px solid #c3c3c3 !important;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        border-radius: 0 !important;
    }

        .main-content .custom-file-card .k-card-body {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            overflow-y: auto !important;
            background: #f9f9f9 !important;
        }

    .custom-file-card .rounded-circle {
        background-color: #FF6358 !important;
    }

        .custom-file-card .rounded-circle .k-svg-icon {
            color: white !important;
            width: 40px !important;
            height: 40px !important;
            transform: translate(3px);
        }
    /*==================== FFC Form Styles =====================*/
    /***Horizontal Orientation***/
    .ffc-horizontal.k-form-horizontal .k-form-field > label.k-label.k-form-label {
        width: 75% !important;
        text-align: start !important;
        align-items: flex-start !important;
        padding-block-start: 0 !important;
    }
    /* override ONLY for FormItem Class="ffc-textarea" */
    .ffc-horizontal.k-form-horizontal .k-form-field.ffc-textarea > label.k-label.k-form-label {
        width: 25% !important; /* <-- whatever you want just for textareas */
    }

    .ffc-horizontal.k-form-horizontal .k-form-field-wrap {
    }

    .ffc-horizontal.k-form-md .k-form-field {
        border-bottom: 1px dotted gray !important;
        align-items: center !important;
        text-align: start !important;
        margin-block-start: 0 !important;
        padding-block-start: 0 !important;
        padding: 1rem 0rem !important;
    }
    /***Form Sub-Items***/
    .ffc-subitem {
        margin-left: 2rem;
    }
    /***Form Checkboxes***/
    .ffc-checkbox {
        display: flex !important;
        gap: 10px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /***Vertical-to-Horizontal FormItem Class***/
    .ffc-sidebyside {
        display: flex !important;
        gap: 20px !important;
        align-items: center !important;
    }
    /*==================== File Upload Styling =====================*/


    .k-button.k-input-button.k-icon-button {
        background-color: #e6e6e6 !important;
        border-color: #e6e6e6 !important;
    }
    /*====================== Form Controls =========================*/

    .form-check .k-label {
        margin: 0 !important;
        font-weight: 500 !important;
        color: #3D3D3D !important;
    }

    .form-check {
        padding-left: 0 !important;
        padding-right: 21px !important;
    }

        .form-check .k-checkbox {
            border-color: #666 !important;
        }
    /* ====================================================================================================== */
    /* ========================================================== */
    /*                   FAVORITE FACILITIES                      */
    /* ========================================================== */
    /* | - Favorites/starred facilities component styling        |
   | - Favorites list container and layout                   |
   | - Star/favorite toggle buttons                          |
   | - Quick access links                                    |
   | - Empty state messaging                                 |
   =========================================================== */
    /*================= Favorite Toggle Button ====================*/

    .favorite-button:not(.k-selected) {
        font-weight: 600;
    }

        .favorite-button:not(.k-selected) .k-icon {
            color: #a4a4a4;
        }

    .favorite-button.k-selected {
        font-weight: 600;
    }

        .favorite-button.k-selected .k-icon {
            color: #FFD700;
        }
    /*==================== Favorites Card List =====================*/

    .favorites-card {
        cursor: pointer;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .25rem 0;
    }

        .favorites-card:hover {
            background-color: #f0f0f0;
        }

        .favorites-card > div:first-child {
            padding-left: .5rem;
        }

        .favorites-card > div:last-child {
            padding-right: .5rem;
        }
    /*==================== Empty State ============================*/

    .favorites-card-none {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: #6c757d;
        font-size: 16px;
    }

    .favorites-card-star {
        color: #adb5bd;
        width: 3em !important;
        height: 3em !important;
    }
    /*==================== Popup Styling ==========================*/

    .favorite-popup .k-svg-icon svg {
        fill: gold;
    }
    /* ====================================================================================================== */
    /* ========================================================== */
    /*                      GRID OVERRIDES                        */
    /* ========================================================== */
    /* | - Custom styling and overrides for Telerik Grid         |
   | - Grid layout and spacing                               |
   | - Column headers and sorting                            |
   | - Row styling and hover states                          |
   | - Cell formatting and alignment                         |
   | - Toolbar and command buttons                           |
   | - Paging and filtering controls                         |
   =========================================================== */

    .k-grid-header {
        font-weight: bold;
        color: #5e5e5e !important;
    }

    .k-grid .k-table-td {
        white-space: nowrap !important;
    }

    .k-grouping-drop-container {
        padding: .25rem !important;
        justify-content: center !important;
        font: bold 12px arial !important;
    }

    .k-grouping-header {
        justify-content: center !important;
        font: bold 12px arial !important;
    }

    .k-badge.inline-badge {
        display: inline-block;
        position: static;
    }

    .main-content .k-grid {
        flex: 1;
        min-height: 0;
    }

    .k-hoverable-row:hover {
        cursor: pointer;
    }

    .grid-no-scroll .k-grid-content {
        overflow-y: auto !important;
    }

    .grid-no-scroll .k-grid-header,
    .grid-no-scroll .k-grid-footer {
        padding-right: 0 !important; /* version 2.26 and older requires !important here */
    }

    .grid-no-scroll .k-grid-header-wrap,
    .grid-no-scroll .k-grid-footer-wrap {
        border-right-width: 0 !important;
    }

.pageframe-grid {
    border: none !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

        .pageframe-grid .k-toolbar-solid {
            background: linear-gradient(to bottom, #d8d8d8 0%, #d0d0d0 30%, #c4c4c4 60%, #b8b8b8 100%);
            border: none !important;
            padding: 5px .5rem !important;
            border-top: 2px solid #bbb !important;
            padding-bottom: 6px !important;
        }

    .pageframe-grid .k-table-thead {
        background-color: #d6d6d6 !important;
    }

        .pageframe-grid .k-table-thead .k-table-th {
            background-color: #e5e5e5 !important;
        }

        .pageframe-grid .k-grid-content {
            background-color: #ffffff  !important;
        }

        .pageframe-grid .k-table-row {
            background-color: #ffffff !important;
        }

            .pageframe-grid .k-table-row.k-table-alt-row {
                background-color: #f1f1f1 !important;
            }

            .pageframe-grid .k-table-row:hover {
                background-color: #dddddd !important;
            }

        .pageframe-grid .k-table-th {
            border-color: #c8c8c8 !important;
            font-weight: 600 !important;
            color: #374151 !important;        
        }

        .pageframe-grid .k-table-td {
            border-color: #e8e8e8 !important;
            color: #374151 !important;
        }

    .pageframe-grid .k-table-row.k-selected > .k-table-td,
    .pageframe-grid .k-table-row.k-selected:hover > .k-table-td {
        background-color: #e7f1ff !important;
        color: #2563eb !important;
        font-weight: 600 !important;
    }

    .pageframe-grid .k-table-row.k-selected {
        background-color: #f1f5ff !important;
        color: #2563eb !important;
        font-weight: 600 !important;
        opacity: .85;
    }

        /* Pill buttons that size to content */
        .pageframe-grid .k-toolbar .k-button {
            width: auto !important;
            padding: .25rem 1rem !important;
            border-radius: 8px !important;
            background: #f8f8f8 !important;
            color: #4a4a4a !important;
            border: none !important;
            box-shadow: 0 2px 4px rgba(0,0,0,.10) !important;
            font-weight: 600 !important;
            transition: all 0.15s ease !important;
        }

            .pageframe-grid .k-toolbar .k-button:hover {
                background: #888888 !important;
                color: #f8f8f8 !important;
                box-shadow: 0 3px 6px rgba(0,0,0,.15) !important;
            }

            .pageframe-grid .k-toolbar .k-button .k-icon,
            .pageframe-grid .k-toolbar .k-button .k-svg-icon {
                color: currentColor !important;
                fill: currentColor !important;
            }

        /* Filter row */
        .pageframe-grid .k-filter-row {
            background: #f4f4f4 !important;
        }

            .pageframe-grid .k-filter-row .k-input {
                background: #ffffff !important;
                border: 1px solid #d0d0d0 !important;
                border-radius: 4px !important;
            }

    .responsive-grid {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        table-layout: fixed; /* Force columns to respect container */
    }

    @media (max-width: 767px) {
        .responsive-grid .k-grid-header-table col,
        .responsive-grid .k-grid-table col {
            width: auto !important; /* Override fixed widths */
        }
        /* ====================================================================================================== */
        /* ========================================================== */
        /*                   REPORT PAGES/WIZARD                      */
        /* ========================================================== */
        /* | - Multi-step form and wizard component styling          |
   | - Stepper container and layout                          |
   | - Step indicators and numbering                         |
   | - Active, completed, and disabled states                |
   | - Step connectors/lines                                 |
   | - Navigation buttons                                    |
   | - Progress indicator                                    |
   =========================================================== */
        /*==================== Reports Home Page =======================*/

        .report-format-badges {
            display: inline-flex;
            gap: 6px;
            margin-left: 3px;
        }

        .report-intro-content {
            height: 100%;
            background: white;
        }

        .report-intro-highlight {
            background: #f8f9ff;
            border-left: 4px solid #4e73df;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 0 8px 8px 0;
            color: #5a5c69;
        }

        .report-format-badges {
            display: inline-flex;
            gap: 5px;
            margin-left: 5px;
        }

        .badge {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.8em;
            font-weight: 500;
        }

        .report-badge-outline {
            background: #f8f9fc;
            border: 1px solid #d1d3e2;
            color: #5a5c69;
        }

        .report-section {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e3e6f0;
        }

            .report-section:last-child {
                border-bottom: none;
                margin-bottom: 0;
            }

        .report-section-title {
            font-size: 1.1em;
            font-weight: 600;
            color: #3c4142;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .report-section-icon {
            font-size: 1.2em;
            color: #4e73df;
        }

        .report-list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px 25px;
            color: #6c757d;
        }

            .report-list li {
                margin-bottom: 6px;
                line-height: 1.4;
            }

            .report-list li {
                margin-bottom: 0;
                line-height: 1.4;
                padding-left: 15px;
                position: relative;
            }

        .report-feature-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-top: 10px;
        }

        .report-feature-grid2 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 10px;
        }

        .report-feature-item {
            background: #f8f9fa;
            padding: 12px 15px;
            border-radius: 6px;
            border-left: 3px solid #28a745;
            font-size: 0.9em;
        }

            .report-feature-item strong {
                color: #495057;
                display: block;
                margin-bottom: 4px;
            }

        .report-tips-list {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 6px;
            padding: 15px;
            margin-top: 10px;
        }

            .report-tips-list ul {
                margin: 0;
                padding-left: 20px;
                color: #856404;
            }

            .report-tips-list li {
                margin-bottom: 5px;
                font-size: 0.9em;
            }
        /*====================== Report Wizard =========================*/

        .report-wizard .k-wizard-content {
            padding: 1rem 2rem;
            min-height: 400px !important;
            height: auto !important;
            overflow: visible !important;
        }

        .report-wizard .k-wizard-steps {
            margin-block-start: 0 !important;
        }

        .report-wizard-listbox {
            display: flex;
            justify-content: center;
            gap: .5rem;
        }

        .report-wizard .k-listbox {
            height: 350px !important;
            max-height: 350px !important;
        }

        .report-wizard .k-listbox-actions {
            justify-content: center !important;
        }

        .report-wizard .k-list-item {
            font-weight: 600 !important;
        }

        .report-wizard .k-wizard-buttons {
            padding: 1rem 2rem !important;
            margin: 0 !important;
        }

        .report-wizard .k-wizard-pager {
            font-weight: 600;
        }

        .report-wizard .k-listbox .k-list-scroller {
            border: 1px solid #d1d1d1 !important;
            border-radius: 4px !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        }

        .report-wizard .k-listbox-actions .k-button:not(.k-disabled) {
            background-color: var(--kendo-color-primary, #0078d4) !important;
            border-color: var(--kendo-color-primary, #0078d4) !important;
            color: white !important;
        }

            .report-wizard .k-listbox-actions .k-button:not(.k-disabled):hover {
                background-color: var(--kendo-color-primary-hover, #106ebe) !important;
                border-color: var(--kendo-color-primary-hover, #106ebe) !important;
            }

        .report-wizard .k-listbox-actions .k-button.k-disabled {
            opacity: 0.5;
        }

        .report-wizard-step h3 {
            color: #5e5e5e;
            font-weight: 600;
            text-align: center;
        }

        .report-wizard .k-grid-layout .k-card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .report-wizard .k-grid-layout .k-card-body {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .k-listbox-toolbar {
            display: none !important;
        }

        .k-step-link:focus,
        .k-wizard-step:focus {
            outline: none !important;
        }
        /*==================== Wizard Cards ===========================*/

        .wizard-card {
            height: 100% !important;
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            margin: 0 !important;
            padding: 0 !important;
            background: white;
            border: 1px solid #d0d0d0 !important;
            border-radius: 4px !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
            overflow: hidden;
        }

        .wizard-card-header {
            color: #5e5e5e !important;
            background: linear-gradient(to bottom, #eeeeee 0%, #ebebeb 50%, #eeeeee 100%);
            padding: .15rem !important;
            display: flex !important;
            align-items: center !important;
            min-height: 40px !important;
            max-height: 100px !important;
        }

            .wizard-card-header .k-card-title {
                font-size: clamp(12px, 2vw, 16px) !important;
                font-weight: 600;
                color: #5e5e5e !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                flex-shrink: 1 !important;
                margin-left: 5px;
            }
        /*================ Field Selection & Generation ================*/

        .field-checkboxes .form-check {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .report-generation-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            padding: 2rem;
        }

        .report-summary {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 8px;
            min-width: 300px;
        }

        .format-selector {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        /* ====================================================================================================== */