/* ============================================================
   POD-NPS-v2 — Modern design system theme override
   Applies the same visual language as the NPS POD mobile app.
   Included AFTER app.css in index.html so these rules win.
   ============================================================ */

:root {
    /* Brand palette — matches mobile app colors.xml */
    --brand-primary: #2563EB;
    --brand-primary-dark: #1D4ED8;
    --brand-primary-light: #DBEAFE;
    --brand-accent: #3B82F6;

    /* Surfaces */
    --surface-page: #F5F7FA;
    --surface-card: #FFFFFF;
    --surface-subtle: #F8FAFC;

    /* Text */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --text-on-primary: #FFFFFF;

    /* Strokes / dividers */
    --stroke-subtle: #E2E8F0;
    --stroke-default: #CBD5E1;

    /* Status */
    --status-success: #10B981;
    --status-warning: #F59E0B;
    --status-danger: #EF4444;
    --status-info: #0EA5E9;

    /* Spacing scale (4dp base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
    --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.18);

    /* Typography */
    --font-stack: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* --------- Global baseline --------- */
html, body {
    font-family: var(--font-stack);
    color: var(--text-primary);
    background-color: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.login-body {
    background:
        url('/assets/images/login-bg.svg') 0 0 / 240px 240px repeat,
        radial-gradient(1200px 600px at 0% 0%, rgba(96, 165, 250, 0.35), transparent 60%),
        radial-gradient(900px 520px at 100% 100%, rgba(37, 99, 235, 0.38), transparent 55%),
        radial-gradient(760px 760px at 72% 18%, rgba(14, 165, 233, 0.22), transparent 60%),
        linear-gradient(135deg, #1E3A8A 0%, #2563EB 55%, #3B82F6 100%);
    min-height: 100vh;
}

/* --------- Toolbars / header --------- */
md-toolbar.desktop,
md-toolbar.tablet,
md-toolbar.mobile,
.md-toolbar-tools.custom-md-toolbar {
    background: linear-gradient(90deg, var(--brand-primary-dark), var(--brand-primary)) !important;
    color: var(--text-on-primary) !important;
    box-shadow: var(--shadow-md);
}

/* On the home page the hero banner replaces the toolbar entirely,
   so we hide the legacy blue bar to reclaim ~64px of vertical space
   and avoid a duplicate greeting. Other pages still get the toolbar. */
body.page-home md-toolbar.desktop,
body.page-home md-toolbar.tablet,
body.page-home md-toolbar.mobile {
    display: none !important;
}

/* Pull the hero up to the viewport top — zero out md-content's default padding
   and shrink the home-wrap top padding on the home page only. */
body.page-home md-content[ng-view] {
    padding-top: 0 !important;
}

body.page-home .home-wrap {
    padding-top: var(--space-sm) !important;
}

.custom-md-toolbar .md-button,
.custom-md-toolbar i.material-icons {
    color: var(--text-on-primary) !important;
}

.user-greetings p {
    margin: 0 !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-on-primary) !important;
    opacity: 0.92;
}

.span-header {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px;
}

.span-header label,
.span-header .app-header-text {
    color: var(--text-on-primary) !important;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    line-height: 1;
    margin: 0;
}

.span-header .app-header-logo,
.custom-md-toolbar .app-header-logo {
    width: auto !important;
    height: 38px !important;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
    margin: 0;
}

/* --------- Side navigation --------- */
md-sidenav.md-sidenav-left {
    background: var(--surface-card) !important;
    box-shadow: var(--shadow-lg);
}

md-sidenav md-toolbar {
    background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)) !important;
    color: var(--text-on-primary) !important;
}

.md-custom-parent {
    border-bottom: 1px solid var(--stroke-subtle);
    transition: background 0.15s ease;
}

.md-custom-parent:hover {
    background: var(--brand-primary-light);
}

.md-custom-parent.active {
    background: var(--brand-primary-light);
    border-left: 3px solid var(--brand-primary);
}

.md-custom-parent.active p {
    color: var(--brand-primary-dark) !important;
    font-weight: 600;
}

.md-custom-parent p {
    color: var(--text-primary);
    font-weight: 500;
    padding: 12px 16px;
    margin: 0;
}

.md-custom-child p {
    color: var(--text-secondary);
    font-size: 14px;
    padding: 10px 16px 10px 32px;
    margin: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.md-custom-child p:hover {
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
}

/* --------- Buttons --------- */
.md-button.md-primary,
.md-button.md-raised.md-primary,
.md-button.md-fab.md-primary {
    background-color: var(--brand-primary) !important;
    color: var(--text-on-primary) !important;
}

.md-button.md-primary:hover,
.md-button.md-raised.md-primary:hover {
    background-color: var(--brand-primary-dark) !important;
}

/* Legacy brand-colored classes — repaint to blue */
.pDropdownChoosen {
    background: var(--brand-primary) !important;
    color: var(--text-on-primary) !important;
    border-radius: var(--radius-sm);
}

.pDropdownChoosen:hover,
.pDropdown:hover {
    background: var(--brand-primary-dark) !important;
    color: var(--text-on-primary) !important;
}

.classPInput {
    border-bottom-color: var(--brand-primary) !important;
    border-bottom-width: 2px !important;
    font-family: var(--font-stack);
    font-size: 14px;
    padding: 10px 12px;
    outline: none;
    transition: border-color 0.15s ease;
}

.classPInput:focus {
    border-bottom-color: var(--brand-primary-dark) !important;
}

/* Table / action buttons — modern pill style */
.buttonTable2,
.buttonTable4,
.buttonTable5,
.buttonTableRP,
.buttonTablePrint {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--stroke-default) !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    background: var(--surface-card) !important;
    transition: all 0.15s ease;
}

.buttonTable2:hover,
.buttonTable4:hover,
.buttonTable5:hover,
.buttonTableRP:hover,
.buttonTablePrint:hover {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-on-primary) !important;
}

/* --------- Inputs --------- */
md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused label,
md-input-container:not(.md-input-invalid).md-input-focused label {
    color: var(--brand-primary) !important;
}

md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused .md-input,
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    border-color: var(--brand-primary) !important;
}

input:focus, textarea:focus, select:focus {
    outline-color: var(--brand-primary);
}

/* --------- Dashboard / content --------- */
.dashboardContent {
    background: var(--surface-page) !important;
    padding: var(--space-lg) !important;
}

/* --------- Checkbox --------- */
.checkbox {
    border-color: var(--stroke-default) !important;
    border-radius: 4px !important;
}

.checkbox:checked {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* ============================================================
   Login page — split-screen brand + form layout
   ============================================================ */

/* Force full viewport coverage on login so the gradient fills everything. */
html:has(body.login-body),
body.login-body {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

body.login-body md-content.content,
body.login-body md-content[ng-view] {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    height: 100vh !important;
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden;
}

.login-shell {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    z-index: 10;
}

.login-split {
    display: flex;
    width: 100%;
    max-width: 1100px;
    min-height: 640px;
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    box-shadow: 0 40px 100px rgba(15, 23, 42, 0.35),
                0 16px 32px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* ---------- LEFT: Brand panel ---------- */
.login-brand-panel {
    position: relative;
    flex: 1 1 50%;
    padding: 48px 44px 36px 44px;
    color: var(--text-on-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    isolation: isolate;
}

.brand-panel-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(14, 165, 233, 0.35), transparent 55%),
        linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 45%, #2563EB 100%);
    z-index: -1;
}

.brand-panel-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/images/login-map.svg') center / cover no-repeat;
    opacity: 0.6;
    mask-image: radial-gradient(ellipse at 50% 45%, #000 45%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 45%, transparent 100%);
}

.brand-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.brand-mark img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.brand-wordmark h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
    color: #fff;
}

.brand-wordmark p {
    font-size: 12px;
    font-weight: 500;
    margin: 2px 0 0 0;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.brand-body {
    margin: auto 0;
}

.brand-headline {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.brand-sub {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 32px 0;
    max-width: 420px;
    font-weight: 400;
}

.brand-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.brand-features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.brand-features .feat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.brand-features .feat-icon i {
    color: #fff;
    font-size: 20px;
}

.brand-features li > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
}

.brand-features strong {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.brand-features span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}

.brand-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.brand-footer .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 10px #34D399;
}

/* ---------- RIGHT: Form panel ---------- */
.login-form-panel {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 44px;
    background: var(--surface-card);
}

.form-inner {
    width: 100%;
    max-width: 380px;
}

.form-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    letter-spacing: -0.015em;
}

.form-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 32px 0;
    font-weight: 400;
}

.login-error-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FEF2F2;
    color: #B91C1C;
    border: 1px solid #FECACA;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}

.login-error-slot i {
    font-size: 18px;
    flex: none;
}

.login-form-panel .field-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.login-form-panel .field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.login-form-panel .md-custom-login,
.login-form-panel md-input-container {
    background: var(--surface-card);
    border: 1.5px solid var(--stroke-default);
    border-radius: var(--radius-md);
    padding: 0 14px !important;
    margin: 0 !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Neutralise Angular Material's default error-message slot so the input
   sits vertically centred in the frame. */
.login-form-panel .md-custom-login .md-errors-spacer,
.login-form-panel md-input-container .md-errors-spacer {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
}

.login-form-panel .md-custom-login:hover,
.login-form-panel md-input-container:hover {
    border-color: #94A3B8;
}

.login-form-panel .md-custom-login:focus-within,
.login-form-panel md-input-container:focus-within {
    border-color: var(--brand-primary);
    background: var(--surface-card);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.login-form-panel .input-login {
    font-family: var(--font-stack);
    font-size: 14px !important;
    font-weight: 500;
    color: var(--text-primary) !important;
    padding: 10px 0 !important;
    line-height: 1.2 !important;
    border: none !important;
    background: transparent !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    outline: none;
    box-shadow: none !important;
}

.login-form-panel .input-login::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

/* Show/hide password toggle — absolute on the right so the input keeps its
   full width and centered text (matching the User ID field). */
.login-form-panel .md-custom-login,
.login-form-panel md-input-container { position: relative; }
.login-form-panel .pwd-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.login-form-panel .pwd-toggle:hover { color: var(--brand-primary); }
.login-form-panel .pwd-toggle .material-icons { font-size: 20px; line-height: 1; }

.login-form-panel .btn-login {
    background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)) !important;
    color: var(--text-on-primary) !important;
    display: block;
    width: 100%;
    margin: 8px 0 0 0 !important;
    padding: 0 24px !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-transform: none;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    min-height: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    text-align: center;
}

.login-form-panel .btn-login:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.38);
    background: linear-gradient(135deg, #1E40AF, var(--brand-primary-dark)) !important;
}

.login-form-panel .btn-login[disabled],
.login-form-panel .btn-login.md-button[disabled] {
    background: var(--surface-card) !important;
    color: var(--text-muted) !important;
    border: 1.5px solid var(--stroke-default) !important;
    opacity: 1 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none !important;
}

.login-form-panel .btn-login[disabled] span,
.login-form-panel .btn-login.md-button[disabled] span {
    color: var(--text-muted) !important;
}

.login-form-panel .btn-login span {
    color: inherit !important;
}

.form-version {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    margin: 28px 0 0 0;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ---------- Responsive: stack panels on narrow screens ---------- */
@media (max-width: 880px) {
    body.login-body,
    body.login-body md-content.content,
    body.login-body md-content[ng-view] {
        overflow: auto !important;
    }

    .login-shell {
        position: relative;
        inset: auto;
        min-height: 100vh;
        padding: var(--space-md);
    }

    .login-split {
        flex-direction: column;
        min-height: auto;
        max-width: 480px;
    }

    .login-brand-panel {
        padding: 32px 28px;
    }

    .brand-headline {
        font-size: 26px;
    }

    .brand-body {
        margin: 24px 0;
    }

    .brand-features {
        gap: 12px;
    }

    .login-form-panel {
        padding: 36px 28px;
    }
}

/* ============================================================
   Change-password popup
   ============================================================ */
.backgroundPopUp {
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.backgroundPopUp > div {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
    width: 420px !important;
    left: calc(50% - 210px) !important;
    padding: 32px !important;
}

.backgroundPopUp p[style*="color: rgb(102,45,145)"],
.backgroundPopUp p[style*="color:rgb(102,45,145)"] {
    color: var(--brand-primary) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    margin: 0 0 var(--space-lg) 0 !important;
}

.backgroundPopUp button[type="button"] {
    background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)) !important;
    color: var(--text-on-primary) !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.backgroundPopUp button[type="button"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}

/* ============================================================
   Global app footer — "Powered by Qualitas" (fixed at bottom)
   ============================================================ */

html, body {
    margin: 0;
}

/* Leave space at the bottom of every non-login page so scrolled
   content never ends up behind the fixed footer, plus side gutters so
   content/forms don't stick to the left/right screen edges. */
body:not(.login-body) md-content[ng-view],
body:not(.login-body) md-content.content {
    padding-bottom: 90px !important;
    padding-left: clamp(16px, 4vw, 64px) !important;
    padding-right: clamp(16px, 4vw, 64px) !important;
    box-sizing: border-box;
}

/* Wide data-table pages (Delivery Tracking / History / Self Collection) need the
   full width — a large gutter pushes columns and the right-side action buttons
   off-screen. Give those pages only a slim gutter. */
body:not(.login-body) md-content[ng-view]:has(table.table),
body:not(.login-body) md-content.content:has(table.table) {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.app-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(245, 247, 250, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--stroke-subtle);
    padding: 12px var(--space-lg);
    box-sizing: border-box;
}

.app-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.app-footer-version {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.app-footer-logo {
    height: 44px;
    width: auto;
    max-width: 260px;
    opacity: 0.85;
    transition: opacity 0.15s ease;
    display: block;
}

.app-footer-logo:hover {
    opacity: 1;
}

/* ---------- Login-specific: Powered by inside the form card ---------- */
.form-powered {
    display: flex;
    justify-content: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--stroke-subtle);
}

.form-powered img {
    height: 36px;
    width: auto;
    max-width: 200px;
    opacity: 0.75;
}

@media (max-width: 720px) {
    .app-footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* Loader overlay */
#loaderContainer {
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.loader {
    border-top-color: var(--brand-primary) !important;
}

/* ============================================================
   Tables — modern look
   ============================================================ */
table.ng-table,
table.table {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--surface-card);
}

table.ng-table thead th,
table.table thead th {
    background: var(--surface-subtle) !important;
    color: var(--text-secondary) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--stroke-subtle);
    padding: 12px 14px !important;
}

