/* =====================================================================
   Mekotex MIS - Enterprise UI Theme (kc-theme.css, derived from the KC-MIS design system)
   ---------------------------------------------------------------------
   Presentation-only design layer. Loaded LAST by Views/Shared/_Layout
   and the Account (auth) views. It restyles the existing markup
   (Bootstrap 3, j-forms, widget-wrap panels, Kendo UI 2015 Material)
   without changing IDs, names, classes or behaviour.

   PRINT SAFETY: every rule lives inside "@media screen" so printed
   output (window.print, Kendo grid print, report printing) is rendered
   exactly as before. Stand-alone print documents (Layout = null) do
   not load this file at all.

   Sections
     1. Design tokens
     2. Base / typography
     3. Application shell: topbar, sidebar, content, breadcrumb
     4. Panels (widget-wrap), cards
     5. Forms: labels, inputs, Kendo inputs, validation, required marks
     6. Buttons and action groups
     7. Kendo Grid, pager, toolbar, popup editor, windows
     8. Tables, badges/labels, tabs, modals, alerts, notifications
     9. Dashboard helpers
    10. Reports
    11. Auth pages (login / password)
    12. Responsive
   ===================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
    --kc-navy-900: #0f1d36;
    --kc-navy-800: #15284a;
    --kc-navy-700: #1b3461;
    --kc-navy-600: #234279;
    --kc-navy-500: #2d5394;
    --kc-navy-100: #e6ecf6;
    --kc-navy-50: #f2f5fb;
    --kc-gold: #b8952e;          /* KC-MIS accent gold - accent only */
    --kc-gold-soft: #f6efd9;
    --kc-green: #11683a;         /* KC-MIS success green */
    --kc-green-soft: #e3f2e9;
    --kc-red: #b42318;
    --kc-red-soft: #fdecea;
    --kc-amber: #b54708;
    --kc-amber-soft: #fef4e6;
    --kc-teal: #0e7490;
    --kc-teal-soft: #e3f4f8;

    --kc-bg: #f3f5f9;
    --kc-surface: #ffffff;
    --kc-surface-2: #f8f9fc;
    --kc-border: #dfe4ec;
    --kc-border-strong: #c9d1de;
    --kc-text: #1d2939;
    --kc-text-2: #475467;
    --kc-text-3: #667085;
    --kc-focus: rgba(45, 83, 148, .22);

    --kc-radius-sm: 4px;
    --kc-radius: 6px;
    --kc-radius-lg: 10px;
    --kc-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --kc-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --kc-shadow-lg: 0 8px 24px rgba(16, 24, 40, .12);

    --kc-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --kc-topbar-h: 60px;
    --kc-input-h: 34px;
}

