/* ============================================================
   Hotel Euroasia — Inventory System
   "Eurasia Ledger" design system: deep teal + brass on warm ivory,
   Fraunces for headings, IBM Plex Mono for stock figures.
   Note: custom-property names below (--navy-*, --blue-*) are kept
   for backward compatibility with the rest of this file; their
   values now point at the teal/brass palette, not literal navy/blue.
   ============================================================ */

:root {
    /* Color */
    --navy-950: #0c2b27;
    --navy-800: #123a34;
    --navy-700: #1c4f47;
    --blue-600: #b4823a;
    --blue-500: #c99a56;
    --bg: #f8f4ea;
    --surface: #ffffff;
    --border: #e6ddc9;
    --text-primary: #26231d;
    --text-muted: #7d7361;
    --success: #3f8f5f;
    --success-bg: #e7f3ea;
    --danger: #b8483f;
    --danger-bg: #f8e9e6;
    --warning: #c9982f;
    --warning-bg: #f6eed7;

    --radius: 10px;
    --shadow-sm: 0 1px 3px rgba(20, 16, 8, 0.06);
    --shadow-md: 0 4px 14px rgba(20, 16, 8, 0.08);
    --shadow-lg: 0 8px 30px rgba(20, 16, 8, 0.12);

    /* Animation speeds */
    --anim-fast: 0.15s;
    --anim-med: 0.3s;
    --anim-slow: 0.5s;
    --anim-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
    background-color: var(--bg);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.925rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color var(--anim-med) ease, color var(--anim-med) ease;
}

/* The header keeps its natural height; the content row below
   fills whatever space is left — no more guessing the header's pixel
   height, which broke (large blank gap under short pages) whenever the
   header wrapped to two lines or rendered taller than expected. */
.app-header { flex-shrink: 0; }
body > .d-flex { flex: 1 1 auto; min-height: 0; }

h1, h2, h3, h4, h5, h6,
.app-brand-name, .stat-value, .brand-serif {
    font-family: 'Fraunces', 'Inter', system-ui, sans-serif;
}

/* Numbers get a mono face — reads like a ledger, not a generic table */
.num, .stat-value, td.num {
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
}

/* ---- App Header (two rows: brand/user, then section nav) ---- */
.app-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    transition: background-color var(--anim-med) ease, border-color var(--anim-med) ease;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-primary);
}
.app-brand-mark {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(180, 130, 58, 0.3);
}
.app-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.app-brand-name {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.header-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--anim-fast) ease;
}
.header-icon-btn:hover {
    background: var(--bg);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* ---- Notification bell ---- */
#notificationDropdown {
    position: relative;
    overflow: visible;
}
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    display: none;
}
.notif-badge.has-items {
    display: block;
    animation: bell-pulse 2s ease-in-out infinite;
}
@keyframes bell-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.notif-menu {
    width: 340px;
    max-width: 90vw;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.notif-menu-header {
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.notif-list {
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.notif-list::-webkit-scrollbar {
    width: 6px;
}
.notif-list::-webkit-scrollbar-track {
    background: transparent;
}
.notif-list::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 3px;
}
.notif-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted);
}
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
    animation: row-fade-in var(--anim-med) ease-out both;
}
.notif-item:last-child {
    border-bottom: none;
}
.notif-item-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.notif-item-icon.notif-in {
    background: var(--success-bg);
    color: var(--success);
}
.notif-item-icon.notif-out {
    background: var(--danger-bg);
    color: var(--danger);
}
.notif-item-text {
    flex: 1;
    min-width: 0;
}
.notif-item-message {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.35;
}
.notif-item-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.notif-empty {
    padding: 1.75rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.app-user-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    padding: 0.2rem 0.4rem;
    border-radius: 8px;
    transition: background-color var(--anim-fast) ease;
}
.app-user-block:hover { background: var(--bg); }
.app-user-text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.app-user-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.app-user-role {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--blue-600);
}
.app-user-caret { font-size: 0.7rem; color: var(--text-muted); }

.app-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all var(--anim-fast) ease;
}
.app-logout-btn:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
    transform: translateY(-1px);
}

.app-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1.5rem;
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    transition: background-color var(--anim-med) ease, border-color var(--anim-med) ease;
}

.app-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--anim-fast) ease;
}
.app-nav-pill i { font-size: 0.95rem; }
.app-nav-pill:hover {
    color: var(--text-primary);
    background: rgba(180, 130, 58, 0.08);
}
.app-nav-pill.active {
    background: var(--surface);
    color: var(--blue-600);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.app-nav-pill.active::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: -0.66rem;
    height: 2px;
    background: var(--blue-600);
    border-radius: 2px;
}

@media (max-width: 575.98px) {
    .app-header-top { padding: 0.75rem 1rem; }
    .app-header-nav { padding: 0.55rem 1rem; }
    .app-user-text { display: none; }
    .app-logout-btn span { display: none; }
}

/* ---- Layout ---- */
.main-content {
    flex-grow: 1;
    padding: 1.75rem;
    max-width: 100%;
    animation: fade-slide-up var(--anim-slow) var(--anim-bounce) both;
}

/* ---- Cards ---- */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--anim-med) ease, transform var(--anim-med) ease, background-color var(--anim-med) ease, border-color var(--anim-med) ease;
}
.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* ---- Stat cards (dashboard) ---- */
.stat-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--blue-600);
    transition: box-shadow var(--anim-med) ease, transform var(--anim-med) ease, background-color var(--anim-med) ease;
    animation: card-pop var(--anim-slow) var(--anim-bounce) both;
}
.stat-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px) scale(1.01);
}
.stat-card.stat-success { border-left-color: var(--success); }
.stat-card.stat-danger { border-left-color: var(--danger); }
.stat-card.stat-warning { border-left-color: var(--warning); }
.stat-card .stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
}
.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

/* Staggered delay for stat cards */
.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.10s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.20s; }

/* ---- Tables ---- */
.table { font-size: 0.9rem; margin-bottom: 0; }
.table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 2px solid var(--border);
    background: transparent;
    transition: color var(--anim-med) ease, border-color var(--anim-med) ease;
}
.table tbody tr {
    transition: background-color var(--anim-fast) ease, transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease;
    animation: row-fade-in var(--anim-med) ease-out both;
}
/* Stagger the first 12 rows; beyond that, no extra delay so long tables don't crawl in */
.table tbody tr:nth-child(1) { animation-delay: 0.02s; }
.table tbody tr:nth-child(2) { animation-delay: 0.05s; }
.table tbody tr:nth-child(3) { animation-delay: 0.08s; }
.table tbody tr:nth-child(4) { animation-delay: 0.11s; }
.table tbody tr:nth-child(5) { animation-delay: 0.14s; }
.table tbody tr:nth-child(6) { animation-delay: 0.17s; }
.table tbody tr:nth-child(7) { animation-delay: 0.20s; }
.table tbody tr:nth-child(8) { animation-delay: 0.23s; }
.table tbody tr:nth-child(9) { animation-delay: 0.26s; }
.table tbody tr:nth-child(10) { animation-delay: 0.29s; }
.table tbody tr:nth-child(11) { animation-delay: 0.32s; }
.table tbody tr:nth-child(12) { animation-delay: 0.35s; }
@keyframes row-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.table-hover tbody tr:hover {
    background-color: rgba(180, 130, 58, 0.05);
    transform: scale(1.002);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.table td, .table th {
    vertical-align: middle;
    padding: 0.75rem 0.85rem;
}

/* ---- Badges ---- */
.badge {
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.4em 0.65em;
    letter-spacing: 0.02em;
    transition: transform var(--anim-fast) ease, background-color var(--anim-fast) ease;
}
.badge:hover {
    transform: scale(1.05);
}
.badge.bg-success { background-color: var(--success) !important; }
.badge.bg-danger { background-color: var(--danger) !important; }
.badge.bg-warning { background-color: var(--warning) !important; color: #402d00 !important; }

/* ---- Buttons ---- */
.btn {
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 7px;
    transition: all var(--anim-fast) ease;
    position: relative;
    overflow: hidden;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn:active {
    transform: translateY(0);
}
.btn-primary {
    background-color: var(--blue-600);
    border-color: var(--blue-600);
}
.btn-primary:hover {
    background-color: var(--navy-700);
    border-color: var(--navy-700);
}
.btn-outline-primary {
    color: var(--blue-600);
    border-color: var(--blue-600);
}
.btn-outline-primary:hover {
    background-color: var(--blue-600);
    border-color: var(--blue-600);
}

/* Global button ripple — click feedback shared by every .btn in the app */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: btn-ripple-anim 0.55s ease-out;
    pointer-events: none;
}
@keyframes btn-ripple-anim {
    to { transform: scale(3.2); opacity: 0; }
}
/* Buttons that carry a badge positioned outside their own box (e.g. the
   notification bell's unread count, top-right corner via translate-middle)
   need overflow visible so the ripple's clipping doesn't cut the badge off. */
#notificationDropdown {
    overflow: visible;
}
.btn-outline-primary .btn-ripple,
.btn-outline-secondary .btn-ripple,
.btn-outline-danger .btn-ripple,
.btn-outline-success .btn-ripple,
.btn-outline-warning .btn-ripple {
    background: rgba(180, 130, 58, 0.25);
}

/* ---- Sidebar hover glide pill ---- */
/* ---- Focus states (accessibility) ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, .nav-link:focus-visible {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 0.2rem rgba(79, 143, 209, 0.2);
    transition: border-color var(--anim-fast) ease, box-shadow var(--anim-fast) ease;
}

/* ---- Chart container (fixed height stops Chart.js resize-growth bug) ---- */
.chart-wrap {
    position: relative;
    height: 260px;
    width: 100%;
}

/* ---- Welcome splash (shown once, right after login) ---- */
.welcome-splash {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: radial-gradient(circle at 50% 45%, #1a2c47 0%, var(--navy-950) 65%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: splash-fade-in 0.4s ease-out;
}
.welcome-splash.welcome-splash-fade {
    animation: splash-fade-out 0.65s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Bright flash the instant the splash appears — the "curtain up" beat */
.welcome-splash-flash {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
    animation: splash-flash-out 0.7s ease-out forwards;
}

/* Slow-rotating light rays behind everything — the cinematic "spotlight" beat */
.welcome-splash-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1400px;
    height: 1400px;
    margin: -700px 0 0 -700px;
    background: conic-gradient(
        from 0deg,
        rgba(79, 143, 209, 0) 0deg,
        rgba(79, 143, 209, 0.12) 8deg,
        rgba(79, 143, 209, 0) 20deg,
        rgba(79, 143, 209, 0) 100deg,
        rgba(79, 143, 209, 0.1) 108deg,
        rgba(79, 143, 209, 0) 120deg,
        rgba(79, 143, 209, 0) 200deg,
        rgba(79, 143, 209, 0.12) 208deg,
        rgba(79, 143, 209, 0) 220deg,
        rgba(79, 143, 209, 0) 300deg,
        rgba(79, 143, 209, 0.1) 308deg,
        rgba(79, 143, 209, 0) 320deg,
        rgba(79, 143, 209, 0) 360deg
    );
    animation: splash-rays-spin 12s linear infinite;
    opacity: 0.8;
}

/* Ambient breathing glow behind the text */
.welcome-splash::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 143, 209, 0.35) 0%, rgba(79, 143, 209, 0) 70%);
    animation: splash-glow-pulse 2.4s ease-in-out infinite;
}

