/* =========================================================
   MAIN PAGE / COMPONENT STYLES
   ========================================================= */

/* Owl Carousel is used by the dashboard/service summary.
   Bootstrap and Inter are already loaded by _Layout.cshtml. */
@import url("owl.carousel.min.css");
@import url("owl.theme.default.css");

/* =========================================================
   MODULE START: LOGIN / AUTH
   ========================================================= */
/* Issue css found: shared login selectors also affect password-reset and tracking pages.
       They are retained as base styles; the User Login page uses scoped overrides below. */
.login-form {
    max-width: 500px;
    margin: auto;
    text-align: center
}

    .login-form .form-image {
        width: 100%;
        max-width: 200px;
        height: auto
    }

.form-button-group {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    background: #FFF;
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom)
}

.form-links {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 14px
}
/* =========================================================
   MODULE: LOGIN / AUTH
   ========================================================= */

/* =========================================================
   LOGIN / AUTH UI
   Page: Login
   NOTE:
   Keep this section AFTER the shared layout CSS.
========================================================= */

html.login-page-root,
body.login-page {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
}

/* =========================================================
   LOGIN BACKGROUND
========================================================= */

body.login-page {
    position: relative;
    background-image: url("/images/photo/racoldbackground.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

    /* Dark overlay */
    body.login-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient( 135deg, rgba(7, 32, 57, 0.72), rgba(14, 69, 99, 0.52), rgba(74, 39, 30, 0.42) );
    }

    /* =========================================================
   HIDE APPLICATION NAVIGATION ON LOGIN
========================================================= */

    body.login-page .app-header,
    body.login-page .appHeader,
    body.login-page .appBottomMenu,
    body.login-page #appSidebar,
    body.login-page #sidebarPanel,
    body.login-page .sidebar-overlay,
    body.login-page .topbar {
        display: none !important;
    }

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

    body.login-page #appCapsule {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 24px;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
    }

        body.login-page #appCapsule::-webkit-scrollbar {
            display: none;
        }

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

    body.login-page .login-form {
        position: relative;
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        box-sizing: border-box;
    }

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

    body.login-page .login-brand {
        width: 100%;
        margin: 0 0 12px;
        overflow: hidden;
        border-radius: 14px;
    }

        body.login-page .login-brand .form-image,
        body.login-page .login-form .login-brand .form-image {
            display: block;
            width: 100%;
            max-width: none !important;
            height: auto;
            margin: 0;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
        }

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

    body.login-page .login-card {
        position: relative;
        width: 100%;
        max-width: 460px;
        margin: 0;
        padding: 22px 24px 20px;
        box-sizing: border-box;
        overflow: visible;
        border: 2px solid transparent;
        border-radius: 24px;
        background: linear-gradient( 145deg, rgba(8, 36, 60, 0.94), rgba(13, 71, 91, 0.90) ) padding-box, linear-gradient( 120deg, #20b8d4, #ffffff, #f5a623, #20b8d4 ) border-box;
        background-size: 100% 100%, 300% 300%;
        box-shadow: 0 20px 55px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        animation: loginCardBorder 8s ease infinite, loginCardEntrance 0.55s ease-out both;
    }

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

        body.login-page .login-card h1 {
            margin: 4px 0 12px;
            color: #ffffff;
            font-size: 28px;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.3px;
        }

        body.login-page .login-card h4 {
            margin: 0 0 12px;
            color: rgba(255, 255, 255, 0.84);
            font-size: 13px;
            font-weight: 400;
            line-height: 1.45;
        }

        body.login-page .login-card .label,
        body.login-page .login-card label {
            display: block;
            margin: 0 3px 6px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 12px;
            font-weight: 600;
            line-height: 1.3;
            text-align: left;
        }

        /* =========================================================
   FORM GROUP
========================================================= */

        body.login-page .login-card .form-group.boxed {
            position: relative;
            width: 100%;
            margin: 0;
            padding: 6px 0;
            box-sizing: border-box;
        }

        /* =========================================================
   INPUTS
========================================================= */

        body.login-page .login-card .form-control {
            display: block;
            width: 100% !important;
            max-width: 100% !important;
            height: 48px;
            margin: 0;
            padding: 0 14px;
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, 0.55);
            border-radius: 11px;
            background: rgba(255, 255, 255, 0.96);
            color: #17202a;
            font-size: 14px;
            line-height: 48px;
            outline: none;
            box-shadow: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

            body.login-page .login-card .form-control::placeholder {
                color: rgba(20, 21, 21, 0.58);
                opacity: 1;
            }

            body.login-page .login-card .form-control:focus {
                border-color: #55d5e8;
                box-shadow: 0 0 0 4px rgba(85, 213, 232, 0.18);
                transform: translateY(-1px);
            }

    /* =========================================================
   PASSWORD
========================================================= */

    body.login-page .password-wrapper {
        position: relative;
        width: 100%;
    }

        body.login-page .password-wrapper .form-control {
            padding-right: 52px !important;
        }

    body.login-page .password-toggle {
        position: absolute;
        top: 3px;
        right: 4px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #52606d;
        cursor: pointer;
    }

        body.login-page .password-toggle:hover {
            background: rgba(30, 116, 253, 0.08);
            color: #1e74fd;
        }

        body.login-page .password-toggle ion-icon {
            font-size: 21px;
        }

        body.login-page .password-toggle:focus-visible {
            outline: 2px solid #58d6ec !important;
        }

    /* =========================================================
   FORGOT PASSWORD
========================================================= */

    body.login-page .login-card .form-links {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px 12px;
        width: 100%;
        margin: 10px 0 6px !important;
        padding: 0;
    }

        body.login-page .login-card .form-links a,
        body.login-page .login-card .form-links a.text-muted,
        body.login-page .auth-page-link a {
            color: rgba(255, 255, 255, 0.92) !important;
            font-size: 13px;
            font-weight: 600;
            text-decoration: underline;
            transition: color 0.2s ease;
        }

            body.login-page .login-card .form-links a:hover,
            body.login-page .auth-page-link a:hover {
                color: #72e4f2 !important;
            }

    body.login-page .logout-all-devices {
        min-height: 34px;
        padding: 6px 12px;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        box-shadow: none;
    }

        body.login-page .logout-all-devices:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
            filter: none;
            transform: none;
        }

    /* =========================================================
   CAPTCHA
========================================================= */

    body.login-page .login-captcha {
        width: 100%;
        margin-top: 8px;
        box-sizing: border-box;
    }

    body.login-page .login-captcha-row {
        display: grid;
        grid-template-columns: 125px 42px minmax(0, 1fr);
        align-items: center;
        width: 100%;
        gap: 8px;
        box-sizing: border-box;
    }

    /* CAPTCHA image */
    body.login-page .login-captcha-canvas {
        display: block;
        width: 125px !important;
        height: 44px !important;
        max-width: 100%;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.58);
        border-radius: 9px;
        background: #eef4f7;
        object-fit: cover;
    }

    /* Refresh button */
    body.login-page .login-captcha-refresh {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px !important;
        height: 44px !important;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }

        body.login-page .login-captcha-refresh:hover {
            background: rgba(255, 255, 255, 0.22);
            transform: translateY(-1px);
        }

        body.login-page .login-captcha-refresh ion-icon {
            font-size: 21px;
        }

    /* CAPTCHA input */
    body.login-page .login-captcha-input {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 44px;
        margin: 0;
        padding: 0 12px;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.96);
        color: #141515;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 2px;
        outline: none;
        box-shadow: none;
    }

        body.login-page .login-captcha-input::placeholder {
            color: rgba(20, 21, 21, 0.55);
        }

        body.login-page .login-captcha-input:focus {
            border-color: #58d6ec;
            box-shadow: 0 0 0 4px rgba(88, 214, 236, 0.18);
        }

        body.login-page .login-captcha-input.is-invalid {
            border-color: #ff7373 !important;
            box-shadow: 0 0 0 3px rgba(255, 115, 115, 0.18) !important;
        }

    /* CAPTCHA error */
    body.login-page .login-captcha-error {
        display: none;
        margin: 5px 2px 0;
        color: #ffd0d0;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
    }

        body.login-page .login-captcha-error.is-visible {
            display: block;
        }

    /* =========================================================
   VALIDATION
========================================================= */

    body.login-page .login-card .validation-summary-errors {
        margin: 0 0 8px;
        color: #ffd0d0;
        font-size: 12px;
        text-align: left;
    }

        body.login-page .login-card .validation-summary-errors ul {
            margin: 0;
            padding-left: 18px;
            font-size: 12px;
            line-height: 1.4;
        }

    body.login-page .login-card .field-validation-error {
        display: block;
        margin: 5px 3px 0;
        color: #ffd0d0 !important;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
    }

    body.login-page .login-card .field-validation-valid {
        display: none;
    }

    body.login-page .login-card .input-validation-error {
        border-color: #ff7373 !important;
        box-shadow: 0 0 0 3px rgba(255, 115, 115, 0.18) !important;
    }

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

    body.login-page .login-submit {
        width: 100%;
        margin-top: 12px;
    }

        body.login-page .login-submit .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 46px;
            margin: 0;
            padding: 0 18px;
            box-sizing: border-box;
            border: 0;
            border-radius: 10px;
            background: linear-gradient( 135deg, #1e74fd, #246bce );
            color: #ffffff;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 8px 20px rgba(30, 116, 253, 0.28);
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
        }

            body.login-page .login-submit .btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 11px 25px rgba(30, 116, 253, 0.34);
                filter: brightness(1.04);
            }

            body.login-page .login-submit .btn:active {
                transform: translateY(0);
            }

        body.login-page .login-card > a.btn,
        body.login-page .login-card > .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 46px;
            margin: 4px 0 0;
            padding: 0 18px;
            box-sizing: border-box;
            border: 0;
            border-radius: 10px;
            background: linear-gradient(135deg, #1e74fd, #246bce);
            color: #ffffff;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            box-shadow: 0 8px 20px rgba(30, 116, 253, 0.28);
        }

    /* =========================================================
   AUTH LINK / VERSION
========================================================= */

    body.login-page .auth-page-link {
        margin: 10px 0 0;
        color: rgba(255, 255, 255, 0.80);
        font-size: 12px;
        line-height: 1.4;
        text-align: center;
    }

    body.login-page .auth-confirmation-text {
        margin: 10px 0 14px;
        color: rgba(255, 255, 255, 0.88);
        font-size: 13px;
        line-height: 1.5;
    }

    body.login-page .login-version {
        min-height: 16px;
        margin: 8px 0 0;
        color: rgba(255, 255, 255, 0.72);
        font-size: 11px;
        font-weight: 500;
        line-height: 1.3;
        text-align: center;
    }

/* =========================================================
   CARD ANIMATION
========================================================= */

@keyframes loginCardBorder {
    0%, 100% {
        background-position: center, 0% 50%;
    }

    50% {
        background-position: center, 100% 50%;
    }
}

@keyframes loginCardEntrance {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

@media (max-width: 768px) {

    body.login-page #appCapsule {
        padding: 18px;
    }

    body.login-page .login-form {
        max-width: 430px;
    }

    body.login-page .login-card {
        padding: 20px 20px 18px;
        border-radius: 21px;
    }

        body.login-page .login-card h1 {
            font-size: 26px;
        }
}

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

@media (max-width: 520px) {

    body.login-page {
        background-attachment: scroll;
    }

        body.login-page #appCapsule {
            align-items: center;
            padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
        }

        body.login-page .login-form {
            width: 100%;
            max-width: 390px;
        }

        body.login-page .login-brand {
            margin-bottom: 9px;
            border-radius: 11px;
        }

            body.login-page .login-brand .form-image {
                border-radius: 11px;
            }

        body.login-page .login-card {
            padding: 18px 16px 16px;
            border-radius: 19px;
        }

            body.login-page .login-card h1 {
                margin-bottom: 9px;
                font-size: 24px;
            }

            body.login-page .login-card .form-control {
                height: 46px;
                font-size: 14px;
            }

        body.login-page .login-captcha-row {
            grid-template-columns: minmax(96px, 1fr) 42px minmax(0, 1.35fr);
            gap: 6px;
        }

        body.login-page .login-captcha-canvas {
            width: 100% !important;
        }

        body.login-page .login-captcha-refresh {
            width: 42px !important;
        }

        body.login-page .login-captcha-input {
            height: 44px;
        }
}

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

@media (max-width: 380px) {

    body.login-page #appCapsule {
        padding: 10px;
    }

    body.login-page .login-card {
        padding: 15px 12px 14px;
        border-radius: 17px;
    }

        body.login-page .login-card h1 {
            font-size: 22px;
        }

    body.login-page .login-captcha-row {
        grid-template-columns: minmax(0, 1fr) 38px;
        grid-template-areas:
            "canvas refresh"
            "input input";
        gap: 8px;
    }

    body.login-page .login-captcha-canvas {
        grid-area: canvas;
        width: 100% !important;
    }

    body.login-page .login-captcha-refresh {
        grid-area: refresh;
        width: 38px !important;
    }

    body.login-page .login-captcha-input {
        grid-area: input;
        width: 100%;
    }
}

/* =========================================================
   SHORT SCREENS
========================================================= */

@media (max-height: 650px) {

    body.login-page #appCapsule {
        align-items: flex-start;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    body.login-page .login-card {
        padding-top: 15px;
        padding-bottom: 14px;
    }

        body.login-page .login-card h1 {
            margin-top: 2px;
            margin-bottom: 7px;
            font-size: 23px;
        }

    body.login-page .login-brand {
        margin-bottom: 7px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.login-page .login-card {
        animation: none;
    }

        body.login-page .login-submit .btn,
        body.login-page .login-captcha-refresh,
        body.login-page .login-card .form-control {
            transition: none;
        }
}

/* start 'Customer complaint registration layout' */
body.login-page #appCapsule:has(.complaint-auth) {
    box-sizing: border-box;
}

body.login-page .login-form:has(.complaint-auth),
body.login-page .login-card.complaint-auth {
    max-width: min(460px, 100%);
}

body.login-page .login-card.complaint-auth h1 {
    font-size: 22px;
    line-height: 1.3;
}

body.login-page .login-card.complaint-auth .verify-input {
    max-width: 100%;
    height: 52px !important;
    margin: 0;
    padding: 0 14px !important;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.35em;
    line-height: 52px;
    text-align: center !important;
}

body.login-page .login-card.complaint-auth .form-control[readonly] {
    background: rgba(255, 255, 255, 0.82);
    color: #52606d;
}

@media (max-width: 520px) {
    body.login-page .login-card.complaint-auth h1 {
        font-size: 20px;
    }

    body.login-page .login-card.complaint-auth .verify-input {
        height: 48px !important;
        font-size: 20px;
        letter-spacing: 0.28em;
        line-height: 48px;
    }
}
/* end 'Customer complaint registration layout' */



/* =========================================================
   MAIN DASHBOARD
========================================================= */

.dashboard-month-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.dashboard-month-bar .MonthYr {
    max-width: 180px;
}

.modern-dashboard {
    --dashboard-bg: transparent;
    --dashboard-text: var(--text, #111827);
    --dashboard-card: var(--surface, #ffffff);
    --dashboard-border: var(--border, #e5e7eb);
    --dashboard-radius: 16px;
    --dashboard-shadow: 0 2px 10px rgba(15, 23, 42, .05);
    --dashboard-shadow-hover: 0 8px 24px rgba(15, 23, 42, .08);
    --dashboard-primary: var(--primary, #C8102E);
    --dashboard-muted: var(--muted, #6b7280);
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--dashboard-text);
}


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

.dashboard-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 135deg, #C8102E 0%, #3b82f6 50%, #6366f1 100% );
    border-radius: 22px;
    margin-bottom: 22px;
    box-shadow: 0 12px 35px rgba(37, 99, 235, 0.22);
}


    .dashboard-hero::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        right: -90px;
        top: -130px;
        background: rgba(255, 255, 255, 0.10);
        border-radius: 50%;
    }


    .dashboard-hero::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        right: 160px;
        bottom: -120px;
        background: rgba(255, 255, 255, 0.07);
        border-radius: 50%;
    }


.dashboard-hero-content {
    position: relative;
    z-index: 2;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 28px 32px;
}


.hero-text {
    flex: 1 1 240px;
    max-width: 420px;
}


.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 13px;
}


    .hero-badge ion-icon {
        font-size: 15px;
    }


.hero-text h1 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 34px;
    font-weight: 750;
    letter-spacing: -0.7px;
}


.hero-text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.6;
}


.hero-icon {
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 42px;
}

.hero-quick-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(72px, 1fr));
    gap: 10px;
    flex: 1 1 360px;
    max-width: 520px;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 4px 6px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

    .hero-stat:hover {
        color: #ffffff;
        text-decoration: none;
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.28);
        transform: translateY(-2px);
    }

.hero-stat-icon {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 22px;
}

    .hero-stat-icon ion-icon {
        font-size: 22px;
    }

.hero-stat-badge {
    position: absolute;
    top: -7px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffffff;
    color: #C8102E;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
}

.hero-stat-label {
    max-width: 100%;
    color: rgba(255, 255, 255, 0.92);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


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

.dashboard-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}


.overview-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--dashboard-card);
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-radius);
    box-shadow: var(--dashboard-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}


    .overview-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--dashboard-shadow-hover);
    }


.overview-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: var(--dashboard-primary);
    border-radius: 14px;
    font-size: 23px;
}

    .overview-icon.blue {
        background: #eff6ff;
        color: #C8102E;
    }

    .overview-icon.purple {
        background: #f5f3ff;
        color: #7c3aed;
    }

    .overview-icon.green {
        background: #ecfdf5;
        color: #059669;
    }

    .overview-icon.orange {
        background: #fff7ed;
        color: #ea580c;
    }


.overview-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .overview-content span {
        color: var(--dashboard-muted);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }


    .overview-content strong {
        margin-top: 2px;
        color: var(--dashboard-text);
        font-size: 17px;
        font-weight: 700;
    }


    .overview-content small {
        margin-top: 2px;
        color: var(--dashboard-muted);
        font-size: 10px;
    }


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}


.section-label {
    display: block;
    color: var(--dashboard-primary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}


.section-heading h2 {
    margin: 0;
    color: var(--dashboard-text);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.3px;
}


.section-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dashboard-border);
    color: var(--dashboard-primary);
    font-size: 20px;
}


/* =========================================================
   CAROUSEL
========================================================= */

.dashboard-carousel-section {
    margin-bottom: 30px;
}


.dashboard-carousel {
    min-height: 90px;
    background: #ffffff;
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-radius);
    padding: 10px;
    box-shadow: var(--dashboard-shadow);
}


    .dashboard-carousel .owl-carousel {
        margin: 0;
    }


    .dashboard-carousel .owl-stage-outer {
        border-radius: 13px;
    }

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

    .dashboard-kpi-grid a {
        text-decoration: none;
        color: inherit;
    }

.dashboard-kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 88px;
    padding: 16px;
    background: var(--dashboard-card);
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-radius);
    box-shadow: var(--dashboard-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .dashboard-kpi-card:hover {
        border-color: #bfdbfe;
        box-shadow: var(--dashboard-shadow-hover);
        transform: translateY(-2px);
    }

.dashboard-kpi-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-kpi-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    margin-top: 8px;
    padding: 0 8px;
    border-radius: 999px;
    background: #C8102E;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.dashboard-kpi-card.kpi-new .dashboard-kpi-badge { background: #C8102E; }
.dashboard-kpi-card.kpi-open .dashboard-kpi-badge { background: #1d4ed8; }
.dashboard-kpi-card.kpi-spare .dashboard-kpi-badge { background: #ea580c; }
.dashboard-kpi-card.kpi-fg .dashboard-kpi-badge { background: #7c3aed; }
.dashboard-kpi-card.kpi-cancel .dashboard-kpi-badge { background: #64748b; }

.dashboard-stat-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eff6ff;
    color: var(--dashboard-primary);
    font-size: 20px;
}

.dashboard-kpi-card h4 {
    margin: 0;
    color: var(--dashboard-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.kpi-skeleton {
    grid-column: 1 / -1;
    padding: 22px 12px;
    color: var(--dashboard-muted);
    text-align: center;
    font-size: 14px;
    background: var(--dashboard-card);
    border: 1px dashed var(--dashboard-border);
    border-radius: var(--dashboard-radius);
}

.dashboard-month-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .dashboard-month-filter .label {
        margin: 0;
        color: var(--dashboard-text);
        font-size: 13px;
        font-weight: 600;
    }

    .dashboard-month-filter .form-control {
        width: auto;
        min-height: 40px;
        height: 40px;
        padding: 6px 10px;
        border: 1px solid var(--dashboard-border);
        border-radius: 8px;
        background: #ffffff;
        color: var(--dashboard-text);
        font-size: 13px;
    }

    .dashboard-month-filter .btn {
        min-height: 40px;
        padding: 6px 12px;
        border: 1px solid var(--dashboard-primary);
        border-radius: 8px;
        background: #ffffff;
        color: var(--dashboard-primary);
        font-size: 13px;
        font-weight: 600;
    }


/* =========================================================
   ANALYTICS
========================================================= */

.analytics-section {
    margin-bottom: 35px;
}


.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


/* =========================================================
   DASHBOARD CARD
========================================================= */

.dashboard-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    background: var(--dashboard-card);
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-radius);
    box-shadow: var(--dashboard-shadow);
    scroll-margin-top: 88px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}


    .dashboard-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--dashboard-shadow-hover);
    }


/* =========================================================
   CARD HEADER
========================================================= */

.dashboard-card-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 20px;
    border-bottom: 1px solid #f0f2f6;
}


.card-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}


.card-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
}


    .card-icon.blue {
        background: #eff6ff;
        color: #C8102E;
    }


    .card-icon.purple {
        background: #f5f3ff;
        color: #7c3aed;
    }


    .card-icon.green {
        background: #ecfdf5;
        color: #059669;
    }


    .card-icon.orange {
        background: #fff7ed;
        color: #ea580c;
    }


