:root {
    --navy: #041523;
    --navy-2: #071d30;
    --ink: #071c3d;
    --muted: #647a9a;
    --line: #dce5f0;
    --canvas: #f3f6fa;
    --red: #ef1838;
    --blue: #2463ff;
    --green: #12a150;
    --orange: #ef9000;
    --white: #fff;
    font-family: Inter, Arial, sans-serif;
    color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--canvas); font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }

.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;
}

/* Login */
.login-page {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    overflow: hidden;
    padding: 36px 20px;
    color: #fff;
    background:
        radial-gradient(circle at 52% 25%, rgba(14, 46, 70, .38), transparent 34%),
        linear-gradient(115deg, #000b13 0%, #061a2a 100%);
}
.login-lines { position: fixed; inset: 0; pointer-events: none; }
.login-lines::before, .login-lines::after { content: ""; position: absolute; height: 4px; opacity: .75; transform: rotate(-39deg); transform-origin: left center; }
.login-lines-red::before { width: 760px; left: -105px; top: 335px; background: #e72043; box-shadow: 0 0 6px rgba(231,32,67,.3); }
.login-lines-red::after { width: 700px; left: 56%; bottom: -55px; background: #ef2147; transform: rotate(-11deg); }
.login-lines-blue::before { width: 760px; right: -275px; bottom: 70px; background: #135aa5; transform: rotate(-21deg); }
.login-lines-blue::after { width: 530px; left: 0; top: 235px; height: 3px; background: #9d1935; }
.login-card {
    position: relative;
    z-index: 1;
    width: min(100%, 372px);
    padding: 34px 30px 26px;
    border: 1px solid rgba(239, 24, 56, .8);
    border-radius: 13px;
    background: rgba(6, 25, 39, .72);
    box-shadow: 0 24px 55px rgba(0,0,0,.34);
    backdrop-filter: blur(7px);
}
.login-logo, .brand-mark {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--red);
    color: #091624;
}
.login-logo { width: 82px; height: 82px; margin: 0 auto 20px; }
.logo-emblem-image { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.login-wordmark { display: block; width: 174px; height: auto; margin: 0 auto; }
.login-card h1 { margin: 0; text-align: center; font: 800 27px/1 Montserrat, sans-serif; letter-spacing: 4px; }
.login-subtitle { margin: 7px 0 26px; text-align: center; color: #e4e9ed; font-size: 14px; }
.field-group, .form-field { display: flex; flex-direction: column; gap: 7px; }
.field-group { margin-bottom: 15px; }
.field-group label, .form-field label { font-size: 12px; font-weight: 700; }
.field-group input {
    width: 100%;
    height: 47px;
    padding: 0 13px;
    border: 1px solid #a70f2a;
    border-radius: 7px;
    outline: 0;
    color: #16243a;
    background: #f6f7f9;
}
.field-group input:focus { border-color: #ff2b50; box-shadow: 0 0 0 3px rgba(239,24,56,.15); }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; font-size: 11px; }
.login-options a { font-weight: 600; }
.login-options a:hover { color: #ff425f; }
.check-label { display: flex; align-items: center; gap: 7px; }
.check-label input { width: 15px; height: 15px; accent-color: var(--red); }
.sign-in-button {
    width: 100%; height: 46px; border: 0; border-radius: 6px;
    color: #fff; background: linear-gradient(90deg, #ed1839, #f41e40);
    font-size: 12px; font-weight: 800; box-shadow: 0 7px 18px rgba(239,24,56,.18);
}
.sign-in-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.login-card footer { margin-top: 25px; color: #9aa7b4; text-align: center; font-size: 9px; line-height: 1.8; }
.auth-error, .auth-status { margin: -10px 0 17px; padding: 10px 12px; border-radius: 6px; font-size: 11px; }
.auth-error { color: #ffd8df; background: rgba(239,24,56,.2); border: 1px solid rgba(239,24,56,.45); }
.auth-status { color: #d9ffea; background: rgba(18,161,80,.2); border: 1px solid rgba(18,161,80,.45); }
.compact-auth { padding-top: 29px; }
.compact-auth .login-logo { width: 65px; height: 65px; }
.compact-auth h1 { font-size: 20px; letter-spacing: 2px; }
.back-login { display: block; margin-top: 20px; text-align: center; font-size: 12px; color: #c8d1db; }
.auth-help { margin: 16px 0 0; color: #aeb9c6; font-size: 11px; line-height: 1.55; text-align: center; }

/* Primary sign-in page */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.login-page.login-page--signin {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 32px 16px;
    isolation: isolate;
    overflow-x: hidden;
    overflow-y: auto;
    background: #080d18;
}
.login-backdrop {
    position: fixed;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.login-backdrop path { vector-effect: non-scaling-stroke; }
.login-page--signin .login-card--signin {
    width: min(390px, 100%);
    min-height: 470px;
    padding: 35px 29px 30px;
    border: 1px solid #b81739;
    border-radius: 16px;
    background: rgba(10, 18, 32, .95);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(4px);
}
.login-page--signin .login-logo {
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    overflow: hidden;
    border: 0;
    background: #f4f5f7;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .20);
}
.login-page--signin .logo-emblem-image {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: brightness(0);
}
.login-brand {
    margin: 0 0 20px;
    color: #f21f49;
    text-align: center;
    font-size: 10px;
    padding: 0;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.login-page--signin .login-subtitle {
    margin: 0 0 25px;
    color: #b8c0cf;
    font-size: 16px;
    line-height: 20px;
}
.login-page--signin .auth-error,
.login-page--signin .auth-status {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.45;
}
.login-form {
    display: flex;
    flex-direction: column;
}
.login-field {
    position: relative;
    display: flex;
    width: 100%;
    height: 48px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #8b98ad;
    background: #f5f6f8;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.login-field + .login-field { margin-top: 11px; }
.login-field:focus-within {
    border-color: #e31c47;
    box-shadow: 0 0 0 3px rgba(227, 28, 71, .22);
}
.login-field-icon {
    position: absolute;
    left: 15px;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.login-field input {
    width: 100%;
    height: 100%;
    padding: 0 15px 0 43px;
    border: 0;
    outline: 0;
    color: #3f4a5c;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
}
.login-field input::placeholder { color: #596476; opacity: 1; }
.login-field--password input { padding-right: 58px; }
.password-toggle {
    position: absolute;
    right: 10px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #8b98ad;
    background: transparent;
}
.password-toggle:hover { color: #5e6b80; background: #e9ecf1; }
.password-toggle:focus-visible { outline: 2px solid #e31c47; outline-offset: 1px; }
.password-eye {
    display: block;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.password-eye[hidden] { display: none; }
.password-toggle:disabled { cursor: not-allowed; opacity: .45; }
.login-page--signin .login-options {
    min-height: 20px;
    margin: 16px 0 20px;
    color: #c3cada;
    font-size: 11px;
}
.login-page--signin .login-options a { color: #d4d9e2; font-weight: 700; }
.login-page--signin .login-options a:focus-visible {
    border-radius: 3px;
    outline: 2px solid #e31c47;
    outline-offset: 3px;
}
.login-page--signin .check-label { gap: 8px; cursor: pointer; }
.login-page--signin .check-label input {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0;
    appearance: none;
    border: 1px solid #7d899d;
    border-radius: 5px;
    background: rgba(255, 255, 255, .04);
}
.login-page--signin .check-label input:checked { border-color: #ef1d46; background: #ef1d46; }
.login-page--signin .check-label input:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.login-page--signin .check-label input:focus-visible { outline: 2px solid #e31c47; outline-offset: 3px; }
.login-page--signin .sign-in-button {
    height: 46px;
    border-radius: 10px;
    background: #ef1d46;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 14px 25px rgba(239, 29, 70, .15);
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
.login-page--signin .sign-in-button:hover { box-shadow: 0 16px 28px rgba(239, 29, 70, .22); }
.login-page--signin .sign-in-button:focus-visible { outline: 3px solid rgba(255, 255, 255, .78); outline-offset: 3px; }
.login-page--signin .login-card footer {
    margin-top: 23px;
    color: #7f899c;
    font-size: 10px;
    line-height: 14px;
}

@media (max-width: 540px) {
    .login-page.login-page--signin { padding-block: 20px; }
    .login-page--signin .login-card--signin {
        min-height: 0;
        padding: 30px 22px;
        transform: none;
    }
    .login-brand { font-size: 10px; letter-spacing: 1.2px; }
}

@media (max-height: 540px) and (min-width: 541px) {
    .login-page--signin .login-card--signin {
        min-height: 0;
        padding-top: 28px;
        padding-bottom: 24px;
        transform: none;
    }
}

.login-version {
    position: fixed;
    bottom: 20px;
    left: 24px;
    z-index: 10;
    font-size: 11px;
    font-weight: 600;
    color: #5d7a97;
    letter-spacing: 0.3px;
    user-select: none;
    transition: color 0.15s ease;
}
.login-version:hover {
    color: #88a2bd;
}

@media (max-width: 540px), (max-height: 560px) {
    .login-version {
        position: static;
        width: min(390px, 100%);
        margin-top: 14px;
        padding-left: 6px;
        text-align: left;
    }
}

/* Shell */
.app-shell { min-height: 100vh; color: var(--ink); background: var(--canvas); }
.sidebar {
    position: fixed; z-index: 50; inset: 0 auto 0 0; width: 252px;
    display: flex; flex-direction: column; overflow-y: auto;
    color: #fff; background: linear-gradient(180deg, #061a2a 0%, #021321 100%);
    border-right: 1px solid rgba(255,255,255,.06); box-shadow: 7px 0 22px rgba(0,24,45,.08);
    transform: translateX(0);
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-block {
    position: relative;
    min-height: 178px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-close-btn {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    color: #c7dcf1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sidebar-close-btn:hover {
    background: rgba(239, 24, 56, 0.25);
    color: #ff6077;
    transform: scale(1.05);
}
.sidebar-close-btn:focus-visible {
    outline: 2px solid #ef1838;
    outline-offset: 2px;
}
.brand-mark { width: 68px; height: 68px; margin-bottom: 14px; }
.brand-wordmark { display: block; width: 122px; height: auto; }
.brand-subtitle { margin-top: 7px; text-align: center; color: #c7dcf1; font-size: 7px; font-weight: 700; letter-spacing: 1px; line-height: 1.45; }
.sidebar-nav { flex: 1; padding: 10px 9px 20px; }
.nav-section { margin: 15px 6px 8px; color: #79a0c5; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.nav-link, .logout-link { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 7px 8px; border: 0; border-radius: 7px; color: #fff; background: transparent; font-weight: 600; text-align: left; }
.nav-link:hover { background: rgba(255,255,255,.07); }
.nav-link.active { background: linear-gradient(90deg, #ef1638, #f21d3c); box-shadow: 0 8px 17px rgba(239,24,56,.17); }
.nav-link-danger { margin-top: 6px; color: #ff6077; border: 1px solid rgba(255, 62, 91, .16); }
.nav-link-danger:hover { color: #fff; background: rgba(239, 24, 56, .16); }
.nav-link-danger.active { color: #fff; border-color: transparent; }
.nav-icon { flex: 0 0 23px; height: 23px; display: grid; place-items: center; border-radius: 5px; color: #0c2944; background: #fff; font-size: 12px; font-weight: 800; }
.sidebar-footer { padding: 18px 9px; border-top: 1px solid rgba(255,255,255,.08); }
.logout-link { color: #ff304d; }
.logout-link:hover { background: rgba(239,24,56,.08); }
.sidebar-version {
    position: absolute;
    left: 10px;
    top: 8px;
    color: #5d7a97;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
    user-select: none;
    transition: color 0.15s ease;
}
.sidebar-version:hover {
    color: #88a2bd;
}
.main-area {
    min-height: 100vh;
    margin-left: 252px;
    min-width: 0;
    overflow-x: hidden;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop Collapsed Sidebar State */
@media (min-width: 781px) {
    html.sidebar-collapsed .sidebar,
    body.sidebar-collapsed .sidebar {
        width: 76px;
        transform: translateX(0);
        overflow-x: hidden;
    }
    html.sidebar-collapsed .main-area,
    body.sidebar-collapsed .main-area {
        margin-left: 76px;
    }
    .sidebar-collapsed .brand-block {
        min-height: 88px;
        flex-shrink: 0;
    }
    .sidebar-collapsed .brand-mark {
        width: 48px;
        height: 48px;
        margin-bottom: 0;
    }
    .sidebar-collapsed .brand-wordmark,
    .sidebar-collapsed .brand-subtitle,
    .sidebar-collapsed .sidebar-version,
    .sidebar-collapsed .nav-section,
    .sidebar-collapsed .nav-link > span:not(.nav-icon),
    .sidebar-collapsed .logout-link > span:not(.nav-icon) {
        display: none;
    }
    .sidebar-collapsed .sidebar-nav { padding: 12px 9px; }
    .sidebar-collapsed .nav-link,
    .sidebar-collapsed .logout-link {
        justify-content: center;
        gap: 0;
        padding: 10px 8px;
    }
    .sidebar-collapsed .nav-link { margin-bottom: 4px; }
    .sidebar-collapsed .sidebar-footer { padding: 14px 9px; }
}

.profile-bar {
    height: 65px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 32px;
    background: #fff;
    border-bottom: 1px solid #e2e8f1;
}
.profile-wrap { position: relative; }
.profile-button { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 0; border-radius: 9px; color: var(--ink); background: transparent; text-align: left; }
.profile-button:hover { background: #f3f6fa; }
.profile-avatar, .large-avatar { display: grid; place-items: center; border-radius: 50%; color: #fff; background: #12314f; font-weight: 800; }
.profile-avatar { width: 39px; height: 39px; border: 2px solid #bcd1e4; }
.profile-copy { display: flex; min-width: 150px; flex-direction: column; }
.profile-copy strong { font-size: 13px; }
.profile-copy small { margin-top: 3px; color: #527194; font-size: 10px; }
.chevron { color: #7890aa; }
.profile-menu { display: none; position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; width: 230px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 15px 35px rgba(4,21,35,.16); }
.profile-menu.open { display: block; }
.profile-menu-head { display: flex; flex-direction: column; gap: 4px; padding: 10px 11px 12px; border-bottom: 1px solid var(--line); }
.profile-menu-head span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.profile-menu a, .profile-menu button { display: block; width: 100%; padding: 10px 11px; border: 0; border-radius: 6px; color: var(--ink); background: transparent; text-align: left; font-weight: 600; }
.profile-menu a:hover, .profile-menu button:hover { background: #f0f5fb; }
.profile-menu-divider { height: 1px; background: var(--line); margin: 4px 0; }
.profile-menu-switch-wrap { padding: 2px 0; }
.profile-menu-switch-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 11px;
    border-radius: 6px;
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    user-select: none;
    transition: background 0.15s ease;
    cursor: pointer;
}
.profile-menu-switch-item:hover { background: #f0f5fb; }
.profile-menu-switch-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
}
.profile-menu-switch-label svg {
    color: var(--muted);
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.profile-menu-switch-item:hover .profile-menu-switch-label svg {
    color: var(--blue);
}
.profile-menu-switch-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.profile-menu-switch-status {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: color 0.15s ease;
}
.profile-menu-switch-status.is-on { color: var(--green); }
.profile-menu-switch-actions {
    display: flex;
    justify-content: flex-end;
    padding: 2px 11px 4px;
}
.profile-switch-test-btn {
    background: none;
    border: none;
    color: var(--blue);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    text-decoration: underline;
    transition: all 0.15s ease;
}
.profile-switch-test-btn:hover {
    color: #1a4cd2;
    background: #eef4ff;
    text-decoration: none;
}
.profile-menu-switch-feedback {
    margin: 4px 6px 2px;
    padding: 6px 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.35;
    color: #991b1b;
}

/* Custom toggle switch */
.pms-toggle-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}
.pms-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    pointer-events: none;
}
.pms-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #cbd5e1;
    border-radius: 22px;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pms-toggle-slider::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(4, 21, 35, 0.25);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pms-toggle-switch input:checked + .pms-toggle-slider {
    background-color: var(--blue);
}
.pms-toggle-switch input:checked + .pms-toggle-slider::before {
    transform: translateX(16px);
}
.pms-toggle-switch input:focus-visible + .pms-toggle-slider {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}
.pms-toggle-switch input:disabled + .pms-toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}
.sidebar-toggle,
.mobile-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: auto;
    border: 1px solid #dce5f0;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.sidebar-toggle:hover,
.mobile-menu:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--blue);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.sidebar-toggle:active,
.mobile-menu:active {
    transform: translateY(0);
}
.sidebar-toggle:focus-visible,
.mobile-menu:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}
.sidebar-toggle-icon {
    display: block;
    width: 20px;
    height: 20px;
    stroke: currentColor;
}
.page-content { padding: 31px 32px 48px; }
.page-heading { margin-bottom: 23px; }
.page-heading h1 { margin: 6px 0 8px; font: 800 clamp(25px, 2.1vw, 33px)/1.18 Montserrat, Inter, sans-serif; letter-spacing: -.5px; }
.page-heading > p:not(.eyebrow), .page-heading > div > p:not(.eyebrow) { margin: 0; color: #56708f; }
.eyebrow { margin: 0; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: 1.45px; }
.heading-with-badge, .heading-with-action { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.access-badge { flex: 0 0 auto; padding: 11px 14px; border: 1px solid #aacafe; border-radius: 7px; color: #1055cd; background: #f5f9ff; font-size: 12px; font-weight: 700; }
.heading-badges { display: flex; gap: 8px; }
.narrow-heading { max-width: 835px; margin-inline: auto; }

/* Components */
.panel { border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 9px 24px rgba(18,45,74,.045); }
.panel-heading { min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font: 700 16px Montserrat, sans-serif; }
.panel-heading a:not(.button) { color: #185fff; font-size: 12px; font-weight: 700; }
.button, a.button, button.button { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 700; text-decoration: none !important; white-space: nowrap; line-height: 1.2; }
.button-primary, a.button-primary, a.button-primary:visited, a.button-primary:hover, a.button-primary:focus, a.button-primary:active, button.button-primary, .panel-heading a.button-primary, .requests-actions a.button-primary, .dealer-actions a.button-primary { color: #ffffff !important; background: var(--blue) !important; border-color: var(--blue) !important; }
.button-success, a.button-success, a.button-success:visited, a.button-success:hover, a.button-success:focus, a.button-success:active, button.button-success, .panel-heading a.button-success { color: #ffffff !important; background: var(--green) !important; border-color: var(--green) !important; }
.button-danger, a.button-danger, a.button-danger:visited, a.button-danger:hover, a.button-danger:focus, a.button-danger:active, button.button-danger, .panel-heading a.button-danger { color: #ffffff !important; background: #d71938 !important; border-color: #d71938 !important; }
.button-light, a.button-light, a.button-light:visited, a.button-light:hover, a.button-light:focus, a.button-light:active, button.button-light, .panel-heading a.button-light, .requests-actions a.button-light, .dealer-actions a.button-light { color: var(--ink) !important; background: #ffffff !important; border-color: #cbd8e6 !important; }
.button:hover { filter: brightness(.96); transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; filter: none; opacity: .45; transform: none; }
.button.is-submitting, button.is-submitting, .sign-in-button.is-submitting, input[type="submit"].is-submitting { cursor: wait !important; opacity: .78 !important; pointer-events: none !important; transform: none !important; }
@keyframes button-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.btn-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #ffffff; border-radius: 50%; animation: button-spin 0.75s linear infinite; margin-right: 7px; vertical-align: -1.5px; flex-shrink: 0; }
.button-light .btn-spinner, .button.button-light .btn-spinner, .button-undo .btn-spinner, button.button-light .btn-spinner { border-color: rgba(30, 41, 59, 0.25); border-top-color: #0f172a; }
.button-full { width: 100%; margin-bottom: 14px; }
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; white-space: nowrap; font-size: 10px; font-weight: 700; }
.priority-urgent { color: #d92525; background: #ffe4e4; border: 1px solid #ffbebe; }
.priority-high { color: #cf6400; background: #ffead3; }
.priority-regular { color: #8c5b00; background: #fff0c8; }
.priority-low { color: #315d95; background: #e9f2ff; }
.status-pending { color: #966000; background: #fff0c7; }
.status-in_progress, .status-on_going { color: #155bc0; background: #e5efff; }
.status-awaiting_dealer { color: #6e42bd; background: #eee4ff; }
.status-completed { color: #0a813c; background: #def5e7; }
.alert { margin-bottom: 18px; padding: 13px 16px; border-radius: 8px; font-size: 12px; }
.alert ul { margin: 7px 0 0 18px; padding: 0; }
.alert-success { color: #08783a; background: #e2f7ea; border: 1px solid #b9e9cb; }
.workflow-stage-alert { margin-bottom: 0; scroll-margin-top: 17px; }
.alert-error { color: #a31a2e; background: #ffeaed; border: 1px solid #ffc6ce; }
.empty-state { padding: 36px 20px; text-align: center; color: var(--muted); }
.empty-state.compact { padding: 18px; }
.read-only-label { padding: 5px 8px; border-radius: 5px; color: #58718f; background: #eef3f8; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }

/* Dashboard */
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin-bottom: 21px; }
.dashboard-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dashboard-stats.has-aging { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat-card { position: relative; min-height: 147px; overflow: hidden; padding: 18px 20px; border: 1px solid var(--line); border-top-width: 4px; border-radius: 11px; background: #fff; }
a.stat-card { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
a.stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(18, 45, 74, 0.08); border-color: #cbd8e6; }
.stat-card::after { content: ""; position: absolute; width: 92px; height: 92px; right: -25px; bottom: -40px; border-radius: 50%; background: #f5f8fc; }
.stat-blue { border-top-color: var(--blue); }.stat-orange { border-top-color: var(--orange); }.stat-yellow { border-top-color: #d4a017; }.stat-green { border-top-color: var(--green); }.stat-red { border-top-color: #ef4049; }
.stat-label { display: flex; align-items: center; gap: 11px; color: #617595; font-size: 11px; font-weight: 800; }
.stat-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; font-size: 20px; }
.stat-blue .stat-icon { color: var(--blue); background: #edf3ff; }.stat-orange .stat-icon { color: var(--orange); background: #fff2d6; }.stat-yellow .stat-icon { color: #9a6d00; background: #fff8d8; }.stat-green .stat-icon { color: var(--green); background: #e7f7ed; }.stat-red .stat-icon { color: #ef4049; background: #ffe8eb; }
.stat-card-disabled { opacity: .58; cursor: not-allowed; filter: grayscale(.25); }
.stat-card > strong { display: block; margin-top: 11px; font-size: 31px; line-height: 1; }
.stat-card > p { margin: 9px 0 0; color: #667d9b; font-size: 10px; }
.stat-column-dual {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
.stat-column-dual .stat-card-dual {
    min-height: 70px;
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 16px 12px;
}
.stat-column-dual .stat-card-dual:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(18, 45, 74, 0.08);
}
.stat-column-dual .stat-card-dual::after {
    width: 54px;
    height: 54px;
    right: -15px;
    bottom: -22px;
}
.stat-column-dual .stat-card-dual .stat-label {
    gap: 8px;
    font-size: 11px;
}
.stat-column-dual .stat-card-dual .stat-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 14px;
}
.stat-column-dual .stat-card-dual > strong {
    margin-top: 4px;
    font-size: 22px;
    line-height: 1;
}
.stat-column-dual .stat-card-dual .stat-card-badge {
    top: 6px;
    right: 8px;
    font-size: 8px;
    padding: 1px 6px;
}
.stat-stage-card { display: flex; flex-direction: column; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.stat-stage-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(18, 45, 74, 0.08); border-color: #cbd8e6; }
.stat-stage-card > .stat-label, .stat-stage-card > strong { position: relative; z-index: 2; pointer-events: none; }
.stat-stage-main-link { position: absolute; z-index: 1; inset: 0; border-radius: inherit; }
.stat-stage-main-link:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.stat-stage-breakdown { display: flex; position: relative; z-index: 3; flex-direction: column; gap: 5px; margin-top: auto; padding-top: 12px; }
.stage-substat-link { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; text-decoration: none; background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; transition: all 0.15s ease; cursor: pointer; }
.stage-substat-link:hover { transform: translateX(2px); border-color: #cbd5e1; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.stage-substat-link .substat-name { display: inline-flex; align-items: center; gap: 6px; }
.stage-substat-link .substat-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; transition: box-shadow 0.15s ease; }
.stage-substat-link .substat-val { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.substat-pending .substat-dot { background: #eab308; }
.substat-pending:hover { background: #fefce8; border-color: #fde047; color: #854d0e; }
.substat-pending .substat-val { color: #854d0e; }
.substat-ongoing .substat-dot { background: #3b82f6; }
.substat-ongoing:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.substat-ongoing .substat-val { color: #1d4ed8; }
.substat-completed .substat-dot { background: #22c55e; }
.substat-completed:hover { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.substat-completed .substat-val { color: #15803d; }

/* Active States for Quick Filtering */
.stat-card.is-active {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25), 0 10px 24px rgba(18, 45, 74, 0.12) !important;
    transform: translateY(-2px);
}
.stat-card.stat-orange.is-active { outline-color: var(--orange); border-color: #ea580c !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25), 0 10px 24px rgba(18, 45, 74, 0.12) !important; }
.stat-card.stat-yellow.is-active { outline-color: #d4a017; border-color: #ca8a04 !important; box-shadow: 0 0 0 3px rgba(202, 138, 4, 0.25), 0 10px 24px rgba(18, 45, 74, 0.12) !important; }
.stat-card.stat-blue.is-active { outline-color: var(--blue); border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25), 0 10px 24px rgba(18, 45, 74, 0.12) !important; }
.stat-card.stat-green.is-active { outline-color: var(--green); border-color: #16a34a !important; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25), 0 10px 24px rgba(18, 45, 74, 0.12) !important; }
.stat-card.stat-red.is-active { outline-color: #ef4049; border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25), 0 10px 24px rgba(18, 45, 74, 0.12) !important; }

.stat-card.has-active-substat {
    border-color: #93c5fd !important;
    background: #fafcff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18), 0 6px 18px rgba(18, 45, 74, 0.08);
}
.stat-card-badge {
    position: absolute;
    top: 9px;
    right: 12px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    z-index: 4;
}
.stat-card-badge-active {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
}
.stat-orange .stat-card-badge-active { background: #ea580c; }
.stat-yellow .stat-card-badge-active { background: #b45309; }
.stat-green .stat-card-badge-active { background: #16a34a; }
.stat-red .stat-card-badge-active { background: #dc2626; }

.stage-substat-link.is-active {
    font-weight: 800;
    transform: translateX(3px);
}
.stage-substat-link.substat-pending.is-active {
    background: #fef08a !important;
    border-color: #ca8a04 !important;
    color: #713f12 !important;
    box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.4) !important;
}
.stage-substat-link.substat-pending.is-active .substat-dot {
    box-shadow: 0 0 0 2px #ca8a04;
}
.stage-substat-link.substat-ongoing.is-active {
    background: #bfdbfe !important;
    border-color: #2563eb !important;
    color: #1e40af !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4) !important;
}
.stage-substat-link.substat-ongoing.is-active .substat-dot {
    box-shadow: 0 0 0 2px #2563eb;
}
.stage-substat-link.substat-completed.is-active {
    background: #bbf7d0 !important;
    border-color: #16a34a !important;
    color: #14532d !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.4) !important;
}
.stage-substat-link.substat-completed.is-active .substat-dot {
    box-shadow: 0 0 0 2px #16a34a;
}
.substat-active-check {
    display: inline-block;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}
.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.activity-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 17px 18px; border-bottom: 1px solid #edf1f5; }
.activity-row:last-child { border-bottom: 0; }
.activity-row:hover { background: #fbfcfe; }
.activity-row > div:first-child, .activity-row .activity-main { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 7px; }
.activity-row .activity-progress-cell { flex-shrink: 0; }
.activity-row .activity-progress-name { background: transparent; }
.activity-progress-title { display: block; margin-bottom: 5px; color: #647b99; font-size: 8px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.reference { color: #1d60f3; font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.activity-row strong { font-size: 13px; }
.activity-row small, .data-table small { display: block; color: #68819f; font-size: 10px; }
.activity-tags { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-shrink: 0; }
.assignee { color: #637795; font-size: 10px; }
.quick-links > a { display: flex; align-items: center; gap: 13px; padding: 16px 20px; font-weight: 600; border-bottom: 1px solid #edf1f5; }
.quick-links > a:last-child { border-bottom: 0; }
.quick-links > a:hover { color: #155cdf; background: #fafcff; }
.quick-links > a span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: #1f65f3; background: #edf3ff; }


/* Forms and tables */
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.filter-bar input, .filter-bar select { height: 39px; padding: 0 11px; border: 1px solid #cbd8e6; border-radius: 7px; color: var(--ink); background: #fff; outline: 0; }
.filter-bar input:focus, .filter-bar select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,99,255,.1); }
.filter-bar .filter-field { position: relative; display: inline-flex; align-items: center; height: 39px; border: 1px solid #cbd8e6; border-radius: 7px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; padding: 0 6px 0 0; max-width: 100%; }
.filter-bar .filter-field:hover { border-color: #a3bcd5; }
.filter-bar .filter-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,99,255,.12); }
.filter-bar .filter-field .filter-icon-box { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 100%; color: #64748b; flex-shrink: 0; user-select: none; pointer-events: none; }
.filter-bar .filter-field:focus-within .filter-icon-box { color: var(--blue); }
.filter-bar .filter-field .filter-icon { width: 14px; height: 14px; display: block; }
.filter-bar .filter-field .filter-label { font-size: 11px; font-weight: 700; color: #5c7590; margin-right: 4px; white-space: nowrap; user-select: none; cursor: pointer; flex-shrink: 0; }
.filter-bar .filter-field input, .filter-bar .filter-field select { border: 0 !important; height: 100% !important; background: transparent !important; outline: 0 !important; box-shadow: none !important; font-size: 12px; color: var(--ink); padding: 0 8px 0 0 !important; }
.filter-bar .filter-field select { cursor: pointer; }
.filter-bar .filter-field.filter-field-search { flex: 1 1 240px; min-width: 220px; }
.filter-bar .filter-field.filter-field-search input { width: 100%; }
.filter-bar .filter-field.is-active {
    border-color: #2563eb !important;
    background: #f0f7ff !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18) !important;
}
.filter-bar .filter-field.is-active select,
.filter-bar .filter-field.is-active input {
    font-weight: 700 !important;
    color: #1e40af !important;
}
.filter-bar .filter-field.is-active .filter-icon-box {
    color: var(--blue) !important;
}
.filter-bar .filter-field.is-active .filter-label {
    color: #1d4ed8 !important;
}
.filter-bar .button.has-active {
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
    background: #fef2f2 !important;
}
.filter-bar .button.has-active:hover {
    background: #fee2e2 !important;
    border-color: #f87171 !important;
}
.filter-search { flex: 1; min-width: 200px; }
.filter-search input { width: 100%; }
.dealer-filter-bar .filter-search { flex: 1 1 300px; min-width: 260px; }
.dealer-filter-bar .filter-field-search { flex: 1 1 280px; min-width: 240px; }
.dealer-filter-bar .filter-field-area { flex: 0 1 260px; min-width: 190px; }
.dealer-filter-bar .filter-field-brand { flex: 0 1 210px; min-width: 160px; }
.dealer-filter-bar .filter-field-area select,
.dealer-filter-bar .filter-field-brand select { flex: 1; min-width: 0; }
.dealer-filter-bar select { flex: 0 0 auto; min-width: 0; }
.dealer-filter-bar #dealer-filter-city { width: 200px; }
.dealer-filter-bar #dealer-filter-area { width: 100%; }
.dealer-filter-bar #dealer-filter-brand { width: 100%; }
.dealer-filter-bar .button { flex: 0 0 auto; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 12px 14px; color: #607895; background: #f8fafd; border-bottom: 1px solid var(--line); text-align: left; font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.data-table td { padding: 14px; border-bottom: 1px solid #edf1f5; color: #283c58; font-size: 11px; vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fbfcfe; }
.data-table td strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 12px; }
.dealer-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.requests-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.dealer-form-wide { grid-column: 1 / -1; }
.dealer-import-help { color: var(--muted); font-size: 12px; line-height: 1.7; }
.dealer-import-help li + li { margin-top: 5px; }
.dealer-import-help summary { cursor: pointer; font-weight: 600; }
.dealer-import-option { margin-top: 18px; font-size: 12px; }
.dealer-table { min-width: 1484px; table-layout: fixed; }
.dealer-table .dealer-col-actions { width: 90px; }
.dealer-table .dealer-col-number { width: 64px; }
.dealer-table .dealer-col-name { width: 210px; }
.dealer-table .dealer-col-city { width: 140px; }
.dealer-table .dealer-col-area { width: 110px; }
.dealer-table .dealer-col-address { width: 300px; }
.dealer-table .dealer-col-person { width: 150px; }
.dealer-table .dealer-col-contact { width: 135px; }
.dealer-table th { white-space: nowrap; }
.dealer-table td { vertical-align: middle; line-height: 1.45; }
.dealer-table .dealer-number { color: #71849d; text-align: center; font-variant-numeric: tabular-nums; }
.dealer-table .dealer-identity strong { margin-bottom: 3px; line-height: 1.35; }
.dealer-table .dealer-identity small { line-height: 1.4; }
.dealer-table .dealer-city strong { margin-bottom: 0; line-height: 1.4; }
.dealer-table .dealer-address { color: #4c6380; overflow-wrap: anywhere; }
.dealer-table .dealer-person { font-weight: 600; overflow-wrap: anywhere; }
.dealer-table .dealer-contact { color: #3e5877; font-variant-numeric: tabular-nums; }
.requests-table { min-width: 1110px; }
.requests-table th { white-space: nowrap; }
.requests-table th:nth-child(1) { width: 140px; }
.requests-table th:nth-child(2) { width: 210px; }
.requests-table th:nth-child(3) { width: 160px; }
.requests-table th:nth-child(4) { width: 100px; }
.requests-table th:nth-child(5) { width: 155px; }
.requests-table th:nth-child(6) { width: 175px; }
.requests-table th:nth-child(7) { width: 230px; }
.category-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 12px; border-radius: 999px; background: #eef2f6; border: 1px solid #d4dde8; color: #2b3e55; font-size: 11px; font-weight: 600; white-space: nowrap; }
.assigned-text { color: #2b3e55; font-size: 11px; font-weight: 500; }
.submitted-date-block { display: flex; flex-direction: column; gap: 3px; }
.submitted-date-block .date-val { color: #283c58; font-size: 11px; font-weight: 500; white-space: nowrap; }
.submitted-date-block .time-val { color: #1d60f3; font-size: 10px; font-weight: 600; white-space: nowrap; }
.submitted-date-block .date-pending { color: #718096; }
.activity-completions-block { display: flex; flex-direction: column; gap: 4px; }
.activity-completion-item { display: flex; flex-direction: column; gap: 1px; padding-bottom: 3px; border-bottom: 1px dashed #e2e8f0; }
.activity-completion-item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-completion-label { font-size: 9px; font-weight: 700; color: #5c7590; text-transform: uppercase; letter-spacing: .3px; }
.activity-completion-datetime { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; }
.activity-completion-item .date-val { color: #283c58; font-size: 11px; font-weight: 500; white-space: nowrap; }
.activity-completion-item .time-val { color: #1d60f3; font-size: 10px; font-weight: 600; white-space: nowrap; }
.activity-completion-item .date-pending { color: #8c9ba5; font-size: 10px; font-weight: 500; }
.activity-completed-total { background: #f0fdf4; padding: 3px 6px; border-radius: 4px; border: 1px solid #bbf7d0; }
.activity-completed-total .activity-completion-label { color: #166534; }
.activity-aging-cell { white-space: nowrap; }
.activity-aging-val { display: flex; align-items: baseline; min-height: 18px; }
.activity-progress-cell ~ td .table-action { white-space: nowrap; }
.table-action { color: #155cdf; font-weight: 700; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.overdue-text { color: #dd293b !important; font-weight: 700; }
.pagination-wrap { padding: 13px 16px; border-top: 1px solid var(--line); }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pagination a, .pagination span { min-width: 31px; height: 31px; display: grid; place-items: center; padding: 0 8px; border: 1px solid #d5dfeb; border-radius: 6px; color: #445c7b; background: #fff; font-size: 11px; }
.pagination .active span { color: #fff; background: var(--blue); border-color: var(--blue); }.pagination .disabled span { opacity: .45; }
.form-panel { max-width: 835px; margin: 0 auto; overflow: hidden; padding: 0 16px 13px; }
.form-section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.form-section h2 { margin: 0 0 17px; font: 700 13px Montserrat, sans-serif; }
.section-help { margin: -10px 0 17px; color: var(--muted); font-size: 11px; }
.form-grid { display: grid; gap: 14px; }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-field em { color: var(--red); font-style: normal; }
.required { color: var(--red); }
.form-field input, .form-field select, .form-field textarea {
    width: 100%; min-height: 39px; padding: 9px 11px; border: 1px solid #c9d8e8; border-radius: 7px; color: var(--ink); background: #fff; outline: 0;
}
.form-field textarea { resize: vertical; line-height: 1.55; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,99,255,.09); }
.form-field input[readonly], .form-field select:disabled { color: #344b68; background: #f7f9fc; cursor: not-allowed; }
.form-field small { color: #647c9a; font-size: 9px; }
.readonly-field { min-height: 72px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px; border: 1px solid #d2dfeb; border-radius: 8px; background: #f7f9fc; }
.readonly-field span { color: #647b99; font-size: 8px; font-weight: 800; letter-spacing: .7px; }
.readonly-field strong { font-size: 11px; }
.no-border { border-bottom: 0; }
.required-note { color: var(--red); font-size: 9px; }
.file-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border: 1px dashed #9dbce5; border-radius: 8px; background: #f8fbff; }
.file-drop input { width: auto; min-height: auto; padding: 0; border: 0; background: transparent; }
.file-drop small { flex-basis: 100%; }
.attachment-limit { color: #5f7897; font-size: 9px; font-weight: 600; }
.selected-file-list { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.selected-file-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid #dbe5ef; border-radius: 6px; color: #334b68; background: #f8fafc; font-size: 10px; }
.selected-file-list small { flex: 0 0 auto; }
.attachment-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.attachment-preview-grid:empty { display: none; }
.attachment-preview-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 1px solid #d2dfeb; border-radius: 8px; background: #f7f9fc; overflow: hidden; }
.attachment-preview-card img { width: 100%; max-height: 140px; object-fit: cover; border-radius: 5px; border: 1px solid #dbe5ef; background: #fff; }
.attachment-preview-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; border-radius: 5px; background: #e0ecf7; color: #2463b5; font-size: 13px; font-weight: 800; letter-spacing: .4px; }
.attachment-preview-name { color: #334b68; font-size: 9px; word-break: break-all; text-align: center; line-height: 1.4; }
.attachment-preview-card small { color: #647c9a; font-size: 8px; }
.remark-suggestion { margin-top: 2px; padding: 11px 12px; border: 1px solid #cfe0f6; border-radius: 7px; background: #f5f9ff; }
.remark-suggestion[hidden] { display: none; }
.remark-suggestion > span { color: #2463b5; font-size: 8px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.remark-suggestion p { margin: 6px 0 0; color: #4d6684; font-size: 10px; line-height: 1.55; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 15px; }

/* Detail and admin pages */
.detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .78fr); gap: 19px; align-items: start; }
.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 8px 18px; }
.detail-list > div { min-height: 84px; display: flex; flex-direction: column; gap: 7px; justify-content: center; padding: 12px 8px; border-bottom: 1px solid #edf1f5; }
.detail-list span, .description-block > span, .profile-summary dt, .setting-card span { color: #667e9b; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.detail-list strong { font-size: 12px; }.detail-list small { color: var(--muted); font-size: 10px; }
.description-block { padding: 18px 25px 24px; }.description-block p { margin: 9px 0 0; color: #334c68; line-height: 1.7; white-space: pre-line; }
.detail-sidebar { display: flex; flex-direction: column; gap: 17px; }
.action-panel { padding-bottom: 15px; }.action-panel > form, .action-panel > p { margin: 15px 16px 0; }
.action-note { color: var(--muted); font-size: 9px; line-height: 1.5; }
.attachments-panel .panel-heading > span { min-width: 25px; padding: 4px 7px; border-radius: 999px; color: #35618f; background: #edf3f9; text-align: center; font-size: 10px; }
.attachment-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #edf1f5; }.attachment-item > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: #1e62e5; background: #edf3ff; }.attachment-item div { min-width: 0; }.attachment-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }.attachment-item small { color: var(--muted); font-size: 9px; }

/* Request details and Dial Lead workflow */
.request-detail-heading, .request-workflow-stack { width: min(100%, 1220px); margin-inline: auto; }
.request-workflow-stack { display: flex; flex-direction: column; gap: 17px; }
.workflow-card, .workflow-stage-card { overflow: hidden; }
.workflow-stage-card { scroll-margin-top: 17px; }
.workflow-card-head { min-height: 56px; display: flex; align-items: center; gap: 11px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.workflow-card-head h2, .workflow-stage-head h2 { margin: 0; font: 700 15px Montserrat, Inter, sans-serif; }
.workflow-count { min-width: 25px; margin-left: auto; padding: 4px 7px; border-radius: 999px; color: #35618f; background: #edf3f9; text-align: center; font-size: 10px; }
.request-information-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; padding: 6px 18px 12px; }
.request-information-column { min-width: 0; }
.request-information-row { min-height: 51px; display: grid; grid-template-columns: minmax(105px, .55fr) minmax(0, 1.45fr); align-items: center; gap: 14px; border-bottom: 1px solid #e8eef5; }
.request-information-row:last-child { border-bottom: 0; }
.request-information-row > span { color: #58718f; font-size: 8px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.request-information-row > strong { min-width: 0; color: #1c3048; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.request-description-box { min-height: 62px; margin: 10px 18px; padding: 15px; border-radius: 7px; color: #29425e; background: #f4f7fb; line-height: 1.6; white-space: pre-line; }
.workflow-file-gallery, .workflow-stage-body, .workflow-card-body, .manager-document-group { padding: 17px 18px; }
.workflow-stage-card > .workflow-stage-body { padding: 22px 24px; }
.request-workflow-stack > .workflow-stage-banner { margin: 0; }
.workflow-help-inline { margin-left: auto; color: #667e9b; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.activity-overview-body { padding: 18px; }
.activity-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.activity-progress-step { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 8px; align-items: center; min-height: 49px; padding: 7px 13px 7px 0; }
.activity-progress-step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 17px; left: 10px; width: calc(100% - 4px); height: 2px; background: #dce5ef; }
.activity-progress-dot { position: relative; z-index: 1; grid-row: 1 / span 2; width: 12px; height: 12px; border: 3px solid #dce5ef; border-radius: 50%; background: #fff; }
.activity-progress-name, .activity-progress-status { position: relative; z-index: 1; width: fit-content; background: #fff; }
.activity-progress-name { padding-right: 5px; color: #263d59; font-size: 10px; font-weight: 700; }
.activity-progress-status { display: inline-flex; min-height: 20px; align-items: center; padding: 3px 8px; border-radius: 999px; color: #667c96; background: #edf2f7; font-size: 8px; font-weight: 700; }
.progress-completed .activity-progress-dot, .progress-done .activity-progress-dot { border-color: #12a150; background: #12a150; box-shadow: inset 0 0 0 2px #fff; }
.progress-completed .activity-progress-status, .progress-done .activity-progress-status { color: #087c3c; background: #def5e7; }
.progress-completed:not(:last-child)::after, .progress-done:not(:last-child)::after { background: #8cd2aa; }
.progress-in_progress .activity-progress-dot, .progress-work_in_progress .activity-progress-dot, .progress-on_going .activity-progress-dot { border-color: #2463ff; background: #2463ff; box-shadow: inset 0 0 0 2px #fff; }
.progress-in_progress .activity-progress-status, .progress-work_in_progress .activity-progress-status, .progress-on_going .activity-progress-status { color: #155bc0; background: #e5efff; }
.activity-progress-compact { display: flex; min-width: 225px; flex-direction: column; gap: 3px; }
.activity-progress-compact .activity-progress-step { display: grid; grid-template-columns: 8px minmax(88px, 1fr) auto; min-height: 0; padding: 0; gap: 6px; }
.activity-progress-compact .activity-progress-step::after { display: none; }
.activity-progress-compact .activity-progress-dot { grid-row: auto; width: 7px; height: 7px; border-width: 2px; }
.activity-progress-compact .activity-progress-name { padding: 0; font-size: 8px; }
.activity-progress-compact .activity-progress-status { min-width: 59px; min-height: 17px; justify-content: center; padding: 2px 6px; font-size: 7px; }
.activity-progress-cell { min-width: 245px; }
.activity-progress-meta { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #fff; position: relative; z-index: 1; }
.activity-progress-compact .activity-progress-meta { gap: 4px; }

/* Activity Step-by-Step Age Badge & Indicators */
.activity-age-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .2px;
    white-space: nowrap;
    vertical-align: middle;
    transition: all .15s ease;
}

.activity-age-badge .activity-age-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.activity-age-badge .activity-age-icon {
    flex-shrink: 0;
}

.activity-age-badge .activity-age-text {
    display: inline-block;
}

/* 0 Days / Normal */
.activity-age-normal {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}
.activity-age-normal .activity-age-indicator {
    background: #64748b;
}

/* 1 Day: Yellow / Warning Indicator */
.activity-age-warning {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #facc15;
    box-shadow: 0 1px 3px rgba(234, 179, 8, 0.15);
}
.activity-age-warning .activity-age-indicator {
    background: #eab308;
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.25);
    animation: indicatorPulseYellow 2s infinite;
}

/* 2 Days and Above: Red / Danger Indicator */
.activity-age-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #f87171;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.15);
}
.activity-age-danger .activity-age-indicator {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
    animation: indicatorPulseRed 1.8s infinite;
}

.month-transition-notice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: #854d0e;
    background: #fef9c3;
    border: 1px solid #facc15;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(234, 179, 8, 0.15);
}
.month-transition-notice .month-transition-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #eab308;
    flex-shrink: 0;
}
.month-transition-notice svg {
    flex-shrink: 0;
}

@keyframes indicatorPulseYellow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.8; }
}

@keyframes indicatorPulseRed {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.85; }
}

/* Compact version for tables */
.activity-age-compact,
.activity-progress-compact .activity-age-badge {
    padding: 1px 5px;
    font-size: 8px;
    gap: 3px;
}
.activity-age-compact .activity-age-indicator,
.activity-progress-compact .activity-age-badge .activity-age-indicator {
    width: 5px;
    height: 5px;
}
.activity-age-compact svg,
.activity-progress-compact .activity-age-badge svg {
    width: 9px;
    height: 9px;
}

.stage-timing-disclosure { border: 1px solid #d8e4f2; border-radius: 9px; background: #fbfdff; overflow: hidden; }
.stage-timing-progress-card { border: 1px solid #d8e4f2; border-radius: 9px; background: #fbfdff; padding: 18px 20px 20px; margin-bottom: 20px; }
.stage-timing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.stage-timing-col { display: flex; flex-direction: column; }
.stage-timing-col label { display: block; margin-bottom: 6px; color: #263d59; font-size: 11px; font-weight: 700; }
.stage-timing-col label em { color: #dc2626; font-style: normal; }
.stage-timing-col input[type="date"] { width: 100%; box-sizing: border-box; padding: 8px 11px; border: 1px solid #cbd7e4; border-radius: 6px; font-size: 13px; color: #1e334d; background: #fff; transition: border-color .15s, box-shadow .15s; }
.stage-timing-col input[type="date"]:focus { outline: none; border-color: #1760ef; box-shadow: 0 0 0 3px rgba(23, 96, 239, .15); }
.stage-timing-col input[type="date"].timing-locked-input { background-color: #f1f5f9 !important; color: #475569 !important; border-color: #cbd5e1 !important; cursor: not-allowed !important; pointer-events: none !important; -webkit-user-select: none !important; user-select: none !important; }
.stage-timing-col input[type="date"].timing-locked-input::-webkit-calendar-picker-indicator { cursor: not-allowed !important; opacity: 0.45; pointer-events: none !important; }
.stage-timing-hint-text { display: block; margin-top: 5px; color: #64748b; font-size: 11px; }
.timing-auto-box { border: 1px dashed #b8cde3; border-radius: 6px; background: #f4f7fb; padding: 9px 13px; min-height: 48px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.timing-auto-header { display: flex; align-items: center; }
.timing-auto-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #1e40af; background: #dbeafe; padding: 2px 8px; border-radius: 12px; }
.timing-auto-desc { font-size: 11.5px; color: #475569; }
.timing-auto-desc strong { color: #1e293b; }
.timing-recorded-box { border: 1px solid #cbd5e1; border-radius: 6px; background: #f8fafc; padding: 9px 13px; min-height: 48px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.timing-recorded-val { font-size: 13px; color: #0f172a; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.timing-recorded-val strong { font-weight: 600; }
.timing-at { font-size: 11.5px; color: #64748b; }
.timing-time-badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; color: #166534; background: #dcfce7; padding: 2px 8px; border-radius: 4px; }
.stage-timing-error { display: block; margin-top: 5px; color: #b4233b; font-size: 9px; }
.stage-timing-details { margin: 5px 0 0; padding-top: 17px; border-top: 1px solid #e4ebf3; }
.stage-timing-hint { margin: 10px 0 0; color: #526b88; font-size: 11px; }
@media (max-width: 640px) {
    .stage-timing-grid { grid-template-columns: 1fr; gap: 16px; }
}
.workflow-file-gallery { display: flex; flex-wrap: wrap; gap: 12px; min-height: 104px; }
.workflow-file { display: inline-flex; max-width: 100%; align-items: center; gap: 9px; margin: 0 7px 7px 0; padding: 10px 12px; border: 1px solid #cfe0f5; border-radius: 7px; color: #12375f; background: #f9fbff; vertical-align: top; }
.workflow-file:hover { border-color: #82adf4; background: #f2f7ff; }
.workflow-file-tile { width: 185px; min-height: 130px; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
.workflow-file-tile > img { width: 100%; height: 91px; display: block; object-fit: cover; border-bottom: 1px solid #dbe5f1; background: #eef3f8; }
.workflow-file-icon { flex: 0 0 25px; height: 25px; display: grid; place-items: center; border-radius: 5px; color: #6e42bd; background: #f0eaff; font-size: 11px; }
.workflow-file-tile .workflow-file-icon { width: 100%; height: 80px; flex-basis: 80px; border-radius: 0; font-size: 27px; }
.workflow-file-copy { display: block; min-width: 0; }
.workflow-file-tile .workflow-file-copy { padding: 10px 12px 16px; }
.workflow-file-copy strong { display: flex; align-items: center; gap: 4px; overflow: hidden; color: #12375f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-file-copy small { display: block; margin-top: 4px; color: #7288a1; font-size: 8px; }
.workflow-file-icon.icon-pdf { color: #b91c1c; background: #fee2e2; }
.workflow-file-icon.icon-word { color: #1d4ed8; background: #dbeafe; }
.workflow-file-icon.icon-excel { color: #15803d; background: #dcfce7; }
.workflow-file-badge { display: inline-block; font-size: 8px; font-weight: 700; padding: 1px 4px; border-radius: 3px; letter-spacing: .3px; text-transform: uppercase; flex-shrink: 0; }
.badge-pdf { background: #fee2e2; color: #b91c1c; }
.badge-word { background: #dbeafe; color: #1d4ed8; }
.badge-excel { background: #dcfce7; color: #15803d; }
.badge-img { background: #f3e8ff; color: #7e22ce; }
.badge-generic { background: #f1f5f9; color: #475569; }
.inspection-assignment-form { padding: 17px 18px; }
.inspection-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.inspection-readonly-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 13px; }
.workflow-readonly { min-height: 65px; display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border: 1px solid #d7e2ee; border-radius: 7px; background: #f8fafc; }
.workflow-readonly strong { color: #20364e; font-size: 10px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.workflow-help { margin: 5px 18px 16px; color: #71849d; font-size: 9px; line-height: 1.5; }
.workflow-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; }
.workflow-form-footer p { margin: 0; color: #71849d; font-size: 9px; line-height: 1.5; }
.manager-document-group { border-bottom: 1px solid #edf1f5; }
.manager-document-group:last-child { border-bottom: 0; }
.manager-document-group > strong { display: block; margin-bottom: 11px; color: #425c7b; font-size: 10px; text-transform: uppercase; }
.processing-heading { margin: 9px 0 1px; }
.processing-heading h2 { margin: 5px 0; font: 700 21px Montserrat, Inter, sans-serif; }
.processing-heading > p:last-child { margin: 0; color: #637a98; font-size: 11px; }
.workflow-lock-note { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-left: 4px solid #8296ad; }
.workflow-lock-note > span { font-size: 18px; }
.workflow-lock-note strong { color: #334d6b; }
.workflow-lock-note p { margin: 5px 0 0; color: #71849d; font-size: 10px; }
.workflow-stage-head { min-height: 80px; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.workflow-stage-head p { margin: 5px 0 0; color: #7084a2; font-size: 10px; }
.stage-number { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #2463ff; font-weight: 800; }
.number-complete { background: #13a957; }
.number-muted { background: #7288a4; }
.stage-status { flex: 0 0 auto; margin-left: auto; padding: 7px 12px; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.stage-complete { color: #08813d; background: #ddf8e9; }
.stage-active { color: #155be2; background: #e8efff; }
.stage-waiting { color: #8495ad; background: #eff3f7; }
.stage-locked-card > .workflow-stage-head, .stage-locked-card > .workflow-stage-body { opacity: .84; }
.inspection-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 13px; }
.inspection-summary-grid > div { min-height: 65px; display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border: 1px solid #d7e2ee; border-radius: 7px; background: #f8fafc; }
.compact-file-gallery { min-height: 0; padding: 0; }
.workflow-stage-body > .compact-file-gallery { margin-bottom: 16px; }
.workflow-file-gallery > .empty-state { width: 100%; }
/* Hidden from the web UI; retain the component markup and styles for future use. */
.inspection-template-box { display: none !important; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 15px 16px; border: 1px solid #bfd5f2; border-radius: 8px; background: #f3f8ff; }
.inspection-template-box strong { color: #164f9e; font-size: 12px; }
.inspection-template-box p { margin: 5px 0 0; color: #5e7694; font-size: 10px; line-height: 1.55; }
.inspection-template-box .button { flex: 0 0 auto; }
.inspection-upload-field { grid-column: 1 / -1; }
.inspection-confirmation { display: flex !important; max-width: 700px; flex-direction: row !important; align-items: flex-start; gap: 9px; color: #425c7b; font-size: 10px !important; font-weight: 600 !important; line-height: 1.5; }
.inspection-confirmation input { width: 15px !important; min-height: 15px !important; flex: 0 0 15px; margin-top: 1px; padding: 0 !important; }
.workflow-details-form { display: flex; flex-direction: column; gap: 17px; }
.workflow-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.representative-field { grid-column: 1 / -1; }
.representative-list { display: flex; flex-direction: column; gap: 8px; }
.representative-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.representative-remove { min-width: 75px; padding: 8px 10px; border: 1px solid #e5b7bf; border-radius: 7px; color: #b4233b; background: #fff7f8; cursor: pointer; font-size: 9px; font-weight: 700; }
.representative-remove:hover:not(:disabled) { border-color: #d71938; background: #fff0f2; }
.representative-remove:disabled { opacity: .42; cursor: not-allowed; }
.representative-add { width: fit-content; min-height: 32px; padding: 6px 11px; font-size: 9px; }
.workflow-attachment-field { padding-top: 15px; border-top: 1px solid #e6edf5; }
.workflow-detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.workflow-detail-summary > div { min-height: 65px; display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border: 1px solid #d7e2ee; border-radius: 7px; background: #f8fafc; }
.inspection-summary-grid span, .workflow-detail-summary span, .workflow-readonly > span { color: #425c7b; font-size: 8px; font-weight: 400; line-height: 1.4; letter-spacing: .5px; text-transform: uppercase; overflow-wrap: anywhere; }
.inspection-summary-grid strong, .workflow-detail-summary strong, .workflow-readonly strong { color: #20364e; font-size: 10px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.stage-action-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid #e6edf5; }
.stage-action-row > span { color: #71849d; font-size: 9px; }
.workflow-undo-row { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6edf5; }
.workflow-undo-row > span { margin-right: auto; color: #71849d; font-size: 9px; }
.workflow-undo-row form { margin: 0; }
.workflow-admin-action { padding: 0 18px 17px; }
.workflow-admin-action > .stage-success-message { margin-top: 17px; }
.button-undo { min-height: 34px; gap: 6px; padding: 7px 12px; color: #b4233b; background: #fff7f8; border-color: #e5b7bf; font-size: 10px; cursor: pointer; }
.button-undo:hover { color: #991b2f; background: #fff0f2; border-color: #d71938; }
/* Admin password modal */
.admin-password-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); }
.admin-password-modal { width: 100%; max-width: 420px; margin: 20px; padding: 28px 26px 22px; border-radius: 12px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.22); }
.admin-password-modal h2 { margin: 0 0 6px; font: 700 17px Montserrat, sans-serif; color: #1e293b; }
.admin-password-modal > p { margin: 0 0 18px; color: #64748b; font-size: 12px; line-height: 1.55; }
.admin-password-modal .form-field { margin-bottom: 18px; }
.admin-password-modal .form-field label { display: block; margin-bottom: 6px; color: #475569; font-size: 11px; font-weight: 700; }
.admin-password-modal .form-field input { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 13px; box-sizing: border-box; }
.admin-password-modal .form-field input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.admin-password-actions { display: flex; justify-content: flex-end; gap: 10px; }
/* Admin delete section */
.admin-delete-section { border-color: #fecaca; }
.admin-delete-body { padding: 16px 18px 18px; }
.admin-delete-body p { margin: 0 0 14px; color: #64748b; font-size: 11px; line-height: 1.5; }
.admin-delete-body strong { color: #991b2f; }
.admin-delete-body form { margin: 0; }
.stage-success-message { margin-bottom: 12px; padding: 12px 14px; border-radius: 7px; color: #087c3c; background: #e9f9ef; font-size: 10px; }
.locked-stage-message { padding: 13px 14px; border-radius: 7px; color: #8194ae; background: #f4f7fa; font-size: 10px; }
.in-progress-container { border: 2px solid #2563eb; background: #eff6ff; padding: 20px; border-radius: 8px; }
.workflow-choice-box { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.workflow-upload-form { display: grid; grid-template-columns: 1fr; align-items: start; gap: 14px 20px; }
.workflow-upload-form .file-drop { min-height: 54px; }
.workflow-upload-form > .button, .workflow-upload-form .workflow-form-footer { grid-column: 1 / -1; min-width: 185px; margin-top: 10px; margin-bottom: 0; }
.workflow-upload-form textarea { min-height: 84px; resize: vertical; box-sizing: border-box; }
.area-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.area-card { display: flex; align-items: center; gap: 15px; padding: 19px; }.area-card h2 { margin: 0 0 6px; font: 700 15px Montserrat, sans-serif; }.area-card p { margin: 0; color: var(--muted); font-size: 10px; }.area-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 10px; color: #1e62e5; background: #edf3ff; font-size: 20px; }
.area-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; padding: 19px; }.area-list h3 { margin: 0 0 10px; font-size: 12px; }.area-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf1f5; font-size: 10px; }.area-list small { color: var(--muted); text-align: right; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 18px; }.role-card { padding: 20px; }.role-card-head { display: flex; align-items: center; gap: 13px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.role-card h2 { margin: 0 0 5px; font: 700 14px Montserrat, sans-serif; }.role-card p { margin: 0; color: var(--muted); font-size: 10px; }.role-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 800; }.admin-role { background: #102e4c; }.support-role { background: #2264e6; }.manager-role { background: #6e42bd; }.dealer-role { background: #e41f3d; }.role-card ul { margin: 17px 0 0; padding-left: 18px; color: #49617d; font-size: 11px; line-height: 2; }
.audit-action { display: inline-block; padding: 5px 7px; border-radius: 5px; color: #285989; background: #edf3f9; font-size: 9px; font-weight: 700; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }.setting-card { display: flex; gap: 15px; padding: 20px; }.setting-icon { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; color: #1f65ee; background: #edf3ff; font-size: 18px; }.setting-card strong { display: block; margin: 6px 0; font-size: 13px; }.setting-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.profile-page-grid { display: grid; grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); gap: 18px; align-items: start; }.profile-summary { padding: 25px; text-align: center; }.large-avatar { width: 82px; height: 82px; margin: 0 auto 14px; font-size: 23px; border: 4px solid #dbe7f3; }.profile-summary h2 { margin: 0; font: 700 17px Montserrat, sans-serif; }.profile-summary > p { margin: 7px 0 20px; color: var(--muted); font-size: 11px; }.profile-summary dl { margin: 0; text-align: left; }.profile-summary dl > div { padding: 12px 0; border-top: 1px solid var(--line); }.profile-summary dd { margin: 5px 0 0; color: #304965; font-size: 11px; overflow-wrap: anywhere; }.profile-form { max-width: none; margin: 0; }
.reset-page-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(270px, .72fr); gap: 18px; align-items: start; }
.reset-warning-panel { overflow: hidden; border-top: 4px solid #d71938; }
.reset-warning-head { display: flex; align-items: center; gap: 15px; padding: 21px 22px; border-bottom: 1px solid #f1d8dc; background: #fff7f8; }
.reset-warning-head h2, .reset-side-note h2 { margin: 0 0 6px; font: 700 15px Montserrat, sans-serif; }
.reset-warning-head p, .reset-side-note p { margin: 0; color: #677d97; font-size: 11px; line-height: 1.65; }
.reset-warning-icon { flex: 0 0 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #d71938; font-size: 21px; font-weight: 800; }
.reset-count-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 22px; border: 1px solid #eadde0; border-radius: 9px; background: #fffafa; }
.reset-count-grid > div { display: flex; flex-direction: column; gap: 5px; padding: 17px; border-right: 1px solid #eadde0; text-align: center; }
.reset-count-grid > div:last-child { border-right: 0; }
.reset-count-grid strong { color: #c71934; font-size: 23px; }.reset-count-grid span { color: #6a7d95; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.reset-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 22px 21px; }
.reset-scope-block { padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.reset-scope-block h3 { margin: 0 0 9px; font-size: 11px; }.reset-scope-block ul { margin: 0; padding-left: 17px; color: #526b87; font-size: 10px; line-height: 1.8; }
.deleted-scope { background: #fff9fa; border-color: #f0d8dc; }.deleted-scope h3 { color: #bd1832; }.preserved-scope { background: #f7fcf9; border-color: #cee9d9; }.preserved-scope h3 { color: #087c3c; }
.reset-confirm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 21px 22px; border-top: 1px solid var(--line); background: #fafbfd; }
.reset-confirm-form label strong { color: #bd1832; }
.reset-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; padding-top: 3px; }
.reset-side-note { padding: 22px; border-left: 4px solid #2a66db; }.reset-side-note p + p { margin-top: 13px; }.reset-side-icon { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 50%; color: #fff; background: #2864d7; font-family: Georgia, serif; font-size: 18px; font-weight: 700; }

/* PM Manager reports */
.report-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.report-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.report-summary-grid-completed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.report-summary { padding: 15px 17px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 9px; background: #fff; box-shadow: 0 7px 18px rgba(18,45,74,.04); }
.report-summary span { display: block; color: #667e9b; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.report-summary strong { display: block; margin-top: 7px; font-size: 24px; }
.summary-sub { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 600; }
.report-summary-alert { border-left-color: var(--red); }
.report-summary-alert strong { color: var(--red); }
.report-filter-panel { margin-bottom: 18px; }
.rfg-quick-filter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
.rfg-qfb-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.rfg-qfb-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: #1e40af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rfg-qfb-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #93c5fd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    font-weight: 800;
    font-size: 12px;
}
.rfg-qfb-stage { color: #1e3a8a; }
.rfg-qfb-sep { color: #94a3b8; font-weight: 900; }
.rfg-qfb-status { color: #2563eb; }
.rfg-qfb-count { font-size: 11px; color: #64748b; font-weight: 600; }
.rfg-qfb-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}
.rfg-qfb-clear:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
    transform: translateY(-1px);
}

.report-filter-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    padding: 11px 13px;
    align-items: center;
}
.rfg-search { grid-column: span 4; }
.rfg-date-period { grid-column: span 2; }
.rfg-period-value { grid-column: span 2; }
.rfg-stage { grid-column: span 2; }
.rfg-status { grid-column: span 2; }

.rfg-area { grid-column: span 3; }
.rfg-brand { grid-column: span 3; }
.rfg-type { grid-column: span 2; }
.rfg-priority { grid-column: span 2; }
.rfg-assign-type { grid-column: span 2; }
.rfg-actions {
    grid-column: span 12;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.rfg-actions .rfg-btn {
    flex: 0 0 auto;
    min-width: 110px;
}

.rfg-field {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    border: 1px solid #cbd8e6;
    border-radius: 7px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    overflow: hidden;
}
.rfg-field:hover { border-color: #a3bcd5; }
.rfg-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,99,255,.12); }
.rfg-field.is-active {
    border-color: #2563eb;
    background: #f0f7ff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}
.rfg-field.is-active select,
.rfg-field.is-active input {
    font-weight: 700;
    color: #1e40af;
}
.rfg-field[hidden] { display: none; }

.rfg-icon-box {
    flex: 0 0 30px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b829c;
    pointer-events: none;
    user-select: none;
}
.rfg-icon { width: 14px; height: 14px; display: block; flex-shrink: 0; }
.rfg-field.is-active .rfg-icon-box { color: var(--blue); }
.rfg-field:focus-within .rfg-icon-box { color: var(--blue); }

.rfg-prefix {
    font-size: 11px;
    font-weight: 700;
    color: #5c7590;
    margin-right: 3px;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.rfg-field input,
.rfg-field select {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0 8px 0 0;
    font-size: 12px;
    font-family: inherit;
    color: var(--ink);
}
.rfg-field input::placeholder { color: #859bb2; font-size: 12px; }
.rfg-field select { cursor: pointer; text-overflow: ellipsis; padding-right: 4px; }
.rfg-field input[type="date"],
.rfg-field input[type="week"],
.rfg-field input[type="month"] { padding-right: 4px; cursor: pointer; }

.rfg-actions { display: flex; align-items: center; gap: 6px; height: 36px; }
.rfg-btn {
    height: 36px;
    min-height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 7px;
    flex: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all .15s ease;
}
.rfg-btn-icon { width: 13px; height: 13px; flex-shrink: 0; }
.rfg-btn-submit { color: #fff; background: var(--blue); border: 1px solid var(--blue); }
.rfg-btn-submit:hover { background: #1852de; border-color: #1852de; }
.rfg-btn-reset { color: #48627e; background: #fff; border: 1px solid #cbd8e6; }
.rfg-btn-reset:hover { background: #f4f7fb; color: #a81c32; border-color: #e5b3bc; }
.rfg-btn-reset.has-active { color: #c91834; border-color: #f2bec7; background: #fff6f7; }

.report-filter-search { grid-column: span 4; }
.report-filter-actions { display: flex; align-items: center; gap: 6px; }
.readonly-status-input { background: #f0f4f9 !important; color: #1e3a58 !important; font-weight: 600; cursor: not-allowed; border-color: #cbd7e4 !important; }
.report-results .panel-heading > span { color: var(--muted); font-size: 10px; }
.report-table { min-width: 1380px; }

/* Attachments in Report Table */
.report-attachments-col { min-width: 280px; max-width: 360px; }
.report-attachments-cell { display: flex; flex-direction: column; gap: 8px; }
.attachment-group-block { display: flex; flex-direction: column; gap: 4px; }
.attachment-group-title { font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #103b68; background: #eaf1f8; padding: 2px 6px; border-radius: 4px; width: fit-content; }
.attachment-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.attachment-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; color: var(--ink); text-decoration: none; font-size: 11px; transition: background .15s, border-color .15s; }
.attachment-chip:hover { background: #eef4fb; border-color: #2463ff; color: #104ad6; }
.chip-img { width: 22px; height: 22px; object-fit: cover; border-radius: 3px; border: 1px solid #d0dce8; }
.chip-doc { font-size: 13px; color: #3b5a7d; }
.chip-text { font-size: 11px; font-weight: 500; }
.empty-attachment-note { color: var(--muted); font-size: 11px; font-style: italic; }

.sidebar-overlay { display: none; }

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll::-webkit-scrollbar {
    height: 7px;
}
.table-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

@media (max-width: 1050px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid, .detail-grid, .reset-page-grid { grid-template-columns: 1fr; }
    .role-grid { grid-template-columns: 1fr; }
    .report-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .report-filter-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 7px;
    }
    .rfg-search { grid-column: span 6; }
    .rfg-date-period, .rfg-period-value, .rfg-stage, .rfg-status, .rfg-priority, .rfg-area, .rfg-brand, .rfg-type, .rfg-assign-type, .rfg-actions {
        grid-column: span 3;
    }
    .inspection-summary-grid, .workflow-detail-summary, .inspection-readonly-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 10px 0 35px rgba(0, 15, 28, 0.4);
    }
    body.sidebar-mobile-open .sidebar,
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar-close-btn { display: flex; }
    .sidebar-overlay {
        display: block;
        position: fixed;
        z-index: 45;
        inset: 0;
        background: rgba(0, 15, 28, 0.55);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    body.sidebar-mobile-open .sidebar-overlay,
    .sidebar.open + .main-area + .sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.sidebar-mobile-open {
        overflow: hidden;
    }
    .main-area {
        margin-left: 0 !important;
        transition: none;
    }
    .profile-bar {
        height: 60px;
        padding: 0 16px;
    }
    .page-content { padding: 20px 16px 36px; }
    .heading-with-badge, .heading-with-action { align-items: stretch; flex-direction: column; gap: 12px; }
    .dealer-actions, .requests-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
    .dealer-actions .button, .requests-actions .button { flex: 1 1 auto; text-align: center; }
    .stats-grid, .area-card-grid, .settings-grid, .profile-page-grid { grid-template-columns: 1fr; }
    .area-columns { grid-template-columns: 1fr; }
    .filter-bar { align-items: stretch; flex-direction: column; }
    .filter-bar input, .filter-bar select, .filter-bar .filter-field, .filter-bar .button { width: 100%; }
    .dealer-filter-bar .filter-search { min-width: 0; }
    .dealer-filter-bar #dealer-filter-city,
    .dealer-filter-bar #dealer-filter-area,
    .dealer-filter-bar #dealer-filter-brand { width: 100%; }
    .two-col, .three-col, .detail-list, .reset-scope, .reset-confirm-form { grid-template-columns: 1fr; }
    .reset-form-actions { grid-column: auto; }
    .activity-row { align-items: flex-start; flex-direction: column; }
    .activity-row .activity-progress-cell { width: 100%; min-width: 0; }
    .activity-tags { justify-content: flex-start; flex-wrap: wrap; }
    .activity-overview-body .activity-progress { grid-template-columns: 1fr; }
    .activity-overview-body .activity-progress-step::after { display: none; }
    .report-summary-grid { grid-template-columns: 1fr; }
    .report-filter-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 9px 10px;
        gap: 6px;
    }
    .rfg-search, .rfg-actions { grid-column: span 2; }
    .rfg-date-period, .rfg-period-value, .rfg-stage, .rfg-status, .rfg-priority, .rfg-area, .rfg-brand, .rfg-type, .rfg-assign-type { grid-column: span 1; }
    .report-filter-search, .report-filter-actions { grid-column: auto; }
    .request-information-grid, .inspection-form-grid, .inspection-readonly-grid, .inspection-summary-grid, .workflow-details-grid, .workflow-detail-summary { grid-template-columns: 1fr; }
    .request-information-grid { column-gap: 0; }
    .workflow-upload-form { grid-template-columns: 1fr; }
    .workflow-upload-form > .button { width: 100%; margin-bottom: 0; }
    .workflow-form-footer, .stage-action-row, .workflow-undo-row { align-items: stretch; flex-direction: column; }
    .workflow-undo-row .button { width: 100%; }
    .inspection-template-box { align-items: stretch; flex-direction: column; }
    .inspection-template-box .button { width: 100%; }
    .workflow-stage-head { grid-template-columns: 31px minmax(0, 1fr); }
    .workflow-stage-head .stage-status { grid-column: 2; margin-left: 0; justify-self: start; }
}

@media (max-width: 480px) {
    .profile-bar { padding: 0 12px; }
    .profile-copy { display: none; }
    .profile-button { padding: 4px 6px; }
    .profile-avatar { width: 36px; height: 36px; }
    .page-content { padding: 16px 12px 32px; }
    .panel-heading { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .login-card { padding-inline: 20px; }
    .login-lines::before, .login-lines::after { opacity: .4; }
    .stats-grid { grid-template-columns: 1fr; }
    .report-filter-grid {
        grid-template-columns: 1fr;
    }
    .rfg-search, .rfg-date-period, .rfg-period-value, .rfg-stage, .rfg-status, .rfg-priority, .rfg-area, .rfg-brand, .rfg-type, .rfg-assign-type, .rfg-actions {
        grid-column: span 1;
    }
}

.assignment-panel-body { padding: 4px 18px 24px; }
.assignment-route-badge { margin-left: auto; border-radius: 20px; background: #edf2f7; color: #42566e; padding: 5px 12px; font-size: 12px; font-weight: 700; }
.assignment-route-badge.assignment-in-house { background: #e9f1ff; color: #2455a0; }
.assignment-attribution { margin: 8px 0; font-size: 13px; line-height: 1.6; color: #52657d; overflow-wrap: anywhere; }
.assignment-attribution strong { color: #20364e; }
.assignment-attribution > span { display: inline-block; margin-left: 10px; color: #6e8095; font-size: 12px; }
.assignment-date { margin: 4px 0 10px; color: #6e8095; font-size: 12px; }
.assignment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; margin-top: 18px; }
.assignment-remarks, .assignment-other-field { grid-column: 1 / -1; }
.assignment-locked-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.assignment-action-row { display: flex; justify-content: space-between; gap: 16px; margin: 18px 0 12px; }
.assignment-admin-actions { justify-content: flex-end; }
.assignment-form textarea { width: 100%; box-sizing: border-box; }
.pm-confirmation-dialog { border: 0; border-radius: 14px; padding: 26px; width: min(480px, calc(100vw - 32px)); max-height: 90vh; box-sizing: border-box; color: #20364e; box-shadow: 0 20px 70px #0004; }
.pm-confirmation-dialog::backdrop { background: #10243899; }
.pm-confirmation-dialog h2 { margin: 0 0 12px; font-size: 19px; }
.pm-confirmation-dialog p { line-height: 1.6; }
#pmConfirmationSummary, #pmConfirmationError { white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-confirmation-dialog .form-field { margin-top: 18px; }
.pm-confirmation-dialog .admin-password-actions { margin-top: 22px; }
.pm-confirmation-dialog [hidden] { display: none !important; }
.assignment-form .form-field, .in-house-detail-form .form-field { margin: 0; min-width: 0; }
.assignment-form select, .assignment-form input, .in-house-detail-form input, .in-house-detail-form textarea { width: 100%; box-sizing: border-box; }
.assignment-form > .button, .in-house-form-actions > .button { min-height: 42px; }
.assignment-form-help { color: #687b92; font-size: 12px; line-height: 1.6; margin: 0; }
.assignment-form > .assignment-form-help { grid-column: 1 / -1; }
.in-house-assignment-schedule { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; padding: 16px; border: 1px solid #cfdbea; border-left: 4px solid #d91c3b; border-radius: 10px; background: linear-gradient(135deg, #f9fbfd 0%, #f2f6fb 100%); }
.in-house-assignment-schedule[hidden] { display: none !important; }
.assignment-schedule-intro { grid-column: 1 / -1; }
.assignment-schedule-intro span, .schedule-kicker { display: block; margin-bottom: 4px; color: #d71938; font-size: 10px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.assignment-schedule-intro p { margin: 0; color: #61758d; font-size: 12px; line-height: 1.5; }
.assignment-schedule-ready { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 4px; padding: 14px 16px; border: 1px solid #d8e2ed; border-radius: 9px; background: #f7f9fc; }
.assignment-schedule-ready span { display: block; color: #6b7e94; font-size: 11px; }
.assignment-schedule-ready strong { display: block; margin-top: 4px; color: #1a3048; font-size: 14px; }
.in-house-workflow { margin-top: 24px; border-top: 1px solid #e3eaf2; }
.in-house-step { padding: 22px 0; border-bottom: 1px solid #e3eaf2; }
.in-house-step:last-child { padding-bottom: 0; border-bottom: 0; }
.in-house-workflow-standalone { display: flex; flex-direction: column; gap: 17px; margin-top: 0; border-top: 0; }
.in-house-workflow-standalone > .in-house-step,
.in-house-workflow-standalone > .in-house-step:last-child { padding: 22px 24px; border: 1px solid var(--line); }
.in-house-step-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.in-house-step-heading h3 { font-size: 14px; margin: 0; color: #20364e; }
.in-house-step-heading .stage-status { margin-left: auto; }
.in-house-step-number { display: grid; place-items: center; width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%; background: #edf2f8; color: #425d7b; font-size: 12px; font-weight: 700; }
.in-house-detail-form { display: grid; gap: 12px; margin-top: 16px; }
.in-house-detail-form textarea { resize: vertical; min-height: 110px; }
.in-house-form-actions { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.in-house-form-actions .form-field { flex: 1; max-width: 380px; }
.in-house-work-order-text { padding: 14px 16px; background: #f7f9fc; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; color: #334b65; }
.in-house-schedule-block { margin: 14px 0 18px; padding: 15px; border: 1px solid #d9e3ed; border-radius: 10px; background: #fbfcfe; }
.in-house-schedule-block.has-schedule { border-color: #bfd4cd; background: #f5faf8; }
.in-house-schedule-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.in-house-schedule-title strong { display: block; color: #20364e; font-size: 13px; }
.in-house-schedule-form { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; align-items: end; margin-top: 14px; }
.in-house-schedule-form .form-field { margin: 0; min-width: 0; }
.in-house-schedule-form input { width: 100%; box-sizing: border-box; }
.schedule-print-button { white-space: nowrap; }
.in-house-personnel-list { display: grid; gap: 8px; }
.in-house-personnel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.in-house-personnel-row input { min-width: 0; }
.personnel-remove-button { min-height: 40px; padding: 7px 10px; color: #9c2f42; background: #fff; border: 1px solid #e5cbd1; }
.personnel-remove-button:disabled { cursor: not-allowed; color: #96a3b0; background: #f5f7f9; border-color: #dfe5eb; opacity: .7; }
.personnel-add-button { width: 100%; margin-top: 8px; border-style: dashed; }
.form-draft-notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; width: 100%; margin-top: 14px; padding-top: 12px; border-top: 1px solid #dfe5eb; color: #64748b; }
.form-draft-notice[hidden] { display: none; }
.form-draft-notice .button { font-size: 12px; padding: 6px 10px; }
.schedule-personnel-field > small { display: block; margin-top: 6px; }
.in-house-undo-row { margin-top: 16px; }
@media (max-width: 780px) {
    .assignment-panel-body { padding: 4px 16px 20px; }
    .workflow-stage-card > .workflow-stage-body { padding: 20px 16px; }
    .in-house-workflow-standalone > .in-house-step,
    .in-house-workflow-standalone > .in-house-step:last-child { padding: 20px 16px; }
    .assignment-form { grid-template-columns: 1fr; }
    .in-house-form-actions { align-items: stretch; flex-direction: column; }
    .in-house-form-actions .form-field { max-width: none; }
    .assignment-attribution > span { display: block; margin-left: 0; }
    .in-house-assignment-schedule, .in-house-schedule-form { grid-template-columns: 1fr; }
    .in-house-schedule-title, .assignment-schedule-ready { align-items: stretch; flex-direction: column; }
    .schedule-print-button { width: 100%; }
}

@media print {
    .sidebar,
    .sidebar-overlay,
    .sidebar-toggle,
    .mobile-menu,
    .sidebar-close-btn,
    .profile-bar {
        display: none !important;
    }
    .main-area {
        margin-left: 0 !important;
    }
}

@media (max-width: 780px) {
    .sidebar {
        bottom: auto;
        height: 100vh;
        height: 100dvh;
    }

    .sidebar-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    .sidebar-footer {
        position: absolute;
        z-index: 1;
        right: 0;
        bottom: 0;
        left: 0;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        background: #021321;
    }

    .filter-bar .filter-field,
    .filter-bar .filter-field.filter-field-search,
    .dealer-filter-bar .filter-field-search,
    .dealer-filter-bar .filter-field-area,
    .dealer-filter-bar .filter-field-brand {
        flex: 0 0 39px;
        min-width: 0;
    }

    .filter-bar .filter-field input,
    .filter-bar .filter-field select {
        flex: 1 1 0;
        width: 0 !important;
        min-width: 0;
    }

    .main-area,
    .page-content,
    .page-content > *,
    .panel,
    .workflow-card,
    .workflow-stage-card {
        min-width: 0;
    }

    .page-heading h1,
    .panel-heading h2,
    .workflow-card-head h2 {
        overflow-wrap: anywhere;
    }

    .button,
    .page-content input,
    .page-content select,
    .page-content textarea {
        max-width: 100%;
    }

    .table-scroll {
        max-width: 100%;
        overscroll-behavior-x: contain;
    }
}

/* Password controls for profile, account forms, recovery, and authorization. */
.password-field { position: relative; width: 100%; min-width: 0; }
.password-field > input[data-password-input] { width: 100%; padding-right: 46px; }
.password-field > .password-toggle {
    top: 50%;
    right: 5px;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
}