/* Twinkling ambient particle field (pure CSS, no extra markup) */
.welcome-splash::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 82% 20%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 25% 75%, rgba(255,255,255,0.35), transparent),
        radial-gradient(2px 2px at 70% 80%, rgba(255,255,255,0.45), transparent),
        radial-gradient(1.5px 1.5px at 90% 60%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1.5px 1.5px at 8% 55%, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 55% 12%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 40% 88%, rgba(255,255,255,0.3), transparent);
    animation: splash-twinkle 3s ease-in-out infinite;
}

.welcome-splash-text { position: relative; z-index: 1; text-align: center; }

.welcome-splash-icon {
    font-size: 2.6rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.6rem;
    text-shadow: 0 0 24px rgba(79, 143, 209, 0.6);
    animation: splash-icon-in 0.6s var(--anim-bounce) both;
}
.welcome-splash-greeting {
    font-family: 'Fraunces', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.14em;
    animation: splash-rise 0.6s ease-out 0.15s both;
}
.welcome-splash-name {
    position: relative;
    display: inline-block;
    font-family: 'Fraunces', 'Inter', system-ui, sans-serif;
    font-size: clamp(2.6rem, 9vw, 5rem);
    font-weight: 700;
    line-height: 1.15;
    background: linear-gradient(100deg, #fff 40%, var(--blue-500) 50%, #fff 60%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    filter: drop-shadow(0 0 32px rgba(79, 143, 209, 0.45));
    animation:
        splash-name-in 0.7s var(--anim-bounce) 0.3s both,
        splash-shimmer 1.6s ease-in-out 0.95s;
}
/* Underline that draws in beneath the name once it has landed */
.welcome-splash-name::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, transparent, var(--blue-500), transparent);
    animation: splash-underline 0.7s ease-out 0.85s forwards;
}
.welcome-splash-sparkle {
    position: absolute;
    font-size: 1.1rem;
    color: var(--blue-500);
    opacity: 0;
    animation: splash-sparkle-in 0.5s ease-out both, splash-twinkle 1.8s ease-in-out infinite;
}
.welcome-splash-sparkle-1 {
    top: -0.6rem;
    right: -1.1rem;
    animation-delay: 1.05s, 1.55s;
}
.welcome-splash-sparkle-2 {
    bottom: -0.3rem;
    left: -1.1rem;
    font-size: 0.85rem;
    animation-delay: 1.2s, 1.7s;
}
.welcome-splash-subtitle {
    margin-top: 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    animation: splash-rise 0.6s ease-out 1.15s both;
}

@keyframes splash-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes splash-fade-out {
    from { opacity: 1; transform: scale(1); filter: blur(0); }
    to { opacity: 0; transform: scale(1.06); filter: blur(6px); }
}
@keyframes splash-flash-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes splash-rays-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes splash-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes splash-icon-in {
    from { opacity: 0; transform: translateY(10px) scale(0.5) rotate(-15deg); }
    to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes splash-name-in {
    from { opacity: 0; transform: translateY(18px) scale(0.82); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes splash-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -60% 0; }
}
@keyframes splash-underline {
    from { width: 0; left: 50%; }
    to { width: 70%; left: 15%; }
}
@keyframes splash-sparkle-in {
    from { opacity: 0; transform: scale(0.3) rotate(-20deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes splash-glow-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes splash-twinkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .welcome-splash { display: none !important; }
}

/* ---- Dashboard greeting entrance ---- */
.dashboard-greeting {
    animation: greeting-in 0.4s ease-out;
}
/* When the full-screen welcome splash is shown, delay this so it picks up
   right as the splash fades out (1.5s hold + 0.65s fade), instead of finishing
   its animation underneath the splash before anyone can see it. */
.dashboard-greeting-delayed {
    animation: greeting-in 0.5s ease-out 2.15s both;
}
@keyframes greeting-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Empty states ---- */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
}
.empty-state i {
    font-size: 2.25rem;
    color: var(--border);
    display: block;
    margin-bottom: 0.75rem;
    transition: transform var(--anim-med) ease, color var(--anim-med) ease;
}
.empty-state:hover i {
    transform: scale(1.1) rotate(-3deg);
    color: var(--blue-500);
}
.empty-state p { margin-bottom: 0.75rem; font-size: 0.9rem; }

/* ---- Login page ---- */
.login-page { background-color: var(--navy-950); }
.login-page .card {
    border: none;
    border-top: 4px solid var(--blue-600);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

/* ---- Pagination ---- */
.pagination .page-link {
    color: var(--text-primary);
    border-color: var(--border);
    font-size: 0.85rem;
    transition: all var(--anim-fast) ease;
}
.pagination .page-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.pagination .page-item.active .page-link {
    background-color: var(--blue-600);
    border-color: var(--blue-600);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---- Target Cursor (adapted from React Bits) ----
   Corner brackets lock onto hovered/focused interactive elements.
   Native cursor is untouched — this is a hover accent, not a cursor replacement. */
.target-cursor-frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 2000;
    opacity: 0;
    transition: top 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                left 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.15s ease;
}
.target-cursor-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--blue-600);
}
.target-cursor-tl { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 3px 0 0 0; }
.target-cursor-tr { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 3px 0 0; }
.target-cursor-bl { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 3px; }
.target-cursor-br { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 3px 0; }

@media (prefers-reduced-motion: reduce) {
    .target-cursor-frame { display: none !important; }
}

/* ---- Toast notifications ---- */
.toast-stack {
    position: fixed;
    top: 76px;
    right: 16px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.toast-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 36px 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-muted);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color var(--anim-med) ease, border-color var(--anim-med) ease;
}

.toast-item.toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.toast-item.toast-leaving {
    opacity: 0;
    transform: translateX(24px);
}

.toast-item.toast-success { border-left-color: var(--success); }
.toast-item.toast-danger { border-left-color: var(--danger); }
.toast-item.toast-warning { border-left-color: var(--warning); }
.toast-item.toast-info { border-left-color: var(--blue-600); }

.toast-icon {
    margin-top: 2px;
    font-size: 1rem;
    flex-shrink: 0;
}

.toast-item.toast-success .toast-icon { color: var(--success); }
.toast-item.toast-danger .toast-icon { color: var(--danger); }
.toast-item.toast-warning .toast-icon { color: var(--warning); }
.toast-item.toast-info .toast-icon { color: var(--blue-600); }

.toast-text {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-primary);
    flex: 1;
}

.toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, transform var(--anim-fast) ease;
}
.toast-close:hover {
    background-color: var(--bg);
    color: var(--text-primary);
    transform: rotate(90deg);
}
.toast-close:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }

.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    opacity: 0.25;
    transform-origin: left;
    transform: scaleX(1);
}

.toast-item.toast-success .toast-progress { color: var(--success); }
.toast-item.toast-danger .toast-progress { color: var(--danger); }
.toast-item.toast-warning .toast-progress { color: var(--warning); }
.toast-item.toast-info .toast-progress { color: var(--blue-600); }

.toast-progress.toast-progress-running {
    animation-name: toast-shrink;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes toast-shrink {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .toast-item { transition: opacity 0.01ms; }
}

@media (max-width: 575.98px) {
    .toast-stack { top: auto; bottom: 16px; right: 12px; left: 12px; width: auto; }
}

/* ============================================================
   Dark Mode – Complete Overrides
   ============================================================ */

body.dark-theme {
    --bg: #171f1d;
    --surface: #1f2b28;
    --border: #33443f;
    --text-primary: #ece6d8;
    --text-muted: #a3ab9f;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
    --success-bg: #1e3428;
    --danger-bg: #3a231e;
    --warning-bg: #372c14;
    --navy-950: #0a1a17;
    --navy-800: #102420;
    --navy-700: #17332d;
    --blue-600: #b4823a;
    --blue-500: #c99a56;
    --success: #3f8f5f;
    --danger: #b8483f;
    --warning: #c9982f;
}

/* Cards & Stat Cards */
body.dark-theme .card,
body.dark-theme .stat-card {
    background-color: var(--surface);
    border-color: var(--border);
}

body.dark-theme .stat-card .stat-label {
    color: #a3ab9f !important;
    opacity: 1 !important;
}

body.dark-theme .stat-card .stat-value {
    color: #ece6d8 !important;
}

body.dark-theme .stat-card i {
    opacity: 0.6;
}

body.dark-theme .stat-card .text-body-tertiary {
    color: #a3ab9f !important;
}

/* Dashboard Greeting */
body.dark-theme .dashboard-greeting h4,
body.dark-theme .dashboard-greeting .fw-bold {
    color: #ece6d8 !important;
}

body.dark-theme .dashboard-greeting p,
body.dark-theme .dashboard-greeting .text-muted {
    color: #a3ab9f !important;
}

/* Quick Action Buttons */
body.dark-theme .btn-outline-primary {
    color: #d9b06c !important;
    border-color: #6b5a35 !important;
}

body.dark-theme .btn-outline-primary:hover {
    background-color: #b4823a !important;
    color: #ffffff !important;
}

body.dark-theme .btn-outline-danger {
    color: #e08a7f !important;
    border-color: #6a3a3a !important;
}

body.dark-theme .btn-outline-danger:hover {
    background-color: #b8483f !important;
    color: #ffffff !important;
}

body.dark-theme .btn-outline-warning {
    color: #c9982f !important;
    border-color: #6a5a2a !important;
}

body.dark-theme .btn-outline-warning:hover {
    background-color: #c9982f !important;
    color: #1a1a1a !important;
}

/* Tables */
body.dark-theme .table {
    color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: #3a4b46;
    border-color: #3a4b46;
}

body.dark-theme .table thead th {
    background-color: #26332f;
    color: #ece6d8 !important;
    border-bottom-color: #3a4b46 !important;
    border-color: #3a4b46 !important;
}

body.dark-theme .table td,
body.dark-theme .table th {
    border-color: #3a4b46 !important;
}

body.dark-theme .table-bordered > :not(caption) > * > * {
    border-color: #3a4b46 !important;
}

body.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.03);
}

body.dark-theme .table tbody tr {
    border-bottom-color: #3a4b46;
}