table.ng-table tbody tr,
table.table tbody tr {
    transition: background 0.1s ease;
}

table.ng-table tbody tr:hover,
table.table tbody tr:hover {
    background: var(--brand-primary-light);
}

.searchTr {
    background: var(--surface-subtle) !important;
}

.inputSearch,
.selectDropdown {
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: var(--radius-sm) !important;
    padding: 7px 10px !important;
    font-family: var(--font-stack);
    font-size: 13px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inputSearch:focus,
.selectDropdown:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}

/* ============================================================
   Home dashboard
   ============================================================ */
.home-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* ---------- Compact strip (replaces the big hero banner) ---------- */
.home-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: 10px 4px 6px;
    margin: 0;
}

.strip-welcome {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.strip-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strip-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    flex-wrap: wrap;
}

.strip-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.strip-meta-item .material-icons {
    font-size: 14px !important;
    color: var(--text-muted);
}

.strip-meta-sep { color: var(--text-muted); opacity: 0.6; }

/* Legacy hero banner (kept for other pages that still use it) */
.home-hero {
    background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 45%, #2563EB 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 22px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(29, 78, 216, 0.22);
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.18), transparent 55%),
        radial-gradient(circle at 15% 90%, rgba(14, 165, 233, 0.28), transparent 55%);
    pointer-events: none;
}

.home-hero > * {
    position: relative;
    z-index: 1;
}

.hero-text {
    flex: 1 1 auto;
    min-width: 280px;
}

.hero-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 4px 0;
}

.hero-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 3px 0;
    color: #fff;
}

.hero-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    font-weight: 400;
}

.hero-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.meta-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    min-width: 150px;
}

.meta-chip i.material-icons {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.88);
}

.meta-chip > div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.meta-chip-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
}

.meta-chip-value {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

/* Right column of the hero: action buttons on top, role/plant chips below. */
.hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    flex: 0 0 auto;
}

/* Hero action buttons — replaces the legacy toolbar actions
   (change password, logout). White on gradient, glass hover. */
.hero-actions {
    display: flex;
    gap: 8px;
}

.hero-action-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.hero-action-btn .material-icons {
    font-size: 18px !important;
    color: #fff;
}

.hero-action-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.40);
    transform: translateY(-1px);
}

.hero-action-btn:active {
    transform: translateY(0);
}

/* ---------- Section grouping ---------- */
.home-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.section-head h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.section-head p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 4px 0 0 0;
}

/* ---------- Tile grid ---------- */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.tile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--surface-card);
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-lg);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    font-family: var(--font-stack);
    width: 100%;
    position: relative;
    overflow: hidden;
}

.tile:hover {
    transform: translateY(-2px);
    border-color: var(--brand-primary-light);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.tile:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.tile-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.tile-icon i.material-icons {
    font-size: 26px;
}

.tile-icon-blue    { background: #DBEAFE; } .tile-icon-blue i    { color: #1D4ED8; }
.tile-icon-indigo  { background: #E0E7FF; } .tile-icon-indigo i  { color: #4338CA; }
.tile-icon-teal    { background: #CCFBF1; } .tile-icon-teal i    { color: #0F766E; }
.tile-icon-amber   { background: #FEF3C7; } .tile-icon-amber i   { color: #B45309; }
.tile-icon-slate   { background: #E2E8F0; } .tile-icon-slate i   { color: #334155; }

.tile-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tile-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    margin-bottom: 2px;
}

.tile-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.tile-arrow {
    color: var(--text-muted);
    font-size: 22px !important;
    flex: none;
    transition: transform 0.18s ease, color 0.18s ease;
}

.tile:hover .tile-arrow {
    color: var(--brand-primary);
    transform: translateX(2px);
}

/* ---------- Hide legacy <ul id="rig"> styles if still in DOM ---------- */
ul#rig {
    display: none !important;
}

/* Overwrite the legacy home body background so our cards pop */
body {
    background-color: var(--surface-page);
}

md-content {
    background-color: transparent !important;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 720px) {
    .home-wrap {
        padding: var(--space-lg) var(--space-md);
        gap: var(--space-lg);
    }

    .home-hero {
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-title {
        font-size: 22px;
    }

    .tile {
        padding: 16px;
    }

    .tile-icon {
        width: 44px;
        height: 44px;
    }
}

/* ============================================================
   Material-ui card polish
   ============================================================ */
md-card {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--stroke-subtle);
}

md-card-title {
    padding: var(--space-lg) var(--space-lg) var(--space-sm) var(--space-lg) !important;
}

md-card-content {
    padding: var(--space-sm) var(--space-lg) var(--space-lg) var(--space-lg) !important;
}

/* ============================================================
   LIST & DETAIL PAGES
   Targets every viewShipment/notDelivered/followUp/selfCollection/
   user/customer/vehicle list + detail without rewriting each HTML.
   The legacy markup uses inline `style="color: #00AAA1"` on h2's, the
   `.table`, `.valueContainer`, `.pLabelDropdown`, and `.buttonTable*`
   classes — we repaint all of those here.
   ============================================================ */

/* ---------- Page container ---------- */
body:not(.login-body) md-content[ng-view] > [id="loaderContainer"] + div,
body:not(.login-body) md-content[ng-view] > form.positionTable,
body:not(.login-body) md-content[ng-view] > div > .form-horizontal {
    font-family: var(--font-stack);
}

.form-horizontal,
.positionTable {
    padding: 0 var(--space-xl) !important;
}

@media (max-width: 900px) {
    .form-horizontal,
    .positionTable {
        padding: 0 var(--space-md) !important;
    }
}

/* ---------- Page title banner ---------- */
/* Repaint the legacy teal h2 "DELIVERY TRACKING" / "Delivery Tracking Detail"
   headings into a brand-aligned page header bar. */
h2[style*="#00AAA1"],
h2[style*="#00aaa1"],
h2[style*="color: rgb(0, 170, 161)"] {
    color: var(--text-primary) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    margin: var(--space-lg) 0 var(--space-md) 0 !important;
    padding-left: 14px !important;
    border-left: 4px solid var(--brand-primary);
    line-height: 1.2;
}

/* ---------- Tables (list pages) ---------- */
table.table,
table.ng-table {
    width: 100% !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: var(--space-lg) !important;
}

table.table > tbody > tr:first-child,
table.ng-table > tbody > tr:first-child,
table.table > tr:first-child,
.fontheaderuser {
    background: var(--surface-subtle) !important;
}

.fontheaderuser th,
table.table > tr:first-child > th,
table.ng-table > tr:first-child > th,
table.ng-table thead th,
table.table thead th {
    background: var(--surface-subtle) !important;
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--stroke-subtle) !important;
    padding: 14px 12px !important;
    text-align: left;
    vertical-align: middle !important;
}

/* Search row */
tr.searchTr {
    background: #FAFBFD !important;
}

tr.searchTr td {
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--stroke-subtle) !important;
    background: transparent !important;
}

.inputSearch,
.selectDropdown {
    width: 100% !important;
    padding: 8px 10px !important;
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-stack);
    font-size: 12px !important;
    color: var(--text-primary);
    background: var(--surface-card);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inputSearch:focus,
.selectDropdown:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}

/* Data rows */
tr.contentTable td {
    padding: 12px !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--stroke-subtle) !important;
    vertical-align: top !important;
}

tr.contentTable:hover {
    background: #F8FAFC !important;
    transition: background 0.1s ease;
}

tr.contentTable:nth-child(odd) {
    background: #FCFDFE !important;
}

tr.contentTable:nth-child(odd):hover {
    background: #F1F5FB !important;
}

tr.contentTable:last-child td {
    border-bottom: none !important;
}

tr.contentTable td u {
    text-decoration: none !important;
    font-weight: 600;
    color: var(--brand-primary);
    cursor: pointer;
}

tr.contentTable td u:hover {
    text-decoration: underline !important;
    color: var(--brand-primary-dark);
}

/* ---------- Status badges (auto-colored by text content) ---------- */
tr.contentTable td:has(> *:only-child) {
    vertical-align: middle !important;
}

/* A generic pill look for status cells — applied via data-attribute or the
   layout of the legacy cells. Because the legacy just renders raw text,
   we can't easily colour them by exact value. Keep text clear and bold. */

/* ---------- Action buttons on rows ---------- */
.buttonTable2,
.buttonTable3,
.buttonTable4,
.buttonTable5,
.buttonTableRP,
.buttonTablePrint {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--stroke-default) !important;
    background: var(--surface-card) !important;
    color: var(--text-secondary) !important;
    margin: 2px 2px !important;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 72px;
    font-family: var(--font-stack);
}

.buttonTable2:hover,
.buttonTable4:hover,
.buttonTable5:hover,
.buttonTableRP:hover,
.buttonTablePrint:hover {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-on-primary) !important;
}

/* The primary "Search" / "Print" action */
.buttonTable3 {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-on-primary) !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.buttonTable3:hover {
    background: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* ---------- Paging ---------- */
.paging {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    margin-top: var(--space-md);
}

.paging p {
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
    margin: 0 !important;
}

.paging p:hover {
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
}

.paging p[ng-bind] {
    background: var(--brand-primary);
    color: var(--text-on-primary) !important;
    min-width: 36px;
    text-align: center;
    width: auto !important;
    height: auto !important;
    cursor: default;
}

.paging p[ng-bind]:hover {
    background: var(--brand-primary);
    color: var(--text-on-primary) !important;
}

/* ============================================================
   DETAIL PAGES (viewDetail / followUpDetail / etc.)
   ============================================================ */

/* The "Back" button in the top-right corner of detail pages uses
   .buttonTable2 — already styled above, just tighten placement. */
.form-horizontal > button[ng-click*="goBack"],
.form-horizontal > button[ng-click*="Back"] {
    padding: 8px 20px !important;
    min-width: 88px;
    margin-top: var(--space-md);
}

/* The label/value pattern: <p class="pLabelDropdown">Label</p>
                            <p class="valueContainer">Value</p> */
.pLabelDropdown {
    display: block !important;
    width: 100% !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 12px 0 6px 0 !important;
}

.valueContainer {
    display: block !important;
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    background: var(--surface-subtle) !important;
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 12px !important;
    min-height: 40px;
    box-sizing: border-box;
    line-height: 1.4;
    margin: 0 !important;
    word-break: break-word;
}

textarea.valueContainer {
    font-family: var(--font-stack);
    resize: vertical;
    min-height: 80px;
    white-space: pre-wrap;
}

/* Three-column summary cards wrapped in the detail form-horizontal.
   Match both 33.33% (viewDetail etc.) and plain 33% (followUpDetail). */
.form-horizontal > div[style*="inline-block"][style*="33.33%"],
.form-horizontal > div[style*="inline-block"][style*="33%"]:not([style*="33.33%"]) {
    padding: 0 var(--space-md) !important;
    vertical-align: top !important;
    box-sizing: border-box;
}

/* ---------- Detail page wrapper card ---------- */
.form-horizontal {
    background: transparent;
}

body:not(.login-body) md-content[ng-view] > div > .form-horizontal {
    background: var(--surface-card);
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg) var(--space-xl) var(--space-xl) var(--space-xl) !important;
    margin: var(--space-lg) var(--space-xl) !important;
}

/* But NOT for the outer list-page wrapper (which has inline 0% 2% padding) */
body:not(.login-body) md-content[ng-view] > .form-horizontal[style*="padding:0% 2%"],
body:not(.login-body) md-content[ng-view] > .form-horizontal[style*="padding: 0% 2%"] {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: var(--space-lg) var(--space-xl) 0 var(--space-xl) !important;
    margin: 0 !important;
}

