/*
  Developed by Mohammad Rameez Imdad (Rameez Scripts)
  WhatsApp: https://wa.me/923224083545 (For Custom Projects)
  YouTube: https://www.youtube.com/@rameezimdad (Subscribe for more!)
*/

/* ===== Color Scheme - Light Theme (Default) ===== */
:root {
    --navy-primary: #001f3f;
    --navy-dark: #001529;
    --navy-light: #003366;
    --navy-accent: #0074D9;
    --navy-hover: #002a52;
    --success: #34a853;
    --warning: #fbbc04;
    --danger: #ea4335;

    /* Light Theme Colors */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #333333;
    --text-secondary: #555555;
    --text-muted: #666666;
    --border-color: #e0e0e0;
    --border-light: #f0f0f0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-hover: rgba(0, 0, 0, 0.15);
    --input-bg: #ffffff;
    --input-border: #d0d0d0;
    --table-hover: #f9f9f9;
    --skeleton-base: #f0f0f0;
    --skeleton-shine: #e0e0e0;
}

/* ===== Dark Theme ===== */
body.dark-mode {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-card: #1e1e3f;
    --text-primary: #e8eaf6;
    --text-secondary: #b0b3c5;
    --text-muted: #8a8d9f;
    --border-color: #2d2d5a;
    --border-light: #252550;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-hover: rgba(0, 0, 0, 0.4);
    --input-bg: #252550;
    --input-border: #3d3d7a;
    --table-hover: #252550;
    --skeleton-base: #252550;
    --skeleton-shine: #2d2d5a;

    --navy-primary: #0a1628;
    --navy-dark: #060d16;
    --navy-light: #1a3a5c;
}

/* ===== Global Styles ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 0.3s ease, color 0.3s ease;
}

input, select, textarea {
    font-size: 16px !important;
    touch-action: manipulation;
}

/* ===== App Container ===== */
.app-container {
    display: flex;
    height: 100vh;
}

/* ===== Sidebar ===== */
.sidebar {
    width: 260px;
    background: linear-gradient(180deg, var(--navy-primary) 0%, var(--navy-dark) 100%);
    color: white;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    transition: width 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

.sidebar-header {
    padding: 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
}

.sidebar-title {
    color: white;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-title-text {
    transition: opacity 0.3s ease, width 0.3s ease;
}

.sidebar-toggle-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
    background: rgba(255,255,255,0.2);
}

.sidebar-toggle-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.sidebar-logo-section {
    padding: 15px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sidebar-logo {
    width: 55px;
    height: 55px;
    min-width: 55px;
    min-height: 55px;
    max-width: 55px;
    max-height: 55px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 2px solid rgba(255,255,255,0.25);
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
    display: block;
    overflow: hidden;
}

.sidebar-logo:hover {
    transform: scale(1.1);
    border-color: var(--navy-accent);
    box-shadow: 0 5px 15px rgba(0,116,217,0.6);
}

.sidebar-menu-section {
    flex: 1;
    padding: 20px 16px;
}

.sidebar-menu-title {
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    padding: 0 12px;
}

.sidebar-menu {
    list-style: none;
}

.sidebar-menu li {
    margin-bottom: 4px;
}

.sidebar-menu a,
.sidebar-menu button {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    border-radius: 3px;
    font-size: 15px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 500;
    text-decoration: none;
}

.sidebar-menu a:hover,
.sidebar-menu button:hover {
    background: rgba(255,255,255,0.1);
    color: white;
    transform: translateX(4px);
}

.sidebar-menu a.active,
.sidebar-menu button.active {
    background: var(--navy-accent);
    color: white;
    box-shadow: 0 4px 12px rgba(0,116,217,0.3);
    border-left: 4px solid rgba(255,255,255,0.85);
    padding-left: 12px; /* keep icon aligned with non-active items (16px default - 4px border) */
}

.sidebar-menu a.active i,
.sidebar-menu button.active i {
    color: #fff;
    transform: scale(1.08);
}

.sidebar-menu i {
    width: 20px;
    text-align: center;
    font-size: 18px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* icon pop on hover — subtle bounce using spring easing */
.sidebar-menu a:hover i,
.sidebar-menu button:hover i { transform: scale(1.18); }

/* ===== Sidebar group headers (v7.4 — navy theme section dividers) ===== */
.sidebar-group-header {
    margin: 14px 12px 6px;
    padding: 10px 12px 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.12);
    border-radius: 4px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}
.sidebar-group-header i { color: var(--navy-accent); font-size: 11px; opacity: 0.7; }
.sidebar-group-header:first-child { margin-top: 6px; border-top: none; }

.sidebar.collapsed .sidebar-group-header {
    justify-content: center;
    padding: 8px 4px;
    margin: 8px 6px 2px;
}
.sidebar.collapsed .sidebar-group-header span { display: none; }
.sidebar.collapsed .sidebar-group-header i { font-size: 13px; opacity: 1; }

/* ===== Sidebar scrollbar polish (webkit) ===== */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(0,116,217,0.4);
    border-radius: 3px;
    transition: background 0.2s;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0,116,217,0.75); }
/* firefox */
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(0,116,217,0.4) rgba(0,0,0,0.15); }

/* ===== Active link: remove border-left when sidebar is collapsed (icons centered) ===== */
.sidebar.collapsed .sidebar-menu a.active,
.sidebar.collapsed .sidebar-menu button.active {
    border-left: none;
    padding-left: 0;
}

.sidebar-logout {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.15);
}

.sidebar-logout button {
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(234,67,53,0.2) 0%, rgba(234,67,53,0.3) 100%);
    border: 1px solid rgba(234,67,53,0.4);
    color: white;
    cursor: pointer;
    border-radius: 3px;
    font-size: 15px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
}

.sidebar-logout button:hover {
    background: linear-gradient(135deg, rgba(234,67,53,0.4) 0%, rgba(234,67,53,0.5) 100%);
    transform: translateY(-2px);
}

.sidebar-logout button i {
    font-size: 16px;
}

.sidebar-logout button span {
    font-size: 15px;
}

/* Sidebar User Info */
.sidebar-user-name {
    font-size: 15px;
    font-weight: 600;
    color: white;
    text-align: center;
    transition: all 0.3s ease;
}

.sidebar-user-role {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    background: rgba(0,116,217,0.3);
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: capitalize;
    transition: all 0.3s ease;
}

/* Collapsed Sidebar */
.sidebar.collapsed {
    width: 70px;
}

.sidebar.collapsed .sidebar-header {
    padding: 20px 10px;
    justify-content: center;
}

.sidebar.collapsed .sidebar-title {
    justify-content: center;
}

.sidebar.collapsed .sidebar-title-text {
    display: none;
}

.sidebar.collapsed .sidebar-toggle-btn {
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--navy-primary);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.sidebar.collapsed .sidebar-logo-section {
    padding: 10px;
}

.sidebar.collapsed .sidebar-logo {
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    max-width: 45px;
    max-height: 45px;
}

.sidebar.collapsed .sidebar-menu-section {
    padding: 15px 8px;
}

.sidebar.collapsed .sidebar-menu-title {
    display: none;
}

.sidebar.collapsed .sidebar-menu a,
.sidebar.collapsed .sidebar-menu button {
    justify-content: center;
    padding: 14px 10px;
    gap: 0;
}

.sidebar.collapsed .sidebar-menu a span,
.sidebar.collapsed .sidebar-menu button span {
    display: none;
}

.sidebar.collapsed .sidebar-menu a i,
.sidebar.collapsed .sidebar-menu button i {
    font-size: 20px;
    width: auto;
}

.sidebar.collapsed .sidebar-menu a:hover,
.sidebar.collapsed .sidebar-menu button:hover {
    transform: scale(1.1);
}

/* Hide submenu arrow in collapsed state */
.sidebar.collapsed .submenu-arrow {
    display: none;
}

/* Submenu in collapsed state */
.sidebar.collapsed .sidebar-submenu {
    position: absolute;
    left: 70px;
    top: 0;
    width: 200px;
    background: var(--navy-dark);
    border-radius: 4px;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
    max-height: none;
    opacity: 0;
    visibility: hidden;
    z-index: 100;
}

.sidebar.collapsed .has-submenu:hover .sidebar-submenu {
    opacity: 1;
    visibility: visible;
}

.sidebar.collapsed .sidebar-submenu a {
    padding: 12px 16px;
    justify-content: flex-start;
    gap: 10px;
}

.sidebar.collapsed .sidebar-submenu a span {
    display: inline;
}

.sidebar.collapsed .sidebar-submenu a i {
    font-size: 14px;
    width: 20px;
}

/* Theme toggle in collapsed state */
.sidebar.collapsed .sidebar-theme {
    padding: 12px 8px;
}

.sidebar.collapsed .sidebar-theme button {
    padding: 14px 10px;
    justify-content: center;
}

.sidebar.collapsed .sidebar-theme button span {
    display: none;
}

.sidebar.collapsed .sidebar-theme button i {
    font-size: 20px;
}

/* Logout button in collapsed state */
.sidebar.collapsed .sidebar-logout {
    padding: 12px 8px;
}

.sidebar.collapsed .sidebar-logout button {
    padding: 14px 10px;
    justify-content: center;
}

.sidebar.collapsed .sidebar-logout button span {
    display: none;
}

.sidebar.collapsed .sidebar-logout button i {
    font-size: 20px;
}

/* Tooltip for collapsed sidebar items */
.sidebar.collapsed .sidebar-menu li {
    position: relative;
}

.sidebar.collapsed .sidebar-menu li::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--navy-dark);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 100;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

.sidebar.collapsed .sidebar-menu li:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Mobile Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Mobile Menu Button - DEPRECATED (Now using bottom navigation bar) */
/* Old top hamburger button - kept for backwards compatibility but hidden */
.mobile-menu-btn-old {
    display: none !important;
}

/* Bottom nav menu button is now in mobile-menu.php inline styles */

/* ===== Mobile Bottom Navigation Bar ===== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background: var(--navy-primary);
    z-index: 1001;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    justify-content: space-around;
    align-items: center;
    padding: 0 5px;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: none;
    border: none;
    cursor: pointer;
    min-width: 60px;
}

.mobile-nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
}

.mobile-nav-item span {
    white-space: nowrap;
}

.mobile-nav-item:hover,
.mobile-nav-item:focus {
    color: white;
    background: rgba(255,255,255,0.1);
}

.mobile-nav-item.active {
    color: white;
    background: var(--navy-accent);
    box-shadow: 0 2px 8px rgba(0,116,217,0.4);
}

.mobile-nav-item.active i {
    transform: scale(1.1);
}

.mobile-nav-more {
    color: rgba(255,255,255,0.9);
}

/* Sidebar Overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Mobile Sidebar */
@media (max-width: 768px) {
    /* Show bottom navigation */
    .mobile-bottom-nav {
        display: flex;
    }

    /* Add padding to main content for bottom nav */
    .main-content {
        margin-left: 0;
        width: 100%;
        padding-bottom: 80px;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px !important;
        z-index: 1000;
        transition: left 0.3s ease;
        height: 100vh;
        overflow-y: auto;
    }

    .sidebar.mobile-open {
        left: 0;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    }

    /* Disable collapsed state on mobile */
    .sidebar.collapsed {
        width: 280px !important;
        left: -280px;
    }

    .sidebar.collapsed.mobile-open {
        left: 0;
    }

    .sidebar.collapsed .sidebar-title-text,
    .sidebar.collapsed .sidebar-menu-title,
    .sidebar.collapsed .sidebar-menu a span,
    .sidebar.collapsed .sidebar-menu button span,
    .sidebar.collapsed .sidebar-theme button span,
    .sidebar.collapsed .sidebar-logout button span {
        display: inline !important;
    }

    .sidebar.collapsed .sidebar-menu a,
    .sidebar.collapsed .sidebar-menu button,
    .sidebar.collapsed .sidebar-theme button,
    .sidebar.collapsed .sidebar-logout button {
        justify-content: flex-start !important;
        padding: 14px 16px !important;
        gap: 14px !important;
    }

    .sidebar.collapsed .sidebar-menu a i,
    .sidebar.collapsed .sidebar-menu button i {
        font-size: 18px !important;
    }

    .sidebar.collapsed .sidebar-logo {
        width: 55px !important;
        height: 55px !important;
        min-width: 55px !important;
        min-height: 55px !important;
        max-width: 55px !important;
        max-height: 55px !important;
    }

    .sidebar.collapsed .submenu-arrow {
        display: inline !important;
    }

    .sidebar.collapsed .sidebar-submenu {
        position: static !important;
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 0;
        visibility: hidden;
    }

    .sidebar.collapsed .sidebar-submenu.open {
        opacity: 1;
        visibility: visible;
    }

    /* Hide sidebar toggle button on mobile */
    .sidebar-toggle-btn {
        display: none !important;
    }

    .app-container {
        flex-direction: column;
    }

    /* Adjust header for mobile */
    .header {
        padding: 15px;
    }

    .header h1 {
        font-size: 18px;
    }

    /* Data section padding adjustment */
    .data-section {
        padding: 15px;
    }

    .section-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .section-header > div {
        width: 100%;
        display: flex;
        gap: 10px;
    }

    .section-header .btn {
        flex: 1;
    }
}

/* Extra small devices */
@media (max-width: 400px) {
    .mobile-nav-item {
        padding: 8px 8px;
        min-width: 50px;
    }

    .mobile-nav-item i {
        font-size: 18px;
    }

    .mobile-nav-item span {
        font-size: 9px;
    }
}

/* Dark mode for mobile navigation */
body.dark-mode .mobile-bottom-nav {
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

body.dark-mode .mobile-nav-item {
    color: var(--text-muted);
}

body.dark-mode .mobile-nav-item:hover,
body.dark-mode .mobile-nav-item:focus {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
}

body.dark-mode .mobile-nav-item.active {
    color: white;
    background: var(--navy-accent);
}

/* ===== Main Content ===== */
.main-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: var(--bg-primary);
    transition: background-color 0.3s ease, margin-left 0.3s ease;
}

.header {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 3px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px var(--shadow-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--text-primary);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header h1 {
    margin: 0;
    font-size: 24px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* push action buttons to the right edge, just before notifications bell */
.header .btn-group-inline.header-actions,
.header > .btn-group-inline {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* anything after the action group (typically notifications bell) sits tight */
.header > .btn-group-inline + * {
    margin-left: 0;
}

.data-section {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 3px;
    box-shadow: 0 2px 4px var(--shadow-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h2 {
    font-size: 20px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== Skeleton Loaders ===== */
.skeleton {
    background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 3px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-table {
    width: 100%;
    background: var(--bg-card);
    padding: 20px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.skeleton-table-row {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-light);
}

.skeleton-table-cell {
    height: 20px;
    border-radius: 3px;
}

.skeleton-card {
    background: var(--bg-card);
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--navy-primary);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.skeleton-icon {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 12px;
    border-radius: 3px;
}

.skeleton-text-large {
    height: 32px;
    margin-bottom: 8px;
    border-radius: 3px;
}

.skeleton-chart {
    width: 100%;
    height: 300px;
    border-radius: 3px;
}

/* ===== Dashboard Stats ===== */
.dashboard-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.dashboard-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--bg-card);
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--navy-primary);
    transition: all 0.3s;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px var(--shadow-hover);
}

.stat-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
    color: white;
}

.stat-card-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--navy-accent);
    margin-bottom: 8px;
}

body.dark-mode .stat-card-value {
    color: #5dade2;
}

.stat-card-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
}

/* ===== Charts ===== */
.chart-card {
    background: var(--bg-card);
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--shadow-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.chart-card h3 {
    color: var(--text-primary);
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 600;
}

.chart-container {
    position: relative;
    height: 300px;
}

/* ===== Buttons ===== */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 2px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary {
    background: var(--navy-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--navy-hover);
    transform: translateY(-2px);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: #2d8e47;
    transform: translateY(-2px);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: #c8392b;
    transform: translateY(-2px);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
}

.btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* ===== DataTables ===== */
table.dataTable {
    width: 100% !important;
    border-collapse: collapse;
    background: var(--bg-card);
}

table.dataTable thead th {
    background: var(--navy-primary) !important;
    color: white !important;
    padding: 14px !important;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
}

table.dataTable tbody td {
    padding: 12px 14px !important;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

table.dataTable tbody tr:hover {
    background: var(--table-hover) !important;
}

body.dark-mode table.dataTable thead th {
    background: var(--navy-light) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--navy-accent) !important;
    color: white !important;
    border-color: var(--navy-accent) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--navy-light) !important;
    color: white !important;
}