body.dark-theme .table tbody tr:hover {
    background-color: rgba(180, 130, 58, 0.12);
}

body.dark-theme .table td {
    color: #ece6d8 !important;
}

body.dark-theme .table .text-muted {
    color: #a3ab9f !important;
}

/* Table links */
body.dark-theme .table a:not(.btn) {
    color: #d9b06c !important;
}

body.dark-theme .table a:not(.btn):hover {
    color: #8bb8e8 !important;
}

/* Table warning states */
body.dark-theme .table-warning {
    --bs-table-bg: #423318;
    --bs-table-color: #f3e3bd;
    --bs-table-border-color: #5a4620;
}

body.dark-theme .table-danger {
    --bs-table-bg: #452821;
    --bs-table-color: #f0c9c2;
    --bs-table-border-color: #5c332a;
}

body.dark-theme .table-success {
    --bs-table-bg: #1f3b2c;
    --bs-table-color: #c3ecd4;
    --bs-table-border-color: #2a4d3a;
}

/* Badges */
body.dark-theme .badge.bg-light {
    background-color: #33443f !important;
    color: #ece6d8 !important;
    border-color: #4a5569;
}

body.dark-theme .badge.bg-secondary {
    background-color: #4a5569 !important;
}

body.dark-theme .badge.bg-success {
    background-color: #3f8f5f !important;
    color: #ffffff !important;
}

body.dark-theme .badge.bg-danger {
    background-color: #b8483f !important;
    color: #ffffff !important;
}

body.dark-theme .badge.bg-warning {
    background-color: #c9982f !important;
    color: #1a1a1a !important;
}

body.dark-theme .badge.bg-info {
    background-color: #b4823a !important;
    color: #ffffff !important;
}

body.dark-theme .badge.bg-primary {
    background-color: #b4823a !important;
    color: #ffffff !important;
}

/* Text colors */
body.dark-theme .text-body-tertiary {
    color: #a3ab9f !important;
}

body.dark-theme .text-muted {
    color: var(--text-muted) !important;
}

body.dark-theme .text-success {
    color: var(--success) !important;
}

body.dark-theme .text-danger {
    color: var(--danger) !important;
}

body.dark-theme .text-warning {
    color: var(--warning) !important;
}

/* Stat Card Icons */
body.dark-theme .stat-card .bi {
    color: #a3ab9f !important;
}

body.dark-theme .stat-card .text-success {
    color: #4CAF50 !important;
}

body.dark-theme .stat-card .text-danger {
    color: #e08a7f !important;
}

body.dark-theme .stat-card .text-warning {
    color: #c9982f !important;
}

/* Form controls */
body.dark-theme .form-control,
body.dark-theme .form-select {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text-primary);
}

body.dark-theme .form-control:focus,
body.dark-theme .form-select:focus {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 0.2rem rgba(79, 143, 209, 0.3);
}

body.dark-theme .form-control::placeholder {
    color: var(--text-muted);
}

body.dark-theme .form-select option {
    background-color: #1f2b28 !important;
    color: #ece6d8 !important;
}

body.dark-theme .form-select optgroup {
    background-color: #171f1d !important;
    color: #ece6d8 !important;
}

/* Buttons */
body.dark-theme .btn-outline-secondary {
    color: var(--text-muted);
    border-color: var(--border);
}

body.dark-theme .btn-outline-secondary:hover {
    background-color: var(--border);
    color: var(--text-primary);
}

body.dark-theme .btn-secondary {
    background-color: #4a5569;
    border-color: #4a5569;
    color: #fff;
}

body.dark-theme .btn-secondary:hover {
    background-color: #5a6a7e;
    border-color: #5a6a7e;
}

body.dark-theme .btn-primary {
    background-color: #b4823a;
    border-color: #b4823a;
    color: #fff;
}

body.dark-theme .btn-primary:hover {
    background-color: #8a6526;
    border-color: #8a6526;
}

/* Empty states */
body.dark-theme .empty-state {
    color: var(--text-muted);
}

body.dark-theme .empty-state i {
    color: var(--border);
}

body.dark-theme .empty-state p {
    color: var(--text-muted);
}

/* Pagination */
body.dark-theme .pagination .page-link {
    color: #a3ab9f !important;
    background-color: #1f2b28 !important;
    border-color: #33443f !important;
}

body.dark-theme .pagination .page-link:hover {
    background-color: #33443f !important;
    color: #ece6d8 !important;
}

body.dark-theme .pagination .page-item.active .page-link {
    background-color: #b4823a !important;
    border-color: #b4823a !important;
    color: #ffffff !important;
}

body.dark-theme .pagination .page-item.disabled .page-link {
    color: #5a6a7e !important;
    background-color: #171f1d !important;
    border-color: #2a3347 !important;
}

/* Charts */
body.dark-theme .chart-wrap canvas {
    filter: brightness(0.9);
}

/* Alerts */
body.dark-theme .alert-info {
    background-color: rgba(180, 130, 58, 0.15) !important;
    border-color: rgba(180, 130, 58, 0.25) !important;
    color: #8bb8e8 !important;
}

body.dark-theme .alert-success {
    background-color: rgba(47, 158, 100, 0.15) !important;
    border-color: rgba(47, 158, 100, 0.25) !important;
    color: #7ddaa0 !important;
}

body.dark-theme .alert-danger {
    background-color: rgba(217, 83, 79, 0.15) !important;
    border-color: rgba(217, 83, 79, 0.25) !important;
    color: #e08a7f !important;
}

body.dark-theme .alert-warning {
    background-color: rgba(217, 164, 65, 0.15) !important;
    border-color: rgba(217, 164, 65, 0.25) !important;
    color: #f0d47a !important;
}

body.dark-theme .alert .btn-close {
    filter: brightness(0) invert(1);
}

/* Dropdown menus */
body.dark-theme .dropdown-menu {
    background-color: var(--surface);
    border-color: var(--border);
}

body.dark-theme .dropdown-item {
    color: var(--text-primary);
}

body.dark-theme .dropdown-item:hover {
    background-color: var(--bg);
    color: var(--text-primary);
}

body.dark-theme .dropdown-item.text-muted {
    color: var(--text-muted) !important;
}

body.dark-theme .dropdown-divider {
    border-color: var(--border);
}

/* Modals */
body.dark-theme .modal-content {
    background-color: var(--surface);
    border-color: var(--border);
}

body.dark-theme .modal-header {
    border-bottom-color: var(--border);
}

body.dark-theme .modal-footer {
    border-top-color: var(--border);
}

body.dark-theme .modal-title {
    color: var(--text-primary);
}

body.dark-theme .modal-body {
    color: #ece6d8 !important;
}

body.dark-theme .modal-body .text-muted {
    color: #a3ab9f !important;
}

/* Sidebar user info (dark mode already handled inline) */
body.dark-theme .login-card {
    background: rgba(20, 30, 50, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .login-card .form-control {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-theme .login-card .form-control:focus {
    background: rgba(255, 255, 255, 0.08);
}

/* Toast notifications */
body.dark-theme .toast-item {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-theme .toast-text {
    color: var(--text-primary);
}

body.dark-theme .toast-close {
    color: var(--text-muted);
}

body.dark-theme .toast-close:hover {
    background-color: var(--bg);
    color: var(--text-primary);
}

/* Notification dropdown */
body.dark-theme .dropdown-item.bg-light {
    background-color: rgba(180, 130, 58, 0.15) !important;
}

body.dark-theme .dropdown-item.fw-bold {
    color: var(--text-primary);
}

/* Icons */
body.dark-theme .bi {
    color: inherit;
}

body.dark-theme .text-body-tertiary {
    color: var(--text-muted) !important;
}

/* Misc */
body.dark-theme hr {
    border-color: var(--border);
}

body.dark-theme .border-bottom {
    border-bottom-color: var(--border) !important;
}

body.dark-theme .border-top {
    border-top-color: var(--border) !important;
}

body.dark-theme .shadow-sm {
    box-shadow: var(--shadow-sm);
}

body.dark-theme .shadow-md {
    box-shadow: var(--shadow-md);
}

/* Small helper - force any card-like elements */
body.dark-theme [class*="card"] {
    background-color: var(--surface);
    border-color: var(--border);
}

/* Staff / User dropdown in sidebar */
body.dark-theme .quick-filter .btn {
    color: #a3ab9f !important;
}

body.dark-theme .quick-filter .btn-outline-success {
    color: var(--success);
    border-color: var(--success);
}

body.dark-theme .quick-filter .btn-outline-success:hover {
    background-color: var(--success);
    color: #fff;
}

body.dark-theme .quick-filter .btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}

body.dark-theme .quick-filter .btn-outline-danger:hover {
    background-color: var(--danger);
    color: #fff;
}

body.dark-theme .quick-filter .btn-outline-warning {
    color: var(--warning);
    border-color: var(--warning);
}

body.dark-theme .quick-filter .btn-outline-warning:hover {
    background-color: var(--warning);
    color: #402d00;
}

body.dark-theme .quick-filter .btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: #fff;
}

body.dark-theme .quick-filter .btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

body.dark-theme .quick-filter .btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: #402d00;
}

/* Card Headers */
body.dark-theme .card h6,
body.dark-theme .card .fw-bold {
    color: #ece6d8 !important;
}

body.dark-theme .card .text-muted {
    color: #a3ab9f !important;
}

/* Force all headings in dark mode */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6,
body.dark-theme .h1,
body.dark-theme .h2,
body.dark-theme .h3,
body.dark-theme .h4,
body.dark-theme .h5,
body.dark-theme .h6 {
    color: #ece6d8 !important;
}

/* Main content text */
body.dark-theme .main-content {
    color: #ece6d8 !important;
}

/* Links in dark mode */
body.dark-theme a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #d9b06c !important;
}

body.dark-theme a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: #8bb8e8 !important;
}

/* ============================================================
   Login Page Enhancements
   ============================================================ */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy-950);
    background-image:
        radial-gradient(circle at 12% 8%, rgba(201, 154, 86, 0.05), transparent 42%),
        radial-gradient(circle at 88% 92%, rgba(201, 154, 86, 0.04), transparent 45%);
    position: relative;
    overflow: hidden;
}

/* Faint diagonal hairline grid — quiet texture instead of floating blobs */
.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201, 154, 86, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 154, 86, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
}

/* Slow ambient glow breathing behind the card — the one place this
   page spends its "signature" motion budget. */
.login-page::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 560px;
    height: 560px;
    margin: -280px 0 0 -280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 154, 86, 0.1) 0%, rgba(201, 154, 86, 0) 70%);
    animation: splash-glow-pulse 4s ease-in-out infinite;
    pointer-events: none;
}