/* Detail item-list table (after the header summary) — looks identical to list table */
.positionTable {
    margin-top: var(--space-md) !important;
}

.positionTable table.table td {
    font-size: 13px !important;
    padding: 12px !important;
}

/* ---------- Photo thumbnail in history detail ---------- */
.buttonPhoto {
    width: auto !important;
    height: auto !important;
    padding: 8px !important;
    background: var(--surface-subtle) !important;
    border: 1px dashed var(--stroke-default) !important;
    border-radius: var(--radius-md) !important;
    margin-top: var(--space-sm);
}

.buttonPhoto .imgPhoto,
.buttonPhoto img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 180px;
    border-radius: var(--radius-sm);
    display: block;
}

/* ---------- Confirm dialog (Save / Resend popup) ---------- */
div[ng-show*="isWantToSave"] > div,
div[ng-show*="isWantToResend"] > div {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
    padding: var(--space-xl) !important;
}

div[ng-show*="isWantToSave"] p,
div[ng-show*="isWantToResend"] p {
    font-size: 15px !important;
    color: var(--text-primary);
    margin-bottom: var(--space-lg) !important;
}

/* ============================================================
   Scroll helper: on list pages with many columns, allow horizontal
   scroll inside a container so the table doesn't force the page
   to scroll horizontally (breaking the fixed footer).
   ============================================================ */
form.positionTable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 var(--space-xl) var(--space-lg) var(--space-xl) !important;
    padding: 0 !important;
    background: var(--surface-card);
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

form.positionTable > table.table {
    min-width: 1600px;
    margin: 0 !important;
}

/* Ensure the last-column (action buttons) has enough room and
   doesn't get clipped at the container's right edge. */
form.positionTable tr.contentTable td:last-child,
form.positionTable tr.fontheaderuser th:last-child,
form.positionTable tr.searchTr td:last-child {
    padding-right: 20px !important;
    min-width: 110px;
    text-align: right;
}

/* Shrink padding slightly on the first column too so the scroll
   container feels tighter. */
form.positionTable tr.contentTable td:first-child,
form.positionTable tr.fontheaderuser th:first-child,
form.positionTable tr.searchTr td:first-child {
    padding-left: 20px !important;
}

/* When form.positionTable is the page wrapper, keep sticky header
   sticky relative to the scroll container, not the viewport. */
form.positionTable .fontheaderuser th,
form.positionTable tr.searchTr td {
    position: static !important;
}

/* Scrollbar inside the list card */
form.positionTable::-webkit-scrollbar {
    height: 10px;
}
form.positionTable::-webkit-scrollbar-track {
    background: var(--surface-subtle);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
form.positionTable::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 10px;
    border: 2px solid var(--surface-subtle);
}

/* ============================================================
   V2 MODERN REFRESH — borderless lines, glass filter bar,
   hero detail card, stronger typography hierarchy
   ============================================================ */

/* ---------- Fresh table look — minimal, line-based ---------- */
/* Override the earlier card-style table with a cleaner, airier one. */
table.table,
table.ng-table {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-bottom: var(--space-xl) !important;
}

.fontheaderuser,
table.table > tr:first-child,
table.table thead tr,
table.ng-table thead tr {
    background: transparent !important;
}

.fontheaderuser th,
table.table thead th,
table.ng-table thead th {
    background: transparent !important;
    color: var(--text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none !important;
    border-bottom: 1px solid var(--stroke-subtle) !important;
    padding: 14px 14px !important;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 3;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Add a subtle header-row background once scrolled */
body:not(.login-body) .fontheaderuser th {
    background: rgba(245, 247, 250, 0.85) !important;
}

/* Search row as a floating "filter chip" strip between header and body */
tr.searchTr {
    background: transparent !important;
    position: sticky;
    top: 44px;
    z-index: 2;
}

tr.searchTr td {
    padding: 10px 6px !important;
    border: none !important;
    background: rgba(245, 247, 250, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

tr.searchTr td:first-child {
    padding-left: 14px !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}
tr.searchTr td:last-child {
    padding-right: 14px !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.inputSearch,
.selectDropdown {
    height: 34px;
    padding: 0 12px !important;
    font-size: 12.5px !important;
}

/* Body rows — flat with hover accent */
tr.contentTable,
tr.contentTable:nth-child(odd) {
    background: transparent !important;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

tr.contentTable td {
    padding: 16px 14px !important;
    border: none !important;
    border-bottom: 1px solid var(--stroke-subtle) !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    vertical-align: middle !important;
}

tr.contentTable:hover,
tr.contentTable:nth-child(odd):hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0)) !important;
}

tr.contentTable:hover td:first-child {
    box-shadow: inset 3px 0 0 0 var(--brand-primary);
}

/* Link-style cells (underlined sold-to / ship-to names) */
tr.contentTable td u {
    text-decoration: none !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1.5px dotted var(--brand-primary);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

tr.contentTable td u:hover {
    color: var(--brand-primary-dark) !important;
    border-bottom-color: var(--brand-primary-dark);
    border-bottom-style: solid;
}

tr.contentTable td:last-child {
    text-align: right;
}

/* ---------- Action buttons — smaller, cleaner ---------- */
.buttonTable2,
.buttonTable4,
.buttonTable5,
.buttonTableRP,
.buttonTablePrint {
    padding: 6px 14px !important;
    min-width: 64px;
    font-size: 11.5px !important;
    box-shadow: none !important;
    border-radius: var(--radius-pill) !important;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.buttonTable3 {
    padding: 7px 18px !important;
    border-radius: var(--radius-pill) !important;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

/* Compact the multi-button column into a vertical stack */
tr.contentTable td:last-child {
    line-height: 1.2;
}
tr.contentTable td:last-child br {
    line-height: 4px;
}

/* ---------- List page heading with visual hierarchy ---------- */
/* The first .form-horizontal on a list page is the title + search/print strip */
body:not(.login-body) md-content[ng-view] > .form-horizontal:first-of-type {
    margin: var(--space-xl) var(--space-xl) var(--space-md) var(--space-xl) !important;
    padding-bottom: var(--space-md) !important;
    border-bottom: 1px solid var(--stroke-subtle);
}

h2[style*="#00AAA1"],
h2[style*="#00aaa1"],
h2[style*="color: rgb(0, 170, 161)"] {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
    line-height: 1.1;
    position: relative;
}

/* Replace the left-bar accent with a subtle eyebrow above the heading */
h2[style*="#00AAA1"]::before,
h2[style*="#00aaa1"]::before,
h2[style*="color: rgb(0, 170, 161)"]::before {
    content: "Module";
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 6px;
    line-height: 1;
}

/* ---------- Detail page hero header ---------- */
/* Turn the first form-horizontal on a detail page into a full-width
   gradient hero banner with prominent title and the Back button on
   the right. Edge-to-edge so the page reads as one cohesive surface. */
body:not(.login-body) md-content[ng-view] > div > .form-horizontal:first-of-type {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 45%, #E0E7FF 100%) !important;
    border: none !important;
    border-bottom: 1px solid var(--stroke-subtle) !important;
    border-radius: 0 !important;
    padding: var(--space-xl) var(--space-xl) var(--space-xxl) var(--space-xl) !important;
    margin: 0 0 var(--space-lg) 0 !important;
    position: relative;
    overflow: hidden;
    width: 100% !important;
    box-sizing: border-box;
}

body:not(.login-body) md-content[ng-view] > div > .form-horizontal:first-of-type::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 65%);
    pointer-events: none;
}

body:not(.login-body) md-content[ng-view] > div > .form-horizontal:first-of-type::after {
    content: "";
    position: absolute;
    bottom: -140px;
    left: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12), transparent 65%);
    pointer-events: none;
}

/* Ensure the title/cards inside sit above the glow overlays */
body:not(.login-body) md-content[ng-view] > div > .form-horizontal:first-of-type > * {
    position: relative;
    z-index: 1;
}

/* Action bar: Save + Back buttons float top-right of the detail hero.
   Use absolute positioning on a flex row so they always sit side-by-side
   regardless of source order in the HTML. */
.form-horizontal > button[ng-click*="goBack"],
.form-horizontal > button[ng-click*="Back"],
.form-horizontal > button[ng-click*="showSaveDialog"],
.form-horizontal > button[ng-click*="save"][type="button"]:not([ng-click*="savePicture"]) {
    position: relative;
    top: auto;
    right: auto;
    float: right !important;
    margin: 0 0 0 10px !important;
    z-index: 3;
    padding: 8px 22px !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Back = secondary (white pill with border) */
.form-horizontal > button[ng-click*="goBack"],
.form-horizontal > button[ng-click*="Back"] {
    background: var(--surface-card) !important;
    border: 1px solid var(--stroke-subtle) !important;
    color: var(--text-secondary) !important;
    box-shadow: var(--shadow-sm);
}

.form-horizontal > button[ng-click*="goBack"]:hover,
.form-horizontal > button[ng-click*="Back"]:hover {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    background: var(--surface-card) !important;
    transform: translateY(-1px);
}

/* The detail h2 inside the hero */
.form-horizontal > h2[style*="#00AAA1"],
.form-horizontal > h2[style*="#00aaa1"],
.form-horizontal > h2[style*="color: rgb(0, 170, 161)"] {
    font-size: 26px !important;
    font-weight: 800 !important;
    margin: 0 0 var(--space-md) 0 !important;
    padding: 0 !important;
    border-left: none !important;
}

/* Three info "cards" inside the hero — repaint as inline tiles.
   Match both width: 33.33% (viewDetail, notDeliveredDetail,
   selfCollectionDetail) and width: 33% (followUpDetail). */
.form-horizontal > div[style*="inline-block"][style*="33.33%"],
.form-horizontal > div[style*="inline-block"][style*="33%"]:not([style*="33.33%"]) {
    background: var(--surface-card) !important;
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-md) !important;
    margin: var(--space-sm) 0.8% 0 0.8% !important;
    width: 31.5% !important;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    vertical-align: top;
}

.form-horizontal > div[style*="inline-block"][style*="33.33%"]:hover,
.form-horizontal > div[style*="inline-block"][style*="33%"]:not([style*="33.33%"]):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-primary-light);
}

/* ---------- Field pairs: tighter + label above value ---------- */
.pLabelDropdown {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 14px 0 6px 0 !important;
}

.form-horizontal > div[style*="inline-block"][style*="33.33%"] .pLabelDropdown:first-child,
.form-horizontal > div[style*="inline-block"][style*="33%"]:not([style*="33.33%"]) .pLabelDropdown:first-child {
    margin-top: 0 !important;
}

.valueContainer {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--stroke-subtle) !important;
    border-radius: 0 !important;
    padding: 6px 0 10px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    min-height: auto !important;
}

.form-horizontal > div[style*="inline-block"][style*="33.33%"] > .pLabelDropdown:last-of-type + .valueContainer,
.form-horizontal > div[style*="inline-block"][style*="33.33%"] .valueContainer:last-of-type,
.form-horizontal > div[style*="inline-block"][style*="33%"]:not([style*="33.33%"]) > .pLabelDropdown:last-of-type + .valueContainer,
.form-horizontal > div[style*="inline-block"][style*="33%"]:not([style*="33.33%"]) .valueContainer:last-of-type {
    border-bottom: none !important;
}

textarea.valueContainer {
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: var(--surface-subtle) !important;
    min-height: 70px !important;
}

/* ---------- Item list table on detail — also refreshed ---------- */
/* The outer div.positionTable wraps the items table on detail pages.
   It must allow horizontal scroll for wide tables; we keep the card
   look but make overflow scroll so nothing gets clipped. */
div.positionTable {
    margin: var(--space-md) var(--space-xl) !important;
    padding: 0 !important;
    background: var(--surface-card);
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-sm);
}

div.positionTable > table.table {
    min-width: 0 !important;
    margin: 0 !important;
}

div.positionTable .fontheaderuser th {
    background: var(--surface-subtle) !important;
    padding: 14px 16px !important;
}

div.positionTable tr.contentTable td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--stroke-subtle) !important;
}

div.positionTable tr.contentTable:last-child td {
    border-bottom: none !important;
}

/* ---------- Keep page content above the fixed footer ---------- */
body:not(.login-body) md-content[ng-view] {
    padding-bottom: 110px !important;
}

/* ============================================================
   LEGACY PREMIUM POLISH — status badges, hero cards, stats, animations
   ============================================================ */

/* ---------- Page header with stats chip row ---------- */
/* Wrap list page heading in a better-styled block. The existing markup is:
   <div class="form-horizontal" style="padding:0% 2%;">
       <h2 style="color: #00AAA1; display: inline-block; width: 50%;">...</h2>
       <div align="right" style="display: inline-block; width: 50%;">
           <input ...> <button>Print</button>
       </div>
   </div>
   We restyle this header to align the title, search box, and print button. */

