/* ================================================================
   global1.css - K-LiTE Dealer Portal shared styles
   ----------------------------------------------------------------
   Ported 16-08-2026 from KliteERP2023/css/global1.css so the dealer
   portal and the main ERP share one visual language. Contains ONLY
   the site chrome (header band, utility bar, navbar, modals, footer)
   plus the page-level toolkit that list pages use:

       .page-wrap / .page-header      page shell + title band
       .btn-dot + .btn-primary|...    buttons
       .filter-card / .filter-grid    search / filter panels
       .grid-scroll                   responsive GridView wrapper

   Form pages (DealerOrdersForm etc.) additionally load
   css/dealerform.css, which carries the qf-* form design system.

   PALETTE
       --charcoal : #2b2b2b   navbar / header bg
       --amber    : #f5a623   accent
       --bg       : #f5f4f2   page background
       --border   : #e0deda
   ================================================================ */


/* ══════════════════════════════════════════════
   SITE HEADER BAND
   ══════════════════════════════════════════════ */
.klite-header {
    background: #ffffff;
    border-bottom: none;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

    .klite-header .brand-logos {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-right: auto;
    }

        .klite-header .brand-logos img {
            height: 44px;
            display: block;
        }

    .klite-header .brand-divider {
        width: 1px;
        height: 36px;
        background: #ddd;
    }

    .klite-header .brand-tag {
        font-family: 'Roboto', sans-serif;
        font-size: 12px;
        font-weight: 300;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: #6b6b6b;
        white-space: nowrap;
    }

/* Desktop utility links inside the header band */
.klite-header-links {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}

    .klite-header-links a,
    .klite-header-links .klite-signout {
        color: #2b2b2b;
        text-decoration: none;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font-size: 12px;
        font-family: 'Roboto', sans-serif;
    }

        .klite-header-links a:hover,
        .klite-header-links .klite-signout:hover {
            color: #d4880f;
            text-decoration: none;
        }

    .klite-header-links .klite-user {
        color: #f5a623;
        font-size: 12px;
        font-weight: 500;
        text-decoration: none;
    }

    .klite-header-links .sep {
        color: #ccc;
    }


/* ══════════════════════════════════════════════
   TOP UTILITY BAR (mobile only - d-lg-none)
   ══════════════════════════════════════════════ */
.klite-topbar {
    background: #2b2b2b;
    padding: 5px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}

    .klite-topbar a,
    .klite-topbar .klite-signout {
        color: #f5a623 !important;
        text-decoration: none;
        font-size: 12px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        font-family: 'Roboto', sans-serif;
    }

        .klite-topbar a:hover,
        .klite-topbar .klite-signout:hover {
            color: #ffffff !important;
        }

    .klite-topbar .klite-user {
        color: #ffffff;
        font-weight: 500;
    }

    .klite-topbar .sep {
        color: rgba(255,255,255,0.25);
        margin: 0 2px;
    }


/* ══════════════════════════════════════════════
   MAIN NAVBAR (Bootstrap 5, responsive)
   ══════════════════════════════════════════════ */
.klite-navbar {
    background-color: #2b2b2b;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 9990;
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
    /* Critical: must NOT clip overflowing dropdown children */
    overflow: visible !important;
}

    .klite-navbar .container-fluid,
    .klite-navbar .navbar-collapse,
    .klite-navbar .navbar-nav {
        overflow: visible !important;
    }

    /* Positioned so the absolute dropdown anchors to the item */
    .klite-navbar .nav-item {
        position: relative;
    }

    .klite-navbar .navbar-brand {
        display: none !important;
    }

    .klite-navbar .navbar-toggler {
        border-color: rgba(245,166,35,0.5);
        margin: 4px 8px;
    }

        .klite-navbar .navbar-toggler:focus {
            box-shadow: none;
        }

    .klite-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23f5a623' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

    /* Top-level links */
    .klite-navbar .navbar-nav > .nav-item > .nav-link {
        color: #e8e8e8 !important;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-size: 12.5px;
        padding: 15px 12px !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: color 0.2s, background 0.2s;
        white-space: nowrap;
        border-bottom: none;
    }

    .klite-navbar .navbar-nav > .nav-item:hover > .nav-link,
    .klite-navbar .navbar-nav > .nav-item.active > .nav-link {
        color: #f5a623 !important;
        background: rgba(245,166,35,0.08);
    }

    /* Dropdown panel */
    .klite-navbar .dropdown-menu {
        background-color: #1e1e1e;
        border: none;
        border-radius: 0 0 4px 4px;
        min-width: 230px;
        padding: 6px 0;
        margin-top: 0;
        box-shadow: 0 6px 20px rgba(0,0,0,0.4);
        z-index: 9991;
        display: none;
        position: absolute;
    }

        .klite-navbar .dropdown-menu.show {
            display: block !important;
        }

    .klite-navbar .dropdown-item {
        color: #d8d8d8 !important;
        font-size: 13px;
        padding: 7px 20px;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        transition: background 0.15s, color 0.15s;
    }

        .klite-navbar .dropdown-item:hover,
        .klite-navbar .dropdown-item:focus {
            background-color: #2e2e2e;
            color: #f5a623 !important;
        }

    .klite-navbar .dropdown-divider {
        border-color: rgba(245,166,35,0.15);
    }

    /* Submenu arrow */
    .klite-navbar .dropdown-submenu {
        position: relative;
    }

        .klite-navbar .dropdown-submenu > .dropdown-item::after {
            content: "\25B6";
            font-size: 9px;
            float: right;
            margin-top: 3px;
            color: #f5a623;
            opacity: 0.7;
        }

        .klite-navbar .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -8px;
        }