.card-title-wrapper h3 {
    margin: 0;
    color: var(--dashboard-text);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.card-title-wrapper p {
    margin: 4px 0 0;
    color: var(--dashboard-muted);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.card-menu {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #9aa2b1;
    border-radius: 9px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}


    .card-menu:hover {
        background: #f3f5f9;
        color: var(--dashboard-primary);
    }


/* =========================================================
   CARD BODY
========================================================= */

.dashboard-card-body {
    padding: 12px 18px 18px;
    min-height: 300px;
}

.dashboard-card-body.card-body-compact {
    min-height: 0;
    padding: 16px 18px 20px;
}


.chart-wrapper {
    width: 100%;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.apex-charts {
    width: 100%;
}


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

.dashboard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 4px 5px;
    border-top: 1px solid var(--dashboard-border);
    color: var(--dashboard-muted);
    font-size: 11px;
}


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

@media (max-width: 1100px) {

    .dashboard-hero-content {
        align-items: stretch;
    }

    .hero-text {
        max-width: none;
    }

    .hero-quick-stats {
        flex: 1 1 100%;
        max-width: none;
    }

    .dashboard-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


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


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

@media (max-width: 768px) {

    .dashboard-hero {
        border-radius: 18px;
        margin-bottom: 15px;
    }


    .dashboard-hero-content {
        min-height: 160px;
        padding: 22px;
        gap: 16px;
    }


    .hero-text h1 {
        font-size: 27px;
    }


    .hero-text p {
        max-width: none;
        font-size: 12px;
    }


    .hero-icon {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        font-size: 28px;
    }

    .hero-quick-stats {
        flex: 1 1 100%;
        max-width: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }


    .dashboard-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 22px;
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .overview-card {
        padding: 13px;
        gap: 10px;
        border-radius: 14px;
    }


    .overview-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 11px;
        font-size: 19px;
    }


    .overview-content strong {
        font-size: 14px;
    }


    .overview-content small {
        font-size: 9px;
    }


    .section-heading {
        margin-bottom: 10px;
    }


        .section-heading h2 {
            font-size: 18px;
        }


    .section-icon {
        width: 35px;
        height: 35px;
        font-size: 17px;
    }


    .dashboard-carousel {
        padding: 7px;
        border-radius: 14px;
    }


    .dashboard-grid {
        gap: 13px;
    }


    .dashboard-card {
        border-radius: 15px;
    }


    .dashboard-card-header {
        min-height: 68px;
        padding: 13px 14px;
    }


    .card-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 10px;
        font-size: 18px;
    }


    .card-title-wrapper {
        gap: 9px;
    }


        .card-title-wrapper h3 {
            font-size: 12px;
        }


        .card-title-wrapper p {
            font-size: 9px;
        }


    .dashboard-card-body {
        min-height: 250px;
        padding: 8px 10px 12px;
    }


    .chart-wrapper {
        min-height: 225px;
    }


    .dashboard-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 20px;
    }
}


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

@media (max-width: 480px) {

    .dashboard-hero-content {
        padding: 22px 18px;
    }


    .hero-badge {
        font-size: 10px;
        padding: 6px 9px;
    }


    .hero-text h1 {
        font-size: 24px;
    }


    .hero-text p {
        font-size: 11px;
        max-width: none;
    }


    .hero-icon {
        display: none;
    }

    .hero-quick-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .dashboard-overview {
        gap: 8px;
    }


    .overview-card {
        padding: 11px;
        min-height: 70px;
    }


    .overview-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 16px;
    }


    .overview-content span {
        font-size: 9px;
    }


    .overview-content strong {
        font-size: 12px;
    }


    .overview-content small {
        display: none;
    }


    .section-heading h2 {
        font-size: 16px;
    }


    .dashboard-card-body {
        min-height: 220px;
    }


    .chart-wrapper {
        min-height: 200px;
    }
}

/* =========================================================
   USER LIST PAGE - MODERN UI
   ========================================================= */

    /* ---------------------------------------------------------
   Success alert
   --------------------------------------------------------- */

    .modern-dashboard .dashboard-alert {
        margin: 0 0 18px;
    }


    /* ---------------------------------------------------------
   Section
   --------------------------------------------------------- */

    .modern-dashboard .analytics-section {
        width: 100%;
        margin: 0;
        padding: 0;
    }


    /* ---------------------------------------------------------
   Section heading
   --------------------------------------------------------- */

    .modern-dashboard .section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .modern-dashboard .section-label {
        display: block;
        margin-bottom: 3px;
        color: var(--primary);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

    .modern-dashboard .section-heading h2 {
        margin: 0;
        color: var(--text);
        font-size: 18px;
        line-height: 1.3;
        font-weight: 700;
    }

    .modern-dashboard .section-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--surface);
        color: var(--primary);
    }

        .modern-dashboard .section-icon ion-icon {
            font-size: 19px;
        }


    /* ---------------------------------------------------------
   Main card
   --------------------------------------------------------- */

    .modern-dashboard .dashboard-card {
        width: 100%;
        margin: 0;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
        overflow: hidden;
    }


    /* ---------------------------------------------------------
   Card header
   --------------------------------------------------------- */

    .modern-dashboard .dashboard-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 70px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
    }

    .modern-dashboard .card-title-wrapper {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .modern-dashboard .card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 9px;
        background: rgba(30, 116, 253, .10);
        color: var(--primary);
        flex-shrink: 0;
    }

        .modern-dashboard .card-icon ion-icon {
            font-size: 19px;
        }

    .modern-dashboard .card-title-wrapper h3 {
        margin: 0;
        color: var(--text);
        font-size: 14px;
        font-weight: 700;
    }

    .modern-dashboard .card-title-wrapper p {
        margin: 2px 0 0;
        color: var(--muted);
        font-size: 11px;
    }


    /* ---------------------------------------------------------
   Add User
   --------------------------------------------------------- */

    .modern-dashboard .user-add-button {
        min-height: 38px;
        padding: 8px 14px;
        border: 0;
        border-radius: 8px;
        background: var(--primary);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        box-shadow: none;
    }

        .modern-dashboard .user-add-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(30, 116, 253, .20);
        }


    /* ---------------------------------------------------------
   Card body
   --------------------------------------------------------- */

    .modern-dashboard .dashboard-card-body {
        padding: 18px;
    }


    /* ---------------------------------------------------------
   Search toolbar
   --------------------------------------------------------- */

    .modern-dashboard .user-list-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin: 0 0 14px;
    }


    /* ---------------------------------------------------------
   Search
   --------------------------------------------------------- */

    .modern-dashboard .user-search {
        position: relative;
        width: 340px;
        max-width: 100%;
    }

        .modern-dashboard .user-search > ion-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            z-index: 2;
            transform: translateY(-50%);
            color: var(--muted);
            font-size: 17px;
        }

        .modern-dashboard .user-search .form-control {
            width: 100%;
            height: 39px;
            padding: 7px 38px 7px 37px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            color: var(--text);
            font-size: 12px;
            box-shadow: none;
        }

            .modern-dashboard .user-search .form-control:focus {
                border-color: var(--primary);
                box-shadow: 0 0 0 3px rgba(30, 116, 253, .08);
            }


    /* ---------------------------------------------------------
   User count
   --------------------------------------------------------- */

    .modern-dashboard .user-count {
        height: 34px;
        padding: 6px 10px;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: var(--surface-soft);
        color: var(--muted);
        font-size: 11px;
    }


    /* ---------------------------------------------------------
   Table wrapper
   --------------------------------------------------------- */

    .modern-dashboard .user-table-wrapper {
        width: 100%;
        max-height: 560px;
        overflow: auto;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
    }


    /* ---------------------------------------------------------
   Table
   --------------------------------------------------------- */

    .modern-dashboard .user-management-table {
        width: 100%;
        min-width: 650px;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
    }


        /* ---------------------------------------------------------
   Table header
   --------------------------------------------------------- */

        .modern-dashboard .user-management-table thead th {
            position: sticky;
            top: 0;
            z-index: 5;
            height: 42px;
            padding: 10px 12px;
            border: 0;
            border-bottom: 1px solid rgba(255,255,255,.15);
            background: var(--primary);
            color: #fff !important;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .15px;
            text-align: left;
            white-space: nowrap;
        }


            /* Header first/last radius */

            .modern-dashboard .user-management-table thead th:first-child {
                border-top-left-radius: 9px;
            }

            .modern-dashboard .user-management-table thead th:last-child {
                border-top-right-radius: 9px;
            }


        /* ---------------------------------------------------------
   Table body
   --------------------------------------------------------- */

        .modern-dashboard .user-management-table tbody td {
            height: 46px;
            padding: 7px 12px;
            border: 0;
            border-bottom: 1px solid var(--border);
            background: var(--surface);
            color: var(--text);
            font-size: 12px;
            vertical-align: middle;
        }

        .modern-dashboard .user-management-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .modern-dashboard .user-management-table tbody tr:hover td {
            background: var(--surface-soft);
        }


    /* ---------------------------------------------------------
   User avatar
   --------------------------------------------------------- */

    .modern-dashboard .user-table-avatar {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        border-radius: 8px;
        background: rgba(30, 116, 253, .10);
        color: var(--primary);
        font-size: 10px;
        font-weight: 700;
    }


    /* ---------------------------------------------------------
   User name
   --------------------------------------------------------- */

    .modern-dashboard .user-name-cell {
        gap: 9px;
    }

    .modern-dashboard .user-table-name strong {
        color: var(--text);
        font-size: 12px;
        font-weight: 600;
    }


    /* ---------------------------------------------------------
   Email
   --------------------------------------------------------- */

    .modern-dashboard .user-email-cell {
        gap: 7px;
        color: var(--muted);
        font-size: 12px;
    }

        .modern-dashboard .user-email-cell ion-icon {
            color: var(--muted);
            font-size: 15px;
        }


    /* ---------------------------------------------------------
   Processing column
   --------------------------------------------------------- */

    .modern-dashboard .processing-column {
        width: 110px;
        text-align: center !important;
    }

    .modern-dashboard .processing-header {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

        .modern-dashboard .processing-header ion-icon {
            font-size: 14px;
        }


    /* ---------------------------------------------------------
   Action columns
   --------------------------------------------------------- */

    .modern-dashboard .action-column {
        width: 55px;
        text-align: center !important;
    }


    /* ---------------------------------------------------------
   Action button
   --------------------------------------------------------- */

    .modern-dashboard .table-action-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: var(--surface);
        color: var(--primary);
        text-decoration: none !important;
        transition: background .15s ease, border-color .15s ease, transform .15s ease;
    }

        .modern-dashboard .table-action-button:hover {
            transform: translateY(-1px);
            background: rgba(30, 116, 253, .08);
            border-color: var(--primary);
        }

        .modern-dashboard .table-action-button ion-icon {
            font-size: 15px;
        }

        .modern-dashboard .table-action-button.edit {
            color: var(--success);
        }

            .modern-dashboard .table-action-button.edit:hover {
                border-color: var(--success);
                background: rgba(25, 135, 84, .08);
            }


    /* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

    .modern-dashboard .dashboard-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 24px;
        padding: 16px 2px;
        border-top: 1px solid var(--border);
        color: var(--muted);
        font-size: 10px;
    }


/* =========================================================
   DARK MODE
   ========================================================= */

[data-theme="dark"] .modern-dashboard .dashboard-card,
[data-theme="dark"] .modern-dashboard .dashboard-card-header,
[data-theme="dark"] .modern-dashboard .user-management-table tbody td,
[data-theme="dark"] .modern-dashboard .user-table-wrapper {
    background: var(--surface);
}

[data-theme="dark"] .modern-dashboard .user-management-table tbody tr:hover td {
    background: var(--surface-soft);
}

[data-theme="dark"] .modern-dashboard .user-search .form-control {
    background: var(--surface);
    color: var(--text);
}


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

@media (max-width: 992px) {

        .modern-dashboard .user-search {
            width: 300px;
        }
}


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

@media (max-width: 768px) {

        .modern-dashboard .hero-text h1 {
            font-size: 21px;
        }

        .modern-dashboard .section-heading {
            margin-bottom: 10px;
        }

        .modern-dashboard .dashboard-card-header {
            min-height: 62px;
            padding: 12px 13px;
        }

        .modern-dashboard .dashboard-card-body {
            padding: 13px;
        }

        .modern-dashboard .user-list-toolbar {
            align-items: stretch;
            flex-direction: column;
            gap: 9px;
        }

        .modern-dashboard .user-search {
            width: 100%;
        }

        .modern-dashboard .user-count {
            align-self: flex-start;
        }

        .modern-dashboard .user-table-wrapper {
            overflow: visible;
            max-height: none;
        }

        .modern-dashboard .user-management-table {
            min-width: 0;
        }

            .modern-dashboard .user-management-table thead {
                display: none;
            }

            .modern-dashboard .user-management-table,
            .modern-dashboard .user-management-table tbody,
            .modern-dashboard .user-management-table tr,
            .modern-dashboard .user-management-table td {
                display: block;
                width: 100%;
            }

                .modern-dashboard .user-management-table tbody tr {
                    padding: 10px;
                    border-bottom: 1px solid var(--border);
                }

                .modern-dashboard .user-management-table tbody td {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    height: auto;
                    min-height: 38px;
                    padding: 5px 0;
                    border: 0;
                    background: transparent !important;
                }

                    .modern-dashboard .user-management-table tbody td::before {
                        content: attr(data-label);
                        color: var(--muted);
                        font-size: 9px;
                        font-weight: 700;
                        text-transform: uppercase;
                    }

        .modern-dashboard .action-column {
            width: 100% !important;
        }

        .modern-dashboard .user-email-cell {
            max-width: 70%;
            justify-content: flex-end;
            text-align: right;
        }

        .modern-dashboard .dashboard-footer {
            align-items: flex-start;
            flex-direction: column;
        }
}


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

@media (max-width: 480px) {

        .modern-dashboard .card-title-wrapper p {
            display: none;
        }

        .modern-dashboard .user-add-button {
            width: 36px;
            height: 36px;
            min-width: 36px;
            padding: 0;
        }

            .modern-dashboard .user-add-button span {
                display: none;
            }

            .modern-dashboard .user-add-button ion-icon {
                font-size: 20px;
            }
}
/* =========================================================
   SERVICE REQUEST UI
   New layout does not load Bootstrap CSS. These rules
   replace the missing grid, buttons, badges, tabs, and modals.
   ========================================================= */

.d-none { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.p-0 { padding: 0 !important; }
.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 12px !important; }
.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 12px !important; }
.pt-2 { padding-top: 12px !important; }
.pb-2 { padding-bottom: 12px !important; }
.me-1 { margin-right: 8px !important; }
.mr-1 { margin-right: 8px !important; }

.text-primary { color: #C8102E !important; }
.text-danger { color: #dc2626 !important; }
.text-success { color: #16a34a !important; }
.text-muted { color: #64748b !important; }

.page-content:has(> .extraHeader) {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.page-content:has(> .extraHeader) > #appCapsule {
    padding: 16px 24px 24px;
}

.extraHeader,
.extraHeader.p-0 {
    position: sticky !important;
    top: 0;
    z-index: 850;
    width: 100%;
    padding: 8px 24px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}

    .extraHeader .nav-tabs,
    .extraHeader .nav-tabs.lined {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        max-width: 100%;
        margin: 0;
        padding: 4px;
        list-style: none;
        border: 0 !important;
        border-bottom: 0 !important;
        border-radius: 12px;
        background: #f1f5f9;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none;
        gap: 4px;
    }

        .extraHeader .nav-tabs::-webkit-scrollbar {
            display: none;
        }

    .extraHeader .nav-item {
        flex: 0 0 auto;
        margin: 0;
        min-width: 0;
    }

    .extraHeader .nav-link,
    .extraHeader .nav-link.tblink {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-height: 40px;
        padding: 8px 16px;
        color: #64748b;
        background: transparent !important;
        border: 0 !important;
        border-radius: 10px !important;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        transition: color .2s ease, background .2s ease, box-shadow .2s ease;
    }

        .extraHeader .nav-link:hover {
            color: #1d4ed8;
            background: #ffffff !important;
            text-decoration: none;
        }

        .extraHeader .nav-link.active,
        .extraHeader .nav-link.active.tblink {
            color: #ffffff !important;
            background: #C8102E !important;
            box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
        }

            .extraHeader .nav-link.active::after,
            .extraHeader .nav-tabs.lined .nav-link.active::after {
                display: none;
            }

#appCapsule.extra-header-active {
    width: 100%;
    min-height: 0;
    background: transparent;
}

.sr-request-page .sr-request-shell {
    margin-bottom: 0;
}

.sr-request-page .sr-request-toolbar {
    padding: 12px 16px 0;
    background: #ffffff;
    border-bottom: 1px solid #f0f2f6;
}

.sr-request-page .sr-request-toolbar .nav-tabs,
.sr-request-page .sr-request-toolbar .nav-tabs.lined {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: auto;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 4px;
    list-style: none;
    border: 0 !important;
    border-radius: 12px;
    background: #f1f5f9;
    gap: 4px;
}

.sr-request-page .sr-request-toolbar .nav-item {
    flex: 0 0 auto;
    margin: 0;
}

.sr-request-page .sr-request-toolbar .nav-link,
.sr-request-page .sr-request-toolbar .nav-link.tblink {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    color: #64748b;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.sr-request-page .sr-request-toolbar .nav-link:hover {
    color: #1d4ed8;
    background: #ffffff !important;
    text-decoration: none;
}

.sr-request-page .sr-request-toolbar .nav-link.active,
.sr-request-page .sr-request-toolbar .nav-link.active.tblink {
    color: #ffffff !important;
    background: #C8102E !important;
    box-shadow: 0 6px 16px rgba(200, 16, 46, .22);
}

.sr-request-page .sr-request-toolbar .nav-link.active::after,
.sr-request-page .sr-request-toolbar .nav-tabs.lined .nav-link.active::after {
    display: none;
}

    #appCapsule.extra-header-active .tab-content {
        width: 100%;
        max-width: 1600px;
        margin: 0 auto;
        padding: 0;
    }

        #appCapsule.extra-header-active .tab-content.mt-1 {
            margin-top: 0 !important;
        }

#appCapsule .tab-content > .tab-pane {
    display: none;
}

#appCapsule .tab-content > .tab-pane.active {
    display: block;
}

body:not(.login-page) #appCapsule .section {
    width: 100%;
    overflow: visible;
    margin-bottom: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

#appCapsule .section-title {
    display: flex;
    align-items: center;
    min-height: 62px;
    margin: 0;
    padding: 16px 20px;
    color: #111827;
    background: #ffffff;
    border-bottom: 1px solid #f0f2f6;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

#appCapsule .wide-block {
    width: 100%;
    padding: 16px 18px 20px;
    border: 0;
    border-radius: 0 0 16px 16px;
    background: transparent;
    box-shadow: none;
}

#appCapsule .searchbox {
    position: relative;
    margin-bottom: 16px !important;
}

    #appCapsule .searchbox .form-control {
        width: 100%;
        height: 46px;
        min-height: 46px;
        padding: 0 46px 0 16px;
        border: 1px solid #dce2ea;
        border-radius: 12px;
        background: #f8fafc;
        color: #172033;
        font-size: 14px;
        box-shadow: none;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

        #appCapsule .searchbox .form-control:focus {
            outline: none;
            border-color: #C8102E;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

    #appCapsule .searchbox .input-icon {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        color: #94a3b8;
        pointer-events: none;
        line-height: 0;
    }

        #appCapsule .searchbox .input-icon ion-icon {
            font-size: 19px;
        }

.sr-empty-state {
    padding: 28px 12px;
    color: #64748b;
    text-align: center;
    font-size: 14px;
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.page-message {
    margin: 0 0 12px;
}

.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

.spinner-border-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.me-05 {
    margin-right: 6px;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

.form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.form-check-input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.form-check-label {
    display: inline !important;
    margin: 0 !important;
    font-weight: 600;
}

.toast-box {
    position: fixed;
    left: 50%;
    top: calc(var(--header-height, 66px) + 16px);
    z-index: 2200;
    display: none;
    min-width: 280px;
    max-width: 92vw;
    padding: 12px 16px;
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .2);
    transform: translateX(-50%);
}

    .toast-box.show {
        display: flex;
    }

    .toast-box .in {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .toast-box .text {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
    }

    .toast-box.bg-success { background: #16a34a; }
    .toast-box.bg-danger { background: #dc2626; }
    .toast-box.bg-warning { background: #ea580c; }

body:not(.login-page) #appCapsule .form-group {
    margin-bottom: 14px;
}

body:not(.login-page) #appCapsule .form-group.boxed {
    margin-bottom: 18px;
}

body:not(.login-page) #appCapsule .input-wrapper {
    position: relative;
}

body:not(.login-page) #appCapsule .input-wrapper .label,
body:not(.login-page) #appCapsule .form-label,
body:not(.login-page) #appCapsule label:not(.form-check-label):not(.custom-control-label):not(.sr-only) {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

body:not(.login-page) #appCapsule .form-control,
body:not(.login-page) #appCapsule .form-select,
.modal .form-control {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #dce2ea;
    border-radius: 10px;
    background: #ffffff;
    color: #172033;
    font-size: 14px;
    box-shadow: none;
}

    body:not(.login-page) #appCapsule .form-control:focus,
    body:not(.login-page) #appCapsule .form-select:focus,
    .modal .form-control:focus {
        outline: none;
        border-color: #C8102E;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    }

body:not(.login-page) #appCapsule textarea.form-control,
.modal textarea.form-control {
    min-height: 88px;
    resize: vertical;
}

#appCapsule .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px 8px;
}

#appCapsule .col {
    flex: 1 1 160px;
    min-width: 0;
    padding: 0 8px;
}

#appCapsule .card {
    overflow: hidden;
    margin-bottom: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    #appCapsule .card:hover {
        transform: translateY(-2px);
        border-color: #bfdbfe;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    }

#appCapsule .card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 54px;
    padding: 12px 16px;
    color: #111827;
    background: #ffffff;
    border-bottom: 1px solid #f0f2f6;
    font-size: 14px;
    font-weight: 700;
}

#appCapsule .card-body {
    padding: 14px 16px 16px;
}

    #appCapsule .card-body .title {
        margin: 0 0 2px;
        color: #C8102E;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    #appCapsule .card-body h5,
    #appCapsule .card-body .text.wrap {
        margin: 0 0 4px;
        color: #172033;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
        word-break: break-word;
    }

    #appCapsule .card-body h5.mobile-no-row,
    #appCapsule .accordion-content h5.mobile-no-row,
    .modal h5.mobile-no-row {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        word-break: normal;
        overflow-wrap: normal;
    }

.masked-mobile {
    display: inline-block;
    flex: 0 0 auto;
    color: #172033;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.2;
}

.mobile-mask-wrap {
    position: relative;
    display: block;
    width: 100%;
}

    .mobile-mask-wrap > .form-control,
    .mobile-mask-wrap > input {
        padding-right: 42px;
    }

.mobile-mask-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #52606d;
    cursor: pointer;
    transform: translateY(-50%);
}

    .mobile-mask-toggle:hover {
        background: rgba(30, 116, 253, 0.08);
        color: #1e74fd;
    }

    .mobile-mask-toggle:focus-visible {
        outline: 2px solid #58d6ec;
    }

#appCapsule .iconedbox {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

    #appCapsule .iconedbox a {
        display: inline-flex;
        color: #C8102E;
        text-decoration: none;
    }

    #appCapsule .iconedbox ion-icon {
        font-size: 18px;
    }