@media screen {

    /* ---------- 2. Base / typography ---------- */
    body {
        background-color: var(--kc-bg);
        color: var(--kc-text);
        font-family: var(--kc-font);
        font-size: 13px;
        line-height: 1.5;
        letter-spacing: 0;
    }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family: var(--kc-font);
        color: var(--kc-navy-900);
        font-weight: 600;
        letter-spacing: 0;
    }
    a { color: var(--kc-navy-500); }
    a:hover, a:focus { color: var(--kc-navy-700); }
    hr { border-top-color: var(--kc-border); margin: 16px 0; }
    ::selection { background: var(--kc-navy-100); }
    .text-primary { color: var(--kc-navy-600) !important; }
    .text-muted { color: var(--kc-text-3) !important; }
    :focus-visible { outline: 2px solid var(--kc-navy-500); outline-offset: 1px; }

    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: #c4ccd8; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
    ::-webkit-scrollbar-thumb:hover { background-color: #9aa6b8; }
    ::-webkit-scrollbar-track { background: transparent; }

    /* ---------- 3. Application shell ---------- */
    .topbar {
        height: var(--kc-topbar-h);
        background: var(--kc-surface);
        border-bottom: 1px solid var(--kc-border);
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    }
    .topbar .topbar-left .left-branding,
    .topbar .topbar-left .left-branding.dark-style,
    .topbar .topbar-left .left-branding.menu-color-gradient {
        background: transparent !important;
        width: auto;
    }
    .topbar .topbar-left .left-toggle-switch {
        width: 40px;
        height: 40px;
        margin: 10px 4px 10px 12px;
        line-height: 40px;
        border-radius: var(--kc-radius);
        background: var(--kc-navy-800) !important;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color .15s ease;
    }
    .topbar .topbar-left .left-toggle-switch:hover { background: var(--kc-navy-600) !important; }
    .topbar .topbar-left .left-toggle-switch i { color: #fff !important; font-size: 20px; line-height: 1 !important; height: auto !important; width: auto !important; padding: 0 !important; margin: 0 !important; top: 0; }
    .topbar .topbar-left { width: auto !important; }
    .topbar .topbar-left > .clearfix { display: flex; align-items: center; }
    .topbar .topbar-left .left-branding { float: none !important; }
    .kc-brand-name, .kc-brand-sub { white-space: nowrap; }

    .kc-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        height: var(--kc-topbar-h);
        padding: 0 12px 0 6px;
        color: var(--kc-navy-900);
        text-decoration: none !important;
        float: left;
    }
    .kc-brand:hover, .kc-brand:focus { color: var(--kc-navy-900); }
    .kc-brand img { height: 44px; width: 50px; object-fit: cover; object-position: left center; display: block; }
    .kc-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
    .kc-brand-name { font-size: 15px; font-weight: 700; letter-spacing: .2px; color: var(--kc-navy-900); }
    .kc-brand-sub { font-size: 11px; font-weight: 500; color: var(--kc-text-3); letter-spacing: .4px; text-transform: uppercase; }

    .topbar .top-right-icons > li > a,
    .topbar .top-right-icons > li > a i { color: var(--kc-text-2); }
    .topbar .top-right-icons > li > a:hover i { color: var(--kc-navy-700); }
    .topbar .noty-bubble { background: var(--kc-red); box-shadow: 0 0 0 2px #fff; }
    .topbar .topbar-logged-user > a img { box-shadow: 0 0 0 2px var(--kc-navy-100); }
    .topbar .dropdown-menu {
        border: 1px solid var(--kc-border);
        border-radius: var(--kc-radius-lg);
        box-shadow: var(--kc-shadow-lg);
        overflow: hidden;
    }
    .topbar .topbar-logged-user .dropdown-menu.more-apps { min-width: 240px; padding: 0; }
    .topbar .topbar-logged-user .user-profile-container { padding: 18px 16px 12px; text-align: center; }
    .topbar .topbar-logged-user .user-profile-container .admin-user-thumb img { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 3px var(--kc-navy-100); }
    .topbar .topbar-logged-user .user-profile-container p { margin: 10px 0 12px; font-size: 13px; font-weight: 600; word-break: break-all; }
    .topbar .topbar-logged-user .user-profile-container p a { color: var(--kc-navy-900); }
    .topbar .topbar-logged-user .admin-bar { border-top: 1px solid var(--kc-border); margin: 0 -16px -12px; padding: 8px 10px; background: var(--kc-surface-2); }
    .topbar .topbar-logged-user .admin-bar ul { display: flex; justify-content: space-around; margin: 0; padding: 0; list-style: none; }
    .topbar .topbar-logged-user .admin-bar ul li a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--kc-radius); font-size: 18px; }
    .topbar .topbar-logged-user .admin-bar ul li a { color: var(--kc-text-2); }
    .topbar .topbar-logged-user .admin-bar ul li a:hover { color: var(--kc-navy-700); background: var(--kc-navy-50); }
    .topbar .top-search-bar { background: var(--kc-surface); border-bottom: 1px solid var(--kc-border); }

    /* Topbar controls: module launcher button + global search trigger */
    .topbar .topbar-left > .clearfix { display: flex; align-items: center; }
    .kc-launch-btn,
    .kc-search-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        padding: 0 12px;
        border: 1px solid var(--kc-border);
        border-radius: var(--kc-radius);
        background: var(--kc-surface);
        color: var(--kc-text-2);
        font: 600 13px var(--kc-font);
        cursor: pointer;
        transition: background-color .12s ease, border-color .12s ease, color .12s ease;
    }
    .kc-launch-btn { margin-left: 6px; color: var(--kc-navy-700); }
    .kc-launch-btn:hover, .kc-launch-btn[aria-expanded="true"] { background: var(--kc-navy-50); border-color: #c7d3ea; color: var(--kc-navy-800); }
    .kc-search-trigger { margin-left: 10px; min-width: 260px; font-weight: 500; color: var(--kc-text-3); background: var(--kc-surface-2); }
    .kc-search-trigger:hover { border-color: var(--kc-border-strong); background: var(--kc-surface); color: var(--kc-text-2); }
    .kc-search-trigger span { flex: 1 1 auto; text-align: left; }
    .kc-search-trigger kbd {
        padding: 1px 6px;
        border: 1px solid var(--kc-border-strong);
        border-bottom-width: 2px;
        border-radius: 4px;
        background: var(--kc-surface);
        color: var(--kc-text-3);
        font: 600 10.5px var(--kc-font);
        box-shadow: none;
    }
    .kc-launch-btn:focus-visible, .kc-search-trigger:focus-visible { outline: 2px solid var(--kc-navy-500); outline-offset: 1px; }
    /* the template's own top search bar is not wired to anything; the launcher search replaces it */
    .topbar .top-search-bar { display: none !important; }
    .topbar .top-right-icons > li > a.btn-top-search { display: none; }

    /* Sidebar: compact icon rail (one button per module) + the active module's menu tree */
    :root { --kc-rail-w: 56px; --kc-side-w: 292px; }
    .leftbar,
    .left-aside-container,
    .leftbar .slimScrollDiv {
        width: var(--kc-side-w) !important;
    }
    .leftbar {
        top: var(--kc-topbar-h);
        background: var(--kc-navy-900);
        box-shadow: 4px 0 24px rgba(15, 29, 54, .18);
    }
    .leftbar form.j-forms { margin: 0; }
    .tabby-leftbar { display: flex; align-items: stretch; min-height: 100%; }
    .tabby-leftbar > .nav-tabs {
        flex: 0 0 var(--kc-rail-w);
        width: var(--kc-rail-w);
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px 6px;
        margin: 0;
        border: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, .07) !important;
        background: rgba(0, 0, 0, .22) !important;
        position: sticky;
        top: 0;
        align-self: flex-start;
        max-height: calc(100vh - var(--kc-topbar-h));
        overflow-y: auto;
        scrollbar-width: none;
    }
    .tabby-leftbar > .nav-tabs::-webkit-scrollbar { display: none; }
    .tabby-leftbar > .nav-tabs:before,
    .tabby-leftbar > .nav-tabs:after { display: none; }
    .tabby-leftbar > .nav-tabs > li { float: none; flex: none; width: auto !important; margin: 0 !important; }
    .tabby-leftbar > .nav-tabs > li > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 40px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: var(--kc-radius) !important;
        background: transparent !important;
        transition: background-color .12s ease;
    }
    .tabby-leftbar > .nav-tabs > li > a:hover { background: rgba(255, 255, 255, .09) !important; }
    .tabby-leftbar > .nav-tabs > li.active > a,
    .tabby-leftbar > .nav-tabs > li.active > a:hover,
    .tabby-leftbar > .nav-tabs > li.active > a:focus { background: rgba(184, 149, 46, .20) !important; }
    .tabby-leftbar > .nav-tabs > li.active > a:before {
        content: "";
        position: absolute;
        left: -6px;
        top: 9px;
        bottom: 9px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--kc-gold);
    }
    .tabby-leftbar > .nav-tabs > li > a > div { width: auto !important; }
    .tabby-leftbar > .nav-tabs .nav-tab-icon-size { font-size: 17px; line-height: 1; }
    .tabby-leftbar > .nav-tabs .fa-stack { width: 1.2em; height: 1.2em; line-height: 1.2em; font-size: 17px; }
    .tabby-leftbar > .nav-tabs .fa-stack .fa-circle { display: none; }
    .tabby-leftbar > .nav-tabs .fa-stack .fa-stack-1x { width: 100%; line-height: 1.2em; color: #aab7cf; }
    .tabby-leftbar > .nav-tabs > li > a:hover .fa-stack-1x { color: #fff; }
    .tabby-leftbar > .nav-tabs > li.active > a .fa-stack-1x { color: #e9cf83; }
    .tabby-leftbar > .nav-tabs .nav-tab-text-size { display: none !important; }
    .tabby-leftbar > .tab-content { flex: 1 1 auto; min-width: 0; padding: 6px 8px 48px 10px; }
    .tabby-leftbar > .tab-content > .tab-pane { padding: 0; }

    .leftbar .list-accordion .list-title {
        padding: 12px 8px 10px !important;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .9px;
        text-transform: uppercase;
        color: #e9cf83 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .leftbar .list-accordion li a,
    .leftbar .list-accordion li a.Link-Color-W {
        color: #d6deeb !important;
        border-radius: var(--kc-radius-sm);
        font-size: 13px;
        transition: background-color .12s ease, color .12s ease;
    }
    .leftbar .list-accordion > li > a { padding: 7px 8px !important; }
    .leftbar .list-accordion li ul li a { padding: 5px 8px 5px 30px !important; font-size: 12.5px; color: #b8c4d8 !important; }
    .leftbar .list-accordion li ul li ul li a { padding-left: 42px !important; }
    .leftbar .list-accordion li a:hover,
    .leftbar .list-accordion li a:focus,
    .leftbar .list-accordion li a.Link-Color-W:hover {
        background: rgba(255, 255, 255, .07) !important;
        color: #fff !important;
        text-decoration: none;
    }
    .leftbar .list-accordion li a.active,
    .leftbar .list-accordion li a.acc-parent.active { background: rgba(255, 255, 255, .05) !important; color: #fff !important; }
    .leftbar .list-accordion li a.kc-current,
    .leftbar .list-accordion li a.kc-current:hover {
        background: rgba(184, 149, 46, .20) !important;
        color: #fff !important;
        box-shadow: inset 2px 0 0 var(--kc-gold);
        font-weight: 600;
    }
    .leftbar .list-accordion li a i { color: #8d9bb5; width: 18px; text-align: center; margin-right: 6px; }
    .leftbar .list-accordion li a:hover i { color: #e9cf83; }
    .leftbar .list-accordion.tree-style li ul { border-left-color: rgba(255, 255, 255, .10) !important; }

    /* Sidebar placement: desktop = compact icon rail (menu opens as a flyout, or stays pinned when expanded);
       below 992px the sidebar is an overlay, as in the original application */
    body.overlay-leftbar .leftbar { transform: translate(-100%, 0); }
    body.overlay-leftbar.left-aside-toggle .leftbar { transform: translate(0, 0); }
    body.overlay-leftbar.kc-pinned .leftbar { transform: translate(0, 0) !important; }
    body.kc-pinned .main-container { margin-left: var(--kc-rail-w); }
    body.kc-pinned.kc-expanded .main-container { margin-left: var(--kc-side-w); }
    body.kc-pinned:not(.kc-expanded):not(.kc-flyout) .leftbar,
    body.kc-pinned:not(.kc-expanded):not(.kc-flyout) .left-aside-container,
    body.kc-pinned:not(.kc-expanded):not(.kc-flyout) .leftbar .slimScrollDiv { width: var(--kc-rail-w) !important; }
    body.kc-pinned:not(.kc-expanded):not(.kc-flyout) .tabby-leftbar > .tab-content { display: none; }
    body.kc-pinned.kc-flyout:not(.kc-expanded) .leftbar { z-index: 1250; box-shadow: 10px 0 36px rgba(15, 29, 54, .38); }

    /* Shell and dashboard glyphs stay on the bundled Font Awesome 4 even when a page also loads Font Awesome 5 from a CDN */
    .topbar .fa, .leftbar .fa, .kc-launcher .fa, .kc-cc .fa, .kc-an .fa, .kc-breadcrumb .fa, .kc-search-trigger .fa, .kc-launch-btn .fa { font-family: FontAwesome !important; font-weight: normal !important; font-style: normal; }

    /* Module launcher + search */
    .kc-launcher-backdrop { position: fixed; inset: 0; z-index: 1290; background: rgba(15, 29, 54, .28); }
    .kc-launcher-backdrop[hidden], .kc-launcher[hidden] { display: none; }
    .kc-launcher {
        position: fixed;
        z-index: 1300;
        top: calc(var(--kc-topbar-h) + 6px);
        left: 12px;
        width: min(680px, calc(100vw - 24px));
        max-height: calc(100vh - var(--kc-topbar-h) - 24px);
        display: flex;
        flex-direction: column;
        background: var(--kc-surface);
        border: 1px solid var(--kc-border);
        border-radius: 12px;
        box-shadow: var(--kc-shadow-lg), 0 24px 56px rgba(16, 24, 40, .18);
        overflow: hidden;
    }
    .kc-launcher-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--kc-border); }
    .kc-launcher-head > i { color: var(--kc-text-3); font-size: 15px; }
    .kc-launcher-head input {
        flex: 1 1 auto;
        height: 32px;
        border: 0;
        outline: 0;
        background: transparent;
        font: 500 14px var(--kc-font);
        color: var(--kc-text);
    }
    .kc-launcher-close {
        padding: 2px 8px;
        border: 1px solid var(--kc-border-strong);
        border-radius: 4px;
        background: var(--kc-surface-2);
        color: var(--kc-text-3);
        font: 600 11px var(--kc-font);
        cursor: pointer;
    }
    .kc-launcher-body { padding: 10px 14px 14px; overflow-y: auto; }
    .kc-l-section { margin-bottom: 14px; }
    .kc-l-section:last-child { margin-bottom: 0; }
    .kc-l-section h6 { margin: 4px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--kc-text-3); }
    .kc-mod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .kc-mod {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border: 1px solid var(--kc-border);
        border-radius: var(--kc-radius);
        background: var(--kc-surface);
        text-align: left;
        cursor: pointer;
        transition: background-color .12s ease, border-color .12s ease;
    }
    .kc-mod:hover, .kc-mod:focus-visible { background: var(--kc-navy-50); border-color: #c7d3ea; outline: none; }
    .kc-mod.is-current { background: var(--kc-gold-soft); border-color: #e3d49b; }
    .kc-mod-ico {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--kc-navy-100);
        color: var(--kc-navy-700);
        font-size: 15px;
    }
    .kc-mod.is-current .kc-mod-ico { background: var(--kc-navy-700); color: #fff; }
    .kc-mod-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
    .kc-mod-txt b { font-size: 12.5px; font-weight: 600; color: var(--kc-navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kc-mod-txt small { font-size: 11px; color: var(--kc-text-3); }
    .kc-l-links, .kc-l-recent { display: flex; flex-wrap: wrap; gap: 6px; }
    .kc-l-links a, .kc-l-recent a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 10px;
        border: 1px solid var(--kc-border);
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--kc-text);
        background: var(--kc-surface);
    }
    .kc-l-links a i, .kc-l-recent a i { color: var(--kc-navy-500); }
    .kc-l-recent a small { color: var(--kc-text-3); font-weight: 500; }
    .kc-l-links a:hover, .kc-l-recent a:hover { background: var(--kc-navy-50); border-color: #c7d3ea; text-decoration: none; color: var(--kc-navy-900); }
    .kc-l-results { list-style: none; margin: 0; padding: 0; }
    .kc-r { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--kc-radius); cursor: pointer; }
    .kc-r > i { flex: 0 0 18px; text-align: center; color: var(--kc-navy-500); }
    .kc-r > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
    .kc-r b { font-size: 13px; font-weight: 600; color: var(--kc-navy-900); }
    .kc-r small { font-size: 11.5px; color: var(--kc-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kc-r.is-sel { background: var(--kc-navy-50); }
    .kc-r mark { background: var(--kc-gold-soft); color: inherit; padding: 0 1px; border-radius: 2px; }
    .kc-l-empty { padding: 28px 12px; text-align: center; color: var(--kc-text-3); }
    .kc-l-empty i { display: block; font-size: 22px; margin-bottom: 8px; color: #a5afbf; }


    /* Content area */
    .main-container {
        padding: 18px 20px 24px;
        min-height: calc(100vh - var(--kc-topbar-h));
    }
    .main-container > .container-fluid { padding-left: 0; padding-right: 0; max-width: 1800px; margin: 0 auto; }

    /* Breadcrumb bar (rendered by _Layout) */
    .kc-pagebar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 14px;
        min-height: 24px;
    }
    .kc-breadcrumb {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        font-size: 12px;
        color: var(--kc-text-3);
    }
    .kc-breadcrumb li + li:before {
        content: "\f105";
        font-family: FontAwesome;
        margin: 0 8px;
        color: #a5afbf;
    }
    .kc-breadcrumb a { color: var(--kc-text-3); }
    .kc-breadcrumb a:hover { color: var(--kc-navy-600); text-decoration: none; }
    .kc-breadcrumb li:last-child { color: var(--kc-navy-800); font-weight: 600; }
    .kc-pagebar-meta { font-size: 12px; color: var(--kc-text-3); white-space: nowrap; }

    .loader { background-color: rgba(243, 245, 249, .65) !important; }

    #scrollTop { background-color: var(--kc-navy-700); border-radius: 50%; width: 40px; height: 40px; box-shadow: var(--kc-shadow); }

    /* ---------- 4. Panels (widget-wrap) ---------- */
    .widget-wrap,
    .widget-wrap1 {
        background: var(--kc-surface) !important;
        border: 1px solid var(--kc-border);
        border-radius: var(--kc-radius-lg);
        box-shadow: var(--kc-shadow-sm);
        padding: 0 18px 18px;
        margin-bottom: 20px;
    }
    .widget-wrap > .widget-header,
    .widget-wrap1 > .widget-header1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 18px !important;
        margin: 0 -18px 18px !important;
        border-bottom: 1px solid var(--kc-border);
        background: var(--kc-surface);
        border-radius: var(--kc-radius-lg) var(--kc-radius-lg) 0 0;
        min-height: 52px;
    }
    .widget-wrap > .widget-header:before,
    .widget-wrap > .widget-header:after { display: none; }
    .widget-wrap > .widget-header > .pull-left,
    .widget-wrap > .widget-header > .pull-right { float: none !important; }
    .widget-wrap .widget-header h1,
    .widget-wrap .widget-header h2,
    .widget-wrap .widget-header h3,
    .widget-wrap .widget-header h4,
    .widget-wrap .widget-header h5,
    .widget-wrap .widget-header h6,
    .widget-wrap1 .widget-header1 h3 {
        font-size: 16px;
        font-weight: 600;
        text-transform: none;
        color: var(--kc-navy-900);
        margin: 0;
        line-height: 1.3;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .widget-wrap > .widget-header h3:before,
    .widget-wrap > .widget-header h4:before {
        content: "";
        width: 4px;
        height: 18px;
        border-radius: 2px;
        background: var(--kc-gold);
        flex: 0 0 auto;
    }
    .widget-wrap .widget-action-bar { margin: 0; }
    .widget-wrap .widget-action-bar > li > a {
        width: 32px;
        height: 32px;
        line-height: 32px;
        border-radius: var(--kc-radius);
        color: var(--kc-text-3);
        background: transparent;
        border: 1px solid transparent;
        display: inline-block;
        text-align: center;
        padding: 0;
    }
    .widget-wrap .widget-action-bar > li > a:hover { background: var(--kc-surface-2); border-color: var(--kc-border); color: var(--kc-navy-700); }
    .widget-wrap .widget-action-bar .dropdown-menu { min-width: 0; }
    .widget-wrap .widget-container { padding: 0; }
    .widget-wrap .widget-content { padding: 0; }
    .widget-wrap .widget-content hr { margin: 14px -18px; border-top: 1px dashed var(--kc-border); }

    .widget-wrap .widget-wrap { box-shadow: none; margin-bottom: 14px; }
    .widget-wrap > :last-child { margin-bottom: 0; }
    fieldset { border: 1px solid var(--kc-border); border-radius: var(--kc-radius); padding: 12px 16px 6px; margin: 0 0 16px; }
    legend {
        width: auto;
        padding: 0 8px;
        margin: 0;
        border: 0;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: var(--kc-navy-700);
    }

    /* Alternate panel markup used by a few listings: section.card > header.card-header + .card-block */
    .main-container section.card {
        background: var(--kc-surface);
        border: 1px solid var(--kc-border);
        border-radius: var(--kc-radius-lg);
        box-shadow: var(--kc-shadow-sm);
        margin-bottom: 20px;
    }
    .main-container section.card > .card-header {
        padding: 14px 18px;
        border-bottom: 1px solid var(--kc-border);
        font-size: 16px;
        font-weight: 600;
        color: var(--kc-navy-900);
        background: var(--kc-surface);
        border-radius: var(--kc-radius-lg) var(--kc-radius-lg) 0 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .main-container section.card > .card-header:before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--kc-gold); }
    .main-container section.card > .card-block { padding: 18px; }

    .panel { border-color: var(--kc-border); border-radius: var(--kc-radius-lg); box-shadow: var(--kc-shadow-sm); }
    .panel > .panel-heading { border-radius: var(--kc-radius-lg) var(--kc-radius-lg) 0 0; font-weight: 600; }
    .panel-default > .panel-heading { background: var(--kc-surface-2); color: var(--kc-navy-900); border-color: var(--kc-border); }
    .panel-primary { border-color: var(--kc-navy-700); }
    .panel-primary > .panel-heading { background: var(--kc-navy-700); border-color: var(--kc-navy-700); }
    .well { background: var(--kc-surface-2); border-color: var(--kc-border); box-shadow: none; border-radius: var(--kc-radius); }

    /* ---------- 5. Forms ---------- */
    label,
    .control-label,
    .j-forms label,
    .k-edit-label label {
        font-size: 12px;
        font-weight: 600;
        color: var(--kc-text-2);
        margin-bottom: 4px;
        letter-spacing: .1px;
    }
    .form-horizontal .form-group > label.col-md-12,
    .form-horizontal .form-group > label[class*="col-"] { padding-top: 0; margin-bottom: 4px; text-align: left; }
    .form-horizontal .form-group > label[class*="col-md-"]:not(.col-md-12) { padding-top: 8px; }
    .form-group { margin-bottom: 14px; }

    /* Form section headings: .kc-form-section (added to long forms) and legacy in-form h3 headings */
    .kc-form-section,
    .widget-content form h3,
    .widget-content form h4.kc-form-section {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 6px 0 14px;
        padding: 0 0 8px;
        border-bottom: 1px solid var(--kc-border);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .7px;
        text-transform: uppercase;
        color: var(--kc-navy-700);
        clear: both;
    }
    .widget-content form h3 { font-size: 12px; }
    /* Inline-coloured centred h4 headings in member/spouse/household picture tabs */
    .widget-content h4[style*="text-align"][style*="color"] { color: var(--kc-navy-700) !important; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin: 6px 0 10px; }
    .widget-content form hr + .kc-form-section, .widget-content form hr + div > h3 { margin-top: 0; }

    /* a narrow column (col-md-1) holding a button: let the label wrap instead of poking out of the panel */
    .col-md-1 > .btn, .col-md-1 > button, .col-md-1 > input[type="button"] { max-width: 100%; white-space: normal; }

    /* Required-field indicator for fields marked [required] (uses :has where supported) */
    .form-group:has(input[required]:not([type="hidden"]), select[required], textarea[required]) > label:not(.checkbox):not(.radio):after {
        content: " *";
        color: var(--kc-red);
        font-weight: 700;
    }

    .form-control,
    .k-textbox,
    .j-forms .input input,
    .j-forms .input textarea,
    .j-forms .select select {
        border: 1px solid var(--kc-border-strong);
        border-radius: var(--kc-radius);
        background-color: var(--kc-surface);
        color: var(--kc-text);
        font-family: var(--kc-font);
        font-size: 13px;
        box-shadow: none;
        transition: border-color .12s ease, box-shadow .12s ease;
    }
    .form-control,
    input.k-textbox,
    .j-forms .input input { height: var(--kc-input-h); padding: 6px 10px; }
    textarea.form-control, textarea.k-textbox, .j-forms .input textarea { height: auto; min-height: 60px; padding: 7px 10px; }
    span.k-textbox { height: var(--kc-input-h); padding: 0 !important; display: inline-flex; align-items: center; }
    span.k-textbox > input { height: calc(var(--kc-input-h) - 2px); padding: 0 10px; border: 0; background: transparent; font-size: 13px; outline: none; flex: 1 1 auto; min-width: 0; text-indent: 0; }
    span.k-textbox.k-space-right > .k-icon { position: static; margin: 0 8px; flex: 0 0 auto; }
    .form-control:focus,
    .k-textbox:focus,
    .k-textbox.k-state-focused,
    span.k-textbox:focus-within,
    .j-forms .input input:focus,
    .j-forms .input textarea:focus {
        border-color: var(--kc-navy-500) !important;
        box-shadow: 0 0 0 3px var(--kc-focus) !important;
        outline: none;
    }
    .form-control[disabled], .form-control[readonly],
    .k-textbox[disabled], .k-textbox[readonly],
    fieldset[disabled] .form-control {
        background-color: #f2f4f7 !important;
        color: var(--kc-text-2);
        border-color: var(--kc-border) !important;
    }
    ::placeholder { color: #98a2b3 !important; opacity: 1; }
    .input-group-addon { background: var(--kc-surface-2); border-color: var(--kc-border-strong); color: var(--kc-text-2); }
    .checkbox label, .radio label, label.checkbox, label.radio { font-weight: 500; color: var(--kc-text); }
    input[type="checkbox"], input[type="radio"] { accent-color: var(--kc-navy-600); }

    /* j-forms custom radio / checkbox / toggle (template draws <i> and hides the native input) */
    .j-forms .radio, .j-forms .checkbox { font-size: 13px; padding-left: 26px; color: var(--kc-text); height: auto; line-height: 18px; padding-top: 8px; padding-bottom: 6px; }
    .j-forms .radio-toggle, .j-forms .checkbox-toggle { font-size: 13px; color: var(--kc-text); height: auto; line-height: 18px; padding-top: 8px; padding-bottom: 6px; }
    .j-forms .radio i, .j-forms .checkbox i { border-color: var(--kc-border-strong); border-width: 1.5px; top: 7px; width: 18px; height: 18px; background: var(--kc-surface); }
    .j-forms .radio i { border-radius: 50%; }
    .j-forms .checkbox i { border-radius: 4px; }
    .j-forms .radio input:checked + i, .j-forms .checkbox input:checked + i { border-color: var(--kc-navy-600); }
    .j-forms .checkbox input:checked + i { background: var(--kc-navy-600); }
    .j-forms .radio i:after { background-color: var(--kc-navy-600); width: 8px; height: 8px; top: 3.5px; left: 3.5px; border-radius: 50%; }
    .j-forms .checkbox i:after { border-color: #fff; top: 2px; left: 3px; width: 9px; height: 5px; border-width: 0 0 2px 2px; }
    .j-forms .radio input:focus-visible + i, .j-forms .checkbox input:focus-visible + i { box-shadow: 0 0 0 3px var(--kc-focus); }
    .j-forms .radio input:disabled + i, .j-forms .checkbox input:disabled + i { background: #f2f4f7; border-color: var(--kc-border); }
    .j-forms .radio input:disabled + i:after { background-color: #9aa6b8; }
    .j-forms .checkbox-toggle i, .j-forms .radio-toggle i { border-radius: 999px; border-color: var(--kc-border-strong); background: #e4e8ef; top: 7px; height: 18px; width: 40px; border-width: 1.5px; }
    .j-forms .checkbox-toggle i:before, .j-forms .radio-toggle i:before { background-color: #fff; width: 12px; height: 12px; top: 1.5px; left: 2px; border-radius: 50%; box-shadow: 0 1px 2px rgba(16,24,40,.25); transition: left .15s ease; }
    .j-forms .checkbox-toggle input:checked + i, .j-forms .radio-toggle input:checked + i { background: var(--kc-navy-600); border-color: var(--kc-navy-600); }
    .j-forms .checkbox-toggle input:checked + i:before, .j-forms .radio-toggle input:checked + i:before { left: 23px; }
    .j-forms .checkbox-toggle i:after, .j-forms .radio-toggle i:after, .j-forms .checkbox-toggle input:checked + i:after, .j-forms .radio-toggle input:checked + i:after { display: none; }

    /* Segmented section switcher (e.g. Member form: Membership / Spouse / HouseHold).
       Bootstrap 4 btn-outline-* classes are used by the view but do not exist in Bootstrap 3. */
    .kc-segment { display: inline-flex; margin: 10px 0 2px; border: 1px solid var(--kc-border-strong); border-radius: var(--kc-radius); overflow: hidden; background: var(--kc-surface); }
    .kc-segment .btn, .btn-outline-info, .btn-outline-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
        background: var(--kc-surface) !important;
        border: 1px solid var(--kc-border-strong) !important;
        color: var(--kc-text) !important;
        border-radius: var(--kc-radius);
        font-weight: 600;
    }
    .kc-segment .btn { border: 0 !important; border-radius: 0; padding: 6px 16px; }
    .kc-segment .btn + .btn { border-left: 1px solid var(--kc-border-strong) !important; }
    .kc-segment .btn:hover { background: var(--kc-navy-50) !important; }
    .kc-segment .btn:focus, .kc-segment .btn:active,
    .kc-segment:not(:focus-within) .btn-outline-info { background: var(--kc-navy-700) !important; color: #fff !important; box-shadow: none !important; }

    /* Kendo input widgets */
    .k-widget.k-datepicker,
    .k-widget.k-datetimepicker,
    .k-widget.k-timepicker,
    .k-widget.k-combobox,
    .k-widget.k-dropdown,
    .k-widget.k-numerictextbox {
        font-family: var(--kc-font);
        font-size: 13px;
        background: transparent;
        box-shadow: none;
        border: 0;
    }
    .k-picker-wrap,
    .k-dropdown-wrap,
    .k-numeric-wrap,
    .k-multiselect-wrap,
    .k-widget.k-autocomplete {
        border: 1px solid var(--kc-border-strong) !important;
        border-radius: var(--kc-radius) !important;
        background: var(--kc-surface) !important;
        box-shadow: none !important;
        transition: border-color .12s ease, box-shadow .12s ease;
    }
    .k-picker-wrap .k-input,
    .k-dropdown-wrap .k-input,
    .k-numeric-wrap .k-input,
    .k-autocomplete .k-input {
        height: calc(var(--kc-input-h) - 2px) !important;
        line-height: calc(var(--kc-input-h) - 2px) !important;
        padding: 0 10px !important;
        text-indent: 0 !important;
        color: var(--kc-text);
        background: transparent !important;
        font-size: 13px;
        box-shadow: none !important;
    }
    .k-dropdown-wrap .k-select,
    .k-picker-wrap .k-select,
    .k-numeric-wrap .k-select {
        min-height: calc(var(--kc-input-h) - 2px);
        line-height: calc(var(--kc-input-h) - 2px);
        border-left: 1px solid var(--kc-border) !important;
        background: transparent !important;
        border-radius: 0 var(--kc-radius) var(--kc-radius) 0;
    }
    .k-picker-wrap.k-state-hover, .k-dropdown-wrap.k-state-hover, .k-numeric-wrap.k-state-hover { border-color: #9aa6b8 !important; }
    .k-picker-wrap.k-state-focused,
    .k-dropdown-wrap.k-state-focused,
    .k-numeric-wrap.k-state-focused,
    .k-autocomplete.k-state-focused,
    .k-multiselect.k-state-focused > .k-multiselect-wrap,
    .k-dropdown-wrap.k-state-active,
    .k-picker-wrap.k-state-active {
        border-color: var(--kc-navy-500) !important;
        box-shadow: 0 0 0 3px var(--kc-focus) !important;
    }
    .k-state-disabled .k-picker-wrap,
    .k-state-disabled .k-dropdown-wrap,
    .k-state-disabled .k-numeric-wrap,
    .k-picker-wrap.k-state-disabled,
    .k-dropdown-wrap.k-state-disabled,
    .k-numeric-wrap.k-state-disabled { background: #f2f4f7 !important; opacity: 1; }
    .k-multiselect-wrap li.k-button { border-radius: 999px !important; background: var(--kc-navy-100) !important; color: var(--kc-navy-800) !important; border: 0 !important; font-size: 12px; padding: 2px 8px; }
    .k-numerictextbox .k-input { text-align: right; font-variant-numeric: tabular-nums; }

    /* Kendo popups */
    .k-animation-container .k-popup,
    .k-list-container,
    .k-calendar-container {
        border: 1px solid var(--kc-border) !important;
        border-radius: var(--kc-radius) !important;
        box-shadow: var(--kc-shadow-lg) !important;
        font-family: var(--kc-font);
        font-size: 13px;
    }
    .k-list-container .k-item, .k-popup .k-list .k-item { padding: 6px 10px; line-height: 1.4; min-height: 0; }
    .k-popup .k-list .k-state-hover, .k-list-container .k-item.k-state-hover { background: var(--kc-navy-50) !important; color: var(--kc-navy-900) !important; }
    .k-popup .k-list .k-state-selected,
    .k-popup .k-list .k-state-focused.k-state-selected,
    .k-list-container .k-item.k-state-selected { background: var(--kc-navy-600) !important; color: #fff !important; }
    .k-calendar .k-header, .k-calendar .k-footer { background: var(--kc-navy-700) !important; }
    .k-calendar .k-header .k-link, .k-calendar .k-header .k-icon { color: #fff !important; }
    .k-calendar td.k-state-selected .k-link, .k-calendar td.k-state-selected { background: var(--kc-navy-600) !important; color: #fff !important; }
    .k-calendar td.k-today .k-link { color: var(--kc-navy-700); font-weight: 700; }
    .k-calendar td.k-state-hover { background: var(--kc-navy-50) !important; }

    /* Validation */
    .k-widget.k-tooltip-validation,
    .k-tooltip-validation.k-invalid-msg {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 4px 0 0;
        padding: 3px 8px;
        border: 0;
        border-radius: var(--kc-radius-sm);
        background: var(--kc-red-soft) !important;
        color: var(--kc-red) !important;
        font-size: 11.5px;
        font-weight: 500;
        box-shadow: none !important;
        position: static;
    }
    .k-tooltip-validation .k-callout { display: none; }
    input.k-invalid, textarea.k-invalid, .k-invalid.k-textbox,
    .input-validation-error { border-color: var(--kc-red) !important; }
    .field-validation-error, .validation-summary-errors, .text-danger { color: var(--kc-red); font-size: 12px; }
    .validation-summary-errors ul { padding-left: 16px; margin: 6px 0 0; }

    /* ---------- 6. Buttons ---------- */
    .btn {
        font-family: var(--kc-font);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: .1px;
        text-transform: none;
        border-radius: var(--kc-radius);
        border: 1px solid transparent;
        padding: 6px 14px;
        line-height: 20px;
        box-shadow: none !important;
        transition: background-color .12s ease, border-color .12s ease, color .12s ease;
    }
    .btn-sm, .btn-group-sm > .btn { padding: 5px 11px; font-size: 12.5px; line-height: 20px; border-radius: var(--kc-radius); }
    .btn-xs, .btn-group-xs > .btn { padding: 2px 8px; font-size: 12px; border-radius: var(--kc-radius-sm); }
    .btn-lg, .btn-group-lg > .btn { padding: 9px 18px; font-size: 14px; border-radius: var(--kc-radius); }
    .btn:focus, .btn:active:focus { outline: none; box-shadow: 0 0 0 3px var(--kc-focus) !important; }

    .btn-primary { background: var(--kc-navy-700) !important; border-color: var(--kc-navy-700) !important; color: #fff !important; }
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background: var(--kc-navy-800) !important; border-color: var(--kc-navy-800) !important; }
    .btn-info { background: var(--kc-navy-50) !important; border-color: #c7d3ea !important; color: var(--kc-navy-700) !important; }
    .btn-info:hover, .btn-info:focus, .btn-info:active { background: var(--kc-navy-100) !important; border-color: #aebfdf !important; color: var(--kc-navy-800) !important; }
    .btn-success { background: var(--kc-green) !important; border-color: var(--kc-green) !important; color: #fff !important; }
    .btn-success:hover, .btn-success:focus, .btn-success:active { background: #0c5530 !important; border-color: #0c5530 !important; }
    .btn-danger { background: var(--kc-surface) !important; border-color: #f1b8b2 !important; color: var(--kc-red) !important; }
    .btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: var(--kc-red) !important; border-color: var(--kc-red) !important; color: #fff !important; }
    /* In this application .btn-warning is used for Search / Generate / Calculate actions, so it is styled as the primary action */
    .btn-warning { background: var(--kc-navy-700) !important; border-color: var(--kc-navy-700) !important; color: #fff !important; }
    .btn-warning:hover, .btn-warning:focus, .btn-warning:active { background: var(--kc-navy-800) !important; border-color: var(--kc-navy-800) !important; color: #fff !important; }
    .btn-default { background: var(--kc-surface) !important; border-color: var(--kc-border-strong) !important; color: var(--kc-text) !important; }
    .btn-default:hover, .btn-default:focus, .btn-default:active { background: var(--kc-surface-2) !important; border-color: #9aa6b8 !important; }
    .btn-default .text-primary { color: inherit !important; }
    .btn-link { color: var(--kc-navy-600); font-weight: 600; }
    .btn.disabled, .btn[disabled] { opacity: .55; }

    .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; }
    .btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .btn-group-justified > .btn-info + .btn-info { border-left-color: #c7d3ea !important; }

    /* Kendo buttons */
    .k-button {
        font-family: var(--kc-font);
        font-weight: 600;
        font-size: 13px;
        text-transform: none;
        border-radius: var(--kc-radius) !important;
        border: 1px solid var(--kc-border-strong) !important;
        background: var(--kc-surface) !important;
        color: var(--kc-text) !important;
        box-shadow: none !important;
        padding: 6px 14px;
        line-height: 20px;
        transition: background-color .12s ease, border-color .12s ease;
    }
    .k-button:hover, .k-button.k-state-hover { background: var(--kc-surface-2) !important; border-color: #9aa6b8 !important; }
    .k-button:focus, .k-button.k-state-focused { box-shadow: 0 0 0 3px var(--kc-focus) !important; }
    .k-button.k-primary {
        background: var(--kc-navy-700) !important;
        border-color: var(--kc-navy-700) !important;
        color: #fff !important;
    }
    .k-button.k-primary:hover { background: var(--kc-navy-800) !important; border-color: var(--kc-navy-800) !important; }

    /* ---------- 7. Kendo Grid ---------- */
    .k-grid,
    .k-treelist {
        font-family: var(--kc-font);
        font-size: 12.5px;
        border: 1px solid var(--kc-border) !important;
        border-radius: var(--kc-radius-lg);
        overflow: hidden;
        background: var(--kc-surface);
        box-shadow: none;
    }
    .k-grid-toolbar {
        background: var(--kc-surface-2) !important;
        border-bottom: 1px solid var(--kc-border) !important;
        border-color: var(--kc-border) !important;
        padding: 8px 10px !important;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
    .k-grid-toolbar .k-button { margin: 0 !important; padding: 5px 12px; font-size: 12.5px; }
    .k-grid-toolbar .k-grid-add,
    .k-grid-toolbar .k-grid-save-changes {
        background: var(--kc-navy-700) !important;
        border-color: var(--kc-navy-700) !important;
        color: #fff !important;
    }
    .k-grid-toolbar .k-grid-add:hover,
    .k-grid-toolbar .k-grid-save-changes:hover { background: var(--kc-navy-800) !important; }
    /* Material sprite icons are white (designed for its dark toolbar); darken them on the light toolbar */
    .k-grid-toolbar .k-button .k-icon { filter: invert(1) brightness(.35); }
    .k-grid-toolbar .k-grid-add .k-icon,
    .k-grid-toolbar .k-grid-save-changes .k-icon { filter: brightness(0) invert(1); }

    .k-grouping-header {
        background: var(--kc-surface) !important;
        color: var(--kc-text-3) !important;
        border-bottom: 1px dashed var(--kc-border) !important;
        font-size: 12px;
        padding: 6px 10px !important;
    }
    .k-grouping-header .k-group-indicator {
        background: var(--kc-navy-50);
        border: 1px solid #c7d3ea !important;
        border-radius: 999px;
        color: var(--kc-navy-800);
    }
    .k-grouping-header .k-group-indicator .k-link,
    .k-grouping-header .k-group-indicator .k-button { color: var(--kc-navy-800) !important; }
    .k-grouping-header .k-group-indicator .k-icon { opacity: .7; }
    .k-pager-wrap .k-pager-sizes .k-widget.k-dropdown { width: 92px !important; }
    .k-grid-header,
    .k-grid-header-wrap,
    .k-grid .k-grid-header {
        background: #f1f4f9 !important;
        border-color: var(--kc-border) !important;
    }
    .k-grid-header .k-header,
    .k-grid .k-grid-header th.k-header {
        background: #f1f4f9 !important;
        color: var(--kc-navy-900) !important;
        font-weight: 600;
        font-size: 12px;
        text-transform: none;
        letter-spacing: .1px;
        border-color: var(--kc-border) !important;
        padding: 9px 10px !important;
        vertical-align: middle;
        white-space: normal;
        line-height: 1.3;
    }
    .k-grid-header .k-header > .k-link,
    .k-grid-header .k-header .k-link { color: var(--kc-navy-900) !important; }
    /* Kendo TreeList headers (no .k-grid-header wrapper) share the grid header look */
    .k-treelist th.k-header, .k-treelist .k-header { background: #f1f4f9 !important; color: var(--kc-navy-900) !important; font-weight: 600; font-size: 12px; border-color: var(--kc-border) !important; padding: 9px 10px !important; vertical-align: middle; white-space: normal; line-height: 1.3; }
    .k-treelist .k-header .k-link { color: var(--kc-navy-900) !important; }
    /* a few legacy pages force blue 16px header text through an #grid rule - keep headers on the shared look */
    body #grid .k-grid-header .k-header { color: var(--kc-navy-900) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important; text-transform: none !important; }
    /* Legacy report pages: .page-content.widget-wrap > section-header + plain bordered report table */
    .page-content.widget-wrap { padding: 6px 10px 16px; }
    .page-content.widget-wrap .section-header { margin: 8px 0 12px; }
    .page-content.widget-wrap .section-header h3 { position: relative; margin: 0; padding: 6px 0 6px 14px; font-size: 16px; font-weight: 600; color: var(--kc-navy-900); }
    .page-content.widget-wrap .section-header h3:before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--kc-gold); }
    table.printtableinner { border-collapse: collapse; border: 1px solid var(--kc-border) !important; font-size: 13px; }
    table.printtableinner > thead > tr > td, table.printtableinner > thead > tr > th { background: #f1f4f9; color: var(--kc-navy-900); font-weight: 600; padding: 8px 10px; }
    table.printtableinner td, table.printtableinner th { border: 1px solid var(--kc-border) !important; padding: 6px 10px; }
    .k-grid-header .k-header-column-menu,
    .k-grid-header .k-grid-filter { border-radius: var(--kc-radius-sm); }
    .k-grid-header .k-header-column-menu:hover,
    .k-grid-header .k-grid-filter:hover { background: var(--kc-navy-100) !important; }
    .k-grid-header .k-grid-filter.k-state-active { background: var(--kc-navy-600) !important; }
    .k-grid-header .k-grid-filter.k-state-active .k-icon { filter: brightness(0) invert(1); }
    .k-filter-row th { background: var(--kc-surface) !important; }

    .k-grid td,
    .k-treelist td {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
        padding-left: 10px;
        border-color: #edf0f5 !important;
        color: var(--kc-text);
        line-height: 1.4;
        vertical-align: middle;
    }
    .k-grid tbody tr { background: var(--kc-surface); }
    .k-grid tr.k-alt { background: #fafbfd !important; }
    .k-grid tbody tr:hover,
    .k-grid tbody tr.k-state-hover,
    .k-grid tr.k-alt:hover { background: var(--kc-navy-50) !important; }
    .k-grid tr.k-state-selected,
    .k-grid td.k-state-selected,
    .k-grid tr.k-state-selected:hover { background: #dce5f4 !important; color: var(--kc-navy-900) !important; }
    .k-grid td.k-state-focused { box-shadow: inset 0 0 0 1px var(--kc-navy-500) !important; }
    .k-grid .k-grouping-row td,
    .k-grid .k-group-cell { background: #f6f8fb !important; }
    .k-grid .k-grouping-row td { font-weight: 600; color: var(--kc-navy-800); }
    .k-grid .k-group-footer td,
    .k-grid .k-footer-template td,
    .k-grid-footer,
    .k-grid-footer td {
        background: var(--kc-gold-soft) !important;
        font-weight: 700;
        color: var(--kc-navy-900);
        border-color: #eadfbd !important;
        font-variant-numeric: tabular-nums;
    }
    .k-grid .k-detail-row > td { background: var(--kc-surface-2); }

    /* Row command buttons */
    .k-grid tbody .k-button {
        padding: 3px 9px !important;
        min-width: 0;
        font-size: 12px;
        line-height: 18px;
        margin: 1px 2px !important;
    }
    .k-grid tbody .k-grid-edit,
    .k-grid tbody .k-grid-update { color: var(--kc-navy-700) !important; border-color: #c7d3ea !important; background: var(--kc-navy-50) !important; }
    .k-grid tbody .k-grid-edit:hover,
    .k-grid tbody .k-grid-update:hover { background: var(--kc-navy-100) !important; }
    .k-grid tbody .k-grid-delete { color: var(--kc-red) !important; border-color: #f1b8b2 !important; background: var(--kc-surface) !important; }
    .k-grid tbody .k-grid-delete:hover { background: var(--kc-red-soft) !important; }

    /* Empty state */
    .k-grid-norecords { color: var(--kc-text-3); }
    .k-grid-norecords-template {
        border: 1px dashed var(--kc-border-strong) !important;
        border-radius: var(--kc-radius);
        background: var(--kc-surface-2) !important;
        color: var(--kc-text-3) !important;
        font-size: 12.5px;
    }

    .k-grid-norecords-template span[style*="color"] { color: var(--kc-text-3) !important; }
    .k-grid .k-grid-norecords td { text-align: center; }

    /* Pager */
    .k-pager-wrap,
    .k-grid-pager {
        background: var(--kc-surface) !important;
        border-color: var(--kc-border) !important;
        color: var(--kc-text-2) !important;
        font-size: 12px;
    }
    .k-grid-pager { border-top: 1px solid var(--kc-border) !important; padding: 6px 10px !important; }
    .k-pager-wrap .k-link,
    .k-pager-wrap .k-pager-numbers .k-state-selected {
        border-radius: var(--kc-radius) !important;
        border: 1px solid transparent !important;
        color: var(--kc-text-2) !important;
    }
    .k-pager-wrap .k-link:hover { background: var(--kc-navy-50) !important; border-color: var(--kc-border) !important; }
    .k-pager-wrap .k-pager-numbers .k-state-selected {
        background: var(--kc-navy-700) !important;
        border-color: var(--kc-navy-700) !important;
        color: #fff !important;
    }
    .k-pager-wrap .k-pager-info { color: var(--kc-text-3); }

    /* Popup editor & Kendo windows */
    .k-window {
        border: 1px solid var(--kc-border) !important;
        border-radius: var(--kc-radius-lg) !important;
        box-shadow: 0 20px 48px rgba(16, 24, 40, .22) !important;
        font-family: var(--kc-font);
    }
    .k-window-titlebar,
    .k-window-titlebar.k-header {
        background: var(--kc-navy-800) !important;
        color: #fff !important;
        border-radius: var(--kc-radius-lg) var(--kc-radius-lg) 0 0;
    }
    .k-window-titlebar .k-window-title { font-weight: 600; color: #fff; }
    .k-window-titlebar .k-window-action .k-icon { filter: brightness(0) invert(1); opacity: .85; }
    .k-window-content { color: var(--kc-text); }
    .k-edit-form-container .k-edit-label label { font-size: 12px; }
    .k-edit-buttons.k-state-default,
    .k-edit-form-container .k-edit-buttons {
        background: var(--kc-surface-2) !important;
        border-top: 1px solid var(--kc-border) !important;
    }
    .k-edit-buttons .k-grid-update { background: var(--kc-navy-700) !important; border-color: var(--kc-navy-700) !important; color: #fff !important; }
    .k-edit-buttons .k-grid-update .k-icon { filter: brightness(0) invert(1); }
    .k-overlay { background-color: #0f1d36 !important; }

    /* Kendo TabStrip / PanelBar */
    .k-tabstrip > .k-tabstrip-items { border-bottom: 1px solid var(--kc-border) !important; background: transparent !important; }
    .k-tabstrip-items .k-item { background: transparent !important; border-color: transparent !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; }
    .k-tabstrip-items .k-item .k-link { color: var(--kc-text-2) !important; font-weight: 600; text-transform: none; }
    .k-tabstrip-items .k-item.k-state-active { border-bottom-color: var(--kc-navy-600) !important; }
    .k-tabstrip-items .k-item.k-state-active .k-link { color: var(--kc-navy-800) !important; }
    .k-panelbar > .k-item > .k-link.k-header { background: var(--kc-surface-2) !important; color: var(--kc-navy-900) !important; font-weight: 600; }

    /* Kendo TreeView (Chart of Accounts tree, Member documents) */
    .k-treeview { font-family: var(--kc-font); font-size: 13px; }
    .k-treeview .k-in { padding: 3px 8px; border-radius: var(--kc-radius-sm); border: 0; line-height: 1.5; }
    .k-treeview .k-in.k-state-hover { background: var(--kc-navy-50) !important; color: var(--kc-navy-900) !important; }
    .k-treeview .k-in.k-state-selected { background: var(--kc-navy-600) !important; color: #fff !important; box-shadow: none; }
    .k-treeview .k-in.k-state-focused { box-shadow: 0 0 0 2px var(--kc-focus); }

    /* Kendo Upload */
    .k-upload { background: var(--kc-surface); }
    .k-upload .k-upload-button { padding: 5px 12px; }
    .k-upload-files { border-top: 1px solid var(--kc-border) !important; }
    .k-upload-files .k-file { border-color: var(--kc-border) !important; font-size: 12.5px; }

    /* DataTables (a few attendance / consumption reports) */
    .dataTables_wrapper { font-family: var(--kc-font); font-size: 12.5px; color: var(--kc-text); }
    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        height: 30px; padding: 3px 8px; border: 1px solid var(--kc-border-strong); border-radius: var(--kc-radius); background: var(--kc-surface); margin-left: 6px;
    }
    .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--kc-navy-500); box-shadow: 0 0 0 3px var(--kc-focus); outline: none; }
    .dataTables_wrapper .dataTables_info { color: var(--kc-text-3); padding-top: 10px; }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border: 1px solid transparent !important; border-radius: var(--kc-radius) !important; background: transparent !important; color: var(--kc-text-2) !important; padding: 4px 10px; margin: 0 1px;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--kc-navy-50) !important; border-color: var(--kc-border) !important; color: var(--kc-navy-900) !important; }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--kc-navy-700) !important; border-color: var(--kc-navy-700) !important; color: #fff !important; }
    table.dataTable thead th, table.dataTable thead td { background: #f1f4f9; color: var(--kc-navy-900); font-weight: 600; border-bottom: 1px solid var(--kc-border) !important; }
    table.dataTable tbody tr:hover { background: var(--kc-navy-50); }
    table.dataTable.no-footer { border-bottom: 1px solid var(--kc-border); }

    .k-notification {
        border-radius: var(--kc-radius-lg) !important;
        box-shadow: var(--kc-shadow-lg) !important;
        font-family: var(--kc-font);
        font-size: 13px;
    }

    /* ---------- 8. Tables, badges, tabs, modals, alerts ---------- */
    .table { font-size: 12.5px; color: var(--kc-text); }
    .table > thead > tr > th {
        background: #f1f4f9;
        color: var(--kc-navy-900);
        font-weight: 600;
        border-bottom: 1px solid var(--kc-border) !important;
        vertical-align: middle;
        font-size: 12px;
    }
    .table > tbody > tr > td, .table > tfoot > tr > td, .table > tbody > tr > th { border-top-color: #edf0f5; vertical-align: middle; }
    .table > tfoot > tr > td, .table > tfoot > tr > th { background: var(--kc-gold-soft); font-weight: 700; }
    .table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border-color: var(--kc-border) !important; }
    .table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfd; }
    .table-hover > tbody > tr:hover { background: var(--kc-navy-50); }

    .label, .badge {
        font-weight: 600;
        font-size: 11px;
        letter-spacing: .2px;
        border-radius: 999px;
        padding: 3px 9px;
        line-height: 1.3;
    }
    .label-default { background: #eef1f5; color: var(--kc-text-2); }
    .label-primary { background: var(--kc-navy-100); color: var(--kc-navy-800); }
    .label-success { background: var(--kc-green-soft); color: var(--kc-green); }
    .label-info { background: var(--kc-teal-soft); color: var(--kc-teal); }
    .label-warning { background: var(--kc-amber-soft); color: var(--kc-amber); }
    .label-danger { background: var(--kc-red-soft); color: var(--kc-red); }
    .badge { background: var(--kc-navy-700); color: #fff; }

    /* Reusable status badge helper (opt-in) */
    .kc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #eef1f5; color: var(--kc-text-2); }
    .kc-badge:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .kc-badge--success { background: var(--kc-green-soft); color: var(--kc-green); }
    .kc-badge--warning { background: var(--kc-amber-soft); color: var(--kc-amber); }
    .kc-badge--danger { background: var(--kc-red-soft); color: var(--kc-red); }
    .kc-badge--info { background: var(--kc-navy-100); color: var(--kc-navy-700); }

    /* Bootstrap tabs inside content (not the sidebar) */
    .main-container .nav-tabs { border-bottom: 1px solid var(--kc-border); }
    .main-container .nav-tabs > li > a { border: 0 !important; border-bottom: 2px solid transparent !important; color: var(--kc-text-2); font-weight: 600; border-radius: 0; margin-right: 4px; background: transparent !important; }
    .main-container .nav-tabs > li > a:hover { color: var(--kc-navy-700); background: var(--kc-navy-50) !important; }
    .main-container .nav-tabs > li.active > a,
    .main-container .nav-tabs > li.active > a:hover,
    .main-container .nav-tabs > li.active > a:focus { color: var(--kc-navy-800); border-bottom-color: var(--kc-navy-600) !important; background: transparent !important; }
    .main-container .nav-pills > li > a { border-radius: var(--kc-radius); font-weight: 600; }
    .main-container .nav-pills > li.active > a { background: var(--kc-navy-700); }

    /* Bootstrap modal */
    .modal-backdrop.in { opacity: .45; background: var(--kc-navy-900); }
    .modal-content { border: 0; border-radius: var(--kc-radius-lg); box-shadow: 0 24px 56px rgba(16, 24, 40, .25); overflow: hidden; }
    .modal-header { background: var(--kc-surface); border-bottom: 1px solid var(--kc-border); padding: 14px 18px; }
    .modal-header .modal-title { font-size: 16px; font-weight: 600; color: var(--kc-navy-900); }
    .modal-body { padding: 18px; }
    .modal-footer { background: var(--kc-surface-2); border-top: 1px solid var(--kc-border); padding: 12px 18px; }

    /* Alerts */
    .alert { border-radius: var(--kc-radius); font-size: 13px; }
    .alert-success { background: var(--kc-green-soft); border-color: #b7dcc5; color: #0c4f2c; }
    .alert-info { background: var(--kc-navy-50); border-color: #c7d3ea; color: var(--kc-navy-800); }
    .alert-warning { background: var(--kc-amber-soft); border-color: #f6cf9c; color: #7a3306; }
    .alert-danger { background: var(--kc-red-soft); border-color: #f1b8b2; color: #7a1a12; }

    /* SweetAlert / bootbox / noty */
    .sweet-alert { border-radius: var(--kc-radius-lg) !important; font-family: var(--kc-font) !important; }
    .sweet-alert h2 { color: var(--kc-navy-900) !important; font-weight: 600 !important; }
    .sweet-alert button { border-radius: var(--kc-radius) !important; font-weight: 600 !important; box-shadow: none !important; }
    .sweet-alert button.confirm { background-color: var(--kc-navy-700) !important; }
    .noty_bar { border-radius: var(--kc-radius) !important; font-family: var(--kc-font) !important; }

    /* Dropdown menus */
    .dropdown-menu { border: 1px solid var(--kc-border); border-radius: var(--kc-radius); box-shadow: var(--kc-shadow-lg); font-size: 13px; }
    .dropdown-menu > li > a { color: var(--kc-text); }
    .dropdown-menu > li > a:hover { background: var(--kc-navy-50); color: var(--kc-navy-900); }

    .k-upload { border-radius: var(--kc-radius) !important; border-color: var(--kc-border-strong) !important; }

    /* Empty-state helper (opt-in) */
    .kc-empty { text-align: center; padding: 32px 16px; color: var(--kc-text-3); border: 1px dashed var(--kc-border-strong); border-radius: var(--kc-radius-lg); background: var(--kc-surface-2); }

    /* ---------- 9. Dashboard helpers ---------- */
    .kc-dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
    .kc-col-3 { grid-column: span 3; }
    .kc-col-4 { grid-column: span 4; }
    .kc-col-5 { grid-column: span 5; }
    .kc-col-6 { grid-column: span 6; }
    .kc-col-7 { grid-column: span 7; }
    .kc-col-8 { grid-column: span 8; }
    .kc-col-12 { grid-column: span 12; }
    .kc-card {
        background: var(--kc-surface);
        border: 1px solid var(--kc-border);
        border-radius: var(--kc-radius-lg);
        box-shadow: var(--kc-shadow-sm);
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .kc-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--kc-border); }
    .kc-card-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--kc-navy-900); }
    .kc-card-sub { font-size: 12px; color: var(--kc-text-3); }
    .kc-card-body { padding: 14px 16px; flex: 1 1 auto; min-width: 0; }
    .kc-metric { display: flex; align-items: center; gap: 14px; }
    .kc-metric img { width: 64px; height: 64px; object-fit: contain; }
    .kc-metric-value { font-size: 20px; font-weight: 700; color: var(--kc-navy-900); line-height: 1.1; font-variant-numeric: tabular-nums; }
    .kc-metric-label { font-size: 12px; color: var(--kc-text-3); }
    .kc-note { font-size: 11.5px; color: var(--kc-text-3); }
    .kc-dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
    .kc-dash-title { margin: 0 0 2px; font-size: 22px; font-weight: 700; color: var(--kc-navy-900); }
    .kc-dash-head .kc-card-sub { margin: 0; }
    .kc-attendance { display: flex; flex-direction: column; gap: 18px; padding: 6px 0; background: transparent !important; }
    .kc-attendance .kc-metric-value { font-size: 15px; font-weight: 600; }
    .kc-card .canvasjs-chart-credit { opacity: .5; }

    /* Landing dashboards (Views/Dashboard/*: Index, HR, Operation).
       These views embed the Material Dashboard kit; rules are scoped to #layoutSidenav
       and use !important only to win over that kit and inline colours. */
    #layoutSidenav main > .container-fluid { padding: 0; }
    #layoutSidenav .panel[style*="background-color"] {
        background: var(--kc-navy-800) !important;
        border: 0;
        border-radius: var(--kc-radius-lg);
        box-shadow: none;
        overflow: hidden;
        position: relative;
    }
    #layoutSidenav .panel[style*="background-color"] .panel-body { display: flex; align-items: center; flex-wrap: wrap; padding: 18px 22px; }
    #layoutSidenav .panel[style*="background-color"] h3 { color: #fff !important; font-size: 20px; font-weight: 600 !important; margin: 0 0 4px; }
    #layoutSidenav .panel[style*="background-color"] p { color: #c5cfe0 !important; margin: 0; }
    #layoutSidenav .panel[style*="background-color"] p .fas { color: var(--kc-gold) !important; }
    #layoutSidenav .panel[style*="background-color"] img {
        width: 56px !important; height: 52px !important; padding: 0 !important;
        object-fit: cover; object-position: left center;
        background: #fff; border-radius: var(--kc-radius); padding: 4px !important; box-sizing: content-box;
    }
    #layoutSidenav .panel:not([style]) { background: var(--kc-surface); border: 1px solid var(--kc-border); border-radius: var(--kc-radius-lg); box-shadow: var(--kc-shadow-sm); }
    #layoutSidenav label[style] { color: var(--kc-text-2) !important; font-weight: 600 !important; }
    #layoutSidenav #search { background: var(--kc-navy-700) !important; border-color: var(--kc-navy-700) !important; color: #fff !important; }
    #layoutSidenav #search:hover { background: var(--kc-navy-800) !important; }
    #layoutSidenav .card {
        background: var(--kc-surface);
        border: 1px solid var(--kc-border);
        border-radius: var(--kc-radius-lg);
        box-shadow: var(--kc-shadow-sm);
        font-family: var(--kc-font);
    }
    #layoutSidenav .card .card-title[style], #layoutSidenav .card h1.card-title { color: var(--kc-navy-900) !important; font-weight: 600; }
    #layoutSidenav .upcoming-events h6[style] { color: var(--kc-text-3) !important; font-size: 12px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
    #layoutSidenav .upcoming-events h4 { color: var(--kc-navy-900) !important; font-size: 20px !important; font-weight: 700; font-variant-numeric: tabular-nums; }
    #layoutSidenav .upcoming-events .fa-5x { color: var(--kc-navy-600); font-size: 3.2em; }
    #layoutSidenav .table-responsive tr[style] { background: #f1f4f9 !important; color: var(--kc-navy-900) !important; font-size: 12.5px !important; }
    #layoutSidenav .table-responsive th, #layoutSidenav .table-responsive td { padding: 8px 10px; border-bottom: 1px solid #edf0f5; }
    #layoutSidenav .card-stats .card-header { background: transparent; padding: 16px 16px 8px; }
    #layoutSidenav .card-stats .card-header .card-icon {
        border-radius: var(--kc-radius) !important;
        box-shadow: none !important;
        padding: 12px !important;
        margin-top: -26px !important;
    }
    #layoutSidenav .card-header-warning .card-icon { background: var(--kc-gold) !important; }
    #layoutSidenav .card-header-success .card-icon { background: var(--kc-green) !important; }
    #layoutSidenav .card-header-danger .card-icon { background: var(--kc-navy-600) !important; }
    #layoutSidenav .card-header-info .card-icon { background: var(--kc-teal) !important; }
    #layoutSidenav .card-header-primary .card-icon, #layoutSidenav .card-header-rose .card-icon { background: var(--kc-navy-800) !important; }
    #layoutSidenav .card-stats .card-category[style] { color: var(--kc-text-3) !important; font-weight: 600 !important; font-size: 12px; margin: 0; }
    #layoutSidenav .card-stats .card-title[style] { color: var(--kc-navy-900) !important; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
    #layoutSidenav .card-footer { border-top: 1px solid var(--kc-border); margin: 0 16px; padding: 10px 0; }
    #layoutSidenav .card-footer a[style], #layoutSidenav .card-footer a .material-icons[style] { color: var(--kc-navy-600) !important; font-weight: 600; font-size: 12.5px; }
    #layoutSidenav .card-footer .material-icons { font-size: 16px; vertical-align: -3px; }
    #layoutSidenav .panel img[src*="topbarlogo"] { max-height: 132px; width: auto; padding-top: 0 !important; }
    #layoutSidenav .panel h3[style*="139c9b"] { color: var(--kc-text-3) !important; font-size: 14px; font-weight: 600; }
    #layoutSidenav .panel h1[style*="139c9b"] { color: var(--kc-navy-800) !important; font-weight: 700; }
    #layoutSidenav .panel h3[style*="color:black"] { color: var(--kc-navy-900) !important; }
    #layoutSidenav .card-counter {
        border-radius: var(--kc-radius-lg) !important;
        box-shadow: var(--kc-shadow-sm) !important;
        background-image: none !important;
    }
    #layoutSidenav .card-counter.warning { background-color: var(--kc-gold) !important; }
    #layoutSidenav .card-counter.danger { background-color: var(--kc-navy-600) !important; }
    #layoutSidenav .card-counter.success { background-color: var(--kc-green) !important; }
    #layoutSidenav .card-counter.info { background-color: var(--kc-teal) !important; }
    #layoutSidenav .card-counter.primary { background-color: var(--kc-navy-800) !important; }
    #layoutSidenav .panel.text-white[style*="linear-gradient"] { background: var(--kc-navy-800) !important; border: 0; border-radius: var(--kc-radius-lg); }
    #layoutSidenav .panel.text-white h1[style*="e53632"] { color: #e9cf83 !important; }
    #layoutSidenav .panel.text-white p { color: #e6ecf6; font-size: 14px !important; font-weight: 600 !important; }
    #layoutSidenav .panel.text-white .panel-body { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 8px; }
    #layoutSidenav .panel.text-white .panel-body > [class*="col-"] { float: none; width: auto; flex: 1 1 140px; padding-top: 6px !important; }
    #layoutSidenav .panel.text-white .panel-body > [class*="col-"]:first-child:has(img[src*="Pie"]) { display: none; }
    #layoutSidenav ~ footer, #layoutSidenav + footer { background: transparent !important; }
    #layoutSidenav ~ footer .text-muted[style] { color: var(--kc-text-3) !important; font-weight: 500 !important; font-size: 12px; }

    /* ---------- 9b. ERP Command Center (Dashboard/Index) and Analytics (Home/Index) ---------- */
    .kc-cc { max-width: 1480px; margin: 0 auto; }
    .kc-pagebar:has(+ .kc-cc),
    .kc-pagebar:has(+ .kc-an) { display: none; }
    .kc-cc-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 18px;
        padding: 20px 24px;
        border-radius: var(--kc-radius-lg);
        background: var(--kc-navy-800);
        color: #fff;
    }
    .kc-cc-kicker { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: #e9cf83; }
    .kc-cc-title { margin: 0; font-size: 24px; font-weight: 700; color: #fff; word-break: break-all; line-height: 1.25; }
    .kc-cc-sub { margin: 4px 0 0; font-size: 13px; color: #c5cfe0; }
    .kc-cc-dot { display: inline-block; width: 4px; height: 4px; margin: 0 10px; border-radius: 50%; background: #8d9bb5; vertical-align: middle; }
    .kc-cc-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .kc-cc-hero-actions .btn-primary { background: #fff !important; border-color: #fff !important; color: var(--kc-navy-800) !important; }
    .kc-cc-hero-actions .btn-primary:hover { background: var(--kc-navy-100) !important; border-color: var(--kc-navy-100) !important; }
    .kc-cc-hero-actions .btn-default { background: transparent !important; border-color: rgba(255, 255, 255, .38) !important; color: #fff !important; }
    .kc-cc-hero-actions .btn-default:hover { background: rgba(255, 255, 255, .10) !important; }
    .kc-cc-section { margin-bottom: 20px; }
    .kc-cc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
    .kc-cc-section-head h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--kc-navy-900); }
    .kc-cc-hint { font-size: 12px; color: var(--kc-text-3); }

    .kc-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .kc-kpi {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 42px 14px 14px;
        background: var(--kc-surface);
        border: 1px solid var(--kc-border);
        border-radius: var(--kc-radius-lg);
        box-shadow: var(--kc-shadow-sm);
        min-width: 0;
    }
    .kc-kpi-ico { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: #fff; font-size: 17px; }
    .kc-ico-gold { background: var(--kc-gold); }
    .kc-ico-green { background: var(--kc-green); }
    .kc-ico-navy { background: var(--kc-navy-600); }
    .kc-ico-teal { background: var(--kc-teal); }
    .kc-kpi-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
    .kc-kpi-label { font-size: 11.5px; font-weight: 600; color: var(--kc-text-3); }
    .kc-kpi-value { font-size: 20px; font-weight: 700; color: var(--kc-navy-900); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .kc-kpi-sub { font-size: 11.5px; color: var(--kc-text-3); }
    .kc-kpi-sub b { color: var(--kc-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
    .kc-kpi-link {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        color: var(--kc-text-3);
        font-size: 18px;
    }
    .kc-kpi-link:hover { background: var(--kc-navy-50); color: var(--kc-navy-700); text-decoration: none; }

    .kc-cc-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
    .kc-cc-field { width: 200px; max-width: 100%; }
    .kc-cc-field label { display: block; }
    .kc-cc-field-btn { width: auto; }
    .kc-sum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
    .kc-sum { padding: 12px 14px; border: 1px solid var(--kc-border); border-radius: var(--kc-radius); background: var(--kc-surface-2); }
    .kc-sum span { display: block; font-size: 12px; font-weight: 600; color: var(--kc-text-3); }
    .kc-sum strong { font-size: 20px; font-weight: 700; color: var(--kc-navy-900); font-variant-numeric: tabular-nums; }
    .kc-sum-net { background: var(--kc-gold-soft); border-color: #eadfbd; }
    .kc-sum-table { margin-bottom: 0; }
    .kc-sum-table td { font-variant-numeric: tabular-nums; }
    .kc-sum-table td:not(:first-child) { text-align: right; }
    .kc-sum-table td * { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }

    .kc-cc-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
    .kc-cc-side { display: flex; flex-direction: column; gap: 16px; }
    .kc-cc-more { font-size: 12.5px; font-weight: 600; }
    .kc-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px 24px; }
    .kc-quick-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--kc-navy-700); }
    .kc-quick-group h4 i { color: var(--kc-gold); width: 16px; text-align: center; }
    .kc-quick-group a { display: flex; align-items: center; gap: 8px; margin: 0 -8px; padding: 5px 8px; border-radius: var(--kc-radius-sm); font-size: 13px; font-weight: 500; color: var(--kc-text); }
    .kc-quick-group a i { color: var(--kc-text-3); }
    .kc-quick-group a:hover { background: var(--kc-navy-50); color: var(--kc-navy-900); text-decoration: none; }
    .kc-list { list-style: none; margin: 0; padding: 0; }
    .kc-list li a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #edf0f5; font-size: 13px; font-weight: 500; color: var(--kc-text); }
    .kc-list li:last-child a { border-bottom: 0; }
    .kc-list li a:hover { color: var(--kc-navy-700); text-decoration: none; }
    .kc-list small { color: var(--kc-text-3); font-size: 11.5px; white-space: nowrap; }
    .kc-list-empty, .kc-cc-empty { padding: 6px 0; font-size: 12.5px; color: var(--kc-text-3); }
    /* department dashboards on the Command Center */
    .kc-dtabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: #e9edf4; border-radius: 8px; }
    .kc-dtab { border: 0; background: transparent; padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--kc-text-2); cursor: pointer; }
    .kc-dtab:hover { color: var(--kc-navy-800); }
    .kc-dtab.kc-dactive { background: #fff; color: var(--kc-navy-800); box-shadow: 0 1px 2px rgba(15,29,54,.12); }
    /* department dashboard widgets */
    .kc-kpi-grid.kc-kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    a.kc-kpi-count { text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s; }
    a.kc-kpi-count:hover { text-decoration: none; border-color: var(--kc-navy-700); box-shadow: 0 2px 8px rgba(15,29,54,.12); }
    .kc-chip { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--kc-navy-100); color: var(--kc-navy-700); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
    .kc-dcols .kc-list li a small { margin-left: auto; }
    .kc-chart { height: 280px; }
    .kc-chart-card .kc-card-header { display: flex; align-items: center; justify-content: space-between; }
    .kc-chart-card .kc-card-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--kc-navy-900); }
    .kc-dpanel { display: none; }
    .kc-dpanel.kc-dactive { display: block; }
    .kc-kpi-grid.kc-kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
    .kc-dcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .kc-dcols .kc-list { padding: 4px 16px 10px; }
    .kc-dcols .kc-card-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--kc-navy-900); }
    .kc-dpanel > .kc-cc-empty { margin: 0 0 12px; }
    .kc-powered { margin: 28px 0 8px; padding-top: 12px; border-top: 1px solid var(--kc-border); text-align: center; font-size: 12px; color: var(--kc-text-3); }
    .kc-powered a { color: var(--kc-navy-700); font-weight: 600; }
    .kc-cc-foot { margin: 24px 0 0; text-align: center; font-size: 12px; color: var(--kc-text-3); }

    @media (max-width: 1199px) {
        .kc-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .kc-cc-cols, .kc-dcols { grid-template-columns: minmax(0, 1fr); }
        .kc-kpi-grid.kc-kpi-grid-3, .kc-kpi-grid.kc-kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 575px) {
        .kc-kpi-grid, .kc-sum-grid, .kc-kpi-grid.kc-kpi-grid-3, .kc-kpi-grid.kc-kpi-grid-4 { grid-template-columns: minmax(0, 1fr); }
        .kc-cc-hero { padding: 16px; }
        .kc-cc-title { font-size: 20px; }
        .kc-cc-field { width: 100%; }
    }


    /* Management analytics (Home/Index) */
    .kc-an { max-width: 1480px; margin: 0 auto; }
    .kc-an-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
    .kc-an-title { margin: 0 0 2px; font-size: 22px; font-weight: 700; color: var(--kc-navy-900); }
    .kc-an-sub { margin: 0; font-size: 12.5px; color: var(--kc-text-3); }
    .kc-an-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .kc-an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .kc-an-wide { grid-column: 1 / -1; }
    .kc-chart { width: 100%; height: 320px; }
    .kc-chart-sm { height: 260px; }
    .kc-chart-empty { margin: 0; padding: 36px 12px; text-align: center; font-size: 13px; color: var(--kc-text-3); border: 1px dashed var(--kc-border-strong); border-radius: var(--kc-radius); background: var(--kc-surface-2); }
    .kc-chart-empty[hidden] { display: none; }
    .kc-an .kc-empty { max-width: 560px; margin: 40px auto; padding: 36px 24px; }
    .kc-an .kc-empty i { font-size: 28px; display: block; margin-bottom: 10px; color: #a5afbf; }
    .kc-an .kc-empty p { margin: 0 0 8px; }
    @media (max-width: 991px) { .kc-an-grid { grid-template-columns: minmax(0, 1fr); } .kc-chart { height: 260px; } }

    .kc-sum-table td[style] { color: var(--kc-text) !important; font-size: 13px !important; font-weight: 600 !important; }
    /* ---------- 10. Reports ---------- */
    .kc-filter-panel {
        background: var(--kc-surface-2);
        border: 1px solid var(--kc-border);
        border-radius: var(--kc-radius);
        padding: 12px 14px 2px;
        margin-bottom: 14px;
    }
    td.text-right, th.text-right, .text-right { font-variant-numeric: tabular-nums; }
    .kc-report-title { font-size: 18px; font-weight: 700; color: var(--kc-navy-900); margin: 0 0 4px; }
    .kc-report-sub { font-size: 12.5px; color: var(--kc-text-3); margin: 0 0 12px; }

    /* ---------- 11. Auth pages ---------- */
    body.login-page {
        background: var(--kc-bg) !important;
        background-image: radial-gradient(1200px 500px at 50% -10%, rgba(27, 52, 97, .10), transparent 70%) !important;
        min-height: 100vh;
        padding-top: 0;
    }
    body.login-page .login-container { padding-top: 7vh; padding-bottom: 32px; }
    body.login-page .login-form-container {
        background: var(--kc-surface) !important;
        border: 1px solid var(--kc-border);
        border-radius: 14px;
        box-shadow: 0 12px 40px rgba(16, 24, 40, .10);
        padding: 0 !important;
        overflow: hidden;
        max-width: 400px;
        margin: 0 auto;
    }
    body.login-page .login-form-header {
        background: var(--kc-surface) !important;
        border-bottom: 1px solid var(--kc-border);
        padding: 26px 24px 18px !important;
        text-align: center;
        position: relative;
    }
    /* logo_186x50.png carries the crest on its left; crop to the crest */
    body.login-page .login-form-header .logo img { width: 72px !important; height: 64px !important; object-fit: cover; object-position: left center; display: inline-block; }
    body.login-page .login-form-header .logo:after {
        content: "Mekotex MIS";
        display: block;
        margin-top: 10px;
        font-size: 18px;
        font-weight: 700;
        color: var(--kc-navy-900);
    }
    body.login-page .login-form-header .logo + * { margin: 0; }
    body.login-page .login-form-content { padding: 18px 24px 6px !important; }
    body.login-page .divider-text { margin: 0 0 18px !important; text-align: center; border: 0; }
    body.login-page .divider-text:before, body.login-page .divider-text:after { display: none !important; }
    body.login-page .divider-text span {
        background: transparent !important;
        padding: 0 !important;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--kc-text-3);
    }
    body.login-page .j-forms .unit { padding-left: 0 !important; margin-bottom: 14px; }
    body.login-page .login-input { position: relative; }
    body.login-page .login-input .icon-left {
        position: absolute;
        left: 0;
        z-index: 2;
        margin: 0;
        text-align: center;
        top: 0 !important;
        height: 40px;
        line-height: 40px !important;
        width: 38px;
        color: var(--kc-text-3) !important;
        border: 0 !important;
        font-size: 17px;
    }
    body.login-page .j-forms .input input.login-frm-input,
    body.login-page .login-frm-input {
        height: 40px !important;
        padding-left: 38px !important;
        border-radius: var(--kc-radius) !important;
        border: 1px solid var(--kc-border-strong) !important;
        background: var(--kc-surface) !important;
        font-size: 13.5px;
    }
    body.login-page .login-frm-input:focus { border-color: var(--kc-navy-500) !important; box-shadow: 0 0 0 3px var(--kc-focus) !important; }
    body.login-page .j-forms .hint { display: block; text-align: right; margin-top: 6px; font-size: 12px; }
    body.login-page .j-forms .hint a { color: var(--kc-navy-600); font-weight: 600; }
    body.login-page .login-form-footer { padding: 6px 24px 24px !important; background: var(--kc-surface) !important; border: 0 !important; }
    body.login-page .login-form-footer .btn-block { height: 42px; font-size: 14px; }
    body.login-page .login-page-footer { position: static !important; margin-top: 18px; background: transparent !important; }
    body.login-page .login-page-footer .footer-content { text-align: center; color: var(--kc-text-3); font-size: 12px; background: transparent !important; }
    body.login-page .login-page-footer a { color: var(--kc-navy-600); font-weight: 600; }

    /* ---------- 12. Responsive ---------- */
    /* shell on phones and small tablets */
    @media (max-width: 767px) {
        .topbar .topbar-left > .clearfix { flex-wrap: nowrap; }
        .kc-search-trigger { display: none; }
        .kc-launch-btn { width: 36px; padding: 0; justify-content: center; }
        .kc-launch-btn span { display: none; }
        .kc-mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .kc-mod-txt b { white-space: normal; }
        .kc-launcher { left: 8px; width: calc(100vw - 16px); }
    }
    @media (max-width: 991px) {
        .kc-search-trigger { min-width: 0; }
        .kc-search-trigger kbd { display: none; }
    }

    @media (max-width: 1199px) {
        .kc-col-3, .kc-col-4, .kc-col-5, .kc-col-7 { grid-column: span 6; }
        .kc-col-8 { grid-column: span 12; }
    }
    @media (max-width: 991px) {
        .main-container { padding: 14px 12px 20px; }
        .widget-wrap { padding: 0 14px 14px; }
        .widget-wrap > .widget-header, .widget-wrap1 > .widget-header1 { margin: 0 -14px 14px !important; }
        .widget-wrap .widget-content hr { margin-left: -14px; margin-right: -14px; }
        .k-grid { overflow-x: auto; }
        [class*="col-md-"] > .btn-group-justified { margin-bottom: 8px; }
    }
    @media (max-width: 767px) {
        .kc-brand-text { display: none; }
        .kc-pagebar { flex-direction: column; align-items: flex-start; gap: 2px; }
        .kc-dash-grid { grid-template-columns: minmax(0, 1fr); }
        .kc-dash-grid > [class*="kc-col-"] { grid-column: auto; }
        .widget-wrap > .widget-header { padding: 11px 14px !important; }
        .widget-wrap .widget-header h3 { font-size: 15px; }
        .k-pager-wrap .k-pager-info { display: none; }
        .k-window { max-width: calc(100vw - 16px); }
        body.login-page .login-container .col-md-4 { width: 100%; margin-left: 0; }
        /* legacy inline widths wider than their column (e.g. width:200%) must not push the page sideways */
        .main-container [style*="width: 200%"], .main-container [style*="width:200%"] { max-width: 100% !important; }
        /* fixed pixel widths from legacy markup must not exceed a phone viewport */
        .main-container [style*="width: 300px"], .main-container [style*="width:300px"],
        .main-container [style*="width: 350px"], .main-container [style*="width:350px"],
        .main-container [style*="width: 400px"], .main-container [style*="width:400px"],
        .main-container [style*="width: 450px"], .main-container [style*="width:450px"],
        .main-container [style*="width: 500px"], .main-container [style*="width:500px"],
        .main-container [style*="width: 600px"], .main-container [style*="width:600px"],
        .main-container [style*="width: 700px"], .main-container [style*="width:700px"],
        .main-container [style*="width: 800px"], .main-container [style*="width:800px"] { max-width: 100% !important; }
        .main-container .fileinput, .main-container .fileinput .thumbnail { max-width: 100% !important; box-sizing: border-box; }
        .main-container .fileinput .thumbnail img { max-width: 100%; height: auto; }
    }
}

/* ---------- Library module ---------- */
.kc-lib-borrower { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; justify-content: space-between; padding: 12px 14px; background: var(--kc-surface-2); border: 1px solid var(--kc-border); border-radius: var(--kc-radius); }
.kc-lib-borrower-main { min-width: 240px; flex: 1 1 260px; }
.kc-lib-borrower-stats { display: flex; gap: 14px; flex-wrap: wrap; color: var(--kc-text-2); font-size: 12.5px; }
.kc-lib-borrower-stats b { color: var(--kc-navy-700); font-size: 15px; margin-left: 2px; }
.kc-lib-sub { color: var(--kc-text-3); font-size: 12.5px; margin-top: 2px; }
.kc-lib-reasons { flex-basis: 100%; margin: 6px 0 0; padding: 8px 12px 8px 28px; background: var(--kc-red-soft); border: 1px solid #f3c1bc; border-radius: var(--kc-radius-sm); color: var(--kc-red); font-size: 13px; }
.kc-lib-picklist { max-height: 280px; overflow: auto; margin-top: 8px; border: 1px solid var(--kc-border); border-radius: var(--kc-radius); }
.kc-lib-picklist a { display: block; padding: 8px 12px; }
.kc-lib-lbl { display: block; font-weight: 600; color: var(--kc-text-2); font-size: 12.5px; margin: 8px 0 4px; }
.kc-lib-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; }
.kc-lib-form .wide { grid-column: 1 / -1; }
.kc-lib-form input.form-control, .kc-lib-form select.form-control, .kc-lib-form textarea.form-control { width: 100%; }
.kc-lib-scan { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kc-lib-scan input { flex: 1 1 260px; font-size: 16px; height: 40px; }
.kc-lib-cart { width: 100%; border-collapse: collapse; margin-top: 10px; }
.kc-lib-cart th, .kc-lib-cart td { padding: 6px 8px; border-bottom: 1px solid var(--kc-border); text-align: left; font-size: 13px; }
.kc-lib-cart th { color: var(--kc-text-3); font-weight: 600; }
.kc-lib-note { padding: 8px 12px; border-radius: var(--kc-radius-sm); background: var(--kc-amber-soft); color: var(--kc-amber); font-size: 13px; margin: 8px 0; }
.kc-lib-note.ok { background: var(--kc-green-soft); color: var(--kc-green); }
.kc-lib-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.kc-lib-tabs a { padding: 6px 12px; border: 1px solid var(--kc-border); border-radius: 999px; color: var(--kc-text-2); background: var(--kc-surface); font-size: 13px; }
.kc-lib-tabs a.active { background: var(--kc-navy-700); color: #fff; border-color: var(--kc-navy-700); }
.kc-lib-overlay { position: fixed; inset: 0; background: rgba(15, 29, 54, .5); display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 16px; }
.kc-lib-dialog { background: var(--kc-surface); border-radius: var(--kc-radius-lg); box-shadow: var(--kc-shadow-lg); width: 100%; max-height: 92vh; display: flex; flex-direction: column; }
.kc-lib-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--kc-border); }
.kc-lib-dialog-head h3 { margin: 0; font-size: 16px; color: var(--kc-navy-700); }
.kc-lib-x { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--kc-text-3); cursor: pointer; }
.kc-lib-dialog-body { padding: 14px 16px; overflow: auto; }
.kc-lib-dialog-foot { padding: 10px 16px; border-top: 1px solid var(--kc-border); display: flex; justify-content: flex-end; gap: 8px; }
.kc-lib-receipt { max-width: 720px; margin: 0 auto; background: #fff; padding: 24px; border: 1px solid var(--kc-border); }
.kc-lib-receipt h2 { margin: 0 0 2px; text-align: center; }
.kc-lib-receipt table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.kc-lib-receipt th, .kc-lib-receipt td { border-bottom: 1px solid #ddd; padding: 5px 6px; text-align: left; font-size: 13px; }
.kc-lib-kv { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; font-size: 13.5px; }
.kc-lib-kv dt { color: var(--kc-text-3); font-weight: 600; }
.kc-lib-kv dd { margin: 0; }
.kc-lib-barcodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.kc-lib-label { border: 1px dashed #999; padding: 8px; text-align: center; break-inside: avoid; font-size: 11px; }
@media print { .kc-lib-overlay, .no-print { display: none !important; } .kc-lib-receipt { border: 0; } }