/* Open top-level dropdown on hover, desktop only */
@media (min-width: 992px) {
    .klite-navbar .navbar-nav > .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* Mobile */
@media (max-width: 991px) {
    .klite-navbar .navbar-brand {
        display: none !important;
    }

    .klite-navbar .dropdown-submenu > .dropdown-menu {
        left: 0;
        top: auto;
        margin-left: 0;
        margin-top: 0;
    }

    .klite-navbar .dropdown-submenu > .dropdown-item::after {
        content: "\25BC";
    }

    /* position:static (not absolute) inside the collapsed navbar so an open
       submenu pushes the rest of the menu down instead of floating over the
       page content behind it - on a phone the overlay hid the filter card. */
    .klite-navbar .dropdown-menu {
        min-width: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background-color: #222222;
        position: static;
        float: none;
    }

    .klite-navbar .dropdown-submenu > .dropdown-menu {
        background-color: #1a1a1a;
    }

    .klite-navbar .navbar-nav > .nav-item > .nav-link {
        padding: 12px 16px !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .klite-navbar .dropdown-item {
        padding: 8px 28px;
    }

    .klite-header {
        justify-content: center;
    }

        .klite-header .brand-logos {
            flex-wrap: wrap;
            justify-content: center;
        }
}


/* ══════════════════════════════════════════════
   PAGE SHELL
   ══════════════════════════════════════════════ */

/* Bootstrap 5 sets `:root { scroll-behavior: smooth }` by default. On a Web
   Forms page with MaintainScrollPositionOnPostback="true", ASP.NET restores the
   scroll position with window.scrollTo after every postback - and "smooth"
   turns that instant restore into a visible animated scroll down the page on
   EVERY AutoPostBack dropdown change. Forcing `auto` puts the page back exactly
   where it was, with no travel. Anchor links lose their smooth glide; that is a
   fair trade for data-entry screens.
   Added 16-08-2026. */
html {
    scroll-behavior: auto !important;
}

body {
    background-color: #f5f4f2;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

.page-wrap {
    background: #f5f4f2;
    min-height: 60vh;
    padding: 0 0 48px;
    font-family: 'Roboto', sans-serif;
    text-align: left;
}

/* Page title band */
.page-header {
    background: #2b2b2b;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-left: 5px solid #f5a623;
}

    .page-header h1 {
        color: #fff;
        font-size: 17px;
        font-weight: 500;
        margin: 0;
        letter-spacing: 0.4px;
        font-family: 'Roboto', sans-serif;
    }

        .page-header h1 span {
            color: #f5a623;
        }

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Generic content section, sits below the filter card */
.page-section {
    margin: 20px 20px 0;
}

@media (max-width: 720px) {
    .page-header {
        padding: 12px 14px;
    }

    .page-section {
        margin: 14px 10px 0;
    }
}


/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */
.btn-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    text-decoration: none !important;
    border: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}

    .btn-dot:hover, .btn-dot:focus, .btn-dot:visited {
        text-decoration: none !important;
        outline: none;
    }

.btn-primary {
    background: #f5a623;
    color: #2b2b2b;
}

    .btn-primary:hover {
        background: #d4880f;
        color: #2b2b2b;
    }

.btn-dot.btn-primary:disabled,
.btn-dot.btn-primary[disabled] {
    background: #c8a44a;
    color: rgba(255,255,255,0.5);
    border-color: #c8a44a;
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.btn-secondary {
    background: #fff;
    color: #2b2b2b;
    border: 1.5px solid #d0cfc9;
}

    .btn-secondary:hover {
        background: #f0efed;
        color: #2b2b2b;
    }

.btn-dot.btn-secondary:disabled,
.btn-dot.btn-secondary[disabled] {
    background: #e8e6e2;
    color: #b0aba4;
    border-color: #d8d5d0;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.btn-dark {
    background: #2b2b2b;
    color: #fff;
}

    .btn-dark:hover {
        background: #444;
        color: #fff;
    }

input[type=submit].btn-dot,
input[type=button].btn-dot {
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}


/* ══════════════════════════════════════════════
   FILTER CARD
   ══════════════════════════════════════════════ */
.filter-card {
    background: #fff;
    border: 1px solid #e0deda;
    border-top: 3px solid #f5a623;
    border-radius: 0 0 6px 6px;
    margin: 20px 20px 0;
    padding: 20px 24px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.filter-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #f5a623;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .filter-title::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e8e6e2;
    }

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px 18px;
    align-items: end;
}

.summary-grid {
    align-items: start;
}

    .summary-grid .filter-group {
        justify-content: flex-start;
        min-height: 74px;
    }

        .summary-grid .filter-group label {
            min-height: 34px;
            display: flex;
            align-items: flex-start;
        }

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .filter-group .option {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #2b2b2b;
    }

    .filter-group input[type="checkbox"],
    .filter-group-date input[type="checkbox"],
    .filter-group input[type="radio"] {
        accent-color: #f5a623;
        width: 16px;
        height: 16px;
        cursor: pointer;
        border: 1.5px solid #d8d5d0;
    }

    .filter-group label {
        font-size: 11px;
        font-weight: 600;
        color: #6b6b6b;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin: 0;
    }

    .filter-group input[type=text],
    .filter-group-date input[type=text],
    .filter-group input[type=password],
    .filter-group textarea,
    .filter-group select {
        height: 36px;
        border: 1.5px solid #d8d5d0;
        border-radius: 4px;
        padding: 0 10px;
        font-size: 13px;
        font-family: 'Roboto', sans-serif;
        color: #2b2b2b;
        background: #fafaf8;
        width: 100%;
        outline: none;
        transition: border-color 0.15s;
        box-sizing: border-box;
    }

        .filter-group input[type=text]:focus,
        .filter-group select:focus {
            border-color: #f5a623;
            background: #fff;
        }

/* Date range group - two inputs side by side */
.filter-group-date {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .filter-group-date label {
        font-size: 11px;
        font-weight: 600;
        color: #6b6b6b;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin: 0;
    }

    .filter-group-date input[type=text], input[type=password],
    .filter-group-date select {
        height: 36px;
        border: 1.5px solid #d8d5d0;
        border-radius: 4px;
        padding: 0 10px;
        font-size: 13px;
        font-family: 'Roboto', sans-serif;
        color: #2b2b2b;
        background: #fafaf8;
        width: 100%;
        outline: none;
        transition: border-color 0.15s;
        box-sizing: border-box;
    }

        .filter-group-date select:has(option[value=""]:checked) {
            color: #9e9e9e;
        }

        .filter-group-date input[type=text]:focus,
        .filter-group-date select:focus {
            border-color: #f5a623;
            background: #fff;
        }

.date-range {
    display: flex;
    gap: 6px;
    align-items: center;
}

    .date-range input[type=text] {
        flex: 1;
        height: 36px;
        border: 1.5px solid #d8d5d0;
        border-radius: 4px;
        padding: 0 8px;
        font-size: 12px;
        font-family: 'Roboto', sans-serif;
        color: #2b2b2b;
        background: #fafaf8;
        outline: none;
        min-width: 0;
        transition: border-color 0.15s;
        box-sizing: border-box;
    }

        .date-range input[type=text]:focus {
            border-color: #f5a623;
            background: #fff;
        }

    .date-range .date-sep {
        color: #aaa;
        font-size: 12px;
        white-space: nowrap;
    }

    .date-range .to {
        font-size: 11px;
        color: #6b6b6b;
        flex-shrink: 0;
    }

/* Actions row inside a filter card */
.filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eeece8;
}

.filter-actions-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .filter-card {
        margin: 14px 10px 0;
        padding: 14px 14px 12px;
    }

    .filter-grid {
        grid-template-columns: 1fr;
    }

    .filter-actions-right {
        margin-left: 0;
        width: 100%;
    }

    .filter-actions .btn-dot {
        flex: 1 1 auto;
        justify-content: center;
    }
}


/* ══════════════════════════════════════════════
   GRIDVIEW - horizontally scrollable on small screens
   ══════════════════════════════════════════════ */
.grid-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e0deda;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin: 20px 20px 0;
}

    .grid-scroll table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        font-family: 'Roboto', sans-serif;
        color: #2b2b2b;
        min-width: 800px;
    }

        /* !important throughout this block: App_Themes/Global/Global.skin puts
           HeaderStyle-BackColor="LightGray" and <alternatingrowstyle backcolor="LightGray"/>
           on every GridView, which ASP.NET renders as INLINE style attributes.
           Inline styles beat plain CSS, so the dark header would silently stay grey
           without these. Do not remove unless the skin is changed too. */
        .grid-scroll table th {
            background: #2b2b2b !important;
            color: #fff !important;
            font-weight: 500;
            font-size: 12px;
            letter-spacing: 0.3px;
            padding: 11px 14px;
            text-align: left;
            white-space: nowrap;
            vertical-align: top;
            border: none;
        }

            .grid-scroll table th a {
                color: #fff !important;
                text-decoration: none;
            }

                .grid-scroll table th a:hover {
                    color: #f5a623 !important;
                }

        .grid-scroll table td {
            padding: 10px 14px;
            border-bottom: 1px solid #eeece8;
            vertical-align: top;
            line-height: 1.5;
            background: #fff !important;
        }

        .grid-scroll table.grid-inner {
            width: 100%;
            min-width: 1200px;
            border-collapse: collapse !important;
            border: 1px solid #eeece8 !important;
            margin-top: 4px;
        }

            .grid-scroll table.grid-inner tr:first-child td {
                background: #2b2b2b !important;
                color: #fff !important;
                font-weight: 500;
                font-size: 12px;
                letter-spacing: 0.3px;
                padding: 11px 14px;
                text-align: left;
                white-space: nowrap;
                vertical-align: top;
                border: none;
            }

            .grid-scroll table.grid-inner tr:not(:first-child) td {
                padding: 10px 14px;
                border-bottom: 1px solid #eeece8;
                vertical-align: top;
                line-height: 1.5;
                background: #fff !important;
            }

        .grid-scroll table.grid-attachment {
            width: auto;
            min-width: 0;
            border-collapse: collapse !important;
            border: 1px solid #d8d5d0 !important;
            margin: 0;
            font-size: 13px;
        }

            .grid-scroll table.grid-attachment td {
                padding: 4px 8px;
                border: 1px solid #eeece8;
                vertical-align: top;
                line-height: 1.35;
                background: #fff !important;
                white-space: nowrap;
            }

            .grid-scroll table.grid-attachment tr:first-child td {
                background: #2b2b2b !important;
                color: #fff !important;
                font-weight: 500;
                font-size: 12px;
                letter-spacing: 0.3px;
            }

        /*.grid-scroll table tr:nth-child(even) td {
            background: #f2f1ef !important;
        }*/

        /*Removed on 18-08-2026*/
        /*.grid-scroll table tr:hover td {
            background: #fdf3e0 !important;
        }*/

        /*Changed on 18-08-2026*/
        /* Footer row */
        /*.grid-scroll table .grid-footer td {
            border-top: 2px solid #e0deda;
            background: #fffdf8 !important;
            font-weight: 500;
        }*/

        /* ── Footer row (safe targeting) ── */
        .grid-scroll table .grid-footer td {
            border-top: 2px solid #e0deda;
            background: #fffdf8;
        }

        /*Added (footer) on 18-08-2026*/
        .grid-scroll table .grid-footer input[type=text],
        .grid-scroll table .grid-footer select,
        .grid-scroll table .grid-footer textarea {
            width: 100%;
            height: 32px;
            border: 1.5px solid #d8d5d0;
            border-radius: 4px;
            padding: 0 8px;
            font-size: 13px;
            font-family: 'Roboto', sans-serif;
            color: #2b2b2b;
            background: #fafaf8;
            outline: none;
            box-sizing: border-box;
        }

        .grid-scroll table .grid-footer input:focus {
            border-color: #f5a623;
            /*background: #fff;*/
            background: #fafaf8;
        }

        /* EditItemTemplate row */
        .grid-scroll table tr.grid-edit-row td {
            background: #fff8ee !important;
        }

            .grid-scroll table tr.grid-edit-row td input[type="checkbox"],
            .grid-scroll table tr.grid-edit-row td input[type="radio"] {
                accent-color: #f5a623;
                width: 16px;
                height: 16px;
                cursor: pointer;
                border: 1.5px solid #d8d5d0;
                border-radius: 4px;
                background: #fafaf8;
            }

        /* Links inside grid rows. Deliberately NOT browser-default blue - the
           Edit / Delete / reorder controls are actions on the row, not
           navigation, and the blue underline read as unstyled. Charcoal with an
           amber hover, matching the rest of the portal. Updated 16-08-2026. */
        .grid-scroll table td a {
            color: #c47800 !important;
            text-decoration: none !important;
            font-weight: 500;
        }

            .grid-scroll table td a:hover,
            .grid-scroll table td a:focus {
                color: #d4880f;
                text-decoration: none;
            }

            .grid-scroll table td a:visited {
                color: #228a00 !important;
            }

            /* CommandField (Edit / Delete) renders bare <a>s side by side with only
           whitespace between them. Space them and make them read as a pair. */
            .grid-scroll table td a + a {
                margin-left: 10px;
            }

            /* Reorder arrows (LBtnUp / LBtnDown / LBtnFirst / LBtnLast) are
           LinkButtons whose text is a ▲ ▼ ⏫ ⏬ glyph. Amber, and big enough to
           be a touch target on a phone. */
            .grid-scroll table td a[id*="LBtnUp"],
            .grid-scroll table td a[id*="LBtnDown"],
            .grid-scroll table td a[id*="LBtnFirst"],
            .grid-scroll table td a[id*="LBtnLast"] {
                color: #e8a020;
                font-size: 15px;
                line-height: 1;
                display: inline-block;
                padding: 3px 5px;
                margin-left: 0;
            }

                .grid-scroll table td a[id*="LBtnUp"]:hover,
                .grid-scroll table td a[id*="LBtnDown"]:hover,
                .grid-scroll table td a[id*="LBtnFirst"]:hover,
                .grid-scroll table td a[id*="LBtnLast"]:hover {
                    color: #2b2b2b;
                }