#appCapsule .badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.badge-info { color: #1d4ed8; background: #dbeafe; }
.badge-primary { color: #1e40af; background: #dbeafe; }
.badge-success { color: #166534; background: #dcfce7; }
.badge-danger { color: #991b1b; background: #fee2e2; }
.badge-warning { color: #9a3412; background: #ffedd5; }

.status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 4px 8px 0 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.status-chip-local { color: #1e40af; background: #dbeafe; }
.status-chip-outcity { color: #9a3412; background: #ffedd5; }

body:not(.login-page) #appCapsule .btn,
.modern-dashboard .btn,
.modal .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#appCapsule .btn-sm,
.modal .btn-sm {
    min-height: 34px;
    padding: 5px 12px;
    font-size: 12px;
}

body:not(.login-page) #appCapsule .btn-block,
.modern-dashboard .btn-block,
.modal .btn-block {
    display: flex;
    width: 100%;
}

body:not(.login-page) #appCapsule .btn-primary,
.modern-dashboard .btn-primary,
.modal .btn-primary {
    color: #ffffff;
    background: #C8102E;
    border-color: #C8102E;
}

    body:not(.login-page) #appCapsule .btn-primary:hover,
    .modern-dashboard .btn-primary:hover,
    .modal .btn-primary:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
        box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
        color: #ffffff;
    }

#appCapsule .btn-success,
.modal .btn-success {
    color: #ffffff;
    background: #16a34a;
    border-color: #16a34a;
}

#appCapsule .btn-danger,
.modal .btn-danger {
    color: #ffffff;
    background: #dc2626;
    border-color: #dc2626;
}

#appCapsule .btn-info {
    color: #ffffff;
    background: #0284c7;
    border-color: #0284c7;
}

#appCapsule .btn-outline-primary,
.modal .btn-outline-primary {
    color: #C8102E;
    background: #ffffff;
    border-color: #C8102E;
}

#appCapsule .btn-icon,
.modal .btn-icon {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
}

    .modal .btn-icon ion-icon {
        font-size: 20px;
    }

#appCapsule .table-responsive {
    width: 100%;
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

#appCapsule table {
    width: 100%;
    margin: 0;
    background: #ffffff;
    border-collapse: separate;
    border-spacing: 0;
}

    #appCapsule table thead th {
        padding: 8px 10px;
        color: #ffffff;
        background: #C8102E;
        border-bottom: 0;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .2px;
        white-space: nowrap;
        text-align: left;
    }

        #appCapsule table thead th:first-child {
            border-top-left-radius: 10px;
        }

        #appCapsule table thead th:last-child {
            border-top-right-radius: 10px;
        }

    #appCapsule table tbody td {
        padding: 5px 10px;
        color: #334155;
        background: #ffffff;
        border-bottom: 1px solid #edf0f4;
        font-size: 13px;
        line-height: 1.3;
        vertical-align: middle;
    }

    /* Changed: compact 10-row page height on list tables. */
    #appCapsule table.nowrap tbody td,
    #appCapsule table.nowrap tbody th {
        height: 42px;
        white-space: nowrap;
    }

    #appCapsule table tbody tr:hover td {
        background: #f8fafc;
    }

    #appCapsule table tbody tr:last-child td {
        border-bottom: 0;
    }

    #appCapsule table a {
        color: #C8102E;
        font-weight: 600;
        text-decoration: none;
    }

        #appCapsule table a:hover {
            color: #1d4ed8;
            text-decoration: underline;
        }

        #appCapsule table a.table-action-button,
        #appCapsule table a.table-action-button:hover {
            color: #C8102E;
            text-decoration: none;
        }

        #appCapsule table a.table-action-button:hover {
            color: #ffffff;
        }

        #appCapsule table a.table-action-button.assign {
            color: #4338ca;
        }

        #appCapsule table a.table-action-button.assign:hover {
            color: #ffffff;
        }

        #appCapsule table a.table-action-button.danger {
            color: #b91c1c;
        }

        #appCapsule table a.table-action-button.danger:hover {
            color: #ffffff;
        }

.modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1080;
    overflow-x: hidden;
    overflow-y: auto;
}

    .modal.show,
    .modal.in {
        display: block;
    }

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1070;
    background: rgba(15, 23, 42, .45);
}

.modal-dialog {
    position: relative;
    width: auto;
    max-width: 560px;
    margin: 40px auto;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 80px);
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #edf0f4;
}

    .modal-header .modal-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
    }

    .modal-header a {
        color: #C8102E;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
    }

.modal-body {
    padding: 16px 18px;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #edf0f4;
}

#cancelRequestModal .modal-dialog,
#rejectForm .modal-dialog,
#actionSheetForm .modal-dialog {
    width: calc(100% - 32px);
    max-width: 520px;
    margin: 1.75rem auto;
}

#cancelRequestModal .modal-content,
#rejectForm .modal-content,
#actionSheetForm .modal-content {
    border-radius: 12px;
    overflow: hidden;
}

#rejectForm .form-group,
#actionSheetForm .form-group {
    margin-bottom: 14px;
}

#rejectForm .form-group:last-child,
#actionSheetForm .form-group:last-child {
    margin-bottom: 0;
}

.modal.modalbox .modal-dialog {
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
}

.modal.modalbox .modal-content {
    min-height: 100%;
    border: 0;
    border-radius: 0;
}

.modal.dialogbox .modal-dialog {
    max-width: 400px;
}

.job-sheet-modal .modal-dialog {
    display: flex;
    align-items: center;
    width: calc(100% - 32px);
    max-width: 720px;
    min-height: calc(100% - 32px);
    margin: 16px auto;
}

.job-sheet-modal .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, .25);
    box-shadow: 0 28px 64px rgba(15, 23, 42, .22);
}

.job-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    background: linear-gradient(135deg, #1d4ed8 0%, #C8102E 55%, #3b82f6 100%);
    border-bottom: 0;
    color: #fff;
}

.job-sheet-header--compact {
    padding-bottom: 16px;
}

.job-sheet-header__main {
    min-width: 0;
    flex: 1 1 auto;
}

.job-sheet-header__eyebrow {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
}

.job-sheet-header .modal-title {
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.job-sheet-header__hint {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    line-height: 1.4;
}

.job-sheet-sr-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: .95em;
    font-weight: 700;
    vertical-align: middle;
}

.job-sheet-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
    flex: 0 0 auto;
}

.job-sheet-close-btn ion-icon {
    font-size: 22px;
}

.job-sheet-close-btn:hover {
    background: rgba(255, 255, 255, .28);
    transform: scale(1.04);
}

.job-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 14px 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    scroll-behavior: smooth;
}

.job-sheet-stepper-wrap {
    padding: 14px 16px 12px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.job-sheet-progress-track {
    height: 4px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.job-sheet-progress-fill {
    height: 100%;
    width: 33%;
    border-radius: inherit;
    background: linear-gradient(90deg, #C8102E, #059669);
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.job-sheet-stepper {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    background: transparent;
    border-bottom: 0;
}

.job-sheet-modal .modal-footer {
    flex: 0 0 auto;
    justify-content: stretch;
}

    .job-sheet-modal .modal-footer .btn-block {
        width: 100%;
    }

.job-sheet-modal .clear-input {
    display: none !important;
}

.job-sheet-modal .section {
    overflow: hidden;
    margin-bottom: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    transition: box-shadow .25s ease, transform .25s ease;
}

.job-sheet-panel:not(.job-sheet-panel--collapsed) {
    animation: jobSheetPanelIn .28s ease;
}

@keyframes jobSheetPanelIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.job-sheet-panel__title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 0;
    margin: 0;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border-bottom: 1px solid #edf0f4;
}

.job-sheet-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #eff6ff;
    color: #C8102E;
    flex: 0 0 auto;
}

.job-sheet-panel__icon ion-icon {
    font-size: 22px;
}

.job-sheet-panel__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.job-sheet-panel__text strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.job-sheet-panel__text small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.3;
}

.job-sheet-panel__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

.job-sheet-manual-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.job-sheet-manual-btn ion-icon {
    font-size: 16px;
}

.job-sheet-manual-btn.is-active {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.job-sheet-product-hint {
    margin: 0 6px 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #475569;
    font-size: 13px;
    line-height: 1.4;
}

.job-sheet-inline-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 4px 8px 4px 10px;
    border-radius: 10px;
    background: #f8fafc;
}

.job-sheet-inline-check .form-check-label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.job-sheet-inline-check .form-select {
    min-height: 32px;
    width: auto;
    min-width: 72px;
    padding: 2px 28px 2px 8px;
    font-size: 12px;
    font-weight: 700;
}

.job-sheet-subsection-title {
    margin-top: 8px;
    padding: 10px 16px !important;
    background: #f8fafc !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.job-sheet-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 12px;
    font-weight: 700;
}

.job-sheet-info-card {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #eff6ff;
}

.job-sheet-info-card .form-check-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.job-sheet-info-card .form-check-label small {
    color: #64748b;
    font-weight: 400;
}

.job-sheet-required {
    color: #ef4444;
    font-weight: 700;
}

.job-sheet-modal .wide-block {
    padding: 10px 12px 14px;
}

.job-sheet-modal .form-group.boxed {
    margin-bottom: 12px;
}

.job-sheet-modal .job-sheet-field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: -6px;
    margin-right: -6px;
}

.job-sheet-modal .job-sheet-field-col {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0 6px;
}

@media (min-width: 576px) {
    .job-sheet-modal .job-sheet-field-col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .job-sheet-modal .job-sheet-field-row--3 > .job-sheet-field-col {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

.job-sheet-modal .form-control,
.job-sheet-modal .form-select {
    min-height: 44px;
    border-radius: 12px;
    border-color: #cbd5e1;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.job-sheet-modal .form-control:focus,
.job-sheet-modal .form-select:focus {
    border-color: #C8102E;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.job-sheet-modal .form-control[readonly],
.job-sheet-modal .form-control:disabled,
.job-sheet-modal .form-select:disabled,
.job-sheet-modal select.form-control:disabled,
.job-sheet-modal input.form-control:disabled,
.job-sheet-modal textarea.form-control:disabled,
.job-sheet-modal .form-control[readonly]:not(:focus),
.job-sheet-modal .job-sheet-field-locked,
.job-sheet-modal .job-sheet-field-locked.form-control,
.job-sheet-modal .job-sheet-field-locked.form-select {
    background-color: #dcdcdc !important;
    background-image: none !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    opacity: 1 !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

.job-sheet-modal .form-control[readonly],
.job-sheet-modal .form-control:disabled,
.job-sheet-modal .form-select:disabled,
.job-sheet-modal .job-sheet-field-locked {
    pointer-events: none;
}

.job-sheet-modal .label,
.job-sheet-modal .form-label {
    margin-bottom: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.job-sheet-modal .btn-primary#Sendhappycode,
.job-sheet-modal #Sendhappycode {
    border-radius: 12px;
    min-height: 44px;
    font-weight: 700;
}

.job-sheet-modal .iconedbox {
    border-radius: 14px;
    border: 2px dashed #cbd5e1;
    transition: border-color .2s ease, background .2s ease;
}

.job-sheet-modal .iconedbox:hover {
    border-color: #C8102E;
    background: #f8fbff;
}

.job-sheet-modal .table {
    margin-bottom: 0;
}

.job-sheet-modal .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #e2e8f0;
}

.job-sheet-modal .table tbody tr:hover {
    background: #f8fafc;
}

.job-sheet-step {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: all .22s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.job-sheet-step:hover:not(:disabled):not(.is-active) {
    border-color: #bfdbfe;
    background: #f8fbff;
    transform: translateY(-1px);
}

.job-sheet-step:focus-visible {
    outline: 2px solid #C8102E;
    outline-offset: 2px;
}

.job-sheet-step:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.job-sheet-step.is-hidden {
    display: none;
}

.job-sheet-step.is-active {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
    border-color: #93c5fd;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .16);
    transform: translateY(-1px);
}

.job-sheet-step.is-complete {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    color: #047857;
    border-color: #86efac;
}

.job-sheet-step__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #94a3b8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.job-sheet-step.is-active .job-sheet-step__index {
    background: #C8102E;
}

.job-sheet-step.is-complete .job-sheet-step__index {
    background: #059669;
}

.job-sheet-step__label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-sheet-action-bar {
    display: flex;
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid #e2e8f0;
    backdrop-filter: blur(8px);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .06);
}

.job-sheet-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    margin: 0;
    border-radius: 12px;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease;
}

.job-sheet-action-btn:active {
    transform: scale(.98);
}

.job-sheet-action-btn--submit,
.job-sheet-action-btn--next {
    flex: 1 1 auto;
    border: 0;
    background: linear-gradient(135deg, #1d4ed8 0%, #C8102E 100%);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
}

.job-sheet-action-btn--submit:hover,
.job-sheet-action-btn--next:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .34);
}

.job-sheet-action-btn--back,
.job-sheet-action-btn--refresh {
    min-width: 46px;
    padding-left: 14px;
    padding-right: 14px;
}

.job-sheet-action-btn ion-icon {
    font-size: 18px;
}

.job-sheet-modal #divHappyCode,
.job-sheet-modal #divSendhappycode {
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.job-sheet-modal #divSendhappycode {
    padding-top: 0;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    margin-top: -4px;
}

.job-sheet-modal .job-sheet-field-col #divHappyCode,
.job-sheet-modal .job-sheet-field-col #divSendhappycode,
.job-sheet-modal .job-sheet-field-col #divCancellationCode,
.job-sheet-modal .job-sheet-field-col #divSendCancellationCode {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}

.job-sheet-modal .job-sheet-field-col #divSendhappycode,
.job-sheet-modal .job-sheet-field-col #divSendCancellationCode {
    margin-top: 0;
}

.job-sheet-modal .job-sheet-field-col #divHappyCode .form-group.boxed,
.job-sheet-modal .job-sheet-field-col #divCancellationCode .form-group.boxed {
    margin-bottom: 12px;
}

@media (max-width: 575px) {
    .job-sheet-modal .job-sheet-field-col {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .job-sheet-header {
        padding: 14px 14px 12px;
    }

    .job-sheet-header .modal-title {
        font-size: 1rem;
    }

    .job-sheet-step {
        flex-direction: column;
        gap: 4px;
        padding: 8px 6px;
        text-align: center;
    }

    .job-sheet-step__label {
        font-size: 10px;
        white-space: normal;
        line-height: 1.2;
    }

    .job-sheet-action-btn--back .job-sheet-action-btn__text,
    .job-sheet-action-btn--refresh .job-sheet-action-btn__text {
        display: none;
    }

    .job-sheet-action-btn--back,
    .job-sheet-action-btn--refresh {
        flex: 0 0 46px;
        padding: 0;
    }

    .job-sheet-action-btn--submit .job-sheet-action-btn__text,
    .job-sheet-action-btn--next .job-sheet-action-btn__text {
        font-size: 14px;
    }

    .job-sheet-panel__actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .job-sheet-manual-btn {
        padding: 0 10px;
        font-size: 11px;
    }
}

.job-sheet-panel--collapsed {
    display: none !important;
}

.job-sheet-modal .form-group.boxed.has-validation-error,
.job-sheet-modal .input-wrapper.has-validation-error {
    position: relative;
}

.job-sheet-modal .form-group.boxed.has-validation-error .form-control,
.job-sheet-modal .form-group.boxed.has-validation-error .form-select,
.job-sheet-modal .input-wrapper.has-validation-error .form-control,
.job-sheet-modal .input-wrapper.has-validation-error .form-select,
.job-sheet-modal .input-validation-error,
.job-sheet-modal input.error,
.job-sheet-modal select.error,
.job-sheet-modal textarea.error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .14);
    background-color: #fff7f7;
}

.job-sheet-modal .has-validation-error .field-validation-error,
.job-sheet-modal .field-validation-error {
    display: block;
    margin-top: 6px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
}

.job-sheet-step.is-error {
    background: #fef2f2;
    color: #b91c1c;
    box-shadow: inset 0 0 0 1px #fecaca;
}

.job-sheet-step.is-error .job-sheet-step__index {
    background: #dc2626;
}

.modal-close {
    border: 0;
    background: transparent;
    color: #C8102E;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

body.modal-open {
    overflow: hidden;
}

.modal .section {
    overflow: hidden;
    margin-bottom: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.job-sheet-modal .section {
    overflow: hidden;
    margin-bottom: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

/* =========================================================
   SERVICE REQUEST DETAILS MODAL
   Franchisee #dynamic-card-details and Technician
   #modal-call-details1 use the same accordion markup.
   Match Technician Job Sheet without changing the views.
   ========================================================= */

#dynamic-card-details.modalbox .modal-dialog,
#modal-call-details1.modalbox .modal-dialog {
    display: flex;
    align-items: center;
    width: calc(100% - 32px);
    max-width: 720px;
    height: auto;
    min-height: calc(100% - 32px);
    margin: 16px auto;
}

#dynamic-card-details .modal-content,
#modal-call-details1 .modal-content,
#dynamic-card-details #dynamic-card-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    max-height: calc(100vh - 32px);
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 20px;
    box-shadow: 0 28px 64px rgba(15, 23, 42, .22);
}

#dynamic-card-details #dynamic-card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
}

#dynamic-card-details .modal-header,
#modal-call-details1 .modal-header {
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 16px;
    background: linear-gradient(135deg, #1d4ed8 0%, #C8102E 55%, #3b82f6 100%);
    border-bottom: 0;
    color: #ffffff;
}

    #dynamic-card-details .modal-header .modal-title,
    #modal-call-details1 .modal-header .modal-title {
        margin: 0;
        color: #ffffff;
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.3;
    }

    #dynamic-card-details .modal-header a,
    #modal-call-details1 .modal-header a,
    #dynamic-card-details .modal-header .modal-close,
    #modal-call-details1 .modal-header .modal-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .16);
        color: transparent;
        font-size: 0;
        line-height: 0;
        text-decoration: none;
        flex: 0 0 auto;
        transition: background .2s ease, transform .15s ease;
    }

        #dynamic-card-details .modal-header a::before,
        #modal-call-details1 .modal-header a::before,
        #dynamic-card-details .modal-header .modal-close::before,
        #modal-call-details1 .modal-header .modal-close::before {
            content: "\00d7";
            color: #ffffff;
            font-size: 22px;
            font-weight: 500;
            line-height: 1;
        }

        #dynamic-card-details .modal-header a:hover,
        #modal-call-details1 .modal-header a:hover,
        #dynamic-card-details .modal-header .modal-close:hover,
        #modal-call-details1 .modal-header .modal-close:hover {
            background: rgba(255, 255, 255, .28);
            transform: scale(1.04);
            color: transparent;
        }

#dynamic-card-details .modal-body,
#modal-call-details1 .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 14px 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

#dynamic-card-details .modal-body .section,
#modal-call-details1 .modal-body .section {
    overflow: visible;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#dynamic-card-details .section-title,
#modal-call-details1 .section-title {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    margin: 0 0 14px;
    padding: 6px 12px;
    color: #1d4ed8;
    background: #eff6ff;
    border: 0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

#dynamic-card-details .accordion,
#modal-call-details1 .accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#dynamic-card-details .accordion .item,
#modal-call-details1 .accordion .item {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

#dynamic-card-details .accordion .item + .item,
#modal-call-details1 .accordion .item + .item {
    border-top: 1px solid #e2e8f0;
}

#dynamic-card-details .accordion-header .btn,
#modal-call-details1 .accordion-header .btn {
    min-height: 64px;
    padding: 12px 48px 12px 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
}

    #dynamic-card-details .accordion-header .btn:hover,
    #modal-call-details1 .accordion-header .btn:hover {
        background: #f8fafc !important;
    }

    #dynamic-card-details .accordion-header .btn ion-icon,
    #modal-call-details1 .accordion-header .btn ion-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: 12px;
        border-radius: 12px;
        background: #eff6ff;
        color: #C8102E;
        font-size: 22px;
    }

    #dynamic-card-details .accordion-header .btn:after,
    #modal-call-details1 .accordion-header .btn:after {
        right: 18px;
        width: 8px;
        height: 8px;
        border-color: #64748b;
    }

#dynamic-card-details .accordion-content,
#modal-call-details1 .accordion-content {
    padding: 8px 16px 18px;
    background: #ffffff;
}

    #dynamic-card-details .accordion-content .col,
    #modal-call-details1 .accordion-content .col {
        margin-bottom: 10px;
        padding: 10px 12px;
        background: #f8fafc;
        border: 1px solid #edf0f4;
        border-radius: 12px;
    }

    #dynamic-card-details .accordion-content .title,
    #modal-call-details1 .accordion-content .title {
        margin-bottom: 4px;
        color: #C8102E;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    #dynamic-card-details .accordion-content h5,
    #dynamic-card-details .accordion-content .text.wrap,
    #modal-call-details1 .accordion-content h5,
    #modal-call-details1 .accordion-content .text.wrap {
        margin: 0;
        color: #0f172a;
        font-size: 14px;
        font-weight: 600;
    }

#dynamic-card-details .accordion-content .btn-primary,
#modal-call-details1 .accordion-content .btn-primary {
    min-height: 46px;
    border-radius: 12px;
}

@media (max-width: 767.98px) {
    #dynamic-card-details.modalbox .modal-dialog,
    #modal-call-details1.modalbox .modal-dialog {
        width: calc(100% - 16px);
        max-width: none;
        min-height: calc(100% - 16px);
        margin: 8px auto;
    }

    #dynamic-card-details .modal-content,
    #modal-call-details1 .modal-content {
        max-height: calc(100vh - 16px);
        border-radius: 16px;
    }

    #dynamic-card-details .accordion-header .btn,
    #modal-call-details1 .accordion-header .btn {
        min-height: 56px;
        font-size: 14px;
    }

        #dynamic-card-details .accordion-header .btn ion-icon,
        #modal-call-details1 .accordion-header .btn ion-icon {
            width: 34px;
            height: 34px;
            font-size: 18px;
        }
}

.modal .section-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 48px;
    margin: 0;
    padding: 12px 18px;
    color: #172033;
    background: #ffffff;
    border-bottom: 1px solid #edf0f4;
    font-size: 15px;
    font-weight: 700;
}

.modal .wide-block {
    padding: 4px 4px 8px;
}

.modal .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px 8px;
}

.modal .col {
    flex: 1 1 160px;
    min-width: 0;
    padding: 0 8px;
}

.modal .table-responsive {
    width: 100%;
    overflow-x: auto;
}

.modal table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .modal table thead th,
    .modal table tbody td {
        padding: 10px 12px;
        border-bottom: 1px solid #edf0f4;
        font-size: 13px;
        text-align: left;
    }

.modal-body .modal-body {
    padding: 0;
}