/* Login card */
.login-card {
    background: var(--navy-800);
    border: 1px solid rgba(201, 154, 86, 0.16);
    border-radius: 14px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
    animation: card-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* Brass ledger seam across the top — same accent language as the
   app header, so login doesn't feel like a different product. */
.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--blue-500) 20%, var(--blue-600) 50%, var(--blue-500) 80%, transparent);
}

.login-card .brand-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
    color: #fff;
    box-shadow: 0 8px 24px rgba(180, 130, 58, 0.3);
    position: relative;
}
.login-card .brand-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 20px;
    border: 1px solid rgba(201, 154, 86, 0.35);
    animation: brand-icon-pulse 2.6s ease-in-out infinite;
}
@keyframes brand-icon-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.08); opacity: 0; }
}

.login-card .brand-name {
    font-family: 'Fraunces', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    text-align: center;
    margin-bottom: 0.25rem;
}

.login-card .brand-eyebrow {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue-500);
    margin-bottom: 0.35rem;
}

.login-card .brand-sub {
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

.login-card .brand-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(201, 154, 86, 0.4);
    font-size: 0.6rem;
    margin-bottom: 1.5rem;
}
.login-card .brand-divider::before,
.login-card .brand-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.login-card .form-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.login-card .form-control {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    color: #fff;
    transition: all var(--anim-med) ease;
}
.login-card .form-control:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--blue-500);
    box-shadow: 0 0 0 4px rgba(79, 143, 209, 0.15);
    color: #fff;
}
.login-card .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
/* Autofill styles */
.login-card .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px rgba(20, 30, 50, 0.9) inset !important;
    -webkit-text-fill-color: #fff !important;
}

.login-card .input-group-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.3);
    z-index: 5;
    pointer-events: none;
}
.login-card .form-control-with-icon {
    padding-left: 42px;
}

.login-card .btn-login {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
    border: none;
    border-radius: 12px;
    padding: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    width: 100%;
    transition: all var(--anim-med) ease;
    position: relative;
    overflow: hidden;
}
.login-card .btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(180, 130, 58, 0.4);
}
.login-card .btn-login:active {
    transform: translateY(0);
}
.login-card .btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Ripple effect */
.login-card .btn-login .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple-anim 0.6s ease-out;
    pointer-events: none;
}
@keyframes ripple-anim {
    to { transform: scale(4); opacity: 0; }
}

.login-card .form-check-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}
.login-card .form-check-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}
.login-card .form-check-input:checked {
    background-color: var(--blue-600);
    border-color: var(--blue-600);
}

.login-card .alert {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 12px;
    color: #f8d7da;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    animation: shake 0.5s ease;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Dark mode adjustments */
body.dark-theme .login-card {
    background: rgba(20, 30, 50, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-theme .login-card .form-control {
    background: rgba(255, 255, 255, 0.05);
}
body.dark-theme .login-card .form-control:focus {
    background: rgba(255, 255, 255, 0.08);
}

/* Responsive */
@media (max-width: 480px) {
    .login-card {
        padding: 1.75rem 1.25rem;
        margin: 1rem;
        border-radius: 16px;
    }
    .login-card .brand-name {
        font-size: 1.25rem;
    }
    .login-card .brand-icon {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .login-page::before,
    .login-page::after {
        animation: none;
    }
    .login-card {
        animation: none;
    }
    .login-card .brand-icon::after {
        animation: none;
        display: none;
    }
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
    }
}

/* ============================================================
   Login Page — Split Layout (photo/brand left, sign-in right)
   ============================================================ */

.login-page-split {
    min-height: 100vh;
    display: block;
    padding: 0;
    background: var(--navy-950);
}
/* Turn off the centered-card ambience from the block above */
.login-page-split::before,
.login-page-split::after { display: none; }

.split-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Left panel */
.split-brand-panel {
    flex: 1 1 58%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.75rem 3.25rem;
    color: #fff;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(8, 28, 26, 0.82) 0%, rgba(8, 28, 26, 0.72) 45%, rgba(12, 40, 36, 0.85) 100%),
        radial-gradient(circle at 85% 15%, rgba(201, 154, 86, 0.14), transparent 45%),
        url('../img/lobby.jpg') center center / cover no-repeat;
}
.split-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 28, 26, 0.15) 0%, rgba(8, 28, 26, 0.05) 30%, rgba(8, 28, 26, 0.55) 100%);
    pointer-events: none;
}

.split-brand-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    position: relative;
    z-index: 1;
}
.split-logo-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.split-logo-name {
    font-family: 'Fraunces', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    line-height: 1.15;
}
.split-logo-sub {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-500);
}

.split-brand-mid {
    position: relative;
    z-index: 1;
    max-width: 480px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.split-eyebrow {
    font-family: 'Fraunces', sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--blue-500);
    margin-bottom: 0.25rem;
}
.split-title {
    font-family: 'Fraunces', sans-serif;
    font-weight: 700;
    font-size: 3.25rem;
    line-height: 1.05;
    color: #fff;
}
.split-title-underline {
    width: 130px;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-500), transparent);
    margin: 1.1rem 0 1.35rem;
}
.split-tagline {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0;
}

.split-brand-bottom {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
}
.split-location {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.split-location i { color: var(--blue-500); margin-right: 0.3rem; }
.split-clock {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.split-clock-dot { color: var(--blue-500); }
.split-clock #splitClockDate {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}
.split-copyright {
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.72rem;
}

/* Right panel */
.split-form-panel {
    flex: 1 1 42%;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
}
.split-form-inner {
    width: 100%;
    max-width: 380px;
    animation: card-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.split-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 1rem;
    transition: color 0.15s ease;
}
.split-back-link i { font-size: 0.85rem; }
.split-back-link:hover { color: var(--blue-500); }

.split-form-heading h1 {
    font-family: 'Fraunces', sans-serif;
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}
.split-form-heading p {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-bottom: 0;
}
.split-form-accent {
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--blue-600), var(--blue-500));
    margin: 0.9rem 0 1.6rem;
}

.split-form-panel .form-label {
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.split-form-panel .form-control {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    color: var(--text-primary);
}
.split-form-panel .form-control:focus {
    background: var(--surface);
    border-color: var(--blue-500);
    box-shadow: 0 0 0 4px rgba(180, 130, 58, 0.12);
}
.split-form-panel .form-control::placeholder { color: var(--text-muted); }
.split-form-panel .input-group-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    z-index: 5;
    pointer-events: none;
}
.split-form-panel .form-control-with-icon { padding-left: 42px; }
.split-pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0;
    line-height: 1;
    z-index: 5;
}
.split-pw-toggle:hover { color: var(--text-primary); }

.split-form-panel .form-check-label {
    color: var(--text-primary);
    font-size: 0.85rem;
}
.split-form-panel .form-check-input:checked {
    background-color: var(--blue-600);
    border-color: var(--blue-600);
}
.split-forgot-link {
    color: var(--blue-600) !important;
    font-size: 0.82rem;
}
.split-forgot-link:hover { color: var(--blue-500) !important; }

.split-form-panel .btn-login {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
    border: none;
    border-radius: 10px;
    padding: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    width: 100%;
    transition: all var(--anim-med) ease;
    position: relative;
    overflow: hidden;
}
.split-form-panel .btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(180, 130, 58, 0.35);
}
.split-form-panel .btn-login:active { transform: translateY(0); }
.split-form-panel .btn-login:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }
.split-form-panel .btn-login .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple-anim 0.6s ease-out;
    pointer-events: none;
}

.split-form-panel .alert {
    border-radius: 10px;
    font-size: 0.85rem;
    padding: 0.7rem 1rem;
    animation: shake 0.5s ease;
}

/* ---- Property picker (default.php) — same lobby/ledger language as the
   login split panel, so choosing a property flows straight into signing
   in rather than looking like a separate app. ---- */
.picker-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}
.picker-hero {
    position: relative;
    padding: 3.5rem 1.5rem 5rem;
    color: #fff;
    text-align: center;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(8, 28, 26, 0.85) 0%, rgba(8, 28, 26, 0.74) 45%, rgba(12, 40, 36, 0.88) 100%),
        radial-gradient(circle at 85% 15%, rgba(201, 154, 86, 0.14), transparent 45%),
        url('../img/lobby.jpg') center center / cover no-repeat;
}
.picker-hero-inner { position: relative; z-index: 1; }
.picker-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.25rem;
}
.picker-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue-500);
    margin-bottom: 0.6rem;
}
.picker-title {
    font-family: 'Fraunces', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 2.9rem);
    color: #fff;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.picker-subtitle {
    font-family: 'Fraunces', sans-serif;
    font-style: italic;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.78);
}

.picker-grid-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 1.5rem;
}
.picker-grid {
    width: 100%;
    max-width: 980px;
    margin-top: -3.25rem;
    padding-bottom: 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    position: relative;
    z-index: 2;
}
.picker-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    overflow: hidden;
    transition: transform var(--anim-med) var(--anim-bounce), box-shadow var(--anim-med) ease, border-color var(--anim-med) ease;
}
.picker-card:hover,
.picker-card:focus-visible {
    transform: translateY(-6px);
    border-color: var(--blue-500);
    box-shadow: 0 16px 34px rgba(20, 16, 8, 0.16);
    outline: none;
}
.picker-medallion {
    width: 112px;
    height: 112px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
    color: #fff;
    font-family: 'Fraunces', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    box-shadow: 0 4px 12px rgba(180, 130, 58, 0.3);
}
.picker-medallion.has-logo {
    background: #fff;
    padding: 6px;
    border: 1px solid var(--border);
}
.picker-medallion.has-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}
.picker-code {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--blue-600);
    margin-bottom: 0.35rem;
}
.picker-name {
    font-family: 'Fraunces', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}
.picker-city {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}
.picker-photo {
    margin-top: auto;
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--radius) - 2px);
    background: var(--bg);
    border: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    overflow: hidden;
}
.picker-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.picker-photo i {
    font-size: 1.6rem;
    opacity: 0.55;
}
.picker-enter {
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--blue-500);
}
.picker-enter i {
    display: inline-block;
    transition: transform var(--anim-med) ease;
}
.picker-card:hover .picker-enter i,
.picker-card:focus-visible .picker-enter i {
    transform: translateX(4px);
}
.picker-footer {
    text-align: center;
    padding: 0 1.5rem 2rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .split-shell { flex-direction: column; }
    .split-brand-panel {
        flex: none;
        padding: 2rem 1.5rem;
        min-height: 300px;
    }
    .split-title { font-size: 2.25rem; }
    .split-brand-mid { margin: 1.5rem 0; }
    .split-form-panel { flex: none; padding: 2rem 1.5rem 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .split-form-inner { animation: none; }
}

/* ============================================================
   User Management Forms
   ============================================================ */

/* Card for user forms (register, edit) */
.user-form-card {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
    transition: background-color var(--anim-med) ease, border-color var(--anim-med) ease;
}

.user-form-card .form-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.user-form-card .form-header i {
    font-size: 1.5rem;
    color: var(--blue-600);
}
.user-form-card .form-header h5 {
    margin: 0;
    font-weight: 700;
}

.user-form-card .form-control {
    border-radius: 10px;
    padding: 0.65rem 1rem;
    border-color: var(--border);
    transition: border-color var(--anim-fast) ease, box-shadow var(--anim-fast) ease;
}
.user-form-card .form-control:focus {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(79, 143, 209, 0.15);
}
.user-form-card .form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.user-form-card .btn-primary {
    border-radius: 10px;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
}

.user-form-card .input-group-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    z-index: 5;
    pointer-events: none;
}
.user-form-card .form-control-with-icon {
    padding-left: 42px;
}

