/*
  Developed by 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;

    /* border radius tokens - one place to tune dashboard rounding */
    --radius-sm: 3px;
    --radius: 3px;
    --radius-lg: 3px;
    --radius-pill: 3px; /* fully rounded buttons */

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

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

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

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

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

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

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

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

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

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

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

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

.sidebar-toggle-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--radius-pill);
    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;
    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: 22px 14px 28px;
}

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

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

.sidebar-menu-title:first-child {
    margin-top: 0;
}

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

.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: var(--radius-pill);
    font-size: 15px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 500;
    text-decoration: none;
}

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

.sidebar-menu a.active,
.sidebar-menu button.active {
    background: var(--navy-accent);
    color: white;
    box-shadow: 0 4px 12px rgba(0,116,217,0.3);
}

.sidebar-menu i {
    width: 20px;
    text-align: center;
    font-size: 18px;
}

/* 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: 3px;
    text-transform: capitalize;
    transition: all 0.3s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Submenu in collapsed state */
.sidebar.collapsed .sidebar-submenu {
    position: absolute;
    left: 70px;
    top: 0;
    width: 200px;
    background: var(--navy-dark);
    border-radius: var(--radius);
    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;
}

/* 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: 3px;
    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: var(--radius-pill);
    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 {
        display: inline !important;
    }

    .sidebar.collapsed .sidebar-menu a,
    .sidebar.collapsed .sidebar-menu 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;
    }

        /* 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;
}.data-section {
    background: var(--bg-card);
    padding: 20px;
    border-radius: var(--radius);
    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: var(--radius-sm);
}

@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: var(--radius);
    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: var(--radius-sm);
}

.skeleton-card {
    background: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius);
    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: var(--radius-sm);
    margin-bottom: 16px;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
}

.skeleton-text-large {
    height: 32px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
}

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

/* ===== 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: var(--radius);
    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: var(--radius-sm);
    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: var(--radius);
    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: var(--radius-pill);
    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: var(--radius-pill) !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;
}

/* ===== Action Icons ===== */
/* ONE look app-wide: soft tinted square chip. Modifiers are compound (.action-icon.edit-icon),
   so a bare .action-icon (payroll's pay/print) still renders as a neutral chip. Base stays here,
   not appended at EOF, so the mobile + coarse-pointer touch-target overrides below still win. */
.action-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
}

.action-icon:hover {
    transform: translateY(-1px);
}

.action-icon.edit-icon {
    background: #fff8e1;
    border-color: #ffe0a3;
    color: #e8a200;
}

.action-icon.edit-icon:hover {
    background: #ffecb3;
}

.action-icon.delete-icon {
    background: #ffebee;
    border-color: #ffc9cf;
    color: #e23b2e;
}

.action-icon.delete-icon:hover {
    background: #ffcdd2;
}

.action-icon.view-icon {
    background: #e3f2fd;
    border-color: #bbdefb;
    color: #1565c0;
}

.action-icon.view-icon:hover {
    background: #bbdefb;
}

/* ===== Status Badges ===== */
.status-badge {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    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;
}

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

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    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;
}

.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: var(--radius-sm);
    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: var(--radius);
    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;
}

.modal-header {
    padding: 24px 30px;
    background: var(--navy-primary);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--radius) var(--radius) 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: var(--radius);
    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: var(--radius-sm);
    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: var(--radius);
    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: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.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: var(--radius);
    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: var(--radius-sm);
    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: var(--radius-sm);
    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: var(--radius-sm);
    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: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: border-color .2s, box-shadow .2s;
}

.control-group:hover {
    border-color: var(--navy-accent);
    box-shadow: 0 2px 10px var(--shadow-color);
}

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

/* header is the whole row when nothing follows it — no trailing dead space */
.control-group-header:last-child { margin-bottom: 0; }

/* the copy takes the slack so the control lands on the right edge */
.control-group-header > div:not(.control-icon) { flex: 1 1 auto; min-width: 0; }
.control-group-header > .toggle-switch,
.control-group-header > .toggle-switch-large { margin-left: auto; flex: none; }

/* a bare field inside a settings card gets the same row treatment as a toggle */
.settings-card-body > .form-group {
    padding: 16px 18px;
    margin-bottom: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.settings-card-body > .form-group > label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; color: var(--text-primary); }
.settings-card-body > .form-group .help-text { display: block; margin-top: 8px; }

.control-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    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: var(--radius-sm);
    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: var(--radius-sm);
    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: var(--radius-sm);
    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: 3px;
    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: 3px;
    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: var(--radius-sm);
    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: var(--radius-sm);
    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: var(--radius);
    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: var(--radius);
    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: var(--radius-sm);
    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: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(52, 168, 83, 0.2);
}

/* Info Table */
.info-table {
    background: white;
    border-radius: var(--radius);
    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: var(--radius-sm);
}

/* 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: var(--radius-pill);
    font-size: 14px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 400;
    text-decoration: none;
    border-left: 3px solid transparent;
}

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

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

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

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

/* collapsed: the flyout already labels these rows — kill the empty tooltip bubble */
.sidebar.collapsed .has-submenu::after,
.sidebar.collapsed .sidebar-submenu li::after {
    display: none;
}

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

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

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

.setup-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 40px;
    border-radius: var(--radius-lg);
    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: var(--radius-sm);
    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;
}

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

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

/* ===== 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,
body.dark-mode .settings-card-body > .form-group {
    background: var(--bg-secondary);
    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);
}

/* ===== 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: var(--radius-sm);
}

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

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

    .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: var(--radius-sm);
    }

    .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: var(--radius-lg) var(--radius-lg) 0 0;
        margin: 0;
    }

    .modal-header {
        padding: 20px;
        border-radius: var(--radius-lg) var(--radius-lg) 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: var(--radius-lg);
        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: var(--radius);
    }

    .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;
    }    .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;
}

/* ===== 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: var(--radius-sm);
    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: var(--radius-sm);
    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: var(--radius-sm);
    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: var(--radius-sm);
    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 ===== */


.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: var(--radius-pill);
    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: var(--radius-sm);
    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: var(--radius-sm);
}
.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: var(--radius-sm);
    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: var(--radius-sm);
}

.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: var(--radius-sm);
}

.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);
}

/* ===== 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: var(--radius);
    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: var(--radius-sm);
    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: var(--radius-sm);
}
.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: var(--radius-pill);
    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 ===== */
/* class tripled on purpose = specificity (0,3,0). beats the later display:flex|grid rules
   (.po-trow, .cat-filters, .rw-bar, body.page-pos .pos-field-row ...) that would otherwise win
   on source order, while still losing to inline styles so jQuery .show() / el.style.display work */
.initially-hidden.initially-hidden.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: var(--radius-sm);
    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);
}

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

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    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);
}