.modal .badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .page-content:has(> .extraHeader) > #appCapsule {
        padding: 14px 12px 32px;
    }

    .extraHeader,
    .extraHeader.p-0 {
        padding: 8px 10px !important;
    }

    .extraHeader .nav-tabs,
    .extraHeader .nav-tabs.lined {
        padding: 3px;
        border-radius: 10px;
    }

    .extraHeader .nav-item {
        flex: 0 0 auto;
    }

    .extraHeader .nav-link,
    .extraHeader .nav-link.tblink {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 12px;
    }

    #appCapsule .section-title {
        padding: 11px 14px;
        font-size: 14px;
    }

    #appCapsule .card-body .row,
    #appCapsule .row {
        display: block;
        margin: 0;
    }

    #appCapsule .col {
        padding: 0;
        margin-bottom: 8px;
    }

    .modal-dialog {
        max-width: none;
        margin: 12px;
    }
}

/* =========================================================
   REMAINING SERVICE / FRANCHISEE UI
   Classes still used in views and JS after Bootstrap/oldstyle
   were dropped. Covers leftover chrome, dialogs, camera/QR,
   chips, and form/button variants.
   ========================================================= */

.page-content > .appHeader.bg-primary,
.page-content > .appHeader.text-light,
.page-content > #search.appHeader {
    display: none !important;
}

.mb-05 { margin-bottom: 6px !important; }
.mt-3 { margin-top: 16px !important; }
.mb-3 { margin-bottom: 16px !important; }
.px-2 { padding-left: 12px !important; padding-right: 12px !important; }
.ml-1 { margin-left: 8px !important; }
.text-center { text-align: center !important; }
.bg-warning { background: #ea580c !important; color: #ffffff !important; }

.col-12,
.col-md-12 {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    padding: 0 8px;
}

.form-text {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
}

.badge-dark {
    color: #f8fafc;
    background: #0f172a;
}

.btn:disabled,
.btn.disabled,
button:disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

#appCapsule .btn-warning,
.modal .btn-warning {
    color: #ffffff;
    background: #ea580c;
    border-color: #ea580c;
}

#appCapsule .btn-secondary,
.modal .btn-secondary {
    color: #ffffff;
    background: #475569;
    border-color: #475569;
}

#appCapsule .btn-dark,
.modal .btn-dark {
    color: #ffffff;
    background: #0f172a;
    border-color: #0f172a;
}

    .modal .btn-dark:hover {
        background: #1e293b;
        border-color: #1e293b;
    }

#appCapsule .btn-light,
.modal .btn-light {
    color: #334155;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

#appCapsule .btn-outline-secondary,
.modal .btn-outline-secondary {
    color: #475569;
    background: #ffffff;
    border-color: #cbd5e1;
}

    .modal .btn-outline-secondary:hover,
    .job-sheet-action-btn--back:hover {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #1e293b;
    }

.modal .btn-outline-primary:hover,
.job-sheet-action-btn--refresh:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #C8102E;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
}

    .btn-link:hover {
        color: #1d4ed8;
    }

.btn-lg {
    min-height: 46px;
    padding: 10px 20px;
    font-size: 15px;
}

.modal .form-group {
    margin-bottom: 14px;
}

.modal .form-label,
.modal .label,
.modal label {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.modal .form-select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #dce2ea;
    border-radius: 10px;
    background: #ffffff;
    color: #172033;
    font-size: 14px;
}

    .modal .form-select:focus {
        outline: none;
        border-color: #C8102E;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    }

.modal .clear-input {
    display: none !important;
}

.modal-lg {
    max-width: 720px;
}

.modal.dialogbox .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 360px;
    min-height: calc(100% - 32px);
    margin: 16px auto;
}

.modal.dialogbox .modal-content {
    overflow: hidden;
    text-align: center;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}

.modal.dialogbox .modal-header {
    justify-content: center;
    padding: 20px 20px 8px;
    border-bottom: 0;
}

    .modal.dialogbox .modal-header .modal-title {
        width: 100%;
        text-align: center;
        font-size: 17px;
    }

.modal.dialogbox .modal-body {
    padding: 8px 20px 24px;
    color: #475569;
    font-size: 14px;
}

.modal.dialogbox .modal-footer {
    display: block;
    padding: 0;
    border-top: 1px solid #e5e7eb;
}

.btn-inline {
    display: flex;
    width: 100%;
}

    .btn-inline .btn {
        flex: 1 1 0;
        min-height: 48px;
        margin: 0;
        border: 0 !important;
        border-radius: 0;
        background: transparent;
        font-size: 14px;
        font-weight: 700;
    }

        .btn-inline .btn:hover {
            background: #f8fafc;
        }

        .btn-inline .btn:first-child {
            border-right: 1px solid #e5e7eb !important;
            border-radius: 0 0 0 16px !important;
        }

        .btn-inline .btn:last-child {
            border-radius: 0 0 16px 0 !important;
        }

.btn-text-primary {
    color: #C8102E !important;
    background: transparent;
    border-color: transparent;
}

.btn-text-secondary {
    color: #64748b !important;
    background: transparent;
    border-color: transparent;
}

.modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 0 -8px;
    color: #C8102E;
    font-size: 56px;
    line-height: 1;
}

    .modal-icon ion-icon {
        font-size: 56px;
    }

    .modal-icon.text-danger {
        color: #dc2626;
    }

.iconedbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 24px;
}

    .iconedbox.iconedbox-sm {
        width: 26px;
        height: 26px;
        font-size: 18px;
    }

    .iconedbox.iconedbox-xl {
        width: 96px;
        height: 96px;
        color: #64748b;
        background: #f8fafc;
        font-size: 42px;
        cursor: pointer;
    }

        .iconedbox.iconedbox-xl ion-icon {
            font-size: 42px;
        }

.imaged {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    background: #0f172a;
}

    .imaged.w100 { width: 100px !important; }
    .imaged.w160 { width: 160px !important; }

.video-options {
    position: relative;
    display: block;
    margin-bottom: 12px;
}

.btn-camera {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

#reader,
#reader video,
#preview,
#previewSpare,
#preview-productImg,
#preview-invoiceImg {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
}

.chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0;
    border-radius: 100px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

    .chip .chip-label {
        padding: 0 12px;
    }

    .chip.chip-media {
        position: relative;
        padding-left: 20px;
    }

    .chip .chip-icon {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        margin: 0;
        border-radius: 100px;
        background: #475569;
        color: #ffffff;
        font-size: 14px;
    }

        .chip .chip-icon ion-icon {
            font-size: 14px;
        }

        .chip .chip-icon.bg-warning {
            background: #ea580c !important;
        }

.alert {
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.alert-success {
    background: #dcfce7;
    color: #166534;
}

.alert-danger {
    background: #fee2e2;
    color: #991b1b;
}

.alert-warning {
    background: #ffedd5;
    color: #9a3412;
}

#otpSection {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.action-sheet-content {
    width: 100%;
}

.job-sheet-info-card .form-check {
    align-items: flex-start;
}

.job-sheet-info-card .form-check-label {
    display: flex !important;
}

.job-sheet-modal .btn-icon.btn-primary {
    background: #C8102E;
    color: #ffffff;
}

.job-sheet-modal .btn-icon.btn-light {
    background: #f1f5f9;
    color: #334155;
}

/* =========================================================
   FRANCHISEE PAGES
   ========================================================= */

.swal2-container {
    z-index: 20000 !important;
}

.text-right { text-align: right !important; }

.page-form {
    width: 100%;
    max-width: 760px;
}

#appCapsule .clear-input {
    display: none !important;
}

#appCapsule .form-control[readonly],
#appCapsule .form-control-readonly {
    background: #dcdcdc;
    color: #475569;
}

.table-scroll-panel {
    max-height: 600px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

.table-scroll-panel:has(.dataTables_wrapper) {
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
}

.table-scroll-panel table {
    margin: 0;
}

.table-scroll-panel thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #C8102E;
    color: #ffffff;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.section-box {
    margin-bottom: 16px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

.section-box .section-title {
    min-height: 0;
    margin: 0 0 14px;
    padding: 0 0 10px;
    border-bottom: 1px solid #edf0f4;
}

/* Changed: invoice update form uses a centered card and two-column layout. */
.invoice-update-page {
    display: block;
}

.invoice-update-page .invoice-update-form {
    width: 100%;
    max-width: none;
}

.invoice-update-page .section-box {
    margin-bottom: 0;
    padding: 14px 16px;
}

#appCapsule.invoice-update-page .section-title,
.invoice-update-page .section-box .section-title {
    min-height: 0;
    margin: 0 0 8px;
    padding: 0 0 8px;
}

#appCapsule.invoice-update-page .row {
    margin: 0 -6px 0;
}

#appCapsule.invoice-update-page .form-group {
    margin-bottom: 8px;
}

.invoice-update-page .invoice-update-subtitle {
    margin: 4px 0 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.invoice-update-page .form-group {
    margin-bottom: 14px;
}

.invoice-update-page .invoice-update-actions {
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #edf0f4;
}

@media (max-width: 767px) {
    .invoice-update-page .invoice-update-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .invoice-update-page .invoice-update-actions .btn {
        width: 100%;
    }
}

/* Changed: remove leftover empty space from the wide title, row margins, and narrow card. */
.dms-update-page {
    display: block;
}

.dms-update-page .invoice-update-form,
.dms-update-page .section-box {
    width: 100%;
    max-width: none;
}

#appCapsule.dms-update-page .section-title,
.dms-update-page .section-box .section-title {
    min-height: 0;
    margin: 0 0 8px;
    padding: 0 0 8px;
}

.dms-update-page .invoice-update-subtitle {
    margin: 10px 0 6px;
}

.dms-update-page .invoice-update-subtitle:first-of-type {
    margin-top: 0;
}

#appCapsule.dms-update-page .row {
    margin: 0 -6px 0;
}

#appCapsule.dms-update-page .form-group {
    margin-bottom: 8px;
}

#appCapsule.dms-update-page .form-control {
    min-height: 38px;
}

.dms-update-page .invoice-update-actions {
    margin-top: 4px;
    margin-bottom: 8px;
    padding-top: 8px;
}

.dms-update-page .dms-upload-note {
    margin: 0 0 8px;
    color: #64748b;
    font-size: 13px;
}

.dms-update-page .dms-upload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dms-update-page .dms-upload-row .form-control {
    flex: 1 1 220px;
    min-width: 0;
}

.dms-update-page .dms-upload-row .btn {
    flex: 0 0 auto;
}

.dms-update-page .dms-attachment-wrap {
    overflow: auto;
}

.dms-update-page .dms-attachment-table {
    margin: 0;
}

@media (max-width: 767px) {
    .dms-update-page .dms-upload-row .btn {
        width: 100%;
    }
}

.search-sr-page .search-sr-grid {
    align-items: stretch;
}

.search-sr-page .search-sr-grid .section-box {
    height: 100%;
    margin-bottom: 12px;
}

.search-sr-page .searchable-select {
    position: relative;
    width: 100%;
}

#appCapsule.search-sr-page .searchable-select-source,
.search-sr-page .searchable-select-source {
    display: none !important;
    width: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden;
    position: absolute;
}

.search-sr-page .searchable-select-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    color: #1e293b;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.4.8 6 5.4 10.6.8 12 2.2 6 8.2 0 2.2z'/%3E%3C/svg%3E") no-repeat right 10px center;
    cursor: pointer;
}

.search-sr-page .searchable-select-toggle.is-placeholder {
    color: #6c757d;
}

.search-sr-page .searchable-select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.search-sr-page .searchable-select.is-open .searchable-select-menu {
    display: block;
}

.search-sr-page .searchable-select-input {
    display: block !important;
    width: calc(100% - 16px) !important;
    min-width: 0 !important;
    margin: 8px;
}

.search-sr-page .searchable-select-list {
    max-height: 220px;
    overflow: auto;
    padding: 0 0 4px;
}

.search-sr-page .searchable-select-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: #1e293b;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.search-sr-page .searchable-select-item:hover,
.search-sr-page .searchable-select-item.is-active {
    background: #f8fafc;
    color: #C8102E;
}

.search-sr-page .searchable-select-empty {
    padding: 8px 12px;
    color: #94a3b8;
    font-size: 12px;
}

.search-sr-page .search-sr-results {
    margin-top: 4px;
    overflow: hidden;
}

.search-sr-page .search-sr-results .admin-list-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.search-sr-page .search-sr-results .dataTables_wrapper {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-sr-page .search-sr-results .admin-list-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.search-sr-page .search-sr-results table.search-sr-table,
.search-sr-page .search-sr-results table.dataTable {
    min-width: 1080px;
}

.search-sr-page .search-sr-results .admin-list-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0 0;
    border-top: 1px solid #edf0f4;
}

.search-sr-page .search-sr-results .dataTables_info,
.search-sr-page .search-sr-results .dataTables_paginate {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.search-sr-page .search-sr-results table thead th,
.search-sr-page .search-sr-results table tbody td {
    padding: 8px 12px;
    vertical-align: middle;
}

.search-sr-page .search-sr-results table tbody td {
    height: 46px;
}

.search-sr-page .search-sr-results .search-sr-col-icon {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

.search-sr-page .search-sr-results .search-sr-empty {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}

.search-sr-page .search-sr-results .sr-status {
    display: inline-flex;
    align-items: center;
    max-width: 180px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    white-space: nowrap;
}

.search-sr-page .search-sr-results .sr-status-success {
    color: #166534;
    background: #dcfce7;
}

.search-sr-page .search-sr-results .sr-status-warning {
    color: #9a3412;
    background: #ffedd5;
}

.search-sr-page .search-sr-results .sr-status-danger {
    color: #991b1b;
    background: #fee2e2;
}

.search-sr-page .search-sr-results .sr-status-info {
    color: #1e40af;
    background: #dbeafe;
}

.search-sr-page .search-sr-results .sr-status-neutral {
    color: #334155;
    background: #f1f5f9;
}

.search-sr-page .search-sr-results .table-action-button {
    width: 32px;
    height: 32px;
}

.search-sr-page .search-sr-results img {
    height: 22px;
    width: 22px;
    border: 0;
    vertical-align: middle;
}

/* Dynamic SR card layout (used by new-dynamic-card) */
.dynamic-sr-card .sr-customer .sr-no {
    display: block;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dynamic-sr-card .customer-name {
    display: block;
    font-size: 13px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dynamic-sr-card .sr-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 13px;
}
.dynamic-sr-card .sr-date {
    color: #6b7280;
    font-size: 12px;
}
.dynamic-sr-card .sr-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

@media (max-width: 576px) {
    .dynamic-sr-card .sr-main-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "customer"
            "meta"
            "actions";
    }
    .dynamic-sr-card .sr-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Layout: one full-width request card per row */
.sr-request-page #new-dynamic-card,
.sr-request-page #open-dynamic-card,
.sr-request-page #pending-dynamic-card,
.sr-request-page #fgpending-dynamic-card,
.sr-request-page #cancelcall-dynamic-card,
#new-dynamic-card, #open-dynamic-card, #pending-dynamic-card, #fgpending-dynamic-card, #cancelcall-dynamic-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.dynamic-sr-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    margin-bottom: 0;
    overflow: hidden;
}

.dynamic-sr-card .card-body {
    padding: 10px 14px;
}

.dynamic-sr-card .sr-main-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "customer actions"
        "meta meta";
    gap: 8px 12px;
    align-items: start;
}

.sr-request-page .sr-card-head {
    display: contents;
}

.sr-request-page .sr-field-label,
.sr-request-page .sr-no-prefix,
.sr-request-page .sr-no-dash {
    display: none !important;
}

.sr-request-page .sr-main-row--inline,
.sr-request-page .dynamic-sr-card .sr-main-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.sr-request-page .sr-customer {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sr-request-page .dynamic-sr-card .sr-no,
.sr-request-page .dynamic-sr-card .customer-name,
.sr-request-page .dynamic-sr-card .sr-info,
.sr-request-page .dynamic-sr-card .sr-date,
.sr-request-page .sr-customer .sr-no,
.sr-request-page .sr-customer .customer-name,
.sr-request-page .sr-info,
.sr-request-page .sr-date,
.sr-request-page .sr-info span:not(.iconedbox) {
    font-size: 15px;
    line-height: 1.2;
    color: #111827;
}

.sr-request-page .sr-customer .sr-no,
.sr-request-page .sr-customer .customer-name {
    display: inline-block;
    max-width: none;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
}

.sr-request-page .sr-customer .sr-no {
    font-weight: 700;
}

.sr-request-page .sr-customer .customer-name {
    font-weight: 600;
}

.sr-request-page .sr-status-badge {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.sr-request-page .sr-info,
.sr-request-page .sr-date {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.sr-request-page .sr-location {
    flex: 1 1 auto;
    min-width: 0;
}

.sr-request-page .sr-location span:not(.iconedbox) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-request-page .dynamic-sr-card .iconedbox,
.sr-request-page .dynamic-sr-card .iconedbox.iconedbox-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    line-height: 1;
}

.sr-request-page .dynamic-sr-card .iconedbox ion-icon,
.sr-request-page .dynamic-sr-card .sr-icon,
.sr-request-page .sr-icon {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 1;
}

.sr-request-page .dynamic-sr-card .sr-actions {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.sr-request-page .dynamic-sr-card .sr-actions .table-action-button,
.sr-request-page .sr-actions .table-action-button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}

.sr-request-page .dynamic-sr-card .sr-actions .table-action-button ion-icon,
.sr-request-page .sr-actions .table-action-button ion-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

#appCapsule.sr-request-page .dynamic-sr-card .sr-actions .btn,
#appCapsule.sr-request-page .dynamic-sr-card .sr-actions .btn-sm {
    min-height: 28px;
    height: 28px;
    width: auto;
    padding: 0 10px;
    font-size: 13px;
    line-height: 1;
    border-radius: 8px;
}

#appCapsule.sr-request-page .dynamic-sr-card .sr-actions .sr-icon-btn {
    width: 28px;
    min-width: 28px;
    padding: 0;
    font-size: 14px;
}

.dynamic-sr-card .sr-customer {
    grid-area: customer;
    min-width: 0;
}

.dynamic-sr-card .sr-actions {
    grid-area: actions;
    margin-left: 0;
}

.sr-request-page .dynamic-sr-card .sr-actions {
    margin-left: auto;
}

.dynamic-sr-card .sr-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

.dynamic-sr-card .sr-status,
.dynamic-sr-card .sr-info,
.dynamic-sr-card .sr-date {
    flex: 0 1 auto;
    min-width: 0;
}

.dynamic-sr-card .sr-date {
    width: auto;
    text-align: left;
}

.dynamic-sr-card .sr-info {
    max-width: 100%;
}

.dynamic-sr-card .sr-info span:not(.iconedbox) {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.dynamic-sr-card .sr-no {
    font-size: 14px;
}

.dynamic-sr-card .customer-name,
.dynamic-sr-card .sr-info,
.dynamic-sr-card .sr-date {
    font-size: 12px;
}

.dynamic-sr-card .sr-actions .btn {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 6px;
}

.dynamic-sr-card .sr-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
}

.dynamic-sr-card .sr-view-btn ion-icon {
    font-size: 18px;
}

.card.mb-2.dynamic-sr-card {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.dynamic-sr-card .card-header {
    padding: 10px 14px;
    color: #111827;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .sr-request-page .dynamic-sr-card {
        overflow: visible;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    }

    .sr-request-page .dynamic-sr-card .card-body {
        padding: 16px;
    }

    .sr-request-page .sr-main-row--inline,
    .sr-request-page .dynamic-sr-card .sr-main-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "head"
            "name"
            "phone"
            "location"
            "date"
            "actions";
        gap: 12px;
        width: 100%;
        overflow: visible;
        align-items: stretch;
    }

    .sr-request-page .sr-card-head {
        grid-area: head;
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
    }

    .sr-request-page .sr-no,
    .sr-request-page .dynamic-sr-card .sr-no {
        display: inline !important;
        font-size: 15px;
        font-weight: 700;
        color: #111827;
        white-space: normal !important;
        word-break: normal;
    }

    .sr-request-page .sr-status-badge {
        display: inline-flex !important;
        flex: 0 0 auto;
        padding: 4px 10px;
        font-size: 11px;
        white-space: nowrap;
    }

    .sr-request-page .sr-customer,
    .sr-request-page .sr-phone,
    .sr-request-page .sr-location,
    .sr-request-page .sr-date,
    .sr-request-page .dynamic-sr-card .sr-date {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        white-space: normal !important;
        margin: 0;
    }

    .sr-request-page .sr-customer { grid-area: name; }
    .sr-request-page .sr-phone { grid-area: phone; }
    .sr-request-page .sr-location { grid-area: location; }
    .sr-request-page .sr-date,
    .sr-request-page .dynamic-sr-card .sr-date { grid-area: date; }

    .sr-request-page .sr-location .sr-icon {
        display: none !important;
    }

    .sr-request-page .sr-customer .customer-name,
    .sr-request-page .dynamic-sr-card .customer-name,
    .sr-request-page .sr-field-value,
    .sr-request-page .sr-info span.sr-field-value,
    .sr-request-page .sr-info span.masked-mobile,
    .sr-request-page .masked-mobile {
        display: inline-block !important;
        width: auto;
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere;
        font-size: 15px !important;
        font-weight: 600;
        line-height: 1.4;
        color: #111827;
        writing-mode: horizontal-tb !important;
    }

    .sr-request-page .sr-field-value {
        display: flex !important;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .sr-request-page .dynamic-sr-card .sr-actions {
        grid-area: actions;
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100%;
        margin: 4px 0 0 !important;
        padding-top: 4px;
        justify-content: flex-start;
        gap: 8px;
    }

    #appCapsule.sr-request-page .dynamic-sr-card .sr-actions .btn,
    #appCapsule.sr-request-page .dynamic-sr-card .sr-actions .btn-sm {
        min-height: 40px !important;
        height: auto !important;
        width: auto !important;
        padding: 8px 16px !important;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }

    #appCapsule.sr-request-page .dynamic-sr-card .sr-actions .sr-icon-btn {
        width: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
    }

    .sr-request-page .dynamic-sr-card .sr-actions .table-action-button,
    .sr-request-page .sr-actions .table-action-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border-radius: 12px;
    }

    .sr-request-page .dynamic-sr-card .status-chip {
        margin: 0;
    }
}

@media (max-width: 767px) {
    .search-sr-page .search-sr-results .admin-list-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .search-sr-page .search-sr-results .dataTables_paginate {
        text-align: center;
    }
}

.reassign-find-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reassign-find-row .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.reassign-find-row .btn {
    flex: 0 0 auto;
    min-height: 38px !important;
}

#appCapsule.invoice-update-page .reassign-find-row .form-control {
    min-height: 38px;
}

/* =========================================================
   ADMINISTRATION PAGES
   ========================================================= */

#appCapsule .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

#appCapsule .container-fluid {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.input-group-addon {
    display: none;
}

.page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 14px;
}

.page-toolbar h2,
.page-toolbar h4 {
    margin: 0;
    color: #172033;
    font-size: 16px;
    font-weight: 700;
}

#appCapsule .btn-default {
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.control-label {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
}

.form-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check-row .form-check-input {
    margin: 0;
}