body:not(.login-body) md-content[ng-view] > .form-horizontal:first-of-type {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: var(--space-lg) var(--space-xl) 0 var(--space-xl) !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

body:not(.login-body) md-content[ng-view] > .form-horizontal:first-of-type > h2 {
    flex: 1 1 auto !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
}

body:not(.login-body) md-content[ng-view] > .form-horizontal:first-of-type > div[align="right"] {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center;
    gap: var(--space-sm);
}

body:not(.login-body) md-content[ng-view] > .form-horizontal:first-of-type input.selectDropdown {
    min-width: 240px;
    height: 38px;
}

/* Delivery-mode filter (right side of Delivery History header) */
.delivery-mode-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.delivery-mode-filter label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}

.delivery-mode-filter select.selectDropdown {
    min-width: 180px;
    height: 38px;
    margin: 0;
    font-size: 13px !important;
}

/* ---------- Status column badges ----------
   The Delivery Tracking status column is typically nth-child(12).
   The Self-Collection / Follow Up / Not-Delivered layouts differ but
   all share the pattern of a single-word status cell. We colour by
   matching common text content using a combination of class + nth
   position with selector specificity. */

/* Base badge look for the status column cells */
tr.contentTable td:nth-last-child(2) {
    font-weight: 600;
    font-size: 12px !important;
    white-space: nowrap;
}

/* Generic status word colorization via CSS attribute-less trick:
   We inject a gradient chip background on status cells by targeting
   the known column index. Status coloring by text isn't directly
   possible in CSS, but we apply a subtle neutral chip everywhere. */
tr.contentTable td[align="center"]:nth-last-child(2),
tr.contentTable td.status-cell {
    text-align: center;
}

/* Add status-color utility classes that can be added via ng-class.
   The app can opt into these by rendering <span class="status-chip
   status-success">Completed</span>, but existing markup still gets
   a reasonable default. */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
.status-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.status-chip.status-success { background: #D1FAE5; color: #047857; }
.status-chip.status-warning { background: #FEF3C7; color: #B45309; }
.status-chip.status-danger  { background: #FEE2E2; color: #B91C1C; }
.status-chip.status-info    { background: #DBEAFE; color: #1D4ED8; }
.status-chip.status-neutral { background: #F1F5F9; color: #475569; }

/* ---------- Detail page hero + info cards ----------
   The detail page has <div class="form-horizontal" ng-show="forHistory=='false'">
   containing a <h2> title and three 33%-width columns of label/value.
   Re-layout those three columns as cards. */

.form-horizontal > div[style*="inline-block"][style*="33.33%"],
.form-horizontal > div[style*="inline-block"][style*="33%"]:not([style*="33.33%"]) {
    background: var(--surface-card) !important;
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-md) var(--space-lg) var(--space-md) !important;
    margin: var(--space-md) 1% 0 1% !important;
    width: 31% !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease;
    vertical-align: top;
}

.form-horizontal > div[style*="inline-block"][style*="33.33%"]:hover,
.form-horizontal > div[style*="inline-block"][style*="33%"]:not([style*="33.33%"]):hover {
    box-shadow: var(--shadow-md);
}

@media (max-width: 960px) {
    .form-horizontal > div[style*="inline-block"][style*="33.33%"],
    .form-horizontal > div[style*="inline-block"][style*="33%"]:not([style*="33.33%"]) {
        width: 100% !important;
        margin: var(--space-md) 0 !important;
    }
}

/* Remove trailing <br> spacers that added too much vertical gap */
.form-horizontal > div[style*="inline-block"][style*="33.33%"] > br,
.form-horizontal > div[style*="inline-block"][style*="33%"]:not([style*="33.33%"]) > br {
    display: none;
}

/* The .pLabelDropdown + .valueContainer pairs inside each card */
.form-horizontal > div[style*="inline-block"][style*="33.33%"] .pLabelDropdown:first-child,
.form-horizontal > div[style*="inline-block"][style*="33%"]:not([style*="33.33%"]) .pLabelDropdown:first-child {
    margin-top: 0 !important;
}

/* ---------- Detail page outer wrapper now hosts the header
   (h2 + back button) with cards flowing underneath. Lift the form
   so it feels like a page section rather than one huge card. */
body:not(.login-body) md-content[ng-view] > div > .form-horizontal {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 var(--space-xl) var(--space-lg) var(--space-xl) !important;
    margin: var(--space-lg) 0 !important;
}

/* Keep the h2 + Back button on the same row inside the detail header */
body:not(.login-body) md-content[ng-view] > div > .form-horizontal {
    position: relative;
}

/* ---------- Buttons with Material icons ---------- */
.buttonTable2 .material-icons,
.buttonTable3 .material-icons,
.buttonTable4 .material-icons,
.buttonTable5 .material-icons {
    font-size: 15px !important;
    line-height: 1;
}

/* ---------- Animated row reveal ---------- */
@keyframes rowFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

tr.contentTable {
    animation: rowFadeIn 0.25s ease both;
}

tr.contentTable:nth-child(2) { animation-delay: 0.02s; }
tr.contentTable:nth-child(3) { animation-delay: 0.04s; }
tr.contentTable:nth-child(4) { animation-delay: 0.06s; }
tr.contentTable:nth-child(5) { animation-delay: 0.08s; }
tr.contentTable:nth-child(6) { animation-delay: 0.10s; }
tr.contentTable:nth-child(7) { animation-delay: 0.12s; }
tr.contentTable:nth-child(8) { animation-delay: 0.14s; }
tr.contentTable:nth-child(9) { animation-delay: 0.16s; }
tr.contentTable:nth-child(10) { animation-delay: 0.18s; }

/* ---------- Stickier table header ---------- */
table.table .fontheaderuser,
table.ng-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

table.table tr.searchTr {
    position: sticky;
    top: 44px;
    z-index: 1;
    box-shadow: 0 1px 0 var(--stroke-subtle);
}

/* ---------- Empty state ---------- */
tr.contentTable:only-of-type td:only-child,
table.table > tr:not(.contentTable):not(.searchTr):not(.fontheaderuser) td[colspan] {
    padding: 48px 16px !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: 14px;
    font-style: italic;
}

/* ---------- Loader overlay polish ----------
   Do NOT force display here — the element's inline style="display:none"
   is the source of truth for visibility, flipped by controllers via
   $('#loaderContainer').css('display','block'). We only style the look
   so that WHEN it's shown it looks polished. */
#loaderContainer {
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.35) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
}

/* Center the spinner only when the loader is actually shown. */
#loaderContainer[style*="display: block"],
#loaderContainer[style*="display:block"] {
    display: flex !important;
}

.loader {
    width: 48px !important;
    height: 48px !important;
    border: 4px solid rgba(255, 255, 255, 0.25) !important;
    border-top-color: #fff !important;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------- Form-horizontal labels on edit/create forms ---------- */
.form-horizontal label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    margin-bottom: 4px;
    display: block;
}

/* ---------- Text selection ---------- */
::selection {
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
}

/* ---------- Scrollbar polish (Webkit only) ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--surface-subtle);
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 10px;
    border: 2px solid var(--surface-subtle);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary);
}

/* ============================================================
   CUSTOM ALERT DIALOG — replaces browser's native alert()
   ============================================================ */
.pod-alert-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    animation: podAlertFade 0.18s ease;
}

.pod-alert-backdrop.pod-alert-closing {
    animation: podAlertFadeOut 0.18s ease forwards;
}