/* Dark mode adjustments */
body.dark-theme .user-form-card {
    background: var(--surface);
    border-color: var(--border);
}
body.dark-theme .user-form-card .form-control {
    background: var(--bg);
    color: var(--text-primary);
}
body.dark-theme .user-form-card .form-control:focus {
    background: var(--bg);
}

/* ============================================================
   Register / Create User Page
   ============================================================ */

/* Page background with gradient */
.register-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0c2b27 0%, #17332d 50%, #1c4f47 100%);
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
}

/* Animated background shapes */
.register-page::before,
.register-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    animation: register-float 25s ease-in-out infinite;
}
.register-page::before {
    width: 500px;
    height: 500px;
    background: var(--blue-600);
    top: -150px;
    right: -100px;
    animation-delay: 0s;
}
.register-page::after {
    width: 350px;
    height: 350px;
    background: var(--blue-500);
    bottom: -80px;
    left: -80px;
    animation-delay: -8s;
}

@keyframes register-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -40px) scale(1.15); }
    66% { transform: translate(-30px, 30px) scale(0.85); }
}

/* Main container */
.register-container {
    width: 100%;
    max-width: 1000px;
    position: relative;
    z-index: 1;
    animation: card-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Glass card */
.register-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-wrap: wrap;
}

/* Brand sidebar */
.register-brand {
    flex: 0 0 280px;
    padding: 2.5rem 2rem;
    background: linear-gradient(135deg, rgba(180, 130, 58, 0.2), rgba(79, 143, 209, 0.05));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.register-brand .brand-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #fff;
    box-shadow: 0 12px 32px rgba(180, 130, 58, 0.35);
    margin-bottom: 1.25rem;
}
.register-brand h4 {
    font-family: 'Fraunces', sans-serif;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
}
.register-brand p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
.register-brand .brand-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
}
.register-brand .brand-features li {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    padding: 0.4rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.register-brand .brand-features li i {
    color: var(--blue-500);
    font-size: 1rem;
}

/* Form section */
.register-form {
    flex: 1;
    padding: 2.5rem 2.5rem 2rem;
    min-width: 300px;
}
.register-form .form-header {
    margin-bottom: 1.5rem;
}
.register-form .form-header h5 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.register-form .form-header p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin: 0;
}

.register-form .form-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.register-form .form-control,
.register-form .form-select {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.7rem 1rem;
    color: #fff;
    transition: all var(--anim-med) ease;
}
.register-form .form-control:focus,
.register-form .form-select:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--blue-500);
    box-shadow: 0 0 0 4px rgba(79, 143, 209, 0.12);
    color: #fff;
}
.register-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
.register-form .form-select option {
    color: #26231d;
}
.register-form .form-text {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

/* Input with icon */
.register-form .input-group-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.25);
    z-index: 5;
    pointer-events: none;
}
.register-form .form-control-with-icon {
    padding-left: 42px;
}