.dt-buttons {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dt-button {
    background: var(--navy-primary) !important;
    color: white !important;
    border: none !important;
    padding: 10px 16px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    margin-right: 0 !important;
    cursor: pointer !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.dt-button:hover {
    background: var(--navy-hover) !important;
}

/* DataTable wrapper for mobile scroll */
.dataTables_wrapper {
    position: relative;
}

.dataTables_scroll,
.dataTables_scrollBody {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* DataTable responsive hint for mobile */
.table-scroll-hint {
    display: none;
    text-align: center;
    padding: 10px;
    background: rgba(0, 116, 217, 0.1);
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--navy-accent);
}

.table-scroll-hint i {
    margin-right: 6px;
}

@media (max-width: 768px) {
    .table-scroll-hint {
        display: block;
    }
}

/* ===== Action Icons ===== */
.action-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 6px 10px;
    margin: 0 4px;
    border-radius: 2px;
    transition: all 0.3s;
}

.action-icon.edit-icon {
    color: var(--warning);
}

.action-icon.edit-icon:hover {
    background: rgba(251,188,4,0.1);
    transform: scale(1.15);
}

.action-icon.delete-icon {
    color: var(--danger);
}

.action-icon.delete-icon:hover {
    background: rgba(234,67,53,0.1);
    transform: scale(1.15);
}

.action-icon.view-icon {
    color: var(--navy-accent);
}

.action-icon.view-icon:hover {
    background: rgba(0,116,217,0.1);
    transform: scale(1.15);
}

/* action column — chips stacked above a compact 2-col grid of action icons (shared across list pages) */
.action-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: 100%; }
.action-cell .action-chips { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; justify-content: flex-end; }
.action-icons-v { display: inline-grid; grid-template-columns: repeat(2, auto); gap: 4px; }
/* type/status pill used inside .action-chips — shared so every list page matches the products.php row pattern (products.php keeps an identical inline copy) */
.type-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.4; font-weight: 700; padding: 4px 10px; border-radius: 12px; white-space: nowrap; }
.type-chip-new { background: #e7f0fb; color: #0074D9; }
.type-chip-reorder { background: #fdebd0; color: #b9770e; }
.type-chip-active { background: #dcfce7; color: #166534; }
.type-chip-inactive { background: #fee2e2; color: #991b1b; }
.type-chip-muted { background: #f1f5f9; color: #64748b; }
/* user_access + personal_vault — chips INLINE (aage) on the same line as the action icons, not stacked above them */
#accessTable .action-cell, #vaultTable .action-cell { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* invoice column thumbnail (orders.php) — 50x50, reuses the prod-thumb look; pdf shows an icon box */
#ordTable .invoice-thumb { width: 50px; height: 50px; object-fit: cover; border: 1px solid #cfe3fa; border-radius: 6px; background: #f0f7ff; cursor: pointer; display: block; margin: 0 auto; transition: transform .15s, box-shadow .15s; }
#ordTable .invoice-thumb:hover { transform: scale(1.12); box-shadow: 0 2px 8px rgba(0,116,217,.25); border-color: #0074D9; position: relative; z-index: 5; }
#ordTable .invoice-thumb.is-pdf { display: flex; align-items: center; justify-content: center; color: #c0392b; font-size: 22px; background: #fff5f5; border-color: #f6cccc; }
#ordTable .invoice-add-btn { width: 50px; height: 50px; border: 1px dashed #cfe3fa; border-radius: 6px; background: #f8fbff; color: #0b5cab; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto; transition: background .15s, border-color .15s; }
#ordTable .invoice-add-btn:hover { background: #e8f1fb; border-color: #0074D9; }
/* invoice cell: pinned thumb (click=view) stacked over a count chip (click=add/manage) */
#ordTable .invoice-cell-stack { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#ordTable .invoice-count-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: #e8f1fb; color: #0b5cab; border: 1px solid #cfe3fa; cursor: pointer; transition: background .15s, border-color .15s; }
#ordTable .invoice-count-chip:hover { background: #d3e6fb; border-color: #0074D9; }
/* comments sub-label — sits under Tracking in the Shipping Status column */
.cell-sub-label.sub-cmt { background: #4a5d7e; color: #ffffff; }
/* invoice gallery modal — mirrors the shipping pack-image modal look */
.inv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.inv-cell { position: relative; border: 1px solid #e5e9f2; border-radius: 8px; overflow: hidden; background: #fafbfd; transition: box-shadow .15s, border-color .15s; }
.inv-cell:hover { border-color: #cfe3fa; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.inv-cell.is-pinned { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.28); }
.inv-cell > a { display: block; line-height: 0; }
.inv-cell img { width: 100%; height: 110px; object-fit: cover; display: block; }
.inv-cell .inv-pdf { display: flex; align-items: center; justify-content: center; height: 110px; color: #c0392b; font-size: 40px; background: #fff5f5; text-decoration: none; }
.inv-cell .inv-meta { font-size: 10px; color: #5f6c80; padding: 4px 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid #eef2f7; }
.inv-cell .inv-act { position: absolute; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; font-size: 11px; }
.inv-cell .inv-act.inv-del { top: 4px; right: 4px; color: #c0392b; }
.inv-cell .inv-act.inv-del:hover { background: #c0392b; color: #fff; }
.inv-cell .inv-act.inv-pin { top: 4px; left: 4px; color: #b45309; }
.inv-cell .inv-act.inv-pin:hover { background: #f59e0b; color: #fff; }
.inv-cell .inv-act.inv-pin.is-pinned { background: #f59e0b; color: #fff; }
.inv-modal-hr { border: 0; border-top: 1px solid #e5e9f2; margin: 16px 0 12px; }

/* row-level note bell (orders Product cell) — collapses variant/auto labels; hover (title) shows them. only rendered when a note exists */
#ordTable .row-note-ico { display: inline-flex; align-items: center; gap: 2px; margin-left: 5px; color: #d97706; cursor: help; font-size: 11px; vertical-align: middle; }
#ordTable .row-note-ico:hover { color: #b45309; }
#ordTable .row-note-ico .row-note-count { background: #d97706; color: #fff; font-size: 8.5px; font-weight: 700; border-radius: 8px; padding: 0 4px; line-height: 1.5; }

/* ===== Status Badges ===== */
.status-badge {
    padding: 6px 14px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
}

.status-active {
    background: #d4edda;
    color: #155724;
}

.status-inactive {
    background: #f8d7da;
    color: #721c24;
}

.status-admin {
    background: #d4edda;
    color: #155724;
}

.status-user {
    background: #cce5ff;
    color: #004085;
}

.status-current {
    background: #e3f2fd;
    color: #1565c0;
    font-size: 11px;
}

/* ===== Case Matrix Cells (distributer / fba / account cases DataTables) ===== */
.case-matrix-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #d4edda;
    color: #155724;
    font-size: 16px;
}

.case-matrix-miss {
    color: #c5c9d4;
    font-size: 16px;
    font-weight: 600;
}

body.dark-mode .case-matrix-hit {
    background: rgba(52, 168, 83, 0.18);
    color: #34a853;
}

body.dark-mode .case-matrix-miss {
    color: rgba(255,255,255,0.18);
}

/* ===== Typed-attribute case cells ===== */
.case-cell-num {
    display: inline-block;
    min-width: 38px;
    padding: 3px 10px;
    background: #e8f0fe;
    color: var(--navy-primary);
    border-radius: 4px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.case-cell-pill {
    display: inline-block;
    padding: 3px 10px;
    background: #fff3cd;
    color: #856404;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}
.case-cell-txt {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    color: #333;
    font-size: 12px;
}
body.dark-mode .case-cell-num {
    background: rgba(0,116,217,0.18);
    color: #4da3ff;
}
body.dark-mode .case-cell-pill {
    background: rgba(251,188,4,0.18);
    color: #fbbc04;
}
body.dark-mode .case-cell-txt { color: rgba(255,255,255,0.85); }

/* ===== Case attribute form (open-new-case modal) ===== */
.case-attr-section {
    margin: 18px 0;
    padding: 14px;
    background: #f7f9fc;
    border: 1px solid #e5e9f2;
    border-radius: 6px;
}
.case-attr-section-title {
    font-weight: 700;
    color: var(--navy-primary);
    margin-bottom: 12px;
    font-size: 13px;
    letter-spacing: .3px;
}
.case-attr-section-title small {
    font-weight: 400;
    color: #6c757d;
    margin-left: 6px;
    font-size: 11px;
}
.case-attr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 14px;
}
.case-attr-field {
    margin-bottom: 0 !important;
}
.case-attr-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px !important;
    margin-bottom: 4px !important;
}
.case-attr-type {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--navy-primary);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: .5px;
}
.case-attr-field input,
.case-attr-field select {
    font-size: 13px;
    padding: 6px 10px;
}

/* view modal — reported attributes table */
.view-attr-wrap {
    padding: 10px;
    background: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 4px;
    margin-bottom: 10px;
}
.view-attr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.view-attr-table th,
.view-attr-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #f0f2f7;
    text-align: left;
}
.view-attr-table th {
    color: #555;
    font-weight: 600;
    width: 40%;
}
.view-attr-table tr:last-child th,
.view-attr-table tr:last-child td { border-bottom: none; }
body.dark-mode .case-attr-section {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}
body.dark-mode .view-attr-wrap {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}
body.dark-mode .view-attr-table th { color: rgba(255,255,255,0.7); }
body.dark-mode .view-attr-table th,
body.dark-mode .view-attr-table td { border-bottom-color: rgba(255,255,255,0.08); }

/* ===== Forms ===== */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 14px;
}

.form-group label i {
    margin-right: 8px;
    color: var(--navy-accent);
}

/* asin lookup spinner — shown only while searching reverse sourcing */
.asin-spinner {
    display: none;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy-accent);
}
.asin-spinner.on {
    display: inline-block;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--input-border);
    border-radius: 2px;
    font-size: 16px;
    transition: all 0.3s;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--text-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--navy-accent);
    box-shadow: 0 0 0 2px rgba(0,116,217,0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
/* full-width field inside a 2-col .form-grid */
.form-grid .span-2 { grid-column: 1 / -1; }

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

.error {
    margin-top: 15px;
    margin-bottom: 15px;
    color: var(--danger);
    font-size: 14px;
    background: #fef2f2;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #fecaca;
}

/* ===== Modal ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

body.dark-mode .modal-overlay {
    background: rgba(0,0,0,0.8);
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--bg-card);
    border-radius: 4px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 24px var(--shadow-hover);
    transition: background-color 0.3s ease;
}

/* Move to Seasonal Products popup — 70% of screen width */
#seasonalPromoteModal .modal { width: 70%; max-width: 70%; }
@media (max-width: 768px) {
    #seasonalPromoteModal .modal { width: 95%; max-width: 95%; }
}

/* Manager notes thread modal — per (lead, manager) history + admin replies */
#rsMgrThreadModal .modal.mgr-thread-modal { width: 92%; max-width: 640px; }
.rs-modal-id { opacity: .7; font-weight: 400; }
.mgr-thread-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.mgr-comment { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; background: var(--bg-card, #fff); }
.mgr-comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.mgr-comment-author { font-weight: 600; font-size: 13px; color: var(--navy-primary, #001f3f); }
.mgr-comment-time { margin-left: auto; font-size: 11px; color: #94a3b8; }
.mgr-comment-body { font-size: 13px; color: #334155; white-space: pre-wrap; word-break: break-word; }
.mgr-thread-input { flex: 1 1 200px; min-width: 160px; padding: 8px 10px; font-size: 13px; border: 1px solid #d7def0; border-radius: 6px; }
.mgr-thread-input:focus { outline: none; border-color: var(--navy-accent, #0074D9); box-shadow: 0 0 0 2px rgba(0,116,217,.12); }
.mgr-thread-status { display: inline-flex; gap: 6px; margin-top: 10px; }
.mgr-thread-actions { margin-top: 10px; display: flex; justify-content: flex-end; }

/* threaded replies — recursive nesting with a FB-style connector line */
.mgr-comment.is-admin { border-color: #cfe0f5; background: #f5f9ff; }
.mgr-comment-role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #fff; background: var(--navy-accent, #0074D9); padding: 1px 7px; border-radius: 4px; }
.mgr-comment-foot { margin-top: 6px; display: flex; align-items: center; gap: 16px; }
.mgr-reply-link { background: none; border: none; padding: 0; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--navy-accent, #0074D9); display: inline-flex; align-items: center; gap: 5px; }
.mgr-reply-link:hover { text-decoration: underline; }
.mgr-del-link { color: #dc2626; }
.mgr-del-link:hover { color: #b91c1c; }
.mgr-reply-slot:empty { display: none; }
.mgr-reply-box { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.mgr-reply-actions { display: flex; justify-content: flex-end; gap: 8px; }
.mgr-replies { margin: 10px 0 0 18px; padding-left: 14px; border-left: 2px solid #e2e8f0; display: flex; flex-direction: column; gap: 10px; }
.mgr-replies.mgr-replies-flat { margin-left: 0; }

@media (max-width: 768px) { #rsMgrThreadModal .modal.mgr-thread-modal { width: 96%; max-width: 96%; } .mgr-replies { margin-left: 8px; padding-left: 10px; } }

.modal-header {
    padding: 24px 30px;
    background: var(--navy-primary);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px 4px 0 0;
}

body.dark-mode .modal-header {
    background: var(--navy-light);
}

.modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.close-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.close-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: rotate(90deg);
}

.modal-body {
    padding: 30px;
    color: var(--text-primary);
}

/* ===== Filters Section ===== */
.filters-section {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 25px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--navy-accent);
}

.filters-header h3 {
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

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

.filter-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--input-border);
    border-radius: 3px;
    font-size: 14px;
    transition: all 0.3s;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--text-primary);
}

.filter-input:focus {
    outline: none;
    border-color: var(--navy-accent);
    box-shadow: 0 0 0 3px rgba(0,116,217,0.15);
}

/* ===== Account Info Card ===== */
.account-info-card {
    background: var(--bg-card);
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border-left: 4px solid var(--navy-accent);
    margin-bottom: 30px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.account-info-card h3 {
    color: var(--text-primary);
    font-size: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-row {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-light);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: var(--text-secondary);
    width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-value {
    color: var(--text-primary);
    flex: 1;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
    .sidebar {
        width: 220px;
    }

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

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

    .modal {
        width: 95%;
    }

    .filters-section {
        padding: 15px;
    }

    .filters-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .filters-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .filters-header .btn-sm {
        width: 100%;
    }

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

    .info-label {
        width: 100%;
    }

    input, select, textarea {
        font-size: 16px !important;
    }
}

/* ===== Login Page Specific ===== */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
}

.login-box {
    background: white;
    padding: 50px 40px;
    border-radius: 28px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.22);
    width: 100%;
    max-width: 420px;
    text-align: center;
}

/* rounded/curved login — scoped so the rest of the app is untouched */
.login-box .form-group input { border-radius: 12px; }
.login-box .btn,
.login-box .btn-block { border-radius: 30px; }
.login-box .google-oauth-btn { border-radius: 30px; }
.login-box .info-banner { border-radius: 14px; }
.login-box .success,
.login-box .error { border-radius: 12px; }

.login-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 25px;
    border: 3px solid var(--navy-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.login-box h2 {
    margin-bottom: 35px;
    color: var(--navy-primary);
    font-size: 26px;
    font-weight: 600;
}

.login-footer {
    margin-top: 24px;
    font-size: 13px;
    color: #666;
}

@media (max-width: 480px) {
    .login-box {
        padding: 32px 24px;
    }
}

/* ===== Settings Page - 2x2 Grid Layout ===== */

/* Main Grid */
.settings-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 30px;
}

/* Mega Cards */
.settings-mega-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 2px solid #e9ecef;
    transition: all 0.3s;
}

.settings-mega-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
    border-color: var(--navy-accent);
}

/* Card Header */
.settings-card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 24px;
    border-bottom: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 16px;
}

.settings-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.settings-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy-primary);
    margin: 0 0 4px 0;
}

.settings-card-subtitle {
    font-size: 13px;
    color: #666;
    margin: 0;
    font-weight: 500;
}

/* Card Body */
.settings-card-body {
    padding: 24px;
}

/* Stat Items (inline) */
.stat-item-inline {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid #e9ecef;
    transition: all 0.3s;
}

.stat-item-inline:last-child {
    margin-bottom: 0;
}

.stat-item-inline:hover {
    background: #fff;
    border-color: var(--navy-accent);
    box-shadow: 0 2px 8px rgba(0, 116, 217, 0.1);
}

.stat-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.stat-item-content {
    flex: 1;
}

.stat-item-label {
    font-size: 13px;
    color: #666;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-item-value {
    font-size: 16px;
    color: var(--navy-primary);
    font-weight: 700;
}

/* Control Group */
.control-group {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.control-group-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.control-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 31, 63, 0.2);
}

.control-info {
    flex: 1;
}

.control-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--navy-primary);
    margin-bottom: 4px;
}

.control-desc {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.control-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: white;
    border-radius: 8px;
    border: 2px solid #e9ecef;
}

/* Large Toggle Switch */
.toggle-switch-large {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.toggle-input-large {
    display: none;
}

.toggle-label-large {
    display: block;
    width: 80px;
    height: 40px;
    background: #ccc;
    border-radius: 20px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-slider-large {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.toggle-input-large:checked + .toggle-label-large {
    background: var(--success);
}

.toggle-input-large:checked + .toggle-label-large .toggle-slider-large {
    transform: translateX(40px);
}

.toggle-label-large:hover {
    opacity: 0.9;
}

/* Toggle Status */
.toggle-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-enabled {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.2);
}

.status-disabled {
    background: #ccc;
    box-shadow: none;
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.2);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(52, 168, 83, 0.1);
    }
}

.status-text {
    font-size: 14px;
    font-weight: 600;
}

/* Info Banner */
.info-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 116, 217, 0.05);
    border: 1px solid rgba(0, 116, 217, 0.2);
    border-left: 4px solid var(--navy-accent);
    padding: 14px 16px;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

.info-banner i {
    color: var(--navy-accent);
    font-size: 18px;
    flex-shrink: 0;
}

/* Security Features */
.security-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid #e9ecef;
    transition: all 0.3s;
}

.security-feature:last-child {
    margin-bottom: 0;
}

.security-feature:hover {
    background: white;
    border-color: var(--success);
    box-shadow: 0 2px 8px rgba(52, 168, 83, 0.1);
}

.security-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--success) 0%, #2d9148 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(52, 168, 83, 0.2);
}

.security-feature-content {
    flex: 1;
}

.security-feature-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy-primary);
    margin-bottom: 4px;
}

.security-feature-desc {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.security-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.security-feature-badge.active {
    background: rgba(52, 168, 83, 0.1);
    color: var(--success);
    border: 2px solid rgba(52, 168, 83, 0.3);
}

/* Server Info Items */
.server-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f1f3f5;
}

.server-info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.server-info-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #666;
    font-weight: 600;
}

.server-info-label i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-accent);
    font-size: 16px;
}

.server-info-value {
    font-size: 14px;
    color: var(--navy-primary);
    font-weight: 700;
}

.version-badge,
.upload-badge {
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 31, 63, 0.2);
}

.upload-badge {
    background: linear-gradient(135deg, var(--success) 0%, #2d9148 100%);
}

.time-value {
    font-family: 'Courier New', monospace;
    background: rgba(0, 116, 217, 0.05);
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--navy-accent);
    font-size: 13px;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.toggle-input {
    display: none;
}

.toggle-label {
    display: block;
    width: 60px;
    height: 32px;
    background: #ccc;
    border-radius: 16px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s;
}

.toggle-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-input:checked + .toggle-label {
    background: var(--success);
}

.toggle-input:checked + .toggle-label .toggle-slider {
    transform: translateX(28px);
}

.toggle-label:hover {
    opacity: 0.9;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.info-item {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 24px;
    border-radius: 4px;
    text-align: center;
    border: 1px solid #dee2e6;
    transition: all 0.3s;
}

.info-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--navy-accent);
}

.info-label {
    font-size: 12px;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.info-value {
    font-size: 18px;
    color: var(--navy-primary);
    font-weight: 700;
}

/* Dashboard Grid 4 */
.dashboard-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* Security Cards */
.security-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.security-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    gap: 16px;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.security-card:hover {
    border-color: var(--success);
    box-shadow: 0 4px 12px rgba(52, 168, 83, 0.15);
    transform: translateY(-2px);
}

.security-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.security-card-content {
    flex: 1;
}

.security-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy-primary);
    margin-bottom: 6px;
}

.security-card-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.4;
}

.security-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(52, 168, 83, 0.1);
    color: var(--success);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(52, 168, 83, 0.2);
}

/* Info Table */
.info-table {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.info-table-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f3f5;
    transition: all 0.3s;
}

.info-table-row:last-child {
    border-bottom: none;
}

.info-table-row:hover {
    background: #f8f9fa;
}

.info-table-label {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-table-label i {
    color: var(--navy-accent);
    width: 20px;
    text-align: center;
}

.info-table-value {
    font-size: 14px;
    color: var(--navy-primary);
    font-weight: 600;
    font-family: 'Courier New', monospace;
    background: rgba(0, 31, 63, 0.05);
    padding: 6px 12px;
    border-radius: 4px;
}

/* Mobile Responsive */
@media (max-width: 968px) {
    .settings-grid-2x2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .settings-card-header {
        padding: 20px;
    }

    .settings-card-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .settings-card-title {
        font-size: 18px;
    }

    .settings-card-body {
        padding: 20px;
    }

    .control-group-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .control-toggle-wrapper {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .toggle-status {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .setting-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .toggle-switch {
        align-self: flex-start;
    }

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

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

    .security-info-grid {
        grid-template-columns: 1fr;
    }

    .info-table-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .info-table-value {
        width: 100%;
        text-align: left;
    }

    .server-info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .server-info-value {
        width: 100%;
    }
}

/* ===== Sidebar Submenu Styles ===== */
.sidebar-menu .has-submenu {
    position: relative;
}

.submenu-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.submenu-arrow {
    font-size: 12px;
    margin-left: auto;
    transition: transform 0.3s ease;
    color: rgba(255, 255, 255, 0.7);
}

.submenu-toggle.open .submenu-arrow {
    transform: rotate(180deg);
    color: white;
}

.sidebar-submenu {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    margin-top: 4px;
}

.sidebar-submenu.open {
    max-height: 500px;
    opacity: 1;
    margin-bottom: 8px;
}

.sidebar-submenu li {
    margin-bottom: 0;
}

.sidebar-submenu a {
    width: 100%;
    text-align: left;
    padding: 12px 16px 12px 48px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 400;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.sidebar-submenu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border-left-color: var(--navy-accent);
    padding-left: 52px;
}

.sidebar-submenu a.active {
    background: rgba(0, 116, 217, 0.25);
    color: white;
    border-left-color: var(--navy-accent);
    font-weight: 500;
}

.sidebar-submenu a i {
    width: 16px;
    text-align: center;
    font-size: 14px;
}

.submenu-toggle.active {
    background: var(--navy-accent);
    color: white;
}

@media (max-width: 768px) {
    .sidebar-submenu a {
        padding: 12px 16px 12px 40px;
        font-size: 13px;
    }

    .sidebar-submenu a:hover {
        padding-left: 44px;
    }
}

/* ===== Setup Page Styles ===== */
.setup-wrapper {
    min-height: 100vh;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
}

.setup-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.setup-container h2 {
    color: var(--navy-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.setup-container .subtitle {
    color: #666;
    margin-bottom: 30px;
    font-size: 14px;
}

.setup-container hr {
    border: none;
    border-top: 2px solid var(--navy-primary);
    margin-bottom: 30px;
}

.log-item {
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: 4px;
    border-left: 4px solid;
    display: flex;
    align-items: center;
    gap: 10px;
}

.log-success {
    background: #d4edda;
    border-left-color: var(--success);
    color: #155724;
}

.log-error {
    background: #f8d7da;
    border-left-color: var(--danger);
    color: #721c24;
}

.log-info {
    background: #d1ecf1;
    border-left-color: var(--navy-accent);
    color: #0c5460;
}

.log-warn {
    background: #fff3cd;
    border-left-color: #ffc107;
    color: #856404;
}

.setup-reset-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe9e9 100%);
    border: 1px solid #f5c2c7;
    border-left: 4px solid #c5221f;
    border-radius: 6px;
    padding: 14px 18px;
    margin: 8px 0 18px;
    flex-wrap: wrap;
}
.setup-reset-banner.reset-on {
    background: linear-gradient(135deg, #fde7e9 0%, #fbd0d4 100%);
    border-color: #c5221f;
}
.setup-reset-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #6f1d1b;
    font-size: 13px;
}
.setup-reset-text strong {
    font-size: 14px;
    color: #c5221f;
}
.setup-reset-btn {
    background: #c5221f;
    color: #fff !important;
    padding: 9px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .15s;
}
.setup-reset-btn:hover { background: #9b1a18; }
button.setup-reset-btn { border: none; cursor: pointer; font-family: inherit; }
.setup-danger-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.setup-danger-form input[type="password"] { padding: 8px 12px; border: 1px solid #d7def0; border-radius: 6px; font-size: 13px; min-width: 180px; }
.setup-danger-form input[type="password"]:focus { outline: none; border-color: #0074D9; box-shadow: 0 0 0 2px rgba(0,116,217,.12); }
.setup-reset-active {
    background: #c5221f;
    color: #fff;
    padding: 9px 16px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.credentials-box {
    background: #fff3cd;
    padding: 20px;
    border-radius: 4px;
    margin: 20px 0;
    border-left: 4px solid #ffc107;
}

.credentials-box strong {
    color: var(--navy-primary);
}

/* ===== Theme Toggle ===== */
.sidebar .sidebar-theme {
    padding: 16px 20px;
    background: rgba(0,0,0,0.15);
}

.sidebar .sidebar-theme button {
    width: 100% !important;
    padding: 14px 16px !important;
    background: linear-gradient(135deg, rgba(251,188,4,0.2) 0%, rgba(251,188,4,0.3) 100%) !important;
    border: 1px solid rgba(251,188,4,0.4) !important;
    color: white !important;
    cursor: pointer !important;
    border-radius: 3px !important;
    font-size: 15px !important;
    transition: all 0.3s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-weight: 600 !important;
    font-family: inherit;
    text-align: center;
    box-sizing: border-box;
}

.sidebar .sidebar-theme button:hover {
    background: linear-gradient(135deg, rgba(251,188,4,0.4) 0%, rgba(251,188,4,0.5) 100%) !important;
    transform: translateY(-2px);
}

.sidebar .sidebar-theme button i {
    font-size: 16px;
    width: auto;
}

.sidebar .sidebar-theme button span {
    font-size: 15px;
}

/* ===== Google Translate Widget ===== */
/* Hide Google Translate top bar */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

.VIpgJd-ZVi9od-ORHb-OEVmcd {
    display: none !important;
}

/* Dark mode specific overrides */
body.dark-mode .login-container {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

body.dark-mode .login-box {
    background: var(--bg-card);
    box-shadow: 0 4px 20px var(--shadow-hover);
}

body.dark-mode .login-box h2 {
    color: var(--text-primary);
}

/* Login Page Theme Toggle */
.login-theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: all 0.3s ease;
    z-index: 1000;
}

.login-theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px var(--shadow-hover);
}

body.dark-mode .login-theme-toggle {
    background: var(--bg-card);
    border-color: var(--navy-accent);
    color: #ffd700;
}

body.dark-mode .setup-wrapper {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

body.dark-mode .setup-container {
    background: var(--bg-card);
    box-shadow: 0 4px 20px var(--shadow-hover);
}

body.dark-mode .setup-container h2 {
    color: var(--text-primary);
}

body.dark-mode .setup-container .subtitle {
    color: var(--text-muted);
}

body.dark-mode .setup-container hr {
    border-top-color: var(--border-color);
}

body.dark-mode .log-item {
    border-left-width: 4px;
}

body.dark-mode .log-success {
    background: rgba(52, 168, 83, 0.15);
    color: #6fcf97;
}

body.dark-mode .log-error {
    background: rgba(234, 67, 53, 0.15);
    color: #f5857a;
}

body.dark-mode .log-info {
    background: rgba(0, 116, 217, 0.15);
    color: #5dade2;
}

body.dark-mode .credentials-box {
    background: rgba(251, 188, 4, 0.1);
    border-color: rgba(251, 188, 4, 0.4);
    color: var(--text-secondary);
}

body.dark-mode .credentials-box strong {
    color: var(--text-primary);
}

/* Settings Page Dark Mode */
body.dark-mode .settings-mega-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

body.dark-mode .settings-card-header {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-bottom-color: var(--border-color);
}

body.dark-mode .settings-card-title {
    color: var(--text-primary);
}

body.dark-mode .settings-card-subtitle {
    color: var(--text-muted);
}

body.dark-mode .stat-item-inline {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .stat-item-label {
    color: var(--text-muted);
}

body.dark-mode .stat-item-value {
    color: var(--text-primary);
}

body.dark-mode .control-group {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
    border-color: var(--border-color);
}

body.dark-mode .control-title {
    color: var(--text-primary);
}

body.dark-mode .control-desc {
    color: var(--text-muted);
}

body.dark-mode .control-toggle-wrapper {
    background: var(--bg-card);
    border-color: var(--border-color);
}

body.dark-mode .info-banner {
    background: rgba(0, 116, 217, 0.1);
    border-color: rgba(0, 116, 217, 0.3);
    color: var(--text-secondary);
}

body.dark-mode .security-feature {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .security-feature-name {
    color: var(--text-primary);
}

body.dark-mode .security-feature-desc {
    color: var(--text-muted);
}

body.dark-mode .server-info-item {
    border-bottom-color: var(--border-light);
}

body.dark-mode .server-info-label {
    color: var(--text-muted);
}

body.dark-mode .server-info-value {
    color: var(--text-primary);
}

body.dark-mode .time-value {
    background: rgba(0, 116, 217, 0.1);
    color: var(--navy-accent);
}

/* Dashboard Page Dark Mode */
body.dark-mode .data-section p {
    color: var(--text-secondary);
}

body.dark-mode .data-section strong {
    color: var(--text-primary);
}

/* Logs Page Dark Mode - Empty Details */
body.dark-mode em.text-muted,
body.dark-mode .text-muted em {
    color: var(--text-muted) !important;
}

/* Version/Upload Badges in Dark Mode */
body.dark-mode .version-badge,
body.dark-mode .upload-badge {
    color: white !important;
}

/* Ensure form inputs text is visible in dark mode */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-muted);
}

/* Filter labels in dark mode */
body.dark-mode .filter-group label {
    color: var(--text-secondary);
}

/* Settings page stat items dark mode */
body.dark-mode .stat-item-inline:hover {
    background: var(--bg-card);
    border-color: var(--navy-accent);
}

body.dark-mode .security-feature:hover {
    background: var(--bg-card);
    border-color: var(--success);
}

/* Ensure all header welcome text is visible */
body.dark-mode .header > div {
    color: var(--text-secondary) !important;
}

/* ===== UI Customization / Theme Section ===== */
.theme-preview {
    background: var(--bg-secondary);
    transition: all 0.3s ease;
}

body.dark-mode .theme-preview {
    background: var(--bg-card);
    border-color: var(--border-color) !important;
}

.theme-preview h4 {
    color: var(--text-primary);
}

/* Color picker styling */
input[type="color"] {
    -webkit-appearance: none;
    border: none;
    background: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* Preset buttons */
.preset-btn {
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.preset-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Theme mode options */
.theme-mode-option {
    transition: all 0.3s ease;
}

.theme-mode-option:hover {
    border-color: var(--navy-accent) !important;
    background: var(--bg-secondary);
}

.theme-mode-option:has(input:checked) {
    border-color: var(--navy-accent) !important;
    background: rgba(0, 116, 217, 0.1);
}

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

body.dark-mode .theme-mode-option:hover {
    border-color: var(--navy-accent) !important;
    background: var(--bg-secondary);
}

body.dark-mode .theme-mode-option:has(input:checked) {
    border-color: var(--navy-accent) !important;
    background: rgba(0, 116, 217, 0.2);
}

/* Responsive theme form */
@media (max-width: 768px) {
    #themeForm .form-grid {
        grid-template-columns: 1fr !important;
    }

    .preset-btn {
        width: 35px !important;
        height: 35px !important;
    }

    .theme-mode-option {
        flex: 1;
        justify-content: center;
    }
}

/* SweetAlert2 Dark Mode */
body.dark-mode .swal2-popup {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .swal2-title {
    color: var(--text-primary) !important;
}

body.dark-mode .swal2-html-container {
    color: var(--text-secondary) !important;
}

body.dark-mode .swal2-input,
body.dark-mode .swal2-textarea {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

/* ===== Text Utility Classes ===== */
.text-muted {
    color: var(--text-muted) !important;
}

.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

/* ===== COMPREHENSIVE MOBILE RESPONSIVE STYLES ===== */

/* Smooth scrolling for better UX */
html {
    scroll-behavior: smooth;
}

/* Prevent horizontal overflow */
body {
    overflow-x: hidden;
}

/* Mobile-optimized scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--navy-accent);
    border-radius: 3px;
}

/* Safe area padding for iOS devices with notch */
@supports (padding: max(0px)) {
    .mobile-bottom-nav {
        padding-bottom: max(env(safe-area-inset-bottom), 8px);
        height: calc(65px + env(safe-area-inset-bottom, 0px));
    }

    .main-content {
        padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
    }
}

/* ===== Mobile Responsive (max-width: 768px) ===== */
@media (max-width: 768px) {
    /* Main content adjustments */
    .main-content {
        padding: 15px;
        padding-bottom: 90px;
    }

    /* Header mobile optimization */
    .header {
        padding: 15px;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .header h1 {
        font-size: 18px;
        width: 100%;
    }

    .header > div {
        font-size: 13px;
        width: 100%;
        text-align: right;
    }

    /* Data section mobile */
    .data-section {
        padding: 15px;
        border-radius: 6px;
    }

    .section-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

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

    .section-header .btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    /* Stat cards mobile */
    .stat-card {
        padding: 20px;
    }

    .stat-card-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
        margin-bottom: 12px;
    }

    .stat-card-value {
        font-size: 28px;
    }

    .stat-card-label {
        font-size: 12px;
    }

    /* Charts mobile */
    .chart-card {
        padding: 15px;
    }

    .chart-container {
        height: 250px;
    }

    /* Buttons mobile - larger touch targets */
    .btn {
        padding: 14px 20px;
        font-size: 15px;
        min-height: 48px;
    }

    .btn-sm {
        padding: 12px 16px;
        min-height: 44px;
    }

    /* Form inputs mobile - larger touch targets */
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 16px;
        font-size: 16px !important;
        min-height: 52px;
        border-radius: 6px;
    }

    .form-group label {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .form-group {
        margin-bottom: 18px;
    }

    .form-actions {
        flex-direction: column;
        gap: 12px;
    }

    .form-actions .btn {
        width: 100%;
    }

    /* Filter inputs mobile */
    .filter-input {
        padding: 14px 12px;
        font-size: 16px !important;
        min-height: 50px;
    }

    /* Modal mobile full screen */
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal {
        width: 100%;
        max-width: 100%;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
        margin: 0;
    }

    .modal-header {
        padding: 20px;
        border-radius: 16px 16px 0 0;
    }

    .modal-header h3 {
        font-size: 18px;
    }

    .close-btn {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    .modal-body {
        padding: 20px;
        max-height: calc(95vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Account info cards mobile */
    .account-info-card {
        padding: 20px;
        margin-bottom: 20px;
    }

    .account-info-card h3 {
        font-size: 18px;
    }

    .info-row {
        flex-direction: column;
        gap: 8px;
        padding: 12px 0;
    }

    .info-label {
        width: 100%;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-value {
        font-size: 15px;
        font-weight: 500;
    }

    /* DataTables mobile */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.dataTable {
        min-width: 600px;
    }

    table.dataTable thead th {
        padding: 12px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    table.dataTable tbody td {
        padding: 14px 10px !important;
        font-size: 13px !important;
    }

    /* Action icons mobile - larger touch targets */
    .action-icon {
        padding: 10px 12px;
        font-size: 18px;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* DataTables buttons mobile */
    .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 15px;
    }

    .dt-button {
        flex: 1;
        min-width: calc(33.33% - 6px);
        padding: 12px 10px !important;
        font-size: 12px !important;
        text-align: center;
        margin-right: 0 !important;
    }

    /* DataTables search and length mobile */
    .dataTables_length,
    .dataTables_filter {
        width: 100%;
        margin-bottom: 15px;
        text-align: left !important;
    }

    .dataTables_length select,
    .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 8px;
        padding: 12px !important;
        font-size: 16px !important;
    }

    .dataTables_info {
        font-size: 12px;
        padding: 10px 0;
    }

    .dataTables_paginate {
        padding-top: 15px;
    }

    .dataTables_paginate .paginate_button {
        padding: 10px 14px !important;
        min-width: 44px;
        min-height: 44px;
    }

    /* Login page mobile */
    .login-container {
        padding: 15px;
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }

    .login-box {
        padding: 30px 20px;
        border-radius: 12px;
        width: 100%;
        max-width: 100%;
    }

    .login-logo {
        width: 90px;
        height: 90px;
        margin-bottom: 20px;
    }

    .login-box h2 {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .login-box .form-group input {
        padding: 16px;
    }

    .login-box .btn {
        padding: 16px;
        font-size: 16px;
    }

    /* Settings page mobile */
    .settings-grid-2x2 {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .settings-mega-card {
        border-radius: 8px;
    }

    .settings-card-header {
        padding: 16px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .settings-card-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .settings-card-title {
        font-size: 16px;
    }

    .settings-card-body {
        padding: 16px;
    }

    .control-group {
        padding: 15px;
        margin-bottom: 12px;
    }

    .control-group-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .control-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .control-title {
        font-size: 15px;
    }

    .control-toggle-wrapper {
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }

    /* Security features mobile */
    .security-feature {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 14px;
    }

    .security-feature-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    /* Server info mobile */
    .server-info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 0;
    }

    /* Stat items inline mobile */
    .stat-item-inline {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 14px;
    }

    .stat-item-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    /* Status badges mobile */
    .status-badge {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* Filters mobile */
    .filters-section {
        padding: 12px;
        margin-bottom: 15px;
    }

    .filters-header {
        padding-bottom: 12px;
        margin-bottom: 15px;
    }

    .filters-header h3 {
        font-size: 16px;
    }

    .filters-grid {
        gap: 12px;
    }

    .filter-group label {
        font-size: 12px;
    }

    /* Profile image section mobile */
    .profile-image-container {
        max-width: 100%;
    }

    /* Theme customization mobile */
    #themeForm .form-grid {
        grid-template-columns: 1fr !important;
    }

    .preset-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .theme-mode-option {
        padding: 12px !important;
    }

    .theme-preview {
        padding: 15px !important;
    }
}

/* ===== Extra Small Devices (max-width: 480px) ===== */
@media (max-width: 480px) {
    .main-content {
        padding: 10px;
        padding-bottom: 85px;
    }

    .header {
        padding: 12px;
    }

    .header h1 {
        font-size: 16px;
    }

    .data-section {
        padding: 12px;
    }

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

    .stat-card {
        padding: 15px;
    }

    .stat-card-value {
        font-size: 24px;
    }

    .stat-card-label {
        font-size: 11px;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .chart-container {
        height: 200px;
    }

    .modal-body {
        padding: 15px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px;
    }

    table.dataTable thead th {
        padding: 10px 8px !important;
        font-size: 11px !important;
    }

    table.dataTable tbody td {
        padding: 12px 8px !important;
        font-size: 12px !important;
    }

    .dt-button {
        min-width: calc(50% - 4px);
        padding: 10px 8px !important;
        font-size: 11px !important;
    }

    .login-box {
        padding: 25px 15px;
    }

    .login-logo {
        width: 80px;
        height: 80px;
    }

    .login-box h2 {
        font-size: 20px;
    }

    .account-info-card {
        padding: 15px;
    }

    .info-label {
        font-size: 11px;
    }

    .info-value {
        font-size: 14px;
    }

    /* Mobile bottom nav extra small */
    .mobile-nav-item {
        padding: 6px 8px;
        min-width: 50px;
    }

    .mobile-nav-item i {
        font-size: 18px;
    }

    .mobile-nav-item span {
        font-size: 9px;
    }
}

/* ===== Landscape Mobile Orientation ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .mobile-bottom-nav {
        height: 55px;
    }

    .mobile-nav-item {
        padding: 5px 10px;
    }

    .mobile-nav-item i {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .mobile-nav-item span {
        font-size: 9px;
    }

    .main-content {
        padding-bottom: 70px;
    }

    .modal {
        max-height: 100vh;
        border-radius: 0;
    }

    .modal-body {
        max-height: calc(100vh - 70px);
    }
}

/* ===== Touch Device Optimizations ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets for touch devices */
    .btn {
        min-height: 48px;
    }

    .action-icon {
        min-width: 48px;
        min-height: 48px;
    }

    .sidebar-menu a,
    .sidebar-menu button {
        min-height: 50px;
    }

    .mobile-nav-item {
        min-height: 56px;
    }

    /* Remove hover effects on touch devices */
    .btn:hover {
        transform: none;
    }

    .stat-card:hover {
        transform: none;
    }

    .action-icon:hover {
        transform: none;
    }

    /* Add active states for touch feedback */
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    .action-icon:active {
        transform: scale(0.95);
        opacity: 0.8;
    }

    .mobile-nav-item:active {
        transform: scale(0.95);
        opacity: 0.9;
    }

    .sidebar-menu a:active,
    .sidebar-menu button:active {
        transform: scale(0.98);
    }
}

/* ===== iOS Specific Fixes ===== */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS 100vh issue */
    .login-container {
        min-height: -webkit-fill-available;
    }

    .app-container {
        min-height: -webkit-fill-available;
    }

    /* Fix for iOS input zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Fix for iOS momentum scrolling */
    .modal-body,
    .main-content,
    .sidebar {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Pull to Refresh Prevention ===== */
body {
    overscroll-behavior-y: contain;
}

/* ===== Tablet Responsive (768px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 220px;
    }

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

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

    .settings-grid-2x2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal {
        width: 85%;
        max-width: 700px;
    }
}

/* ===== Print Styles ===== */
@media print {
    .sidebar,
    .mobile-bottom-nav,
    .sidebar-overlay,
    .btn,
    .action-icon,
    .dt-buttons {
        display: none !important;
    }

    .main-content {
        margin: 0;
        padding: 20px;
    }

    .app-container {
        display: block;
    }
}

/* ===== Dark Mode Global Text Colors ===== */
body.dark-mode {
    color: var(--text-primary);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-primary) !important;
}

body.dark-mode p,
body.dark-mode span:not(.status-badge):not(.role-badge):not(.version-badge):not(.upload-badge),
body.dark-mode div:not(.sidebar):not(.modal-header):not(.stat-card-icon):not(.settings-card-icon),
body.dark-mode label {
    color: var(--text-secondary);
}

body.dark-mode .text-muted,
body.dark-mode .info-text,
body.dark-mode .help-text,
body.dark-mode em.text-muted {
    color: var(--text-muted) !important;
}

/* Account Page Dark Mode */
body.dark-mode .account-info-card {
    background: var(--bg-card);
    border-left-color: var(--navy-accent);
}

body.dark-mode .account-info-card h3 {
    color: var(--text-primary);
}

body.dark-mode .info-row {
    border-bottom-color: var(--border-light);
}

body.dark-mode .info-label {
    color: var(--text-secondary);
}

body.dark-mode .info-value {
    color: var(--text-primary);
}

/* Profile Image Section Dark Mode */
body.dark-mode .profile-image-container {
    background: var(--bg-secondary);
    border-color: var(--navy-accent);
}

body.dark-mode .profile-image-label {
    color: var(--text-muted) !important;
}

body.dark-mode #defaultProfileIcon {
    color: var(--navy-accent) !important;
}

/* Form Labels and Text Dark Mode */
body.dark-mode .form-group label {
    color: var(--text-secondary);
}

body.dark-mode .form-group label i {
    color: var(--navy-accent);
}

/* Section Headers Dark Mode */
body.dark-mode .section-header h2 {
    color: var(--text-primary);
}

body.dark-mode .data-section {
    background: var(--bg-card);
}

/* Info/Help Text Dark Mode */
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"] {
    color: var(--text-muted) !important;
}

/* Warning/Disabled Messages Dark Mode */
body.dark-mode #uploadDisabledMessage {
    background: rgba(251, 188, 4, 0.1) !important;
    border-color: rgba(251, 188, 4, 0.4) !important;
    color: #ffd54f !important;
}

/* File Input Dark Mode */
body.dark-mode input[type="file"] {
    background: var(--bg-secondary) !important;
    border-color: var(--navy-accent) !important;
    color: var(--text-primary) !important;
}

/* Header Welcome Text Dark Mode */
body.dark-mode .header {
    background: var(--bg-card);
    color: var(--text-primary);
}

body.dark-mode .header div {
    color: var(--text-secondary);
}

/* ===== Profile Image Section ===== */
.profile-section-grid {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}

.profile-image-display {
    text-align: center;
    flex-shrink: 0;
}

.profile-image-container {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--navy-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin: 0 auto 15px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image-container #defaultProfileIcon {
    font-size: 50px;
    color: var(--navy-accent);
}

.profile-image-label {
    font-size: 13px;
    color: var(--text-muted);
}

.profile-upload-form {
    flex: 1;
    min-width: 280px;
}

.file-input-styled {
    width: 100%;
    padding: 14px;
    border: 2px dashed var(--navy-accent);
    border-radius: 6px;
    background: var(--bg-secondary);
    font-size: 16px !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-input-styled:hover {
    border-color: var(--navy-primary);
    background: var(--bg-primary);
}

.help-text {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.warning-message {
    padding: 15px;
    background: rgba(251, 188, 4, 0.15);
    border: 1px solid rgba(251, 188, 4, 0.5);
    border-radius: 6px;
    color: var(--warning);
    margin-top: 15px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .profile-section-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .profile-image-display {
        width: 100%;
    }

    .profile-image-container {
        width: 100px;
        height: 100px;
    }

    .profile-image-container #defaultProfileIcon {
        font-size: 40px;
    }

    .profile-upload-form {
        width: 100%;
        min-width: unset;
    }

    .file-input-styled {
        padding: 16px;
    }
}

/* ===== Theme Customization Section Mobile ===== */
@media (max-width: 768px) {
    .theme-preview-container {
        padding: 15px;
    }

    .theme-preview-swatches {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    #previewPrimary,
    #previewSecondary,
    #previewAccent {
        width: 100% !important;
        height: 40px !important;
    }

    #previewButton {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
    }

    .theme-mode-option {
        flex: 1;
        justify-content: center;
        padding: 14px 16px !important;
    }
}

/* ===== Setup Guide Table (OAuth & SMTP) ===== */
.setup-guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.setup-guide-table thead tr {
    background: var(--navy-primary);
    color: white;
}

.setup-guide-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
}

.setup-guide-table td {
    padding: 14px 16px;
}

.setup-guide-table tbody tr {
    border-bottom: 1px solid var(--input-border, #e9ecef);
}

.setup-guide-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.setup-guide-table .step-num {
    font-weight: bold;
    color: var(--navy-accent);
    width: 50px;
}

.setup-guide-table .step-name {
    font-weight: 600;
    min-width: 180px;
}

.setup-guide-table .step-final {
    background: rgba(52, 168, 83, 0.08);
}

.setup-guide-table .step-final .step-num {
    color: var(--success);
}

.setup-guide-table .step-final .step-name {
    color: var(--success);
}

.setup-guide-table .step-section-header td {
    background: var(--navy-primary);
    color: #fff;
    font-weight: 600;
    padding: 10px 16px;
}

.setup-guide-table code {
    background: var(--input-border, #e9ecef);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    display: inline-block;
    margin-top: 6px;
    word-break: break-all;
}

body.dark-mode .setup-guide-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .setup-guide-table .step-final {
    background: rgba(52, 168, 83, 0.1);
}

body.dark-mode .setup-guide-table .step-section-header td {
    background: var(--navy-light);
}

/* ===== Credential Status Indicator ===== */
.credential-status {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.credential-input-wrapper {
    position: relative;
}

/* ===== Success Message ===== */
.success {
    margin-top: 15px;
    margin-bottom: 15px;
    color: var(--success);
    font-size: 14px;
    background: #f0fdf4;
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid #bbf7d0;
}

body.dark-mode .success {
    background: rgba(52, 168, 83, 0.1);
    border-color: rgba(52, 168, 83, 0.3);
}

/* ===== Login Page Utilities ===== */
.login-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 20px;
}

.login-subtitle .highlight {
    color: var(--navy-accent);
    font-weight: 600;
}

.login-link {
    color: var(--navy-accent);
    text-decoration: none;
    font-weight: 500;
}

.login-link:hover {
    text-decoration: underline;
}

.login-footer-link {
    margin-bottom: 8px;
}

/* ===== OTP Input ===== */
.otp-input {
    text-align: center;
    font-size: 24px;
    letter-spacing: 8px;
    font-weight: bold;
}

/* ===== Full Width Button ===== */
.btn-block {
    width: 100%;
}

/* ===== Remember Me & Forgot Password Row ===== */
.login-options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 13px;
}

.remember-me-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-muted);
}

.remember-me-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--navy-accent);
}

/* ===== OAuth Divider ===== */
.oauth-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 12px;
}

.oauth-divider hr {
    flex: 1;
    border: none;
    border-top: 1px solid var(--border-color);
}

.oauth-divider span {
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
}

/* ===== Google OAuth Button ===== */
.google-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.google-oauth-btn:hover {
    border-color: #4285F4;
    background: rgba(66, 133, 244, 0.05);
}

/* ===== SMTP Setup Utilities ===== */
.smtp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.smtp-select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.smtp-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.smtp-actions .btn {
    flex: 1;
}

.card-divider {
    margin: 16px 0;
    border: none;
    border-top: 1px solid var(--border-color);
}

/* ===== Resend OTP Section ===== */
.resend-section {
    margin-top: 20px;
    text-align: center;
}

.resend-countdown {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 10px;
}

.resend-countdown .timer {
    font-weight: bold;
    color: var(--navy-accent);
}

/* ===== Card Icon Gradient Variants ===== */
.icon-gradient-navy {
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
}
.icon-gradient-accent {
    background: linear-gradient(135deg, var(--navy-accent) 0%, #0056a8 100%);
}
.icon-gradient-navy-accent {
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-accent) 100%);
}
.icon-gradient-light {
    background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy-hover) 100%);
}
.icon-gradient-success {
    background: linear-gradient(135deg, #34a853 0%, #2d9148 100%);
}
.icon-gradient-blue {
    background: linear-gradient(135deg, #0074D9 0%, #0056a8 100%);
}
.icon-gradient-warning {
    background: linear-gradient(135deg, #fbbc04 0%, #e0a800 100%);
}

/* ===== Stat Icon Color Variants ===== */
.stat-icon-success {
    background: rgba(52, 168, 83, 0.1);
    color: var(--success);
}
.stat-icon-accent {
    background: rgba(0, 116, 217, 0.1);
    color: var(--navy-accent);
}
.stat-icon-warning {
    background: rgba(251, 188, 4, 0.1);
    color: var(--warning);
}
.stat-icon-danger {
    background: rgba(234, 67, 53, 0.1);
    color: var(--danger);
}

/* ===== Layout Utilities ===== */
.mb-24 { margin-bottom: 24px; }
.mb-30 { margin-bottom: 30px; }
.mt-24 { margin-top: 24px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }

/* ===== Quick Actions Bar ===== */
.quick-actions-bar {
    margin-bottom: 25px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ===== Card Body Variants ===== */
.card-body-flush {
    padding: 0;
}
.card-body-flush-scroll {
    padding: 0;
    overflow-x: auto;
}

/* ===== Info Banner Variants ===== */
.info-banner-inset {
    margin: 16px;
    border-radius: 8px;
}
.info-banner-top {
    margin-top: 10px;
}

/* ===== Button Group Inline ===== */
.btn-group-inline {
    display: flex;
    gap: 10px;
}

/* ===== Table Responsive Wrapper ===== */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-full-width {
    width: 100%;
}

/* ===== Data Table Flush ===== */
.data-table.data-table-flush {
    margin: 0;
}

/* ===== Skeleton Helpers ===== */
.skeleton-card-mb { margin-bottom: 20px; }
.skeleton-grid-mb { margin-bottom: 30px; }
.skeleton-w-50 { width: 50%; }
.skeleton-w-60 { width: 60%; }
.skeleton-w-70 { width: 70%; }
.skeleton-w-80 { width: 80%; }
.skeleton-mb-sm { margin-bottom: 12px; }
.skeleton-mb-md { margin-bottom: 16px; }
.skeleton-flex-1 { flex: 1; }
.skeleton-flex-2 { flex: 2; }

/* ===== Dashboard Activities ===== */
.activities-loading {
    padding: 30px;
    text-align: center;
    color: var(--text-muted);
}
.activities-loading .fa-spinner {
    font-size: 24px;
}
.activities-loading p {
    margin-top: 10px;
}
.activities-empty {
    padding: 30px;
    text-align: center;
    color: var(--text-muted);
}
.activities-empty .fa-inbox {
    font-size: 32px;
    margin-bottom: 10px;
}

/* ===== Dashboard Activity Table Cells ===== */
.action-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}
.action-badge-default {
    background: rgba(0, 116, 217, 0.1);
    color: var(--navy-accent);
}
.action-badge-success {
    background: rgba(52, 168, 83, 0.1);
    color: var(--success);
}
.action-badge-danger {
    background: rgba(234, 67, 53, 0.1);
    color: var(--danger);
}
.action-badge-warning {
    background: rgba(251, 188, 4, 0.1);
    color: var(--warning);
}
.activity-detail {
    color: var(--text-muted);
    font-size: 13px;
}
.activity-ip code {
    font-size: 12px;
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 3px;
}

.ip-mask-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ip-mask-wrap code {
    font-size: 12px;
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 3px;
}

.ip-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    padding: 2px 4px;
    transition: color 0.2s;
}

.ip-toggle-btn:hover {
    color: var(--navy-primary);
}
.activity-time {
    white-space: nowrap;
    font-size: 13px;
    color: var(--text-muted);
}

/* ===== Activity Tracker — type badges, page bar, headings ===== */
.act-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-secondary);
    color: var(--text-muted);
    white-space: nowrap;
}
.act-badge.pv { background: rgba(0, 116, 217, 0.12); color: #0074D9; }
.act-badge.act { background: rgba(52, 168, 83, 0.12); color: var(--success); }
.act-badge.auth { background: rgba(251, 188, 4, 0.16); color: #b8860b; }
.act-page-bar-track {
    width: 140px;
    max-width: 100%;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}
.act-page-bar {
    height: 8px;
    min-width: 4px;
    background: var(--navy-primary);
    border-radius: 4px;
}
.activity-subhead {
    margin: 26px 0 12px;
    font-size: 16px;
    color: var(--navy-primary);
}
.report-user-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-primary);
}

/* ===== Status Text Helpers ===== */
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info { color: #0074D9; }
.text-muted { color: var(--text-muted); }

/* ===== Logo Upload Section (settings.php) ===== */
.logo-upload-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}
.logo-preview-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
}
body.dark-mode .logo-preview-img {
    border-color: var(--border-color);
}
.logo-upload-controls {
    flex: 1;
}
.logo-upload-controls-inner {
    display: flex;
    gap: 10px;
    align-items: center;
}
.logo-upload-btn {
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    padding: 8px 16px;
}
.logo-file-name {
    color: var(--text-muted);
    font-size: 13px;
}
.logo-help-text {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 6px;
}

/* ===== Form Grid Variants ===== */
.form-grid-2col {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.form-grid-3col {
    grid-template-columns: repeat(3, 1fr);
}

/* ===== Theme Customization (account.php) ===== */
.theme-preview-container {
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
}
.theme-preview-title {
    margin-bottom: 15px;
    color: var(--text-primary);
}
.theme-preview-swatches {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}
.color-preview-box {
    width: 80px;
    height: 50px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
}
.preview-button-spacer {
    margin-left: 20px;
}
.color-picker-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.color-picker-input {
    width: 60px;
    height: 45px;
    padding: 2px;
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-radius: 4px;
}
.hex-input {
    flex: 1;
    text-transform: uppercase;
}
.color-help-text {
    color: var(--text-muted);
    margin-top: 5px;
    display: block;
}
.theme-mode-options {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}
.theme-mode-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.3s;
}
.theme-mode-option input[type="radio"] {
    width: 18px;
    height: 18px;
}
.icon-sun { color: #fbbc04; }
.icon-moon { color: #5dade2; }
.preset-colors-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ===== Preset Button Base Styles ===== */
.preset-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.preset-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ===== Profile Image Cover ===== */
.profile-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== UI Help Text ===== */
.ui-help-text {
    margin-bottom: 20px;
    color: var(--text-muted);
}

/* ===== New Classes Mobile Responsive ===== */
@media (max-width: 768px) {
    .setup-guide-table th,
    .setup-guide-table td {
        padding: 10px 12px;
        font-size: 13px;
    }

    .setup-guide-table .step-name {
        min-width: 120px;
    }

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

    .smtp-actions {
        flex-direction: column;
    }

    .login-options-row {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .form-grid-2col { grid-template-columns: 1fr; }
    .form-grid-3col { grid-template-columns: 1fr; }
    .theme-mode-options { flex-direction: column; gap: 10px; }
    .theme-preview-swatches { flex-direction: column; }
    .color-preview-box { width: 100%; }
    .logo-upload-row { flex-direction: column; align-items: flex-start; }
    .quick-actions-bar { justify-content: center; }

    .preset-btn {
        width: 45px !important;
        height: 45px !important;
    }
}

/* ===== Utility Classes ===== */
.initially-hidden {
    display: none;
}

/* ===== Select2 Theme Integration ===== */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    color: var(--text-primary);
    padding-left: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted);
}

/* multi-select — match the single-select look (height/border/radius) so Account & Assigned Staff read identical.
   key: reset the <ul>.select2-selection__rendered margin — the browser's default ul margin (~1em top/bottom) was inflating the box. */
.select2-container--default .select2-selection--multiple {
    min-height: 42px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    padding: 0 8px;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    margin: 0; padding: 0; width: 100%;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    line-height: normal;
}
.select2-container--default .select2-selection--multiple .select2-search--inline { margin: 0; }
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0; height: 34px; line-height: 34px; color: var(--text-primary);
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--text-muted); line-height: normal;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--navy-accent, #0074D9); color: #fff; border: none; border-radius: 4px; padding: 2px 8px; margin: 4px 0 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff; margin-right: 5px; border: none;
}

.select2-dropdown {
    background: var(--bg-secondary);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    z-index: 10060;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--input-border);
    border-radius: 4px;
    padding: 6px 10px;
    background: var(--input-bg);
    color: var(--text-primary);
}

.select2-container--default .select2-results__option {
    padding: 8px 12px;
    color: var(--text-primary);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--navy-accent);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--bg-primary);
}

body.dark-mode .select2-container--default .select2-selection--single {
    background: var(--input-bg);
    border-color: var(--input-border);
}

body.dark-mode .select2-dropdown {
    background: var(--bg-secondary);
    border-color: var(--input-border);
}

body.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

body.dark-mode .select2-container--default .select2-results__option {
    color: var(--text-primary);
}

body.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--bg-primary);
}