@keyframes podAlertFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes podAlertFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.pod-alert {
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 460px;
    padding: var(--space-xl) var(--space-xl) var(--space-lg) var(--space-xl);
    box-shadow: 0 40px 100px rgba(15, 23, 42, 0.32);
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
        "icon body"
        ". foot";
    column-gap: var(--space-md);
    row-gap: var(--space-md);
    animation: podAlertSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes podAlertSlide {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pod-alert-icon {
    grid-area: icon;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pod-alert-icon i {
    font-size: 32px;
}

.pod-alert-info    .pod-alert-icon { background: #DBEAFE; } .pod-alert-info    .pod-alert-icon i { color: #1D4ED8; }
.pod-alert-success .pod-alert-icon { background: #D1FAE5; } .pod-alert-success .pod-alert-icon i { color: #047857; }
.pod-alert-warning .pod-alert-icon { background: #FEF3C7; } .pod-alert-warning .pod-alert-icon i { color: #B45309; }
.pod-alert-error   .pod-alert-icon { background: #FEE2E2; } .pod-alert-error   .pod-alert-icon i { color: #B91C1C; }

.pod-alert-body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pod-alert-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.pod-alert-msg {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    word-break: break-word;
}

.pod-alert-foot {
    grid-area: foot;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--stroke-subtle);
}

.pod-alert-ok {
    background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: var(--radius-md);
    font-family: var(--font-stack);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    min-width: 90px;
}

.pod-alert-ok:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}

.pod-alert-ok:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35), 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Tone-specific button colors */
.pod-alert-success .pod-alert-ok {
    background: linear-gradient(135deg, #047857, #10B981);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.pod-alert-warning .pod-alert-ok {
    background: linear-gradient(135deg, #B45309, #F59E0B);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.pod-alert-error .pod-alert-ok {
    background: linear-gradient(135deg, #B91C1C, #EF4444);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

@media (max-width: 480px) {
    .pod-alert {
        grid-template-columns: 1fr;
        grid-template-areas: "icon" "body" "foot";
        justify-items: center;
        text-align: center;
        padding: var(--space-lg);
    }
    .pod-alert-foot {
        justify-content: center;
    }
}

/* ============================================================
   DETAIL PAGE POLISH — sticky action bar, better form fields
   ============================================================ */

/* Save = primary (gradient pill) — layout comes from the shared rule above */
.form-horizontal > button[ng-click*="showSaveDialog"],
.form-horizontal > button[ng-click*="save"][type="button"]:not([ng-click*="savePicture"]) {
    background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.form-horizontal > button[ng-click*="showSaveDialog"]:hover,
.form-horizontal > button[ng-click*="save"][type="button"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}

/* Editable form fields (select, textarea) inside the detail — give them
   a proper input box so they stand out from the read-only valueContainer. */
select.valueContainer,
textarea.valueContainer {
    background: var(--surface-card) !important;
    border: 1px solid var(--stroke-default) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    width: 100% !important;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: var(--font-stack);
    margin-top: 4px !important;
}

select.valueContainer:focus,
textarea.valueContainer:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}

textarea.valueContainer {
    min-height: 80px !important;
    resize: vertical;
    line-height: 1.5;
}

/* ---------- Follow Up Detail specifics — keep it consistent ----------
   The Follow Up Detail page has extras the others don't:
   - a <label class="pLabelDropdown"> used next to a checkbox
   - an <span class="selectDropdown"> used as a read-only filename chip
   - Browse / Upload / View buttons with class .buttonNoColor
   - a <textarea> inside the items-table Follow Up column
   - a Sent Email "re-send" button
   All of these need styling so the page matches every other detail. */

/* Inline label next to a checkbox should NOT be an uppercase caption —
   reset it to normal label styling so "[✓] No Signature" reads correctly. */
.form-horizontal > div label.pLabelDropdown[for],
.form-horizontal label.pLabelDropdown[for] {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    vertical-align: middle;
    cursor: pointer;
}

/* Checkbox inputs inside detail forms — brand accent + generous size */
.form-horizontal input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
    cursor: pointer;
    vertical-align: middle;
    margin: 0 6px 0 0;
}

/* Read-only filename display in the Attachment field
   (<span class="selectDropdown"> with an ng-bind) */
.form-horizontal > div span.selectDropdown {
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface-subtle) !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    font-family: var(--font-stack);
    color: var(--text-primary);
    height: auto !important;
    max-width: 100%;
    min-width: 120px;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
}

/* Browse / Upload / View ghost pills used in Follow Up Detail */
.buttonNoColor {
    background: transparent !important;
    border: 1px solid var(--stroke-default) !important;
    color: var(--text-secondary) !important;
    padding: 7px 14px !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-stack);
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 2px 3px !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.buttonNoColor:hover {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    background: var(--brand-primary-light) !important;
}

/* Textarea inside items-table rows (Follow Up column) —
   the inline style has a malformed "#dd" border; replace it. */
.positionTable table.table textarea,
div.positionTable table.table textarea,
form.positionTable table.table textarea {
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 10px !important;
    font-family: var(--font-stack);
    font-size: 12px !important;
    min-height: 70px !important;
    width: 100% !important;
    resize: vertical;
    background: var(--surface-card) !important;
    color: var(--text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.positionTable table.table textarea:focus,
div.positionTable table.table textarea:focus,
form.positionTable table.table textarea:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}

.positionTable table.table textarea[disabled],
div.positionTable table.table textarea[disabled] {
    background: var(--surface-subtle) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

/* Sent Email re-send button (history mode) */
.form-horizontal > div > button[ng-click*="showDialogResend"] {
    padding: 7px 16px !important;
    background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    margin-top: 6px !important;
    text-transform: none;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.form-horizontal > div > button[ng-click*="showDialogResend"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}

/* Save / cancel dialog polish (the "Do you want to save changes?" box) */
div[ng-show*="isWantToSave"] > div[align="center"],
div[ng-show*="isWantToResend"] > div[align="center"] {
    border-radius: var(--radius-xl) !important;
    padding: 28px !important;
    width: 380px !important;
    min-height: 0 !important;
    box-shadow: var(--shadow-xl) !important;
}

div[ng-show*="isWantToSave"] > div[align="center"] > p,
div[ng-show*="isWantToResend"] > div[align="center"] > p {
    font-size: 16px !important;
    color: var(--text-primary);
    font-weight: 600 !important;
    margin-bottom: 20px !important;
}

div[ng-show*="isWantToSave"] #buttonPdf,
div[ng-show*="isWantToResend"] #buttonPdf {
    position: static !important;
    transform: none !important;
    display: flex !important;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

div[ng-show*="isWantToSave"] #buttonPdf button,
div[ng-show*="isWantToResend"] #buttonPdf button {
    padding: 10px 28px !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    min-width: 80px;
}

/* Photo thumbnail container polish */
.buttonPhoto {
    width: 100% !important;
    max-width: 220px;
    padding: 8px !important;
    background: var(--surface-card) !important;
    border: 1px dashed var(--stroke-default) !important;
    border-radius: var(--radius-md) !important;
    margin-top: 4px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.buttonPhoto .imgPhoto,
.buttonPhoto img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 180px;
    border-radius: var(--radius-sm);
    display: block;
    object-fit: contain;
}

/* ============================================================
   REPORTS PAGE — hero + card grid + download modal
   ============================================================ */
.report-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* ---------- Hero ---------- */
.report-hero {
    background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 45%, #2563EB 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(29, 78, 216, 0.22);
}

.report-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.18), transparent 55%),
        radial-gradient(circle at 15% 90%, rgba(14, 165, 233, 0.28), transparent 55%);
    pointer-events: none;
}

.report-hero > div:first-child {
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
}

.report-hero .hero-eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

.report-hero .hero-title {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 6px 0;
}

.report-hero .hero-sub {
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    font-size: 14px;
}

.report-hero-badge {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(6px);
}

.report-hero-badge i {
    font-size: 36px;
    color: #fff;
}

/* ---------- Card grid ---------- */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.report-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    background: var(--surface-card);
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-lg);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    font-family: var(--font-stack);
    width: 100%;
    position: relative;
    overflow: hidden;
}

.report-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand-primary-light);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.report-card:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.report-card-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.report-card-icon i {
    font-size: 26px;
}

.report-icon-blue   { background: #DBEAFE; } .report-icon-blue i   { color: #1D4ED8; }
.report-icon-indigo { background: #E0E7FF; } .report-icon-indigo i { color: #4338CA; }
.report-icon-teal   { background: #CCFBF1; } .report-icon-teal i   { color: #0F766E; }
.report-icon-amber  { background: #FEF3C7; } .report-icon-amber i  { color: #B45309; }
.report-icon-slate  { background: #E2E8F0; } .report-icon-slate i  { color: #334155; }

.report-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.report-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}

.report-card-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.report-card-cta {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-subtle);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.report-card-cta i {
    font-size: 20px !important;
}

.report-card:hover .report-card-cta {
    background: var(--brand-primary);
    color: #fff;
    transform: translateY(-1px);
}

/* ---------- Download modal ---------- */
.report-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    min-height: 100vh !important;
    width: 100% !important;
    padding: var(--space-lg);
    box-sizing: border-box;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.report-modal {
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: slideUp 0.25s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.report-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--stroke-subtle);
    background: var(--surface-subtle);
}

.report-modal-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin: 0 0 4px 0;
}

.report-modal-head h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.report-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.report-modal-close:hover {
    background: var(--surface-card);
    color: var(--text-primary);
}

.report-modal-close i {
    font-size: 20px;
}

.report-modal-body {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.report-modal-body .reportTable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.report-modal-body .reportTable td {
    padding: 8px 6px;
    font-size: 13.5px;
    color: var(--text-primary);
    vertical-align: middle;
}

.report-modal-body .reportTable td:nth-child(1) {
    width: 28px;
}

.report-modal-body .reportTable td:nth-child(2) {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 150px;
}

.report-modal-body .reportTable input[type="date"],
.report-modal-body .reportTable input[type="text"],
.report-modal-body .reportTable select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-sm);
    font-family: var(--font-stack);
    font-size: 13px;
    color: var(--text-primary);
    background: var(--surface-card);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.report-modal-body .reportTable input[type="date"]:focus,
.report-modal-body .reportTable input[type="text"]:focus,
.report-modal-body .reportTable select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}

.report-modal-body .reportTable input[type="radio"],
.report-modal-body .reportTable input[type="checkbox"] {
    accent-color: var(--brand-primary);
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.report-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.report-radio,
.report-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-size: 13px;
    color: var(--text-primary);
}

.report-radio:hover,
.report-checkbox:hover {
    border-color: var(--brand-primary-light);
    background: #FAFBFD;
}

.report-radio input[type="radio"]:checked ~ span,
.report-checkbox input[type="checkbox"]:checked ~ span {
    color: var(--brand-primary-dark);
    font-weight: 600;
}

.report-role-list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 !important;
}

.report-role-list .report-checkbox {
    margin: 0;
}

.report-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px;
    border-top: 1px solid var(--stroke-subtle);
    background: var(--surface-subtle);
}

.report-modal-foot .btn-ghost,
.report-modal-foot .btn-primary {
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-family: var(--font-stack);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
}

.report-modal-foot .btn-ghost {
    background: transparent;
    border-color: var(--stroke-default);
    color: var(--text-secondary);
}

.report-modal-foot .btn-ghost:hover {
    background: var(--surface-card);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.report-modal-foot .btn-primary {
    background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.report-modal-foot .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}

.report-modal-foot .btn-primary i {
    font-size: 18px;
}

/* Hide legacy report page classes so they don't show through
   if ever rendered. */
.masterDataContainer,
.masterDataP,
.masterDataArrowRight {
    display: none !important;
}

@media (max-width: 720px) {
    .report-wrap {
        padding: var(--space-lg) var(--space-md);
    }
    .report-hero {
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
    }
    .report-modal-head,
    .report-modal-body,
    .report-modal-foot {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================================
   FINAL OVERRIDE — kill content clipping on list and detail pages
   This block must stay at the end of the file. Earlier commits
   accumulated several conflicting overflow/min-width rules that
   clipped the REMARKS column on detail pages ("ea" instead of
   "each") and the trailing action buttons on list pages.
   ============================================================ */

/* ----- Cells never clip text ----- */
table.table td,
table.ng-table td,
tr.contentTable td {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal;
}

/* Specific columns that stay on one line (dates, status) get narrow
   wrap rules, but the default is "let the text flow". */
tr.contentTable td:nth-last-child(2) {
    white-space: normal !important;
}

/* ----- List pages (both form.positionTable and div.positionTable) ----- */
/* Goal: NO horizontal scroll. Columns shrink/wrap to fit the page width.
   Applies to both top-level list containers (form.positionTable used by
   viewShipment, deliveryHistory, customer, user, vehicle, selfCollection,
   notDelivered, followUpList) AND div.positionTable top-level containers
   (approval, visit, order, shipment, history, QM_shipment). */
form.positionTable,
md-content[ng-view] > div.positionTable {
    overflow: visible !important;
    margin: 0 var(--space-md) var(--space-lg) var(--space-md) !important;
    padding: 0 !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    width: calc(100vw - 2 * var(--space-md));
    max-width: calc(100vw - 2 * var(--space-md));
    box-sizing: border-box;
}

form.positionTable > table.table,
md-content[ng-view] > div.positionTable > table.table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    table-layout: fixed !important;
}

/* Tight cells so everything squeezes into the viewport */
form.positionTable tr.contentTable td,
form.positionTable tr.fontheaderuser th,
form.positionTable tr.searchTr td,
md-content[ng-view] > div.positionTable tr.contentTable td,
md-content[ng-view] > div.positionTable tr.fontheaderuser th,
md-content[ng-view] > div.positionTable tr.searchTr td {
    padding: 10px 8px !important;
    font-size: 11.5px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

form.positionTable tr.fontheaderuser th,
md-content[ng-view] > div.positionTable tr.fontheaderuser th {
    font-size: 10px !important;
    letter-spacing: 0.05em;
    padding: 12px 8px !important;
}

/* Inputs in the search row get tighter too */
form.positionTable tr.searchTr td input,
form.positionTable tr.searchTr td select,
md-content[ng-view] > div.positionTable tr.searchTr td input,
md-content[ng-view] > div.positionTable tr.searchTr td select {
    padding: 5px 8px !important;
    font-size: 11px !important;
    height: 28px !important;
    min-width: 0 !important;
}

/* Action buttons in the last column — stack vertically, compact */
form.positionTable tr.contentTable td:last-child,
form.positionTable tr.fontheaderuser th:last-child,
form.positionTable tr.searchTr td:last-child,
md-content[ng-view] > div.positionTable tr.contentTable td:last-child,
md-content[ng-view] > div.positionTable tr.fontheaderuser th:last-child,
md-content[ng-view] > div.positionTable tr.searchTr td:last-child {
    width: 88px !important;
    padding: 8px 10px !important;
    text-align: center !important;
    white-space: normal !important;
    vertical-align: middle !important;
}

form.positionTable tr.contentTable td:last-child .buttonTable2,
form.positionTable tr.contentTable td:last-child .buttonTable3,
form.positionTable tr.contentTable td:last-child .buttonTable4,
form.positionTable tr.searchTr td:last-child button,
md-content[ng-view] > div.positionTable tr.contentTable td:last-child .buttonTable2,
md-content[ng-view] > div.positionTable tr.contentTable td:last-child .buttonTable3,
md-content[ng-view] > div.positionTable tr.contentTable td:last-child .buttonTable4,
md-content[ng-view] > div.positionTable tr.searchTr td:last-child button {
    display: block !important;
    width: 100%;
    min-width: 0 !important;
    padding: 4px 8px !important;
    margin: 2px 0 !important;
    font-size: 10.5px !important;
}

/* First column padding */
form.positionTable tr.contentTable td:first-child,
form.positionTable tr.fontheaderuser th:first-child,
form.positionTable tr.searchTr td:first-child,
md-content[ng-view] > div.positionTable tr.contentTable td:first-child,
md-content[ng-view] > div.positionTable tr.fontheaderuser th:first-child,
md-content[ng-view] > div.positionTable tr.searchTr td:first-child {
    padding-left: 14px !important;
}

/* Sold/Ship address cells: tighter line-height + smaller address copy */
form.positionTable tr.contentTable td u,
md-content[ng-view] > div.positionTable tr.contentTable td u {
    font-size: 12px !important;
}

form.positionTable tr.contentTable td div[align="left"],
md-content[ng-view] > div.positionTable tr.contentTable td div[align="left"] {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
}

/* Date range cell in the search row: stack the two dates vertically */
form.positionTable tr.searchTr td:first-child input,
md-content[ng-view] > div.positionTable tr.searchTr td:first-child input {
    display: block;
    width: 100%;
    margin-bottom: 4px !important;
}
form.positionTable tr.searchTr td:first-child input:last-child,
md-content[ng-view] > div.positionTable tr.searchTr td:first-child input:last-child {
    margin-bottom: 0 !important;
}

/* Also handle positionTableShipment (used by shipment pages) */
.positionTableShipment {
    overflow: visible !important;
    margin: 0 var(--space-md) var(--space-lg) var(--space-md) !important;
    padding: 0 !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    width: calc(100vw - 2 * var(--space-md));
    max-width: calc(100vw - 2 * var(--space-md));
    box-sizing: border-box;
}

.positionTableShipment > table.table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    table-layout: fixed !important;
}

/* Sticky doesn't play well with horizontal overflow — keep static */
form.positionTable .fontheaderuser th,
form.positionTable tr.searchTr td {
    position: static !important;
}

/* ----- Detail page items table (div.positionTable): same idea ----- */
div.positionTable {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    margin: var(--space-md) var(--space-xl) !important;
    padding: 0 !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    max-width: calc(100vw - 2 * var(--space-xl));
    box-sizing: border-box;
    min-height: 120px;
    display: block !important;
    visibility: visible !important;
}

/* Force items table visible even when ng-repeat has no rows */
div.positionTable > table.table,
md-content[ng-view] > div.positionTable > table.table {
    display: table !important;
    visibility: visible !important;
}

div.positionTable tbody,
md-content[ng-view] > div.positionTable tbody {
    display: table-row-group !important;
}

div.positionTable tr.fontheaderuser,
md-content[ng-view] > div.positionTable tr.fontheaderuser {
    display: table-row !important;
    visibility: visible !important;
}

div.positionTable > table.table {
    width: 100% !important;
    min-width: 900px !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    table-layout: auto !important;
}

div.positionTable .fontheaderuser th {
    position: static !important;
    background: var(--surface-subtle) !important;
    padding: 14px 16px !important;
}

div.positionTable tr.contentTable td {
    padding: 14px 16px !important;
    white-space: normal !important;
}

/* Last column on detail items: Remarks — give it breathing room */
div.positionTable tr.contentTable td:last-child,
div.positionTable tr.fontheaderuser th:last-child {
    padding-right: 24px !important;
    min-width: 110px;
}

div.positionTable tr.contentTable:last-child td {
    border-bottom: none !important;
}

/* Scrollbar styling inside both card types */
form.positionTable::-webkit-scrollbar,
div.positionTable::-webkit-scrollbar {
    height: 10px;
}
form.positionTable::-webkit-scrollbar-track,
div.positionTable::-webkit-scrollbar-track {
    background: var(--surface-subtle);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
form.positionTable::-webkit-scrollbar-thumb,
div.positionTable::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 10px;
    border: 2px solid var(--surface-subtle);
}

/* ============================================================
   User / Vehicle list — modern table components
   ============================================================ */

/* Page header (shared by user + vehicle lists) */
.user-page-header,
.vehicle-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg) var(--space-sm);
    margin: 0;
}

.user-page-title,
.vehicle-page-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.user-page-title::before,
.vehicle-page-title::before {
    content: "";
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark));
}