/* Password strength bar */
.password-strength {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    margin-top: 0.5rem;
    overflow: hidden;
    transition: all var(--anim-med) ease;
}
.password-strength .strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 0.4s ease, background 0.4s ease;
}
.password-strength .strength-bar.weak { width: 25%; background: #b8483f; }
.password-strength .strength-bar.medium { width: 50%; background: #c9982f; }
.password-strength .strength-bar.strong { width: 75%; background: #5cb85c; }
.password-strength .strength-bar.very-strong { width: 100%; background: #3f8f5f; }

.password-hint {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 0.25rem;
}

/* Buttons */
.register-form .btn-primary {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
    border: none;
    border-radius: 12px;
    padding: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
    width: 100%;
    transition: all var(--anim-med) ease;
}
.register-form .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(180, 130, 58, 0.4);
}
.register-form .btn-primary:active {
    transform: translateY(0);
}

.register-form .back-link {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}
.register-form .back-link:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Alerts */
.register-form .alert {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 12px;
    color: #f8d7da;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    animation: shake 0.5s ease;
}
.register-form .alert-success {
    background: rgba(47, 158, 100, 0.12);
    border-color: rgba(47, 158, 100, 0.2);
    color: #d4edda;
    animation: none;
}

/* Dark mode adjustments */
body.dark-theme .register-card {
    background: rgba(20, 30, 50, 0.9);
    border-color: rgba(255, 255, 255, 0.06);
}
body.dark-theme .register-brand {
    background: linear-gradient(135deg, rgba(180, 130, 58, 0.15), rgba(79, 143, 209, 0.03));
}
body.dark-theme .register-form .form-control,
body.dark-theme .register-form .form-select {
    background: rgba(255, 255, 255, 0.04);
}

/* Responsive */
@media (max-width: 768px) {
    .register-brand {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 1.5rem;
    }
    .register-brand .brand-features {
        display: none;
    }
    .register-form {
        padding: 1.5rem;
    }
    .register-page {
        padding: 0.75rem;
    }
    .register-card {
        border-radius: 16px;
    }
}

@media (max-width: 480px) {
    .register-form .form-header h5 {
        font-size: 1.1rem;
    }
    .register-brand .brand-icon {
        width: 56px;
        height: 56px;
        font-size: 1.6rem;
    }
    .register-brand h4 {
        font-size: 1.1rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .register-page::before,
    .register-page::after {
        animation: none;
    }
    .register-container {
        animation: none;
    }
}

/* ============================================================
   Animations & Enhancements (Grid-Safe)
   ============================================================ */

/* Main content entrance */
@keyframes fade-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stat card pop */
@keyframes card-pop {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Notification bell pulse – only if badge has content */
#notificationDropdown .badge {
    animation: bell-pulse 2s ease-in-out infinite;
}
#notificationDropdown .badge:empty {
    animation: none;
}

@keyframes bell-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Dropdown slide-down */
.dropdown-menu {
    transition: opacity var(--anim-med) ease, transform var(--anim-med) var(--anim-bounce);
    transform-origin: top center;
}
.dropdown-menu.show {
    opacity: 1;
    transform: translateY(0);
}
.dropdown-menu:not(.show) {
    opacity: 0;
    transform: translateY(-8px);
}

/* Quick filter chips hover – container must have class .quick-filter */
.quick-filter .btn {
    transition: all var(--anim-fast) ease;
}
.quick-filter .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Login page card entrance delay */
.login-page .card {
    animation-delay: 0.1s;
}

/* Remove animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .main-content,
    .stat-card,
    .login-page .card,
    .dropdown-menu,
    #notificationDropdown .badge {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   ULTIMATE FIX – Dashboard Reports Table Dark Mode
   ============================================================ */

/* Force table cell backgrounds to be transparent and text white */
body.dark-theme .table tbody td,
body.dark-theme .table tbody th,
body.dark-theme .table td,
body.dark-theme .table th {
    background-color: transparent !important;
    color: #ece6d8 !important;
    border-color: #33443f !important;
}

/* Force table headers */
body.dark-theme .table thead th {
    background-color: transparent !important;
    color: #a3ab9f !important;
    border-bottom-color: #33443f !important;
}

/* Force table rows */
body.dark-theme .table tbody tr {
    background-color: transparent !important;
}

body.dark-theme .table tbody tr:hover {
    background-color: rgba(180, 130, 58, 0.15) !important;
}

/* Force the card background */
body.dark-theme .card .table-responsive {
    background-color: transparent !important;
}

/* Force the table container */
body.dark-theme .table-responsive {
    background-color: transparent !important;
}

/* Fix for the reports table specifically - using the card's table */
body.dark-theme .card .table tbody td {
    background-color: transparent !important;
    color: #ece6d8 !important;
}

body.dark-theme .card .table thead th {
    background-color: transparent !important;
    color: #a3ab9f !important;
}

/* Fix for muted text in tables */
body.dark-theme .table .text-muted,
body.dark-theme .table .small,
body.dark-theme .table td.text-muted,
body.dark-theme .table td .text-muted,
body.dark-theme .table td.small,
body.dark-theme .table td .small {
    color: #a3ab9f !important;
}

/* Fix for the num class */
body.dark-theme .table td.num,
body.dark-theme .table td .num {
    color: #a3ab9f !important;
}

/* Badge colors - force readable */
body.dark-theme .table .badge {
    color: #ffffff !important;
}

body.dark-theme .table .badge.bg-warning {
    color: #1a1a1a !important;
}

body.dark-theme .table .badge.bg-danger {
    color: #ffffff !important;
}

body.dark-theme .table .badge.bg-success {
    color: #ffffff !important;
}

body.dark-theme .table .badge.bg-info {
    color: #ffffff !important;
}

/* Fix for the "View Inventory" button in dark mode */
body.dark-theme .card .btn-outline-primary {
    color: #d9b06c !important;
    border-color: #6b5a35 !important;
}

body.dark-theme .card .btn-outline-primary:hover {
    background-color: #b4823a !important;
    color: #ffffff !important;
}

/* Force all text in the reports card */
body.dark-theme .card .fw-bold {
    color: #ece6d8 !important;
}

body.dark-theme .card .text-muted {
    color: #a3ab9f !important;
}

/* Empty state fix */
body.dark-theme .card .empty-state {
    color: #a3ab9f !important;
}

body.dark-theme .card .empty-state i {
    color: #33443f !important;
}

body.dark-theme .card .empty-state p {
    color: #a3ab9f !important;
}

/* Fix for table striped rows if used */
body.dark-theme .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

body.dark-theme .table-striped tbody tr:nth-of-type(even) {
    background-color: transparent !important;
}

/* ============================================================
   Add/Edit Item Forms – Dark Mode Fixes
   ============================================================ */

/* Form labels */
body.dark-theme .card .form-label {
    color: #ece6d8 !important;
    font-weight: 600 !important;
}

/* Form inputs, selects, and textareas */
body.dark-theme .card .form-control,
body.dark-theme .card .form-select,
body.dark-theme .card textarea.form-control {
    background-color: #171f1d !important;
    border-color: #33443f !important;
    color: #ece6d8 !important;
}

/* Input placeholder text */
body.dark-theme .card .form-control::placeholder {
    color: #8a9aad !important;
    opacity: 1 !important;
}

/* Form helper text (small text below inputs) */
body.dark-theme .card .form-text {
    color: #a3ab9f !important;
}

/* Select dropdown options */
body.dark-theme .card .form-select option {
    background-color: #1f2b28 !important;
    color: #ece6d8 !important;
}

/* Datalist input (list attribute) – same as form-control */
body.dark-theme .card input[list] {
    background-color: #171f1d !important;
    color: #ece6d8 !important;
    border-color: #33443f !important;
}

/* Datalist options (browser-specific, but helps some) */
body.dark-theme .card datalist {
    background-color: #1f2b28 !important;
    color: #ece6d8 !important;
}

/* Form checkboxes/radios labels */
body.dark-theme .card .form-check-label {
    color: #ece6d8 !important;
}

/* Form switch (if any) */
body.dark-theme .card .form-switch .form-check-input {
    background-color: #33443f !important;
    border-color: #4a5569 !important;
}

body.dark-theme .card .form-switch .form-check-input:checked {
    background-color: #b4823a !important;
    border-color: #b4823a !important;
}

/* Form validation messages (if any) */
body.dark-theme .card .invalid-feedback,
body.dark-theme .card .valid-feedback {
    color: #a3ab9f !important;
}

/* Buttons inside the card */
body.dark-theme .card .btn-primary {
    background-color: #b4823a !important;
    border-color: #b4823a !important;
    color: #fff !important;
}

body.dark-theme .card .btn-primary:hover {
    background-color: #8a6526 !important;
    border-color: #8a6526 !important;
}

body.dark-theme .card .btn-outline-secondary {
    color: #a3ab9f !important;
    border-color: #4a5569 !important;
}

body.dark-theme .card .btn-outline-secondary:hover {
    background-color: #4a5569 !important;
    color: #ece6d8 !important;
}

/* Any disabled inputs */
body.dark-theme .card .form-control:disabled,
body.dark-theme .card .form-select:disabled {
    background-color: #2a3347 !important;
    color: #6a7a8e !important;
}

/* ============================================================
   Global Responsive Polish (tablet + mobile)
   ============================================================ */

/* ---- Tablet (≤991.98px): sidebar is already an overlay here ---- */
@media (max-width: 991.98px) {
    .main-content {
        padding: 1.25rem;
    }
    /* Stat card rows (dashboard, item view) go 2-up instead of stacking
       4 deep — much less scrolling on tablets/phones. */
    .stat-card-row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ---- Mobile (≤767.98px) ---- */
@media (max-width: 767.98px) {
    .main-content {
        padding: 1rem;
    }

    h4.fw-bold {
        font-size: 1.15rem;
    }

    /* Buttons: bigger tap targets, comfortable spacing when wrapped */
    .btn {
        min-height: 38px;
    }
    .btn-sm {
        min-height: 32px;
    }

    /* Card padding tightened so content doesn't feel cramped against
       the reduced page padding above. */
    .card.p-3 {
        padding: 0.85rem !important;
    }

    /* Tables: smaller text + tighter cells so more columns stay
       readable before horizontal scroll kicks in via .table-responsive */
    .table {
        font-size: 0.82rem;
    }
    .table td, .table th {
        padding: 0.5rem 0.4rem;
    }

    /* Modals: use nearly the full viewport width with small margins
       instead of Bootstrap's default centered fixed width */
    .modal-dialog {
        margin: 0.75rem;
        max-width: calc(100% - 1.5rem);
    }

    /* Toolbars of buttons (Inventory header, bulk bar, etc.) already
       wrap via flex-wrap in markup — this just tightens the gap so
       wrapped rows don't look sparse. */
    .d-flex.gap-2.flex-wrap {
        gap: 0.4rem !important;
    }
}

/* ---- Small phones (≤480px) ---- */
@media (max-width: 480px) {
    .main-content {
        padding: 0.75rem;
    }

    /* Stat cards go full-width again at this size — 2-up gets too
       cramped for numbers + labels below ~480px. */
    .stat-card-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Action button clusters (list.php row actions, view.php header
       actions) stack vertically as a full-width group rather than
       wrapping into a ragged multi-line row. */
    .actions-stack-mobile {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }
    .actions-stack-mobile .btn {
        width: 100%;
    }

    .card.p-3 {
        padding: 0.7rem !important;
    }
}

/* ============================================================
   Responsive Table → Cards (mobile only)
   Converts .responsive-table rows into stacked labeled cards
   below 767.98px instead of squeezing a fixed-layout table.
   ============================================================ */
@media (max-width: 767.98px) {
    table.responsive-table {
        table-layout: auto !important;
    }
    table.responsive-table thead {
        display: none; /* labels move onto each cell instead */
    }
    table.responsive-table, 
    table.responsive-table tbody, 
    table.responsive-table tr, 
    table.responsive-table td {
        display: block;
        width: 100% !important;
    }
    table.responsive-table tr {
        margin-bottom: 0.85rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 0.6rem 0.75rem;
        background: var(--surface);
    }
    table.responsive-table tr.table-warning {
        border-color: var(--warning);
    }
    table.responsive-table td {
        border: none;
        padding: 0.35rem 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        text-align: right;
    }
    /* The label pulled from data-label="" on each <td> */
    table.responsive-table td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--text-muted);
        text-align: left;
        flex-shrink: 0;
    }
    /* Checkbox cell: no label, sits inline at the top-right of the card */
    table.responsive-table td[data-label=""] {
        justify-content: flex-end;
        padding-bottom: 0;
    }
    /* Item name cell: left-align (it's the card's title, not a label/value pair) */
    table.responsive-table td[data-label="Item Name"] {
        justify-content: flex-start;
        font-size: 1rem;
        padding-top: 0;
    }
    /* Actions cell: buttons wrap and right-align naturally */
    table.responsive-table td[data-label="Actions"] {
        justify-content: flex-end;
        flex-wrap: wrap;
        border-top: 1px solid var(--border);
        margin-top: 0.4rem;
        padding-top: 0.5rem;
    }
    table.responsive-table td[data-label="Actions"]::before {
        display: none; /* "Actions" label not needed above a row of icon buttons */
    }
    /* Empty-state row shouldn't get card chrome */
    table.responsive-table tr:has(.empty-state) {
        border: none;
        background: transparent;
        padding: 0;
    }
    table.responsive-table tr:has(.empty-state) td {
        display: block;
    }
}
/* ============================================================
   Landing Page (post-login two-box picker)
   ============================================================ */
.landing-content {
    padding: 1.5rem 1.5rem 2rem;
}

.landing-glyph {
    color: var(--blue-500);
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    animation: fade-slide-up var(--anim-slow) var(--anim-bounce) both;
}

.landing-greeting h4 {
    font-size: 1.75rem;
    animation: fade-slide-up var(--anim-slow) var(--anim-bounce) both;
    animation-delay: 0.05s;
}

.landing-greeting p {
    animation: fade-slide-up var(--anim-slow) var(--anim-bounce) both;
    animation-delay: 0.1s;
}

.landing-cards {
    max-width: 920px;
    width: 100%;
}

.stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    max-width: 920px;
    width: 100%;
    animation: fade-slide-up var(--anim-slow) var(--anim-bounce) both;
    animation-delay: 0.12s;
}
.stat-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.75rem 1.1rem;
    min-width: 150px;
    flex: 1 1 150px;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: transform var(--anim-fast) ease, border-color var(--anim-fast) ease;
}
a.stat-chip-link { color: inherit; }
a.stat-chip-link:hover { transform: translateY(-2px); border-color: var(--blue-500); }
.stat-chip-alert { border-color: var(--warning); }
.stat-chip-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.stat-chip-icon-neutral { background: rgba(201, 154, 86, 0.14); color: var(--blue-500); }
.stat-chip-icon-warning { background: var(--warning-bg); color: var(--warning); }
.stat-chip-value { font-size: 1.25rem; font-weight: 700; line-height: 1.1; color: var(--text-primary); }
.stat-chip-label { font-size: 0.75rem; color: var(--text-muted); }

.recent-activity-panel {
    max-width: 920px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-md);
    animation: fade-slide-up var(--anim-slow) var(--anim-bounce) both;
    animation-delay: 0.22s;
}
.recent-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.recent-activity-header a { color: var(--blue-500); text-decoration: none; font-weight: 600; }
.recent-activity-header a:hover { text-decoration: underline; }
.recent-activity-empty {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 1.25rem 0;
}
.recent-activity-list { list-style: none; margin: 0; padding: 0; }
.recent-activity-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
}
.recent-activity-list li:first-child { border-top: none; }
.recent-activity-type {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}
.recent-activity-type.is-in { background: var(--success-bg); color: var(--success); }
.recent-activity-type.is-out { background: var(--danger-bg); color: var(--danger); }
.recent-activity-text { flex: 1; color: var(--text-primary); }
.recent-activity-text a { color: var(--text-primary); font-weight: 600; text-decoration: none; }
.recent-activity-text a:hover { text-decoration: underline; }
.recent-activity-time { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }

@media (max-width: 575.98px) {
    .recent-activity-time { display: none; }
}

/* ============================================================
   Login / Logout Intro-Outro Overlay
   ============================================================ */
.app-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    overflow: hidden;
    background: var(--navy-950);
    background-image:
        radial-gradient(circle at 50% 38%, var(--navy-700) 0%, var(--navy-950) 68%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease, filter 0.6s ease;
}
.app-intro-overlay.is-active {
    opacity: 1;
    pointer-events: all;
}
.app-intro-overlay.is-hiding {
    opacity: 0;
    filter: blur(6px);
}

/* Quiet drifting texture behind everything, same language as the
   login page, so the transition into/out of the app feels continuous */
.app-intro-overlay::before {
    content: '';
    position: absolute;
    inset: -10%;
    background-image:
        linear-gradient(rgba(201, 154, 86, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 154, 86, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 0%, transparent 75%);
    animation: intro-grid-drift 12s linear infinite;
}

/* Soft brass sparks that drift upward for a bit of life without being noisy */
.app-intro-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20% 80%, rgba(201, 154, 86, 0.55), transparent),
        radial-gradient(2px 2px at 75% 75%, rgba(201, 154, 86, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 60% 85%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1.5px 1.5px at 35% 90%, rgba(201, 154, 86, 0.5), transparent),
        radial-gradient(2px 2px at 85% 88%, rgba(255, 255, 255, 0.3), transparent);
    animation: intro-sparks-rise 4.5s ease-in infinite;
    opacity: 0;
    animation-delay: 0.4s;
}

@keyframes intro-grid-drift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-56px, -56px); }
}
@keyframes intro-sparks-rise {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(-140px); opacity: 0; }
}

