/*
  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: #0d0d0d;
    --bg-secondary: #121212;
    --bg-card: #171717;
    --text-primary: #f2f2f2;
    --text-secondary: #c9c9c9;
    --text-muted: #8f8f8f;
    --border-color: #2a2a2a;
    --border-light: #222222;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-hover: rgba(0, 0, 0, 0.6);
    --input-bg: #1a1a1a;
    --input-border: #333333;
    --table-hover: #1e1e1e;
    --skeleton-base: #1a1a1a;
    --skeleton-shine: #262626;

    --navy-primary: #0a0a0a;
    --navy-dark: #050505;
    --navy-light: #1f1f1f;
}

/* ===== 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: var(--navy-primary);
    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.78);
    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;
}

/* no hover effect — bg/color/slide stay put (active item keeps its amber) */
.sidebar-menu a:hover:not(.active),
.sidebar-menu button:hover:not(.active) {
    background: transparent;
    color: rgba(255,255,255,0.9);
    transform: none;
}

.sidebar-menu a.active,
.sidebar-menu button.active {
    background: linear-gradient(135deg, #f5a623 0%, #ef8e1b 100%);
    color: #1f2937;
    border-left: 4px solid #d97d0f;
    padding-left: 12px; /* keep icon aligned with non-active items (16px default - 4px border) */
}

/* active item keeps the exact same amber on hover — no fade/wash */
.sidebar-menu a.active:hover,
.sidebar-menu button.active:hover {
    background: linear-gradient(135deg, #f5a623 0%, #ef8e1b 100%);
    color: #1f2937;
    transform: none;
}

.sidebar-menu a.active i,
.sidebar-menu button.active i {
    color: #1f2937;
    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);
}

/* no icon pop on hover */
.sidebar-menu a:hover:not(.active) i,
.sidebar-menu button:hover:not(.active) i { transform: none; }

/* ===== 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: none;
}

/* 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; }
/* import_status chip — set on CSV import (new = first import of asin+account, reorder = re-imported) */
.imp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 12px; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .2px; border: 1px solid transparent; white-space: nowrap; }
.imp-badge.imp-new     { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.imp-badge.imp-reorder { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.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%; }
}