.user-page-create {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
}

.user-page-create .material-icons {
    font-size: 18px !important;
    vertical-align: middle;
}

/* POD Id chip */
.user-id-chip {
    display: inline-block;
    padding: 4px 10px;
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

/* Name cell — avatar + name */
.user-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.user-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: var(--text-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Email / imei cells */
.user-email,
.vehicle-imei,
.vehicle-usedby {
    display: inline-block;
    max-width: 220px;
    color: var(--text-secondary);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.user-empty,
.vehicle-empty {
    color: var(--text-muted);
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* Vehicle chip in user row */
.user-vehicle-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: var(--surface-subtle);
    border: 1px solid var(--stroke-subtle);
    color: var(--text-primary);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
}

.user-vehicle-chip .material-icons {
    font-size: 14px !important;
    color: var(--brand-primary);
}

/* Role badge — pill, colored per role */
.role-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #EEF2FF;
    color: #3730A3;
    border: 1px solid #E0E7FF;
    white-space: nowrap;
}

.role-badge.role-admin,
.role-badge.role-administrator,
.role-badge.role-super {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}

.role-badge.role-viewer,
.role-badge.role-view {
    background: #E0F2FE;
    color: #075985;
    border-color: #BAE6FD;
}

.role-badge.role-driver {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
}

.role-badge.role-supervisor,
.role-badge.role-manager {
    background: #F3E8FF;
    color: #6B21A8;
    border-color: #E9D5FF;
}

.role-badge.role-default {
    background: var(--surface-subtle);
    color: var(--text-secondary);
    border-color: var(--stroke-subtle);
}

/* Status badge (Active / Non Active) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-badge .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
    flex: 0 0 6px;
}

.status-badge-active {
    background: #ECFDF5;
    color: #047857;
    border-color: #A7F3D0;
}

.status-badge-inactive {
    background: #FEF2F2;
    color: #B91C1C;
    border-color: #FECACA;
}

/* Action icon buttons (used in user + vehicle rows) */
.user-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0 2px;
    background: var(--surface-card);
    border: 1px solid var(--stroke-subtle);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    vertical-align: middle;
}

.user-action .material-icons {
    font-size: 18px !important;
    line-height: 1;
}

.user-action:hover {
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    border-color: var(--brand-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15);
}

.user-action-edit:hover {
    background: var(--brand-primary);
    color: var(--text-on-primary);
    border-color: var(--brand-primary);
}

.user-action-view:hover {
    background: #E0F2FE;
    color: #075985;
    border-color: #7DD3FC;
}

.user-action-danger:hover {
    background: #FEF2F2;
    color: #B91C1C;
    border-color: #FCA5A5;
}

.user-action-warn:hover {
    background: #FFFBEB;
    color: #B45309;
    border-color: #FCD34D;
}

/* Column widths + alignment */
.user-col-id { width: 110px; }
.user-col-name { min-width: 200px; }
.user-col-email { min-width: 180px; max-width: 260px; }
.user-col-vehicle { width: 140px; }
.user-col-role { width: 130px; }
.user-col-status { width: 130px; }
.user-col-actions {
    min-width: 190px;
    text-align: right !important;
    white-space: nowrap;
    padding-right: 16px !important;
}
/* Search row: force the two pills onto one line, flush right */
.user-col-actions-search,
.vehicle-col-actions-search {
    text-align: right !important;
    white-space: nowrap !important;
    min-width: 210px;
}
.user-col-actions-search .buttonTable4,
.user-col-actions-search .buttonTable5,
.vehicle-col-actions-search .buttonTable4,
.vehicle-col-actions-search .buttonTable5 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex-direction: row !important;
    min-width: 0 !important;
    padding: 6px 14px !important;
    margin: 0 0 0 6px !important;
    vertical-align: middle !important;
}
.user-col-actions-search .buttonTable4 .material-icons,
.user-col-actions-search .buttonTable5 .material-icons,
.vehicle-col-actions-search .buttonTable4 .material-icons,
.vehicle-col-actions-search .buttonTable5 .material-icons {
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Undo the legacy "tr td:last-child -> 88px + block buttons" rule
   (see pod-theme.css:3252) for the new user + vehicle tables, where
   the last column holds multiple inline pills / icon-action buttons.
   Keep selectors more specific than the legacy block so !important
   resolves in our favour. */
form.positionTable.user-table tr.contentTable td:last-child,
form.positionTable.user-table tr.fontheaderuser th:last-child,
form.positionTable.user-table tr.searchTr td:last-child,
form.positionTable.vehicle-table tr.contentTable td:last-child,
form.positionTable.vehicle-table tr.fontheaderuser th:last-child,
form.positionTable.vehicle-table tr.searchTr td:last-child {
    width: auto !important;
    min-width: 210px;
    padding: 8px 16px 8px 10px !important;
    text-align: right !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

form.positionTable.vehicle-table tr.contentTable td:last-child,
form.positionTable.vehicle-table tr.fontheaderuser th:last-child {
    min-width: 90px;
}

form.positionTable.user-table tr.contentTable td:last-child .user-action,
form.positionTable.user-table tr.searchTr td:last-child .buttonTable4,
form.positionTable.user-table tr.searchTr td:last-child .buttonTable5,
form.positionTable.vehicle-table tr.contentTable td:last-child .user-action,
form.positionTable.vehicle-table tr.searchTr td:last-child .buttonTable4,
form.positionTable.vehicle-table tr.searchTr td:last-child .buttonTable5 {
    display: inline-flex !important;
    flex-direction: row !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 6px 14px !important;
    margin: 0 0 0 6px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* Icon-only row actions keep their 34x34 footprint */
form.positionTable.user-table tr.contentTable td:last-child .user-action,
form.positionTable.vehicle-table tr.contentTable td:last-child .user-action {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 2px !important;
}

.vehicle-col-number { min-width: 150px; }
.vehicle-col-long { min-width: 160px; }
.vehicle-col-short { min-width: 120px; }
.vehicle-col-type { width: 110px; }
.vehicle-col-imei { min-width: 140px; max-width: 200px; }
.vehicle-col-usedby { min-width: 130px; }
.vehicle-col-num { width: 90px; text-align: right !important; font-variant-numeric: tabular-nums; }
.vehicle-col-unit { width: 90px; }
.vehicle-col-actions {
    width: 80px;
    text-align: right !important;
    padding-right: 16px !important;
}
.vehicle-col-actions-search {
    text-align: right !important;
}

/* Vehicle number chip */
.vehicle-number-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.vehicle-number-chip .material-icons {
    font-size: 14px !important;
    color: var(--brand-primary);
}

/* Vehicle type badge */
.vehicle-type-badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--surface-subtle);
    border: 1px solid var(--stroke-subtle);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================================
   POD modal — modern, isolated from .backgroundPopUp overrides
   Used by: Edit Vehicle popup
   ============================================================ */
.pod-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-lg);
    animation: pod-modal-fade 0.18s ease-out;
}

@keyframes pod-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pod-modal {
    position: relative;
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
    animation: pod-modal-pop 0.22s ease-out;
}

@keyframes pod-modal-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dedicated close icon button — defeats the generic
   .backgroundPopUp button[type="button"] override because
   we're under .pod-modal, not .backgroundPopUp. */
.pod-modal-close {
    position: absolute !important;
    top: 12px;
    right: 12px;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--surface-subtle) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: 50% !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
    box-shadow: none !important;
    letter-spacing: normal !important;
    font-weight: 500 !important;
    z-index: 2;
}

.pod-modal-close .material-icons {
    font-size: 20px !important;
    line-height: 1;
}

.pod-modal-close:hover {
    background: #FEE2E2 !important;
    color: #B91C1C !important;
    border-color: #FCA5A5 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Modal header with icon */
.pod-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--stroke-subtle);
}

.pod-modal-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: var(--text-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.28);
}

.pod-modal-icon .material-icons {
    font-size: 22px !important;
}

.pod-modal-title {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.01em;
}

.pod-modal-subtitle {
    margin: 2px 0 0 !important;
    font-size: 12.5px !important;
    color: var(--text-muted) !important;
}

/* Modal body + form fields */
.pod-modal-body {
    padding: 20px 28px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pod-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pod-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.pod-field-label-required::after {
    content: " *";
    color: var(--status-danger);
}

.pod-field-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: var(--font-stack);
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1px solid var(--stroke-default);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
}

.pod-field-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.pod-field-input:disabled {
    background: var(--surface-subtle);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Modal footer + buttons.
   Scoped hard so .backgroundPopUp button[type="button"] never wins. */
.pod-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px 24px;
    border-top: 1px solid var(--stroke-subtle);
    margin-top: 12px;
}

.pod-modal .pod-btn,
.pod-modal-footer .pod-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-transform: none !important;
}

.pod-modal .pod-btn .material-icons,
.pod-modal-footer .pod-btn .material-icons {
    font-size: 16px !important;
}

.pod-modal .pod-btn-primary,
.pod-modal-footer .pod-btn-primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)) !important;
    color: var(--text-on-primary) !important;
    border-color: var(--brand-primary-dark) !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25) !important;
}

.pod-modal .pod-btn-primary:hover,
.pod-modal-footer .pod-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35) !important;
}

.pod-modal .pod-btn-primary:disabled,
.pod-modal-footer .pod-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none !important;
}

.pod-modal .pod-btn-ghost,
.pod-modal-footer .pod-btn-ghost {
    background: var(--surface-card) !important;
    color: var(--text-secondary) !important;
    border-color: var(--stroke-default) !important;
}

.pod-modal .pod-btn-ghost:hover,
.pod-modal-footer .pod-btn-ghost:hover {
    background: var(--surface-subtle) !important;
    color: var(--text-primary) !important;
    border-color: var(--text-muted) !important;
    transform: none;
}

/* Small-screen polish */
@media (max-width: 600px) {
    .pod-modal {
        max-width: 100%;
        border-radius: var(--radius-lg);
    }
    .pod-modal-header { padding: 20px 20px 14px; }
    .pod-modal-body   { padding: 16px 20px 4px; }
    .pod-modal-footer { padding: 14px 20px 20px; }
}

/* ============================================================
   Home dashboard — KPI cards, 7-day trend, top drivers
   ============================================================ */

/* ========= Option A: each dashboard section is its own rounded panel =========
   White container with subtle shadow + border, padded; KPI cards inside lose
   their individual shadow/border so we get ONE clear outline per section. */
.dashboard-kpi,
.dashboard-row {
    background: var(--surface-card);
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md);
    gap: var(--space-sm);
}

/* Cards inside the panel: flat tiles, subtle tinted background, no outer shadow */
.dashboard-kpi .kpi-card,
.dashboard-kpi .v3-kpi-card {
    background: var(--surface-subtle);
    border: 1px solid transparent;
    box-shadow: none;
}

.dashboard-kpi .kpi-card:hover,
.dashboard-kpi .v3-kpi-card:hover {
    background: var(--surface-card);
    border-color: var(--stroke-subtle);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* Panels inside dashboard-row (trend + reasons, or delivery mix + self-collect
   in v3) are already styled as .panel — inside the container, flatten them so
   there is no double-panel look. */
.dashboard-row > .panel {
    background: var(--surface-subtle);
    border-color: transparent;
    box-shadow: none;
}

.dashboard-row > .panel:hover {
    background: var(--surface-card);
    border-color: var(--stroke-subtle);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-md);
}

.kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--surface-card);
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    min-height: 88px;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--stroke-default);
}

.kpi-icon {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary);
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.22);
}

.kpi-icon .material-icons {
    font-size: 20px !important;
}