/* ===== 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: var(--radius-sm);
    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;
}

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

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

.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);
}

.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: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    max-height: 420px;
    background: white;
    border-radius: var(--radius);
    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: var(--radius);
    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: var(--radius);
    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: var(--radius-sm);
    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: var(--radius-sm);
    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: var(--radius-pill);
    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;
    }
}

/* moved inline styles -> classes (no inline css in markup) */
.acct-preset-navy    { background: linear-gradient(135deg, #001f3f 50%, #0074D9 50%); }
.acct-preset-rose    { background: linear-gradient(135deg, #1a1a2e 50%, #e94560 50%); }
.acct-preset-emerald { background: linear-gradient(135deg, #2d3436 50%, #00b894 50%); }
.acct-preset-purple  { background: linear-gradient(135deg, #4a0e4e 50%, #c92bc8 50%); }
.acct-preset-forest  { background: linear-gradient(135deg, #1b4332 50%, #40916c 50%); }
.acct-preset-brown   { background: linear-gradient(135deg, #7f5539 50%, #dda15e 50%); }
.acct-preset-ocean   { background: linear-gradient(135deg, #03045e 50%, #00b4d8 50%); }
.acct-preset-violet  { background: linear-gradient(135deg, #3d0066 50%, #c77dff 50%); }
.acct-preset-crimson  { background: linear-gradient(135deg, #2b0a0a 50%, #ef4444 50%); }
.acct-preset-teal     { background: linear-gradient(135deg, #042f2e 50%, #2dd4bf 50%); }
.acct-preset-amber    { background: linear-gradient(135deg, #422006 50%, #f59e0b 50%); }
.acct-preset-indigo   { background: linear-gradient(135deg, #1e1b4b 50%, #6366f1 50%); }
.acct-preset-steel    { background: linear-gradient(135deg, #1e293b 50%, #60a5fa 50%); }
.acct-preset-sunset   { background: linear-gradient(135deg, #4a1c40 50%, #fb7185 50%); }
.acct-preset-charcoal { background: linear-gradient(135deg, #18181b 50%, #fbbf24 50%); }
.acct-preset-wine     { background: linear-gradient(135deg, #3b0a2a 50%, #db2777 50%); }

.set-revert-btn { margin-top: 8px; }
.login-maint-banner { margin-top: 16px; text-align: left; }
.sb-gtranslate-hidden { display: none; }
.notif-badge-init { display: none; } /* initial hidden state; bell JS sets inline display after load */

/* ===== PMS Phase 1 (Catalog) ===== */

/* medicines dense compound rows — chip:value clusters (Amazon-tool style) */
#medicinesTable td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.med-cell { display: flex; flex-direction: column; gap: 3px; }
.med-row-name { font-weight: 700; color: var(--text-primary); font-size: 14px; }
.med-cell .med-subtext { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 1.7; }
.kchip { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; min-width: 84px; padding: 3px 10px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.kchip i { font-size: 10px; opacity: .85; width: 12px; text-align: center; }
.kval { font-weight: 600; color: var(--text-primary); white-space: nowrap; text-align: right; margin-left: auto; }
.kval-code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--bg-secondary); color: var(--text-primary); padding: 1px 8px; border-radius: 3px; font-size: 11.5px; letter-spacing: .02em; }
.kval-money { color: #2e7d32; font-weight: 700; }
.med-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.med-manage { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.med-actions { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* chip color variants (soft tint + strong text) */
.kc-navy   { background: #e7ecf5; color: #001f3f; }
.kc-purple { background: #ede7f6; color: #5e35b1; }
.kc-teal   { background: #e0f2f1; color: #00796b; }
.kc-amber  { background: #fff3e0; color: #e65100; }
.kc-green  { background: #e8f5e9; color: #2e7d32; }
.kc-blue   { background: #e3f2fd; color: #1565c0; }
.kc-gray   { background: #eceff1; color: #455a64; }
.kc-brown  { background: #efebe9; color: #5d4037; }
.kc-cyan   { background: #e0f7fa; color: #00838f; }

/* daisy-style toggle (house std) */
.toggle { appearance: none; width: 44px; height: 24px; border-radius: 24px; background: #ccc; position: relative; cursor: pointer; transition: background .3s; border: none; outline: none; vertical-align: middle; }
.toggle:checked { background: #0074D9; }
.toggle::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .3s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle:checked::before { transform: translateX(20px); }

.hidden { display: none; }

/* alias -> reuse skeleton shimmer */
.skeleton-loading { 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: var(--radius-sm); }

/* form layout */
.form-group-full { grid-column: 1 / -1; }

/* count badge on tabs/headers */
.count-chip { display: inline-block; min-width: 22px; padding: 2px 9px; margin-left: 8px; font-size: 12px; font-weight: 700; line-height: 1.6; text-align: center; color: #fff; background: var(--navy-accent); border-radius: 3px; vertical-align: middle; }

/* med table cell bits */
.med-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-secondary); display: inline-block; }
.med-thumb-ph { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 18px; }
.med-name { font-weight: 600; color: var(--text-primary); }
.med-subtext { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.med-muted { color: var(--text-muted); }

/* form fieldset groups */
.med-fieldset { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 18px 20px 20px; margin-bottom: 22px; background: var(--bg-secondary); }
.med-fieldset legend { font-size: 15px; font-weight: 700; color: var(--navy-accent); padding: 0 8px; display: flex; align-items: center; gap: 8px; }
.med-toggle-row { display: flex; align-items: center; gap: 12px; }

/* single img preview */
.med-img-preview { width: 140px; height: 140px; border: 2px dashed var(--border-color); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-primary); color: var(--text-muted); font-size: 36px; }
.med-img-preview img { width: 100%; height: 100%; object-fit: cover; }

/* gallery grid + tiles */
.med-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-bottom: 16px; }
.med-tile { position: relative; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-secondary); }
.med-tile-img { width: 100%; height: 140px; object-fit: cover; display: block; }
.med-tile-actions { display: flex; gap: 6px; justify-content: center; padding: 8px; background: var(--bg-primary); }
.med-primary-ribbon { position: absolute; top: 6px; left: 6px; z-index: 2; background: var(--success); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 3px; }
.med-gallery-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.med-gallery-empty { grid-column: 1 / -1; padding: 22px; text-align: center; color: var(--text-muted); border: 2px dashed var(--border-color); border-radius: var(--radius-sm); }
.med-gallery-loading { grid-column: 1 / -1; padding: 22px; text-align: center; color: var(--text-muted); }

/* ===== PMS Phase 2 (Procurement & Inventory) ===== */

/* small helpers (reuse Phase 1 .kchip / .kc- / .kval base) */
.kc-red { background: #ffebee; color: #c62828; }
.kval-warn { color: #e65100; font-weight: 700; }
.kval-danger { color: #c62828; font-weight: 700; }
.help-text-warn { color: #c62828; font-weight: 600; }

/* expiry highlight chips */
.exp-near { background: #fff3e0; color: #e65100; }
.exp-expired { background: #ffebee; color: #c62828; }

/* signed-qty colors (adjustments / stock moves) */
.qty-pos { color: #2e7d32; font-weight: 700; }
.qty-neg { color: #c62828; font-weight: 700; }

/* wider modals (override .modal base) */
.modal.modal-lg { max-width: 1000px; }
.modal.modal-wide { max-width: 820px; width: 94%; }

/* customer/supplier statement modal */
/* ===== Supplier Statement modal ===== */
.modal.modal-xl { width: 90%; max-width: 90vw; max-height: 92vh; }
.stmt-head { align-items: flex-start; padding: 20px 26px; }
.stmt-head-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stmt-head-sub { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: rgba(255,255,255,0.72); font-weight: 500; }
.stmt-head-sub span { display: inline-flex; align-items: center; gap: 6px; }
.stmt-head-sub i { font-size: 11px; opacity: 0.85; }
.stmt-live i { color: #7ee08a; font-size: 8px !important; }
.stmt-off i { color: #ff9a90; font-size: 8px !important; }
.stmt-modal-body { padding: 20px 24px 24px; }
.stmt-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }
.stmt-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
.stmt-main { min-width: 0; }

/* summary cards */
.stmt-summary { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.stmt-side .stmt-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.stmt-side .stmt-card-label { margin: 0; }
.stmt-side .stmt-card-value { font-size: 17px; white-space: nowrap; }
.stmt-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-left: 4px solid var(--border-color); border-radius: var(--radius-sm); padding: 13px 16px; transition: box-shadow .2s, transform .2s; }
.stmt-card:hover { box-shadow: 0 2px 10px var(--shadow-color); transform: translateY(-1px); }
.stmt-card.is-debit { border-left-color: var(--warning); }
.stmt-card.is-credit { border-left-color: var(--success); }
.stmt-card-bal { border-left-color: var(--navy-accent); }
.stmt-card-bal.is-danger { border-left-color: var(--danger); }
.stmt-card-bal.is-ok { border-left-color: var(--success); }
.stmt-card-label { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 7px; }
.stmt-card-value { font-size: 19px; font-weight: 700; color: var(--text-primary); letter-spacing: -.3px; }
.stmt-card.is-debit .stmt-card-value { color: #b26a00; }
.stmt-card.is-credit .stmt-card-value { color: #1e7d34; }
.stmt-card-bal.is-danger .stmt-card-value { color: var(--danger); }
.stmt-card-bal.is-ok .stmt-card-value { color: var(--success); }

.stmt-profile { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 13px 14px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.stmt-profile .kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stmt-profile .kval { text-align: right; word-break: break-word; }

/* toolbar */
.stmt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 0; background: var(--bg-secondary); border: 1px solid var(--border-color); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.stmt-search { flex: 1 1 230px; min-width: 190px; }
.stmt-tb-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.stmt-tb-lbl { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.stmt-chips { display: inline-flex; gap: 0; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; }
.stmt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; height: 36px; border: none; border-right: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .18s, color .18s; }
.stmt-chip:last-child { border-right: none; }
.stmt-chip:hover { background: var(--table-hover); color: var(--navy-accent); }
.stmt-chip.is-on { background: var(--navy-primary); color: #fff; }

/* ledger table */
.stmt-tablewrap { border: 1px solid var(--border-color); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.stmt-table { border-collapse: collapse; margin: 0 !important; }
.stmt-table thead th { position: sticky; top: 0; z-index: 2; background: var(--navy-primary) !important; color: #fff !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .3px; padding: 12px 14px !important; border-bottom: none; white-space: nowrap; }
body.dark-mode .stmt-table thead th { background: var(--navy-light) !important; }
/* DataTables parks its sort glyph at the right edge — right-aligned labels ran into it */
.stmt-table thead th.stmt-num { padding-right: 30px !important; }
.stmt-table thead th.sorting:after, .stmt-table thead th.sorting_asc:after, .stmt-table thead th.sorting_desc:after { color: rgba(255,255,255,.9); opacity: .85; }
.stmt-table tbody td { padding: 10px 14px !important; border-bottom: 1px solid var(--border-light); font-size: 13.5px !important; color: var(--text-primary); vertical-align: middle; }
.stmt-table tbody tr:last-child td { border-bottom: none; }
.stmt-table tbody tr:hover td { background: var(--table-hover); }
.stmt-table tbody tr.stmt-row-open td { color: var(--text-muted); }
.stmt-table th.stmt-num, .stmt-table td.stmt-num { text-align: right; white-space: nowrap; }
.stmt-table tfoot th { padding: 12px 14px; background: var(--bg-secondary); border-top: 2px solid var(--navy-primary); font-size: 13px; font-weight: 700; color: var(--text-primary); text-align: left; }
body.dark-mode .stmt-table tfoot th { border-top-color: var(--navy-accent); }
.stmt-table tfoot th.stmt-num { text-align: right; font-variant-numeric: tabular-nums; }

.stmt-d { white-space: nowrap; }
.stmt-dash { color: var(--text-muted); opacity: .55; }
.stmt-ref-sub { color: var(--text-muted); font-size: 12.5px; }
.stmt-amt { font-variant-numeric: tabular-nums; }
.stmt-amt.is-danger { color: var(--danger); font-weight: 600; }
.stmt-amt.is-ok { color: var(--success); font-weight: 600; }
.stmt-t { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.stmt-t:before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.stmt-t.is-buy { color: #c07800; }
.stmt-t.is-pay { color: #1e7d34; }
.stmt-t.is-open { color: #7a8794; }

/* dt footer */
.stmt-dt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px 0; }
.stmt-dt-info { font-size: 12.5px; color: var(--text-muted); }
.stmt-dt-foot .dataTables_paginate { margin: 0 !important; padding: 0 !important; }

/* shared by the purchase + invoice detail popups */
.stmt-status-row { display: flex; flex-wrap: wrap; gap: 8px; }
.edit-scope-note { margin-bottom: 14px; }
.edit-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.edit-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.stmt-rail-h { display: flex; align-items: center; gap: 8px; margin: 4px 0 -4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.stmt-rail-h i { color: var(--navy-accent); }
.edit-lock-tag { padding: 2px 8px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
@media (max-width: 900px) { .edit-form-grid { grid-template-columns: 1fr; } }
/* ledger reuses the profile card as a wide strip, not a rail column */
.ledger-party-banner { flex-direction: row; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 16px; }
.ledger-party-banner .kv { justify-content: flex-start; }
.ledger-party-banner .kval { text-align: left; }
.stmt-note { padding: 11px 13px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.stmt-note i { margin-right: 6px; color: var(--text-muted); }
.stmt-side-actions { display: flex; flex-direction: column; gap: 8px; }
.stmt-side-actions .cat-btn { width: 100%; justify-content: center; }
.stmt-subhead { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.stmt-subhead i { color: var(--text-muted); }
.stmt-none { padding: 18px 14px !important; text-align: center; color: var(--text-muted); font-size: 13px; }

.stmt-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 20px; color: var(--text-muted); text-align: center; }
.stmt-empty i { font-size: 30px; opacity: .45; }
.stmt-empty p { margin: 0; font-size: 13.5px; }

/* skeleton */
.stmt-card .sk-a { height: 10px; width: 55%; margin-bottom: 10px; }
.stmt-card .sk-b { height: 18px; width: 80%; }
.stmt-skel-strip { height: 150px; }
.stmt-skel-bar { height: 56px; margin-bottom: 14px; }
.stmt-skel-row { display: grid; grid-template-columns: 1fr 1fr 2fr 1fr 1fr 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.stmt-skel-row .sk-c { height: 14px; }

body.dark-mode .stmt-t.is-buy { color: #ffd166; }
body.dark-mode .stmt-t.is-pay { color: #7ee08a; }
body.dark-mode .stmt-card.is-debit .stmt-card-value { color: #ffd166; }
body.dark-mode .stmt-card.is-credit .stmt-card-value { color: #7ee08a; }
body.dark-mode .stmt-chip.is-on { background: var(--navy-accent); }

@media (max-width: 1100px) {
    .modal.modal-xl { width: 96%; max-width: 96vw; }
    .stmt-grid { grid-template-columns: 1fr; }
    .stmt-side { position: static; }
    .stmt-summary { display: grid; grid-template-columns: repeat(2, 1fr); }
    .stmt-tb-r { margin-left: 0; width: 100%; flex-wrap: wrap; }
}
@media (max-width: 600px) {
    .stmt-summary { grid-template-columns: 1fr; }
    .stmt-chips { width: 100%; }
    .stmt-chip { flex: 1; justify-content: center; }
}

/* ===== Purchases (Phase 2) — line-items grid, totals panel, view modal ===== */
.po-items-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 14px; }
.po-items { width: 100%; border-collapse: collapse; min-width: 760px; }
.po-items thead th { background: var(--bg-secondary); color: var(--navy-accent); font-size: 12px; font-weight: 700; text-align: left; padding: 10px 10px; border-bottom: 2px solid var(--border-color); white-space: nowrap; }
.po-items tbody td { padding: 7px 8px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.po-items tbody tr:last-child td { border-bottom: none; }
.po-col-med { min-width: 200px; }
.po-col-num { width: 110px; text-align: right; }
.po-col-num input { text-align: right; }
.po-col-act { width: 48px; text-align: center; }
.po-linetotal { font-weight: 700; color: var(--navy-accent); white-space: nowrap; }
.po-in { width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); }
.po-in:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(0,116,217,0.15); }
.po-addrow { margin-top: 2px; }
.po-bottom { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
.po-notes .form-group { margin-bottom: 0; }
.po-totals { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 14px 16px; }
.po-trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border-color); }
.po-trow:last-child { border-bottom: none; }
.po-tlabel { font-size: 13px; color: var(--text-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.po-tval { font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.po-trow-total { border-top: 2px solid var(--border-color); border-bottom: 2px solid var(--border-color); margin: 4px 0; }
.po-trow-total .po-tlabel, .po-trow-total .po-tval { font-size: 16px; color: var(--navy-accent); }
.po-tinput { width: 130px; text-align: right; padding: 6px 9px; font-size: 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); }
.po-tinput:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(0,116,217,0.15); }
.po-due { color: #c62828; }
.po-view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px; }
.po-view-items { min-width: 560px; }
.po-view-empty { text-align: center; color: var(--text-muted); padding: 16px; }
.po-view-totals { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 14px 0; margin-top: 4px; border-top: 1px solid var(--border-color); }
.po-view-notes { margin-top: 12px; padding: 10px 14px; background: var(--bg-secondary); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-primary); }
@media (max-width: 768px) { .po-bottom { grid-template-columns: 1fr; } .po-view-grid { grid-template-columns: 1fr; } .po-tinput { width: 110px; } }

/* inventory summary stat strip */
.inv-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; }
.inv-stat { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-left: 4px solid var(--navy-accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); }
.inv-stat-icon { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 18px; background: #e7ecf5; color: var(--navy-primary); }
.inv-stat-body { display: flex; flex-direction: column; min-width: 0; }
.inv-stat-val { font-size: 19px; font-weight: 700; color: var(--text-primary); line-height: 1.25; white-space: nowrap; }
.inv-stat-lbl { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.inv-stat-navy { border-left-color: #001f3f; } .inv-stat-navy .inv-stat-icon { background: #e7ecf5; color: #001f3f; }
.inv-stat-green { border-left-color: #2e7d32; } .inv-stat-green .inv-stat-icon { background: #e8f5e9; color: #2e7d32; }
.inv-stat-amber { border-left-color: #e65100; } .inv-stat-amber .inv-stat-icon { background: #fff3e0; color: #e65100; }
.inv-stat-orange { border-left-color: #ef6c00; } .inv-stat-orange .inv-stat-icon { background: #fff3e0; color: #ef6c00; }
.inv-stat-red { border-left-color: #c62828; } .inv-stat-red .inv-stat-icon { background: #ffebee; color: #c62828; }
@media (max-width: 1100px) { .inv-summary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .inv-summary { grid-template-columns: 1fr; } }

/* stock adjustments — type chips + summary */
.adj-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.adj-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 3px; background: var(--bg-secondary); border: 1px solid var(--border-color); font-size: 13px; }
.adj-chip-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-weight: 600; }
.adj-chip-label i { font-size: 11px; opacity: .85; }
.adj-chip-val { font-weight: 700; color: var(--text-primary); min-width: 22px; text-align: right; }
.adj-type-add { background: #e8f5e9; color: #2e7d32; }
.adj-type-remove { background: #fff3e0; color: #e65100; }
.adj-type-damage { background: #fdecea; color: #c62828; }
.adj-type-expiry { background: #f3e5f5; color: #6a1b9a; }
.adj-type-correct { background: #e3f2fd; color: #1565c0; }

/* datatables right-align num cells */
table.dataTable td.dt-right, table.dataTable th.dt-right { text-align: right; }

/* ===== PMS Phase 3 (Sales & POS) ===== */

/* ============================================================
   POS Terminal — two-column workspace (Phase 3: Sales & POS)
   New .pos-* family. Everything else reuses .po-* / .inv-* / status-badge / action-icon.
   All colors via CSS vars so dark mode inherits automatically.
   ============================================================ */
.pos-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.pos-left { min-width: 0; }
.pos-right { min-width: 0; }

/* search bar */
.pos-search-bar { position: relative; display: flex; align-items: center; }
.pos-search-ico { position: absolute; left: 14px; color: var(--text-muted); font-size: 15px; pointer-events: none; }
.pos-search-input { width: 100%; box-sizing: border-box; padding: 14px 42px 14px 40px; font-size: 16px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-card); color: var(--text-primary); }
.pos-search-input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,0.15); }
.pos-search-clear { position: absolute; right: 8px; display: none; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 50%; }
.pos-search-clear:hover { background: var(--bg-secondary); color: var(--danger); }
.pos-search-hint { font-size: 12px; color: var(--text-muted); margin: 8px 2px 14px; }
.pos-search-hint strong { color: var(--navy-accent); }

/* results list */
.pos-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-height: 70vh; overflow-y: auto; align-content: start; }
.pos-results-empty { text-align: center; color: var(--text-muted); padding: 36px 16px; border: 1px dashed var(--border-color); border-radius: var(--radius); font-size: 14px; }
.pos-results-empty i { display: block; font-size: 26px; margin-bottom: 8px; opacity: .6; }
.pos-result { display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: 8px; padding: 14px 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; }
.pos-result:hover { border-color: var(--navy-accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.pos-result.is-out { opacity: .65; }
.pos-result-info { min-width: 0; }
.pos-result-name { font-weight: 700; color: var(--text-primary); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.pos-result-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pos-result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; font-size: 12px; }
.pos-result-price { font-weight: 700; color: var(--navy-accent); }
.pos-result-bc { color: var(--text-muted); }
.pos-stock { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 600; }
.pos-stock-ok { background: #e8f5e9; color: #2e7d32; }
.pos-stock-low { background: #fff3e0; color: #e65100; }
.pos-stock-out { background: #ffebee; color: #c62828; }
.pos-add-btn { flex-shrink: 0; }
.pos-rx-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-pill); background: #f3e5f5; color: #6a1b9a; font-size: 11px; font-weight: 700; }

/* right-side sticky checkout panel */
.pos-panel { position: sticky; top: 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); }
.pos-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--border-color); }
.pos-inv { font-weight: 700; color: var(--navy-accent); display: inline-flex; align-items: center; gap: 7px; }
.pos-cashier { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }

/* cart table tweaks (reuses .po-items) */
.pos-cart { min-width: 0; }
.pos-cart-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 10px; }
/* compact new-sale panel — denser cart, fields & totals (POS only; shared .po-* untouched) */
.pos-cart thead th { padding: 6px 7px; font-size: 11px; }
.pos-cart tbody td { padding: 4px 6px; }
.pos-cart .po-in { padding: 5px 8px; font-size: 13px; }
.pos-fg label { margin-bottom: 5px; font-size: 13px; }
.pos-fg input, .pos-fg select { padding: 9px 12px; }
.pos-totals .po-trow, .pos-pay .po-trow { padding: 4px 0; }
.pos-cart-empty { text-align: center; color: var(--text-muted); padding: 28px 14px; font-size: 13px; }
.pos-cart-empty i { display: block; font-size: 22px; margin-bottom: 8px; opacity: .6; }
.pos-cart-name { font-weight: 700; color: var(--text-primary); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.pos-cart-sub { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.pos-cart-warn { font-size: 11px; color: #c62828; margin-top: 3px; display: inline-flex; align-items: center; gap: 4px; }
.pos-row-over td { background: #fdecea; }
.pos-col-qty { width: 112px; }

/* qty stepper */
.pos-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-card); }
.pos-step { width: 24px; height: 28px; border: none; background: var(--bg-secondary); color: var(--navy-accent); font-size: 15px; font-weight: 700; cursor: pointer; line-height: 1; }
.pos-step:hover { background: var(--navy-accent); color: #fff; }
.pos-qty-in { width: 40px; height: 28px; border: none; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); text-align: center; font-size: 13px; background: var(--bg-card); color: var(--text-primary); -moz-appearance: textfield; }
.pos-qty-in::-webkit-outer-spin-button, .pos-qty-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos-rate-in, .pos-disc-in { min-width: 60px; }

/* customer + sale-type fields */
.pos-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pos-fg { margin-bottom: 8px; }
.pos-fg.pos-full { grid-column: 1 / -1; }
.pos-cust-hint { font-size: 12px; color: var(--navy-accent); margin: -4px 2px 10px; }

/* segmented sale-type control */
.pos-seg { display: flex; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; }
.pos-seg-btn { flex: 1; padding: 7px 8px; border: none; background: var(--bg-card); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pos-seg-btn + .pos-seg-btn { border-left: 1px solid var(--border-color); }
.pos-seg-btn.active { background: var(--navy-accent); color: #fff; }

/* totals + payment blocks (reuses .po-totals/.po-trow) */
.pos-totals, .pos-pay { margin-top: 8px; padding: 11px 13px; }
.pos-method { width: 130px; }
.pos-change { color: #2e7d32; }
/* quick-cash tender buttons (under the Paid field) */
.pos-quickcash { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.pos-qc-btn { flex: 1 1 auto; min-width: 54px; padding: 7px 6px; font-size: 13px; font-weight: 700; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--navy-accent); cursor: pointer; transition: background .15s, color .15s; }
.pos-qc-btn:hover { background: var(--navy-accent); color: #fff; }
.pos-qc-btn:active { transform: translateY(1px); }

/* actions */
.pos-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pos-clear-btn { flex: 0 0 auto; }
.pos-hold-btn, .pos-parked-btn { flex: 0 0 auto; }
.pos-parked-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border-radius: 3px; background: var(--navy-accent); color: #fff; }
/* parked tray (inside a SweetAlert) */
.pos-parked-list { display: flex; flex-direction: column; gap: 8px; text-align: left; max-height: 52vh; overflow-y: auto; }
.pos-parked-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); }
.pos-parked-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pos-parked-info span { font-size: 12px; color: var(--text-secondary); }
.pos-parked-info small { font-size: 11px; color: var(--text-muted); }
.pos-parked-act { display: flex; gap: 6px; flex-shrink: 0; }
/* quick-add customer button + 2x2 form (rendered inside a SweetAlert) */
.pos-qa-btn { margin-top: 6px; }
.qc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; margin-top: 6px; }
.qc-field { display: flex; flex-direction: column; gap: 4px; }
.qc-field label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.qc-field input { width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); }
.qc-field input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(0,116,217,0.15); }
@media (max-width: 480px) { .qc-grid { grid-template-columns: 1fr; } }

/* ===== Professional PMS Dashboard ===== */
.dash-section-h { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 4px 2px 12px; display: flex; align-items: center; gap: 8px; }
.dash-section-h i { color: var(--navy-accent); }
.mt-18 { margin-top: 18px; }

/* KPI strip */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.dash-kpi { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 15px 16px; display: flex; align-items: center; gap: 13px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); transition: transform .15s, box-shadow .15s; }
.dash-kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.dash-kpi-ico { flex-shrink: 0; width: 46px; height: 46px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; background: linear-gradient(135deg, var(--navy-primary, #001f3f), var(--navy-accent, #0074D9)); }
.dash-kpi-body { min-width: 0; }
.dash-kpi-val { font-size: 21px; font-weight: 800; color: var(--text-primary); line-height: 1.1; letter-spacing: -.3px; white-space: nowrap; }
.dash-kpi-label { font-size: 12px; color: var(--text-muted); margin-top: 3px; font-weight: 600; }

/* alert band */
.dash-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.dash-alert { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.dash-alert:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.dash-alert i { font-size: 22px; flex-shrink: 0; }
.dash-alert-val { font-size: 20px; font-weight: 800; line-height: 1; }
.dash-alert-label { font-size: 12px; font-weight: 600; margin-top: 3px; }
.dash-alert.warn { background: #fff8e1; border-color: #ffe0a3; color: #a86700; }
.dash-alert.danger { background: #ffebee; border-color: #ffc9cf; color: #c62828; }
.dash-alert.info { background: #e8f1fb; border-color: #c4ddf7; color: #1565c0; }
.dash-alert.ok { background: #e8f5e9; border-color: #b6e0bb; color: #2e7d32; }
body.dark-mode .dash-alert.warn { background: rgba(255,193,7,.13); border-color: rgba(255,193,7,.3); color: #ffcf6b; }
body.dark-mode .dash-alert.danger { background: rgba(198,40,40,.16); border-color: rgba(198,40,40,.35); color: #ff9a9a; }
body.dark-mode .dash-alert.info { background: rgba(21,101,192,.16); border-color: rgba(21,101,192,.35); color: #8fc0f5; }
body.dark-mode .dash-alert.ok { background: rgba(46,125,50,.16); border-color: rgba(46,125,50,.35); color: #9fd6a4; }

/* charts + list cards */
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 18px; }
.dash-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.dash-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); min-width: 0; }
.dash-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.dash-card-title i { color: var(--navy-accent); }
.dash-chart-wrap { position: relative; height: 260px; }
.dash-chart-span2 { grid-column: span 2; }
@media (max-width: 760px) { .dash-chart-span2 { grid-column: span 1; } }

/* dashboard tables */
.dash-table { width: 100%; border-collapse: collapse; }
.dash-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 700; padding: 8px 10px; border-bottom: 2px solid var(--border-color); white-space: nowrap; }
.dash-table td { padding: 8px 10px; font-size: 13px; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table .num { text-align: right; white-space: nowrap; }
.dash-empty { text-align: center; color: var(--text-muted); padding: 22px 10px; font-size: 13px; }
.dash-empty i { display: block; font-size: 22px; margin-bottom: 6px; opacity: .5; }
.dash-pill { display: inline-block; padding: 2px 9px; border-radius: 3px; font-size: 11px; font-weight: 700; text-transform: capitalize; }
.dash-pill.paid { background: #e8f5e9; color: #2e7d32; }
.dash-pill.partial { background: #fff3e0; color: #e65100; }
.dash-pill.unpaid { background: #ffebee; color: #c62828; }
.dash-days.soon { color: #c62828; font-weight: 700; }

/* skeleton shimmer */
.dash-skel { background: linear-gradient(90deg, var(--bg-secondary) 25%, rgba(127,127,127,.12) 37%, var(--bg-secondary) 63%); background-size: 400% 100%; animation: dashShimmer 1.4s ease infinite; border-radius: 3px; }
@keyframes dashShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.dash-skel-kpi { height: 76px; }
.pos-charge-btn { flex: 1; justify-content: center; font-size: 15px; }
.pos-charge-btn:disabled { opacity: .5; cursor: not-allowed; }
.pos-f9 { font-size: 11px; opacity: .8; border: 1px solid rgba(255,255,255,.5); border-radius: 3px; padding: 0 5px; margin-left: 6px; }

/* responsive: stack columns, drop sticky */
@media (max-width: 980px) {
  .pos-wrap { grid-template-columns: 1fr; }
  .pos-panel { position: static; }
  .pos-results { max-height: none; }
}
@media (max-width: 560px) {
  .pos-field-row { grid-template-columns: 1fr; }
  .pos-actions { flex-direction: column; }
}

/* sale view modal helpers */
.pay-summary { margin-bottom: 16px; }
.sale-pay-history { margin-top: 14px; }
.sale-view-actions { margin-top: 16px; }
.sale-view-subhead { margin: 18px 0 8px; font-size: 15px; }

/* ===== Sale Returns wizard (sale_returns.php) ===== */
.ret-picker { margin-bottom: 16px; }
.ret-search-row { display: flex; gap: 10px; align-items: stretch; }
.ret-search-row input { flex: 1; padding: 9px 12px; font-size: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); }
.ret-search-row input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(0,116,217,0.15); }
.ret-search-row .btn { white-space: nowrap; }
.ret-source { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ret-qty { width: 78px; text-align: right; }
.ret-max { font-size: 12px; color: var(--text-muted); margin-left: 4px; }
.ret-linetotal { font-weight: 600; white-space: nowrap; }
.ret-method-select { width: 150px; text-align: left; }
.ret-row-done { opacity: 0.6; }
.ret-done-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg-secondary); padding: 3px 8px; border-radius: 3px; }
@media (max-width: 768px) { .ret-search-row { flex-direction: column; } .ret-method-select { width: 130px; } }

/* ============================================================
   sale_print.php — receipt (thermal) + invoice (A4)
   body.print-thermal / body.print-a4 set from ?format=
   Screen = navy-themed white preview card; print = pure black/white.
   ============================================================ */

/* screen preview shell */
.pr-toolbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; background: var(--navy-primary); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.pr-toolbar .btn { margin: 0; }
.pr-toolbar .pr-fmt-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius-pill); overflow: hidden; }
.pr-toolbar .pr-fmt-toggle a { padding: 7px 16px; font-size: 13px; font-weight: 600; color: #cfe0f5; text-decoration: none; background: transparent; }
.pr-toolbar .pr-fmt-toggle a + a { border-left: 1px solid rgba(255,255,255,.45); }
.pr-toolbar .pr-fmt-toggle a.active { background: var(--navy-accent); color: #fff; }
.pr-wrap { display: flex; justify-content: center; padding: 24px 16px 60px; background: #e9edf2; min-height: calc(100vh - 56px); }
body.dark-mode .pr-wrap { background: #0c1322; }

/* the document cards (screen) — always white so preview matches paper */
.receipt, .invoice { background: #fff; color: #111; box-shadow: 0 6px 24px rgba(0,0,0,.16); }
.receipt { width: 72mm; padding: 8px 7px 14px; font-family: "Menlo", "Consolas", "Courier New", monospace; font-size: 11px; line-height: 1.38; color: #000; }
.invoice { width: 190mm; max-width: 100%; padding: 16mm 14mm; font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; line-height: 1.5; }

/* store header block */
.pr-store { text-align: center; margin-bottom: 10px; }
.invoice .pr-store { display: flex; align-items: flex-start; gap: 18px; text-align: left; border-bottom: 3px solid #001f3f; padding-bottom: 14px; }
.invoice .pr-store-meta { flex: 1 1 auto; }
.invoice .pr-store-meta h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: .2px; color: #001f3f; line-height: 1.15; }
.pr-logo { max-height: 54px; max-width: 160px; object-fit: contain; }
.invoice .pr-logo { max-height: 76px; max-width: 190px; }
.receipt .pr-logo { max-height: 44px; margin: 0 auto 4px; display: block; }
.pr-store-name { font-weight: 800; font-size: 16px; letter-spacing: .3px; color: #001f3f; }
.receipt .pr-store-name { font-size: 14px; color: #000; }
.pr-store-meta { font-size: 11px; color: #444; margin-top: 2px; }
.receipt .pr-store-meta { font-size: 10px; color: #000; }
.pr-store-meta div { line-height: 1.35; }

/* doc title */
.pr-doc-title { text-align: center; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin: 8px 0; }
.invoice .pr-doc-title { font-size: 17px; color: #001f3f; margin: 14px 0 10px; }
.receipt .pr-doc-title { font-size: 12px; border-top: 1px dashed #000; border-bottom: 1px dashed #000; padding: 4px 0; }

/* meta rows (invoice no / date / cashier / customer / rx) */
.pr-meta { margin-bottom: 10px; }
.invoice .pr-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; font-size: 12.5px; }
.pr-meta-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.receipt .pr-meta-row { font-size: 10.5px; }
.pr-meta-row span:first-child { color: #555; }
.receipt .pr-meta-row span:first-child { color: #000; font-weight: 600; }
.pr-meta-row span:last-child { font-weight: 600; color: #111; text-align: right; }

/* items table */
.pr-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.pr-table th, .pr-table td { text-align: left; vertical-align: top; }
.pr-table .pr-num { text-align: right; white-space: nowrap; }
/* invoice (A4) — bordered, shaded header, zebra */
.invoice .pr-table { font-size: 12.5px; }
.invoice .pr-table th { background: #001f3f; color: #fff; font-weight: 700; padding: 8px 10px; border: 1px solid #001f3f; }
.invoice .pr-table td { padding: 7px 10px; border: 1px solid #c8c8c8; }
.invoice .pr-table tbody tr:nth-child(even) td { background: #f4f6f9; }
/* receipt (thermal) — hairline rows, no side borders */
.receipt .pr-table { font-size: 10.5px; }
.receipt .pr-table th { border-bottom: 1px solid #000; padding: 2px 1px; font-weight: 700; }
.receipt .pr-table td { padding: 2px 1px; border-bottom: 1px dotted #999; }
.receipt .pr-table tbody tr:last-child td { border-bottom: 1px solid #000; }

/* batch + expiry traceability sub-line under each dispensed item */
.pr-batch { font-size: 0.9em; color: #555; }
.invoice .pr-batch { color: #5a5a5a; }
.receipt .pr-batch { display: block; font-size: 9.5px; color: #000; margin-top: 1px; line-height: 1.3; }

/* totals block — right aligned */
.pr-totals { margin: 8px 0 4px; margin-left: auto; }
.invoice .pr-totals { width: 280px; }
.pr-total-row { display: flex; justify-content: space-between; gap: 18px; padding: 3px 0; }
.invoice .pr-total-row { font-size: 13px; padding: 4px 10px; }
.receipt .pr-total-row { font-size: 10.5px; }
.pr-total-row span:first-child { color: #555; }
.receipt .pr-total-row span:first-child { color: #000; }
.pr-total-row span:last-child { font-weight: 600; white-space: nowrap; }
.pr-grand { font-weight: 800; }
.invoice .pr-grand { border-top: 2px solid #001f3f; margin-top: 4px; font-size: 15px; color: #001f3f; }
.receipt .pr-grand { border-top: 1px dashed #000; border-bottom: 1px dashed #000; margin-top: 2px; padding: 3px 0; font-size: 12px; }

/* footer */
.pr-foot { margin-top: 14px; font-size: 11px; color: #555; text-align: center; }
.receipt .pr-foot { font-size: 10px; color: #000; border-top: 1px dashed #000; padding-top: 6px; }
.invoice .pr-foot { display: flex; justify-content: space-between; gap: 30px; text-align: left; border-top: 1px solid #ddd; padding-top: 12px; margin-top: 26px; }
.invoice .pr-foot .pr-sign { flex: 1; text-align: center; border-top: 1px solid #555; padding-top: 6px; align-self: flex-end; }

/* ---- PRINT: kill chrome, force B/W, set paper geometry ---- */
@media print {
  .app-container, .sidebar, .mobile-nav, .mobile-bottom-nav, .main-content > .top-bar, .pr-toolbar { display: none !important; }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body { color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-wrap { display: block !important; padding: 0 !important; margin: 0 !important; background: #fff !important; min-height: 0 !important; }
  .receipt, .invoice { box-shadow: none !important; margin: 0 auto !important; color: #000 !important; max-width: 100% !important; }
  .pr-store-name, .invoice .pr-doc-title, .invoice .pr-grand { color: #000 !important; }
  .invoice .pr-store { border-bottom-color: #000 !important; }
  .invoice .pr-table th { background: #000 !important; color: #fff !important; border-color: #000 !important; }
  .invoice .pr-table tbody tr:nth-child(even) td { background: #fff !important; }
  .invoice .pr-grand { border-top-color: #000 !important; }
  a { text-decoration: none !important; color: #000 !important; }
  @page { margin: 6mm; }
}
/* thermal roll: edge-to-edge, tight margins */
@media print {
  body.print-thermal .receipt { width: 72mm !important; padding: 2mm 2mm 6mm !important; font-size: 11px !important; line-height: 1.3 !important; }
  body.print-thermal .pr-table { font-size: 10.5px !important; }
  body.print-thermal { width: 72mm; }
}
@media print {
  body.print-a4 .invoice { width: 100% !important; padding: 0 !important; font-size: 12.5px !important; }
}

/* ===== Silent SPA navigation (pjax) progress bar ===== */
#pjax-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--navy-accent, #0074D9); box-shadow: 0 0 8px rgba(0,116,217,.6); z-index: 99999; opacity: 0; pointer-events: none; }
#pjax-bar.active { width: 88%; opacity: 1; transition: width 9s cubic-bezier(.1,.7,.1,1); }
#pjax-bar.done { width: 100%; opacity: 0; transition: width .25s ease, opacity .45s ease .2s; }

/* ===== PMS Phase 4 (Finance & Ledger) ===== */

/* account summary cards (finance KPIs: debit/credit/net) */
.acct-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 26px; }
.acct-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-left: 4px solid var(--navy-primary); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 2px 8px var(--shadow-color); transition: transform .25s, box-shadow .25s; }
.acct-card:hover { transform: translateY(-3px); box-shadow: 0 4px 16px var(--shadow-hover); }
.acct-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.acct-card-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.acct-card-ico { width: 38px; height: 38px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%); color: #fff; flex-shrink: 0; }
.acct-card-val { font-size: 26px; font-weight: 800; color: var(--text-primary); line-height: 1.15; }
.acct-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
/* tinted variants by account nature */
.acct-card.is-debit { border-left-color: #c62828; }
.acct-card.is-debit .acct-card-ico { background: linear-gradient(135deg, #c62828 0%, #e53935 100%); }
.acct-card.is-debit .acct-card-val { color: #c62828; }
.acct-card.is-credit { border-left-color: #2e7d32; }
.acct-card.is-credit .acct-card-ico { background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%); }
.acct-card.is-credit .acct-card-val { color: #2e7d32; }
.acct-card.is-balance { border-left-color: var(--navy-accent); }
.acct-card.is-balance .acct-card-ico { background: linear-gradient(135deg, var(--navy-accent) 0%, #339af0 100%); }
.acct-card.is-balance .acct-card-val { color: var(--navy-accent); }
body.dark-mode .acct-card.is-debit .acct-card-val { color: #ef9a9a; }
body.dark-mode .acct-card.is-credit .acct-card-val { color: #81c784; }
body.dark-mode .acct-card.is-balance .acct-card-val { color: #5dade2; }

/* ledger debit/credit/balance cell coloring (reuses .dt-right for alignment) */
.led-debit { color: #c62828; font-weight: 700; }
.led-credit { color: #2e7d32; font-weight: 700; }
.led-balance { color: var(--text-primary); font-weight: 800; }
.led-zero { color: var(--text-muted); font-weight: 500; }
/* running balance sign hints */
.led-balance.is-neg { color: #c62828; }
.led-balance.is-pos { color: #2e7d32; }
body.dark-mode .led-debit, body.dark-mode .led-balance.is-neg { color: #ef9a9a; }
body.dark-mode .led-credit, body.dark-mode .led-balance.is-pos { color: #81c784; }

/* ref_type badges (reuse .kchip / .kc-* base from Phase 1) */
.ref-type { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.ref-type i { font-size: 10px; opacity: .85; }
.ref-sale { background: #e3f2fd; color: #1565c0; }
.ref-purchase { background: #ede7f6; color: #5e35b1; }
.ref-payment { background: #e8f5e9; color: #2e7d32; }
.ref-receipt { background: #e0f2f1; color: #00796b; }
.ref-refund { background: #ffebee; color: #c62828; }
.ref-expense { background: #fff3e0; color: #e65100; }
.ref-adjustment { background: #eceff1; color: #455a64; }
.ref-opening { background: #e7ecf5; color: #001f3f; }
.ledger-empty { text-align: center; padding: 20px; color: var(--text-muted); }

/* ===== PMS Phase 5 (HR & Payroll) ===== */

/* sub-heading inside detail panels (attendance / payslip) */
.detail-subhead { margin: 18px 0 8px; font-size: 14px; font-weight: 600; color: var(--navy-primary, #001f3f); display: flex; align-items: center; gap: 8px; }
.detail-subhead i { color: var(--navy-accent, #0074D9); }

/* quick clock in/out panel */
/* ===== Attendance — light card UI: tabs, quick clock, bulk day sheet ===== */.pg-now { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--navy-accent); white-space: nowrap; }

/* tabs */
.att-tabs { display: flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 6px 6px 0; margin-bottom: 16px; overflow-x: auto; }
.att-tab { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; font-size: 14px; font-weight: 600; border: none; border-bottom: 3px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; white-space: nowrap; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: all .18s; }
.att-tab:hover { background: var(--bg-primary); color: var(--navy-accent); }
.att-tab.active { color: var(--navy-accent); border-bottom-color: var(--navy-accent); background: rgba(0,116,217,.07); }

/* card shell */
.att-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.att-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.att-card-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 10px; }
.att-card-head h2 > i { color: var(--navy-accent); }
.att-card-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--navy-accent); color: #fff; font-size: 12px; font-weight: 700; }

/* inputs + small buttons */
.att-in { width: 100%; padding: 10px 13px; font-size: 16px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); }
.att-in:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.12); }
.att-in-sm { width: 120px; padding: 8px 10px; font-size: 15px; }
.att-in-xs { width: 80px; padding: 8px 10px; font-size: 15px; text-align: center; }
.att-in-date { width: 170px; }
.att-obtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: 13px; font-weight: 600; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all .18s; }
.att-obtn:hover { border-color: var(--navy-accent); color: var(--navy-accent); }

/* quick clock */
.att-clock-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.att-clock-select { flex: 1 1 320px; min-width: 230px; }
.att-clock-select label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.att-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 26px; font-size: 15px; font-weight: 700; border: none; border-radius: var(--radius-sm); color: #fff; cursor: pointer; min-width: 150px; touch-action: manipulation; }
.att-btn:hover { filter: brightness(1.08); }
.att-btn-in { background: var(--success); }
.att-btn-out { background: var(--danger); }
.att-hint { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; padding: 11px 15px; font-size: 13px; border-radius: var(--radius-sm); background: rgba(0,116,217,.07); border: 1px solid rgba(0,116,217,.2); color: var(--text-secondary); }

/* stat strip */
.att-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-bottom: 16px; }
.att-stat { display: flex; align-items: center; gap: 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 18px 20px; }
.att-stat-ic { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.att-ic-blue { background: rgba(0,116,217,.12); color: var(--navy-accent); }
.att-ic-green { background: rgba(52,168,83,.14); color: var(--success); }
.att-ic-amber { background: rgba(251,188,4,.18); color: #e0a800; }
.att-stat-txt { display: flex; flex-direction: column; min-width: 0; }
.att-stat-txt b { font-size: 28px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.att-stat-txt span { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.att-val-green b { color: var(--success); }
.att-val-amber b { color: #e0a800; }
.att-spark { flex: 0 0 auto; margin-left: auto; width: 110px; height: 40px; }

/* bulk toolbar */
.att-bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; border-radius: var(--radius-sm); background: var(--bg-primary); border: 1px solid var(--border-color); }
.att-bulk-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.att-qbtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; font-size: 13px; font-weight: 600; border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all .18s; }
.att-qbtn:hover { border-color: var(--navy-accent); color: var(--navy-accent); }
.att-q-present:hover { background: var(--success); border-color: var(--success); color: #fff; }
.att-q-absent:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.att-q-leave:hover { background: #7b61ff; border-color: #7b61ff; color: #fff; }
.att-bulk-times { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att-bulk-times label { font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* employee search */
.att-search { position: relative; margin-bottom: 14px; max-width: 420px; }
.att-search > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; }
.att-search input { width: 100%; padding: 10px 14px 10px 36px; font-size: 16px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); }
.att-search input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.12); }

/* day sheet + summary table */
.att-sheet-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.att-sheet { width: 100%; border-collapse: collapse; font-size: 14px; }
.att-sheet thead th { background: var(--bg-primary); color: var(--text-secondary); font-size: 12px; font-weight: 600; padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.att-sheet td { padding: 11px 14px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); vertical-align: middle; }
.att-sheet tbody tr:last-child td { border-bottom: none; }
.att-sheet tbody tr.att-dirty { background: rgba(0,116,217,.05); }
.att-c { text-align: center; }
.att-r { text-align: right; }
.att-emp { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.att-avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--navy-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.att-emp-name { font-weight: 600; color: var(--text-primary); }
.att-emp-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.att-saved { flex: 0 0 auto; margin-left: auto; font-size: 11px; font-weight: 600; color: var(--success); background: rgba(52,168,83,.13); padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.att-num { font-weight: 700; }
.att-muted { color: var(--text-muted); }

/* status segment */
.att-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; }
.att-seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12px; font-weight: 600; border: none; background: var(--bg-card); color: var(--text-muted); cursor: pointer; white-space: nowrap; touch-action: manipulation; transition: all .15s; }
.att-seg-btn + .att-seg-btn { border-left: 1px solid var(--border-color); }
.att-seg-btn:hover { background: var(--bg-primary); }
.att-seg-btn.active.att-s-present { background: var(--success); color: #fff; }
.att-seg-btn.active.att-s-late { background: #e0a800; color: #fff; }
.att-seg-btn.active.att-s-half_day { background: var(--navy-accent); color: #fff; }
.att-seg-btn.active.att-s-leave { background: #7b61ff; color: #fff; }
.att-seg-btn.active.att-s-absent { background: var(--danger); color: #fff; }

/* sticky save bar */
.att-savebar { margin-top: 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 20px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: 0 1px 6px var(--shadow-color); }
.att-tally { display: flex; gap: 8px; flex-wrap: wrap; }
.att-tpill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: var(--radius-pill); }
.att-tp-present { background: rgba(52,168,83,.14); color: var(--success); }
.att-tp-late { background: rgba(251,188,4,.2); color: #8a6500; }
.att-tp-half_day { background: rgba(0,116,217,.12); color: var(--navy-accent); }
.att-tp-leave { background: rgba(123,97,255,.15); color: #6a4fe0; }
.att-tp-absent { background: rgba(234,67,53,.12); color: var(--danger); }
.att-tp-none { background: var(--bg-primary); color: var(--text-muted); }
body.dark-mode .att-tp-late { color: #ffd24d; }
body.dark-mode .att-tp-leave { color: #b5a4ff; }
.att-savebar-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.att-save { display: inline-flex; align-items: center; gap: 9px; padding: 12px 28px; font-size: 15px; font-weight: 700; border: none; border-radius: var(--radius-sm); background: var(--success); color: #fff; cursor: pointer; touch-action: manipulation; }
.att-save:hover:not(:disabled) { filter: brightness(1.08); }
.att-save:disabled { background: var(--border-color); color: var(--text-muted); cursor: not-allowed; }
.att-cancel { padding: 12px 20px; font-size: 14px; font-weight: 600; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.att-cancel:hover { border-color: var(--navy-accent); color: var(--navy-accent); }

/* filters block */
.att-filters { border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 16px; }
.att-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 0; border-bottom: 1px solid var(--border-color); }
.att-filters-title { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--navy-accent); padding-bottom: 10px; margin-bottom: -1px; border-bottom: 2px solid var(--navy-accent); }
.att-filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; padding: 16px; }
.att-fg label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }

/* empty state */
.att-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 20px; text-align: center; color: var(--text-muted); }
.att-empty > i { font-size: 46px; color: var(--border-color); }
.att-empty b { font-size: 16px; color: var(--text-primary); }
.att-skel { height: 58px; border-radius: var(--radius-sm); margin-bottom: 8px; background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; animation: attShine 1.3s infinite; }
@keyframes attShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (max-width: 900px) {    .att-tab { padding: 11px 14px; font-size: 13px; }
    .att-card { padding: 14px; }
    .att-btn { flex: 1 1 auto; min-width: 0; padding: 12px 16px; }
    .att-bulk-times { margin-left: 0; width: 100%; }
    .att-search { max-width: none; }
    .att-spark { display: none; }
    .att-stat-txt b { font-size: 24px; }
    .att-savebar { padding: 12px 14px; gap: 12px; }
    .att-savebar-acts { margin-left: 0; width: 100%; }
    .att-save { flex: 1 1 auto; justify-content: center; }
    .att-filters-grid { padding: 14px; gap: 12px; }
}
@media (max-width: 600px) {
    .att-clock-row { flex-direction: column; align-items: stretch; }
    .att-clock-btns { width: 100%; }
    .att-clock-btn { flex: 1; }
}

/* approve / reject action icons (extends .action-icon) */
.action-icon.approve-icon { background: #e8f5e9; border-color: #b7e0bc; color: #2e7d32; }
.action-icon.approve-icon:hover { background: #c8e6c9; }
.action-icon.reject-icon { background: #ffebee; border-color: #ffc9cf; color: #c62828; }
.action-icon.reject-icon:hover { background: #ffcdd2; }

/* leave / approval status badges (extends .status-badge) */
.status-badge.status-pending { background: rgba(251,188,4,0.15); color: #b8860b; }
.status-badge.status-rejected { background: rgba(234,67,53,0.12); color: var(--danger); }

/* payroll summary strip -> 4 stat cards on desktop (override grid-3) */
.payroll-stat-grid { grid-template-columns: repeat(4, 1fr); }

/* payslip detail: header chips grid */
.ps-head-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 22px; }

/* allowances / deductions two-column editor */
.ps-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ps-col { border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); overflow: hidden; }
.ps-col-head { font-size: 13px; font-weight: 700; padding: 10px 14px; color: #fff; display: flex; align-items: center; gap: 8px; }
.ps-col-allow { background: #2e7d32; }
.ps-col-deduct { background: #c62828; }
.ps-items { padding: 6px 0; min-height: 48px; }
.ps-item-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border-color); }
.ps-item-row:last-child { border-bottom: none; }
.ps-item-label { flex: 1; font-size: 14px; color: var(--text-primary); word-break: break-word; }
.ps-item-amount { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.ps-item-del { flex-shrink: 0; }
.ps-item-empty { padding: 12px 14px; font-size: 13px; color: var(--text-muted); font-style: italic; }

/* add-item inline row */
.ps-add-row { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px dashed var(--border-color); background: var(--bg-secondary); align-items: center; flex-wrap: wrap; }
.ps-add-label { flex: 1 1 140px; min-width: 0; padding: 8px 10px; font-size: 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); }
.ps-add-amount { flex: 0 0 110px; width: 110px; padding: 8px 10px; font-size: 14px; text-align: right; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); }
.ps-add-label:focus, .ps-add-amount:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(0,116,217,0.15); }

/* salary summary totals (reuses .po-totals; just align to the right) */
.ps-totals { margin-left: auto; }
.ps-detail-actions { justify-content: flex-end; margin-top: 16px; }

/* pay-salary modal summary banner */
.ps-pay-summary { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; }
.ps-pay-line { font-size: 14px; color: var(--text-primary); font-weight: 600; }
.ps-pay-net { font-size: 18px; color: var(--navy-accent); margin-top: 6px; }
.ps-pay-net strong { font-weight: 800; }

/* A4 payslip print: 4-col earnings/deductions table + subtotal row */
.pr-payslip-table th:nth-child(3), .pr-payslip-table td:nth-child(3) { border-left: 2px solid #ccc; }
.pr-payslip-subtot td { border-top: 2px solid #000; background: #f3f3f3; }

@media (max-width: 900px) {
    .payroll-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .ps-editor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .payroll-stat-grid { grid-template-columns: 1fr; }
    .ps-totals { margin-left: 0; }
}

/* ===== PMS UoM (pack/box/unit) ===== */
/* packaging chip in product/po rows */
.pack-hint { color: var(--navy-accent, #0074D9); font-weight: 600; }

/* po line unit-of-measure selector col */
.po-col-unit { width: 130px; }
.po-col-unit select.po-in { text-align: left; }

/* base-unit qty note under po inputs */
.po-base-hint { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--text-secondary); }

/* pos qty input + stock/cart breakdown badges */
.pos-unit-in { min-width: 64px; height: 28px; }
.pos-stock-bd { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 600; background: #e0f7fa; color: #00838f; }
.pos-cart-bd { color: var(--navy-accent); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* ===== PMS POS browse (images + rack) ===== */
/* product thumb in search/browse rows */
.pos-result-img { width: 44px; height: 44px; flex-shrink: 0; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-secondary); display: inline-block; }
/* fallback icon when no img */
.pos-result-img-ph { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 18px; }
/* rack/shelf locator chip - teal tint */
.pos-result-rack { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-pill); background: #e0f2f1; color: #00695c; font-size: 11px; font-weight: 700; }

/* thumb + info side by side inside row */
.pos-result-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* ===== POS browse as a 4-up card grid ===== */
.pos-result > .pos-result-img { width: 72px; height: 72px; margin: 0 auto 2px; object-fit: contain; }
.pos-result .pos-result-img-ph { font-size: 28px; }
.pos-result-info { width: 100%; min-width: 0; }
.pos-result-name { justify-content: center; flex-wrap: wrap; }
.pos-result-sub { text-align: center; }
.pos-result-meta { justify-content: center; }
.pos-result .pos-add-btn { width: 100%; margin-top: auto; }
@media (max-width: 1280px) { .pos-results { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px)  { .pos-results { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pos-results { grid-template-columns: 1fr; } }

/* ===== AdminLTE-style KPI cards (small-box) — app-wide restyle ===== */
/* solid colored box, big value, translucent watermark icon in the corner. per-metric
   color comes from the existing .stat-icon-* modifier on the inner icon, lifted to the
   whole card via :has(). css-only — no page markup changes. */
.stat-card {
    position: relative;
    overflow: hidden;
    padding: 18px 20px;
    min-height: 104px;
    border: none;
    border-radius: 3px;
    color: #fff;
    background: #0074D9; /* default = info/accent (navy blue) */
    box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
    transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }

.stat-card-value {
    position: relative; z-index: 2;
    font-size: 32px; font-weight: 800; line-height: 1.1;
    color: #fff !important; margin-bottom: 2px;
}
.stat-card-label {
    position: relative; z-index: 2;
    font-size: 13px; font-weight: 600; letter-spacing: .3px;
    text-transform: none; color: rgba(255, 255, 255, .9) !important;
}
/* icon -> big translucent watermark pinned to the right */
.stat-card-icon {
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    z-index: 1; width: auto; height: auto; margin: 0;
    background: none !important; color: rgba(255, 255, 255, .25) !important;
    font-size: 64px; border-radius: 0;
}
.stat-card:hover .stat-card-icon { transform: translateY(-50%) scale(1.08); }

/* lift the icon color modifier onto the whole card */
.stat-card:has(.stat-icon-success),
.stat-card:has(.icon-gradient-success) { background: #28a745; }
.stat-card:has(.stat-icon-danger)  { background: #dc3545; }
.stat-card:has(.stat-icon-warning),
.stat-card:has(.icon-gradient-warning) { background: #f39c12; }
.stat-card:has(.stat-icon-accent)  { background: #0074D9; }

/* inventory summary chips -> same small-box look (variant class sits on .inv-stat itself) */
.inv-stat {
    position: relative; overflow: hidden;
    border: none; border-radius: 3px;
    padding: 18px 20px; min-height: 96px;
    color: #fff; background: #0074D9;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
    flex-direction: column; align-items: flex-start; gap: 2px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.inv-stat:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.inv-stat-body { z-index: 2; }
.inv-stat-val { color: #fff !important; font-size: 26px; }
.inv-stat-lbl { color: rgba(255, 255, 255, .9) !important; }
.inv-stat-icon {
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    width: auto; height: auto; background: none !important;
    color: rgba(255, 255, 255, .25) !important; font-size: 56px; border-radius: 0;
}
.inv-stat-navy   { background: #001f3f; }
.inv-stat-green  { background: #28a745; }
.inv-stat-amber  { background: #f39c12; }
.inv-stat-orange { background: #ef6c00; }
.inv-stat-red    { background: #dc3545; }
/* neutralise the old tinted icon chips under each variant */
.inv-stat-navy .inv-stat-icon, .inv-stat-green .inv-stat-icon, .inv-stat-amber .inv-stat-icon,
.inv-stat-orange .inv-stat-icon, .inv-stat-red .inv-stat-icon { background: none !important; color: rgba(255, 255, 255, .25) !important; }

/* mobile: scale the small-boxes down (after the legacy media rules so this wins) */
@media (max-width: 768px) {
    .stat-card { min-height: 90px; padding: 15px 16px; }
    .stat-card-value { font-size: 26px; }
    .stat-card-icon { font-size: 52px; }
    .inv-stat { min-height: 84px; padding: 15px 16px; }
    .inv-stat-val { font-size: 22px; }
    .inv-stat-icon { font-size: 46px; }
}

/* ===== POS Terminal — Emerald Corporate (UI 5) =====
   scoped to body.page-pos so the rest of the app stays navy. palette is the exact UI 5 registry
   set — primary #001f3f, secondary #003366, bg #f5f5f5, cards #FFF, accent #0074D9 */
/* dashboard reuses the same topbar component, so it needs the same tokens in scope
   (only the vars — the .main-content / .pos-shell layout rules below stay pos-only) */
body.page-pos,
body.page-dashboard, body.page-ai {
    --pos-primary: #001f3f; --pos-secondary: #003366; --pos-bg: #f5f5f5; --pos-card: #FFFFFF;
    --pos-accent: #0074D9; --pos-on-accent: #FFFFFF; --pos-text: #1A1A1A; --pos-muted: #6B7280;
    --pos-line: #e0e0e0; --pos-danger: #DC2626; --pos-warn: #D97706;
    --pos-soft: #e7ecf5; --pos-radius: 3px; --pos-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
body.page-pos .main-content { background: var(--pos-bg); padding: 0; display: flex; flex-direction: column; }
body.page-pos .pos-shell { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 16px; min-height: 0; }

/* --- top bar: brand + scan field + actions. replaces the old breadcrumb + header stack --- */
.pos-topbar { display: flex; align-items: center; gap: 18px; background: var(--pos-card); border: 1px solid var(--pos-line); border-radius: var(--pos-radius); padding: 12px 18px; box-shadow: var(--pos-shadow); }
.pos-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.pos-brand-mark { width: 42px; height: 42px; border-radius: 3px; background: var(--pos-accent); color: var(--pos-on-accent); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.pos-brand-name { font-size: 19px; font-weight: 700; color: var(--pos-text); line-height: 1.15; }
.pos-brand-sub { font-size: 12px; color: var(--pos-muted); }
.pos-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.pos-tb-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 58px; padding: 6px 10px; background: transparent; border: none; border-radius: 3px; color: var(--pos-muted); font-size: 11px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .2s, color .2s; }
.pos-tb-btn i { font-size: 17px; }
.pos-tb-btn:hover { background: var(--pos-soft); color: var(--pos-primary); }
.pos-tb-new { flex-direction: row; gap: 8px; padding: 10px 16px; background: var(--pos-soft); color: var(--pos-primary); border: 1px solid rgba(0,116,217,.25); font-size: 14px; }
.pos-tb-new:hover { background: rgba(0,116,217,.18); }
.pos-user { display: flex; align-items: center; gap: 9px; padding-left: 12px; border-left: 1px solid var(--pos-line); }
.pos-user-av { width: 34px; height: 34px; border-radius: 50%; background: var(--pos-accent); color: var(--pos-on-accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.pos-user-name { font-size: 13.5px; font-weight: 600; color: var(--pos-text); line-height: 1.2; }
.pos-user-role { font-size: 11.5px; color: var(--pos-muted); }

/* --- scan / search field --- */
body.page-pos .pos-search-bar { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
body.page-pos .pos-search-input { width: 100%; padding: 13px 44px 13px 42px; border: 1px solid var(--pos-line); border-radius: 3px; background: #f5f5f5; color: var(--pos-text); transition: border-color .2s, box-shadow .2s, background .2s; }
body.page-pos .pos-search-input:focus { outline: none; background: var(--pos-card); border-color: var(--pos-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.15); }
body.page-pos .pos-search-ico { position: absolute; left: 15px; color: var(--pos-muted); font-size: 15px; pointer-events: none; }
body.page-pos .pos-search-clear { position: absolute; right: 12px; background: none; border: none; color: var(--pos-muted); cursor: pointer; font-size: 15px; padding: 4px; }
.pos-scan-hint { position: absolute; right: 38px; color: #d0d0d0; font-size: 15px; pointer-events: none; }

/* --- main two-column workspace --- */
body.page-pos .pos-wrap { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(430px, .85fr); gap: 16px; align-items: start; min-height: 0; }
body.page-pos .pos-left, body.page-pos .pos-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pos-card { background: var(--pos-card); border: 1px solid var(--pos-line); border-radius: var(--pos-radius); box-shadow: var(--pos-shadow); }
.pos-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--pos-line); }
.pos-card-head h2 { font-size: 16px; font-weight: 700; color: var(--pos-text); display: flex; align-items: center; gap: 10px; margin: 0; }
.pos-card-ico { width: 30px; height: 30px; border-radius: 3px; background: var(--pos-soft); color: var(--pos-primary); display: grid; place-items: center; font-size: 14px; }
.pos-card-link { margin-left: auto; background: none; border: none; color: var(--pos-accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.pos-card-body { padding: 16px 18px; }

/* --- product grid (mockup cards: image, name, generic, form, price, stock chip, add) --- */
body.page-pos .pos-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px 18px; max-height: 68vh; overflow-y: auto; }
body.page-pos .pos-left > .pos-card:last-child { margin-top: auto; } /* kpi strip stays at bottom */
@media (max-width: 1280px) { body.page-pos .pos-results { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px)  { body.page-pos .pos-results { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { body.page-pos .pos-results { grid-template-columns: 1fr; } }
body.page-pos .pos-result { position: relative; display: flex; flex-direction: column; background: var(--pos-card); border: 1px solid var(--pos-line); border-radius: 3px; padding: 14px; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; }
body.page-pos .pos-result:hover { border-color: var(--pos-accent); box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-2px); }
body.page-pos .pos-result-img, body.page-pos .pos-result-img-ph { width: 100%; height: 120px; object-fit: cover; border-radius: 3px; background: #f5f5f5; margin-bottom: 12px; }
body.page-pos .pos-result-img-ph { display: grid; place-items: center; color: #d0d0d0; font-size: 30px; }
body.page-pos .pos-result-name { font-size: 14.5px; font-weight: 700; color: var(--pos-text); margin-bottom: 3px; line-height: 1.3; }
body.page-pos .pos-result-sub { font-size: 12.5px; color: var(--pos-muted); line-height: 1.4; }
body.page-pos .pos-result-price { font-size: 15px; font-weight: 700; color: var(--pos-primary); margin-top: 10px; }
body.page-pos .pos-result-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
body.page-pos .pos-add-btn { margin-left: auto; width: 34px; height: 34px; border-radius: 3px; background: var(--pos-soft); color: var(--pos-primary); border: 1px solid rgba(0,116,217,.25); font-size: 14px; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; flex-shrink: 0; }
body.page-pos .pos-add-btn:hover { background: var(--pos-accent); color: var(--pos-on-accent); }
body.page-pos .pos-add-btn:disabled { background: #f0f0f0; color: #d0d0d0; border-color: var(--pos-line); cursor: not-allowed; }
/* stock chips carry an icon + words, never colour alone (colour-blind + deaf-friendly) */
body.page-pos .pos-stock { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 3px; font-size: 11.5px; font-weight: 600; }
body.page-pos .pos-stock-ok { background: var(--pos-soft); color: #2e7d32; }
body.page-pos .pos-stock-low { background: #FFF7ED; color: var(--pos-warn); }
body.page-pos .pos-stock-out { background: #FEF2F2; color: var(--pos-danger); }
body.page-pos .pos-results-empty { grid-column: 1 / -1; text-align: center; padding: 44px 16px; color: var(--pos-muted); font-size: 14px; }
body.page-pos .pos-results-empty i { display: block; font-size: 34px; color: #d0d0d0; margin-bottom: 12px; }

/* --- category filter chips --- */

/* --- KPI strip --- */
.pos-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 14px 18px; }
.pos-kpi { display: flex; align-items: center; gap: 12px; background: var(--pos-card); border: 1px solid var(--pos-line); border-radius: 3px; padding: 14px; }
.pos-kpi-ico { width: 40px; height: 40px; border-radius: 3px; display: grid; place-items: center; font-size: 17px; flex-shrink: 0; }
.pos-kpi-items .pos-kpi-ico { background: #EFF6FF; color: #2563EB; }
.pos-kpi-disc .pos-kpi-ico { background: #F5F3FF; color: #7C3AED; }
.pos-kpi-tax .pos-kpi-ico { background: #FFF7ED; color: var(--pos-warn); }
.pos-kpi-total .pos-kpi-ico { background: var(--pos-soft); color: #2e7d32; }
.pos-kpi-label { font-size: 11px; font-weight: 700; color: var(--pos-muted); text-transform: uppercase; letter-spacing: .4px; }
.pos-kpi-val { font-size: 18px; font-weight: 700; color: var(--pos-text); }
.pos-kpi-total .pos-kpi-val { color: #2e7d32; }

/* --- cart panel --- */
body.page-pos .pos-panel { background: var(--pos-card); border: 1px solid var(--pos-line); border-radius: var(--pos-radius); box-shadow: var(--pos-shadow); overflow: hidden; }
body.page-pos .pos-panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--pos-line); background: var(--pos-card); }
body.page-pos .pos-inv { font-size: 16px; font-weight: 700; color: var(--pos-text); display: flex; align-items: center; gap: 10px; }
body.page-pos .pos-cashier { margin-left: auto; font-size: 12.5px; color: var(--pos-muted); display: flex; align-items: center; gap: 6px; }
body.page-pos .pos-cart-wrap { margin: 16px 18px; border: 1px solid var(--pos-line); border-radius: 3px; overflow: hidden; }
body.page-pos .pos-cart { width: 100%; border-collapse: collapse; }
body.page-pos .pos-cart thead th { background: #f5f5f5; color: var(--pos-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--pos-line); }
body.page-pos .pos-cart tbody td { padding: 11px 12px; font-size: 13.5px; color: var(--pos-text); border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
body.page-pos .pos-cart tbody tr:last-child td { border-bottom: none; }
/* newly scanned line pulses green — the visual twin of the scan beep */
@keyframes posRowAdd { 0% { background: rgba(0,116,217,.25); } 100% { background: transparent; } }
body.page-pos .pos-cart tbody tr.pos-row-new td { animation: posRowAdd 1.1s ease-out; }
body.page-pos .pos-cart-empty { padding: 40px 16px; text-align: center; color: var(--pos-muted); font-size: 13.5px; }
body.page-pos .pos-cart-empty i { display: block; font-size: 30px; color: #d0d0d0; margin-bottom: 12px; }

/* --- fields / totals / payment --- */
body.page-pos .pos-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 18px 14px; }
body.page-pos .pos-fg label { font-size: 12.5px; font-weight: 600; color: var(--pos-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
body.page-pos .pos-fg input, body.page-pos .pos-fg select { width: 100%; padding: 11px 13px; border: 1px solid var(--pos-line); border-radius: 3px; background: var(--pos-card); color: var(--pos-text); }
body.page-pos .pos-fg input:focus, body.page-pos .pos-fg select:focus { outline: none; border-color: var(--pos-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.15); }
body.page-pos .pos-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--pos-line); border-radius: 3px; overflow: hidden; }
body.page-pos .pos-seg-btn { padding: 11px 10px; background: var(--pos-card); border: none; color: var(--pos-muted); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: background .2s, color .2s; }
body.page-pos .pos-seg-btn.active { background: var(--pos-accent); color: var(--pos-on-accent); }
body.page-pos .pos-totals { margin: 0 18px 14px; padding: 14px 16px; background: #f5f5f5; border: 1px solid var(--pos-line); border-radius: 3px; }
body.page-pos .po-trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
body.page-pos .po-tlabel { font-size: 13.5px; color: var(--pos-muted); display: flex; align-items: center; gap: 7px; }
body.page-pos .po-tval { font-size: 14px; font-weight: 600; color: var(--pos-text); }
body.page-pos .po-trow-total { border-top: 1px solid var(--pos-line); margin-top: 6px; padding-top: 12px; }
body.page-pos .po-trow-total .po-tlabel { font-size: 15.5px; font-weight: 700; color: var(--pos-primary); }
body.page-pos .po-trow-total .po-tval { font-size: 19px; font-weight: 700; color: var(--pos-primary); }
body.page-pos .po-tinput { width: 110px; padding: 8px 11px; border: 1px solid var(--pos-line); border-radius: 3px; text-align: right; background: var(--pos-card); }
body.page-pos .pos-quickcash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
body.page-pos .pos-qc-btn { padding: 10px 6px; background: var(--pos-card); border: 1px solid var(--pos-line); border-radius: 3px; color: var(--pos-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; }
body.page-pos .pos-qc-btn:hover { background: var(--pos-soft); border-color: var(--pos-accent); }
body.page-pos .pos-change { color: #2e7d32; font-weight: 700; }
body.page-pos .po-due { color: var(--pos-danger); font-weight: 700; }

/* --- action buttons --- */
body.page-pos .pos-actions { display: grid; grid-template-columns: repeat(3, 1fr) 1.6fr; gap: 10px; padding: 0 18px 18px; }
body.page-pos .pos-actions .btn { padding: 13px 12px; border-radius: 3px; font-size: 13.5px; font-weight: 600; }
body.page-pos .pos-clear-btn { background: #FEF2F2; color: var(--pos-danger); border: 1px solid #FECACA; }
body.page-pos .pos-hold-btn { background: #FFF7ED; color: var(--pos-warn); border: 1px solid #FED7AA; }
body.page-pos .pos-parked-btn { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
body.page-pos .pos-charge-btn { background: var(--pos-accent); color: var(--pos-on-accent); border: none; font-size: 15px; box-shadow: 0 2px 8px rgba(0,116,217,.3); }
body.page-pos .pos-charge-btn:hover:not(:disabled) { background: #003366; }
body.page-pos .pos-charge-btn:disabled { background: #e0e0e0; color: #fff; box-shadow: none; cursor: not-allowed; }
body.page-pos .pos-f9 { padding: 2px 7px; background: rgba(255,255,255,.25); border-radius: 3px; font-size: 11.5px; font-weight: 700; }
body.page-pos .pos-parked-count { min-width: 19px; height: 19px; padding: 0 5px; background: #2563EB; color: #fff; border-radius: 3px; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }

/* ===== deaf-accessible signalling — every audio cue has a visual twin =====
   banner names the event in words + icon, and the screen edge flashes so it lands in peripheral
   vision even when the cashier is looking at the scanner rather than the monitor */
.pos-flash { position: fixed; top: 0; left: 0; right: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 17px 24px; font-size: 19px; font-weight: 700; color: #fff; transform: translateY(-100%); transition: transform .18s ease; pointer-events: none; }
.pos-flash.show { transform: translateY(0); }
.pos-flash.ok { background: #2e7d32; }
.pos-flash.err { background: var(--pos-danger); }
.pos-flash.warn { background: var(--pos-warn); }
.pos-flash i { font-size: 22px; }
.pos-flash-edge { position: fixed; inset: 0; z-index: 10055; pointer-events: none; opacity: 0; transition: opacity .22s ease; }
.pos-flash-edge.show { opacity: 1; }
.pos-flash-edge.ok { box-shadow: inset 0 0 0 6px #2e7d32; }
.pos-flash-edge.err { box-shadow: inset 0 0 0 6px var(--pos-danger); }
.pos-flash-edge.warn { box-shadow: inset 0 0 0 6px var(--pos-warn); }

/* sidebar keeps its normal width on POS — collapsing stays the user's own toggle */

@media (max-width: 1280px) {
    body.page-pos .pos-wrap { grid-template-columns: 1fr; }
    .pos-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .pos-topbar { flex-wrap: wrap; gap: 12px; }
    body.page-pos .pos-search-bar { order: 3; flex-basis: 100%; }
    .pos-topbar-actions { margin-left: auto; }
    .pos-brand-sub, .pos-user-role { display: none; }
    body.page-pos .pos-actions { grid-template-columns: repeat(2, 1fr); }
    .pos-kpis, body.page-pos .pos-field-row { grid-template-columns: 1fr; }
    body.page-pos .pos-results { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: none; }
    .pos-flash { font-size: 16px; padding: 14px 16px; }
}

/* ===== Dashboard UI — scoped to body.page-dashboard ===== */
/* palette: UI 5 Emerald Corporate (colors.md). own --pd-* tokens on purpose —
   the per-user theme <style> rewrites --navy-* at runtime and would repaint this page */
.page-dashboard, .page-ai {
    --pd-primary: #001f3f;
    --pd-secondary: #003366;
    --pd-bg: #f5f5f5;
    --pd-card: #FFFFFF;
    --pd-accent: #0074D9;
    --pd-on-accent: #FFFFFF;
    --pd-ink: #17242a;
    --pd-ink2: #4a5a63;
    --pd-muted: #8b9aa2;
    --pd-line: #e0e0e0;
    --pd-soft: #e7ecf5;
    --pd-ok: #34a853;
    --pd-warn: #D97706;
    --pd-err: #DC2626;
    --pd-info: #0EA5E9;
    --pd-violet: #8B5CF6;
    --pd-r: 3px;
    --pd-r-sm: 10px;
    --pd-sh: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
    background: var(--pd-bg);
}

/* shell */
.page-dashboard .main-content, .page-ai .main-content { background: var(--pd-bg); padding: 0; }
.page-dashboard .pd-wrap, .page-ai .pd-wrap { padding: 0 26px 26px; }
@keyframes pdShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.pd-skel { background: linear-gradient(90deg, #f0f0f0 25%, #fafafa 37%, #f0f0f0 63%); background-size: 400% 100%; animation: pdShimmer 1.4s ease infinite; border-radius: var(--pd-r); }

/* sidebar is deliberately NOT restyled here — it stays the shared navy chrome (same as pos.php) */

/* topbar — the single page header (no stacked breadcrumb/header bars) */

/* global search */
.pd-search-drop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-r); box-shadow: 0 12px 30px rgba(0,0,0,.13); padding: 6px; display: none; max-height: 380px; overflow-y: auto; z-index: 300; }
.pd-search-drop.open { display: block; }
.pd-sr { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--pd-r-sm); text-decoration: none; color: var(--pd-ink); font-size: 13.5px; }
.pd-sr:hover { background: var(--pd-soft); }
.pd-sr i { width: 30px; height: 30px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.pd-sr-main { flex: 1; min-width: 0; }
.pd-sr-main span { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-sr-main small { color: var(--pd-muted); font-size: 11.5px; }
.pd-sr-meta { color: var(--pd-ink2); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.pd-sr-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--pd-muted); font-weight: 700; padding: 9px 11px 4px; }
.pd-sr-empty { text-align: center; color: var(--pd-muted); font-size: 13px; padding: 18px 10px; }

/* topbar buttons */

/* topbar right cluster — reuses the shared notification bell component */

/* avatar dropdown */

/* page head */
.pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 0 18px; }
.pd-head h1 { font-size: 26px; font-weight: 700; color: var(--pd-ink); letter-spacing: -.4px; }
.pd-head p { font-size: 13.5px; color: var(--pd-muted); margin-top: 4px; }
.pd-date { display: inline-flex; align-items: center; gap: 9px; background: var(--pd-card); border: 1px solid var(--pd-line); border-radius: var(--pd-r-sm); padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--pd-ink2); }
.pd-date i { color: var(--pd-muted); }

/* kpi cards */
.pd-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pd-kpi { background: var(--pd-card); border: 1px solid var(--pd-line); border-radius: var(--pd-r); padding: 17px 18px; display: flex; gap: 13px; box-shadow: var(--pd-sh); transition: transform .18s, box-shadow .18s; }
.pd-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.pd-tile { width: 40px; height: 40px; border-radius: var(--pd-r-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.pd-i-green { background: #e7f8ef; color: var(--pd-ok); }
.pd-i-violet { background: #f1ebfe; color: var(--pd-violet); }
.pd-i-blue { background: #e6f4fd; color: var(--pd-info); }
.pd-i-amber { background: #fdf1e0; color: var(--pd-warn); }
.pd-i-red { background: #fdeaea; color: var(--pd-err); }
.pd-i-teal { background: #e7ecf5; color: var(--pd-primary); }
.pd-kpi-b { min-width: 0; }
.pd-kpi-l { font-size: 12.5px; color: var(--pd-muted); font-weight: 500; }
.pd-kpi-v { font-size: 21px; font-weight: 700; color: var(--pd-ink); letter-spacing: -.4px; margin-top: 3px; white-space: nowrap; }
.pd-kpi-s { font-size: 11.5px; color: var(--pd-muted); margin-top: 5px; display: flex; align-items: center; gap: 5px; }
.pd-up { color: var(--pd-ok); font-weight: 600; }
.pd-down { color: var(--pd-err); font-weight: 600; }

/* cards + grids */
.pd-card { background: var(--pd-card); border: 1px solid var(--pd-line); border-radius: var(--pd-r); box-shadow: var(--pd-sh); min-width: 0; display: flex; flex-direction: column; }
.pd-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; }
.pd-card-h h3 { font-size: 15.5px; font-weight: 700; color: var(--pd-ink); display: flex; align-items: center; gap: 9px; }
.pd-card-h h3 i { color: var(--pd-accent); font-size: 14px; }
.pd-card-b { padding: 0 20px 20px; flex: 1; min-width: 0; }
.pd-card-b.pd-flush { padding: 0 0 6px; }
.pd-grid-3 { display: grid; grid-template-columns: 1.55fr 1.1fr 1fr; gap: 16px; margin-top: 18px; }
.pd-grid-2 { display: grid; grid-template-columns: 2.7fr 1fr; gap: 16px; margin-top: 18px; }
.pd-grid-2e { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.pd-grid-3e { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.pd-sec-h { font-size: 13px; font-weight: 700; color: var(--pd-muted); text-transform: uppercase; letter-spacing: .9px; margin: 28px 0 -2px; display: flex; align-items: center; gap: 8px; }
.pd-sec-h i { color: var(--pd-accent); }
.pd-chart { position: relative; height: 220px; }

/* mini dropdown (never a plain <select>) */
.pd-drop { position: relative; }
.pd-drop-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--pd-card); border: 1px solid var(--pd-line); border-radius: var(--pd-r-sm); padding: 8px 13px; font-size: 12.5px; font-weight: 600; color: var(--pd-ink2); cursor: pointer; }
.pd-drop-btn:hover { border-color: var(--pd-accent); }
.pd-drop-btn i { font-size: 10px; color: var(--pd-muted); }
.pd-drop-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-r-sm); box-shadow: 0 10px 26px rgba(0,0,0,.13); padding: 5px; display: none; z-index: 200; }
.pd-drop.open .pd-drop-menu { display: block; }
.pd-drop-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 11px; border-radius: 3px; font-size: 13px; color: var(--pd-ink2); cursor: pointer; }
.pd-drop-menu button:hover { background: var(--pd-soft); color: var(--pd-primary); }

/* donut + legend */
.pd-donut-wrap { display: flex; align-items: center; gap: 14px; }
.pd-donut { position: relative; width: 170px; height: 170px; flex-shrink: 0; }
.pd-legend { list-style: none; flex: 1; min-width: 0; }
.pd-legend li { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 12.5px; color: var(--pd-ink2); }
.pd-legend .pd-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pd-legend .pd-lg-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-legend .pd-lg-pct { font-weight: 700; color: var(--pd-ink); }

/* quick actions */
.pd-qa { display: flex; flex-direction: column; gap: 8px; }
.pd-qa a, .pd-qa button { display: flex; width: 100%; text-align: left; font: inherit; cursor: pointer; background: transparent; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--pd-line); border-radius: var(--pd-r-sm); text-decoration: none; color: var(--pd-ink); font-size: 13.5px; font-weight: 500; transition: all .18s; }
.pd-qa a:hover, .pd-qa button:hover { border-color: var(--pd-accent); background: var(--pd-soft); }
.pd-qa a > span, .pd-qa button > span { flex: 1; }
.pd-qa a > i.fa-chevron-right, .pd-qa button > i.fa-chevron-right { color: var(--pd-muted); font-size: 12px; }

/* table */
.pd-table { width: 100%; border-collapse: collapse; }
.pd-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--pd-muted); padding: 11px 20px; background: #f5f5f5; border-top: 1px solid var(--pd-line); border-bottom: 1px solid var(--pd-line); white-space: nowrap; }
.pd-table td { padding: 13px 20px; font-size: 13px; color: var(--pd-ink2); border-bottom: 1px solid var(--pd-line); white-space: nowrap; }
.pd-table tbody tr:last-child td { border-bottom: none; }
.pd-table tbody tr:hover { background: #f5f5f5; }
.pd-table .pd-strong { color: var(--pd-ink); font-weight: 600; }
.pd-chip { display: inline-block; padding: 3px 11px; border-radius: 3px; font-size: 11.5px; font-weight: 600; text-transform: capitalize; }
.pd-chip.green { background: #e7f8ef; color: var(--pd-ok); }
.pd-chip.blue { background: #e6f4fd; color: #0284c7; }
.pd-chip.amber { background: #fdf1e0; color: var(--pd-warn); }
.pd-chip.red { background: #fdeaea; color: var(--pd-err); }
.pd-chip.grey { background: #eef2f3; color: var(--pd-ink2); }
.pd-eye { width: 30px; height: 30px; border-radius: 3px; border: 1px solid var(--pd-line); background: #fff; color: var(--pd-ink2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; text-decoration: none; }
.pd-eye:hover { border-color: var(--pd-accent); color: var(--pd-accent); }
.pd-link { font-size: 12.5px; font-weight: 600; color: var(--pd-info); text-decoration: none; }
.pd-link:hover { text-decoration: underline; }
.pd-link-btn { font-size: 12.5px; font-weight: 600; color: var(--pd-ink2); border: 1px solid var(--pd-line); border-radius: 3px; padding: 7px 13px; text-decoration: none; }
.pd-link-btn:hover { border-color: var(--pd-accent); color: var(--pd-primary); }

/* media list (low stock) */
.pd-media { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--pd-line); }
.pd-media:last-child { border-bottom: none; }
.pd-media img, .pd-media .pd-thumb { width: 38px; height: 38px; border-radius: 3px; object-fit: cover; border: 1px solid var(--pd-line); flex-shrink: 0; background: var(--pd-soft); display: flex; align-items: center; justify-content: center; color: var(--pd-muted); font-size: 14px; }
.pd-media-b { flex: 1; min-width: 0; }
.pd-media-b strong { display: block; font-size: 13.5px; color: var(--pd-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-media-b small { font-size: 11.5px; color: var(--pd-muted); text-transform: capitalize; }
.pd-media-n { text-align: center; flex-shrink: 0; }
.pd-media-n b { display: block; background: #fdeaea; color: var(--pd-err); border-radius: 3px; padding: 2px 10px; font-size: 13px; font-weight: 700; }
.pd-media-n small { font-size: 10px; color: var(--pd-muted); }

.pd-empty { text-align: center; color: var(--pd-muted); font-size: 13px; padding: 26px 14px; }
.pd-empty i { display: block; font-size: 22px; margin-bottom: 7px; opacity: .45; }

/* footer */
.pd-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--pd-card); border: 1px solid var(--pd-line); border-radius: var(--pd-r); padding: 18px 22px; margin-top: 22px; }
.pd-footer-brand { display: flex; align-items: center; gap: 12px; }
.pd-footer-ico { width: 38px; height: 38px; border-radius: 3px; background: #e7f8ef; color: var(--pd-ok); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.pd-footer-brand strong { display: block; font-size: 14px; color: var(--pd-ink); }
.pd-footer-brand small { font-size: 12px; color: var(--pd-muted); }
.pd-footer-copy { font-size: 12.5px; color: var(--pd-muted); text-align: right; }

/* dark mode */
.page-dashboard.dark-mode, .page-ai.dark-mode {
    --pd-card: #16213e;
    --pd-bg: #131a2b;
    --pd-ink: #e8eef0;
    --pd-ink2: #b3bfc7;
    --pd-muted: #8593a0;
    --pd-line: #26314d;
    --pd-soft: #1c2743;
    --pd-sh: 0 1px 3px rgba(0,0,0,.3);
}
.page-dashboard.dark-mode .pd-drop-menu,
.page-dashboard.dark-mode .pd-search-drop,
.page-ai.dark-mode .pd-search-drop,
.page-dashboard.dark-mode .pd-eye { background: var(--pd-card); }
.page-dashboard.dark-mode .pd-table th,
.page-ai.dark-mode .pd-table th,
.page-dashboard.dark-mode .pd-table tbody tr:hover,
.page-ai.dark-mode .pd-table tbody tr:hover { background: var(--pd-soft); }

/* responsive */
@media (max-width: 1500px) { .pd-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1400px) {
    .pd-grid-3, .pd-grid-2, .pd-grid-3e { grid-template-columns: 1fr; }
    .pd-donut-wrap { justify-content: center; }
}
@media (max-width: 992px) {
    .pd-grid-2e { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .page-dashboard .pd-wrap, .page-ai .pd-wrap { padding: 0 14px 18px; }
    .pd-kpis { grid-template-columns: repeat(2, 1fr); }
    .pd-head { flex-direction: column; }
    .pd-donut-wrap { flex-direction: column; }
    .pd-footer { flex-direction: column; align-items: flex-start; }
    .pd-footer-copy { text-align: left; }
}
@media (max-width: 520px) { .pd-kpis { grid-template-columns: 1fr; } }

/* ===== Sale Return Workspace — light card UI: invoice picker + returns table ===== */
.modal.modal-workspace {
    width: 90%;
    max-width: 1560px;
    height: 92vh;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
}

/* --- header: white bar, icon + title + subtitle --- */
.rw-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 24px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.rw-head-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rw-head-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--navy-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.rw-head h3 { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-primary); }
.rw-head p { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.rw-x { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.rw-x:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* --- step ribbon --- */
.rw-steps { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); overflow-x: auto; }
.rw-stp { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.rw-stp-n { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--border-color); color: var(--text-muted); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all .25s; }
.rw-stp-t { display: flex; flex-direction: column; line-height: 1.35; }
.rw-stp-t b { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.rw-stp-t span { font-size: 12px; color: var(--text-muted); }
.rw-stp.active .rw-stp-n { background: var(--navy-accent); color: #fff; }
.rw-stp.active .rw-stp-t b { color: var(--navy-accent); }
.rw-stp.done .rw-stp-n { background: var(--success); color: #fff; }
.rw-stp-arrow { flex: 1 1 auto; min-width: 40px; height: 1px; background: var(--border-color); position: relative; }
.rw-stp-arrow::after { content: ''; position: absolute; right: 0; top: -3px; border: 3.5px solid transparent; border-left-color: var(--border-color); }

/* --- body: picker | builder --- */
.rw-body { flex: 1 1 auto; display: flex; gap: 16px; padding: 16px; min-height: 0; overflow: hidden; }

/* shared card shell */
.rw-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 18px 20px; }
.rw-card + .rw-card { margin-top: 16px; }
.rw-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.rw-card-head h4 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.rw-card-icon { color: var(--navy-accent); font-size: 16px; }
.rw-card-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.rw-obtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 13px; font-weight: 600; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all .18s; }
.rw-obtn:hover { border-color: var(--navy-accent); color: var(--navy-accent); }

/* --- LEFT: invoice picker --- */
.rw-side { flex: 0 0 350px; display: flex; min-height: 0; }
.rw-side-card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 18px 16px 0; }
.rw-side-title { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--text-primary); }
.rw-search { position: relative; margin-bottom: 12px; }
.rw-search input { width: 100%; padding: 11px 38px 11px 14px; font-size: 16px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); }
.rw-search input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.12); }
.rw-search > i { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; }
.rw-search-clear { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 6px; font-size: 13px; }
.rw-search-clear:hover { color: var(--danger); }
.rw-chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.rw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; font-size: 13px; font-weight: 600; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all .18s; }
.rw-chip:hover { border-color: var(--navy-accent); }
.rw-chip.active { background: var(--navy-primary); border-color: var(--navy-primary); color: #fff; }

.rw-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; }
.rw-bill { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-card); cursor: pointer; transition: all .18s; }
.rw-bill:hover { border-color: var(--navy-accent); box-shadow: 0 2px 8px var(--shadow-color); }
.rw-bill.active { border-color: var(--navy-accent); background: rgba(0,116,217,.06); box-shadow: 0 0 0 1px var(--navy-accent); }
.rw-bill-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rw-bill-no { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14px; font-weight: 700; color: var(--navy-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-bill-amt { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.rw-bill-cust { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.rw-bill-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text-muted); }
.rw-bill-meta i { margin-right: 5px; }
.rw-bill-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); }
.rw-tag-none { background: rgba(52,168,83,.13); color: var(--success); }
.rw-tag-partial { background: rgba(251,188,4,.18); color: #8a6500; }
.rw-tag-done { background: var(--bg-primary); color: var(--text-muted); }
body.dark-mode .rw-tag-partial { color: #ffd24d; }
body.dark-mode .rw-tag-done { background: rgba(255,255,255,.06); }
.rw-bill.rw-bill-done { opacity: .62; }
.rw-side-foot { flex: 0 0 auto; padding: 12px; font-size: 12px; color: var(--text-muted); text-align: center; border-top: 1px solid var(--border-color); margin: 0 -16px; }
.rw-list-msg { padding: 34px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.rw-list-msg i { display: block; font-size: 34px; margin-bottom: 10px; color: var(--border-color); }
.rw-skel { flex: 0 0 auto; height: 96px; border-radius: var(--radius); background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; animation: rwShine 1.3s infinite; }
@keyframes rwShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --- RIGHT: builder --- */
.rw-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rw-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); }
.rw-empty > i { font-size: 56px; color: var(--border-color); }
.rw-empty h4 { margin: 0; font-size: 19px; color: var(--text-primary); }
.rw-empty p { margin: 0; font-size: 14px; max-width: 340px; }
.rw-pane { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.rw-back { display: none; align-items: center; gap: 8px; margin-bottom: 14px; padding: 9px 16px; font-size: 14px; font-weight: 600; border: 1px solid var(--navy-accent); background: var(--bg-card); color: var(--navy-accent); border-radius: var(--radius-sm); cursor: pointer; }

/* invoice details */
.rw-detail-grid { display: grid; grid-template-columns: 1fr 1fr minmax(230px, .95fr); gap: 16px 30px; }
.rw-dcol { display: flex; flex-direction: column; gap: 13px; }
.rw-drow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.rw-drow > span { font-size: 13px; color: var(--text-muted); }
.rw-drow > b { font-size: 14px; font-weight: 700; color: var(--text-primary); text-align: right; }
.rw-drow > b.rw-money-green { color: var(--success); }
.rw-returnable { background: rgba(52,168,83,.08); border: 1px solid rgba(52,168,83,.3); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.rw-returnable > span { font-size: 13px; color: var(--text-secondary); }
.rw-returnable > b { font-size: 22px; font-weight: 800; color: var(--success); }
.rw-returnable > small { font-size: 12px; color: var(--success); }
.rw-warn { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 16px; font-size: 13px; border-radius: var(--radius-sm); background: rgba(251,188,4,.12); border: 1px solid rgba(251,188,4,.35); color: #8a6500; }
body.dark-mode .rw-warn { color: #ffd24d; }

/* medicines table */
.rw-tbl-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.rw-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.rw-tbl thead th { background: var(--bg-primary); color: var(--text-secondary); font-size: 12px; font-weight: 600; padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.rw-tbl td { padding: 13px 14px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); vertical-align: middle; }
.rw-tbl tbody tr:last-child td { border-bottom: none; }
.rw-tbl tbody tr.rw-picked { background: rgba(52,168,83,.05); }
.rw-tbl tbody tr.rw-done-row { opacity: .55; }
.rw-c { text-align: center; }
.rw-r { text-align: right; }
.rw-med { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.rw-med-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--bg-primary); color: var(--navy-accent); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.rw-med-name { font-weight: 600; color: var(--text-primary); }
.rw-med-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.rw-exp { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.rw-amt { font-weight: 700; white-space: nowrap; }
.rw-picked .rw-amt { color: var(--success); }
.rw-done-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-primary); padding: 6px 11px; border-radius: var(--radius-sm); white-space: nowrap; }

/* qty stepper */
.rw-stepper { display: inline-flex; align-items: center; border: 1px solid var(--navy-accent); border-radius: var(--radius-sm); overflow: hidden; }
.rw-step { width: 34px; height: 36px; border: none; background: var(--bg-card); color: var(--navy-accent); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: manipulation; }
.rw-step:hover:not(:disabled) { background: rgba(0,116,217,.1); }
.rw-step:disabled { color: var(--border-color); cursor: not-allowed; }
.rw-qty { width: 54px; height: 36px; border: none; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); text-align: center; font-size: 15px; font-weight: 700; background: var(--input-bg); color: var(--text-primary); -moz-appearance: textfield; }
.rw-qty:focus { outline: none; background: rgba(0,116,217,.08); }
.rw-qty::-webkit-outer-spin-button, .rw-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rw-del { width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--danger); font-size: 14px; cursor: pointer; }
.rw-del:hover:not(:disabled) { background: rgba(234,67,53,.1); border-color: var(--danger); }
.rw-del:disabled { color: var(--border-color); cursor: not-allowed; }

/* good / damaged */
.rw-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; }
.rw-seg-btn { padding: 7px 12px; font-size: 12px; font-weight: 600; border: none; background: var(--bg-card); color: var(--text-muted); cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.rw-seg-btn + .rw-seg-btn { border-left: 1px solid var(--border-color); }
.rw-seg-btn.active { background: var(--success); color: #fff; }
.rw-seg-btn.rw-seg-bad.active { background: var(--danger); color: #fff; }

.rw-tbl-total { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.rw-tbl-total b { font-size: 21px; font-weight: 800; color: var(--success); }
.rw-note { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 13px 16px; font-size: 14px; border-radius: var(--radius-sm); background: rgba(251,188,4,.12); border: 1px solid rgba(251,188,4,.35); color: #8a6500; }
body.dark-mode .rw-note { color: #ffd24d; }

/* reason / refund / note / date */
.rw-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; }
.rw-reasons, .rw-methods { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.rw-rchip { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; font-size: 13px; font-weight: 600; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all .18s; }
.rw-rchip:hover { border-color: var(--navy-accent); }
.rw-rchip.active { border-color: var(--navy-accent); background: rgba(0,116,217,.08); color: var(--navy-accent); }
.rw-rchip .rw-tick { display: none; }
.rw-rchip.active .rw-tick { display: inline; }
.rw-opt-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.rw-in { width: 100%; padding: 11px 14px; font-size: 16px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); }
.rw-in:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.12); }
.rw-hint { font-size: 12px; color: #8a6500; margin: -8px 0 16px; }
body.dark-mode .rw-hint { color: #ffd24d; }

/* --- footer: spans the whole modal --- */
.rw-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 22px; padding: 14px 24px; background: var(--bg-card); border-top: 1px solid var(--border-color); border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex-wrap: wrap; }
.rw-restock { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--radius-sm); background: rgba(52,168,83,.08); border: 1px solid rgba(52,168,83,.25); }
.rw-restock-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-sm); background: rgba(52,168,83,.18); color: var(--success); display: flex; align-items: center; justify-content: center; }
.rw-restock b { display: block; font-size: 14px; font-weight: 700; color: var(--success); }
.rw-restock span { font-size: 12px; color: var(--text-secondary); }
.rw-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.rw-stat { display: flex; flex-direction: column; gap: 3px; }
.rw-stat span { font-size: 12px; color: var(--text-muted); }
.rw-stat b { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.rw-stat b.rw-stat-money { font-size: 22px; font-weight: 800; color: var(--success); }
.rw-bar-acts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.rw-cancel { padding: 12px 26px; font-size: 15px; font-weight: 600; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.rw-cancel:hover { border-color: var(--danger); color: var(--danger); }
.rw-post { display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; font-size: 15px; font-weight: 700; border: none; border-radius: var(--radius-sm); background: var(--success); color: #fff; cursor: pointer; touch-action: manipulation; }
.rw-post:hover:not(:disabled) { filter: brightness(1.08); }
.rw-post:disabled { background: var(--border-color); color: var(--text-muted); cursor: not-allowed; }

/* plain-words recap inside the confirm popup */
.rw-confirm { text-align: left; line-height: 1.9; font-size: 15px; }
.rw-confirm i { width: 20px; color: var(--navy-accent); }

/* .initially-hidden is declared earlier in this file — re-assert it over the flex rules above */
.rw-empty.initially-hidden,
.rw-note.initially-hidden,
.rw-restock.initially-hidden,
.rw-bar.initially-hidden { display: none; }

@media (max-width: 1200px) {
    .rw-detail-grid { grid-template-columns: 1fr 1fr; }
    .rw-returnable { grid-column: 1 / -1; }
    .rw-stats { gap: 24px; }
}
@media (max-width: 900px) {
    .modal.modal-workspace { width: 96%; height: 95vh; max-height: 95vh; }
    .rw-head { padding: 14px 16px; }
    .rw-head h3 { font-size: 18px; }
    .rw-head p { display: none; }
    .rw-steps { padding: 12px 14px; gap: 8px; }
    .rw-stp-t span { display: none; }
    .rw-stp-arrow { min-width: 18px; }
    .rw-body { flex-direction: column; padding: 12px; gap: 12px; }
    .rw-side { flex: 1 1 auto; }
    .rw-main { display: none; }
    .rw-body.rw-detail .rw-side { display: none; }
    .rw-body.rw-detail .rw-main { display: flex; }
    .rw-back { display: inline-flex; }
    .rw-card { padding: 14px; }
    .rw-detail-grid { grid-template-columns: 1fr; gap: 12px; }
    .rw-opt-row { grid-template-columns: 1fr; }
    .rw-bar { padding: 12px 14px; gap: 14px; }
    .rw-bar-acts { margin-left: 0; width: 100%; }
    .rw-cancel, .rw-post { flex: 1 1 auto; justify-content: center; text-align: center; }
    .rw-stat b.rw-stat-money { font-size: 19px; }
}

/* ===== Medicines catalog — chip-row DataTable with row grouping ===== */
/* scoped to .cat-section / .chip-table so every other page + DataTable is untouched */
.cat-section { padding: 0; overflow: visible; }

/* card head = title block + export/add toolbar */
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--border-color); }
.cat-head-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cat-head-ico { width: 44px; height: 44px; border-radius: 3px; background: #ede7f6; color: #5e35b1; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.cat-head-txt h2 { font-size: 21px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 4px; }
.cat-head-txt p { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.cat-head-r { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.cat-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); border-radius: 3px; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .18s; }
.cat-btn:hover { border-color: var(--navy-accent); color: var(--navy-accent); }
.cat-btn i { font-size: 13px; }
.cat-btn-primary { background: var(--navy-primary); border-color: var(--navy-primary); color: #fff; }
.cat-btn-primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: #fff; }
.cat-btn-ghost { background: var(--bg-secondary); }

/* filter strip */
.cat-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 15px 22px; border-bottom: 1px solid var(--border-color); }
.cat-search { position: relative; flex: 1 1 250px; max-width: 360px; min-width: 200px; }
.cat-search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; pointer-events: none; }
.cat-search input { width: 100%; height: 40px; border: 1px solid var(--border-color); background: var(--input-bg); border-radius: 3px; padding: 0 14px 0 38px; color: var(--text-primary); outline: none; }
.cat-search input:focus { border-color: var(--navy-accent); }
.cat-filters-r { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--text-muted); white-space: nowrap; }

/* group-by strip */
.cat-groupbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 22px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.cat-groupbar-l { font-size: 12.5px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; }
.cat-groupbar-l i { color: var(--navy-accent); }
.cat-mini { background: none; border: 1px solid var(--border-color); border-radius: 3px; padding: 6px 11px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cat-mini:hover { border-color: var(--navy-accent); color: var(--navy-accent); }

/* rs-sel — searchable dropdown standing in for <select> */
.rs-sel { position: relative; }
.rs-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; min-width: 148px; padding: 0 13px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-secondary); border-radius: 3px; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rs-btn:hover { border-color: var(--navy-accent); }
.rs-btn > i { font-size: 10px; color: var(--text-muted); }
.rs-sel.has-val .rs-btn { border-color: var(--navy-accent); color: var(--navy-accent); }
.rs-sel.open .rs-btn { border-color: var(--navy-accent); }
.rs-sel-sm .rs-btn { min-width: 92px; height: 36px; padding: 0 11px; font-size: 13px; }
.rs-menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 100%; width: max-content; max-width: 280px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 3px; box-shadow: 0 12px 28px var(--shadow-hover); padding: 6px; display: none; z-index: 400; }
.rs-sel.open .rs-menu { display: block; }
.rs-find { position: relative; margin-bottom: 5px; }
.rs-find i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--text-muted); }
.rs-find input { width: 100%; height: 34px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-primary); border-radius: 3px; padding: 0 10px 0 31px; outline: none; }
.rs-list { max-height: 240px; overflow-y: auto; }
.rs-opt { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 11px; border-radius: 3px; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.rs-opt:hover { background: var(--bg-secondary); color: var(--navy-accent); }
.rs-opt.on { background: var(--navy-accent); color: #fff; font-weight: 600; }
.rs-none { padding: 12px; text-align: center; font-size: 12.5px; color: var(--text-muted); }

/* the chip table itself */
.cat-dtbtns { display: none; }
table.dataTable.chip-table { width: 100% !important; border-collapse: separate; border-spacing: 0; min-width: 1150px; }
table.dataTable.chip-table thead th { background: var(--navy-primary) !important; color: #fff !important; padding: 14px 16px !important; text-align: left; font-weight: 600; font-size: 13.5px; white-space: nowrap; border: none; }
table.dataTable.chip-table thead th:first-child { border-top-left-radius: 0; }
table.dataTable.chip-table tbody td { padding: 14px 16px !important; font-size: 13px; color: var(--text-secondary); vertical-align: top; border-bottom: 1px solid var(--border-color); background: var(--bg-card); }
table.dataTable.chip-table tbody tr:hover td { background: var(--table-hover); }

/* group header row */
tr.cat-grp td { background: #eef4fb !important; padding: 11px 16px !important; cursor: pointer; border-bottom: 1px solid #dbe7f5; user-select: none; }
tr.cat-grp:hover td { background: #e4eef9 !important; }
.cat-grp-arrow { color: var(--navy-accent); font-size: 12px; width: 16px; }
.cat-grp-name { font-size: 14px; font-weight: 700; color: var(--navy-primary); margin-right: 10px; }
.cat-grp-count { display: inline-block; background: #dbeafe; color: #1565c0; border-radius: 3px; padding: 2px 11px; font-size: 11.5px; font-weight: 700; }
tr.cat-hidden { display: none; }

/* product cell */
.cat-prod { display: flex; align-items: flex-start; gap: 12px; min-width: 210px; }
.cat-prod-b { min-width: 0; }
.cat-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cat-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 3px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.cat-tag i { font-size: 10px; }
.cat-tag-code { background: var(--bg-secondary); color: var(--text-secondary); font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; }

/* status cell */
.cat-status { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cat-st { display: inline-block; padding: 4px 13px; border-radius: 3px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.cat-st-green { background: #e8f5e9; color: #2e7d32; }
.cat-st-amber { background: #fff3e0; color: #e65100; }
.cat-st-red { background: #ffebee; color: #c62828; }
.cat-st-sub { font-size: 11px; color: var(--text-muted); }

/* footer: info + pagination */
.cat-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--border-color); }
.cat-section .dataTables_info { font-size: 13px; color: var(--text-muted); padding: 0 !important; }
.cat-section .dataTables_paginate { padding: 0 !important; }
.cat-section .dataTables_paginate .paginate_button { border: 1px solid var(--border-color) !important; background: var(--bg-card) !important; color: var(--text-secondary) !important; border-radius: 3px !important; padding: 7px 13px !important; margin-left: 6px !important; font-size: 13px; }
.cat-section .dataTables_paginate .paginate_button.current { background: var(--navy-primary) !important; border-color: var(--navy-primary) !important; color: #fff !important; }
.cat-section .dataTables_paginate .paginate_button.disabled { opacity: .45; cursor: not-allowed; }

/* dark mode */
body.dark-mode tr.cat-grp td { background: #1d2b45 !important; border-bottom-color: #2b3b57; }
body.dark-mode tr.cat-grp:hover td { background: #24344f !important; }
body.dark-mode .cat-grp-name { color: #cfe0f5; }
body.dark-mode .cat-grp-count { background: #24406b; color: #9dc4f0; }
body.dark-mode .cat-head-ico { background: #2b2350; color: #b39ddb; }
body.dark-mode .cat-tag-code { background: #252550; }

@media (max-width: 900px) {
    .cat-head, .cat-filters, .cat-groupbar, .cat-foot { padding-left: 14px; padding-right: 14px; }
    .cat-head-r .cat-btn span { display: none; }
    .cat-head-r .cat-btn { padding: 0 12px; }
    .cat-head-r .cat-btn-primary span { display: inline; }
    .cat-filters-r { margin-left: 0; }
    .cat-search { max-width: none; }
}

/* action icons + status pills — dark mode (the light tints glare on a dark card) */
body.dark-mode .action-icon { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); }
body.dark-mode .action-icon.edit-icon { background: rgba(232,162,0,.16); border-color: rgba(232,162,0,.36); color: #ffcc4d; }
body.dark-mode .action-icon.edit-icon:hover { background: rgba(232,162,0,.26); }
body.dark-mode .action-icon.delete-icon,
body.dark-mode .action-icon.reject-icon { background: rgba(226,59,46,.16); border-color: rgba(226,59,46,.36); color: #ff8a80; }
body.dark-mode .action-icon.delete-icon:hover,
body.dark-mode .action-icon.reject-icon:hover { background: rgba(226,59,46,.26); }
body.dark-mode .action-icon.view-icon { background: rgba(21,101,192,.22); border-color: rgba(21,101,192,.42); color: #90caf9; }
body.dark-mode .action-icon.view-icon:hover { background: rgba(21,101,192,.32); }
body.dark-mode .action-icon.approve-icon { background: rgba(46,125,50,.18); border-color: rgba(46,125,50,.38); color: #a5d6a7; }
body.dark-mode .action-icon.approve-icon:hover { background: rgba(46,125,50,.28); }
body.dark-mode .cat-st-green { background: rgba(46,125,50,.18); color: #a5d6a7; }
body.dark-mode .cat-st-amber { background: rgba(230,81,0,.18); color: #ffcc80; }
body.dark-mode .cat-st-red { background: rgba(198,40,40,.18); color: #ef9a9a; }
.action-icon:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ===== POS medicine boxes — whole card is the tap target ===== */
body.page-pos .pos-result { padding: 12px; gap: 0; user-select: none; -webkit-tap-highlight-color: transparent; }
body.page-pos .pos-result.pos-hit { cursor: pointer; }
body.page-pos .pos-result.pos-hit:hover { border-color: var(--pos-accent); box-shadow: 0 8px 22px rgba(0,0,0,.16); transform: translateY(-3px); }
body.page-pos .pos-result.pos-hit:active { transform: translateY(0) scale(.985); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
body.page-pos .pos-result.pos-hit:focus-visible { outline: none; border-color: var(--pos-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.35); }
/* the + fills in on hover so it reads as "this whole tile adds" */
body.page-pos .pos-result.pos-hit:hover .pos-add-btn { background: var(--pos-accent); color: var(--pos-on-accent); border-color: var(--pos-accent); }
body.page-pos .pos-add-btn { pointer-events: none; }

body.page-pos .pos-result-img, body.page-pos .pos-result-img-ph { height: 128px; transition: transform .25s ease; }
body.page-pos .pos-result.pos-hit:hover .pos-result-img { transform: scale(1.04); }
body.page-pos .pos-result-info { display: flex; flex-direction: column; flex: 1; }
body.page-pos .pos-result-price { margin-top: auto; padding-top: 8px; }

/* rack is what the counter staff walk to — keep it on the card face */
.pos-result-rackrow { margin-top: 7px; }
body.page-pos .pos-result-rack { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 3px; background: #EFF6FF; color: #1D4ED8; font-size: 11.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-pos .pos-result-rack.pos-rack-none { background: #f0f0f0; color: #666666; font-weight: 500; }

/* out of stock reads as unavailable without relying on colour alone (chip says the words) */
body.page-pos .pos-result.is-out { background: #FCFDFD; border-style: dashed; cursor: not-allowed; }
body.page-pos .pos-result.is-out .pos-result-img { filter: grayscale(1); opacity: .55; }
body.page-pos .pos-result.is-out .pos-result-name, body.page-pos .pos-result.is-out .pos-result-price { color: #666666; }
body.page-pos .pos-result.is-out .pos-add-btn { background: #f0f0f0; color: #d0d0d0; border-color: var(--pos-line); }

/* ===== New Purchase — light card form: details, compose-row items, sticky summary ===== */
.np-sub { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.np-sub-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np-sub-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.np-sub h2 { margin: 0; font-size: 21px; font-weight: 700; color: var(--text-primary); }
.np-sub p { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }

.np-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.np-main { min-width: 0; }
.np-side { position: sticky; top: 12px; }

.np-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.np-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.np-card-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 15px; background: rgba(0,116,217,.12); color: var(--navy-accent); }
.np-ic-green { background: rgba(52,168,83,.14); color: var(--success); }
.np-card-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.np-card-head p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }

/* labelled field grid */
.np-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 18px; }
.np-f label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.np-req { color: var(--danger); }
.np-in { width: 100%; height: 44px; padding: 0 13px; font-size: 16px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); }
.np-in:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.12); }
.np-in[readonly] { background: var(--bg-primary); color: var(--text-muted); cursor: default; }
textarea.np-in { height: auto; min-height: 118px; padding: 11px 13px; resize: vertical; font-family: inherit; }

/* select2 replaces the native select — match it to the 44px control height so the row stays level */
.np-card .select2-container { width: 100% !important; }
.np-card .select2-container--default .select2-selection--single { height: 44px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); }
.np-card .select2-container--default .select2-selection--single .select2-selection__rendered { height: 42px; line-height: 42px; padding-left: 13px; padding-right: 30px; font-size: 16px; color: var(--text-primary); }
.np-card .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted); }
.np-card .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: 6px; }
.np-card .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--navy-accent); }

/* compose row — one medicine at a time, then Add to List */
.np-compose { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(120px, 1.2fr) minmax(140px, 1.2fr) 90px minmax(110px, 1fr) minmax(110px, 1fr) auto; gap: 12px; align-items: stretch; margin-bottom: 30px; }
.np-compose > .np-f { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.np-compose > .np-f > label { min-height: 19px; margin-bottom: 8px; }
.np-add { display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; height: 44px; gap: 8px; padding: 0 18px; font-size: 14px; font-weight: 700; border: none; border-radius: var(--radius-sm); background: var(--navy-primary); color: #fff; cursor: pointer; white-space: nowrap; touch-action: manipulation; }
.np-add:hover { background: var(--navy-light); }
.np-base-hint { position: absolute; top: 100%; left: 0; right: 0; margin-top: 5px; font-size: 11px; line-height: 1.3; color: var(--text-muted); white-space: nowrap; }

/* item list */
.np-tbl-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.np-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.np-tbl thead th { background: var(--bg-primary); color: var(--text-secondary); font-size: 12px; font-weight: 600; padding: 12px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.np-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); vertical-align: middle; }
.np-tbl tbody tr:last-child td { border-bottom: none; }
.np-c { text-align: center; }
.np-r { text-align: right; }
.np-cell-in { width: 94px; padding: 7px 9px; font-size: 14px; text-align: right; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); }
.np-cell-in:focus { outline: none; border-color: var(--navy-accent); }
.np-idx { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-primary); color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.np-med-name { font-weight: 600; }
.np-med-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.np-line { font-weight: 700; white-space: nowrap; }
.np-del { width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--danger); font-size: 14px; cursor: pointer; }
.np-del:hover { background: rgba(234,67,53,.1); border-color: var(--danger); }
.np-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--text-muted); }
.np-empty > i { font-size: 40px; color: var(--border-color); }
.np-empty b { font-size: 15px; color: var(--text-primary); }

/* notes + payment, side by side */
.np-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.np-two > .np-card { margin-bottom: 0; }
.np-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.np-due-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 13px 16px; border-radius: var(--radius-sm); background: rgba(52,168,83,.08); border: 1px solid rgba(52,168,83,.28); }
.np-due-strip > span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.np-due-strip > b { font-size: 19px; font-weight: 800; color: var(--danger); }

/* sticky summary */
.np-srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
.np-srow > span { color: var(--text-muted); }
.np-srow > b { font-weight: 700; color: var(--text-primary); }
.np-srow-sep { border-top: 1px solid var(--border-color); margin-top: 9px; padding-top: 14px; }
.np-srow-total > span { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.np-srow-total > b { font-size: 21px; font-weight: 800; color: var(--navy-accent); }
.np-green > b { color: var(--success); }
.np-blue > b { color: var(--navy-accent); }
.np-red > b { color: var(--danger); }

/* footer actions */
.np-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.np-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; font-size: 15px; font-weight: 600; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.np-btn:hover { border-color: var(--navy-accent); color: var(--navy-accent); }
.np-btn-draft { background: var(--bg-primary); }
.np-btn-save { border: none; background: var(--success); color: #fff; font-weight: 700; padding: 12px 26px; }
.np-btn-save:hover { filter: brightness(1.08); border-color: transparent; color: #fff; }
.np-btn-save:disabled { background: var(--border-color); color: var(--text-muted); cursor: not-allowed; filter: none; }
.np-hint { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; padding: 11px 15px; font-size: 13px; border-radius: var(--radius-sm); background: rgba(0,116,217,.07); border: 1px solid rgba(0,116,217,.2); color: var(--text-secondary); }

/* .initially-hidden is declared earlier in this file — re-assert it over the flex/grid rules above */
.np-empty.initially-hidden,
.np-compose.initially-hidden,
.np-due-strip.initially-hidden,
.np-hint.initially-hidden,
.np-sub.initially-hidden,
.np-two.initially-hidden,
.np-grid.initially-hidden,
.np-actions.initially-hidden { display: none; }

@media (max-width: 1200px) {
    .np-grid { grid-template-columns: 1fr; }
    .np-side { position: static; }
}
@media (max-width: 900px) {
    .np-card { padding: 14px; }
    .np-compose { grid-template-columns: 1fr 1fr; }
    .np-add { grid-column: 1 / -1; }
    .np-sub h2 { font-size: 18px; }
    .np-sub p { display: none; }
    .np-btn, .np-btn-save { flex: 1 1 auto; justify-content: center; }
}

/* ===== POS medicine container ===== */
body.page-pos .pos-card-head { position: sticky; top: 0; z-index: 3; background: var(--pos-card); border-radius: var(--pos-radius) var(--pos-radius) 0 0; }
.pos-count { padding: 3px 10px; border-radius: 3px; background: var(--pos-soft); color: var(--pos-primary); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
body.page-pos .pos-card-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 3px; transition: background .2s; }
body.page-pos .pos-card-link:hover { background: var(--pos-soft); }

/* scroll area — thin branded bar, and a fade so cut-off rows read as "more below" */
body.page-pos .pos-results { scrollbar-width: thin; scrollbar-color: #CBE5DC transparent; scroll-behavior: smooth; overscroll-behavior: contain; }
body.page-pos .pos-results::-webkit-scrollbar { width: 8px; }
body.page-pos .pos-results::-webkit-scrollbar-track { background: transparent; }
body.page-pos .pos-results::-webkit-scrollbar-thumb { background: #CBE5DC; border-radius: 3px; border: 2px solid var(--pos-card); }
body.page-pos .pos-results::-webkit-scrollbar-thumb:hover { background: var(--pos-secondary); }

/* skeleton cards mirror the real card box so nothing shifts when data lands */
.pos-skel-card { border: 1px solid var(--pos-line); border-radius: 3px; padding: 12px; background: var(--pos-card); }
.pos-skel-img { width: 100%; height: 128px; border-radius: 3px; margin-bottom: 12px; }
.pos-skel-line { height: 11px; border-radius: 3px; margin-bottom: 7px; }
.pos-skel-line.lg { height: 14px; width: 80%; }
.pos-skel-line.sm { width: 45%; }
.pos-skel-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.pos-skel-chip { width: 84px; height: 22px; border-radius: 3px; display: block; }
.pos-skel-btn { width: 34px; height: 34px; border-radius: 3px; display: block; }

/* empty state now explains itself and offers the way out */
body.page-pos .pos-results-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 52px 20px; }
body.page-pos .pos-results-empty i { font-size: 34px; color: #d0d0d0; margin-bottom: 4px; display: block; }
body.page-pos .pos-results-empty b { font-size: 15px; color: var(--pos-text); font-weight: 700; }
body.page-pos .pos-results-empty span { font-size: 13px; color: var(--pos-muted); }
.pos-empty-btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid rgba(0,116,217,.25); border-radius: 3px; background: var(--pos-soft); color: var(--pos-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s; }
.pos-empty-btn:hover { background: rgba(0,116,217,.18); }
.cat-date { height: 40px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-primary); border-radius: 3px; padding: 0 12px; font-weight: 600; }
.cat-date:focus { outline: none; border-color: var(--navy-accent); }

/* dashboard: let the search field span the gap up to the New Sale button (pos keeps its compact field) */
.page-dashboard .pos-search-bar, .page-ai .pos-search-bar { flex: 1; min-width: 0; }

/* ===== POS topbar: normalise the shared notifications_bell block =====
   that include ships a whole .header-right cluster (bell + theme + logout + "Welcome, x") built for
   the old page header. inside the POS bar it duplicates the avatar and fights the flex gap, so it's
   restyled here rather than edited — 30 other pages still rely on its original markup. */
body.page-pos .pos-topbar .header-right { gap: 2px; align-items: center; }
/* the avatar block already names the user — drop the include's unclassed "Welcome, x" div */
body.page-pos .pos-topbar .header-right > div:not([class]) { display: none; }
/* one shared hit-box size so every action optically centres on the same line */
body.page-pos .pos-topbar .notification-bell-btn { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 3px; font-size: 16px; color: var(--pos-muted); transition: background .2s, color .2s; }
body.page-pos .pos-topbar .notification-bell-btn:hover { background: var(--pos-soft); color: var(--pos-primary); }
body.page-pos .pos-topbar .notification-badge { top: 1px; right: 1px; }
/* labelled buttons are 2 lines tall — pin a shared min-height so both vocabularies align */
body.page-pos .pos-tb-btn { min-height: 44px; justify-content: center; }
body.page-pos .pos-tb-new { min-height: 40px; }
/* read the icon cluster as one deliberate group, set apart from the labelled actions */
body.page-pos .pos-topbar .header-right { padding-inline: 8px; margin-inline: 4px; border-inline: 1px solid var(--pos-line); }
body.page-pos .pos-user { border-left: none; padding-left: 4px; }

/* ===== Top navbar — the single page header (replaces .breadcrumb + .header stacks) ===== */
.navbar { display: flex; align-items: center; gap: 14px; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e3e8ee); border-radius: 3px; padding: 10px 16px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,31,63,.06); }

.nav-page { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nav-page-ico { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 3px; background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%); color: #fff; font-size: 18px; }
.nav-page-txt { min-width: 0; }
.nav-title { font-size: 18px; font-weight: 700; color: var(--text-primary, #1a1a1a); line-height: 1.2; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-crumb { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--text-muted, #8b95a1); white-space: nowrap; }
.nav-crumb a { color: var(--navy-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.nav-crumb a:hover { text-decoration: underline; }
.nav-crumb-sep { font-size: 9px; opacity: .55; }
.nav-crumb-cur { color: var(--text-secondary, #6b7280); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
/* the shared bell block ships its own "Welcome, x" div — the avatar already names the user */
.navbar .header-right { gap: 2px; align-items: center; padding-inline: 6px; border-inline: 1px solid var(--border-color, #e3e8ee); }
.navbar .header-right > div:not([class]) { display: none; }
.navbar .notification-bell-btn { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 3px; font-size: 16px; transition: background .2s, color .2s; }
.navbar .notification-bell-btn:hover { background: rgba(0,116,217,.08); color: var(--navy-primary); }
.navbar .notification-badge { top: 1px; right: 1px; }

.nav-user { display: flex; align-items: center; gap: 9px; padding-left: 8px; }
.nav-user-av { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--navy-accent); color: #fff; font-weight: 700; font-size: 14px; }
.nav-user-txt { display: flex; flex-direction: column; line-height: 1.25; }
.nav-user-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary, #1a1a1a); }
.nav-user-role { font-size: 11.5px; color: var(--text-muted, #8b95a1); }

@media (max-width: 768px) {
    .navbar { gap: 8px; padding: 8px 10px; border-radius: 3px; }
    .nav-page-ico { width: 36px; height: 36px; font-size: 15px; }
    .nav-title { font-size: 15px; }
    .nav-crumb, .nav-user-txt { display: none; }
    .navbar .header-right { border: none; padding-inline: 0; }
}

/* ===== Attendance tweaks: fixed clock-card padding + aligned monthly data ===== */
/* quick clock sits in the Daily tab only — keep its padding steady at every width */
.att-clock-card { padding: 22px 24px; }
.att-clock-card .att-card-head { margin-bottom: 18px; }
.att-clock-card .att-clock-row { gap: 16px; row-gap: 18px; }
.att-clock-card .att-hint { margin-top: 18px; }

/* monthly records + summary: plain data tables, aligned columns */
#attendanceTable td, #summaryTable td { vertical-align: middle; white-space: nowrap; }
#attendanceTable th.att-tc, #attendanceTable td.att-tc,
#summaryTable th.att-tc, #summaryTable td.att-tc { text-align: center; }
#attendanceTable th.att-tr, #attendanceTable td.att-tr,
#summaryTable th.att-tr, #summaryTable td.att-tr { text-align: right; }
#attendanceTable td.att-tc, #attendanceTable td.att-tr,
#summaryTable td.att-tc, #summaryTable td.att-tr { font-variant-numeric: tabular-nums; }

/* summary rollup: centred counts, right-aligned money, digits that line up */
.att-sheet td.att-c, .att-sheet td.att-r, .att-sheet .att-num, .att-sheet .att-muted { font-variant-numeric: tabular-nums; }
.att-sheet td { vertical-align: middle; }
.att-sheet thead th.att-c { text-align: center; }
.att-sheet thead th.att-r { text-align: right; }

@media (max-width: 900px) {
    .att-clock-card { padding: 18px; }
}

/* --- card-internal strips: .cat-section is padding:0, so strips living inside it need their own gutter --- */
.cat-section > .dashboard-grid-3,
.cat-section > .dashboard-grid-4,
.cat-section > .adj-summary,
.cat-section > .inv-summary { margin: 16px 22px; }

/* filter bar: every control keeps a definite width so none can claim a whole row */
.cat-filters > .rs-sel { flex: 0 0 auto; width: 168px; }
.cat-filters > .rs-sel > .rs-btn { width: 100%; min-width: 0; }
.cat-filters .cat-filters-r .rs-sel { width: 92px; }
.cat-filters > .cat-date { flex: 0 0 auto; width: 152px; }
.cat-filters > .cat-btn { flex: 0 0 auto; }

/* DataTables tints the sorted column by default — pure noise on a chip table */
table.dataTable.chip-table tbody td.sorting_1,
table.dataTable.chip-table tbody td.sorting_2,
table.dataTable.chip-table tbody td.sorting_3 { background-color: var(--bg-card); }
table.dataTable.chip-table tbody tr:hover td.sorting_1,
table.dataTable.chip-table tbody tr:hover td.sorting_2,
table.dataTable.chip-table tbody tr:hover td.sorting_3 { background-color: var(--table-hover); }

@media (max-width: 900px) {
    .cat-section > .dashboard-grid-3,
    .cat-section > .dashboard-grid-4,
    .cat-section > .adj-summary,
    .cat-section > .inv-summary { margin: 14px; }
    .cat-filters > .rs-sel, .cat-filters > .cat-date { width: 100%; }
}

/* ===== Printable inventory list — plain table, screen-hidden, print-only ===== */
.pr-doc { padding: 18px 22px; color: #000; }
.pr-doc-head { margin-bottom: 14px; border-bottom: 2px solid #000; padding-bottom: 8px; }
.pr-doc-head h1 { font-size: 19px; font-weight: 700; margin: 0; }
.pr-doc-head p { font-size: 12px; color: #444; margin: 4px 0 0; }
.pr-inv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pr-inv-table th, .pr-inv-table td { border: 1px solid #999; padding: 6px 8px; text-align: left; vertical-align: top; }
.pr-inv-table thead th { background: #eee; font-weight: 700; }
.pr-inv-table tfoot td { font-weight: 700; background: #f5f5f5; }
.pr-inv-table small { color: #555; font-size: 10.5px; }
.pr-inv-table .pr-num, .pr-doc .pr-num { text-align: right; white-space: nowrap; }

@media print {
    /* only the print block survives — everything else (incl. modals/overlays) is suppressed.
       scoped off DataTables' print window (it adds .dt-print-view and has no .pr-wrap,
       so an unscoped rule blanked every table print in the app) */
    body:not(.dt-print-view) > *:not(.pr-wrap) { display: none !important; }
    .pr-wrap { display: block !important; }
    .pr-inv-table thead { display: table-header-group; }  /* repeat header on every page */
    .pr-inv-table tr { break-inside: avoid; page-break-inside: avoid; }
}

/* stock-adjustment workspace — reuses the sale-return .rw-* shell */
.rw-pane > .rw-card + .rw-card { margin-top: 14px; }
.adj-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 7px; }
.adj-batches { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.adj-batch { text-align: left; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-card); cursor: pointer; transition: all .18s; }
.adj-batch:hover { border-color: var(--navy-accent); }
.adj-batch.active { border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.14); }
.adj-batch b { display: block; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.adj-batch > span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.adj-avail { font-size: 13px; font-weight: 700; color: var(--success); margin-top: 7px; }
.adj-batch.is-expired .adj-avail { color: var(--danger); }
.adj-types { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.adj-type { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-secondary); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .18s; }
.adj-type:hover { border-color: var(--navy-accent); }
.adj-type.active { background: var(--navy-primary); border-color: var(--navy-primary); color: #fff; }
.adj-bar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.adj-msg { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ===== Settle Invoice — two-pane workspace (left = what you're settling, right = the payment) ===== */
/* a payment form needs far less room than the return wizard, so don't force its 92vh */
#payModal .modal-workspace { height: auto; max-height: 92vh; }
#payForm { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.st-body { flex: 1; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; padding: 16px; overflow-y: auto; align-items: start; }
.st-side, .st-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.st-rows { padding: 4px 2px; }
.st-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border-color, #e3e8ee); font-size: 13px; }
.st-row:last-child { border-bottom: none; }
.st-row span { color: var(--text-muted, #8b95a1); flex-shrink: 0; }
.st-row b { color: var(--text-primary, #1a1a1a); font-weight: 600; text-align: right; word-break: break-word; }
.st-row b.st-inv { font-size: 15px; color: var(--navy-accent); font-weight: 700; }

.st-money { border: 1px solid var(--border-color, #e3e8ee); border-radius: 3px; padding: 14px 16px; background: var(--bg-secondary, #f8fafb); }
.st-mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.st-mrow span { color: var(--text-muted, #8b95a1); }
.st-mrow b { font-weight: 600; color: var(--text-primary, #1a1a1a); }
.st-mrow-due { border-top: 1px solid var(--border-color, #e3e8ee); margin-top: 6px; padding-top: 11px; }
.st-mrow-due span { font-weight: 700; color: var(--text-secondary, #6b7280); }
.st-mrow-due b { font-size: 21px; font-weight: 700; color: #ea4335; }

.st-amt { font-size: 22px !important; font-weight: 700; text-align: right; padding: 12px 14px !important; }
.st-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }

.st-after { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--text-secondary, #6b7280); }
.st-after-ic { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 3px; background: rgba(0,116,217,.1); color: var(--navy-accent); font-size: 15px; }
.st-after b { display: block; font-size: 12px; color: var(--text-muted, #8b95a1); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.st-after span:last-child { font-size: 14.5px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.st-after-ok .st-after-ic { background: rgba(52,168,83,.12); color: #2e7d32; }
.st-after-ok span:last-child { color: #2e7d32; }
.st-after-bad .st-after-ic { background: rgba(234,67,53,.12); color: #ea4335; }
.st-after-bad span:last-child { color: #ea4335; }

@media (max-width: 900px) {
    .st-body { grid-template-columns: 1fr; }
    #payModal .modal-workspace { width: 96%; }
}
.cat-st-blue { background: #e3f2fd; color: #1565c0; }
body.dark-mode .cat-st-blue { background: rgba(21,101,192,.2); color: #90caf9; }

/* ===== Print List button — one utility style for every list print =====
   deliberately not primary/success: printing is a utility action, so it reads as a quiet
   outline button whose icon chip fills in on hover rather than competing for attention */
.btn-print { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 7px; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e3e8ee); border-radius: 3px; color: var(--text-secondary, #6b7280); font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: border-color .2s, color .2s, box-shadow .2s, transform .15s; }
.btn-print i { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 3px; background: rgba(0,116,217,.1); color: var(--navy-accent); font-size: 12.5px; transition: background .2s, color .2s; }
.btn-print:hover { border-color: var(--navy-accent); color: var(--navy-primary); box-shadow: 0 3px 10px rgba(0,116,217,.14); transform: translateY(-1px); }
.btn-print:hover i { background: var(--navy-accent); color: #fff; }
.btn-print:active { transform: translateY(0); box-shadow: none; }
.btn-print:focus-visible { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.18); }
body.dark-mode .btn-print { background: transparent; }

/* attendance: same button, pushed to the end of the tab bar */
.btn-print-tab { margin-left: auto; }
@media (max-width: 768px) {
    .btn-print span { display: none; }          /* icon-only when space is tight */
    .btn-print { padding: 0 7px; }
    .btn-print-tab { margin-left: 0; }
}

/* ===== Login — split-screen pharmacy SaaS sign-in (page-login only; the shared .login-* classes
   still dress signup / forgot / reset / verify and are deliberately untouched) ===== */
body.page-login { margin: 0; background: var(--bg-primary); }
.lg-shell { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

/* --- LEFT: brand + product story --- */
.lg-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding: 48px 56px; background: linear-gradient(160deg, #001529 0%, #001f3f 46%, #003366 100%); color: #fff; }
/* accent glow + clinical dot grid, drawn in css so the page loads with no image request */
.lg-brand::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(circle at 84% 10%, rgba(0,116,217,.42), transparent 46%),
    radial-gradient(circle at 6% 92%, rgba(0,116,217,.20), transparent 44%); }
.lg-brand::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 26%, transparent 76%);
    mask-image: radial-gradient(circle at 50% 38%, #000 26%, transparent 76%); }
.lg-brand > * { position: relative; z-index: 1; }

.lg-brand-top { display: flex; align-items: center; gap: 13px; }
.lg-brand-logo { width: 44px; height: 44px; border-radius: 3px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.lg-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.lg-brand-name { font-size: 17px; font-weight: 700; letter-spacing: .2px; }

.lg-brand h1 { margin: 0 0 14px; font-size: 38px; line-height: 1.18; font-weight: 700; letter-spacing: -.5px; }
.lg-brand-lede { margin: 0; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.76); max-width: 46ch; }

.lg-feats { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.lg-feats li { display: flex; align-items: flex-start; gap: 15px; }
.lg-feat-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 3px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.17); display: grid; place-items: center; font-size: 16px; }
.lg-feat-t { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.lg-feat-d { display: block; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.66); }

.lg-brand-foot { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.lg-trust { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.7); }
.lg-trust i { color: rgba(255,255,255,.9); }

/* --- RIGHT: the form --- */
.lg-panel { display: flex; align-items: center; justify-content: center; padding: 44px 28px; background: var(--bg-primary); }
.lg-card { width: 100%; max-width: 424px; }
.lg-mobile-brand { display: none; align-items: center; gap: 12px; margin-bottom: 26px; }
.lg-mobile-logo { width: 44px; height: 44px; border-radius: 3px; overflow: hidden; background: var(--navy-primary); display: grid; place-items: center; flex: 0 0 auto; }
.lg-mobile-logo img { width: 100%; height: 100%; object-fit: cover; }
.lg-mobile-name { font-size: 17px; font-weight: 700; color: var(--text-primary); }

.lg-title { margin: 0 0 7px; font-size: 27px; font-weight: 700; color: var(--text-primary); letter-spacing: -.3px; }
.lg-sub { margin: 0 0 26px; font-size: 14px; color: var(--text-muted); }

.lg-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; margin-bottom: 18px; font-size: 13.5px; line-height: 1.55; border-radius: var(--radius-sm); border: 1px solid transparent; }
.lg-alert i { margin-top: 2px; }
.lg-alert-err { background: rgba(234,67,53,.09); border-color: rgba(234,67,53,.3); color: #b3261e; }
.lg-alert-ok { background: rgba(52,168,83,.1); border-color: rgba(52,168,83,.32); color: #1e6b34; }
.lg-alert-warn { background: rgba(251,188,4,.14); border-color: rgba(251,188,4,.4); color: #8a6500; }
.lg-alert a { color: inherit; font-weight: 700; }
body.dark-mode .lg-alert-err { color: #ff9d95; }
body.dark-mode .lg-alert-ok { color: #7ee2a0; }
body.dark-mode .lg-alert-warn { color: #ffd24d; }

.lg-field { margin-bottom: 16px; }
.lg-field > label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.lg-input-wrap { position: relative; display: block; }
.lg-input-ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; }
.lg-input { width: 100%; height: 50px; padding: 0 16px 0 42px; font-size: 16px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); transition: border-color .18s, box-shadow .18s; }
.lg-input::placeholder { color: var(--text-muted); }
.lg-input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.14); }
.lg-input-pw { padding-right: 48px; }
.lg-eye { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; border-radius: 3px; background: transparent; color: var(--text-muted); font-size: 14px; cursor: pointer; display: grid; place-items: center; }
.lg-eye:hover { color: var(--navy-accent); background: rgba(0,116,217,.08); }
.lg-caps { display: none; align-items: center; gap: 8px; margin-top: 9px; font-size: 12.5px; color: #8a6500; }
.lg-caps.on { display: flex; }
body.dark-mode .lg-caps { color: #ffd24d; }

.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 22px; }
.lg-check { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; user-select: none; }
.lg-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg-check-box { width: 19px; height: 19px; border-radius: 3px; border: 1.5px solid var(--input-border); background: var(--input-bg); display: grid; place-items: center; color: transparent; font-size: 10px; transition: background .16s, border-color .16s, color .16s; }
.lg-check input:checked + .lg-check-box { background: var(--navy-accent); border-color: var(--navy-accent); color: #fff; }
.lg-check input:focus-visible + .lg-check-box { box-shadow: 0 0 0 3px rgba(0,116,217,.2); }

.lg-btn { width: 100%; height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; border-radius: var(--radius-sm); background: var(--navy-primary); color: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer; transition: background .18s, transform .1s; }
.lg-btn:hover:not(:disabled) { background: var(--navy-light); }
.lg-btn:active:not(:disabled) { transform: translateY(1px); }
.lg-btn:disabled { background: var(--border-color); color: var(--text-muted); cursor: not-allowed; }

.lg-div { display: flex; align-items: center; gap: 14px; margin: 22px 0; font-size: 12.5px; color: var(--text-muted); }
.lg-div::before, .lg-div::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.lg-google { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: border-color .18s, background .18s; }
.lg-google:hover { border-color: var(--navy-accent); background: rgba(0,116,217,.05); }

.lg-foot { margin-top: 26px; text-align: center; }
.lg-foot-line { margin: 0 0 10px; font-size: 14px; color: var(--text-secondary); }
.lg-link { color: var(--navy-accent); font-weight: 600; text-decoration: none; }
.lg-link:hover { text-decoration: underline; }
.lg-copy { margin: 0; font-size: 12px; color: var(--text-muted); }

@media (max-width: 980px) {
    .lg-shell { grid-template-columns: 1fr; }
    .lg-brand { display: none; }
    .lg-mobile-brand { display: flex; }
    .lg-panel { padding: 34px 20px; align-items: flex-start; }
}
@media (max-width: 420px) {
    .lg-title { font-size: 23px; }
    .lg-panel { padding: 26px 16px; }
}

/* ===== Searchable dropdown (vanilla .sd-* port) — tokens are fixed by the component spec:
   2px #ced4da border, 3px radius (squared, never pill), 16px input (no iOS zoom) ===== */
.searchable-dropdown { position: relative; }
.sd-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 2px solid #ced4da; border-radius: 3px; background: #fff; font-size: 16px; cursor: pointer; transition: all 0.3s; }
.searchable-dropdown.open .sd-trigger, .sd-trigger:focus { outline: none; border-color: var(--navy-accent, #0074D9); box-shadow: 0 0 0 3px rgba(0,116,217,0.15); }
.sd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-label.sd-placeholder { color: #999; }
.sd-arrow { font-size: 11px; color: #777; transition: transform 0.2s; flex-shrink: 0; }
.sd-arrow.open { transform: rotate(180deg); }
.sd-panel { position: fixed; z-index: 1200; background: #fff; border: 2px solid var(--navy-accent, #0074D9); border-radius: 3px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); overflow: hidden; }
.sd-search { width: 100%; box-sizing: border-box; padding: 10px 12px; border: none; border-bottom: 1px solid #eee; font-size: 16px; outline: none; }
.sd-list { max-height: 220px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
.sd-list::-webkit-scrollbar { width: 6px; }
.sd-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.sd-list::-webkit-scrollbar-track { background: transparent; }
.sd-item { padding: 9px 12px; font-size: 14px; cursor: pointer; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.sd-item:hover { background: #f1f6fb; }
.sd-item.selected { background: rgba(0,116,217,0.12); color: var(--navy-accent, #0074D9); font-weight: 600; }
.sd-empty { padding: 12px; color: #999; font-size: 13px; text-align: center; }
body.dark-mode .sd-trigger, body.dark-mode .sd-panel, body.dark-mode .sd-search { background: var(--bg-card); color: var(--text-primary); }

/* POS keeps the mandated shape, only the accent follows the emerald theme */
body.page-pos .searchable-dropdown.open .sd-trigger, body.page-pos .sd-trigger:focus { border-color: var(--pos-accent); box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
body.page-pos .sd-panel { border-color: var(--pos-accent); }
body.page-pos .sd-item:hover { background: var(--pos-soft); }
body.page-pos .sd-item.selected { background: rgba(34,197,94,.14); color: var(--pos-primary); }

/* roomier dashboard footer + clear gap beneath it */
.pd-footer { padding: 24px 26px; margin-top: 26px; margin-bottom: 12px; }
/* POS lost its footbar, so the shell now owns the bottom breathing room */
body.page-pos .pos-shell { padding: 16px 16px 26px; }

/* the native select is kept focusable, NOT display:none — a `required` select that cannot be
   focused makes the browser abort submit with no visible message ("not focusable" in console) */
.sd-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; }
/* mirror the native disabled state onto the trigger */
.sd-disabled .sd-trigger { background: #f2f4f6; color: #9aa3ad; cursor: not-allowed; pointer-events: none; }
.sd-disabled .sd-arrow { opacity: .4; }
/* <option disabled> stays visible but unpickable, like a native select */
.sd-item-off { color: #b6bec7; cursor: not-allowed; }
.sd-item-off:hover { background: transparent; }

/* ===== AI Assistant — settings card + chat page ===== */
/* settings card */
.aic-warn { display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px; margin-bottom: 20px; font-size: 13px; line-height: 1.6; border-radius: var(--radius-sm); background: rgba(251,188,4,.12); border: 1px solid rgba(251,188,4,.4); color: #8a6500; }
body.dark-mode .aic-warn { color: #ffd24d; }
.aic-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 10px; }
.aic-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.aic-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px; border: 2px solid var(--border-color); border-radius: var(--radius); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all .18s; }
.aic-tile > i { font-size: 24px; color: var(--navy-accent); }
.aic-tile-t { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.aic-tile-s { font-size: 12px; color: var(--text-muted); }
.aic-tile:hover { border-color: var(--navy-accent); }
.aic-tile.active { border-color: var(--navy-accent); background: rgba(0,116,217,.07); box-shadow: 0 0 0 1px var(--navy-accent); }
.aic-hint { margin: 9px 0 20px; font-size: 12px; color: var(--text-muted); }

.aic-block { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; background: var(--bg-card); }
.aic-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.aic-block-name { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.aic-badge { font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--bg-primary); color: var(--text-muted); }
.aic-badge-on { background: rgba(52,168,83,.14); color: var(--success); }
.aic-badge-err { background: rgba(234,67,53,.12); color: var(--danger); }
.aic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.aic-f > label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.aic-key-row { display: flex; gap: 8px; align-items: stretch; }
.aic-in { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; font-size: 15px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); }
.aic-in:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.12); }
.aic-icon-btn { flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.aic-icon-btn:hover { border-color: var(--navy-accent); color: var(--navy-accent); }
.aic-icon-danger:hover { border-color: var(--danger); color: var(--danger); }
.aic-sub { display: block; margin-top: 7px; font-size: 11.5px; color: var(--text-muted); word-break: break-all; }
.aic-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; margin-top: 18px; }

/* chat page — built from the dashboard's pd-* components, so only the bubbles are new */
.pd-kpis-3 { grid-template-columns: repeat(3, 1fr); }
.pd-skel-kpi { height: 92px; }

.ai-log { display: flex; flex-direction: column; gap: 14px; max-height: 58vh; overflow-y: auto; padding-right: 6px; }
.ai-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 46px 18px; color: var(--pd-muted); }
.ai-empty > i { font-size: 40px; color: var(--pd-line); }
.ai-empty b { font-size: 16px; color: var(--pd-ink); }
.ai-empty span { font-size: 13.5px; max-width: 380px; line-height: 1.6; }

.ai-msg { display: flex; align-items: flex-start; gap: 11px; }
.ai-msg-me { justify-content: flex-end; }
.ai-av { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--pd-r-sm); background: var(--pd-soft); color: var(--pd-primary); display: grid; place-items: center; font-size: 13px; }
.ai-bubble { min-width: 0; max-width: 100%; padding: 13px 16px; border: 1px solid var(--pd-line); border-radius: var(--pd-r); background: var(--pd-card); color: var(--pd-ink); font-size: 14px; line-height: 1.6; }
.ai-msg-me .ai-bubble { max-width: 78%; background: var(--pd-primary); border-color: var(--pd-primary); color: #fff; }
.ai-msg-bot .ai-bubble { flex: 1 1 auto; }
.ai-msg-err .ai-bubble { background: #fdeaea; border-color: rgba(234,67,53,.3); }
.ai-answer { color: var(--pd-ink); }
.ai-think { display: inline-flex; align-items: center; gap: 9px; color: var(--pd-muted); }
.ai-err { display: inline-flex; align-items: flex-start; gap: 9px; color: var(--pd-err); }

.ai-tbl-wrap { margin-top: 12px; max-height: 380px; overflow: auto; border: 1px solid var(--pd-line); border-radius: var(--pd-r-sm); }
.ai-tbl-wrap .pd-table th { position: sticky; top: 0; z-index: 1; }
.ai-tbl-wrap .pd-table th, .ai-tbl-wrap .pd-table td { padding: 9px 14px; }
.ai-tbl-foot { margin-top: 7px; font-size: 11.5px; color: var(--pd-muted); }

.ai-sql { margin-top: 11px; }
.ai-sql summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--pd-accent); }
.ai-sql pre { margin: 9px 0 0; padding: 12px 14px; border: 1px solid var(--pd-line); border-radius: var(--pd-r-sm); background: var(--pd-bg); font-size: 12px; line-height: 1.6; color: var(--pd-ink2); white-space: pre-wrap; word-break: break-word; }

/* the privacy note is a sentence, not a copyright line — override the footer's right align */
.pd-footer #aiNote { text-align: left; line-height: 1.6; }
.pd-footer #aiNote a { color: var(--pd-accent); font-weight: 600; }

@media (max-width: 1100px) {
    .pd-kpis-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .ai-log { max-height: none; }
    .ai-msg-me .ai-bubble { max-width: 92%; }
    .aic-actions { justify-content: stretch; }
    .aic-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===== POS panel: one shared 18px gutter =====
   every block in the panel is inset 18px (.pos-field-row padding, .pos-totals/.pos-cart-wrap
   margin, .pos-actions padding) — but the walk-in name group and the credit hint were direct
   panel children with no inset, so they ran full-bleed and broke the left edge */
body.page-pos .pos-panel > .pos-full,
body.page-pos .pos-panel > .pos-cust-hint { padding-inline: 18px; }
body.page-pos .pos-cust-hint { margin: -4px 0 10px; }
/* customer picker and the sale-type segment sit in one row — match their control heights */
body.page-pos .pos-fg .sd-trigger { min-height: 42px; }
body.page-pos .pos-seg-btn { min-height: 42px; }
body.page-pos .pos-qa-btn { margin-top: 8px; }

/* collapsed rail keeps the tighter rhythm — the group titles are hidden there anyway */
.sidebar.collapsed .sidebar-menu li { margin-bottom: 5px; }
.sidebar.collapsed .sidebar-menu-title { margin-top: 12px; }

/* credit-limit breach warning in POS — the server rejects it at checkout anyway, this just
   surfaces it while the basket is still being built */
body.page-pos .pos-cust-hint.pos-hint-bad { color: var(--pos-danger); font-weight: 600; }

/* expiry write-off action — destructive but distinct from delete */
.action-icon.expiry-icon { color: #d97706; }
.action-icon.expiry-icon:hover { background: rgba(217,119,6,.12); transform: scale(1.15); }

/* ===== Registers & Reorder ===== */
.rep-tabs { display: flex; align-items: center; gap: 4px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.rep-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: transparent; border: none; border-radius: 3px; color: var(--text-secondary); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.rep-tab:hover { background: rgba(0,116,217,.08); color: var(--navy-primary); }
.rep-tab.active { background: var(--navy-primary); color: #fff; }
.rep-lbl { font-size: 12px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.rep-date { width: auto; min-width: 150px; }
/* direction + urgency read as words, never colour alone */
.rep-dir { display: inline-block; padding: 2px 9px; border-radius: 3px; font-size: 11.5px; font-weight: 700; }
.rep-dir-in { background: #d4edda; color: #155724; }
.rep-dir-out { background: #fde2e1; color: #a4292a; }
.rep-urg { font-weight: 600; color: #d97706; }
.rep-urg-out { color: #ea4335; }
.rep-missing { color: #ea4335; font-style: italic; }
@media (max-width: 768px) { .rep-tabs { gap: 2px; } .rep-tab { padding: 9px 11px; font-size: 12.5px; } .rep-date { min-width: 130px; } }

/* ===== Roles & permissions matrix ===== */
.rl-roles { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.rl-role { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 3px; color: var(--text-secondary); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .2s; }
.rl-role:hover { border-color: var(--rc, var(--navy-accent)); color: var(--text-primary); }
.rl-role.active { background: var(--rc, var(--navy-primary)); border-color: var(--rc, var(--navy-primary)); color: #fff; }
.rl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rc, #888); flex-shrink: 0; }
.rl-role.active .rl-dot { background: #fff; }
.rl-lock { font-size: 10px; opacity: .8; }
.rl-note { font-size: 12.5px; color: var(--text-muted); margin: 0 0 16px; }
.rl-group { margin-bottom: 18px; }
.rl-group h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin: 0 0 8px; }
.rl-tbl { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 3px; }
.rl-tbl th { background: var(--bg-secondary); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border-color); }
.rl-tbl th:not(:first-child) { text-align: center; width: 90px; }
.rl-tbl td { padding: 8px 12px; font-size: 13.5px; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.rl-tbl tr:last-child td { border-bottom: none; }
.rl-tbl .rl-c { text-align: center; }
.rl-tbl .toggle:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 768px) { .rl-tbl th:not(:first-child), .rl-tbl td.rl-c { width: auto; } .rl-role { padding: 8px 11px; font-size: 12.5px; } }

/* ===== RS Popup — themed alert / confirm / toast (replaces stock SweetAlert) ===== */
.rs-pop-backdrop { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 21, 41, .55); backdrop-filter: blur(2px); animation: rsPopFade .18s ease; }
.rs-pop { position: relative; background: var(--bg-card); color: var(--text-primary); border-radius: 3px; border-top: 3px solid var(--navy-accent); box-shadow: 0 18px 50px rgba(0,0,0,.28); width: 420px; max-width: 94vw; max-height: 90vh; overflow-y: auto; overflow-x: hidden; padding: 26px 26px 22px; text-align: center; animation: rsPopIn .22s cubic-bezier(.2,.9,.3,1.15); }
.rs-pop.ico-success { border-top-color: var(--success); }
.rs-pop.ico-error { border-top-color: var(--danger); }
.rs-pop.ico-warning { border-top-color: var(--warning); }
.rs-pop-ico { width: 64px; height: 64px; margin: 2px auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; }
.rs-pop-ico.ico-success { background: rgba(52,168,83,.12); color: var(--success); }
.rs-pop-ico.ico-error { background: rgba(234,67,53,.12); color: var(--danger); }
.rs-pop-ico.ico-warning { background: rgba(251,188,4,.16); color: #b45309; }
.rs-pop-ico.ico-info, .rs-pop-ico.ico-question { background: rgba(0,116,217,.12); color: var(--navy-accent); }
.rs-pop-title { font-size: 19px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.rs-pop-text { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
.rs-pop-html { font-size: 14px; color: var(--text-secondary); line-height: 1.55; text-align: left; }
.rs-pop-input { width: 100%; margin-top: 16px; padding: 10px 12px; font-size: 16px; border: 2px solid var(--input-border); border-radius: 3px; background: var(--input-bg); color: var(--text-primary); outline: none; transition: border-color .2s, box-shadow .2s; }
.rs-pop-input:focus { border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.15); }
.rs-pop-textarea { min-height: 84px; resize: vertical; }
.rs-pop-btns { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.rs-pop-btns .btn { min-width: 96px; }
.rs-pop-spin { width: 42px; height: 42px; border: 4px solid rgba(0,116,217,.18); border-top-color: var(--navy-accent); border-radius: 50%; margin: 8px auto 16px; animation: rsSpin .8s linear infinite; }
.rs-pop-loading .rs-pop-ico { display: none; }
.rs-pop-timerbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.rs-pop-timerbar i { display: block; height: 100%; background: var(--navy-accent); animation: rsTimer linear forwards; }
.rs-pop.ico-success .rs-pop-timerbar i { background: var(--success); }
.rs-pop.ico-error .rs-pop-timerbar i { background: var(--danger); }
body.rs-pop-open { overflow: hidden; }

/* toast mode — small corner card, no backdrop */
.rs-pop-backdrop.rs-toast { background: transparent; backdrop-filter: none; pointer-events: none; padding: 18px; }
.rs-toast .rs-pop { pointer-events: auto; display: flex; align-items: center; gap: 12px; text-align: left; width: auto; max-width: 380px; padding: 12px 18px 12px 14px; border-top: none; border-left: 3px solid var(--navy-accent); box-shadow: 0 8px 24px rgba(0,0,0,.18); cursor: pointer; animation: rsToastIn .25s ease; }
.rs-toast .rs-pop.ico-success { border-left-color: var(--success); }
.rs-toast .rs-pop.ico-error { border-left-color: var(--danger); }
.rs-toast .rs-pop.ico-warning { border-left-color: var(--warning); }
.rs-toast .rs-pop-ico { width: 34px; height: 34px; font-size: 16px; margin: 0; flex-shrink: 0; }
.rs-toast .rs-pop-title { font-size: 14px; margin: 0; }
.rs-toast .rs-pop-text { font-size: 12.5px; }
.rs-toast .rs-pop-btns, .rs-toast .rs-pop-spin { display: none; }

/* placement */
.rs-at-center { align-items: center; justify-content: center; }
.rs-at-top { align-items: flex-start; justify-content: center; }
.rs-at-top-end { align-items: flex-start; justify-content: flex-end; }
.rs-at-top-start { align-items: flex-start; justify-content: flex-start; }
.rs-at-bottom { align-items: flex-end; justify-content: center; }
.rs-at-bottom-end { align-items: flex-end; justify-content: flex-end; }
.rs-at-bottom-start { align-items: flex-end; justify-content: flex-start; }

/* leave animation */
.rs-pop-backdrop.rs-out { animation: rsPopFadeOut .16s ease forwards; }
.rs-out .rs-pop { animation: rsPopOut .16s ease forwards; }
.rs-toast.rs-out .rs-pop { animation: rsToastOut .16s ease forwards; }

@keyframes rsPopFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rsPopFadeOut { to { opacity: 0; } }
@keyframes rsPopIn { from { opacity: 0; transform: translateY(-16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rsPopOut { to { opacity: 0; transform: scale(.96); } }
@keyframes rsToastIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes rsToastOut { to { opacity: 0; transform: translateX(26px); } }
@keyframes rsSpin { to { transform: rotate(360deg); } }
@keyframes rsTimer { from { width: 100%; } to { width: 0; } }

body.dark-mode .rs-pop { box-shadow: 0 18px 50px rgba(0,0,0,.55); }
@media (prefers-reduced-motion: reduce) { .rs-pop-backdrop, .rs-pop, .rs-toast .rs-pop { animation: none; } }

/* ===== Invoice view modal (sales.php) ===== */
.siv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); }
.siv-no { font-size: 21px; font-weight: 800; letter-spacing: .3px; color: var(--navy-accent); font-family: 'Courier New', monospace; }
.siv-date { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.siv-head-badges { display: flex; gap: 8px; align-items: center; }
.siv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin-bottom: 16px; }
.siv-cell { background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 3px; padding: 9px 12px; min-width: 0; }
.siv-cell-lbl { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 3px; }
.siv-cell-lbl i { color: var(--navy-accent); margin-right: 4px; font-size: 10px; }
.siv-cell-val { font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.siv-i { width: 36px; text-align: center; color: var(--text-muted); }
.siv-med { font-weight: 600; color: var(--text-primary); }
.siv-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.siv-sub i { font-size: 10px; }
.siv-line-total { font-weight: 700; }
.siv-bottom { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-top: 14px; }
.siv-bottom-l { flex: 1; min-width: 220px; }
.siv-summary { width: 300px; max-width: 100%; margin-left: auto; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 3px; padding: 6px 16px; }
.siv-sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 13.5px; color: var(--text-secondary); border-bottom: 1px dashed var(--border-color); }
.siv-sum-row:last-child { border-bottom: none; }
.siv-sum-row b { color: var(--text-primary); font-weight: 600; }
.siv-sum-total { border-top: 2px solid var(--border-color); font-size: 15px; }
.siv-sum-total span { font-weight: 700; color: var(--text-primary); }
.siv-sum-total b { color: var(--navy-accent); font-weight: 800; font-size: 16.5px; }
.siv-sum-paid b { color: var(--success); }
.siv-sum-due b { color: var(--danger); font-weight: 800; }
.siv-pay-method { display: inline-block; padding: 2px 10px; border-radius: 3px; background: rgba(0,116,217,.1); color: var(--navy-accent); font-size: 11.5px; font-weight: 700; letter-spacing: .3px; }
@media (max-width: 700px) { .siv-grid { grid-template-columns: repeat(2, 1fr); } .siv-summary { width: 100%; } }


/* ===== DataTables print window ===== */
@media print {
    body.dt-print-view { padding: 12px; background: #fff !important; color: #000 !important; }
    body.dt-print-view h1 { font-size: 16px; margin: 0 0 4px; color: #000 !important; }
    body.dt-print-view div { font-size: 11px; color: #444 !important; }
    body.dt-print-view table { width: 100% !important; border-collapse: collapse !important; margin-top: 10px !important; }
    body.dt-print-view table th,
    body.dt-print-view table td { border: 1px solid #999 !important; padding: 6px 8px !important; font-size: 11px !important; color: #000 !important; background: #fff !important; text-align: left; }
    body.dt-print-view table thead th { background: #e8e8e8 !important; font-weight: 700 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body.dt-print-view table tfoot th { border-top: 2px solid #000 !important; font-weight: 700 !important; }
    body.dt-print-view .stmt-num, body.dt-print-view .po-col-num { text-align: right !important; }
    body.dt-print-view tr { break-inside: avoid; page-break-inside: avoid; }
}

/* ===== Inventory: multi-batch entry grid ===== */
.rs-locked { pointer-events: none; opacity: .6; }
.bx-rows-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bx-rows-head .stmt-subhead { margin: 0; }
.bx-rows-acts { margin-left: auto; display: flex; gap: 8px; }
.bx-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; background: var(--navy-primary); color: #fff; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; }
/* safe to scroll: rs-menu is position:fixed on open, so no ancestor clips it */
.bx-wrap { border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow-x: auto; }
.bx-table { width: 100%; min-width: 1166px; }
.bx-table tbody td { padding: 7px 8px !important; vertical-align: middle; overflow: visible; }
/* the open row gets its own stacking context so its menu paints over later rows;
   .rs-menu keeps its own z-index (400) inside it — don't lower it here */
.bx-table .rs-sel.open { z-index: 60; }
.bx-table thead th { position: static; }   /* sticky header would sit above an open menu */

.bx-defaults { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 11px 13px; margin-bottom: 10px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.bx-def-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.bx-def-lbl i { color: var(--navy-accent); }
.bx-def-f { display: inline-flex; align-items: center; gap: 8px; }
.bx-def-f label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.bx-def-in { width: 158px; }
.bx-in { width: 100%; height: 34px; padding: 0 7px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); font-size: 12.5px; }
.bx-in:focus { outline: none; border-color: var(--navy-accent); }
.bx-num { text-align: right; }
.bx-c-med { min-width: 180px; }
.bx-c-rack { min-width: 108px; }
.bx-c-batch { min-width: 118px; }
.bx-c-date { min-width: 130px; }   /* mm/dd/yyyy + the picker icon needs this */
.bx-c-qty { width: 76px; min-width: 76px; }
.bx-c-unit { min-width: 104px; }
.bx-c-num { width: 92px; min-width: 92px; }
.bx-table thead th small { display: block; font-size: 9.5px; font-weight: 500; opacity: .75; letter-spacing: 0; }
.bx-c-x { width: 38px; min-width: 38px; text-align: center; }
/* spinners steal ~18px from an already tight money cell */
.bx-num { -moz-appearance: textfield; }
.bx-num::-webkit-outer-spin-button,
.bx-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bx-in { min-width: 0; }
.bx-x { width: 30px; height: 30px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; transition: background .18s, color .18s; }
.bx-x:hover { background: rgba(234,67,53,.1); color: var(--danger); }
.bx-table tbody tr.bx-row-bad td { background: rgba(234,67,53,.06); }
.bx-table tbody tr.bx-row-bad td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.bx-table tbody tr.bx-row-bad .bx-c-med .rs-btn { border-color: var(--danger); }
/* menus inside the grid keep the theme accent, but cap the list so it can't run off the modal */
.bx-table .rs-list { max-height: 240px; overflow-y: auto; }
.bx-warns { display: flex; flex-direction: column; gap: 8px; }
.bx-warn { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.bx-warn i { margin-top: 1px; }
.bx-warn.is-danger { background: rgba(234,67,53,.1); color: #c62828; }
.bx-warn.is-warn { background: rgba(251,188,4,.14); color: #b26a00; }
.bx-warn.is-muted { background: var(--bg-secondary); color: var(--text-muted); }
.bx-warn.is-ok { background: rgba(52,168,83,.1); color: #1e7d34; }
body.dark-mode .bx-warn.is-danger { color: #ff9a90; }
body.dark-mode .bx-warn.is-warn { color: #ffd166; }
body.dark-mode .bx-warn.is-ok { color: #7ee08a; }

/* ===== searchable dropdown inside a form field =====
   default .rs-btn is a compact toolbar control (inline-flex, min-width, 40px).
   in a form it has to fill its cell and match the inputs sitting next to it. */
.form-group .rs-sel { display: block; width: 100%; }
.form-group .rs-btn {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 14px 16px;
    font-size: 16px;           /* >=16px so mobile doesn't zoom on focus */
    font-weight: 400;
    border-color: var(--input-border);
    color: var(--text-primary);
}
.form-group .rs-btn .rs-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a picked value must not restyle the control — every field in a form looks the same */
.form-group .rs-sel.has-val .rs-btn { border-color: var(--input-border); color: var(--text-primary); }
.form-group .rs-sel:not(.has-val) .rs-btn .rs-txt { color: var(--text-muted); }
.form-group .rs-sel.open .rs-btn { border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(0,116,217,0.2); }

/* grid cells: fill the column, no min-width fighting the layout */
.bx-table .rs-sel { display: block; width: 100%; }
.bx-table .rs-btn { width: 100%; min-width: 0; }
.bx-table .rs-btn .rs-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* batch modal rail: compact — it is a running readout, not the main content */
#batchModal .stmt-grid { grid-template-columns: 218px minmax(0, 1fr); gap: 16px; }
#batchSide { gap: 8px; }
#batchSide .stmt-summary { gap: 6px; }
#batchSide .stmt-card { padding: 7px 10px; }
#batchSide .stmt-card-label { font-size: 9.5px; margin-bottom: 1px; letter-spacing: .3px; }
#batchSide .stmt-card-value { font-size: 13.5px; }
#batchSide .bx-warn { padding: 7px 9px; font-size: 11px; gap: 6px; }
#batchSide .stmt-note { padding: 8px 10px; font-size: 10.5px; line-height: 1.4; }
@media (max-width: 1100px) { #batchModal .stmt-grid { grid-template-columns: 1fr; } }