/* Status badge stays its own style */
.status-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #555 !important;
}

/* Pager */
.grid-scroll table tr.pager td {
    background: #f5f4f2 !important;
    padding: 8px 14px;
    text-align: center;
}

    .grid-scroll table tr.pager td table {
        display: inline-block;
        min-width: 0;
    }

        .grid-scroll table tr.pager td table td {
            padding: 0 !important;
            border: none;
            background: none !important;
        }

    .grid-scroll table tr.pager td a,
    .grid-scroll table tr.pager td span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        height: 30px;
        border-radius: 4px;
        font-size: 13px;
        margin: 0 3px;
        text-decoration: none !important;
        color: #2b2b2b;
        background: #fff;
        border: 1.5px solid #d8d5d0;
    }

    .grid-scroll table tr.pager td span {
        background: #f5a623;
        color: #2b2b2b;
        border-color: #f5a623;
        font-weight: 700;
    }

    .grid-scroll table tr.pager td a:hover {
        background: #f5a623;
        border-color: #f5a623;
        color: #fff !important;
        text-decoration: none !important;
    }

/* Status badge */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: #e8e6e2;
    color: #555;
}

/* Inputs inside grid rows */
.grid-scroll table td input[type=text],
.grid-scroll table td input[type=password],
.grid-scroll table td select {
    height: 30px;
    border: 1.5px solid #d8d5d0;
    border-radius: 4px;
    padding: 0 6px;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    color: #2b2b2b;
    background: #fafaf8;
    outline: none;
    box-sizing: border-box;
    max-width: 100%;
}