/* Concentric ring that blooms out from behind the logo */
.app-intro-ring {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1px solid rgba(201, 154, 86, 0.4);
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 92px)) scale(0.6);
    opacity: 0;
    animation: intro-ring-bloom 2.2s var(--anim-bounce) both;
    animation-delay: 0.05s;
}
.app-intro-ring::before,
.app-intro-ring::after {
    content: '';
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    border: 1px solid rgba(201, 154, 86, 0.18);
}
.app-intro-ring::after {
    inset: -46px;
    border-color: rgba(201, 154, 86, 0.09);
}
@keyframes intro-ring-bloom {
    0% { opacity: 0; transform: translate(-50%, calc(-50% - 92px)) scale(0.5); }
    35% { opacity: 1; }
    100% { opacity: 0.9; transform: translate(-50%, calc(-50% - 92px)) scale(1); }
}

.app-intro-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: 84px;
    height: 84px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    padding: 6px;
    margin-bottom: 0.9rem;
    box-shadow:
        0 0 0 1px rgba(201, 154, 86, 0.35),
        0 10px 34px rgba(0, 0, 0, 0.45),
        0 0 46px rgba(201, 154, 86, 0.22);
    opacity: 0;
    animation: intro-logo-pop 0.85s var(--anim-bounce) both;
    animation-delay: 0.15s;
}
@keyframes intro-logo-pop {
    0% { opacity: 0; transform: scale(0.35) rotate(-30deg) translateY(10px); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); }
}

.app-intro-glyph {
    position: relative;
    z-index: 1;
    color: var(--blue-500);
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
    opacity: 0;
    animation: intro-glyph-pop 0.6s var(--anim-bounce) both;
    animation-delay: 0.55s;
}
.app-intro-text {
    position: relative;
    z-index: 1;
}
.app-intro-text h2 {
    color: #fdfaf3;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 2.1rem;
    text-align: center;
    margin: 0 0 0.4rem;
    opacity: 0;
    animation: fade-slide-up var(--anim-slow) var(--anim-bounce) both;
    animation-delay: 0.65s;
}
.app-intro-text p {
    color: rgba(253, 250, 243, 0.65);
    text-align: center;
    margin: 0;
    font-size: 0.95rem;
    opacity: 0;
    animation: fade-slide-up var(--anim-slow) var(--anim-bounce) both;
    animation-delay: 0.78s;
}
@keyframes intro-glyph-pop {
    0% { opacity: 0; transform: scale(0.4) rotate(-20deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@media (max-width: 575.98px) {
    .app-intro-text h2 { font-size: 1.5rem; }
    .app-intro-logo { width: 68px; height: 68px; }
    .app-intro-ring { width: 110px; height: 110px; transform: translate(-50%, calc(-50% - 76px)) scale(0.6); }
    .app-intro-ring::before { inset: -18px; }
    .app-intro-ring::after { inset: -36px; }
}
@media (prefers-reduced-motion: reduce) {
    .app-intro-overlay::before,
    .app-intro-overlay::after,
    .app-intro-ring,
    .app-intro-logo,
    .app-intro-glyph,
    .app-intro-text h2,
    .app-intro-text p {
        animation: none;
        opacity: 1;
    }
}

.landing-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3rem 2.25rem;
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--anim-med) var(--anim-bounce),
                box-shadow var(--anim-med) ease,
                border-color var(--anim-med) ease;
    animation: card-pop var(--anim-slow) var(--anim-bounce) both;
}

.landing-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--anim-med) ease;
    pointer-events: none;
}

.landing-card-in::before {
    background: radial-gradient(circle at 85% 15%, rgba(63, 143, 95, 0.16), transparent 60%);
}
.landing-card-out::before {
    background: radial-gradient(circle at 85% 15%, rgba(184, 72, 63, 0.16), transparent 60%);
}
.landing-card-log::before {
    background: radial-gradient(circle at 85% 15%, rgba(201, 152, 47, 0.16), transparent 60%);
}

.landing-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.landing-card-in:hover { border-color: var(--success); }
.landing-card-out:hover { border-color: var(--danger); }
.landing-card-log:hover { border-color: var(--warning); }
.landing-card:hover::before { opacity: 1; }

.landing-card-icon {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    margin-bottom: 1.75rem;
    transition: transform var(--anim-med) var(--anim-bounce);
}
.landing-card:hover .landing-card-icon {
    transform: scale(1.08) rotate(-3deg);
}
.landing-card-in .landing-card-icon {
    background: var(--success-bg);
    color: var(--success);
}
.landing-card-out .landing-card-icon {
    background: var(--danger-bg);
    color: var(--danger);
}
.landing-card-log .landing-card-icon {
    background: var(--warning-bg);
    color: var(--warning);
}

.landing-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.landing-card-desc {
    color: var(--text-muted);
    margin-bottom: 1.75rem;
    font-size: 0.95rem;
}

.landing-card-cta {
    margin-top: auto;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap var(--anim-fast) ease;
}
.landing-card-cta i { transition: transform var(--anim-fast) ease; }
.landing-card:hover .landing-card-cta i { transform: translateX(4px); }

.landing-card-in .landing-card-cta { color: var(--success); }
.landing-card-out .landing-card-cta { color: var(--danger); }
.landing-card-log .landing-card-cta { color: var(--warning); }

@media (max-width: 767.98px) {
    .landing-card { padding: 2.25rem 1.75rem; min-height: 220px; }
}

/* ============================================================
   Stock In / Stock Out pages
   ============================================================ */
.stock-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stock-form-card {
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.stock-card-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.stock-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.stock-card-body {
    padding: 1.25rem;
}

.stock-form-card .table-responsive {
    padding: 0.25rem 1.25rem 1rem;
}

.stock-form-card .form-label {
    font-weight: 600;
    font-size: 0.85rem;
}

@media (max-width: 575.98px) {
    .stock-page-header { flex-direction: column; align-items: stretch; }
    .stock-page-header .d-flex.gap-2 { justify-content: stretch; }
    .stock-page-header .d-flex.gap-2 > * { flex: 1; }
}

/* ============================================================
   Category picker (Stock In / Stock Out landing)
   ============================================================ */
.category-grid {
    max-width: 1140px;
    margin: 0 auto;
}

.category-grid-3col {
    max-width: 900px;
}

.category-grid-4col {
    max-width: 1200px;
}

/* Photo-tile style: image/icon panel on top, badge in the corner,
   dark footer band with title + subtitle underneath. */
.category-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--anim-med) var(--anim-bounce),
                box-shadow var(--anim-med) ease,
                border-color var(--anim-med) ease;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--blue-500);
}

.category-card-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background:
        repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 14px),
        color-mix(in srgb, var(--border) 45%, var(--surface));
}

.category-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    transition: transform var(--anim-med) var(--anim-bounce);
}

.category-card:hover .category-card-icon {
    transform: scale(1.08) rotate(-3deg);
}

.category-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(12, 22, 30, 0.72);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(2px);
    line-height: 1.4;
}

.category-card-footer {
    background: var(--navy-950);
    padding: 0.85rem 1rem;
    margin-top: auto;
}

.category-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-card-count {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
}

.category-card-all .category-card-media {
    background:
        repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 14px),
        color-mix(in srgb, var(--blue-500) 12%, var(--surface));
}

@media (max-width: 767.98px) {
    .category-card-media { min-height: 100px; }
    .category-card-icon { width: 50px; height: 50px; font-size: 1.3rem; }
    .category-card-footer { padding: 0.7rem 0.85rem; }
    .category-card-title { font-size: 0.85rem; }
    .category-card-count { font-size: 0.72rem; }
    .category-card-badge { font-size: 0.6rem; padding: 3px 8px; top: 8px; right: 8px; }
}

/* ---- Manage Categories: "add" tile + edit/delete actions ---- */
.category-card-add {
    height: 100%;
    min-height: 100%;
    width: 100%;
    background: transparent;
    border: 2px dashed var(--border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    cursor: pointer;
    transition: border-color var(--anim-med) ease, background var(--anim-med) ease, transform var(--anim-med) var(--anim-bounce);
}

.category-card-add:hover {
    border-color: var(--blue-500);
    background: color-mix(in srgb, var(--blue-500) 6%, transparent);
    transform: translateY(-4px);
}

.category-card-add-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--blue-500);
    margin-bottom: 0.65rem;
}

.category-card-add-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--blue-500);
}

.category-card-manage-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.category-card-manage-actions .btn {
    flex: 1;
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
}

/* Color / icon swatch pickers used in the category modal */
.swatch-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.color-swatch, .icon-swatch {
    position: relative;
    display: inline-flex;
}

.color-swatch input, .icon-swatch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.color-swatch span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid transparent;
    color: #fff;
    font-size: 0.8rem;
    transition: transform var(--anim-fast) ease, border-color var(--anim-fast) ease;
}

.color-swatch span:hover {
    transform: scale(1.1);
}

.color-swatch span i {
    display: none;
}

.color-swatch input:checked + span {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--surface);
}

.color-swatch input:checked + span i {
    display: inline-block;
}

.color-swatch input:focus-visible + span {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}

.icon-swatch span {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: all var(--anim-fast) ease;
}

.icon-swatch span:hover {
    border-color: var(--blue-500);
    color: var(--blue-500);
}

.icon-swatch input:checked + span {
    border-color: var(--blue-500);
    background: color-mix(in srgb, var(--blue-500) 14%, var(--surface));
    color: var(--blue-500);
}

.icon-swatch input:focus-visible + span {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}

/* ---- Stock Out: item search typeahead ---- */
.item-typeahead-group {
    position: relative;
}

.item-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    max-height: 260px;
    overflow-y: auto;
}

.item-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

.item-suggestion:last-child {
    border-bottom: none;
}

.item-suggestion:hover,
.item-suggestion.active {
    background: color-mix(in srgb, var(--blue-500) 10%, var(--surface));
}

