/* ============================================================
   Order CRM — Stylesheet
   Design direction: Red / White / Black / Green — a bold, high
   contrast palette. Green stays the primary brand/action color,
   red is the accent (highlights, active states), on a clean
   white/near-white surface with a black sidebar for contrast.
   Fraunces for display type, Inter for UI/data density.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --color-bg: #FAFAFA;
    --color-surface: #FFFFFF;
    --color-border: #E2E2E2;
    --color-text: #181818;
    --color-muted: #666666;

    --color-primary: #146C34;
    --color-primary-dark: #0D4D24;
    --color-primary-tint: #E5F1E9;

    --color-accent: #C41E2A;
    --color-accent-dark: #9E1620;
    --color-accent-tint: #FBE7E8;

    --color-green: #1E7A3E;
    --color-red: #C41E2A;
    --color-orange: #C17E28;
    --color-blue: #386890;
    --color-purple: #675884;
    --color-gray: #666666;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

    --radius: 16px;
    --radius-sm: 9px;
    --shadow-sm: 0 1px 2px rgba(23,35,26,0.05);
    --shadow: 0 1px 3px rgba(23,35,26,0.04), 0 6px 18px rgba(23,35,26,0.07);
    --shadow-lg: 0 10px 34px rgba(20,32,24,0.16), 0 2px 8px rgba(20,32,24,0.08);
    --sidebar-width: 220px;
    --topbar-height: 56px;
}

/* -------------------- Dark Mode -------------------- */
[data-theme="dark"] {
    --color-bg: #14171A;
    --color-surface: #1E2226;
    --color-border: #30353B;
    --color-text: #EDEDED;
    --color-muted: #9A9FA6;

    --color-primary: #2E9C5C;
    --color-primary-dark: #22B36B;
    --color-primary-tint: #1B3324;

    --color-accent: #E5535F;
    --color-accent-dark: #F0707B;
    --color-accent-tint: #3A1E21;

    --color-green: #2E9C5C;
    --color-red: #E5535F;
    --color-orange: #D99A45;
    --color-blue: #5C93C4;
    --color-purple: #9285B5;
    --color-gray: #9A9FA6;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 1px 3px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 34px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.35);
}
[data-theme="dark"] body { background: var(--color-bg); }
[data-theme="dark"] .sidebar { background: linear-gradient(165deg, #101214 0%, #0A0B0C 60%, #000000 100%); }
[data-theme="dark"] .table th { background: #22262B; }
[data-theme="dark"] .table tbody tr:hover { background: #262b30; }
[data-theme="dark"] input[type=text], [data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=password], [data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=date], [data-theme="dark"] select, [data-theme="dark"] textarea {
    background: #22262B;
}
[data-theme="dark"] .auth-card { background: var(--color-surface); }
[data-theme="dark"] .badge { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* overflow-x: clip (hidden ki jagah) — "hidden" body ko scroll-container bana deta
   hai jisse position:sticky (top search bar) kaam nahi karta. clip dikhne mein
   same hai par sticky chalne deta hai. Purane browsers ke liye hidden fallback. (v220) */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

/* -------------------- App shell -------------------- */
.app-shell { min-height: 100vh; }

/* Mobile hamburger button — completely out of document flow (position:fixed),
   so it can NEVER push or shift the sidebar/content, even if CSS fails to load. */
.hamburger-btn {
    display: none;
    position: fixed; top: 12px; left: 12px; z-index: 90;
    background: var(--color-primary-dark); border: none; color: #fff; font-size: 20px;
    cursor: pointer; padding: 8px 12px; line-height: 1; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}
.hamburger-btn:hover { background: var(--color-primary); }

.sidebar-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(20,28,22,0.5);
    z-index: 70;
}
.sidebar-overlay.show { display: block; }

/* Floating Chat button — bottom-right corner, always accessible, out of
   document flow so it never affects page layout. */
.chat-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    box-shadow: var(--shadow-lg);
    z-index: 95;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}
.chat-fab:hover { background: var(--color-primary-dark); transform: scale(1.06); text-decoration: none; color: #fff; }
.chat-fab-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--color-red); color: #fff;
    font-size: 11px; font-weight: 700;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--color-bg);
}

/* -------------------- New Message Toast Popup -------------------- */
#new-message-toast-container {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.35);
    padding: 16px;
}
#new-message-toast-container.show { display: flex; }
#new-message-toast-container .msg-toast-stack {
    display: flex; flex-direction: column; gap: 10px;
    max-width: 380px; width: 100%;
}
.msg-toast {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 16px 18px;
    cursor: pointer;
    animation: msgToastIn 0.2s ease;
    display: flex; gap: 12px; align-items: flex-start;
}
.msg-toast:hover { background: var(--color-primary-tint); }
.msg-toast-icon { font-size: 22px; flex-shrink: 0; }
.msg-toast-body { flex: 1; min-width: 0; }
.msg-toast-sender { font-weight: 700; font-size: 14px; color: var(--color-text); }
.msg-toast-text { font-size: 13px; color: var(--color-muted); margin-top: 3px; overflow-wrap: break-word; }
.msg-toast-close { background: none; border: none; color: var(--color-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px; flex-shrink: 0; }
@keyframes msgToastIn {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: linear-gradient(165deg, #1A1A1A 0%, #0F0F0F 60%, #000000 100%);
    color: #D9D9D9;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 80;
    transition: width 0.18s ease;
    box-shadow: 3px 0 24px rgba(0,0,0,0.25);
}

.sidebar-brand {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    display: flex; align-items: center; gap: 10px;
    white-space: nowrap; overflow: hidden;
}
.sidebar-brand-logo { max-width: 100%; height: 60px; width: auto; object-fit: contain; object-position: left center; }
.sidebar.collapsed .sidebar-brand-logo { height: 44px; }

.sidebar-collapse-btn {
    position: absolute;
    /* Previously this poked out 14px past the sidebar's right edge (half
       in, half out) — but html/body's overflow-x:hidden (needed to stop
       unrelated horizontal scrollbars) was clipping that overflowing
       half, making the button look cut off. Keeping it fully inside the
       sidebar's own bounds avoids relying on that overflow at all. */
    top: 30px; right: 10px; left: auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: #1A1A1A;
    color: #D9D9D9;
    cursor: pointer;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    z-index: 85;
    transition: right 0.18s ease, transform 0.18s ease;
}
.sidebar-collapse-btn:hover { background: var(--color-accent); color: #fff; }

.sidebar-nav { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; }

.nav-group-header {
    padding: 14px 14px 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgba(255,255,255,0.35);
}
.nav-group-header:first-child { padding-top: 4px; }
.sidebar.collapsed .nav-group-header { display: none; }

.sidebar-nav a {
    color: #BFBFBF;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    display: flex; align-items: center; gap: 10px;
    white-space: nowrap;
}

.sidebar-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.sidebar-nav a.active { background: rgba(196,30,42,0.22); color: #fff; border-left-color: var(--color-accent); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.15) inset; }

/* -------------------- Collapsed (icon-only) sidebar -------------------- */
.sidebar.collapsed { width: 68px; }
.sidebar.collapsed .sidebar-collapse-btn { right: 10px; transform: rotate(180deg); }
.sidebar.collapsed .nav-text { display: none; }
.sidebar.collapsed .sidebar-nav a { justify-content: center; padding: 12px 0; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 24px 8px; }
.sidebar.collapsed .user-chip { justify-content: center; }
.sidebar.collapsed .sidebar-footer-links a { justify-content: center; }

/* Hovering a collapsed sidebar temporarily widens it back out (showing full
   labels) without pushing the page content — it just overlaps on top while
   the mouse is over it, and shrinks back the moment the mouse leaves. */
.sidebar.collapsed.hover-expanded {
    width: var(--sidebar-width);
    z-index: 95;
    box-shadow: 6px 0 30px rgba(0,0,0,0.35);
}
.sidebar.collapsed.hover-expanded .sidebar-collapse-btn { right: 10px; transform: none; }
.sidebar.collapsed.hover-expanded .nav-text { display: inline; }
.sidebar.collapsed.hover-expanded .nav-group-header { display: block; }
.sidebar.collapsed.hover-expanded .sidebar-nav a { justify-content: flex-start; padding: 10px 14px; }
.sidebar.collapsed.hover-expanded .sidebar-brand { justify-content: flex-start; padding: 24px 20px; }
.sidebar.collapsed.hover-expanded .user-chip { justify-content: flex-start; }
.sidebar.collapsed.hover-expanded .sidebar-footer-links a { justify-content: flex-start; }
.sidebar.collapsed.hover-expanded .theme-toggle-btn { justify-content: flex-start; }

.sidebar-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,0.08); }

.user-chip { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--color-accent);
    color: #fff; font-family: var(--font-display);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0;
}

.user-name { font-size: 13px; font-weight: 600; color: #fff; }
.user-role { font-size: 11px; color: #8C8C8C; }
.logout-link { font-size: 12px; color: #F08080; }
.sidebar-footer-links { display: flex; flex-direction: column; gap: 8px; }
.sidebar-footer-links a { font-size: 12px; }
.sidebar-footer-links a:not(.logout-link) { color: #BFBFBF; }
.sidebar-footer-links a.active-link { color: var(--color-accent); font-weight: 700; }

.theme-toggle-btn {
    display: flex; align-items: center; gap: 10px;
    background: none; border: none; cursor: pointer;
    font-size: 12px; color: #BFBFBF; font-family: inherit;
    padding: 0; text-align: left; width: 100%;
}
.theme-toggle-btn:hover { color: #fff; }
.sidebar.collapsed .theme-toggle-btn { justify-content: center; }

.main-content { min-width: 0; padding: 30px 36px; margin-left: var(--sidebar-width); transition: margin-left 0.18s ease; }
body.sidebar-collapsed .main-content { margin-left: 68px; }
.content-inner { max-width: 100%; margin: 0 auto; width: 100%; }

/* -------------------- Page header -------------------- */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
.page-header h1 { margin: 0 0 4px 0; font-size: 24px; color: var(--color-primary-dark); }
.text-muted { color: var(--color-muted); }
.text-red { color: var(--color-red); }
.small { font-size: 12px; }

/* -------------------- Cards -------------------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 20px;
    overflow-x: auto;
    transition: box-shadow 0.2s ease;
}

.card-narrow { max-width: 520px; }
/* Pincode Search page: dono boxes aur results beech mein (v224) */
.pincode-search-center { max-width: 520px; margin-inline: auto; }
.pincode-search-center .card-narrow { max-width: none; }
/* Kisi bhi page ka box beech mein (jaise Pincode Check) — v227 */
.card-center { margin-inline: auto; }
#ip-bulk-delete-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.card-form-compact { max-width: 720px; }

/* ==================== Modern Order Detail (order_view.php) ==================== */
.order-modern-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-bottom: 22px;
}
.order-modern-title { font-size: 24px; font-weight: 700; font-family: var(--font-display); margin: 0; }
.order-modern-sub { color: var(--color-muted); font-size: 13.5px; margin-top: 4px; }
.order-modern-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 30px; font-size: 12.5px; font-weight: 700;
    white-space: nowrap;
}
.order-modern-status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.order-modern-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .order-modern-grid { grid-template-columns: 1fr; } }
.order-modern-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.order-modern-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 16px; padding: 22px; box-shadow: 0 2px 10px rgba(20,20,20,0.04);
}
.order-modern-card-header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.order-modern-card-icon {
    width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.order-modern-card-header h3 { margin: 0; font-size: 15px; font-weight: 700; }
.oc-blue   { background: #EAF1FE; color: #2563EB; }
.oc-purple { background: #F1EAFE; color: #7C3AED; }
.oc-teal   { background: #E1F5F3; color: #0D9488; }
.oc-orange { background: #FEF3E1; color: #D97706; }
.oc-green  { background: #E9F8EF; color: #16A34A; }

.order-modern-card label { font-size: 12px; font-weight: 600; color: var(--color-muted); margin-bottom: 4px; }
.order-modern-card .form-row { margin-bottom: 12px; }
.order-modern-card > label:not(:first-child) { margin-top: 4px; }

.order-balance-box {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--color-primary-tint); border-left: 4px solid var(--color-primary);
    border-radius: 10px; padding: 12px 16px; margin-top: 4px;
}
.order-balance-box .label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-primary-dark); }
.order-balance-box .sub { font-size: 11px; color: var(--color-muted); margin-top: 1px; }
.order-balance-box .amount { font-size: 20px; font-weight: 700; font-family: var(--font-display); color: var(--color-primary-dark); }

.order-api-badge {
    font-size: 10px; font-weight: 700; color: #D97706; background: #FEF3E1;
    padding: 2px 8px; border-radius: 12px; margin-left: auto;
}

.order-save-btn {
    width: 100%; padding: 13px; border-radius: 10px; border: none;
    background: var(--color-primary); color: #fff; font-weight: 700; font-size: 14.5px;
    cursor: pointer; box-shadow: 0 4px 14px rgba(20,108,52,0.3); transition: background 0.15s ease, transform 0.15s ease;
}
.order-save-btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.order-refresh-btn {
    width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--color-border);
    background: var(--color-surface); font-size: 16px; cursor: pointer; flex-shrink: 0;
}
.order-refresh-btn:hover { background: var(--color-bg); }

/* -------------------- Order Detail: main content + sticky Timeline sidebar -------------------- */
.order-detail-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}
.order-detail-main { min-width: 0; }
.order-detail-timeline { position: sticky; top: 84px; } /* top search bar (~65px) ke neeche — v220 */
.order-detail-timeline .card { max-height: calc(100vh - 104px); overflow-y: auto; }
@media (max-width: 1300px) {
    .order-detail-layout { grid-template-columns: 1fr; }
    .order-detail-timeline { position: static; }
    .order-detail-timeline .card { max-height: none; }
}
.card-form-compact .form-row { gap: 10px 16px; margin-bottom: 4px; }
.card-form-compact input[type=text], .card-form-compact textarea, .card-form-compact select {
    max-width: 100%;
}
.card-form-compact label { font-size: 12.5px; margin-bottom: 3px; display: block; }
/* The Order Items table needs its own natural sizing — don't squeeze its
   product dropdown/qty fields down to the narrow 280px form-field width,
   and don't force the table itself to a min-width that would overflow the
   compact card (causing an unwanted horizontal scrollbar). */
.card-form-compact #edit-items-table { min-width: 0; width: 100%; table-layout: fixed; }
.card-form-compact #edit-items-table select,
.card-form-compact #edit-items-table input {
    max-width: 100%;
    width: 100%;
}
.card-form-compact #edit-items-table td:nth-child(1) { width: 55%; }
.card-form-compact #edit-items-table td:nth-child(2) { width: 15%; }
.card-form-compact #edit-items-table td:nth-child(3) { width: 20%; }
.card-form-compact #edit-items-table td:nth-child(4) { width: 10%; }
.card-form-compact #edit-items-table select { font-size: 12.5px; white-space: normal; }
.card-form-compact .table { min-width: 0; }

/* Lets a table scroll sideways on narrow screens instead of squeezing
   columns unreadably thin or breaking the page layout. */
.table-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.card-header h3 { margin: 0; font-size: 16px; color: var(--color-primary-dark); letter-spacing: -0.005em; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* -------------------- Compact Order Form -------------------- */
.order-form-grid { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
.order-form-grid .card { margin-bottom: 0; }

.section-title-first { margin-top: 0; }

.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.table-compact th, .table-compact td { padding: 7px 8px; font-size: 12.5px; }
.table-compact select, .table-compact input { min-height: 34px; padding: 6px 8px; font-size: 13px; }

/* Orders list — dense, no-scroll layout: merged columns, tighter cells */
.table-compact-orders { min-width: 0; width: 100%; table-layout: auto; }
.table-compact-orders th, .table-compact-orders td { padding: 9px 8px; font-size: 12.5px; line-height: 1.45; }
.table-compact-orders .badge { font-size: 10.5px; padding: 2px 9px; }

.section-title {
    font-family: var(--font-display);
    font-size: 15px; font-weight: 600;
    margin: 20px 0 12px; color: var(--color-primary-dark);
    border-bottom: 1px solid var(--color-border); padding-bottom: 8px;
}

/* -------------------- Stats -------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }

/* ==================== Modern Dashboard (index.php) ==================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;600;700&display=swap');

.dash-palette-blue   { --dc-solid: #2563EB; --dc-tint: #EAF1FE; --dc-tint-dark: #16233F; }
.dash-palette-green  { --dc-solid: #16A34A; --dc-tint: #E9F8EF; --dc-tint-dark: #16301F; }
.dash-palette-orange { --dc-solid: #F59E0B; --dc-tint: #FEF3E1; --dc-tint-dark: #3A2A0D; }
.dash-palette-red    { --dc-solid: #EF4444; --dc-tint: #FDEBEB; --dc-tint-dark: #3A1414; }
.dash-palette-purple { --dc-solid: #7C3AED; --dc-tint: #F1EAFE; --dc-tint-dark: #271A3F; }
.dash-palette-teal   { --dc-solid: #0D9488; --dc-tint: #E1F5F3; --dc-tint-dark: #0F2E2A; }

/* Delivery Update: whole row highlighted red when courier reports max
   delivery attempts reached, so staff can spot it at a glance. */
.row-max-attempts { background: #FDEBEB !important; }
.row-max-attempts:hover { background: #FBDADA !important; }
[data-theme="dark"] .row-max-attempts { background: rgba(239,68,68,0.18) !important; }
[data-theme="dark"] .row-max-attempts:hover { background: rgba(239,68,68,0.26) !important; }
.dash-palette-indigo { --dc-solid: #4F46E5; --dc-tint: #EAE9FD; --dc-tint-dark: #1E1B3F; }
.dash-palette-amber  { --dc-solid: #D97706; --dc-tint: #FEF0DB; --dc-tint-dark: #3A2A0D; }
.dash-palette-maroon { --dc-solid: #9F1239; --dc-tint: #FBE4EA; --dc-tint-dark: #3A121F; }
.dash-palette-gray   { --dc-solid: #57534E; --dc-tint: #EFECEA; --dc-tint-dark: #292623; }
.dash-palette-pink   { --dc-solid: #DB2777; --dc-tint: #FCE4F0; --dc-tint-dark: #3A1428; }

.dash-header {
    font-family: 'Poppins', var(--font-display);
    border-radius: 20px;
    padding: 28px 32px;
    margin-bottom: 22px;
    background: linear-gradient(120deg, #146C34 0%, #1B8A44 55%, #2E9C5C 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    box-shadow: 0 12px 34px rgba(20,108,52,0.28);
    position: relative; overflow: hidden;
}
[data-theme="dark"] .dash-header { background: linear-gradient(120deg, #0F3D22 0%, #145C31 55%, #1B7A3F 100%); }
.dash-header::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 85% -10%, rgba(255,255,255,0.18), transparent 55%);
    pointer-events: none;
}
.dash-header-greeting { font-size: 22px; font-weight: 700; margin: 0; }
.dash-header-sub { font-size: 13px; opacity: 0.88; margin-top: 4px; font-weight: 500; }
.dash-header-right { display: flex; align-items: center; gap: 12px; z-index: 1; }
.dash-icon-btn {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
    display: flex; align-items: center; justify-content: center; font-size: 17px;
    color: #fff; text-decoration: none; transition: background 0.15s ease, transform 0.15s ease;
    backdrop-filter: blur(6px);
}
.dash-icon-btn:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
.dash-profile-chip {
    display: flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
    border-radius: 30px; padding: 6px 14px 6px 6px; text-decoration: none; color: #fff;
    backdrop-filter: blur(6px); transition: background 0.15s ease;
}
.dash-profile-chip:hover { background: rgba(255,255,255,0.28); }
.dash-profile-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.9);
    color: #146C34; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; font-family: 'Poppins', var(--font-display);
}
.dash-profile-name { font-size: 13px; font-weight: 600; }
.dash-add-order-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; color: #146C34; font-weight: 700; font-size: 13.5px;
    padding: 10px 18px; border-radius: 12px; text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-add-order-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.22); }

.dash-stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 22px; }
.dash-status-section-label {
    font-family: 'Poppins', var(--font-display); font-size: 14px; font-weight: 700;
    color: var(--color-text); margin: 4px 0 12px; display: flex; align-items: center; gap: 8px;
}
@media (max-width: 1100px) { .dash-stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .dash-stat-grid { grid-template-columns: 1fr; } }

.dash-stat-card {
    border-radius: 16px;
    padding: 20px;
    background: var(--dc-tint);
    border: 1px solid color-mix(in srgb, var(--dc-solid) 18%, transparent);
    box-shadow: 0 2px 10px rgba(20,20,20,0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative; overflow: hidden;
}
[data-theme="dark"] .dash-stat-card { background: var(--dc-tint-dark); }
.dash-stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20,20,20,0.12); }
.dash-stat-top { display: flex; align-items: flex-start; justify-content: space-between; }
.dash-stat-icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--dc-solid); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--dc-solid) 45%, transparent);
}
.dash-trend-pill {
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
    display: inline-flex; align-items: center; gap: 3px;
}
.dash-trend-up { background: #E9F8EF; color: #16A34A; }
.dash-trend-down { background: #FDEBEB; color: #EF4444; }
.dash-trend-flat { background: var(--color-border); color: var(--color-muted); }
[data-theme="dark"] .dash-trend-up { background: rgba(22,163,74,0.18); }
[data-theme="dark"] .dash-trend-down { background: rgba(239,68,68,0.18); }
.dash-stat-value {
    font-family: 'Poppins', var(--font-display); font-size: 26px; font-weight: 700;
    color: var(--dc-solid); margin-top: 14px; letter-spacing: -0.01em;
}
[data-theme="dark"] .dash-stat-value { color: #fff; }
.dash-stat-label { font-size: 12.5px; color: var(--color-text); font-weight: 600; margin-top: 3px; }
.dash-stat-sub { font-size: 11.5px; color: var(--color-muted); margin-top: 2px; }

.dash-section-card {
    border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border);
    box-shadow: 0 2px 10px rgba(20,20,20,0.04); padding: 22px; margin-bottom: 22px;
}
.dash-section-title {
    font-family: 'Poppins', var(--font-display); font-size: 16px; font-weight: 600;
    margin: 0 0 16px; display: flex; align-items: center; gap: 8px;
}
.dash-revenue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .dash-revenue-grid { grid-template-columns: repeat(2, 1fr); } }
.dash-revenue-item {
    border-radius: 12px; padding: 14px 16px; background: var(--color-bg); border: 1px solid var(--color-border);
}
.dash-revenue-item .dash-revenue-value { font-family: 'Poppins', var(--font-display); font-size: 19px; font-weight: 700; }
.dash-revenue-item .dash-revenue-label { font-size: 11.5px; color: var(--color-muted); margin-top: 2px; font-weight: 600; }

.dash-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .dash-charts-grid { grid-template-columns: 1fr; } }
.dash-chart-wrap { position: relative; height: 240px; }
.dash-chart-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; justify-content: center; }
.dash-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.dash-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.dash-top-performer {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
    background: linear-gradient(120deg, #FEF3E1, #FEF9EE); border: 1px solid #F6DDA6; margin-bottom: 16px;
}
[data-theme="dark"] .dash-top-performer { background: linear-gradient(120deg, #3A2A0D, #33260E); border-color: #5A4319; }
.dash-top-performer .trophy { font-size: 26px; }

/* -------------------- Attendance Calendar -------------------- */
.attendance-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.attendance-cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--color-muted); padding-bottom: 4px; }
.attendance-cal-cell {
    aspect-ratio: 1; border-radius: 10px; background: var(--color-bg); border: 1px solid var(--color-border);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 12px; position: relative;
}
.attendance-cal-cell.empty { background: none; border: none; }
.attendance-cal-cell.is-today { border: 2px solid var(--color-primary); font-weight: 700; }
.attendance-cal-cell.status-present { background: #E9F8EF; }
.attendance-cal-cell.status-absent { background: #FDEBEB; }
.attendance-cal-cell.status-half_day { background: #FEF3E1; }
.attendance-cal-cell.status-leave { background: #EAF1FE; }
.attendance-cal-cell.status-none { opacity: 0.55; }
[data-theme="dark"] .attendance-cal-cell.status-present { background: rgba(22,163,74,0.15); }
[data-theme="dark"] .attendance-cal-cell.status-absent { background: rgba(239,68,68,0.15); }
[data-theme="dark"] .attendance-cal-cell.status-half_day { background: rgba(245,158,11,0.15); }
[data-theme="dark"] .attendance-cal-cell.status-leave { background: rgba(37,99,235,0.15); }
.cal-day-num { font-size: 12px; }
.cal-day-dot { font-size: 9px; }
@media (max-width: 600px) {
    .attendance-calendar-grid { gap: 3px; }
    .attendance-cal-cell { font-size: 10px; border-radius: 6px; }
    .cal-day-dot { font-size: 7px; }
}
.dash-top-performer b { font-family: 'Poppins', var(--font-display); }

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--color-primary);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-orange { border-left-color: var(--color-orange); }
.stat-green { border-left-color: var(--color-green); }
.stat-red { border-left-color: var(--color-red); }
.stat-blue { border-left-color: var(--color-blue); }

.stat-value { font-family: var(--font-display); font-size: 25px; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; }
.stat-label { font-size: 12px; color: var(--color-muted); margin-top: 3px; font-weight: 500; }
.stat-sub { font-size: 12px; color: var(--color-primary-dark); margin-top: 6px; font-weight: 700; }

/* -------------------- Dashboard analytics bars -------------------- */
.analytics-bars { display: flex; flex-direction: column; gap: 14px; }
.analytics-bar-row { display: grid; grid-template-columns: 150px 1fr 110px; align-items: center; gap: 12px; }
.analytics-bar-label { font-size: 13px; font-weight: 600; color: var(--color-text); }
.analytics-bar-track {
    height: 14px; background: var(--color-bg); border-radius: 8px; overflow: hidden;
    border: 1px solid var(--color-border);
}
.analytics-bar-fill {
    height: 100%; border-radius: 8px;
    transition: width 0.5s ease;
}
.fill-orange { background: var(--color-orange); }
.fill-blue { background: var(--color-blue); }
.fill-green { background: var(--color-green); }
.fill-red { background: var(--color-red); }
.analytics-bar-count { font-size: 12.5px; color: var(--color-muted); text-align: right; white-space: nowrap; }

/* -------------------- Forms -------------------- */
form label { display: block; margin: 10px 0 5px; font-size: 12.5px; font-weight: 600; color: #3B4A40; }

.checkbox-label {
    display: flex !important; align-items: center; gap: 8px;
    font-weight: 500 !important; margin: 8px 0 !important;
    cursor: pointer;
}
.checkbox-label input[type=checkbox] { width: auto; accent-color: var(--color-primary); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: #FEFEFC;
    color: var(--color-text);
    font-family: inherit;
    min-height: 42px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea { resize: vertical; min-height: unset; }

input:hover, select:hover, textarea:hover { border-color: #CFC9B4; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3.5px var(--color-primary-tint);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

/* -------------------- Buttons -------------------- */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    min-height: 42px;
    line-height: 22px;
    transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 1px 2px rgba(22,48,31,0.15), 0 3px 10px rgba(22,48,31,0.18); }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(22,48,31,0.18), 0 6px 16px rgba(22,48,31,0.22); }
.btn-secondary { background: var(--color-primary-tint); color: var(--color-primary-dark); border: 1px solid rgba(35,75,55,0.12); }
.btn-secondary:hover { background: #DCE7DF; transform: translateY(-1px); }
.btn-block { width: 100%; margin-top: 14px; }
.btn-sm { padding: 8px 14px; font-size: 13px; min-height: 36px; }

/* -------------------- Table -------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; margin-top: 8px; min-width: 640px; }
.table th, .table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.table th { color: var(--color-muted); font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; white-space: nowrap; background: #FAF9F4; }
.table tbody tr { transition: background 0.12s ease; }
.table tbody tr:hover { background: var(--color-primary-tint); }
.actions a, .actions button { margin-right: 10px; font-size: 13px; }
.link { color: var(--color-primary); background: none; border: none; cursor: pointer; padding: 0; font-size: 13px; font-weight: 600; }
.link-danger { color: var(--color-red); background: none; border: none; cursor: pointer; padding: 0; font-size: 13px; font-weight: 600; }
.text-right { text-align: right; }

/* -------------------- Badges -------------------- */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
    letter-spacing: 0.01em;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.badge-lg { padding: 5px 14px; font-size: 12px; margin-left: 6px; }
.badge-gray { background: #EEEDE4; color: #565F52; }
.badge-blue { background: #E1EBF1; color: #2A5876; }
.badge-green { background: #DEEEE1; color: #2A6B45; }
.badge-red { background: #F5E1E1; color: #963030; }
.badge-orange { background: #F6E9D2; color: #A16A1F; }
.badge-yellow { background: #FEF3C7; color: #92720C; }
.badge-purple { background: #E9E4F0; color: #574A78; }

/* -------------------- Alerts -------------------- */
.alert { padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13px; border-left: 3px solid transparent; }
.alert-success { background: #DEEEE1; color: #235539; border-left-color: var(--color-green); }
.alert-error { background: #F5E1E1; color: #7A2626; border-left-color: var(--color-red); }
.alert-warning { background: #FBF0DA; color: #8A5A0A; border-left-color: var(--color-orange); }
[data-theme="dark"] .alert-warning { background: rgba(193,126,40,0.15); color: #E5B567; }

/* -------------------- Global Top Header -------------------- */
.app-topbar {
    /* 3 column grid: [khali] [search — beech mein] [notifications/user] (v219) */
    display: grid; grid-template-columns: 1fr minmax(0, 420px) 1fr; align-items: center; gap: 20px;
    margin: -30px -36px 24px; padding: 14px 36px;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    /* Scroll karne pe bhi upar chipka rahe (v220) */
    position: sticky; top: 0; z-index: 50;
}
.app-topbar-search {
    grid-column: 2; width: 100%; position: relative; display: flex; align-items: center;
}
.app-topbar-search-icon { position: absolute; left: 12px; opacity: 0.5; font-size: 13px; pointer-events: none; }
.app-topbar-search input {
    width: 100%; padding: 9px 12px 9px 34px; border-radius: 999px;
    border: 1.5px solid var(--color-primary-dark); background: var(--color-bg); font-size: 13px;
}
.app-topbar-search input:focus {
    outline: none; border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 3px var(--color-primary-tint);
}
.app-topbar-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.app-topbar-icon-btn {
    position: relative; font-size: 18px; text-decoration: none; color: var(--color-text);
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background 0.15s ease;
}
.app-topbar-icon-btn:hover { background: var(--color-bg); }
.app-topbar-notif-dot {
    position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-red); border: 1.5px solid var(--color-surface);
}
.app-topbar-user { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 999px; }
.app-topbar-user:hover { background: var(--color-bg); }
.app-topbar-avatar { width: 30px; height: 30px; font-size: 13px; }
.app-topbar-user-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.app-topbar-user-caret { font-size: 10px; opacity: 0.6; }
.app-topbar-user-menu {
    display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 160px; padding: 6px;
}
.app-topbar-user-menu.open { display: block; }
.app-topbar-user-menu a {
    display: block; padding: 8px 10px; border-radius: 6px; font-size: 13px;
    color: var(--color-text); text-decoration: none;
}
.app-topbar-user-menu a:hover { background: var(--color-bg); text-decoration: none; }

@media (max-width: 768px) {
    .app-topbar { display: flex; margin: 0 -14px 18px; padding: 12px 14px; flex-wrap: wrap; justify-content: space-between; }
    .app-topbar-search { order: 2; max-width: 100%; flex-basis: 100%; }
    .app-topbar-user-name { display: none; }
    .app-topbar-right { margin-left: auto; }
}


.auth-body-v2 {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(212,175,55,0.10), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(212,175,55,0.08), transparent 40%),
        linear-gradient(160deg, #06140B 0%, #0E2C19 45%, #123D22 100%);
    padding: 24px;
    position: relative;
    overflow: hidden;
}
/* Soft decorative leaf shapes in the corners — pure CSS/SVG, not a photo,
   so it stays crisp and lightweight at any screen size. */
.auth-leaf-decor {
    position: absolute; width: 340px; height: 340px; opacity: 0.14; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.5), transparent 70%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 10 C40 40 20 100 60 160 C90 190 140 190 170 150 C190 110 180 50 100 10Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 10 C40 40 20 100 60 160 C90 190 140 190 170 150 C190 110 180 50 100 10Z'/%3E%3C/svg%3E") center/contain no-repeat;
    background-color: #D4AF37;
}
.auth-leaf-decor.top-left { top: -80px; left: -80px; transform: rotate(-25deg); }
.auth-leaf-decor.bottom-right { bottom: -100px; right: -60px; transform: rotate(160deg); }

.auth-layout-v2 {
    display: flex; align-items: center; justify-content: center; gap: 70px;
    width: 100%; max-width: 1240px; position: relative; z-index: 1;
}
.auth-brand-panel { flex: 1; display: flex; align-items: center; justify-content: center; }
.auth-brand-logo-img { max-width: 560px; width: 100%; height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4)); }

.auth-card-v2 {
    flex: 0 0 420px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    padding: 38px 34px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    color: #EAF3EC;
}
.auth-logo-badge-v2 {
    width: 78px; height: 78px; margin: 0 auto 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(212,175,55,0.35), rgba(20,108,52,0.3));
    border: 1.5px solid rgba(212,175,55,0.45);
    box-shadow: 0 0 0 6px rgba(212,175,55,0.08), 0 8px 24px rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    padding: 12px;
}
.auth-logo-badge-v2 img { width: 100%; height: 100%; object-fit: contain; }
.auth-heading-v2 { text-align: center; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.auth-subtitle-v2 { text-align: center; color: rgba(234,243,236,0.65); font-size: 13.5px; margin: 0 0 26px; }

.auth-field-v2 { margin-bottom: 16px; }
.auth-field-v2 label { display: block; font-size: 12.5px; font-weight: 600; color: rgba(234,243,236,0.85); margin-bottom: 6px; }
.auth-input-wrap { position: relative; }
.auth-input-wrap .auth-input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    opacity: 0.6; font-size: 15px; pointer-events: none;
}
.auth-input-wrap input {
    width: 100%; padding: 12px 14px 12px 40px;
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px;
    color: #fff; font-size: 14px;
}
.auth-input-wrap input::placeholder { color: rgba(234,243,236,0.35); }
.auth-input-wrap input:focus { outline: none; border-color: #D4AF37; box-shadow: 0 0 0 3px rgba(212,175,55,0.15); }
.auth-input-wrap .auth-pw-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; opacity: 0.6; font-size: 15px; color: inherit;
}
.auth-input-wrap .auth-pw-toggle:hover { opacity: 1; }

.auth-row-v2 { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 22px; font-size: 12.5px; }
.auth-remember-v2 { display: flex; align-items: center; gap: 6px; color: rgba(234,243,236,0.8); cursor: pointer; }
.auth-remember-v2 input { accent-color: #D4AF37; }
.auth-forgot-v2 { color: #D4AF37; text-decoration: none; font-weight: 600; }
.auth-forgot-v2:hover { text-decoration: underline; }

.auth-btn-v2 {
    width: 100%; padding: 13px; border: none; border-radius: 999px;
    background: linear-gradient(135deg, #E8C766, #C99A2E);
    color: #1A1400; font-weight: 700; font-size: 14.5px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 10px 24px rgba(201,154,46,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.auth-btn-v2:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(201,154,46,0.45); }

.auth-footer-divider-v2 { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 22px 0 16px; }
.auth-secure-note-v2 { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: rgba(234,243,236,0.55); }
.auth-hint-v2 { text-align: center; margin-top: 14px; font-size: 11.5px; color: rgba(234,243,236,0.45); }
.auth-hint-v2 b { color: rgba(234,243,236,0.7); }

/* -------------------- Login page animations (v226) -------------------- */
/* Entrance: card upar uthta hai, andar ke elements ek-ek karke aate hain */
@keyframes authCardIn {
    from { opacity: 0; transform: translateY(28px) scale(0.98); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}
@keyframes authFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
@keyframes authBrandIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: none; }
}
/* Bada logo halka sa tairta hai */
@keyframes authFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
/* Gol logo badge ke chaaron taraf sunehri chamak */
@keyframes authGoldPulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(212,175,55,0.08), 0 8px 24px rgba(0,0,0,0.35); }
    50%      { box-shadow: 0 0 0 12px rgba(212,175,55,0.16), 0 0 28px rgba(212,175,55,0.35), 0 8px 24px rgba(0,0,0,0.35); }
}
/* Kone ke patte dhire-dhire hilte hain (har patte ka apna rotation --leaf-rot) */
@keyframes authLeafSway {
    0%, 100% { transform: rotate(var(--leaf-rot)) translate(0, 0); }
    50%      { transform: rotate(calc(var(--leaf-rot) + 8deg)) translate(10px, 8px); }
}
/* Button par chamak ki lakeer */
@keyframes authShine {
    from { left: -60%; }
    to   { left: 130%; }
}
@keyframes authSpin { to { transform: rotate(360deg); } }
/* Galat password: error box halka sa hile */
@keyframes authShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.auth-leaf-decor.top-left { --leaf-rot: -25deg; animation: authLeafSway 14s ease-in-out infinite; }
.auth-leaf-decor.bottom-right { --leaf-rot: 160deg; animation: authLeafSway 17s ease-in-out infinite reverse; }

.auth-brand-panel { animation: authBrandIn 0.9s ease-out both; }
.auth-brand-logo-img { animation: authFloat 6s ease-in-out 0.9s infinite; }

.auth-card-v2 { animation: authCardIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.auth-logo-badge-v2 { animation: authFadeUp 0.5s ease-out 0.25s both, authGoldPulse 3.2s ease-in-out 1s infinite; }
.auth-card-v2 .auth-heading-v2      { animation: authFadeUp 0.5s ease-out 0.35s both; }
.auth-card-v2 .auth-subtitle-v2     { animation: authFadeUp 0.5s ease-out 0.42s both; }
.auth-card-v2 .alert                { animation: authFadeUp 0.4s ease-out 0.45s both; }
.auth-card-v2 .alert.auth-shake     { animation: authFadeUp 0.4s ease-out 0.45s both, authShake 0.45s ease-in-out 0.9s; }
.auth-card-v2 .auth-field-v2:nth-of-type(1) { animation: authFadeUp 0.5s ease-out 0.5s both; }
.auth-card-v2 .auth-field-v2:nth-of-type(2) { animation: authFadeUp 0.5s ease-out 0.58s both; }
.auth-card-v2 .auth-row-v2          { animation: authFadeUp 0.5s ease-out 0.66s both; }
.auth-card-v2 .auth-btn-v2          { animation: authFadeUp 0.5s ease-out 0.74s backwards; } /* backwards: hover/active transform kaam karte rahein */
.auth-card-v2 .auth-footer-divider-v2,
.auth-card-v2 .auth-secure-note-v2  { animation: authFadeUp 0.5s ease-out 0.82s both; }

.auth-input-wrap input { transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.auth-input-wrap input:focus { background: rgba(0,0,0,0.28); }
.auth-input-wrap .auth-input-icon { transition: opacity 0.2s ease, transform 0.2s ease; }
.auth-input-wrap:focus-within .auth-input-icon { opacity: 1; transform: translateY(-50%) scale(1.12); }

.auth-btn-v2 { position: relative; overflow: hidden; }
.auth-btn-v2::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
.auth-btn-v2:hover::after { opacity: 1; animation: authShine 0.8s ease-out; }
.auth-btn-v2:active { transform: translateY(1px) scale(0.99); }
.auth-btn-v2.is-loading { cursor: wait; opacity: 0.9; transform: none; }
.auth-btn-v2 .auth-btn-spinner {
    display: none; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(26,20,0,0.25); border-top-color: #1A1400;
    animation: authSpin 0.7s linear infinite;
}
.auth-btn-v2.is-loading .auth-btn-spinner { display: inline-block; }

/* "Kam animation" (reduce motion) setting wale users ke liye sab band */
@media (prefers-reduced-motion: reduce) {
    .auth-body-v2 *, .auth-body-v2 *::before, .auth-body-v2 *::after {
        animation: none !important; transition: none !important;
    }
}

@media (max-width: 860px) {
    .auth-layout-v2 { flex-direction: column; gap: 28px; }
    .auth-brand-panel { display: none; }
    .auth-card-v2 { flex: 0 0 auto; width: 100%; max-width: 400px; }
}


/* -------------------- Search bar -------------------- */
.search-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.search-bar input { flex: 1 1 220px; }
.search-bar select { width: 200px; }

/* -------------------- Orders filter grid -------------------- */
/* -------------------- Orders: Action Icons -------------------- */
.orders-action-icons { display: flex; gap: 4px; white-space: nowrap; }
.orders-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 6px; border: none; background: none; cursor: pointer; font-size: 14px;
    text-decoration: none; color: var(--color-text);
}
.orders-icon-btn:hover { background: var(--color-bg); text-decoration: none; }

/* -------------------- Order Detail Slide-over Panel -------------------- */
.order-slideover-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 150;
}
.order-slideover-backdrop.show { display: block; }
.order-slideover {
    position: fixed; top: 0; right: -420px; width: 400px; max-width: 92vw; height: 100vh;
    background: var(--color-surface); z-index: 151; box-shadow: -8px 0 32px rgba(0,0,0,0.2);
    display: flex; flex-direction: column; transition: right 0.25s ease;
}
.order-slideover.open { right: 0; }
.order-slideover-header {
    display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
    border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.order-slideover-header h3 { margin: 0; font-size: 16px; }
.order-slideover-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.order-slideover-footer {
    display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--color-border); flex-shrink: 0;
}
.order-slideover-footer .btn { flex: 1; text-align: center; }

.slideover-section { margin-bottom: 20px; }
.slideover-section h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); margin: 0 0 8px; }
.slideover-section p { margin: 3px 0; font-size: 13.5px; }

.slideover-timeline { position: relative; padding-left: 22px; }
.slideover-timeline-step { position: relative; padding-bottom: 18px; }
.slideover-timeline-step:last-child { padding-bottom: 0; }
.slideover-timeline-step::before {
    content: ''; position: absolute; left: -17px; top: 14px; bottom: -4px; width: 2px; background: var(--color-border);
}
.slideover-timeline-step:last-child::before { display: none; }
.slideover-timeline-dot {
    position: absolute; left: -22px; top: 2px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--color-border); border: 2px solid var(--color-surface);
}
.slideover-timeline-dot.done { background: var(--color-primary); }
.slideover-timeline-dot.exception { background: var(--color-red); }
.slideover-timeline-label { font-size: 13px; font-weight: 600; }


.orders-bulk-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative;
    margin-bottom: 10px; padding: 10px 14px;
    background: var(--color-primary-tint); border-radius: var(--radius-sm); border: 1px solid rgba(20,108,52,0.2);
}
.orders-bulk-close {
    margin-left: auto; background: none; border: none; cursor: pointer; font-size: 14px;
    opacity: 0.6; padding: 4px 8px; border-radius: 6px;
}
.orders-bulk-close:hover { opacity: 1; background: rgba(0,0,0,0.06); }
.orders-bulk-inline-panel {
    display: none; gap: 8px; align-items: center;
    flex-basis: 100%; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--color-border);
}
.orders-bulk-inline-panel.open { display: flex; }
.orders-bulk-inline-panel select { min-width: 180px; padding: 6px 8px; font-size: 13px; }


.orders-tabs-row {
    display: flex; gap: 4px; overflow-x: auto; margin-bottom: 14px;
    border-bottom: 1px solid var(--color-border); padding-bottom: 0;
}
.orders-tab {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px;
    color: var(--color-muted); text-decoration: none; font-size: 13px; font-weight: 600;
    white-space: nowrap; border-bottom: 2px solid transparent; flex-shrink: 0;
}
.orders-tab:hover { color: var(--color-text); text-decoration: none; }
.orders-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.orders-tab-count {
    background: var(--color-bg); color: var(--color-muted); border-radius: 999px;
    font-size: 11px; padding: 1px 8px; font-weight: 700;
}
.orders-tab.active .orders-tab-count { background: var(--color-primary-tint); color: var(--color-primary-dark); }

/* -------------------- Orders: Single-row Filter Layout -------------------- */
.orders-filter-row {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 10px;
}
.orders-filter-row > div { min-width: 130px; flex: 1 1 130px; }
.orders-filter-row label {
    display: block; margin: 0 0 4px; font-size: 10px; color: var(--color-primary-dark);
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
}
.orders-filter-row select, .orders-filter-row input[type=date] {
    width: 100%; min-height: 34px; padding: 6px 8px; font-size: 12.5px;
}
.orders-filter-row .btn { flex: 0 0 auto; align-self: end; white-space: nowrap; }
.orders-filter-row .btn.active { background: var(--color-primary); color: #fff; }

.orders-more-filters-panel {
    display: none; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;
    margin-top: 10px; padding: 12px; background: var(--color-bg); border-radius: var(--radius-sm);
}
.orders-more-filters-panel.open { display: grid; }
.orders-more-filters-panel label {
    display: block; margin: 0 0 4px; font-size: 10px; color: var(--color-primary-dark);
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
}
.orders-more-filters-panel select { width: 100%; min-height: 34px; padding: 6px 8px; font-size: 12.5px; }

.dash-trend-note { font-weight: 400; opacity: 0.75; font-size: 10px; }


[data-theme="dark"] .filter-card {
    background: linear-gradient(180deg, #1E2226 0%, #191C1F 100%);
    border: 1px solid var(--color-border);
}

/* Desktop: everything stays on ONE line. If it doesn't all fit, the row
   scrolls horizontally instead of wrapping to a second line. */
.filter-grid {
    display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 14px; align-items: center;
    overflow-x: auto; padding-bottom: 4px;
}
.filter-grid input[type=text] { flex: 1 1 150px; min-width: 130px; }
.filter-grid select { width: auto; min-width: 100px; max-width: 150px; flex: 1 1 100px; font-size: 13px; padding: 9px 8px; }
.filter-grid input[type=date] { width: auto; flex: 0 0 118px; font-size: 13px; padding: 9px 8px; }
.filter-grid .btn { flex: 0 0 auto; white-space: nowrap; padding: 9px 12px; }

/* Labeled filter layout — 4 columns per row on desktop, extra compact. */
.filter-grid-2col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px 10px;
    margin-top: 4px;
}
.filter-grid-2col label {
    margin: 8px 0 3px;
    font-size: 10px;
    color: var(--color-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.filter-grid-2col select,
.filter-grid-2col input[type=date] {
    min-height: 30px;
    padding: 4px 6px;
    font-size: 12px;
    border-color: #DCD8C6;
    background: #FEFEFC;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.filter-grid-2col select:hover,
.filter-grid-2col input[type=date]:hover {
    border-color: var(--color-primary);
    background: #fff;
}

#orders-filter-form { position: relative; }
#orders-filter-form > label { margin: 0 0 4px; font-size: 10px; color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
#orders-filter-form > input[type=text] {
    min-height: 34px; padding: 6px 12px 6px 34px; font-size: 12.5px;
    background: #FEFEFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234B37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;
    background-size: 14px;
}
#orders-filter-form .form-actions { margin-top: 10px; gap: 8px; padding-top: 2px; }
#orders-filter-form .form-actions .btn { padding: 6px 14px; min-height: 32px; font-size: 12px; font-weight: 700; }
#orders-filter-form .form-actions .btn-primary { box-shadow: 0 2px 8px rgba(20,108,52,0.28); }
[data-theme="dark"] .filter-grid-2col select,
[data-theme="dark"] .filter-grid-2col input[type=date],
[data-theme="dark"] #orders-filter-form > input[type=text] {
    background-color: var(--color-surface);
}
[data-theme="dark"] #orders-filter-form > input[type=text] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEDED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* -------------------- Order Number highlight + copy -------------------- */
.order-number-link {
    font-family: 'Poppins', var(--font-display); font-size: 15px; font-weight: 700;
    color: var(--color-primary-dark); text-decoration: none;
}
.order-number-link:hover { text-decoration: underline; }
.order-number-copy {
    background: none; border: none; cursor: pointer; font-size: 12px;
    margin-left: 4px; padding: 2px 4px; border-radius: 6px; opacity: 0.6;
    transition: opacity 0.15s ease, background 0.15s ease; vertical-align: middle;
}
.order-number-copy:hover { opacity: 1; background: var(--color-bg); }

/* -------------------- Search box (bigger icon, prominent) -------------------- */
.search-box-wrap { position: relative; display: flex; align-items: center; }
.search-box-icon { position: absolute; left: 14px; font-size: 17px; pointer-events: none; opacity: 0.55; }
.search-box-input { padding-left: 42px !important; font-size: 14px !important; height: 44px; }

/* -------------------- Sticky filter/search bar (Search, Filters stay visible while scrolling) -------------------- */
/* NOTE (v220): overflow-x:clip ke baad sticky sach mein chalne laga. Top search bar
   ab sticky hai — filter card bhi chipakta to bada card list ko dhak deta aur topbar
   ke peeche chala jata. Isliye ise pehle jaisa (asal mein non-sticky) rakha hai. */
.sticky-filter-bar { position: relative; z-index: 40; }

/* -------------------- Accordion (Auto Assign Settings, etc.) -------------------- */
.accordion-card { padding: 0; overflow: hidden; }
.accordion-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: none; cursor: pointer; padding: 16px 20px;
    font-size: 14px; font-weight: 700; color: var(--color-text); font-family: inherit;
}
.accordion-toggle:hover { background: var(--color-bg); }
.accordion-arrow { transition: transform 0.2s ease; color: var(--color-muted); font-size: 11px; }
.accordion-toggle.open .accordion-arrow { transform: rotate(180deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; padding: 0 20px; }
.accordion-body.open { max-height: 600px; padding: 0 20px 18px; }

/* -------------------- Leads table hover + Convert CTA -------------------- */
.leads-table tbody tr { cursor: pointer; transition: background 0.12s ease; }
.leads-table tbody tr:hover { background: var(--color-primary-tint); }
.leads-table tbody tr:hover .btn { filter: brightness(1.05); }
.leads-table .lead-address { min-width: 160px; max-width: 260px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.btn-convert-cta {
    background: var(--color-primary); color: #fff; font-weight: 700;
    box-shadow: 0 2px 8px rgba(20,108,52,0.3); border: none;
}
.btn-convert-cta:hover { background: var(--color-primary-dark); color: #fff; text-decoration: none; }

.filter-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    margin-top: 10px;
    border: 1px solid rgba(20,108,52,0.14);
}

.pagination-bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
.pagination-links { display: flex; align-items: center; gap: 12px; }

/* -------------------- Assign Order bulk bar -------------------- */
.assign-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--color-primary-tint); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: 12px 14px; margin-bottom: 14px;
}
.assign-bar select { width: auto; min-width: 180px; flex: 1 1 180px; }
.assign-bar-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.assign-bar-dept-staff { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; }
.assign-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
.assign-bar select:disabled { opacity: 0.6; cursor: not-allowed; }

/* Secondary/text-style Reset button — less visually loud than the primary Filter button */
.btn-link {
    background: none; border: none; color: var(--color-muted); text-decoration: underline;
    padding: 9px 10px; font-size: 13px; display: inline-flex; align-items: center;
}
.btn-link:hover { color: var(--color-primary); }

/* Active filter chips shown under the filter bar */
.active-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 4px; background: var(--color-primary-tint);
    border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 10px; font-size: 12px;
    color: var(--color-text); text-decoration: none;
}
.filter-chip:hover { background: var(--color-bg); text-decoration: none; }

/* Sortable column headers */
.sortable-header { color: inherit; text-decoration: none; white-space: nowrap; }
.sortable-header:hover { color: var(--color-primary); text-decoration: none; }

/* Generic table empty-state (icon + message + action), used inside a
   colspan'd table cell so it gets proper height/centering. */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; }
.empty-state-icon { font-size: 40px; opacity: 0.7; }
.empty-state-title { font-weight: 600; font-size: 14px; margin: 0; }
.empty-state-sub { color: var(--color-muted); font-size: 12.5px; margin: 0 0 6px; }

/* Page subtitle — was too small/light before */
.assign-subtitle { font-size: 13.5px; opacity: 0.85; margin-top: 2px; }

/* -------------------- Modal (stock adjust) -------------------- */
.modal {
    display: none;
    position: fixed; inset: 0;
    background: rgba(20,28,22,0.5);
    align-items: center; justify-content: center;
    z-index: 100;
    padding: 16px;
}
.modal.show { display: flex; }
.modal-box {
    background: #fff; padding: 26px; border-radius: var(--radius);
    width: 100%; max-width: 400px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

/* -------------------- Ship Provider Selection Popup -------------------- */
.ship-provider-options { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ship-provider-option {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer;
}
.ship-provider-option:hover { background: var(--color-bg); }
.ship-provider-option input[type="radio"] { margin-top: 3px; }
.ship-provider-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-tint); }
.modal-box-lg { max-width: 700px; }

/* -------------------- Timeline -------------------- */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
    padding: 12px 0 12px 18px;
    border-left: 2px solid var(--color-border);
    position: relative;
    margin-left: 6px;
}
.timeline li::before {
    content: '';
    position: absolute; left: -6px; top: 16px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--color-accent);
}
.timeline li p { margin: 4px 0 0; color: var(--color-text); }

/* -------------------- AWB Transit History popup -------------------- */
.awb-history-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 16px; padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}
.awb-history-header h3 { margin: 0 0 4px; font-size: 20px; }
#awb-history-body { max-height: 60vh; overflow-y: auto; }
.awb-history-timeline { list-style: none; padding: 0; margin: 0; }
.awb-history-timeline li {
    display: flex; gap: 14px;
    padding-bottom: 20px;
    position: relative;
}
.awb-history-timeline li:not(:last-child)::before {
    content: '';
    position: absolute; left: 5px; top: 16px; bottom: 0;
    width: 2px; background: var(--color-border);
}
.awb-history-dot {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--color-primary);
    background: var(--color-surface);
    flex-shrink: 0; margin-top: 3px; z-index: 1;
}
.awb-history-timeline li:first-child .awb-history-dot { background: var(--color-primary); }
.awb-history-content { flex: 1; }
.awb-history-date { font-weight: 700; font-size: 13.5px; }
.awb-history-status { font-size: 13px; color: var(--color-muted); margin-top: 2px; }

.order-total { text-align: right; font-size: 17px; font-weight: 700; margin: 12px 0; font-family: var(--font-display); }

/* -------------------- Leaderboard -------------------- */
/* -------------------- Chat -------------------- */
.chat-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }

.chat-contacts { padding: 16px; max-height: 620px; display: flex; flex-direction: column; }
.chat-contact-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }

.chat-contact {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: var(--radius-sm);
    color: var(--color-text);
}
.chat-contact:hover { background: var(--color-primary-tint); text-decoration: none; }
.chat-contact.active { background: var(--color-primary-tint); border-left: 3px solid var(--color-primary); }
.chat-contact-info { flex: 1; min-width: 0; }
.chat-contact-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-unread-badge { flex-shrink: 0; }
.chat-channel-label { font-size: 11px; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 8px 4px; }
.chat-channel-label:first-child { padding-top: 2px; }
.chat-contacts .avatar { position: relative; }
.chat-presence-dot { position: absolute; bottom: -2px; right: -2px; font-size: 10px; line-height: 1; background: var(--color-surface); border-radius: 50%; }

.chat-window { padding: 16px; display: flex; flex-direction: column; height: 620px; }
.chat-messages {
    flex: 1; overflow-y: auto; padding: 10px 6px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--color-bg); border-radius: var(--radius-sm); margin-bottom: 12px;
}

.chat-bubble {
    max-width: 72%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px;
}
.chat-bubble-mine {
    align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px;
}
.chat-bubble-theirs {
    align-self: flex-start; background: #fff; border: 1px solid var(--color-border); border-bottom-left-radius: 4px;
}
.chat-bubble-time { margin-top: 3px; opacity: 0.75; font-size: 10.5px; }
.chat-bubble-mine .chat-bubble-time { color: #E7EEE8; }

.chat-input-row { display: flex; gap: 8px; align-items: center; position: relative; }
.chat-input-row input[type="text"] { flex: 1; }
.chat-attach-btn { cursor: pointer; font-size: 18px; padding: 6px; border-radius: 8px; background: none; border: none; line-height: 1; }
.chat-attach-btn:hover { background: var(--color-bg); }

/* Reply / forward / pin / delete on message bubbles */
.chat-bubble { position: relative; }
.chat-bubble-actions { display: none; gap: 4px; margin-top: 4px; }
.chat-bubble:hover .chat-bubble-actions { display: flex; }
.chat-action-btn { background: none; border: none; cursor: pointer; font-size: 12px; opacity: 0.7; padding: 2px 4px; border-radius: 4px; }
.chat-action-btn:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.chat-bubble-mine .chat-action-btn { color: #fff; }
.chat-bubble-deleted { opacity: 0.6; font-style: italic; }
.chat-reply-quote { border-left: 3px solid rgba(0,0,0,0.2); padding: 3px 8px; margin-bottom: 6px; font-size: 12px; opacity: 0.85; border-radius: 4px; background: rgba(0,0,0,0.04); }
.chat-bubble-mine .chat-reply-quote { background: rgba(255,255,255,0.15); border-left-color: rgba(255,255,255,0.4); }
.chat-forward-box { display: none; gap: 6px; margin-top: 6px; }
.chat-forward-box.open { display: flex; }
.chat-forward-box select { font-size: 12px; padding: 4px 6px; }
.chat-reply-preview { display: flex; align-items: center; justify-content: space-between; background: var(--color-bg); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; font-size: 12px; }
.chat-reply-preview button { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--color-muted); }

/* Pinned messages strip */
.chat-pinned-strip { background: #FEF3E1; border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; max-height: 80px; overflow-y: auto; }
.chat-pinned-item { font-size: 12px; padding: 3px 0; }
[data-theme="dark"] .chat-pinned-strip { background: rgba(245,158,11,0.15); }

/* File attachments */
.chat-file-chip { display: inline-block; background: rgba(0,0,0,0.06); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; text-decoration: none; color: inherit; }
.chat-bubble-mine .chat-file-chip { background: rgba(255,255,255,0.2); color: #fff; }

/* @Mentions */
.chat-mention { color: var(--color-primary); font-weight: 700; }
.chat-bubble-mine .chat-mention { color: #fff; text-decoration: underline; }
.chat-mention-dropdown { display: none; position: absolute; bottom: 100%; left: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 10; min-width: 160px; margin-bottom: 6px; }
.chat-mention-item { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.chat-mention-item:hover { background: var(--color-primary-tint); }

/* Task assignment */
.chat-task-form-box { display: none; background: var(--color-bg); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.chat-task-form-box.open { display: block; }
.chat-tasks-strip { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.chat-task-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #EAF1FE; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; }
[data-theme="dark"] .chat-task-chip { background: rgba(37,99,235,0.15); }

.leaderboard { display: flex; flex-direction: column; gap: 8px; }
.leaderboard-row {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: #fff;
    flex-wrap: wrap;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="dark"] .leaderboard-row { background: var(--color-surface); }
.leaderboard-row:hover { background: var(--color-bg); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

/* Subtle top-3 styling — a soft tint + colored left border, no flashing
   animation, so it reads as "distinguished" rather than "loud". */
.rank-gold { background: #FEFAEE; border-left: 3px solid #E3C578; }
.rank-silver { background: #F8F8F6; border-left: 3px solid #C9C9BE; }
.rank-bronze { background: #FBF3EA; border-left: 3px solid #D9B78F; }
[data-theme="dark"] .rank-gold { background: rgba(227,197,120,0.08); }
[data-theme="dark"] .rank-silver { background: rgba(201,201,190,0.08); }
[data-theme="dark"] .rank-bronze { background: rgba(217,183,143,0.08); }

/* Current logged-in user's row — separate, always-visible highlight. */
.lb-row-me { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.lb-you-badge { font-size: 9.5px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }

.lb-rank { font-size: 20px; width: 34px; text-align: center; flex-shrink: 0; }
.rank-normal .lb-rank { font-size: 14px; font-weight: 700; color: var(--color-muted); }

.lb-avatar { width: 38px; height: 38px; font-size: 15px; flex-shrink: 0; }
.lb-info { flex: 1 1 160px; min-width: 140px; }
.lb-name { font-weight: 600; font-size: 14px; font-family: var(--font-body); color: var(--color-text); text-decoration: none; display: inline-flex; align-items: center; }
.lb-name:hover { color: var(--color-primary); text-decoration: underline; }
.lb-meta { margin-top: 1px; }
.crown-emoji { margin-left: 4px; }

/* Equal-width metric columns, wraps into a horizontal scroll strip only
   as a last resort on very narrow screens (see mobile override below). */
.lb-stats { display: flex; gap: 0; flex: 2 1 420px; }
.lb-stat { flex: 1 1 0; text-align: center; min-width: 62px; padding: 0 4px; }
.lb-stat-value { font-size: 15px; font-weight: 700; font-family: var(--font-body); }
.lb-stat-label { font-size: 10px; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.02em; margin-top: 1px; }
.lb-stat-percent { font-size: 10px; color: var(--color-accent-dark); font-weight: 700; margin-top: 2px; }
.lb-stat-revenue .lb-stat-value { color: var(--color-primary-dark); }

.lb-expand-toggle { display: none; }

/* -------------------- Leaderboard nav bar (Prev/Today/Next/All Time/Team) -------------------- */
.lb-nav-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lb-nav-divider { width: 1px; height: 22px; background: var(--color-border); margin: 0 4px; }

/* -------------------- Mobile: collapse extra metrics behind "Details" -------------------- */
@media (max-width: 640px) {
    .leaderboard-row { padding: 12px 14px; }
    .lb-expand-toggle {
        display: inline-block; background: none; border: 1px solid var(--color-border); border-radius: 999px;
        font-size: 11px; padding: 3px 10px; color: var(--color-muted); margin-left: auto;
    }
    .lb-stats {
        flex-basis: 100%; display: none; flex-wrap: wrap; gap: 10px 4px;
        margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border);
    }
    .leaderboard-row.expanded .lb-stats { display: flex; }
    .lb-stat { flex: 1 1 30%; min-width: 80px; }
}

/* -------------------- Chat Monitor (Admin) -------------------- */
.call-history-btn {
    background: none; border: none; cursor: pointer; font-size: 13px; padding: 2px 4px;
    vertical-align: middle; border-radius: 4px;
}
.call-history-btn:hover { background: var(--color-primary-tint); }
.chat-monitor-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.chat-monitor-list { padding: 0; overflow: hidden; }
.chat-monitor-conv-list { max-height: 640px; overflow-y: auto; }
.chat-monitor-conv-item {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit;
}
.chat-monitor-conv-item:hover { background: var(--color-bg); text-decoration: none; }
.chat-monitor-conv-item.active { background: var(--color-primary-tint); border-left: 3px solid var(--color-primary); }
.chat-monitor-conv-avatars { display: flex; flex-shrink: 0; }
.chat-monitor-conv-avatars .avatar { width: 32px; height: 32px; font-size: 13px; border: 2px solid var(--color-surface); }
.chat-monitor-conv-avatars .avatar:last-child { margin-left: -10px; }
.chat-monitor-conv-info { flex: 1; min-width: 0; }
.chat-monitor-conv-names { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-monitor-conv-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.chat-monitor-conv-meta { text-align: right; flex-shrink: 0; }

.chat-monitor-thread { padding: 0; display: flex; flex-direction: column; min-height: 500px; }
.chat-monitor-thread .card-header { padding: 14px 18px; border-bottom: 1px solid var(--color-border); }
.chat-monitor-messages { flex: 1; overflow-y: auto; max-height: 480px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.chat-monitor-sender { font-weight: 700; opacity: 0.85; margin-bottom: 2px; }
.chat-bubble-mine .chat-monitor-sender { color: #E7EEE8; }
.chat-monitor-msg-text { word-break: break-word; }
.chat-monitor-notes { margin: 0 18px 18px; }
.chat-monitor-note { padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.chat-monitor-note:last-of-type { border-bottom: none; }

.chat-date-separator { text-align: center; margin: 10px 0; }
.chat-date-separator span {
    background: var(--color-bg); color: var(--color-muted); font-size: 11px; font-weight: 600;
    padding: 3px 12px; border-radius: 999px;
}

.chat-order-link { font-weight: 700; text-decoration: underline; }
.chat-bubble-mine .chat-order-link { color: #fff; }

.chat-reveal-btn {
    display: inline-block; margin-top: 4px; background: rgba(0,0,0,0.06); border: none; border-radius: 6px;
    font-size: 10.5px; padding: 3px 8px; cursor: pointer; color: inherit;
}
.chat-bubble-mine .chat-reveal-btn { background: rgba(255,255,255,0.2); color: #fff; }

.chat-bubble-flagged { box-shadow: 0 0 0 2px var(--color-red) inset; }

@media (max-width: 900px) {
    .chat-monitor-layout { grid-template-columns: 1fr; }
    .chat-monitor-conv-list { max-height: 280px; }
}

/* -------------------- Code / long text wrapping -------------------- */
code, pre {
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-width: 100%;
    display: inline-block;
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}
pre { display: block; padding: 10px; }

/* ============================================================
   Responsive breakpoints
   ============================================================ */

/* Tablet and below: stack two-column layouts */
@media (max-width: 900px) {
    .grid-2 { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .order-form-grid { grid-template-columns: 1fr; }
    .filter-grid-2col { grid-template-columns: 1fr 1fr; }
}

/* Mobile: sidebar becomes a slide-in drawer, floating hamburger button appears */
@media (max-width: 768px) {
    .hamburger-btn { display: block; }
    .sidebar-collapse-btn { display: none; }
    .chat-fab { width: 48px; height: 48px; font-size: 22px; bottom: 16px; right: 16px; }
    .analytics-bar-row { grid-template-columns: 1fr; gap: 4px; }
    .analytics-bar-count { text-align: left; }

    .sidebar, .sidebar.collapsed {
        width: var(--sidebar-width);
        position: fixed;
        top: 0; left: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 12px rgba(0,0,0,0.2);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar.collapsed .nav-text { display: block; }
    .sidebar.collapsed .sidebar-nav a { justify-content: flex-start; padding: 10px 14px; }

    .main-content { padding: 64px 14px 18px; margin-left: 0; }
    body.sidebar-collapsed .main-content { margin-left: 0; }
    .content-inner { max-width: 100%; }

    .page-header { flex-direction: column; align-items: stretch; }
    .page-header .btn { width: 100%; text-align: center; }

    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-value { font-size: 18px; }

    .form-row { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr; }

    .card { padding: 16px; }

    .filter-grid, .search-bar, .assign-bar {
        flex-direction: column; align-items: stretch;
    }
    .filter-grid select, .filter-grid input, .search-bar select, .search-bar input,
    .assign-bar select { width: 100%; flex: none; }

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

    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; text-align: center; }

    .modal-box-lg { max-width: 100%; }

    .leaderboard-row { flex-direction: column; align-items: flex-start; text-align: left; }

    .chat-layout { grid-template-columns: 1fr; }
    .chat-contacts { max-height: 200px; }
    .chat-window { height: 480px; }
    .lb-stats { width: 100%; justify-content: space-between; }
}

@media (max-width: 420px) {
    .stat-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 28px 22px; }
}