.grid-scroll table td textarea {
    border: 1.5px solid #d8d5d0;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    resize: vertical;
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 720px) {
    .grid-scroll {
        margin: 14px 10px 0;
        border-radius: 4px;
    }

        .grid-scroll table {
            font-size: 12px;
        }

            .grid-scroll table th,
            .grid-scroll table td {
                padding: 8px 10px;
            }
}

/* Hint shown above a wide grid on touch screens */
.grid-hint {
    display: none;
    font-size: 11px;
    color: #6b6b6b;
    margin: 12px 20px -6px;
    font-style: italic;
}

@media (max-width: 991px) {
    .grid-hint {
        display: block;
        margin: 12px 10px -6px;
    }
}

/* Empty-result message */
.grid-empty {
    padding: 28px 20px;
    text-align: center;
    color: #6b6b6b;
    font-size: 13px;
}


/* ══════════════════════════════════════════════
   VALIDATION MESSAGES
   ══════════════════════════════════════════════ */
.val-msg,
span[id*="RFV"], span[id*="CV"], span[id*="REV"], span[id*="RV"] {
    font-family: 'Roboto', sans-serif !important;
    font-size: 11px !important;
    color: #c0392b !important;
    margin-top: 2px;
}


/* ══════════════════════════════════════════════
   ALERT MODAL (MPEAlert)
   ══════════════════════════════════════════════ */