.form-check-row .control-label,
.form-check-row label {
    margin: 0 !important;
    font-weight: 600;
}

.panel,
.panel-primary {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

.panel-heading {
    padding: 16px 20px;
    color: #111827 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f0f2f6;
    font-size: 16px;
    font-weight: 700;
}

.panel-heading h4 {
    margin: 0;
    color: inherit;
    font-size: 16px;
}

.panel-body {
    padding: 16px 20px 20px;
}

.menu-box {
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.menu-item {
    padding: 8px 4px;
    border-bottom: 1px solid #edf0f4;
}

.menu-item:hover {
    background: #eff6ff;
}

.menu-item label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    font-weight: 500 !important;
    cursor: pointer;
}

.btn-space {
    margin-right: 10px;
}

.thead-light th {
    background: #f8fafc;
    color: #334155;
}

.table-nowrap th,
.table-nowrap td {
    white-space: nowrap;
}

.icon-action-delete {
    color: #dc2626;
    font-size: 16px;
}

.icon-action-download {
    color: #C8102E;
    font-size: 16px;
}

.row-status-active {
    background: #ecfdf5;
}

.row-status-inactive {
    background: #fef2f2;
}

.dataTables_wrapper {
    width: 100%;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin: 10px 0;
    font-size: 13px;
    color: #64748b;
}

.dataTables_wrapper .dataTables_length {
    float: left;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    min-height: 38px;
    margin-left: 8px;
    padding: 6px 10px;
    border: 1px solid #dce2ea;
    border-radius: 10px;
    background: #ffffff;
    color: #172033;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 220px;
}

.dataTables_wrapper .dataTables_info {
    clear: both;
    padding-top: 8px;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
}

.dataTables_wrapper > .admin-list-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
}

#appCapsule .dataTables_wrapper.dts .dataTables_scroll {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

#appCapsule .dataTables_wrapper.dts .dataTables_scrollBody {
    background: #ffffff;
}

.table-scroll-panel:has(.dataTables_wrapper.dts),
.admin-list-page .admin-list-table-wrap:has(.dataTables_wrapper.dts),
.admin-list-page .admin-list-table-wrap:has(.dataTables_wrapper.dts) > table,
.admin-list-page .admin-list-table-wrap:has(.dataTables_wrapper.dts) > form,
.admin-list-grid:has(.dataTables_scroll),
#appCapsule.dms-completed-page .admin-list-grid:has(.dataTables_scroll),
#appCapsule.dms-supervisor-page .admin-list-grid:has(.dataTables_scroll) {
    max-height: none !important;
    overflow: visible !important;
}

#appCapsule .dataTables_wrapper.dts .dataTables_paginate {
    display: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    margin: 2px !important;
    padding: 0 10px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #334155 !important;
    box-shadow: none !important;
    font-weight: 600;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #C8102E !important;
    border-color: #C8102E !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #f8fafc !important;
    border-color: #e5e7eb !important;
    color: #94a3b8 !important;
    cursor: default;
}

.dataTables_wrapper .dataTables_processing {
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
    color: #334155;
    font-weight: 600;
}

#appCapsule .dataTables_wrapper table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
}

#appCapsule .dataTables_wrapper table.dataTable thead th,
#appCapsule .dataTables_wrapper table.dataTable thead td {
    padding: 8px 10px;
    border-bottom: 0;
    background: #C8102E;
    color: #ffffff;
}

#appCapsule .dataTables_wrapper table.dataTable tbody td {
    padding: 5px 10px;
    height: 42px;
    line-height: 1.3;
    border-bottom: 1px solid #edf0f4;
}

#appCapsule .table-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #eff6ff;
    color: #C8102E;
    text-decoration: none;
    cursor: pointer;
}

    #appCapsule .table-action-button:hover {
        background: #C8102E;
        color: #ffffff;
        text-decoration: none;
    }

    #appCapsule .table-action-button.danger {
        background: #fef2f2;
        color: #b91c1c;
    }

    #appCapsule .table-action-button.danger:hover {
        background: #b91c1c;
        color: #ffffff;
    }

.admin-list-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gap-1 { gap: 4px; }

@media (min-width: 768px) {
    .text-md-end { text-align: right !important; }
}

/* =========================================================
   REPORTS PAGES
   ========================================================= */

#appCapsule .border {
    border: 1px solid #e5e7eb !important;
}

#appCapsule select:not(.form-control):not(.form-select),
#appCapsule input[type="month"],
#appCapsule input.MonthYr {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #dce2ea;
    border-radius: 10px;
    background: #ffffff;
    color: #172033;
    font-size: 14px;
}

.print-document,
#appCapsule .container.mt-3 {
    max-width: 960px;
    margin: 0 auto 24px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.print-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #64748b;
    color: #ffffff;
}

.print-banner h1 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
}

.print-banner img {
    max-height: 48px;
}

#appCapsule .table thead th[colspan] {
    background: #1d4ed8;
    color: #ffffff;
}

/* =========================================================
   CALL CENTER PAGES
   ========================================================= */

body.bg-white {
    margin: 0;
    min-height: 100vh;
    background: #f5f7fb;
    color: #172033;
    font-family: Inter, "Segoe UI", sans-serif;
}

body.bg-white .appHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

body.bg-white .appHeader.transparent,
body.bg-white .appHeader.no-border {
    background: #ffffff;
    box-shadow: none;
}

body.bg-white .appHeader .left,
body.bg-white .appHeader .right {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    height: 56px;
}

body.bg-white .appHeader .left { left: 8px; }
body.bg-white .appHeader .right { right: 8px; }

body.bg-white .appHeader .headerButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 56px;
    color: #172033;
    text-decoration: none;
}

body.bg-white .appHeader .headerButton ion-icon {
    font-size: 24px;
}

body.bg-white .appHeader .pageTitle {
    font-size: 15px;
    font-weight: 700;
}

body.bg-white #appCapsule {
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 16px 32px;
}

body.bg-white #appCapsule.page-wide {
    max-width: 1100px;
}

body.bg-white .login-form .section-title {
    justify-content: center;
    border-bottom: 0;
}

.imaged.square {
    border-radius: 12px;
}

.modal-overlay .form-control {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #dce2ea;
    border-radius: 10px;
    background: #ffffff;
    color: #172033;
    font-size: 14px;
    box-shadow: none;
}

.modal-overlay textarea.form-control {
    min-height: 88px;
    resize: vertical;
}

.modal-overlay label,
.modal-overlay .form-label {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.modal-overlay .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.modal-overlay .btn-primary {
    color: #ffffff;
    background: #C8102E;
    border-color: #C8102E;
}

.modal-overlay .btn-secondary {
    color: #ffffff;
    background: #475569;
    border-color: #475569;
}

.disclaimer-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.disclaimer-wrapper input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.disclaimer-wrapper label {
    margin: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 500 !important;
    line-height: 1.45;
}

.error-page {
    max-width: 420px;
    margin: 0 auto;
    padding: 24px 8px 96px;
    text-align: center;
}

.error-page .title {
    margin: 16px 0 12px;
    color: #172033;
    font-size: 24px;
    font-weight: 700;
}

.error-page .text {
    color: #475569;
    font-size: 14px;
}

.fixed-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    min-height: 84px;
    padding: 8px 16px env(safe-area-inset-bottom);
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}

.fixed-footer > div {
    width: 100%;
}

.alert-outline-success {
    background: transparent;
    color: #16a34a;
    border: 1px solid #16a34a;
}

.form-actions-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.reminder-icon {
    cursor: pointer;
    font-size: 18px;
    color: #dc2626;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
}

.modal-overlay.show {
    display: flex !important;
}

.modal-overlay .modal-box,
.modal-overlay .custom-modal-content {
    display: flex;
    flex-direction: column;
    width: 900px;
    max-width: calc(100% - 32px);
    max-height: 85vh;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.modal-box-sm {
    width: 350px !important;
}

.modal-overlay .modal-header,
.custom-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #edf0f4;
}

.modal-overlay .modal-header h5,
.custom-modal-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.modal-overlay .modal-body,
.custom-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
}

.modal-overlay .modal-footer,
.custom-modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #edf0f4;
}

.close-btn {
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}

.history-section h6 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
}

.history-table-wrap {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.history-table-wrap table,
.comment-table-wrapper table {
    table-layout: fixed;
    width: 100%;
    margin-bottom: 0;
}

.history-table-wrap th:nth-child(1),
.history-table-wrap td:nth-child(1),
.comment-table-wrapper th:nth-child(1),
.comment-table-wrapper td:nth-child(1) {
    width: 70px;
    text-align: center;
    vertical-align: top;
}

.history-table-wrap th:nth-child(3),
.history-table-wrap td:nth-child(3),
.comment-table-wrapper th:nth-child(3),
.comment-table-wrapper td:nth-child(3) {
    width: 220px;
    vertical-align: top;
    word-break: break-word;
}

.history-table-wrap th:nth-child(4),
.history-table-wrap td:nth-child(4),
.comment-table-wrapper th:nth-child(4),
.comment-table-wrapper td:nth-child(4) {
    width: 110px;
    white-space: nowrap;
    vertical-align: top;
}

.history-table-wrap td:nth-child(2),
.comment-table-wrapper td:nth-child(2) {
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.comment-parent-row td {
    background: #f8fafc;
}

.comment-reply-row td:nth-child(2) {
    padding-left: 12px;
}

.comment-reply-badge {
    display: inline-block;
    margin: 0 6px 0 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
    white-space: nowrap;
}

.table-sm th,
.table-sm td {
    padding: 8px 10px;
    font-size: 12px;
}

.table-light th {
    background: #f8fafc;
    color: #334155;
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1;
}

@media (max-width: 576px) {
    .modal-overlay.show {
        align-items: flex-end;
    }

    .modal-overlay .modal-box,
    .modal-overlay .custom-modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 95vh;
        border-radius: 12px 12px 0 0;
    }

    .custom-modal-footer,
    .modal-overlay .modal-footer {
        justify-content: stretch;
    }

    .custom-modal-footer .btn,
    .modal-overlay .modal-footer .btn {
        flex: 1 1 100%;
    }
}

/* =========================================================
   PORTED FROM oldstyle.css (missing selectors only)
   Existing style.css rules above are left unchanged.
   Login isolate below still wins for auth pages.
   ========================================================= */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}

.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-flex { display: inline-flex !important; }
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.flex-wrap { flex-wrap: wrap !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.w-100 { width: 100% !important; }
.img-fluid { max-width: 100%; height: auto; }

.m-1 { margin: 8px !important; }
.m-2 { margin: 12px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: 24px !important; }
.mt-5 { margin-top: 32px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: 24px !important; }
.mb-5 { margin-bottom: 32px !important; }
.pt-0 { padding-top: 0 !important; }
.pt-3 { padding-top: 16px !important; }
.pb-1 { padding-bottom: 8px !important; }
.pb-3 { padding-bottom: 16px !important; }
.p-2 { padding: 12px !important; }
.p-3 { padding: 16px !important; }
.p-4 { padding: 24px !important; }

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5,
.col-md-6, .col-md-8, .col-md-9, .col-lg-7 {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    padding: 0 8px;
}

@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333%; max-width: 8.333%; }
    .col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-md-5 { flex: 0 0 41.666%; max-width: 41.666%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
}

.col-lg-6, .col-lg-8 {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    padding: 0 8px;
}

@media (min-width: 992px) {
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; }
    .col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; }
}

.collapse:not(.show) {
    display: none;
}

.collapsing {
    height: 0;
    overflow: hidden;
}

.accordion {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

.accordion .item + .item {
    border-top: 1px solid #edf0f4;
}

.accordion-header {
    position: relative;
}

.accordion-header .btn {
    justify-content: flex-start !important;
    width: 100%;
    min-height: 48px;
    padding: 8px 44px 8px 14px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #172033;
    font-size: 14px;
    font-weight: 600;
    text-align: left !important;
}

.accordion-header .btn:hover,
.accordion-header .btn:active {
    background: #f8fafc !important;
}

.accordion-header .btn ion-icon {
    margin-right: 10px;
    font-size: 20px;
    color: #C8102E;
}

.accordion-header .btn:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg);
}

.accordion-header .btn.collapsed:after {
    margin-top: -3px;
    transform: rotate(-45deg);
}

.accordion-content {
    padding: 4px 16px 16px;
}

.accordion-content .title {
    margin: 0 0 2px;
    color: #C8102E;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.accordion-content .text.wrap,
.accordion-content h5 {
    margin: 0 0 8px;
    color: #172033;
    font-size: 14px;
    font-weight: 600;
    word-break: break-word;
}

.accordion-content h5.mobile-no-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

.divider {
    display: flex;
    align-items: center;
    height: 1px;
    background: #e5e7eb;
}

.toast-box.toast-top {
    top: calc(var(--header-height, 66px) + 12px);
}

.toast-box.toast-center {
    top: 50%;
    left: 50%;
    width: auto;
    min-width: 260px;
    transform: translate(-50%, -50%);
    text-align: center;
}

.toast-box.toast-center.show {
    display: block;
}

.toast-box.toast-center .in {
    display: block;
    padding: 0;
}

.toast-box.toast-center .in ion-icon {
    width: 48px;
    height: 48px;
    margin: 0 0 8px;
    font-size: 48px;
}

.tap-to-close {
    cursor: pointer;
}

.listview {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

.listview > li {
    position: relative;
    display: block;
    min-height: 48px;
    padding: 10px 16px;
}

.listview > li:not(:last-child) {
    border-bottom: 1px solid #edf0f4;
}

.simple-listview > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.image-listview > li {
    padding: 0;
    min-height: 0;
}

.image-listview > li .item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 50px;
    padding: 10px 16px;
}

.image-listview > li .item .image,
.image-listview > li .item .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    margin-right: 14px;
    border-radius: 50%;
    font-size: 18px;
}

.image-listview > li .item .in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: #f8fafc;
}

.table-bordered {
    border: 1px solid #e5e7eb;
}

.table-bordered td,
.table-bordered th {
    border: 1px solid #e5e7eb;
}

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

.table-dark {
    color: #e2e8f0;
    background: #0f172a;
}

.custom-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
}

.custom-control-input {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
}

.custom-control-label {
    margin: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group-text {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #dce2ea;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
}

.input-group .form-control {
    flex: 1 1 auto;
}

.verify-input {
    max-width: 190px;
    height: 72px !important;
    margin: auto;
    padding: 0 8px !important;
    color: #172033;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 5px;
    text-align: center !important;
}

.search-form {
    display: block;
    width: 100%;
}

.content-header {
    min-height: 0;
}

.bg-light {
    background: #f8fafc;
}

.no-border {
    border: 0 !important;
}

.custom-file-upload {
    position: relative;
    display: flex;
    width: 100%;
    height: 220px;
}

.custom-file-upload input[type="file"] {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.custom-file-upload label {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    overflow: hidden;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}

.custom-file-upload label span {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    padding: 10px 16px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    transform: translateY(-50%);
}

.custom-file-upload label span ion-icon {
    font-size: 48px;
    color: #94a3b8;
}

.custom-file-upload label.file-uploaded {
    background-size: cover;
    background-position: center;
}

.status {
    font-size: 14px;
    font-weight: 600;
}

.status .label,
.status .value025 {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.invoice {
    position: relative;
    overflow: hidden;
    margin: 8px;
    padding: 24px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.invoice-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
}

.invoice-logo img {
    height: 50px;
}

.invoice-id {
    color: #64748b;
    font-size: 12px;
}

.invoice-person {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.invoice-to,
.invoice-from {
    font-size: 12px;
}

.invoice-from {
    text-align: right;
}

.invoice-to h4,
.invoice-from h4 {
    margin: 0 0 8px;
    color: #172033;
    font-size: 14px;
}

.invoice-signature .signature-block,
.signature-block {
    display: inline-flex;
    min-width: 180px;
    min-height: 72px;
    padding: 8px 24px 36px;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 12px;
}

.invoice-bottom {
    padding-top: 24px;
    color: #64748b;
    font-size: 11px;
    text-align: center;
}

.invoiceBackgroundLogo {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translate(0, -50%) rotate(25deg);
    pointer-events: none;
}

.invoiceBackgroundLogo img {
    width: 90%;
    opacity: .08;
}

.imaged.w200 {
    width: 200px !important;
}

/* =========================================================
   GLOBAL APP UI — TECHNICIAN DASHBOARD LANGUAGE
   Restyle remaining lists, forms, tables, tabs, and chrome
   so they match Technician / Dashboard. Login isolate below
   still wins on auth pages.
   ========================================================= */

body:not(.login-page) .page-content > #appCapsule:not(.extra-header-active) {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body:not(.login-page) #appCapsule .section.mt-1,
body:not(.login-page) #appCapsule .section.mt-2 {
    margin-top: 0 !important;
}

body:not(.login-page) #appCapsule .wide-block.pt-2,
body:not(.login-page) #appCapsule .wide-block.pt-3 {
    padding-top: 16px !important;
}

body:not(.login-page) #appCapsule .wide-block.pb-2,
body:not(.login-page) #appCapsule .wide-block.pb-3 {
    padding-bottom: 20px !important;
}

body:not(.login-page) #appCapsule .form-control,
body:not(.login-page) #appCapsule .form-select,
.modal .form-control {
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body:not(.login-page) #appCapsule .btn-success:hover,
.modal .btn-success:hover {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

body:not(.login-page) #appCapsule .btn-danger:hover,
.modal .btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

body:not(.login-page) #appCapsule .btn-info:hover {
    background: #0369a1;
    border-color: #0284c7;
    color: #ffffff;
}

body:not(.login-page) #appCapsule .btn-outline-primary:hover,
.modal .btn-outline-primary:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}

    .page-toolbar .btn {
        min-height: 42px;
        padding: 8px 18px;
        border-radius: 10px;
    }

#appCapsule table.table-bordered,
#appCapsule .table-bordered,
#appCapsule .table-bordered td,
#appCapsule .table-bordered th {
    border: 0;
}

#appCapsule .table-striped tbody tr:nth-of-type(odd) td {
    background: #f8fafc;
}

#appCapsule .table-striped tbody tr:hover td {
    background: #eff6ff;
}

#appCapsule .table-responsive,
.table-scroll-panel {
    background: #ffffff;
}

.custom-file-upload:not(:has(input[type="file"])) {
    display: none;
}

.custom-file-upload {
    height: 180px;
}

    .custom-file-upload label {
        border: 1px dashed #bfdbfe;
        border-radius: 16px;
        background: linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
        transition: border-color .2s ease, background .2s ease;
    }

        .custom-file-upload label:hover {
            border-color: #C8102E;
            background: #eff6ff;
        }

        .custom-file-upload label span {
            color: #334155;
        }

            .custom-file-upload label span ion-icon {
                display: block;
                margin: 0 auto 8px;
                font-size: 42px;
                color: #C8102E;
            }

.print-banner {
    background: linear-gradient(135deg, #C8102E 0%, #3b82f6 50%, #6366f1 100%);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .18);
}

.print-document,
#appCapsule .container.mt-3 {
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

#appCapsule .btn-block {
    min-height: 46px;
    border-radius: 12px;
}

.form-actions {
    padding-top: 8px;
}

    .form-actions .btn {
        min-width: 120px;
    }

body:not(.login-page) #appCapsule .form-group.boxed {
    margin-bottom: 16px;
}

.sr-empty-state {
    padding: 36px 16px;
    color: #64748b;
    text-align: center;
    font-size: 14px;
    background: #f8fafc;
    border: 1px dashed #dbe3ee;
    border-radius: 14px;
}

#appCapsule .card-actions .btn {
    min-height: 36px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    body:not(.login-page) #appCapsule .section {
        border-radius: 14px;
    }

    #appCapsule .section-title {
        min-height: 54px;
        padding: 12px 14px;
        font-size: 15px;
    }

    #appCapsule .wide-block {
        padding: 14px 12px 16px;
    }

    #appCapsule .card-header {
        min-height: 48px;
        padding: 10px 12px;
        font-size: 13px;
    }

    .extraHeader .nav-tabs {
        padding: 3px;
    }
}

/* =========================================================
   LOGIN / AUTH — isolate from later #appCapsule and AdminLTE
   ========================================================= */