.item-suggestion-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-suggestion-qty {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.item-suggestion-empty {
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ---- Usage Trends report ---- */
.usage-trends-page .btn-group .btn {
    transition: transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease, background-color var(--anim-med) ease, color var(--anim-med) ease;
}
.usage-trends-page .btn-group .btn:hover {
    transform: translateY(-1px);
}
.usage-trends-page .btn-group .btn.btn-primary {
    box-shadow: 0 2px 8px rgba(184, 72, 63, 0.28);
}

.usage-trends-page .card-icon-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.usage-trends-page .card-icon-badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: transform var(--anim-med) var(--anim-bounce);
}
.usage-trends-page .card:hover .card-icon-badge {
    transform: scale(1.08) rotate(-4deg);
}
.usage-trends-page .card-icon-badge.icon-danger { background: var(--danger-bg); color: var(--danger); }
.usage-trends-page .card-icon-badge.icon-warning { background: var(--warning-bg); color: var(--warning); }
.usage-trends-page .card-icon-badge.icon-success { background: var(--success-bg); color: var(--success); }

.usage-trends-page .trend-chart-wrap {
    position: relative;
    height: 320px;
    animation: fade-slide-up var(--anim-slow) var(--anim-bounce) both;
    animation-delay: 0.1s;
}

.usage-trends-page .trend-list .list-group-item {
    background: transparent;
    border-color: var(--border);
    color: var(--text-primary);
    animation: row-fade-in var(--anim-med) ease-out both;
    transition: padding-left var(--anim-fast) ease, background-color var(--anim-fast) ease;
}
.usage-trends-page .trend-list .list-group-item:hover {
    padding-left: 0.35rem;
    background-color: var(--success-bg);
}
.usage-trends-page .trend-list .list-group-item:nth-child(1) { animation-delay: 0.04s; }
.usage-trends-page .trend-list .list-group-item:nth-child(2) { animation-delay: 0.09s; }
.usage-trends-page .trend-list .list-group-item:nth-child(3) { animation-delay: 0.14s; }
.usage-trends-page .trend-list .list-group-item:nth-child(4) { animation-delay: 0.19s; }
.usage-trends-page .trend-list .list-group-item:nth-child(5) { animation-delay: 0.24s; }

.usage-trends-page .idle-row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--warning-bg);
    color: var(--warning);
    font-size: 0.7rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

body.dark-theme .usage-trends-page .trend-list .list-group-item:hover {
    background-color: rgba(63, 143, 95, 0.16);
}

@media (max-width: 767.98px) {
    .usage-trends-page .trend-chart-wrap { height: 260px; }
}


/* ============================================================
   Mobile responsiveness hardening pass
   Fixes: horizontal page overflow, cramped tables, unwrapped
   toolbars/pagination, and oversized touch targets on small
   screens. Kept separate from component blocks above so this
   pass is easy to find and adjust as a unit.
   ============================================================ */

/* Never let a stray fixed-width element create horizontal
   scroll on the whole page (the decorative splash/blob layers
   are absolutely positioned and already clipped by their own
   overflow:hidden parents, so this is safe). */
html, body {
    overflow-x: hidden;
}
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .main-content {
        padding: 1.1rem;
    }

    /* Data tables: tighten padding/type so more columns fit
       before the table-responsive wrapper has to scroll. */
    .table {
        font-size: 0.82rem;
    }
    .table th,
    .table td {
        padding: 0.5rem 0.6rem;
        white-space: nowrap;
    }
    .stock-card-header {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    /* Any header/toolbar row that forgot flex-wrap still stacks
       instead of squeezing its children off-screen. */
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .category-card {
        padding: 1.75rem 1.25rem;
        min-height: 190px;
    }

    .stat-card .stat-value {
        font-size: 1.6rem;
    }
}

/* Pagination: keep page-number lists on one line and let that
   line scroll horizontally rather than wrapping mid-list or
   pushing the "Showing X-Y" text off-screen. */
.pagination-nav-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pagination-nav-scroll .pagination {
    flex-wrap: nowrap;
}

@media (max-width: 480px) {
    .table {
        font-size: 0.78rem;
    }
    .app-header-nav {
        justify-content: flex-start;
    }
}

/* ---- Mobile nav toggle (hamburger) ---- */
.nav-toggle-btn {
    display: none;
}

@media (max-width: 768px) {
    .nav-toggle-btn {
        display: flex;
        order: -1;
        margin-right: 0.2rem;
    }

    /* Collapsed by default: the pill row is hidden and reappears as a
       stacked dropdown-style menu once .is-open is toggled on by the
       hamburger button, instead of spilling off the right edge. */
    .app-header-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        overflow-x: visible;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 20;
        box-shadow: var(--shadow-md);
        padding: 0.6rem 1rem;
    }
    .app-header-nav.is-open {
        display: flex;
    }
    .app-nav-pill {
        justify-content: flex-start;
        width: 100%;
        padding: 0.65rem 0.9rem;
    }
    .app-nav-pill.active::after {
        display: none;
    }
}

/* ============================================================
   Polish pass — small, brand-consistent refinements layered on
   top of the existing Eurasia Ledger system. Nothing here
   replaces prior rules; it tightens a few details that read as
   "default" rather than deliberate.
   ============================================================ */

/* Brand-colored text selection instead of the browser default blue,
   so even selecting text stays inside the teal/brass palette. */
::selection {
    background: var(--blue-600);
    color: #fff;
}

/* A hairline brass gradient under the header — ties the "Eurasia
   Ledger" brass accent to the one seam every page shares, instead
   of a flat border like any other admin panel. */
.app-header {
    position: relative;
}
.app-header::after {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-600) 0%, var(--blue-500) 45%, transparent 100%);
    opacity: 0.7;
}

/* Branded scrollbars app-wide (Firefox + WebKit), not just inside
   the notification list — a small detail that otherwise breaks the
   palette the instant a table or page needs to scroll. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--blue-500);
}

/* Stat values lean on tabular mono numerals already — give the
   label above them a touch more distinction so the pairing reads
   as "ledger entry" rather than a generic dashboard tile. */
.stat-card .stat-label {
    position: relative;
    padding-left: 0.9rem;
}
.stat-card .stat-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    transform: translateY(-50%);
}

body.dark-theme .app-header::after {
    opacity: 0.5;
}
body.dark-theme * {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
body.dark-theme ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   Users & Staff directory (card-row layout)
   ============================================================ */
.user-directory-card {
    padding: 0.25rem 0;
}
.users-page-card {
    padding: 2rem 2rem 1.5rem;
}
.users-page-card .user-directory-row {
    padding-left: 0;
    padding-right: 0;
}
.user-directory-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border);
}
.user-directory-row:last-child {
    border-bottom: none;
}
.user-directory-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.user-role-badge {
    background: var(--warning-bg) !important;
    color: var(--warning) !important;
    font-size: 0.65rem;
}
.user-directory-meta {
    color: var(--blue-600);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.user-directory-access {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}
.user-directory-action {
    flex-shrink: 0;
    padding-top: 0.1rem;
}

body.dark-theme .user-role-badge {
    background: rgba(201, 152, 47, 0.15) !important;
    color: var(--warning) !important;
}

@media (max-width: 575.98px) {
    .user-directory-row {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ---- Property picker: last-used flag ---- */
.picker-card { position: relative; }
.picker-card.is-last { border-color: var(--blue-500); box-shadow: 0 0 0 2px rgba(201, 154, 86, 0.35), var(--shadow-lg); }
.picker-last {
    position: absolute; top: 10px; right: 10px;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 20px; background: var(--blue-500); color: #fff;
}

/* ---- Dashboard: running-low strip ---- */
.lowstock-strip { width: 100%; max-width: 760px; border: 1px solid var(--danger, #b3453d); border-radius: 14px; background: var(--surface); overflow: hidden; }
.lowstock-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-weight: 700; font-size: .95rem; color: var(--danger, #b3453d); background: rgba(179, 69, 61, .08); border-bottom: 1px solid var(--border); }
.lowstock-count { display: inline-block; min-width: 22px; text-align: center; background: var(--danger, #b3453d); color: #fff; border-radius: 20px; padding: 0 7px; margin-left: 4px; font-size: .8rem; }
.lowstock-list { list-style: none; margin: 0; padding: 0; }
.lowstock-list li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.lowstock-list li:last-child { border-bottom: 0; }
.lowstock-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lowstock-qty { font-size: .88rem; color: var(--text-muted); white-space: nowrap; }
.lowstock-qty small { opacity: .8; }
.lowstock-qty.is-out { color: var(--danger, #b3453d); font-weight: 700; }
.lowstock-btn { white-space: nowrap; }
@media (max-width: 575px) {
    .lowstock-list li { flex-wrap: wrap; }
    .lowstock-qty { order: 3; flex-basis: 100%; }
}

/* ---- Undo bar (stock out / discard) ---- */
.undo-bar {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2000;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    width: min(560px, calc(100% - 24px)); padding: 14px 16px; overflow: hidden;
    background: #1f2a27; color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
    animation: undo-in .2s ease-out;
}
@keyframes undo-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.undo-bar-msg { flex: 1; min-width: 160px; font-weight: 600; font-size: .95rem; }
.undo-bar-count { font-family: 'IBM Plex Mono', monospace; opacity: .8; }
.undo-bar-btn { border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: .9rem; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.undo-bar-btn:hover { background: rgba(255,255,255,.12); }
.undo-bar-now { background: #fff; color: #1f2a27; border-color: #fff; }
.undo-bar-now:hover { background: #e8e8e8; }
.undo-bar-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--blue-500, #c99a56); transform-origin: left; animation: undo-shrink linear forwards; }
@keyframes undo-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }


/* ---- Dashboard: big Scan button ---- */
.scan-hero {
    display: flex; align-items: center; gap: 16px; width: 100%; max-width: 760px;
    padding: 20px 22px; border-radius: 16px; text-decoration: none; color: #fff;
    background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
    box-shadow: 0 8px 22px rgba(180, 130, 58, .32);
    transition: transform .15s ease, box-shadow .15s ease;
}
.scan-hero:hover, .scan-hero:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(180, 130, 58, .4); color: #fff; outline: none; }
.scan-hero-icon { font-size: 2.2rem; line-height: 1; display: flex; }
.scan-hero-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.scan-hero-title { font-family: 'Fraunces', sans-serif; font-weight: 700; font-size: 1.4rem; }
.scan-hero-sub { font-size: .9rem; opacity: .92; }
.scan-hero-arrow { font-size: 1.4rem; }

/* ---- First-login tips + getting started ---- */
.first-tip, .getting-started {
    width: 100%; max-width: 760px; border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface); padding: 14px 18px; display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
}
.first-tip.d-none { display: none !important; }
.first-tip ul { margin: 6px 0 0; padding-left: 1.1rem; font-size: .92rem; color: var(--text-muted); }
.first-tip li { margin-bottom: 3px; }
.getting-started { justify-content: flex-start; align-items: center; }
.getting-started > i { font-size: 2rem; color: var(--text-muted); }
.getting-started p { font-size: .92rem; color: var(--text-muted); }

/* ---- Report date presets ---- */
.date-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.date-preset {
    padding: 5px 14px; border-radius: 20px; font-size: .88rem; font-weight: 600; text-decoration: none;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-primary);
}
.date-preset:hover { border-color: var(--blue-500); color: var(--text-primary); }
.date-preset.is-active { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }

/* ---- Dark mode: keep small helper text readable ---- */
body.dark-theme { --text-muted: #b3baaf; }
body.dark-theme .form-text,
body.dark-theme small,
body.dark-theme .small { color: #b3baaf; }
body.dark-theme .form-text { font-size: .82rem; }