.modalBackground,
.modalBackgroundAlert {
    background-color: rgba(0,0,0,0.55);
    z-index: 99998;
}

.klite-alert {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%);
    width: 460px;
    max-width: 92vw;
    z-index: 100000;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    overflow: hidden;
    text-align: left;
}

    .klite-alert .headerAlert {
        background: #2b2b2b;
        color: #f5a623;
        font-family: 'Roboto', sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 12px 18px;
        border-bottom: 1px solid #f5a623;
    }

    .klite-alert .body {
        padding: 18px;
        font-family: 'Roboto', sans-serif;
        font-size: 13px;
        color: #2b2b2b;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

        .klite-alert .body input[type=submit] {
            margin-top: 14px;
            background: #f5a623;
            color: #2b2b2b;
            border: none;
            border-radius: 4px;
            padding: 7px 22px;
            font-family: 'Roboto', sans-serif;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
        }

            .klite-alert .body input[type=submit]:hover {
                background: #d4880f;
            }

    /* Success / failure variants.
   Existing code-behind calls Alert(msg, "AS") for success and Alert(msg, "AF")
   for failure - the same two class names the old popup.css used. MasterPage2
   now composes them as "klite-alert AS" / "klite-alert AF" so the layout above
   is kept and only the accent colour changes. (The old popup.css .AS/.AF rules
   hard-coded width:450px, which overflowed a phone screen.) */
    .klite-alert.AS {
        border-top: 4px solid #5ac4be;
    }

        .klite-alert.AS .headerAlert {
            background: #14504d;
            color: #8ff0e9;
            border-bottom-color: #5ac4be;
        }

    .klite-alert.AF {
        border-top: 4px solid #ed0d0d;
    }

        .klite-alert.AF .headerAlert {
            background: #5a1010;
            color: #ffb3b3;
            border-bottom-color: #ed0d0d;
        }


/* ══════════════════════════════════════════════
   LEGACY popup.css SAFETY NET
   ----------------------------------------------
   Some pages still load popup.css for their own ModalPopupExtender panels
   (.modalPopup at 800px, .AS/.AF/.AE at 450px). Those are hard pixel widths
   and overflow a phone screen. Rather than edit popup.css - which the
   unconverted pages still depend on exactly as it is - these rules cap the
   width and make the body scrollable, without changing the desktop look.
   Loaded from global1.css, which every converted page gets via MasterPage2.
   ══════════════════════════════════════════════ */
.modalPopup,
.AS, .AF, .AE {
    max-width: 95vw !important;
    box-sizing: border-box;
}

    .modalPopup .body,
    .AS .body, .AF .body, .AE .body {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tables dropped inside a legacy popup must not push it wider than the screen. */
    .modalPopup table,
    .AS table, .AF table, .AE table {
        max-width: 100%;
    }

@media (max-width: 600px) {
    .modalPopup,
    .AS, .AF, .AE {
        width: 95vw !important;
    }
}


/* ══════════════════════════════════════════════
   SHARED POPUP (MPESharedPopup)
   ══════════════════════════════════════════════ */
.shared-popup {
    /* !important on position/top/left/margin only: ModalPopupExtender sets its own
       inline absolute position relative to the PAGE, which can land off-screen.
       Forcing fixed + centred here keeps it on screen at any scroll position.
       Deliberately NOT touching "display" - the extender toggles that to show/hide. */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%);
    width: 700px;
    max-width: 92vw;
    z-index: 100000;
    border: 3px solid #f5a623 !important;
    border-radius: 6px;
    text-align: left;
}

.shared-popup-inner {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    overflow: hidden;
}

.shared-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #333333;
    border-bottom: 1px solid #FFBF00;
    flex-shrink: 0;
}