html.login-page-root,
html.login-page-root body.login-page,
body.login-page {
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    flex-direction: initial !important;
    width: 100%;
    min-height: 100%;
    background-color: transparent !important;
    background-image: url("/images/photo/racoldbackground.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

body.login-page .login-card .form-links a.text-muted {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* =========================================================
   LAYOUT SHELL — footer always visible, no page scrollbar
   Loaded last so it wins over earlier min-height: 100vh rules.
   ========================================================= */

html:not(.login-page-root),
body:not(.login-page) {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    html:not(.login-page-root)::-webkit-scrollbar,
    body:not(.login-page)::-webkit-scrollbar {
        display: none !important;
    }

body:not(.login-page) .app-shell {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body:not(.login-page) .app-main {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body:not(.login-page) .page-content {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    body:not(.login-page) .page-content::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    body:not(.login-page) .page-content::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 8px;
    }

body:not(.login-page) .Layout-footer {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    min-height: 44px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

body:not(.login-page) .page-content > #appCapsule {
    height: auto !important;
    min-height: 0 !important;
}

@media (max-width: 768px) {
    body:not(.login-page) .page-content {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:not(.login-page) .Layout-footer {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Knowledge Base add/update stays in the viewport; scroll only if the form is taller. */
body:not(.login-page) .page-content:has(.kb-form-page) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body:not(.login-page) .page-content:has(.kb-form-page) > #appCapsule.kb-form-page {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* =========================================================
   ADMIN LIST PAGES — one-line toolbar, no page scroll
   ========================================================= */

body:not(.login-page) .page-content:has(.admin-list-page) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body:not(.login-page) .page-content:has(.admin-list-page) > #appCapsule.admin-list-page {
    display: flex !important;
    flex: 1 1 0% !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.admin-list-page .admin-list-card {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    margin-bottom: 0 !important;
    overflow: hidden;
}

.admin-list-page .admin-list-toolbar {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f2f6;
}

.admin-list-page .admin-list-title {
    margin-right: auto;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-list-page .admin-list-inline-message {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 6px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-list-page .admin-list-add,
.admin-list-page .admin-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 0;
    margin-bottom: 0;
    white-space: nowrap;
}

.admin-list-page .admin-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-list-page .admin-list-toolbar .btn {
    min-height: 36px !important;
    padding: 6px 14px !important;
}

.admin-list-page .admin-list-filters {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 16px 0;
}

.admin-list-page .admin-list-filters .form-group,
.admin-list-page .admin-list-filters .admin-list-filter-field {
    margin: 0;
    min-width: 160px;
    flex: 1 1 160px;
}

.admin-list-page #admin-list-length,
.admin-list-page #admin-list-filter {
    display: flex;
    align-items: center;
}

.admin-list-page .dataTables_length,
.admin-list-page .dataTables_filter {
    float: none !important;
    margin: 0 !important;
}

.admin-list-page .dataTables_wrapper > .dataTables_length,
.admin-list-page .dataTables_wrapper > .dataTables_filter {
    display: none !important;
}

.admin-list-page .dataTables_length label,
.admin-list-page .dataTables_filter label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.admin-list-page .dataTables_length select {
    display: inline-block !important;
    width: auto !important;
    min-width: 64px;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
}

.admin-list-page .dataTables_filter input,
.admin-list-page .admin-list-search {
    display: inline-block !important;
    width: 200px !important;
    min-width: 160px;
    min-height: 36px !important;
    margin: 0 !important;
}

.admin-list-page .admin-list-toolbar:not(:has(.admin-list-add)):not(:has(.admin-list-actions)) .admin-list-search {
    margin-left: auto !important;
}

.admin-list-page .admin-list-filters .form-label {
    margin-bottom: 4px;
    font-size: 12px;
}

.admin-list-page .admin-list-filters .form-control {
    min-height: 36px;
}

.admin-list-page .admin-list-filters {
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f2f6;
}

.admin-list-page .admin-list-filters .btn {
    min-height: 38px !important;
    margin-bottom: 2px;
}

.admin-list-page .admin-list-filters .btn {
    min-height: 36px !important;
    margin-bottom: 8px;
}

.technician-master-page .admin-list-card {
    overflow: visible;
}

.technician-master-page .admin-list-toolbar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 4;
}

.technician-master-page .technician-filter-inline {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    margin: 0;
    gap: 8px;
}

.technician-master-page .technician-filter-inline > label {
    margin: 0;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.technician-master-page .technician-filter-inline .btn {
    flex: 0 0 auto;
    margin: 0 !important;
}

.technician-master-page .searchable-select {
    position: relative;
    flex: 1 1 280px;
    min-width: 180px;
    max-width: 420px;
}

#appCapsule.technician-master-page .searchable-select-source,
.technician-master-page .searchable-select-source {
    display: none !important;
    width: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden;
    position: absolute;
}

.technician-master-page .searchable-select-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 36px !important;
    padding: 4px 32px 4px 10px !important;
    text-align: left;
    color: #1e293b;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.4.8 6 5.4 10.6.8 12 2.2 6 8.2 0 2.2z'/%3E%3C/svg%3E") no-repeat right 10px center;
    cursor: pointer;
}

.technician-master-page .searchable-select-toggle.is-placeholder {
    color: #94a3b8;
}

.technician-master-page .searchable-select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.technician-master-page .searchable-select.is-open .searchable-select-menu {
    display: block;
}

.technician-master-page .searchable-select-input {
    display: block !important;
    width: calc(100% - 16px) !important;
    min-width: 0 !important;
    min-height: 32px !important;
    margin: 8px;
}

.technician-master-page .searchable-select-list {
    max-height: 220px;
    overflow: auto;
    padding: 0 0 4px;
}

.technician-master-page .searchable-select-group {
    padding: 6px 12px 4px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.technician-master-page .searchable-select-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: #1e293b;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.technician-master-page .searchable-select-item:hover,
.technician-master-page .searchable-select-item.is-active {
    background: #f8fafc;
    color: #C8102E;
}

.technician-master-page .searchable-select-empty {
    padding: 8px 12px;
    color: #94a3b8;
    font-size: 12px;
}

.technician-master-page .technician-selected {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 12px;
    border: 1px solid #fecdd3;
    border-radius: 10px;
    background: #fff1f2;
}

.technician-master-page .technician-selected-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #C8102E;
    color: #ffffff;
    font-size: 14px;
}

.technician-master-page .technician-selected-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.technician-master-page .technician-selected-label {
    color: #9f1239;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.technician-master-page .technician-selected-name {
    overflow: hidden;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technician-master-page .technician-empty {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 220px;
    color: #64748b;
    text-align: center;
}

.technician-master-page .technician-empty ion-icon {
    font-size: 36px;
    color: #C8102E;
}

.technician-master-page .technician-empty strong {
    color: #111827;
}

.technician-master-page .admin-list-toolbar .btn i,
.technician-master-page .admin-list-toolbar .btn .fas {
    margin-right: 6px;
}

.admin-list-page .admin-list-table-wrap {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    align-items: stretch;
}

.admin-list-page .admin-list-empty {
    margin: 0;
    padding: 24px 16px;
    color: #64748b;
    font-size: 13px;
}

.admin-list-page .admin-list-table-wrap > table,
.admin-list-page .admin-list-table-wrap > .table-responsive,
.admin-list-page .admin-list-table-wrap > form {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: auto;
}

.admin-list-page .admin-list-table-wrap > table {
    table-layout: auto;
}

.admin-list-page .admin-list-table-wrap table thead th,
.admin-list-page .admin-list-table-wrap table thead th[colspan] {
    background: #C8102E !important;
    color: #ffffff !important;
}

.admin-list-page .admin-list-table-wrap table tbody td {
    height: 40px;
    padding: 6px 12px;
    vertical-align: middle;
}

.admin-list-page .admin-list-table-wrap table thead th:last-child,
.admin-list-page .admin-list-table-wrap table tbody td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.admin-list-page .table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.admin-list-page .admin-center-table,
.admin-list-page .dataTables_wrapper table.admin-center-table {
    table-layout: fixed !important;
    width: 100% !important;
}

.admin-list-page .admin-center-table thead th,
.admin-list-page .admin-center-table tbody td,
.admin-list-page .dataTables_wrapper table.admin-center-table thead th,
.admin-list-page .dataTables_wrapper table.admin-center-table tbody td {
    text-align: center !important;
    vertical-align: middle !important;
}

.admin-list-page .admin-center-table thead th:last-child,
.admin-list-page .admin-center-table tbody td:last-child,
.admin-list-page .dataTables_wrapper table.admin-center-table thead th:last-child,
.admin-list-page .dataTables_wrapper table.admin-center-table tbody td:last-child {
    width: auto !important;
    text-align: center !important;
}

.admin-list-page .admin-center-table .table-actions {
    display: flex !important;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.admin-list-page .admin-list-table-wrap:has(.admin-wide-table),
.admin-list-page .admin-list-table-wrap:has(.admin-wide-table) .dataTables_wrapper,
.admin-list-page .admin-list-table-wrap:has(.admin-wide-table) .admin-list-grid {
    max-width: 100%;
    overflow-x: hidden !important;
}

.admin-list-page .admin-wide-table,
.admin-list-page table.dataTable.admin-wide-table,
.admin-list-page .dataTables_wrapper table.admin-wide-table {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.admin-list-page .admin-wide-table thead th,
.admin-list-page .admin-wide-table tbody td,
.admin-list-page table.dataTable.admin-wide-table thead th,
.admin-list-page table.dataTable.admin-wide-table tbody td,
.admin-list-page .dataTables_wrapper table.admin-wide-table thead th,
.admin-list-page .dataTables_wrapper table.admin-wide-table tbody td {
    box-sizing: border-box !important;
    height: auto;
    min-width: 0 !important;
    padding: 6px 8px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1.35;
}

.admin-list-page table.dataTable.admin-wide-table > thead > tr > th:not(.sorting_disabled) {
    padding-right: 18px !important;
}

.admin-list-page .admin-wide-table .col-narrow {
    width: 52px !important;
    text-align: center;
}

.admin-list-page .admin-wide-table .col-status {
    width: 88px !important;
    text-align: center;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.admin-list-page .admin-wide-table .col-action {
    width: 56px !important;
    text-align: center;
    white-space: nowrap !important;
}

.admin-list-page .dataTables_wrapper {
    display: flex !important;
    flex: 0 1 auto;
    flex-direction: column;
    min-height: 0;
    height: auto !important;
    overflow: hidden;
}

.admin-list-page .admin-list-grid {
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto;
    /* border-radius: 14px; */
    border-radius: 0;
}

#appCapsule.admin-list-page .admin-list-grid,
#appCapsule.admin-list-page .admin-list-grid .dataTables_scroll,
#appCapsule.admin-list-page .dataTables_wrapper.dts .dataTables_scroll {
    /* border-radius: 14px; */
    border-radius: 0 !important;
}

#appCapsule.admin-list-page .admin-list-grid table thead th,
#appCapsule.admin-list-page .admin-list-grid table thead th:first-child,
#appCapsule.admin-list-page .admin-list-grid table thead th:last-child {
    /* border-top-left-radius: 10px; */
    /* border-top-right-radius: 10px; */
    border-radius: 0 !important;
}

.admin-list-page .admin-list-footer {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid #f0f2f6;
}

.admin-list-page .dataTables_info,
.admin-list-page .dataTables_paginate {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.admin-list-page .dataTables_wrapper table.dataTable thead th,
.admin-list-page .dataTables_wrapper table.dataTable tbody td,
.admin-list-page .admin-list-table-wrap table thead th,
.admin-list-page .admin-list-table-wrap table tbody td {
    padding: 5px 10px;
}

.admin-list-page .dataTables_wrapper table.dataTable thead th,
.admin-list-page .admin-list-table-wrap table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

@media (max-width: 768px) {
    .admin-list-page .admin-list-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
    }

    .admin-list-page .admin-list-add,
    .admin-list-page .admin-list-actions {
        margin-left: 0;
    }

    .admin-list-page .dataTables_filter input,
    .admin-list-page .admin-list-search {
        width: 140px !important;
        min-width: 120px;
    }
}

/* =========================================================
   ADMIN FORMS + ASSIGN MENU
   ========================================================= */

body:not(.login-page) .page-content:has(#appCapsule.admin-form-page),
body:not(.login-page) .page-content:has(.admin-form-page) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body:not(.login-page) .page-content:has(#appCapsule.admin-form-page)::-webkit-scrollbar,
body:not(.login-page) .page-content:has(.admin-form-page)::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body:not(.login-page) .page-content > #appCapsule.admin-form-page {
    display: flex !important;
    flex: 1 1 0% !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-card {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #ffffff;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f2f6;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-title {
    display: block;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-subtitle {
    display: none;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 10px 16px 12px;
    overflow: hidden;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-grid {
    display: grid;
    flex: 0 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 12px;
    align-content: start;
    align-items: start;
    min-height: 0;
    overflow: hidden;
}

body:not(.login-page) #appCapsule.admin-form-page.admin-form-dense .admin-form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 10px;
}

body:not(.login-page) #appCapsule.admin-form-page.admin-form-2col .admin-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

#appCapsule.admin-form-page .influencer-doc-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 32px;
}

#appCapsule.admin-form-page .influencer-doc-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

#appCapsule.admin-form-page .influencer-doc-option input {
    margin: 0;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-section {
    display: none;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-body label {
    margin-bottom: 2px;
    color: #334155;
    font-size: 11px;
    font-weight: 600;
}

body:not(.login-page) #appCapsule.admin-form-page .form-control,
body:not(.login-page) #appCapsule.admin-form-page .form-select {
    min-height: 32px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
}

body:not(.login-page) #appCapsule.admin-form-page textarea.form-control {
    min-height: 52px !important;
    max-height: 72px;
    resize: vertical;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f2f6;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-hint {
    display: none;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-heading {
    min-width: 0;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-header .btn {
    min-height: 32px !important;
    padding: 4px 10px !important;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-grid .form-group {
    margin-bottom: 0 !important;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-span-2 {
    grid-column: span 2;
}

body:not(.login-page) #appCapsule.admin-form-page .form-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 0 12px 0 0;
}

body:not(.login-page) #appCapsule.admin-form-page .form-check-input {
    margin: 0;
    float: none;
    width: 16px;
    height: 16px;
}

body:not(.login-page) #appCapsule.admin-form-page .form-check-label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-span-3 {
    grid-column: 1 / -1;
}

body:not(.login-page) #appCapsule.admin-form-page .form-control[readonly] {
    background: #dcdcdc;
    color: #475569;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-actions .btn {
    min-width: 96px;
    min-height: 32px !important;
    padding: 4px 12px !important;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-actions .btn-outline-secondary {
    color: #475569 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

body:not(.login-page) #appCapsule.admin-form-page .admin-form-actions .btn-outline-secondary:hover {
    background: #f8fafc !important; 
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

/* =========================================================
   FRANCHISEE MASTER FORM
   ========================================================= */

body:not(.login-page) .page-content:has(#appCapsule.franchisee-form-page) {
    padding: 8px 12px !important;
    overflow: hidden !important;
}

body:not(.login-page) .page-content > #appCapsule.franchisee-form-page {
    display: flex !important;
    flex: 1 1 0% !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
}

#appCapsule.franchisee-form-page .franchisee-form-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 6;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
}

#appCapsule.franchisee-form-page .franchisee-form-title {
    color: #111827;
    font-size: 15px;
    font-weight: 700;
}

#appCapsule.franchisee-form-page .franchisee-form-toolbar .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px !important;
    padding: 6px 14px !important;
    margin: 0 !important;
}

#appCapsule.franchisee-form-page .franchisee-form-actions {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #f0f2f6;
}

#appCapsule.franchisee-form-page .franchisee-form-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px !important;
    padding: 6px 16px !important;
    margin: 0 !important;
}

#appCapsule.franchisee-form-page .section {
    margin-bottom: 0 !important;
    border-radius: 12px;
}

#appCapsule.franchisee-form-page .section-title {
    min-height: 0;
    padding: 8px 12px;
    font-size: 13px;
}

#appCapsule.franchisee-form-page .wide-block,
#appCapsule.franchisee-form-page .wide-block.pt-2,
#appCapsule.franchisee-form-page .wide-block.pb-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 10px 12px 12px !important;
}

#appCapsule.franchisee-form-page .form-group,
#appCapsule.franchisee-form-page .form-group.boxed {
    margin-bottom: 0 !important;
}

#appCapsule.franchisee-form-page .form-group.boxed:not(:has(label)) {
    display: none !important;
}

#appCapsule.franchisee-form-page .form-group.boxed:has(.form-check-inline),
#appCapsule.franchisee-form-page .form-group.boxed:has(.table),
#appCapsule.franchisee-form-page .wide-block > .table-responsive,
#appCapsule.franchisee-form-page .wide-block > .btn {
    grid-column: 1 / -1;
}

#appCapsule.franchisee-form-page .form-group.boxed:has(#Address) {
    grid-column: span 2;
}

#appCapsule.franchisee-form-page .input-wrapper > br,
#appCapsule.franchisee-form-page .input-wrapper > .clear-input,
#appCapsule.franchisee-form-page .input-wrapper > input.form-control[readonly]:not([name]):not([id]) {
    display: none !important;
}

#appCapsule.franchisee-form-page .input-wrapper .label,
#appCapsule.franchisee-form-page label:not(.form-check-label) {
    margin-bottom: 2px;
    font-size: 11px;
}

#appCapsule.franchisee-form-page .form-control,
#appCapsule.franchisee-form-page .form-select,
#appCapsule.franchisee-form-page select.form-control {
    min-height: 32px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
}

#appCapsule.franchisee-form-page .form-check-inline {
    margin: 0 12px 4px 0;
}

#appCapsule.franchisee-form-page .form-check-label {
    font-size: 12px;
    font-weight: 500;
}

#appCapsule.franchisee-form-page .wide-block > .btn {
    justify-self: start;
    min-height: 34px !important;
    margin-top: 4px !important;
}

#appCapsule.franchisee-form-page .table-responsive {
    margin-top: 0 !important;
}

@media (max-width: 992px) {
    #appCapsule.franchisee-form-page .wide-block,
    #appCapsule.franchisee-form-page .wide-block.pt-2,
    #appCapsule.franchisee-form-page .wide-block.pb-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    #appCapsule.franchisee-form-page .wide-block,
    #appCapsule.franchisee-form-page .wide-block.pt-2,
    #appCapsule.franchisee-form-page .wide-block.pb-3 {
        grid-template-columns: 1fr;
    }

    #appCapsule.franchisee-form-page .form-group.boxed:has(#Address) {
        grid-column: 1;
    }
}

.assign-menu-page .assign-menu-form {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.assign-menu-page .assign-menu-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: auto;
}

.assign-menu-page .assign-menu-role {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.assign-menu-page .assign-menu-toolbar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.assign-menu-page .assign-menu-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.assign-menu-page .admin-list-actions {
    margin-left: 0;
}

.assign-menu-page .assign-menu-wrap {
    flex: 1 1 0%;
    min-height: 0;
    overflow: auto;
    padding: 12px 16px 16px;
}

.assign-menu-page .assign-menu-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.assign-menu-page .assign-menu-group {
    min-width: 0;
    padding: 12px 14px 14px;
    border: 0.5px solid #f8fafc;
    /* border: 1px solid #e8edf3; */
    border-radius: 12px; 
    /* background: #f8fafc; */ 
}

.assign-menu-page .assign-menu-group-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.assign-menu-page .assign-menu-group-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.assign-menu-page .assign-menu-item {
    display: flex;
    align-items: flex-start;
    min-height: 42px;
    margin: 0;
    padding: 8px 10px;
    gap: 8px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.assign-menu-page .assign-menu-item.is-echo {
    display: none;
}

.assign-menu-page .assign-menu-item span {
    min-width: 0;
    line-height: 1.35;
}

.assign-menu-page .assign-menu-item:hover {
    background: #eff6ff;
    border-color: #dbeafe;
}

.assign-menu-page .assign-menu-item input,
.assign-menu-page .assign-menu-group-title input {
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.assign-menu-page .assign-menu-empty {
    margin: 0;
}

@media (max-width: 992px) {
    body:not(.login-page) #appCapsule.admin-form-page .admin-form-grid,
    body:not(.login-page) #appCapsule.admin-form-page.admin-form-dense .admin-form-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-span-2 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    body:not(.login-page) .page-content:has(#appCapsule.admin-form-page) {
        padding: 10px !important;
        overflow: auto !important;
    }

    body:not(.login-page) .page-content > #appCapsule.admin-form-page {
        height: auto !important;
        overflow: visible !important;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-card {
        flex: 0 0 auto !important;
        overflow: visible !important;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-body {
        /* overflow: hidden; */
        height: auto;
        overflow: visible;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-actions .btn {
        width: 100%;
        min-height: 44px !important;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-grid {
        grid-template-columns: 1fr;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-span-2,
    body:not(.login-page) #appCapsule.admin-form-page .admin-form-span-3 {
        grid-column: 1;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-actions .btn {
        flex: 1 1 auto;
    }

    .admin-form-page .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-form-page .admin-form-span-2 {
        grid-column: 1;
    }

    .admin-form-page .admin-form-actions .btn {
        flex: 1 1 auto;
    }

    .assign-menu-page .assign-menu-select-all {
        margin-left: 0;
    }

    .assign-menu-page .assign-menu-toolbar-end {
        width: 100%;
        justify-content: flex-start;
    }

    .assign-menu-page .assign-menu-group-items {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   REMUNERATION LIST
   ========================================================= */

body:not(.login-page) #appCapsule .form-control[hidden],
body:not(.login-page) #appCapsule input[type="hidden"] {
    display: none !important;
    min-height: 0;
    padding: 0;
    border: 0;
}

.remuneration-page .remuneration-alert {
    margin: 10px 16px 0;
}

.remuneration-page .remuneration-inline-message {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 6px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remuneration-page .remuneration-filter-bar:has(.remuneration-inline-message) .list-search {
    margin-left: 0;
}

.remuneration-page .remuneration-filter-bar {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f2f6;
}

/* Changed: name/code are read-only chips so year + search stay on the same row. */
.remuneration-page .remuneration-meta {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.remuneration-page .remuneration-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 4px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.remuneration-page .remuneration-meta-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.remuneration-page .remuneration-meta-value {
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remuneration-page .remuneration-filter-bar .form-control {
    flex: 0 1 160px;
    width: auto !important;
    min-width: 140px;
    min-height: 38px !important;
}

.remuneration-page .list-search {
    position: relative;
    flex: 1 1 240px;
    min-width: 180px;
    max-width: 360px;
    margin-left: auto;
}

.remuneration-page .list-search .admin-list-search,
.remuneration-page .list-search .form-control {
    width: 100% !important;
    min-width: 0;
    padding-left: 34px;
    padding-right: 32px;
}

.remuneration-page .list-search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
    transform: translateY(-50%);
}

.remuneration-page .list-search-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.remuneration-page .list-search-clear.is-visible {
    display: inline-flex;
}

.remuneration-page .dms-add-new,
.remuneration-page .remuneration-filter-bar .admin-list-add {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 0;
}

.remuneration-page .remuneration-filter-bar .btn {
    min-height: 38px !important;
    white-space: nowrap;
}

/* Changed: compact row height so 10 entries fit on one page without a tall scroll area. */
#appCapsule.remuneration-page table thead th {
    padding: 8px 10px;
}

#appCapsule.remuneration-page table tbody td,
#appCapsule.remuneration-page .dataTables_wrapper table.dataTable tbody td {
    padding: 5px 10px !important;
    height: 42px;
    line-height: 1.3;
    white-space: nowrap;
}

#appCapsule.remuneration-page table tbody tr {
    height: 42px;
}

#appCapsule.remuneration-page table tbody td.action-cell,
#appCapsule.remuneration-page table tbody td.sign-cell,
#appCapsule.remuneration-page .dataTables_wrapper table.dataTable tbody td.action-cell,
#appCapsule.remuneration-page .dataTables_wrapper table.dataTable tbody td.sign-cell {
    height: auto;
    min-height: 42px;
    vertical-align: middle;
    overflow: visible;
}

#appCapsule.remuneration-page .admin-list-table-wrap table thead th:last-child,
#appCapsule.remuneration-page .admin-list-table-wrap table tbody td.sign-cell,
#appCapsule.remuneration-page .admin-list-table-wrap table tbody td.action-cell:last-child {
    width: auto;
}

#appCapsule.new-remuneration-page #filterYear {
    flex: 0 0 188px;
    min-width: 188px;
    max-width: 188px;
}

#appCapsule.new-remuneration-page table.dataTable {
    table-layout: fixed !important;
}

#appCapsule.new-remuneration-page col.col-invoice,
#appCapsule.new-remuneration-page table thead th:nth-child(1),
#appCapsule.new-remuneration-page table tbody td:nth-child(1) { width: 18% !important; }

#appCapsule.new-remuneration-page col.col-month,
#appCapsule.new-remuneration-page table thead th:nth-child(2),
#appCapsule.new-remuneration-page table tbody td:nth-child(2) { width: 14% !important; }

#appCapsule.new-remuneration-page col.col-status,
#appCapsule.new-remuneration-page table thead th:nth-child(3),
#appCapsule.new-remuneration-page table tbody td:nth-child(3) { width: 12% !important; }

#appCapsule.new-remuneration-page col.col-action,
#appCapsule.new-remuneration-page table thead th:nth-child(4),
#appCapsule.new-remuneration-page table tbody td:nth-child(4) { width: 34% !important; }

#appCapsule.new-remuneration-page col.col-sign,
#appCapsule.new-remuneration-page table thead th:nth-child(5),
#appCapsule.new-remuneration-page table tbody td:nth-child(5) { width: 22% !important; }

#appCapsule.new-remuneration-page col.col-action:last-child,
#appCapsule.new-remuneration-page table thead th:nth-child(4):last-child,
#appCapsule.new-remuneration-page table tbody td:nth-child(4):last-child { width: 56% !important; }

#appCapsule.new-remuneration-page .remuneration-invoice-form,
#appCapsule.new-remuneration-page .digi-sign-form-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

#appCapsule.new-remuneration-page .remuneration-invoice-form .form-control {
    width: 150px;
    flex: 0 0 150px;
}

#appCapsule.new-remuneration-page .remuneration-invoice-form input[type="date"] {
    width: 168px;
    flex: 0 0 168px;
    padding-right: 6px;
}