.kpi-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kpi-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.kpi-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.kpi-sub {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.3;
}

/* Per-card icon accent colors (no more left-bar ::before — the icon IS the accent) */
.kpi-card-green .kpi-icon {
    background: linear-gradient(135deg, #10B981, #059669);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
.kpi-card-amber .kpi-icon {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.kpi-card-indigo .kpi-icon {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

/* ---------- 2-col row: trend chart + top drivers ---------- */
.dashboard-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-md);
}

@media (max-width: 960px) {
    .dashboard-row { grid-template-columns: 1fr; }
}

.panel {
    background: var(--surface-card);
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    min-height: 240px;
}

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.panel-head h3 {
    margin: 0 0 2px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.panel-head p {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.panel-legend {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 500;
}

.panel-legend .dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.dot-completed { background: var(--status-success); }
.dot-failed    { background: var(--status-danger); }

.panel-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    text-align: center;
}

.panel-empty .material-icons {
    font-size: 34px !important;
    color: var(--stroke-default);
}

.panel-empty p {
    margin: 0;
    font-size: 12.5px;
}

/* ---------- Trend chart (CSS-only bars) ---------- */
.trend-chart {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    flex: 1;
    align-items: end;
    padding: 10px 4px 0;
    min-height: 200px;
}

.trend-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.trend-stack {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    align-items: center;
    justify-content: flex-start;
    min-height: 160px;
}

.trend-bar {
    width: 70%;
    min-height: 0;
    border-radius: 4px 4px 0 0;
    transition: transform 0.18s ease, filter 0.18s ease;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3px;
}

.trend-bar:hover {
    transform: scaleY(1.03);
    filter: brightness(1.05);
}

.trend-bar-completed {
    background: linear-gradient(180deg, #34D399, #10B981);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.28);
}

.trend-bar-failed {
    background: linear-gradient(180deg, #F87171, #EF4444);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.28);
}

.trend-bar-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-on-primary);
    letter-spacing: 0.02em;
    line-height: 1;
}

.trend-day {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------- Top drivers list ---------- */
.driver-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.driver-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.driver-rank {
    flex: 0 0 22px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.driver-avatar {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: var(--text-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22);
}

.driver-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.driver-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.driver-bar-bg {
    height: 6px;
    background: var(--surface-subtle);
    border-radius: 3px;
    overflow: hidden;
}

.driver-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    border-radius: 3px;
    transition: width 0.4s ease;
}

.driver-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
}

/* ---------- Extra KPI icon colors (POD + Self-Collection) ---------- */
.kpi-card-red .kpi-icon {
    background: linear-gradient(135deg, #F87171, #EF4444);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.28);
}
.kpi-card-orange .kpi-icon {
    background: linear-gradient(135deg, #FB923C, #F97316);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.28);
}

/* Section head — panel title, sits inside the rounded white container */
.dashboard-kpi .section-head,
.dashboard-row .section-head {
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dashboard-kpi .section-head h2,
.dashboard-row .section-head h2 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    margin: 0;
    color: var(--text-primary);
    position: relative;
    padding-left: 14px;
    line-height: 1.2;
}
.dashboard-kpi .section-head h2::before,
.dashboard-row .section-head h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark));
}

/* 14-day trend — tighter bars */
.trend-chart-14 {
    grid-template-columns: repeat(14, 1fr);
    gap: 6px;
}
.trend-chart-14 .trend-bar {
    width: 85%;
}
.trend-chart-14 .trend-day {
    font-size: 10px;
}
.trend-chart-14 .trend-bar-count {
    font-size: 9px;
}

/* ---------- Reasons panel ---------- */
.panel-reasons .reason-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.reason-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.reason-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.reason-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reason-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.reason-bar-bg {
    height: 8px;
    background: var(--surface-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.reason-bar {
    height: 100%;
    background: linear-gradient(90deg, #F87171, #EF4444);
    border-radius: 4px;
    transition: width 0.4s ease;
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.3);
}

/* ============================================================
   Dashboard v3 — "Operations" view
   ============================================================ */

/* ---- View toggle (under the hero, right-aligned tab bar) ---- */
.dashboard-view-toggle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 2px;
    margin-top: calc(-1 * var(--space-sm));
    margin-bottom: calc(-1 * var(--space-xs));
}

.dashboard-view-toggle .toggle-label {
    display: none;
}

.dashboard-view-toggle .toggle-group {
    display: inline-flex;
    background: var(--surface-card);
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-pill);
    padding: 3px;
    gap: 2px;
    box-shadow: var(--shadow-sm);
}

.toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    letter-spacing: 0.02em;
}

.toggle-btn .material-icons {
    font-size: 14px !important;
}

.toggle-btn:hover {
    color: var(--text-primary);
    background: var(--surface-subtle);
}

.toggle-btn.is-active {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: var(--text-on-primary);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

.toggle-chip {
    display: inline-block;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
}

.toggle-btn:not(.is-active) .toggle-chip {
    background: #ECFDF5;
    color: #047857;
}

/* ---- V3 KPI cards with sparklines ---- */
.v3-kpi-row,
.v3-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-md);
    margin-top: 0;
}

/* v3 KPI card — SAME shell/layout as .kpi-card (consistency), with a full-width
   sparkline row stacked below the icon+body row. */
.v3-kpi-card {
    position: relative;
    background: var(--surface-card);
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-md);
    padding: 14px 16px 12px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 122px;
}

.v3-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--stroke-default);
}

.v3-kpi-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.v3-kpi-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.v3-kpi-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.v3-kpi-icon {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary);
}

.v3-kpi-icon .material-icons { font-size: 20px !important; }