/* ===== Breadcrumbs ===== */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 12px 0;
    font-size: 13px;
    color: var(--text-muted);
}

.breadcrumb a {
    color: var(--navy-accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: var(--navy-primary);
    text-decoration: underline;
}

.breadcrumb a i {
    font-size: 12px;
}

.breadcrumb-sep {
    color: var(--text-muted);
    opacity: 0.5;
    font-weight: 300;
}

body.dark-mode .breadcrumb a:hover {
    color: #fff;
}

/* ===== Maintenance Page ===== */
.maintenance-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-primary);
    position: relative;
    padding: 20px;
}

.maintenance-admin-link {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--navy-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    opacity: 0.3;
    transition: opacity 0.3s, transform 0.2s;
    z-index: 10;
}

.maintenance-admin-link:hover {
    opacity: 1;
    transform: scale(1.1);
}

.maintenance-content {
    text-align: center;
    max-width: 520px;
    width: 100%;
}

.maintenance-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy-primary), var(--navy-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    box-shadow: 0 8px 32px rgba(0, 116, 217, 0.3);
}

.maintenance-icon i {
    font-size: 48px;
    color: #fff;
}

.maintenance-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--navy-primary);
    margin-bottom: 16px;
}

body.dark-mode .maintenance-title {
    color: var(--text-primary);
}

.maintenance-desc {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

.maintenance-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #e3f2fd;
    padding: 14px 20px;
    border-radius: 8px;
    border-left: 4px solid var(--navy-accent);
    font-size: 14px;
    color: var(--navy-primary);
    margin-bottom: 30px;
    text-align: left;
}

body.dark-mode .maintenance-info {
    background: rgba(0, 116, 217, 0.1);
    color: var(--text-secondary);
}

.maintenance-brand {
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.maintenance-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid var(--border-color);
}

.maintenance-brand p {
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== Maintenance Card Warning (Settings) ===== */
.maintenance-card-warning {
    border-color: #ffc107;
}

.maintenance-card-warning:hover {
    border-color: #ff9800;
}

.icon-gradient-danger {
    background: linear-gradient(135deg, #ea4335, #ff6b6b);
}

.info-banner-warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #856404;
}

body.dark-mode .info-banner-warning {
    background: rgba(255, 193, 7, 0.1);
    border-left-color: #ffc107;
    color: #ffc107;
}

/* red variant for rejected onboarding */
.info-banner-danger {
    background: #fdecea;
    border: 1px solid rgba(217, 48, 37, 0.25);
    border-left: 4px solid #d93025;
    color: #a50e0e;
}
.info-banner-danger i { color: #d93025; }
.info-banner-danger a { color: #a50e0e; font-weight: 600; text-decoration: underline; }
body.dark-mode .info-banner-danger {
    background: rgba(217, 48, 37, 0.1);
    border-left-color: #d93025;
    color: #f28b82;
}
/* onboarding status banner spacing inside account card */
.acc-ob-banner { margin-bottom: 14px; }

.text-danger {
    color: #ea4335 !important;
}

/* ===== Notification Bell ===== */
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* header account switcher — non-admin with 2+ granted accounts (mirrors the admin filter slot) */
.hdr-acc-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4f7fb;
    border: 1px solid #d4dbe5;
    border-radius: 8px;
    padding: 5px 10px;
}
.hdr-acc-switch .hdr-acc-ic { color: var(--navy-accent); font-size: 14px; }
.hdr-acc-switch .hdr-acc-sel {
    border: none;
    background: transparent;
    color: var(--navy-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    max-width: 200px;
    outline: none;
}
.hdr-acc-switch .hdr-acc-sel:focus { outline: none; }
@media (max-width: 768px) { .hdr-acc-switch .hdr-acc-sel { max-width: 120px; } }

.notification-bell-wrapper {
    position: relative;
}

.notification-bell-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #555;
    position: relative;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s;
}

.notification-bell-btn:hover {
    background: #f0f0f0;
    color: var(--navy-primary);
}

/* account filter — text button, anchors its count badge */
#btnAccFilter {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ea4335;
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* count bubble on a sidebar nav link (e.g. Seasonal Products upcoming) — sits at the row's right edge */
.sidebar-badge {
    margin-left: auto;
    background: #ea4335;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}
/* keep the badge readable when the sidebar is collapsed to icons-only */
.sidebar.collapsed .sidebar-badge { display: none; }

.notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    max-height: 420px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.notification-dropdown.open {
    display: block;
}

.notification-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.notification-dropdown-header strong {
    font-size: 15px;
    color: var(--navy-primary);
}

.notification-dropdown-header button {
    background: transparent;
    border: none;
    color: var(--navy-accent);
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
}

.notification-dropdown-header button:hover {
    text-decoration: underline;
}

.notification-dropdown-body {
    max-height: 340px;
    overflow-y: auto;
}

.notification-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}

.notification-empty i {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background 0.2s;
}

.notification-item:hover {
    background: #f8f9fa;
}

.notification-item.unread {
    background: #e8f4fd;
    border-left: 3px solid var(--navy-accent);
}

.notification-item.unread:hover {
    background: #d6ecfb;
}

.notification-item-icon {
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.notification-item-content {
    flex: 1;
    min-width: 0;
}

.notification-item-title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 2px;
}

.notification-item-message {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-item-time {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

.notification-item-mark {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.notification-item-mark:hover {
    color: #34a853;
}

/* Dark Mode — Notification Bell */
body.dark-mode .notification-bell-btn {
    color: var(--text-secondary);
}

body.dark-mode .notification-bell-btn:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

body.dark-mode .notification-dropdown {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .notification-dropdown-header {
    background: var(--bg-primary);
    border-bottom-color: var(--border-color);
}

body.dark-mode .notification-dropdown-header strong {
    color: var(--text-primary);
}

body.dark-mode .notification-item {
    border-bottom-color: var(--border-color);
}

body.dark-mode .notification-item:hover {
    background: var(--bg-primary);
}

body.dark-mode .notification-item.unread {
    background: rgba(0, 116, 217, 0.1);
    border-left-color: var(--navy-accent);
}

body.dark-mode .notification-item.unread:hover {
    background: rgba(0, 116, 217, 0.15);
}

body.dark-mode .notification-item-title {
    color: var(--text-primary);
}

body.dark-mode .notification-item-message {
    color: var(--text-secondary);
}

body.dark-mode .notification-item-time {
    color: var(--text-muted);
}

/* ===== About Section Styles ===== */
.about-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.about-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 25px;
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
    border-radius: 4px;
    color: white;
}

.about-logo img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
    object-fit: cover;
}

.about-title h1 {
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: 700;
}

.about-dev {
    font-size: 14px;
    opacity: 0.9;
}

.about-card {
    background: white;
    border-radius: 4px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-left: 4px solid var(--navy-primary);
}

.about-card h2 {
    color: var(--navy-primary);
    font-size: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-card p {
    color: #555;
    line-height: 1.7;
    font-size: 15px;
}

.about-features {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.about-features li {
    padding: 14px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    align-items: flex-start;
    gap: 12px;
}

.about-features li i {
    color: var(--navy-primary);
    margin-right: 10px;
    font-size: 16px;
    flex-shrink: 0;
}

.about-table-wrapper {
    overflow-x: auto;
    margin: 15px 0;
}

.about-roles-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.about-roles-table th,
.about-roles-table td {
    padding: 12px 15px;
    text-align: center;
    border: 1px solid #e0e0e0;
}

.about-roles-table th {
    background: var(--navy-primary);
    color: white;
    font-weight: 600;
}

.about-roles-table th:first-child {
    text-align: left;
}

.about-roles-table td:first-child {
    text-align: left;
    font-weight: 500;
    background: #f8f9fa;
}

.role-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}

.role-admin {
    background: #d4edda;
    color: #155724;
}

.role-sf {
    background: #cce5ff;
    color: #004085;
}

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

.about-developer {
    border-left-color: var(--navy-accent);
}

.developer-info {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.developer-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--navy-primary);
    flex-shrink: 0;
}

.developer-details h3 {
    color: var(--navy-primary);
    font-size: 20px;
    margin-bottom: 5px;
}

.developer-brand {
    color: var(--navy-accent);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
}

.developer-details p {
    margin-bottom: 15px;
}

.developer-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dev-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
}

.dev-link.whatsapp {
    background: #25D366;
    color: white;
}

.dev-link.whatsapp:hover {
    background: #128C7E;
    transform: translateY(-2px);
}

.dev-link.youtube {
    background: #FF0000;
    color: white;
}

.dev-link.youtube:hover {
    background: #CC0000;
    transform: translateY(-2px);
}

.about-footer {
    text-align: center;
    padding: 25px;
    color: #666;
    font-size: 14px;
}

.about-version {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

/* Dark Mode — About Section */
body.dark-mode .about-card {
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

body.dark-mode .about-card h2 {
    color: var(--text-primary);
}

body.dark-mode .about-card p {
    color: var(--text-secondary);
}

body.dark-mode .about-features li {
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

body.dark-mode .about-roles-table th {
    background: var(--navy-primary);
}

body.dark-mode .about-roles-table td {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark-mode .about-roles-table td:first-child {
    background: var(--bg-primary);
}

body.dark-mode .developer-details h3 {
    color: var(--text-primary);
}

body.dark-mode .developer-avatar {
    border-color: var(--navy-accent);
}

body.dark-mode .about-footer {
    color: var(--text-secondary);
}

body.dark-mode .about-version {
    color: var(--text-muted);
}

/* Mobile — Notification Dropdown */
@media (max-width: 768px) {
    .notification-dropdown {
        width: 300px;
        right: -40px;
    }

    .header-right {
        gap: 10px;
        font-size: 13px;
    }

    .about-header {
        flex-direction: column;
        text-align: center;
    }

    .about-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .developer-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .developer-links {
        justify-content: center;
    }
}

/* ===== Softgenix v7.1 additions ===== */

/* sidebar group headers — subtle section labels, non-interactive */
.sidebar-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.38);
    pointer-events: none;
    user-select: none;
    margin-top: 4px;
    position: relative;
}
.sidebar-group-header::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 16px;
    right: 16px;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}
.sidebar-group-header:first-of-type {
    margin-top: 0;
    padding-top: 6px;
}
.sidebar-group-header:first-of-type::before {
    display: none;
}
.sidebar-group-header i {
    font-size: 11px !important;
    width: 14px !important;
    opacity: 0.55;
    text-align: center;
}
.sidebar.collapsed .sidebar-group-header span {
    display: none;
}
.sidebar.collapsed .sidebar-group-header {
    justify-content: center;
    padding: 12px 0 4px;
    margin-top: 8px;
}
.sidebar.collapsed .sidebar-group-header::before {
    left: 20%;
    right: 20%;
}
.sidebar.collapsed .sidebar-group-header i {
    font-size: 10px !important;
}

/* tighter nav item layout — expanded state only */
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) a,
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) button {
    padding: 11px 14px;
    font-size: 14px;
    gap: 12px;
}
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) a i,
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) button i {
    font-size: 15px;
    width: 18px;
    opacity: 0.85;
}

/* soften hover — expanded only */
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) a:hover,
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) button:hover {
    transform: translateX(2px);
    background: rgba(255, 255, 255, 0.07);
}
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) a:hover i,
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) button:hover i {
    opacity: 1;
}

/* active state accent bar — expanded only (collapsed has different layout) */
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) a.active,
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) button.active {
    position: relative;
}
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) a.active::before,
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) button.active::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 18%;
    bottom: 18%;
    width: 3px;
    background: #fff;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}
.sidebar-menu li:not(.sidebar-group-header) a.active i,
.sidebar-menu li:not(.sidebar-group-header) button.active i {
    opacity: 1;
}

/* reduce li margin between nav items for density */
.sidebar-menu li:not(.sidebar-group-header) {
    margin-bottom: 2px;
}