#appCapsule.new-remuneration-page .digi-sign-form-row .aadhaar-mask-wrap,
#appCapsule.new-remuneration-page .digi-sign-form-row .form-control {
    width: 160px !important;
    flex: 0 0 160px;
}

#appCapsule.new-remuneration-page .digi-sign-form-row .aadhaar-mask-wrap .form-control {
    width: 100% !important;
    flex: 1 1 auto;
}

#appCapsule.new-remuneration-page .remuneration-invoice-form .btn,
#appCapsule.new-remuneration-page .digi-sign-form-row .btn {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    padding: 0 !important;
}

.remuneration-page .admin-list-table-wrap table thead th.text-center,
.remuneration-page .admin-list-table-wrap table tbody td.text-center {
    text-align: center;
}

.remuneration-page .remuneration-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#appCapsule.remuneration-page .table-action-button {
    width: 28px;
    height: 28px;
}

.remuneration-page table a.table-action-button {
    color: #C8102E;
    font-weight: 500;
}

.remuneration-page table a.table-action-button:hover {
    color: #ffffff;
    text-decoration: none;
}

#appCapsule.remuneration-page tr.order-details-row > td {
    height: auto !important;
    padding: 10px 12px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #edf0f4;
    white-space: normal;
}

.order-details-panel {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

#appCapsule.remuneration-page table.order-details-table {
    margin: 0;
    border-collapse: collapse;
}

#appCapsule.remuneration-page table.order-details-table thead th {
    padding: 7px 10px;
    color: #9f1239;
    background: #fff1f2;
    border-bottom: 1px solid #fecdd3;
    border-radius: 0;
    font-size: 10px;
    letter-spacing: .3px;
    text-transform: uppercase;
}

#appCapsule.remuneration-page table.order-details-table tbody td {
    height: auto !important;
    padding: 7px 10px !important;
    background: #ffffff !important;
    white-space: nowrap;
}

#appCapsule.remuneration-page .js-toggle-details.is-open {
    color: #ffffff;
    background: #C8102E;
}

.remuneration-page .remuneration-invoice-form {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: none;
    margin: 0;
}

#appCapsule.remuneration-page .remuneration-invoice-form .form-control,
#appCapsule.remuneration-page .digi-sign-form-row .form-control {
    min-height: 28px !important;
    height: 28px;
    padding: 2px 8px;
    width: 120px;
}

.remuneration-page .digi-sign-cell {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.remuneration-page .digi-sign-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

.remuneration-page .digi-sign-status.completed {
    color: #16a34a;
}

.remuneration-page .digi-sign-status.pending {
    color: #f59e0b;
}

.remuneration-page .digi-sign-status.rejected {
    color: #dc2626;
}

.pr-franchisee-filter {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pr-franchisee-filter #filterFranchisee {
    flex: 1 1 240px;
    width: auto !important;
    min-width: 200px;
    max-width: 360px;
}

.pr-franchisee-filter #filterFranchiseeCode {
    flex: 0 0 150px;
    width: 150px !important;
    min-width: 130px;
    max-width: 160px;
    background: #f8fafc;
    color: #111827;
    font-weight: 700;
}

.pr-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pr-status-completed {
    background: #dcfce7;
    color: #15803d;
}

.pr-status-pending {
    background: #fef3c7;
    color: #b45309;
}

.pr-status-rejected {
    background: #fee2e2;
    color: #b91c1c;
}

#appCapsule.dms-completed-page,
#appCapsule.dms-completed-page .admin-list-card,
#appCapsule.dms-completed-page .admin-list-table-wrap,
#appCapsule.dms-completed-page .dataTables_wrapper {
    min-width: 0 !important;
    max-width: 100%;
}

#appCapsule.dms-completed-page .admin-list-table-wrap,
#appCapsule.dms-completed-page .dataTables_wrapper {
    overflow: hidden !important;
}

#appCapsule.dms-completed-page .admin-list-grid {
    flex: 1 1 auto;
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: auto;
}

#appCapsule.dms-completed-page table,
#appCapsule.dms-completed-page .dataTables_wrapper table.dataTable {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 1600px !important;
    max-width: none !important;
    margin: 0 !important;
}

#appCapsule.dms-completed-page table thead th,
#appCapsule.dms-completed-page table tbody td,
#appCapsule.dms-completed-page .dataTables_wrapper table.dataTable tbody td {
    height: 42px;
    white-space: nowrap !important;
    overflow-wrap: normal;
    word-break: normal;
    vertical-align: middle;
}

#appCapsule.dms-completed-page table thead th:last-child,
#appCapsule.dms-completed-page table tbody td:last-child {
    width: auto !important;
    white-space: nowrap !important;
}

#appCapsule.dms-completed-page .dms-flag {
    justify-content: center;
}

#appCapsule.dms-supervisor-page .admin-list-grid {
    overflow-x: auto !important;
}

#appCapsule.dms-supervisor-page table.dms-supervisor-table,
#appCapsule.dms-supervisor-page .dataTables_wrapper table.dataTable.dms-supervisor-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 1180px !important;
    max-width: none !important;
}

#appCapsule.dms-supervisor-page table.dms-supervisor-table thead th,
#appCapsule.dms-supervisor-page .dataTables_wrapper table.dataTable.dms-supervisor-table thead th {
    height: auto !important;
    padding: 10px 8px !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
    vertical-align: bottom;
}

#appCapsule.dms-supervisor-page table.dms-supervisor-table tbody td,
#appCapsule.dms-supervisor-page .dataTables_wrapper table.dataTable.dms-supervisor-table tbody td {
    height: auto !important;
    min-height: 44px;
    padding: 8px !important;
    font-size: 12.5px;
    line-height: 1.35;
    color: #1f2937;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
}

#appCapsule.dms-supervisor-page table.dms-supervisor-table tbody tr:nth-child(even) td {
    background: #fafbfc;
}

#appCapsule.dms-supervisor-page table.dms-supervisor-table tbody tr:hover td {
    background: #fff5f6;
}

#appCapsule.dms-supervisor-page .dms-col-code { width: 92px; }
#appCapsule.dms-supervisor-page .dms-col-name { width: 16%; }
#appCapsule.dms-supervisor-page .dms-col-month { width: 88px; white-space: nowrap !important; overflow-wrap: normal; word-break: normal; }
#appCapsule.dms-supervisor-page .dms-col-type { width: 96px; }
#appCapsule.dms-supervisor-page .dms-col-status { width: 96px; text-align: center; white-space: nowrap !important; overflow-wrap: normal; word-break: normal; }
#appCapsule.dms-supervisor-page .dms-col-invoice { width: 12%; }
#appCapsule.dms-supervisor-page .dms-col-sap { width: 13%; }
#appCapsule.dms-supervisor-page .dms-col-remark { width: 14%; }
#appCapsule.dms-supervisor-page .dms-col-date { width: 96px; white-space: nowrap !important; overflow-wrap: normal; word-break: normal; }
#appCapsule.dms-supervisor-page .dms-col-flag { width: 72px; text-align: center; white-space: nowrap !important; overflow-wrap: normal; word-break: normal; }
#appCapsule.dms-supervisor-page .dms-col-action { width: 64px !important; text-align: center; white-space: nowrap !important; }

#appCapsule.dms-supervisor-page .dms-code,
#appCapsule.dms-supervisor-page .dms-sap {
    display: inline-block;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#appCapsule.dms-supervisor-page .dms-code {
    background: #f3f4f6;
    color: #111827;
}

#appCapsule.dms-supervisor-page .dms-sap {
    background: #fff1f2;
    color: #9f1239;
    border: 1px solid #fecdd3;
}

#appCapsule.dms-supervisor-page .dms-empty {
    color: #9ca3af;
    font-weight: 600;
}

#appCapsule.dms-supervisor-page .pr-status {
    display: inline-flex;
    justify-content: center;
    min-width: 52px;
}

.remuneration-page .digi-sign-form {
    width: auto;
    max-width: none;
}

.remuneration-page .digi-sign-form-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#appCapsule.remuneration-page .digi-sign-form-row .btn,
#appCapsule.remuneration-page .remuneration-invoice-form .btn {
    min-height: 28px !important;
    height: 28px;
    padding: 0 10px;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .remuneration-page .remuneration-filter-bar {
        flex-wrap: wrap;
    }

    .remuneration-page .remuneration-meta {
        flex: 1 1 100%;
    }

    .remuneration-page .remuneration-filter-bar .form-control,
    .remuneration-page .list-search {
        flex: 1 1 calc(50% - 10px);
        min-width: 160px;
        max-width: none;
        margin-left: 0;
    }

    .remuneration-page .admin-list-footer {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .remuneration-page .remuneration-filter-bar {
        padding: 10px 12px;
    }

    /* .remuneration-page .remuneration-meta,
    .remuneration-page .remuneration-meta-item,
    .remuneration-page .remuneration-filter-bar .form-control,
    .remuneration-page .list-search,
    .pr-franchisee-filter,
    .pr-franchisee-filter #filterFranchisee,
    .pr-franchisee-filter #filterFranchiseeCode {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
        width: 100% !important;
    } */

    .remuneration-page .remuneration-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .remuneration-page .remuneration-meta,
    .remuneration-page .remuneration-meta-item,
    .remuneration-page .remuneration-filter-bar .form-control,
    .remuneration-page .remuneration-filter-bar .dms-add-new,
    .remuneration-page .list-search,
    .pr-franchisee-filter,
    .pr-franchisee-filter #filterFranchisee,
    .pr-franchisee-filter #filterFranchiseeCode {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
        width: 100% !important;
    }

    .remuneration-page .remuneration-meta,
    .pr-franchisee-filter {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .remuneration-page .remuneration-filter-bar .form-control,
    .pr-franchisee-filter #filterFranchisee,
    .pr-franchisee-filter #filterFranchiseeCode {
        min-height: 44px !important;
        font-size: 16px;
    }

    .remuneration-page .list-search .form-control {
        min-height: 44px !important;
        font-size: 16px;
    }

    .remuneration-page .remuneration-invoice-form,
    .remuneration-page .digi-sign-form {
        max-width: 100%;
        min-width: 150px;
    }

    .remuneration-page .admin-list-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .remuneration-page .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #appCapsule.remuneration-page .dataTables_scrollBody {
        /* height: calc(100vh - 230px); */
        height: 52vh !important;
        max-height: 52vh !important;
    }

    #appCapsule.remuneration-page .admin-list-table-wrap,
    #appCapsule.remuneration-page .admin-list-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
    }

    #appCapsule.dms-completed-page table,
    #appCapsule.dms-completed-page .dataTables_wrapper table.dataTable {
        /* min-width: 1600px !important; */
        min-width: 720px !important;
    }

    #appCapsule.dms-supervisor-page .admin-list-grid {
        overflow: visible !important;
    }

    #appCapsule.dms-supervisor-page table.dms-supervisor-table,
    #appCapsule.dms-supervisor-page .dataTables_wrapper table.dataTable.dms-supervisor-table {
        /* min-width: 1180px !important; */
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }

    #appCapsule.dms-supervisor-page table.dms-supervisor-table thead {
        display: none;
    }

    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody {
        display: block;
        width: 100%;
    }

    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody tr {
        display: block;
        width: auto;
        margin: 0 12px 12px;
        padding: 4px 0;
        border: 1px solid #e5e7eb;
        background: #ffffff;
    }

    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody td,
    #appCapsule.dms-supervisor-page .dataTables_wrapper table.dataTable.dms-supervisor-table tbody td {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: auto !important;
        height: auto !important;
        min-height: 0;
        padding: 8px 12px !important;
        white-space: normal !important;
        text-align: left !important;
        border-bottom: 1px solid #f0f2f6;
    }

    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
    }

    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody td.dataTables_empty {
        display: block;
        text-align: center !important;
    }

    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody td.dataTables_empty::before {
        content: none;
    }

    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody td .form-control,
    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody td select,
    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody td textarea {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 16px;
    }

    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody td textarea.form-control {
        min-height: 72px !important;
    }

    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody td .btn,
    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody td form {
        width: 100%;
    }

    #appCapsule.dms-supervisor-page table.dms-supervisor-table tbody td .btn {
        min-height: 44px;
        justify-content: center;
    }
}

/* Knowledge Base library */
.kb-page .kb-toolbar {
    align-items: center;
}

.kb-page .kb-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.kb-page .kb-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff4f4 0%, #ffe8e8 100%);
    color: #c41230;
    font-size: 16px;
}

.kb-page .kb-heading .admin-list-title {
    display: block;
    line-height: 1.2;
}

.kb-page .kb-count {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.kb-page .kb-filters {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 0;
}

.kb-page .kb-search-wrap {
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 360px;
    margin-left: auto;
}

.kb-page .kb-search-wrap .kb-search {
    width: 100% !important;
    min-width: 0;
    padding-left: 34px;
    padding-right: 32px;
}

.kb-page .kb-card.is-hidden {
    display: none !important;
}

.kb-page .kb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.kb-page .kb-chip span {
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    text-align: center;
}

.kb-page .kb-chip i {
    font-size: 12px;
}

.kb-page .kb-chip.is-active {
    border-color: #c41230;
    background: #c41230;
    color: #ffffff;
}

.kb-page .kb-chip.is-active span {
    background: rgba(255, 255, 255, .2);
    color: #ffffff;
}

.kb-page .kb-grid-wrap {
    padding: 12px 16px 16px;
    overflow-x: hidden;
    overflow-y: auto;
}

.kb-page .kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.kb-page .kb-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}

.kb-page .kb-card:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

.kb-page .kb-card-accent {
    height: 4px;
    background: #94a3b8;
}

.kb-page .kb-card-catalogue .kb-card-accent { background: #2563eb; }
.kb-page .kb-card-leaflets .kb-card-accent { background: #0d9488; }
.kb-page .kb-card-posters .kb-card-accent { background: #ea580c; }
.kb-page .kb-card-videos .kb-card-accent { background: #7c3aed; }
.kb-page .kb-card-others .kb-card-accent { background: #64748b; }

.kb-page .kb-card-body {
    padding: 12px 14px 14px;
}

.kb-page .kb-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.kb-page .kb-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.kb-page .kb-type-catalogue { background: #dbeafe; color: #1d4ed8; }
.kb-page .kb-type-leaflets { background: #ccfbf1; color: #0f766e; }
.kb-page .kb-type-posters { background: #ffedd5; color: #c2410c; }
.kb-page .kb-type-videos { background: #ede9fe; color: #6d28d9; }
.kb-page .kb-type-others { background: #e2e8f0; color: #334155; }

.kb-page .kb-card-title {
    margin: 0 0 6px;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.kb-page .kb-card-desc {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.kb-page .kb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    color: #94a3b8;
    text-align: center;
}

.kb-page .kb-empty[hidden] {
    display: none !important;
}

.kb-page .kb-empty i {
    font-size: 28px;
}

.kb-form-page .kb-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
    align-items: start;
}

.kb-form-page .kb-form-actions,
.kb-form-page .kb-form-files {
    margin-top: 12px;
}

.kb-form-page .kb-form-actions .form-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.kb-form-page .kb-side-actions {
    justify-content: flex-start;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.kb-form-page textarea.form-control {
    min-height: 88px;
    max-height: 160px;
    resize: vertical;
}

.kb-type-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kb-type-option {
    margin: 0;
    cursor: pointer;
}

.kb-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kb-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.kb-type-catalogue { background: #dbeafe; color: #1d4ed8; }
.kb-type-leaflets { background: #ccfbf1; color: #0f766e; }
.kb-type-posters { background: #ffedd5; color: #c2410c; }
.kb-type-videos { background: #ede9fe; color: #6d28d9; }
.kb-type-others { background: #e2e8f0; color: #334155; }

.kb-type-option input:checked + .kb-type {
    box-shadow: 0 0 0 2px currentColor;
}

.kb-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 120px;
    margin-bottom: 10px;
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
    cursor: pointer;
}

.kb-dropzone i {
    color: #c41230;
    font-size: 22px;
}

.kb-dropzone strong {
    color: #1e293b;
    font-size: 13px;
}

.kb-dropzone span {
    font-size: 12px;
}

.kb-dropzone.is-dragover {
    border-color: #c41230;
    background: #fff5f5;
}

.kb-dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.kb-file-name {
    margin: 8px 0 10px;
    color: #64748b;
    font-size: 12px;
}

.kb-form-page .kb-uploaded {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #edf0f4;
}

.kb-form-page .kb-uploaded .dms-attachment-wrap {
    max-height: none;
    overflow: visible;
}

.kb-form-page button.table-action-button {
    width: 28px;
    height: 28px;
}

.kb-upload-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.kb-upload-row .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 991px) {
    .kb-form-page .kb-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Changed: compact Service Request form without clipping field values. */
.sr-register-page .page-form {
    max-width: none;
}

body:not(.login-page) #appCapsule.sr-register-page .section-box,
#appCapsule.sr-register-page .section-box {
    margin-bottom: 10px;
    padding: 10px 14px 8px;
}

body:not(.login-page) #appCapsule.sr-register-page .section-title,
#appCapsule.sr-register-page .section-title,
#appCapsule.sr-register-page .section-box .section-title {
    display: block;
    min-height: 0;
    margin: 0 0 6px;
    padding: 0 0 6px;
    font-size: 14px;
    line-height: 1.3;
}

body:not(.login-page) #appCapsule.sr-register-page .row {
    margin: 0 -6px;
}

body:not(.login-page) #appCapsule.sr-register-page .form-group,
body:not(.login-page) #appCapsule.sr-register-page .form-group.boxed {
    margin-bottom: 8px;
}

body:not(.login-page) #appCapsule.sr-register-page label:not(.form-check-label):not(.custom-control-label):not(.sr-only),
#appCapsule.sr-register-page .label {
    margin-bottom: 3px;
    font-size: 12px;
}

body:not(.login-page) #appCapsule.sr-register-page .form-control,
body:not(.login-page) #appCapsule.sr-register-page .form-select {
    min-height: 36px;
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1.35;
    border-radius: 8px;
}

body:not(.login-page) #appCapsule.sr-register-page textarea.form-control,
#appCapsule.sr-register-page textarea.form-control {
    min-height: 76px;
    height: auto;
    padding: 8px 10px;
    line-height: 1.4;
    resize: vertical;
    overflow: auto;
}

body:not(.login-page) #appCapsule.sr-register-page .form-control[readonly] {
    overflow: visible;
    text-overflow: unset;
}

#appCapsule.sr-register-page .disclaimer-wrapper {
    margin-top: 2px;
    padding: 8px 10px;
}

#appCapsule.sr-register-page .invoice-update-actions {
    margin-top: 6px;
    margin-bottom: 0;
    padding-top: 8px;
}

@media (min-width: 768px) {
    body:not(.login-page) #appCapsule.sr-register-page .col-md-8 textarea.form-control {
        min-height: 98px;
    }
}

/* Changed: Amazon order upload card uses a shorter dropzone and normal action buttons. */
.upload-master-page .custom-file-upload {
    height: 132px;
    margin-bottom: 4px;
}

.upload-master-page .custom-file-upload label span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.upload-master-page .custom-file-upload label span i,
.upload-master-page .custom-file-upload label span .fa-cloud-upload-alt {
    display: block;
    margin: 0 auto 4px;
    color: #C8102E;
    font-size: 26px;
    font-style: normal;
}

.upload-master-page .custom-file-upload label span em {
    color: #94a3b8;
    font-size: 12px;
    font-style: normal;
}

.upload-master-page .custom-file-upload label.file-uploaded {
    background-image: none !important;
}

.upload-master-page .search-sr-grid > [class*="col-"] {
    display: flex;
}

.upload-master-page .search-sr-grid .invoice-update-form,
.upload-master-page .search-sr-grid .section-box {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.upload-master-page .search-sr-grid .form-actions {
    margin-top: auto;
}

@media (max-width: 767px) {
    /* patched: preserve original responsive behaviour and add a small-screen safety note */
    .kb-page .kb-toolbar {
        flex-wrap: wrap;
    }

    .kb-page .kb-heading,
    .kb-page .dms-add-new,
    .kb-page .list-search,
    .kb-page .kb-search-wrap {
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
    }

    .kb-page .kb-filters {
        padding-left: 12px;
        padding-right: 12px;
    }

    .kb-upload-row {
        flex-direction: column;
        align-items: stretch;
    }
}

input[readonly]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="image"]),
textarea[readonly],
select[readonly],
input:disabled:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="image"]),
textarea:disabled,
select:disabled,
.form-control[readonly],
.form-control:disabled,
.form-select:disabled,
.form-control-readonly {
    background-color: #dcdcdc !important;
    background-image: none !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

#HappyCode::-webkit-inner-spin-button,
#HappyCode::-webkit-outer-spin-button,
#SerialKey::-webkit-inner-spin-button,
#SerialKey::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#HappyCode,
#SerialKey {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* =========================================================
   GLOBAL MOBILE UI
   Project-wide responsive fixes for lists, forms, tables,
   toolbars, modals, and the app shell.
   ========================================================= */

@media (max-width: 991.98px) {
    body:not(.login-page) .app-main,
    body:not(.login-page) .page-content,
    body:not(.login-page) #appCapsule,
    body:not(.login-page) .section,
    body:not(.login-page) .card,
    body:not(.login-page) .admin-list-card,
    body:not(.login-page) .admin-form-card {
        min-width: 0;
        max-width: 100%;
    }

    body:not(.login-page) #appCapsule img,
    body:not(.login-page) #appCapsule video,
    body:not(.login-page) #appCapsule iframe,
    body:not(.login-page) #appCapsule canvas {
        max-width: 100%;
        height: auto;
    }

    body:not(.login-page) #appCapsule .row,
    .modal .row {
        margin-left: 0;
        margin-right: 0;
    }

    #appCapsule .col,
    .modal .col {
        flex: 1 1 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    body:not(.login-page) #appCapsule.admin-form-page.admin-form-2col .admin-form-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    body:not(.login-page) .page-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body:not(.login-page) .page-content:has(#appCapsule.admin-form-page),
    body:not(.login-page) .page-content:has(.admin-form-page),
    body:not(.login-page) .page-content:has(#appCapsule.franchisee-form-page) {
        padding: 8px !important;
        overflow: auto !important;
    }

    body:not(.login-page) .page-content:has(.admin-list-page) {
        overflow: hidden !important;
    }

    body:not(.login-page) .page-content:has(.admin-list-page) > #appCapsule.admin-list-page {
        overflow: hidden !important;
    }

    body:not(.login-page) #appCapsule .section,
    body:not(.login-page) #appCapsule .section.full {
        border-radius: 12px;
    }

    body:not(.login-page) #appCapsule.franchisee-form-page .wide-block,
    body:not(.login-page) #appCapsule.franchisee-form-page .wide-block.pt-2,
    body:not(.login-page) #appCapsule.franchisee-form-page .wide-block.pb-3 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px !important;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-grid,
    body:not(.login-page) #appCapsule.admin-form-page.admin-form-dense .admin-form-grid,
    body:not(.login-page) #appCapsule.admin-form-page.admin-form-2col .admin-form-grid {
        grid-template-columns: 1fr !important;
        overflow: visible;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-body {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-header,
    #appCapsule.franchisee-form-page .franchisee-form-toolbar,
    .page-toolbar,
    .admin-list-page .admin-list-toolbar,
    .technician-master-page .admin-list-toolbar,
    .kb-page .kb-toolbar,
    .assign-menu-page .assign-menu-toolbar-end {
        flex-wrap: wrap !important;
        align-items: stretch;
        gap: 8px;
    }

    .admin-list-page .admin-list-title,
    #appCapsule.franchisee-form-page .franchisee-form-title,
    body:not(.login-page) #appCapsule.admin-form-page .admin-form-title {
        width: 100%;
        margin-right: 0;
        white-space: normal;
    }

    .admin-list-page .admin-list-add,
    .admin-list-page .admin-list-actions,
    #appCapsule.franchisee-form-page .franchisee-form-toolbar .btn,
    body:not(.login-page) #appCapsule.admin-form-page .admin-form-header .btn,
    .admin-form-page .admin-form-actions,
    #appCapsule.franchisee-form-page .franchisee-form-actions {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .admin-list-page .admin-list-add .btn,
    .admin-list-page .admin-list-actions .btn,
    .admin-list-page .admin-list-toolbar .btn,
    .admin-form-page .admin-form-actions .btn,
    #appCapsule.franchisee-form-page .franchisee-form-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }

    .admin-list-page .dataTables_filter input,
    .admin-list-page .admin-list-search,
    .admin-list-page .list-search,
    .kb-page .list-search {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 100%;
    }

    .admin-list-page .admin-list-filters,
    .remuneration-page .remuneration-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-list-page .admin-list-filters .form-group,
    .admin-list-page .admin-list-filters .admin-list-filter-field,
    .admin-list-page .admin-list-filters .form-control,
    .admin-list-page .admin-list-filters .btn {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }

    .technician-master-page .technician-filter-inline {
        flex: 1 1 100%;
        flex-wrap: wrap;
        width: 100%;
    }

    .technician-master-page .searchable-select {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    .admin-list-page .admin-list-table-wrap,
    .admin-list-page .dataTables_wrapper,
    .search-sr-page .search-sr-results,
    #appCapsule .table-responsive,
    .modal .table-responsive,
    .assign-menu-page .assign-menu-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .admin-list-page .admin-list-table-wrap table,
    .admin-list-page table.dataTable,
    .search-sr-page .search-sr-results table,
    #appCapsule table.nowrap {
        min-width: 100%;
    }

    .admin-list-page .admin-list-footer,
    .admin-list-page .dataTables_wrapper > .dataTables_info,
    .admin-list-page .dataTables_wrapper > .dataTables_paginate,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 4px 8px;
        margin: 2px;
    }

    body:not(.login-page) #appCapsule .form-control,
    body:not(.login-page) #appCapsule .form-select,
    body:not(.login-page) #appCapsule select.form-control,
    .modal .form-control,
    .modal .form-select {
        width: 100%;
        max-width: 100%;
        min-height: 40px;
    }

    .form-group,
    .form-group.boxed,
    .input-wrapper {
        min-width: 0;
        max-width: 100%;
    }

    .form-check-inline {
        margin-right: 12px;
        margin-bottom: 6px;
    }

    .modal-dialog,
    .modalbox .modal-dialog {
        width: calc(100% - 12px) !important;
        max-width: none !important;
        margin: 6px auto !important;
    }

    .modal-content,
    .modalbox .modal-content {
        max-height: calc(100dvh - 12px);
        border-radius: 14px;
    }

    .extraHeader,
    .extraHeader.p-0 {
        padding: 8px 10px !important;
    }

    .extraHeader .nav-tabs,
    .extraHeader .nav-tabs.lined {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .page-content:has(> .extraHeader) > #appCapsule {
        padding: 12px 10px 20px;
    }

    .dashboard-overview,
    .dashboard-kpi-grid,
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-quick-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .upload-master-page .search-sr-grid > [class*="col-"] {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .invoice-update-actions,
    .form-actions,
    .custom-modal-footer,
    .modal-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .invoice-update-actions .btn,
    .form-actions .btn,
    .custom-modal-footer .btn,
    .modal-footer .btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 120px;
        justify-content: center;
    }

    .alert {
        margin-left: 0 !important;
        margin-right: 0 !important;
        word-break: break-word;
    }
}