/* Client account detail + add/edit popups — 80% wide; unified editable Overview */
#detailModal .modal, #accountModal .modal { width: 80%; max-width: 80%; }
@media (max-width: 768px) {
    #detailModal .modal, #accountModal .modal { width: 95%; max-width: 95%; }
}
.detail-sub { font-weight: 400; color: #6b7280; font-size: 13px; }
/* shared form bits — add form + editable overview */
.field-hint { color: #9ca3af; font-weight: 400; font-size: 12px; }
.pwd-field { position: relative; }
.pwd-field input { padding-right: 40px; }
.pwd-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #666; cursor: pointer; padding: 6px; }
/* overview edit/view bar + read-only value box */
.ov-edit-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 8px 12px; background: #f0f4fa; border-left: 3px solid var(--navy-accent, #0074D9); border-radius: 0 4px 4px 0; }
.ov-edit-bar .ov-bar-label { font-weight: 600; font-size: 13px; color: var(--navy-primary, #001f3f); display: flex; align-items: center; gap: 8px; }
.ov-edit-bar .ov-bar-actions { display: flex; gap: 8px; }
.ov-ro-val { background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 6px; padding: 9px 11px; color: #4b5563; font-size: 13px; min-height: 20px; word-break: break-word; }
.ov-created-note { color: #9ca3af; font-size: 12px; display: flex; align-items: center; gap: 6px; }

/* 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;
}

/* no hover effect on submenu items (active item keeps its highlight) */
.sidebar-submenu a:hover:not(.active) {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border-left-color: transparent;
    padding-left: 48px;
}

/* dropdown active item — light orange (same hue as parent, lighter) */
.sidebar-submenu a.active {
    background: rgba(245, 166, 35, 0.2);
    color: #fff;
    border-left-color: #f5a623;
    font-weight: 600;
}

/* don't fade on hover — keep (slightly stronger) light orange, stay anchored */
.sidebar-submenu a.active:hover {
    background: rgba(245, 166, 35, 0.3);
    color: #fff;
    border-left-color: #f5a623;
    padding-left: 48px;
}

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

.submenu-toggle.active {
    background: linear-gradient(135deg, #f5a623 0%, #ef8e1b 100%);
    color: #1f2937;
    border-left: 4px solid #d97d0f;
    padding-left: 12px; /* keep icon aligned with non-active items (16px - 4px border) */
}
/* active parent's chevron + icon stay dark on the amber fill (beats .submenu-toggle.open white arrow) */
.submenu-toggle.active .submenu-arrow,
.submenu-toggle.active i {
    color: #1f2937;
}

/* dark mode — highlighted (active) sidebar button keeps BLACK text on the amber fill for max contrast */
body.dark-mode .sidebar-menu a.active,
body.dark-mode .sidebar-menu a.active span,
body.dark-mode .sidebar-menu a.active i,
body.dark-mode .submenu-toggle.active,
body.dark-mode .submenu-toggle.active span,
body.dark-mode .submenu-toggle.active i,
body.dark-mode .submenu-toggle.active .submenu-arrow {
    color: #000 !important;
}

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

    .sidebar-submenu a:hover:not(.active) {
        padding-left: 40px;
    }
}

/* ===== 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;
}

/* no hover effect — expanded */
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) a:hover:not(.active),
.sidebar:not(.collapsed) .sidebar-menu li:not(.sidebar-group-header) button:hover:not(.active) {
    transform: none;
    background: transparent;
}
.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: 0.85;
}

/* 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: #232323;
    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: #232323;
    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: #232323;
    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: #0d0d0d; }

/* 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; }
.rs-season-range.rs-season-off { color: #5f6c80; background: #eef1f6; }
.rs-season-range.rs-season-now { color: #166534; background: #bbf7d0; font-weight: 700; }

/* 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; }
/* saved shipments — list/detail redesign */
.ss-kpi-grid { display: grid; margin: 16px 0 6px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ss-kpi-grid .kpi-card.erp-kpi-card { border-left: none; padding: 18px 16px 16px; }
.ss-kpi-grid .kpi-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.ss-kpi-grid .erp-kpi-tile { width: 50px; height: 50px; 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%); }
.ss-kpi-grid .kpi-value { font-size: 22px; margin: 8px 0 2px; white-space: nowrap; }
.ss-kpi-grid .kpi-label { font-size: 11.5px; }
.ss-kpi-grid .kpi-trend { font-size: 10.5px; margin-top: 5px; }
.ss-kpi-grid .erp-kpi--shipments .erp-kpi-tile { background: linear-gradient(135deg, #FF851B 0%, #d96a00 100%); }
.ss-kpi-grid .erp-kpi--products  .erp-kpi-tile { background: linear-gradient(135deg, #B10DC9 0%, #7d0a90 100%); }
.ss-kpi-grid .erp-kpi--orders    .erp-kpi-tile { background: linear-gradient(135deg, var(--navy-accent) 0%, #0056a8 100%); }
.ss-kpi-grid .erp-kpi--cases     .erp-kpi-tile { background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-accent) 100%); }
.ss-kpi-grid .erp-kpi--lowstock  .erp-kpi-tile { background: linear-gradient(135deg, #ea4335 0%, #c5221f 100%); }
.ss-pipeline { margin: 8px 0 16px; flex-wrap: nowrap; }
.ss-pipeline .chevron-stage { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-top: 14px; padding-bottom: 14px; }
.ss-result-count { font-size: 12px; font-weight: 600; color: #8694a6; margin-left: 8px; }
.ss-list-section .section-header { align-items: center; }
.ship-search { position: relative; }
.ship-search .ship-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #9fb0c8; font-size: 13px; pointer-events: none; }
.ship-search input { padding-left: 32px; }
.sd-kpi-grid { margin: 14px 0 18px; }
@keyframes ssCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#shipGrid .ship-card { animation: ssCardIn .34s ease backwards; animation-delay: calc(min(var(--d, 0), 14) * 35ms); }
.ship-card.st-reconciled .ship-code-ic { background: #ecfdf5; color: #16a34a; }
.ship-card.st-discrepancy .ship-code-ic { background: #fef2f2; color: #dc2626; }
.ship-card.st-pending .ship-code-ic { background: #fff7ed; color: #d97706; }
.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); }
/* reorder — product image column + variation letter badge under the image ("A" from "Variation A") */
#reorderTable .ro-img-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#reorderTable .ro-var-badge { display: inline-flex; align-items: center; gap: 3px; background: #ede9fe; color: #5b21b6; border-radius: 5px; padding: 2px 7px; font-size: 11px; font-weight: 700; letter-spacing: .3px; box-shadow: inset 0 0 0 1px rgba(91,33,182,.18); white-space: nowrap; }
#reorderTable .ro-var-badge i { font-size: 9px; }
/* merged chip columns — keep editable inputs compact so 2-4 stacked rows stay tidy */
#reorderTable .cell-stack { grid-auto-rows: minmax(24px, auto); }
#reorderTable .cell-stack .cell-num-input { width: 70px; }
/* total-orders count chip */
#reorderTable .ro-count-chip { display: inline-block; background: #e0e7ff; color: #1e3a8a; border-radius: 11px; padding: 2px 11px; font-size: 13px; font-weight: 700; min-width: 24px; text-align: center; box-shadow: inset 0 0 0 1px rgba(30,58,138,.15); }
/* reorder worklist — status move dropdown + readonly badge (pending/ordered/done) */
#reorderTable .ro-rst-sel { height: 28px; border-radius: 6px; border: 1px solid #cdd6e8; font-size: 12px; font-weight: 700; padding: 2px 6px; cursor: pointer; text-transform: capitalize; max-width: 116px; }
#reorderTable .ro-rst-sel:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,116,217,.14); }
#reorderTable .ro-rst { display: inline-block; border-radius: 10px; padding: 2px 9px; font-size: 11px; font-weight: 700; }
#reorderTable .ro-rst-pending { background: #fef3c7; color: #92400e; border-color: #fde68a; }
#reorderTable .ro-rst-ordered { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
#reorderTable .ro-rst-done    { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
/* reorder worklist — multi-ASIN paste box + view filter */
.ro-search-ta { resize: vertical; min-height: 40px; max-height: 96px; line-height: 1.4; padding: 9px 11px; font-family: inherit; }
.ro-view-filter { display: flex; align-items: center; gap: 8px; }
.ro-view-filter label { font-size: 12px; color: #5f6c80; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.ro-view-filter select { height: 34px; min-width: 210px; }
#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: 12px 14px; width: 240px; 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; }
.pack-box-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 118px; border: 2px dashed #9fb3d1; border-radius: 8px; background: linear-gradient(180deg,#f7faff,#eef4ff); color: #0074D9; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .18s ease; }
.pack-box-add:hover { border-color: #0074D9; background: linear-gradient(180deg,#eef5ff,#e3eeff); color: #001f3f; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,116,217,.18); }
.pack-box-add .pba-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #0074D9; color: #fff; font-size: 18px; box-shadow: 0 2px 6px rgba(0,116,217,.3); transition: background .18s, transform .18s; }
.pack-box-add:hover .pba-ic { background: #001f3f; transform: scale(1.08); }
/* 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;
}

/* seasonal "ends this month" urgency chip — base .season-now-chip styles live in seasonal_products.php */
.season-now-chip.ending { background: #fdecea; color: #b42318; border: 1px solid #f3b4ab; }

/* ===== 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; }

/* ===== Pricing Requests — SAME row UI as the price-change log (lightweight static table) ===== */
.pricing-req-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pricing-req-table thead th { background: #001f3f; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 9px 10px; text-align: left; white-space: nowrap; }
.pricing-req-table thead th.dt-center { text-align: center; }
.pricing-req-table td { padding: 9px 10px; vertical-align: middle; border-top: 1px solid #eef0f5; }
.pricing-req-table td.dt-center { text-align: center; }
.pricing-req-table .preq-row:hover td { background: #f7f9fc; }
.pricing-req-table .preq-row.preq-open td { border-top: 2px solid #ffe3c2; } /* pending tint */
.preq-status-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.preq-approve { color: #16a34a; }
.preq-reject { color: #dc2626; }
/* recipients sub-row under each request */
.pricing-req-table .preq-sub td { border-top: none; padding-top: 0; padding-bottom: 10px; }
.preq-sub-inner { font-size: 12px; color: #667085; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; background: #fbfcfe; border: 1px solid #eef0f5; border-radius: 4px; }
.preq-sub-inner > i { color: var(--navy-accent); }
.preq-rec { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #eef0f5; border-radius: 10px; padding: 2px 8px; }
.preq-rec.done { background: #e6f4ea; border-color: #cde8d5; color: #137333; }
.preq-rec i { font-size: 11px; }
.preq-rec.done i { color: #1e7d34; }
.preq-rec:not(.done) i { color: #b58900; }
.preq-note { color: #555; background: #fffaf0; border-left: 3px solid #ff851b; padding: 3px 8px; border-radius: 3px; }
.preq-note i { color: #ff851b; margin-right: 3px; }
.preq-sub-sep { color: #c2c8d2; }

/* ===== 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: #232323;
    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, #222222); }
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)
   ============================================================ */

/* 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); }
}

/* ============================================================
   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; }
/* 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; }

/* =========================================================================
   Roles & Permissions  (body.page-roles)
   Tab 1 = User Access quick-assign wizard (.rp-*)
   Tab 2 = Role Templates editor (migrated out of the old inline <style>)
   Level colors: none #9aa5b1 · view #0074D9 · add #17a2b8 · edit #fbbc04 · delete #FF851B · full #34a853
   ========================================================================= */

/* ---- top-level page tabs ---- */
.page-roles .rp-tabs { display:flex; gap:6px; border-bottom:2px solid var(--border-color); margin:2px 0 22px; flex-wrap:wrap; }
.page-roles .rp-tab { padding:13px 22px; border:none; background:transparent; cursor:pointer; font-size:14.5px; font-weight:600; color:var(--text-muted); border-bottom:3px solid transparent; margin-bottom:-2px; transition:all .2s; display:inline-flex; align-items:center; gap:9px; border-radius:6px 6px 0 0; }
.page-roles .rp-tab:hover { color:var(--navy-primary); background:rgba(0,31,63,.04); }
.page-roles .rp-tab.active { color:var(--navy-accent); border-bottom-color:var(--navy-accent); }
.page-roles .rp-tab i { font-size:15px; }
.page-roles .rp-pane { display:none; animation:rpFade .25s ease; }
.page-roles .rp-pane.active { display:block; }
@keyframes rpFade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* ---- stepper ---- */
.page-roles .rp-stepper { display:flex; background:#fff; border:1px solid var(--border-color); border-radius:6px; padding:14px 8px; margin-bottom:18px; overflow-x:auto; box-shadow:0 2px 4px var(--shadow-color); }
.page-roles .rp-step { flex:1 1 0; display:flex; align-items:center; gap:11px; padding:4px 16px; position:relative; min-width:172px; }
.page-roles .rp-step:not(:last-child)::after { content:""; position:absolute; right:0; top:50%; width:1px; height:32px; background:var(--border-color); transform:translateY(-50%); }
.page-roles .rp-step-num { width:34px; height:34px; border-radius:50%; background:#eef1f6; color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; transition:all .25s; }
.page-roles .rp-step.active .rp-step-num { background:var(--navy-accent); color:#fff; box-shadow:0 0 0 4px rgba(0,116,217,.15); }
.page-roles .rp-step.done .rp-step-num { background:var(--success); color:#fff; }
.page-roles .rp-step-txt { display:flex; flex-direction:column; line-height:1.32; }
.page-roles .rp-step-txt b { font-size:13.5px; color:var(--text-primary); font-weight:600; }
.page-roles .rp-step-txt span { font-size:11.5px; color:var(--text-muted); }
.page-roles .rp-step.active .rp-step-txt b { color:var(--navy-accent); }

/* ---- 3-column layout ---- */
.page-roles .rp-layout { display:grid; grid-template-columns:298px minmax(0,1fr) 318px; gap:18px; align-items:start; }
.page-roles .rp-col { min-width:0; }
.page-roles .rp-col-summary { position:sticky; top:14px; }

/* ---- user list (left) ---- */
.page-roles .rp-userlist { background:#fff; border:1px solid var(--border-color); border-radius:6px; padding:14px; box-shadow:0 2px 4px var(--shadow-color); }
.page-roles .rp-list-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.page-roles .rp-list-head h3 { font-size:14px; color:var(--navy-primary); margin:0; display:flex; align-items:center; gap:8px; }
.page-roles .rp-search { position:relative; margin-bottom:12px; }
.page-roles .rp-search input { width:100%; padding:10px 12px 10px 34px; border:1px solid var(--input-border); border-radius:4px; font-size:13.5px; color:var(--text-primary); }
.page-roles .rp-search input:focus { outline:none; border-color:var(--navy-accent); box-shadow:0 0 0 2px rgba(0,116,217,.12); }
.page-roles .rp-search i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9aa5b1; pointer-events:none; }
.page-roles .rp-users { max-height:580px; overflow-y:auto; margin:0 -4px; padding:0 4px; }
.page-roles .rp-user-card { display:flex; align-items:center; gap:11px; padding:10px; border:1px solid transparent; border-radius:6px; cursor:pointer; transition:all .15s; margin-bottom:4px; }
.page-roles .rp-user-card:hover { background:#f5f8fc; }
.page-roles .rp-user-card.active { background:rgba(0,116,217,.08); border-color:var(--navy-accent); }
.page-roles .rp-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13.5px; color:#fff; flex-shrink:0; letter-spacing:.4px; }
.page-roles .rp-avatar.c0 { background:#0074D9; } .page-roles .rp-avatar.c1 { background:#2ECC40; }
.page-roles .rp-avatar.c2 { background:#B10DC9; } .page-roles .rp-avatar.c3 { background:#FF851B; }
.page-roles .rp-avatar.c4 { background:#001f3f; } .page-roles .rp-avatar.c5 { background:#39CCCC; }
.page-roles .rp-avatar.c6 { background:#85144b; } .page-roles .rp-avatar.c7 { background:#3D9970; }
.page-roles .rp-avatar.sm { width:30px; height:30px; font-size:11px; }
.page-roles .rp-avatar.lg { width:52px; height:52px; font-size:18px; }
.page-roles .rp-user-info { min-width:0; flex:1; }
.page-roles .rp-user-info b { display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.page-roles .rp-user-info span { font-size:12px; color:var(--text-muted); }
/* per-user override marker — user's access deviates from the role template */
.page-roles .rp-custom-badge { flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:#8a5a00; background:#fff3cd; border:1px solid #ffe08a; border-radius:10px; padding:1px 7px; }
.page-roles .rp-custom-badge i { font-size:9px; }
body.dark-mode.page-roles .rp-custom-badge { color:#ffd166; background:#3a2f10; border-color:#5a4715; }
.page-roles .rp-user-card .rp-chev { color:#c2cad6; font-size:13px; }
.page-roles .rp-user-card.active .rp-chev { color:var(--navy-accent); }
.page-roles .rp-list-foot { margin-top:10px; padding-top:10px; border-top:1px solid var(--border-light); font-size:12px; color:var(--text-muted); text-align:center; }

/* ---- config column (center) ---- */
.page-roles .rp-card { background:#fff; border:1px solid var(--border-color); border-radius:6px; box-shadow:0 2px 4px var(--shadow-color); margin-bottom:16px; }
.page-roles .rp-card-pad { padding:18px 20px; }
.page-roles .rp-section-title { font-size:13.5px; font-weight:700; color:var(--navy-primary); margin:0 0 4px; display:flex; align-items:center; gap:9px; }
.page-roles .rp-section-sub { font-size:12px; color:var(--text-muted); margin:0 0 14px; }
.page-roles .rp-seluser { display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--border-light); }
.page-roles .rp-seluser .rp-su-meta { flex:1; min-width:0; }
.page-roles .rp-seluser .rp-su-meta b { font-size:16px; color:var(--text-primary); display:block; }
.page-roles .rp-seluser .rp-su-meta span { font-size:12.5px; color:var(--text-muted); }
/* selected user header pinned — stays visible the whole time perms are being set */
.page-roles .rp-seluser-card { position:sticky; top:14px; z-index:20; box-shadow:0 6px 16px rgba(0,31,63,.14); }
.page-roles .rp-su-stat { text-align:right; font-size:12px; color:var(--text-muted); line-height:1.7; white-space:nowrap; }
.page-roles .rp-su-stat .rp-stat-label { color:#9aa5b1; margin-right:6px; }

/* template / role picker row */
.page-roles .rp-template-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.page-roles .rp-template-row .rp-tpl-field { flex:1 1 280px; min-width:220px; }
.page-roles .rp-template-row label { display:block; font-size:12.5px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
.page-roles .rp-or { color:#c2cad6; font-weight:700; font-size:12px; padding:0 2px; align-self:flex-end; margin-bottom:10px; }

/* ---- account cards ---- */
.page-roles .rp-acc-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.page-roles .rp-acc-level { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-secondary); }
.page-roles .rp-acc-level select { padding:7px 10px; border:1px solid var(--input-border); border-radius:4px; font-size:12.5px; }
.page-roles .rp-all-toggle { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-primary); font-weight:600; padding:8px 12px; background:#f5f8fc; border:1px solid var(--border-color); border-radius:6px; }
.page-roles .rp-accounts { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.page-roles .rp-acc-card { position:relative; border:1.5px solid var(--border-color); border-radius:6px; padding:13px 13px 12px 38px; cursor:pointer; transition:all .15s; background:#fff; }
.page-roles .rp-acc-card:hover { border-color:var(--navy-accent); background:#f8fbff; }
.page-roles .rp-acc-card.checked { border-color:var(--navy-accent); background:rgba(0,116,217,.06); }
.page-roles .rp-acc-card::before { content:""; position:absolute; left:12px; top:14px; width:18px; height:18px; border:2px solid #cbd5e1; border-radius:4px; background:#fff; transition:all .15s; }
.page-roles .rp-acc-card.checked::before { background:var(--navy-accent); border-color:var(--navy-accent); }
.page-roles .rp-acc-card.checked::after { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:15px; top:14px; font-size:11px; color:#fff; }
.page-roles .rp-acc-card b { display:block; font-size:13px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.page-roles .rp-acc-card small { font-size:11px; color:var(--text-muted); display:block; margin-top:2px; }
.page-roles .rp-acc-card .rp-acc-state { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin-top:6px; display:inline-block; }
.page-roles .rp-acc-card .rp-acc-state.on { color:var(--success); }
.page-roles .rp-acc-card .rp-acc-state.off { color:#9aa5b1; }
.page-roles .rp-acc-card.owned { cursor:not-allowed; opacity:.92; border-style:dashed; }
.page-roles .rp-acc-card.owned::before { background:#9aa5b1; border-color:#9aa5b1; }
.page-roles .rp-acc-card.owned::after { content:"\f023"; font-family:"Font Awesome 6 Free"; font-weight:900; color:#fff; }
.page-roles .rp-acc-disabled { opacity:.5; pointer-events:none; }
.page-roles .rp-acc-card .rp-acc-lvl { margin-top:7px; padding:5px 9px; border:1px solid var(--input-border); border-radius:4px; font-size:11.5px; background:#fff; color:var(--text-primary); cursor:pointer; }
.page-roles .rp-allacc-note { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-primary); background:#eef5ff; border:1px solid var(--navy-accent); border-radius:6px; padding:12px 14px; }
.page-roles .rp-allacc-note i { color:var(--navy-accent); }
.page-roles .rp-empty-sub { font-size:12px; color:var(--text-muted); margin-top:4px; }
.page-roles .rp-empty-sub a, .page-roles .rp-section-sub a { color:var(--navy-accent); font-weight:600; text-decoration:none; }
.page-roles .rp-empty-sub a:hover, .page-roles .rp-section-sub a:hover { text-decoration:underline; }

/* ---- permission level matrix ---- */
.page-roles .rp-matrix-wrap { overflow-x:auto; border:1px solid var(--border-light); border-radius:6px; }
.page-roles table.rp-matrix { width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
.page-roles table.rp-matrix thead th { background:var(--navy-primary); color:#fff; font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; padding:11px 8px; text-align:center; white-space:nowrap; }
.page-roles table.rp-matrix thead th:first-child { text-align:left; padding-left:16px; }
.page-roles table.rp-matrix tbody td { padding:9px 8px; text-align:center; border-bottom:1px solid var(--border-light); vertical-align:middle; }
.page-roles table.rp-matrix tbody tr:hover { background:#f8fbff; }
.page-roles table.rp-matrix tbody tr.rp-custom { background:rgba(251,188,4,.07); }
.page-roles .rp-mod { display:flex; align-items:center; gap:10px; text-align:left; padding-left:8px; }
.page-roles .rp-mod i { width:18px; text-align:center; color:var(--navy-accent); }
.page-roles .rp-mod b { font-size:13px; color:var(--text-primary); font-weight:600; }
.page-roles .rp-mod .rp-custom-tag { font-size:9.5px; font-weight:700; text-transform:uppercase; color:#b8860b; background:rgba(251,188,4,.18); padding:2px 6px; border-radius:10px; margin-left:6px; display:none; }
.page-roles tr.rp-custom .rp-custom-tag { display:inline-block; }
.page-roles .rp-matrix input[type=radio] { appearance:none; -webkit-appearance:none; width:18px; height:18px; border:2px solid #cbd5e1; border-radius:50%; cursor:pointer; position:relative; margin:0; transition:all .15s; vertical-align:middle; }
.page-roles .rp-matrix input[type=radio]:hover { border-color:var(--lvl,#0074D9); }
.page-roles .rp-matrix input[type=radio]:checked { border-color:var(--lvl,#0074D9); }
.page-roles .rp-matrix input[type=radio]:checked::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--lvl,#0074D9); }
.page-roles .rp-matrix input[type=radio]:disabled { cursor:not-allowed; opacity:.45; }
.page-roles td.rp-c-none { --lvl:#9aa5b1; } .page-roles td.rp-c-view { --lvl:#0074D9; }
.page-roles td.rp-c-add { --lvl:#17a2b8; }  .page-roles td.rp-c-edit { --lvl:#fbbc04; }
.page-roles td.rp-c-delete { --lvl:#FF851B; } .page-roles td.rp-c-full { --lvl:#34a853; }
.page-roles .rp-expand-btn { background:none; border:none; cursor:pointer; color:#9aa5b1; font-size:13px; padding:6px; border-radius:4px; transition:all .15s; }
.page-roles .rp-expand-btn:hover { color:var(--navy-accent); background:#eef5fd; }
.page-roles .rp-expand-btn.open { transform:rotate(180deg); color:var(--navy-accent); }
.page-roles tr.rp-granular > td { background:#fafbfd; padding:0; }
.page-roles .rp-granular-inner { padding:6px 16px 12px 42px; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:4px 18px; }
.page-roles .rp-gran-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--border-light); }
.page-roles .rp-gran-row .rp-gran-info { min-width:0; }
.page-roles .rp-gran-row code { font-size:11px; color:var(--navy-accent); background:rgba(0,116,217,.08); padding:2px 7px; border-radius:10px; font-family:ui-monospace,monospace; }
.page-roles .rp-gran-row small { display:block; font-size:11.5px; color:var(--text-muted); margin-top:3px; }

/* quick actions bar */
.page-roles .rp-quickbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.page-roles .rp-quickbar .rp-qa-group { display:flex; gap:7px; flex-wrap:wrap; }
.page-roles .rp-qa-btn { font-size:12px; padding:6px 11px; background:#f5f8fc; border:1px solid var(--border-color); border-radius:5px; cursor:pointer; color:var(--text-secondary); display:inline-flex; align-items:center; gap:6px; transition:all .15s; }
.page-roles .rp-qa-btn:hover { background:var(--navy-primary); color:#fff; border-color:var(--navy-primary); }

/* ---- summary (right) ---- */
.page-roles .rp-summary { background:#fff; border:1px solid var(--border-color); border-radius:6px; box-shadow:0 2px 4px var(--shadow-color); overflow:hidden; }
.page-roles .rp-sum-head { background:linear-gradient(135deg,var(--navy-primary),var(--navy-light)); color:#fff; padding:15px 18px; }
.page-roles .rp-sum-head h3 { margin:0; font-size:14.5px; display:flex; align-items:center; gap:9px; }
.page-roles .rp-sum-head p { margin:4px 0 0; font-size:12px; opacity:.85; }
.page-roles .rp-sum-body { padding:16px 18px; }
.page-roles .rp-sum-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.page-roles .rp-chip { font-size:11.5px; font-weight:600; color:var(--navy-primary); background:#eef5fd; border:1px solid #d6e6fb; padding:4px 10px; border-radius:12px; }
.page-roles .rp-chip.rp-chip-all { background:rgba(52,168,83,.12); color:#1e7e34; border-color:#bfe6c8; }
.page-roles .rp-sum-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); margin:0 0 10px; }
.page-roles .rp-sum-overview { margin-bottom:18px; }
.page-roles .rp-ov-row { display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13px; }
.page-roles .rp-ov-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.page-roles .rp-ov-row .rp-ov-name { flex:1; color:var(--text-secondary); }
.page-roles .rp-ov-row .rp-ov-count { font-weight:700; color:var(--text-primary); }
.page-roles .rp-sum-breakdown { border-top:1px solid var(--border-light); padding-top:14px; max-height:280px; overflow-y:auto; }
.page-roles .rp-bd-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; font-size:12.5px; border-bottom:1px solid var(--border-light); }
.page-roles .rp-bd-row:last-child { border-bottom:none; }
.page-roles .rp-bd-row .rp-bd-name { color:var(--text-secondary); display:flex; align-items:center; gap:7px; min-width:0; }
.page-roles .rp-bd-row .rp-bd-name i { color:#9aa5b1; width:14px; text-align:center; }
.page-roles .rp-lvl-badge { font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:11px; text-transform:uppercase; letter-spacing:.2px; white-space:nowrap; }
.page-roles .rp-lvl-badge.lv-none { background:#eef1f4; color:#6b7684; }
.page-roles .rp-lvl-badge.lv-view { background:rgba(0,116,217,.12); color:#0058a8; }
.page-roles .rp-lvl-badge.lv-add { background:rgba(23,162,184,.14); color:#0f7c8c; }
.page-roles .rp-lvl-badge.lv-edit { background:rgba(251,188,4,.18); color:#a87a00; }
.page-roles .rp-lvl-badge.lv-delete { background:rgba(255,133,27,.16); color:#c95e00; }
.page-roles .rp-lvl-badge.lv-full { background:rgba(52,168,83,.14); color:#1e7e34; }
.page-roles .rp-lvl-badge.lv-custom { background:rgba(177,13,201,.12); color:#8b18a3; }

/* actions */
.page-roles .rp-actions { padding:16px 18px; border-top:1px solid var(--border-light); background:#fafbfd; display:flex; flex-direction:column; gap:9px; }
.page-roles .rp-actions .btn { width:100%; justify-content:center; }

/* empty state */
.page-roles .rp-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:70px 28px; color:var(--text-muted); }
.page-roles .rp-empty i { font-size:46px; color:#d6deea; margin-bottom:16px; }
.page-roles .rp-empty h3 { font-size:17px; color:var(--text-secondary); margin:0 0 6px; }
.page-roles .rp-empty p { font-size:13.5px; margin:0; max-width:340px; }
.page-roles .rp-skel { height:60px; border-radius:6px; margin-bottom:6px; background:linear-gradient(90deg,var(--skeleton-base) 25%,var(--skeleton-shine) 50%,var(--skeleton-base) 75%); background-size:200% 100%; animation:rpShimmer 1.3s infinite; }
@keyframes rpShimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* responsive */
@media (max-width:1180px) {
    .page-roles .rp-layout { grid-template-columns:260px minmax(0,1fr); }
    .page-roles .rp-col-summary { grid-column:1 / -1; position:static; }
}
@media (max-width:820px) {
    .page-roles .rp-layout { grid-template-columns:1fr; }
    .page-roles .rp-step { min-width:150px; }
    .page-roles .rp-users { max-height:300px; }
    .page-roles .rp-template-row .rp-tpl-field { flex:1 1 100%; }
    .page-roles .rp-or { display:none; }
}

/* ====== Tab 2 — Role Templates editor (migrated from inline <style>) ====== */
.page-roles .roles-tabs { display:flex; flex-wrap:wrap; gap:8px; border-bottom:2px solid #e0e0e0; margin-bottom:24px; }
.page-roles .role-tab { padding:12px 20px; border:none; background:transparent; cursor:pointer; font-size:14px; font-weight:600; color:#666; border-bottom:3px solid transparent; transition:all .2s; display:inline-flex; align-items:center; gap:8px; }
.page-roles .role-tab:hover { color:var(--navy-primary); background:rgba(0,31,63,.04); }
.page-roles .role-tab.active { color:var(--navy-primary); border-bottom-color:var(--navy-primary); }
.page-roles .role-tab .count-badge { background:var(--navy-accent); color:#fff; padding:4px 10px; border-radius:12px; font-size:12px; line-height:1.4; font-weight:700; }
.page-roles .role-tab.admin-tab { color:#999; cursor:not-allowed; }
.page-roles .role-tab.admin-tab:hover { background:transparent; color:#999; }
.page-roles .feature-card { background:#fff; border:1px solid #e0e0e0; border-left:4px solid var(--navy-primary); border-radius:4px; padding:20px; margin-bottom:16px; }
.page-roles .feature-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid #f0f0f0; }
.page-roles .feature-card-head h3 { font-size:16px; color:var(--navy-primary); display:flex; align-items:center; gap:10px; margin:0; }
.page-roles .feature-card-head .bulk-btn { font-size:12px; padding:4px 10px; background:#f8f9fa; border:1px solid #ddd; border-radius:3px; cursor:pointer; color:#555; }
.page-roles .feature-card-head .bulk-btn:hover { background:var(--navy-primary); color:#fff; border-color:var(--navy-primary); }
.page-roles .perm-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f5f5f5; }
.page-roles .perm-row:last-child { border-bottom:none; }
.page-roles .perm-info .perm-action { font-family:ui-monospace,monospace; font-size:12px; line-height:1.4; color:#0074D9; background:rgba(0,116,217,.08); padding:4px 10px; border-radius:12px; margin-right:10px; }
.page-roles .perm-info .perm-desc { font-size:14px; color:#333; }
.page-roles .roles-actions { display:flex; gap:12px; justify-content:flex-end; padding:20px; background:#f8f9fa; border-radius:4px; margin-top:20px; align-items:center; }
.page-roles .roles-actions .dirty-note { flex:1; color:#fbbc04; font-weight:600; display:none; align-items:center; gap:8px; }
.page-roles .roles-actions .dirty-note.visible { display:flex; }
.page-roles .admin-notice { background:#e8f4f8; border-left:4px solid var(--navy-accent); padding:14px 18px; border-radius:4px; color:#234; font-size:14px; margin-bottom:20px; display:flex; align-items:flex-start; gap:10px; }
.page-roles .admin-notice i { color:var(--navy-accent); font-size:18px; margin-top:2px; }
.page-roles .role-tab-action { margin-left:6px; color:#999; opacity:.55; cursor:pointer; font-size:11px; padding:2px 5px; border-radius:3px; transition:all .2s; }
.page-roles .role-tab-action:hover { opacity:1; }
.page-roles .role-tab-action.edit:hover { color:var(--navy-accent); background:rgba(0,116,217,.1); }
.page-roles .role-tab-action.delete:hover { color:#ea4335; background:rgba(234,67,53,.12); }
.page-roles .role-tab.role-tab-new { color:var(--navy-accent); font-weight:700; border-bottom-color:transparent; }
.page-roles .role-tab.role-tab-new:hover { background:rgba(0,116,217,.08); color:var(--navy-accent); }
/* global one-click reset bar — always visible at top of the Role Templates tab */
.page-roles .roles-global-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin:12px 0 6px; padding:12px 16px; background:#fff7f6; border:1px solid #f3c9c4; border-left:4px solid #dd1e1e; border-radius:4px; }
.page-roles .roles-global-actions .rga-txt { font-size:13px; color:#7a2620; flex:1 1 320px; }
.page-roles .roles-global-actions .rga-txt i { color:#dd1e1e; margin-right:4px; }
.page-roles .roles-global-actions .btn-danger { flex:0 0 auto; white-space:nowrap; }
body.dark-mode.page-roles .roles-global-actions { background:#2a1512; border-color:#5a2420; border-left-color:#e5484d; }
body.dark-mode.page-roles .roles-global-actions .rga-txt { color:#f0b6b0; }
.page-roles .roles-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0 18px; padding:12px 14px; background:#f8f9fa; border:1px solid #e0e0e0; border-radius:4px; }
.page-roles .roles-toolbar .search-wrap { position:relative; flex:1 1 280px; min-width:220px; }
.page-roles .roles-toolbar .search-wrap input { width:100%; padding:9px 12px 9px 34px; border:1px solid #d7def0; border-radius:4px; font-size:14px; color:var(--navy-primary); background:#fff; }
.page-roles .roles-toolbar .search-wrap input:focus { outline:none; border-color:var(--navy-accent); box-shadow:0 0 0 2px rgba(0,116,217,.12); }
.page-roles .roles-toolbar .search-wrap i { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:#888; pointer-events:none; }
.page-roles .roles-toolbar .toolbar-counter { font-size:13px; color:#5f6c80; padding:6px 10px; white-space:nowrap; }
.page-roles .roles-toolbar .toolbar-counter strong { color:var(--navy-primary); }
.page-roles .roles-toolbar .btn-sm { padding:7px 12px; font-size:13px; }
.page-roles .feature-card.is-hidden, .page-roles .perm-row.is-hidden { display:none; }
.page-roles .perm-section { margin-bottom:22px; }
.page-roles .perm-section.is-hidden { display:none; }
.page-roles .perm-section-title { font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--navy-primary); margin:0 0 12px; padding-bottom:6px; border-bottom:2px solid var(--navy-primary); display:flex; align-items:center; gap:8px; }
.page-roles .perm-section-count { font-size:12px; line-height:1.4; background:var(--navy-primary); color:#fff; border-radius:12px; padding:4px 10px; font-weight:600; }
.page-roles .role-slug-hint { color:#999; font-size:12px; font-weight:normal; }
.page-roles .form-help { margin-top:6px; font-size:12.5px; color:#5f6c80; }
.page-roles .form-help i { color:var(--navy-accent); margin-right:4px; }
.page-roles .role-summary { font-size:14px; line-height:1.5; max-height:60vh; overflow-y:auto; padding-right:4px; }
.page-roles .role-summary-head { padding:6px 0 10px; margin-bottom:10px; border-bottom:1px solid #e8edf5; color:#5f6c80; font-size:13px; }
.page-roles .role-summary-head strong { color:var(--navy-primary); }
.page-roles .role-summary-section { margin-bottom:14px; }
.page-roles .role-summary-section h4 { font-size:13px; color:var(--navy-primary); margin:0 0 6px; display:flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.3px; }
.page-roles .role-summary-section h4 i { color:var(--navy-accent); }
.page-roles .role-summary-section ul { list-style:none; padding:0; margin:0; }
.page-roles .role-summary-section li { padding:4px 0; color:#444; font-size:13px; display:flex; align-items:flex-start; gap:8px; }
.page-roles .role-summary-section li i.allow { color:#34a853; font-size:11px; margin-top:4px; flex:0 0 auto; }
.page-roles .role-summary-empty { color:#888; font-style:italic; padding:28px 18px; text-align:center; background:#f8f9fa; border-radius:4px; }
@media (max-width:720px) {
    .page-roles .role-tab { padding:9px 12px; font-size:13px; }
    .page-roles .feature-card { padding:14px; }
    .page-roles .feature-card-head { flex-direction:column; align-items:flex-start; gap:8px; }
    .page-roles .feature-card-head > div:last-child { align-self:stretch; display:flex; gap:8px; }
    .page-roles .feature-card-head > div:last-child .bulk-btn { flex:1 1 auto; }
    .page-roles .perm-row { padding:12px 0; gap:12px; }
    .page-roles .perm-info .perm-action { display:none; }
    .page-roles .roles-toolbar { flex-direction:column; align-items:stretch; }
    .page-roles .roles-toolbar .toolbar-counter { text-align:center; }
    .page-roles .roles-actions { flex-wrap:wrap; gap:8px; }
    .page-roles .roles-actions .btn { flex:1 1 auto; }
}

/* wizard utility classes (keep styling out of inline attributes) */
.page-roles .rp-sum-body .rp-empty { padding:34px 12px; }
.page-roles .rp-users .rp-empty { padding:30px 10px; }
.page-roles .rp-accounts .rp-empty { grid-column:1 / -1; padding:24px 10px; }
.page-roles .rp-opt-hint { font-weight:400; color:#9aa5b1; font-size:11.5px; }
.page-roles .rp-chip.rp-chip-empty { background:#f3f4f6; color:#9aa5b1; border-color:#e5e7eb; }
.page-roles .rp-self-warn { font-size:11.5px; color:#c95e00; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.page-roles tr.rp-granular { display:none; }
.page-roles tr.rp-granular.rp-open { display:table-row; }
.page-roles .rp-tpl-scroll { max-height:55vh; overflow:auto; }
.page-roles .rp-tpl-feat { text-align:left; margin-bottom:9px; }
.page-roles .rp-tpl-feat .rp-tpl-acts { font-size:12px; color:#666; margin-top:2px; }

/* ===== AI Chat module — Claude-style conversation UI (ai_chat.php), navy theme tokens ===== */
:root { --ai-col: 760px; }
.ai-toolbar { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; justify-content:space-between; margin-bottom:14px; }
.ai-toolbar-left { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
.ai-toolbar-right { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ai-field { display:flex; flex-direction:column; gap:6px; min-width:190px; }
.ai-field label { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.ai-field label i { color:var(--navy-accent); }

.ai-layout { position:relative; }
.ai-chat-card { display:flex; flex-direction:column; padding:0; overflow:hidden; height:calc(100vh - 240px); min-height:520px; }
.ai-messages { flex:1; padding:28px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:24px; background:var(--bg-primary); scroll-behavior:smooth; }
.ai-messages::-webkit-scrollbar { width:11px; }
.ai-messages::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:8px; border:3px solid transparent; background-clip:content-box; }
.ai-messages::-webkit-scrollbar-thumb:hover { background:var(--text-muted); background-clip:content-box; }

/* pin the chat in the viewport — header/toolbar/composer stay put, only the messages list scrolls (desktop/tablet) */
@media (min-width:769px) {
    body.page-ai-chat .main-content { display:flex; flex-direction:column; overflow:hidden; padding-bottom:0; }
    body.page-ai-chat .ai-layout { flex:1; min-height:0; display:flex; flex-direction:column; margin-bottom:0; }
    body.page-ai-chat .ai-chat-card { flex:1; height:auto; min-height:0; border-bottom-left-radius:0; border-bottom-right-radius:0; }
}

/* empty / greeting state */
.ai-empty { margin:auto; text-align:center; width:100%; max-width:var(--ai-col); padding:16px 4px; }
.ai-empty-icon { width:56px; height:56px; border-radius:16px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
    background:var(--navy-primary); color:#fff; font-size:23px; box-shadow:0 8px 20px rgba(0,31,63,.22); }
.ai-empty h3 { margin:0 0 8px; font-size:23px; font-weight:700; letter-spacing:-.01em; color:var(--text-primary); }
.ai-empty p { margin:0 auto 24px; max-width:460px; color:var(--text-muted); font-size:14px; line-height:1.55; }
.ai-examples { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; text-align:left; }
.ai-example { background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding:13px 15px; cursor:pointer;
    font-size:13px; color:var(--text-secondary); transition:border-color .15s, box-shadow .15s, transform .15s; display:flex; align-items:center; gap:11px; line-height:1.4; }
.ai-example:hover { border-color:var(--navy-accent); color:var(--text-primary); transform:translateY(-1px); box-shadow:0 4px 14px var(--shadow-color); }
.ai-example i { color:var(--navy-accent); width:18px; flex:0 0 18px; text-align:center; font-size:14px; }
.ai-examples .ai-example:last-child:nth-child(odd) { grid-column:1 / -1; }

/* message rows — centered conversation column */
.ai-msg { display:flex; gap:13px; width:100%; max-width:var(--ai-col); margin:0 auto; }
.ai-msg-user { flex-direction:row-reverse; }
.ai-avatar { flex:0 0 30px; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; margin-top:1px; }
.ai-msg-assistant .ai-avatar { background:var(--navy-primary); }
.ai-msg-user .ai-avatar { display:none; }
.ai-msg-body { position:relative; min-width:0; flex:1; }
.ai-msg-user .ai-msg-body { flex:0 1 auto; max-width:84%; }
/* assistant answers flow like a document; user messages sit in a soft navy bubble */
.ai-bubble { font-size:14.5px; color:var(--text-primary); line-height:1.6; overflow-x:auto; }
.ai-msg-assistant .ai-bubble { background:transparent; border:none; padding:2px 0; box-shadow:none; }
.ai-msg-user .ai-bubble { background:var(--navy-primary); color:#fff; border-radius:16px 16px 5px 16px; padding:11px 15px; box-shadow:0 1px 3px var(--shadow-color); }
.ai-summary { margin-bottom:6px; }

/* answer tables (reuse about-roles-table look) */
.ai-table-title { font-weight:600; font-size:13px; color:var(--navy-primary); margin:12px 0 6px; display:flex; align-items:center; gap:6px; }
.ai-table-title i { color:var(--navy-accent); }
.ai-result-table { margin-bottom:6px; }
.ai-result-table table { font-size:13px; }
.ai-no-rows { font-size:13px; color:var(--text-muted); padding:6px 0; }
.ai-note, .ai-blocked, .ai-basis { font-size:13px; display:flex; align-items:center; gap:8px; }
.ai-note { color:var(--text-secondary); }
.ai-blocked { color:var(--danger); font-weight:600; }
.ai-basis { margin-top:10px; padding-top:8px; border-top:1px dashed var(--border-color); color:var(--text-muted); font-size:12px; }
.ai-basis i { color:var(--navy-accent); }

/* copy button */
.ai-copy-btn { position:absolute; top:-2px; right:0; background:var(--bg-card); border:1px solid var(--border-color); color:var(--text-muted); cursor:pointer; font-size:12px;
    opacity:0; transition:opacity .15s, color .15s, border-color .15s; padding:5px 7px; border-radius:7px; line-height:1; }
.ai-msg-body:hover .ai-copy-btn { opacity:1; }
.ai-copy-btn:hover { color:var(--navy-accent); border-color:var(--navy-accent); }

/* admin SQL/debug accordion */
.ai-debug { margin-top:10px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-primary); }
.ai-debug > summary { cursor:pointer; padding:8px 12px; font-size:12.5px; font-weight:600; color:var(--text-secondary); display:flex; align-items:center; gap:7px; }
.ai-debug > summary i { color:var(--navy-accent); }
.ai-debug-item { padding:8px 12px; border-top:1px solid var(--border-light); }
.ai-debug-title { font-size:12.5px; font-weight:600; color:var(--text-primary); }
.ai-debug-meta { font-weight:400; color:var(--text-muted); font-size:11.5px; }
.ai-debug-sql { margin:6px 0 0; background:var(--navy-dark); color:#cfe6ff; padding:9px 11px; border-radius:6px; font-size:12px;
    white-space:pre-wrap; word-break:break-word; overflow-x:auto; }

/* typing indicator */
.ai-typing { display:inline-flex; gap:4px; align-items:center; }
.ai-typing span { width:7px; height:7px; border-radius:50%; background:var(--navy-accent); opacity:.4; animation:aiTyping 1s infinite; }
.ai-typing span:nth-child(2) { animation-delay:.2s; }
.ai-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes aiTyping { 0%,60%,100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }

/* composer — single rounded container, send button tucked inside */
.ai-input-wrap { padding:14px 20px 16px; border-top:1px solid var(--border-color); background:var(--bg-card); }
.ai-input-bar { display:flex; gap:8px; align-items:flex-end; width:100%; max-width:var(--ai-col); margin:0 auto;
    border:1px solid var(--input-border); border-radius:18px; background:var(--input-bg); padding:7px 7px 7px 4px;
    box-shadow:0 2px 12px var(--shadow-color); transition:border-color .15s, box-shadow .15s; }
.ai-input-bar:focus-within { border-color:var(--navy-accent); box-shadow:0 0 0 3px rgba(0,116,217,.13); }
.ai-input-bar textarea { flex:1; resize:none; border:none; background:transparent; padding:9px 6px 9px 14px; font-size:16px;
    font-family:inherit; color:var(--text-primary); line-height:1.45; max-height:170px; min-height:24px; }
.ai-input-bar textarea:focus { outline:none; }
.ai-send-btn { flex:0 0 auto; width:40px; height:40px; padding:0; border:none; border-radius:13px; cursor:pointer;
    background:var(--navy-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px;
    transition:background .15s, opacity .15s, transform .1s; }
.ai-send-btn:hover:not(:disabled) { background:var(--navy-light); }
.ai-send-btn:active:not(:disabled) { transform:scale(.94); }
.ai-send-btn:disabled { opacity:.4; cursor:not-allowed; }
.ai-send-label { display:none; }
.ai-input-hint { width:100%; max-width:var(--ai-col); margin:9px auto 0; font-size:11.5px; color:var(--text-muted);
    display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap; }
.ai-input-hint i { color:var(--navy-accent); }
.ai-input-hint kbd { font-family:inherit; font-size:10.5px; background:var(--bg-primary); border:1px solid var(--border-color);
    border-bottom-width:2px; border-radius:5px; padding:1px 6px; color:var(--text-secondary); }

/* history slide-over */
.ai-history-panel { position:fixed; top:0; right:0; width:360px; max-width:90vw; height:100%; background:var(--bg-card); border-left:1px solid var(--border-color);
    box-shadow:-8px 0 24px var(--shadow-color); transform:translateX(105%); transition:transform .25s; z-index:1200; display:flex; flex-direction:column; }
.ai-history-panel.open { transform:translateX(0); }
.ai-history-head { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border-color); color:var(--navy-primary); }
.ai-history-close { background:transparent; border:none; font-size:18px; cursor:pointer; color:var(--text-muted); }
.ai-history-close:hover { color:var(--danger); }
.ai-history-list { overflow-y:auto; padding:8px; flex:1; }
.ai-history-loading, .ai-history-empty { padding:20px; text-align:center; color:var(--text-muted); font-size:13px; }
.ai-history-item { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:9px; cursor:pointer; transition:background .15s; }
.ai-history-item:hover { background:var(--bg-primary); }
.ai-history-item-main { flex:1; min-width:0; }
.ai-history-title { font-size:13.5px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-history-meta { font-size:11.5px; color:var(--text-muted); display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.ai-history-who i { color:var(--navy-accent); }
.ai-history-del { background:transparent; border:none; color:var(--text-muted); cursor:pointer; padding:6px; border-radius:6px; }
.ai-history-del:hover { color:var(--danger); background:var(--bg-primary); }

/* settings card helpers */
.ai-key-state { font-weight:600; color:var(--navy-accent); }
.ai-inline-check { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.ai-card-actions { margin-top:8px; }

@media (max-width:768px) {
    .ai-toolbar { flex-direction:column; align-items:stretch; }
    .ai-toolbar-left, .ai-toolbar-right { width:100%; }
    .ai-field { min-width:0; flex:1; }
    .ai-chat-card { height:calc(100vh - 200px); min-height:440px; }
    .ai-messages { padding:18px 14px; gap:20px; }
    .ai-msg-user .ai-msg-body { max-width:88%; }
    .ai-examples { grid-template-columns:1fr; }
    .ai-input-wrap { padding:12px 14px 14px; }
}

/* ===== Row action menu — 3-dot (⋮) → View/Edit/Delete + hover preview & info cards. shared by all list pages, driven by row_actions.js ===== */
.row-action-trigger { position: relative; width: 38px; height: 38px; border: 1px solid #d6deea; border-radius: 5px; background: #fff; color: #071a41; cursor: pointer; }
.row-action-trigger:hover, .row-action-trigger.active { background: #f2f4f7; color: #101828; }
/* onboarding status dot on the 3-dot trigger (users.php) — green=approved, amber=pending, red=rejected */
.ob-status-dot { position:absolute; top:-4px; right:-4px; width:11px; height:11px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.1); }
.ob-dot-green { background:#16a34a; }
.ob-dot-amber { background:#f59e0b; }
.ob-dot-red   { background:#dc2626; animation:obDotPulse 1.6s ease-in-out infinite; }
@keyframes obDotPulse { 0%,100% { box-shadow:0 0 0 1px rgba(220,38,38,.45), 0 0 0 0 rgba(220,38,38,.5); } 50% { box-shadow:0 0 0 1px rgba(220,38,38,.45), 0 0 0 5px rgba(220,38,38,0); } }
.row-action-menu { position: fixed; z-index: 100000; width: 172px; padding: 5px; border: 1px solid #e4e7ec; border-radius: 6px; background: #fff; box-shadow: 0 12px 28px rgba(16,24,40,.16); }
.row-action-menu button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 4px; background: transparent; color: #344054; font-size: 11px; text-align: left; cursor: pointer; }
.row-action-menu button:hover { background: #f2f4f7; }
.row-action-menu button.danger { color: #b42318; }
.row-action-menu .ra-info-ico { margin-left: auto; color: #b6bfce; font-size: 11px; }
.row-action-menu button:hover .ra-info-ico { color: #1473e6; }
.row-action-menu button.danger:hover .ra-info-ico { color: #d92d20; }
/* hover preview card — pops beside the menu on "View Details" */
.row-action-preview { position: fixed; z-index: 100001; width: 320px; padding: 18px; border: 1px solid #e4e7ec; border-radius: 9px; background: #fff; box-shadow: 0 16px 40px rgba(16,24,40,.22); font-size: 13.5px; color: #344054; pointer-events: none; animation: rap-in .12s ease-out; }
@keyframes rap-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.row-action-preview .rap-name { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: #071a41; margin-bottom: 11px; padding-bottom: 9px; border-bottom: 1px solid #eef2f7; }
.row-action-preview .rap-avatar { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 50%; background: #eef4ff; color: #071a41; font-size: 13px; font-weight: 700; }
.row-action-preview .rap-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 8px; line-height: 1.5; }
.row-action-preview .rap-row > i { width: 15px; text-align: center; color: #98a2b3; margin-top: 2px; flex: 0 0 15px; }
.row-action-preview .rap-row span { min-width: 0; word-break: break-word; }
.row-action-preview .rap-chip { display: inline-block; padding: 3px 10px; border: 1px solid #b2ddff; border-radius: 11px; font-size: 12px; font-weight: 700; background: #eff8ff; color: #175cd3; }
.row-action-preview .rap-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; }
.row-action-preview .rap-dot.on { background: #12b76a; }
.row-action-preview .rap-dot.off { background: #d92d20; }
.row-action-preview .rap-hint { margin-top: 12px; padding-top: 9px; border-top: 1px solid #eef2f7; color: #98a2b3; font-size: 11.5px; }
/* edit / delete info card */
.row-action-preview.row-action-info { width: 300px; }
.row-action-info .rai-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.row-action-info .rai-ico { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 8px; font-size: 16px; }
.row-action-info .rai-title { font-size: 15px; font-weight: 700; color: #071a41; }
.row-action-info .rai-desc { font-size: 13px; line-height: 1.55; color: #475467; }
.row-action-info .rai-desc b { color: #1d2939; }
.row-action-info.rai-edit .rai-ico { background: #eff8ff; color: #175cd3; }
.row-action-info.rai-danger .rai-ico { background: #fef3f2; color: #d92d20; }
.row-action-info.rai-danger .rai-desc b { color: #b42318; }

/* ===== Team Chat (chat.php) — Claude-style clean conversation UI, navy theme tokens ===== */
/* full-height shell — breadcrumb + header fixed, chat panel fills the rest */
body.chat-body .main-content { padding:0; display:flex; flex-direction:column; height:100vh; overflow:hidden; }
body.chat-body .main-content > .breadcrumb { flex-shrink:0; padding:16px 22px 0; margin:0; }
body.chat-body .main-content > .header { flex-shrink:0; margin:12px 22px 0; }
.chat-container { display:flex; flex:1; min-height:0; margin:16px 22px 22px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px; overflow:hidden; box-shadow:0 6px 24px var(--shadow-color); }

/* ---- left pane: contacts / channels ---- */
.chat-sidebar { width:330px; background:var(--bg-card); border-right:1px solid var(--border-color); display:flex; flex-direction:column; flex-shrink:0; }
.chat-sidebar-header { padding:18px 18px 14px; display:flex; justify-content:space-between; align-items:center; }
.chat-sidebar-header h3 { font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--text-primary); display:flex; align-items:center; gap:9px; margin:0; }
.chat-sidebar-header h3 i { color:var(--navy-accent); }
.total-unread-badge { background:var(--danger); color:#fff; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; min-width:20px; text-align:center; }
.total-unread-badge.zero { display:none; }

/* segmented pill tabs (DM / Channels) */
.sidebar-tabs { display:flex; gap:6px; padding:0 14px 12px; }
.sidebar-tab { flex:1; background:var(--bg-primary); border:1px solid var(--border-color); padding:9px 8px; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:10px; transition:all .15s; }
.sidebar-tab:hover { color:var(--navy-accent); border-color:var(--navy-accent); }
.sidebar-tab.active { color:#fff; background:linear-gradient(135deg,var(--navy-accent),#0a5bb8); border-color:transparent; box-shadow:0 2px 8px rgba(0,116,217,.28); }
.sidebar-pane { display:none; flex:1; flex-direction:column; min-height:0; }
.sidebar-pane.active { display:flex; }

.chat-search { padding:2px 14px 12px; }
.chat-search-wrap { position:relative; }
.chat-search input { width:100%; padding:10px 14px 10px 38px; border:1px solid var(--input-border); border-radius:11px; font-size:14px; background:var(--input-bg); color:var(--text-primary); outline:none; transition:border-color .15s, box-shadow .15s; }
.chat-search input:focus { border-color:var(--navy-accent); box-shadow:0 0 0 3px rgba(0,116,217,.12); }
.chat-search i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; }

.chat-contacts-list { flex:1; overflow-y:auto; overflow-x:hidden; padding:0 8px 8px; }
.chat-contact { display:flex; align-items:center; padding:10px 11px; border-radius:12px; cursor:pointer; gap:11px; transition:background .12s; margin-bottom:2px; }
.chat-contact:hover { background:var(--bg-primary); }
.chat-contact.active { background:rgba(0,116,217,.12); box-shadow:inset 3px 0 0 var(--navy-accent); }
.chat-contact.hidden { display:none; }

.chat-avatar { width:42px; height:42px; border-radius:13px; background:var(--navy-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex-shrink:0; position:relative; overflow:hidden; }
.chat-avatar img { width:100%; height:100%; object-fit:cover; }
.chat-avatar.online::after { content:''; position:absolute; bottom:0; right:0; width:11px; height:11px; background:#22c55e; border:2px solid var(--bg-card); border-radius:50%; }
.chat-avatar.channel-ic { background:linear-gradient(135deg,#6d28d9,var(--navy-accent)); }
/* per-person colored avatars (Slack-style) — picked by name hash in avatarHtml() */
.chat-avatar.av-c0 { background:linear-gradient(135deg,#4f46e5,#6366f1); }
.chat-avatar.av-c1 { background:linear-gradient(135deg,#0ea5e9,#0074D9); }
.chat-avatar.av-c2 { background:linear-gradient(135deg,#0d9488,#14b8a6); }
.chat-avatar.av-c3 { background:linear-gradient(135deg,#16a34a,#22c55e); }
.chat-avatar.av-c4 { background:linear-gradient(135deg,#d97706,#f59e0b); }
.chat-avatar.av-c5 { background:linear-gradient(135deg,#e11d48,#f43f5e); }
.chat-avatar.av-c6 { background:linear-gradient(135deg,#7c3aed,#a855f7); }
.chat-avatar.av-c7 { background:linear-gradient(135deg,#0891b2,#06b6d4); }

.chat-contact-info { flex:1; min-width:0; }
.chat-contact-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.chat-contact-name { font-weight:600; color:var(--text-primary); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-contact-time { font-size:11px; color:var(--text-muted); flex-shrink:0; }
.chat-contact-bottom { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:2px; }
.chat-contact-preview { font-size:13px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.chat-contact-preview i { font-size:11px; margin-right:2px; }
.chat-contact-unread { background:var(--navy-accent); color:#fff; border-radius:10px; padding:1px 7px; font-size:11px; font-weight:700; min-width:20px; text-align:center; flex-shrink:0; }
.chat-contact-role { display:inline-block; padding:1px 7px; background:var(--bg-primary); color:var(--text-muted); border-radius:5px; font-size:10px; font-weight:600; margin-top:3px; }

/* channel list reuses .channel-list/.channel-item from styles.css — chat-only bits below */
.channel-list-wrap { flex:1; overflow-y:auto; padding:0 8px 8px; }
.channel-new-btn { margin:0 14px 12px; padding:11px 12px; border-radius:11px; background:var(--navy-accent); color:#fff; border:none; cursor:pointer; font-weight:600; font-size:13px; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .15s; }
.channel-new-btn:hover { background:var(--navy-primary); }
.channel-list .channel-item .channel-meta { display:block; font-size:11px; color:var(--text-muted); font-weight:normal; margin-top:2px; }
.channel-list .channel-item .channel-preview { font-size:12px; color:var(--text-muted); font-weight:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.channel-type-tag { font-size:11px; padding:3px 9px; line-height:1.4; border-radius:20px; font-weight:600; text-transform:uppercase; margin-left:auto; letter-spacing:.03em; }
.channel-type-tag.public { background:#e8f5e9; color:#137333; }
.channel-type-tag.private { background:#fce4ec; color:#c5221f; }
.channel-type-tag.project { background:#e3f2fd; color:#0074D9; }

/* ---- right pane: conversation ---- */
.chat-conversation { flex:1; display:flex; flex-direction:column; background:var(--bg-primary); position:relative; min-width:0; }
.chat-empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); padding:40px; text-align:center; }
.chat-empty-state i { width:78px; height:78px; border-radius:20px; background:linear-gradient(135deg,var(--navy-accent),#6d28d9); display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; box-shadow:0 10px 26px rgba(0,116,217,.3); margin:0; }
.chat-empty-state h3 { color:var(--text-primary); font-size:20px; font-weight:700; margin:22px 0 8px; }
.chat-empty-state p { color:var(--text-muted); font-size:14px; max-width:340px; line-height:1.55; }

.chat-view { display:none; flex-direction:column; flex:1; min-height:0; }
.chat-view.active { display:flex; }

.chat-header { display:flex; justify-content:space-between; align-items:center; padding:13px 20px; background:var(--bg-card); border-bottom:1px solid var(--border-color); flex-shrink:0; }
.chat-header-contact { display:flex; align-items:center; gap:12px; }
.chat-header-name { font-weight:700; color:var(--text-primary); font-size:15px; }
.chat-header-status { font-size:12px; color:var(--text-muted); margin-top:1px; }
.chat-header-status.online { color:#22c55e; font-weight:500; }
.chat-header-actions { display:flex; gap:4px; }
.chat-header-btn { background:none; border:none; color:var(--text-muted); padding:8px 10px; border-radius:9px; cursor:pointer; font-size:15px; transition:all .15s; }
.chat-header-btn:hover { background:var(--bg-primary); color:var(--text-primary); }
.chat-back-btn { display:none; }

/* messages — clean, no doodle background */
.chat-messages { flex:1; overflow-y:auto; padding:24px 22px; display:flex; flex-direction:column; gap:4px; background:var(--bg-primary); }
.chat-date-divider { align-self:center; background:var(--bg-card); border:1px solid var(--border-color); color:var(--text-secondary); padding:4px 14px; border-radius:20px; font-size:11px; font-weight:600; margin:14px 0 10px; }

.chat-message { max-width:66%; padding:9px 14px; border-radius:16px; font-size:14px; word-wrap:break-word; position:relative; line-height:1.5; }
.chat-message.sent { align-self:flex-end; background:linear-gradient(135deg,#0a84ff,#0062c4); color:#fff; border-bottom-right-radius:5px; }
.chat-message.received { align-self:flex-start; background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border-color); border-bottom-left-radius:5px; }
.chat-message-sender { font-size:11.5px; font-weight:700; color:var(--navy-accent); margin-bottom:3px; }
.chat-message.sent .chat-message-sender { display:none; }
.chat-message-text { white-space:pre-wrap; word-break:break-word; line-height:1.5; }
.chat-message-meta { font-size:10.5px; opacity:.7; margin-top:4px; display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.chat-message.received .chat-message-meta { color:var(--text-muted); }
.chat-message-receipt { font-size:11px; line-height:1; }
.chat-message.sent .chat-message-receipt.read { color:#7fd4ff; opacity:1; }

.chat-message-menu { position:absolute; top:5px; right:7px; opacity:0; transition:opacity .15s; }
.chat-message:hover .chat-message-menu { opacity:.9; }
.chat-message-menu-btn { background:rgba(0,0,0,.18); color:#fff; border:none; border-radius:7px; width:22px; height:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11px; }
.chat-message.received .chat-message-menu-btn { background:var(--bg-primary); color:var(--text-secondary); }
.chat-message-menu-btn:hover { background:rgba(0,0,0,.4); color:#fff; }

/* attachments */
.chat-attach-img { max-width:300px; max-height:260px; border-radius:11px; cursor:pointer; display:block; margin-top:4px; }
.chat-attach-file { display:flex; align-items:center; gap:10px; padding:9px 11px; background:rgba(255,255,255,.14); border-radius:11px; margin-top:4px; }
.chat-message.received .chat-attach-file { background:var(--bg-primary); }
.chat-attach-file i { font-size:22px; }
.chat-attach-file .fname { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px; }
.chat-attach-file a { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:4px; font-size:12px; }

.img-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.img-lightbox img { max-width:92%; max-height:92%; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.5); }

/* composer — rounded, consistent with AI chat */
.chat-attach-preview { display:none; padding:10px 22px; background:var(--bg-card); border-top:1px solid var(--border-color); font-size:13px; align-items:center; gap:10px; color:var(--text-secondary); }
.chat-attach-preview.visible { display:flex; }
.chat-attach-preview .p-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-attach-preview button { background:none; border:none; color:var(--danger); cursor:pointer; font-size:14px; }

.chat-input-area { display:flex; align-items:flex-end; gap:9px; padding:14px 22px 18px; background:var(--bg-card); border-top:1px solid var(--border-color); flex-shrink:0; }
.chat-input-area textarea { flex:1; border:1px solid var(--input-border); border-radius:16px; padding:11px 16px; resize:none; font-size:15px; font-family:inherit; min-height:44px; max-height:130px; line-height:1.45; outline:none; background:var(--input-bg); color:var(--text-primary); transition:border-color .15s, box-shadow .15s; }
.chat-input-area textarea:focus { border-color:var(--navy-accent); box-shadow:0 0 0 3px rgba(0,116,217,.12); }
.chat-attach-btn { background:var(--bg-primary); border:1px solid var(--border-color); color:var(--text-secondary); width:44px; height:44px; border-radius:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; transition:all .15s; }
.chat-attach-btn:hover { background:rgba(0,116,217,.1); color:var(--navy-accent); border-color:var(--navy-accent); }
.chat-send-btn { background:linear-gradient(135deg,#0a84ff,#0062c4); color:#fff; border:none; width:44px; height:44px; border-radius:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; transition:filter .15s, transform .1s; flex-shrink:0; }
.chat-send-btn:hover { filter:brightness(1.08); }
.chat-send-btn:active:not(:disabled) { transform:scale(.94); }
.chat-send-btn:disabled { background:var(--text-muted); cursor:not-allowed; opacity:.5; }

.chat-sidebar-empty { padding:30px 20px; text-align:center; color:var(--text-muted); font-size:13px; }

/* channel modal multi-select */
.members-picker { border:1px solid var(--border-color); border-radius:11px; max-height:190px; overflow-y:auto; padding:6px; background:var(--bg-card); }
.members-picker .m-row { display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:8px; cursor:pointer; }
.members-picker .m-row:hover { background:var(--bg-primary); }
.members-picker .m-row input { margin:0; }

@media (max-width:820px) {
    body.chat-body .main-content > .breadcrumb { padding:12px 14px 0; }
    body.chat-body .main-content > .header { margin:10px 14px 0; }
    .chat-container { margin:12px 14px 14px; border-radius:14px; }
    .chat-sidebar { width:100%; position:absolute; top:0; bottom:0; z-index:10; border-right:none; }
    .chat-sidebar.mobile-hidden { display:none; }
    .chat-conversation { width:100%; }
    .chat-back-btn { display:inline-flex; }
    .chat-message { max-width:84%; }
}

/* csv import — asin-only fallback option row */
.csv-asin-only-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 2px; font-size: 12.5px; color: #2c3e50; cursor: pointer; user-select: none; }
.csv-asin-only-row .toggle { flex: 0 0 auto; }

/* inventory page */
.inv-kpi-section { margin: 18px 0 22px; }
.inv-kpi-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 7px; margin: 0 0 10px; }
.inv-kpi-title i { font-size: 13px; }
.inv-kpi-title.amazon { color: #b45309; }
.inv-kpi-title.amazon i { color: #ff9900; }
.inv-kpi-title.internal { color: #004085; }
.inv-kpi-title.internal i { color: var(--navy-accent); }

/* grouped header tints — amazon / internal / sales areas */
th.inv-th-amazon, th.inv-th-internal, th.inv-th-sales { text-align: center !important; font-weight: 700; }
th.inv-th-amazon { background: #fff3cd !important; color: #856404 !important; border-bottom: 2px solid #ff9900 !important; }
th.inv-th-internal { background: #cce5ff !important; color: #004085 !important; border-bottom: 2px solid var(--navy-accent) !important; }
th.inv-th-sales { background: #d4edda !important; color: #155724 !important; border-bottom: 2px solid #34a853 !important; }

/* faint column tints — light enough that zebra stripes still read */
td.inv-td-amazon { background: rgba(255, 153, 0, .045); }
td.inv-td-internal { background: rgba(0, 116, 217, .045); }
td.inv-td-sales { background: rgba(52, 168, 83, .045); }

/* stock status badge variants — rides on .status-badge */
.inv-status-healthy { background: #d4edda; color: #155724; }
.inv-status-low { background: #fff3cd; color: #856404; }
.inv-status-reorder { background: #f8d7da; color: #721c24; }
.inv-status-oos { background: #e2e3e5; color: #383d41; }
.inv-status-inbound { background: #cce5ff; color: #004085; }

/* timeframe chips + custom date range row */
.inv-timeframe-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }

/* muted helper note (amazon vs supplier separation etc.) */
.inv-sep-note { font-size: 12px; color: var(--text-muted); font-style: italic; display: flex; align-items: center; gap: 6px; }
.inv-sep-note i { color: var(--navy-accent); }

/* inventory page */
.type-seg { display: inline-flex; border: 1px solid #c4d2e3; border-radius: 6px; overflow: hidden; }
.type-seg .type-seg-btn { border: none; border-radius: 0; border-right: 1px solid #c4d2e3; background: #fff; color: #5a6b80; font-weight: 600; }
.type-seg .type-seg-btn:last-child { border-right: none; }
.type-seg .type-seg-btn:hover:not(.active) { background: #eef3f9; }
.type-seg .type-seg-btn.active { background: #0074D9; color: #fff; box-shadow: inset 0 0 0 1px #001f3f; }
.inv-custom-range { display: none; gap: 6px; align-items: center; }
.inv-custom-range.active { display: inline-flex; }
.inv-custom-range .filter-input { width: 140px; }
.inv-period-chip { font-size: 10.5px; font-weight: 700; background: #e7f0fb; color: #0074D9; padding: 2px 8px; border-radius: 10px; margin-left: 8px; vertical-align: middle; }
#invTable td.inv-num { text-align: right; white-space: nowrap; }
#invTable thead th { vertical-align: middle; line-height: 1.25; }
#invTable .inv-pname { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
#invTable .inv-noimg { color: #c2cbd8; font-size: 18px; }
.inv-pos { color: #16a34a; font-weight: 600; }
.inv-neg { color: #dc2626; font-weight: 600; }
.inv-dim { color: #9aa7b5; }
.inv-notes-btn { background: #eef3f9; border: 1px solid #c4d2e3; border-radius: 12px; color: #0074D9; font-size: 11.5px; font-weight: 600; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.inv-notes-btn:hover { background: #dce8f5; }
.inv-del-btn { color: #dc2626; border-color: #f3c4c4; background: #fdf1f1; }
.inv-del-btn:hover { background: #fbe2e2; }
.inv-mini-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.inv-mini-table th { background: #f2f6fb; color: #001f3f; text-align: left; padding: 7px 10px; border-bottom: 2px solid #d7e3f5; white-space: nowrap; }
.inv-mini-table td { padding: 6px 10px; border-bottom: 1px solid #eef0f3; }
.inv-mini-table tr:hover td { background: #f8fafd; }
.inv-note { border: 1px solid #e3e9f2; border-radius: 6px; padding: 9px 12px; margin-bottom: 8px; background: #fafcff; }
.inv-note-body { font-size: 13px; color: #1f2d3d; white-space: pre-wrap; }
.inv-note-meta { font-size: 11px; color: #8694a6; margin-top: 5px; display: flex; align-items: center; gap: 8px; }
.inv-empty { text-align: center; color: #8694a6; font-size: 13px; padding: 18px 0; }
.inv-modal-hint { font-size: 12px; color: #5a6b80; background: #f2f6fb; border-left: 3px solid #0074D9; padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; }
.inv-skip-list { font-size: 12px; color: #b45309; margin: 6px 0 10px 18px; }

/* inventory page — Product / Status group headers (match the tinted sibling groups) */
th.inv-th-product, th.inv-th-meta { text-align: center !important; font-weight: 700; background: #eef3f9 !important; color: #001f3f !important; border-bottom: 2px solid #c4d2e3 !important; }

/* ---- inventory chip cells — use the shared canonical .cell-stack grid; sized like reverse_sourcing #prodTable so both tables match ---- */
#invTable .cell-stack { grid-template-columns: max-content max-content; gap: 4px 8px; width: auto; }
#invTable .inv-prod-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.chip-row{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.chip{ display:inline-flex; align-items:center; gap:5px; padding:0 10px; height:24px; min-width:92px; border-radius:3px; font-size:11.5px; font-weight:700; line-height:1; white-space:nowrap; border:1px solid transparent; }
.chip i{ font-size:11px; width:12px; text-align:center; }
.chip.is-btn{ cursor:pointer; }
.chip.is-btn:hover{ filter:brightness(.95); }
.inv-chip-sm{ min-width:70px!important; }
.chip-navy   { background:#0b2545; color:#fff; }
.chip-green  { background:#1f9d57; color:#fff; }
.chip-teal   { background:#d4efef; color:#0d7878; border-color:#bbe6e6; }
.chip-link   { background:#e9f1fc; color:#0a66c2; border-color:#cfe0f7; }
.chip-soft-navy  { background:#e6edf6; color:#0b2545; border-color:#d3deec; }
.chip-soft-green { background:#e2f6ea; color:#1f8b4c; border-color:#c7eed6; }
.chip-soft-amber { background:#fdecd6; color:#c4701a; border-color:#f8dab4; }
.chip-soft-purple{ background:#ece2f9; color:#6a1b9a; border-color:#dccbf2; }
.chip-soft-tan   { background:#fbe7c6; color:#92520a; border-color:#f3d29b; }
.val{ font-weight:800; font-size:13px; }
.val-pos{ color:#1f8b4c; }
.val-neg{ color:#c0392b; }
.val-navy{ color:#0b2545; }
.val-muted{ color:#9aa6b2; font-weight:700; }
.val-box{ background:#eef1f4; color:#33414f; padding:5px 9px; border-radius:3px; font-size:11.5px; font-weight:700; font-family:'Courier New',monospace; letter-spacing:.3px; text-decoration:none; display:inline-block; }
a.val-box:hover{ text-decoration:underline; }
/* row tinting — stock status drives row background */
#invTable tr.row-good td{ background:#e9f7ef!important; }
#invTable tr.row-bad  td{ background:#fdecea!important; }
#invTable tr.row-wait td{ background:#fff7e0!important; }
#invTable tr.row-none td{ background:#fff; }
/* badge chip (notes counter) */
.badge-chip{ display:inline-flex; align-items:center; gap:6px; background:#eef1f5; color:#3a4a59; border:1px solid #dde3ea; padding:5px 10px; border-radius:3px; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; }
.badge-chip .badge{ background:var(--navy-primary); color:#fff; border-radius:3px; padding:1px 7px; font-size:11px; }
.badge-chip:hover{ background:#e2e8f0; }
/* squared action buttons */
.actions-cell{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.act{ width:30px; height:30px; border:none; border-radius:4px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:13px; transition:all .2s; }
.act-info{ background:#1c2733; color:#fff; }
.act-info:hover{ background:#000; transform:scale(1.08); }
/* branded toolbar buttons */
button.dt-button.tb-btn{ background:var(--navy-primary)!important; color:#fff!important; border:none!important; padding:9px 14px!important; border-radius:3px!important; font-size:13px!important; font-weight:600!important; cursor:pointer!important; display:inline-flex!important; align-items:center!important; gap:7px!important; box-shadow:0 2px 5px rgba(0,0,0,.12)!important; margin:0 4px 0 0!important; }
button.dt-button.tb-btn:hover{ background:#00408a!important; }
/* #invTable scoped overrides */
#invTable.dataTable thead th{ background:var(--navy-primary)!important; color:#fff!important; padding:13px 12px!important; text-align:center!important; font-weight:700!important; font-size:13.5px!important; white-space:nowrap!important; border:none!important; }
#invTable.dataTable tbody td{ padding:10px 12px!important; font-size:13px; color:#444; vertical-align:top; border-bottom:1px solid #eef0f3; }
/* scrollX clones the header into the scroll body for column sizing — keep that copy invisible so no empty 2nd navy band shows */
#invTable_wrapper .dataTables_scrollBody thead th{ background:transparent!important; padding:0!important; border:0!important; line-height:0!important; height:0!important; }

/* inventory status pipeline — full width, single row, equal-width chevrons */
#statusPipeline { flex-wrap:nowrap; width:100%; }
#statusPipeline .chevron-stage { flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; padding-left:16px; padding-right:16px; overflow:hidden; }

/* ===== reorder page — header subtitle + KPI summary cards + condition badge ===== */
.ro-title-wrap { display:flex; flex-direction:column; gap:2px; }
.ro-page-sub { font-size:12.5px; color:#64748b; font-weight:500; }
.ro-sumgrid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:0 0 16px; }
.ro-sumcard { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e5e9f2; border-left:4px solid var(--navy-accent); border-radius:8px; padding:11px 13px; box-shadow:0 1px 3px rgba(16,24,40,.06); }
.ro-sc-ic { width:36px; height:36px; flex:0 0 36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; background:#eef4ff; color:var(--navy-accent); }
.ro-sc-val { font-size:18px; font-weight:800; color:var(--navy-primary); line-height:1.1; }
.ro-sc-lbl { font-size:10.5px; color:#64748b; font-weight:600; margin-top:2px; text-transform:uppercase; letter-spacing:.3px; }
.ro-sc-red    { border-left-color:#dc2626; } .ro-sc-red .ro-sc-ic    { background:#fee2e2; color:#dc2626; }
.ro-sc-blue   { border-left-color:#2563eb; } .ro-sc-blue .ro-sc-ic   { background:#dbeafe; color:#2563eb; }
.ro-sc-green  { border-left-color:#16a34a; } .ro-sc-green .ro-sc-ic  { background:#dcfce7; color:#16a34a; }
.ro-sc-teal   { border-left-color:#0d9488; } .ro-sc-teal .ro-sc-ic   { background:#ccfbf1; color:#0d9488; }
.ro-sc-rust   { border-left-color:#ea580c; } .ro-sc-rust .ro-sc-ic   { background:#ffedd5; color:#ea580c; }
.ro-sc-purple { border-left-color:#7c3aed; } .ro-sc-purple .ro-sc-ic { background:#ede9fe; color:#7c3aed; }
@media (max-width:1200px){ .ro-sumgrid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .ro-sumgrid { grid-template-columns:repeat(2,1fr); } }
.ro-cond-badge { display:inline-block; border-radius:3px; padding:1px 6px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.ro-cond-new  { background:#dcfce7; color:#166534; }
.ro-cond-used { background:#fef3c7; color:#92400e; }

/* ===== reorder page — chunk 2-5 additions ===== */
.ro-sr { display:flex; flex-direction:column; gap:2px; min-width:118px; font-size:11px; }
.ro-sr-row, .ro-pr-row { display:flex; justify-content:space-between; gap:8px; align-items:center; line-height:1.5; padding:1px 2px; border-radius:3px; }
.ro-sr-lbl { color:#64748b; font-weight:600; white-space:nowrap; }
.ro-sr-val b { color:var(--navy-primary); }
.ro-sr-val b.ro-sr-ref { color:#dc2626; }
.ro-sr-hot { background:#eef4ff; }
.ro-sr-more { display:none; }
tr.ro-more-open .ro-sr-more { display:flex; }
.ro-sr-toggle { margin-top:3px; border:1px solid #cdd6e8; border-radius:3px; background:#fff; color:var(--navy-primary); font-size:10px; font-weight:700; padding:2px 6px; cursor:pointer; align-self:flex-start; }
.ro-sr-toggle:hover { background:#f0f7ff; border-color:var(--navy-accent); }
.ro-sr-val { font-weight:700; color:var(--navy-primary); }
.ro-sr-val b.ro-sr-mut { color:#9aa3b2; }
.ro-sr-extra:not([hidden]) { display:block; margin-top:2px; border-top:1px dashed #e2e8f0; padding-top:3px; }
.ro-sr-toggle i { font-size:9px; margin-left:3px; transition:transform .15s ease; }
.ro-sr-toggle.open i { transform:rotate(180deg); }
/* Display Periods — checkbox chips (Show Filter) */
#roFilterBar .ro-period-group { grid-column:1 / -1; }
.ro-fp-hint { font-weight:400; font-size:11px; color:#94a3b8; text-transform:none; letter-spacing:0; margin-left:4px; }
.ro-period-box { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.ro-period-chk { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#334155; background:#fff; border:1px solid #d7def0; border-radius:6px; padding:5px 11px; cursor:pointer; user-select:none; transition:background .12s, border-color .12s, color .12s; }
.ro-period-chk:hover { border-color:var(--navy-accent); background:#f3f8fd; }
.ro-period-chk:has(input:checked) { background:#eaf3fc; border-color:var(--navy-accent); color:var(--navy-primary); font-weight:600; }
.ro-period-chk input { width:14px; height:14px; accent-color:var(--navy-accent); cursor:pointer; margin:0; }
.ro-pr-p { font-weight:800; }
.ro-pr-r { color:#0369a1; font-weight:700; }
.ro-pr-spacer { height:21px; }
.ro-selwrap { display:flex; flex-direction:column; align-items:center; gap:2px; }
.ro-color-dot { width:9px; height:9px; border-radius:50%; display:inline-block; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.ro-color-dot-empty { background:#e5e9f2; box-shadow:none; }

/* ===== Product/ASIN color tag — pop on hover so a flagged (issue) product grabs attention ===== */
/* row-tint tag (products/inventory/reorder/out_of_stock/reverse_sourcing/orders/shipping): --tag-color set inline by applyAsinTag() */
tr.asin-tagged { transition: box-shadow .15s ease, transform .12s ease; }
tr.asin-tagged:hover {
    box-shadow: inset 0 0 0 2px var(--tag-color, #dc2626), 0 2px 14px -2px var(--tag-color, #dc2626);
    position: relative; z-index: 3;
}
tr.asin-tagged:hover > td:first-child { border-left-width: 9px !important; }            /* fatter color bar */
tr.asin-tagged:hover > td:first-child { font-weight: 800; color: var(--tag-color, #dc2626); } /* bold + colorful */
@supports (background: color-mix(in srgb, red, blue)) {                                  /* deepen the wash on hover */
    tr.asin-tagged:hover > td { background-color: color-mix(in srgb, var(--tag-color, #dc2626) 24%, transparent) !important; }
}
/* tag dots (reorder + inventory menu) — bigger + brighter on hover */
.ro-color-dot, .page-inventory .inv2-tagdot { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.ro-color-dot:not(.ro-color-dot-empty):hover,
.page-inventory .inv2-tagdot:not(.clear):hover {
    transform: scale(1.65); filter: saturate(1.45) brightness(1.06);
    box-shadow: 0 0 0 3px rgba(0,0,0,.10), 0 2px 7px rgba(0,0,0,.28);
}
.ro-invbd { width:100%; }
.ro-invbd-btn { margin-top:4px; border:1px solid #cdd6e8; border-radius:3px; background:#fff; color:var(--navy-primary); font-size:10px; font-weight:700; padding:2px 7px; cursor:pointer; }
.ro-invbd-btn:hover { background:#f0f7ff; border-color:var(--navy-accent); }
.ro-invbd-list { display:none; margin-top:4px; font-size:10.5px; width:100%; }
.ro-invbd.open .ro-invbd-list { display:block; }
.ro-invbd-row { display:flex; justify-content:space-between; gap:8px; padding:1px 4px; color:#475569; }
.ro-invbd-row.tot { font-weight:800; color:var(--navy-primary); border-top:1px solid #e5e9f2; margin-top:2px; padding-top:2px; }
.ro-pop-scroll { overflow:auto; max-height:60vh; }
.ro-created { font-size:9.5px; color:#94a3b8; margin-top:3px; text-align:center; line-height:1.3; }
.v-dim { color:#94a3b8; }

/* ===== reorder page — migrated from inline (Rule 20) ===== */
    /* chip-cell enhancements — re-scoped from #ordTable so the reorder grid reads identically (base .cell-stack lives in styles.css) */
    #reorderTable tbody td { vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }
    #reorderTable .cell-stack code { background: #f0f4fa; padding: 1px 5px; border-radius: 3px; font-size: 11.5px; color: var(--navy-primary); justify-self: start; cursor: copy; transition: background 0.15s, color 0.15s; }
    #reorderTable .cell-stack code:hover { background: #dbeafe; color: #1d4ed8; }
    #reorderTable .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; }
    #reorderTable .cell-stack code:hover::after { opacity: 1; }
    #reorderTable .cell-stack code.just-copied { background: #d1fae5 !important; color: #047857 !important; }
    #reorderTable .cell-stack code.just-copied::after { content: '\f00c' !important; color: #047857 !important; opacity: 1; }
    #reorderTable .cell-stack code.link-chip { font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: 0.6px; padding: 4px 10px; background: #e0f2fe; color: #075985; max-width: none; }
    #reorderTable .cell-stack code.link-chip i { font-size: 9px; margin-right: 3px; }
    #reorderTable .cell-stack code.link-chip:hover { background: #bae6fd; color: #0c4a6e; }
    #reorderTable .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; }
    #reorderTable .cell-stack code.link-chip:hover::after { opacity: 1; }
    #reorderTable .cell-stack code.link-chip.just-copied::after { content: '\f00c' !important; color: #047857 !important; opacity: 1; }
    /* inline editable cells — same look as orders' qty inputs */
    #reorderTable .cell-num-input { width: 64px; height: 28px; padding: 2px 6px; border: 1px solid #cdd6e8; border-radius: 5px; font-size: 12px; text-align: right; color: var(--navy-primary); background: #fff; -moz-appearance: textfield; }
    #reorderTable .cell-num-input::-webkit-outer-spin-button, #reorderTable .cell-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    #reorderTable .cell-num-input:focus { outline: none; border-color: var(--navy-accent); background: #f5faff; box-shadow: 0 0 0 2px rgba(0,116,217,.12); }
    #reorderTable .cell-num-input:disabled { opacity: .6; cursor: progress; }
    #reorderTable .cell-num-input.qty-saved { background: #e6f7ec; border-color: #34a853; }
    #reorderTable .num-prefix { color: #5f6c80; font-size: 11px; margin-right: 2px; }
    #reorderTable .rec-pill { display: inline-block; background: #cffafe; color: #155e75; border-radius: 10px; padding: 2px 9px; font-size: 12px; font-weight: 700; }
    #reorderTable .hist-mini { font-size: 11px; color: #5f6c80; line-height: 1.5; }
    #reorderTable .hist-mini b { color: var(--navy-primary); }
    /* expand control */
    #reorderTable td.ro-details-control { cursor: pointer; text-align: center; color: var(--navy-accent); width: 34px; }
    #reorderTable td.ro-details-control i { transition: transform .15s; }
    #reorderTable tr.ro-expanded td.ro-details-control i { transform: rotate(90deg); }
    #reorderTable tr.ro-expanded > td { background: #fffbeb !important; }
    /* child (history) row — mirrors orders' variation child styling */
    .ro-child-wrap { background: #fafbfd; padding: 14px 18px; border-top: 2px solid #fbbf24; border-bottom: 2px solid #fbbf24; }
    .ro-child-head { font-size: 13px; font-weight: 600; color: var(--navy-primary); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #e5e9f2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .ro-child-head i { color: #f59e0b; }
    .ro-hist-table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; border: 1px solid #e5e9f2; border-radius: 6px; overflow: hidden; }
    .ro-hist-table th { background: linear-gradient(180deg, #00264d, #001f3f); color: #fff; font-weight: 600; font-size: 10.5px; text-align: left; padding: 6px 9px; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
    .ro-hist-table td { padding: 6px 9px; border-top: 1px solid #eef2f8; color: #2c3e50; white-space: nowrap; }
    .ro-hist-table tr:hover td { background: #f7faff; }
    .ro-hist-empty { padding: 14px; text-align: center; color: #8694a6; font-size: 12.5px; }
    /* search bar + empty/loading states */
    .ro-searchbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
    .ro-searchbar .ro-search-field { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 3px; }
    .ro-searchbar label { font-size: 11px; color: #5f6c80; font-weight: 500; display: flex; align-items: center; gap: 5px; }
    .ro-searchbar input.filter-input, .ro-searchbar select.filter-input { height: 42px; padding: 8px 10px; font-size: 13.5px; }
    .ro-searchbar .ro-search-ta { min-height: 42px; height: 42px; max-height: 96px; overflow-y: auto; padding: 10px 11px; font-size: 13.5px; }
    /* view dropdown (top-right) — tall enough so option text isn't clipped */
    .ro-view-filter select.filter-input { height: 38px; padding: 6px 10px; font-size: 13px; min-width: 230px; }
    .ro-empty-state, .ro-loading-state { text-align: center; padding: 60px 24px; color: #6b7a93; }
    .ro-empty-state i, .ro-loading-state i { font-size: 44px; color: #c3cde0; margin-bottom: 14px; display: block; }
    .ro-empty-state h3 { color: var(--navy-primary); font-size: 17px; margin: 0 0 6px; }
    .ro-empty-state p { font-size: 13px; margin: 0; }
    .ro-acc-chip { display: inline-block; background: #fce7f3; color: #9d174d; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
    .ro-status-chip { display: inline-block; border-radius: 10px; padding: 2px 9px; font-size: 11px; font-weight: 700; text-transform: capitalize; background: #e0e7ff; color: #3730a3; }
    .ro-stock-chip { display: inline-block; border-radius: 10px; padding: 2px 9px; font-size: 11px; font-weight: 700; }
    .ro-stock-ok { background: #dcfce7; color: #166534; }
    .ro-stock-low { background: #fee2e2; color: #991b1b; }
    .prod-img-stack { display: flex; gap: 4px; }
    .prod-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 5px; border: 1px solid #e5e9f2; background: #fff; }

    /* ===== mirror layout (Reverse Sourcing look): navy header + rich cells ===== */
    #reorderTable.dataTable thead th, #roResultsWrap table.dataTable thead th { background: var(--navy-primary); color: #fff; font-weight: 600; font-size: 11px; letter-spacing: .2px; border: none; border-right: 1px solid rgba(255,255,255,.08); vertical-align: middle; padding: 9px 7px; }
    #reorderTable.dataTable tbody td { padding: 8px 7px; }
    /* scrollX containment — table never pushes the page wider */
    #roResultsWrap { overflow-x: auto; }
    #roResultsWrap .dataTables_scrollBody { border-bottom: 1px solid #e5e9f2; }
    #reorderTable.dataTable thead th:first-child { border-top-left-radius: 8px; }
    #reorderTable.dataTable thead th:last-child  { border-top-right-radius: 8px; }
    #reorderTable.dataTable thead th.sorting:after, #reorderTable.dataTable thead th.sorting_asc:after, #reorderTable.dataTable thead th.sorting_desc:after { color: rgba(255,255,255,.55); }
    #reorderTable.dataTable thead th .ro-hdr-i { font-size: 10px; color: rgba(255,255,255,.5); margin-left: 4px; cursor: help; }
    #reorderTable.dataTable tbody td { vertical-align: middle; border-right: 1px solid #eef2f8; }
    #reorderTable.dataTable tbody tr:nth-child(even) td { background: #fafbfd; }
    #reorderTable.dataTable tbody tr:hover td { background: #f3f8ff; }
    /* new sub-label colors */
    #reorderTable .cell-sub-label.sub-cost   { background: #fef3c7; color: #92400e; }
    #reorderTable .cell-sub-label.sub-profit { background: #dcfce7; color: #166534; }
    #reorderTable .cell-sub-label.sub-roi    { background: #e0f2fe; color: #075985; }
    #reorderTable .cell-sub-label.sub-rank   { background: #ede9fe; color: #5b21b6; }
    #reorderTable .cell-sub-label.sub-bb     { background: #fff7ed; color: #9a3412; }
    /* account chip — own full-width row under Supplier (span both cols so it never widens the label column) */
    #reorderTable .ro-prod-cell .ro-acct-cell { grid-column: 1 / -1; margin-top: 2px; }
    /* compact supplier dropdown */
    #reorderTable .ro-prod-cell .ro-sup-sel { font-size: 10.5px; padding: 2px 6px; max-width: 128px; border-radius: 4px; height: auto; }
    .ro-img-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    /* product cell */
    .ro-prod-name { color: var(--navy-primary); font-size: 13px; line-height: 1.3; }
    .ro-amz-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #b45309; text-decoration: none; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; padding: 2px 8px; }
    .ro-amz-link:hover { background: #ffedd5; }
    .ro-amz-link .ro-ext { font-size: 8px; opacity: .7; }
    .ro-sup-line { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #475569; }
    .ro-sup-line i { color: var(--navy-accent); }
    /* financials */
    .ro-fin-profit { color: #16a34a; }
    .ro-fin-roi { color: #0369a1; }
    .ro-fin-rank { display: inline-block; background: #f1f5f9; color: #475569; border-radius: 6px; padding: 1px 7px; font-size: 11.5px; font-weight: 700; }
    /* order history */
    .ro-oh { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
    .ro-oh-card { background: #f8fafc; border: 1px solid #e5e9f2; border-radius: 8px; padding: 7px 9px; }
    .ro-oh-card-top { font-size: 11px; color: #64748b; display: flex; align-items: center; gap: 5px; }
    .ro-oh-card-top b { color: var(--navy-primary); }
    .ro-oh-card-stats { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; }
    .ro-oh-card-stats b { color: var(--navy-primary); font-size: 14px; }
    .ro-oh-price { color: #16a34a; font-weight: 700; font-size: 12.5px; }
    .ro-oh-list { border: 1px solid #eef2f7; border-radius: 7px; overflow: hidden; }
    .ro-oh-row { display: grid; grid-template-columns: 1.3fr .7fr .9fr; gap: 4px; padding: 3px 8px; font-size: 11px; color: #475569; }
    .ro-oh-row:nth-child(even) { background: #f8fafc; }
    .ro-oh-row span:nth-child(2), .ro-oh-row span:nth-child(3) { text-align: right; }
    .ro-oh-head { background: var(--navy-primary) !important; color: #fff; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
    .ro-oh-head span { color: #fff; }
    /* distributor price */
    .ro-distcell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .ro-deltabadge { display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 700; }
    .ro-db-same { background: #dcfce7; color: #166534; }
    .ro-db-up   { background: #fee2e2; color: #b91c1c; }
    .ro-db-down { background: #dbeafe; color: #1e40af; }
    .ro-bigprice { font-size: 17px; font-weight: 800; color: var(--navy-primary); }
    .ro-lastorder { font-size: 11px; color: #64748b; }
    .ro-delta { font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
    .ro-delta-up { color: #b91c1c; }
    .ro-delta-down { color: #1d4ed8; }
    .ro-dist-edit { display: flex; align-items: center; justify-content: center; }
    /* availability */
    .ro-availcell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .ro-stock-warn { background: #fef3c7; color: #92400e; }
    .ro-avail-units { display: flex; align-items: center; gap: 5px; font-weight: 700; color: var(--navy-primary); font-size: 13px; }
    .ro-units-lbl { font-size: 10.5px; color: #94a3b8; font-weight: 500; }
    .ro-avail-meta { font-size: 10.5px; color: #64748b; display: flex; align-items: center; gap: 4px; }
    .ro-avail-meta i { color: var(--navy-accent); }
    /* amazon pricing */
    .ro-amzcell { display: flex; flex-direction: column; gap: 5px; min-width: 104px; }
    .ro-amz-head { color: #f59e0b; font-size: 18px; text-align: center; }
    .ro-amz-sync { font-size: 10px; color: #94a3b8; text-align: center; display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px; }
    /* recommended qty */
    .ro-reccell { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 100px; }
    .ro-rec-big { font-size: 26px; font-weight: 800; line-height: 1; color: #16a34a; }
    .ro-rec-units { font-size: 10.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
    .ro-cov { font-size: 11px; font-weight: 600; margin-top: 2px; }
    .ro-cov-low { color: #dc2626; } .ro-cov-mid { color: #d97706; } .ro-cov-ok { color: #16a34a; } .ro-cov-na { color: #94a3b8; }
    .ro-cov-bar { width: 100%; max-width: 110px; height: 6px; background: #eef2f7; border-radius: 5px; overflow: hidden; margin-top: 2px; }
    .ro-cov-fill { height: 100%; border-radius: 5px; transition: width .3s ease; }
    .ro-cov-fill-low { background: #dc2626; } .ro-cov-fill-mid { background: #f59e0b; } .ro-cov-fill-ok { background: #16a34a; } .ro-cov-fill-na { background: #cbd5e1; }
    .ro-rec-edit { margin-top: 3px; }
    /* actions — status + 3-dot stacked */
    .ro-actcell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .ro-rst-sel { font-size: 11px; border-radius: 6px; padding: 3px 6px; cursor: pointer; }
    /* ===== screenshot-mirror additions: select col, kv rows, OH card, velocity pills, supplier select ===== */
    #reorderTable .ro-sel-cb, #roSelAll { width: 14px; height: 14px; cursor: pointer; accent-color: var(--navy-accent); vertical-align: middle; }
    /* compact first (select) column */
    #reorderTable td.ro-select-col, #reorderTable th.ro-select-col { width: 24px !important; min-width: 24px !important; max-width: 24px !important; padding-left: 3px !important; padding-right: 3px !important; }
    /* product cell: Amazon/tag row spans full width; Supplier dropdown fills its chip-row value */
    #reorderTable .ro-amz-chip { grid-column: 1 / -1; }
    #reorderTable .ro-sup-kv .v { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
    #reorderTable .ro-sup-kv .ro-sup-wrap { width: 100%; }
    #reorderTable .ro-sup-kv .ro-sup-sel { flex: 1; min-width: 0; max-width: none; }
    /* kv rows must span the full cell inside the 2-col .cell-stack grid — else they pair up side-by-side */
    #reorderTable .cell-stack .ro-kv, #reorderTable .cell-stack .ro-sup-block { grid-column: 1 / -1; width: 100%; }
    #reorderTable .ro-kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; line-height: 1.3; min-width: 96px; text-align: left; padding: 0; min-height: 24px; }
    #reorderTable .ro-kv .k { color: var(--navy-primary); font-weight: 700; white-space: nowrap; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 5px; padding: 1px 7px; font-size: 10px; min-width: 64px; box-sizing: border-box; flex: 0 0 auto; }
    #reorderTable .ro-kv .v { font-weight: 700; color: var(--navy-primary); white-space: nowrap; text-align: right; }
    #reorderTable .ro-kv .v-red { color: #dc2626; } #reorderTable .ro-kv .v-green { color: #16a34a; } #reorderTable .ro-kv .v-blue { color: #2563eb; }
    #reorderTable .ro-kv .v-dim { color: #94a3b8; font-weight: 600; font-size: 11px; }
    /* all reorder body cells top-align → clean row-for-row discipline */
    #reorderTable tbody td { vertical-align: top; }
    /* order history — flat kv rows (no card box) */
    .ro-ohc { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
    .ro-ohc-total { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-bottom: 1px solid #eef2f8; font-size: 12px; color: #334155; font-weight: 600; }
    .ro-ohc-total i { color: var(--navy-accent); }
    .ro-ohc-body { padding: 7px 10px; font-size: 11.5px; color: #64748b; line-height: 1.6; }
    .ro-ohc-body .lo-date { color: var(--navy-primary); font-weight: 700; }
    .ro-ohc-stats { display: flex; justify-content: space-between; align-items: center; }
    .ro-ohc-stats b { color: var(--navy-primary); font-size: 13px; }
    .ro-oh-view-btn { align-self: flex-start; margin-top: 4px; border: 1px solid #cdd6e8; border-radius: 3px; background: #fff; color: var(--navy-primary); font-size: 10px; font-weight: 700; padding: 2px 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
    .ro-oh-view-btn:hover { background: #f0f7ff; border-color: var(--navy-accent); }
    .ro-oh-view-btn i { transition: transform .15s; font-size: 9px; }
    .ro-oh-view-btn.open i { transform: rotate(180deg); }
    .ro-ohc-total span:first-child { font-weight: 700; color: var(--navy-primary); }
    .ro-ohc-lbl { font-weight: 700; color: var(--navy-primary); }
    .ro-ohc .ro-oh-price { color: var(--navy-primary); font-weight: 700; }
    /* inline last-5 mini table inside the card */
    .ro-oh-inline { display: none; border-top: 1px solid #e5e9f2; }
    .ro-ohc.open .ro-oh-inline { display: block; }
    .ro-oh-inline .ro-oh-row { padding: 5px 10px; }
    .ro-oh-inline .ro-oh-row span:nth-child(2), .ro-oh-inline .ro-oh-row span:nth-child(3) { text-align: left; }
    /* sales velocity pills */
    .ro-vel { display: flex; flex-direction: column; gap: 5px; min-width: 132px; }
    .ro-vel-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 24px; }
    .ro-vel-btn { border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; padding: 3px 8px; font-size: 11.5px; font-weight: 700; color: var(--navy-primary); box-shadow: none; white-space: nowrap; min-width: 66px; text-align: left; }
    .ro-vel-btn i { color: var(--navy-accent); font-size: 10px; margin-right: 3px; }
    .ro-vel-cust { cursor: pointer; }
    .ro-vel-cust:hover { background: #f0f7ff; border-color: var(--navy-accent); }
    .ro-vel-val { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 10.5px; color: #94a3b8; }
    .ro-vel-custom { font-size: 11px; color: #475569; font-weight: 600; text-align: right; line-height: 1.4; }
    .ro-vel-custom b { color: var(--navy-primary); }
    /* supplier dropdown in product cell */
    .ro-sup-wrap { display: inline-flex; align-items: center; gap: 6px; }
    .ro-sup-sel { font-size: 11.5px; border: 1px solid #cdd6e8; border-radius: 6px; padding: 3px 6px; max-width: 150px; color: var(--navy-primary); background: #fff; cursor: pointer; }
    .ro-sup-sel:focus { outline: none; border-color: var(--navy-accent); }
    /* recommended qty color by coverage */
    .ro-rec-big.rb-low, .ro-rec-big.rb-na { color: #dc2626; }
    .ro-rec-big.rb-mid { color: #f59e0b; }
    .ro-rec-big.rb-ok { color: #16a34a; }
    /* plain copyable values (no chip look — matches reference UI) */
    #reorderTable .ro-plain-copy { cursor: copy; color: var(--navy-primary); }
    #reorderTable .ro-plain-copy:hover { color: #1d4ed8; }
    #reorderTable .ro-plain-copy.just-copied { color: #047857; }
    #reorderTable .ro-prod-cell { min-width: 185px; max-width: 230px; }
    .ro-sup-block { font-size: 12px; margin-top: 2px; }
    .ro-sup-lbl { color: #475569; font-weight: 600; display: inline-block; margin-bottom: 3px; }
    .ro-vel-val .ro-vel-u { color: var(--navy-primary); font-size: 12px; }
    .btn-ro-selcount { font-weight: 600; }
    /* squared theme — every component on this page uses 3px corners */
    .ro-ohc, .ro-oh-view-btn, .ro-vel-btn, .ro-sup-sel, .ro-deltabadge, .ro-stock-chip, .ro-status-chip, .ro-acc-chip, .ro-rst-sel,
    .ro-amz-link, .ro-fin-rank, .ro-cov-bar, .ro-cov-fill, .ro-hist-table, .prod-thumb, .rec-pill, .ro-oh-card, .ro-oh-list,
    .ro-var-badge, #reorderTable .cell-num-input, #reorderTable .cell-stack code,
    .dt-buttons .dt-button, .ro-searchbar .select2-container--default .select2-selection--single { border-radius: 3px !important; }
    #reorderTable.dataTable thead th:first-child { border-top-left-radius: 3px; }
    #reorderTable.dataTable thead th:last-child  { border-top-right-radius: 3px; }
    /* ===== compact pass — ~20% tighter cells, consistent alignment ===== */
    #reorderTable tbody td { padding-top: 6px; padding-bottom: 6px; }
    #reorderTable.dataTable tbody td { padding: 6px; }
    #reorderTable.dataTable thead th, #roResultsWrap table.dataTable thead th { padding: 7px 6px; font-size: 10.5px; }
    #reorderTable .cell-stack { grid-auto-rows: minmax(19px, auto); gap: 3px 8px; }
    #reorderTable .ro-kv { font-size: 11px; line-height: 1.5; gap: 8px; min-width: 84px; }
    #reorderTable .ro-kv .v { text-align: right; }
    #reorderTable .ro-prod-cell { min-width: 165px; max-width: 200px; }
    .ro-prod-name { font-size: 12px; }
    .ro-amz-link { font-size: 10.5px; padding: 1px 6px; }
    .ro-sup-sel { font-size: 11px; max-width: 130px; padding: 2px 5px; }
    .ro-sup-block { font-size: 11px; }
    .prod-thumb { width: 34px; height: 34px; }
    .ro-ohc { min-width: 140px; }
    .ro-ohc-total { padding: 5px 8px; font-size: 11px; }
    .ro-ohc-body { padding: 5px 8px; font-size: 10.5px; line-height: 1.5; }
    .ro-ohc-stats b { font-size: 12px; }
    .ro-oh-view-btn { width: calc(100% - 12px); margin: 2px 6px 6px; padding: 5px 8px; font-size: 10.5px; }
    .ro-oh-inline .ro-oh-row { padding: 4px 8px; font-size: 10.5px; }
    .ro-vel { min-width: 112px; gap: 5px; }
    .ro-vel-btn { padding: 3px 6px; font-size: 10.5px; min-width: 58px; }
    .ro-vel-val { font-size: 10px; }
    .ro-vel-val .ro-vel-u { font-size: 11px; }
    .ro-deltabadge { font-size: 10.5px; padding: 1px 8px; }
    .ro-bigprice { font-size: 15px; }
    .ro-lastorder, .ro-delta { font-size: 10.5px; }
    #reorderTable .cell-num-input { width: 58px; height: 24px; font-size: 11.5px; }
    .ro-stock-chip { font-size: 10.5px; padding: 1px 7px; }
    .ro-avail-units { font-size: 12px; }
    .ro-avail-meta { font-size: 10px; }
    .ro-amzcell { min-width: 92px; gap: 5px; }
    .ro-amz-head { font-size: 15px; }
    .ro-reccell { min-width: 88px; gap: 2px; }
    .ro-rec-big { font-size: 21px; }
    .ro-rec-units { font-size: 10px; }
    .ro-cov { font-size: 10.5px; }
    .ro-cov-bar { height: 5px; max-width: 90px; }
    .ro-rst-sel { font-size: 10.5px; padding: 2px 5px; }

/* ============ Inventory — Seller Central skin (scoped) ============ */
.page-inventory {
    --iv-navy:#072540; --iv-green:#087a2d; --iv-blue:#1976d2; --iv-orange:#f59a0b;
    --iv-red:#dd1e1e; --iv-purple:#8f22c7; --iv-line:#e8ebf1; --iv-line2:#d8dde7;
    --iv-ink:#151827; --iv-muted:#6d7485;
}
/* stat cards */
.page-inventory .inv2-cards { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:16px 0; }
.page-inventory .inv2-stat { display:grid; grid-template-columns:54px 1fr; align-items:center; gap:10px; min-height:58px; padding:12px 14px; background:#fff; border:1px solid var(--iv-line); border-radius:8px; box-shadow:0 4px 14px rgba(20,25,40,.05); }
.page-inventory .inv2-stat .inv2-round { width:46px; height:46px; border-radius:50%; background:#f5f6f8; display:grid; place-items:center; font-size:20px; color:#3a4254; }
.page-inventory .inv2-stat .inv2-slabel { text-transform:uppercase; color:#243044; font-size:11px; font-weight:800; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.page-inventory .inv2-stat .inv2-svalue { margin-top:3px; font-size:24px; line-height:1; font-weight:800; color:var(--iv-ink); }
.page-inventory .inv2-stat.profit .inv2-svalue, .page-inventory .inv2-stat.profit .inv2-round { color:var(--iv-green); }
.page-inventory .inv2-stat.roi .inv2-round { color:var(--iv-purple); }
.page-inventory .inv2-stat.blue .inv2-round { color:var(--iv-blue); }
.page-inventory .inv2-stat.orange .inv2-round { color:#f27d00; }
.page-inventory .inv2-stat.red .inv2-round { color:var(--iv-red); }
/* batch action bar */
.page-inventory .inv2-batchbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--iv-line); border-bottom:0; background:#fbfcfe; border-radius:8px 8px 0 0; }
.page-inventory .inv2-bbtn { height:36px; border:1px solid var(--iv-line2); background:#fff; border-radius:5px; padding:0 13px; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#273044; cursor:pointer; }
.page-inventory .inv2-bbtn:hover { background:#f1f5fb; }
.page-inventory .inv2-bbtn[disabled] { opacity:.5; cursor:not-allowed; }
.page-inventory .inv2-selcount { margin-left:auto; color:var(--iv-muted); font-weight:700; font-size:13px; }
.page-inventory .inv2-selcount b { color:var(--iv-navy); }
.page-inventory .inv2-tagwrap { position:relative; }
.page-inventory .inv2-tagmenu { position:absolute; top:42px; left:0; min-width:200px; background:#fff; border:1px solid #e2e6ee; box-shadow:0 8px 22px rgba(20,25,40,.14); border-radius:6px; padding:5px 0; z-index:30; }
.page-inventory .inv2-tagmenu[hidden] { display:none; }
.page-inventory .inv2-tagitem { display:flex; align-items:center; gap:12px; height:34px; padding:0 16px; font-size:13px; font-weight:700; color:#273044; cursor:pointer; }
.page-inventory .inv2-tagitem:hover { background:#f3f6fb; }
.page-inventory .inv2-tagdot { width:13px; height:13px; border-radius:50%; display:inline-block; }
.page-inventory .inv2-tagdot.clear { background:#fff; border:1px solid #8a93a5; }
/* table */
.page-inventory #invTable { border-collapse:collapse; }
.page-inventory #invTable thead th { background:var(--iv-navy); color:#f7fbff; font-size:12px; font-weight:700; letter-spacing:.02em; text-align:left; padding:10px 12px; border-right:1px solid rgba(255,255,255,.14); white-space:nowrap; vertical-align:middle; }
.page-inventory #invTable tbody td { vertical-align:top; padding:12px 12px; border-top:1px solid var(--iv-line); border-right:1px solid var(--iv-line); background:#fff; }
.page-inventory #invTable tbody tr.row-good td, .page-inventory #invTable tbody tr.row-bad td, .page-inventory #invTable tbody tr.row-wait td, .page-inventory #invTable tbody tr.row-none td { background:#fff; }
.page-inventory #invTable tbody tr:hover td { background:#fbfcff; }
.page-inventory #invTable .inv2-cb-col { text-align:center; width:38px; }
.page-inventory #invTable input.inv2-rowcheck, .page-inventory #invTable #invSelectAll { width:16px; height:16px; accent-color:var(--iv-blue); cursor:pointer; }
/* product cell */
.page-inventory .inv2-prod { display:grid; grid-template-columns:54px 1fr; gap:11px; align-items:start; min-width:200px; }
.page-inventory .inv2-photo { width:54px; height:58px; border:1px solid var(--iv-line); border-radius:5px; display:grid; place-items:center; overflow:hidden; background:#fff; }
.page-inventory .inv2-photo img { width:100%; height:100%; object-fit:contain; }
.page-inventory .inv2-photo .inv2-noimg { color:#c2cbd8; font-size:20px; }
.page-inventory .inv2-pname { font-size:14px; line-height:1.2; font-weight:800; color:#11172a; margin-bottom:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.page-inventory .inv2-psub { color:#46506a; font-weight:600; font-size:12px; line-height:1.5; }
.page-inventory .inv2-psub i { width:13px; color:#8a93a5; }
.page-inventory .inv2-used { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; color:#b45309; background:#fff7ed; border:1px solid #fed7aa; border-radius:3px; padding:1px 7px; text-transform:uppercase; letter-spacing:.5px; }
.page-inventory .inv2-used i { color:#ea8a0c; width:auto; }
/* id cell */
.page-inventory .inv2-ids { display:grid; gap:6px; min-width:185px; }
.page-inventory .inv2-idrow { display:grid; grid-template-columns:50px 1fr 22px; gap:8px; align-items:center; font-size:12.5px; }
.page-inventory .inv2-idlabel { font-weight:800; color:#5c6678; }
.page-inventory .inv2-idval { font-weight:800; color:#141b2f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-inventory a.inv2-idval { color:#0d6ed6; text-decoration:none; }
.page-inventory a.inv2-idval:hover { text-decoration:underline; }
.page-inventory .inv2-copy { border:0; background:transparent; color:#7a869a; cursor:pointer; font-size:13px; padding:2px; }
.page-inventory .inv2-copy:hover { color:var(--iv-blue); }
/* key/value cells (sales, profit) */
.page-inventory .inv2-kv { display:grid; gap:5px; min-width:150px; }
.page-inventory .inv2-kvrow { display:grid; grid-template-columns:1fr auto; gap:10px; font-size:13px; line-height:1.45; }
.page-inventory .inv2-kvrow span { color:#43506a; font-weight:600; }
.page-inventory .inv2-kvrow b { font-weight:800; color:#11182a; text-align:right; }
.page-inventory .inv2-kvrow b.pos { color:var(--iv-green); }
.page-inventory .inv2-kvrow b.neg { color:var(--iv-red); }
.page-inventory .inv2-kvrow b.muted { color:#9aa3b2; }
/* availability */
.page-inventory .inv2-avail { display:grid; gap:5px; min-width:165px; }
.page-inventory .inv2-stbadge { display:inline-flex; align-items:center; gap:6px; align-self:start; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:800; margin-bottom:3px; }
.page-inventory .inv2-stbadge.st-healthy { background:#e4f7ec; color:#087a2d; }
.page-inventory .inv2-stbadge.st-low_stock { background:#fff3d6; color:#9a6700; }
.page-inventory .inv2-stbadge.st-reorder_needed { background:#fde8d6; color:#b1490a; }
.page-inventory .inv2-stbadge.st-out_of_stock { background:#fdecea; color:#c0211f; }
.page-inventory .inv2-stbadge.st-inbound { background:#e3f0fd; color:#0d62b8; }
.page-inventory .inv2-more { border:0; background:transparent; color:#0d72bd; font-weight:800; font-size:12.5px; cursor:pointer; padding:2px 0; text-align:left; }
/* toolbar sort-by */
.inv-sort { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:#43506a; }
.inv-sort-sel { padding:7px 10px; border:1px solid #c4d2e3; border-radius:6px; background:#fff; color:#11182a; font-size:13px; font-weight:600; cursor:pointer; min-width:170px; }
.inv-sort-sel:focus { outline:none; border-color:var(--navy-accent,#0074D9); box-shadow:0 0 0 2px rgba(0,116,217,.2); }
/* selected-periods columns (Sales & Refunds / Profit & ROI) */
.page-inventory .sr-periods, .page-inventory .pr-periods { display:grid; gap:4px; min-width:150px; }
.page-inventory .sr-prow { display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:12.5px; line-height:1.4; align-items:baseline; }
.page-inventory .sr-plabel { color:#43506a; font-weight:700; white-space:nowrap; }
.page-inventory .sr-pval { font-weight:800; color:#11182a; text-align:right; white-space:nowrap; }
.page-inventory .sr-pval b.neg { color:var(--iv-red); }
.page-inventory .sr-pval b.muted { color:#9aa3b2; }
.page-inventory .pr-prow { display:grid; grid-template-columns:1fr auto; gap:12px; font-size:12.5px; line-height:1.4; align-items:baseline; }
.page-inventory .pr-profit { font-weight:800; }
.page-inventory .pr-roi { font-weight:700; text-align:right; white-space:nowrap; }
.page-inventory .pr-profit.pos, .page-inventory .pr-roi.pos { color:var(--iv-green); }
.page-inventory .pr-profit.neg, .page-inventory .pr-roi.neg { color:var(--iv-red); }
.page-inventory .pr-profit.muted, .page-inventory .pr-roi.muted { color:#9aa3b2; }
.page-inventory .sr-more { margin-top:3px; display:inline-flex; align-items:center; gap:5px; }
.page-inventory .sr-more .fa-chevron-right { font-size:9px; }
.th-hint { font-weight:600; font-size:11px; opacity:.82; cursor:help; white-space:nowrap; }
.th-hint .fa-circle-question { font-size:11px; opacity:.85; }
/* period picker popup */
.period-picker-modal { max-width:440px; width:94%; }
.period-picker-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
.period-picker-item { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--text-primary); cursor:pointer; padding:7px 6px; border-radius:4px; margin:0; }
.period-picker-item:hover { background:rgba(0,116,217,0.07); }
.period-picker-item input { width:17px; height:17px; flex:0 0 auto; }
.period-picker-custom { display:none; gap:14px; margin-top:8px; padding-top:14px; border-top:1px solid var(--input-border,#e2e8f0); }
.period-picker-custom.active { display:flex; }
.period-picker-custom .pp-fld { flex:1; }
.period-picker-custom label { display:block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#5a6b80; margin-bottom:5px; }
.period-picker-custom input { width:100%; padding:9px 11px; border:1px solid var(--input-border,#c4d2e3); border-radius:3px; font-size:15px; background:var(--input-bg,#fff); color:var(--text-primary); }
.period-picker-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid var(--input-border,#e2e8f0); }
.period-picker-count { font-size:13px; font-weight:700; color:#43506a; }
.period-picker-foot .pp-btns { display:flex; gap:8px; }
/* availability breakdown popup */
.inv-detail-modal { max-width:420px; width:92%; }
.inv-bd-grid { display:grid; gap:7px; }
.inv-bd-grid .inv2-kvrow, .inv-bd-health .inv2-kvrow { display:grid; grid-template-columns:1fr auto; gap:14px; font-size:14px; line-height:1.5; }
.inv-bd-grid .inv2-kvrow span, .inv-bd-health .inv2-kvrow span { color:#43506a; font-weight:600; }
.inv-bd-grid .inv2-kvrow b, .inv-bd-health .inv2-kvrow b { font-weight:800; color:#11182a; text-align:right; }
.inv-bd-grid .inv2-kvrow b.pos { color:var(--iv-green); }
.inv-bd-grid .inv2-kvrow b.neg { color:var(--iv-red); }
.inv-bd-grid .inv2-kvrow b.muted, .inv-bd-health .inv2-kvrow b.muted { color:#9aa3b2; }
.inv-bd-total { margin-top:6px; padding-top:8px; border-top:2px solid var(--input-border,#e2e8f0); }
.inv-bd-total .inv2-kvrow span, .inv-bd-total .inv2-kvrow b { font-size:15px; font-weight:900; }
.inv-bd-health { margin-top:16px; padding-top:14px; border-top:1px dashed var(--input-border,#cdd8e6); display:grid; gap:7px; }
.inv-bd-health-h { font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#0d62b8; margin-bottom:3px; }
/* compact density — smaller data in every inventory column */
.page-inventory #invTable.dataTable thead th, .page-inventory #invTable thead th { padding:7px 9px!important; font-size:11px!important; }
.page-inventory #invTable.dataTable tbody td, .page-inventory #invTable tbody td { padding:6px 9px!important; font-size:12px; }
.page-inventory .inv2-prod { grid-template-columns:42px 1fr; gap:8px; min-width:158px; }
.page-inventory .inv2-prod { grid-template-columns:44px 1fr; }
.page-inventory .inv2-photo { width:44px; height:44px; }
.page-inventory .inv2-photo .inv2-noimg { font-size:15px; }
.page-inventory .inv2-pname { font-size:12px; margin-bottom:3px; line-height:1.18; }
.page-inventory .inv2-psub { font-size:10.5px; line-height:1.4; }
.page-inventory .inv2-psub i { width:11px; }
.page-inventory .inv2-ids { gap:4px; min-width:140px; }
.page-inventory .inv2-idrow { grid-template-columns:40px 1fr 18px; gap:6px; font-size:10.5px; }
.page-inventory .inv2-copy { font-size:10.5px; padding:1px; }
/* availability — compact */
.page-inventory .inv2-kv { gap:2px; min-width:104px; }
.page-inventory .inv2-kvrow { gap:8px; font-size:10.5px; line-height:1.25; }
.page-inventory .inv2-avail { gap:2px; min-width:112px; }
.page-inventory .inv2-stbadge { font-size:9.5px; padding:2px 6px; gap:4px; margin-bottom:1px; }
/* selected-periods cols — clean label-left / value-right, no cramping */
.page-inventory .sr-periods, .page-inventory .pr-periods { gap:2px; min-width:106px; }
.page-inventory .sr-prow, .page-inventory .pr-prow { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:10.5px; line-height:1.3; }
.page-inventory .sr-plabel { font-weight:600; color:#8a93a5; }
.page-inventory .sr-pval, .page-inventory .pr-profit { font-weight:800; }
.page-inventory .pr-roi { font-weight:700; }
.page-inventory .sr-more, .page-inventory .inv2-more { font-size:10.5px; }
.page-inventory .actions-cell .badge-chip, .page-inventory .actions-cell .act { font-size:12px; }
.page-inventory .inv2-breakdown[hidden] { display:none; }
.page-inventory .inv2-breakdown { margin-top:4px; padding-top:6px; border-top:1px dashed var(--iv-line2); display:grid; gap:5px; }
/* price/cost */
.page-inventory .inv2-price { display:grid; gap:2px; min-width:84px; }
.page-inventory .inv2-price-main { font-size:13.5px; font-weight:900; letter-spacing:.02em; color:#12182b; }
.page-inventory .inv2-price-main.neg { color:var(--iv-red); }
.page-inventory .inv2-price-sub { color:#5c6678; font-size:10px; font-weight:700; }
/* inline price edit (pencil) — compact squared box */
.page-inventory .inv2-edit { display:inline-flex; align-items:center; gap:2px; }
.page-inventory .inv2-edit-pre { font-size:11px; font-weight:800; color:#5c6678; }
.page-inventory .inv2-price-input { width:58px; height:24px; padding:1px 5px; border:1px solid #cdd6e8; border-radius:3px; font-size:12.5px; font-weight:900; text-align:right; color:#12182b; background:#fff; -moz-appearance:textfield; }
.page-inventory .inv2-price-input::-webkit-outer-spin-button, .page-inventory .inv2-price-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.page-inventory .inv2-price-input:focus { outline:none; border-color:var(--navy-accent); background:#f5faff; box-shadow:0 0 0 2px rgba(0,116,217,.12); }
.page-inventory .inv2-price-input:disabled { opacity:.6; cursor:progress; }
.page-inventory .inv2-edit-ic { color:#9aa6bd; font-size:10px; cursor:text; }
/* costing-method dropdown */
.page-inventory .inv2-cost-method { width:100%; max-width:110px; height:24px; margin-top:2px; padding:2px 6px; border:1px solid #cdd6e8; border-radius:3px; font-size:11px; font-weight:800; color:var(--navy-primary); background:#fff; cursor:pointer; }
.page-inventory .inv2-cost-method:focus { outline:none; border-color:var(--navy-accent); box-shadow:0 0 0 2px rgba(0,116,217,.12); }
.page-inventory .inv2-cost-method:disabled { opacity:.6; cursor:progress; }
.page-inventory .inv2-cm-ro { text-transform:uppercase; letter-spacing:.04em; }
/* responsive */
@media (max-width:1380px) { .page-inventory .inv2-cards { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px)  { .page-inventory .inv2-cards { grid-template-columns:1fr; } .page-inventory .inv2-selcount { margin-left:0; } }

/* ============ Reorder — Reverse Sourcing DataTable skin (scoped override) ============ */
.page-reorder { --rv-navy:#061f3a; --rv-line:#e5e9f1; --rv-line2:#d9dfeb; --rv-blue:#0b63c7; }
/* table card + toolbar */
.page-reorder #reorderTable_wrapper { background:#fff; border:1px solid var(--rv-line); border-radius:6px; box-shadow:0 1px 0 rgba(0,0,0,.02); }
.page-reorder #reorderTable_wrapper .dt-buttons { display:inline-flex; flex-wrap:wrap; gap:8px; }
.page-reorder #reorderTable_wrapper .dt-buttons .dt-button { min-height:44px; margin:0; border:none; background:var(--navy-primary); border-radius:4px; padding:10px 16px; color:#fff; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.page-reorder #reorderTable_wrapper .dt-buttons .dt-button:hover { background:var(--navy-hover); }
/* "N selected" counter → soft grey pill like ord-sel-counter (products/orders), not a filled navy button */
.page-reorder #reorderTable_wrapper .dt-buttons .dt-button.btn-ro-selcount { background:#f0f4fa !important; color:#5f6c80 !important; border:1px solid #d7def0 !important; border-radius:12px !important; box-shadow:none !important; font-weight:600; min-height:36px; }
.page-reorder #reorderTable_wrapper .dt-buttons .dt-button.btn-ro-selcount:hover { background:#e6edf6 !important; color:#334155 !important; }
/* select-column checkbox → 16px squared navy, matches the shared select-checkbox look */
.page-reorder #reorderTable .ro-sel-cb, .page-reorder #roSelAll { width:16px; height:16px; border-radius:3px; accent-color:var(--navy-accent); cursor:pointer; vertical-align:middle; }
.page-reorder #reorderTable_wrapper .dataTables_length select { height:36px; border:1px solid var(--rv-line2); border-radius:4px; padding:0 10px; font-weight:800; }
.page-reorder #reorderTable_wrapper .dataTables_filter input { height:38px; min-width:240px; border:1px solid var(--rv-line2); border-radius:5px; padding:0 13px; }
/* header — flat navy, square corners */
.page-reorder #reorderTable.dataTable thead th { background:var(--rv-navy); color:#f8fbff; height:40px; font-size:12px; font-weight:800; letter-spacing:.02em; border:none; border-right:1px solid rgba(255,255,255,.13); padding:0 14px; vertical-align:middle; white-space:nowrap; }
.page-reorder #reorderTable.dataTable thead th:first-child, .page-reorder #reorderTable.dataTable thead th:last-child { border-radius:0; }
.page-reorder #reorderTable.dataTable thead th.sorting:after, .page-reorder #reorderTable.dataTable thead th.sorting_asc:after, .page-reorder #reorderTable.dataTable thead th.sorting_desc:after { color:rgba(255,255,255,.55); }
/* rows — tall, top-aligned, airy */
.page-reorder #reorderTable.dataTable tbody td { vertical-align:top; padding:11px 13px; border-top:1px solid var(--rv-line); border-right:1px solid var(--rv-line); background:#fff; }
.page-reorder #reorderTable.dataTable tbody tr:hover td { background:#fbfcff; }
/* distributor price */
.page-reorder .ro-bigprice { font-size:25px; font-weight:900; letter-spacing:.04em; color:#0f1732; }
.page-reorder .ro-deltabadge { height:30px; border:1px solid transparent; border-radius:4px; padding:0 12px; font-size:12px; font-weight:900; }
.page-reorder .ro-db-same { background:#e9f7ef; color:#13824e; border-color:#ccebdd; }
.page-reorder .ro-db-up, .page-reorder .ro-db-down { background:#fdecec; color:#ca3030; border-color:#f1c9c9; }
.page-reorder .ro-lastorder { font-size:12px; font-weight:760; color:#27324f; margin-top:6px; }
.page-reorder .ro-delta-up { color:#d63333; font-weight:900; }
.page-reorder .ro-delta-down { color:#0f9b5a; font-weight:900; }
/* availability */
.page-reorder .ro-stock-chip { height:22px; display:inline-flex; align-items:center; border-radius:4px; padding:0 8px; font-size:10.5px; font-weight:800; }
/* top status chip doubles as the send-to-Out-of-Stock trigger */
.page-reorder .ro-stock-chip.ro-stock-click { cursor:pointer; transition:filter .12s, box-shadow .12s; }
.page-reorder .ro-stock-chip.ro-stock-click:hover { filter:brightness(0.94); box-shadow:0 0 0 2px rgba(0,116,217,0.18); }
.ro-oos-exists { font-size:10px; font-weight:700; color:#1e8e4e; background:#eafaf0; border:1px solid #b7e6c9; border-radius:3px; padding:1px 7px; margin-top:5px; display:inline-flex; align-items:center; gap:4px; }
/* send-to-Out-of-Stock confirm modal body (roModalShell slot) */
.ro-oos-confirm { text-align:center; padding:8px 4px 4px; }
.ro-oos-confirm .ro-oos-ic { width:54px; height:54px; margin:0 auto 12px; border-radius:6px; background:#fff5f5; color:#c0392b; display:flex; align-items:center; justify-content:center; font-size:24px; }
.ro-oos-confirm .ro-oos-ic-info { background:#eef4fb; color:#0074D9; }
.ro-oos-confirm .ro-oos-q { font-size:15px; color:var(--navy-primary); margin:0 0 6px; }
.ro-oos-confirm .ro-oos-sub { font-size:12.5px; color:#64748b; margin:0; }
.page-reorder .ro-stock-ok { background:#e9f7ef; color:#12894f; border:1px solid #cfeedd; }
.page-reorder .ro-stock-warn { background:#fff3e3; color:#bd6812; border:1px solid #f7d7b4; }
.page-reorder .ro-stock-low { background:#fdecec; color:#ca3030; border:1px solid #f1c9c9; }
/* recommended qty */
.page-reorder .ro-rec-big { font-size:29px; font-weight:900; letter-spacing:.04em; }
.page-reorder .ro-cov-bar { width:102px; max-width:102px; height:5px; background:#e7ecf2; border-radius:30px; margin-top:6px; }
/* order-history card */
.page-reorder .ro-ohc { border:none; min-width:200px; }
.page-reorder .ro-ohc-total { font-size:12px; font-weight:850; color:#1f2b46; }
.page-reorder .ro-oh-row { font-size:12px; }
.page-reorder .ro-oh-row.ro-oh-head { font-weight:880; color:#23304c; }
/* kebab */
.page-reorder .row-action-trigger { width:39px; height:39px; border:1px solid var(--rv-line2); border-radius:5px; font-size:18px; color:#131b2f; }
/* footer + pagination */
.page-reorder #reorderTable_wrapper .dataTables_info { color:#25314c; font-size:13px; font-weight:750; padding-top:14px; }
.page-reorder #reorderTable_wrapper .dataTables_paginate .paginate_button { min-width:36px; height:36px; border:1px solid var(--rv-line2) !important; background:#fff !important; color:#24304b !important; border-radius:4px; margin:0 3px; padding:0; font-weight:800; }
.page-reorder #reorderTable_wrapper .dataTables_paginate .paginate_button.current { background:#0b6ed0 !important; border-color:#0b6ed0 !important; color:#fff !important; }
.page-reorder #reorderTable_wrapper .dataTables_paginate .paginate_button:hover { background:#f2f4f7 !important; color:#101828 !important; }
/* fixed to screen — keep the wide table contained; horizontal scroll lives in the card, page stays put */
.page-reorder .main-content { min-width:0; }
.page-reorder #reorderTable_wrapper { width:100%; max-width:100%; }
.page-reorder #reorderTable_wrapper .dataTables_scroll,
.page-reorder #reorderTable_wrapper .dataTables_scrollHead,
.page-reorder #reorderTable_wrapper .dataTables_scrollBody { max-width:100%; }
.page-reorder #reorderTable_wrapper .dataTables_scrollBody { overflow-x:auto; }
/* Sales Velocity — pills size to their text + never shrink, so 15/30 Days + Custom never clip */
.page-reorder .ro-vel { min-width:152px; }
.page-reorder .ro-vel-row { gap:10px; }
.page-reorder .ro-vel-btn { flex:0 0 auto; width:max-content; min-width:max-content; white-space:nowrap; overflow:visible; }
.page-reorder .ro-vel-val { flex:0 0 auto; }
/* Current Distributor Price — compact column width */
.page-reorder #reorderTable.dataTable th.ro-distprice-col { white-space:normal; line-height:1.25; }
.page-reorder #reorderTable.dataTable td.ro-distprice-col { white-space:normal; padding-left:8px; padding-right:8px; }
.page-reorder .ro-distcell { max-width:104px; margin:0 auto; }
.page-reorder .ro-distcell .ro-bigprice { font-size:19px; letter-spacing:0; }
.page-reorder .ro-distcell .ro-lastorder { font-size:11px; line-height:1.35; }
.page-reorder .ro-distcell .ro-delta { font-size:11px; }
/* Amazon link + account chip share one row */
.page-reorder .ro-amz-chip { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* condition (NEW) badge under the product image + compact image column */
.page-reorder .ro-img-col { gap:2px; }
.page-reorder .ro-img-col .prod-img-stack { gap:2px; }
.page-reorder .ro-img-col .prod-thumb { width:30px; height:30px; }
.page-reorder .ro-img-col .ro-cond-badge { margin-top:2px; font-size:8px; padding:0 4px; }
.page-reorder .ro-img-col .ro-var-badge { font-size:9px; padding:1px 5px; }
.page-reorder #reorderTable td.ro-img-cell { padding-left:3px; padding-right:3px; }

/* ===== reorder — same enterprise skin as orders/products (dattable.md); CSS-only, page logic untouched ===== */
.page-reorder { --iv-navy:#072540; --iv-blue:#1976d2; --iv-line:#e8ebf1; --iv-line2:#d8dde7; --iv-ink:#151827; --iv-muted:#6d7485; --iv-label:#5c6678; --iv-icon:#8a93a5; --iv-link:#0d6ed6; --iv-row:#fff; --iv-row-alt:#fafbfd; --iv-row-hover:#f3f7fd; }
body.dark-mode.page-reorder { --iv-blue:#5aa9f7; --iv-line:#262626; --iv-line2:#333333; --iv-ink:#f5f5f5; --iv-muted:#8f8f8f; --iv-label:#b3b3b3; --iv-icon:#858585; --iv-link:#6cb2ff; --iv-row:#141414; --iv-row-alt:#191919; --iv-row-hover:#202020; }
/* shell — navy uppercase header, tabular nums, roomy bordered cells (mirrors body.page-orders #ordTable) */
body.page-reorder #reorderTable.dataTable { border-collapse:collapse; font-variant-numeric:tabular-nums; }
body.page-reorder #reorderTable.dataTable thead th { background:var(--iv-navy) !important; color:#f7fbff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:10px 12px; border:none; border-right:1px solid rgba(255,255,255,.14); border-bottom:2px solid #0d72bd; white-space:nowrap; vertical-align:middle; }
body.page-reorder #reorderTable.dataTable thead th .ro-hdr-i { opacity:.7; font-size:10px; color:rgba(255,255,255,.6); }
body.page-reorder #reorderTable.dataTable tbody td { vertical-align:top; padding:9px 12px !important; font-size:12.5px; border-top:1px solid var(--iv-line); border-right:1px solid var(--iv-line); background:transparent; }
body.page-reorder #reorderTable.dataTable tbody tr:hover td { background:var(--iv-row-hover); }
/* flat labels — kill the colored pill chips → flat grey labels like orders */
body.page-reorder #reorderTable .cell-sub-label { background:none !important; border:0 !important; padding:0 !important; margin:0; box-shadow:none !important; border-radius:0; color:var(--iv-label) !important; font-weight:600; font-size:11.5px; letter-spacing:0; text-transform:none; justify-self:start; text-align:left; }
body.page-reorder #reorderTable .cell-sub-label i { width:13px; color:var(--iv-icon); font-size:10px; }
/* flat code values — asin/fnsku/links like orders' Product col (drop the light-blue chip bg + link pill) */
body.page-reorder #reorderTable .cell-stack code { background:none !important; border:0; padding:0 !important; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--iv-ink); letter-spacing:.01em; }
body.page-reorder #reorderTable .cell-stack code.link-chip, body.page-reorder #reorderTable .cell-stack code.url-code { color:var(--iv-link); letter-spacing:.01em; font-weight:700; }
body.page-reorder #reorderTable .cell-stack code:hover { background:none !important; color:var(--iv-link); text-decoration:underline; }
body.page-reorder #reorderTable .cell-stack code::after { color:var(--iv-icon) !important; }
/* row-action kebab — squared 30px like orders (drop reorder's 39px bordered box) */
body.page-reorder #reorderTable .row-action-trigger { width:30px; height:30px; border:none; border-radius:3px; font-size:14px; color:var(--iv-ink); }
/* table shell → flat like orders (no bordered card/shadow); current page → shared navy */
body.page-reorder #reorderTable_wrapper { background:transparent; border:0; border-radius:0; box-shadow:none; }
body.page-reorder #reorderTable_wrapper .dataTables_paginate .paginate_button.current { background:var(--navy-primary) !important; border-color:var(--navy-primary) !important; color:#fff !important; }
/* chip cells → 3-col grid (label | value | copy pinned right) like orders — value track = max-content so
   dense cells never let the copy chip overlap the value (1fr middle track collapses in a 12-col table) */
body.page-reorder #reorderTable > tbody > tr > td > .cell-stack { grid-template-columns:max-content max-content 1fr; gap:5px 8px; width:100%; }
body.page-reorder #reorderTable .cell-stack-val { white-space:nowrap; }
body.page-reorder #reorderTable .ro-prod-cell { min-width:210px; max-width:280px; }
body.page-reorder #reorderTable .cell-stack code.link-chip, body.page-reorder #reorderTable .cell-stack code.url-code { max-width:none; overflow:visible; text-overflow:clip; white-space:nowrap; }
/* copy chips — 3rd grid col pinned right (ride the existing .cell-stack code copy handler) */
body.page-reorder #reorderTable .cell-stack code.inv2-copy { background:none !important; border:0 !important; padding:2px !important; font-family:inherit; font-size:11.5px; color:var(--iv-icon); cursor:pointer; justify-self:end; }
body.page-reorder #reorderTable .cell-stack code.inv2-copy:hover { color:var(--iv-blue); text-decoration:none; background:none !important; }
body.page-reorder #reorderTable .cell-stack code.inv2-copy::after { content:none !important; }
body.page-reorder #reorderTable .cell-stack code.inv2-copy.just-copied { color:#047857 !important; background:none !important; }
/* single-item rows span the whole 3-col grid (account chip, Load-from-Amazon) */
body.page-reorder #reorderTable .cell-stack .ro-acct-cell, body.page-reorder #reorderTable .cell-stack .ro-loadrow-btn { grid-column:1 / -1; }
/* order-history rows — same 3-col alignment inside the .ro-ohc card */
body.page-reorder #reorderTable .ro-ohc .cell-stack { display:grid; grid-template-columns:max-content max-content 1fr; gap:5px 8px; width:100%; margin-bottom:6px; }
/* values — bold ink like orders, with semantic reds/greens */
body.page-reorder #reorderTable .cell-stack-val strong { color:var(--iv-ink); font-weight:800; font-size:12px; }
body.page-reorder #reorderTable .cell-stack-val strong.v-red, body.page-reorder #reorderTable .cell-stack-val .v-red { color:#dc2626; }
body.page-reorder #reorderTable .cell-stack-val strong.v-green, body.page-reorder #reorderTable .cell-stack-val .v-green { color:#16a34a; }
body.page-reorder #reorderTable .cell-stack-val strong.v-blue, body.page-reorder #reorderTable .cell-stack-val .v-blue { color:#1976d2; }
body.page-reorder #reorderTable .cell-stack-val strong.v-dim, body.page-reorder #reorderTable .cell-stack-val.v-dim { color:var(--iv-muted); font-weight:600; }
/* in-cell buttons → orders' cell-icon-btn look (small squared grey) */
body.page-reorder #reorderTable .ro-loadrow-btn, body.page-reorder #reorderTable .ro-oh-view-btn, body.page-reorder #reorderTable .ro-invbd-btn,
body.page-reorder #reorderTable .ro-bb-fetch, body.page-reorder #reorderTable .ro-sr-load, body.page-reorder #reorderTable .ro-sr-toggle {
    background:#f0f4fa; color:#334155; border:1px solid #d7def0; border-radius:3px; padding:3px 9px; font-size:11px; font-weight:600;
    cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:border-color .12s, background .12s; }
body.page-reorder #reorderTable .ro-loadrow-btn:hover, body.page-reorder #reorderTable .ro-oh-view-btn:hover, body.page-reorder #reorderTable .ro-invbd-btn:hover,
body.page-reorder #reorderTable .ro-bb-fetch:hover, body.page-reorder #reorderTable .ro-sr-load:hover, body.page-reorder #reorderTable .ro-sr-toggle:hover { border-color:var(--navy-accent); background:#e8f1fb; }
body.dark-mode.page-reorder #reorderTable .ro-loadrow-btn, body.dark-mode.page-reorder #reorderTable .ro-oh-view-btn, body.dark-mode.page-reorder #reorderTable .ro-invbd-btn,
body.dark-mode.page-reorder #reorderTable .ro-bb-fetch, body.dark-mode.page-reorder #reorderTable .ro-sr-load, body.dark-mode.page-reorder #reorderTable .ro-sr-toggle { background:#1c1c1c; color:#e5e5e5; border-color:#3a3a3a; }
/* compact chips — Load-from-Amazon + View-last-5 size to their text, never stretch the column */
body.page-reorder #reorderTable .ro-loadrow-btn { justify-self:start; width:max-content; padding:2px 8px; font-size:10.5px; gap:4px; }
body.page-reorder #reorderTable .ro-oh-view-btn { width:max-content; padding:2px 8px; font-size:10.5px; }
body.page-reorder #reorderTable .ro-ohc { min-width:0; }

/* ===== enterprise skin (shared) — pricing / out-of-stock / ungated / seasonal / client-accounts / supplier-logins
   same look as orders/products (dattable.md); CSS-only, page logic untouched ===== */
.page-pricing, .page-oos, .page-ungated, .page-seasonal, .page-client-accounts, .page-supplier-logins {
    --iv-navy:#072540; --iv-blue:#1976d2; --iv-line:#e8ebf1; --iv-line2:#d8dde7; --iv-ink:#151827; --iv-muted:#6d7485;
    --iv-label:#5c6678; --iv-icon:#8a93a5; --iv-link:#0d6ed6; --iv-row:#fff; --iv-row-alt:#fafbfd; --iv-row-hover:#f3f7fd; --iv-input-bg:#fff; --iv-input-bd:#cdd6e8; }
body.dark-mode.page-pricing, body.dark-mode.page-oos, body.dark-mode.page-ungated, body.dark-mode.page-seasonal, body.dark-mode.page-client-accounts, body.dark-mode.page-supplier-logins {
    --iv-blue:#5aa9f7; --iv-line:#262626; --iv-line2:#333333; --iv-ink:#f5f5f5; --iv-muted:#8f8f8f;
    --iv-label:#b3b3b3; --iv-icon:#858585; --iv-link:#6cb2ff; --iv-row:#141414; --iv-row-alt:#191919; --iv-row-hover:#202020; --iv-input-bg:#1c1c1c; --iv-input-bd:#3a3a3a; }
/* shell — navy uppercase header, tabular nums, bordered cells, zebra */
body.page-pricing #pricingTable, body.page-oos #stockTable, body.page-ungated #ungTable, body.page-seasonal #seasonalTable, body.page-client-accounts #accountsTable, body.page-supplier-logins #accTable { border-collapse:collapse; font-variant-numeric:tabular-nums; }
body.page-pricing #pricingTable thead th, body.page-oos #stockTable thead th, body.page-ungated #ungTable thead th, body.page-seasonal #seasonalTable thead th, body.page-client-accounts #accountsTable thead th, body.page-supplier-logins #accTable thead th { background:var(--iv-navy) !important; color:#f7fbff !important; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:10px 12px !important; border:none; border-right:1px solid rgba(255,255,255,.14); border-bottom:2px solid #0d72bd; white-space:nowrap; vertical-align:middle; }
body.page-pricing #pricingTable thead th i, body.page-oos #stockTable thead th i, body.page-ungated #ungTable thead th i, body.page-seasonal #seasonalTable thead th i, body.page-client-accounts #accountsTable thead th i, body.page-supplier-logins #accTable thead th i { margin-right:6px; opacity:.75; font-size:10px; }
body.page-pricing #pricingTable tbody td, body.page-oos #stockTable tbody td, body.page-ungated #ungTable tbody td, body.page-seasonal #seasonalTable tbody td, body.page-client-accounts #accountsTable tbody td, body.page-supplier-logins #accTable tbody td { vertical-align:top; padding:9px 12px !important; font-size:12.5px; border-top:1px solid var(--iv-line); border-right:1px solid var(--iv-line); }
body.page-pricing #pricingTable tbody tr:nth-child(even) td, body.page-oos #stockTable tbody tr:nth-child(even) td, body.page-ungated #ungTable tbody tr:nth-child(even) td, body.page-seasonal #seasonalTable tbody tr:nth-child(even) td, body.page-client-accounts #accountsTable tbody tr:nth-child(even) td, body.page-supplier-logins #accTable tbody tr:nth-child(even) td { background:var(--iv-row-alt); }
body.page-pricing #pricingTable tbody tr:hover td, body.page-oos #stockTable tbody tr:hover td, body.page-ungated #ungTable tbody tr:hover td, body.page-seasonal #seasonalTable tbody tr:hover td, body.page-client-accounts #accountsTable tbody tr:hover td, body.page-supplier-logins #accTable tbody tr:hover td { background:var(--iv-row-hover); }
/* flat labels — kill pill chips */
body.page-pricing #pricingTable .cell-sub-label, body.page-oos #stockTable .cell-sub-label, body.page-ungated #ungTable .cell-sub-label, body.page-seasonal #seasonalTable .cell-sub-label, body.page-client-accounts #accountsTable .cell-sub-label, body.page-supplier-logins #accTable .cell-sub-label { background:none !important; border:0 !important; padding:0 !important; margin:0; box-shadow:none !important; border-radius:0; color:var(--iv-label) !important; font-weight:600; font-size:11.5px; letter-spacing:0; text-transform:none; justify-self:start; text-align:left; }
body.page-pricing #pricingTable .cell-sub-label i, body.page-oos #stockTable .cell-sub-label i, body.page-ungated #ungTable .cell-sub-label i, body.page-seasonal #seasonalTable .cell-sub-label i, body.page-client-accounts #accountsTable .cell-sub-label i, body.page-supplier-logins #accTable .cell-sub-label i { width:13px; color:var(--iv-icon); font-size:10px; }
/* flat codes — ink values, blue links */
body.page-pricing #pricingTable .cell-stack code, body.page-oos #stockTable .cell-stack code, body.page-ungated #ungTable .cell-stack code, body.page-seasonal #seasonalTable .cell-stack code, body.page-client-accounts #accountsTable .cell-stack code, body.page-supplier-logins #accTable .cell-stack code { background:none !important; border:0; padding:0 !important; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--iv-ink); letter-spacing:.01em; cursor:pointer; }
body.page-pricing #pricingTable .cell-stack code.link-chip, body.page-oos #stockTable .cell-stack code.link-chip, body.page-ungated #ungTable .cell-stack code.link-chip, body.page-seasonal #seasonalTable .cell-stack code.link-chip, body.page-client-accounts #accountsTable .cell-stack code.link-chip, body.page-supplier-logins #accTable .cell-stack code.link-chip,
body.page-pricing #pricingTable .cell-stack code.url-code, body.page-oos #stockTable .cell-stack code.url-code, body.page-ungated #ungTable .cell-stack code.url-code, body.page-seasonal #seasonalTable .cell-stack code.url-code, body.page-client-accounts #accountsTable .cell-stack code.url-code, body.page-supplier-logins #accTable .cell-stack code.url-code { color:var(--iv-link); max-width:none; overflow:visible; text-overflow:clip; white-space:nowrap; }
body.page-pricing #pricingTable .cell-stack code:hover, body.page-oos #stockTable .cell-stack code:hover, body.page-ungated #ungTable .cell-stack code:hover, body.page-seasonal #seasonalTable .cell-stack code:hover, body.page-client-accounts #accountsTable .cell-stack code:hover, body.page-supplier-logins #accTable .cell-stack code:hover { background:none !important; color:var(--iv-link); text-decoration:underline; }
/* chip cells → 3-col grid (label | value | copy pinned right); value = max-content so dense cells never overlap */
body.page-pricing #pricingTable > tbody > tr > td > .cell-stack, body.page-oos #stockTable > tbody > tr > td > .cell-stack, body.page-ungated #ungTable > tbody > tr > td > .cell-stack, body.page-seasonal #seasonalTable > tbody > tr > td > .cell-stack, body.page-client-accounts #accountsTable > tbody > tr > td > .cell-stack, body.page-supplier-logins #accTable > tbody > tr > td > .cell-stack { grid-template-columns:max-content max-content 1fr; gap:5px 8px; width:100%; }
body.page-pricing #pricingTable .cell-stack-val, body.page-oos #stockTable .cell-stack-val, body.page-ungated #ungTable .cell-stack-val, body.page-seasonal #seasonalTable .cell-stack-val, body.page-client-accounts #accountsTable .cell-stack-val, body.page-supplier-logins #accTable .cell-stack-val { white-space:nowrap; }
body.page-pricing #pricingTable .cell-stack-val strong, body.page-oos #stockTable .cell-stack-val strong, body.page-ungated #ungTable .cell-stack-val strong, body.page-seasonal #seasonalTable .cell-stack-val strong, body.page-client-accounts #accountsTable .cell-stack-val strong, body.page-supplier-logins #accTable .cell-stack-val strong { color:var(--iv-ink); font-weight:800; font-size:12px; }
/* copy chips — 3rd grid col pinned right */
body.page-pricing #pricingTable .cell-stack code.inv2-copy, body.page-oos #stockTable .cell-stack code.inv2-copy, body.page-ungated #ungTable .cell-stack code.inv2-copy, body.page-seasonal #seasonalTable .cell-stack code.inv2-copy, body.page-client-accounts #accountsTable .cell-stack code.inv2-copy, body.page-supplier-logins #accTable .cell-stack code.inv2-copy { background:none !important; border:0 !important; padding:2px !important; font-family:inherit; font-size:11.5px; color:var(--iv-icon); cursor:pointer; justify-self:end; }
body.page-pricing #pricingTable .cell-stack code.inv2-copy:hover, body.page-oos #stockTable .cell-stack code.inv2-copy:hover, body.page-ungated #ungTable .cell-stack code.inv2-copy:hover, body.page-seasonal #seasonalTable .cell-stack code.inv2-copy:hover, body.page-client-accounts #accountsTable .cell-stack code.inv2-copy:hover, body.page-supplier-logins #accTable .cell-stack code.inv2-copy:hover { color:var(--iv-blue); text-decoration:none; background:none !important; }
body.page-pricing #pricingTable .cell-stack code.inv2-copy::after, body.page-oos #stockTable .cell-stack code.inv2-copy::after, body.page-ungated #ungTable .cell-stack code.inv2-copy::after, body.page-seasonal #seasonalTable .cell-stack code.inv2-copy::after, body.page-client-accounts #accountsTable .cell-stack code.inv2-copy::after, body.page-supplier-logins #accTable .cell-stack code.inv2-copy::after { content:none !important; }
body.page-pricing #pricingTable .cell-stack code.inv2-copy.just-copied, body.page-oos #stockTable .cell-stack code.inv2-copy.just-copied, body.page-ungated #ungTable .cell-stack code.inv2-copy.just-copied, body.page-seasonal #seasonalTable .cell-stack code.inv2-copy.just-copied, body.page-client-accounts #accountsTable .cell-stack code.inv2-copy.just-copied, body.page-supplier-logins #accTable .cell-stack code.inv2-copy.just-copied { color:#047857 !important; background:none !important; }
/* buttons + thumbs — squared like orders */
body.page-pricing #pricingTable .row-action-trigger, body.page-oos #stockTable .row-action-trigger, body.page-ungated #ungTable .row-action-trigger, body.page-seasonal #seasonalTable .row-action-trigger, body.page-client-accounts #accountsTable .row-action-trigger, body.page-supplier-logins #accTable .row-action-trigger { width:30px; height:30px; border:none; border-radius:3px; font-size:14px; color:var(--iv-ink); }
body.page-pricing #pricingTable .cell-icon-btn, body.page-oos #stockTable .cell-icon-btn, body.page-ungated #ungTable .cell-icon-btn, body.page-seasonal #seasonalTable .cell-icon-btn, body.page-client-accounts #accountsTable .cell-icon-btn, body.page-supplier-logins #accTable .cell-icon-btn { padding:4px 10px; font-size:12px; border-radius:3px; }
body.page-pricing #pricingTable .prod-thumb, body.page-oos #stockTable .prod-thumb, body.page-ungated #ungTable .prod-thumb, body.page-seasonal #seasonalTable .prod-thumb, body.page-client-accounts #accountsTable .prod-thumb, body.page-supplier-logins #accTable .prod-thumb { width:40px; height:40px; border:1px solid var(--iv-line2); border-radius:5px; background:#fff; }
/* sup-link picker labels stay clickable after the flatten (oos / ungated / seasonal) */
body.page-oos #stockTable .cell-sub-label.rs-sup-trigger, body.page-ungated #ungTable .cell-sub-label.rs-sup-trigger, body.page-seasonal #seasonalTable .cell-sub-label.rs-sup-trigger { cursor:pointer; }
body.page-oos #stockTable .cell-sub-label.rs-sup-trigger:hover, body.page-ungated #ungTable .cell-sub-label.rs-sup-trigger:hover, body.page-seasonal #seasonalTable .cell-sub-label.rs-sup-trigger:hover { color:var(--iv-link) !important; text-decoration:underline; }
body.page-ungated #ungTable .cell-sub-label .rs-sup-caret { font-size:9px; opacity:.7; }
/* oos — inline qty/threshold inputs squared 26px; product cell width guard */
body.page-oos #stockTable .oos-inline-input { height:26px; width:72px; font-size:11.5px; font-weight:700; border:1px solid #cdd6e8; border-radius:3px; padding:2px 6px; color:var(--iv-ink); }
body.page-oos #stockTable .oos-inline-input.oos-low { border-color:#f4b4b4; color:#dc2626; }
body.page-oos #stockTable .cell-stack.channel-stack { min-width:210px; max-width:280px; }
/* seasonal — header select-all checkbox squared navy */
body.page-seasonal #seasonalTable #seaSelectAll { width:16px; height:16px; border-radius:3px; accent-color:var(--navy-accent); cursor:pointer; vertical-align:middle; }
/* pricing — price edit btn flat ink, note/history icons squared grey */
body.page-pricing #pricingTable .price-link-btn { background:none; border:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:5px; font:inherit; color:var(--iv-ink); }
body.page-pricing #pricingTable .price-link-btn:hover .price-link-icon { color:var(--iv-link); }
body.page-pricing #pricingTable .price-link-icon { color:var(--iv-icon); font-size:10px; }
body.page-pricing #pricingTable .note-icon, body.page-pricing #pricingTable .action-icon.view-icon { background:#f0f4fa; color:#334155; border:1px solid #d7def0; border-radius:3px; padding:3px 8px; font-size:11px; cursor:pointer; }
body.page-pricing #pricingTable .note-icon:hover, body.page-pricing #pricingTable .action-icon.view-icon:hover { border-color:var(--navy-accent); background:#e8f1fb; }
body.page-pricing #pricingTable .cost-amz-price { font-weight:800; font-size:12px; }
body.page-pricing #pricingTable .cell-stack .acct-chip-wrap { grid-column:1 / -1; }
/* client accounts — bare password code, avatar centering, muted alias */
body.page-client-accounts #accountsTable tbody code { background:none; border:0; padding:0; font-size:11.5px; font-weight:700; color:var(--iv-ink); }
body.page-client-accounts #accountsTable tbody td:nth-child(2) { vertical-align:middle; text-align:center; }
body.page-client-accounts #accountsTable .action-icon { background:none; border:0; }
body.page-client-accounts #accountsTable .cell-icon-btn, body.page-client-accounts #accountsTable .row-action-trigger { font-size:12px; }
body.page-client-accounts #accountsTable .acc-display-name, body.page-client-accounts #accountsTable .text-muted { color:var(--iv-muted); }

/* ===== DataTable sticky header bar (driven by dt_sticky_header.js) =====
   Fixed clone sits flush to the top of .main-content — no CSS sticky (unreliable with DT). */
.dt-sticky-bar {
    display:none;
    position:fixed;
    z-index:5000;
    overflow:hidden;
    background:#072540;
    box-shadow:0 3px 10px rgba(0,31,63,.28);
    pointer-events:auto;
    border:0;
}
.dt-sticky-bar.is-on { display:block; }
.dt-sticky-bar table {
    margin:0 !important;
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    background:#072540 !important;
}
.dt-sticky-bar thead th,
.dt-sticky-bar th {
    background:#072540 !important;
    color:#f7fbff !important;
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:.06em;
    text-transform:uppercase;
    text-align:left;
    padding:10px 12px !important;
    border:none !important;
    border-right:1px solid rgba(255,255,255,.14) !important;
    box-shadow:inset 0 -2px 0 #0d72bd !important;
    white-space:nowrap;
    vertical-align:middle;
    cursor:pointer;
}
.dt-sticky-bar thead th:last-child,
.dt-sticky-bar th:last-child { border-right:0 !important; }
.dt-sticky-bar thead th i { margin-right:6px; opacity:.75; font-size:10px; color:inherit; }

/* list pages — drop main-content top pad so fixed bar can sit flush at the top edge */
body.page-products .main-content,
body.page-client-accounts .main-content,
body.page-supplier-logins .main-content,
body.page-inventory .main-content,
body.page-orders .main-content,
body.page-shipping .main-content,
body.page-saved-shipments .main-content,
body.page-cases .main-content,
body.page-reverse-sourcing .main-content,
body.page-reorder .main-content,
body.page-pricing .main-content,
body.page-oos .main-content,
body.page-ungated .main-content,
body.page-seasonal .main-content,
body.page-users .main-content {
    padding-top:0;
}
body.page-products .main-content > .breadcrumb,
body.page-client-accounts .main-content > .breadcrumb,
body.page-supplier-logins .main-content > .breadcrumb,
body.page-inventory .main-content > .breadcrumb,
body.page-orders .main-content > .breadcrumb,
body.page-shipping .main-content > .breadcrumb,
body.page-saved-shipments .main-content > .breadcrumb,
body.page-cases .main-content > .breadcrumb,
body.page-reverse-sourcing .main-content > .breadcrumb,
body.page-reorder .main-content > .breadcrumb,
body.page-pricing .main-content > .breadcrumb,
body.page-oos .main-content > .breadcrumb,
body.page-ungated .main-content > .breadcrumb,
body.page-seasonal .main-content > .breadcrumb,
body.page-users .main-content > .breadcrumb {
    padding-top:16px;
    margin-top:0;
}
body.page-supplier-logins .tax-status-legend {
    margin-top:12px;
}
/* supplier logins — nested supplier stack grid, pw controls squared, long emails/urls ellipsize */
body.page-supplier-logins #accTable .supplier-cell .cell-stack { display:inline-grid; grid-template-columns:max-content max-content 1fr; gap:5px 8px; width:100%; }
body.page-supplier-logins #accTable .pw-btn { background:#f0f4fa; color:#334155; border:1px solid #d7def0; border-radius:3px; padding:2px 7px; font-size:11px; cursor:pointer; }
body.page-supplier-logins #accTable .pw-btn:hover { border-color:var(--navy-accent); background:#e8f1fb; }
body.page-supplier-logins #accTable .pw-mask { color:var(--iv-ink); }
body.page-supplier-logins #accTable .actions-trigger, body.page-supplier-logins #accTable .notes-count-btn { border-radius:3px; }
body.page-supplier-logins #accTable .cell-stack-val { min-width:0; max-width:230px; overflow:hidden; text-overflow:ellipsis; }
/* supplier cell — squared logo like a product thumb */
body.page-supplier-logins #accTable .supplier-cell { display:flex; gap:12px; min-width:205px; }
body.page-supplier-logins #accTable .supplier-logo { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:5px; background:#fff; color:var(--iv-ink); border:1px solid var(--iv-line2); font-size:15px; font-weight:700; overflow:hidden; }
body.page-supplier-logins #accTable .supplier-logo img { width:30px; height:30px; object-fit:contain; }
body.page-supplier-logins #accTable .supplier-name { color:var(--iv-ink); font-size:13px; font-weight:800; margin-bottom:6px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.page-supplier-logins #accTable .lnk-wrap a { color:var(--iv-link); text-decoration:none; }
body.page-supplier-logins #accTable .lnk-wrap a:hover { text-decoration:underline; }
/* flat dot statuses (tax + supplier status) — dot carries the color, text stays ink */
.page-supplier-logins .sl-flat { display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:12px; color:var(--iv-ink); }
.page-supplier-logins .sl-flat::before { content:''; width:8px; height:8px; border-radius:50%; background:#94a3b8; flex:0 0 auto; }
.page-supplier-logins .sl-tax-approved::before { background:#16a34a; }
.page-supplier-logins .sl-tax-applied::before { background:#2563eb; }
.page-supplier-logins .sl-tax-pending::before { background:#ca8a04; }
.page-supplier-logins .sl-tax-not_charged::before { background:#64748b; }
.page-supplier-logins .sl-tax-no_exemption::before { background:#9333ea; }
.page-supplier-logins .sl-tax-does_not_provide::before { background:#dc2626; }
.page-supplier-logins .sl-tax-unset { color:var(--iv-muted); font-weight:600; }
.page-supplier-logins .sl-ord-active::before { background:#16a34a; }
.page-supplier-logins .sl-ord-inactive::before { background:#dc2626; }
.page-supplier-logins .sl-flat-val { font-weight:800; font-size:12px; color:var(--iv-ink); }
/* popover trigger labels + caret */
body.page-supplier-logins #accTable .cell-sub-label.sl-pop-trigger { cursor:pointer; }
body.page-supplier-logins #accTable .cell-sub-label.sl-pop-trigger:hover { color:var(--iv-link) !important; text-decoration:underline; }
.page-supplier-logins .sl-caret { font-size:9px; opacity:.7; }
/* status popover — white box in both modes, ink pinned dark inside */
.page-supplier-logins .sl-pop { position:fixed; z-index:100000; min-width:190px; padding:5px; border:1px solid #e4e7ec; border-radius:6px; background:#fff; box-shadow:0 12px 28px rgba(16,24,40,.16); }
.page-supplier-logins .sl-pop-row { padding:8px 10px; border-radius:4px; cursor:pointer; }
.page-supplier-logins .sl-pop-row:hover { background:#f2f4f7; }
.page-supplier-logins .sl-pop .sl-flat { color:#151827; }
/* squared row buttons */
body.page-supplier-logins .notes-count-btn { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; font-size:12px; border:1px solid #d7def0; border-radius:3px; background:#f0f4fa; color:#334155; font-weight:700; cursor:pointer; }
body.page-supplier-logins .notes-count-btn:hover { border-color:var(--navy-accent); background:#e8f1fb; }
body.page-supplier-logins .actions-trigger { width:30px; height:30px; border:none; border-radius:3px; background:transparent; color:var(--iv-ink); cursor:pointer; font-size:14px; }
body.page-supplier-logins .actions-trigger:hover, body.page-supplier-logins .actions-trigger.active { background:#f2f4f7; }
/* dark mode — black surfaces, buttons flip */
body.dark-mode.page-supplier-logins #accTable .supplier-logo { background:#fff; } /* favicon needs the white box */
body.dark-mode.page-supplier-logins .notes-count-btn { background:#1c1c1c; border-color:#3a3a3a; color:#f5f5f5; }
body.dark-mode.page-supplier-logins .actions-trigger:hover, body.dark-mode.page-supplier-logins .actions-trigger.active { background:#202020; }

/* desktop-alerts (web push) button states — bell dropdown + notifications page */
.notification-dropdown-header button.notif-push-on, #notifPushBtnPage.notif-push-on { color:#16a34a !important; }
.notification-dropdown-header button.notif-push-blocked, #notifPushBtnPage.notif-push-blocked { color:#dc2626 !important; }
#notifPushBtnPage.notif-push-on { border-color:#9fdcb4 !important; }
#notifPushBtnPage.notif-push-blocked { border-color:#f0a79f !important; }
/* selects — squared 26px like orders' inline selects (status + supplier picker) */
body.page-reorder #reorderTable .ro-rst-sel { height:26px; font-size:11.5px; font-weight:700; border:1px solid #cdd6e8; border-radius:3px; padding:2px 6px; cursor:pointer; }
body.page-reorder #reorderTable .ro-prod-cell .ro-sup-sel { height:26px; font-size:11.5px; font-weight:700; border:1px solid #cdd6e8; border-radius:3px; background:#fff; color:var(--iv-ink); padding:2px 6px; max-width:150px; }
/* sales & velocity — flat grey labels + bold ink values like orders */
body.page-reorder #reorderTable .ro-sr-lbl { color:var(--iv-label); font-weight:600; font-size:11.5px; }
body.page-reorder #reorderTable .ro-sr-val { color:var(--iv-ink); font-weight:800; font-size:12px; }
/* product thumbs — bordered like orders (40px fits the stacked pair) */
body.page-reorder #reorderTable .ro-img-col .prod-thumb { width:40px; height:40px; border:1px solid var(--iv-line2); border-radius:5px; background:#fff; }
/* zebra + hover (inline asin-tag tints still win by design) */
body.page-reorder #reorderTable tbody tr:nth-child(even) td { background:var(--iv-row-alt); }
body.page-reorder #reorderTable tbody tr:hover td { background:var(--iv-row-hover); }

/* inventory — Show Filter polish: roomier grid + data-window select + period chips + in-cell "More" */
.page-inventory .filters-grid.compact { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px 14px; align-items: start; }

/* Data Window — custom dates wrap neatly inside the cell */
.page-inventory #customRange { width: 100%; }
.page-inventory #customRange.active { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.page-inventory #customRange .filter-input { flex: 1 1 110px; width: auto; }

/* Display Periods — full-width strip of toggle chips below the grid */
.page-inventory .inv-period-strip { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e9eef6; }
.page-inventory .inv-period-lbl { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: #5f6c80; margin-bottom: 8px; }
.page-inventory .inv-period-lbl i { color: #0074D9; }
.page-inventory .inv-fp-hint { font-weight: 400; font-size: 11px; color: #94a3b8; text-transform: none; letter-spacing: 0; }
.page-inventory .inv-period-box { display: flex; flex-wrap: wrap; gap: 8px; }
.page-inventory .inv-period-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #334155; background: #fff; border: 1px solid #d7def0; border-radius: 6px; padding: 6px 11px; cursor: pointer; user-select: none; transition: background .12s, border-color .12s, color .12s; }
.page-inventory .inv-period-chk:hover { border-color: #0074D9; background: #f3f8fd; }
.page-inventory .inv-period-chk:has(input:checked) { background: #eaf3fc; border-color: #0074D9; color: #001f3f; font-weight: 600; }
.page-inventory .inv-period-chk input { width: 14px; height: 14px; accent-color: #0074D9; cursor: pointer; margin: 0; }
.page-inventory #periodCustomBox { width: 100%; }
.page-inventory #periodCustomBox.active { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.page-inventory #periodCustomBox .filter-input { width: auto; flex: 0 1 160px; }

/* in-cell "More" expander on the period columns */
.page-inventory .sr-extra:not([hidden]) { display: block; margin-top: 2px; border-top: 1px dashed #e2e8f0; padding-top: 4px; }
.page-inventory .sr-toggle { margin-top: 3px; }
.page-inventory .sr-toggle i { transition: transform .15s ease; }
.page-inventory .sr-toggle.open i { transform: rotate(180deg); }

/* FBA "last synced" note in the section header */
.page-inventory .data-section .section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-inventory .inv-sync-note { font-size: 12px; color: #64748b; display: inline-flex; align-items: center; gap: 6px; }
.page-inventory .inv-sync-note i.fa-amazon { color: #ff9900; }

/* live import progress panel (batched SP-API sync) */
@keyframes syncpulse { 0%{background-position:200% 0} 100%{background-position:0 0} }

/* account quick-switch grid — 4 buttons per row, each = one synced account */
.page-inventory .acct-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:16px; }
.page-inventory .acct-btn { display:flex; flex-direction:column; align-items:stretch; gap:7px; position:relative; overflow:hidden; background:#fff; border:1px solid #d7def0; border-radius:8px; padding:12px 14px; cursor:pointer; font-size:13px; color:#1e293b; text-align:left; transition:background .12s, border-color .12s, box-shadow .12s; }
.page-inventory .acct-btn-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.page-inventory .acct-btn:hover { border-color:#0074D9; background:#f3f8fd; }
.page-inventory .acct-btn.has-sync.sync-run { border-color:#9cc6f2; }
.page-inventory .acct-btn.has-sync.sync-err { border-color:#f4b4b4; }
.page-inventory .acct-btn.has-sync.sync-done { border-color:#a7e0bb; }
.page-inventory .acct-btn.active { background:#001f3f; border-color:#001f3f; color:#fff; box-shadow:0 2px 8px rgba(0,31,63,.25); }
.page-inventory .acct-btn-name { font-weight:600; display:inline-flex; align-items:center; gap:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-inventory .acct-btn-cnt { background:#eef2f8; color:#475569; border-radius:20px; padding:2px 9px; font-size:11px; font-weight:700; flex:0 0 auto; }
.page-inventory .acct-btn.active .acct-btn-cnt { background:rgba(255,255,255,.2); color:#fff; }
.page-inventory .acct-btn-name i.fa-amazon { color:#ff9900; }
.page-inventory .acct-btn.active .acct-btn-name i.fa-amazon { color:#ffb84d; }
/* live import progress inside each account button */
.page-inventory .acct-btn-sync { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.page-inventory .acct-sync-run { color:#0074D9; }
.page-inventory .acct-sync-done { color:#16a34a; }
.page-inventory .acct-sync-err { color:#dc2626; }
.page-inventory .acct-sync-wait { color:#64748b; }
.page-inventory .acct-bar { height:5px; background:#eef2f8; border-radius:6px; overflow:hidden; }
.page-inventory .acct-bar span { display:block; height:100%; border-radius:6px; transition:width .4s ease; }
.page-inventory .acct-bar-run span { background:linear-gradient(90deg,#0074D9,#39a0ff); background-size:200% 100%; animation:syncpulse 1.1s linear infinite; }
.page-inventory .acct-bar-done span { background:#16a34a; }
.page-inventory .acct-bar-err span { background:#dc2626; }
.page-inventory .acct-bar-wait span { background:#cbd5e1; }
.page-inventory .acct-btn.active .acct-sync-run { color:#7db9ff; }
.page-inventory .acct-btn.active .acct-sync-done { color:#86efac; }
.page-inventory .acct-btn.active .acct-sync-err { color:#fca5a5; }
.page-inventory .acct-btn.active .acct-sync-wait { color:#cbd5e1; }
.page-inventory .acct-btn.active .acct-bar { background:rgba(255,255,255,.18); }
@media (max-width:992px){ .page-inventory .acct-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .page-inventory .acct-grid { grid-template-columns:1fr; } }

/* ===== Reorder · shared enterprise modal shell ===== */
body.ro-modal-open { overflow: hidden; }
.ro-modal-overlay {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(0, 12, 26, 0.62);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    opacity: 0; transition: opacity .22s ease;
}
.ro-modal-overlay.is-open { opacity: 1; }
.ro-modal-box {
    width: 70vw; max-width: 980px; max-height: 90vh;
    background: #f7f9fc; border-radius: 4px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 80px rgba(0, 15, 35, .45);
    transform: translateY(18px) scale(.96); opacity: .4;
    transition: transform .28s cubic-bezier(.34,1.4,.5,1), opacity .22s ease;
}
.ro-modal-overlay.is-open .ro-modal-box { transform: none; opacity: 1; }
.ro-modal-slot { flex: 1; overflow-y: auto; background: #fff; }

/* header */
.ro-modal-head {
    display: flex; align-items: center; gap: 12px; padding: 13px 20px;
    background: var(--navy-primary);
    color: #fff;
}
.ro-modal-logo { width: 42px; height: 42px; border-radius: 4px; object-fit: cover; border: 2px solid rgba(255,255,255,.28); flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.ro-modal-logo-fa { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); font-size: 20px; }
.ro-modal-head-txt { flex: 1; min-width: 0; }
.ro-modal-brand { font-size: 16px; font-weight: 800; letter-spacing: .3px; }
.ro-modal-head-sub { font-size: 11px; opacity: .82; text-transform: uppercase; letter-spacing: 1.4px; margin-top: 2px; }
.ro-modal-x {
    flex-shrink: 0; width: 34px; height: 34px; border: none; border-radius: 4px;
    background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer; transition: background .15s, transform .2s;
}
.ro-modal-x:hover { background: rgba(255,255,255,.26); transform: rotate(90deg); }
.ro-modal-title { margin: 0 0 10px; font-size: 19px; font-weight: 700; color: var(--navy-primary); line-height: 1.3; }

/* footer */
.ro-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 20px; background: #f7f9fc; border-top: 1px solid #e9eef5; flex-wrap: wrap; }
.ro-modal-footer-note { font-size: 12px; color: #7b8aa0; display: inline-flex; align-items: center; gap: 6px; }
.ro-modal-footer-note i { color: var(--navy-accent); }
.ro-modal-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 22px; border: none; border-radius: 4px; background: var(--navy-accent); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .15s, box-shadow .15s; }
.ro-modal-btn:hover { background: var(--navy-primary); box-shadow: 0 4px 12px rgba(0,116,217,.3); }
.ro-modal-actions { display: flex; align-items: center; gap: 8px; }
.ro-modal-btn-ghost { background: #eef2f7; color: #475569; }
.ro-modal-btn-ghost:hover { background: #e2e8f0; color: var(--navy-primary); box-shadow: none; }
.ro-modal-btn.is-loading { opacity: .65; pointer-events: none; }
/* custom sales-range form (Sales Velocity → Custom) */
.ro-cv { padding: 20px 22px; display: flex; flex-direction: column; gap: 13px; max-width: 400px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.ro-cv-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ro-cv-lbl { font-size: 13px; font-weight: 700; color: var(--navy-primary); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ro-cv-lbl i { color: var(--navy-accent); }
.ro-cv-date { flex: 1; max-width: 220px; padding: 8px 11px; border: 1px solid #d9dfeb; border-radius: 4px; font-size: 13px; color: var(--navy-primary); background: #fff; font-family: inherit; }
.ro-cv-date:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.12); }
.ro-cv-err { color: #d6322a; font-size: 12.5px; font-weight: 600; min-height: 16px; text-align: center; }
/* generic modal form (color tag, note, bulk status) */
.ro-form { padding: 18px 22px; display: flex; flex-direction: column; gap: 13px; max-width: 420px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.ro-form-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ro-form-row.ro-form-col { flex-direction: column; align-items: stretch; gap: 7px; }
.ro-form-lbl { font-size: 13px; font-weight: 700; color: var(--navy-primary); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ro-form-lbl i { color: var(--navy-accent); }
.ro-form-input { flex: 1; min-width: 0; padding: 8px 11px; border: 1px solid #d9dfeb; border-radius: 4px; font-size: 13px; color: var(--navy-primary); background: #fff; font-family: inherit; box-sizing: border-box; }
.ro-form-input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.12); }
.ro-form-textarea { width: 100%; min-height: 110px; resize: vertical; }
.ro-form-err { color: #d6322a; font-size: 12.5px; font-weight: 600; min-height: 16px; text-align: center; }
.ro-form-hint { color: #64748b; font-size: 12px; line-height: 1.5; margin-top: 2px; }
/* pressable Buy Box (Marketplace col) — on-demand live fetch */
.ro-bb-fetch { border:1px solid #cdd6e8; background:#f0f7ff; color:var(--navy-primary); font-size:12px; font-weight:700; padding:1px 8px; border-radius:3px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-family:inherit; line-height:1.7; }
.ro-bb-fetch i { color:var(--navy-accent); font-size:10px; }
.ro-bb-fetch:hover { background:var(--navy-accent); color:#fff; }
.ro-bb-fetch:hover i { color:#fff; }
.ro-bb-fetch:disabled { opacity:.7; cursor:default; }
/* enterprise alert — Swal.fire alerts routed through roModalShell (popup.md) */
.ro-alert { text-align:center; padding:8px 4px 4px; }
.ro-alert-ic { width:54px; height:54px; margin:0 auto 12px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:24px; }
.ro-alert-title { font-size:15px; font-weight:700; color:var(--navy-primary); margin:0 0 6px; }
.ro-alert-text { font-size:12.5px; color:#64748b; margin:0; line-height:1.5; }
.ro-alert-success .ro-alert-ic { background:#eafaf0; color:#1e8e4e; }
.ro-alert-error .ro-alert-ic { background:#fdeceb; color:#d6322a; }
.ro-alert-warning .ro-alert-ic { background:#fff6e9; color:#d98c12; }
.ro-alert-info .ro-alert-ic, .ro-alert-question .ro-alert-ic { background:#eef4fb; color:#0074D9; }
/* per-row Sales & Velocity load button */
.ro-sr-load { margin-top:5px; border:1px solid #cdd6e8; background:#f0f7ff; color:var(--navy-primary); font-size:10px; font-weight:700; padding:1px 8px; border-radius:3px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.ro-sr-load i { color:var(--navy-accent); font-size:9px; }
.ro-sr-load:hover { background:var(--navy-accent); color:#fff; }
.ro-sr-load:hover i { color:#fff; }
.ro-sr-load:disabled { opacity:.7; cursor:default; }
/* inventory cost-cell fee split (Amazon referral + FBA, live from SP-API) */
.inv2-fee-split { white-space:nowrap; }
.inv2-fee-split .fa-amazon { color:#ff9900; }
/* Product-col "Load from Amazon" chip — loads the whole row's API data at once */
.ro-loadrow-btn { margin-top:6px; border:1px solid var(--navy-accent); background:var(--navy-accent); color:#fff; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:3px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-family:inherit; }
.ro-loadrow-btn i { font-size:10px; }
.ro-loadrow-btn:hover { background:#005fb3; border-color:#005fb3; }
.ro-loadrow-btn:disabled { opacity:.7; cursor:default; }
/* inventory row chips — compact (smaller + inline, ~half the space) + per-row Amazon Load button */
.page-inventory .inv2-more { display:inline-block; font-size:9px; font-weight:700; padding:1px 0; margin:4px 10px 0 0; }
.page-inventory .inv2-more i { font-size:8.5px; }
.inv2-load { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--navy-accent); background:var(--navy-accent); color:#fff; font-size:9px; font-weight:700; padding:2px 8px; margin-top:4px; border-radius:3px; cursor:pointer; font-family:inherit; }
.inv2-load i { color:#ff9900; font-size:9px; }
.inv2-load:hover { background:#005fb3; border-color:#005fb3; }
.inv2-load:hover i { color:#fff; }
.inv2-load:disabled { opacity:.7; cursor:default; }
/* fix: unstyled supplier <select> in the reorder Product cell was browser-wide → overflowed into Financials */
#reorderTable .ro-sup-wrap { display:inline-flex; align-items:center; gap:4px; min-width:0; max-width:100%; }
#reorderTable .ro-sup-sel { flex:1 1 auto; min-width:0; max-width:140px; height:24px; padding:1px 6px; font-size:11px; border:1px solid #d7def0; border-radius:4px; background:#fff; color:var(--navy-primary); cursor:pointer; }
#reorderTable .ro-sup-sel:focus { outline:none; border-color:var(--navy-accent); box-shadow:0 0 0 2px rgba(0,116,217,.12); }
#reorderTable .cell-stack-val { min-width:0; }
#reorderTable .ro-prod-cell { overflow:hidden; } /* clip any residual bleed into the next column */
/* Product & Supplier chips ~50% smaller (reorder Product cell only) */
#reorderTable .ro-prod-cell { gap:2px 6px; }
#reorderTable .ro-prod-cell .cell-sub-label { font-size:7px; padding:1px 4px; letter-spacing:0; border-radius:3px; }
#reorderTable .ro-prod-cell .cell-sub-label i { font-size:6.5px; }
#reorderTable .ro-prod-cell .cell-stack-val { font-size:8px; gap:3px; }
#reorderTable .ro-prod-cell .cell-stack-val code,
#reorderTable .ro-prod-cell .cell-stack-val a,
#reorderTable .ro-prod-cell .cell-stack-val > span,
#reorderTable .ro-prod-cell .cell-stack > span:not(.cell-sub-label) { font-size:8px; }
#reorderTable .ro-prod-cell .ro-sup-sel { font-size:8px; height:20px; max-width:110px; padding:1px 4px; }
#reorderTable .ro-prod-cell .ro-acct-cell .cell-sub-label { font-size:7px !important; padding:1px 4px !important; }
/* item details modal — key/value rows */
.ro-vd { padding: 12px 22px; display: flex; flex-direction: column; }
.ro-vd-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 2px; border-bottom: 1px solid #eef2f7; }
.ro-vd-row:last-child { border-bottom: none; }
.ro-vd-k { font-size: 12.5px; font-weight: 700; color: #475569; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ro-vd-k i { color: var(--navy-accent); width: 14px; text-align: center; }
.ro-vd-v { font-size: 13px; font-weight: 700; color: var(--navy-primary); text-align: right; }

/* ===== Last 5 Orders · content (compact, flat colors) ===== */
.ro-l5-title-bar { padding: 13px 20px 9px; background: #fff; border-bottom: 1px solid #e9eef5; }
.ro-modal-title { margin: 0 0 8px; font-size: 17px; }
.ro-l5-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ro-l5-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; color: #34506e;
    background: #eef3f9; border: 1px solid #dce6f1; border-radius: 3px; padding: 3px 10px;
}
.ro-l5-chip i { color: var(--navy-accent); }
.ro-l5-chip-link { text-decoration: none; transition: background .15s, color .15s; }
.ro-l5-chip-link:hover { background: var(--navy-accent); color: #fff; }
.ro-l5-chip-link:hover i { color: #fff; }
/* copyable ASIN chip — hover/click to copy */
.ro-l5-copy { cursor: pointer; position: relative; transition: background .15s, color .15s, border-color .15s; }
.ro-l5-copy .ro-l5-copy-ic { font-size: 10px; opacity: .55; }
.ro-l5-copy:hover { background: var(--navy-accent); color: #fff; border-color: var(--navy-accent); }
.ro-l5-copy:hover i { color: #fff; opacity: 1; }
.ro-l5-copy.just-copied { background: #1f9d56; color: #fff; border-color: #1f9d56; }
.ro-l5-copy.just-copied i { color: #fff; opacity: 1; }
.ro-l5-copy.just-copied::after {
    content: 'Copied!'; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: #1f9d56; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 3px; white-space: nowrap; pointer-events: none;
}

/* stat cards — flat solid icon colors */
.ro-l5-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 20px; background: #fff; }
.ro-l5-stat { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 4px; border: 1px solid #e7edf5; background: #fbfcfe; }
.ro-l5-stat-ic { width: 34px; height: 34px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; color: #fff; }
.ro-l5-stat.s-blue   .ro-l5-stat-ic { background: var(--navy-accent); }
.ro-l5-stat.s-indigo .ro-l5-stat-ic { background: #4954c9; }
.ro-l5-stat.s-green  .ro-l5-stat-ic { background: #1f9d56; }
.ro-l5-stat.s-amber  .ro-l5-stat-ic { background: #e8920f; }
.ro-l5-stat-main { min-width: 0; }
.ro-l5-stat-val { font-size: 16px; font-weight: 800; color: var(--navy-primary); line-height: 1.05; }
.ro-l5-stat-lbl { font-size: 10px; color: #7b8aa0; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }

/* body + table — flat navy header */
.ro-l5-body { padding: 2px 20px 16px; background: #fff; }
.ro-l5-table-wrap { border: 1px solid #e6ecf4; border-radius: 4px; overflow: hidden; }
.ro-l5-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ro-l5-table thead th {
    position: sticky; top: 0;
    background: var(--navy-primary);
    color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
    padding: 9px 14px; text-align: left; white-space: nowrap;
}
.ro-l5-table th.ta-c, .ro-l5-table td.ro-l5-units { text-align: center; }
.ro-l5-table th.ta-r, .ro-l5-table td.ro-l5-price, .ro-l5-table td.ro-l5-line { text-align: right; }
.ro-l5-table tbody td { padding: 9px 14px; border-bottom: 1px solid #eef2f7; color: #2c3e52; vertical-align: middle; }
.ro-l5-table tbody tr:last-child td { border-bottom: none; }
.ro-l5-table tbody tr:nth-child(even) { background: #f8fafc; }
.ro-l5-table tbody tr:hover { background: #eef5ff; }
.ro-l5-idx { color: #9aa8bb; font-weight: 700; width: 40px; }
.ro-l5-date b { color: var(--navy-primary); font-weight: 700; }
.ro-l5-date span { color: #93a1b5; font-size: 11px; margin-left: 5px; }
.ro-l5-latest { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #1f9d56; background: #e3f7ec; border: 1px solid #b9eccd; padding: 1px 6px; border-radius: 3px; }
.ro-l5-units { font-weight: 700; color: var(--navy-accent); }
.ro-l5-price { font-weight: 600; color: #d6336c; }
.ro-l5-line { font-weight: 700; color: var(--navy-primary); }
.ro-l5-table tfoot .ro-l5-foot td { padding: 10px 14px; background: #f0f5fb; border-top: 2px solid var(--navy-accent); font-weight: 800; color: var(--navy-primary); }
.ro-l5-table tfoot .ro-l5-foot td:first-child { text-transform: uppercase; letter-spacing: .5px; font-size: 11px; color: #7b8aa0; }
.ro-l5-table tfoot .ro-l5-foot td:nth-child(2) { text-align: center; color: var(--navy-accent); }
.ro-l5-table tfoot .ro-l5-foot td:nth-child(3), .ro-l5-table tfoot .ro-l5-foot td:last-child { text-align: right; }

/* ===== Availability Breakdown · content (compact, flat colors) ===== */
.ro-bd { padding: 16px 20px; background: #fff; }
.ro-bd-hero { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: 4px; color: #fff; background: var(--navy-primary); margin-bottom: 14px; }
.ro-bd-hero-ic { width: 44px; height: 44px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(255,255,255,.14); flex-shrink: 0; }
.ro-bd-hero-num { font-size: 26px; font-weight: 800; line-height: 1; }
.ro-bd-hero-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; margin-top: 4px; }
.ro-bd-list { display: flex; flex-direction: column; gap: 11px; }
.ro-bd-item { display: flex; align-items: center; gap: 12px; }
.ro-bd-ic { width: 34px; height: 34px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; }
.ro-bd-ic.c-green { background: #1f9d56; }
.ro-bd-ic.c-amber { background: #e8920f; }
.ro-bd-ic.c-blue  { background: var(--navy-accent); }
.ro-bd-ic.c-red   { background: #d6322a; }
.ro-bd-ic.c-gray  { background: #8190a3; }
.ro-bd-meta { flex: 1; min-width: 0; }
.ro-bd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.ro-bd-name { font-size: 13px; font-weight: 700; color: var(--navy-primary); }
.ro-bd-name small { font-weight: 500; font-size: 11px; color: #93a1b5; margin-left: 6px; }
.ro-bd-val { font-size: 15px; font-weight: 800; color: var(--navy-primary); }
.ro-bd-bar { height: 7px; border-radius: 2px; background: #eef2f7; overflow: hidden; }
.ro-bd-bar span { display: block; height: 100%; border-radius: 2px; transition: width .5s ease; }
.ro-bd-bar span.c-green { background: #1f9d56; }
.ro-bd-bar span.c-amber { background: #e8920f; }
.ro-bd-bar span.c-blue  { background: var(--navy-accent); }
.ro-bd-bar span.c-red   { background: #d6322a; }
.ro-bd-bar span.c-gray  { background: #8190a3; }
.ro-bd-pct { width: 42px; text-align: right; font-size: 12.5px; font-weight: 700; color: #7b8aa0; flex-shrink: 0; }

/* responsive */
@media (max-width: 860px) {
    .ro-modal-overlay { padding: 12px; }
    .ro-modal-box { width: 100%; max-height: 94vh; }
    .ro-l5-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ro-modal-title { font-size: 16px; }
    .ro-l5-stats { gap: 8px; }
    .ro-l5-table thead th, .ro-l5-table tbody td { padding: 8px 10px; }
    .ro-modal-footer { justify-content: center; }
    .ro-bd-name small { display: block; margin-left: 0; }
}

/* ===== Pricing modal — popup.md enterprise shell content (pc-*) ===== */
.pc-form { padding: 18px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; width: 100%; box-sizing: border-box; align-items: start; }
.pc-fld.pc-span2, .pc-form-err, .pc-sp-banner { grid-column: 1 / -1; }
@media (max-width: 620px) { .pc-form { grid-template-columns: 1fr; } }
.pc-fld { display: flex; flex-direction: column; gap: 6px; }
.pc-fld > label { font-size: 12.5px; font-weight: 700; color: var(--navy-primary); display: inline-flex; align-items: center; gap: 7px; }
.pc-fld > label i { color: var(--navy-accent); }
.pc-fixed { font-size: 14px; font-weight: 700; color: var(--navy-primary); background: #f4f7fb; border: 1px solid #e3eaf4; border-radius: 4px; padding: 9px 12px; }
.pc-fixed small { font-weight: 500; color: #7b8aa0; }
.pc-input { padding: 9px 12px; border: 1px solid #d9dfeb; border-radius: 4px; font-size: 14px; color: var(--navy-primary); background: #fff; font-family: inherit; box-sizing: border-box; }
.pc-input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.12); }
.pc-form-err { color: #d6322a; font-size: 12.5px; font-weight: 600; min-height: 16px; text-align: center; }
/* SP-API connection banner inside the price modal */
.pc-sp-banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 4px; font-size: 12.5px; line-height: 1.5; border: 1px solid; margin-top: 2px; }
.pc-sp-banner > i { font-size: 17px; margin-top: 1px; flex-shrink: 0; }
.pc-sp-banner b { font-weight: 800; }
.pc-sp-banner span { color: #5b6b80; }
.pc-sp-on { background: #e9f8ef; border-color: #b6e6c8; color: #14663a; }
.pc-sp-on > i { color: #1f9d56; }
.pc-sp-off { background: #f3f5f8; border-color: #e0e6ef; color: #51607a; }
.pc-sp-off > i { color: #94a3b8; }
.pc-sp-generic { background: #eef5ff; border-color: #cfe0f5; color: #2c4a6e; }
.pc-sp-generic > i { color: var(--navy-accent); }
.pc-hist-load { padding: 40px 20px; text-align: center; color: #7b8aa0; font-size: 14px; }
.ro-l5-muted { color: #9aa8bb; font-style: italic; }
/* select2 dropdown must sit above the shell */
.ro-modal-overlay .select2-container { z-index: 100060; }
.ro-modal-overlay .select2-dropdown { z-index: 100061; }

/* ===== avatar account filter (account_filter.js owns #filterAccount) ===== */
select.acf-native { display: none !important; }       /* keep as value source, hide native UI */
.acf-wrap { position: relative; width: 100%; }
/* button face — reuses .filter-input border/bg, lays out avatar + label + caret */
.acf-btn { display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer; text-align: left; line-height: 1.2; }
.acf-btn-face { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.acf-face-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.acf-caret { color: var(--navy-accent); font-size: 12px; transition: transform .2s; flex-shrink: 0; }
.acf-wrap.is-open .acf-caret { transform: rotate(180deg); }
/* avatar chip — img, initials fallback, or "all" icon */
.acf-av { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--navy-accent); border: 1px solid rgba(0,0,0,.06); }
.acf-av-fb { background: linear-gradient(135deg, var(--navy-light), var(--navy-accent)); letter-spacing: .3px; }
.acf-av-all { background: var(--navy-primary); }
.acf-av-all > i { font-size: 11px; }
.acf-av-sm { width: 24px; height: 24px; font-size: 10px; }
/* dropdown panel */
.acf-panel { display: none; position: absolute; z-index: 9000; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #d7def0; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,31,63,.16); overflow: hidden; }
.acf-wrap.is-open .acf-panel { display: block; }
.acf-search { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid #eef2f8; background: #f8fafc; }
.acf-search > i { color: #9aa8bb; font-size: 13px; }
.acf-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: var(--text-primary); font-family: inherit; }
.acf-list { max-height: 280px; overflow-y: auto; padding: 5px; }
.acf-opt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 5px; cursor: pointer; transition: background .12s; }
.acf-opt:hover { background: #eef5ff; }
.acf-opt.is-sel { background: rgba(0,116,217,.10); }
.acf-opt-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--text-primary); }
.acf-opt.is-sel .acf-opt-lbl { font-weight: 600; color: var(--navy-primary); }
.acf-opt-tick { color: var(--navy-accent); font-size: 12px; flex-shrink: 0; }
.acf-list::-webkit-scrollbar { width: 8px; }
.acf-list::-webkit-scrollbar-thumb { background: #cfdaeb; border-radius: 4px; }
@media (max-width: 768px) { .acf-search-input { font-size: 16px; } }

/* ===== users table photo cell + modal profile-image upload ===== */
td.col-photo { width: 56px; text-align: center; }
.user-photo-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid #e0e6f0; vertical-align: middle; }
.user-photo-fb { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-light), var(--navy-accent)); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .3px; vertical-align: middle; }
/* modal upload preview */
.profile-upload-row { display: flex; align-items: center; gap: 12px; }
.profile-upload-preview { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--navy-accent); flex-shrink: 0; }
/* user-details avatar — was unstyled, so a large profile image rendered at full size and broke the layout */
.details-avatar-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--navy-accent); flex-shrink: 0; display: block; }
.details-avatar-fallback { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-primary); color: #fff; font-size: 20px; flex-shrink: 0; }
.profile-upload-fallback { width: 52px; height: 52px; border-radius: 50%; background: var(--navy-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.profile-upload-row .file-input { flex: 1; min-width: 0; }
/* DaisyUI-style file input — navy squared ::file-selector-button */
.file-input { max-width: 100%; padding: 6px; border: 1px solid var(--navy-accent); border-radius: 3px; background: #fff; color: var(--navy-primary); font-size: 14px; cursor: pointer; }
.file-input::file-selector-button { margin-right: 12px; padding: 8px 16px; border: 0; border-radius: 3px; background: var(--navy-primary); color: #fff; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.file-input::file-selector-button:hover { background: var(--navy-accent); }

/* ===== products page — inventory-style table skin (keep values in sync with .page-inventory inv2 block) ===== */
.page-products { --iv-navy:#072540; --iv-green:#087a2d; --iv-blue:#1976d2; --iv-red:#dd1e1e; --iv-line:#e8ebf1; --iv-line2:#d8dde7; --iv-ink:#151827; --iv-muted:#6d7485;
    --iv-label:#5c6678; --iv-icon:#8a93a5; --iv-link:#0d6ed6; --iv-row:#fff; --iv-row-alt:#fafbfd; --iv-row-hover:#f3f7fd; --iv-input-bg:#fff; --iv-input-bd:#cdd6e8; }
/* dark remap — pure black surfaces; ALL data text flips white (colored values included) */
body.dark-mode.page-products { --iv-green:#f5f5f5; --iv-blue:#5aa9f7; --iv-red:#f5f5f5; --iv-line:#262626; --iv-line2:#333333; --iv-ink:#f5f5f5; --iv-muted:#8f8f8f;
    --iv-label:#b3b3b3; --iv-icon:#858585; --iv-link:#6cb2ff; --iv-row:#141414; --iv-row-alt:#191919; --iv-row-hover:#202020; --iv-input-bg:#1c1c1c; --iv-input-bd:#3a3a3a; }
/* table shell — navy uppercase header, bordered top-aligned cells, tabular nums */
body.page-products #prodTable { border-collapse:collapse; font-variant-numeric:tabular-nums; }
body.page-products #prodTable thead th { background:var(--iv-navy); color:#f7fbff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:10px 12px; border-right:1px solid rgba(255,255,255,.14); border-bottom:2px solid #0d72bd; white-space:nowrap; vertical-align:middle; }
body.page-products #prodTable thead th i { margin-right:6px; opacity:.75; font-size:10px; }
body.page-products #prodTable tbody tr { background:var(--iv-row); }
body.page-products #prodTable tbody tr.even { background:var(--iv-row-alt); }
body.page-products #prodTable tbody tr:hover { background:var(--iv-row-hover); }
body.page-products #prodTable tbody td { vertical-align:top; padding:9px 12px !important; font-size:12.5px; border-top:1px solid var(--iv-line); border-right:1px solid var(--iv-line); background:transparent; }

/* products table shell for sticky (shared thead paint rules above with accounts/supplier) */
body.page-products #prodTable {
    width:100% !important;
    margin:0 !important;
    table-layout:auto;
    border-collapse:separate !important;
    border-spacing:0;
}
/* photo boxes — neutral bordered like inv2-photo */
body.page-products #prodTable .prod-thumb { width:50px; height:50px; border:1px solid var(--iv-line2); border-radius:5px; background:#fff; }
body.page-products #prodTable .prod-thumb-amz, body.page-products #prodTable .prod-thumb-sup { border-color:var(--iv-line2); }
body.page-products #prodTable .rs-asin-toggle { border:0; background:transparent; color:var(--iv-link); font-weight:800; font-size:10.5px; cursor:pointer; padding:2px 0; }
/* product name line (above ids) */
.page-products .inv2-pname { font-size:13px; line-height:1.3; font-weight:800; color:var(--iv-ink); margin-bottom:6px; max-width:200px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* ids cell — label | value | copy rows */
/* one shared 3-col grid for all id rows → label (left) | value (fills, tight to label) | copy (pinned right edge) */
.page-products .inv2-ids { display:grid; grid-template-columns:max-content 1fr max-content; gap:5px 8px; align-items:center; width:200px; }
.page-products .inv2-idrow { display:contents; font-size:11.5px; }
body.page-products #prodTable .inv2-idrow .inv2-copy { justify-self:end; }
.page-products .inv2-idlabel { font-weight:700; color:var(--iv-label); white-space:nowrap; font-size:11px; letter-spacing:.02em; }
.page-products .inv2-idlabel i { width:13px; color:var(--iv-icon); font-size:10px; }
.page-products .inv2-idlabel.rs-sup-trigger, .page-products .inv2-idlabel.rs-asin-trigger { cursor:pointer; }
.page-products .inv2-idlabel.rs-sup-trigger:hover, .page-products .inv2-idlabel.rs-asin-trigger:hover { color:var(--iv-blue); }
.page-products .inv2-idval { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
body.page-products #prodTable .inv2-idrow .link-chip { background:none; border:0; padding:0; margin:0; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--iv-ink); cursor:pointer; letter-spacing:.01em; }
body.page-products #prodTable .inv2-idrow .link-chip.url-code { color:var(--iv-link); }
body.page-products #prodTable .inv2-idrow .link-chip:hover { text-decoration:underline; }
body.page-products #prodTable .inv2-copy { border:0; background:none; color:var(--iv-icon); cursor:pointer; font-size:11.5px; padding:2px; }
body.page-products #prodTable .inv2-copy:hover { color:var(--iv-blue); text-decoration:none; }
/* kv rows — Metrics / Pack / price sub-row (extra auto col = optional copy btn) */
.page-products .inv2-kv { display:grid; gap:5px; min-width:132px; }
.page-products .inv2-kvrow { display:grid; grid-template-columns:1fr auto auto; gap:0 8px; align-items:center; font-size:11.5px; line-height:1.4; }
.page-products .inv2-kvrow > span { color:var(--iv-label); font-weight:600; white-space:nowrap; }
.page-products .inv2-kvrow > span i { width:13px; color:var(--iv-icon); font-size:10px; }
.page-products .inv2-kvrow b { font-weight:800; color:var(--iv-ink); text-align:right; font-size:12px; }
.page-products .inv2-kvrow b.pos { color:var(--iv-green); }
.page-products .inv2-kvrow b.neg { color:var(--iv-red); }
.page-products .inv2-kvrow b.muted { color:var(--iv-muted); }
/* price cell — Amazon + Supplier as aligned kv rows (value colors stay on cost-* / colors.php) */
.page-products .inv2-price { display:grid; gap:5px; min-width:132px; }
.page-products .inv2-price .cost-amz-price { font-size:13px; font-weight:800; letter-spacing:-.01em; }
.page-products .inv2-price .text-muted { font-size:11px; font-weight:700; }
/* status cell — ONE shared 3-col grid: label | value | copy (rows display:contents → all rows align like the Product col) */
body.page-products #prodTable .ws-cell { display:grid; grid-template-columns:max-content 1fr max-content; gap:6px 10px; align-items:center; justify-items:start; min-width:180px; }
body.page-products #prodTable .ws-cell .ws-ordered { display:contents; }
body.page-products #prodTable .ws-cell .ws-ordered .inv2-copy { justify-self:end; }
body.page-products #prodTable .ws-cell .cell-sub-label { background:none; border:0; padding:0; margin:0; box-shadow:none; justify-self:start; text-align:left; color:var(--iv-label); font-weight:600; font-size:11.5px; letter-spacing:0; text-transform:none; }
body.page-products #prodTable .ws-cell .cell-sub-label i { width:13px; color:var(--iv-icon); font-size:10px; }
body.page-products #prodTable .ws-cell .qty-ord-inline-input, body.page-products #prodTable .ws-cell .inline-edit-input { width:70px; height:26px; font-size:12px; font-weight:700; text-align:right; border:1px solid var(--iv-input-bd); border-radius:3px; background:var(--iv-input-bg); color:var(--iv-ink); padding:0 6px; }
body.page-products #prodTable .ws-cell .qty-ord-inline-input:focus, body.page-products #prodTable .ws-cell .inline-edit-input:focus { outline:none; border-color:var(--navy-accent); background:var(--iv-row-hover); box-shadow:0 0 0 2px rgba(0,116,217,.12); }
body.page-products #prodTable .ws-rec-locked { font-size:12px; font-weight:700; }
/* flat status row — product-col-style trigger + dot-marked flat value (select chip removed) */
body.page-products #prodTable .ws-cell .cell-sub-label.rs-ws-trigger { cursor:pointer; }
body.page-products #prodTable .ws-cell .cell-sub-label.rs-ws-trigger:hover { color:var(--iv-blue); }
.page-products .ws-flat { display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:12px; color:var(--iv-ink); }
.page-products .ws-flat::before { content:''; width:8px; height:8px; border-radius:50%; background:#94a3b8; flex:0 0 auto; }
.page-products .ws-flat.ws-order_placed::before { background:#16a34a; }
.page-products .ws-flat.ws-not_ordered::before { background:#64748b; }
.page-products .ws-flat.ws-wait::before { background:#ca8a04; }
.page-products .ws-flat.ws-out_of_stock::before { background:#dc2626; }
.page-products .ws-flat.ws-back_in_stock::before { background:#2563eb; }
.page-products .ws-flat.ws-check_comment::before { background:#9333ea; }
.page-products .ws-flat.ws-unset { color:var(--iv-muted); font-weight:600; }
/* status popover — white box in both modes, so pin dark ink inside */
.page-products .rs-ws-pop { min-width:190px; }
.page-products .rs-ws-pop .rs-ws-row { cursor:pointer; }
.page-products .rs-ws-pop .ws-flat { color:#151827; }
body.page-products #prodTable .imp-badge { background:none; border:0; padding:0; border-radius:0; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
/* SC = Show to Client — under 3-dot; green=on, red=off; .sc-btn = clickable toggle */
body.page-products #prodTable .sc-badge {
    display:inline-flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
    border-radius:3px; padding:1px 7px; line-height:1.4; white-space:nowrap; border:1px solid;
    font-family:inherit; margin:0;
}
body.page-products #prodTable .sc-badge.sc-on {
    color:#047857; background:#ecfdf5; border-color:#6ee7b7;
}
body.page-products #prodTable .sc-badge.sc-off {
    color:#b91c1c; background:#fef2f2; border-color:#fca5a5;
}
body.page-products #prodTable button.sc-badge.sc-btn {
    cursor:pointer; transition:transform .1s, box-shadow .12s, filter .12s;
}
body.page-products #prodTable button.sc-badge.sc-btn:hover {
    transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.12); filter:brightness(.97);
}
body.page-products #prodTable button.sc-badge.sc-btn:active { transform:scale(.96); }
body.dark-mode.page-products #prodTable .sc-badge.sc-on {
    color:#6ee7b7; background:rgba(6,95,70,.28); border-color:#047857;
}
body.dark-mode.page-products #prodTable .sc-badge.sc-off {
    color:#fca5a5; background:rgba(185,28,28,.22); border-color:#b91c1c;
}
body.page-products #prodTable .cell-sub-label.sub-account { background:transparent !important; border:0 !important; padding:0 !important; border-radius:0; font-weight:800; letter-spacing:0; text-transform:none; }
body.page-products #prodTable .cell-icon-btn { padding:4px 11px; font-size:12px; gap:5px; border-radius:3px; }
body.page-products #prodTable .row-action-trigger { width:30px; height:30px; border-radius:3px; font-size:14px; }
body.page-products #prodTable .action-cell { gap:4px; }
body.page-products #prodTable td.col-image, body.page-products #prodTable th.col-image { width:66px !important; min-width:66px !important; max-width:66px !important; padding:8px 6px !important; }
body.page-products #prodTable .prod-img-stack { gap:3px; }
body.page-products #prodTable .rs-asin-toggle { margin-top:0; padding:2px 0; font-size:11px; }
/* dark mode — ALL colored data text → white (!important beats colors.php custom injects in dark only) */
body.dark-mode.page-products .cost-amz-price,
body.dark-mode.page-products .cost-sup-price,
body.dark-mode.page-products .cost-profit,
body.dark-mode.page-products .cost-profit.negative,
body.dark-mode.page-products .cost-roi,
body.dark-mode.page-products .cost-sales,
body.dark-mode.page-products #prodTable .imp-badge.imp-new,
body.dark-mode.page-products #prodTable .imp-badge.imp-reorder,
body.dark-mode.page-products #prodTable .cell-sub-label.sub-account,
body.dark-mode.page-products #prodTable .ws-disc-chip,
body.dark-mode.page-products #prodTable .ws-rec-locked { color:#f5f5f5 !important; }
/* dark mode — expanded connected-asin rows lose the light tint */
body.dark-mode.page-products #prodTable tr.rs-asin-open > td { background:#1f1f1f !important; }
body.dark-mode.page-products #prodTable tr.rs-asin-child-tr > td { background:#1a1a1a !important; }
/* dark mode — flat badges/buttons whose light-mode inks vanish on dark rows */
body.dark-mode.page-products #prodTable .cell-icon-btn { color:var(--text-primary); }

/* ===== orders page — same enterprise skin as products (dattable.md); CSS-only, page logic untouched ===== */
.page-orders { --iv-navy:#072540; --iv-green:#087a2d; --iv-blue:#1976d2; --iv-red:#dd1e1e; --iv-line:#e8ebf1; --iv-line2:#d8dde7; --iv-ink:#151827; --iv-muted:#6d7485;
    --iv-label:#5c6678; --iv-icon:#8a93a5; --iv-link:#0d6ed6; --iv-row:#fff; --iv-row-alt:#fafbfd; --iv-row-hover:#f3f7fd; --iv-input-bg:#fff; --iv-input-bd:#cdd6e8; }
body.dark-mode.page-orders { --iv-green:#f5f5f5; --iv-blue:#5aa9f7; --iv-red:#f5f5f5; --iv-line:#262626; --iv-line2:#333333; --iv-ink:#f5f5f5; --iv-muted:#8f8f8f;
    --iv-label:#b3b3b3; --iv-icon:#858585; --iv-link:#6cb2ff; --iv-row:#141414; --iv-row-alt:#191919; --iv-row-hover:#202020; --iv-input-bg:#1c1c1c; --iv-input-bd:#3a3a3a; }
/* shell — navy uppercase header, tabular nums, roomy bordered cells */
body.page-orders #ordTable { border-collapse:collapse; font-variant-numeric:tabular-nums; }
body.page-orders #ordTable thead th { background:var(--iv-navy); color:#f7fbff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:10px 12px; border-right:1px solid rgba(255,255,255,.14); border-bottom:2px solid #0d72bd; white-space:nowrap; vertical-align:middle; }
body.page-orders #ordTable thead th i { margin-right:6px; opacity:.75; font-size:10px; }
body.page-orders #ordTable tbody td { vertical-align:top; padding:9px 12px !important; font-size:12.5px; border-top:1px solid var(--iv-line); border-right:1px solid var(--iv-line); }
/* order-group paddings re-asserted — grouping visuals survive the roomier cells */
body.page-orders #ordTable tbody tr.order-group-first > td { padding-top:12px !important; }
body.page-orders #ordTable tbody tr.order-group-cont > td { padding-top:4px !important; padding-bottom:4px !important; }
/* group-alternating zebra — products-style soft white/grey; ASIN tag wash (inline) wins on tagged rows */
body.page-orders #ordTable tbody tr.order-band-a { background:var(--iv-row); }
body.page-orders #ordTable tbody tr.order-band-b { background:var(--iv-row-alt); }
body.page-orders #ordTable tbody tr:hover { background:var(--iv-row-hover); }
/* flat labels — kill the pill chips (bg + inset ring + stretch + colors.php injects) */
body.page-orders #ordTable .cell-sub-label { background:none !important; border:0 !important; padding:0 !important; margin:0; box-shadow:none !important; border-radius:0; justify-self:start; text-align:left; color:var(--iv-label) !important; font-weight:600; font-size:11.5px; letter-spacing:0; text-transform:none; }
body.page-orders #ordTable .cell-sub-label i { width:13px; color:var(--iv-icon); font-size:10px; }
body.page-orders #ordTable .cell-sub-label.rs-sup-trigger:hover, body.page-orders #ordTable .cell-sub-label.rs-asin-trigger:hover { color:var(--iv-blue) !important; }
/* account name is a VALUE not a label — ink + bold */
body.page-orders #ordTable .cell-sub-label.sub-account { color:var(--iv-ink) !important; font-weight:800; }
/* flat code values — asin/fnsku/links like the products Product col (ordnum cluster chips keep their 14-color palette) */
body.page-orders #ordTable .cell-stack code:not(.ordnum-chip) { background:none; border:0; padding:0; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--iv-ink); cursor:pointer; letter-spacing:.01em; }
body.page-orders #ordTable .cell-stack code.link-chip:not(.ordnum-chip), body.page-orders #ordTable .cell-stack code.url-code { color:var(--iv-link); }
body.page-orders #ordTable .cell-stack code:not(.ordnum-chip):hover { text-decoration:underline; }
/* values — bold ink numbers (pack helper rows keep their small size) */
body.page-orders #ordTable .cell-stack-val:not(.qty-pack-val) strong { color:var(--iv-ink); font-weight:800; font-size:12px; }
/* 2-col cell-stack (label | value) — no copy-icon column */
body.page-orders #ordTable > tbody > tr > td:not(.col-order-info) > .cell-stack { grid-template-columns:max-content 1fr; }
body.page-orders #ordTable .cell-stack code.inv2-copy,
body.page-orders #ordTable .inv2-copy-ph,
body.page-orders #ordTable .lnk-copy,
body.page-orders .lnk-copy { display:none !important; }
body.page-orders #ordTable .cell-stack code::after,
body.page-orders #ordTable .cell-stack a.link-chip::after,
body.page-orders #ordTable .cell-stack code.link-chip::after { content:none !important; }
/* values right-aligned under the 2-col stack */
body.page-orders #ordTable > tbody > tr > td:not(.col-order-info) .cell-stack-val,
body.page-orders #ordTable > tbody > tr > td:not(.col-order-info) .ws-ctrl { justify-self:end; text-align:right; }
/* image col — 66px like products, 50px neutral-bordered thumbs on white */
body.page-orders #ordTable td.col-image, body.page-orders #ordTable th.col-image { width:66px !important; min-width:66px !important; max-width:66px !important; padding:8px 6px !important; }
body.page-orders #ordTable .prod-thumb { width:50px; height:50px; border:1px solid var(--iv-line2); border-radius:5px; background:#fff; }
/* ops block after Image — Product → Qty → Shipping Status → Costs → Invoice (aligned, top-stacked) */
body.page-orders #ordTable tbody td.col-qty,
body.page-orders #ordTable tbody td.col-ship-status,
body.page-orders #ordTable tbody td.col-costs,
body.page-orders #ordTable tbody td.col-invoice,
body.page-orders #ordTable tbody td.col-order-info,
body.page-orders #ordTable tbody td.col-account,
body.page-orders #ordTable tbody td.col-notes,
body.page-orders #ordTable tbody td.col-actions,
body.page-orders #ordTable tbody td.col-image {
    vertical-align:top !important;
}
body.page-orders #ordTable th.col-qty,
body.page-orders #ordTable td.col-qty { min-width:120px; }
body.page-orders #ordTable th.col-ship-status,
body.page-orders #ordTable td.col-ship-status { min-width:168px; }
body.page-orders #ordTable th.col-costs,
body.page-orders #ordTable td.col-costs { min-width:148px; }
/* costs — label left · money right, no copy glyph; tabular nums so $ line up */
body.page-orders #ordTable td.col-costs > .cell-stack {
    grid-template-columns: max-content 1fr;
    column-gap: 12px;
    min-width: 132px;
}
body.page-orders #ordTable td.col-costs .cell-sub-label { justify-self: start; text-align: left; }
body.page-orders #ordTable td.col-costs .cell-stack-val {
    justify-self: end;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 12px;
    color: var(--iv-ink);
    cursor: default !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}
body.page-orders #ordTable td.col-costs .cell-stack-val::after { content: none !important; }
body.page-orders #ordTable td.col-costs .cell-stack-val strong { font-weight: 800; font-size: 12px; }
body.page-orders #ordTable td.col-costs .cost-unit { color: var(--iv-ink); }
body.page-orders #ordTable td.col-costs .cost-ship { color: #d97706; font-weight: 700; }
body.page-orders #ordTable td.col-costs .cost-total { color: #1e7d34; font-weight: 800; }
body.page-orders #ordTable td.col-costs .pack-tag { font-weight: 600; font-size: 10px; color: var(--iv-muted); margin-left: 3px; }
body.page-orders #ordTable th.col-invoice,
body.page-orders #ordTable td.col-invoice { width:72px !important; min-width:72px !important; max-width:88px !important; text-align:center; }
body.page-orders #ordTable td.col-invoice .invoice-cell-stack,
body.page-orders #ordTable td.col-invoice .invoice-add-btn { margin:0 auto; }
body.page-orders #ordTable th.col-notes,
body.page-orders #ordTable td.col-notes { width:64px !important; min-width:56px; text-align:center; }
body.page-orders #ordTable th.col-actions,
body.page-orders #ordTable td.col-actions { min-width:72px; text-align:right; }
/* inputs + selects — squared 26px like products */
body.page-orders #ordTable .cell-qty-input { width:64px; height:26px; font-size:12px; font-weight:700; text-align:right; border:1px solid var(--iv-input-bd); border-radius:3px; background:var(--iv-input-bg); color:var(--iv-ink); padding:0 6px; }
body.page-orders #ordTable .cell-qty-input:focus { outline:none; border-color:var(--navy-accent); background:var(--iv-row-hover); box-shadow:0 0 0 2px rgba(0,116,217,.12); }
body.page-orders #ordTable .inline-edit-select { height:26px; font-size:11.5px; font-weight:700; border:1px solid var(--iv-input-bd); border-radius:3px; background:var(--iv-input-bg); color:var(--iv-ink); }
body.page-orders #ordTable .cell-qty-ro { font-size:12px; font-weight:700; color:var(--iv-muted); }
/* buttons */
body.page-orders #ordTable .cell-icon-btn { padding:4px 10px; font-size:12px; border-radius:3px; }
body.page-orders #ordTable .row-action-trigger { width:30px; height:30px; border-radius:3px; font-size:14px; }
/* flat status value + popover picker (products-style) — dot color rides --ws-dot from ORDER_PIPELINE */
.page-orders .ws-flat { display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:12px; color:var(--iv-ink); }
.page-orders .ws-flat::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--ws-dot, #94a3b8); flex:0 0 auto; }
.page-orders .ord-sel-trigger { cursor:pointer; }
.page-orders .ord-sel-trigger:hover { color:var(--iv-blue); }
.page-orders .ord-sel-trigger .rs-sup-caret { color:var(--iv-icon); font-size:10px; }
.page-orders .rs-ws-pop { min-width:200px; }
.page-orders .rs-ws-pop .rs-ws-row { cursor:pointer; }
.page-orders .rs-ws-pop .ws-flat { color:#151827; }
/* date flat — kill the violet chip (page-block rules out-specified via the extra td element) */
body.page-orders #ordTable td .ord-date-chip { background:none !important; border:0; padding:0; border-radius:0; color:var(--iv-ink); font-weight:700; font-size:12px; }
/* dark — data values → white (cluster chips + text-muted hints keep their own colors) */
body.dark-mode.page-orders #ordTable .cell-stack-val,
body.dark-mode.page-orders #ordTable .cost-unit, body.dark-mode.page-orders #ordTable .cost-total,
body.dark-mode.page-orders #ordTable .cost-ship, body.dark-mode.page-orders #ordTable .cost-landed { color:#f5f5f5 !important; }
body.dark-mode.page-orders #ordTable .prod-img-asin { color:#b3b3b3 !important; }
body.dark-mode.page-orders #ordTable .cell-icon-btn { color:var(--text-primary); }
/* dark — group visuals on black */
body.dark-mode.page-orders #ordTable tbody tr.order-group-first { border-top-color:#2a3a55; }
body.dark-mode.page-orders #ordTable tbody tr.order-group-cont td .order-info-continuation { border-left-color:#333333; }
body.dark-mode.page-orders #ordTable tbody tr.is-multi-item.order-band-a { background:#1c1830 !important; }
body.dark-mode.page-orders #ordTable tbody tr.is-multi-item.order-band-b { background:#211c38 !important; }
body.dark-mode.page-orders #ordTable tbody tr.related-hover { background:#2b2410 !important; }
body.dark-mode.page-orders #ordTable tbody tr.related-hover.is-multi-item { background:#33290f !important; }

/* ===== saved shipments page — same enterprise skin as orders/products (dattable.md); CSS-only, page logic untouched ===== */
.page-saved-shipments { --iv-navy:#072540; --iv-green:#087a2d; --iv-blue:#1976d2; --iv-red:#dd1e1e; --iv-line:#e8ebf1; --iv-line2:#d8dde7; --iv-ink:#151827; --iv-muted:#6d7485;
    --iv-label:#5c6678; --iv-icon:#8a93a5; --iv-link:#0d6ed6; --iv-row:#fff; --iv-row-alt:#fafbfd; --iv-row-hover:#f3f7fd; --iv-input-bg:#fff; --iv-input-bd:#cdd6e8; }
body.dark-mode.page-saved-shipments { --iv-green:#f5f5f5; --iv-blue:#5aa9f7; --iv-red:#f5f5f5; --iv-line:#262626; --iv-line2:#333333; --iv-ink:#f5f5f5; --iv-muted:#8f8f8f;
    --iv-label:#b3b3b3; --iv-icon:#858585; --iv-link:#6cb2ff; --iv-row:#141414; --iv-row-alt:#191919; --iv-row-hover:#202020; --iv-input-bg:#1c1c1c; --iv-input-bd:#3a3a3a; }
/* shell — navy uppercase header, tabular nums, roomy bordered cells (recon + totals tables in shipment detail) */
body.page-saved-shipments #ssRecTable, body.page-saved-shipments #ssTotTable { border-collapse:collapse; font-variant-numeric:tabular-nums; }
body.page-saved-shipments #ssRecTable thead th, body.page-saved-shipments #ssTotTable thead th { background:var(--iv-navy); color:#f7fbff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:10px 12px; border:1px solid rgba(255,255,255,.14); border-bottom:2px solid #0d72bd; white-space:nowrap; vertical-align:middle; }
body.page-saved-shipments #ssRecTable thead th i, body.page-saved-shipments #ssTotTable thead th i { margin-right:6px; opacity:.75; font-size:10px; }
body.page-saved-shipments #ssRecTable tbody td, body.page-saved-shipments #ssTotTable tbody td { vertical-align:top; text-align:left; padding:9px 12px !important; font-size:12.5px; color:var(--iv-ink); border:1px solid var(--iv-line); background:transparent; }
/* about-roles-table first-col gray bg killed — zebra owns row color (dark included) */
body.page-saved-shipments #ssRecTable tbody td:first-child, body.page-saved-shipments #ssTotTable tbody td:first-child,
body.dark-mode.page-saved-shipments #ssRecTable tbody td:first-child, body.dark-mode.page-saved-shipments #ssTotTable tbody td:first-child { background:transparent; }
/* zebra + hover */
body.page-saved-shipments #ssRecTable tbody tr { background:var(--iv-row); }
body.page-saved-shipments #ssRecTable tbody tr:nth-child(even) { background:var(--iv-row-alt); }
body.page-saved-shipments #ssRecTable tbody tr:hover { background:var(--iv-row-hover); }
body.page-saved-shipments #ssTotTable tbody tr { background:var(--iv-row); }
/* product name — bold ink, clamped like products */
.page-saved-shipments .ss-pname { font-size:13px; line-height:1.3; font-weight:800; color:var(--iv-ink); margin-bottom:6px; max-width:260px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* flat labels — kill the pill chips (bg + inset ring + stretch/center all reset) */
body.page-saved-shipments #ssRecTable .cell-sub-label { background:none !important; border:0 !important; padding:0 !important; margin:0; box-shadow:none !important; border-radius:0; justify-self:start; text-align:left; color:var(--iv-label) !important; font-weight:600; font-size:11.5px; letter-spacing:0; text-transform:none; }
body.page-saved-shipments #ssRecTable .cell-sub-label i { width:13px; color:var(--iv-icon); font-size:10px; }
/* 3-col grid — main-table cell-stacks only (label | value | copy); direct-child scope skips nested tables */
body.page-saved-shipments #ssRecTable > tbody > tr > td > .cell-stack { grid-template-columns:max-content 1fr max-content; }
.page-saved-shipments #ssRecTable .cell-stack-val { font-size:11.5px; font-weight:700; color:var(--iv-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* copy chips — 3rd grid col pinned right */
body.page-saved-shipments #ssRecTable .cell-stack code.inv2-copy { background:none; border:0; padding:2px; font-family:inherit; font-size:11.5px; color:var(--iv-icon); cursor:pointer; justify-self:end; }
body.page-saved-shipments #ssRecTable .cell-stack code.inv2-copy:hover { color:var(--iv-blue); text-decoration:none; }
/* qty cells — bold tabular numbers; discrepancy keeps its semantic color in light via skin vars */
body.page-saved-shipments #ssRecTable tbody td:not(:first-child), body.page-saved-shipments #ssTotTable tbody td { font-weight:700; }
body.page-saved-shipments #ssRecTable td.diff-ok, body.page-saved-shipments #ssTotTable td.diff-ok { color:var(--iv-green); }
body.page-saved-shipments #ssRecTable td.diff-bad, body.page-saved-shipments #ssTotTable td.diff-bad { color:var(--iv-red); }
/* inputs — squared 26px (inert today; receive inputs live on shipping_page) */
body.page-saved-shipments #ssRecTable input, body.page-saved-shipments #ssTotTable input { height:26px; font-size:12px; font-weight:700; border:1px solid var(--iv-input-bd); border-radius:3px; background:var(--iv-input-bg); color:var(--iv-ink); padding:0 6px; }
/* buttons */
body.page-saved-shipments #ssRecTable .cell-icon-btn { padding:4px 10px; font-size:12px; border-radius:3px; }
body.page-saved-shipments #ssRecTable .row-action-trigger { width:30px; height:30px; border-radius:3px; font-size:14px; }
/* dark — all colored data values → white */
body.dark-mode.page-saved-shipments #ssRecTable td.diff-ok, body.dark-mode.page-saved-shipments #ssRecTable td.diff-bad,
body.dark-mode.page-saved-shipments #ssTotTable td.diff-ok, body.dark-mode.page-saved-shipments #ssTotTable td.diff-bad,
body.dark-mode.page-saved-shipments #ssRecTable .cell-stack-val { color:#f5f5f5 !important; }
body.dark-mode.page-saved-shipments #ssRecTable .text-muted, body.dark-mode.page-saved-shipments #ssTotTable .text-muted { color:var(--iv-muted); }

/* ===== shipping page — same enterprise skin as products/orders (dattable.md); CSS-only, page logic untouched ===== */
.page-shipping { --iv-navy:#072540; --iv-green:#087a2d; --iv-blue:#1976d2; --iv-red:#dd1e1e; --iv-line:#e8ebf1; --iv-line2:#d8dde7; --iv-ink:#151827; --iv-muted:#6d7485;
    --iv-label:#5c6678; --iv-icon:#8a93a5; --iv-link:#0d6ed6; --iv-row:#fff; --iv-row-alt:#fafbfd; --iv-row-hover:#f3f7fd; --iv-input-bg:#fff; --iv-input-bd:#cdd6e8; }
body.dark-mode.page-shipping { --iv-green:#f5f5f5; --iv-blue:#5aa9f7; --iv-red:#f5f5f5; --iv-line:#262626; --iv-line2:#333333; --iv-ink:#f5f5f5; --iv-muted:#8f8f8f;
    --iv-label:#b3b3b3; --iv-icon:#858585; --iv-link:#6cb2ff; --iv-row:#141414; --iv-row-alt:#191919; --iv-row-hover:#202020; --iv-input-bg:#1c1c1c; --iv-input-bd:#3a3a3a; }
/* shell — navy uppercase header, tabular nums, roomy bordered cells */
body.page-shipping #shipTable { border-collapse:collapse; font-variant-numeric:tabular-nums; }
body.page-shipping #shipTable thead th { background:var(--iv-navy); color:#f7fbff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:10px 12px; border-right:1px solid rgba(255,255,255,.14); border-bottom:2px solid #0d72bd; white-space:nowrap; vertical-align:middle; }
body.page-shipping #shipTable thead th i { margin-right:6px; opacity:.75; font-size:10px; }
body.page-shipping #shipTable tbody td { vertical-align:top; padding:9px 12px !important; font-size:12.5px; border-top:1px solid var(--iv-line); border-right:1px solid var(--iv-line); }
/* select-checkbox col re-asserted — page pins it at 22px/2px, keep it (base td rule above out-specifies it) */
body.page-shipping #shipTable tbody td.dt-select-col { width:22px !important; min-width:22px !important; max-width:22px !important; text-align:center; padding:2px 2px !important; vertical-align:middle; }
/* image col — 66px like products/orders, thumb centered (page had vertical-align:middle intent) */
body.page-shipping #shipTable tbody td.col-image, body.page-shipping #shipTable thead th.col-image { width:66px !important; min-width:66px !important; max-width:66px !important; padding:8px 6px !important; vertical-align:middle; }
body.page-shipping #shipTable .prod-thumb { width:50px; height:50px; border:1px solid var(--iv-line2); border-radius:5px; background:#fff; }
/* zebra + hover (asin-tag washes are inline !important → still win by design) */
body.page-shipping #shipTable tbody tr { background:var(--iv-row); }
body.page-shipping #shipTable tbody tr.even { background:var(--iv-row-alt); }
body.page-shipping #shipTable tbody tr:hover { background:var(--iv-row-hover); }
/* selected-row tint — dark re-assert (page's light rgba tint vanishes on black) */
body.dark-mode.page-shipping #shipTable tbody tr.selected td, body.dark-mode.page-shipping #shipTable tbody tr.dt-row-selected td { background:rgba(90,169,247,.14) !important; }
/* flat labels — kill the pill chips (bg + inset ring + stretch + colors.php injects) */
body.page-shipping #shipTable .cell-sub-label { background:none !important; border:0 !important; padding:0 !important; margin:0; box-shadow:none !important; border-radius:0; justify-self:start; text-align:left; color:var(--iv-label) !important; font-weight:600; font-size:11.5px; letter-spacing:0; text-transform:none; }
body.page-shipping #shipTable .cell-sub-label i { width:13px; color:var(--iv-icon); font-size:10px; }
/* account name in Actions is a VALUE not a label — ink + bold */
body.page-shipping #shipTable .cell-sub-label.sub-account { color:var(--iv-ink) !important; font-weight:800; }
/* flat code values — asin/fnsku/links like the products Product col */
body.page-shipping #shipTable .cell-stack code { background:none; border:0; padding:0; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--iv-ink); cursor:pointer; letter-spacing:.01em; }
body.page-shipping #shipTable .cell-stack code.url-code { color:var(--iv-link); }
body.page-shipping #shipTable .cell-stack code:hover { text-decoration:underline; }
/* values — bold ink numbers (pack-help hints keep their small muted size) */
body.page-shipping #shipTable .cell-stack-val strong { color:var(--iv-ink); font-weight:800; font-size:12px; }
/* copy chips — 3rd grid col pinned right. Direct-child path = MAIN-table cell-stacks only;
   width:100% restores the stretch the page block set to auto */
body.page-shipping #shipTable > tbody > tr > td > .cell-stack { grid-template-columns:max-content 1fr max-content; width:100%; }
body.page-shipping #shipTable .cell-stack code.inv2-copy { background:none; border:0; padding:2px; font-size:11.5px; color:var(--iv-icon); cursor:pointer; justify-self:end; }
body.page-shipping #shipTable .cell-stack code.inv2-copy:hover { color:var(--iv-blue); text-decoration:none; }
/* copy chip IS the copy icon — suppress the global link-chip hover glyph on it */
body.page-shipping #shipTable .cell-stack code.inv2-copy::after { display:none; }
/* inputs — squared 26px with vars */
body.page-shipping #shipTable .qty-ord-inline-input { width:70px; height:26px; font-size:12px; font-weight:700; text-align:right; border:1px solid var(--iv-input-bd); border-radius:3px; background:var(--iv-input-bg); color:var(--iv-ink); padding:0 6px; }
body.page-shipping #shipTable .qty-ord-inline-input:focus { outline:none; border-color:var(--navy-accent); background:var(--iv-row-hover); box-shadow:0 0 0 2px rgba(0,116,217,.12); }
/* buttons */
body.page-shipping #shipTable .cell-icon-btn { padding:4px 10px; font-size:12px; border-radius:3px; }
body.page-shipping #shipTable .row-action-trigger { width:30px; height:30px; border-radius:3px; font-size:14px; }
body.page-shipping #shipTable .pack-edit-chip { border-radius:3px; }
/* dark — data values → white (semantic chips: loss-chip has its own dark rule, exp-chip pastels stay readable) */
body.dark-mode.page-shipping #shipTable .cell-stack-val { color:#f5f5f5 !important; }
body.dark-mode.page-shipping #shipTable .ship-remaining.rem-negative { color:#f5f5f5 !important; }
/* dark — light-only inks fixed (page's -img/-pack btn variants keep their own light-bg palettes) */
body.dark-mode.page-shipping #shipTable .cell-icon-btn:not(.cell-icon-btn-img):not(.cell-icon-btn-pack) { color:var(--text-primary); }
body.dark-mode.page-shipping #shipTable .cell-stack code.link-chip::after { color:#6cb2ff; }

/* ===== cases page — same enterprise skin as products/orders (dattable.md); CSS-only, page logic untouched.
   One page, 3 bucket tables (distributor / account / fba) sharing the same cell-stack renders — all skinned ===== */
.page-cases { --iv-navy:#072540; --iv-green:#087a2d; --iv-blue:#1976d2; --iv-red:#dd1e1e; --iv-line:#e8ebf1; --iv-line2:#d8dde7; --iv-ink:#151827; --iv-muted:#6d7485;
    --iv-label:#5c6678; --iv-icon:#8a93a5; --iv-link:#0d6ed6; --iv-row:#fff; --iv-row-alt:#fafbfd; --iv-row-hover:#f3f7fd; --iv-input-bg:#fff; --iv-input-bd:#cdd6e8; }
body.dark-mode.page-cases { --iv-green:#f5f5f5; --iv-blue:#5aa9f7; --iv-red:#f5f5f5; --iv-line:#262626; --iv-line2:#333333; --iv-ink:#f5f5f5; --iv-muted:#8f8f8f;
    --iv-label:#b3b3b3; --iv-icon:#858585; --iv-link:#6cb2ff; --iv-row:#141414; --iv-row-alt:#191919; --iv-row-hover:#202020; --iv-input-bg:#1c1c1c; --iv-input-bd:#3a3a3a; }
/* shell — navy uppercase header, tabular nums, roomy bordered cells (!important beats table-compact-tight paddings) */
body.page-cases #tblDistributor, body.page-cases #tblAccount, body.page-cases #tblFba { border-collapse:collapse; font-variant-numeric:tabular-nums; }
body.page-cases #tblDistributor thead th, body.page-cases #tblAccount thead th, body.page-cases #tblFba thead th { background:var(--iv-navy); color:#f7fbff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:10px 12px !important; border-right:1px solid rgba(255,255,255,.14); border-bottom:2px solid #0d72bd; white-space:nowrap; vertical-align:middle; }
body.page-cases #tblDistributor thead th i, body.page-cases #tblAccount thead th i, body.page-cases #tblFba thead th i { margin-right:6px; opacity:.75; font-size:10px; }
body.page-cases #tblDistributor tbody td, body.page-cases #tblAccount tbody td, body.page-cases #tblFba tbody td { vertical-align:top; padding:9px 12px !important; font-size:12.5px; border-top:1px solid var(--iv-line); border-right:1px solid var(--iv-line); background:transparent; }
/* zebra + hover — selected-row tint keeps winning via its !important */
body.page-cases #tblDistributor tbody tr, body.page-cases #tblAccount tbody tr, body.page-cases #tblFba tbody tr { background:var(--iv-row); }
body.page-cases #tblDistributor tbody tr.even, body.page-cases #tblAccount tbody tr.even, body.page-cases #tblFba tbody tr.even { background:var(--iv-row-alt); }
body.page-cases #tblDistributor tbody tr:hover, body.page-cases #tblAccount tbody tr:hover, body.page-cases #tblFba tbody tr:hover { background:var(--iv-row-hover); }
/* fba expanded shipment child row — var-driven bg so dark flips it too */
body.page-cases #tblFba tr.fba-grp-child-tr > td { background:var(--iv-row-alt) !important; padding:12px 16px !important; }
/* flat labels — kill the pill chips (bg + inset ring + stretch + colors.php injects; all three resets are load-bearing) */
body.page-cases #tblDistributor .cell-sub-label, body.page-cases #tblAccount .cell-sub-label, body.page-cases #tblFba .cell-sub-label { background:none !important; border:0 !important; padding:0 !important; margin:0; box-shadow:none !important; border-radius:0; justify-self:start; text-align:left; color:var(--iv-label) !important; font-weight:600; font-size:11.5px; letter-spacing:0; text-transform:none; }
body.page-cases #tblDistributor .cell-sub-label i, body.page-cases #tblAccount .cell-sub-label i, body.page-cases #tblFba .cell-sub-label i { width:13px; color:var(--iv-icon); font-size:10px; }
body.page-cases #tblDistributor .cell-sub-label.rs-sup-trigger:hover, body.page-cases #tblAccount .cell-sub-label.rs-sup-trigger:hover, body.page-cases #tblFba .cell-sub-label.rs-sup-trigger:hover { color:var(--iv-blue) !important; }
/* account name chip (Actions col) is a VALUE not a label — ink + bold */
body.page-cases #tblDistributor .cell-sub-label.sub-account, body.page-cases #tblAccount .cell-sub-label.sub-account, body.page-cases #tblFba .cell-sub-label.sub-account { color:var(--iv-ink) !important; font-weight:800; }
/* flat code values — case#/order#/asin/fnsku/links (ship-id-tag lives outside .cell-stack, keeps its chip look) */
body.page-cases #tblDistributor .cell-stack code:not(.inv2-copy), body.page-cases #tblAccount .cell-stack code:not(.inv2-copy), body.page-cases #tblFba .cell-stack code:not(.inv2-copy) { background:none; border:0; padding:0; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--iv-ink); cursor:pointer; letter-spacing:.01em; }
body.page-cases #tblDistributor .cell-stack code.link-chip, body.page-cases #tblAccount .cell-stack code.link-chip, body.page-cases #tblFba .cell-stack code.link-chip { color:var(--iv-link); }
body.page-cases #tblDistributor .cell-stack code:not(.inv2-copy):hover, body.page-cases #tblAccount .cell-stack code:not(.inv2-copy):hover, body.page-cases #tblFba .cell-stack code:not(.inv2-copy):hover { text-decoration:underline; }
/* values — bold ink numbers */
body.page-cases #tblDistributor .cell-stack-val strong, body.page-cases #tblAccount .cell-stack-val strong, body.page-cases #tblFba .cell-stack-val strong { color:var(--iv-ink); font-weight:800; font-size:12px; }
/* resolved date — flat green value, not a chip */
body.page-cases #tblDistributor .cell-stack .resolved-date, body.page-cases #tblAccount .cell-stack .resolved-date, body.page-cases #tblFba .cell-stack .resolved-date { background:none !important; padding:0; border-radius:0; }
/* 3-col grid: label | value | copy. DESCENDANT scope on purpose — fba child mini-tables + responsive detail rows
   reuse the SAME column renders, so every cell-stack row inside these tables carries exactly one 3rd child (chip or placeholder) */
body.page-cases #tblDistributor .cell-stack, body.page-cases #tblAccount .cell-stack, body.page-cases #tblFba .cell-stack { grid-template-columns:max-content 1fr max-content; }
/* copy chips — 3rd grid col pinned right */
body.page-cases #tblDistributor .cell-stack code.inv2-copy, body.page-cases #tblAccount .cell-stack code.inv2-copy, body.page-cases #tblFba .cell-stack code.inv2-copy { background:none; border:0; padding:2px; font-size:11.5px; color:var(--iv-icon); cursor:pointer; justify-self:end; }
body.page-cases #tblDistributor .cell-stack code.inv2-copy:hover, body.page-cases #tblAccount .cell-stack code.inv2-copy:hover, body.page-cases #tblFba .cell-stack code.inv2-copy:hover { color:var(--iv-blue); text-decoration:none; }
/* image col — 66px + 50px thumbs (distributor + account; fba's image cell also carries the shipment tag + expand toggle, stays auto-width) */
body.page-cases #tblDistributor td.col-image, body.page-cases #tblDistributor th.col-image, body.page-cases #tblAccount td.col-image, body.page-cases #tblAccount th.col-image { width:66px !important; min-width:66px !important; max-width:66px !important; padding:8px 6px !important; }
body.page-cases #tblDistributor .prod-thumb, body.page-cases #tblAccount .prod-thumb, body.page-cases #tblFba .prod-thumb { width:50px; height:50px; border:1px solid var(--iv-line2); border-radius:5px; background:#fff; }
body.page-cases #tblDistributor .prod-thumb-amz, body.page-cases #tblDistributor .prod-thumb-sup, body.page-cases #tblAccount .prod-thumb-amz, body.page-cases #tblAccount .prod-thumb-sup, body.page-cases #tblFba .prod-thumb-amz, body.page-cases #tblFba .prod-thumb-sup { border-color:var(--iv-line2); }
/* buttons */
body.page-cases #tblDistributor .cell-icon-btn, body.page-cases #tblAccount .cell-icon-btn, body.page-cases #tblFba .cell-icon-btn { padding:4px 10px; font-size:12px; border-radius:3px; }
body.page-cases #tblDistributor .row-action-trigger, body.page-cases #tblAccount .row-action-trigger, body.page-cases #tblFba .row-action-trigger { width:30px; height:30px; border-radius:3px; font-size:14px; }
/* dark — data values → white (self-contained chips keep their own colors: status-badge / ship-id-tag / fba-grp-toggle / ws-inline tints) */
body.dark-mode.page-cases #tblDistributor .cell-stack-val, body.dark-mode.page-cases #tblAccount .cell-stack-val, body.dark-mode.page-cases #tblFba .cell-stack-val,
body.dark-mode.page-cases #tblDistributor .cost-unit, body.dark-mode.page-cases #tblDistributor .cost-total, body.dark-mode.page-cases #tblDistributor .cost-ship,
body.dark-mode.page-cases #tblDistributor .cell-stack .resolved-date, body.dark-mode.page-cases #tblAccount .cell-stack .resolved-date, body.dark-mode.page-cases #tblFba .cell-stack .resolved-date { color:#f5f5f5 !important; }
/* dark — light-only inks fixed */
body.dark-mode.page-cases #tblDistributor .issue-other-note, body.dark-mode.page-cases #tblAccount .issue-other-note, body.dark-mode.page-cases #tblFba .issue-other-note { color:#b3b3b3; }
body.dark-mode.page-cases #tblAccount .task-desc-body, body.dark-mode.page-cases #tblFba .task-desc-body { color:#f5f5f5; }
body.dark-mode.page-cases #tblAccount .task-desc-body.is-empty, body.dark-mode.page-cases #tblFba .task-desc-body.is-empty { color:var(--iv-muted); }
body.dark-mode.page-cases #tblAccount .task-desc-click:hover, body.dark-mode.page-cases #tblFba .task-desc-click:hover { background:#202020; }
body.dark-mode.page-cases #tblAccount .task-desc-click:hover .task-desc-body, body.dark-mode.page-cases #tblFba .task-desc-click:hover .task-desc-body { color:#6cb2ff; }
body.dark-mode.page-cases #tblDistributor .cell-icon-btn:not(.fba-ama-btn), body.dark-mode.page-cases #tblAccount .cell-icon-btn:not(.fba-ama-btn), body.dark-mode.page-cases #tblFba .cell-icon-btn:not(.fba-ama-btn) { color:var(--text-primary); }
body.dark-mode.page-cases #tblFba .fba-grp-head { color:#b3b3b3; }
body.dark-mode.page-cases #tblAccount td.select-checkbox::before, body.dark-mode.page-cases #tblFba td.select-checkbox::before { border-color:#4a4a7a !important; }
body.dark-mode.page-cases #tblAccount tbody tr.selected td, body.dark-mode.page-cases #tblFba tbody tr.selected td { background:rgba(0,116,217,.16) !important; }

/* cases — flat status/priority/issue pickers (orders-style): dot carries the state color via --ws-dot, text stays ink */
.page-cases .ws-flat { display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:12px; color:var(--iv-ink); }
.page-cases .ws-flat::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--ws-dot, #94a3b8); flex:0 0 auto; }
.page-cases .cs-sel-trigger { cursor:pointer; }
.page-cases .cs-sel-trigger:hover { color:var(--iv-blue); }
.page-cases .cs-sel-trigger .rs-sup-caret { color:var(--iv-icon); font-size:10px; }
/* picker popover — white box in both modes, so inner text pinned dark */
.page-cases .rs-ws-pop { min-width:200px; }
.page-cases .rs-ws-pop .rs-ws-row { cursor:pointer; }
.page-cases .rs-ws-pop .ws-flat { color:#151827; }

/* ===== reverse sourcing page — same enterprise skin as products/orders (dattable.md); CSS-only, page logic untouched.
   Table id is #prodTable (same as products.php) — every rule scoped by body.page-reverse-sourcing ===== */
.page-reverse-sourcing { --iv-navy:#072540; --iv-green:#087a2d; --iv-blue:#1976d2; --iv-red:#dd1e1e; --iv-line:#e8ebf1; --iv-line2:#d8dde7; --iv-ink:#151827; --iv-muted:#6d7485;
    --iv-label:#5c6678; --iv-icon:#8a93a5; --iv-link:#0d6ed6; --iv-row:#fff; --iv-row-alt:#fafbfd; --iv-row-hover:#f3f7fd; --iv-input-bg:#fff; --iv-input-bd:#cdd6e8; }
/* dark remap — pure black surfaces; ALL data text flips white (colored values included) */
body.dark-mode.page-reverse-sourcing { --iv-green:#f5f5f5; --iv-blue:#5aa9f7; --iv-red:#f5f5f5; --iv-line:#262626; --iv-line2:#333333; --iv-ink:#f5f5f5; --iv-muted:#8f8f8f;
    --iv-label:#b3b3b3; --iv-icon:#858585; --iv-link:#6cb2ff; --iv-row:#141414; --iv-row-alt:#191919; --iv-row-hover:#202020; --iv-input-bg:#1c1c1c; --iv-input-bd:#3a3a3a; }
/* shell — navy uppercase header, tabular nums (page block pins center/normal with !important → beat both) */
body.page-reverse-sourcing #prodTable { border-collapse:collapse; font-variant-numeric:tabular-nums; }
body.page-reverse-sourcing #prodTable thead th { background:var(--iv-navy); color:#f7fbff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:left !important; padding:10px 12px; border-right:1px solid rgba(255,255,255,.14); border-bottom:2px solid #0d72bd; white-space:nowrap !important; vertical-align:middle; }
body.page-reverse-sourcing #prodTable thead th i { margin-right:6px; opacity:.75; font-size:10px; }
body.page-reverse-sourcing #prodTable tbody tr { background:var(--iv-row); }
body.page-reverse-sourcing #prodTable tbody tr.even { background:var(--iv-row-alt); }
body.page-reverse-sourcing #prodTable tbody tr:hover { background:var(--iv-row-hover); }
body.page-reverse-sourcing #prodTable tbody td { vertical-align:top; padding:9px 12px !important; font-size:12.5px; border-top:1px solid var(--iv-line); border-right:1px solid var(--iv-line); background:transparent; }
/* select-checkbox col re-asserted — base td padding above out-specifies the page's 22px pin */
body.page-reverse-sourcing #prodTable tbody td.dt-select-col { width:22px !important; min-width:22px !important; max-width:22px !important; text-align:center; padding:2px 2px !important; vertical-align:middle; }
/* image col — 66px like products/orders, 50px thumbs keep white box in both modes */
body.page-reverse-sourcing #prodTable td.col-image, body.page-reverse-sourcing #prodTable th.col-image { width:66px !important; min-width:66px !important; max-width:66px !important; padding:8px 6px !important; vertical-align:middle !important; }
body.page-reverse-sourcing #prodTable .prod-thumb { width:50px; height:50px; border:1px solid var(--iv-line2); border-radius:5px; background:#fff; }
body.page-reverse-sourcing #prodTable .prod-thumb-amz, body.page-reverse-sourcing #prodTable .prod-thumb-sup { border-color:var(--iv-line2); }
body.page-reverse-sourcing #prodTable .prod-img-stack { gap:3px; }
body.page-reverse-sourcing #prodTable .rs-asin-toggle { border:0; background:transparent; color:var(--iv-link); font-weight:800; font-size:10.5px; cursor:pointer; margin-top:0; padding:2px 0; }
/* flat labels — kill the pill chips (bg + inset ring + justify-self:stretch + text-align:center are ALL load-bearing resets) */
body.page-reverse-sourcing #prodTable .cell-sub-label { background:none !important; border:0 !important; padding:0 !important; margin:0; box-shadow:none !important; border-radius:0; justify-self:start; text-align:left; color:var(--iv-label) !important; font-weight:600; font-size:11.5px; letter-spacing:0; text-transform:none; }
body.page-reverse-sourcing #prodTable .cell-sub-label i { width:13px; color:var(--iv-icon); font-size:10px; }
/* Supplier / ASIN picker labels stay obviously clickable (flat reset killed the chip hover ring) */
body.page-reverse-sourcing #prodTable .cell-sub-label.rs-sup-trigger:hover, body.page-reverse-sourcing #prodTable .cell-sub-label.rs-asin-trigger:hover { color:var(--iv-blue) !important; }
/* per-manager opinion chips — semantic color survives as text color in light */
body.page-reverse-sourcing #prodTable .cell-sub-label.rs-mgr-status-ok   { color:#0f7a33 !important; }
body.page-reverse-sourcing #prodTable .cell-sub-label.rs-mgr-status-wait { color:#9a6a00 !important; }
body.page-reverse-sourcing #prodTable .cell-sub-label.rs-mgr-status-bad  { color:#b3261e !important; }
body.page-reverse-sourcing #prodTable .cell-sub-label.rs-status-locked { cursor:pointer; }
/* status / seasonal / stock flat pickers — state color rides --ws-dot onto the dot AND the text (mgr-chip style), bold */
body.page-reverse-sourcing #prodTable .rvs-sel-flat { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--ws-dot, var(--iv-ink)); cursor:pointer; }
body.page-reverse-sourcing #prodTable .rvs-sel-flat::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--ws-dot, #94a3b8); flex:0 0 auto; }
body.page-reverse-sourcing #prodTable .rvs-sel-flat .rs-sup-caret { color:var(--iv-muted); font-size:10px; }
body.page-reverse-sourcing #prodTable .rvs-move-seasonal { --ws-dot:#1976d2; }
/* picker popup options — same colored bold text (pop stays white in dark too) */
body.page-reverse-sourcing .rs-ws-pop .ws-flat { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--ws-dot, #151827); }
body.page-reverse-sourcing .rs-ws-pop .ws-flat::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--ws-dot, #94a3b8); flex:0 0 auto; }
/* flat code values — asin/link chips like products (copy chips excluded from the flat-code color rule) */
body.page-reverse-sourcing #prodTable .cell-stack code:not(.inv2-copy) { background:none; border:0; padding:0; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--iv-ink); cursor:pointer; letter-spacing:.01em; }
body.page-reverse-sourcing #prodTable .cell-stack code.link-chip:not(.inv2-copy), body.page-reverse-sourcing #prodTable .cell-stack code.url-code { color:var(--iv-link); }
body.page-reverse-sourcing #prodTable .cell-stack code:not(.inv2-copy):hover { text-decoration:underline; }
/* 3-col grid — MAIN-table cell-stacks only via direct-child scope (label | value | copy); assign cell keeps its 2-col chip layout */
body.page-reverse-sourcing #prodTable > tbody > tr > td > .cell-stack:not(.rs-assign-cell) { grid-template-columns:max-content 1fr max-content; gap:5px 8px; width:100%; }
/* copy chips — flat gray icon pinned right; suppress the global link-chip hover glyph (chip IS the copy icon) */
body.page-reverse-sourcing #prodTable .cell-stack code.inv2-copy { background:none; border:0; padding:2px; margin:0; font-family:inherit; font-size:11.5px; letter-spacing:0; color:var(--iv-icon); cursor:pointer; justify-self:end; }
body.page-reverse-sourcing #prodTable .cell-stack code.inv2-copy:hover { color:var(--iv-blue); text-decoration:none; background:none; }
body.page-reverse-sourcing #prodTable .cell-stack code.inv2-copy::after { display:none; }
/* values — bold ink; pack ×N keeps its small size but flips ink */
body.page-reverse-sourcing #prodTable .cell-stack-val strong { color:var(--iv-ink); font-weight:800; font-size:12px; }
/* status-col selects NOT converted (handlers mutate the element in place) — restyled flat 26px squared; light keeps value colors */
body.page-reverse-sourcing #prodTable .rs-status-sel,
body.page-reverse-sourcing #prodTable .rs-status-cell .ws-inline { height:26px; border-radius:3px; font-size:11px; font-weight:700; padding:2px 20px 2px 8px; min-width:70px; }
/* added-by picker chip + assign account chips — squared to match the skin */
body.page-reverse-sourcing #prodTable .rs-person-chip { height:26px; border-radius:3px; border-color:var(--iv-input-bd); background:var(--iv-input-bg); color:var(--iv-ink); font-size:11.5px; font-weight:700; }
body.page-reverse-sourcing #prodTable .rs-acc-chip { border-radius:3px; }
body.page-reverse-sourcing #prodTable .rs-season-range { border-radius:3px; }
/* inputs — 26px squared with vars (defensive; inline edits are select-driven today) */
body.page-reverse-sourcing #prodTable .inline-edit-input, body.page-reverse-sourcing #prodTable .qty-ord-inline-input { height:26px; border-radius:3px; font-size:12px; font-weight:700; border:1px solid var(--iv-input-bd); background:var(--iv-input-bg); color:var(--iv-ink); padding:0 6px; }
body.page-reverse-sourcing #prodTable .inline-edit-input:focus, body.page-reverse-sourcing #prodTable .qty-ord-inline-input:focus { outline:none; border-color:var(--navy-accent); background:var(--iv-row-hover); box-shadow:0 0 0 2px rgba(0,116,217,.12); }
/* buttons */
body.page-reverse-sourcing #prodTable .cell-icon-btn { padding:4px 10px; font-size:12px; border-radius:3px; }
body.page-reverse-sourcing #prodTable .row-action-trigger { width:30px; height:30px; border-radius:3px; font-size:14px; }
body.page-reverse-sourcing #prodTable .action-cell { gap:4px; }
/* dark — triage row tints re-asserted as dark washes (page's pastel !important tints glare on black) */
body.dark-mode.page-reverse-sourcing #prodTable tr.rs-row-ok   > td { background:#122a1a !important; }
body.dark-mode.page-reverse-sourcing #prodTable tr.rs-row-bad  > td { background:#2c1416 !important; }
body.dark-mode.page-reverse-sourcing #prodTable tr.rs-row-wait > td { background:#2a2410 !important; }
body.dark-mode.page-reverse-sourcing #prodTable tbody tr.selected td, body.dark-mode.page-reverse-sourcing #prodTable tr.selected.rs-row-ok > td,
body.dark-mode.page-reverse-sourcing #prodTable tr.selected.rs-row-bad > td, body.dark-mode.page-reverse-sourcing #prodTable tr.selected.rs-row-wait > td { background:rgba(90,169,247,.14) !important; }
/* dark — injected connected-asin rows lose the light tint */
body.dark-mode.page-reverse-sourcing #prodTable tbody tr.rs-asin-grid-row > td { background:#1a1a1a; border-bottom-color:#262626; }
body.dark-mode.page-reverse-sourcing #prodTable tbody tr.rs-asin-grid-row:hover > td { background:#202020; }
body.dark-mode.page-reverse-sourcing .rs-asin-grid-head-inner { background:#151a21; color:#e8eef7; border-bottom-color:#2a3444; }
body.dark-mode.page-reverse-sourcing .rs-asin-empty { background:#141414; color:var(--iv-muted); }
/* dark — ALL colored data text → white (!important beats colors.php/state injects IN DARK ONLY; light keeps user colors) */
body.dark-mode.page-reverse-sourcing .cost-amz-price, body.dark-mode.page-reverse-sourcing .cost-sup-price,
body.dark-mode.page-reverse-sourcing .cost-profit, body.dark-mode.page-reverse-sourcing .cost-profit.negative,
body.dark-mode.page-reverse-sourcing .cost-roi, body.dark-mode.page-reverse-sourcing .cost-sales,
body.dark-mode.page-reverse-sourcing #prodTable .cell-stack-val,
body.dark-mode.page-reverse-sourcing #prodTable .cell-stack-val strong,
body.dark-mode.page-reverse-sourcing #prodTable .cell-sub-label.rs-mgr-status-ok,
body.dark-mode.page-reverse-sourcing #prodTable .cell-sub-label.rs-mgr-status-wait,
body.dark-mode.page-reverse-sourcing #prodTable .cell-sub-label.rs-mgr-status-bad,
body.dark-mode.page-reverse-sourcing #prodTable .cell-sub-label.rs-status-locked { color:#f5f5f5 !important; }
/* dark — picker trigger text goes white like all colored data text; the dot keeps the state color */
body.dark-mode.page-reverse-sourcing #prodTable .rvs-sel-flat { color:#f5f5f5; }
/* dark — the un-converted selects go dark-surface, value text white (state pastels are unreadable chips on black) */
body.dark-mode.page-reverse-sourcing #prodTable .rs-status-sel,
body.dark-mode.page-reverse-sourcing #prodTable .rs-status-cell .ws-inline { background-color:var(--iv-input-bg) !important; border-color:var(--iv-input-bd) !important; color:#f5f5f5 !important; }
/* dark — light-only inks fixed */
body.dark-mode.page-reverse-sourcing #prodTable .cell-icon-btn { color:var(--text-primary); }
body.dark-mode.page-reverse-sourcing #prodTable .text-muted { color:var(--iv-muted); }
body.dark-mode.page-reverse-sourcing #prodTable .rs-person-none { color:var(--iv-muted); }
body.dark-mode.page-reverse-sourcing #prodTable .cell-stack code:not(.inv2-copy)::after { color:#6cb2ff; }

/* copy/link interaction — text = icon-free click-to-copy · link = open on click + hover copy icon
   scope: Supplier Logins · Products · Inventory · Orders · Shipping · Saved Shipments · Cases
   per-cell copy icons (inv2-copy / rs-sup-copy) removed in page JS; classes below drive the new behaviour */

/* text value codes → drop the hover copy glyph (links carry data-url + keep their own icon) */
body.page-supplier-logins .cell-stack code:not([data-url])::after,
body.page-products        .cell-stack code:not([data-url])::after,
body.page-inventory       .cell-stack code:not([data-url])::after,
body.page-orders          .cell-stack code:not([data-url])::after,
body.page-shipping        .cell-stack code:not([data-url])::after,
body.page-saved-shipments .cell-stack code:not([data-url])::after,
body.page-cases           .cell-stack code:not([data-url])::after { content:none !important; }

/* generic click-to-copy value (non-code text: ids, emails, phones) */
.copy-text { cursor:pointer; border-radius:3px; transition:background .15s ease, color .15s ease; }
.copy-text:hover { color:var(--navy-accent, #0074D9); }
.copy-text.just-copied { background:#d1fae5 !important; color:#047857 !important; }
body.dark-mode .copy-text.just-copied { background:#064e3b !important; color:#d1fae5 !important; }

/* link chip → openable link (click opens) + hover-reveal clickable copy icon */
.lnk-wrap { display:inline-flex; align-items:center; gap:4px; max-width:100%; vertical-align:middle; }
.lnk-wrap > a { text-decoration:none; }
.lnk-copy { opacity:0; cursor:pointer; color:#0c4a6e; font-size:9px; line-height:1; padding:1px 3px; flex:0 0 auto; transition:opacity .12s ease, color .12s ease; }
.lnk-wrap:hover .lnk-copy { opacity:1; }
.lnk-copy:hover { color:var(--navy-accent, #0074D9); }
.lnk-copy.just-copied { color:#047857 !important; opacity:1; }
.lnk-copy.just-copied i::before { content:'\f00c'; }
body.dark-mode .lnk-copy { color:#8fb7e6; }
body.dark-mode .lnk-copy:hover { color:#6cb2ff; }

/* products.php only — Status & Product cols: label left / value right (match Price & Metrics kv rows) */
body.page-products #prodTable .inv2-ids { width:100%; min-width:200px; grid-template-columns:max-content 1fr; }
body.page-products #prodTable .inv2-idval { text-align:right; justify-self:stretch; }

/* orders/shipping/cases/saved-shipments/supplier-logins — cell-stack: 2-col (label left / value right, no copy slot).
   fixes orders zigzag (kvCopy 3rd child was removed but grid stayed 3-col) + gives the left-right layout everywhere */
/* drop the leftover copy placeholder from the grid — scoped so other pages keep their 3-col intact */
body.page-orders #ordTable .inv2-copy-ph,
body.page-shipping #shipTable .inv2-copy-ph,
body.page-cases .inv2-copy-ph,
body.page-saved-shipments #ssRecTable .inv2-copy-ph,
body.page-supplier-logins #accTable .inv2-copy-ph { display:none !important; }
/* 2-column grid: label | value */
body.page-orders #ordTable > tbody > tr > td:not(.col-order-info) > .cell-stack { grid-template-columns:max-content 1fr; }
body.page-shipping #shipTable > tbody > tr > td > .cell-stack { grid-template-columns:max-content 1fr; }
body.page-cases #tblDistributor .cell-stack, body.page-cases #tblAccount .cell-stack, body.page-cases #tblFba .cell-stack { grid-template-columns:max-content 1fr; }
body.page-saved-shipments #ssRecTable > tbody > tr > td > .cell-stack { grid-template-columns:max-content 1fr; }
body.page-supplier-logins #accTable > tbody > tr > td > .cell-stack,
body.page-supplier-logins #accTable .supplier-cell .cell-stack { grid-template-columns:max-content 1fr; }
/* value → right (label stays left) */
body.page-orders #ordTable > tbody > tr > td:not(.col-order-info) .cell-stack-val,
body.page-orders #ordTable > tbody > tr > td:not(.col-order-info) .ws-ctrl,
body.page-shipping #shipTable .cell-stack-val,
body.page-cases #tblDistributor .cell-stack-val, body.page-cases #tblAccount .cell-stack-val, body.page-cases #tblFba .cell-stack-val,
body.page-saved-shipments #ssRecTable .cell-stack-val,
body.page-supplier-logins #accTable .cell-stack-val { justify-self:end; text-align:right; }

/* reverse-sourcing / reorder / pricing / oos / ungated / seasonal — same copy/link + left-right treatment */
/* kill hover copy-glyph on text codes (links carry data-url) */
body.page-reverse-sourcing #prodTable .cell-stack code:not([data-url])::after,
body.page-reorder #reorderTable .cell-stack code:not([data-url])::after,
body.page-pricing #pricingTable .cell-stack code:not([data-url])::after,
body.page-oos #stockTable .cell-stack code:not([data-url])::after,
body.page-ungated #ungTable .cell-stack code:not([data-url])::after,
body.page-seasonal #seasonalTable .cell-stack code:not([data-url])::after { content:none !important; }
/* safety: drop any leftover copy icon / placeholder / empty span from the grid so rows stay 2-item */
body.page-reverse-sourcing #prodTable .cell-stack code.inv2-copy, body.page-reverse-sourcing #prodTable .inv2-copy-ph, body.page-reverse-sourcing #prodTable .cell-stack-row > span:empty,
body.page-reorder #reorderTable .cell-stack code.inv2-copy, body.page-reorder #reorderTable .inv2-copy-ph, body.page-reorder #reorderTable .cell-stack-row > span:empty,
body.page-pricing #pricingTable .cell-stack code.inv2-copy, body.page-pricing #pricingTable .inv2-copy-ph, body.page-pricing #pricingTable .cell-stack-row > span:empty,
body.page-oos #stockTable .cell-stack code.inv2-copy, body.page-oos #stockTable .inv2-copy-ph, body.page-oos #stockTable .cell-stack-row > span:empty,
body.page-ungated #ungTable .cell-stack code.inv2-copy, body.page-ungated #ungTable .inv2-copy-ph, body.page-ungated #ungTable .cell-stack-row > span:empty,
body.page-seasonal #seasonalTable .cell-stack code.inv2-copy, body.page-seasonal #seasonalTable .inv2-copy-ph, body.page-seasonal #seasonalTable .cell-stack-row > span:empty { display:none !important; }
/* 2-column grid: label | value */
body.page-reverse-sourcing #prodTable > tbody > tr > td > .cell-stack:not(.rs-assign-cell) { grid-template-columns:max-content 1fr; }
body.page-reorder #reorderTable > tbody > tr > td > .cell-stack, body.page-reorder #reorderTable .ro-ohc .cell-stack { grid-template-columns:max-content 1fr; }
body.page-pricing #pricingTable > tbody > tr > td > .cell-stack { grid-template-columns:max-content 1fr; }
body.page-oos #stockTable > tbody > tr > td > .cell-stack { grid-template-columns:max-content 1fr; }
body.page-ungated #ungTable > tbody > tr > td > .cell-stack { grid-template-columns:max-content 1fr; }
body.page-seasonal #seasonalTable > tbody > tr > td > .cell-stack { grid-template-columns:max-content 1fr; }
/* value → right (label left) */
body.page-reverse-sourcing #prodTable > tbody > tr > td > .cell-stack:not(.rs-assign-cell) .cell-stack-val,
body.page-reorder #reorderTable .cell-stack-val:not(.ro-acct-cell),
body.page-pricing #pricingTable .cell-stack-val,
body.page-oos #stockTable .cell-stack-val,
body.page-ungated #ungTable .cell-stack-val,
body.page-seasonal #seasonalTable .cell-stack-val { justify-self:end; text-align:right; }

/* header account switcher (#accFilterList) reuses .rs-assign-pop-row — on reverse-sourcing its own Assign-popover
   grid override (minmax 1fr / 88px / 122px) was hijacking these rows, dropping the business name to a new line.
   Force the shared flex layout on the switcher list only, so it matches every other page (Products etc.). */
body.page-reverse-sourcing #accFilterList .rs-assign-pop-row { display:flex; align-items:center; gap:8px; grid-template-columns:none; }
body.page-products #prodTable .ws-cell .ws-ordered > :nth-child(2) { justify-self:end; text-align:right; }
/* price / metric / pack values → click-to-copy (no icon), matches the kv label/value spread */
body.page-products #prodTable .inv2-kvrow b { cursor:pointer; transition:color .12s ease; }
body.page-products #prodTable .inv2-kvrow b:hover { color:var(--navy-accent, #0074D9); }
body.page-products #prodTable .inv2-kvrow b.just-copied { color:#047857 !important; }
body.dark-mode.page-products #prodTable .inv2-kvrow b.just-copied { color:#34d399 !important; }

/* ============================================================
   AdminLTE dashboard components — Rameez Scripts
   small-box KPI / info-box / lte-card (dashboard standard)
   ============================================================ */
.lte-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1200px) { .lte-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .lte-kpi-grid { grid-template-columns: 1fr; } }

.small-box { position: relative; border-radius: 10px; color: #fff; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.12); display: flex; flex-direction: column; }
.small-box .inner { padding: 16px 18px 12px; position: relative; z-index: 2; }
.small-box .inner h3 { font-size: 26px; font-weight: 800; margin: 0 0 4px; white-space: nowrap; color: #fff; }
.small-box .inner p { font-size: 13px; font-weight: 600; margin: 0; opacity: .95; color: #fff; }
.small-box .icon { position: absolute; top: 10px; right: 14px; font-size: 52px; color: rgba(255,255,255,.18); z-index: 1; transition: transform .25s ease, color .25s ease; }
.small-box:hover .icon { transform: scale(1.08); color: rgba(255,255,255,.28); }
.small-box .small-box-footer { display: block; text-align: center; padding: 6px 0; margin-top: auto; position: relative; z-index: 2; color: rgba(255,255,255,.85); background: rgba(0,0,0,.12); font-size: 12px; font-weight: 600; text-decoration: none; }
.small-box .small-box-footer:hover { background: rgba(0,0,0,.22); color: #fff; }
.small-box .kpi-trend { display: block; font-size: 11.5px; font-weight: 600; margin-top: 4px; opacity: .9; color: #fff; }
.small-box .kpi-trend i { margin-right: 3px; }
.small-box.kpi-warn { box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset, 0 2px 10px rgba(197,34,31,.45); }

.bg-navy    { background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%); }
.bg-info    { background: linear-gradient(135deg, var(--navy-accent) 0%, #0056a8 100%); }
.bg-success { background: linear-gradient(135deg, #34a853 0%, #2d9148 100%); }
.bg-warning { background: linear-gradient(135deg, #FF851B 0%, #d96a00 100%); }
.bg-danger  { background: linear-gradient(135deg, #ea4335 0%, #c5221f 100%); }

.info-box { display: flex; align-items: center; gap: 14px; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e0e0e0); border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.info-box-icon { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; }
.info-box-content { flex: 1; min-width: 0; }
.info-box-text { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted, #666); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-box-number { font-size: 20px; font-weight: 800; color: var(--text-primary, #222); line-height: 1.25; }

.lte-card { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e0e0e0); border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 16px; overflow: hidden; }
.lte-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border-light, #f0f0f0); }
.lte-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary, #222); margin: 0; display: flex; align-items: center; gap: 9px; }
.lte-card-title i { color: var(--navy-accent); }
.lte-card-tools { display: flex; align-items: center; gap: 10px; }
.lte-card-tools button { background: none; border: none; cursor: pointer; color: var(--text-muted, #888); font-size: 13px; padding: 4px 6px; border-radius: 5px; }
.lte-card-tools button:hover { background: var(--border-light, #f0f0f0); color: var(--navy-accent); }
.lte-card-body { padding: 16px 18px; }
.lte-card.collapsed .lte-card-body { display: none; }

body.dark-mode .info-box, body.dark-mode .lte-card { background: #1e293b; border-color: #334155; }
body.dark-mode .lte-card-header { border-color: #334155; }
body.dark-mode .lte-card-tools button:hover { background: #334155; }
body.dark-mode .lte-card-title, body.dark-mode .info-box-number { color: #e5e7eb; }

/* thin indeterminate top loading bar (non-blocking) */
.top-loadbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10001; overflow: hidden; pointer-events: none; display: none; }
.top-loadbar.on { display: block; }
.top-loadbar > span { display: block; height: 100%; width: 38%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, rgba(0,116,217,0), var(--navy-accent), var(--navy-primary)); box-shadow: 0 0 8px rgba(0,116,217,.5); animation: topLoadSlide 1.05s ease-in-out infinite; }
@keyframes topLoadSlide { 0% { transform: translateX(-105%); } 100% { transform: translateX(320%); } }
body.dark-mode .top-loadbar > span { background: linear-gradient(90deg, rgba(74,163,255,0), #4aa3ff, #9fd0ff); }

/* ============================================================
   Seller-Central-style dashboard widgets — Rameez Scripts
   ============================================================ */
/* lte-cards inside the dashboard widget grids */
.page-dashboard .erp-widget-grid-2 > .lte-card,
.page-dashboard .erp-widget-grid-3 > .lte-card { margin: 0; }
.page-dashboard .erp-widget-grid-3 > .lte-card { display: flex; flex-direction: column; }
.page-dashboard .erp-widget-grid-3 > .lte-card > .lte-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.page-dashboard .lte-card-body > .activities-empty,
.page-dashboard .lte-card-body > .activities-loading { margin: auto; }

/* sales snapshot strip */
.page-dashboard .snap-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.page-dashboard .snap-cell { padding: 14px 16px; border: 1px solid var(--border-light, #f0f0f0); border-radius: 9px; background: var(--bg-card, #fff); }
.page-dashboard .snap-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted, #777); }
.page-dashboard .snap-val { font-size: 22px; font-weight: 800; color: var(--navy-primary); margin: 5px 0 2px; white-space: nowrap; }
.page-dashboard .snap-sub { font-size: 12px; color: var(--text-muted, #777); }
.page-dashboard .snap-cell--refund .snap-val { color: #c5221f; }
.page-dashboard .snap-sync { font-size: 11.5px; color: var(--text-muted, #888); }
body.dark-mode.page-dashboard .snap-cell { background: #263449; border-color: #334155; }
body.dark-mode.page-dashboard .snap-val { color: #e5e7eb; }
@media (max-width: 1100px) { .page-dashboard .snap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .page-dashboard .snap-grid { grid-template-columns: 1fr; } }

/* actions-needed list */
.page-dashboard .act-list { list-style: none; margin: 0; padding: 0; }
.page-dashboard .act-list a { display: flex; align-items: center; gap: 13px; padding: 11px 8px; border-bottom: 1px solid var(--border-light, #f0f0f0); text-decoration: none; border-radius: 6px; }
.page-dashboard .act-list li:last-child a { border-bottom: none; }
.page-dashboard .act-list a:hover { background: #f6faff; }
body.dark-mode.page-dashboard .act-list a:hover { background: #263449; }
.page-dashboard .act-ico { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; }
.page-dashboard .act-ico.warn { background: linear-gradient(135deg, #FF851B 0%, #d96a00 100%); }
.page-dashboard .act-ico.crit { background: linear-gradient(135deg, #ea4335 0%, #c5221f 100%); }
.page-dashboard .act-label { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-primary, #222); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.dark-mode.page-dashboard .act-label { color: #e5e7eb; }
.page-dashboard .act-count { font-size: 13px; font-weight: 800; padding: 3px 11px; border-radius: 12px; }
.page-dashboard .act-count.warn { background: #fff4e5; color: #b36b00; }
.page-dashboard .act-count.crit { background: #fde7e9; color: #c5221f; }
.page-dashboard .act-go { color: var(--text-muted, #bbb); font-size: 13px; }
.page-dashboard .act-head-badge { font-size: 12px; font-weight: 800; background: #fde7e9; color: #c5221f; padding: 2px 10px; border-radius: 12px; }
.page-dashboard .act-head-badge.ok { background: #e6f4ea; color: #137333; }

/* account health */
.page-dashboard .health-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.page-dashboard .health-chip { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 14px; background: #eef0f3; color: #444; }
.page-dashboard .health-chip.ok { background: #e6f4ea; color: #137333; }
.page-dashboard .health-chip.warn { background: #fff4e5; color: #b36b00; }
.page-dashboard .health-chip.crit { background: #fde7e9; color: #c5221f; }
.page-dashboard .health-sync { font-size: 12px; color: var(--text-muted, #777); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light, #f0f0f0); }
.page-dashboard .health-sync i { margin-right: 5px; }

/* admin info-box strip */
.page-dashboard .lte-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 16px 0; }
@media (max-width: 1100px) { .page-dashboard .lte-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .page-dashboard .lte-info-grid { grid-template-columns: 1fr; } }

/* ===== RS CSV import progress (popup.md roModalShell) ===== */
.rs-imp { padding: 16px 22px 18px; }
.rs-imp-title { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--navy-primary); display: flex; align-items: center; gap: 8px; }
.rs-imp-title i { color: var(--navy-accent); }
.rs-imp-sub { margin: 0 0 14px; font-size: 12.5px; color: #5f6c80; }
.rs-imp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.rs-imp-stat { background: #f4f7fb; border: 1px solid #e3eaf4; border-radius: 4px; padding: 10px 12px; text-align: center; }
.rs-imp-stat span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7b8aa0; margin-bottom: 4px; }
.rs-imp-stat b { font-size: 20px; font-weight: 800; color: var(--navy-primary); }
.rs-imp-stat-ins b { color: #1f9d56; }
.rs-imp-stat-upd b { color: #0074D9; }
.rs-imp-stat-skip b { color: #b78103; }
.rs-imp-bar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rs-imp-bar { flex: 1; height: 12px; background: #e8eef6; border-radius: 3px; overflow: hidden; border: 1px solid #d7def0; }
.rs-imp-bar-fill { height: 100%; width: 0; background: var(--navy-accent); border-radius: 2px; transition: width .25s ease; }
.rs-imp-pct { min-width: 42px; text-align: right; font-size: 13px; font-weight: 800; color: var(--navy-primary); }
.rs-imp-live { font-size: 13px; font-weight: 600; color: #2c3e50; margin-bottom: 10px; min-height: 20px; }
.rs-imp-live.is-ok { color: #14663a; }
.rs-imp-live.is-bad { color: #d6322a; }
.rs-imp-log { max-height: 180px; overflow-y: auto; background: #0f172a; color: #e2e8f0; border-radius: 4px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.45; }
.rs-imp-log-line { padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-imp-log-line.is-ins { color: #6ee7b7; }
.rs-imp-log-line.is-upd { color: #93c5fd; }
.rs-imp-log-line.is-skip { color: #fde68a; }
.rs-imp-log-line.is-bad { color: #fca5a5; }
.rs-imp-mode-confirm { background: #f4f7fb; border: 1px solid #e3eaf4; border-radius: 4px; padding: 12px 14px; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 8px; }
.rs-imp-hint { margin: 0; font-size: 12px; color: #5f6c80; display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.rs-imp-hint i { color: var(--navy-accent); margin-top: 2px; }
@media (max-width: 620px) {
    .rs-imp-stats { grid-template-columns: repeat(2, 1fr); }
}