.shared-popup-title {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.shared-popup-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 8px;
    cursor: pointer;
}

.shared-popup-body {
    padding: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}

@media (max-width: 600px) {
    .shared-popup {
        width: 96vw;
    }

    .shared-popup-inner {
        max-height: 70vh;
    }

    .shared-popup-body {
        padding: 12px;
    }
}


/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.copyrightbg {
    background: #2b2b2b;
    padding: 14px 20px;
    font-family: 'Roboto', sans-serif;
}

.copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1400px;
    margin: 0 auto;
}

.copyrightleft {
    color: #b8b8b8;
    font-size: 12px;
    font-weight: 300;
}

.copyrightright a {
    color: #b8b8b8;
    margin-left: 14px;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.15s;
}

    .copyrightright a:hover {
        color: #f5a623;
    }

@media (max-width: 720px) {
    .copyright {
        justify-content: center;
        text-align: center;
    }

    .copyrightright a {
        margin: 0 7px;
    }
}


/* ══════════════════════════════════════════════
   BACK TO TOP / BOTTOM
   ══════════════════════════════════════════════ */
.scroll-btns {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9995;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .scroll-btns button {
        width: 42px;
        height: 42px;
        line-height: 42px;
        padding: 0;
        border-radius: 10px;
        background: #f5a623;
        color: #2b2b2b;
        border: none;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(0,0,0,0.25);
        font-size: 16px;
        text-align: center;
    }


/* ══════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════ */
@media print {
    .klite-topbar,
    .klite-navbar,
    .klite-header-links,
    .page-header-actions,
    .filter-card,
    .grid-hint,
    .scroll-btns,
    .copyrightbg {
        display: none !important;
    }

    .klite-header {
        border-bottom: 1px solid #ccc !important;
        padding: 8px 0 !important;
        justify-content: flex-start !important;
        box-shadow: none !important;
    }

        .klite-header .brand-logos {
            margin-right: 0 !important;
        }

            .klite-header .brand-logos img {
                height: 36px !important;
            }

    .page-wrap {
        background: #fff !important;
        padding: 0 !important;
    }

    .page-header {
        background: #fff !important;
        border-left: 4px solid #f5a623 !important;
        padding: 6px 10px !important;
    }

        .page-header h1 {
            color: #000 !important;
            font-size: 15px !important;
        }

    .grid-scroll {
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
        margin: 8px 0 0 !important;
    }

        .grid-scroll table {
            min-width: 0 !important;
            font-size: 10px !important;
        }

            .grid-scroll table th {
                background: #333 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
}
Klite Application Server 2018 - The information in this web site is copyrighted.