@media (max-width: 479.98px) {
    .dashboard-overview,
    .dashboard-kpi-grid,
    .stat-grid,
    .quick-actions {
        grid-template-columns: 1fr;
    }

    .hero-quick-stats {
        grid-template-columns: 1fr 1fr !important;
    }

    .invoice-update-actions .btn,
    .form-actions .btn,
    .custom-modal-footer .btn,
    .modal-footer .btn,
    .admin-list-page .admin-list-toolbar .btn,
    .admin-form-page .admin-form-actions .btn {
        flex: 1 1 100%;
    }

    body:not(.login-page) #appCapsule .card-header,
    body:not(.login-page) #appCapsule .section-title {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 13px;
    }
}

/* start 'Track complaint status page layout and stepper' */
body.login-page #appCapsule.track-status-page {
    align-items: flex-start;
    justify-content: center;
}

body.login-page .login-form.track-status-layout {
    width: 100%;
    max-width: 1080px;
    text-align: left;
}

body.login-page .track-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    margin: 0 0 18px;
}

body.login-page .track-hero-copy {
    flex: 1 1 auto;
    min-width: 0;
}

/* old track complaint logo, stepper, and table styles
body.login-page .track-status-layout .login-brand {
    width: 240px;
    max-width: 240px;
    margin: 0 0 16px;
}
body.login-page .track-status-layout .login-brand .form-image {
    max-width: 240px !important;
}
body.login-page .track-back-link {
    margin: 0 0 14px;
}
body.login-page .track-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.login-page .track-steps .step {
    flex: 1 1 150px;
    margin: 0;
    padding: 12px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
body.login-page .track-steps .step.current {
    border-color: #C8102E;
    background: #C8102E;
    color: #ffffff;
}
body.login-page .track-status-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    vertical-align: middle;
}
body.login-page .track-table-card .card-body {
    padding: 0 0 8px;
}
body.login-page .track-table-card .table-responsive {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
@media (max-width: 520px) {
    body.login-page .track-page-title {
        font-size: 22px;
    }
    body.login-page .track-status-layout .login-brand,
    body.login-page .track-status-layout .login-brand .form-image {
        width: 180px;
        max-width: 180px !important;
    }
}
*/

body.login-page .track-status-layout .login-brand {
    width: 220px;
    max-width: 220px;
    margin: 0;
    flex: 0 0 auto;
}

body.login-page .track-status-layout .login-brand .form-image {
    max-width: 220px !important;
}

body.login-page .track-request-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

body.login-page .track-status-layout .card:hover {
    transform: none;
}

body.login-page .track-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.login-page .track-field {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    background: #f8fafc;
}

body.login-page .track-field .title {
    margin-bottom: 4px;
}

body.login-page .track-field h5 {
    margin: 0;
    overflow-wrap: anywhere;
}

body.login-page .track-page-title {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.3px;
    text-align: left;
}

body.login-page .track-page-subtitle {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
}

body.login-page .track-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

body.login-page .track-back-link:hover {
    color: #72e4f2;
}

body.login-page .track-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    counter-reset: track-step;
}

body.login-page .track-steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 78px;
    margin: 0;
    padding: 10px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

body.login-page .track-steps .step::before {
    content: counter(track-step);
    counter-increment: track-step;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

body.login-page .track-steps .step.current {
    border-color: #C8102E;
    background: #fff5f6;
    color: #9f1239;
}

body.login-page .track-steps .step.current::before {
    background: #C8102E;
    color: #ffffff;
}

body.login-page .track-status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #e5e7eb;
    vertical-align: middle;
}

body.login-page .track-table-card .card-body {
    padding: 12px;
}

body.login-page .track-table-card .table-responsive {
    border: 1px solid #eef2f6;
    border-radius: 12px;
    box-shadow: none;
}

body.login-page #appCapsule .track-table-card th,
body.login-page #appCapsule .track-table-card td {
    padding: 12px 14px;
}

@media (max-width: 860px) {
    body.login-page .track-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.login-page .track-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    body.login-page .track-steps {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    body.login-page .track-steps .step {
        flex: 0 0 140px;
    }
}

@media (max-width: 700px) {
    body.login-page .track-table-card thead {
        display: none;
    }

    body.login-page #appCapsule .track-table-card table,
    body.login-page #appCapsule .track-table-card tbody,
    body.login-page #appCapsule .track-table-card tr,
    body.login-page #appCapsule .track-table-card td {
        display: block;
        width: 100%;
    }

    body.login-page #appCapsule .track-table-card tr {
        margin-bottom: 10px;
        padding: 8px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #ffffff;
    }

    body.login-page #appCapsule .track-table-card td {
        padding: 8px 0;
        border-bottom: 0;
        background: transparent;
    }

    body.login-page #appCapsule .track-table-card td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: #C8102E;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
}

@media (max-width: 560px) {
    body.login-page .track-page-title {
        font-size: 22px;
    }

    body.login-page .track-fields {
        grid-template-columns: 1fr;
    }

    body.login-page .track-status-layout .login-brand,
    body.login-page .track-status-layout .login-brand .form-image {
        width: 180px;
        max-width: 180px !important;
    }
}
/* start 'Compact one-page track complaint status' */
body.login-page #appCapsule.track-status-page {
    align-items: stretch;
    height: 100dvh;
    overflow: hidden;
    padding: 10px 14px;
}

body.login-page .track-compact {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 8px;
}

body.login-page #appCapsule .track-compact > .card {
    flex: 0 0 auto;
    margin-bottom: 0;
}

body.login-page .track-compact .track-hero {
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    margin: 0;
}

body.login-page .track-compact .login-brand,
body.login-page .track-compact .login-brand .form-image {
    width: 148px;
    max-width: 148px !important;
}

body.login-page .track-compact .track-back-link {
    margin: 0 0 2px;
}

body.login-page .track-compact .track-page-title {
    margin: 0;
    font-size: 20px;
}

body.login-page .track-compact .track-page-subtitle {
    margin: 4px 0 0;
}

body.login-page #appCapsule .track-compact .card-header {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 13px;
}

body.login-page #appCapsule .track-compact .card-body {
    padding: 8px 12px;
}

body.login-page .track-compact .track-fields {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px 10px;
}

body.login-page .track-compact .track-field {
    padding: 2px 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.login-page .track-compact .track-steps .step {
    flex-direction: row;
    gap: 6px;
    min-height: 36px;
    padding: 4px 8px;
    font-size: 12px;
}

body.login-page .track-compact .track-steps .step::before {
    width: 18px;
    height: 18px;
    font-size: 10px;
}

body.login-page #appCapsule .track-compact .track-table-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

body.login-page #appCapsule .track-compact .track-table-card .card-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: auto;
}

body.login-page #appCapsule .track-compact .track-table-card .table-responsive {
    max-height: 100%;
}

body.login-page #appCapsule .track-compact .track-table-card th,
body.login-page #appCapsule .track-compact .track-table-card td {
    padding: 6px 10px;
    font-size: 12px;
}

@media (max-width: 860px) {
    body.login-page .track-compact .track-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body.login-page .track-compact .track-table-card thead {
        display: table-header-group;
    }

    body.login-page #appCapsule .track-compact .track-table-card table {
        display: table;
        width: 100%;
    }

    body.login-page #appCapsule .track-compact .track-table-card tbody {
        display: table-row-group;
    }

    body.login-page #appCapsule .track-compact .track-table-card tr {
        display: table-row;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    body.login-page #appCapsule .track-compact .track-table-card td {
        display: table-cell;
        width: auto;
        padding: 6px 8px;
        border-bottom: 1px solid #edf0f4;
        background: #ffffff;
    }

    body.login-page #appCapsule .track-compact .track-table-card td::before {
        content: none;
        display: none;
    }
}

@media (max-width: 560px) {
    body.login-page .track-compact .track-hero {
        gap: 6px;
    }

    body.login-page .track-compact .track-page-title {
        font-size: 18px;
    }

    body.login-page .track-compact .track-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* end 'Compact one-page track complaint status' */
/* end 'Track complaint status page layout and stepper' */

/* =========================================================
   PROJECT MOBILE
   Phone and small tablet. Desktop rules above stay as they are.
   ========================================================= */

@media (max-width: 768px) {
    body:not(.login-page) .page-content,
    body:not(.login-page) .page-content:has(.admin-list-page),
    body:not(.login-page) .page-content:has(.kb-form-page),
    body:not(.login-page) .page-content:has(#appCapsule.admin-form-page) {
        /* overflow: hidden; */
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 12px 10px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:not(.login-page) .page-content > #appCapsule,
    body:not(.login-page) .page-content:has(.admin-list-page) > #appCapsule.admin-list-page,
    body:not(.login-page) .page-content:has(.kb-form-page) > #appCapsule.kb-form-page,
    body:not(.login-page) .page-content > #appCapsule.admin-form-page {
        /* height: 100%; overflow: hidden; */
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .admin-list-page .admin-list-card,
    .admin-list-page .dataTables_wrapper,
    #appCapsule.admin-list-page .admin-list-grid {
        max-height: none !important;
        max-width: 100%;
    }

    /* #appCapsule .dataTables_scroll,
    #appCapsule .dataTables_wrapper.dts .dataTables_scroll {
        max-width: 100%;
        overflow: hidden;
        border-radius: 0;
    }

    #appCapsule .dataTables_scrollBody,
    #appCapsule .dataTables_wrapper.dts .dataTables_scrollBody {
        height: min(62vh, 560px) !important;
        max-height: 62vh !important;
    } */

    .admin-list-page .admin-list-table-wrap:has(.dataTables_scroll),
    .admin-list-page .dataTables_wrapper:has(.dataTables_scroll),
    #appCapsule.admin-list-page .admin-list-grid:has(.dataTables_scroll) {
        overflow-x: hidden !important;
    }

    #appCapsule .dataTables_scroll,
    #appCapsule .dataTables_wrapper.dts .dataTables_scroll {
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-radius: 0;
        -webkit-overflow-scrolling: touch;
    }

    #appCapsule .dataTables_scrollHead,
    #appCapsule .dataTables_scrollHeadInner,
    #appCapsule .dataTables_scrollBody,
    #appCapsule .dataTables_wrapper.dts .dataTables_scrollBody {
        /* height: min(62vh, 560px); */
        overflow: visible !important;
        width: max-content !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
    }

    #appCapsule .dataTables_scrollHead table,
    #appCapsule .dataTables_scrollBody table,
    #appCapsule .dataTables_wrapper.dts .dataTables_scrollBody table {
        width: max-content !important;
        min-width: 100%;
        margin: 0 !important;
        table-layout: fixed !important;
    }

    #appCapsule .dataTables_scrollHead table thead th,
    #appCapsule .dataTables_scrollBody table tbody td {
        box-sizing: border-box !important;
        width: 128px !important;
        min-width: 128px !important;
        max-width: 128px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #appCapsule .dataTables_scrollHead table thead th:nth-last-child(-n+2),
    #appCapsule .dataTables_scrollBody table tbody td:nth-last-child(-n+2) {
        width: 84px !important;
        min-width: 84px !important;
        max-width: 84px !important;
    }

    #appCapsule .table-responsive,
    #appCapsule .admin-list-table-wrap,
    #appCapsule .admin-list-grid,
    .modal .table-responsive,
    .modal .modal-body {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    #appCapsule.dms-completed-page table,
    #appCapsule.dms-completed-page .dataTables_wrapper table.dataTable {
        /* min-width: 1600px; */
        min-width: 720px !important;
    }

    #appCapsule.dms-supervisor-page .admin-list-grid,
    #appCapsule.dms-supervisor-page .admin-list-table-wrap,
    #appCapsule.dms-supervisor-page .dataTables_wrapper {
        overflow: visible !important;
    }

    .topbar,
    .app-header,
    .navbar.app-header,
    .topbar-left,
    .header-page-title {
        min-width: 0;
    }

    .header-page-title span {
        display: block;
        max-width: 46vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #appCapsule img,
    #appCapsule svg,
    #appCapsule video,
    #appCapsule iframe,
    #appCapsule canvas,
    .modal img {
        max-width: 100%;
        height: auto;
    }

    body:not(.login-page) #appCapsule .form-control,
    body:not(.login-page) #appCapsule .form-select,
    body:not(.login-page) #appCapsule select.form-control,
    body:not(.login-page) #appCapsule textarea.form-control,
    .modal .form-control,
    .modal .form-select,
    .modal textarea.form-control {
        width: 100%;
        max-width: 100%;
        font-size: 16px !important;
    }

    body:not(.login-page) #appCapsule .form-control,
    body:not(.login-page) #appCapsule .form-select,
    body:not(.login-page) #appCapsule select.form-control,
    .modal .form-control,
    .modal .form-select {
        min-height: 44px !important;
    }

    .admin-list-page .admin-list-toolbar,
    .admin-list-page .admin-list-actions,
    .admin-list-page .admin-list-filters,
    .remuneration-page .remuneration-filter-bar,
    .remuneration-page .remuneration-meta,
    .pr-franchisee-filter,
    #appCapsule .form-actions,
    .admin-form-page .admin-form-actions,
    .modal-footer,
    .custom-modal-footer {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        width: 100%;
        max-width: 100%;
    }

    .admin-list-page .admin-list-toolbar .btn,
    .admin-list-page .admin-list-actions .btn,
    .remuneration-page .remuneration-filter-bar .btn,
    .remuneration-page .dms-add-new,
    .admin-form-page .admin-form-actions .btn,
    #appCapsule .form-actions .btn,
    .modal-footer .btn,
    .custom-modal-footer .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .admin-list-page .admin-list-search,
    .admin-list-page .list-search,
    .remuneration-page .list-search,
    .kb-page .list-search {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
    }

    #appCapsule.admin-form-page .admin-form-grid,
    #appCapsule.admin-form-page.admin-form-dense .admin-form-grid,
    #appCapsule.admin-form-page.admin-form-2col .admin-form-grid,
    .content-grid {
        grid-template-columns: 1fr !important;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-card {
        /* max-height: 100%; overflow: hidden; */
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-body,
    body:not(.login-page) #appCapsule.admin-form-page .admin-form-grid {
        /* flex: 0 1 auto; min-height: 0; overflow: hidden; */
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-header .btn {
        width: auto;
        min-height: 40px !important;
    }

    body:not(.login-page) #appCapsule.admin-form-page .admin-form-actions {
        position: static !important;
        clear: both;
        margin-top: 12px;
    }

    .stat-grid,
    .dashboard-kpi-grid,
    .dashboard-overview,
    .hero-quick-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .modal-dialog,
    .modalbox .modal-dialog,
    .modal-overlay .modal-box,
    .modal-overlay .custom-modal-content {
        width: calc(100% - 16px) !important;
        max-width: none !important;
        margin: 8px auto !important;
    }

    .modal-body,
    .modalbox .modal-body,
    .modal-overlay .modal-body {
        max-height: calc(100dvh - 140px);
        overflow: auto;
    }

    .admin-list-page .dataTables_info,
    .admin-list-page .dataTables_paginate,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .stat-grid,
    .dashboard-kpi-grid,
    .dashboard-overview,
    .hero-quick-stats {
        grid-template-columns: 1fr !important;
    }

    .header-page-title span {
        max-width: 34vw;
    }
}

/* Changed: customer complaint page uses the main thin scrollbar and the same card grid.
   The public layout has no .page-content, so the window itself scrolls. */
html.scroll-smooth,
html.scroll-smooth body.bg-white {
    height: auto !important;
    max-height: none !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    -ms-overflow-style: auto;
}

html.scroll-smooth::-webkit-scrollbar,
html.scroll-smooth body.bg-white::-webkit-scrollbar {
    display: block !important;
    width: 8px;
    height: 8px;
}

html.scroll-smooth::-webkit-scrollbar-thumb,
html.scroll-smooth body.bg-white::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px; 
}

body.bg-white .customer-sr-header .customer-sr-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: min(220px, 58vw);
    object-fit: contain;
}

body.bg-white .customer-sr-header .right .headerButton {
    min-width: 40px;
}

#appCapsule.customer-sr-page,
#appCapsule.customer-sr-page *,
#appCapsule.customer-sr-page *::before,
#appCapsule.customer-sr-page *::after {
    box-sizing: border-box;
}

body.bg-white #appCapsule.customer-sr-page .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
}

#appCapsule.customer-sr-page .row > [class*="col-"] {
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
}

#appCapsule.customer-sr-page .form-control,
#appCapsule.customer-sr-page .form-select,
#appCapsule.customer-sr-page select.form-control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    #appCapsule.customer-sr-page .row > .col-md-4 {
        flex: 0 0 33.333333%;
        width: 33.333333%;
        max-width: 33.333333%;
    }

    #appCapsule.customer-sr-page .row > .col-md-6 {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    #appCapsule.customer-sr-page .row > .col-md-8 {
        flex: 0 0 66.666667%;
        width: 66.666667%;
        max-width: 66.666667%;
    }

    #appCapsule.customer-sr-page .row > .col-12:not(.col-md-4):not(.col-md-6):not(.col-md-8) {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* Changed: complaint success confirmation uses the same card as the registration form. */
body.bg-white #appCapsule.customer-success-page {
    max-width: 520px;
}

.customer-success-card {
    margin-top: 12px;
    padding: 28px 22px 22px;
    text-align: center;
}

.customer-success-card .success-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #dcfce7;
    color: #166534;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.customer-success-card .title {
    margin: 0 0 6px;
    color: #172033;
    font-size: 22px;
    font-weight: 700;
}

.customer-success-card .success-lead {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.customer-success-card .alert {
    margin: 18px 0 0;
    text-align: left;
}