/* Match the v2 icon color system exactly so both views feel like one product. */
.v3-icon-green  { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 4px 12px rgba(16,185,129,.25); }
.v3-icon-red    { background: linear-gradient(135deg, #F87171, #EF4444); box-shadow: 0 4px 12px rgba(239,68,68,.28); }
.v3-icon-amber  { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 4px 12px rgba(245,158,11,.25); }
.v3-icon-orange { background: linear-gradient(135deg, #FB923C, #F97316); box-shadow: 0 4px 12px rgba(249,115,22,.28); }
.v3-icon-blue   { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); box-shadow: 0 4px 12px rgba(37,99,235,.22); }

.v3-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    background: var(--surface-subtle);
    color: var(--text-secondary);
}

.v3-kpi-delta .material-icons { font-size: 14px !important; }

.v3-delta-up   { background: #ECFDF5; color: #047857; }
.v3-delta-down { background: #FEF2F2; color: #B91C1C; }

.v3-kpi-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
}

.v3-kpi-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.v3-sparkline {
    display: block;
    width: 100%;
    height: 26px;
    margin-top: auto;
    overflow: visible;
    opacity: 0.95;
}

/* Subtitle shown in place of a sparkline when the KPI is a point-in-time
   count (Pending / Needs follow-up). Matches .kpi-sub in v2 for parity. */
.v3-kpi-sub {
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: auto;
    padding-top: 6px;
    line-height: 1.35;
}

.v3-spark-line {
    fill: none;
    stroke: var(--brand-primary);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.v3-spark-area {
    fill: var(--brand-primary);
    fill-opacity: 0.10;
    stroke: none;
}

/* ---- V3 row layout (types + compact self-collection) ---- */
.v3-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
@media (max-width: 960px) {
    .v3-row { grid-template-columns: 1fr; }
}

/* ---- Delivery type donut ---- */
.type-breakdown {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    align-items: center;
    flex: 1;
}

@media (max-width: 700px) {
    .type-breakdown { grid-template-columns: 1fr; justify-items: center; }
}

.type-donut {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.type-donut:hover { transform: scale(1.02); }

.type-donut-inner {
    width: 118px; height: 118px;
    background: var(--surface-card);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 6px rgba(15,23,42,0.06);
}

.type-donut-total {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.type-donut-caption {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 2px;
}

.type-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.type-row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
}

.type-swatch {
    width: 10px; height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.type-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.type-pct {
    color: var(--text-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-width: 42px;
    text-align: right;
}

.type-count {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    text-align: right;
}

/* ---- Compact self-collection grid (v3) ---- */
.sc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex: 1;
}

.sc-tile {
    padding: 16px 14px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface-subtle);
    border-left: 4px solid var(--stroke-default);
}

.sc-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.sc-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.sc-tile-blue   { background: #EFF6FF; border-left-color: var(--brand-primary); }
.sc-tile-green  { background: #ECFDF5; border-left-color: var(--status-success); }
.sc-tile-amber  { background: #FFFBEB; border-left-color: var(--status-warning); }
.sc-tile-red    { background: #FEF2F2; border-left-color: var(--status-danger); }

/* ---- Activity feed ---- */
.activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: var(--surface-subtle);
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-md);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.activity-row:hover {
    background: var(--surface-card);
    border-color: var(--stroke-default);
    transform: translateX(2px);
}

.activity-status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--status-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.activity-voided .activity-status-dot   { background: var(--status-danger);  box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.activity-followup .activity-status-dot { background: #F97316;               box-shadow: 0 0 0 3px rgba(249,115,22,0.18); }
.activity-nosig .activity-status-dot    { background: var(--status-warning); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }

.activity-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.activity-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.activity-customer {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.activity-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.badge-completed { background: #ECFDF5; color: #047857; }
.badge-voided    { background: #FEF2F2; color: #B91C1C; }
.badge-followup  { background: #FFF7ED; color: #C2410C; }
.badge-nosig     { background: #FFFBEB; color: #B45309; }

.activity-secondary {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.activity-sep { margin: 0 6px; opacity: 0.4; }

.activity-time {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Self Collection page — column widths + badges + icon actions
   ============================================================ */

.sc-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg) var(--space-sm);
    margin: 0;
}

.sc-page-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sc-page-title::before {
    content: "";
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark));
}

/* Column width allocations — sum to ~1200px base, proportional scaling after */
.selfcollect-table .sc-col-date    { width: 90px;  text-align: center !important; }
.selfcollect-table .sc-col-do      { width: 110px; text-align: center !important; white-space: nowrap; }
.selfcollect-table .sc-col-po      { min-width: 130px; }
.selfcollect-table .sc-col-so      { min-width: 110px; }
.selfcollect-table .sc-col-doctype { width: 110px; text-align: center !important; }
.selfcollect-table .sc-col-soldto  { min-width: 200px; max-width: 260px; }
.selfcollect-table .sc-col-shipto  { min-width: 200px; max-width: 260px; }
.selfcollect-table .sc-col-instr   { min-width: 130px; max-width: 180px; }
.selfcollect-table .sc-col-status  { width: 130px; text-align: center !important; }
.selfcollect-table .sc-col-actions {
    min-width: 150px !important;
    text-align: right !important;
    padding-right: 14px !important;
    white-space: nowrap !important;
}

/* DO number chip */
.sc-do-chip {
    display: inline-block;
    padding: 3px 10px;
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Sales doc type badge */
.sc-doctype-badge {
    display: inline-block;
    padding: 2px 9px;
    background: var(--surface-subtle);
    border: 1px solid var(--stroke-subtle);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Status pill — key fix for "Preparation in progress" wrapping vertically */
.sc-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--surface-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--stroke-subtle);
    white-space: nowrap !important;
    word-break: keep-all !important;
    line-height: 1.3;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sc-status-badge.sc-status-progress {
    background: #FFFBEB;
    color: #B45309;
    border-color: #FDE68A;
}

.sc-status-badge.sc-status-delivered {
    background: #ECFDF5;
    color: #047857;
    border-color: #A7F3D0;
}

/* Modern ghost-style icon action buttons for Self Collection.
   Borderless by default, colored fill on hover, soft ring focus.
   Larger (36x36) with bigger icons for better click target + readability. */
.sc-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0 2px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    border-radius: var(--radius-md);
    cursor: pointer;
    position: relative;
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    vertical-align: middle;
    outline: none;
}

.sc-action-btn .material-icons {
    font-size: 19px !important;
    line-height: 1;
    transition: transform 0.15s ease;
}

.sc-action-btn:hover {
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18);
}

.sc-action-btn:hover .material-icons {
    transform: scale(1.08);
}

.sc-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.12);
}

.sc-action-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* Primary action (Print) gets a solid gradient + white icon so it reads as the
   "do this" action while Detail / View DO stay ghost. */
.sc-action-btn-primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: var(--text-on-primary);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.28);
}

.sc-action-btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-primary-dark), #1E40AF);
    color: var(--text-on-primary);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
}

.sc-action-btn-primary:active {
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
}

/* Wrap the action cell so the row of buttons sits in a subtle "toolbar" —
   background strip + rounded group. Applied via the :last-child TD. */
form.positionTable.selfcollect-table tr.contentTable td.sc-col-actions {
    padding-right: 14px !important;
}

/* Override the legacy "last column 88px + buttons display:block" rule so our
   action icons stay inline and the column is wide enough for the status pill. */
form.positionTable.selfcollect-table tr.contentTable td:last-child,
form.positionTable.selfcollect-table tr.fontheaderuser th:last-child,
form.positionTable.selfcollect-table tr.searchTr td:last-child {
    width: auto !important;
    min-width: 150px !important;
    padding: 10px 14px 10px 8px !important;
    text-align: right !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

form.positionTable.selfcollect-table tr.contentTable td:last-child .sc-action-btn,
form.positionTable.selfcollect-table tr.searchTr td:last-child .buttonTable4,
form.positionTable.selfcollect-table tr.searchTr td:last-child .buttonTable5 {
    display: inline-flex !important;
    flex-direction: row !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 3px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

form.positionTable.selfcollect-table tr.contentTable td:last-child .sc-action-btn {
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
}

/* Force all table cells to break at word boundaries only (not mid-character)
   so narrow status/action cells on this table never chop text vertically. */
form.positionTable.selfcollect-table tr.contentTable td,
form.positionTable.selfcollect-table tr.fontheaderuser th,
form.positionTable.selfcollect-table tr.searchTr td {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    vertical-align: middle !important;
}

form.positionTable.selfcollect-table tr.fontheaderuser th {
    white-space: normal !important;
}

/* Page subtitle + record count (shared by Self Collection & Follow Up) */
.sc-page-sub {
    margin: 4px 0 0 14px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Failed/void status pill (red) — complements progress (amber) & delivered (green) */
.sc-status-badge.sc-status-failed {
    background: #FEF2F2;
    color: #B91C1C;
    border-color: #FECACA;
}

/* Sold-to / ship-to party cell: name bold, address muted */
.sc-party-name { font-weight: 600; color: var(--text-primary); }
.sc-party-addr { color: var(--text-secondary); font-size: 11px; line-height: 1.35; margin-top: 2px; }

/* Compact "Map" link under check-in / check-out times */
.sc-map-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    padding: 2px 8px;
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.sc-map-link:hover { background: var(--brand-primary-light); }
.sc-map-link .material-icons { font-size: 13px !important; }

/* Follow Up table column widths */
.fu-table .fu-col-date     { width: 96px;  text-align: center !important; }
.fu-table .fu-col-ship     { width: 110px; text-align: center !important; white-space: nowrap; }
.fu-table .fu-col-vehicle  { width: 90px;  text-align: center !important; }
.fu-table .fu-col-route    { width: 80px;  text-align: center !important; }
.fu-table .fu-col-do       { width: 110px; text-align: center !important; white-space: nowrap; }
.fu-table .fu-col-po       { min-width: 110px; }
.fu-table .fu-col-so       { min-width: 100px; }
.fu-table .fu-col-soldto   { min-width: 180px; max-width: 240px; }
.fu-table .fu-col-shipto   { min-width: 180px; max-width: 240px; }
.fu-table .fu-col-time     { width: 120px; text-align: center !important; }
.fu-table .fu-col-status   { width: 120px; text-align: center !important; }
.fu-table .fu-col-pod      { width: 70px;  text-align: center !important; }
.fu-table .fu-col-followup { width: 120px; text-align: center !important; }

/* =========================================================
   Order cards — card-grid dashboards for Self Collection &
   Follow Up, styled to match the Delivery Tracking page.
   ========================================================= */
.oc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-top: 4px; }
.oc-card { background: #fff; border: 1px solid #eef2f7; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .15s, box-shadow .15s; }
.oc-card:hover { border-color: #cbd5e1; box-shadow: 0 6px 18px rgba(15,23,42,.07); }
.oc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oc-cust-name { font-weight: 700; font-size: 15px; color: #0f172a; }
.oc-cust-addr { font-size: 12px; color: #64748b; line-height: 1.4; margin-top: 2px; }
.oc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; padding: 10px 0; }
.oc-meta > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.oc-meta span { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }
.oc-meta b { font-size: 13px; color: #334155; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-instr { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: #64748b; background: #f8fafc; border-radius: 8px; padding: 8px 10px; }
.oc-instr .material-icons { font-size: 15px; color: #94a3b8; flex-shrink: 0; }
.oc-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.oc-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 600; color: #475569; cursor: pointer; }
.oc-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.oc-btn .material-icons { font-size: 15px; }
.oc-btn-primary { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); border: none; color: #fff; }
.oc-btn-primary:hover { background: var(--brand-primary-dark); color: #fff; }

/* =========================================================
   Delivery Tracking dashboard (modules/viewShipment/view.html)
   Leaflet/OpenStreetMap map + active-shipment cards.
   ========================================================= */
.dt-wrap { font-family: 'Inter', sans-serif; padding: 8px 24px 32px; color: #0f172a; }

.dt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.dt-title-row { display: flex; align-items: center; gap: 12px; }
.dt-title { font-size: 26px; font-weight: 700; margin: 0; color: #0f172a; }
.dt-sub { margin: 4px 0 0; color: #64748b; font-size: 13px; }
.dt-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #16a34a; letter-spacing: .04em; }
.dt-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: dtPulse 1.8s infinite; }
.dt-live-dot-green { background: #16a34a; }
@keyframes dtPulse { 0%{box-shadow:0 0 0 0 rgba(22,163,74,.45);} 70%{box-shadow:0 0 0 7px rgba(22,163,74,0);} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0);} }

.dt-head-actions { display: flex; align-items: center; gap: 10px; }
.dt-date-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; font-size: 13px; color: #334155; }
.dt-date-pill .material-icons, .dt-btn-ghost .material-icons { font-size: 18px; }
.dt-btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; }
.dt-btn-ghost:hover { background: #f8fafc; }

.dt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.dt-stat { background: #fff; border: 1px solid #eef2f7; border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.dt-stat-dark { background: #0f172a; border-color: #0f172a; color: #fff; }
.dt-stat-top { display: flex; align-items: center; justify-content: space-between; }
.dt-stat-label { font-size: 13px; color: #64748b; font-weight: 600; }
.dt-stat-dark .dt-stat-label { color: #cbd5e1; }
.dt-stat-top .material-icons { font-size: 20px; color: #94a3b8; background: #f1f5f9; border-radius: 50%; padding: 6px; }
.dt-stat-dark .dt-stat-top .material-icons { color: #fff; background: rgba(255,255,255,.12); }
.dt-icon-warn { color: #ef4444 !important; background: #fee2e2 !important; }
.dt-stat-num { font-size: 30px; font-weight: 700; margin: 10px 0 6px; }
.dt-stat-foot { font-size: 12px; color: #94a3b8; display: flex; align-items: center; gap: 6px; }
.dt-stat-dark .dt-stat-foot { color: #cbd5e1; }

.dt-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.dt-search-wrap { position: relative; flex: 1 1 260px; min-width: 220px; }
.dt-search-wrap .material-icons { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 19px; color: #94a3b8; }
.dt-search { width: 100%; padding: 11px 14px 11px 40px; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 13px; background: #fff; box-sizing: border-box; }
.dt-search:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.dt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dt-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; }
.dt-chip:hover { background: #f8fafc; }
.dt-chip-on { background: #0f172a; border-color: #0f172a; color: #fff; }
.dt-chip-n { font-size: 11px; background: #f1f5f9; color: #475569; border-radius: 999px; padding: 1px 7px; }
.dt-chip-on .dt-chip-n { background: rgba(255,255,255,.18); color: #fff; }

.dt-main { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: stretch; }
.dt-map-wrap { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid #eef2f7; min-height: 520px; background: #eef2f7; }
.dt-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.dt-map-empty { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 500; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 10px 16px; border-radius: 10px; max-width: 360px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 6px 18px rgba(15,23,42,.12); }
.dt-map-empty b { font-size: 13px; }
.dt-legend { position: absolute; left: 12px; bottom: 12px; z-index: 500; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 12px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: #475569; box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.dt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dt-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.dt-side { background: #fff; border: 1px solid #eef2f7; border-radius: 16px; display: flex; flex-direction: column; max-height: 620px; }
.dt-side-head { padding: 16px 18px; font-weight: 700; font-size: 15px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; }
.dt-side-count { font-size: 12px; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 2px 10px; }
.dt-side-list { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.dt-empty { color: #94a3b8; font-size: 13px; text-align: center; padding: 24px 8px; }

.dt-card { border: 1px solid #eef2f7; border-radius: 14px; padding: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.dt-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.dt-card-on { border-color: #0f172a; background: #0f172a; color: #fff; }
.dt-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dt-card-ship { font-size: 12px; font-weight: 700; color: #64748b; }
.dt-card-on .dt-card-ship { color: #cbd5e1; }
.dt-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.dt-badge-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dt-card-vehicle { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.dt-card-vehicle .material-icons { font-size: 18px; color: #6366f1; }
.dt-card-on .dt-card-vehicle .material-icons { color: #a5b4fc; }
.dt-card-line { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #64748b; margin-top: 3px; }
.dt-card-on .dt-card-line { color: #cbd5e1; }
.dt-card-line .material-icons { font-size: 15px; color: #94a3b8; }
.dt-progress { height: 6px; background: #f1f5f9; border-radius: 999px; margin: 11px 0 8px; overflow: hidden; }
.dt-card-on .dt-progress { background: rgba(255,255,255,.18); }
.dt-progress-bar { height: 100%; border-radius: 999px; transition: width .3s; }
.dt-card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #64748b; }
.dt-card-on .dt-card-foot { color: #cbd5e1; }
.dt-view { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; color: #6366f1; font-weight: 600; font-size: 12px; cursor: pointer; padding: 0; }
.dt-card-on .dt-view { color: #a5b4fc; }
.dt-view .material-icons { font-size: 14px; }
.dt-card-btns { display: inline-flex; align-items: center; gap: 14px; }

.dt-do-list { margin-top: 12px; border-top: 1px dashed #e2e8f0; padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.dt-card-on .dt-do-list { border-top-color: rgba(255,255,255,.18); }
.dt-do { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.dt-do:hover { background: #f8fafc; }
.dt-card-on .dt-do:hover { background: rgba(255,255,255,.08); }
.dt-do-info { display: flex; flex-direction: column; min-width: 0; }
.dt-do-no { font-size: 12px; font-weight: 700; color: #334155; }
.dt-card-on .dt-do-no { color: #fff; }
.dt-do-cust { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.dt-do-print { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; padding: 5px 11px; cursor: pointer; color: #475569; font-size: 12px; font-weight: 600; }
.dt-do-print:hover { background: #6366f1; border-color: #6366f1; color: #fff; }
.dt-do-print .material-icons { font-size: 15px; }
.dt-card-on .dt-do-print { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.dt-card-on .dt-do-print:hover { background: #6366f1; border-color: #6366f1; }
.dt-do-btns { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.dt-do-details { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; padding: 5px 11px; cursor: pointer; color: #475569; font-size: 12px; font-weight: 600; }
.dt-do-details:hover { background: #2563EB; border-color: #2563EB; color: #fff; }
.dt-do-details .material-icons { font-size: 15px; }
.dt-card-on .dt-do-details { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.dt-card-on .dt-do-details:hover { background: #2563EB; border-color: #2563EB; }

/* Date-range filter in the toolbar */
.dt-datefilter { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.dt-datefilter > .material-icons { font-size: 18px; color: #94a3b8; }
.dt-date-input { width: 104px; border: none; outline: none; font-size: 13px; color: #334155; background: transparent; }
.dt-date-sep { color: #cbd5e1; }
.dt-btn-apply { border: none; background: #6366f1; color: #fff; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dt-btn-apply:hover { background: #4f46e5; }
.dt-btn-clear { border: none; background: #f1f5f9; color: #64748b; border-radius: 8px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dt-btn-clear:hover { background: #e2e8f0; }
.dt-btn-clear .material-icons { font-size: 16px; }

/* Delivery-mode (or any) inline select in the toolbar */
.dt-modeselect { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.dt-modeselect label { font-size: 12px; font-weight: 600; color: #64748b; margin: 0; }
.dt-select { border: none; outline: none; background: transparent; font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; padding-right: 4px; }

@media (max-width: 1100px) {
	.dt-stats { grid-template-columns: repeat(2, 1fr); }
	.dt-main { grid-template-columns: 1fr; }
	.dt-map-wrap { min-height: 420px; }
	.dt-side { max-height: none; }
}

/* =========================================================
   Sticky footer — flow after content instead of floating fixed
   over it. The fixed footer overlapped the bottom of tall pages
   (map dashboards, long lists), which read as "inconsistent".
   Now: content grows to fill the viewport, footer sits below it
   on every page. Login pages hide the footer, so exclude them.
   ========================================================= */
.app-footer { position: static !important; z-index: auto; }
body:not(.login-body) { min-height: 100vh; }
body:not(.login-body) md-content[ng-view],
body:not(.login-body) md-content.content {
    flex: 1 0 auto;
    padding-bottom: 24px !important;
}

/* Datepicker dropdown must float above the Leaflet map (leaflet panes go up
   to z-index 1000, controls 1000): keep the calendar on top. */
.datepicker.datepicker-dropdown,
.datepicker.dropdown-menu {
	z-index: 2000 !important;
}