/* Kanban board — horizontal scroll, flex columns */
.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 8px 4px 16px;
    -webkit-overflow-scrolling: touch;
}
.kanban-column {
    min-width: 280px;
    flex: 0 0 280px;
    background: #f5f7fb;
    border-radius: 10px;
    padding: 12px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.kanban-column-header {
    position: sticky;
    top: 0;
    background: #f5f7fb;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid #e1e5ec;
    color: #001f3f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}
.kanban-column-count {
    background: #0074D9;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.kanban-card {
    background: #fff;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 31, 63, 0.12);
}
.kanban-card:active {
    cursor: grabbing;
}
.kanban-card.dragging {
    opacity: 0.4;
}
.kanban-card-title {
    font-weight: 600;
    color: #001f3f;
    margin-bottom: 6px;
    font-size: 14px;
}
.kanban-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #666;
    margin-top: 8px;
}

/* Chevron pipeline — status filter tabs with arrow clip-path */
.chevron-pipeline {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.chevron-stage {
    padding: 8px 28px;
    background: #e5e7eb;
    color: #666;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
    margin-right: -6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    user-select: none;
}
.chevron-stage:first-child {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.chevron-stage:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
    margin-right: 0;
}
.chevron-stage:hover {
    background: #d1d5db;
    color: #333;
}
.chevron-stage.active {
    background: #0074D9;
    color: #fff;
}
.chevron-stage.completed {
    background: #137333;
    color: #fff;
}
.chevron-stage-count {
    margin-left: 6px;
    opacity: 0.9;
    font-size: 11px;
}
/* payment.php income/expense type selector — green for income, red for expense */
.type-chevron { margin-bottom: 0; }
.type-chevron .chevron-stage { padding: 9px 34px; }
.type-chevron .chevron-stage.active[data-type="income"]  { background: #137333; color: #fff; }
.type-chevron .chevron-stage.active[data-type="expense"] { background: #c5221f; color: #fff; }

/* Resource grid — cards for downloadable/shared files */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
.resource-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 16px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.resource-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 31, 63, 0.1);
    border-color: #0074D9;
}
.resource-card-icon {
    font-size: 32px;
    color: #0074D9;
}
.resource-card-title {
    font-weight: 600;
    color: #001f3f;
    font-size: 15px;
}
.resource-card-meta {
    font-size: 12px;
    color: #666;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
}

/* KPI cards — dashboard stat tiles */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin: 16px 0;
}
.kpi-card {
    background: #fff;
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-left: 4px solid #0074D9;
    position: relative;
    overflow: hidden;
}
.kpi-icon {
    font-size: 28px;
    color: #0074D9;
    opacity: 0.8;
}
.kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: #001f3f;
    margin: 6px 0;
    line-height: 1.1;
}
.kpi-label {
    color: #666;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.kpi-trend {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}
.kpi-trend.up   { color: #137333; }
.kpi-trend.down { color: #c5221f; }
.kpi-trend i    { margin-right: 3px; }

/* Chart container + 2-col row */
.chart-container {
    min-height: 300px;
    padding: 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
}
.chart-container h3 {
    margin: 0 0 12px;
    color: #001f3f;
    font-size: 15px;
}
.chart-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 16px 0;
}

/* Account tabs — underlined tab bar for account detail sections */
.account-tabs {
    display: flex;
    border-bottom: 2px solid #eee;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.account-tab {
    padding: 10px 18px;
    cursor: pointer;
    color: #666;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.account-tab:hover {
    color: #001f3f;
}
.account-tab.active {
    color: #0074D9;
    border-bottom: 3px solid #0074D9;
    margin-bottom: -2px;
    font-weight: 600;
}
.account-tab i {
    margin-right: 6px;
}

/* File dropzone — drag-and-drop upload area */
.file-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    color: #666;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.file-dropzone:hover {
    border-color: #0074D9;
    color: #0074D9;
}
.file-dropzone.drag-over {
    border-color: #0074D9;
    background: #e8f0fe;
    color: #0074D9;
}
.file-dropzone i {
    font-size: 40px;
    color: #0074D9;
    margin-bottom: 8px;
    display: block;
}
.file-dropzone-text {
    font-size: 14px;
    font-weight: 500;
}
.file-dropzone-hint {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* Chat channel list */
.channel-list {
    padding: 0;
    list-style: none;
    margin: 0;
}
.channel-item {
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 6px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
}
.channel-item:hover {
    background: #f5f7fb;
}
.channel-item.active {
    background: #e8f0fe;
    color: #0074D9;
    font-weight: 600;
}
.channel-item i {
    opacity: 0.7;
    width: 16px;
    text-align: center;
}
.channel-item .unread-badge {
    margin-left: auto;
    background: #c5221f;
    color: #fff;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

/* Mobile: all v7.1 grids collapse to 1 col at 768px */
@media (max-width: 900px) {
    .chart-row {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .kpi-grid,
    .resource-grid,
    .chart-row {
        grid-template-columns: 1fr;
    }
    .kanban-column {
        min-width: 85vw;
        flex: 0 0 85vw;
    }
}

/* ===== OAuth Setup — provider tabs (Google / SP-API) ===== */
.oauth-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-light, #e5e7eb);
}
.oauth-tab {
    background: transparent;
    border: 0;
    padding: 10px 20px;
    cursor: pointer;
    color: var(--text-muted, #666);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.oauth-tab:hover {
    color: var(--navy-primary);
    background: #f5f7fb;
}
.oauth-tab.active {
    color: var(--navy-accent);
    border-bottom-color: var(--navy-accent);
}
.oauth-pane-hidden { display: none; }

/* ===== v7.1 Softgenix additions — dark-mode variants + spec aliases ===== */
/* Note: v7.1 base blocks already present (lines 5399-5770). These additions
   add dark-mode support and the spec-requested alias class names without
   modifying any existing rules. */

/* --- Kanban board — dark mode --- */
body.dark-mode .kanban-column {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
}
body.dark-mode .kanban-column-header {
    background: var(--bg-card);
    color: #e5e7eb;
    border-bottom-color: var(--border-light);
}
body.dark-mode .kanban-column-count {
    background: var(--navy-accent);
}
body.dark-mode .kanban-card {
    background: #2a2a55;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-light);
}
body.dark-mode .kanban-card:hover {
    box-shadow: 0 4px 10px rgba(0, 116, 217, 0.25);
    border-color: var(--navy-accent);
}
body.dark-mode .kanban-card-title { color: #e5e7eb; }
body.dark-mode .kanban-card-meta  { color: var(--text-muted); }

/* --- 4-stage chevron pipeline (order items: prepaid/ordered/shipping/delivered) --- */
/* alias .order-item-pipeline -> same arrow shape, 4-stage scoped styling */
.order-item-pipeline {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.order-item-pipeline .stage {
    flex: 1 1 0;
    min-width: 140px;
    padding: 10px 28px;
    background: #e5e7eb;
    color: #666;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
    margin-right: -6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    user-select: none;
}
.order-item-pipeline .stage:first-child {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.order-item-pipeline .stage:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
    margin-right: 0;
}
.order-item-pipeline .stage:hover   { background: #d1d5db; color: #333; }
.order-item-pipeline .stage.active  { background: var(--navy-accent); color: #fff; }
.order-item-pipeline .stage.done    { background: var(--success, #137333); color: #fff; }
.order-item-pipeline .stage-count   { margin-left: 6px; opacity: 0.9; font-size: 11px; }

/* chevron pipeline — dark mode (applies to both .chevron-pipeline and .order-item-pipeline) */
body.dark-mode .chevron-stage,
body.dark-mode .order-item-pipeline .stage {
    background: #2a2a55;
    color: var(--text-muted);
}
body.dark-mode .chevron-stage:hover,
body.dark-mode .order-item-pipeline .stage:hover {
    background: #353570;
    color: #e5e7eb;
}
body.dark-mode .chevron-stage.active,
body.dark-mode .order-item-pipeline .stage.active {
    background: var(--navy-accent);
    color: #fff;
}
body.dark-mode .chevron-stage.completed,
body.dark-mode .order-item-pipeline .stage.done {
    background: var(--success, #137333);
    color: #fff;
}

/* --- Resource library grid — dark mode --- */
body.dark-mode .resource-card {
    background: var(--bg-card);
    border-color: var(--border-light);
}
body.dark-mode .resource-card:hover {
    border-color: var(--navy-accent);
    box-shadow: 0 6px 16px rgba(0, 116, 217, 0.2);
}
body.dark-mode .resource-card-title { color: #e5e7eb; }
body.dark-mode .resource-card-meta  { color: var(--text-muted); }
body.dark-mode .resource-card-icon  { color: var(--navy-accent); }
/* category badge inside resource card */
.resource-card-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--navy-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    align-self: flex-start;
}

/* --- KPI grid + chart containers — dark mode --- */
body.dark-mode .kpi-card {
    background: var(--bg-card);
    border-left-color: var(--navy-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
body.dark-mode .kpi-value { color: #e5e7eb; }
body.dark-mode .kpi-label { color: var(--text-muted); }
body.dark-mode .kpi-icon  { color: var(--navy-accent); }
body.dark-mode .chart-container {
    background: var(--bg-card);
    border-color: var(--border-light);
}
body.dark-mode .chart-container h3 { color: #e5e7eb; }

/* --- Account tabs (horizontal modal nav) — dark mode --- */
body.dark-mode .account-tabs { border-bottom-color: var(--border-light); }
body.dark-mode .account-tab  { color: var(--text-muted); }
body.dark-mode .account-tab:hover { color: #e5e7eb; }
body.dark-mode .account-tab.active {
    color: var(--navy-accent);
    border-bottom-color: var(--navy-accent);
}
/* modal-scoped account tabs — same shape, extra padding for modal body */
.modal-body .account-tabs { margin: 0 0 20px; }

/* --- File-upload dropzone — alias + dark mode --- */
/* alias .upload-dropzone -> mirrors .file-dropzone but uses CSS variables */
.upload-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.upload-dropzone:hover,
.upload-dropzone.dragover {
    border: 2px solid var(--navy-accent);
    background: rgba(0, 116, 217, 0.08);
    color: var(--navy-accent);
}
.upload-dropzone i {
    font-size: 40px;
    color: var(--navy-accent);
    margin-bottom: 8px;
    display: block;
}
.upload-dropzone-text { font-size: 14px; font-weight: 500; }
.upload-dropzone-hint { font-size: 12px; color: #999; margin-top: 4px; }

body.dark-mode .file-dropzone,
body.dark-mode .upload-dropzone {
    border-color: var(--border-light);
    color: var(--text-muted);
}
body.dark-mode .file-dropzone:hover,
body.dark-mode .file-dropzone.drag-over,
body.dark-mode .upload-dropzone:hover,
body.dark-mode .upload-dropzone.dragover {
    border-color: var(--navy-accent);
    background: rgba(0, 116, 217, 0.12);
    color: var(--navy-accent);
}
body.dark-mode .upload-dropzone-hint { color: var(--text-muted); }

/* --- Chat channel list — dark mode + alias --- */
/* alias .channel-list-item -> same styling as .channel-item for spec compatibility */
.channel-list-item {
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 6px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
}
.channel-list-item:hover { background: #f5f7fb; }
.channel-list-item.active {
    background: var(--navy-primary);
    color: #fff;
    font-weight: 600;
}
.channel-list-item i { opacity: 0.8; width: 16px; text-align: center; }
.channel-list-item .unread-badge {
    margin-left: auto;
    background: var(--danger, #c5221f);
    color: #fff;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

body.dark-mode .channel-item,
body.dark-mode .channel-list-item {
    color: #e5e7eb;
}
body.dark-mode .channel-item:hover,
body.dark-mode .channel-list-item:hover {
    background: var(--navy-hover);
}
body.dark-mode .channel-item.active {
    background: #2a2a55;
    color: var(--navy-accent);
}
body.dark-mode .channel-list-item.active {
    background: var(--navy-primary);
    color: #fff;
}

/* --- Mobile: order-item-pipeline collapses neatly --- */
@media (max-width: 768px) {
    .order-item-pipeline { gap: 4px; }
    .order-item-pipeline .stage {
        flex: 1 1 100%;
        min-width: 100%;
        margin-right: 0;
        clip-path: none;
        border-radius: 6px;
    }
    .order-item-pipeline .stage:first-child,
    .order-item-pipeline .stage:last-child { clip-path: none; }
}

/* ===== Stylesheet v7.1 — Softgenix additions complete ===== */

/* ===== Branded popup (Swal drop-in replacement) ===== */
.rs-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 15, 30, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.rs-popup-overlay.rs-popup-visible { opacity: 1; }
.rs-popup-overlay.rs-popup-leaving { opacity: 0; }

.rs-popup {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.85);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rs-popup-overlay.rs-popup-visible .rs-popup { transform: scale(1); }
.rs-popup-overlay.rs-popup-leaving .rs-popup { transform: scale(0.9); }

.rs-popup-header {
    background: linear-gradient(135deg, var(--navy-primary), var(--navy-accent));
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.rs-popup-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}
.rs-popup-brand {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rs-popup-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
}
.rs-popup-close:hover { background: rgba(255, 255, 255, 0.2); }

.rs-popup-body {
    padding: 28px 24px 16px;
    text-align: center;
    overflow-y: auto;
    flex: 1;
}

.rs-popup-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid;
    font-size: 36px;
}
.rs-popup-icon-success { border-color: #2ECC40; background: rgba(46, 204, 64, 0.1); color: #2ECC40; }
.rs-popup-icon-error   { border-color: #FF4136; background: rgba(255, 65, 54, 0.1); color: #FF4136; }
.rs-popup-icon-warning { border-color: #FF851B; background: rgba(255, 133, 27, 0.1); color: #FF851B; }
.rs-popup-icon-info    { border-color: var(--navy-accent); background: rgba(0, 116, 217, 0.1); color: var(--navy-accent); }
.rs-popup-icon-question{ border-color: #B10DC9; background: rgba(177, 13, 201, 0.1); color: #B10DC9; }

.rs-popup-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy-primary);
    margin: 0 0 10px;
    line-height: 1.3;
}
.rs-popup-content {
    color: #555;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.rs-popup-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    margin-top: 12px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
    background: #fff;
    color: #222;
}
.rs-popup-input:focus { border-color: var(--navy-accent); }
.rs-popup-textarea { min-height: 100px; resize: vertical; }
.rs-popup-select { cursor: pointer; }

.rs-popup-validation-msg {
    color: #FF4136;
    font-size: 13px;
    margin-top: 10px;
    display: none;
    text-align: left;
}
.rs-popup-validation-msg.rs-popup-validation-msg-visible { display: block; }

.rs-popup-spinner {
    font-size: 48px;
    color: var(--navy-accent);
    margin: 20px 0;
}

.rs-popup-footer {
    padding: 12px 20px 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.rs-popup-footer-note {
    padding: 10px 20px 16px;
    font-size: 13px;
    color: #777;
    text-align: center;
    border-top: 1px solid #eee;
}

.rs-popup-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    min-width: 100px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.rs-popup-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.rs-popup-btn-confirm {
    background: var(--navy-accent);
    color: #fff;
}
.rs-popup-btn-confirm:hover:not(:disabled) {
    background: var(--navy-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 116, 217, 0.4);
}
.rs-popup-btn-cancel {
    background: #f0f0f0;
    color: #555;
}
.rs-popup-btn-cancel:hover:not(:disabled) { background: #e0e0e0; }
.rs-popup-btn-danger {
    background: #FF4136;
    color: #fff;
}
.rs-popup-btn-danger:hover:not(:disabled) {
    background: #d62c22;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 65, 54, 0.4);
}
.rs-popup-btn-loading { position: relative; color: transparent !important; }
.rs-popup-btn-loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rs-popup-spin 0.7s linear infinite;
}
@keyframes rs-popup-spin { to { transform: rotate(360deg); } }

/* ===== Toasts ===== */
.rs-toast {
    position: fixed;
    z-index: 10000;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    max-width: 400px;
    border-left: 4px solid var(--navy-accent);
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.rs-toast-visible { transform: translateX(0); opacity: 1; }
.rs-toast-leaving { transform: translateX(120%); opacity: 0; }

.rs-toast-top-end    { top: 20px; right: 20px; }
.rs-toast-top-start  { top: 20px; left: 20px; transform: translateX(-120%); }
.rs-toast-top-start.rs-toast-visible { transform: translateX(0); }
.rs-toast-top-start.rs-toast-leaving { transform: translateX(-120%); }
.rs-toast-bottom-end   { bottom: 20px; right: 20px; }
.rs-toast-bottom-start { bottom: 20px; left: 20px; transform: translateX(-120%); }
.rs-toast-bottom-start.rs-toast-visible { transform: translateX(0); }
.rs-toast-bottom-start.rs-toast-leaving { transform: translateX(-120%); }
.rs-toast-center {
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
}
.rs-toast-center.rs-toast-visible  { transform: translateX(-50%) translateY(0); }
.rs-toast-center.rs-toast-leaving  { transform: translateX(-50%) translateY(-120%); }

.rs-toast-success { border-left-color: #2ECC40; }
.rs-toast-error   { border-left-color: #FF4136; }
.rs-toast-warning { border-left-color: #FF851B; }
.rs-toast-info    { border-left-color: var(--navy-accent); }
.rs-toast-question{ border-left-color: #B10DC9; }

.rs-toast-logo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.rs-toast-icon {
    font-size: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.rs-toast-success .rs-toast-icon { color: #2ECC40; }
.rs-toast-error   .rs-toast-icon { color: #FF4136; }
.rs-toast-warning .rs-toast-icon { color: #FF851B; }
.rs-toast-info    .rs-toast-icon { color: var(--navy-accent); }
.rs-toast-question .rs-toast-icon { color: #B10DC9; }
.rs-toast-body {
    flex: 1;
    font-size: 14px;
    color: #222;
    line-height: 1.35;
}
.rs-toast-close {
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
}
.rs-toast-close:hover { color: #222; }

/* ===== Dark mode ===== */
body.dark-mode .rs-popup { background: #1a2332; }
body.dark-mode .rs-popup-title { color: #fff; }
body.dark-mode .rs-popup-content { color: #b0b0b0; }
body.dark-mode .rs-popup-input {
    background: #0f1a28;
    border-color: #2d3a50;
    color: #fff;
}
body.dark-mode .rs-popup-btn-cancel { background: #2d3a50; color: #e0e0e0; }
body.dark-mode .rs-popup-btn-cancel:hover:not(:disabled) { background: #3d4a60; }
body.dark-mode .rs-popup-footer-note { color: #8a97a8; border-top-color: #2d3a50; }
body.dark-mode .rs-toast { background: #1a2332; }
body.dark-mode .rs-toast-body { color: #e0e0e0; }
body.dark-mode .rs-toast-close { color: #8a97a8; }
body.dark-mode .rs-toast-close:hover { color: #fff; }

/* ===== Mobile ===== */
@media (max-width: 480px) {
    .rs-popup { max-width: calc(100vw - 30px); }
    .rs-popup-title { font-size: 18px; }
    .rs-popup-body { padding: 20px 16px 12px; }
    .rs-popup-footer { flex-direction: column; }
    .rs-popup-footer .rs-popup-btn { width: 100%; min-width: 0; }
    .rs-toast { min-width: 0; max-width: calc(100vw - 40px); }
    .rs-toast-top-end, .rs-toast-bottom-end { right: 10px; }
    .rs-toast-top-start, .rs-toast-bottom-start { left: 10px; }
    .rs-toast-top-end    { top: 10px; }
    .rs-toast-bottom-end { bottom: 10px; }
    .rs-toast-top-start  { top: 10px; }
    .rs-toast-bottom-start { bottom: 10px; }
}

/* ===== Client Onboarding (full-screen) ===== */
.ob-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}
.ob-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    background: var(--bg-card);
    border-bottom: 3px solid var(--navy-accent);
    box-shadow: 0 2px 6px var(--shadow-color);
    flex-wrap: wrap;
}
.ob-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--navy-primary);
    font-weight: 700;
    font-size: 18px;
}
.ob-brand i { color: var(--navy-accent); font-size: 22px; }
.ob-account-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-primary);
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-secondary);
}
.ob-account-switch i { color: var(--navy-accent); }
.ob-account-switch label { margin: 0; font-weight: 600; color: var(--text-primary); }
.ob-account-switch select {
    border: 1px solid var(--input-border);
    padding: 7px 12px;
    border-radius: 3px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px !important;
    min-width: 240px;
}
.ob-user { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.ob-user a {
    color: var(--navy-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ob-user a:hover { color: var(--navy-hover); text-decoration: underline; }

.ob-main { flex: 1; padding: 24px 28px; width: 100%; max-width: 1040px; margin: 0 auto; }

.ob-header {
    background: var(--bg-card);
    border-radius: 4px;
    padding: 22px 26px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px var(--shadow-color);
    border-left: 4px solid var(--navy-primary);
}
.ob-title {
    margin: 0 0 6px;
    color: var(--navy-primary);
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ob-title small { font-weight: 500; font-size: 14px; color: var(--text-muted); }
.ob-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ob-progress {
    background: var(--bg-card);
    padding: 18px 22px;
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px var(--shadow-color);
}
.ob-progress-bar { height: 10px; background: var(--skeleton-base); border-radius: 999px; overflow: hidden; }
.ob-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--navy-accent), var(--success));
    transition: width 0.3s ease;
}
.ob-progress-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.ob-progress-status-ok { color: var(--success); font-weight: 700; }
.ob-progress-status-pending { color: var(--warning); font-weight: 600; }

.ob-form-card {
    background: var(--bg-card);
    border-radius: 4px;
    padding: 24px 28px;
    box-shadow: 0 2px 6px var(--shadow-color);
}

.ob-section { margin-bottom: 28px; }
.ob-section:last-of-type { margin-bottom: 0; }
.ob-section-title {
    color: var(--navy-primary);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--bg-primary);
    border-left: 4px solid var(--navy-accent);
    border-radius: 0 3px 3px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ob-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 22px;
    align-items: start;
}
.ob-field { display: flex; flex-direction: column; gap: 6px; }
.ob-field.full { grid-column: 1 / -1; }
.ob-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ob-field label i { color: var(--navy-accent); font-size: 12px; }
.ob-field .req { color: var(--danger); margin-left: 2px; }
.ob-field input,
.ob-field select,
.ob-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 3px;
    font-size: 14px !important;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ob-field textarea { resize: vertical; min-height: 80px; }
.ob-field input:focus,
.ob-field select:focus,
.ob-field textarea:focus {
    outline: none;
    border-color: var(--navy-accent);
    box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.12);
}
.ob-field-placeholder {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ob-file-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ob-file-current {
    font-size: 12px;
    background: rgba(52, 168, 83, 0.12);
    color: var(--success);
    padding: 6px 12px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ob-file-current a { color: var(--success); text-decoration: underline; font-weight: 600; }
.ob-file-empty { color: var(--text-muted); font-size: 12px; }

/* same_as_billing toggle row */
.ob-toggle-field { display: flex; flex-direction: column; gap: 6px; }
.ob-toggle-field .toggle-row span { font-weight: 600; color: var(--navy-primary); display: inline-flex; align-items: center; gap: 7px; }
/* mirrored (locked) shipping inputs while toggle is on */
.ob-mirrored { background: var(--skeleton-base) !important; cursor: not-allowed; opacity: 0.85; }

/* multifile list — chips + remove x */
.ob-multifile-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ob-file-remove { color: var(--danger); cursor: pointer; margin-left: 4px; font-size: 13px; transition: transform 0.15s; }
.ob-file-remove:hover { transform: scale(1.25); }
.ob-multifile-hint { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }

.ob-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 22px 0 4px;
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
    flex-wrap: wrap;
}

.ob-empty { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.ob-empty i { font-size: 36px; display: block; margin-bottom: 12px; color: var(--navy-accent); }

.ob-complete-badge,
.ob-incomplete-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ob-complete-badge { background: var(--success); color: #fff; }
.ob-incomplete-badge { background: var(--warning); color: #333; }

.ob-reject-banner {
    background: rgba(234, 67, 53, 0.1);
    border: 1px solid var(--danger);
    border-left: 4px solid var(--danger);
    color: var(--danger);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* amber "submitted / under review" banner */
.ob-pending-banner {
    background: rgba(251, 188, 4, 0.12);
    border: 1px solid var(--warning);
    border-left: 4px solid var(--warning);
    color: #8a6d00;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* live char counter under notes textarea */
.ob-char-counter {
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.ob-skel-line {
    height: 36px;
    background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 3px;
    margin-bottom: 12px;
}
.ob-skel-line.w70 { width: 70%; }
.ob-skel-line.w85 { width: 85%; }

.ob-hidden { display: none !important; }

/* Dark mode tweaks */
body.dark-mode .ob-incomplete-badge { color: #1a1a2e; }

/* Mobile */
@media (max-width: 768px) {
    .ob-topbar {
        padding: 12px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .ob-account-switch { width: 100%; }
    .ob-account-switch select { min-width: 0; flex: 1; }
    .ob-user { justify-content: space-between; }
    .ob-main { padding: 16px; }
    .ob-form-card { padding: 18px; }
    .ob-grid { grid-template-columns: 1fr; }
    .ob-actions { flex-direction: column-reverse; }
    .ob-actions .btn { width: 100%; }
}

/* ===== Client Shipping — toggle switches, icon buttons, modal helpers ===== */
.cell-icon-btn { background: transparent; border: 1px solid var(--border-color); color: var(--navy-primary); padding: 5px 10px; border-radius: 3px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; }
.cell-icon-btn:hover { background: var(--navy-primary); color: #fff; border-color: var(--navy-primary); }

/* ===== DaisyUI-style toggle switch — used across col_setup.php, settings, modals ===== */
/* selector covers both <input type="checkbox" class="toggle"> and any .toggle element */
.toggle,
input[type="checkbox"].toggle {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 24px;
    background: #cbd5e0;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.2s ease;
    vertical-align: middle;
    outline: none;
    border: none;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}
.toggle::before,
input[type="checkbox"].toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
}
.toggle:checked,
input[type="checkbox"].toggle:checked {
    background: var(--navy-accent);
}
.toggle:checked::before,
input[type="checkbox"].toggle:checked::before {
    transform: translateX(20px);
}
.toggle:hover:not(:disabled),
input[type="checkbox"].toggle:hover:not(:disabled) {
    box-shadow: 0 0 0 4px rgba(0, 116, 217, 0.12);
}
.toggle:focus-visible,
input[type="checkbox"].toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.35);
}
.toggle:disabled,
input[type="checkbox"].toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* mobile — slightly larger so finger taps land cleanly */
@media (max-width: 720px) {
    .toggle, input[type="checkbox"].toggle { width: 50px; height: 28px; }
    .toggle::before, input[type="checkbox"].toggle::before { width: 24px; height: 24px; }
    .toggle:checked::before, input[type="checkbox"].toggle:checked::before { transform: translateX(22px); }
}
/* helper layout for toggle + label rows (used in col_setup.php form-group) */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.toggle-row:hover .toggle:not(:disabled) {
    box-shadow: 0 0 0 4px rgba(0, 116, 217, 0.12);
}

/* multi-tier checklist — reverse_sourcing assign popover (replaces single-select tier dropdown) */
.tier-checklist {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 8px;
    background: #f8fafc;
    border: 1px solid #d8e0ee;
    border-radius: 6px;
    max-height: 170px;
    overflow-y: auto;
}
.tier-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #1e293b;
    user-select: none;
    transition: background 0.15s ease;
}
.tier-check-item:hover { background: #eef3fb; }
.tier-check-item.is-on { background: #eaf3ff; font-weight: 600; }
.tier-check-item input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--navy-accent);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}
/* compact tier chips shown in the table cell when 1+ tiers active */
.tier-chips { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.tier-chip {
    font-size: 10px; font-weight: 600; line-height: 1;
    padding: 3px 7px; border-radius: 999px;
    background: #e0f2fe; color: #075985; white-space: nowrap;
}
.tier-chip.tier-100      { background: #dbeafe; color: #1e40af; }
.tier-chip.tier-1000     { background: #1e3a5f; color: #fff; }
.tier-chip.tier-approved { background: #dcfce7; color: #166534; }
.tier-chip.tier-soft     { background: #fef9c3; color: #854d0e; }
.tier-chip.tier-none     { background: #f1f5f9; color: #64748b; }

/* seasonal date range chip — reverse_sourcing status column */
.rs-season-range {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #166534;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.rs-season-range i { font-size: 10px; }

/* manager-note status buttons (ok / wait / bad) + tinted comment box */
.note-status-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.note-status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 12px;
    line-height: 1;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid transparent;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.note-status-btn:hover:not(:disabled) { filter: brightness(0.97); }
.note-status-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.note-status-btn.ok   { background: #dcfce7; color: #166534; }
.note-status-btn.wait { background: #fef9c3; color: #854d0e; }
.note-status-btn.bad  { background: #fee2e2; color: #991b1b; }
.note-status-btn.is-active.ok   { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.18); }
.note-status-btn.is-active.wait { border-color: #ca8a04; box-shadow: 0 0 0 2px rgba(202,138,4,0.18); }
.note-status-btn.is-active.bad  { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,0.18); }
.note-box-ok   { border-color: #16a34a !important; background: #f0fdf4; }
.note-box-wait { border-color: #ca8a04 !important; background: #fefce8; }
.note-box-bad  { border-color: #dc2626 !important; background: #fef2f2; }
.rs-mgr-text.is-readonly { cursor: default; }
.rs-mgr-editable { cursor: pointer; }

/* multi supplier-link chip input — reverse_sourcing add-product form */
.rs-link-hint { font-size: 10.5px; font-weight: 500; color: #94a3b8; margin-left: 4px; }
.rs-link-chips { margin-top: 6px; gap: 5px; }
.rs-link-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: #eef4ff; color: var(--navy-primary); border: 1px solid #d7def0; border-radius: 12px; font-size: 11px; max-width: 100%; }
.rs-link-chip a { color: var(--navy-accent); text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-link-chip a:hover { text-decoration: underline; }
.rs-link-chip img.rs-link-fav { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.rs-link-chip-x { cursor: pointer; color: #94a3b8; font-size: 15px; font-weight: 700; line-height: 1; padding: 0 2px; }
.rs-link-chip-x:hover { color: #ea4335; }

/* shipping modal helpers */
.shipping-modal-hr { margin: 18px 0; border: none; border-top: 1px solid #e5e9f2; }
.shipping-modal-textarea { width: 100%; padding: 10px; border: 1px solid #d0d0d0; border-radius: 3px; font: inherit; }
.shipping-modal-input { width: 100%; padding: 8px 10px; border: 1px solid #d0d0d0; border-radius: 3px; font: inherit; margin-bottom: 8px; }
.shipping-modal-input:focus,
.shipping-modal-textarea:focus { outline: none; border-color: var(--navy-accent, #0074D9); box-shadow: 0 0 0 2px rgba(0,116,217,0.12); }
.shipping-modal-addbtn { margin-top: 10px; }
.shipping-modal-empty { padding: 14px 0; }
.shipping-modal-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.shipping-modal-meta { margin-left: auto; font-size: 12px; }
.shipping-note-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.shipping-note-body { white-space: pre-wrap; }
.shipping-note-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #888; }
.shipping-note-del { margin-left: auto; }
.ship-edit-toggles { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.ship-edit-toggles label { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.ship-edit-toggles label span { font-size: 14px; color: var(--text-primary); }

/* Link cell buttons (copy + open) — used in client_new_products / client_reorder / client_orders / client_order_processing */
.link-cell-btns { display: inline-flex; gap: 4px; align-items: center; }
.link-cell-btn { background: transparent; border: 1px solid var(--border-color); color: var(--navy-primary); padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 12px; text-decoration: none; transition: all 0.15s; display: inline-flex; align-items: center; line-height: 1; }
.link-cell-btn:hover { background: var(--navy-primary); color: #fff; border-color: var(--navy-primary); }
.profit-pos { color: var(--success); }
.link-cell-text { color: var(--navy-accent); text-decoration: none; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; }
.link-cell-text:hover { text-decoration: underline; color: var(--navy-hover); }

/* ===== Pipeline Chevron Tabs (CRM-style status pipeline) ===== */
.pipeline-stages {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pipeline-stages::-webkit-scrollbar { display: none; }
.pipeline-stage {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 20px 14px 28px;
    cursor: pointer;
    transition: filter 0.2s, opacity 0.2s;
    color: #fff;
    text-decoration: none;
    -webkit-clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
}
.pipeline-stage:first-child {
    -webkit-clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
    padding-left: 16px;
    border-radius: 4px 0 0 4px;
}
.pipeline-stage:last-child {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%);
    border-radius: 0 4px 4px 0;
}
.pipeline-stage:hover { filter: brightness(1.15); }
.pipeline-stage.active {
    filter: brightness(1.25);
    box-shadow: inset 0 0 0 100px rgba(255,255,255,0.15);
}
.pipeline-stage-name {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: inherit;
}
.pipeline-stage-count {
    font-size: 14px;
    font-weight: 800;
    color: inherit;
    white-space: nowrap;
}
.pipeline-stage.pipeline-empty { opacity: 0.6; }
.pipeline-stage.pipeline-empty:hover { opacity: 0.85; }
@media (max-width: 992px) {
    .pipeline-stage { padding: 10px 16px 10px 24px; }
    .pipeline-stage-name { font-size: 10px; }
    .pipeline-stage-count { font-size: 12px; }
}
@media (max-width: 768px) {
    .pipeline-stages { overflow-x: auto; }
    .pipeline-stage { min-width: 100px; flex-shrink: 0; flex-grow: 0; padding: 10px 14px 10px 22px; }
    .pipeline-stage-name { font-size: 9px; }
}

/* ===== Per-ASIN chevron pipeline (Reverse Sourcing add/edit modal) ===== */
.rs-asin-pipeline .pipeline-stage { background: #9fb3cc; color: #fff; font-size: 12px; flex: 0 0 auto; min-width: 120px; }
.rs-asin-pipeline .pipeline-stage.active { background: #001f3f; filter: none; box-shadow: inset 0 0 0 100px rgba(255,255,255,.12); }
.rs-asin-pipeline .pipeline-stage.rs-add-asin { background: #e8eef7; color: #0074D9; font-weight: 700; min-width: 90px; }
.rs-asin-panel { border: 1px solid #e3e9f3; border-radius: 8px; padding: 22px 24px; background: #fff; margin-top: 8px; }
.rs-asin-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 2px 14px; margin-bottom: 16px; border-bottom: 1px solid #eef2f8; flex-wrap: wrap; }
#asinPanelTitle { font-size: 14px; font-weight: 700; color: var(--navy-primary); padding: 4px 2px; letter-spacing: 0.2px; white-space: nowrap; }
.rs-asin-panel-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.rs-asin-panel-tools .btn { padding: 10px 18px; }
/* Amazon / Supplier group headers — colored accents so the two blocks read apart at a glance */
.form-section-head.sec-amz { color: #b45309; border-left: 3px solid #f59e0b; padding-left: 10px; }
.form-section-head.sec-sup { color: #0e7490; border-left: 3px solid #0891b2; padding-left: 10px; }
.rs-asin-pipeline-wrap { margin: 14px 0 6px; padding-bottom: 10px; }
.rs-pipe-label { display: block; margin-bottom: 12px; }
/* ASIN entry in the panel head — plain text input (was a Select2 dropdown) */
.rs-asin-input { flex: 1 1 220px; min-width: 200px; max-width: 340px; padding: 8px 12px; border: 1px solid #d7def0; border-radius: 6px; font-size: 13px; color: var(--navy-primary); background: #fff; text-transform: uppercase; letter-spacing: 0.3px; }
.rs-asin-input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(0,116,217,0.12); }
.rs-asin-input::placeholder { text-transform: none; letter-spacing: normal; color: #9aa3b3; }

/* ===== Inline edit select (used in DataTable cells for quick status updates) ===== */
.inline-edit-select {
    padding: 4px 22px 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy-primary);
    cursor: pointer;
    min-width: 110px;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: auto;
    -webkit-appearance: auto;
}
.inline-edit-select:hover { border-color: var(--navy-accent); }
.inline-edit-select:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(0,116,217,0.15); }
.inline-edit-select.saving { opacity: 0.6; pointer-events: none; }
.inline-edit-select:disabled, .inline-edit-select.is-readonly { background: #f0f4fa; color: #5f6c80; cursor: not-allowed; opacity: .85; }

/* Shipping-status cell — status/delivery dropdown + inline shipped/received qty input share one grid column */
#ordTable .ws-ctrl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* tracking row: size the LINK group to ~dropdown width so the comment icon lands under the units-received (80) field */
#ordTable .ws-ctrl.track-cmt .track-link-wrap { flex: 0 0 140px; }
/* comment icon = same size as the rounded units-received (80) input, sitting directly below it */
#ordTable .ws-ctrl.track-cmt .cell-icon-btn { width: 56px; justify-content: center; padding: 3px 8px; border-radius: 14px; font-size: 11px; font-weight: 600; }

/* ===== saved_shipments.php — FBA saved shipments (resources-style cards + reconciliation) ===== */
.ship-search input { padding: 7px 10px; border: 1px solid #cfd8e6; border-radius: 6px; font-size: 13px; min-width: 240px; }
.ship-meta-line { font-size: 12px; color: #5a6b85; display: flex; align-items: center; gap: 5px; }
.ship-meta-line i { color: #8694a6; }
.ship-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; font-size: 11px; font-weight: 700; border-radius: 10px; border: 1px solid transparent; }
.ship-badge.ship-ok   { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.ship-badge.ship-bad  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ship-badge.ship-wait { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.ship-view-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ship-badge-inline { font-size: 12px; color: #334155; background: #f1f5f9; border-radius: 6px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px; }
.ship-box-row { padding: 6px 0; border-bottom: 1px dashed #e8edf5; font-size: 13px; }
.ship-box-items { font-size: 12px; color: #5a6b85; margin-top: 2px; }
.sku-name { font-weight: 600; color: #001f3f; font-size: 12.5px; }
.sku-codes { font-size: 10.5px; color: #8694a6; }
.about-roles-table td.diff-ok  { color: #166534; font-weight: 700; }
.about-roles-table td.diff-bad { color: #b91c1c; font-weight: 700; }
/* shipment cards — richer enterprise layout, status-accented top border */
#shipGrid.resource-grid { grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); }
.ship-card { background: #fff; border: 1px solid #e8edf5; border-top: 3px solid #cbd5e1; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); display: flex; flex-direction: column; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.ship-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,31,63,.10); }
.ship-card.st-reconciled  { border-top-color: #16a34a; }
.ship-card.st-discrepancy { border-top-color: #dc2626; }
.ship-card.st-pending     { border-top-color: #d97706; }
.ship-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 16px 0; }
.ship-card-code { font-weight: 700; font-size: 14.5px; color: #001f3f; display: flex; align-items: center; gap: 8px; word-break: break-all; min-width: 0; }
.ship-code-ic { width: 32px; height: 32px; border-radius: 8px; background: #eef4ff; color: #0074D9; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.ship-card-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 11px; }
.ship-card-acct { font-size: 12.5px; color: #5a6b85; display: flex; align-items: center; gap: 6px; }
.ship-card-acct i { color: #8694a6; }
.ship-stats { display: flex; gap: 10px; }
.ship-stat { flex: 1; background: #f7f9fc; border: 1px solid #eef2f8; border-radius: 8px; padding: 8px 10px; text-align: center; }
.ship-stat-val { font-size: 18px; font-weight: 700; color: #001f3f; line-height: 1; }
.ship-stat-lbl { font-size: 10px; color: #8694a6; text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }
.ship-card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #94a3b8; gap: 8px; }
.ship-card-foot i { color: #b6c0cf; }
.ship-card-actions { display: flex; gap: 6px; padding: 12px 16px 14px; border-top: 1px solid #f0f3f8; }
.ship-card-actions .btn { flex: 1; font-size: 12px; padding: 7px 8px; }
.ship-card-actions .btn.btn-primary { flex: 0 0 auto; }
.ship-help { font-size: 13px; margin: 0 0 14px; }
.recv-inp { width: 90px; text-align: right; border-radius: 14px; padding: 6px 12px; }
.amz-box-inp { width: 62px; text-align: right; padding: 5px 10px; border: 1px solid #cfd8e6; border-radius: 14px; font-size: 12px; }
.about-roles-table th.amz-box-col { text-align: center; }
/* per-box cell — auto Sent (read-only) over a Received input */
.amz-box-cell { white-space: nowrap; }
.amz-box-pair { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin: 2px 0; }
.amz-mini { font-size: 9px; color: #8694a6; width: 30px; text-align: right; text-transform: uppercase; letter-spacing: .3px; }
.amz-box-sent { width: 62px; text-align: right; padding: 5px 10px; border: 1px solid #e5e9f2; border-radius: 14px; font-size: 12px; background: #f1f5f9; color: #5a6b85; }
/* FBA cases — Shipment ID shown under the image in the first column */
.img-ship-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ship-id-tag { font-size: 10px; font-weight: 700; color: #0b5cab; background: #eef4ff; border: 1px solid #cfe0f5; border-radius: 6px; padding: 1px 6px; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ship-id-tag:hover { background: #0b5cab; color: #fff; border-color: #0b5cab; }
/* FBA cases — shipment grouping (parent row + expandable per-SKU child table) */
.fba-grp-toggle { background: #eef4ff; color: #0b5cab; border: 1px solid #cfe0f5; border-radius: 10px; padding: 2px 8px; font-size: 10px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fba-grp-toggle:hover { background: #0b5cab; color: #fff; border-color: #0b5cab; }
#tblFba tr.fba-grp-open > td { background: #f5f9ff !important; }
#tblFba tr.fba-grp-child-tr > td { background: #fafbfd !important; padding: 12px 16px !important; }
.fba-grp-head { font-size: 13px; font-weight: 600; color: var(--navy-primary, #001f3f); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
/* child is initialized as a DataTable → inherits the same DataTables styling as the main tables */
.fba-grp-table { width: 100% !important; }
.fba-grp-child-tr .dataTables_wrapper { margin: 0; }
#ordTable .cell-qty-input {
    width: 56px; padding: 3px 8px; border: 1px solid #d7def0; border-radius: 14px;
    background: #fff; color: var(--navy-primary); font-size: 11px; font-weight: 600; text-align: right;
    -moz-appearance: textfield; transition: border-color .15s, background .35s, box-shadow .15s;
}
#ordTable .cell-qty-input::-webkit-outer-spin-button,
#ordTable .cell-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#ordTable .cell-qty-input:focus { outline: none; border-color: var(--navy-accent); background: #f5faff; box-shadow: 0 0 0 2px rgba(0,116,217,.12); }
#ordTable .cell-qty-input:disabled { opacity: .6; cursor: progress; }
#ordTable .cell-qty-input.qty-saved { background: #e6f7ec; border-color: #34a853; }
#ordTable .cell-qty-ro { font-size: 11px; font-weight: 600; color: #94a3b8; min-width: 24px; text-align: right; }

/* ===== Inline numeric edit input (out_of_stock — available qty + low-stock threshold, auto-saves on change) ===== */
.oos-inline-input {
    width: 84px;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-primary);
    background: #fff;
    text-align: right;
    transition: border-color .15s, background .35s, box-shadow .15s;
}
.oos-inline-input:hover { border-color: var(--navy-accent); }
.oos-inline-input:focus { outline: none; border-color: var(--navy-accent); background: #f5faff; box-shadow: 0 0 0 2px rgba(0,116,217,0.15); }
.oos-inline-input:disabled { opacity: .6; cursor: progress; }
.oos-inline-input.oos-saved { background: #e6f7ec; border-color: #34a853; }
.oos-inline-input.oos-low { border-color: #e67700; background: #fff7e6; color: #b35900; }

/* ===== Account Information 2-column bordered grid (account.php) ===== */
.account-info-card .info-grid-2x {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 14px;
}
.account-info-card .info-grid-2x .info-row {
    border: 1px solid var(--border-color, #d8dde4);
    border-radius: 6px;
    padding: 12px 14px;
    background: #fff;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.account-info-card .info-grid-2x .info-row:hover {
    border-color: var(--navy-accent, #0074D9);
    box-shadow: 0 2px 8px rgba(0,116,217,0.08);
}
.account-info-card .info-grid-2x .info-row .info-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6c757d;
    margin: 0;
}
.account-info-card .info-grid-2x .info-row .info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy-primary, #001f3f);
    word-break: break-word;
}
.account-info-card .info-grid-2x .info-row.info-row-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .account-info-card .info-grid-2x { grid-template-columns: 1fr; }
    .account-info-card .info-grid-2x .info-row.info-row-full { grid-column: auto; }
}

/* ===== URL hover preview (Google Sheets-style hyperlink hover card) ===== */
.url-hover-preview {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #d8dde4;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 31, 63, 0.18);
    padding: 10px 12px;
    min-width: 200px;
    max-width: 260px;
    font-size: 11.5px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s;
    color: #333;
}
.url-hover-preview.visible { opacity: 1; transform: translateY(0); }
.url-hover-preview .uhp-domain {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--navy-primary, #001f3f);
    font-size: 13px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f2f5;
}
.url-hover-preview .uhp-domain img { width: 16px; height: 16px; flex: 0 0 16px; }
.url-hover-preview .uhp-image,
.url-hover-preview .uhp-image-async { margin: 6px 0; text-align: center; }
.url-hover-preview .uhp-image img,
.url-hover-preview .uhp-image-async img {
    max-width: 110px;
    max-height: 110px;
    border-radius: 4px;
    border: 1px solid #eef0f4;
    object-fit: contain;
}
.url-hover-preview .uhp-url {
    color: #666;
    word-break: break-all;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
    background: #f7f9fc;
    padding: 6px 8px;
    border-radius: 4px;
}
.url-hover-preview .uhp-asin {
    margin-top: 8px;
    font-size: 11px;
    color: #888;
}
.url-hover-preview .uhp-asin code {
    background: #fff8e1;
    padding: 2px 6px;
    border-radius: 3px;
    color: #8a6d00;
    font-weight: 600;
    font-family: inherit;
}
.url-hover-preview .uhp-action {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e0e3e7;
    color: var(--navy-accent, #0074D9);
    font-size: 11px;
    text-align: center;
}

/* ===== Compact DataTable variant (tighter cell padding + smaller font) ===== */
table.table-compact-tight thead th { padding: 6px 8px !important; font-size: 11px; line-height: 1.3; }
table.table-compact-tight tbody td { padding: 5px 8px !important; font-size: 12px; line-height: 1.35; vertical-align: middle; }
table.table-compact-tight tbody tr { height: auto; }
table.table-compact-tight .inline-edit-select { padding: 2px 18px 2px 6px; font-size: 11px; min-width: 96px; }
table.table-compact-tight .cell-icon-btn { padding: 3px 6px; font-size: 11px; }
table.table-compact-tight .action-icon { padding: 3px 5px; font-size: 12px; }
table.table-compact-tight code { font-size: 11px; padding: 1px 4px; }
table.table-compact-tight .status-badge { padding: 2px 6px; font-size: 10px; }

/* ===== Distributor Cases table — stacked-cell ("grouped column") layout, same as client_orders #ordTable ===== */
#tblDistributor tbody td { vertical-align: top; padding-top: 8px !important; padding-bottom: 8px !important; }
#tblDistributor td.col-image { width: 56px !important; min-width: 56px !important; max-width: 56px !important; padding: 4px !important; text-align: center; vertical-align: middle !important; }
/* row-select checkbox column (DataTables Select ext) — narrow first column, navy when ticked */
table.dataTable td.dt-select-col, table.dataTable th.dt-select-col { width: 22px !important; min-width: 22px !important; max-width: 22px !important; text-align: center; padding: 2px !important; }
/* navy select-checkbox theming — applies to every DataTable with a select column */
table.dataTable td.select-checkbox::before { border-color: #b3bdcc !important; border-radius: 3px !important; width: 16px !important; height: 16px !important; top: 50% !important; margin-top: -8px !important; }
table.dataTable tr.selected td.select-checkbox::before { background: var(--navy-accent, #0074D9) !important; border-color: var(--navy-accent, #0074D9) !important; }
table.dataTable tr.selected td.select-checkbox::after { color: #fff !important; top: 50% !important; margin-top: -10px !important; line-height: 16px !important; }
table.dataTable tbody tr.selected td { background: rgba(0,116,217,.06) !important; box-shadow: none; }
#tblDistributor td.dt-select-col, #tblDistributor th.dt-select-col { width: 22px !important; min-width: 22px !important; max-width: 22px !important; padding: 2px !important; text-align: center; vertical-align: middle !important; }
#tblDistributor td.select-checkbox::before { border-color: #b3bdcc !important; border-radius: 3px !important; width: 16px !important; height: 16px !important; top: 50% !important; margin-top: -8px !important; }
#tblDistributor tr.selected td.select-checkbox::before { background: var(--navy-accent, #0074D9) !important; border-color: var(--navy-accent, #0074D9) !important; }
#tblDistributor tr.selected td.select-checkbox::after { color: #fff !important; top: 50% !important; margin-top: -10px !important; line-height: 16px !important; }
#tblDistributor tbody tr.selected td { background: rgba(0,116,217,.06) !important; box-shadow: none; }
body.dark-mode #tblDistributor td.select-checkbox::before { border-color: #4a4a7a !important; }
body.dark-mode #tblDistributor tbody tr.selected td { background: rgba(0,116,217,.16) !important; }
#tblDistributor .cell-stack code.link-chip { letter-spacing: 0.5px; }
.cell-stack .issue-other-note, #tblDistributor .issue-other-note { font-size: 10px; color: #5f6c80; margin-top: 2px; }

/* uniform cell-stack row heights inside the distributor table so multi-row columns line up row-for-row (Product ↔ Quantity, Case, etc.) */
#tblDistributor .cell-stack { grid-auto-rows: minmax(22px, auto); }
/* accounts-login table — same grouped "cell-stack" layout as client_orders / cases distributor */
#accTable tbody td { vertical-align: top; padding-top: 8px !important; padding-bottom: 8px !important; }
#accTable .cell-stack { grid-auto-rows: minmax(22px, auto); }
/* new-products / reorder — uniform cell-stack row heights so the Price col's Amazon/Supplier rows line up with the Product col's Amazon/Supplier rows; .price-ph = invisible spacer rows */
#prodTable .cell-stack { grid-auto-rows: minmax(22px, auto); }
#prodTable .price-ph { visibility: hidden; }
/* Quantity column — no chips; Amazon qty (row 1) lines up with the Product col's "Amazon" row, Supplier qty (row 4) with its "Supplier" row; rows 2-3 are invisible spacers */
#tblDistributor .qty-aligned .qty-ch { font-size: 12.5px; min-height: 22px; display: inline-flex; align-items: center; justify-content: center; }
#tblDistributor .qty-aligned .qty-ch i { font-size: 11px; opacity: 0.9; }
#tblDistributor .qty-aligned .qty-ch-amz i { color: #ff9900; }   /* amazon */
#tblDistributor .qty-aligned .qty-ch-sup i { color: #0074d9; }   /* supplier */
#tblDistributor .qty-aligned .cell-stack-val { font-size: 12.5px; min-height: 22px; }
#tblDistributor .qty-aligned .qty-ph { visibility: hidden; }

/* Priority / Issue column — chip label + inline dropdown per row (cell-stack layout, like the other columns) */
#tblDistributor .pri-issue-cs .cell-stack-val { overflow: visible; }
#tblDistributor .pri-issue-cs .ws-inline { max-width: 158px; }

/* priority inline dropdown — pill colored by level */
.ws-inline.ws-pri-optional { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.ws-inline.ws-pri-low      { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.ws-inline.ws-pri-medium   { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.ws-inline.ws-pri-high     { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.ws-inline.ws-pri-urgent   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ws-inline.ws-pri-critical { background: #450a0a; color: #fee2e2; border-color: #7f1d1d; }
/* issue inline dropdown */
.ws-inline.ws-issue     { background: #fff7ed; color: #7c2d12; border-color: #fed7aa; }
/* status inline dropdown — pill colored by lifecycle stage (mirrors priority pill scheme) */
.ws-inline.ws-st-open            { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.ws-inline.ws-st-in_progress     { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.ws-inline.ws-st-waiting_client  { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
.ws-inline.ws-st-resolved        { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.ws-inline.ws-st-closed          { background: #e5e7eb; color: #374151; border-color: #d1d5db; }
/* account-bucket extra statuses (task-tracker shape) */
.ws-inline.ws-st-not_started     { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.ws-inline.ws-st-completed       { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.ws-inline.ws-st-on_hold         { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.ws-inline.ws-st-cancelled       { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
/* account table — same pri-issue-cs cell layout as distributor */
#tblAccount .pri-issue-cs .ws-inline { max-width: 158px; }

/* resolved-date highlight — green chip on the "Resolved" row inside the Case stack (distributor + account + fba) */
.cell-stack .resolved-date { color: #15803d; font-weight: 600; background: #dcfce7; padding: 1px 6px; border-radius: 4px; font-size: 11.5px; }

/* ===== Quick-jump context banner — persistent strip on destination pages when navigated from accounts.php
   "Filtered to Account X" with switch-view dropdown + clear button. Drops into any client_* portal page. ===== */
.qj-banner { background: linear-gradient(135deg, #f0f7ff 0%, #e0effc 100%); border: 1px solid #cfe3fa; border-radius: 8px; padding: 10px 14px; margin: 10px 16px 16px; box-shadow: 0 1px 3px rgba(0,31,63,0.06); }
.qj-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.qj-info { display: flex; align-items: center; gap: 8px; color: #0b5cab; font-size: 13px; flex: 1; min-width: 0; }
.qj-info > i { color: var(--navy-accent, #0074d9); }
.qj-info strong { color: var(--navy-primary, #001f3f); font-weight: 700; }
.qj-source { color: #5f6c80; font-size: 11px; font-style: italic; }
.qj-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qj-switch-select { padding: 7px 12px; border: 1px solid #cfe3fa; border-radius: 4px; background: #fff; font-size: 13px; cursor: pointer; color: #2c3e50; min-width: 200px; }
.qj-switch-select:hover { border-color: var(--navy-accent, #0074d9); }
.qj-clear-btn { padding: 7px 12px; border: 1px solid #fecaca; background: #fff; color: #b91c1c; border-radius: 4px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.qj-clear-btn:hover { background: #fee2e2; }
@media (max-width: 640px) {
    .qj-banner-inner { flex-direction: column; align-items: stretch; }
    .qj-actions { justify-content: stretch; }
    .qj-switch-select { flex: 1; min-width: 0; }
}

/* FBA Amazon Update / Resolution col — two stacked icon buttons (long-text editors via modal) */
.fba-ama-stack { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
.fba-ama-stack .fba-ama-btn { width: 100%; justify-content: flex-start; }
.fba-ama-stack .fba-ama-upd { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.fba-ama-stack .fba-ama-upd:hover { background: #fed7aa; }
.fba-ama-stack .fba-ama-res { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.fba-ama-stack .fba-ama-res:hover { background: #bbf7d0; }
/* FBA pri-issue-cs col widths match distributor/account */
#tblFba .pri-issue-cs .ws-inline { max-width: 158px; }

/* task-description cell — body text + small edit chip (opens task-history modal) */
.task-desc-cell { display: flex; align-items: flex-start; gap: 6px; }
.task-desc-cell .task-desc-body { flex: 1; min-width: 0; font-size: 12.5px; color: #2c3e50; line-height: 1.45; word-break: break-word; }
.task-desc-cell .task-desc-body.is-empty { color: #94a3b8; font-style: italic; }
.task-desc-cell .task-edit-chip { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; border: 1px solid #cfe3fa; background: #f0f7ff; color: #0b5cab; font-size: 10px; cursor: pointer; }
.task-desc-cell .task-edit-chip:hover { background: #0b5cab; color: #fff; border-color: #0b5cab; }
/* whole-cell click target (account task desc) — opens the editor popup, no edit icon */
.task-desc-cell.task-desc-click { cursor: pointer; border-radius: 4px; padding: 2px 4px; margin: -2px -4px; transition: background .12s ease; }
.task-desc-cell.task-desc-click:hover { background: #f0f7ff; }
.task-desc-cell.task-desc-click:hover .task-desc-body { color: #0b5cab; }

/* task description history modal — past versions list (mirrors shipment pack-size history) */
.task-hist-label { font-size: 12px; font-weight: 600; color: var(--navy-primary, #001f3f); margin-top: 10px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.task-hist-label i { color: var(--navy-accent, #0074D9); }
#accTaskHistory { max-height: 240px; overflow-y: auto; }
.task-hist-row { padding: 8px 10px; border: 1px solid #eef2f8; border-radius: 5px; margin-bottom: 6px; background: #fafbfd; font-size: 12px; }
.task-hist-row:hover { border-color: #cfe3fa; background: #f0f7ff; }
.task-hist-meta { display: flex; align-items: center; gap: 6px; color: #5f6c80; font-size: 10.5px; margin-bottom: 4px; }
.task-hist-meta i { font-size: 10px; }
.task-hist-body { white-space: pre-wrap; word-break: break-word; color: #2c3e50; line-height: 1.4; }
.task-hist-body .task-hist-restore { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; color: var(--navy-accent, #0074D9); cursor: pointer; }
.task-hist-body .task-hist-restore:hover { text-decoration: underline; }

/* hover preview popup — mirrors client_shipping/client_orders notes hover tooltip */
.hover-notes-tip { position: absolute; z-index: 99999; background: #fff; border: 1px solid #d7def0; border-radius: 8px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,31,63,.18); max-width: 360px; min-width: 220px; font-size: 12.5px; color: #2c3e50; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.hover-notes-tip.visible { opacity: 1; transform: translateY(0); }
.hover-notes-tip::after { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #fff; filter: drop-shadow(0 1px 0 #d7def0); }
.hover-notes-tip.below::after { bottom: auto; top: -7px; border-top: none; border-bottom: 7px solid #fff; filter: drop-shadow(0 -1px 0 #d7def0); }
.hover-notes-tip .tip-title { font-weight: 700; color: var(--navy-primary, #001f3f); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #e8edf5; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.hover-notes-tip .tip-title i { color: var(--navy-accent, #0074D9); }
.hover-notes-tip .tip-title .tip-count { margin-left: auto; background: var(--navy-accent, #0074D9); color: #fff; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.hover-notes-tip .tip-empty { color: #888; font-style: italic; text-align: center; padding: 6px 0; }
.hover-notes-tip .tip-loading { color: #888; text-align: center; padding: 4px 0; }
.hover-notes-tip .tip-loading i { color: var(--navy-accent, #0074D9); margin-right: 5px; }
.hover-notes-tip .tip-more { margin-top: 6px; text-align: center; font-size: 11px; color: var(--navy-accent, #0074D9); font-style: italic; }
.hover-notes-tip .tip-note { padding: 7px 0; border-bottom: 1px solid #f0f4fa; }
.hover-notes-tip .tip-note:last-child { border-bottom: none; }
.hover-notes-tip .tip-meta { font-size: 11px; color: #5f6c80; margin-bottom: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hover-notes-tip .tip-meta i { font-size: 10px; }
.hover-notes-tip .tip-body { line-height: 1.45; color: #2c3e50; white-space: pre-wrap; word-wrap: break-word; }
@media (max-width: 600px) { .hover-notes-tip { display: none !important; } }

/* case notes modal — reuses the shared .shipping-note-* / .shipping-modal-* classes (see "Shipping modals" section) so it matches client_orders' Notes popup */

/* ===== Branded SweetAlert popups — navy header bar (logo + site name) as the first row, flush at the top.
   The Swal.fire wrapper injects .brand-popup-header into the title slot; `display:contents` dissolves the
   title box so the header + heading become direct popup-grid items, and `order:-1` floats the header up
   above SweetAlert's icon/body. ===== */
.branded-popup { padding: 0 0 8px !important; border-radius: 14px !important; overflow: hidden; box-shadow: 0 22px 55px rgba(0, 31, 63, 0.34) !important; max-width: 452px !important; }
.branded-popup .swal2-title { display: contents !important; }
.brand-popup-header { order: -1; display: flex; align-items: center; gap: 11px; padding: 13px 16px; background: linear-gradient(135deg, #001f3f 0%, #00386b 100%); color: #fff; border-bottom: 2px solid var(--navy-accent, #0074D9); }
.brand-popup-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: #fff; padding: 3px; flex: 0 0 auto; }
.brand-popup-logo-fa { font-size: 22px; color: #fff; flex: 0 0 auto; width: 32px; text-align: center; }
.brand-popup-name { font-weight: 700; font-size: 14px; letter-spacing: 0.4px; flex: 1; min-width: 0; text-align: left; line-height: 1.25; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.branded-popup .swal2-close { position: absolute !important; color: #fff !important; opacity: 0.85; font-size: 26px !important; right: 12px !important; top: 9px !important; z-index: 3; transition: opacity .15s, transform .15s; }
.branded-popup .swal2-close:hover { color: #fff !important; opacity: 1; transform: scale(1.12); }
/* status icon — first thing under the header */
.branded-popup .swal2-icon { width: 56px !important; height: 56px !important; margin: 20px auto 2px !important; border-width: 3px !important; }
.branded-popup .swal2-icon .swal2-icon-content { font-size: 28px !important; }
.brand-popup-title { padding: 8px 24px 0; font-size: 17.5px; font-weight: 700; color: #1e3a5f; text-align: center; line-height: 1.35; }
.branded-popup .swal2-html-container { padding: 8px 26px 16px !important; margin: 0 !important; color: #55657a !important; font-size: 13.5px; line-height: 1.55; }
.branded-popup .swal2-actions { padding: 6px 20px 18px !important; margin: 2px 0 0 !important; gap: 10px; flex-wrap: wrap; }
.branded-popup .swal2-styled.swal2-confirm { background: var(--navy-primary, #001f3f) !important; box-shadow: none !important; padding: 10px 26px !important; font-weight: 600 !important; border-radius: 8px !important; font-size: 14px !important; transition: filter .15s, transform .1s; }
.branded-popup .swal2-styled.swal2-confirm:hover { filter: brightness(1.18); }
.branded-popup .swal2-styled.swal2-confirm:active { transform: translateY(1px); }
.branded-popup .swal2-styled.swal2-cancel { background: #eef2f8 !important; color: var(--navy-primary, #001f3f) !important; box-shadow: none !important; padding: 10px 26px !important; font-weight: 600 !important; border-radius: 8px !important; font-size: 14px !important; }
.branded-popup .swal2-styled.swal2-cancel:hover { background: #dde5f1 !important; }
.branded-popup .swal2-loader { border-color: var(--navy-accent, #0074D9) transparent var(--navy-accent, #0074D9) transparent !important; }
.branded-popup .swal2-validation-message { background: #fef2f2 !important; color: #b91c1c !important; border-radius: 6px; margin-top: 6px; }
.branded-popup .swal2-input,
.branded-popup .swal2-textarea,
.branded-popup .swal2-select { border: 1px solid #d7def0 !important; border-radius: 8px !important; box-shadow: none !important; }
.branded-popup .swal2-input:focus,
.branded-popup .swal2-textarea:focus,
.branded-popup .swal2-select:focus { border-color: var(--navy-accent, #0074D9) !important; box-shadow: 0 0 0 3px rgba(0,116,217,0.13) !important; }

/* ============================================================
   Stacked-cell chips — Product / Quantity / Order Info / Cost cells.
   Canonical definitions shared by orders, new-products, reorder pages
   so the visual is consistent across the system.
   Uses CSS grid: col-1 = max-content (chip label aligns), col-2 = 1fr (value).
   ============================================================ */

.cell-stack {
    display: inline-grid;
    grid-template-columns: max-content 1fr;
    gap: 5px 10px;
    align-items: center;
    width: 100%;
}
.cell-stack-row { display: contents; }
.cell-stack-val { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.35; min-width: 0; }
.cell-stack a, .cell-stack strong, .cell-stack > span:not(.cell-sub-label) { font-size: 12.5px; line-height: 1.35; min-width: 0; }

/* reverse_sourcing assign popup — per-account status + tier inline selects */
.rs-pop-sel { width: 100%; max-width: 124px; height: 24px; padding: 1px 4px; font-size: 11px; border: 1px solid #d7def0; border-radius: 4px; background: #fff; color: var(--navy-primary); cursor: pointer; }
.rs-pop-sel:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(0,116,217,.12); }
.rs-pop-sel:disabled { opacity: .6; cursor: progress; }

/* assign-popover Status / Tier dropdowns — value-based color coding (matches .ws-inline state palette) */
.rs-pop-sel.rs-stat-gated   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.rs-pop-sel.rs-stat-ungated { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.rs-pop-sel.rs-tier-none { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.rs-pop-sel.rs-tier-approved { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.rs-pop-sel.rs-tier-soft     { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.rs-pop-sel.rs-tier-10   { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.rs-pop-sel.rs-tier-100  { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.rs-pop-sel.rs-tier-1000 { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
.rs-assign-pop-empty { padding: 10px; color: #8694a6; font-style: italic; }

/* sub-label chip — uniform width per grid via justify-self stretch; nowrap so chip never wraps */
.cell-sub-label {
    font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0.3px;
    padding: 3px 9px; border-radius: 4px; text-align: center;
    background: #eef2f7; color: #5f6c80;
    white-space: nowrap;
    justify-self: stretch; align-self: center;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08);
}
.cell-sub-label i { font-size: 10px; opacity: 0.9; }

/* channel identity chips */
.cell-sub-label.sub-amz   { background: #ffedd5; color: #9a3412; }
.cell-sub-label.sub-sup   { background: #16a34a; color: #ffffff; }
/* identifier chips */
.cell-sub-label.sub-asin  { background: #1e3a5f; color: #ffffff; }
.cell-sub-label.sub-fnsku { background: #a0522d; color: #ffffff; }
.cell-sub-label.sub-sku   { background: #0d9488; color: #ffffff; }
/* metric chips (kept for compat with the per-page color-picker presets) */
.cell-sub-label.sub-amz-price { background: #fff7ed; color: #9a3412; }
.cell-sub-label.sub-sup-price { background: #eff6ff; color: #1e3a8a; }
.cell-sub-label.sub-profit    { background: #dcfce7; color: #14532d; }
.cell-sub-label.sub-roi       { background: #fef3c7; color: #92400e; }
.cell-sub-label.sub-sales     { background: #ede9fe; color: #5b21b6; }
.cell-sub-label.sub-qty-rec   { background: #cffafe; color: #155e75; }
/* account / case / order / status / shipping / issue / cost chips (used by cases.php distributor table) */
.cell-sub-label.sub-account { background: #fce7f3; color: #9d174d; }   /* pink */
.cell-sub-label.sub-client  { background: #f5f5f4; color: #292524; }   /* stone */
.cell-sub-label.sub-case    { background: #dbeafe; color: #1e40af; }   /* blue */
.cell-sub-label.sub-priority{ background: #f3e8ff; color: #6b21a8; }   /* violet */
.cell-sub-label.sub-status  { background: #e0e7ff; color: #3730a3; }   /* indigo */
.cell-sub-label.sub-order   { background: #fef3c7; color: #92400e; }   /* amber */
.cell-sub-label.sub-date    { background: #ede9fe; color: #5b21b6; }   /* violet */
.cell-sub-label.sub-ship    { background: #fed7aa; color: #7c2d12; }   /* orange */
.cell-sub-label.sub-deliv   { background: #d1fae5; color: #065f46; }   /* emerald */
.cell-sub-label.sub-track   { background: #ffe4e6; color: #9f1239; }   /* rose */
.cell-sub-label.sub-issue   { background: #fee2e2; color: #991b1b; }   /* red */
.cell-sub-label.sub-exp     { background: #fbcfe8; color: #831843; }   /* pink-dark */
.cell-sub-label.sub-remaining { background: #cffafe; color: #155e75; } /* cyan — Received − Sent */
.cell-sub-label.sub-total   { background: #dcfce7; color: #166534; }   /* green */
/* shipment Remaining value — negative (over-sent) flagged red */
.ship-remaining.rem-negative { color: #dc2626; }
/* ungating tier chips (ungated_products page) */
.cell-sub-label.sub-ungate-10   { background: #e0f2fe; color: #075985; }  /* sky */
.cell-sub-label.sub-ungate-100  { background: #dbeafe; color: #1e40af; }  /* blue */
.cell-sub-label.sub-ungate-1000 { background: #1e3a5f; color: #ffffff; }  /* navy */
/* ungated_products — merged unit-tier column: chip + on/off toggle stacked per tier */
.ung-tier-stack { display: inline-grid; gap: 6px; min-width: 158px; }
.ung-tier-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
/* attendance / performance chips */
.cell-sub-label.sub-user     { background: #001f3f; color: #ffffff; }  /* navy */
.cell-sub-label.sub-clockin  { background: #dcfce7; color: #14532d; }  /* green */
.cell-sub-label.sub-clockout { background: #fee2e2; color: #991b1b; }  /* red */
.cell-sub-label.sub-hours    { background: #dbeafe; color: #1e40af; }  /* blue */
.cell-sub-label.sub-tax     { background: #ffedd5; color: #7c2d12; }   /* light orange */
.cell-sub-label.sub-qty     { background: #e0f2fe; color: #075985; }   /* sky */
.cell-sub-label.sub-cost    { background: #e2e8f0; color: #1e293b; }   /* slate */
.cell-sub-label.sub-web     { background: #cffafe; color: #0e7490; }   /* cyan — website / login url */
.cell-sub-label.sub-email   { background: #dbeafe; color: #1d4ed8; }   /* blue — email */
.cell-sub-label.sub-pwd     { background: #fee2e2; color: #b91c1c; }   /* red — password */

/* code identifier — monospace pill, click to copy (data-copy holds the value) */
.cell-stack code {
    background: #f0f4fa; padding: 1px 5px; border-radius: 3px;
    font-size: 11.5px; color: var(--navy-primary, #001f3f);
    justify-self: start; cursor: copy;
    transition: background 0.15s, color 0.15s;
}
.cell-stack code:hover { background: #dbeafe; color: #1d4ed8; }
/* reserve copy-icon width at all times -> hover/copy only flip opacity, no reflow */
.cell-stack code::after { content: '\f0c5'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 9px; margin-left: 5px; color: #1d4ed8; opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.cell-stack code:hover::after { opacity: 1; }
.cell-stack code.just-copied { background: #d1fae5 !important; color: #047857 !important; }
.cell-stack code.just-copied::after { content: '\f00c' !important; color: #047857 !important; opacity: 1; }

/* compact LINK chip (clickable, copies full URL stored in data-copy) */
.cell-stack code.url-code { font-size: 10.5px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.cell-stack code.link-chip {
    font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
    padding: 2px 9px; background: #e0f2fe; color: #075985; max-width: none;
}
.cell-stack code.link-chip i { font-size: 9px; margin-right: 3px; }
.cell-stack code.link-chip:hover { background: #bae6fd; color: #0c4a6e; }
/* reserve copy-icon width at all times -> hover/copy only flip opacity, no reflow */
.cell-stack code.link-chip::after { content: '\f0c5'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 8px; margin-left: 4px; color: #0c4a6e; opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.cell-stack code.link-chip:hover::after { opacity: 1; }
.cell-stack code.link-chip.just-copied::after { content: '\f00c' !important; color: #047857 !important; font-size: 8px; margin-left: 4px; opacity: 1; }
/* supplier LINK chip — count shown before the word as "(n) LINKS" (singular "LINK" for one); click still copies the current one */
.cell-stack code.link-chip .sup-link-count { font-weight: 800; opacity: 0.9; }
.cell-stack-val a.url-open-icon { margin-left: 6px; vertical-align: middle; color: var(--navy-accent, #0074D9); }
.cell-stack-val a.url-open-icon:hover { color: var(--navy-primary, #001f3f); }

/* Amazon vs Supplier channel rows — left stripe in brand color */
.cell-stack.channel-stack .cell-stack-row.chan-amz { padding-left: 4px; border-left: 3px solid #ff9900; margin: 1px 0; }
.cell-stack.channel-stack .cell-stack-row.chan-sup { padding-left: 4px; border-left: 3px solid #0074D9; margin: 1px 0; }

/* pack-of helper rows beneath each channel — visually subordinate */
.cell-stack .cell-sub-label.qty-pack-chip { font-size: 9.5px; padding: 1px 7px; opacity: 0.85; font-weight: 600; }
.cell-stack .cell-stack-val.qty-pack-val  { font-size: 9.5px; opacity: 0.9; }
.cell-stack .cell-stack-val.qty-pack-val strong { font-weight: 700; color: #c2410c; font-size: 9.5px; }

/* shared cost-value text colors */
.cost-amz-price { color: #9a3412; font-weight: 700; }
.cost-sup-price { color: #1e3a8a; font-weight: 700; }
.cost-profit    { color: #14532d; font-weight: 700; }
.cost-profit.negative { color: #991b1b; }
.cost-roi       { color: #92400e; font-weight: 700; }
.cost-sales     { color: #5b21b6; font-weight: 700; }
.cost-qty-rec   { color: #155e75; font-weight: 700; }
.cost-total     { color: #1e7d34; font-weight: 700; }
.cost-unit      { color: #1e3a5f; }
.cost-ship      { color: #d97706; }
.cost-disc      { color: #b91c1c; }

/* product thumbnails — Amazon thumb (top) + Supplier thumb (bottom), 40×40, channel-tinted border */
.prod-img-stack { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.prod-thumb { width: 40px; height: 40px; object-fit: contain; border: 1px solid #e5e7eb; border-radius: 4px; background: #fafafa; display: block; margin: 0 auto; transition: transform 0.15s, box-shadow 0.15s; }
.prod-thumb-amz { border-color: #fed7aa; }   /* warm amz orange tint */
.prod-thumb-sup { border-color: #bbf7d0; }   /* sup green tint */
.prod-thumb-fav { padding: 9px; opacity: 0.7; }
.prod-img-link { display: inline-block; cursor: pointer; line-height: 0; }
.prod-img-link:hover .prod-thumb { transform: scale(1.12); box-shadow: 0 2px 8px rgba(0,0,0,0.18); border-color: #0074D9; position: relative; z-index: 5; }
td.col-image { width: 56px; min-width: 56px; max-width: 56px; text-align: center; padding: 4px; vertical-align: middle; }
#shipTable td.col-image { vertical-align: middle; } /* beat #shipTable tbody td top-align so thumb centers in tall rows */

/* inline-editable units cells — mirrors client_new_products qty-ordered input */
.qty-ord-inline-input { width: 80px; padding: 5px 8px; border: 1px solid #d7def0; border-radius: 4px; font-size: 13px; color: var(--navy-primary); background: #fff; text-align: right; transition: border-color .15s, background .35s; }
.qty-ord-inline-input:focus { outline: none; border-color: var(--navy-accent); background: #f5faff; box-shadow: 0 0 0 2px rgba(0,116,217,.12); }
.qty-ord-inline-input:disabled { opacity: .6; cursor: progress; }
.qty-ord-inline-input.qty-saved { background: #e6f7ec; border-color: #34a853; }
#shipTable .qty-ord-inline-input { width: 78px; height: 22px; line-height: 1; font-size: 11.5px; padding: 2px 8px; }

/* ============================================================
   Discount Code col — compact stack (no chip labels) + hover history preview
   Used by client_new_products.php and client_reorder.php
   ============================================================ */
.discount-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.discount-hist-btn { white-space: nowrap; }

/* hover tooltip — appears below the history button on mouseenter, fetched once and cached */
.discount-hist-tooltip {
    position: absolute; z-index: 9999;
    background: #fff;
    border: 1px solid #d7def0;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16);
    padding: 6px 10px;
    min-width: 240px;
    max-width: 360px;
    font-size: 12px;
    pointer-events: none;
}
.dht-row { padding: 6px 0; border-bottom: 1px dashed #e8edf5; }
.dht-row:last-child { border-bottom: 0; }
.dht-code-line { margin-bottom: 4px; }
.dht-body { color: #2c3e50; margin: 4px 0; word-wrap: break-word; line-height: 1.35; }
.dht-meta { font-size: 10.5px; color: #5f6c80; display: flex; gap: 8px; flex-wrap: wrap; }
.dht-more { padding: 6px 0 2px; text-align: center; font-size: 11px; color: var(--navy-accent, #0074D9); border-top: 1px dashed #e8edf5; margin-top: 4px; font-weight: 600; }
.dht-empty { padding: 6px 2px; color: #5f6c80; font-style: italic; }

/* ============================================================
   Product col with inline prices — 3-column grid: chip | link | price.
   ASIN/FNSKU rows use .span2 to fill the price slot.
   ============================================================ */
.cell-stack.prod-with-price { grid-template-columns: max-content max-content max-content; gap: 4px 8px; }
.cell-stack.prod-with-price .cell-stack-val.span2 { grid-column: span 2; }
.cell-stack.prod-with-price .cell-stack-val.price-inline { font-weight: 700; font-size: 12.5px; justify-self: end; padding-left: 6px; min-width: 56px; }
.cell-stack.prod-with-price .price-dash { font-style: italic; opacity: 0.7; }

/* ============================================================
   Inline workflow-status dropdown — pill-shaped, compact, custom arrow.
   Used by client_new_products.php and client_reorder.php.
   ============================================================ */
.ws-inline {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 2px 22px 2px 10px;
    font-size: 10.5px;
    font-weight: 500;
    width: 100%;
    min-width: 0;
    max-width: 140px;
    height: 22px;
    line-height: 1;
    border: 1px solid #d7def0;
    border-radius: 14px;
    background: #fff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3e%3cpath fill='%235f6c80' d='M5 6L0 0h10z'/%3e%3c/svg%3e") no-repeat right 8px center;
    background-size: 8px;
    color: var(--navy-primary, #001f3f);
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}
.ws-inline:hover { border-color: var(--navy-accent, #0074D9); background-color: #f7faff; }
.ws-inline:focus { outline: none; border-color: var(--navy-accent, #0074D9); box-shadow: 0 0 0 2px rgba(0,116,217,0.12); }

/* back-in-stock — positive/green, restocked is good news */
.ws-inline.ws-back_in_stock { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }

/* ============================================================
   Cases page (cases.php) — moved out of the page's inline <style> block.
   ============================================================ */
/* select2 dropdown — solid white, above the sticky DataTable header */
.select2-container--open .select2-dropdown,
.select2-dropdown.select2-dropdown { background: #fff !important; opacity: 1 !important; z-index: 99999 !important; border: 1px solid #d7def0 !important; box-shadow: 0 6px 18px rgba(0,31,63,.18); }
.select2-dropdown .select2-results, .select2-dropdown .select2-results__options { background: #fff !important; }
.select2-container--default .select2-results__option { background: #fff !important; color: var(--navy-primary); padding: 8px 12px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--navy-accent) !important; color: #fff !important; }

.filters-section.compact { padding: 10px 14px; }
.filters-section.compact .filters-header { margin-bottom: 8px; padding-bottom: 6px; }
.filters-section.compact .filters-header h3 { font-size: 13px; margin: 0; display: flex; align-items: center; gap: 8px; }
.filter-result-count { font-size: 11px; color: #5f6c80; font-weight: 400; background: #f0f4fa; padding: 2px 8px; border-radius: 10px; }
.filters-grid.compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; }
.filters-grid.compact .filter-group { display: flex; flex-direction: column; gap: 2px; }
/* conditional filter groups (e.g. custom date range) stay hidden until JS reveals them — beats the display:flex above */
.filters-grid.compact .filter-group.initially-hidden { display: none; }
.filters-grid.compact .filter-group label { font-size: 11px; color: #5f6c80; margin: 0; display: flex; align-items: center; gap: 4px; font-weight: 500; }
.filters-grid.compact .filter-input { height: 32px; padding: 4px 8px; font-size: 12px; line-height: 22px; border: 1px solid #d7def0; border-radius: 4px; background: #fff; color: var(--navy-primary); }
.filters-grid.compact .filter-input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(0,116,217,.12); }

/* section picker — compact dropdown in the page header (replaces the old full-width .bucket-bar) */
.header-section-pick { display: inline-flex; align-items: center; gap: 6px; color: var(--navy-accent, #0074D9); }
.header-section-pick > i { font-size: 14px; }
.header-section-select { height: 32px; padding: 4px 26px 4px 10px; font-size: 13px; font-weight: 600; border: 2px solid var(--navy-accent, #0074D9); border-radius: 6px; background-color: #fff; color: var(--navy-primary, #001f3f); cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3e%3cpath fill='%230074D9' d='M5 6L0 0h10z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 9px center; background-size: 8px; }
.header-section-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,116,217,.18); }
body.dark-mode .header-section-select { background-color: var(--input-bg, #1a1a35); color: var(--text-primary, #e6e9f5); border-color: var(--navy-accent, #0074D9); }

.cases-section { display: none; }
.cases-section.active { display: block; }

/* category / issue badges */
.pill { display: inline-block; padding: 3px 8px; font-size: 11px; font-weight: 600; border-radius: 10px; }
.pill-cat { background: #e8f0fe; color: #1967d2; }
.pill-issue-missing_units { background: #fce8e6; color: #c5221f; }
.pill-issue-damaged_units { background: #fff3e0; color: #e65100; }
.pill-issue-other { background: #f1f3f4; color: #5f6c80; }

/* ============================================================
   Colors admin page (colors.php) — central chip-palette editor
   ============================================================ */
.colors-hint { font-size: 12.5px; color: #5f6c80; background: #f0f4fa; border: 1px solid #dbe3ef; border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.colors-hint i { color: var(--navy-accent, #0074D9); }
.colors-loading { text-align: center; color: #5f6c80; font-size: 13px; padding: 24px; font-style: italic; }
.colors-body { display: flex; flex-direction: column; gap: 18px; }
.colors-group { border: 1px solid #e5e9f2; border-radius: 8px; padding: 12px 14px; background: #fafbfd; }
.colors-group-title { font-size: 13px; font-weight: 700; color: var(--navy-primary, #001f3f); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.3px; }
.colors-group-title i { color: var(--navy-accent, #0074D9); }
.colors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 14px; }
.colors-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; background: #fff; border: 1px solid #eef2f7; }
.colors-chip { flex: 0 0 auto; min-width: 130px; max-width: 170px; text-align: center; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08); }
.colors-row-inputs { display: flex; gap: 8px; margin-left: auto; }
.colors-pick { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9.5px; color: #5f6c80; font-weight: 600; }
.colors-pick input[type="color"] { width: 34px; height: 26px; border: 1px solid #d7def0; border-radius: 4px; cursor: pointer; padding: 0; background: #fff; }
body.dark-mode .colors-hint { background: #20203f; border-color: #34345f; color: var(--text-secondary, #c6cde0); }
body.dark-mode .colors-group { background: #1c1c3a; border-color: #34345f; }
body.dark-mode .colors-row { background: #20203f; border-color: #34345f; }
@media (max-width: 600px) { .colors-grid { grid-template-columns: 1fr; } .colors-chip { min-width: 96px; } }

/* Quick Color Templates gallery (colors.php) — preset palettes w/ 5x5 swatch preview */
.color-templates { border: 1px solid #e5e9f2; border-radius: 8px; padding: 14px 16px; background: #fafbfd; margin-bottom: 18px; }
.color-templates-title { font-size: 13px; font-weight: 700; color: var(--navy-primary, #001f3f); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.3px; flex-wrap: wrap; }
.color-templates-title i { color: var(--navy-accent, #0074D9); }
.color-templates-sub { font-weight: 600; font-size: 11px; color: #8a93a6; text-transform: none; letter-spacing: 0; }
.color-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 12px; }
.color-template-card { background: var(--bg-card, #fff); border: 1px solid #e5e9f2; border-left: 4px solid var(--navy-primary, #001f3f); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 10px; transition: transform .2s, box-shadow .2s; }
.color-template-card:hover { transform: translateY(-3px); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.color-template-head { font-size: 12.5px; font-weight: 700; color: var(--navy-primary, #001f3f); display: flex; align-items: center; gap: 7px; }
.color-template-head i { color: var(--navy-accent, #0074D9); }
.ctpl-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.ctpl-swatch { aspect-ratio: 1 / 1; border-radius: 3px; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08); }
.ctpl-apply { align-self: stretch; justify-content: center; }
body.dark-mode .color-templates { background: #1c1c3a; border-color: #34345f; }
body.dark-mode .color-template-card { background: #20203f; border-color: #34345f; }
body.dark-mode .color-templates-sub { color: #8b93b5; }
@media (max-width: 600px) { .color-template-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Out of Stock master-data page — low-stock row tint + product chip
   ============================================================ */
.row-low-stock td { background: #fff3cd !important; }
body.dark-mode .row-low-stock td { background: #4a3a14 !important; color: #fff3cd; }
.oos-product-chip { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.oos-product-chip .oos-asin { font-size: 11px; color: #5f6c80; font-weight: 600; letter-spacing: .3px; }
.oos-product-chip .oos-name { font-size: 13px; color: var(--navy-primary, #001f3f); font-weight: 600; }
body.dark-mode .oos-product-chip .oos-asin { color: #9aa3b8; }
body.dark-mode .oos-product-chip .oos-name { color: #e6ecf5; }
.oos-yes { color: #1e8e3e; font-weight: 700; }
.oos-no  { color: #c5221f; font-weight: 700; }
.oos-threshold-warn { color: #c5221f; font-weight: 700; }

/* shared multiselect popover — row-level rs-assign-btn in reverse_sourcing.php + header-level account filter on client_* pages */
.rs-assign-pop { position: absolute; z-index: 10001; background: #fff; border: 1px solid #d7def0; border-radius: 8px; box-shadow: 0 12px 32px rgba(15,23,42,0.22); padding: 8px; min-width: 240px; max-width: 320px; max-height: 320px; display: flex; flex-direction: column; }
.rs-assign-pop-header { display: flex; gap: 6px; padding: 4px 4px 8px; border-bottom: 1px solid #eef2f8; }
.rs-assign-pop-search { flex: 1; height: 28px; padding: 4px 8px; font-size: 12px; border: 1px solid #d7def0; border-radius: 4px; }
.rs-assign-pop-search:focus { outline: none; border-color: var(--navy-accent, #0074D9); box-shadow: 0 0 0 2px rgba(0,116,217,.12); }
.rs-assign-pop-list { flex: 1; overflow-y: auto; padding: 4px 2px; }
.rs-assign-pop-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px; cursor: pointer; font-size: 12.5px; color: #2c3e50; }
.rs-assign-pop-row:hover { background: #f0f4fa; }
.rs-assign-pop-row input[type="checkbox"] { accent-color: var(--navy-accent, #0074D9); width: 16px; height: 16px; cursor: pointer; }
.rs-assign-pop-row .rs-pop-acc-name { flex: 1; font-weight: 600; }
.rs-assign-pop-row .rs-pop-acc-biz { font-size: 11px; color: #5f6c80; font-weight: 400; }
.rs-assign-pop-footer { display: flex; justify-content: space-between; gap: 6px; padding: 6px 4px 2px; border-top: 1px solid #eef2f8; margin-top: 4px; font-size: 12px; }
.rs-assign-pop-clear { background: transparent; border: 0; color: #8694a6; cursor: pointer; padding: 2px 6px; }
.rs-assign-pop-clear:hover { color: #ea4335; }
.rs-assign-pop-status { color: var(--navy-accent, #0074D9); font-style: italic; }
/* supplier-links popover (Product col) — click the green Supplier badge to view/copy/switch the shown link; shared across all product list pages */
.rs-suplink-pop { min-width: 250px; max-width: 380px; }
.rs-suplink-head { padding-bottom: 6px; }
.rs-suplink-title { font-weight: 700; color: var(--navy-primary, #001f3f); font-size: 12.5px; }
.rs-assign-pop-row.rs-suplink-row { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.rs-suplink-row.is-primary { background: #ecfdf5; }
.rs-suplink-row.is-primary:hover { background: #d1fae5; }
.rs-suplink-radio { color: #cbd5e1; flex: 0 0 auto; font-size: 13px; }
.rs-suplink-row.is-primary .rs-suplink-radio { color: #16a34a; }
.rs-suplink-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rs-sup-copy { border: 1px solid #d7def0; background: #f7f9fc; color: var(--navy-accent, #0074D9); border-radius: 5px; padding: 3px 8px; font-size: 11px; line-height: 1; cursor: pointer; }
.rs-sup-copy:hover { background: var(--navy-accent, #0074D9); color: #fff; border-color: var(--navy-accent, #0074D9); }
.rs-sup-open { color: var(--navy-accent, #0074D9); display: inline-flex; align-items: center; padding: 2px 4px; }
.rs-sup-open:hover { color: var(--navy-primary, #001f3f); }
/* image drop zones (Amazon single + per supplier-row) — compact, ~input height */
.rs-img-drop { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 6px 10px; border: 1.5px dashed #d7def0; border-radius: 6px; background: #fafbfd; cursor: pointer; transition: border-color .15s, background .15s; }
.rs-img-drop:hover, .rs-img-drop.drag { border-color: var(--navy-accent, #0074D9); background: #f0f4fa; }
.rs-img-file { display: none; }
.rs-img-empty { display: flex; align-items: center; gap: 7px; color: #8694a6; font-size: 12px; pointer-events: none; }
.rs-img-empty i { font-size: 15px; color: var(--navy-accent, #0074D9); }
.rs-img-preview { display: flex; align-items: center; gap: 8px; }
.rs-img-preview .rs-img-thumb { height: 30px; width: 30px; object-fit: cover; border-radius: 4px; border: 1px solid #e5e7eb; }
.rs-img-remove { border: none; background: transparent; color: #dc2626; cursor: pointer; font-size: 13px; padding: 2px 5px; line-height: 1; }
.rs-img-remove:hover { color: #b91c1c; }
/* per supplier-row image — compact + inline on the SAME row as the supplier name + link */
.sup-pair-row { flex-wrap: nowrap; }
.sup-pair-imgdrop { flex: 0 0 auto; width: 108px; min-height: 36px; padding: 3px 7px; }
.sup-pair-imgdrop .rs-img-empty { font-size: 11px; gap: 5px; white-space: nowrap; }
.sup-pair-imgdrop .rs-img-empty span { display: none; } /* icon-only in the compact inline box */
.sup-pair-imgdrop .rs-img-preview .rs-img-thumb { height: 26px; width: 26px; }
@media (max-width: 640px) { .sup-pair-row { flex-wrap: wrap; } .sup-pair-imgdrop { flex: 1 1 100%; width: auto; } }

/* account-name chips — gated / ungated columns on ungated_products.php */
.rs-acc-chips { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.rs-acc-chip { display: inline-block; padding: 1.5px 8px; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--navy-accent, #0074D9); border-radius: 10px; line-height: 1.45; }
#ungTable td.col-acc-chips { text-align: left; }

/* ungated_products — gated / ungated account chips */
.ung-acc-list { display: grid; grid-template-columns: repeat(3, max-content); gap: 5px; justify-content: center; }
.ung-acc-row { display: flex; justify-content: center; }
.ung-acc-row .rs-acc-chip { flex: 0 0 auto; }
/* clickable account chip — flips Gated⇄Ungated (mirrors the reverse-sourcing assignment) */
/* ungated Edit-column gating popover + trigger button (mirrors the reverse-sourcing assign dropdown) */
.ung-edit-btn { background: transparent; border: 1px solid #d7def0; border-radius: 6px; padding: 4px 9px; cursor: pointer; color: var(--navy-accent, #0074D9); }
.ung-edit-btn:hover { background: rgba(0,116,217,0.08); border-color: var(--navy-accent, #0074D9); }
.ung-edit-pop { position: absolute; z-index: 10001; display: none; background: #fff; border: 1px solid #d7def0; border-radius: 8px; box-shadow: 0 12px 32px rgba(15,23,42,0.22); min-width: 280px; max-width: 340px; max-height: 320px; overflow-y: auto; padding: 6px; }
.ung-edit-pop-head { display: flex; justify-content: space-between; padding: 4px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #8694a6; border-bottom: 1px solid #eef2f8; }
.ung-edit-pop-list { padding: 4px 2px; }
.ung-edit-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 12.5px; margin: 0; }
.ung-edit-pop-row:hover { background: #f0f4fa; }
.ung-edit-acc { font-weight: 600; color: #2c3e50; }
.ung-edit-pop-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--navy-accent, #0074D9); cursor: pointer; }
.ung-edit-pop-empty { padding: 14px 8px; text-align: center; color: #8694a6; font-size: 12.5px; }

/* ungated_products — Tier column: per-product flag chip + inline toggle */
.ung-flag-list { display: flex; flex-direction: column; gap: 6px; }
.ung-flag-row { display: flex; align-items: center; gap: 8px; }
.ung-flag-chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 78px; padding: 2.5px 9px; font-size: 10.5px; font-weight: 700; line-height: 1.5; border: 1px solid transparent; border-radius: 10px; }
.ung-flag-chip i { font-size: 9px; }
.ung-flag-chip.is-off { opacity: .45; filter: grayscale(.7); }
.ung-flag-chip.tier-approved { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.ung-flag-chip.tier-soft     { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.ung-flag-chip.tier-10       { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
.ung-flag-chip.tier-100      { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.ung-flag-chip.tier-1000     { background: #f3e8ff; color: #6b21a8; border-color: #d8b4fe; }
.ung-flag-toggle { transform: scale(.8); transform-origin: left center; flex: 0 0 auto; }

/* ============================================================
   To-Do page (todo.php) — personal to-do list: status + priority badges
   ============================================================ */
.todo-status-badge { padding: 4px 10px; border-radius: 3px; font-size: 12px; font-weight: 600; display: inline-block; }
.todo-status-pending   { background: #fef3c7; color: #92400e; }
.todo-status-completed { background: #d4edda; color: #155724; }
body.dark-mode .todo-status-pending   { background: #4a3a14; color: #fde9b5; }
body.dark-mode .todo-status-completed { background: #1e4620; color: #b6e6bd; }

.todo-prio-badge { padding: 4px 10px; border-radius: 3px; font-size: 12px; font-weight: 600; display: inline-block; }
.todo-prio-low    { background: #e5e7eb; color: #374151; }
.todo-prio-medium { background: #dbeafe; color: #1e40af; }
.todo-prio-high   { background: #fef3c7; color: #92400e; }
.todo-prio-urgent { background: #fee2e2; color: #991b1b; }

/* overdue due-date emphasis + completed-row tint */
.todo-due-overdue { color: #c5221f; font-weight: 700; }
table.dataTable tbody tr.todo-row-done td { background: rgba(21,135,84,0.05); }
body.dark-mode table.dataTable tbody tr.todo-row-done td { background: rgba(21,135,84,0.12); }
.todo-row-done .todo-title-main { text-decoration: line-through; color: #6b7280; }

/* inline status dropdown — quick pending/completed flip right in the table cell */
.todo-status-select { padding: 5px 8px; border: 1px solid var(--input-border, #d1d5db); border-radius: 4px; font-size: 12px; font-weight: 600; background: var(--input-bg, #fff); color: var(--text-primary, #1f2937); cursor: pointer; min-width: 124px; }
.todo-status-select:focus { outline: none; border-color: var(--navy-accent, #0074D9); box-shadow: 0 0 0 2px rgba(0,116,217,0.12); }

/* title cell — main line + optional description sub-line */
.todo-title-main { font-weight: 600; color: var(--navy-primary, #001f3f); }
body.dark-mode .todo-title-main { color: #e6ecf5; }
.todo-title-desc { display: block; font-size: 11px; color: #6b7280; margin-top: 2px; }

/* ============================================================
   Reverse Sourcing — "Added by" person chip + searchable picker
   ============================================================ */
/* added-by control — styled to match the Status column's inline dropdown (.rs-status-sel) */
.rs-person-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 26px; padding: 2px 10px; border: 1px solid #d7def0; border-radius: 14px; background: #fff; font-size: 12px; font-weight: 600; font-family: inherit; color: var(--navy-primary, #001f3f); cursor: pointer; }
.rs-person-chip:hover { border-color: var(--navy-accent, #0074D9); }
.rs-person-chip:focus { outline: none; border-color: var(--navy-accent, #0074D9); box-shadow: 0 0 0 2px rgba(0,116,217,.18); }
.rs-person-chip.rs-person-static { cursor: default; }
.rs-person-chip.rs-person-static:hover { border-color: #d7def0; }
.rs-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-person-none { color: #8694a6; font-style: italic; font-weight: 500; }
.rs-person-caret { color: #5f6c80; font-size: 10px; margin-left: auto; padding-left: 4px; flex: 0 0 auto; }
/* popover rows reuse the .rs-assign-pop shell — single-select, no checkbox */
.rs-person-row { gap: 8px; }
.rs-person-check { margin-left: auto; color: var(--navy-accent, #0074D9); }

/* green "Supplier" badge doubles as the supplier-links picker trigger (Product col) — click to view / switch the shown link */
.rs-sup-trigger { cursor: pointer; user-select: none; }
.rs-sup-trigger:hover { filter: brightness(1.06); box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08), 0 0 0 2px rgba(0,116,217,.25); }
.rs-sup-trigger:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08), 0 0 0 2px rgba(0,116,217,.4); }
.rs-sup-caret { margin-left: 2px; font-size: 9px; opacity: .9; }

/* Status cell — stacked status + "move to" selects */
.rs-status-cell { display: flex; flex-direction: column; gap: 3px; }
.rs-moveto-sel { color: var(--navy-accent, #0074D9); }
/* compact the in-cell Stock dropdown to match the smaller status selects (scoped — global .ws-inline unchanged) */
.rs-status-cell .ws-inline { height: 21px; font-size: 10px; padding: 1px 17px 1px 8px; border-radius: 11px; max-width: 100%; }
/* seasonal set — date range shows in the dropdown itself, tinted green like the old pill */
.rs-moveto-seasonal { color: #166534; font-weight: 600; background: #dcfce7; border-color: #bbf7d0; }

/* product supplier pairs — repeatable supplier(select) + link rows */
.sup-pairs-field { grid-column: 1 / -1; }
.sup-pair-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sup-pair-row .select2-container { flex: 0 0 220px; min-width: 0; }
.sup-pair-row .sup-pair-sel { flex: 0 0 220px; min-width: 0; }
.sup-pair-row .sup-pair-link { flex: 1 1 auto; min-width: 0; }
.sup-pair-new, .sup-pair-del { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d7def0; background: #f8fafc; border-radius: 6px; cursor: pointer; color: var(--navy-accent, #0074D9); transition: background 0.12s, color 0.12s, border-color 0.12s; }
.sup-pair-new:hover { background: #eef4ff; border-color: #bcd3f5; }
.sup-pair-del { color: #94a3b8; }
.sup-pair-del:hover { color: #ea4335; border-color: #fecaca; background: #fef2f2; }
.sup-pair-addbtn { margin-top: 2px; }
.sup-name-chip { background: #eef4ff; color: var(--navy-primary, #001f3f); }

/* product asin pairs — repeatable asin(select) rows; first = primary (the asin col + join key) */
.asin-pairs-field { grid-column: 1 / -1; }
.asin-pair-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.asin-pair-row .select2-container { flex: 1 1 auto; min-width: 0; }
.asin-pair-row .asin-pair-sel { flex: 1 1 auto; min-width: 0; }
.asin-pair-del { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d7def0; background: #f8fafc; border-radius: 6px; cursor: pointer; color: #94a3b8; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.asin-pair-del:hover { color: #ea4335; border-color: #fecaca; background: #fef2f2; }
.asin-pair-addbtn { margin-top: 2px; }
/* ASIN badge doubles as the asin picker trigger (Product col) — click to switch the primary asin */
.rs-asin-trigger { cursor: pointer; user-select: none; }
.rs-asin-trigger:hover { filter: brightness(1.12); box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08), 0 0 0 2px rgba(0,116,217,.25); }
.rs-asin-trigger:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08), 0 0 0 2px rgba(0,116,217,.4); }
.rs-asin-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; color: var(--navy-primary, #001f3f); }
/* connected-asin expander (reverse sourcing) — "N ASINs" button under the image + child chip-row table (mirrors FBA shipment grouping) */
.rs-asin-toggle { background: #eef4ff; color: #0b5cab; border: 1px solid #cfe0f5; border-radius: 10px; padding: 2px 8px; font-size: 10px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-top: 2px; }
.rs-asin-toggle:hover { background: #0b5cab; color: #fff; border-color: #0b5cab; }
#prodTable tr.rs-asin-open > td { background: #f5f9ff !important; }
#prodTable tr.rs-asin-child-tr > td { background: #fafbfd !important; padding: 12px 16px !important; }
.rs-asin-grp-head { font-size: 13px; font-weight: 600; color: var(--navy-primary, #001f3f); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.rs-asin-grp-table { width: 100% !important; }
.rs-asin-child-tr .dataTables_wrapper { margin: 0; }
.rs-asin-prim-tag { font-size: 9px; font-weight: 700; color: #15803d; background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 8px; padding: 0 5px; margin-left: 4px; vertical-align: middle; }

/* real-time pack calculator — supplier order → total pieces → Amazon packs */
.pack-calc { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 12px; background: #f7f9fc; border: 1px solid #e5e9f2; border-radius: 8px; }
.pack-calc .pc-in { display: inline-flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--navy-primary, #001f3f); }
.pack-calc .pc-in input { width: 120px; padding: 5px 8px; border: 1px solid #d7def0; border-radius: 4px; font-size: 13px; }
.pack-calc-out { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 220px; }
.pc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.pc-row .pc-lbl { color: #5a6b85; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pc-row .pc-lbl i { font-size: 11px; }
.pc-row .pc-val { color: #2c3e50; text-align: right; }
.pc-row .pc-val strong { color: var(--navy-primary, #001f3f); }
.pc-row.pc-amz .pc-val strong { color: var(--navy-accent, #0074D9); font-size: 14px; }
.pc-rem { color: #b45309; font-size: 11px; }

/* form section divider — orders.php pattern; spans full grid width when placed inside a .form-grid */
.form-section-head { grid-column: 1 / -1; margin: 6px 0 2px; padding: 8px 12px; background: #f0f4fa; border-left: 3px solid var(--navy-accent, #0074D9); color: var(--navy-primary, #001f3f); font-weight: 600; font-size: 13px; border-radius: 0 4px 4px 0; display: flex; align-items: center; gap: 8px; }
.form-section-head i { font-size: 12px; color: var(--navy-accent, #0074D9); }

/* Move-to-Seasonal — branded custom popup */
.sp-modal-header { align-items: flex-start; }
.sp-brand { display: flex; align-items: center; gap: 10px; }
.sp-brand-logo { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.sp-brand-name { font-size: 11px; font-weight: 700; color: var(--navy-accent, #0074D9); text-transform: uppercase; letter-spacing: .5px; }
.sp-modal-title { margin: 2px 0 0; font-size: 17px; }
.sp-img-wrap { text-align: center; margin-bottom: 12px; }
.sp-img-wrap img { max-height: 120px; max-width: 100%; border: 1px solid #e5e9f2; border-radius: 6px; padding: 4px; background: #fff; }
.sp-divider { display: flex; align-items: center; text-align: center; color: #8694a6; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 16px 0 10px; }
.sp-divider::before, .sp-divider::after { content: ""; flex: 1; border-top: 1px solid #e5e9f2; }
.sp-divider span { padding: 0 10px; }
.sp-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sp-status { font-size: 13px; font-weight: 600; min-height: 18px; margin: 6px 0; }
.sp-status-busy { color: var(--navy-accent, #0074D9); }
.sp-status-ok { color: #1e8e3e; }
.sp-status-err { color: #c5221f; }
body.dark-mode .sp-img-wrap img { background: #20203f; border-color: #34345f; }
body.dark-mode .sp-divider::before, body.dark-mode .sp-divider::after { border-color: #34345f; }

/* ===== To-Do daily checklist (todo.php + task_list.php) ===== */
.todo-page-hint { font-size: 13px; color: #5f6368; margin: 0 0 14px; display: flex; align-items: center; gap: 7px; }
.todo-page-hint i { color: var(--navy-accent, #0074D9); }

/* user picker */
/* user picker in the page header */
.todo-header-pick { gap: 8px; }
.todo-header-pick-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
/* sized to match the btn-sm "Filter by Account" button beside it */
.todo-header-pick .filter-input { width: 200px; max-width: 50vw; height: 34px; padding: 6px 12px; font-size: 13px; margin: 0; }
@media (max-width: 600px) {
    .todo-header-pick { width: 100%; }
    .todo-header-pick .filter-input { width: 100%; max-width: 100%; flex: 1; }
}

/* all-users overview table bits */
#overviewTable tbody tr { cursor: pointer; }
.ov-username { color: #5f6368; font-size: 12px; }
.ov-muted { color: #9aa0b4; }
.ov-today-badge { display: inline-block; font-weight: 600; font-size: 13px; color: var(--navy-primary, #001f3f); background: #eef3fb; border: 1px solid #d7def0; border-radius: 12px; padding: 2px 10px; }
body.dark-mode .ov-username { color: #9aa0b4; }
body.dark-mode .ov-today-badge { color: #cfe0ff; background: #2a2f52; border-color: #34345f; }

/* account access chips in the overview table */
.acc-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; }
.acc-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 11px; background: #eef3fb; color: var(--navy-primary, #001f3f); border: 1px solid #d7def0; white-space: nowrap; }
.acc-chip-all { background: #e6f4ea; color: #1e7e34; border-color: #b7e0c2; }
body.dark-mode .acc-chip { background: #2a2f52; color: #cfe0ff; border-color: #34345f; }
body.dark-mode .acc-chip-all { background: #1e3a28; color: #9fe0b4; border-color: #2f5a3e; }

/* manager assignment panel */
.todo-assign-hint { font-size: 12px; color: #80868b; font-weight: 500; }
.todo-quickadd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
    background: #f7f9fc; border: 1px dashed #cdd6e4; border-radius: 8px; padding: 12px 14px; }
.todo-quickadd-ic { color: var(--navy-accent, #0074D9); font-size: 16px; }
.todo-quickadd .filter-input { flex: 1 1 240px; min-width: 0; }
body.dark-mode .todo-quickadd { background: #1f2733; border-color: #33404f; }
.todo-assign-list { display: flex; flex-direction: column; gap: 8px; }
.todo-assign-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 15px; background: #f7f9fc; border: 1px solid #e3e8ef; border-radius: 6px; }
.todo-assign-row:hover { border-color: var(--navy-accent, #0074D9); }
.todo-assign-name { font-size: 14px; color: #202124; font-weight: 500; }
.todo-assign-empty { padding: 22px; text-align: center; color: #80868b; font-size: 14px; }
.todo-assign-empty i { margin-right: 6px; }

/* checklist grid — task column header hover detail (native title) */
.todo-hdr-task { cursor: help; }
.todo-hdr-info { margin-left: 5px; opacity: .55; font-size: 11px; }
.todo-hdr-task:hover .todo-hdr-info { opacity: 1; }

/* completion summary cards */
.todo-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.todo-summary:empty { display: none; }
.todo-sum-card { flex: 1; min-width: 130px; background: #f7f9fc; border: 1px solid #e3e8ef;
    border-left: 3px solid var(--navy-accent, #0074D9); border-radius: 6px; padding: 11px 15px;
    display: flex; flex-direction: column; gap: 4px; }
.todo-sum-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #80868b; font-weight: 600; }
.todo-sum-val { font-size: 21px; font-weight: 700; color: var(--navy-primary, #001f3f); }

/* grid cells — checkbox + locked markers */
.todo-cell, .todo-prog-col { text-align: center; }
.todo-cell-chk { width: 20px; height: 20px; cursor: pointer; accent-color: var(--navy-accent, #0074D9); }
.todo-cell-chk:disabled { cursor: not-allowed; opacity: .5; }
.todo-mk-done { color: #1e8e3e; font-size: 17px; }
.todo-mk-miss { color: #c9ccd1; font-size: 17px; }

/* today's row highlight + badge */
.todo-row-today td { background: #eaf3ff !important; }
.todo-today-badge { display: inline-block; background: var(--navy-accent, #0074D9); color: #fff;
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .3px; }

/* per-day progress bar */
.todo-prog { display: flex; align-items: center; gap: 8px; justify-content: center; }
.todo-prog-bar { width: 70px; height: 7px; background: #e3e8ef; border-radius: 4px; overflow: hidden; }
.todo-prog-bar span { display: block; height: 100%; background: var(--navy-accent, #0074D9); border-radius: 4px; }
.todo-prog-txt { font-size: 12px; font-weight: 600; color: #5f6368; min-width: 34px; }

/* empty state */
.todo-empty { padding: 36px 22px; text-align: center; color: #80868b; font-size: 14px;
    background: #f7f9fc; border: 1px dashed #d0d7e2; border-radius: 8px; }
.todo-empty i { display: block; font-size: 30px; color: #c9ccd1; margin-bottom: 10px; }

/* dark mode */
body.dark-mode .todo-page-hint, body.dark-mode .todo-assign-hint,
body.dark-mode .todo-sum-label, body.dark-mode .todo-prog-txt { color: #9aa0b4; }
body.dark-mode .todo-assign-row, body.dark-mode .todo-sum-card,
body.dark-mode .todo-empty { background: #20203f; border-color: #34345f; }
body.dark-mode .todo-assign-name, body.dark-mode .todo-sum-val { color: #e8e8f0; }
body.dark-mode .todo-row-today td { background: #2a2a52 !important; }
body.dark-mode .todo-prog-bar { background: #34345f; }
body.dark-mode .todo-mk-miss { color: #4a4a6a; }

/* ===== Order# chip — one color per order_number cluster (orders.php #ordTable) ===== */
/* rows that share an order number share a color, so duplicate orders read as one group */
/* class index = order_group_rank % 14 — adjacent clusters always land on different colors */
.ordnum-c0  { --ordnum-bg:#dbeafe; --ordnum-fg:#1e40af; }
.ordnum-c1  { --ordnum-bg:#dcfce7; --ordnum-fg:#166534; }
.ordnum-c2  { --ordnum-bg:#fef3c7; --ordnum-fg:#92400e; }
.ordnum-c3  { --ordnum-bg:#fce7f3; --ordnum-fg:#9d174d; }
.ordnum-c4  { --ordnum-bg:#ede9fe; --ordnum-fg:#5b21b6; }
.ordnum-c5  { --ordnum-bg:#ccfbf1; --ordnum-fg:#115e59; }
.ordnum-c6  { --ordnum-bg:#ffe4e6; --ordnum-fg:#9f1239; }
.ordnum-c7  { --ordnum-bg:#e0f2fe; --ordnum-fg:#075985; }
.ordnum-c8  { --ordnum-bg:#fed7aa; --ordnum-fg:#7c2d12; }
.ordnum-c9  { --ordnum-bg:#e0e7ff; --ordnum-fg:#3730a3; }
.ordnum-c10 { --ordnum-bg:#ecfccb; --ordnum-fg:#3f6212; }
.ordnum-c11 { --ordnum-bg:#fae8ff; --ordnum-fg:#86198f; }
.ordnum-c12 { --ordnum-bg:#e2e8f0; --ordnum-fg:#334155; }
.ordnum-c13 { --ordnum-bg:#fee2e2; --ordnum-fg:#991b1b; }
#ordTable td.col-order-info code.ordnum-chip {
    background: var(--ordnum-bg, #f0f4fa);
    color: var(--ordnum-fg, #1e3a5f);
    font-weight: 700;
}
/* keep the click-to-copy hover consistent with the other chips */
#ordTable td.col-order-info code.ordnum-chip:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

/* ===== Old Prices modal — Amazon (left) / Supplier (right) channel columns ===== */
.modal.price-notes-modal { max-width: 720px; }
.price-note-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.price-note-col { border: 1px solid #e5e9f2; border-radius: 8px; overflow: hidden; background: #fff; }
.price-note-col-head { display: flex; align-items: center; gap: 7px; padding: 9px 12px; font-weight: 700; font-size: 12.5px; letter-spacing: .3px; }
.price-note-col-head i { font-size: 14px; }
.price-note-col-amazon   .price-note-col-head { background: #fff3e6; color: #9a3412; border-bottom: 2px solid #ff9900; }
.price-note-col-supplier .price-note-col-head { background: #e8f6ee; color: #14532d; border-bottom: 2px solid #16a34a; }
.price-note-col-count { margin-left: auto; background: rgba(0,0,0,0.09); color: inherit; font-size: 11px; font-weight: 700; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 10px; }
.price-note-col-body { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; padding: 10px; }
.price-note-empty { padding: 20px 10px; text-align: center; color: #9aa4b2; font-size: 11.5px; background: #fafbfd; border-radius: 6px; }
.price-note-col .price-note-meta { display: block; margin-top: 5px; }
@media (max-width: 620px) { .price-note-cols { grid-template-columns: 1fr; } }

/* ===== Order form — auto price/units history for the picked product's ASIN ===== */
.item-price-history { margin: 8px 0 4px; }
.item-price-history:empty { display: none; }
.iph-box { border: 1px solid #d7e3f2; border-radius: 8px; overflow: hidden; background: #f7faff; }
.iph-head { display: flex; align-items: center; gap: 6px; padding: 7px 11px; background: #eaf1fb; color: #1e3a5f; font-weight: 700; font-size: 11.5px; border-bottom: 1px solid #d7e3f2; }
.iph-head i { color: var(--navy-accent, #0074D9); }
.iph-scroll { max-height: 170px; overflow: auto; }
.iph-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.iph-table th { position: sticky; top: 0; background: #f0f4fa; color: #5a6b80; font-weight: 700; text-align: left; padding: 5px 9px; white-space: nowrap; border-bottom: 1px solid #e1e8f2; }
.iph-table td { padding: 5px 9px; border-bottom: 1px solid #eef2f8; color: #34435a; white-space: nowrap; }
.iph-table tbody tr:last-child td { border-bottom: 0; }
.iph-table tbody tr.iph-latest td { background: #fff7e6; }
.iph-latest-tag { display: inline-block; margin-left: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: .4px; padding: 1px 5px; border-radius: 8px; background: #ff9900; color: #fff; vertical-align: middle; }
.iph-price-amz { color: #9a3412; font-weight: 700; }
.iph-price-sup { color: #14532d; font-weight: 700; }
.iph-empty, .iph-loading { padding: 9px 11px; font-size: 11px; color: #7b8aa0; }
.iph-empty i { margin-right: 3px; }
.iph-loading i { margin-right: 4px; }

/* ============================================================
   CSV Import modal — shared across all list pages
   ============================================================ */
.modal-wide { max-width: 720px; width: 92%; }
.csv-preview-wrap { max-height: 320px; overflow: auto; border: 1px solid #e5e9f2; border-radius: 6px; margin: 10px 0; }
.csv-preview-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.csv-preview-wrap thead { position: sticky; top: 0; z-index: 1; background: var(--navy-primary); color: #fff; }
.csv-preview-wrap th, .csv-preview-wrap td { padding: 6px 8px; border: 1px solid #eef2f8; text-align: left; }
.csv-preview-wrap tr.row-ok  td { background: #f3fbf5; }
.csv-preview-wrap tr.row-bad td { background: #fff4f3; color: #8b0000; }
.csv-stat-pill { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; margin-right: 6px; }
.csv-stat-ok  { background: #d4edda; color: #155724; }
.csv-stat-bad { background: #f8d7da; color: #721c24; }
.csv-drop-zone { border: 2px dashed #d7def0; border-radius: 10px; padding: 44px 20px; text-align: center; cursor: pointer; background: #fafbfd; transition: all 0.2s; }
.csv-drop-zone:hover, .csv-drop-zone.drag { border-color: var(--navy-accent); background: #f0f4fa; }
.csv-drop-zone i { font-size: 38px; display: block; margin: 0 auto 10px; color: var(--navy-accent); }
.csv-drop-zone .csv-drop-title { font-size: 15px; font-weight: 600; color: var(--navy-primary); margin-bottom: 2px; }
.csv-drop-zone .csv-drop-hint  { font-size: 12px; color: #888; }
.csv-template-row { text-align: center; margin-top: 10px; }
.csv-template-link { font-size: 12px; color: var(--navy-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.csv-template-link:hover { text-decoration: underline; }
.csv-errors-wrap { margin: 8px 0; font-size: 12px; color: #8b0000; }
.csv-errors-wrap div { padding: 2px 0; }

/* out of stock — source badge (product vs reverse sourcing) + modal field hide */
.oos-source-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; text-transform:uppercase; letter-spacing:.3px; margin-bottom:3px; }
.oos-source-product { background:#eef2ff; color:#3730a3; }
.oos-source-rs { background:#fff7ed; color:#9a3412; }
.oos-hide { display:none !important; }

/* box.php — full-width form field inside the 2-col .form-grid */
.form-grid .form-group.fg-span2 { grid-column: 1 / -1; }

/* ===== shipping_page.php — Create Shipment box-packing matrix ===== */
.pack-empty { padding: 20px; color: #555; }
/* KPI cards — 4-up enterprise row (25% each), responsive to 2-up / 1-up */
.pack-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
.pack-summary-item { background: #fff; border: 1px solid #e8edf5; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.pack-summary-item .ps-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: #eef4ff; color: #0074D9; }
.pack-summary-item .ps-meta { display: flex; flex-direction: column; min-width: 0; }
.pack-summary-item .ps-label { font-size: 11px; color: #66708a; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.pack-summary-item .ps-val { font-size: 24px; font-weight: 700; color: #001f3f; line-height: 1.1; }
.pack-summary-item.kpi-units .ps-icon  { background: #eaf7ee; color: #1e7d34; }
.pack-summary-item.kpi-boxed .ps-icon  { background: #f3eefe; color: #6d28d9; }
.pack-summary-item.kpi-remain .ps-icon { background: #fff4e0; color: #cc6e00; }
@media (max-width: 900px) { .pack-summary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pack-summary { grid-template-columns: 1fr; } }
/* controls — 5-up equal row (20% each), wraps on small screens */
.pack-controls { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.pack-ctrl { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 150px; }
.pack-ctrl > label { font-size: 12px; font-weight: 600; color: #334; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack-ctrl input, .pack-ctrl select { padding: 7px 9px; border: 1px solid #cfd8e6; border-radius: 6px; font-size: 13px; width: 100%; box-sizing: border-box; }
.pack-ctrl-grow { flex: 1; min-width: 200px; }
.pack-ctrl-grow input { width: 100%; }
.pack-ctrl-actions { margin-left: auto; }
/* same-weight toggle relocated into the page header */
.header-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #334; white-space: nowrap; cursor: pointer; }
/* toggle switch — same weight for all boxes */
.pack-switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.pack-switch input { opacity: 0; width: 0; height: 0; }
.pack-slider { position: absolute; inset: 0; cursor: pointer; background: #cfd8e6; border-radius: 24px; transition: .2s; }
.pack-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.pack-switch input:checked + .pack-slider { background: #0074D9; }
.pack-switch input:checked + .pack-slider::before { transform: translateX(22px); }
/* per-box config cards */
.pack-box-cards { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.pack-box-card { background: #fff; border: 1px solid #e8edf5; border-radius: 8px; padding: 10px 12px; width: 215px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.pack-box-card-head { font-weight: 700; color: #001f3f; margin-bottom: 8px; }
.pbc-label { display: block; font-size: 11px; color: #66708a; margin: 6px 0 2px; }
.pbc-size, .pbc-weight { width: 100%; padding: 6px 8px; border: 1px solid #cfd8e6; border-radius: 6px; font-size: 13px; }
.pbc-custom { display: flex; gap: 4px; margin-top: 6px; }
.pbc-custom input { width: 46px; padding: 5px; border: 1px solid #cfd8e6; border-radius: 5px; font-size: 12px; }
.pbc-custom select { padding: 5px; border: 1px solid #cfd8e6; border-radius: 5px; font-size: 12px; }
/* matrix */
.pack-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.pack-matrix { width: auto; min-width: 100%; border-collapse: collapse; font-size: 13px; }
.pack-matrix th { background: #001f3f; color: #fff; padding: 8px 10px; text-align: left; font-size: 12px; white-space: nowrap; }
.pack-matrix td { border: 1px solid #e8edf5; padding: 6px 8px; vertical-align: top; }
.pack-matrix tbody tr:nth-child(even) td { background: #f8fbff; }
.pack-matrix .pm-sku { min-width: 280px; }
.pm-sku-name { font-weight: 600; color: #001f3f; font-size: 13px; margin-bottom: 4px; }
.pm-sku-codes { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 11px; color: #555; }
.pm-imglink { font-size: 11px; color: #0074D9; text-decoration: none; margin-left: 6px; }
/* SKU details — product chip (mirrors products.php Product cell: image + name + code chips) */
.pm-sku-chip { display: flex; gap: 10px; align-items: flex-start; }
.pm-sku-info { min-width: 0; }
.pm-sku-chip .prod-img-stack { flex-shrink: 0; }
.prod-thumb-ph { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; border-radius: 4px; background: #f4f6fb; color: #9aa6bd; font-size: 15px; }
.cell-sub-label.sub-sku { background: #475569; color: #ffffff; }
.pm-amz-open { text-decoration: none; }
.pm-total-inp, .pm-qty { width: 70px; padding: 5px 6px; border: 1px solid #cfd8e6; border-radius: 5px; font-size: 13px; text-align: center; }
.pack-matrix .pm-boxcol { text-align: center; min-width: 66px; }
.pm-boxed-val { font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.pm-boxed-val.pm-ok { background: #d4edda; color: #155724; }
.pm-boxed-val.pm-under { background: #fff3cd; color: #856404; }
.pm-boxed-val.pm-over { background: #f8d7da; color: #721c24; }
.pack-footer { margin: 18px 0; text-align: right; }

/* ── Bank Accounts page — filer status badges (Rameez Scripts) ── */
.status-warning { background: #fff3cd; color: #856404; }
.status-neutral { background: #e2e3e5; color: #41464b; }
body.dark-mode .status-warning { background: #4a3a14; color: #ffe69c; }
body.dark-mode .status-neutral { background: #3a3f44; color: #ced4da; }

/* ── Salary form — 80% wide modal + 2-col grid + employee bank panel (Rameez Scripts) ── */
#salaryModal .modal { width: 80%; max-width: 1000px; }

.salary-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
}
.salary-form-grid .form-group { margin-bottom: 18px; }
.salary-form-grid .full-span { grid-column: 1 / -1; }
.salary-form-grid .form-actions { margin-top: 10px; }

/* bank panel hidden until an employee is picked */
#bankInfoGroup { display: none; }
#bankInfoGroup.show { display: block; }
.bank-hint { font-weight: 400; font-size: 12px; opacity: .7; }

.salary-bank-box { display: flex; flex-direction: column; gap: 12px; }
.salary-bank-card {
    border: 1px solid var(--input-border);
    border-radius: 6px;
    padding: 14px 16px;
    background: var(--input-bg);
}
.salary-bank-card.is-primary { border-color: var(--navy-accent); box-shadow: inset 0 0 0 1px var(--navy-accent); }
.salary-bank-card .sb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.salary-bank-card .sb-bank { font-weight: 700; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.sb-primary-badge { font-size: 11px; background: var(--navy-accent); color: #fff; padding: 2px 9px; border-radius: 10px; font-weight: 600; }
.salary-bank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.salary-bank-field span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin-bottom: 2px; color: var(--text-secondary); }
.salary-bank-field strong { color: var(--text-primary); font-weight: 600; font-size: 14px; word-break: break-word; }
.sb-copy { cursor: pointer; color: var(--navy-accent); margin-left: 6px; font-size: 12px; }
.sb-copy:hover { opacity: .7; }
.salary-bank-empty { color: var(--text-secondary); font-size: 13px; padding: 8px 2px; }

/* stack to single column on small screens */
@media (max-width: 640px) {
    #salaryModal .modal { width: 95%; }
    .salary-form-grid { grid-template-columns: 1fr; }
    .salary-bank-grid { grid-template-columns: 1fr; }
}

/* ===== reverse sourcing — row history ===== */
.action-icon.history-icon { color: #6d28d9; }
.action-icon.history-icon:hover { background: #ede9fe; color: #5b21b6; }
.rs-hist-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; margin-bottom: 14px; }
.rs-hist-filters .filter-input { min-width: 0; width: 100%; }
.rs-hist-filters .btn { width: 100%; justify-content: center; }
@media (max-width: 640px) { .rs-hist-filters { grid-template-columns: 1fr; } }
.rs-hist-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.rs-hist-row { border: 1px solid #eef1f6; border-left: 3px solid #c7d2fe; border-radius: 6px; padding: 10px 12px; background: #fbfcfe; }
.rs-hist-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rs-hist-meta { font-size: 12px; color: #7a869a; display: inline-flex; align-items: center; gap: 4px; }
.rs-hist-meta i { margin-right: 2px; }
.rs-hist-changes { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.rs-hist-change { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-hist-field { font-size: 11px; font-weight: 700; color: #475569; min-width: 110px; }
.rs-hist-arrow { color: #94a3b8; font-size: 10px; }
.rs-hist-old { background: #fee2e2 !important; color: #991b1b !important; text-decoration: line-through; }
.rs-hist-new { background: #dcfce7 !important; color: #166534 !important; }
.rs-hist-empty { text-align: center; color: #94a3b8; padding: 24px 10px; font-size: 13px; }
.rs-hist-empty i { margin-right: 6px; }
/* action chips (reuse .cell-sub-label base) */
.cell-sub-label.rs-hist-create { background: #dcfce7 !important; color: #166534 !important; }
.cell-sub-label.rs-hist-update { background: #dbeafe !important; color: #1e40af !important; }
.cell-sub-label.rs-hist-delete { background: #fee2e2 !important; color: #991b1b !important; }

/* ── Bank onboarding (forced staff bank-details form) — Rameez Scripts ── */
.bankob-wrap { min-height: 100vh; background: linear-gradient(135deg, #001f3f 0%, #003366 100%); display: flex; flex-direction: column; }
.bankob-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; color: #fff; flex-wrap: wrap; gap: 8px; }
.bankob-brand { font-size: 18px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.bankob-user { font-size: 14px; display: inline-flex; align-items: center; gap: 10px; opacity: .95; }
.bankob-logout { color: #cfe0ff; text-decoration: none; margin-left: 8px; font-weight: 600; }
.bankob-logout:hover { color: #fff; }
.bankob-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px 48px; }
.bankob-card { background: #fff; width: 100%; max-width: 720px; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 28px 30px; }
.bankob-head { display: flex; gap: 16px; align-items: flex-start; border-bottom: 1px solid #e3e8ef; padding-bottom: 18px; margin-bottom: 22px; }
.bankob-head > i { font-size: 30px; color: var(--navy-accent, #0074D9); margin-top: 4px; }
.bankob-head h2 { margin: 0 0 4px; font-size: 22px; color: #001f3f; }
.bankob-head p { margin: 0; font-size: 14px; color: #5f6368; line-height: 1.5; }
.bankob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.bankob-hint { font-weight: 400; font-size: 12px; color: #80868b; }
.bankob-actions { margin-top: 22px; text-align: right; }
body.dark-mode .bankob-card { background: var(--bg-card, #1c1c2e); }
body.dark-mode .bankob-head h2 { color: #e8e8f0; }
body.dark-mode .bankob-head p { color: #9aa0b4; }
@media (max-width: 640px) { .bankob-grid { grid-template-columns: 1fr; } }

/* salary-history action icon + modal (users.php) */
.action-icon.pay-icon { color: #16a34a; }
.action-icon.pay-icon:hover { background: rgba(22,163,74,0.1); transform: scale(1.15); }
.salhist-user { font-weight: 500; color: #cfe0ff; }
.salhist-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.salhist-card { flex: 1; min-width: 140px; background: #f7f9fc; border: 1px solid #e3e8ef; border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.salhist-card-label { font-size: 12px; color: #5f6368; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.salhist-card-val { font-size: 20px; font-weight: 700; color: #001f3f; }
.salhist-table td, .salhist-table th { white-space: nowrap; }
.salhist-empty { padding: 18px; text-align: center; color: #5f6368; font-size: 14px; }
body.dark-mode .salhist-card { background: #23233a; border-color: #34345f; }
body.dark-mode .salhist-card-label { color: #9aa0b4; }
body.dark-mode .salhist-card-val { color: #e8e8f0; }

/* ===== user access + personal vault — credential repeaters / reveal ===== */
.ua-rep-label { display: block; font-weight: 600; margin: 8px 0 6px; color: var(--text-primary); }
.ua-rep-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.ua-rep-row input[type="text"], .ua-rep-row input[type="password"], .ua-rep-row input[type="email"] {
    flex: 1 1 150px; min-width: 120px;
    padding: 12px 14px; border: 1px solid var(--input-border); border-radius: 2px;
    font-size: 16px; font-family: inherit; background: var(--input-bg); color: var(--text-primary); transition: all 0.3s;
}
.ua-rep-row input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(0,116,217,0.2); }
.ua-rep-row input::placeholder { color: var(--text-muted); }
.ua-rep-row .btn { flex: 0 0 auto; }
.ua-cred-line, .ua-tool-line { display: flex; align-items: center; gap: 6px; margin: 2px 0; flex-wrap: wrap; }
.ua-cred { background: #f1f5f9; color: #334155; padding: 1px 7px; border-radius: 4px; font-size: 12px; font-family: monospace; }
.ua-tool-chip { background: #e0e7ff !important; color: #3730a3 !important; }
.ua-eye { border: none; background: #eef2f7; color: #0074D9; width: 24px; height: 24px; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.ua-eye:hover { background: #0074D9; color: #fff; }
.ua-reveal-box { margin: 8px 0; padding: 14px; background: #0b1f3a; border-radius: 6px; text-align: center; }
.ua-reveal-box code { color: #7CFC9B; font-size: 18px; word-break: break-all; user-select: all; }
body.dark-mode .ua-cred { background: #2a2a40; color: #cfd3e0; }
body.dark-mode .ua-eye { background: #2a2a40; color: #6db3ff; }

/* auto-derived amazon qty — read-only, greyed (Rameez Scripts) */
.item-qty-amz[readonly] { background:#eef1f5; color:#556; cursor:not-allowed; }
body.dark-mode .item-qty-amz[readonly] { background:#2a2a40; color:#aab; }

/* backup page — spacing between stacked download buttons (sql / excel / csv) */
.backup-dl-form { margin-top: 10px; }

/* sidebar quick attendance clock (manager / employee) — buttons only */
.sidebar-att { margin: 4px 14px 14px; }
.satt-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.satt-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 38px; padding: 0 10px; border: none; border-radius: 11px;
    font-size: 12px; font-weight: 600; letter-spacing: .2px; color: #fff;
    cursor: pointer; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    transition: filter .15s, transform .06s, box-shadow .15s, background .15s;
}
.satt-btn i { font-size: 13px; flex: none; }
.satt-btn:hover:not(:disabled) { filter: brightness(1.09); box-shadow: 0 6px 16px rgba(0,0,0,.30); }
.satt-btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
/* disabled = clean muted slate (fits the navy sidebar, not a muddy gray) */
.satt-btn:disabled { cursor: not-allowed; box-shadow: none; filter: none; background: rgba(255,255,255,.07); color: #7e90a8; border: 1px solid rgba(255,255,255,.08); }
.satt-primary { background: linear-gradient(135deg,#1fb453,#118537); }            /* clock in / start */
.satt-primary.is-pause { background: linear-gradient(135deg,#f5a623,#cd7c08); }   /* pause */
.satt-out { background: linear-gradient(135deg,#0a84e0,#0a5bb0); }                /* clock out */
.sidebar-att.satt-busy { opacity: .55; pointer-events: none; }
/* collapsed sidebar — icon-only */
.sidebar.collapsed .sidebar-att { margin: 4px 10px 14px; }
.sidebar.collapsed .satt-btns { gap: 6px; }
.sidebar.collapsed .satt-btn { padding: 0 4px; }
.sidebar.collapsed .satt-btn .satt-lbl { display: none; }

/* salary withhold checkbox + retention info line */
.wh-check-line { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; padding: 8px 0; }
.wh-check-line input[type="checkbox"] { width: 16px; height: 16px; accent-color: #0074D9; cursor: pointer; }
#withholdInfo:empty { display: none; }
.wh-info { background: #eff6ff; border-left: 3px solid #0074D9; color: #001f3f; padding: 10px 12px; border-radius: 4px; font-size: 13px; }
.wh-info i { color: #0074D9; margin-right: 6px; }
.wh-info strong { color: #137333; }

/* header account-filter — selected-account chips (visual of what's filtered) */
.acc-filter-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 460px; vertical-align: middle; }
.acc-filter-chips:empty { display: none; }
.acc-chip { display: inline-flex; align-items: center; gap: 6px; background: #e7f0fb; color: #0a4d8c; border: 1px solid #bcd8f5; border-radius: 14px; padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 1.4; max-width: 190px; }
.acc-chip .acc-chip-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-chip-x { cursor: pointer; opacity: .65; font-size: 11px; }
.acc-chip-x:hover { opacity: 1; color: #c5221f; }
.acc-chip-loading { background: #eef1f5; color: #5a6b80; border-color: #dde3ea; }
body.dark-mode .acc-chip { background: #1e3a5f; color: #cfe0f5; border-color: #2c4a73; }

/* ──────────────────────────────────────────────────────────────
   Uniform text-chip / badge / pill / tag THICKNESS (Rameez Scripts)
   single source for height/radius — width stays content-driven.
   placed last so it wins via the cascade at equal specificity.
   only touches padding / font-size / line-height / border-radius.
   excludes: chevron/pipeline arrow tabs, count bubbles, code chips,
   compact-table override, and *-chips layout wrappers.
   ────────────────────────────────────────────────────────────── */
.status-badge,
.case-cell-pill,
.security-feature-badge,
.version-badge,
.upload-badge,
.action-badge,
.act-badge,
.role-badge,
.resource-card-badge,
.ob-complete-badge,
.ob-incomplete-badge,
.tier-chip,
.invoice-count-chip,
.ship-badge,
.ship-badge-inline,
.ship-id-tag,
.qty-pack-chip,
.pill,
.colors-chip,
.oos-product-chip,
.rs-acc-chip,
.ung-flag-chip,
.todo-status-badge,
.todo-prio-badge,
.rs-person-chip,
.sup-name-chip,
.rs-asin-prim-tag,
.ov-today-badge,
.acc-chip,
.todo-today-badge,
.iph-latest-tag,
.csv-stat-pill,
.oos-source-badge,
.sb-primary-badge,
.ua-tool-chip,
.rs-link-chip {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 4px;
}

/* drop fixed height so padding governs thickness */
.rs-person-chip { height: auto; }

/* shipping expiry chip — shown below Remaining in the Received/Sent column (Rameez Scripts) */
.exp-chip { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; font-weight:600; background:#eef2f7; color:#334155; white-space:nowrap; }
.exp-chip-warn { background:#fef3c7; color:#92400e; }
.exp-chip-bad { background:#fee2e2; color:#991b1b; }

/* chips squared — uniform square corners on every chip/badge/pill/tag across all pages
   (!important so page <style> radii don't override it; only chip classes listed, no structural boxes) */
.status-badge, .case-cell-pill, .security-feature-badge, .version-badge, .upload-badge,
.action-badge, .act-badge, .role-badge, .resource-card-badge, .ob-complete-badge, .ob-incomplete-badge,
.tier-chip, .invoice-count-chip, .ship-badge, .ship-badge-inline, .ship-id-tag, .qty-pack-chip, .pill,
.colors-chip, .oos-product-chip, .rs-acc-chip, .ung-flag-chip, .todo-status-badge, .todo-prio-badge,
.rs-person-chip, .sup-name-chip, .rs-asin-prim-tag, .ov-today-badge, .acc-chip, .todo-today-badge,
.iph-latest-tag, .csv-stat-pill, .oos-source-badge, .sb-primary-badge, .ua-tool-chip, .rs-link-chip,
.auto-pill, .cell-sub-label, .ord-date-chip, .var-tag, .expiry-chip, .pack-tag, .price-type-badge,
.ws-disc-chip, .disc-dup-badge, .ord-sel-counter, .type-chip, .rs-sup-current, .utype-badge, .emp-primary-tag,
.rs-pop-badge, .cs-chip, .cs-badge, .mfa-badge-enabled, .mfa-badge-disabled, .tip-pin-tag, .priority-badge,
.tstatus-badge, .module-chip, .attr-chip, .pstatus-badge, .system-badge, .custom-badge, .section-pill,
.ung-prod-chip, .ung-brand, .ung-acc-pill, .season-badge, .upcoming-chip, .cat-badge, .vis-badge,
.matrix-acc-chip, .att-badge, .grade-badge, .pr-badge, .stock-badge, .platform-badge, .fm-badge,
.channel-type-tag, .exp-chip {
    border-radius: 4px !important;
}

/* ===== Pricing Requests panel ===== */
.status-pending { background: #fff3cd; color: #856404; }
.req-pending-badge { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; background: #ff851b; color: #fff; padding: 2px 9px; border-radius: 10px; vertical-align: middle; }
.price-req-list { display: flex; flex-direction: column; gap: 10px; }
.price-req-empty { text-align: center; padding: 28px 16px; font-style: italic; }
.price-req-empty i { margin-right: 6px; color: var(--navy-accent); }
.price-req-card { border: 1px solid #e3e8f0; border-radius: 6px; background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(0,31,63,.06); }
.price-req-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer; }
.price-req-head:hover { background: #f7f9fc; }
.price-req-main { min-width: 0; flex: 1; }
.price-req-prod { font-size: 14px; font-weight: 600; color: #001f3f; margin-bottom: 4px; }
.price-req-prod code { font-size: 11px; }
.price-req-sub { font-size: 12px; color: #667085; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.price-req-sub i { color: var(--navy-accent); }
.price-req-note { font-size: 12px; color: #555; margin-top: 5px; background: #fffaf0; border-left: 3px solid #ff851b; padding: 5px 9px; border-radius: 3px; }
.price-req-note i { color: #ff851b; margin-right: 4px; }
.price-req-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.price-req-caret { color: #98a2b3; font-size: 12px; }
.req-progress-chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; background: #eef4ff; color: #001f3f; font-family: 'Courier New', monospace; }
.req-progress-chip.done { background: #d4edda; color: #155724; }
.price-req-body { border-top: 1px solid #eef0f5; padding: 12px 14px; background: #fbfcfe; }
.price-req-actions { margin-bottom: 10px; }
.req-mine-done { color: #155724; font-size: 13px; font-weight: 600; }
.req-mine-done i { margin-right: 4px; }
.req-recipients { display: flex; flex-direction: column; gap: 6px; }
.req-recipient-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 10px; background: #fff; border: 1px solid #eef0f5; border-radius: 4px; font-size: 13px; }
.req-rec-name { color: #001f3f; }
.req-rec-done { color: #1e7d34; }
.req-rec-pending { color: #b58900; }
.req-rec-you { color: var(--navy-accent); font-weight: 600; font-size: 11px; }
.req-rec-meta { color: #667085; font-size: 12px; }
.req-rec-meta i { margin-right: 3px; }
.req-recipients-hint { font-size: 12px; color: #667085; margin: 4px 0 12px; display: flex; align-items: center; gap: 6px; }
.req-recipients-hint i { color: var(--navy-accent); }
.req-price-icon i { color: #ff851b; }

/* ===== My Profile — marketplace accounts panel (moved from Accounts Login) ===== */
/* password reveal cell — dots + eye + copy buttons */
.pw-cell { display: inline-flex; align-items: center; gap: 6px; }
.pw-mask { font-family: monospace; letter-spacing: 2px; color: #333; min-width: 80px; word-break: break-all; }
.pw-cell[data-shown="1"] .pw-mask { letter-spacing: 0; color: #c5221f; font-weight: 600; }
.pw-btn { background: transparent; border: none; cursor: pointer; color: var(--navy-accent); font-size: 13px; padding: 3px 6px; border-radius: 3px; transition: all 0.15s; }
.pw-btn:hover { background: rgba(0,116,217,0.1); transform: scale(1.1); }

/* My Marketplace Accounts — read-only info cards (My Profile) */
.my-accounts-list { display: flex; flex-direction: column; gap: 18px; }
.my-accounts-list .account-info-card { margin-bottom: 0; }
.my-accounts-list .account-info-card h3 small { color: #5f6c80; font-weight: 500; font-size: 13px; }
.acct-status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.acct-status-badge.is-active { background: #e6f4ea; color: #137333; }
.acct-status-badge.is-inactive { background: #f1f3f4; color: #5f6c80; }

/* ===== My Profile — alignment polish ===== */
.account-info-card .info-grid-2x .info-row .info-label { display: flex; align-items: center; gap: 6px; }
.account-info-card .info-grid-2x .info-row .info-label i { color: var(--navy-accent); font-size: 12px; }
.account-info-card .info-grid-2x .info-row .info-value { line-height: 1.45; }

/* Accounts Login → moved-to-profile empty state */
.accts-moved-card { text-align: center; padding: 48px 24px; max-width: 560px; margin: 10px auto; }
.accts-moved-card .accts-moved-icon { font-size: 44px; color: var(--navy-accent); margin-bottom: 16px; }
.accts-moved-card h2 { font-size: 20px; color: var(--navy-primary); margin: 0 0 10px; }
.accts-moved-card p { color: #5f6c80; font-size: 14px; line-height: 1.6; margin: 0 0 20px; }

/* My Profile — chevron tabs + inline-edit */
/* same arrow clip-path technique as .chevron-pipeline (navy theme) */
/* full-width pipeline: each tab flex:1 → equal width (4 tabs = 25% each), per chevron-pipeline spec */
.profile-tabs {
    display: flex;
    width: 100%;
    margin: 0 0 22px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px 13px 30px;
    background: #eef2f8;
    color: var(--navy-primary);
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    /* arrow segment: notched left, point right (18px depth, per chevron-pipeline spec) */
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
    transition: filter 0.2s, background 0.15s ease, color 0.15s ease;
}
.profile-tab i { font-size: 13px; flex-shrink: 0; }
.profile-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-tab:first-child {
    /* flat left edge */
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
    padding-left: 18px;
    border-radius: 4px 0 0 4px;
}
.profile-tab:last-child {
    /* flat right edge */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%);
    border-radius: 0 4px 4px 0;
}
.profile-tab:hover {
    filter: brightness(0.97);
    background: #dde6f3;
    color: var(--navy-light);
}
.profile-tab.active {
    background: linear-gradient(135deg, var(--navy-accent) 0%, var(--navy-light) 100%);
    color: #fff;
}
.profile-tab.active i { color: #fff; }

/* tab panes */
.profile-tab-pane { display: none; }
.profile-tab-pane.active { display: block; }

/* Account Information card — inline-edit head + fields */
.account-info-card .acc-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.account-info-card .acc-info-head h3 { margin-bottom: 0; }
.acc-info-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.acc-edit-field {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d7def0;
    border-radius: 6px;
    font-size: 14px;
    color: var(--navy-primary);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.acc-edit-field:focus {
    outline: none;
    border-color: var(--navy-accent);
    box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.15);
}

/* narrow screens — scroll chevrons horizontally, keep them legible */
@media (max-width: 640px) {
    /* keep chevrons legible — scroll instead of squishing */
    .profile-tab { flex: 0 0 auto; min-width: 130px; padding: 11px 16px 11px 24px; font-size: 11px; }
}

/* My Profile — dark mode */
body.dark-mode .profile-tab {
    background: #2a2a55;
    color: var(--text-muted);
}
body.dark-mode .profile-tab:hover {
    background: #353570;
    color: #e5e7eb;
}
body.dark-mode .profile-tab.active {
    background: linear-gradient(135deg, var(--navy-accent) 0%, var(--navy-light) 100%);
    color: #fff;
}
body.dark-mode .acc-edit-field {
    background: var(--bg-input, #14142e);
    border-color: var(--border-light);
    color: var(--text-primary);
}
body.dark-mode .acc-edit-field:focus {
    border-color: var(--navy-accent);
    box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.25);
}

/* compact KPI/stat cards — e.g. payment.php summary row */
.stat-cards-sm .stat-card { padding: 14px 16px; border-left-width: 3px; }
.stat-cards-sm .stat-card-icon { width: 38px; height: 38px; font-size: 17px; margin-bottom: 8px; }
.stat-cards-sm .stat-card-value { font-size: 20px; margin-bottom: 2px; }
.stat-cards-sm .stat-card-label { font-size: 12px; }

/* ===== Enterprise section tabs — chevron pipeline style, switch sections within a page (reusable) ===== */
.section-tabs { display: flex; width: 100%; margin: 0 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.section-tabs::-webkit-scrollbar { display: none; }
.section-tab { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #eef2f8; color: var(--navy-primary); border: none; outline: none; cursor: pointer; padding: 13px 22px 13px 30px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; overflow: hidden; user-select: none; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); transition: filter .2s, background .15s ease, color .15s ease; }
.section-tab i { font-size: 13px; flex-shrink: 0; }
.section-tab:first-child { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); padding-left: 18px; border-radius: 4px 0 0 4px; }
.section-tab:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%); border-radius: 0 4px 4px 0; }
.section-tab:hover { background: #dde6f3; color: var(--navy-light); }
.section-tab.active { background: linear-gradient(135deg, var(--navy-accent) 0%, var(--navy-light) 100%); color: #fff; }
.section-tab.active i { color: #fff; }
.section-tab .tab-badge { background: var(--danger, #c5221f); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; min-width: 18px; text-align: center; }
.section-tab.active .tab-badge { background: rgba(255,255,255,0.28); }
.section-tab .tab-badge:empty { display: none; }
.section-pane { display: none; }
.section-pane.active { display: block; }
@media (max-width: 640px) { .section-tab { flex: 0 0 auto; min-width: 140px; padding: 11px 14px 11px 22px; font-size: 11px; } }

/* My Profile — onboarding details block (read-only) */
.onb-block {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e6ebf3;
}

.onb-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy-primary);
    margin-bottom: 14px;
}
.onb-head i { color: var(--navy-accent); }

.onb-section { margin-bottom: 16px; }
.onb-section:last-child { margin-bottom: 0; }

.onb-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--navy-accent);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.onb-loading,
.onb-empty {
    color: #5f6c80;
    font-size: 13px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.onb-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #eef4fb;
    border: 1px solid #d7e3f4;
    border-radius: 6px;
    color: var(--navy-accent);
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
}
.onb-file:hover { background: #e2edfa; }
.onb-file i { color: var(--navy-accent); }

.onb-block .info-grid-2x { margin-top: 6px; }

/* multifile docs list — stacked download chips */
.onb-doclist { display: flex; flex-wrap: wrap; gap: 8px; }
.onb-yes { color: #137333; margin-right: 4px; }
body.dark-mode .onb-yes { color: #34a853; }

body.dark-mode .onb-block { border-top-color: var(--border-light, #2a2a55); }
body.dark-mode .onb-head { color: var(--text-primary); }
body.dark-mode .onb-loading,
body.dark-mode .onb-empty { color: var(--text-secondary); }
body.dark-mode .onb-file {
    background: #1c2440;
    border-color: #2a3a5c;
}
body.dark-mode .onb-file:hover { background: #232c4d; }

/* acct name under logo — client business name (falls back to username for staff) */
.sidebar-acct-name {
    margin-top: 6px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.92);
    text-align: center;
    word-break: break-word;
    line-height: 1.3;
    transition: opacity 0.3s ease;
}

/* hide name when sidebar collapses to icons-only */
.sidebar.collapsed .sidebar-acct-name {
    display: none;
}

/* ============================================================
   Dashboard command center — Rameez Scripts
   all scoped under .page-dashboard (body class)
   ============================================================ */

/* gradient KPI icon-tile + color variants (replaces flat .kpi-icon) */
.page-dashboard .kpi-card.erp-kpi-card { border-left: none; padding: 18px 18px 16px; }
.page-dashboard .kpi-card .kpi-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.page-dashboard .erp-kpi-tile {
    width: 52px; height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
}
.page-dashboard .erp-kpi--revenue  .erp-kpi-tile { background: linear-gradient(135deg, #34a853 0%, #2d9148 100%); }
.page-dashboard .erp-kpi--orders   .erp-kpi-tile { background: linear-gradient(135deg, var(--navy-accent) 0%, #0056a8 100%); }
.page-dashboard .erp-kpi--products .erp-kpi-tile { background: linear-gradient(135deg, #B10DC9 0%, #7d0a90 100%); }
.page-dashboard .erp-kpi--shipments .erp-kpi-tile{ background: linear-gradient(135deg, #FF851B 0%, #d96a00 100%); }
.page-dashboard .erp-kpi--cases    .erp-kpi-tile { background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-accent) 100%); }
.page-dashboard .erp-kpi--lowstock .erp-kpi-tile { background: linear-gradient(135deg, #ea4335 0%, #c5221f 100%); }
.page-dashboard .kpi-card.erp-kpi--lowstock.kpi-warn { box-shadow: 0 0 0 1px #f3c4c1 inset, 0 1px 4px rgba(0,0,0,0.06); }

/* header welcome + card note */
.page-dashboard .erp-welcome { font-size: 13px; font-weight: 500; color: var(--text-muted, #888); margin-left: 8px; }
.page-dashboard .erp-card-note { font-size: 12px; font-weight: 500; color: var(--text-muted, #999); }
.page-dashboard .erp-head-grow { flex: 1; min-width: 0; }

/* Orders-Overview / finance 4-stat footer */
.page-dashboard .erp-chart-footer {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--border-light, #f0f0f0);
}
.page-dashboard .erp-chart-stat { text-align: center; }
.page-dashboard .erp-chart-stat-value { font-size: 19px; font-weight: 700; color: var(--navy-primary); line-height: 1.15; }
.page-dashboard .erp-chart-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted, #666); margin-top: 3px; }
body.dark-mode.page-dashboard .erp-chart-stat-value { color: #e5e7eb; }

/* shared mini-list (Top Products / FBA Shipments / Cases) */
.page-dashboard .erp-mini-list { list-style: none; margin: 0; padding: 0; }
.page-dashboard .erp-mini-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 4px; border-bottom: 1px solid var(--border-light, #f0f0f0);
}
.page-dashboard .erp-mini-row:last-child { border-bottom: none; }
.page-dashboard .erp-mini-icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #fff; font-weight: 700;
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
}
.page-dashboard .erp-ci--dist { background: linear-gradient(135deg,#0074D9 0%,#0056a8 100%); }
.page-dashboard .erp-ci--acct { background: linear-gradient(135deg,#B10DC9 0%,#7d0a90 100%); }
.page-dashboard .erp-ci--fba  { background: linear-gradient(135deg,#FF851B 0%,#d96a00 100%); }
.page-dashboard .erp-mini-body { flex: 1; min-width: 0; }
.page-dashboard .erp-mini-rt { text-align: right; }
.page-dashboard .erp-mini-rank { font-size: 11px; font-weight: 700; color: var(--navy-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-dashboard .erp-mini-name { font-size: 14px; font-weight: 600; color: var(--text-primary, #222); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-dashboard .erp-mini-value { font-size: 14px; font-weight: 700; color: var(--navy-primary); white-space: nowrap; }
body.dark-mode.page-dashboard .erp-mini-value { color: #e5e7eb; }
.page-dashboard .erp-mini-trend { font-size: 12px; font-weight: 600; white-space: nowrap; }
.page-dashboard .erp-mini-trend.erp-tr-r { text-align: right; }
.page-dashboard .erp-mini-trend.up   { color: #137333; }
.page-dashboard .erp-mini-trend.down { color: #c5221f; }
.page-dashboard .erp-mini-trend i { margin-right: 3px; }

/* FBA status colored dot (mirrors dashboard statusColorMap) */
.page-dashboard .erp-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: #AAAAAA; }
.page-dashboard .erp-dot--pending    { background: #AAAAAA; }
.page-dashboard .erp-dot--ordered    { background: var(--navy-accent); }
.page-dashboard .erp-dot--shipped    { background: #39CCCC; }
.page-dashboard .erp-dot--in_transit { background: #FF851B; }
.page-dashboard .erp-dot--delivered  { background: #2ECC40; }
.page-dashboard .erp-dot--received   { background: #2ECC40; }
.page-dashboard .erp-dot--cancelled  { background: #FF4136; }
.page-dashboard .erp-mini-count { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--navy-primary); }
body.dark-mode.page-dashboard .erp-mini-count { color: #e5e7eb; }

/* Cases-Summary bold total row */
.page-dashboard .erp-mini-row.erp-mini-total {
    border-top: 2px solid var(--border-color, #e0e0e0); border-bottom: none;
    margin-top: 4px; padding-top: 13px;
}
.page-dashboard .erp-mini-total .erp-mini-name,
.page-dashboard .erp-mini-total .erp-mini-count { font-weight: 800; color: var(--navy-primary); font-size: 15px; }
body.dark-mode.page-dashboard .erp-mini-total .erp-mini-name,
body.dark-mode.page-dashboard .erp-mini-total .erp-mini-count { color: #e5e7eb; }

/* Reports quick-link icon grid */
.page-dashboard .erp-reports-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
}
.page-dashboard .erp-report-tile {
    display: flex; align-items: center; gap: 14px;
    padding: 18px; background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e0e0e0); border-radius: 12px;
    text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.page-dashboard .erp-report-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.10); border-color: var(--navy-accent); }
.page-dashboard .erp-report-icon {
    width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; color: #fff;
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
}
.page-dashboard .erp-report--sales     .erp-report-icon { background: linear-gradient(135deg, #34a853 0%, #2d9148 100%); }
.page-dashboard .erp-report--inventory  .erp-report-icon { background: linear-gradient(135deg, var(--navy-accent) 0%, #0056a8 100%); }
.page-dashboard .erp-report--fba        .erp-report-icon { background: linear-gradient(135deg, #FF851B 0%, #d96a00 100%); }
.page-dashboard .erp-report--shipment   .erp-report-icon { background: linear-gradient(135deg, #39CCCC 0%, #1f9b9b 100%); }
.page-dashboard .erp-report--pnl        .erp-report-icon { background: linear-gradient(135deg, #B10DC9 0%, #7d0a90 100%); }
.page-dashboard .erp-report--custom     .erp-report-icon { background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-accent) 100%); }
.page-dashboard .erp-report-label { font-size: 14px; font-weight: 700; color: var(--text-primary, #222); }
.page-dashboard .erp-report-sub { font-size: 12px; color: var(--text-muted, #666); margin-top: 2px; }

/* dashboard widget grids */
.page-dashboard .erp-widget-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 16px 0; }
.page-dashboard .erp-widget-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0; }
.page-dashboard .erp-grid-2-1 { grid-template-columns: 1.6fr 1fr; }
.page-dashboard .erp-widget-grid-2 > .chart-container,
.page-dashboard .erp-widget-grid-2 > .settings-mega-card,
.page-dashboard .erp-widget-grid-3 > .settings-mega-card { margin: 0; }

/* migrated out of the old inline <style> block (project rule 21) */
.page-dashboard .view-all-link { color: var(--navy-accent); text-decoration: none; font-weight: 600; font-size: 13px; margin-left: auto; }
.page-dashboard .view-all-link:hover { text-decoration: underline; }
.page-dashboard .chart-container canvas { max-height: 300px; }
.page-dashboard .dashboard-tasks-list { width: 100%; border-collapse: collapse; font-size: 14px; }
.page-dashboard .dashboard-tasks-list th { text-align: left; padding: 9px 8px; color: var(--text-muted, #666); font-weight: 600; border-bottom: 1px solid var(--border-color, #eee); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
.page-dashboard .dashboard-tasks-list td { padding: 9px 8px; border-bottom: 1px solid var(--border-light, #f3f3f3); }
.page-dashboard .dashboard-tasks-list tr:last-child td { border-bottom: none; }
.page-dashboard .dashboard-tasks-list .task-due.overdue { color: #c5221f; font-weight: 600; }
.page-dashboard .pr-badge, .page-dashboard .stock-badge { padding: 4px 10px; border-radius: 12px; font-size: 11px; line-height: 1.4; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.page-dashboard .pr-badge.pr-urgent, .page-dashboard .stock-badge.stock-critical { background: #fde7e9; color: #c5221f; }
.page-dashboard .pr-badge.pr-high,   .page-dashboard .stock-badge.stock-warning  { background: #fff4e5; color: #b36b00; }
.page-dashboard .pr-badge.pr-medium { background: #e8f0fe; color: #1565c0; }
.page-dashboard .pr-badge.pr-low    { background: #eef0f3; color: #555; }

/* dashboard responsive */
@media (max-width: 992px) {
    .page-dashboard .erp-widget-grid-2, .page-dashboard .erp-widget-grid-3, .page-dashboard .erp-grid-2-1 { grid-template-columns: 1fr; }
    .page-dashboard .erp-chart-footer { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .page-dashboard .erp-reports-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   7-up KPI hero row + Net Profit tile — Rameez Scripts
   ============================================================ */
.page-dashboard .erp-kpi--profit .erp-kpi-tile { background: linear-gradient(135deg, #39CCCC 0%, #1f9b9b 100%); }
.page-dashboard .kpi-grid { grid-template-columns: repeat(7, 1fr); gap: 12px; }
.page-dashboard .kpi-card.erp-kpi-card { padding: 16px 13px 14px; }
.page-dashboard .kpi-card.erp-kpi-card .erp-kpi-tile { width: 44px; height: 44px; font-size: 18px; border-radius: 11px; }
.page-dashboard .kpi-card.erp-kpi-card .kpi-value { font-size: 21px; white-space: nowrap; }
.page-dashboard .kpi-card.erp-kpi-card .kpi-label { font-size: 11.5px; }
.page-dashboard .kpi-card.erp-kpi-card .kpi-trend { font-size: 10.5px; }
@media (max-width: 1199px) { .page-dashboard .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .page-dashboard .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .page-dashboard .kpi-grid { grid-template-columns: 1fr; } }

/* ============================================================
   chart sizing fix + spacing — Rameez Scripts
   give Chart.js a definite-height parent so chart footers
   never overflow onto the row below; stop short cards stretching
   ============================================================ */
.page-dashboard .erp-chart-box { position: relative; width: 100%; height: 230px; margin-top: 6px; }
.page-dashboard .erp-chart-box canvas { max-height: 230px !important; }
.page-dashboard .chart-container { min-height: 0; padding: 18px; overflow: hidden; }
.page-dashboard .erp-widget-grid-2,
.page-dashboard .erp-widget-grid-2.erp-grid-2-1 { align-items: start; }
/* 3-up mini-list row (FBA / Recent Orders / Cases) — all cards equal height, empty state centered */
.page-dashboard .erp-widget-grid-3 { align-items: stretch; }
.page-dashboard .erp-widget-grid-3 > .settings-mega-card { display: flex; flex-direction: column; }
.page-dashboard .erp-widget-grid-3 > .settings-mega-card > .settings-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.page-dashboard .erp-widget-grid-3 .settings-card-body > .activities-empty,
.page-dashboard .erp-widget-grid-3 .settings-card-body > .activities-loading { margin: auto; }
/* roomier KPI cards (7-up row) */
.page-dashboard .kpi-card.erp-kpi-card { padding: 18px 16px 16px; }
.page-dashboard .kpi-card.erp-kpi-card .kpi-value { margin: 8px 0 2px; }
.page-dashboard .kpi-card.erp-kpi-card .kpi-trend { margin-top: 5px; }
/* card bodies — comfortable inner spacing for the mini-lists/tables */
.page-dashboard .settings-card-body { padding: 6px 18px 16px; }
.page-dashboard .erp-mini-list { padding: 2px 0; }

/* shipping — Loss chip (leftover/excess units received but not shipped); shown only when remaining > 0 — Rameez Scripts */
.loss-chip { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 11px; font-weight: 700; line-height: 1.5; background: #fde7e9; color: #c5221f; border: 1px solid #f3c4c1; }
.cell-sub-label.sub-loss { color: #c5221f; }
.cell-sub-label.sub-loss i { color: #c5221f; }
body.dark-mode .loss-chip { background: #3a1518; color: #f3b4b0; border-color: #5a2226; }

/* saved-shipments — expandable box breakdown + per-box notes/issues — Rameez Scripts */
.ship-box-panel { border: 1px solid var(--border-color, #e0e0e0); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: var(--bg-card, #fff); }
.ship-box-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; background: #f3f6fb; transition: background .15s; }
.ship-box-head:hover { background: #eaf1fb; }
.ship-box-toggle { color: #0074D9; width: 14px; text-align: center; }
.ship-box-units { margin-left: auto; font-size: 12px; color: var(--text-muted, #667); font-weight: 600; }
.ship-box-issuepill { background: #fde7e9; color: #c5221f; font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 10px; margin-left: 8px; }
.ship-box-body { padding: 12px 14px; border-top: 1px solid var(--border-light, #eef2f7); }
.box-items-table { width: 100%; margin: 0 0 10px; }
.box-item-codes { font-size: 11px; color: var(--text-muted, #667); }
.box-notes-list { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 6px; }
.box-note { border-left: 3px solid #0074D9; background: #f6f9fc; border-radius: 6px; padding: 7px 10px; }
.box-note-body { font-size: 13px; color: var(--text-primary, #222); }
.box-note-case { color: #b36b00; font-size: 11px; font-weight: 700; }
.box-note-meta { font-size: 11px; color: var(--text-muted, #888); margin-top: 3px; }
.box-issue-form { border-top: 1px dashed var(--border-color, #e0e0e0); padding-top: 10px; }
.box-issue-form .box-issue-text { width: 100%; }
.box-issue-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.box-issue-miss input { width: 80px; }
.box-issue-miss, .box-issue-case { font-size: 12px; color: var(--text-muted, #555); display: inline-flex; align-items: center; gap: 6px; }
.box-issue-btn { margin-left: auto; }
body.dark-mode .ship-box-head { background: #16202e; }
body.dark-mode .ship-box-head:hover { background: #1c2a3c; }
body.dark-mode .box-note { background: #16202e; }

/* Shipment Details layout (Amazon Seller-Central style) — Rameez Scripts */
.sd-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.sd-header h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-submeta { font-size: 12.5px; color: #6b7a90; margin-top: 4px; }
.sd-count { font-size: 13px; color: #6b7a90; font-weight: 500; }
.sd-hint { font-size: 12.5px; margin: 0 0 12px; }

/* status chips */
.sd-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 20px; white-space: nowrap; }
.sd-chip-blue { background: #e3f0ff; color: #0a4ea3; }
.sd-chip-green { background: #e3f9ec; color: #11814a; }
.sd-chip-amber { background: #fff3df; color: #9a5b00; }
.sd-chip-grey { background: #eceff3; color: #5a6678; }

/* summary card */
.sd-summary .sd-sum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 12px; }
.sd-sum-cell { background: #f7f9fc; border: 1px solid #e7edf5; border-radius: 9px; padding: 10px 13px; }
.sd-sum-lbl { font-size: 11.5px; color: #6b7a90; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.sd-sum-lbl i { color: #0074D9; margin-right: 3px; }
.sd-sum-val { font-size: 16px; font-weight: 700; color: #001f3f; margin-top: 3px; word-break: break-word; }

/* two-column detail */
.sd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; margin-top: 4px; }
.sd-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.sd-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 14px; }
.sd-panel .sd-addbox { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sd-panel .sd-addbox .btn { align-self: flex-start; }
.sd-notes-list, .sd-cases-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.sd-empty-sm { font-size: 13px; text-align: center; padding: 14px 6px; }

/* case cards */
.sd-case { border: 1px solid #e7edf5; border-left: 3px solid #0074D9; border-radius: 8px; padding: 9px 11px; background: #f9fbfe; }
.sd-case-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sd-case-num { font-weight: 700; font-size: 12.5px; color: #001f3f; }
.sd-case-sub { font-size: 13px; font-weight: 600; margin-top: 4px; color: #243447; }
.sd-case-desc { font-size: 12px; color: #56657a; margin-top: 3px; }
.sd-case-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11.5px; color: #7a8699; }
.sd-case-link { font-weight: 700; color: #0074D9; text-decoration: none; white-space: nowrap; }
.sd-case-link:hover { text-decoration: underline; }

/* box head meta + per-box status */
.sd-box-ic { color: #0074D9; }
.sd-box-meta { display: inline-flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #6b7a90; }
.sd-box-meta i { color: #93a1b5; margin-right: 2px; }
.sd-box-status { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 12px; margin-left: 8px; white-space: nowrap; }
.sd-st-ok { background: #e3f9ec; color: #11814a; }
.sd-st-issue { background: #fde7e9; color: #c5221f; }
.sd-box-subhead { font-weight: 700; color: #001f3f; margin: 2px 0 8px; font-size: 13.5px; }

/* totals + footnote */
.sd-totals .about-roles-table { font-weight: 600; }
.sd-foot-note { font-size: 11.5px; margin: 8px 0 0; }

@media (max-width: 980px) {
    .sd-layout { grid-template-columns: 1fr; }
    .sd-side { position: static; }
}

/* dark mode */
body.dark-mode .sd-sum-cell { background: #16202e; border-color: #243245; }
body.dark-mode .sd-sum-val { color: #eaf1fb; }
body.dark-mode .sd-case { background: #16202e; border-color: #243245; border-left-color: #0074D9; }
body.dark-mode .sd-case-num, body.dark-mode .sd-box-subhead { color: #eaf1fb; }
body.dark-mode .sd-case-sub { color: #c7d3e2; }
body.dark-mode .sd-chip-blue { background: #14304d; color: #8fc1ff; }
body.dark-mode .sd-chip-green { background: #123524; color: #6fe0a4; }
body.dark-mode .sd-chip-amber { background: #3a2a0e; color: #ffcf80; }
body.dark-mode .sd-chip-grey { background: #232b36; color: #aab6c6; }

/* ===== Page: Attendance Overview ===== */
/* scoped under .page-attendance — reuses .kpi-card/.erp-kpi-tile/.kpi-trend/.erp-chart-box/.filter-input globals */
.page-attendance .att-header { flex-wrap:wrap; }
.page-attendance .att-header-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 14px; flex:1; justify-content:flex-end; }
.page-attendance .att-header-tools .btn { padding:7px 14px; font-size:13px; line-height:1.2; white-space:nowrap; }
.page-attendance .att-export-btn { white-space:nowrap; }
@media (max-width:768px) { .page-attendance .att-header-tools { margin:8px 0 0; flex-basis:100%; justify-content:flex-start; } }

/* range filter — dropdown */
.page-attendance .att-range-select { width:auto; min-width:150px; height:38px; font-weight:600; cursor:pointer; }
.page-attendance .att-header-tools .custom-dates { display:none; align-items:center; gap:6px; }
.page-attendance .att-header-tools .custom-dates.show { display:inline-flex; }
.page-attendance .att-header-tools .custom-dates .filter-input { height:38px; width:auto; }

/* member drill-down */
.page-attendance .att-focus-banner { display:none; align-items:center; gap:10px; background:rgba(0,116,217,.10); border:1px solid rgba(0,116,217,.25); color:var(--navy-accent); padding:9px 14px; border-radius:8px; font-size:13.5px; margin:12px 0 0; }
.page-attendance .att-focus-banner.show { display:flex; }
.page-attendance .att-focus-banner strong { color:var(--text-primary); }
.page-attendance .att-focus-clear { margin-left:auto; background:var(--navy-accent); color:#fff; border:none; border-radius:6px; padding:5px 12px; font-size:12.5px; font-weight:600; cursor:pointer; }
.page-attendance .att-focus-clear:hover { background:var(--navy-primary); }
.page-attendance .att-mlink { color:var(--text-primary); font-weight:600; text-decoration:none; cursor:pointer; }
.page-attendance .att-mlink:hover { color:var(--navy-accent); text-decoration:underline; }

/* kpi cards */
.page-attendance .att-kpi-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:8px; }
.page-attendance .att-kpi { padding:16px 16px 14px; border-radius:12px; box-shadow:0 1px 4px rgba(0,31,63,.07); transition:transform .15s ease, box-shadow .15s ease; }
.page-attendance .att-kpi:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,31,63,.12); }
.page-attendance .att-kpi .kpi-head { display:flex; align-items:center; margin-bottom:12px; }
.page-attendance .att-kpi .erp-kpi-tile { width:46px; height:46px; min-width:46px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:19px; color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.14); }
.page-attendance .att-kpi .kpi-value { font-size:24px; font-weight:800; margin:2px 0 0; }
.page-attendance .att-kpi .kpi-label { font-size:11.5px; letter-spacing:.5px; }
.page-attendance .att-kpi--members  { border-left-color:#0074D9; } .page-attendance .att-kpi--members  .erp-kpi-tile { background:linear-gradient(135deg,#0074D9,#0056a8); }
.page-attendance .att-kpi--worked   { border-left-color:#34a853; } .page-attendance .att-kpi--worked   .erp-kpi-tile { background:linear-gradient(135deg,#34a853,#2d9148); }
.page-attendance .att-kpi--avg      { border-left-color:#7c5cff; } .page-attendance .att-kpi--avg      .erp-kpi-tile { background:linear-gradient(135deg,#7c5cff,#5b3fd6); }
.page-attendance .att-kpi--break    { border-left-color:#FF851B; } .page-attendance .att-kpi--break    .erp-kpi-tile { background:linear-gradient(135deg,#FF851B,#d96a00); }
.page-attendance .att-kpi--sessions { border-left-color:#17a2b8; } .page-attendance .att-kpi--sessions .erp-kpi-tile { background:linear-gradient(135deg,#17a2b8,#0f7c8c); }
.page-attendance .att-kpi--absent   { border-left-color:#ea4335; } .page-attendance .att-kpi--absent   .erp-kpi-tile { background:linear-gradient(135deg,#ea4335,#c5221f); }
.page-attendance .kpi-trend { font-size:12px; font-weight:600; margin-top:6px; }
.page-attendance .kpi-trend .up, .page-attendance .kpi-trend.up { color:#137333; }
.page-attendance .kpi-trend .down, .page-attendance .kpi-trend.down { color:#c5221f; }
.page-attendance .kpi-trend-note { color:var(--text-muted); font-weight:500; }

/* main layout */
.page-attendance .att-main-grid { display:grid; grid-template-columns:minmax(0,2.1fr) minmax(0,1fr); gap:16px; align-items:start; margin-top:16px; }
.page-attendance .att-left { display:flex; flex-direction:column; gap:16px; min-width:0; }
.page-attendance .att-rail { display:flex; flex-direction:column; gap:16px; min-width:0; }
.page-attendance .att-subrow { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:16px; }

/* cards */
.page-attendance .att-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding:16px; box-shadow:0 1px 3px var(--shadow-color); }
.page-attendance .att-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.page-attendance .att-card-title { font-size:15px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.page-attendance .att-card-title > i { color:var(--navy-accent); }
.page-attendance .att-card-note { font-size:12px; font-weight:500; color:var(--text-muted); margin-left:4px; }

/* worked-hours chart — override global 230px canvas clamp */
.page-attendance .att-chart-tall { position:relative; height:300px !important; }
.page-attendance .att-chart-tall canvas { max-height:300px !important; }
.page-attendance .att-chart-loading { position:absolute; inset:0; background:var(--bg-card); z-index:2; }
.page-attendance .att-legend-inline { display:flex; gap:14px; font-size:12px; color:var(--text-muted); }
.page-attendance .att-dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:middle; }
.page-attendance .dot-worked { background:#0074D9; }
.page-attendance .dot-break { background:#FF851B; }

/* doughnuts */
.page-attendance .att-doughnut-wrap { position:relative; height:180px; margin:4px auto 10px; }
.page-attendance .att-doughnut-sm { height:160px; }
.page-attendance .att-doughnut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.page-attendance .att-dough-val { font-size:18px; font-weight:800; color:var(--text-primary); }
.page-attendance .att-dough-lbl { font-size:10.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
.page-attendance .att-legend { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.page-attendance .att-legend-item { display:flex; align-items:center; gap:8px; font-size:13px; }
.page-attendance .att-legend-dot { width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.page-attendance .att-legend-name { color:var(--text-secondary); }
.page-attendance .att-legend-val { margin-left:auto; font-weight:700; color:var(--text-primary); }
.page-attendance .att-legend-pct { color:var(--text-muted); font-size:12px; width:42px; text-align:right; }

/* summary chips */
.page-attendance .att-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.page-attendance .att-chip { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--border-light); border-radius:10px; background:var(--bg-secondary); }
.page-attendance .att-chip-ic { width:38px; height:38px; border-radius:9px; background:rgba(0,116,217,.10); color:var(--navy-accent); display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 38px; }
.page-attendance .att-chip-val { font-size:17px; font-weight:800; color:var(--text-primary); }
.page-attendance .att-chip-lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px; font-weight:600; }

/* live status */
.page-attendance .att-live-list { display:flex; flex-direction:column; gap:4px; max-height:332px; overflow-y:auto; }
.page-attendance .att-live-item { display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--border-light); }
.page-attendance .att-live-item:last-child { border-bottom:none; }
.page-attendance .att-live-meta { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.page-attendance .att-live-name { font-size:13px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.page-attendance .att-live-time { font-size:13px; font-weight:700; color:var(--navy-accent); font-variant-numeric:tabular-nums; }
.page-attendance .att-live-empty { text-align:center; color:var(--text-muted); padding:30px 10px; }
.page-attendance .att-live-empty i { font-size:30px; color:var(--border-color); margin-bottom:8px; display:block; }
.page-attendance .att-live-foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--border-color); font-size:13px; color:var(--text-muted); }
.page-attendance .att-live-foot strong { color:var(--success); font-size:15px; }
.page-attendance .live-dot { color:var(--success) !important; animation:attLivePulse 1.8s infinite; }
@keyframes attLivePulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* status badges (.att-badge base radius set globally) */
.page-attendance .att-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; font-size:12px; font-weight:600; }
.page-attendance .att-badge i { font-size:7px; }
.page-attendance .att-badge--working { background:rgba(52,168,83,.16); color:#1e7e34; }
.page-attendance .att-badge--paused  { background:rgba(255,133,27,.18); color:#b3600a; }
.page-attendance .att-badge--done    { background:rgba(0,116,217,.14); color:#0a4b80; }
.page-attendance .att-badge--offline { background:rgba(120,130,145,.18); color:#5f6c80; }

/* avatars */
.page-attendance .att-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 34px; vertical-align:middle; }
.page-attendance .att-avatar-ini { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700; background:linear-gradient(135deg,#0074D9,#001f3f); }
.page-attendance .av-sm { width:32px; height:32px; flex:0 0 32px; font-size:12px; }

/* team table */
.page-attendance .att-filters { margin:0 0 12px; }
.page-attendance .att-team-table td { vertical-align:middle; }
.page-attendance .att-mname { display:inline-flex; flex-direction:column; vertical-align:middle; margin-left:9px; }
.page-attendance .att-mname small { font-size:11px; color:var(--text-muted); text-transform:capitalize; }
.page-attendance .att-muted { color:var(--text-muted); }
.page-attendance .att-progress { display:flex; align-items:center; gap:8px; min-width:120px; }
.page-attendance .att-progress-track { flex:1; height:7px; border-radius:5px; background:var(--border-light); overflow:hidden; min-width:54px; }
.page-attendance .att-progress-bar { display:block; height:100%; border-radius:5px; }
.page-attendance .att-progress .pg-good { background:#34a853; }
.page-attendance .att-progress .pg-mid { background:#fbbc04; }
.page-attendance .att-progress .pg-low { background:#ea4335; }
.page-attendance .att-progress-num { font-size:12px; font-weight:700; color:var(--text-secondary); width:38px; text-align:right; }
.page-attendance .dt-buttons { margin-bottom:10px; display:flex; gap:6px; flex-wrap:wrap; }
.page-attendance .dt-button { background:var(--navy-accent) !important; color:#fff !important; border:none !important; border-radius:6px !important; padding:6px 12px !important; font-size:12.5px !important; cursor:pointer; }
.page-attendance .dt-button:hover { background:var(--navy-primary) !important; }
.page-attendance table.dataTable thead th { font-size:12px; text-transform:uppercase; letter-spacing:.3px; color:var(--text-muted); }

/* quick stats */
.page-attendance .att-quick-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.page-attendance .att-quick-item { display:flex; align-items:center; justify-content:space-between; padding:11px 2px; border-bottom:1px solid var(--border-light); font-size:13px; }
.page-attendance .att-quick-item:last-child { border-bottom:none; }
.page-attendance .att-quick-lbl { color:var(--text-secondary); display:flex; align-items:center; gap:8px; }
.page-attendance .att-quick-lbl i { color:var(--navy-accent); width:16px; text-align:center; }
.page-attendance .att-quick-val { font-weight:700; color:var(--text-primary); }

/* chevron tabs (reuse global .chevron-pipeline / .chevron-stage) */
.page-attendance .att-tabs { margin:14px 0 16px; display:flex; width:100%; }
.page-attendance .att-tabs .chevron-stage { flex:1 1 0; min-width:0; text-align:center; padding:13px 18px; font-size:14px; }
.page-attendance .att-tabs .chevron-stage i { margin-right:7px; }
.page-attendance .att-tabs .chevron-stage-count { background:rgba(0,0,0,.12); padding:1px 8px; border-radius:10px; font-weight:700; font-size:11px; }
.page-attendance .att-tabs .chevron-stage.active .chevron-stage-count { background:rgba(255,255,255,.28); }
.page-attendance .att-tab-panel { display:none; }
.page-attendance .att-tab-panel.active { display:block; }
.page-attendance table.att-team-table { width:100% !important; }

/* responsive */
@media (max-width:1280px) { .page-attendance .att-kpi-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:1100px) { .page-attendance .att-main-grid { grid-template-columns:1fr; } }
@media (max-width:760px)  { .page-attendance .att-kpi-grid { grid-template-columns:repeat(2,1fr); } .page-attendance .att-subrow { grid-template-columns:1fr; } }
@media (max-width:480px)  { .page-attendance .att-header-tools { width:100%; } .page-attendance .att-range { width:100%; } .page-attendance .att-kpi-grid { grid-template-columns:1fr; } }

/* ===================================================================
   Page: Salary Dashboard — Rameez Scripts
   payroll command center (KPI hero, charts, payroll table, summary)
   scoped under .page-salary; reuses core data-section/section-header/
   btn*/modal*/status-badge/role-badge/chevron-pipeline/filters-*/
   about-roles-table/action-icon*/table-responsive/DataTables
   =================================================================== */

/* floating loading popup (bundled so the page styles even if the global block is absent) */
.loading-ov { position:fixed; inset:0; display:flex; justify-content:center; align-items:center; z-index:10001; }
.loading-popup { background:#fff; padding:30px 40px; border-radius:6px; box-shadow:0 4px 24px rgba(0,0,0,0.18); display:flex; flex-direction:column; align-items:center; min-width:240px; }
.loading-progress { width:200px; height:6px; border-radius:2px; background:#e0e0e0; overflow:hidden; margin-bottom:16px; }
.loading-progress-bar { width:100%; height:100%; background:var(--navy-accent); border-radius:2px; animation:progressIndeterminate 1.5s ease-in-out infinite; transform-origin:left; }
@keyframes progressIndeterminate { 0% { transform:translateX(-100%) scaleX(0.4); } 50% { transform:translateX(20%) scaleX(0.5); } 100% { transform:translateX(100%) scaleX(0.4); } }
.loading-txt { font-size:15px; color:#555; font-weight:500; }

/* header: stacked title + subtitle */
.page-salary .header h1 { flex-direction:column; align-items:flex-start; gap:2px; }
.page-salary .header h1 .sal-h1-row { display:flex; align-items:center; gap:10px; }
.page-salary .sal-subtitle { font-size:13px; font-weight:500; color:var(--text-muted); }

/* KPI hero row (6-up) */
.page-salary .sal-kpi-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:20px; }
.page-salary .sal-kpi-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding:16px 16px 14px; box-shadow:0 2px 8px var(--shadow-color); transition:transform .18s ease, box-shadow .18s ease; min-width:0; }
.page-salary .sal-kpi-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px var(--shadow-hover); }
.page-salary .sal-kpi-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.page-salary .sal-kpi-tile { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; flex-shrink:0; box-shadow:0 4px 12px rgba(0,0,0,.15); background:linear-gradient(135deg,var(--navy-primary) 0%,var(--navy-light) 100%); }
.page-salary .sal-kpi--cost    .sal-kpi-tile { background:linear-gradient(135deg,var(--navy-primary) 0%,var(--navy-accent) 100%); }
.page-salary .sal-kpi--net     .sal-kpi-tile { background:linear-gradient(135deg,#34a853 0%,#2d9148 100%); }
.page-salary .sal-kpi--ded     .sal-kpi-tile { background:linear-gradient(135deg,#FF851B 0%,#d96a00 100%); }
.page-salary .sal-kpi--adv     .sal-kpi-tile { background:linear-gradient(135deg,#B10DC9 0%,#7d0a90 100%); }
.page-salary .sal-kpi--pending .sal-kpi-tile { background:linear-gradient(135deg,#ea4335 0%,#c5221f 100%); }
.page-salary .sal-kpi--emp     .sal-kpi-tile { background:linear-gradient(135deg,#39CCCC 0%,#1f9b9b 100%); }
.page-salary .sal-kpi-value { font-size:23px; font-weight:700; color:var(--navy-primary); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.page-salary .sal-kpi-label { font-size:12px; font-weight:600; color:var(--text-secondary); margin-top:3px; }
.page-salary .sal-kpi-sub { font-size:11.5px; color:var(--text-muted); margin-top:4px; }
.page-salary .sal-kpi-trend { font-size:11.5px; font-weight:600; margin-top:5px; display:flex; align-items:center; gap:4px; min-height:14px; }
.page-salary .sal-kpi-trend.up { color:#137333; }
.page-salary .sal-kpi-trend.down { color:#c5221f; }
.page-salary .sal-kpi-trend.flat { color:var(--text-muted); }
body.dark-mode.page-salary .sal-kpi-value { color:#5dade2; }

/* widget layout grids */
.page-salary .sal-charts-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:16px; margin-bottom:20px; align-items:start; }
.page-salary .sal-main-grid { display:grid; grid-template-columns:1.7fr 1fr; gap:16px; margin-bottom:20px; align-items:start; }
.page-salary .sal-bottom-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:20px; align-items:start; }
.page-salary .sal-side-stack { display:flex; flex-direction:column; gap:16px; }
.page-salary .sal-charts-grid > .data-section,
.page-salary .sal-main-grid > .data-section,
.page-salary .sal-bottom-grid > .data-section,
.page-salary .sal-side-stack > .data-section { margin:0; }
.page-salary .sal-card-link { color:var(--navy-accent); text-decoration:none; font-weight:600; font-size:13px; }
.page-salary .sal-card-link:hover { text-decoration:underline; }

/* chart boxes + doughnut center */
.page-salary .sal-chart-box { position:relative; width:100%; height:270px; margin-top:6px; }
.page-salary .sal-chart-box.sm { height:220px; }
.page-salary .sal-chart-box canvas { max-height:270px !important; }
.page-salary .sal-chart-box.sm canvas { max-height:220px !important; }
.page-salary .sal-donut-wrap { position:relative; }
.page-salary .sal-donut-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; }
.page-salary .sal-donut-center .num { font-size:21px; font-weight:700; color:var(--navy-primary); line-height:1.1; }
.page-salary .sal-donut-center .lbl { font-size:10.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }
body.dark-mode.page-salary .sal-donut-center .num { color:#e5e7eb; }

/* chart footer stats (3-up) */
.page-salary .sal-chart-footer { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border-light); }
.page-salary .sal-cf-stat { text-align:center; }
.page-salary .sal-cf-val { font-size:17px; font-weight:700; color:var(--navy-primary); line-height:1.15; }
.page-salary .sal-cf-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); margin-top:3px; }
body.dark-mode.page-salary .sal-cf-val { color:#e5e7eb; }

/* breakdown / payment legend */
.page-salary .sal-legend { list-style:none; margin:14px 0 0; padding:0; }
.page-salary .sal-legend-row { display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--border-light); }
.page-salary .sal-legend-row:last-child { border-bottom:none; }
.page-salary .sal-legend-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.page-salary .sal-legend-dot.c-net { background:#34a853; }
.page-salary .sal-legend-dot.c-ded { background:#FF851B; }
.page-salary .sal-legend-dot.c-wh  { background:#B10DC9; }
.page-salary .sal-legend-name { font-size:13px; font-weight:600; color:var(--text-primary); flex:1; min-width:0; }
.page-salary .sal-legend-val { font-size:13px; font-weight:700; color:var(--navy-primary); white-space:nowrap; }
.page-salary .sal-legend-pct { font-size:11.5px; color:var(--text-muted); min-width:48px; text-align:right; }
body.dark-mode.page-salary .sal-legend-val { color:#e5e7eb; }

/* deductions overview mini stats */
.page-salary .sal-mini-stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.page-salary .sal-mini-stat { background:var(--bg-primary); border:1px solid var(--border-light); border-radius:10px; padding:14px; }
.page-salary .sal-mini-stat-ic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; background:linear-gradient(135deg,#FF851B 0%,#d96a00 100%); margin-bottom:8px; }
.page-salary .sal-mini-stat.alt .sal-mini-stat-ic { background:linear-gradient(135deg,var(--navy-accent) 0%,#0056a8 100%); }
.page-salary .sal-mini-stat-val { font-size:20px; font-weight:700; color:var(--navy-primary); line-height:1.1; }
.page-salary .sal-mini-stat-lbl { font-size:11.5px; color:var(--text-muted); margin-top:3px; }
body.dark-mode.page-salary .sal-mini-stat-val { color:#e5e7eb; }
body.dark-mode.page-salary .sal-mini-stat { background:var(--bg-secondary); }

/* ranked mini-list (top deducted) */
.page-salary .sal-list-title { font-size:12px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.4px; margin:16px 0 4px; }
.page-salary .sal-mini-list { list-style:none; margin:0; padding:0; }
.page-salary .sal-mini-row { display:flex; align-items:center; gap:11px; padding:10px 2px; border-bottom:1px solid var(--border-light); }
.page-salary .sal-mini-row:last-child { border-bottom:none; }
.page-salary .sal-rank { width:26px; height:26px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--navy-primary) 0%,var(--navy-light) 100%); }
.page-salary .sal-mini-name { flex:1; font-size:13.5px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.page-salary .sal-mini-val { font-size:13.5px; font-weight:700; color:var(--navy-primary); white-space:nowrap; }
body.dark-mode.page-salary .sal-mini-val { color:#e5e7eb; }

/* payment summary clickable count rows */
.page-salary .sal-ps-list { list-style:none; margin:0 0 4px; padding:0; }
.page-salary .sal-ps-row { display:flex; align-items:center; gap:11px; padding:10px 8px; border-radius:8px; cursor:pointer; transition:background .15s; }
.page-salary .sal-ps-row:hover { background:var(--bg-primary); }
.page-salary .sal-ps-row.active { background:rgba(0,116,217,.10); }
.page-salary .sal-ps-ic { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; flex-shrink:0; }
.page-salary .sal-ps-ic.all { background:linear-gradient(135deg,var(--navy-primary),var(--navy-accent)); }
.page-salary .sal-ps-ic.paid { background:#34a853; }
.page-salary .sal-ps-ic.pending { background:#fbbc04; }
.page-salary .sal-ps-ic.upcoming { background:#0074D9; }
.page-salary .sal-ps-name { flex:1; font-size:13.5px; font-weight:600; color:var(--text-primary); }
.page-salary .sal-ps-count { font-size:15px; font-weight:700; color:var(--navy-primary); }
body.dark-mode.page-salary .sal-ps-count { color:#e5e7eb; }

/* quick actions */
.page-salary .sal-qa-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.page-salary .sal-qa-tile { display:flex; align-items:center; gap:12px; padding:14px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; cursor:pointer; text-align:left; width:100%; font-family:inherit; transition:transform .16s, box-shadow .16s, border-color .16s; }
.page-salary .sal-qa-tile:hover { transform:translateY(-2px); box-shadow:0 6px 16px var(--shadow-color); border-color:var(--navy-accent); }
.page-salary .sal-qa-ic { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; flex-shrink:0; background:linear-gradient(135deg,var(--navy-primary),var(--navy-light)); }
.page-salary .sal-qa--add .sal-qa-ic { background:linear-gradient(135deg,#34a853,#2d9148); }
.page-salary .sal-qa--refresh .sal-qa-ic { background:linear-gradient(135deg,var(--navy-accent),#0056a8); }
.page-salary .sal-qa--csv .sal-qa-ic { background:linear-gradient(135deg,#FF851B,#d96a00); }
.page-salary .sal-qa--print .sal-qa-ic { background:linear-gradient(135deg,#B10DC9,#7d0a90); }
.page-salary .sal-qa-tx { min-width:0; }
.page-salary .sal-qa-name { font-size:13.5px; font-weight:700; color:var(--text-primary); }
.page-salary .sal-qa-sub { font-size:11.5px; color:var(--text-muted); margin-top:2px; }

/* employee cell (avatar + name + role) */
.page-salary .sal-emp { display:flex; align-items:center; gap:10px; }
.page-salary .sal-emp-av { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--navy-primary),var(--navy-accent)); }
.page-salary .sal-emp-meta { min-width:0; }
.page-salary .sal-emp-name { font-size:13.5px; font-weight:600; color:var(--text-primary); white-space:nowrap; }
.page-salary .sal-emp-role { margin-top:3px; }

/* status pills (3-state) — squared to match project badge standard */
.page-salary .sal-pill { display:inline-block; padding:4px 12px; border-radius:4px; font-size:12px; font-weight:600; white-space:nowrap; }
.page-salary .sal-pill--paid { background:#d4edda; color:#137333; }
.page-salary .sal-pill--pending { background:#fff4e5; color:#b36b00; }
.page-salary .sal-pill--upcoming { background:#e8f0fe; color:#1565c0; }

/* styled mini-table money cells + total/empty rows */
.page-salary td.sal-num,
.page-salary th.sal-num { text-align:right !important; }
.page-salary .about-roles-table tr.sal-total td { font-weight:800; background:var(--bg-primary); }
.page-salary .sal-empty { text-align:center; color:var(--text-muted); padding:24px; font-size:13.5px; }
.page-salary .sal-empty i { display:block; font-size:26px; margin-bottom:8px; opacity:.5; }

/* trend window control + table toolbar bits */
.page-salary .sal-head-ctrl { display:inline-flex; align-items:center; gap:8px; }
.page-salary .sal-head-ctrl .select2-container { min-width:150px; }

/* select2 — match navy theme inputs + layer above modal */
.page-salary .select2-container--default .select2-selection--single { height:44px; border:2px solid var(--input-border); border-radius:3px; background:var(--input-bg); display:flex; align-items:center; }
.page-salary .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:40px; padding-left:12px; color:var(--text-primary); }
.page-salary .select2-container--default .select2-selection--single .select2-selection__arrow { height:42px; }
.select2-dropdown { background:#fff !important; z-index:99999 !important; border:1px solid #d7def0 !important; box-shadow:0 6px 18px rgba(0,31,63,.18); }
.select2-dropdown .select2-results__options { background:#fff !important; }

/* responsive */
@media (max-width:1199px){
    .page-salary .sal-kpi-grid { grid-template-columns:repeat(3,1fr); }
    .page-salary .sal-charts-grid { grid-template-columns:1fr; }
}
@media (max-width:992px){
    .page-salary .sal-main-grid, .page-salary .sal-bottom-grid { grid-template-columns:1fr; }
}
@media (max-width:768px){
    .page-salary .sal-kpi-grid { grid-template-columns:repeat(2,1fr); }
    .page-salary .sal-qa-grid, .page-salary .sal-mini-stat-grid { grid-template-columns:1fr; }
}
@media (max-width:480px){
    .page-salary .sal-kpi-grid { grid-template-columns:1fr; }
}

/* ===================================================================
   Page: Office Expenses — Recurring Bills Dashboard (payment.php)
   scoped under .page-payments; reuses core data-section/btn*/modal*/
   action-icon*/toggle-switch/loading-popup/filters-*/DataTables
   =================================================================== */

/* topbar */
.page-payments .pe-topbar { align-items:flex-start; flex-wrap:wrap; gap:14px; }
.page-payments .pe-title-block h1 { margin:0; }
.page-payments .pe-subtitle { font-size:13px; color:var(--text-muted); font-weight:500; margin-top:2px; }
.page-payments .pe-topbar-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; }
.page-payments .pe-month-nav { display:flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:4px 8px; font-weight:600; font-size:13px; color:var(--text-primary); }
.page-payments .pe-month-nav > span { min-width:120px; text-align:center; }
.page-payments .pe-month-nav i { color:var(--navy-accent); }
.page-payments .pe-month-btn { width:30px; height:30px; border:none; background:var(--bg-primary); color:var(--text-secondary); border-radius:8px; cursor:pointer; transition:background .15s, color .15s; }
.page-payments .pe-month-btn:hover { background:var(--navy-accent); color:#fff; }
.page-payments .btn-sm { padding:7px 12px; font-size:12.5px; }

/* KPI grid */
.page-payments .pe-kpi-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:22px; }
.page-payments .pe-kpi-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; padding:16px 16px 14px; box-shadow:0 2px 10px var(--shadow-color); transition:transform .18s, box-shadow .18s; min-width:0; }
.page-payments .pe-kpi-card:hover { transform:translateY(-3px); box-shadow:0 10px 22px var(--shadow-hover); }
.page-payments .pe-kpi-top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.page-payments .pe-kpi-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; background:rgba(0,116,217,.12); color:var(--navy-accent); flex:0 0 auto; }
.page-payments .pe-kpi-label { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px; line-height:1.2; }
.page-payments .pe-kpi-value { font-size:24px; font-weight:800; color:var(--text-primary); line-height:1.1; margin-bottom:6px; word-break:break-word; }
.page-payments .pe-kpi-sub { font-size:12px; color:var(--text-muted); font-weight:500; }
.page-payments .pe-kpi-bar { height:6px; border-radius:4px; background:var(--bg-primary); overflow:hidden; margin:4px 0 8px; }
.page-payments .pe-kpi-bar-fill { height:100%; background:var(--navy-accent); border-radius:4px; transition:width .4s ease; }
.page-payments .pe-kpi-bar-fill.over { background:var(--danger); }
.page-payments .pe-kpi-card.kpi-green .pe-kpi-icon { background:rgba(52,168,83,.14); color:var(--success); }
.page-payments .pe-kpi-card.kpi-amber .pe-kpi-icon { background:rgba(251,188,4,.18); color:#c98a00; }
.page-payments .pe-kpi-card.kpi-red .pe-kpi-icon { background:rgba(234,67,53,.13); color:var(--danger); }
.page-payments .pe-kpi-card.kpi-blue .pe-kpi-icon { background:rgba(0,116,217,.13); color:var(--navy-accent); }
.page-payments .pe-kpi-skel { height:104px; border-radius:14px; background:linear-gradient(90deg,var(--skeleton-base) 25%,var(--skeleton-shine) 37%,var(--skeleton-base) 63%); background-size:400% 100%; animation:skeletonShimmer 1.4s ease infinite; }
@keyframes skeletonShimmer { 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* layout */
.page-payments .pe-layout { display:flex; gap:20px; align-items:flex-start; }
.page-payments .pe-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:20px; }
.page-payments .pe-aside { width:350px; flex:0 0 350px; display:flex; flex-direction:column; gap:20px; }

/* generic card */
.page-payments .pe-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; box-shadow:0 2px 10px var(--shadow-color); padding:18px 18px 16px; }
.page-payments .pe-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.page-payments .pe-card-title { font-size:16px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:8px; margin:0; }
.page-payments .pe-card-title i { color:var(--navy-accent); }
.page-payments .pe-card-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* tabs (pills) */
.page-payments .pe-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.page-payments .pe-tab { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:20px; background:var(--bg-primary); color:var(--text-secondary); font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid var(--border-color); transition:all .15s; white-space:nowrap; }
.page-payments .pe-tab:hover { border-color:var(--navy-accent); color:var(--navy-accent); }
.page-payments .pe-tab.active { background:var(--navy-accent); color:#fff; border-color:var(--navy-accent); }
.page-payments .pe-tab-count { background:rgba(255,255,255,.25); padding:0 7px; border-radius:10px; font-size:11px; min-width:18px; text-align:center; }
.page-payments .pe-tab:not(.active) .pe-tab-count { background:var(--bg-card); color:var(--text-muted); }

/* day filter bar */
.page-payments .pe-dayfilter { display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(0,116,217,.08); border:1px solid var(--navy-accent); border-radius:10px; padding:8px 12px; margin-top:10px; font-size:13px; color:var(--text-primary); }
.page-payments .filter-clear-cell { display:flex; align-items:flex-end; }

/* bills table cells */
.page-payments #billsTable { width:100% !important; }
.page-payments .pe-bill-cell { display:flex; align-items:center; gap:10px; }
.page-payments .pe-bill-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; flex:0 0 auto; }
.page-payments .pe-bill-name { font-weight:600; color:var(--text-primary); font-size:13.5px; }
.page-payments .pe-recur-mark { font-size:10px; color:var(--navy-accent); margin-left:3px; }
.page-payments .pe-bill-vendor { font-size:11.5px; color:var(--text-muted); }
.page-payments .pe-cat-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:14px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.page-payments .pe-due-cell > div:first-child { font-weight:600; color:var(--text-primary); font-size:13px; }
.page-payments .pe-due-sub { font-size:11px; color:var(--text-muted); }
.page-payments .pe-due-sub.overdue { color:var(--danger); font-weight:600; }
.page-payments .pe-due-sub.soon { color:#c98a00; font-weight:600; }
.page-payments .pe-due-sub.paid { color:var(--success); }
.page-payments .pe-amt { font-weight:700; color:var(--text-primary); }
.page-payments .pe-method { font-size:12px; color:var(--text-secondary); }
.page-payments .pe-status { display:inline-block; padding:4px 11px; border-radius:14px; font-size:11.5px; font-weight:700; }
.page-payments .pe-status.paid { background:rgba(52,168,83,.14); color:var(--success); }
.page-payments .pe-status.upcoming { background:rgba(0,116,217,.13); color:var(--navy-accent); }
.page-payments .pe-status.overdue { background:rgba(234,67,53,.13); color:var(--danger); }
.page-payments .pe-status.pending { background:rgba(251,188,4,.18); color:#c98a00; }
.page-payments .pe-status.off { background:var(--bg-primary); color:var(--text-muted); }
.page-payments .pe-status-xs { padding:2px 8px; font-size:10.5px; }
.page-payments .pe-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.page-payments .pe-pay-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; background:transparent; transition:all .15s; }
.page-payments .pe-pay-btn.btn-mark-paid { border:1px solid var(--success); color:var(--success); }
.page-payments .pe-pay-btn.btn-mark-paid:hover { background:var(--success); color:#fff; }
.page-payments .pe-pay-btn.btn-pay-now { border:1px solid var(--danger); color:var(--danger); }
.page-payments .pe-pay-btn.btn-pay-now:hover { background:var(--danger); color:#fff; }
.page-payments .pe-paid-tag { display:inline-flex; align-items:center; gap:5px; color:var(--success); font-weight:600; font-size:12px; }
.page-payments .pe-icon-row { display:flex; gap:3px; flex-wrap:wrap; }

/* recurring + quick add split */
.page-payments .pe-split { display:grid; grid-template-columns:1.6fr 1fr; gap:20px; }
.page-payments .pe-recurring-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.page-payments .pe-recurring-card { background:var(--bg-primary); border:1px solid var(--border-color); border-radius:12px; padding:12px; transition:transform .15s, box-shadow .15s; }
.page-payments .pe-recurring-card:hover { transform:translateY(-2px); box-shadow:0 6px 14px var(--shadow-color); }
.page-payments .pe-recurring-card.paused { opacity:.6; }
.page-payments .pe-rc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.page-payments .pe-rc-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.page-payments .pe-rc-name { font-weight:700; font-size:13px; color:var(--text-primary); }
.page-payments .pe-rc-amt { font-size:14px; font-weight:700; color:var(--navy-accent); margin-top:2px; }
.page-payments .pe-rc-freq { font-size:11px; font-weight:500; color:var(--text-muted); }
.page-payments .pe-rc-foot { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:8px; flex-wrap:wrap; }
.page-payments .pe-rc-due { font-size:11px; color:var(--text-muted); }
.page-payments .pe-rc-actions { display:flex; gap:4px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border-color); }

.page-payments .pe-quickadd { display:flex; flex-direction:column; gap:12px; }
.page-payments .pe-quickadd-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.page-payments .pe-quickadd .form-group { margin:0; }
.page-payments .pe-quickadd-btn { width:100%; justify-content:center; margin-top:4px; }

/* budget tracking */
.page-payments .pe-budget-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.page-payments .pe-budget-row { background:var(--bg-primary); border:1px solid var(--border-color); border-radius:10px; padding:12px 14px; }
.page-payments .pe-budget-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.page-payments .pe-budget-name { font-weight:600; font-size:13px; color:var(--text-primary); display:flex; align-items:center; gap:7px; }
.page-payments .pe-budget-nums { font-size:13px; font-weight:700; color:var(--text-primary); white-space:nowrap; }
.page-payments .pe-progress { height:8px; border-radius:5px; background:var(--border-color); overflow:hidden; }
.page-payments .pe-progress-fill { height:100%; border-radius:5px; background:var(--navy-accent); transition:width .4s ease; }
.page-payments .pe-progress-fill.warn { background:var(--warning); }
.page-payments .pe-progress-fill.over { background:var(--danger); }
.page-payments .pe-budget-foot { font-size:11.5px; margin-top:6px; font-weight:500; }
/* budget modal — overall hero + per-category cards + live totals */
.page-payments .pe-bg-hero { display:flex; gap:14px; align-items:center; background:linear-gradient(135deg,var(--navy-primary) 0%,var(--navy-light) 100%); border-radius:14px; padding:16px 18px; margin-bottom:18px; }
.page-payments .pe-bg-hero-icon { width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center; font-size:21px; flex:0 0 auto; }
.page-payments .pe-bg-hero-body { flex:1; min-width:0; }
.page-payments .pe-bg-hero-body label { display:block; color:rgba(255,255,255,.82); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:7px; }
.page-payments .pe-bg-hint { display:block; color:rgba(255,255,255,.72); font-size:11px; margin-top:6px; }
.page-payments .pe-bg-hint i { margin-right:3px; }
.page-payments .pe-bg-input-wrap { position:relative; display:flex; align-items:center; }
.page-payments .pe-bg-currency { position:absolute; left:11px; font-weight:700; color:var(--text-muted); font-size:13px; pointer-events:none; z-index:1; }
.page-payments .pe-bg-input-wrap input { padding-left:24px !important; }
.page-payments .pe-bg-hero-input { width:100%; }
.page-payments .pe-bg-hero-input input { background:#fff; border:none; font-weight:800; font-size:17px; width:100%; color:var(--navy-primary); border-radius:10px; padding-top:11px; padding-bottom:11px; }
.page-payments .pe-bg-hero-input .pe-bg-currency { color:var(--navy-primary); font-size:15px; }

.page-payments .pe-bg-section-head { display:flex; align-items:center; justify-content:space-between; margin:4px 2px 11px; font-size:13px; font-weight:700; color:var(--text-primary); }
.page-payments .pe-bg-section-head > span:first-child i { color:var(--navy-accent); margin-right:6px; }
.page-payments .pe-bg-cat-sum { font-size:12px; font-weight:600; color:var(--text-muted); }
.page-payments .pe-bg-cat-sum strong { color:var(--navy-accent); font-size:13.5px; margin-left:3px; }

.page-payments .pe-budget-edit-list { display:flex; flex-direction:column; gap:9px; margin:0 0 16px; max-height:330px; overflow-y:auto; padding-right:4px; }
.page-payments .pe-bg-cat-row { display:flex; align-items:center; gap:12px; background:var(--bg-primary); border:1px solid var(--border-color); border-radius:11px; padding:10px 12px; transition:border-color .15s, box-shadow .15s; }
.page-payments .pe-bg-cat-row:hover { border-color:var(--navy-accent); box-shadow:0 2px 8px var(--shadow-color); }
.page-payments .pe-bg-cat-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 auto; }
.page-payments .pe-bg-cat-info { flex:1; min-width:0; }
.page-payments .pe-bg-cat-name { font-size:13.5px; font-weight:700; color:var(--text-primary); }
.page-payments .pe-bg-cat-used { font-size:11px; color:var(--text-muted); margin-top:1px; }
.page-payments .pe-bg-cat-row .pe-bg-input-wrap { flex:0 0 auto; }
.page-payments .pe-bg-cat-row .pe-bg-input-wrap input { width:118px; text-align:right; }

.page-payments .pe-bg-effective { display:flex; align-items:center; gap:8px; background:rgba(0,116,217,.08); border:1px solid rgba(0,116,217,.28); border-radius:11px; padding:12px 15px; font-size:13px; color:var(--text-primary); margin-bottom:6px; flex-wrap:wrap; }
.page-payments .pe-bg-effective > i { color:var(--navy-accent); font-size:15px; }
.page-payments .pe-bg-effective strong { color:var(--navy-accent); font-size:16px; }
.page-payments .pe-bg-eff-note { font-size:11.5px; }

/* aside: calendar */
.page-payments .pe-cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.page-payments .pe-cal-head strong { font-size:15px; color:var(--text-primary); }
.page-payments .pe-cal-nav { display:flex; gap:4px; }
.page-payments .pe-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.page-payments .pe-cal-dow { margin-bottom:4px; }
.page-payments .pe-cal-dow span { text-align:center; font-size:10.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; padding:4px 0; }
.page-payments .pe-cal-day { position:relative; aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:8px; cursor:default; font-size:12.5px; color:var(--text-secondary); transition:background .12s; }
.page-payments .pe-cal-day.has { cursor:pointer; font-weight:600; color:var(--text-primary); }
.page-payments .pe-cal-day.has:hover { background:var(--bg-primary); }
.page-payments .pe-cal-day.empty { cursor:default; }
.page-payments .pe-cal-day.today { background:var(--navy-accent); color:#fff; font-weight:700; }
.page-payments .pe-cal-day.today .pe-cal-num { color:#fff; }
.page-payments .pe-cal-day.sel { outline:2px solid var(--navy-accent); outline-offset:-2px; }
.page-payments .pe-cal-dots { display:flex; gap:2px; height:7px; align-items:center; margin-top:1px; }
.page-payments .pe-cal-dots i { font-size:5px; }
.page-payments .pe-cal-legend { display:flex; justify-content:center; gap:14px; margin-top:12px; font-size:11px; color:var(--text-muted); }
.page-payments .pe-dot-paid { color:var(--success); }
.page-payments .pe-dot-upcoming { color:var(--navy-accent); }
.page-payments .pe-dot-overdue { color:var(--danger); }

/* aside: upcoming */
.page-payments .pe-upcoming-list { display:flex; flex-direction:column; gap:2px; }
.page-payments .pe-upcoming-row { display:flex; align-items:center; gap:10px; padding:9px 6px; border-bottom:1px solid var(--border-light); cursor:pointer; border-radius:8px; transition:background .12s; }
.page-payments .pe-upcoming-row:hover { background:var(--bg-primary); }
.page-payments .pe-upcoming-row:last-child { border-bottom:none; }
.page-payments .pe-up-date { font-size:11px; font-weight:700; color:var(--navy-accent); min-width:48px; }
.page-payments .pe-up-name { flex:1; font-size:13px; font-weight:600; color:var(--text-primary); }
.page-payments .pe-up-name small { display:block; font-size:10.5px; color:var(--text-muted); font-weight:500; }
.page-payments .pe-up-amt { font-size:13px; font-weight:700; color:var(--text-primary); }

/* aside: notifications */
.page-payments .pe-notif-list { display:flex; flex-direction:column; gap:4px; max-height:380px; overflow-y:auto; }
.page-payments .pe-notif-item { display:flex; gap:10px; padding:9px 4px; border-bottom:1px solid var(--border-light); }
.page-payments .pe-notif-item:last-child { border-bottom:none; }
.page-payments .pe-notif-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13px; flex:0 0 auto; }
.page-payments .pe-notif-icon.amber { background:rgba(251,188,4,.18); color:#c98a00; }
.page-payments .pe-notif-icon.red { background:rgba(234,67,53,.13); color:var(--danger); }
.page-payments .pe-notif-icon.green { background:rgba(52,168,83,.14); color:var(--success); }
.page-payments .pe-notif-icon.blue { background:rgba(0,116,217,.13); color:var(--navy-accent); }
.page-payments .pe-notif-title { font-size:12.5px; font-weight:600; color:var(--text-primary); line-height:1.3; }
.page-payments .pe-notif-sub { font-size:11px; color:var(--text-muted); margin-top:1px; }

/* details modal */
.page-payments .pe-paid-target { font-size:14px; color:var(--text-secondary); margin-bottom:14px; padding:10px 12px; background:var(--bg-primary); border-radius:8px; }
.pe-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
.pe-detail-row { display:flex; flex-direction:column; gap:2px; border-bottom:1px solid var(--border-light); padding-bottom:8px; }
.pe-detail-k { font-size:11px; text-transform:uppercase; color:var(--text-muted); font-weight:600; letter-spacing:.3px; }
.pe-detail-v { font-size:14px; color:var(--text-primary); font-weight:500; }
.pe-detail-receipt { margin-top:16px; }

/* empty states */
.page-payments .pe-empty { text-align:center; color:var(--text-muted); padding:30px 10px; font-size:13px; grid-column:1/-1; }
.page-payments .pe-empty i { display:block; font-size:26px; margin-bottom:8px; opacity:.5; }
.page-payments .pe-empty.sm { padding:18px 10px; }
.page-payments .pe-empty.sm i { font-size:20px; }

.modal.modal-sm { max-width:520px; }

/* responsive */
@media (max-width:1200px) { .page-payments .pe-kpi-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:1100px) {
    .page-payments .pe-layout { flex-direction:column; }
    .page-payments .pe-aside { width:100%; flex:1 1 auto; }
    .page-payments .pe-split { grid-template-columns:1fr; }
}
@media (max-width:760px) {
    .page-payments .pe-kpi-grid { grid-template-columns:repeat(2,1fr); }
    .page-payments .pe-topbar-actions { width:100%; }
    .pe-detail-grid { grid-template-columns:1fr; }
    .page-payments .pe-quickadd-row { grid-template-columns:1fr; }
}
@media (max-width:480px) { .page-payments .pe-kpi-grid { grid-template-columns:1fr; } }

/* ============================================================
   To-Do page polish — presentation only, daily-checklist logic unchanged
   ============================================================ */
.page-todo .todo-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-todo .todo-head-titles h1 { margin:0; }
.page-todo .todo-head-sub { margin:4px 0 0; color:#6b7787; font-size:13px; font-weight:400; }
/* compact KPI cards w/ gradient tile — same look as dashboard.php */
.page-todo .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(178px,1fr)); gap:12px; }
.page-todo .kpi-card { padding:15px 14px 13px; border-left:none; }
.page-todo .kpi-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
.page-todo .erp-kpi-tile { width:42px; height:42px; font-size:17px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; }
.page-todo .kpi-card .kpi-value { font-size:20px; margin:2px 0; }
.page-todo .kpi-card .kpi-label { font-size:11.5px; }
.page-todo .kpi-card .kpi-trend { font-size:10.5px; margin-top:3px; }
.page-todo .kpi-card .todo-prog-bar { width:100%; margin-top:8px; }
.page-todo .kpi-tone-green  .erp-kpi-tile { background:linear-gradient(135deg,#34a853,#2d9148); }
.page-todo .kpi-tone-amber  .erp-kpi-tile { background:linear-gradient(135deg,#FF851B,#d96a00); }
.page-todo .kpi-tone-blue   .erp-kpi-tile { background:linear-gradient(135deg,var(--navy-accent),#0056a8); }
.page-todo .kpi-tone-navy   .erp-kpi-tile { background:linear-gradient(135deg,var(--navy-primary),var(--navy-accent)); }
.page-todo .kpi-tone-purple .erp-kpi-tile { background:linear-gradient(135deg,#B10DC9,#7d0a90); }
/* light card tints per tone */
.page-todo .kpi-tone-green  { background:#eef9f1; }
.page-todo .kpi-tone-amber  { background:#fff6ec; }
.page-todo .kpi-tone-blue   { background:#eef5fd; }
.page-todo .kpi-tone-navy   { background:#eef1f6; }
.page-todo .kpi-tone-purple { background:#f8eefc; }
.todo-prog-bar.bar-green span { background:#34a853; }
.todo-prog-bar.bar-amber span { background:#f59e0b; }
.todo-prog-bar.bar-blue  span { background:#0074D9; }
.todo-prog-bar.bar-red   span { background:#ea4335; }
.page-todo .data-section { border-radius:12px; }
.page-todo .todo-summary { gap:14px; }