/*
  Developed by Rameez Scripts
  WhatsApp: https://whatsapp.rameezscripts.com/ (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;

    /* rgb triplets — fallbacks; config.php overwrites these per user theme */
    --navy-primary-rgb: 0, 31, 63;
    --navy-light-rgb: 0, 51, 102;
    --navy-accent-rgb: 0, 116, 217;
    --success: #34a853;
    --warning: #fbbc04;
    --danger: #ea4335;

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

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

    --navy-primary: #0a1628;
    --navy-dark: #060d16;
    --navy-light: #1a3a5c;
    --navy-primary-rgb: 10, 22, 40;
    --navy-light-rgb: 26, 58, 92;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Buttons ===== */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 2px;
    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: 0 !important;
    font-size: 14px !important;
    margin-right: 0 !important;
    cursor: pointer !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== 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,
.form-group .sd-btn {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--input-border);
    border-radius: 2px;
    font-size: 16px;
    transition: all 0.3s;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--text-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-group .sd.open .sd-btn,
.form-group .sd-btn: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);
}

/* base for every field no component styled — :where() = 0 specificity, so any existing rule still wins */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) {
    box-sizing: border-box; max-width: 100%; padding: 9px 12px; border: 1px solid var(--input-border); border-radius: 2px;
    background: var(--input-bg); color: var(--text-primary); font: inherit; font-size: 15px; line-height: 1.35;
    transition: border-color .15s, box-shadow .15s, background-color .15s; }
:where(input, select, textarea):hover:not(:disabled, :focus) { border-color: color-mix(in srgb, var(--navy-accent) 45%, var(--input-border)); }
:where(input, select, textarea):focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), .15); }
:where(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; background: var(--bg-primary); }
:where(input, textarea)::placeholder { color: var(--text-muted); }
:where(textarea) { min-height: 80px; resize: vertical; }
/* fields inside table cells: full width, same height as the in-row dropdowns */
:where(td) > :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"]), textarea) { width: 100%; }
:where(td) > :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"])) { height: 38px; padding: 0 10px; }

.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: 4px;
    border: 1px solid #fecaca;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .modal {
        width: 95%;
    }

    .filters-section {
        padding: 15px;
    }

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

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

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

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

    .info-label {
        width: 100%;
    }

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

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

.login-box {
    background: white;
    padding: 50px 40px;
    border-radius: 4px;
    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: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 2px solid #e9ecef;
    transition: all 0.3s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.control-info {
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.toggle-input {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.submenu-toggle.open .submenu-arrow {
    transform: rotate(45deg); /* + becomes x */
    color: white;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body {
    top: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .chart-container {
        height: 250px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .dataTables_paginate {
        padding-top: 15px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .filters-grid {
        gap: 12px;
    }

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

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

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

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

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

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

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

    .header {
        padding: 12px;
    }

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

    .data-section {
        padding: 12px;
    }

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

    .stat-card {
        padding: 15px;
    }

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

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

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

    .chart-container {
        height: 200px;
    }

    .modal-body {
        padding: 15px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .app-container {
        display: block;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Palette Gallery (UI Customization) ===== */
.palette-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 14px;
    margin-top: 10px;
}
.palette-card {
    position: relative;
    text-align: left;
    padding: 0;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.palette-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px var(--shadow-hover);
    border-color: var(--navy-accent);
}
.palette-card.active {
    border-color: var(--navy-accent);
    box-shadow: 0 0 0 2px var(--navy-accent) inset;
}
.palette-swatch {
    display: flex;
    height: 54px;
    width: 100%;
}
.palette-swatch span { flex: 1; }
.palette-meta { padding: 10px 12px; }
.palette-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}
.palette-id {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.palette-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--navy-accent);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.palette-card.active .palette-check { display: flex; }
.palette-default-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

/* ===== AdminLTE-style collapsible card (theme-aware) ===== */
.lte-card {
    background: var(--bg-card);
    border-radius: 6px;
    box-shadow: 0 2px 6px var(--shadow-color);
    margin-bottom: 22px;
    border-top: 3px solid var(--navy-accent);
    overflow: hidden;
}
.lte-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}
.lte-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lte-card-title i { color: var(--navy-accent); }
.lte-card-tools { display: flex; align-items: center; gap: 4px; }
.lte-card-tools button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 9px;
    font-size: 14px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}
.lte-card-tools button:hover { color: var(--navy-accent); background: var(--bg-primary); }
.lte-card-body { padding: 18px; }
.lte-card.collapsed .lte-card-body { display: none; }
.lte-card.collapsed { border-top-color: var(--border-color); }

/* current theme summary strip */
.current-theme-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.current-swatch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-width: 145px;
}
.current-swatch-chip {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}
.current-swatch-label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.current-swatch-hex {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: monospace;
}
.current-theme-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.current-theme-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 7px 15px;
    border-radius: 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}
.current-mode-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 7px 13px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.theme-action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* ===== AdminLTE small-box KPI (dashboard) ===== */
/* minmax(0,1fr) not 1fr: plain 1fr floors at min-content, so one long value (a 9-digit
   MRR) widens its own column and the four cards stop being equal. 0 forces equal tracks
   and makes the card truncate instead. */
.lte-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 1200px) { .lte-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px)  { .lte-kpi-grid { grid-template-columns: minmax(0, 1fr); } }

/* 5-up variant. it needs its own breakpoints: `.lte-kpi-grid.cols-5` is two classes, so it
   outranks the plain `.lte-kpi-grid` rules above no matter what the viewport is. */
.lte-kpi-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1500px) { .lte-kpi-grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .lte-kpi-grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px)  { .lte-kpi-grid.cols-5 { grid-template-columns: minmax(0, 1fr); } }

/* flex column + fixed min-height = every card the same size whatever the label or value
   length; .inner takes the slack so the footer always sits on the bottom edge. */
.small-box {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 138px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #fff;
    overflow: hidden;
    transition: transform 0.25s;
}
.small-box:hover { transform: translateY(-3px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
.small-box .inner { flex: 1 1 auto; min-width: 0; padding: 18px 20px 12px; position: relative; z-index: 2; }
/* nowrap keeps the figure on one line; the ellipsis + max-width keep it off the watermark
   icon and out of the neighbouring card instead of stretching the track. */
.small-box .inner h3 {
    font-size: clamp(22px, 3.2vw, 30px); font-weight: 700; margin: 0 0 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: calc(100% - 56px); font-variant-numeric: tabular-nums;
}
.small-box .inner p { font-size: 14px; margin: 0; opacity: 0.95; }
.small-box .icon { position: absolute; top: 12px; right: 16px; z-index: 1; font-size: 64px; color: rgba(0, 0, 0, 0.15); transition: font-size 0.3s; }
.small-box:hover .icon { font-size: 70px; }
.small-box-footer {
    position: relative;
    display: block;
    margin-top: auto;
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 8px 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    text-decoration: none;
    z-index: 3;
}
.small-box-footer:hover { background: rgba(0, 0, 0, 0.22); color: #fff; }

/* box colors — navy theme (react to user's custom accent/primary) */
.bg-navy    { background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%); }
.bg-info    { background: linear-gradient(135deg, var(--navy-accent) 0%, #3393e0 100%); }
.bg-success { background: linear-gradient(135deg, #2e8b46 0%, var(--success) 100%); }
.bg-warning { background: linear-gradient(135deg, #e0a800 0%, var(--warning) 100%); color: #1f2d3d; }
.bg-warning .small-box-footer { color: rgba(0, 0, 0, 0.65); }
.bg-danger  { background: linear-gradient(135deg, #c5221f 0%, var(--danger) 100%); }

/* ===== Header tools: quick theme + language switcher ===== */
.header-tool-wrapper { position: relative; }
.header-tool-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #555;
    padding: 8px 10px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    transition: all 0.25s;
}
.header-tool-btn:hover { background: #f0f0f0; color: var(--navy-primary); }
.header-tool-btn .lang-current { font-size: 12px; font-weight: 700; }
body.dark-mode .header-tool-btn { color: var(--text-secondary); }
body.dark-mode .header-tool-btn:hover { background: var(--bg-primary); color: var(--text-primary); }

.header-tool-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 34px var(--shadow-hover);
    z-index: 1200;
    display: none;
    overflow: hidden;
}
.header-tool-dropdown.open { display: block; }
.header-tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}
.header-tool-header strong { color: var(--text-primary); font-size: 14px; display: flex; align-items: center; gap: 7px; }
.mode-toggle-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    transition: all 0.2s;
}
.mode-toggle-btn:hover { color: var(--navy-accent); border-color: var(--navy-accent); }

.theme-quick-menu { width: 264px; }
.theme-quick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 14px; }
.theme-quick-swatch {
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    height: 34px;
    cursor: pointer;
    overflow: hidden;
    background: none;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.theme-quick-swatch span { display: block; width: 100%; height: 100%; }
.theme-quick-swatch:hover { transform: translateY(-2px); border-color: var(--navy-accent); }
.theme-quick-swatch.active { border-color: var(--navy-accent); box-shadow: 0 0 0 2px var(--navy-accent) inset; }
.header-tool-footer {
    display: block;
    text-align: center;
    padding: 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-accent);
    text-decoration: none;
    border-top: 1px solid var(--border-color);
}
.header-tool-footer:hover { background: var(--bg-primary); }

.lang-menu { min-width: 214px; max-height: 340px; overflow-y: auto; padding: 6px; }
.lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    padding: 9px 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--text-primary);
    text-align: left;
}
.lang-item:hover { background: var(--bg-primary); }
.lang-item.active { background: rgba(0, 116, 217, 0.12); color: var(--navy-accent); font-weight: 700; }
.lang-item .lang-flag { font-size: 18px; line-height: 1; }
.lang-item .lang-check { margin-left: auto; color: var(--navy-accent); font-size: 12px; }
[dir="rtl"] .header-tool-dropdown { right: auto; left: 0; }
[dir="rtl"] .lang-item { text-align: right; }


/* ===== Header: search + account menu ===== */
.hdr-search-wrap { flex: 0 1 300px; min-width: 0; }
.hdr-search {
    display: flex; align-items: center; gap: 9px;
    height: 40px; padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.hdr-search:focus-within { border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), 0.14); }
.hdr-search i { color: var(--text-muted); font-size: 14px; flex-shrink: 0; }
.hdr-search input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: none;
    color: var(--text-primary); font-family: inherit; font-size: 14px;
}
.hdr-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-menu { width: 340px; max-width: calc(100vw - 24px); padding: 6px; }
.search-hit {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--text-primary); text-decoration: none; font-size: 13.5px;
}
.search-hit i { color: var(--navy-accent); width: 17px; text-align: center; flex-shrink: 0; }
.search-hit span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hit em {
    display: none;
    font-style: normal; font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.search-hit.on, .search-hit:hover { background: var(--bg-primary); }
.search-hit.on em { display: inline; }

.moon-btn { position: relative; }
.hdr-user {
    display: inline-flex; align-items: center; gap: 9px;
    max-width: 190px; padding: 5px 12px 5px 5px;
    border: 1px solid var(--border-color); border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-primary); font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s;
}
.hdr-user:hover { border-color: var(--navy-accent); }
.hdr-user-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hdr-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-user-caret { font-size: 11px; color: var(--text-muted); transition: transform 0.2s; }
.hdr-user-wrap:has(.header-tool-dropdown.open) .hdr-user-caret { transform: rotate(180deg); }

.user-menu { width: 268px; padding: 6px; }
.user-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 12px 14px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 6px;
}
.user-card img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.user-card-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.user-card-txt strong { font-size: 14.5px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card-txt small { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-link {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border-radius: 9px;
    color: var(--text-primary); text-decoration: none; font-size: 14px; font-weight: 500;
}
.user-link i { width: 17px; text-align: center; color: var(--navy-accent); font-size: 15px; }
.user-link:hover { background: var(--bg-primary); }
.user-link.danger, .user-link.danger i { color: var(--danger); }

@media (max-width: 1100px) { .hdr-search-wrap { display: none; } }
@media (max-width: 640px) { .hdr-user-name, .hdr-user-caret { display: none; } .hdr-user { padding: 4px; border: 0; } }

/* dark mode — span/div blanket at 3692 is (0,5,2) */
body.dark-mode .hdr-search { background: var(--bg-secondary); }
body.dark-mode .hdr-user-name,
body.dark-mode .user-card-txt strong { color: var(--text-primary) !important; }
body.dark-mode .user-card-txt small,
body.dark-mode .search-hit em { color: var(--text-muted) !important; }
body.dark-mode .search-hit span,
body.dark-mode .user-link { color: var(--text-primary) !important; }
body.dark-mode .user-link.danger { color: var(--danger) !important; }
body.dark-mode .search-hit.on, body.dark-mode .search-hit:hover,
body.dark-mode .user-link:hover { background: var(--bg-secondary); }
/* ===== Header messages dropdown ===== */
.msg-btn { position: relative; }
.msg-dot {
    position: absolute; top: 5px; right: 7px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--danger);
    border: 2px solid var(--bg-card);
}
.msg-menu { width: 340px; max-width: calc(100vw - 24px); }
.msg-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 18px 11px;
}
.msg-head strong { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.msg-head a { font-size: 12.5px; font-weight: 600; color: var(--navy-accent); text-decoration: underline; }
.msg-body { max-height: 392px; overflow-y: auto; padding-bottom: 6px; }
.msg-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px;
    text-decoration: none;
    transition: background 0.15s;
}
.msg-item:hover { background: var(--bg-primary); }
.msg-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.msg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.msg-top strong { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.msg-time { font-size: 12px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
.msg-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.msg-prev {
    font-size: 12.5px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.msg-item.unread .msg-prev { color: var(--text-primary); font-weight: 600; }
.msg-pill {
    flex-shrink: 0;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--danger);
    color: #fff; font-size: 11px; font-weight: 700; font-style: normal;
}
.msg-none {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 34px 18px;
    color: var(--text-muted); font-size: 13px;
}
.msg-none i { font-size: 26px; opacity: 0.45; }

/* dark mode — the span blanket at 3692 is (0,5,2), so these need !important */
body.dark-mode .msg-prev,
body.dark-mode .msg-time,
body.dark-mode .msg-none span { color: var(--text-muted) !important; }
body.dark-mode .msg-item.unread .msg-prev { color: var(--text-primary) !important; }
body.dark-mode .msg-item:hover { background: var(--bg-secondary); }
body.dark-mode .msg-dot { border-color: var(--bg-card); }

/* keep the GT widget rendered (so the combo builds) but off-screen — NOT display:none */
.gt-offscreen {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* extra google-translate chrome hiding */
.goog-te-gadget { font-size: 0 !important; }
.goog-te-gadget span, .goog-logo-link { display: none !important; }
.goog-tooltip, .goog-tooltip:hover, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ===== 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; }
    .palette-gallery { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; }
    .current-theme-meta { margin-left: 0; width: 100%; }
    .current-swatch { flex: 1; min-width: 120px; }
    .theme-action-row .btn { flex: 1; justify-content: center; }
    .theme-mode-options { flex-direction: column; gap: 10px; }
    .theme-preview-swatches { flex-direction: column; }
    .color-preview-box { width: 100%; }
    .logo-upload-row { flex-direction: column; align-items: flex-start; }
    .quick-actions-bar { justify-content: center; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Notification Bell ===== */
/* view-transition-name (bottom of this file) turns .header-right into its own
   stacking context, so the panels inside it can't out-paint later content on
   z-index alone. Lift the whole context: above page content, still under the
   sidebar (999/1001) and modal overlays (1000). */
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 900;
}

.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: 9px;
    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: 4px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.role-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}

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

.role-sf {
    background: #cce5ff;
    color: #004085;
}

.role-super-admin { background: #ede0f7; color: #6a1b9a; }
.role-hr          { background: #ffe8d6; color: #e65100; }
.role-dept        { background: #d3f3ec; color: #00695c; }
.role-emp         { background: #d6e4ff; color: #004085; }

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

.about-developer {
    border-left-color: var(--navy-accent);
}

.developer-info {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.developer-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--navy-primary);
    flex-shrink: 0;
}

.developer-details h3 {
    color: var(--navy-primary);
    font-size: 20px;
    margin-bottom: 5px;
}

.developer-brand {
    color: var(--navy-accent);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
}

.developer-details p {
    margin-bottom: 15px;
}

.developer-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dev-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
}

.dev-link.whatsapp {
    background: #25D366;
    color: white;
}

.dev-link.whatsapp:hover {
    background: #128C7E;
    transform: translateY(-2px);
}

.dev-link.telegram {
    background: #229ED9;
    color: white;
}

.dev-link.telegram:hover {
    background: #1b7fae;
    transform: translateY(-2px);
}

.dev-link.email {
    background: var(--navy-primary);
    color: white;
}

.dev-link.email:hover {
    background: var(--navy-dark);
    transform: translateY(-2px);
}

.lets-work {
    font-weight: 700;
    font-size: 14px;
    color: var(--navy-primary);
    margin: 14px 0 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* login footer contact block */
.auth-contact {
    text-align: center;
    padding: 14px 10px 0;
    font-size: 12px;
}

.auth-contact-title {
    display: block;
    font-weight: 700;
    color: var(--navy-primary);
    margin-bottom: 7px;
}

.auth-contact-links {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.auth-contact-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s;
}

.auth-contact-links a:hover { color: var(--navy-accent); }

/* the span blanket at 3692 is (0,5,2) — a plain class rule loses to it */
body.dark-mode .lets-work,
body.dark-mode .auth-contact-title { color: var(--text-primary) !important; }

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

/* RBAC matrix — sticky grid (roles.php) */
.rbac-wrap {
    overflow: auto;
    border: 1px solid var(--border-color);
    max-height: 72vh;
    margin: 15px 0;
}

.rbac-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    width: 100%;
    table-layout: fixed; /* role cols split equally, fills 100% */
}

.rbac-table th,
.rbac-table td {
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-light);
    padding: 6px 8px;
    text-align: center;
    white-space: nowrap;
    background: var(--bg-card);
}

.rbac-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f5f8fc;
}

.rbac-rolehead {
    color: #fff;
    padding: 5px 9px;
    font-weight: 700;
    font-size: 11px;
    display: inline-block;
    min-width: 74px;
    border-radius: 3px;
}

.rbac-perm-legend {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
    letter-spacing: 1px;
}

/* business admin role tools — rename / delete under each role head */
.rbac-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rbac-role-tools { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.rbac-role-tool {
    border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-muted);
    width: 24px; height: 22px; border-radius: 3px; font-size: 10px; cursor: pointer; touch-action: manipulation;
}
.rbac-role-tool:hover { color: var(--navy-accent); border-color: var(--navy-accent); }
.rbac-role-tool.del:hover { color: #c62828; border-color: #c62828; }
.rbac-role-form { text-align: left; display: grid; gap: 6px; }
.rbac-role-form label { font-weight: 600; font-size: 13px; }
.rbac-role-form .swal2-input { margin: 0 0 6px; width: 100%; font-size: 16px; }
.rbac-role-form input[type="color"] { width: 64px; height: 36px; border: 1px solid var(--border-color); border-radius: 3px; padding: 2px; }
.rbac-role-note { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }

.rbac-table th.rbac-pagecol,
.rbac-table td.rbac-pagecol {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    font-weight: 600;
    color: var(--navy-primary);
    background: var(--bg-card);
    width: 200px; /* fixed; rest splits equally among roles */
    box-shadow: 1px 0 0 var(--border-color);
}

.rbac-table thead th.rbac-pagecol {
    z-index: 4;
    background: #f5f8fc;
}

.rbac-grouprow td {
    background: #eef2f7 !important;
    color: #5a6b7b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    text-align: left;
}

.rbac-cell {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap; /* wrap V·A·E·D when many roles shrink cols */
}

/* impersonation — "login as this user" */
.action-icon.loginas-icon { color: #0074D9; }
.action-icon.loginas-icon:hover { color: #005fa3; }
.impersonate-notice {
    margin: 10px;
    padding: 10px 12px;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #664d03;
}
.impersonate-notice > i { font-size: 18px; color: #997404; flex-shrink: 0; }
.impersonate-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.impersonate-text span { font-weight: 600; }
.impersonate-text a { color: #0074D9; font-weight: 700; text-decoration: none; }
.impersonate-text a:hover { text-decoration: underline; }
body.dark-mode .impersonate-notice { background: #3a2f00; border-color: #5c4a00; color: #ffe69c; }
body.dark-mode .impersonate-text a { color: #4aa3ff; }

.rbac-dot {
    width: 24px;
    height: 24px;
    border: 1px solid #d4d4d4;
    background: #fff;
    color: #bbb;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    border-radius: 0;
}

.rbac-dot:hover {
    border-color: var(--navy-accent);
}

.rbac-dot.on {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.rbac-dot.locked {
    opacity: 0.45;
    cursor: not-allowed;
}

.rbac-dot.on.locked {
    background: #9bbf9e;
    border-color: #9bbf9e;
}

/* perm letters in About roles table */
.perm-on {
    display: inline-block;
    min-width: 16px;
    font-weight: 800;
    font-size: 12px;
    color: var(--success);
    letter-spacing: 1px;
}

.perm-off {
    display: inline-block;
    min-width: 16px;
    font-weight: 600;
    font-size: 12px;
    color: #c4c4c4;
    letter-spacing: 1px;
}

/* User role badge (Admin badge already defined above) */
.role-user {
    background: #cce5ff;
    color: #004085;
}

/* Per-user access (roles.php User Access tab) */
.rbac-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
    border-bottom: 2px solid var(--border-color);
}

.rbac-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.15s;
}

.rbac-tab:hover { color: var(--navy-accent); }

.rbac-tab.active {
    color: var(--navy-primary);
    border-bottom-color: var(--navy-accent);
}

.rbac-userpick { max-width: 420px; margin-bottom: 16px; }

.rbac-userbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--navy-accent);
}

.rbac-userbar-main {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--navy-primary);
}

.rbac-userbar-main > i { font-size: 18px; color: var(--navy-accent); }

.rbac-userbar-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.rbac-ovr-chip {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    background: #fdecd6;
    color: #c4701a;
    border: 1px solid #f8dab4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rbac-ovr-chip.off {
    background: #e2f6ea;
    color: #1f8b4c;
    border-color: #c7eed6;
}

.rbac-selfnote {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* the exception marker — this cell no longer follows the role */
.rbac-dot.ovr {
    box-shadow: 0 0 0 2px #e8a200;
    border-color: #e8a200;
}

.rbac-ovr-key {
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: -1px;
    background: var(--success);
    box-shadow: 0 0 0 2px #e8a200;
}

.rbac-utable { table-layout: auto; }
.rbac-utable td, .rbac-utable th { text-align: center; }

.rbac-hardnote {
    font-size: 11px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rbac-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.rbac-empty > i { font-size: 34px; opacity: 0.4; display: block; margin-bottom: 10px; }
.rbac-empty p { font-size: 13px; margin: 0; }

/* users.php per-user access shortcut */
.act-perm { color: #6a1b9a; font-size: 15px; }
.act-perm:hover { transform: scale(1.18); }

/* Dark Mode — RBAC matrix */
body.dark-mode .rbac-wrap {
    border-color: var(--border-color);
}

body.dark-mode .rbac-table th,
body.dark-mode .rbac-table td {
    border-bottom-color: var(--border-color);
    border-right-color: var(--border-light);
    background: var(--bg-card);
    color: var(--text-secondary);
}

body.dark-mode .rbac-table thead th,
body.dark-mode .rbac-table thead th.rbac-pagecol {
    background: var(--navy-dark);
}

body.dark-mode .rbac-table td.rbac-pagecol {
    color: var(--text-primary);
    background: var(--bg-card);
    box-shadow: 1px 0 0 var(--border-color);
}

body.dark-mode .rbac-grouprow td {
    background: var(--bg-primary) !important;
    color: var(--text-muted);
}

body.dark-mode .rbac-dot {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-muted);
}

body.dark-mode .rbac-dot.on {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

body.dark-mode .perm-off {
    color: #5a5a78;
}

/* ===== Squared surfaces — flat corners on every card and control ===== */
/* larger surfaces / cards */
.data-section,
.lte-card,
.account-info-card,
.settings-mega-card,
.theme-preview-container,
.notification-dropdown,
.header-tool-dropdown,
.about-table-wrapper,
.setup-guide-table,
.small-box,
.stat-card,
.info-box,
.modal-content,
.modal-box { border-radius: 0 !important; }

/* controls / chips / smaller elements */
.palette-card,
.notification-item,
.btn,
.mode-toggle-btn,
.lang-item,
.theme-quick-swatch,
.action-badge,
.hex-input,
.color-picker-input,
/* checkbox/radio excluded: a switch and a radio are not text boxes, and this selector
   scores (0,2,1) — high enough to beat `.toggle`'s own border-radius. */
.data-section input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.data-section select,
.data-section textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea { border-radius: 0 !important; }
/* file input stays squared per DaisyUI standard — do not round */

/* ===== Smooth SPA-like navigation (View Transitions) ===== */
/* opt every page into cross-document transitions — clicking the sidebar crossfades
   the content while the sidebar / bottom-nav / header tools stay put (no white flash).
   Unsupported browsers just navigate normally (graceful fallback). */
@view-transition { navigation: auto; }

.sidebar           { view-transition-name: app-sidebar; }
.mobile-bottom-nav { view-transition-name: app-mobilenav; }
.header-right      { view-transition-name: app-headertools; }

/* persistent chrome — snap instantly, don't crossfade */
::view-transition-group(app-sidebar),
::view-transition-group(app-mobilenav),
::view-transition-group(app-headertools) { animation-duration: 0s; }

/* content area — gentle crossfade + rise */
::view-transition-old(root) { animation: rsPageOut 0.16s ease both; }
::view-transition-new(root) { animation: rsPageIn 0.30s ease both; }
@keyframes rsPageOut { to { opacity: 0; } }
@keyframes rsPageIn { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ===== DaisyUI-style file input — squared button, follows the user's palette ===== */
.file-input {
    display: block;
    width: 100%;
    height: 48px;
    line-height: 46px;
    padding: 0;
    font-size: 16px;
    color: var(--text-secondary);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.file-input:hover  { border-color: var(--navy-accent); }
.file-input:focus  { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), 0.18); }
.file-input:disabled { opacity: 0.55; cursor: not-allowed; }
.file-input::file-selector-button {
    height: 46px;
    margin: 0 14px 0 0;
    padding: 0 20px;
    border: 0;
    border-right: 1px solid var(--input-border);
    border-radius: 0;
    background: rgba(var(--navy-accent-rgb), 0.14);
    color: var(--navy-accent);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
}
.file-input::file-selector-button:hover { background: var(--navy-accent); color: #fff; }
/* .form-group input (0,1,1) out-ranks .file-input (0,1,0) and its 14px padding squeezed the button — pin the file input back */
.form-group input.file-input, .file-input { padding: 0; height: 48px; min-height: 0; line-height: 46px; border-radius: 10px; }

/* ===== My Account — themed cards (every colour here rides the theme vars) ===== */
.acct-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 2px 10px var(--shadow-color);
    padding: 22px 24px 24px;
    margin-bottom: 20px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.acct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.acct-head-txt h2 { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 0; }
.acct-head-txt p  { font-size: 13px; color: var(--text-muted); margin: 3px 0 0; }
.acct-chip {
    flex: 0 0 38px; width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: rgba(var(--navy-accent-rgb), 0.13);
    font-size: 16px;
}
.acct-chip i { color: var(--navy-accent); }

/* profile photo + upload */
.acct-photo { display: flex; align-items: flex-start; gap: 26px; flex-wrap: wrap; }
.acct-avatar-col { flex: 0 0 auto; text-align: center; }
.acct-avatar {
    position: relative;
    width: 116px; height: 116px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(var(--navy-accent-rgb), 0.12);
    border: 1px solid rgba(var(--navy-accent-rgb), 0.28);
}
.acct-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.acct-avatar #defaultProfileIcon { font-size: 52px; color: rgba(var(--navy-accent-rgb), 0.75); }
.acct-avatar-cam {
    position: absolute; right: 2px; bottom: 4px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--navy-primary);
    border: 2px solid var(--bg-card);
}
.acct-avatar-cam i { color: #fff; font-size: 12px; }
.acct-avatar-label { margin-top: 12px; font-size: 12.5px; color: var(--text-muted); }

.acct-upload { flex: 1 1 320px; min-width: 260px; }
.acct-drop {
    padding: 16px 18px 18px;
    border: 1.5px dashed rgba(var(--navy-accent-rgb), 0.45);
    background: rgba(var(--navy-accent-rgb), 0.05);
    border-radius: 12px;
}
.acct-drop-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.acct-drop-head > i { font-size: 26px; color: var(--navy-accent); }
.acct-drop-head strong { display: block; font-size: 14.5px; color: var(--text-primary); }
.acct-drop-head small  { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }
.acct-hint { display: block; margin-top: 12px; font-size: 12.5px; color: var(--text-muted); }
.acct-hint i { color: var(--navy-accent); margin-right: 5px; }

/* account info tiles */
.acct-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.acct-info {
    display: flex; align-items: center; gap: 13px;
    padding: 4px 20px;
    border-left: 1px solid var(--border-light);
}
.acct-info:first-child { border-left: 0; padding-left: 0; }
.acct-info-icon {
    flex: 0 0 44px; width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(var(--navy-accent-rgb), 0.13);
    font-size: 17px;
}
.acct-info-icon i { color: var(--navy-accent); }
.acct-info-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct-info-label { font-size: 12.5px; color: var(--text-muted); }
.acct-info-value { font-size: 15px; font-weight: 700; color: var(--text-primary); word-break: break-word; }

/* forms inside account cards */
.acct-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 22px; }
.acct-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 22px; }
.acct-card .form-group { margin-bottom: 0; }
.acct-card .form-group label {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
    font-size: 13.5px; font-weight: 600; color: var(--text-secondary);
}
.acct-card .form-group label i { color: var(--navy-accent); }
.acct-req::after { content: ' *'; color: var(--danger); font-weight: 700; }
.acct-card input[type="text"],
.acct-card input[type="email"],
.acct-card input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 16px;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.acct-card input:focus {
    outline: none;
    border-color: var(--navy-accent);
    box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), 0.18);
}
.acct-pw { position: relative; }
.acct-pw input { padding-right: 46px !important; }
.acct-eye {
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%);
    padding: 8px;
    background: none; border: 0; border-radius: 8px;
    color: var(--text-muted); font-size: 15px; line-height: 1;
    cursor: pointer; transition: all 0.2s;
}
.acct-eye:hover { color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), 0.1); }

.acct-card .form-actions { display: flex; gap: 12px; margin-top: 22px; }
.acct-pw-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.acct-note {
    flex: 1; min-width: 240px;
    display: flex; align-items: center; gap: 9px;
    padding: 11px 15px;
    border-radius: 10px;
    background: rgba(var(--navy-accent-rgb), 0.08);
    border: 1px solid rgba(var(--navy-accent-rgb), 0.18);
    font-size: 13px; color: var(--text-secondary);
}
.acct-note i { color: var(--navy-accent); }
.acct-card .btn-primary {
    padding: 12px 22px;
    background: linear-gradient(135deg, var(--navy-accent) 0%, rgba(var(--navy-accent-rgb), 0.82) 100%);
    color: #fff;
}
.acct-card .btn-primary:hover { background: var(--navy-accent); filter: brightness(1.08); transform: translateY(-2px); }

/* dark mode — beat the blanket div/span colour rule */
body.dark-mode .acct-info-label,
body.dark-mode .acct-avatar-label,
body.dark-mode .acct-head-txt p { color: var(--text-muted) !important; }
body.dark-mode .acct-drop { background: rgba(var(--navy-accent-rgb), 0.09); }

@media (max-width: 1100px) {
    .acct-info-grid { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
    .acct-info:nth-child(odd) { border-left: 0; padding-left: 0; }
    .acct-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .acct-card { padding: 18px 16px 20px; }
    .acct-photo { flex-direction: column; align-items: center; }
    .acct-upload { width: 100%; min-width: 0; }
    .acct-info-grid { grid-template-columns: 1fr; }
    .acct-info { border-left: 0; padding: 0; }
    .acct-grid-2, .acct-grid-3 { grid-template-columns: 1fr; }
    .acct-pw-actions { flex-direction: column; align-items: stretch; }
    .acct-note { min-width: 0; }
}

/* ===== Auth — SaaS split: form left, showcase right ===== */
.auth-body {
    position: relative;
    min-height: 100dvh;
    display: flex;
    background-color: var(--bg-primary);
    /* soft theme-tinted glows — light wash, recolours with the site palette */
    background-image:
        radial-gradient(760px 470px at 10% 6%,   rgba(var(--navy-accent-rgb), 0.20), transparent 62%),
        radial-gradient(700px 430px at 90% 4%,   rgba(var(--navy-light-rgb), 0.16), transparent 60%),
        radial-gradient(860px 540px at 82% 98%,  rgba(var(--navy-accent-rgb), 0.16), transparent 64%),
        radial-gradient(660px 420px at 6% 96%,   rgba(var(--navy-primary-rgb), 0.12), transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/* faint dot texture over the wash */
.auth-body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: radial-gradient(rgba(var(--navy-primary-rgb), 0.09) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(1000px 700px at 30% 40%, #000 20%, transparent 78%);
            mask-image: radial-gradient(1000px 700px at 30% 40%, #000 20%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}
/* full-bleed: the card IS the viewport. transparent so the body wash shows through */
.auth-wrap {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex; flex-direction: column;
    min-height: 100dvh;
}
.auth-card {
    flex: 1;
    width: 100%; min-height: 100dvh;
    display: grid; grid-template-columns: 1fr 1fr;
    background: transparent;
}

/* ---------- left: form column ---------- */
.auth-form-col {
    position: relative;
    display: flex; flex-direction: column;
    min-width: 0; max-height: 100dvh;
    padding: 24px 30px 20px;
    overflow-y: auto;                       /* long errors scroll the column, never the page */
}
.auth-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.auth-brandmark {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--navy-primary); font-size: 15.5px; font-weight: 800;
    text-decoration: none; letter-spacing: -0.2px;
}
.auth-brandmark img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.auth-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--border-color); border-radius: 50%;
    background: var(--bg-card); color: var(--text-secondary);
    font-size: 15px; cursor: pointer;
    box-shadow: 0 2px 8px var(--shadow-color);
    transition: color 0.2s, border-color 0.2s;
}
.auth-toggle:hover { color: var(--navy-accent); border-color: var(--navy-accent); }

.auth-form-inner { width: 100%; max-width: 392px; margin: auto; }
.auth-form-inner .error,
.auth-form-inner .success { margin: 0 0 16px; text-align: left; }

/* badge on a graph-paper wash, like the reference */
.auth-badge-wrap { position: relative; display: flex; justify-content: center; margin-bottom: 16px; }
.auth-badge-wrap::before {
    content: '';
    position: absolute; left: 50%; top: 50%;
    width: 300px; height: 150px;
    transform: translate(-50%, -50%);
    background-image:
        linear-gradient(rgba(var(--navy-primary-rgb), 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--navy-primary-rgb), 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(closest-side, #000 8%, transparent 76%);
            mask-image: radial-gradient(closest-side, #000 8%, transparent 76%);
    pointer-events: none;
}
.auth-badge {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--navy-accent) 0%, rgba(var(--navy-accent-rgb), 0.72) 100%);
    color: #fff; font-size: 19px;
    box-shadow: 0 10px 24px rgba(var(--navy-accent-rgb), 0.34);
}
.auth-form-inner h1 { font-size: 25px; font-weight: 800; color: var(--navy-primary); text-align: center; margin: 0 0 7px; }
.auth-sub { font-size: 14px; color: var(--text-muted); text-align: center; margin: 0 0 26px; }

.auth-group { margin-bottom: 16px; }
.auth-group label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.auth-group label i { color: var(--navy-accent); }
.auth-field { position: relative; }
.auth-field-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 15px; pointer-events: none; }
.auth-field input {
    width: 100%; height: 52px;
    padding: 0 16px;
    border: 1px solid var(--input-border);
    border-radius: 11px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 16px;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.auth-field-icon ~ input { padding-left: 46px; }
.auth-field input:focus {
    outline: none;
    border-color: var(--navy-accent);
    background: rgba(var(--navy-accent-rgb), 0.04);
    box-shadow: 0 0 0 4px rgba(var(--navy-accent-rgb), 0.14);
}
.auth-eye {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    padding: 9px;
    background: none; border: 0; border-radius: 9px;
    color: var(--text-muted); font-size: 16px; line-height: 1;
    cursor: pointer; transition: all 0.2s;
}
.auth-eye:hover { color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), 0.1); }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 20px; flex-wrap: wrap; }
.auth-check { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; }
.auth-check input { width: 17px; height: 17px; accent-color: var(--navy-accent); cursor: pointer; }
.auth-link { color: var(--navy-accent); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.auth-submit {
    width: 100%; height: 52px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border: 0; border-radius: 11px;
    background: linear-gradient(120deg, var(--navy-accent) 0%, rgba(var(--navy-accent-rgb), 0.78) 100%);
    color: #fff; font-size: 16px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(var(--navy-accent-rgb), 0.32);
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    touch-action: manipulation;
}
.auth-submit:hover  { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 28px rgba(var(--navy-accent-rgb), 0.40); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled { opacity: 0.65; cursor: not-allowed; pointer-events: none; transform: none; }

/* divider — flex rules, no opaque chip needed over the wash */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.auth-or span { color: var(--text-muted); font-size: 12.5px; font-weight: 600; }

.auth-google {
    width: 100%; height: 52px;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    border: 1px solid var(--input-border);
    border-radius: 11px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 15px; font-weight: 600;
    font-family: inherit;                   /* verify_otp uses this on a <button> — buttons don't inherit */
    text-decoration: none; cursor: pointer;
    transition: all 0.25s;
}
.auth-google:hover { border-color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), 0.05); }
.auth-signup { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--text-secondary); }
.auth-maint { margin-top: 16px; text-align: left; }

/* footer sits at the bottom of the column — flow, not absolute */
.auth-foot { width: 100%; padding-top: 18px; }
.auth-copy {
    position: static;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 10px 0 0; text-align: center;
    font-size: 12.5px; color: var(--text-muted);
}
.auth-copy i { color: var(--navy-accent); }

/* ---------- right: showcase panel ---------- */
.auth-showcase { display: flex; padding: 14px; min-width: 0; }
.auth-showcase-card {
    position: relative;
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 46px 38px 32px;
    border: 1px solid rgba(var(--navy-accent-rgb), 0.16);
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(165deg,
        rgba(var(--navy-accent-rgb), 0.20) 0%,
        rgba(var(--navy-light-rgb), 0.10) 44%,
        var(--bg-card) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.auth-show-title {
    margin: 0; text-align: center;
    font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; letter-spacing: -0.4px;
    color: var(--navy-primary);
}
.auth-show-title span { color: var(--navy-accent); }

/* orbit — one size var drives rings + radii so nothing is hand-tuned per breakpoint */
.auth-orbit {
    position: relative;
    --d: clamp(230px, 22vw, 380px);
    width: var(--d); height: var(--d);
    margin: auto;
}
.auth-orbit::before {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 62%; height: 62%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--navy-accent-rgb), 0.30), transparent 72%);
    animation: authGlow 3.8s ease-in-out infinite;
    pointer-events: none;
}
.auth-ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(var(--navy-accent-rgb), 0.20);
    border-radius: 50%;
}
.auth-ring.r1 { width: calc(var(--d) * 0.46); height: calc(var(--d) * 0.46); }
.auth-ring.r2 { width: calc(var(--d) * 0.72); height: calc(var(--d) * 0.72); }
.auth-ring.r3 { width: var(--d); height: var(--d); border-style: dashed; border-color: rgba(var(--navy-accent-rgb), 0.16); }

.auth-orbit-core {
    position: absolute; top: 50%; left: 50%;
    width: calc(var(--d) * 0.30); height: calc(var(--d) * 0.30);
    transform: translate(-50%, -50%);
    padding: 5px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--navy-accent) 0%, rgba(var(--navy-accent-rgb), 0.62) 100%);
    box-shadow: 0 18px 40px rgba(var(--navy-accent-rgb), 0.36), 0 0 0 7px rgba(255, 255, 255, 0.55);
    z-index: 2;
}
.auth-orbit-core img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* slot places the chip on the ring; the trailing rotate keeps it upright */
.auth-orbit-slot {
    position: absolute; top: 50%; left: 50%;
    --sz: 46px;
    width: var(--sz); height: var(--sz);
    margin: calc(var(--sz) / -2);
    /* fallbacks matter: one undefined var invalidates the whole declaration and drops the chip dead centre */
    transform: rotate(var(--a, 0deg)) translateX(var(--r, 0px)) rotate(calc(-1 * var(--a, 0deg)));
    z-index: 1;
}
.auth-orbit-slot.s1 { --a: -75deg;  --r: calc(var(--d) * 0.23); --sz: 40px; }
.auth-orbit-slot.s2 { --a: 205deg;  --r: calc(var(--d) * 0.36); }
.auth-orbit-slot.s3 { --a: -25deg;  --r: calc(var(--d) * 0.36); }
.auth-orbit-slot.s4 { --a: 160deg;  --r: calc(var(--d) * 0.50); --sz: 44px; }
.auth-orbit-slot.s5 { --a: 35deg;   --r: calc(var(--d) * 0.50); --sz: 44px; }
.auth-orbit-slot.s6 { --a: 95deg;   --r: calc(var(--d) * 0.50); --sz: 42px; }

.auth-orbit-chip {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--bg-card);
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(var(--navy-primary-rgb), 0.16), 0 0 0 1px rgba(var(--navy-primary-rgb), 0.05);
    animation: authFloat 5.4s ease-in-out infinite;
}
.auth-orbit-slot.s2 .auth-orbit-chip { animation-delay: -0.8s; }
.auth-orbit-slot.s3 .auth-orbit-chip { animation-delay: -1.7s; }
.auth-orbit-slot.s4 .auth-orbit-chip { animation-delay: -2.6s; }
.auth-orbit-slot.s5 .auth-orbit-chip { animation-delay: -3.4s; }
.auth-orbit-slot.s6 .auth-orbit-chip { animation-delay: -4.2s; }
.auth-orbit-chip.c-smtp   i { color: var(--navy-accent); }
.auth-orbit-chip.c-google i { color: #4285F4; }
.auth-orbit-chip.c-drive  i { color: #1FA463; }
.auth-orbit-chip.c-wa     i { color: #25D366; }
.auth-orbit-chip.c-tg     i { color: #229ED9; }
.auth-orbit-chip.c-ms     i { color: #00A4EF; }

@keyframes authFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes authGlow  { 0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); } }

/* rotating captions + dots */
.auth-slides { position: relative; width: 100%; max-width: 430px; min-height: 66px; }
.auth-slide {
    position: absolute; inset: 0;
    margin: 0; text-align: center;
    font-size: 14.5px; line-height: 1.55; color: var(--text-secondary);
    opacity: 0; transform: translateY(7px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}
.auth-slide.is-active { opacity: 1; transform: none; }
.auth-slide b { color: var(--navy-primary); font-weight: 700; }
.auth-dots { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; }
.auth-dot {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 4px;
    background: rgba(var(--navy-primary-rgb), 0.22);
    cursor: pointer;
    transition: width 0.3s, background 0.3s;
}
.auth-dot.is-active { width: 22px; background: var(--navy-accent); }

/* ---------- dark mode — beat the blanket p/span/div/label colour rules ---------- */
body.dark-mode.auth-body {
    background-image:
        radial-gradient(760px 470px at 10% 6%,  rgba(var(--navy-accent-rgb), 0.22), transparent 64%),
        radial-gradient(700px 430px at 90% 4%,  rgba(var(--navy-light-rgb), 0.26), transparent 62%),
        radial-gradient(860px 540px at 82% 98%, rgba(var(--navy-accent-rgb), 0.15), transparent 66%);
}
body.dark-mode.auth-body::before { background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); }
body.dark-mode .auth-brandmark,
body.dark-mode .auth-brandmark span { color: var(--text-primary) !important; }
body.dark-mode .auth-form-inner h1 { color: var(--text-primary) !important; }  /* h1-h6 blanket at 3683 is !important */
body.dark-mode .auth-sub,
body.dark-mode .auth-copy,
body.dark-mode .auth-or span,
body.dark-mode .auth-signup,
body.dark-mode .auth-check span { color: var(--text-muted) !important; }
body.dark-mode .error { background: rgba(234, 67, 53, 0.10); border-color: rgba(234, 67, 53, 0.30); }
body.dark-mode .auth-showcase-card {
    border-color: rgba(var(--navy-accent-rgb), 0.28);
    box-shadow: none;
    background: linear-gradient(165deg,
        rgba(var(--navy-accent-rgb), 0.22) 0%,
        rgba(var(--navy-light-rgb), 0.30) 46%,
        var(--bg-card) 100%);
}
body.dark-mode .auth-show-title { color: var(--text-primary) !important; }
body.dark-mode .auth-show-title span { color: var(--navy-accent) !important; }
body.dark-mode .auth-slide { color: var(--text-secondary) !important; }
body.dark-mode .auth-slide b { color: var(--text-primary) !important; }
body.dark-mode .auth-ring { border-color: rgba(var(--navy-accent-rgb), 0.32); }
body.dark-mode .auth-orbit-chip { background: var(--bg-secondary); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38); }
body.dark-mode .auth-orbit-core { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 7px rgba(255, 255, 255, 0.10); }
body.dark-mode .auth-dot { background: rgba(255, 255, 255, 0.22); }

/* ---------- responsive ---------- */
/* short windows — shrink the orbit before it crowds the caption out of the card */
@media (max-height: 780px) {
    .auth-orbit { --d: clamp(190px, 17vw, 290px); }
    .auth-showcase-card { padding: 32px 32px 26px; }
}
@media (max-width: 1024px) {
    .auth-card { grid-template-columns: 1fr; min-height: 0; }
    .auth-showcase { display: none; }
    .auth-form-col { max-height: none; overflow: visible; padding: 20px 24px 18px; }
}
@media (max-width: 560px) {
    .auth-form-col { padding: 16px 18px 16px; }
    .auth-form-inner h1 { font-size: 22px; }
    .auth-sub { margin-bottom: 22px; }
    .auth-brandmark { font-size: 14.5px; }
    .auth-brandmark img { width: 30px; height: 30px; }
}

/* ===== Auth transitions — login <-> signup slide, showcase stays put =====
   Cross-document view transitions (opted in globally above). The showcase panel is
   identical on every auth page, so it gets its own snapshot and never moves. */
.auth-showcase   { view-transition-name: auth-brand; }
.auth-form-inner { view-transition-name: auth-form; }

/* showcase box = same on every page -> hold it perfectly still, no crossfade */
::view-transition-group(auth-brand) { animation-duration: 0s; }
::view-transition-old(auth-brand),
::view-transition-new(auth-brand)   { animation: none; }

/* default pair — forgot/reset/verify carry no html.auth-* class, so without this
   they fall back to the unstyled group animation instead of a clean fade */
::view-transition-old(auth-form) { animation: authFadeOut 0.18s ease both; }
::view-transition-new(auth-form) { animation: authFadeIn 0.34s cubic-bezier(.16, 1, .3, 1) both; }

/* form slides in the direction you travelled — class sits on <html> per page */
.auth-signup::view-transition-old(auth-form) { animation: authOutLeft 0.20s ease both; }
.auth-signup::view-transition-new(auth-form) { animation: authInRight 0.40s cubic-bezier(.16, 1, .3, 1) both; }
.auth-login::view-transition-old(auth-form)  { animation: authOutRight 0.20s ease both; }
.auth-login::view-transition-new(auth-form)  { animation: authInLeft 0.40s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes authFadeOut { to   { opacity: 0; transform: translateY(-8px); } }
@keyframes authFadeIn  { from { opacity: 0; transform: translateY(10px); } }
@keyframes authOutLeft  { to   { opacity: 0; transform: translateX(-38px); } }
@keyframes authInRight  { from { opacity: 0; transform: translateX(38px); } }
@keyframes authOutRight { to   { opacity: 0; transform: translateX(38px); } }
@keyframes authInLeft   { from { opacity: 0; transform: translateX(-38px); } }

/* no view transitions (older Safari/Firefox) -> plain entrance so it still feels alive */
@supports not (view-transition-name: none) {
    .auth-form-inner { animation: authFadeIn 0.45s cubic-bezier(.16, 1, .3, 1) 0.05s both; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(auth-form), ::view-transition-new(auth-form) { animation: none; }
    .auth-form-inner { animation: none; }
    .auth-orbit-chip, .auth-orbit::before { animation: none; }
    .auth-slide { transition: none; }
}

/* ===== Google Drive backup card ===== */
.gdrive-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
@media (max-width: 576px) {
    .gdrive-actions { flex-direction: column; }
    .gdrive-actions .btn { width: 100%; }
}

/* sidebar unread pill sits on the Chat nav item */
.sidebar-menu li { position: relative; }
.nav-pill {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: var(--danger); color: #fff; pointer-events: none;
    font-size: 10px; font-style: normal; font-weight: 700;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
}
/* collapsed rail has no room for a number — shrink to a dot */
.sidebar.collapsed .nav-pill {
    top: 8px; right: 12px; transform: none;
    min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0;
}

/* bottom bar now carries up to 5 entries — tighten so nothing wraps on small phones */
.mobile-bottom-nav .mobile-nav-item { position: relative; padding: 8px 6px; min-width: 0; flex: 1; }
.mobile-nav-pill {
    position: absolute; top: 3px; right: 50%; margin-right: -20px;
    background: var(--danger); color: #fff; font-style: normal; font-weight: 700;
    font-size: 9px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 360px) {
    .mobile-bottom-nav .mobile-nav-item { font-size: 9px; padding: 8px 3px; }
}

/* chat scope segmented control — same visual language as the V/A/E/D dots */
.rbac-scope { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.rbac-scope-btn {
    padding: 4px 8px; border: 1px solid #d4d4d4; background: #fff; color: #999;
    font-size: 10px; font-weight: 700; cursor: pointer; border-radius: 0;
    transition: all .12s; white-space: nowrap;
}
.rbac-scope-btn:hover:not(:disabled) { border-color: var(--navy-accent); }
.rbac-scope-btn.on { background: var(--navy-accent); border-color: var(--navy-accent); color: #fff; }
.rbac-scope-btn.locked { opacity: .45; cursor: not-allowed; }
body.dark-mode .rbac-scope-btn { background: var(--input-bg); border-color: var(--input-border); color: var(--text-muted); }
body.dark-mode .rbac-scope-btn.on { background: var(--navy-accent); border-color: var(--navy-accent); color: #fff; }


/* ===== Chat — WhatsApp-style surface =====
   Page-scoped on purpose: everything here sits under .page-chat / .chat-*,
   so the navy dashboard theme is untouched everywhere else. */

body.page-chat {
    --wa-teal:      #008069;
    --wa-green:     #25d366;
    --wa-out:       #d9fdd3;   /* my bubble  */
    --wa-in:        #ffffff;   /* their bubble */
    --wa-bg:        #efeae2;   /* wallpaper base */
    --wa-panel:     #ffffff;
    --wa-head:      #f0f2f5;
    --wa-line:      #e9edef;
    --wa-txt:       #111b21;
    --wa-mut:       #667781;
    --wa-tick:      #53bdeb;
    --wa-wall-op:   .06;
}
body.page-chat.dark-mode {
    --wa-teal:      #00a884;
    --wa-out:       #005c4b;
    --wa-in:        #202c33;
    --wa-bg:        #0b141a;
    --wa-panel:     #111b21;
    --wa-head:      #202c33;
    --wa-line:      #222d34;
    --wa-txt:       #e9edef;
    --wa-mut:       #8696a0;
    --wa-wall-op:   .05;
}

.chat-banner {
    display: flex; align-items: center; gap: 10px;
    background: #fff3cd; color: #664d03;
    border-bottom: 1px solid #ffe69c;
    padding: 10px 16px; font-size: 13px;
}
body.page-chat.dark-mode .chat-banner { background: #332701; color: #ffda6a; border-bottom-color: #4a3800; }

/* thin indeterminate bar — reads and writes both drive it, never a blocking popup */
.chat-bar { height: 3px; background: transparent; overflow: hidden; }
.chat-bar.on::after {
    content: ''; display: block; height: 100%; width: 40%;
    background: var(--wa-green);
    animation: chat-bar-slide 1s linear infinite;
}
@keyframes chat-bar-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

.chat-wrap {
    display: grid; grid-template-columns: 380px 1fr;
    height: calc(100vh - 220px); min-height: 460px;
    background: var(--wa-panel);
}

/* ---------- left panel ---------- */
.chat-side { display: flex; flex-direction: column; overflow: hidden; background: var(--wa-panel); }
.chat-side-head {
    display: flex; gap: 8px; align-items: center;
    padding: 8px 12px; background: var(--wa-head); border-bottom: 1px solid var(--wa-line);
}
.chat-search { position: relative; flex: 1; }
.chat-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--wa-mut); font-size: 13px; }
.chat-search input {
    width: 100%; padding: 9px 14px 9px 40px; font-size: 16px;
    background: var(--wa-panel); color: var(--wa-txt);
    border: 1px solid transparent; border-radius: 8px;
}
.chat-search input::placeholder { color: var(--wa-mut); }
.chat-search input:focus { outline: none; border-color: var(--wa-teal); box-shadow: 0 0 0 3px rgba(0,168,132,.18); }
.chat-bcast-btn {
    white-space: nowrap; background: var(--wa-teal); border: none; color: #fff;
    padding: 9px 12px; border-radius: 8px; font-size: 13px; cursor: pointer;
}
.chat-bcast-btn:hover { filter: brightness(1.08); }

.chat-contacts { flex: 1; overflow-y: auto; background: var(--wa-panel); }
.chat-contact {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 10px 14px; background: none; border: none;
    text-align: left; cursor: pointer; color: var(--wa-txt);
}
.chat-contact:hover  { background: var(--wa-head); }
.chat-contact.active { background: var(--wa-head); box-shadow: inset 3px 0 0 var(--wa-teal); }
.chat-contact:focus-visible { outline: 2px solid var(--wa-teal); outline-offset: -3px; }
.chat-contact.has-unread .chat-contact-top strong { font-weight: 600; }
.chat-contact.has-unread .chat-contact-sub span { color: var(--wa-txt); }
body.page-chat.dark-mode .chat-contact.active { background: #2a3942; }
/* divider is indented past the avatar, the way a messenger list reads */
.chat-contact + .chat-contact::before {
    content: ''; position: absolute; left: 74px; right: 0; top: 0; height: 1px; background: var(--wa-line);
}
.chat-contact { position: relative; }
.chat-contact img { width: 49px; height: 49px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--wa-head); }
.chat-contact-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-contact-top  { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-contact-top strong { font-size: 16px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-contact-time { font-size: 12px; color: var(--wa-mut); flex-shrink: 0; }
.chat-contact.has-unread .chat-contact-time { color: var(--wa-green); }
.chat-contact-sub {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 14px; color: var(--wa-mut);
}
.chat-contact-sub span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.chat-pill {
    background: var(--wa-green); color: #0b141a; font-size: 12px; font-style: normal; font-weight: 600;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---------- thread ---------- */
.chat-pane { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--wa-bg); }
/* doodle wallpaper — inlined so nothing is fetched from outside. it lives on the pane, not the
   scrolling message list, otherwise it would only cover the first screenful of a long thread */
.chat-pane::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiB2aWV3Qm94PSIwIDAgMjIwIDIyMCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMzgiPjxjaXJjbGUgY3g9IjI4IiBjeT0iMjYiIHI9IjgiLz48cGF0aCBkPSJNNjAgMjBoMTh2MTRINjB6Ii8+PHBhdGggZD0iTTEwNCAzMmM0LTEwIDE0LTEwIDE0LTIgMCA2LTcgMTAtMTQgMTYtNy02LTE0LTEwLTE0LTE2IDAtOCAxMC04IDE0IDJ6Ii8+PHBhdGggZD0iTTE1MCAxOGw0IDkgMTAgMS03IDcgMiAxMC05LTUtOSA1IDItMTAtNy03IDEwLTF6Ii8+PHBhdGggZD0iTTE5MCAyMGM2IDAgMTAgNCAxMCA5cy00IDktMTAgOWgtNGwtNiA1di01Yy00LTEtNi01LTYtOSAwLTUgNC05IDEwLTl6Ii8+PHBhdGggZD0iTTIwIDcwYzgtNiAxNiA2IDI0IDAiLz48cGF0aCBkPSJNNjIgNjRoMTZ2MTZINjJ6IiB0cmFuc2Zvcm09InJvdGF0ZSgyMCA3MCA3MikiLz48Y2lyY2xlIGN4PSIxMTIiIGN5PSI3MiIgcj0iOSIvPjxwYXRoIGQ9Ik0xMDggNzJsMyAzIDYtNyIvPjxwYXRoIGQ9Ik0xNTAgNjR2MTZNMTQyIDcyaDE2Ii8+PHBhdGggZD0iTTE4NiA2MmwxMCAxMC0xMCAxMC0xMC0xMHoiLz48cGF0aCBkPSJNMTggMTE4YzAtNiA1LTEwIDExLTEwczExIDQgMTEgMTAtNSAxMC0xMSAxMGgtM2wtNSA0di01Yy0yLTItMy01LTMtOXoiLz48cGF0aCBkPSJNNjAgMTEwbDggMTZoLTE2eiIvPjxwYXRoIGQ9Ik0xMDAgMTA4aDIwdjhoLTIwek0xMDQgMTE2djEwTTExNiAxMTZ2MTAiLz48cGF0aCBkPSJNMTQ4IDExMmE4IDggMCAxIDEgMCAxMk0xNDggMTA2djIyIi8+PGNpcmNsZSBjeD0iMTkyIiBjeT0iMTE4IiByPSI5Ii8+PHBhdGggZD0iTTE5MiAxMTJ2Nmw0IDMiLz48cGF0aCBkPSJNMTYgMTYwaDIwbC00IDEySDIweiIvPjxwYXRoIGQ9Ik01OCAxNTZjNi00IDEyIDQgMTggMCIvPjxwYXRoIGQ9Ik01OCAxNjhjNi00IDEyIDQgMTggMCIvPjxwYXRoIGQ9Ik0xMDQgMTUybDYgMTItNiAxMi02LTEyeiIvPjxwYXRoIGQ9Ik0xNDQgMTU2aDE4djE0aC02bC00IDUtMi01aC02eiIvPjxwYXRoIGQ9Ik0xODggMTU0djE4TTE4MCAxNjNoMTYiLz48cGF0aCBkPSJNMjAgMTk4YzggMCA4IDggMTYgOCIvPjxwYXRoIGQ9Ik02NCAxOTZhNyA3IDAgMSAwIDE0IDAgNyA3IDAgMCAwLTE0IDB6TTcxIDIwM3Y2Ii8+PHBhdGggZD0iTTEwMiAxOTRoMTZ2MTJoLTE2eiIvPjxwYXRoIGQ9Ik0xMDYgMjA2bC0zIDZNMTE0IDIwNmwzIDYiLz48cGF0aCBkPSJNMTQ4IDE5Mmw4IDgtOCA4LTgtOHoiLz48cGF0aCBkPSJNMTg2IDE5NGM2IDIgOCA4IDQgMTIiLz48L2c+PC9zdmc+Cg==");
    background-repeat: repeat; background-size: 220px 220px;
    opacity: var(--wa-wall-op);
}
.chat-thread, .chat-blank { position: relative; z-index: 1; }
.chat-head, .chat-composer { position: relative; z-index: 1; }
.chat-thread[hidden], .chat-blank[hidden] { display: none; }
.chat-thread { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.chat-blank, .chat-none {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 40px 20px; text-align: center; color: var(--wa-mut);
    background: var(--wa-bg);
}
.chat-blank i {
    width: 96px; height: 96px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 38px; color: var(--wa-teal); background: rgba(0,168,132,.12);
}
.chat-blank h3 { color: var(--wa-txt); font-size: 22px; font-weight: 300; }
.chat-none i { font-size: 26px; opacity: .5; }
.chat-none-lg { height: 100%; background: transparent; }

.chat-head {
    display: flex; align-items: center; gap: 13px; flex-shrink: 0;
    padding: 9px 16px; background: var(--wa-head); border-bottom: 1px solid var(--wa-line);
}
.chat-head-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat-head-info { display: flex; flex-direction: column; }
.chat-head-info strong { font-size: 16px; font-weight: 500; color: var(--wa-txt); }
.chat-head-info span  { font-size: 13px; color: var(--wa-mut); }
.chat-back { display: none; background: none; border: none; color: var(--wa-txt); font-size: 18px; cursor: pointer; padding: 4px 6px; }

/* ---------- messages + wallpaper ---------- */
.chat-msgs {
    flex: 1; overflow-y: auto; padding: 14px 6%;
    display: flex; flex-direction: column; gap: 2px;
    background: transparent;
}
/* doodle wallpaper, inlined so nothing is fetched from outside */

.chat-day { text-align: center; margin: 12px 0; }
.chat-day span {
    display: inline-block; padding: 5px 12px; font-size: 12.5px;
    text-transform: uppercase; color: var(--wa-mut);
    background: var(--wa-in); border-radius: 7.5px; box-shadow: 0 1px 0.5px rgba(11,20,26,.13);
}
body.page-chat.dark-mode .chat-day span { color: var(--wa-mut); background: var(--wa-head); }

.chat-msg { display: flex; max-width: 65%; }
.chat-msg.mine { align-self: flex-end; justify-content: flex-end; }
.chat-msg + .chat-msg { margin-top: 2px; }
.chat-msg.starts-run { margin-top: 12px; }

.chat-bub {
    position: relative; padding: 6px 9px 8px; font-size: 14.2px; line-height: 19px;
    background: var(--wa-in); color: var(--wa-txt);
    border-radius: 7.5px; box-shadow: 0 1px 0.5px rgba(11,20,26,.13);
    word-break: break-word; max-width: 100%;
}
.chat-msg.mine .chat-bub { background: var(--wa-out); }

/* the little tail — only on the first bubble of a run, like the real thing */
.chat-msg.starts-run .chat-bub::before {
    content: ''; position: absolute; top: 0; width: 8px; height: 13px;
}
.chat-msg.starts-run:not(.mine) .chat-bub { border-top-left-radius: 0; }
.chat-msg.starts-run:not(.mine) .chat-bub::before {
    left: -8px;
    background: var(--wa-in);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.chat-msg.starts-run.mine .chat-bub { border-top-right-radius: 0; }
.chat-msg.starts-run.mine .chat-bub::before {
    right: -8px;
    background: var(--wa-out);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.chat-bub.gone { font-style: italic; color: var(--wa-mut); }
.chat-bub .chat-text { white-space: pre-wrap; }

.chat-tag {
    display: block; margin-bottom: 3px;
    font-size: 12.5px; font-weight: 600; color: var(--wa-teal);
}
.chat-msg.bcast .chat-bub {
    padding-left: 13px;
    box-shadow: 0 1px 0.5px rgba(11,20,26,.13), inset 3px 0 0 var(--wa-teal);
}

/* time + ticks tuck into the last line of text, dropping to their own line when it's tight */
.chat-meta {
    float: right; position: relative; top: 4px;
    margin: 0 -3px -4px 11px;
    font-size: 11px; color: var(--wa-mut); line-height: 15px; white-space: nowrap;
}
.chat-meta i { font-size: 12px; margin-left: 2px; vertical-align: -1px; }
.chat-meta i.read { color: var(--wa-tick); }
.chat-meta i.failed { color: #ea4335; }
/* optimistic bubble — on screen before the server has confirmed it */
.chat-msg.pending .chat-bub { opacity: .72; }

.chat-img { display: block; margin: -2px -5px 5px; cursor: zoom-in; }
.chat-img img { display: block; max-width: 320px; width: 100%; border-radius: 6px; }
.chat-doc {
    display: flex; align-items: center; gap: 11px; margin-bottom: 3px; padding: 9px 12px;
    background: rgba(11,20,26,.05); border-radius: 8px; color: inherit; text-decoration: none;
    transition: background 0.2s;
}
.chat-doc:hover { background: rgba(11,20,26,.1); }
body.page-chat.dark-mode .chat-doc { background: rgba(255,255,255,.06); }
body.page-chat.dark-mode .chat-doc:hover { background: rgba(255,255,255,.11); }
.chat-doc i {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; color: var(--wa-teal); background: rgba(0,168,132,.16);
}
.chat-doc span { display: flex; flex-direction: column; min-width: 0; }
.chat-doc strong { font-size: 13.5px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.chat-doc em { font-size: 11.5px; font-style: normal; color: var(--wa-mut); text-transform: uppercase; }

/* hover tools stay out of the way until you point at a bubble */
.chat-tools {
    position: absolute; top: 50%; transform: translateY(-50%); display: none; gap: 1px;
    background: var(--wa-panel); border: 1px solid var(--wa-line); border-radius: 20px; padding: 3px;
    box-shadow: 0 2px 10px rgba(11,20,26,.18);
}
.chat-msg:not(.mine) .chat-tools { right: -70px; }
.chat-msg.mine .chat-tools      { left: -70px; }
.chat-msg:hover .chat-tools { display: flex; }
.chat-tools button {
    background: none; border: none; cursor: pointer; font-size: 12px; color: var(--wa-mut);
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.chat-tools button:hover { color: #ea4335; background: rgba(234,67,53,.1); }

/* ---------- composer ---------- */
.chat-composer {
    display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0;
    padding: 8px 16px; background: var(--wa-head);
}
.chat-composer textarea {
    flex: 1; resize: none; max-height: 140px; padding: 10px 14px;
    font-size: 16px; font-family: inherit; line-height: 20px;
    background: var(--wa-panel); color: var(--wa-txt);
    border: none; border-radius: 8px;
}
.chat-composer textarea::placeholder { color: var(--wa-mut); }
.chat-composer textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--wa-teal); }
.chat-file-hidden { display: none; }
.chat-attach, .chat-send {
    flex-shrink: 0; width: 42px; height: 42px; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; touch-action: manipulation;
}
.chat-attach { background: none; color: var(--wa-mut); font-size: 21px; }
.chat-attach:hover { color: var(--wa-txt); }
.chat-send { background: var(--wa-teal); color: #fff; font-size: 17px; }
.chat-send { transition: filter 0.2s, transform 0.2s; }
.chat-send:hover:not(:disabled) { filter: brightness(1.08); transform: scale(1.06); }
.chat-send:active:not(:disabled) { transform: scale(0.96); }
.chat-send:disabled { opacity: .6; cursor: not-allowed; }
.chat-composer-off {
    justify-content: center; gap: 8px; color: var(--wa-mut); font-size: 13px; padding: 16px;
}

/* ---------- broadcast modal ---------- */
.chat-bcast-note { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.chat-bcast-input {
    width: 100%; resize: vertical; padding: 11px 12px; font-size: 16px; font-family: inherit;
    background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary);
    border-radius: 8px;
}
.chat-bcast-input:focus { outline: none; border-color: var(--navy-accent); }
.chat-bcast-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ---------- skeletons ---------- */
.chat-skel {
    height: 62px; margin: 8px 14px; border-radius: 8px;
    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;
}

/* ---- full screen: the shell stops scrolling, the thread owns the viewport ---- */
body.page-chat .main-content { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
body.page-chat .breadcrumb { display: none; }
body.page-chat .header {
    flex-shrink: 0; margin: 0; padding: 10px 16px; border-radius: 0; box-shadow: none;
    background: var(--wa-head); border-bottom: 1px solid var(--wa-line);
}
body.page-chat .header h1 { font-size: 18px; color: var(--wa-txt); }
body.page-chat .chat-wrap { flex: 1; height: auto; min-height: 0; }
body.page-chat .chat-side { border-right: 1px solid var(--wa-line); }

/* ---- mobile: one pane at a time ---- */
@media (max-width: 900px) {
    .chat-wrap { grid-template-columns: 1fr; }
    .chat-pane { display: none; }
    .chat-wrap.thread-open .chat-side { display: none; }
    .chat-wrap.thread-open .chat-pane { display: flex; }
    .chat-back { display: inline-block; }
    .chat-msg { max-width: 82%; }
    .chat-msgs { padding: 12px 4%; }
    .chat-img img { max-width: 240px; }
    .chat-msg:not(.mine) .chat-tools, .chat-msg.mine .chat-tools {
        top: -13px; right: 2px; left: auto; transform: none;
    }
    .chat-jump { right: 14px; bottom: 72px; }
}
@media (max-width: 768px) {
    body.page-chat .main-content { padding-bottom: max(65px, calc(65px + env(safe-area-inset-bottom))); }
    body.page-chat .header { padding: 9px 14px; }
    body.page-chat .header h1 { font-size: 17px; }
}

/* ---------- jump to latest ---------- */
.chat-jump {
    position: absolute; right: 22px; bottom: 76px; z-index: 3;
    width: 42px; height: 42px; border: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wa-panel); color: var(--wa-mut); font-size: 15px;
    box-shadow: 0 3px 12px rgba(11,20,26,.25);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    cursor: pointer;
}
.chat-jump.on { opacity: 1; visibility: visible; transform: none; }
.chat-jump:hover { color: var(--wa-teal); }

/* ---------- thin themed scrollbars in both panes ---------- */
.chat-contacts, .chat-msgs { scrollbar-width: thin; scrollbar-color: rgba(11,20,26,.22) transparent; }
.chat-contacts::-webkit-scrollbar, .chat-msgs::-webkit-scrollbar { width: 7px; }
.chat-contacts::-webkit-scrollbar-track, .chat-msgs::-webkit-scrollbar-track { background: transparent; }
.chat-contacts::-webkit-scrollbar-thumb, .chat-msgs::-webkit-scrollbar-thumb {
    background: rgba(11,20,26,.2); border-radius: 4px;
}
.chat-contacts::-webkit-scrollbar-thumb:hover, .chat-msgs::-webkit-scrollbar-thumb:hover { background: rgba(11,20,26,.34); }
body.page-chat.dark-mode .chat-contacts, body.page-chat.dark-mode .chat-msgs { scrollbar-color: rgba(255,255,255,.2) transparent; }
body.page-chat.dark-mode .chat-contacts::-webkit-scrollbar-thumb,
body.page-chat.dark-mode .chat-msgs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }

@media (prefers-reduced-motion: reduce) {
    .chat-jump, .chat-send, .chat-doc { transition: none; }
    .chat-send:hover:not(:disabled), .chat-send:active:not(:disabled) { transform: none; }
}

/* ===== Users — profile photo (same column the sidebar + chat avatars read) ===== */
.form-group-full { grid-column: 1 / -1; }

.dt-photo { width: 64px; text-align: center; }
.user-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    background: var(--bg-secondary);
    vertical-align: middle;
}

.user-photo-note { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.user-role-locked { padding: 10px 12px; border: 1px dashed var(--border-color); border-radius: 3px; font-size: 14px; color: var(--text-muted); }
.user-role-locked strong { color: var(--text-primary); }
.users-seats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.users-seats .val-box { font-weight: 700; }
.user-photo-row { display: flex; align-items: center; gap: 16px; }
.user-photo-preview {
    width: 74px; height: 74px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.user-photo-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.user-photo-remove {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 600; color: var(--danger);
    cursor: pointer;
}
/* beat .form-group input { width:100% } — a checkbox must stay a checkbox */
.user-photo-fields .user-photo-remove input {
    width: 16px; min-width: 16px; height: 16px;
    accent-color: var(--danger);
    cursor: pointer;
}
.user-photo-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }

body.dark-mode .user-avatar,
body.dark-mode .user-photo-preview { border-color: var(--input-border); }

@media (max-width: 560px) {
    .user-photo-row { flex-direction: column; align-items: flex-start; }
    .user-photo-fields { width: 100%; }
}

/* ===== Page head — ONE bar: title + breadcrumb line, actions on the right ===== */
/* the trail used to be a chip strip in its own bar above a second title bar. it now sits
   inside .header under the h1, so the page announces itself once, not three times.
   `> .header-page` (two classes) is deliberate: it has to outrank the legacy `.header > div`
   rules further up, which force text-align:right and a dark-mode colour meant for the old
   "Welcome, name" div. */
.header > .header-page {
    display: flex; flex-direction: column; gap: 9px;
    min-width: 0; width: auto; text-align: left; font-size: inherit;
}
/* explicit line-height: h1 default leading is font-dependent, so without it the gap under
   the title drifts between the 24 / 18 / 16px breakpoints. */
.header > .header-page h1 { margin: 0; min-width: 0; line-height: 1.25; }

/* no `display` here on purpose — body.page-chat .breadcrumb{display:none} still wins */
.breadcrumb.crumbs { flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; }
.breadcrumb.crumbs a,
.breadcrumb.crumbs .crumb-group,
.breadcrumb.crumbs .crumb-now {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0; background: none; border-radius: 0; line-height: 1; font-size: 13px;
}
.breadcrumb.crumbs a { color: var(--navy-accent); font-weight: 600; text-decoration: none; transition: color 0.2s; }
.breadcrumb.crumbs a:hover { color: var(--navy-primary); text-decoration: underline; }
.breadcrumb.crumbs a i, .breadcrumb.crumbs .crumb-group i { font-size: 11px; }
.breadcrumb.crumbs .crumb-group { color: var(--text-muted); font-weight: 500; }
.breadcrumb.crumbs .crumb-now { color: var(--text-primary); font-weight: 700; }
.breadcrumb.crumbs .crumb-sep { font-size: 9px; opacity: 0.55; color: var(--text-muted); }
body.dark-mode .breadcrumb.crumbs a:hover { color: #fff; }

.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.head-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 13px;
    border: 1px solid rgba(var(--navy-accent-rgb), 0.28); border-radius: 3px;
    background: rgba(var(--navy-accent-rgb), 0.10);
    color: var(--navy-accent);
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.head-btn i { font-size: 14px; }
.head-btn:hover { background: rgba(var(--navy-accent-rgb), 0.2); border-color: var(--navy-accent); }
.head-btn:active { transform: translateY(1px); }
.head-btn:focus-visible { outline: 2px solid var(--navy-accent); outline-offset: 2px; }
.head-btn.primary { background: var(--navy-accent); border-color: var(--navy-accent); color: #fff; }
.head-btn.primary:hover { filter: brightness(1.08); }
.head-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* ONE labelled action per page — the primary one. every other header button is icon-only
   (its title/aria-label carries the meaning), so the bar stays short and the page title and
   breadcrumb keep their room no matter how many exports a page ships. */
.head-btn { width: 38px; padding: 0; justify-content: center; }
.head-btn span { display: none; }
.head-btn.primary { width: auto; padding: 0 15px; }
.head-btn.primary span { display: inline; }
@media (max-width: 560px) {
    .head-btn.primary { width: 38px; padding: 0; }   /* phone: even the primary folds to its icon */
    .head-btn.primary span { display: none; }
}
@media (max-width: 768px) {
    .header { flex-wrap: wrap; gap: 12px; }
    .head-actions { width: 100%; justify-content: flex-start; }
    .header > .header-page { width: 100%; }
    .breadcrumb.crumbs { font-size: 11.5px; }
}

/* ================= Chip-row dense table — only applies to .chip-table ================= */
/* min-width is 1200px in the reference doc for 6-9 grouped columns; ours run 3-4, where 1200
   clips the last column instead of filling space — 900 still guarantees the chips their room */

/* Tabulator flavour — `.chip-table` goes on the container div Tabulator builds into.
   No min-width here on purpose: layout:'fitColumns' + a minWidth per grouped column lets
   Tabulator scroll its OWN holder when the viewport is tight, so the page never scrolls. */
.chip-table .tabulator-cell{ padding:6px 9px!important; font-size:12.5px; vertical-align:middle; }
.chip-table .tabulator-col-title{ padding:6px 2px!important; }
.chip-table .tabulator-row .tabulator-cell{ border-right:1px solid var(--border-light); }

/* status-tinted rows — !important beats Tabulator's row striping and hover */
.chip-table .tabulator-row.row-good .tabulator-cell{ background:#e9f7ef !important; }
.chip-table .tabulator-row.row-bad  .tabulator-cell{ background:#fdecea !important; }
.chip-table .tabulator-row.row-wait .tabulator-cell{ background:#fff7e0 !important; }
body.dark-mode .chip-table .tabulator-row.row-good .tabulator-cell{ background:#12301f !important; }
body.dark-mode .chip-table .tabulator-row.row-bad  .tabulator-cell{ background:#3a1a18 !important; }
body.dark-mode .chip-table .tabulator-row.row-wait .tabulator-cell{ background:#33290d !important; }
body.dark-mode .chip-table .tabulator-cell{ color:#cbd5e1; }

/* stacked chip rows in a cell */
.cell-stack{ display:flex; flex-direction:column; gap:3px; }
.chip-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:170px; white-space:nowrap; }

/* the chip (squared tag = icon + label) — uniform size so values align across rows */
.chip{ display:inline-flex; align-items:center; gap:5px; padding:0 8px; height:21px; min-width:104px; border-radius:3px; font-size:10.8px; font-weight:700; line-height:1; white-space:nowrap; border:1px solid transparent; flex:none; }
.chip i{ font-size:10px; width:11px; text-align:center; }
/* a palette class is expected, but a bare .chip must never render as invisible text */
.chip:not([class*="chip-"]){ background:var(--bg-secondary); color:var(--text-secondary); border-color:var(--border-color); }
.chip.is-btn{ cursor:pointer; }
.chip.is-btn:hover{ filter:brightness(.95); }

/* palettes — named by COLOUR/ROLE, never by domain */
.chip-navy   { background:#0b2545; color:#fff; }
.chip-green  { background:#1f9d57; color:#fff; }
.chip-teal   { background:#d4efef; color:#0d7878; border-color:#bbe6e6; }
.chip-link   { background:#e9f1fc; color:#0a66c2; border-color:#cfe0f7; }
.chip-soft-navy  { background:#e6edf6; color:#0b2545; border-color:#d3deec; }
.chip-soft-green { background:#e2f6ea; color:#1f8b4c; border-color:#c7eed6; }
.chip-soft-amber { background:#fdecd6; color:#c4701a; border-color:#f8dab4; }
.chip-soft-purple{ background:#ece2f9; color:#6a1b9a; border-color:#dccbf2; }
.chip-soft-tan   { background:#fbe7c6; color:#92520a; border-color:#f3d29b; }
.chip-soft-red   { background:#fdecea; color:#b3261e; border-color:#f6cfca; }
.chip-soft-teal  { background:#d9f2f2; color:#0d7878; border-color:#bbe6e6; }

/* solid palettes — the grouped tables use THESE. one saturated colour per label means the
   eye finds "Balance" or "Due" without reading, which is the whole point of chipping. */
.chip-blue   { background:#0a66c2; color:#fff; }
.chip-cyan   { background:#0d7878; color:#fff; }
.chip-amber  { background:#c4701a; color:#fff; }
.chip-purple { background:#6a1b9a; color:#fff; }
.chip-red    { background:#c0392b; color:#fff; }
.chip-tan    { background:#92520a; color:#fff; }
.chip-slate  { background:#44566c; color:#fff; }
/* white-on-solid: the icon inherits, and the value beside it must not fight the chip */
.chip-navy i, .chip-green i, .chip-blue i, .chip-cyan i,
.chip-amber i, .chip-purple i, .chip-red i, .chip-tan i, .chip-slate i { color: inherit; opacity: .9; }

/* values beside chips — pinned right */
.chip-row .val{ font-weight:800; font-size:12.5px; margin-left:auto; text-align:right; }
.val-amount{ color:#d35400; }   /* money */
.val-pos{ color:#1f8b4c; }      /* good / positive */
.val-neg{ color:#c0392b; }      /* bad / negative */
.val-navy{ color:#0b2545; }
.val-muted{ color:#9aa6b2; font-weight:700; }
.val-box{ background:#eef1f4; color:#33414f; padding:2px 7px; border-radius:3px; font-size:11px; font-weight:700; font-family:'Courier New',monospace; letter-spacing:.2px; }
.cell-title{ font-size:13px; font-weight:800; color:var(--navy-primary); margin-bottom:1px; }

/* media / thumbnail cell */
.media-stack{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:44px; }
.media-box{ width:36px; height:36px; border:1px solid #e2e6ea; border-radius:3px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.media-box img{ width:100%; height:100%; object-fit:cover; }
/* initials fallback when a row has no logo — same box, no broken-image glyph */
.media-box b{ font-size:12.5px; font-weight:800; letter-spacing:.3px; color:var(--navy-primary); }
body.dark-mode .media-box b{ color:var(--text-primary); }
body.dark-mode .media-box{ background:var(--bg-secondary); border-color:var(--border-color); }

/* squared action icons */
.actions-cell{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:nowrap; }
.act{ width:26px; height:26px; border:none; border-radius:3px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:12px; transition:all .2s; background:transparent; }
.act-info{ background:#1c2733; color:#fff; }
.act-info:hover{ background:#000; transform:scale(1.1); }
.act-edit{ color:#e8a200; font-size:15px; }
.act-del { color:#e23b2e; font-size:15px; }
.act-edit:hover,.act-del:hover{ transform:scale(1.18); }
.act[disabled]{ opacity:.32; cursor:not-allowed; }
.act[disabled]:hover{ transform:none; }

/* column helpers */

/* status-tinted rows — !important beats DataTables' own striping */

body.dark-mode .cell-title{ color:#e8edf3; }
body.dark-mode .val-box{ background:#2a3240; color:#cbd5e1; }
body.dark-mode .media-box{ background:#1e2430; border-color:#3a4454; }

/* import result popup — long skip lists stay readable */
.import-errors {
    max-height: 190px; overflow-y: auto; text-align: left;
    font-size: 12.5px; line-height: 1.7; color: var(--text-secondary);
    background: var(--bg-secondary); border-radius: 3px; padding: 10px 12px;
}


/* ===== AI settings card ===== */
.ai-model-row { display: flex; gap: 8px; align-items: center; }
.ai-model-row select { flex: 1; min-width: 0; }
.ai-model-row .btn { flex-shrink: 0; }
.ai-model-custom { margin-top: 8px; }
.ai-keys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 4px 0 18px; }
.ai-key-input { display: flex; gap: 8px; align-items: center; }
.ai-key-input input { flex: 1; min-width: 0; }
.ai-key-input .btn { flex-shrink: 0; }
.ai-key-link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--navy-accent); text-decoration: none; }
.ai-key-link:hover { text-decoration: underline; }
.ai-key-row label { display: flex; align-items: center; gap: 8px; }
.ai-test-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 16px; }
.ai-test-result { font-size: 13.5px; font-weight: 600; }
.ai-test-result.ok  { color: var(--success, #1f8b4c); }
.ai-test-result.bad { color: var(--danger); }
.field-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 768px) { .ai-keys { grid-template-columns: 1fr; } }

/* ===== AI Assistant page ===== */
/* the borrowed .chat-skel / .chat-none / .chat-banner helpers read these — point them at the navy palette */
body.page-ai {
    --wa-mut: var(--text-muted);
    --wa-txt: var(--text-primary);
    --wa-head: var(--bg-secondary);
    --wa-panel: var(--bg-card);
    --wa-line: var(--border-color);
}

.ai-wrap {
    display: grid; grid-template-columns: 300px 1fr;
    height: calc(100vh - 250px); min-height: 430px;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 3px;
    box-shadow: 0 2px 4px var(--shadow-color); overflow: hidden;
}

.ai-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--border-color); background: var(--bg-secondary); }
.ai-side-head { padding: 12px; border-bottom: 1px solid var(--border-color); }
.ai-convs { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; scrollbar-width: thin; }
.ai-side-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px; border-top: 1px solid var(--border-color);
    font-size: 12px; color: var(--text-muted);
}
.ai-quota { margin-left: auto; font-weight: 700; color: var(--navy-accent); }

.ai-conv {
    position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; margin-bottom: 4px; border: none; border-radius: 3px;
    background: transparent; color: var(--text-primary); font-family: inherit; text-align: left; cursor: pointer;
    transition: background 0.15s;
}
.ai-conv:hover { background: rgba(var(--navy-accent-rgb), 0.08); }
.ai-conv.active { background: rgba(var(--navy-accent-rgb), 0.14); box-shadow: inset 3px 0 0 var(--navy-accent); }
.ai-conv > i { color: var(--navy-accent); font-size: 13px; flex-shrink: 0; }
.ai-conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-conv-main strong { font-size: 13.2px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-conv-main em { font-style: normal; font-size: 11px; color: var(--text-muted); }
.ai-conv-del { flex-shrink: 0; padding: 4px 6px; border-radius: 3px; color: var(--text-muted); font-size: 12px; opacity: 0; transition: opacity 0.15s, color 0.15s; }
.ai-conv:hover .ai-conv-del { opacity: 1; }
.ai-conv-del:hover { color: var(--danger); background: rgba(234, 67, 53, 0.12); }

.ai-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-card); }
.ai-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; }

.ai-blank { margin: auto; text-align: center; max-width: 460px; padding: 20px; }
.ai-blank i {
    width: 88px; height: 88px; border-radius: 50%; margin-bottom: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 34px; color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), 0.12);
}
.ai-blank h3 { font-size: 21px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.ai-blank p { font-size: 14px; color: var(--text-muted); margin: 0; }
.ai-tips { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.ai-tip {
    padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 3px;
    background: var(--bg-secondary); color: var(--text-secondary);
    font-family: inherit; font-size: 13.2px; text-align: left; cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.ai-tip:hover { border-color: var(--navy-accent); color: var(--navy-accent); }

.ai-msg { display: flex; align-items: flex-start; gap: 11px; max-width: 84%; }
.ai-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.ai-avatar {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    background: rgba(var(--navy-accent-rgb), 0.14); color: var(--navy-accent);
}
.ai-msg.mine .ai-avatar { background: var(--navy-primary); color: #fff; }
.ai-avatar-bad { background: rgba(234, 67, 53, 0.14); color: var(--danger); }
.ai-bub {
    padding: 11px 14px; border-radius: 3px; font-size: 14px; line-height: 1.65;
    background: var(--bg-secondary); color: var(--text-primary);
    border: 1px solid var(--border-color); word-break: break-word; min-width: 0;
}
.ai-msg.mine .ai-bub { background: rgba(var(--navy-accent-rgb), 0.1); border-color: rgba(var(--navy-accent-rgb), 0.25); }
.ai-bub-bad { background: rgba(234, 67, 53, 0.08); border-color: rgba(234, 67, 53, 0.3); color: var(--danger); }
.ai-bub code { padding: 1px 5px; border-radius: 3px; background: rgba(var(--navy-primary-rgb), 0.09); font-family: 'Courier New', monospace; font-size: 12.5px; }
.ai-code {
    margin: 8px 0; padding: 11px 13px; border-radius: 3px; overflow-x: auto;
    background: var(--navy-primary); color: #e6edf6;
    font-family: 'Courier New', monospace; font-size: 12.5px; line-height: 1.55; white-space: pre;
}
.ai-meta { display: block; margin-top: 6px; font-size: 11px; color: var(--text-muted); }

/* thinking indicator — three dots while the model is composing */
.ai-dots { display: inline-flex; gap: 5px; padding: 3px 0; }
.ai-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--navy-accent); opacity: 0.4; animation: aiDot 1.2s infinite ease-in-out; }
.ai-dots i:nth-child(2) { animation-delay: 0.18s; }
.ai-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes aiDot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.ai-composer {
    display: flex; align-items: flex-end; gap: 10px; flex-shrink: 0;
    padding: 12px 16px; border-top: 1px solid var(--border-color); background: var(--bg-secondary);
}
.ai-composer textarea {
    flex: 1; resize: none; max-height: 160px; padding: 11px 14px;
    font-family: inherit; font-size: 16px; line-height: 21px;
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--input-border); border-radius: 3px;
}
.ai-composer textarea:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), 0.15); }
.ai-send {
    flex-shrink: 0; width: 44px; height: 44px; border: none; border-radius: 3px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--navy-accent); color: #fff; font-size: 16px;
    transition: filter 0.2s, transform 0.2s;
}
.ai-send:hover:not(:disabled) { filter: brightness(1.08); transform: scale(1.05); }
.ai-send:disabled { opacity: 0.6; cursor: not-allowed; }
.ai-composer-off { justify-content: center; gap: 8px; color: var(--text-muted); font-size: 13px; padding: 18px; }

@media (max-width: 900px) {
    .ai-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 230px); }
    .ai-side { border-right: none; border-bottom: 1px solid var(--border-color); max-height: 168px; }
    .ai-msg { max-width: 94%; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-dots i { animation: none; }
    .ai-send:hover:not(:disabled) { transform: none; }
}

/* Dark Mode — per-user access */
body.dark-mode .rbac-tabs { border-bottom-color: var(--border-color); }
body.dark-mode .rbac-tab { color: var(--text-muted); }
body.dark-mode .rbac-tab.active { color: #fff; border-bottom-color: var(--navy-accent); }
body.dark-mode .rbac-userbar { background: var(--bg-card); border-color: var(--border-color); }
body.dark-mode .rbac-userbar-main { color: var(--text-primary); }
body.dark-mode .rbac-ovr-chip { background: #3a2f00; color: #ffe69c; border-color: #5c4a00; }
body.dark-mode .rbac-ovr-chip.off { background: #10331f; color: #8fe0ac; border-color: #1d5836; }
body.dark-mode .rbac-empty { color: var(--text-muted); }

/* ============================================================
   INVOICING LAYER — Rameez Scripts
   Tabulator theme, searchable dropdown, 
   write overlay + read bar, document layout, item repeater.
   ============================================================ */

/* ---------- top loading bar: READS only ---------- */
#invBar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99999; background: transparent; pointer-events: none; opacity: 0; transition: opacity .2s; }
#invBar.on { opacity: 1; }
#invBar i { display: block; height: 100%; width: 40%; border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--navy-accent), var(--navy-light)); animation: invBarSlide 1.1s ease-in-out infinite; }
@keyframes invBarSlide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* ---------- processing overlay: WRITES only ---------- */
#invOverlay { position: fixed; inset: 0; z-index: 99998; display: none; align-items: center; justify-content: center;
    background: rgba(0, 21, 41, .55); backdrop-filter: blur(2px); }
#invOverlay.on { display: flex; }
#invOverlay .box { background: var(--bg-card); border-radius: 4px; padding: 28px 34px; min-width: 260px; text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
#invOverlay img { width: 54px; height: 54px; border-radius: 4px; object-fit: cover; margin-bottom: 14px; }
#invOverlay .lbl { font-weight: 600; color: var(--text-primary); margin-bottom: 12px; font-size: 14px; }
#invOverlay .trk { height: 4px; border-radius: 2px; background: var(--border-color); overflow: hidden; }
#invOverlay .trk i { display: block; height: 100%; width: 45%; background: var(--navy-accent); animation: invBarSlide 1s ease-in-out infinite; }

/* ---------- searchable dropdown (plain <select> is never shipped) ---------- */
.sd { position: relative; width: 100%; }
.sd-btn { width: 100%; display: flex; align-items: center; gap: 8px; justify-content: space-between; cursor: pointer; text-align: left;
    padding: 10px 12px; font-size: 14px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-secondary); color: var(--text-primary); }
.sd-btn:hover { border-color: var(--navy-accent); }
/* in a form the dropdown wears the input's skin — same font, padding, border, so it lines up with date/text boxes */
.form-group .sd-btn { padding: 14px 16px; font-family: inherit; font-size: 16px; line-height: normal; border: 1px solid var(--input-border);
    border-radius: 2px; background: var(--input-bg); transition: all .3s; }
.form-group .sd-btn,
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not(.toggle),
.form-group select { min-height: 52px; box-sizing: border-box; }   /* date boxes render ~2px taller natively — one floor for all */
@media (max-width: 768px) { .form-group .sd-btn { padding: 16px; border-radius: 6px; } }
.sd-btn .sd-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-btn .sd-val.ph { color: var(--text-muted); }
.sd-btn > i { color: var(--text-muted); font-size: 12px; flex: 0 0 auto; }
.sd.open .sd-btn { border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), .12); }
/* FIXED, not absolute. an absolutely-positioned popup is clipped by any scrolling ancestor,
   and this component lives inside `.table-responsive` (overflow-x:auto) and inside `.modal`
   (overflow-y:auto) — CSS forces the other axis to auto too, so the list was being cut off
   mid-option. fixed escapes every ancestor clip; invSelect() writes top/left/width from the
   button's rect on open and re-runs on scroll/resize. */
.sd-pop { position: fixed; z-index: 900; display: none; flex-direction: column;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 12px 28px var(--shadow-hover); }
.sd.open .sd-pop { display: flex; }
.sd.up .sd-pop { top: auto; }   /* exact offset comes from place() inline */
.sd-search { padding: 8px; border-bottom: 1px solid var(--border-light); }
.sd-search input { width: 100%; padding: 8px 10px; font-size: 14px; border: 1px solid var(--border-color); border-radius: 4px;
    background: var(--bg-secondary); color: var(--text-primary); }
.sd-list { max-height: 240px; overflow-y: auto; padding: 4px; }
.sd-opt { padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--text-primary);
    display: flex; align-items: center; gap: 8px; }
.sd-opt:hover, .sd-opt.hi { background: rgba(var(--navy-accent-rgb), .1); }
.sd-opt.sel { background: rgba(var(--navy-accent-rgb), .16); font-weight: 600; }
.sd-opt i.tick { margin-left: auto; color: var(--navy-accent); font-size: 12px; }
.sd-none { padding: 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sd-chips span { background: rgba(var(--navy-accent-rgb), .14); color: var(--navy-accent); border-radius: 3px; padding: 1px 6px; font-size: 12px; }
.sd-add { border-top: 1px solid var(--border-light); padding: 8px; }
.sd-add button { width: 100%; background: none; border: 1px dashed var(--border-color); border-radius: 4px; padding: 8px;
    color: var(--navy-accent); cursor: pointer; font-size: 13px; }
.sd-add button:hover { border-color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .06); }

/* ---------- status + role pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 3px; font-size: 11.5px; font-weight: 700;
    letter-spacing: .2px; text-transform: uppercase; white-space: nowrap; }
.pill-draft { background: #eceff1; color: #546e7a; }
.pill-sent, .pill-unpaid { background: #e3f2fd; color: #1565c0; }
.pill-accepted { background: #e3f6ec; color: #1b7a45; }
.pill-converted { background: #ede7f6; color: #5e35b1; }
.pill-issued, .pill-credit-note { background: #fdecec; color: #b3261e; }
.pill-declined { background: #eceff1; color: #546e7a; }
.pill-partial { background: #fff8e1; color: #ef6c00; }
.pill-paid, .pill-active { background: #e8f5e9; color: #2e7d32; }
.pill-overdue, .pill-expired, .pill-past_due { background: #ffebee; color: #c62828; }
.pill-cancelled { background: #f5f5f5; color: #9e9e9e; text-decoration: line-through; }
.pill-trial { background: #ede7f6; color: #5e35b1; }
.pill-low { background: #fff3e0; color: #e65100; }
.pill-out { background: #ffebee; color: #c62828; }
.pill-ok { background: #e8f5e9; color: #2e7d32; }
body.dark-mode .pill { filter: brightness(.92); }

/* ---------- Tabulator, navy-skinned ---------- */
.tabulator { background: transparent; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13.5px; }
.tabulator .tabulator-header { background: var(--navy-primary); color: #fff; border-bottom: 0; font-weight: 600; }
.tabulator .tabulator-header .tabulator-col { background: transparent; border-right: 1px solid rgba(255, 255, 255, .09); }
.tabulator .tabulator-header .tabulator-col-title { padding: 4px 0; white-space: normal; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { background: var(--navy-light); }
.tabulator-row { background: var(--bg-card); color: var(--text-primary); border-bottom: 1px solid var(--border-light); }
.tabulator-row.tabulator-row-even { background: var(--bg-secondary); }
.tabulator-row:hover { background: rgba(var(--navy-accent-rgb), .07) !important; }
.tabulator-row.tabulator-selected { background: rgba(var(--navy-accent-rgb), .14) !important; }
.tabulator-row .tabulator-cell { border-right: 1px solid var(--border-light); padding: 9px 10px; }
.tabulator .tabulator-footer { background: var(--bg-secondary); color: var(--text-secondary); border-top: 1px solid var(--border-color); }
.tabulator .tabulator-footer .tabulator-page { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 3px; }
.tabulator .tabulator-footer .tabulator-page.active { background: var(--navy-primary); color: #fff; border-color: var(--navy-primary); }
.tabulator .tabulator-footer .tabulator-page:disabled { opacity: .45; }
.tabulator-row .tabulator-responsive-collapse { border-top: 1px solid var(--border-light); padding: 6px 10px; }
.tabulator-row .tabulator-responsive-collapse table td { padding: 3px 6px; font-size: 13px; }
.tabulator .tabulator-tableholder .tabulator-placeholder span { color: var(--text-muted); font-size: 14px; font-weight: 500; }
.tabulator-menu { background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 8px 22px var(--shadow-hover); }
.tabulator-menu .tabulator-menu-item:hover { background: rgba(var(--navy-accent-rgb), .1); }
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle { padding: 0; }
.tab-num { text-align: right; font-variant-numeric: tabular-nums; }
.tab-neg { color: var(--danger); }
.tab-pos { color: var(--success); }
.tab-mut { color: var(--text-muted); }
.tab-act { display: inline-flex; gap: 4px; }
.tab-act button { border: 0; background: transparent; cursor: pointer; padding: 5px 7px; border-radius: 3px; color: var(--text-secondary); font-size: 13px; }
.tab-act button:hover { background: rgba(var(--navy-accent-rgb), .12); color: var(--navy-accent); }
.tab-act button.del:hover { background: rgba(234, 67, 53, .12); color: var(--danger); }
.tab-id { display: flex; align-items: center; gap: 9px; }
.tab-id .av { width: 30px; height: 30px; border-radius: 4px; background: var(--navy-primary); color: #fff; display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: 12px; flex: 0 0 30px; }
.tab-id .tx b { display: block; font-weight: 600; line-height: 1.25; }
.tab-id .tx small { color: var(--text-muted); font-size: 11.5px; }
.row-overdue { border-left: 3px solid var(--danger); }
.row-draft { border-left: 3px solid #b0bec5; }
.row-paid { border-left: 3px solid var(--success); }

/* ---------- bulk action bar ---------- */
.inv-bulk { display: none; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; border-radius: 4px;
    background: rgba(var(--navy-accent-rgb), .1); border: 1px solid rgba(var(--navy-accent-rgb), .3); }
.inv-bulk.on { display: flex; }
.inv-bulk .cnt { font-weight: 700; color: var(--navy-accent); }

/* ---------- list-view toolbar — search + selects + popovers + columns + reset ---------- */
/* replaces the .filters-section card: same filters in one compact row, with the table's own
   Columns / Reset controls beside them instead of a separate panel above the page. */
.inv-tbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.inv-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.inv-tools .sd { width: auto; min-width: 172px; }   /* searchable dropdowns are 100% wide in forms */

.inv-search { position: relative; display: flex; align-items: center; }
.inv-search > i { position: absolute; left: 12px; font-size: 13px; color: var(--text-muted); pointer-events: none; }
.inv-search input {
    width: 280px; max-width: 100%; height: 40px; padding: 0 12px 0 34px;
    font-family: inherit; font-size: 14px; color: var(--text-primary);
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 4px;
}
.inv-search input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), .12); }

.inv-tbtn {
    display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap;
    color: var(--text-primary); background: var(--bg-secondary);
    border: 1px solid var(--border-color); border-radius: 4px; transition: border-color .2s, color .2s;
}
.inv-tbtn:hover { border-color: var(--navy-accent); color: var(--navy-accent); }
.inv-tbtn.ghost { width: 100%; justify-content: center; background: none; height: 36px; }
.inv-dot {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--navy-accent); color: #fff; font-size: 11px; font-weight: 700;
}

.inv-pop { position: relative; }
.inv-pop-menu {
    position: absolute; z-index: 60; top: calc(100% + 4px); right: 0; display: none; min-width: 236px; padding: 12px;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 12px 28px var(--shadow-hover);
}
.inv-pop.open .inv-pop-menu { display: block; }
.inv-pop-h { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 9px; }
.inv-pop-menu label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; font-size: 13.5px; color: var(--text-secondary); }
.inv-pop-menu label input[type="date"] {
    width: 148px; padding: 7px 9px; font-family: inherit; font-size: 13px;
    color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 4px;
}
.inv-chk { display: flex; align-items: center; gap: 9px; padding: 6px 2px; font-size: 13.5px; color: var(--text-primary); cursor: pointer; }
.inv-chk input { width: 15px; height: 15px; accent-color: var(--navy-accent); cursor: pointer; }
.inv-tcount { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 768px) {
    .inv-tbar { flex-direction: column; align-items: stretch; }
    .inv-tbar .inv-tools { justify-content: flex-start; }
    .inv-search, .inv-search input, .inv-tools .sd { width: 100%; }
    .inv-pop-menu { right: auto; left: 0; }
}

/* ---------- KPI strip ---------- */
.inv-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.inv-kpi > * { min-width: 0; }
/* fixed 2-up card row for charts/lists — auto-fit gave a 5-across grid where a chart card
   ended up a fifth of the width. */
.inv-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.inv-grid-2 > * { min-width: 0; }
.span-all { grid-column: 1 / -1; }
/* chart.js runs with maintainAspectRatio:false, which means it sizes the canvas to its
   PARENT. give it a parent with a real height or the canvas keeps growing into whatever
   room the layout will give it (that is the 600px-tall "Signups per month" bug). the
   canvas height="" attribute is ignored entirely once responsive sizing takes over. */
.chart-box { position: relative; box-sizing: border-box; width: 100%; height: 300px; }
.chart-box.sm { height: 250px; }
.chart-box > canvas { display: block; }
@media (max-width: 576px) { .chart-box { height: 240px; } .chart-box.sm { height: 220px; } }

/* dashboard cards: one padding value for chart + list cards, grid gap owns the spacing,
   and the preview lists cap at the chart height so a pair of cards always matches. */
.inv-grid-2 > .lte-card { padding: 14px; margin-bottom: 0; }
.inv-grid-2 > .lte-card > .section-header { margin-bottom: 12px; }
.inv-grid-2 .about-table-wrapper { max-height: 300px; overflow: auto; }
@media (max-width: 900px) { .inv-grid-2 { grid-template-columns: minmax(0, 1fr); } }

.info-box { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 76px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; padding: 14px; }
.info-box .tx { min-width: 0; }
.info-box .tx span, .info-box .tx b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-box .ic { width: 44px; height: 44px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; flex: 0 0 44px; }
.info-box .ic.navy { background: var(--navy-primary); } .info-box .ic.blue { background: var(--navy-accent); }
.info-box .ic.green { background: var(--success); } .info-box .ic.amber { background: var(--warning); } .info-box .ic.red { background: var(--danger); }
.info-box .tx span { display: block; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.info-box .tx b { font-size: 19px; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ---------- document layout (invoice / purchase / statement) ---------- */
/* ---------- A4 document (invoice / purchase / public link) — always paper, both themes ---------- */
.inv-doc { --text-primary: #111827; --text-secondary: #4b5563; --text-muted: #8a94a3; --bg-card: #fff; --bg-primary: #f4f6f9;
    --border-color: #d9dee6; --border-light: #eceff3; --ink: var(--navy-primary, #001f3f); --acc: var(--navy-accent, #0074D9);
    position: relative; overflow: hidden; background: #fff; color: var(--text-primary); max-width: 820px; margin: 0 auto;
    padding: 46px 48px 28px; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 12px 32px rgba(15, 23, 42, .10);
    font-size: 13px; line-height: 1.45; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv-doc address { font-style: normal; }

/* header */
.pd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); }
.pd-co { display: flex; gap: 14px; align-items: flex-start; max-width: 58%; min-width: 0; }
.pd-co img { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; flex: none; }
.pd-mark { width: 56px; height: 56px; flex: none; border-radius: 10px; background: var(--ink); color: #fff; font-size: 1.45em; font-weight: 800;
    display: flex; align-items: center; justify-content: center; letter-spacing: .5px; }
.pd-co address { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-co address b { font-size: 1.45em; font-weight: 800; color: var(--ink); letter-spacing: -.2px; margin-bottom: 3px; }
.pd-co address small { font-size: .88em; color: var(--text-secondary); line-height: 1.5; }
.pd-title { text-align: right; }
.pd-h { display: block; font-size: 2.35em; font-weight: 300; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); line-height: 1; }
.pd-no { display: block; margin: 7px 0 10px; font-size: 1.02em; font-weight: 700; color: var(--acc); }
.pd-title dl { display: grid; grid-template-columns: auto auto; gap: 3px 14px; margin: 0; justify-content: end; font-size: .9em; }
.pd-title dt { color: var(--text-muted); text-align: right; }
.pd-title dd { margin: 0; font-weight: 700; color: var(--text-primary); text-align: right; }
.pd-pill { font-style: normal; font-size: .8em; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 3px;
    background: #eef1f5; color: #44566c; }
.pd-paid { background: #e3f6ec; color: #1b7a45; } .pd-overdue { background: #fde8e6; color: #b3261e; }
.pd-partial { background: #fff1e0; color: #a35a00; } .pd-sent, .pd-unpaid { background: #e3eefc; color: #0a5bb5; }

/* bill-to / details / balance */
.pd-info { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin: 20px 0 22px; }
.pd-box { border: 1px solid var(--border-color); border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-box > small, .pd-due > small, .pd-notes small { display: block; font-size: .72em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 5px; }
.pd-party { font-size: 1.12em; color: var(--text-primary); margin-bottom: 3px; }
.pd-party em { font-style: normal; font-size: .7em; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: var(--bg-primary);
    color: var(--text-secondary); vertical-align: 2px; font-family: 'Courier New', monospace; }
.pd-box address { font-size: .9em; color: var(--text-secondary); line-height: 1.5; overflow-wrap: anywhere; }
.pd-box table { width: 100%; border-collapse: collapse; font-size: .9em; }
.pd-box td { padding: 3px 0; color: var(--text-secondary); border-bottom: 1px dashed var(--border-light); }
.pd-box tr:last-child td { border-bottom: 0; }
.pd-box td:last-child { text-align: right; font-weight: 600; color: var(--text-primary); }
.pd-due { border-radius: 6px; padding: 14px 16px; background: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.pd-due > small { color: rgba(255, 255, 255, .72); }
.pd-due b { color: #fff; font-size: 1.85em; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-due em { font-style: normal; font-size: .82em; color: rgba(255, 255, 255, .85); }
.pd-due.late { background: linear-gradient(135deg, #8f1d1d, #c62828); }
.pd-due.clear { background: #eaf7ef; border: 1px solid #bfe6cf; }
.pd-due.clear > small, .pd-due.clear em { color: #1b7a45; } .pd-due.clear b { color: #15803d; }

/* hidden details / balance boxes hand their width back to Bill To */
.pd-info.n1 { grid-template-columns: 1.4fr 1fr; }
.pd-info.n0 { grid-template-columns: minmax(0, 1fr); }

/* how to pay: bank + chosen methods left, QR right */
.pd-pay { flex-direction: row; gap: 14px; align-items: flex-start; }
.pd-pay-main { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.pd-pay-main > small { display: block; font-size: .72em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: -1px; }
.pd-pay .pd-bank { font-size: .9em; color: var(--text-secondary); line-height: 1.5; }
.pd-bank + .pd-method, .pd-method + .pd-method { padding-top: 6px; border-top: 1px dashed var(--border-light); }
.pd-method b { display: flex; align-items: center; gap: 6px; font-size: .92em; color: var(--text-primary); }
.pd-method b i { width: 16px; text-align: center; color: var(--acc); font-size: .95em; }
.pd-method address { font-size: .85em; color: var(--text-secondary); line-height: 1.45; margin-left: 22px; }
.pd-pay em { font-style: normal; font-size: .82em; color: var(--text-muted); }
.pd-pay em b { color: var(--text-primary); }
.pd-qr { flex: none; width: 104px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.pd-qr span { display: block; width: 104px; height: 104px; padding: 6px; border: 1px solid var(--border-color); border-radius: 6px; background: #fff; }
.pd-qr span svg { display: block; width: 100%; height: 100%; }
.pd-qr figcaption { font-size: .72em; line-height: 1.3; color: var(--text-muted); }

/* line items */
.pd-lines { width: 100%; border-collapse: collapse; table-layout: fixed; border-bottom: 2px solid var(--ink); }
.inv-doc .x-dl, .inv-doc .x-meta, .pd-lines tr.x-fill { display: none; }   /* template-only rows */
.pd-lines .w-i { width: 42px; } .pd-lines .w-q { width: 9%; } .pd-lines .w-p { width: 16%; } .pd-lines .w-t { width: 9%; } .pd-lines .w-a { width: 17%; }
.pd-lines thead { display: table-header-group; }
.pd-lines th { background: var(--ink); color: #fff; font-size: .74em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 9px 10px; text-align: left; }
.pd-lines th:first-child { border-radius: 4px 0 0 4px; } .pd-lines th:last-child { border-radius: 0 4px 4px 0; }
.pd-lines td { padding: 10px; border-bottom: 1px solid var(--border-light); vertical-align: top; color: var(--text-primary); overflow-wrap: anywhere; }
.pd-lines tbody tr:nth-child(even) td { background: #f8fafc; }
.pd-lines tr { break-inside: avoid; page-break-inside: avoid; }
.pd-lines td.i { color: var(--text-muted); font-size: .85em; padding-top: 12px; font-variant-numeric: tabular-nums; }
.pd-lines td b { display: block; font-weight: 600; color: var(--text-primary); }
.pd-lines td small { display: block; font-size: .8em; color: var(--text-muted); margin-top: 2px; }
.pd-lines .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-lines td.a { font-weight: 700; }

/* words + bank left, totals right */
.pd-close { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; margin-top: 18px; align-items: start; break-inside: avoid; page-break-inside: avoid; }
.pd-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pd-words b { font-size: .95em; font-weight: 600; color: var(--text-primary); }
.pd-bank em { font-style: normal; font-size: .82em; color: var(--text-muted); margin-top: 5px; }
.pd-bank em b { color: var(--text-primary); }
.pd-sum { width: 100%; border-collapse: collapse; font-size: .95em; }
.pd-sum td { padding: 7px 12px; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); }
.pd-sum td:last-child { text-align: right; font-weight: 600; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-sum tr.tot td { background: var(--ink); color: #fff; font-weight: 800; font-size: 1.1em; padding: 10px 12px; border: 0; }
.pd-sum tr.paid td:last-child { color: #15803d; }
.pd-sum tr.due td { font-weight: 800; font-size: 1.05em; color: #b3261e; background: #fdf1ef; border-bottom: 2px solid #b3261e; }
.pd-sum tr.due.clear td { color: #15803d; background: #eaf7ef; border-bottom-color: #15803d; }

/* notes, signatures, footer */
.pd-notes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 22px; margin-top: 22px; padding-top: 16px;
    border-top: 1px solid var(--border-light); break-inside: avoid; }
.pd-notes address { font-size: .9em; color: var(--text-secondary); line-height: 1.55; }
.pd-sign { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 46px; break-inside: avoid; page-break-inside: avoid; }
.pd-sign b { display: block; min-height: 1.6em; padding-bottom: 4px; border-bottom: 1px solid #9aa4b2; text-align: center; font-weight: 600; color: var(--text-primary); }
.pd-sign small { display: block; margin-top: 5px; text-align: center; font-size: .74em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.pd-end { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--border-light); text-align: center; }
.pd-end b { font-size: .98em; color: var(--ink); }
.pd-end small { font-size: .78em; color: var(--text-muted); }

/* status watermark */
.pd-stamp { position: absolute; top: 44%; left: 50%; z-index: 2; transform: translate(-50%, -50%) rotate(-22deg); pointer-events: none; white-space: nowrap;
    font-size: 7em; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; padding: 0 .3em; border-radius: 16px;
    color: rgba(22, 163, 74, .12); border: 8px solid rgba(22, 163, 74, .14); }
.st-cancelled .pd-stamp { color: rgba(107, 114, 128, .14); border-color: rgba(107, 114, 128, .16); }
.st-draft .pd-stamp { color: rgba(10, 91, 181, .09); border-color: rgba(10, 91, 181, .11); }

/* ---------- line item repeater (invoice / purchase form) ---------- */
.inv-items { width: 100%; border-collapse: collapse; }
.inv-items th { background: var(--bg-secondary); color: var(--text-secondary); text-align: left; padding: 9px 8px; font-size: 12px;
    text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.inv-items td { padding: 6px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.inv-items input, .inv-items .sd-btn { padding: 8px 9px; font-size: 13.5px; }
.inv-items input { width: 100%; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-secondary); color: var(--text-primary); }
.inv-items input:focus { outline: none; border-color: var(--navy-accent); }
.inv-items .r input { text-align: right; }
.inv-items .lt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-items .x button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 7px; border-radius: 3px; }
.inv-items .x button:hover { background: rgba(234, 67, 53, .12); color: var(--danger); }
.inv-items col.c-prod { width: 24%; } .inv-items col.c-desc { width: 26%; } .inv-items col.c-qty { width: 9%; }
.inv-items col.c-price { width: 13%; } .inv-items col.c-tax { width: 14%; } .inv-items col.c-tot { width: 11%; } .inv-items col.c-x { width: 3%; }
.inv-addline { margin-top: 10px; }
.inv-disc { display: flex; gap: 6px; align-items: center; }
.inv-disc select, .inv-disc input { padding: 5px 7px; font-size: 13px; border: 1px solid var(--border-color); border-radius: 3px;
    background: var(--bg-card); color: var(--text-primary); width: 88px; }

/* ---------- allocation table (payments) ---------- */
/* ---------- payment modal: form left, live receipt right ---------- */
.pay-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); gap: 28px; align-items: start; }
.pay-form { min-width: 0; }
.pay-prev { position: sticky; top: 0; min-width: 0; padding: 14px; border-radius: 8px; background: var(--bg-primary); border: 1px solid var(--border-color); }
.pay-prev-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pay-prev-h span { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.pay-prev-h span i { color: var(--navy-accent); margin-right: 4px; }
.pay-prev-h em { font-style: normal; font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.pay-prev-h em i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }

/* apply-to-documents block */
.pay-alloc-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0 12px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.pay-alloc-h b { display: flex; align-items: center; gap: 8px; font-size: 15.5px; color: var(--text-primary); }
.pay-alloc-h b i { color: var(--navy-accent); }
.pay-alloc-h small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }
.pay-auto { display: flex; align-items: center; gap: 10px; flex: none; cursor: pointer; padding: 8px 12px; border: 1px solid var(--border-color);
    border-radius: 6px; background: var(--bg-secondary); }
.pay-auto span { font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.pay-alloc { width: 100%; border: 1px solid var(--border-color); border-radius: 6px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.pay-alloc th { background: var(--bg-primary); padding: 10px 12px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--text-muted); text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.pay-alloc td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); font-size: 13.5px; color: var(--text-primary); vertical-align: middle; }
.pay-alloc tbody tr:last-child td { border-bottom: 0; }
.pay-alloc tbody tr:hover td { background: rgba(var(--navy-accent-rgb), .04); }
.pay-alloc .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-doc a { color: var(--text-primary); font-weight: 700; font-family: 'Courier New', monospace; font-size: 13px; text-decoration: none;
    border-bottom: 1px dashed rgba(var(--navy-accent-rgb), .8); }
.pay-doc a:hover { color: var(--navy-accent); border-bottom-style: solid; }
.pay-due { white-space: nowrap; color: var(--text-secondary); }
.pay-due.late { color: var(--danger); font-weight: 600; }
.pay-due em { font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 6px; border-radius: 3px;
    margin-left: 4px; background: #fde8e6; color: #b3261e; }
.pay-bal { font-weight: 600; }
.pay-in { display: inline-flex; align-items: center; gap: 6px; }
.pay-in input { width: 120px; height: 36px; text-align: right; padding: 6px 10px; font-size: 14px; border: 1px solid var(--input-border, var(--border-color));
    border-radius: 4px; background: var(--input-bg, var(--bg-secondary)); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pay-in input:focus { outline: 0; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), .15); }
.pay-full { height: 36px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-card); color: var(--text-secondary);
    font-size: 12px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.pay-full:hover { border-color: var(--navy-accent); color: var(--navy-accent); }
.pay-none { text-align: center; padding: 18px 12px !important; color: var(--text-muted); }
.pay-none i { color: #16a34a; margin-right: 6px; }
.pay-tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 8px; }
.pay-tally > div { --c: #64748b; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border-light); border-left: 4px solid var(--c); background: var(--bg-secondary); min-width: 0; }
.pay-tally span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.pay-tally span i { color: var(--c); margin-right: 3px; }
.pay-tally b { display: block; margin-top: 3px; font-size: 17px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pay-tally > div:first-child { --c: #2563eb; }
.pay-tally > div:nth-child(2) { --c: #7c3aed; }
.pay-tally > div.ok { --c: #16a34a; } .pay-tally > div.ok b { color: #15803d; }
.pay-tally > div.warn { --c: #d97706; } .pay-tally > div.warn b { color: #b45309; }
.pay-tally > div.bad { --c: #dc2626; } .pay-tally > div.bad b { color: #dc2626; }
body.dark-mode .pay-tally > div.ok b { color: #5fd68e; } body.dark-mode .pay-tally > div.warn b { color: #f5b964; } body.dark-mode .pay-tally > div.bad b { color: #ff7b72; }

/* compact paper receipt — reuses the A4 doc skin */
.inv-doc.rcp { max-width: none; padding: 22px 22px 18px; font-size: 12px; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.rcp .pd-head { padding-bottom: 12px; }
.rcp .pd-co { max-width: 62%; }
.rcp .pd-mark { width: 44px; height: 44px; font-size: 1.25em; }
.rcp .pd-co img { width: 48px; height: 48px; }
.rcp .pd-h { font-size: 1.85em; }
.rcp .pd-no { margin: 5px 0 6px; }
.rcp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 14px 0; }
.rcp-ph { color: var(--text-muted) !important; font-weight: 500; }
.rcp .pd-due b { font-size: 1.75em; white-space: normal; overflow-wrap: anywhere; }
.rcp .pd-due em { line-height: 1.35; }
.rcp .pd-due.rcp-zero { background: #eef1f5; } .rcp .pd-due.rcp-zero small, .rcp .pd-due.rcp-zero em { color: var(--text-muted); } .rcp .pd-due.rcp-zero b { color: var(--text-secondary); }
.rcp-lines th, .rcp-lines td { padding: 7px 8px; }
.rcp-lines tr.rcp-acc td { background: #fff8eb; color: #92520a; }
.rcp-lines tr.rcp-acc td b { display: inline; color: #92520a; }
.rcp-empty { text-align: center; color: var(--text-muted) !important; font-style: italic; }
.rcp-sign { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }

@media (max-width: 1100px) {
    .pay-split { grid-template-columns: 1fr; }
    .pay-prev { position: static; }
}
@media (max-width: 600px) {
    .pay-alloc-h { flex-direction: column; align-items: flex-start; }
    .pay-tally { grid-template-columns: 1fr; }
    .rcp-top { grid-template-columns: 1fr; }
    .pay-in input { width: 96px; }
}

/* ---------- ledger + report helpers ---------- */
.inv-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border-color); margin-bottom: 18px; }
.inv-tabs button { border: 0; background: transparent; padding: 10px 15px; cursor: pointer; font-size: 13.5px; font-weight: 600;
    color: var(--text-secondary); border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px; }
.inv-tabs button:hover { color: var(--navy-accent); }
.inv-tabs button.on { color: var(--navy-accent); border-bottom-color: var(--navy-accent); }
.inv-sum { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 4px; margin-bottom: 16px; }
.inv-sum div span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.inv-sum div b { font-size: 17px; font-variant-numeric: tabular-nums; }
.inv-empty { text-align: center; padding: 46px 20px; color: var(--text-muted); }
.inv-empty i { font-size: 40px; opacity: .35; display: block; margin-bottom: 12px; }
.inv-empty b { display: block; color: var(--text-secondary); font-size: 15px; margin-bottom: 4px; }
.inv-skel { height: 38px; border-radius: 4px; margin-bottom: 8px; background: linear-gradient(90deg, var(--border-light) 25%, var(--border-color) 37%, var(--border-light) 63%);
    background-size: 400% 100%; animation: invSkel 1.3s ease infinite; }
@keyframes invSkel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.inv-meter { height: 6px; border-radius: 3px; background: var(--border-light); overflow: hidden; margin-top: 5px; }
.inv-meter i { display: block; height: 100%; background: var(--navy-accent); }
.inv-meter i.warn { background: var(--warning); } .inv-meter i.bad { background: var(--danger); }
.inv-hint { color: var(--text-muted); font-size: 12.5px; margin-top: 4px; display: block; }

/* keep the DaisyUI-style toggle 44px wide — the form rule would otherwise stretch it */
.toggle {
    appearance: none; -webkit-appearance: none;
    width: 44px; height: 24px; padding: 0; border: none; outline: none; border-radius: 24px;
    background: #ccc; position: relative; cursor: pointer; vertical-align: middle;
    /* `flex: none`, never `0 0 44px`: flex-basis sizes the MAIN axis, and in a column-direction
       flex parent (the chipped table cell) that is the HEIGHT — the switch turned into a
       44px green square. `none` means "use my own width/height, don't grow or shrink", which
       is right in both directions. */
    flex: none; transition: background .3s;
}
.toggle:checked { background: var(--navy-accent); }
.toggle::before {
    content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .3s;
}
.toggle:checked::before { transform: translateX(20px); }
.toggle:disabled { opacity: .55; cursor: not-allowed; }
.toggle:focus-visible { box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), .3); }
.form-group .toggle, .toggle-row .toggle, .inv-items .toggle { width: 44px; min-width: 44px; max-width: 44px; height: 24px; flex: none; padding: 0; }

/* screen only — an A4 print viewport is ~700px and must not pick up the phone layout */
@media screen and (max-width: 768px) {
    .inv-doc { padding: 26px 16px 20px; font-size: 12.5px; }
    .pd-head { flex-direction: column; }
    .pd-co { max-width: none; }
    .pd-title, .pd-title dt, .pd-title dd { text-align: left; }
    .pd-title dl { justify-content: start; }
    .pd-info, .pd-info.n1, .pd-close { grid-template-columns: 1fr; }
    .pd-notes { grid-auto-flow: row; }
    .pd-sign { gap: 12px; }
    .pd-lines .w-i { width: 26px; } .pd-lines .w-q { width: 11%; } .pd-lines .w-p, .pd-lines .w-a { width: 22%; }
    .pd-lines th, .pd-lines td { padding: 8px 5px; }
    .pd-stamp { font-size: 4em; }
}
@media (max-width: 768px) {
    .inv-items col.c-prod, .inv-items col.c-desc { width: auto; }
}

@media print {
    .sidebar, .mobile-menu, .breadcrumb, .header, .inv-tbar, .inv-bulk, #invBar, #invOverlay, .no-print { display: none !important; }
    .main-content, .app-container { margin: 0 !important; padding: 0 !important; display: block !important; }
    .inv-doc { border: 0; border-radius: 0; box-shadow: none; padding: 0; max-width: none; margin: 0; font-size: 9.4pt; }
    .public-wrap { padding: 0; max-width: none; }
    body { background: #fff !important; }
}

.tab-tog { pointer-events: none; }

/* an author `display:` beats the UA `[hidden]{display:none}` — without this the filter
   badge sat there reading "0" whenever no extra filter was set. */
.inv-dot[hidden] { display: none; }

/* ---------- Tabulator footer + in-cell controls ---------- */
.tabulator .tabulator-footer .tabulator-paginator { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* the page-size control ships as a raw native select — repaint it in the theme */
.tabulator .tabulator-footer .tabulator-page-size {
    height: 32px; margin: 0 4px; padding: 0 26px 0 10px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary);
    background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px;
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.tabulator .tabulator-footer .tabulator-page-size:focus { outline: none; border-color: var(--navy-accent); }
/* :not(.toggle) — otherwise this squashes the 44x24 Live switch down to a 16px box */
.tabulator .tabulator-cell input[type="checkbox"]:not(.toggle),
.tabulator .tabulator-col input[type="checkbox"]:not(.toggle) {
    width: 16px; height: 16px; margin: 0; accent-color: var(--navy-accent); cursor: pointer;
}

/* invTable sets columnDefaults.vertAlign:'middle', and Tabulator writes that onto the cell
   element as an INLINE display:inline-flex — which laid a row's title and its chip stack out
   SIDE BY SIDE instead of stacked, and left every chip starting at a different x because the
   title widths differ. Only !important beats an inline style. flex-direction:column restores
   the stack and still centres a one-line cell vertically. */
/* inline-flex, NOT flex. Tabulator lays cells out as inline-block boxes with JS-set widths —
   a block-level `display:flex` takes them out of that inline flow and every cell drops onto
   its own line, exploding one row to ~600px tall. inline-flex keeps the cell inline-level
   (exactly what Tabulator's own vertAlign:'middle' uses) and only the AXIS changes: column
   direction stacks title over chip rows, justify-content centres them vertically. */
.chip-table .tabulator-cell {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;          /* main axis is now VERTICAL -> this centres the block */
    align-items: flex-start !important;
}
.chip-table .tabulator-cell > .cell-title,
.chip-table .tabulator-cell > .cell-stack { width: 100%; }
/* align-items had to be forced: Tabulator writes `align-items:center` inline for vertAlign
   'middle', and once the direction is column that centres items HORIZONTALLY — which is why
   the chip stack (capped at 340px) sat ~170px in from the title instead of under it.
   Single-value cells opt back into centring one by one. */
.chip-table .tabulator-cell > .pill,
.chip-table .tabulator-cell > .tab-act,
.chip-table .tabulator-cell > .actions-cell,
.chip-table .tabulator-cell > .media-stack,
.chip-table .tabulator-cell > input,
.chip-table .tabulator-cell > .tab-mut,
.chip-table .tabulator-cell > .val-muted { align-self: center; }

/* every chip column reads the same: chip pinned to the LEFT edge, value pinned to the RIGHT edge,
   empty space between — the stack spans the full cell, no cap */
.tabulator-cell .cell-stack { width: 100%; max-width: none; gap: 6px; }
.chip-table .chip-row { width: 100%; }
.chip-table .chip-row .val { margin-left: auto; text-align: right; display: inline-flex; justify-content: flex-end; }
/* no sideways scroller — overflow folds into the collapse row instead */
.chip-table .tabulator-tableholder { overflow-x: hidden !important; }
.chip-table .tabulator-responsive-collapse { padding: 8px 12px; border-top: 1px dashed var(--border-light); }
.chip-table .tabulator-responsive-collapse table { width: 100%; }
.chip-table .tabulator-responsive-collapse td { padding: 4px 6px; vertical-align: top; }
.chip-table .tabulator-responsive-collapse td:first-child { font-weight: 700; color: var(--text-muted); white-space: nowrap; width: 1%; }
.tabulator-cell .chip-row { min-width: 0; }
.chip-table .cell-title { margin-bottom: 6px; line-height: 1.3; }
.chip-table .chip-row .val { font-variant-numeric: tabular-nums; }   /* digits line up down the column */
.usage-row { display: flex; flex-direction: column; gap: 3px; }
.usage-row .inv-meter { margin-top: 0; }
.modal-header .head-actions { display: flex; gap: 4px; align-items: center; }

/* public invoice link — standalone page, no app chrome */
body.public-doc { background: var(--bg-primary); padding: 0; }
.public-wrap { max-width: 940px; margin: 0 auto; padding: 24px 16px 48px; }
.public-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; padding: 12px 16px; }
.public-bar span { color: var(--text-secondary); font-size: 13.5px; }
.public-foot { text-align: center; color: var(--text-muted); font-size: 13px; margin-top: 22px; }

/* wider modal for the payment allocation table + ledger adjustments */
.modal.modal-lg { max-width: 760px; }

/* welcome tour */
.tour-body { text-align: center; padding: 18px 10px 6px; }
.tour-icon { font-size: 42px; color: var(--navy-accent); display: block; margin-bottom: 14px; }
.tour-body h4 { margin: 0 0 8px; font-size: 19px; color: var(--text-primary); }
.tour-body p { margin: 0; color: var(--text-secondary); line-height: 1.65; }
.tour-dots { display: flex; justify-content: center; gap: 7px; margin: 18px 0 4px; }
.tour-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border-color); }
.tour-dots span.on { background: var(--navy-accent); width: 22px; border-radius: 4px; }
.small-box.bg-danger { background: var(--danger); }

/* sidebar section labels for the flat daily-use groups */
.sidebar-menu .sb-section { display: flex; align-items: center; gap: 9px; padding: 14px 18px 6px; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, .45); pointer-events: none; }
.sidebar-menu .sb-section i { font-size: 11px; }
.sidebar.collapsed .sidebar-menu .sb-section span { display: none; }
.sidebar.collapsed .sidebar-menu .sb-section { justify-content: center; padding: 12px 0 4px; }

/* signup: business name + currency pair */
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--text-muted); }
@media (max-width: 480px) { .auth-row { grid-template-columns: 1fr; } }

/* about: permission dots + contact block */
.perm-dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px;
    font-size: 10px; font-weight: 700; margin-right: 2px; background: var(--border-light); color: var(--text-muted); }
.perm-dot.on { background: rgba(52, 168, 83, .16); color: #2e7d32; }
body.dark-mode .perm-dot { background: rgba(255, 255, 255, .07); }
.work-block { padding: 4px 0; }
.work-links { list-style: none; padding: 0; margin: 14px 0 10px; display: grid; gap: 10px; }
.work-links a { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none;
    padding: 11px 14px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-secondary); }
.work-links a:hover { border-color: var(--navy-accent); color: var(--navy-accent); }
.work-links i { width: 20px; text-align: center; font-size: 16px; }
.login-work { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); text-align: center; }
.login-work b { display: block; margin-bottom: 10px; color: var(--text-secondary); font-size: 13px; }
.login-work a { color: var(--text-secondary); text-decoration: none; margin: 0 9px; font-size: 13px; display: inline-block; }
.login-work a:hover { color: var(--navy-accent); }

/* ================= SQUARED SYSTEM — flat corners + real borders, app-wide =================
   Blanket on purpose: 253 radius declarations are spread across this file plus a handful of
   inline ones in markup, and only !important beats an inline style. A blanket also catches
   anything added later. Fully reversible — delete this block and every old radius is still
   sitting where it was. */
*, *::before, *::after { border-radius: 0 !important; }

/* the ONLY things that stay round — a square version of each reads as broken, not as design */
.toggle { border-radius: 24px !important; }             /* daisyui switch, css-styles.md rule 14 */
.toggle::before { border-radius: 50% !important; }      /* its knob */
input[type="radio"] { border-radius: 50% !important; }  /* a square radio is not a radio */
.ai-dots i { border-radius: 50% !important; }           /* 7px typing dots */

/* flat in-flow surfaces: the border does the separating now, not a drop shadow.
   anything that genuinely FLOATS (modals, dropdowns, popovers, Swal, the notification card)
   is deliberately absent from this list and keeps its elevation — that is what tells the eye
   it is above the page rather than part of it. */
.header,
.data-section,
.filters-section,
.stat-card,
.account-info-card,
.settings-mega-card,
.theme-preview-container,
.setup-guide-table,
.about-table-wrapper {
    border: 1px solid var(--border-color);
    box-shadow: none;
}
.lte-card {
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--navy-accent);   /* accent rail reads as a true bar once squared */
    box-shadow: none;
}
/* a solid colour block is its own boundary — no border, no shadow, keep the hover lift */
.small-box, .small-box:hover { box-shadow: none; }

/* plans — module switches */
.plan-mods { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.plan-mods h4 { margin: 0 0 6px; font-size: 14px; color: var(--text-primary); }
.plan-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.toggle-row.plan-mod { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 3px; cursor: pointer; font-size: 14px; touch-action: manipulation; }
.toggle-row.plan-mod i { color: var(--navy-accent); width: 16px; text-align: center; }
.plan-mod-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ================= invoice form — two columns, sticky summary ================= */
.invf { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.invf-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* cards: thin border, icon header, body — same family as the ledger + payment screens */
.invf-card { margin: 0; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: none; } /* flat + real border — squared system */
.invf-h { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border-light); }
.invf-h > div { flex: 1; min-width: 0; }
.invf-h h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.invf-h small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-muted); }
.invf-h small kbd { padding: 0 4px; font-size: 10.5px; border: 1px solid var(--border-color); border-bottom-width: 2px; border-radius: 3px; background: var(--bg-secondary); }
.invf-h-ic { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px;
    background: rgba(var(--navy-accent-rgb), .12); color: var(--navy-accent); }
.invf-count { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; background: var(--bg-secondary); color: var(--text-secondary); white-space: nowrap; }
.invf-b { padding: 18px 20px; }

/* compact saas controls on this page only */
.invf .form-group { margin-bottom: 14px; }
.invf .form-group label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.invf .form-group label i { font-size: 11.5px; color: var(--text-muted); }
.invf .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not(.toggle), .invf .form-group .sd-btn {
    height: 42px; min-height: 0; padding: 0 12px; font-size: 14.5px; border-radius: 6px; }
.invf .form-group textarea { min-height: 84px; padding: 10px 12px; font-size: 14.5px; border-radius: 6px; }
.invf-billto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
/* both columns: field row on top, a matching panel that fills the rest — the two halves always end level */
.invf-billto > .form-group, .invf-dates { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.invf-billto > .form-group > .invf-cust { flex: 1; }
.invf-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.invf-dd .form-group { margin-bottom: 0; }
.invf-when { flex: 1; display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: 14px; border: 1px solid var(--border-light); background: var(--bg-secondary); }
.invf-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--text-muted); }
.invf-terms > span { flex-basis: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.invf-terms button { flex: 1; }
.invf-tl { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border-light); background: var(--bg-card); }
.tl-pt { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tl-pt.end { flex-direction: row-reverse; text-align: right; }
.tl-pt > i { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px;
    background: rgba(var(--navy-accent-rgb), .12); color: var(--navy-accent); }
.tl-pt span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.tl-pt b { display: block; font-size: 13.5px; color: var(--text-primary); white-space: nowrap; }
.tl-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 28px; }
.tl-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(var(--navy-accent-rgb), .55); }
.tl-bar span { position: relative; padding: 2px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid rgba(var(--navy-accent-rgb), .55);
    background: var(--bg-card); color: var(--navy-accent); }
.tl-bar.bad::before { border-top-color: var(--danger); } .tl-bar.bad span { border-color: var(--danger); color: var(--danger); }
.invf-tl-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 18px; font-size: 12.5px; color: var(--text-muted); }
.invf-tl-note .fa-circle-check { color: #16a34a; } .invf-tl-note .fa-circle-info { color: var(--navy-accent); }
.invf-tl-note.bad { color: var(--danger); font-weight: 600; }
.invf-tl-note button { padding: 2px 9px; border: 1px solid var(--navy-accent); background: transparent; color: var(--navy-accent); font-size: 12px; font-weight: 700; cursor: pointer; }
.invf-tl-note button:hover { background: var(--navy-accent); color: #fff; }
.invf-terms button { padding: 5px 11px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card); color: var(--text-secondary);
    font-size: 12px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.invf-terms button:hover { border-color: var(--navy-accent); color: var(--navy-accent); }
.invf-terms button.on { background: var(--navy-primary); border-color: var(--navy-primary); color: #fff; }

/* customer mini card */
.invf-cust { margin-top: 12px; padding: 14px; border: 1px solid var(--border-light); background: var(--bg-secondary); }
.invf-cust.is-empty { display: flex; align-items: center; justify-content: center; border-style: dashed; }
.invf-cc-empty { max-width: 260px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.invf-cc-empty i { display: block; margin-bottom: 8px; font-size: 22px; opacity: .45; }
.invf-cc-empty b { display: block; margin-bottom: 2px; font-size: 13.5px; color: var(--text-secondary); }
.invf-cc-top { display: flex; align-items: center; gap: 12px; }
.invf-cc-top > div { min-width: 0; }
.invf-av { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 14px; font-weight: 800;
    background: linear-gradient(135deg, rgba(var(--navy-accent-rgb), .35), rgba(var(--navy-accent-rgb), .12)); color: var(--text-primary); }
.invf-cc-top b { font-size: 15px; color: var(--text-primary); }
.invf-cc-top b em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; margin-left: 4px; border-radius: 4px; background: var(--bg-card);
    color: var(--text-secondary); font-family: 'Courier New', monospace; vertical-align: 1px; }
.invf-cc-top small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invf-cc-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.invf-cc-stats > div { padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 6px; background: var(--bg-card); min-width: 0; }
.invf-cc-stats span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.invf-cc-stats b { display: block; margin-top: 2px; font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invf-cc-stats b.owed { color: #b45309; } .invf-cc-stats b.clear { color: #15803d; }
body.dark-mode .invf-cc-stats b.owed { color: #f5b964; } body.dark-mode .invf-cc-stats b.clear { color: #5fd68e; }
.invf-cc-limit { margin-top: 12px; }
.invf-cc-limit > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-muted); }
.invf-cc-limit b { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* line items — spreadsheet feel: real borders, accent on hover / focus */
.invf-tbl { overflow-x: auto; }
.invf-items col.c-no { width: 4%; } .invf-items col.c-prod { width: 20%; } .invf-items col.c-desc { width: 19%; }
.invf-items col.c-qty { width: 11%; } .invf-items col.c-price { width: 11%; } .invf-items col.c-disc { width: 7%; } .invf-items col.c-tax { width: 13%; }
.invf-items col.c-tot { width: 10%; } .invf-items col.c-x { width: 5%; }
.invf-items .r-disc { text-align: right; }
.invf-items th { padding: 10px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
    background: var(--bg-secondary); color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
.invf-items th i { margin-right: 3px; font-size: 10px; opacity: .7; }
.invf-items th:first-child, .invf-items td:first-child { padding-left: 20px; }
.invf-items th:last-child, .invf-items td:last-child { padding-right: 14px; }
.invf-items td { padding: 8px 5px; border-bottom: 1px solid var(--border-light); }
.invf-items tbody tr:hover td { background: rgba(var(--navy-accent-rgb), .03); }
.invf-items input, .invf-items .sd-btn { height: 38px; padding: 0 10px; font-size: 14px; border: 1px solid var(--border-color); background: var(--bg-card); }
.invf-items tbody tr:hover input, .invf-items tbody tr:hover .sd-btn { border-color: rgba(var(--navy-accent-rgb), .5); }
.invf-items input:focus { border-color: var(--navy-accent); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), .12); }
.invf-items td.no { color: var(--text-muted); font-weight: 700; text-align: center; font-size: 12px; }
.invf-items td.lt { padding-right: 8px; font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.invf-items .r-stock { display: block; margin: 3px 0 0 4px; font-size: 11px; color: var(--text-muted); }
.invf-items tr.row-over .r-stock { color: var(--danger); font-weight: 700; }
.invf-items tr.row-over .r-qty { border-color: var(--danger); }
.invf-items .x { white-space: nowrap; }
.invf-items .x button { width: 30px; height: 30px; padding: 0; border-radius: 6px; }
.invf-items .x button.del:hover { background: rgba(234, 67, 53, .12); color: var(--danger); }
.invf-items .x button:not(.del):hover { background: rgba(var(--navy-accent-rgb), .1); color: var(--navy-accent); }
.invf .inv-addline { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0; padding-top: 12px; padding-bottom: 14px; }
.invf-add { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px dashed var(--navy-accent); border-radius: 6px;
    background: rgba(var(--navy-accent-rgb), .05); color: var(--navy-accent); font-size: 13px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.invf-add:hover { background: rgba(var(--navy-accent-rgb), .12); }
.invf-warn { margin: 0 20px 16px; padding: 9px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;
    background: #fff8e6; color: #8a5a00; border: 1px solid #f5dfa8; }
body.dark-mode .invf-warn { background: #33290d; color: #f5c77e; border-color: #5c4a1a; }
.invf-sum .invf-warn { margin: 12px 0 0; }

/* sticky summary */
.invf-side { position: sticky; top: 16px; }
.invf-sum { padding: 18px; }
.invf-sum-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-light); }
.invf-sum-head .inv-hint { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.invf-sum-head b { display: block; margin-top: 2px; font-size: 17px; color: var(--text-primary); }
.invf-demo { width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card); color: var(--text-muted); cursor: pointer; }
.invf-demo:hover { color: var(--navy-accent); border-color: var(--navy-accent); }
.invf-ln { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13.5px; color: var(--text-secondary); }
.invf-ln b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.invf-ln .val-neg { color: var(--danger); }
.invf-ln.grand { margin: 10px -18px 0; padding: 14px 18px; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
    background: rgba(var(--navy-accent-rgb), .07); font-size: 19px; font-weight: 800; color: var(--text-primary); }
.invf-ln.due, .invf-ln.due b { font-weight: 800; color: var(--danger); }
.invf-disc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; font-size: 13.5px; color: var(--text-secondary); }
.invf-disc > span { margin-right: auto; }
.invf-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--border-color); border-radius: 6px; }
.invf-seg button { padding: 5px 10px; border: 0; background: var(--bg-card); color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.invf-seg button + button { border-left: 1px solid var(--border-color); }
.invf-seg button:hover { color: var(--navy-accent); }
.invf-seg button.on { background: var(--navy-primary); color: #fff; }
.invf-disc input { width: 84px; height: 32px; padding: 0 8px; font-size: 14px; text-align: right; border: 1px solid var(--border-color); border-radius: 6px;
    background: var(--input-bg, var(--bg-card)); color: var(--text-primary); }
.invf-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.invf-btns .btn { width: 100%; height: 44px; justify-content: center; border-radius: 6px; }
.invf-btns .invf-outline { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); }
.invf-btns .invf-outline:hover { border-color: var(--navy-accent); color: var(--navy-accent); }
.invf-btns .invf-ghost { height: 38px; background: transparent; color: var(--text-muted); border: 0; box-shadow: none; text-decoration: none; }
.invf-btns .invf-ghost:hover { color: var(--danger); background: rgba(234, 67, 53, .08); }
.invf-kbd { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 6px 14px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-light); font-size: 11.5px; }
.invf-kbd span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.invf-kbd kbd { padding: 0 5px; font-size: 10.5px; border: 1px solid var(--border-color); border-bottom-width: 2px; border-radius: 3px; background: var(--bg-secondary); }

@media (max-width: 1100px) {
    .invf { grid-template-columns: 1fr; }
    .invf-side { position: static; }
    .invf-billto { grid-template-columns: 1fr; }
}
/* phones: each line becomes a card, label on the left, input on the right */
@media (max-width: 768px) {
    .invf-h, .invf-b { padding-left: 14px; padding-right: 14px; }
    .invf-sum { padding: 14px; }
    .invf-ln.grand { margin: 10px -14px 0; padding: 12px 14px; }
    .invf-dd { grid-template-columns: 1fr; }
    .invf-cc-stats { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
    .invf-tbl { padding: 12px 14px 0; }
    .invf-items colgroup, .invf-items thead { display: none; }
    .invf-items, .invf-items tbody, .invf-items tr, .invf-items td { display: block; width: 100%; }
    .invf-items tr { position: relative; margin-bottom: 10px; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; }
    .invf-items td, .invf-items td:first-child, .invf-items td:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 4px 0; border: 0; }
    .invf-items td::before { content: attr(data-label); flex: 0 0 90px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
    .invf-items td > select, .invf-items td > input, .invf-items td > .sd { flex: 1; min-width: 0; }
    .invf-items td.no { position: absolute; top: 8px; right: 84px; width: auto; }
    .invf-items td.no::before, .invf-items td.x::before { content: none; }
    .invf-items td.x { position: absolute; top: 4px; right: 4px; width: auto; }
    .invf-items td.lt { justify-content: space-between; font-size: 15px; }
    .invf-items td .r-stock { flex-basis: 100%; padding-left: 100px; margin-top: 0; }
    .invf-items input { font-size: 16px; border-color: var(--border-color); }
}

/* ================= company settings — header, section nav, two-column setting rows ================= */
.cs-hero { display: flex; align-items: center; gap: 18px; padding: 20px 22px; margin: 0 0 18px; }
.cs-hero-logo { width: 72px; height: 72px; flex: none; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary);
    display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cs-hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.cs-hero-logo span { font-size: 24px; font-weight: 800; color: var(--navy-primary); letter-spacing: 1px; }
.cs-hero-main { flex: 1; min-width: 0; }
.cs-hero-main h2 { margin: 0 0 6px; font-size: 22px; color: var(--text-primary); }
.cs-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-secondary); }
.cs-hero-meta i { color: var(--navy-accent); margin-right: 4px; }
.cs-tile.cs-hero-plan { flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; min-width: 250px; text-decoration: none; cursor: pointer;
    transition: transform .15s, box-shadow .15s; }
.cs-tile.cs-hero-plan:hover { box-shadow: inset 0 3px 0 var(--c), 0 4px 14px rgba(0, 0, 0, .08); }
.cs-tile.cs-hero-plan > span { display: flex; flex-direction: column; gap: 3px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-primary); }
.cs-tile.cs-hero-plan b { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.cs-tile.cs-hero-plan small { font-size: 12px; color: var(--c); font-weight: 600; }
.cs-ro { margin: 0 0 18px; padding: 10px 14px; border-radius: 4px; background: #fff4e5; color: #9a4d00; border: 1px solid #f8dab4; font-size: 13.5px; font-weight: 600; }
body.dark-mode .cs-ro { background: #33290d; color: #f5c77e; border-color: #5c4a1a; }

.cs-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.cs-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 4px; padding: 8px; }
.cs-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 4px; color: var(--text-secondary);
    text-decoration: none; border-left: 3px solid transparent; touch-action: manipulation; }
.cs-nav a i { width: 18px; text-align: center; color: var(--text-muted); font-size: 15px; }
.cs-nav a span { display: flex; flex-direction: column; min-width: 0; }
.cs-nav a b { font-size: 14px; color: var(--text-primary); }
.cs-nav a small { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-nav a:hover { background: var(--bg-secondary); }
.cs-nav a.on { background: rgba(var(--navy-accent-rgb), .08); border-left-color: var(--navy-accent); }
.cs-nav a.on i, .cs-nav a.on b { color: var(--navy-accent); }

.cs-panel { display: none; padding: 0; margin: 0; }
.cs-panel.on { display: block; }
.cs-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; padding: 22px 24px; border-bottom: 1px solid var(--border-light); }
.cs-row:last-child, .cs-row:has(+ .cs-save) { border-bottom: 0; }
.cs-row-head h3 { margin: 0 0 6px; font-size: 15px; color: var(--text-primary); }
.cs-row-head p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.cs-row-body.form-grid { margin: 0; }
.cs-row-body .form-group:last-child { margin-bottom: 0; }
.cs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-save { display: flex; justify-content: flex-end; padding: 14px 24px; background: var(--bg-secondary); border-top: 1px solid var(--border-color);
    position: sticky; bottom: 0; z-index: 2; border-radius: 0 0 4px 4px; }

/* logo + invoice header preview */
.cs-logo-row { display: flex; align-items: center; gap: 16px; }
.cs-logo-row .form-group { flex: 1; margin: 0; }
.cs-logo-box { width: 96px; height: 96px; flex: none; border: 2px dashed var(--border-color); border-radius: 6px; display: flex; align-items: center;
    justify-content: center; overflow: hidden; background: var(--bg-secondary); color: var(--text-muted); font-size: 26px; }
.cs-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.cs-docprev { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px; background: #fff; color: #1f2937;
    border: 1px solid var(--border-color); border-top: 4px solid var(--navy-primary); border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
.cs-docprev-logo { width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px; background: #f1f4f8; }
.cs-docprev-logo img { width: 100%; height: 100%; object-fit: contain; }
.cs-docprev-logo span { font-weight: 800; color: #001f3f; }
.cs-docprev-co { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #4b5563; }
.cs-docprev-co b { font-size: 16px; color: #001f3f; }
.cs-docprev-tag { text-align: right; display: flex; flex-direction: column; }
.cs-docprev-tag b { font-size: 20px; letter-spacing: 3px; color: #001f3f; }
.cs-docprev-tag span { font-size: 12px; color: #6b7280; font-family: 'Courier New', monospace; }

/* reminders */
.cs-toggles { display: flex; flex-direction: column; gap: 10px; }
.toggle-row.cs-toggle { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; }
.toggle-row.cs-toggle:hover { border-color: var(--navy-accent); }
.cs-toggle-ic { width: 36px; height: 36px; flex: none; border-radius: 4px; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--navy-accent-rgb), .1); color: var(--navy-accent); }
.cs-toggle-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-toggle-tx b { font-size: 14px; color: var(--text-primary); }
.cs-toggle-tx small { font-size: 12.5px; color: var(--text-muted); }
.cs-timeline { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 16px 0 0; padding: 0; counter-reset: none; }
.cs-timeline li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 6px; }
.cs-timeline li::before { content: ''; position: absolute; top: 17px; left: 50%; width: 100%; height: 2px; background: var(--border-color); z-index: 0; }
.cs-timeline li:last-child::before { display: none; }
.cs-timeline i { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--navy-primary); color: #fff; font-size: 14px; }
.cs-timeline li:nth-child(3) i, .cs-timeline li:nth-child(4) i { background: #c0392b; }
.cs-timeline b { font-size: 13px; color: var(--text-primary); }
.cs-timeline small { font-size: 11.5px; color: var(--text-muted); }
.cs-timeline.off { opacity: .4; filter: grayscale(1); }

/* numbering */
.cs-seq { display: flex; flex-direction: column; gap: 8px; }
.cs-seq-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) 1fr 1fr minmax(150px, 1.1fr); gap: 12px; align-items: center;
    padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 4px; }
.cs-seq-row b { font-size: 14px; color: var(--text-primary); }
.cs-seq-row label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.cs-seq-row input { padding: 8px 10px; font-size: 16px; border: 1px solid var(--input-border); border-radius: 2px; background: var(--input-bg); color: var(--text-primary); width: 100%; }
.cs-seq-row code { justify-self: end; padding: 6px 10px; border-radius: 3px; background: var(--bg-secondary); border: 1px solid var(--border-color);
    font-size: 13px; font-weight: 700; color: var(--navy-accent); }

/* usage */
/* tinted tiles — same pattern as the ledger stats: one hue per meaning, light tint, icon badge, top strip */
.tone-blue   { --c: #2563eb; --t: rgba(37, 99, 235, .08); }
.tone-teal   { --c: #0d9488; --t: rgba(13, 148, 136, .08); }
.tone-green  { --c: #16a34a; --t: rgba(22, 163, 74, .08); }
.tone-amber  { --c: #d97706; --t: rgba(217, 119, 6, .10); }
.tone-orange { --c: #ea580c; --t: rgba(234, 88, 12, .09); }
.tone-red    { --c: #dc2626; --t: rgba(220, 38, 38, .08); }
.tone-purple { --c: #7c3aed; --t: rgba(124, 58, 237, .08); }
.tone-slate  { --c: #64748b; --t: rgba(100, 116, 139, .09); }
.tone-off    { --c: #94a3b8; --t: rgba(148, 163, 184, .07); }
.cs-tiles { display: grid; gap: 12px; }
.cs-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-tile { background: var(--t); border: 1px solid var(--border-light); border-radius: 8px; padding: 14px 16px;
    box-shadow: inset 0 3px 0 var(--c); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs-tile > span { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--c); }
.cs-ic { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: none;
    font-style: normal; background: var(--c); color: #fff; font-size: 12px; }
.cs-tile > b { font-size: 20px; font-weight: 800; color: var(--text-primary); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-tile > b.cap { text-transform: capitalize; color: var(--c); }
.cs-tile > b small { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.cs-bar { height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .07); overflow: hidden; }
body.dark-mode .cs-bar { background: rgba(255, 255, 255, .1); }
.cs-bar i { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.cs-bar i.warn { background: #d97706; } .cs-bar i.bad { background: #dc2626; }
.cs-bar.unl { background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 12px); opacity: .35; }
.cs-note { font-size: 12px; color: var(--text-muted); }
.cs-note i { margin-right: 4px; color: var(--c); }
.cs-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cs-mod { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; background: var(--t); border: 1px solid var(--border-light); }
.cs-mod > span { display: flex; flex-direction: column; min-width: 0; }
.cs-mod b { font-size: 14px; color: var(--text-primary); }
.cs-mod small { font-size: 12px; color: var(--c); font-weight: 600; }
.cs-mod small i { margin-right: 3px; }
.cs-mod.tone-off b { color: var(--text-muted); }
.cs-mod.tone-off .cs-ic { background: #cbd5e1; }
.cs-stag { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 10px;
    background: var(--t); color: var(--c); border: 1px solid var(--c); margin-left: 6px; vertical-align: 2px; }

@media (max-width: 1200px) {
    .cs-row { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 900px) {
    .cs-wrap { grid-template-columns: 1fr; }
    .cs-nav { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-nav a small { display: none; }
    .cs-nav a { border-left: 0; border-bottom: 3px solid transparent; }
    .cs-nav a.on { border-bottom-color: var(--navy-accent); }
}
@media (max-width: 768px) {
    .cs-hero { flex-wrap: wrap; padding: 16px; }
    .cs-tile.cs-hero-plan { width: 100%; min-width: 0; }
    .cs-row { padding: 16px; }
    .cs-grid-3, .cs-tiles-2 { grid-template-columns: 1fr; }
    .cs-tiles-4, .cs-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
    .cs-timeline li:nth-child(2)::before { display: none; }
    .cs-seq-row { grid-template-columns: 1fr 1fr; }
    .cs-seq-row b, .cs-seq-row code { grid-column: 1 / -1; justify-self: start; }
    .cs-docprev { flex-wrap: wrap; }
    .cs-docprev-tag { text-align: left; }
    .cs-save { padding: 12px 16px; }
    .cs-save .btn { width: 100%; justify-content: center; }
}

/* ================= ledger — accounting table on screen ================= */
/* filter row: party dropdown 25%, the six period buttons share the rest equally, one height */
.ldg-bar { display: grid; grid-template-columns: 25% repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; align-items: stretch; }
.inv-tbar:has(.ldg-bar) { display: block; margin-bottom: 16px; }
.ldg-bar .ldg-periods { display: contents; }
.ldg-bar .sd { width: 100%; min-width: 0; }
.ldg-bar .sd-btn, .ldg-bar .ldg-periods button, .ldg-bar #morePop > .inv-tbtn {
    width: 100%; height: 44px; box-sizing: border-box; margin: 0; padding: 0 10px; font-size: 13.5px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; touch-action: manipulation;
    transition: border-color .15s, background .15s, color .15s; }
.ldg-bar .sd-btn { justify-content: space-between; padding: 0 12px; color: var(--text-primary); }
.ldg-bar .ldg-periods button:hover, .ldg-bar #morePop > .inv-tbtn:hover { border-color: var(--navy-accent); color: var(--text-primary); }
.ldg-bar .ldg-periods button.on { background: rgba(var(--navy-accent-rgb), .12); border-color: var(--navy-accent); color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--navy-accent); }
.ldg-bar #morePop { width: 100%; }

/* cards */
.ldg-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.ldg-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-light); }
.ldg-card-h h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.ldg-card-h h3 i { color: var(--navy-accent); }
.ldg-card-h h3 small { font-weight: 500; font-size: 12px; color: var(--text-muted); }
.ldg-legend { font-size: 12px; color: var(--text-muted); }

/* summary: party left, stats right */
.ldg-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.ldg-party { display: flex; gap: 14px; padding: 18px; border-right: 1px solid var(--border-light); min-width: 0; }
.ldg-avatar { width: 46px; height: 46px; flex: none; border-radius: 10px; font-weight: 800; font-size: 15px;
    display: flex; align-items: center; justify-content: center; background: rgba(var(--navy-accent-rgb), .15); color: var(--text-primary); }
.ldg-pinfo { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.ldg-pname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ldg-pname b { font-size: 17px; color: var(--text-primary); }
.ldg-code { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--bg-primary); color: var(--text-secondary); font-family: 'Courier New', monospace; }
.ldg-pline { font-size: 12.5px; color: var(--text-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ldg-pline i { color: var(--text-muted); font-size: 11px; margin-right: 2px; }
.ldg-pline em { font-style: normal; color: var(--border-color); margin: 0 4px; }
.ldg-pline.muted { color: var(--text-muted); }
.ldg-limit { margin-top: 6px; }
.ldg-limit > div:first-child { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.ldg-limit b { color: var(--text-secondary); font-weight: 600; }
.ldg-bar-track { height: 6px; border-radius: 3px; background: var(--bg-primary); overflow: hidden; }
.ldg-bar-track i { display: block; height: 100%; background: var(--navy-accent); border-radius: 3px; }
.ldg-bar-track i.warn { background: #e69500; } .ldg-bar-track i.bad { background: var(--danger); }

.ldg-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ldg-stat { padding: 18px 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; border-left: 1px solid var(--border-light); }
.ldg-stat:first-child { border-left: 0; }
.ldg-stat > span { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.ldg-stat > span i { margin-right: 3px; }
.ldg-stat > div { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ldg-stat.main { background: rgba(var(--navy-accent-rgb), .07); }
.ldg-stat.main > span { color: var(--text-secondary); }
.ldg-stat.late .ldg-amt { color: var(--danger); }
.ldg-amt { font-size: 15px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ldg-amt.big { font-size: 20px; font-weight: 800; }
.ldg-dc { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; letter-spacing: .4px; background: var(--bg-primary); color: var(--text-muted); }
.ldg-dc.dr { background: #fff1e0; color: #a35a00; }
.ldg-dc.cr { background: #e3f6ec; color: #1b7a45; }
body.dark-mode .ldg-dc.dr { background: #3a2a12; color: #f5b964; }
body.dark-mode .ldg-dc.cr { background: #123325; color: #6fd6a0; }

/* aging */
.ldg-agetot { font-size: 12.5px; color: var(--text-muted); }
.ldg-agetot b { color: var(--text-primary); margin-left: 4px; font-size: 14px; }
.ldg-agebar { display: flex; height: 10px; margin: 16px 18px 0; border-radius: 5px; overflow: hidden; background: var(--bg-primary); }
.ldg-agebar i { display: block; height: 100%; }
.ag0 { background: #34a853; } .ag1 { background: #f2b21b; } .ag2 { background: #ef7d22; } .ag3 { background: #e0483c; } .ag4 { background: #9b1c1c; }
.ldg-agelegend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 12px 18px 16px; }
.ldg-agelegend div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ldg-agelegend span { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.ldg-agelegend .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ldg-agelegend b { font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ldg-agelegend small { font-size: 11px; color: var(--text-muted); }

/* transactions table — light header, thin rules, numbers right */
.ldg-txcard { overflow: hidden; }
.ldg { width: 100%; border-collapse: collapse; font-size: 13px; }
.ldg thead th { background: var(--bg-primary); color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; padding: 11px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border-color); }
.ldg thead th.num { text-align: right; }
.ldg td { padding: 12px 14px; border-bottom: 1px solid var(--border-light); vertical-align: middle; color: var(--text-primary); }
.ldg .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ldg .c-date, .ldg .c-due { white-space: nowrap; color: var(--text-secondary); }
.ldg td.c-due.late { color: var(--danger); font-weight: 700; }
.ldg .c-no a { color: var(--text-primary); font-weight: 600; font-family: 'Courier New', monospace; font-size: 12.5px;
    text-decoration: none; border-bottom: 1px dashed rgba(var(--navy-accent-rgb), .8); }
.ldg .c-no a:hover { color: var(--navy-accent); border-bottom-style: solid; }
.ldg .c-bal { font-weight: 700; }
.ldg .c-bal .ldg-dc { margin-left: 6px; }
.ldg .c-bal .ldg-amt { font-size: 13.5px; }
.ldg-dash { color: var(--border-color); }
.ldg-row:hover td { background: rgba(var(--navy-accent-rgb), .04); }
.ldg-vch { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 6px; margin-right: 8px;
    border-radius: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; }
.ldg-vname { color: var(--text-secondary); }
.v-ob { background: #eceff3; color: #44566c; } .v-si { background: #e3eefc; color: #0a5bb5; } .v-pb { background: #fbeedd; color: #92520a; }
.v-rv { background: #e3f6ec; color: #1b7a45; } .v-jv { background: #efe6f8; color: #6a1b9a; } .v-cn { background: #fdecec; color: #b3261e; }
body.dark-mode .v-ob, body.dark-mode .v-si, body.dark-mode .v-pb, body.dark-mode .v-rv, body.dark-mode .v-jv, body.dark-mode .v-cn { filter: brightness(.85) saturate(1.2); }
.ldg-st { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 2px 7px; border-radius: 10px; background: var(--bg-primary); color: var(--text-muted); vertical-align: 1px; }
.ldg-st.st-paid { background: #e3f6ec; color: #1b7a45; } .ldg-st.st-partial { background: #fff1e0; color: #a35a00; }
.ldg-st.st-overdue { background: #fde8e6; color: #b3261e; } .ldg-st.st-sent, .ldg-st.st-unpaid { background: #e3eefc; color: #0a5bb5; }
.ldg-month td { padding: 14px 14px 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
    color: var(--text-muted); border-bottom: 1px solid var(--border-color); background: none; }
.ldg-tag { display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; margin-right: 8px;
    background: rgba(var(--navy-accent-rgb), .15); color: var(--text-primary); text-transform: uppercase; }
.ldg-bf td { background: var(--bg-primary); color: var(--text-secondary); font-weight: 600; }
.ldg-total td { background: var(--bg-primary); font-weight: 700; border-top: 1px solid var(--border-color); border-bottom: 0; }
.ldg-cf td { background: rgba(var(--navy-accent-rgb), .09); font-weight: 700; border-bottom: 0; }

/* ---------- ledger transactions: filter toolbar, sortable headers, pager ---------- */
.ldg-ftbar { margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--border-light); background: var(--bg-card); }
.ldg-ftbar .inv-search input { min-width: 260px; }
.ldg-ftbar .inv-tools .sd { min-width: 150px; }
.ldg th.sortable { cursor: pointer; user-select: none; transition: color .15s; }
.ldg th.sortable:hover { color: var(--text-primary); }
.ldg th.sortable i { font-size: 10px; opacity: .45; margin: 0 2px; }
.ldg th.sorted { color: var(--text-primary); }
.ldg th.sorted i { opacity: 1; color: var(--navy-accent); }
.ldg-none td { text-align: center; padding: 28px 14px; color: var(--text-muted); font-size: 13.5px; }
.ldg-none i { margin-right: 6px; }
.ldg-none .inv-tbtn { margin-left: 10px; display: inline-flex; }
.ldg-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px;
    border-top: 1px solid var(--border-light); font-size: 12.5px; color: var(--text-muted); }
.ldg-psize, .ldg-pages { display: flex; align-items: center; gap: 4px; }
.ldg-psize span { margin-right: 4px; }
.ldg-psize { margin-left: auto; }
.ldg-psize button, .ldg-pages button { min-width: 32px; height: 30px; padding: 0 9px; border: 1px solid var(--border-color); border-radius: 6px;
    background: var(--bg-card); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.ldg-psize button:hover, .ldg-pages button:hover:not(:disabled) { border-color: var(--navy-accent); color: var(--text-primary); }
.ldg-psize button.on, .ldg-pages button.on { background: rgba(var(--navy-accent-rgb), .14); border-color: var(--navy-accent); color: var(--text-primary); }
.ldg-pages button:disabled { opacity: .4; cursor: default; }
.ldg-pages span { padding: 0 3px; }

/* ---------- ledger colour system: one hue per meaning, light tints, dark-mode aware ---------- */
.ldg-card, .ldg-stat { --c: #64748b; --t: rgba(100, 116, 139, .10); }
.s-open { --c: #64748b; --t: rgba(100, 116, 139, .09); }
.s-dr   { --c: #2563eb; --t: rgba(37, 99, 235, .08); }
.s-cr   { --c: #16a34a; --t: rgba(22, 163, 74, .08); }
.s-bal.owed  { --c: #d97706; --t: rgba(217, 119, 6, .10); }
.s-bal.clear { --c: #16a34a; --t: rgba(22, 163, 74, .10); }
.s-od.late { --c: #dc2626; --t: rgba(220, 38, 38, .08); }
.s-od.none { --c: #94a3b8; --t: rgba(148, 163, 184, .08); }
.ldg-stat { position: relative; background: var(--t); box-shadow: inset 0 3px 0 var(--c); }
.ldg-stat.main { background: var(--t); }
.ldg-stat > span { display: flex; align-items: center; gap: 7px; color: var(--c); }
.ldg-ic { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
    font-style: normal; background: var(--c); color: #fff; font-size: 11px; flex: none; }
.ldg-ic i { margin: 0 !important; }
.s-dr .ldg-amt { color: #1d4ed8; } .s-cr .ldg-amt { color: #15803d; }
.s-bal.owed .ldg-amt { color: #b45309; } .s-bal.clear .ldg-amt { color: #15803d; }
.s-od.late .ldg-amt { color: #dc2626; } .s-od.none .ldg-amt { color: var(--text-muted); }
body.dark-mode .s-dr .ldg-amt { color: #7aa7ff; } body.dark-mode .s-cr .ldg-amt, body.dark-mode .s-bal.clear .ldg-amt { color: #5fd68e; }
body.dark-mode .s-bal.owed .ldg-amt { color: #f5b964; } body.dark-mode .s-od.late .ldg-amt { color: #ff7b72; }
.ldg-avatar { background: linear-gradient(135deg, rgba(var(--navy-accent-rgb), .35), rgba(var(--navy-accent-rgb), .12)); }

/* aging tiles */
.ldg-agenone { margin: 16px 18px 0; padding: 12px 14px; border-radius: 8px; background: rgba(22, 163, 74, .08); color: #15803d; font-weight: 600; font-size: 13px; }
.ldg-agenone i { margin-right: 6px; }
body.dark-mode .ldg-agenone { color: #5fd68e; }
.ldg-agelegend > div { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-light); border-left: 4px solid var(--c); background: var(--bg-card); }
.ldg-agelegend > div.has { background: var(--t); }
.t-ag0 { --c: #34a853; --t: rgba(52, 168, 83, .09); } .t-ag1 { --c: #f2b21b; --t: rgba(242, 178, 27, .12); }
.t-ag2 { --c: #ef7d22; --t: rgba(239, 125, 34, .10); } .t-ag3 { --c: #e0483c; --t: rgba(224, 72, 60, .09); }
.t-ag4 { --c: #9b1c1c; --t: rgba(155, 28, 28, .09); }
.ldg-agelegend > div.has b { color: var(--c); }
.t-ag1.has b { color: #b7860b; }

/* table: coloured amounts, voucher stripe, tinted header per money column */
.ldg thead th.num:nth-last-child(3) { color: #2563eb; }
.ldg thead th.num:nth-last-child(2) { color: #16a34a; }
.ldg td.c-dr { color: #1d4ed8; font-weight: 600; }
.ldg td.c-cr { color: #15803d; font-weight: 600; }
body.dark-mode .ldg td.c-dr { color: #7aa7ff; } body.dark-mode .ldg td.c-cr { color: #5fd68e; }
.ldg td.c-dr .ldg-dash, .ldg td.c-cr .ldg-dash { font-weight: 400; }
.r-payment td { background: rgba(22, 163, 74, .035); }
.ldg-month td i { font-size: 7px; color: var(--navy-accent); margin-right: 8px; vertical-align: 2px; }
.ldg-total td.c-dr, .ldg-total td.c-cr { font-weight: 800; }
.ldg-total td { background: linear-gradient(0deg, rgba(var(--navy-accent-rgb), .05), rgba(var(--navy-accent-rgb), .05)), var(--bg-primary); }

@media (max-width: 1200px) {
    .ldg-summary { grid-template-columns: 1fr; }
    .ldg-party { border-right: 0; border-bottom: 1px solid var(--border-light); }
}
/* tablets + phones: each entry becomes a card — label left, value right. no sideways scroll */
@media (max-width: 1000px) {
    .ldg-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ldg-ftbar .inv-search, .ldg-ftbar .inv-search input { width: 100%; min-width: 0; }
    .ldg-ftbar .inv-tools { width: 100%; }
    .ldg-ftbar .inv-tools .sd { flex: 1 1 140px; }
    .ldg-psize { margin-left: 0; }
    .ldg-pager { justify-content: center; }
    .ldg-bar > .sd { grid-column: 1 / -1; }
    .ldg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ldg-stat { border-left: 0; border-top: 1px solid var(--border-light); }
    .ldg-stat.main { grid-column: 1 / -1; order: -1; border-top: 0; }
    .ldg-agelegend { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
    .ldg thead { display: none; }
    .ldg, .ldg tbody, .ldg tr, .ldg td { display: block; width: 100%; }
    .ldg tr { border-bottom: 1px solid var(--border-color); padding: 8px 0; }
    .ldg td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 5px 16px; text-align: right; }
    .ldg td::before { content: attr(data-l); font-weight: 700; color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; text-align: left; }
    .ldg td[data-l=""]::before, .ldg-month td::before, .ldg-total td[colspan]::before { content: none; }
    .ldg td:empty { display: none; }
    .ldg-month td, .ldg-total td[colspan], .ldg-bf td[colspan], .ldg-cf td[colspan] { justify-content: flex-start; text-align: left; }
}
@media (max-width: 480px) {
    .ldg-agelegend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================= ledger — A4 statement (print only) ================= */
#ldgPrint { display: none; }
@media print {
    @page { size: A4 portrait; margin: 12mm 12mm 14mm;
        @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 7.5pt Arial, sans-serif; color: #8a94a3; } }
    body.print-ledger { background: #fff !important; margin: 0 !important; }
    body.print-ledger > *:not(#ldgPrint) { display: none !important; }
    body.print-ledger #ldgPrint { display: block !important; }
}
.ldp { --ink: var(--navy-primary, #111827); --acc: var(--navy-accent, #0074D9);
    font-family: Arial, 'Helvetica Neue', 'Segoe UI', sans-serif; color: #1f2937; font-size: 8.8pt; line-height: 1.4;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ldp small { display: block; font-size: 6.8pt; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: #8a94a3; margin-bottom: 3px; }

/* header */
.ldp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 10px 0 14px; border-top: 5px solid var(--ink); }
.ldp-co { display: flex; gap: 12px; align-items: flex-start; max-width: 55%; }
.ldp-co img { width: 60px; height: 60px; object-fit: contain; }
.ldp-co div { display: flex; flex-direction: column; gap: 1px; font-size: 8pt; color: #5b6574; }
.ldp-co b { font-size: 15pt; color: var(--ink); margin-bottom: 3px; letter-spacing: -.2px; }
.ldp-title { text-align: right; }
.ldp-title h1 { margin: 0; font-size: 24pt; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; color: var(--ink); line-height: 1; }
.ldp-title .sub { display: block; font-size: 8pt; color: #8a94a3; letter-spacing: .6px; text-transform: uppercase; margin: 4px 0 8px; }
.ldp-title dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; justify-content: end; font-size: 8pt; }
.ldp-title dt { color: #8a94a3; text-align: right; }
.ldp-title dd { margin: 0; font-weight: 700; color: #1f2937; text-align: right; }

/* three info panels */
.ldp-info { display: grid; grid-template-columns: 1.25fr 1fr 0.95fr; gap: 10px; margin: 4px 0 14px; }
.ldp-box { border: 1px solid #e3e7ed; border-radius: 5px; padding: 9px 11px; display: flex; flex-direction: column; gap: 1px; font-size: 8pt; color: #5b6574; }
.ldp-box > b { font-size: 11pt; color: #111827; margin-bottom: 2px; }
.ldp-box table { width: 100%; border-collapse: collapse; font-size: 8.2pt; }
.ldp-box td { padding: 2px 0; color: #5b6574; }
.ldp-box td:last-child { text-align: right; font-weight: 600; color: #1f2937; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ldp-box tr.b td { border-top: 1px solid #e3e7ed; padding-top: 4px; font-weight: 800; color: #111827; }
.ldp-box tr.od td { color: #b3261e; font-weight: 700; }
.ldp-due { border-radius: 5px; padding: 11px 13px; background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.ldp-due small { color: rgba(255, 255, 255, .7); }
.ldp-due b { font-size: 17pt; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ldp-due b span { font-size: 9pt; font-weight: 600; opacity: .75; }
.ldp-due > span { font-size: 7.5pt; margin-top: 4px; color: rgba(255, 255, 255, .8); }
.ldp-due.clear { background: #f3f5f8; color: #1f2937; border: 1px solid #e3e7ed; }
.ldp-due.clear small { color: #8a94a3; }

/* ledger table */
.ldp-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8.2pt; }
.ldp-table thead { display: table-header-group; }   /* repeats on every printed page */
.ldp-table .w-date { width: 13%; } .ldp-table .w-type { width: 7%; } .ldp-table .w-no { width: 16%; }
.ldp-table .w-amt { width: 12%; } .ldp-table .w-bal { width: 14%; }
.ldp-table th { padding: 6px 7px; text-align: left; font-size: 6.9pt; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
    color: #5b6574; background: #f3f5f8; border-top: 1px solid #d9dee6; border-bottom: 1.5px solid var(--ink); }
.ldp-table td { padding: 5px 7px; border-bottom: 1px solid #edf0f4; vertical-align: top; word-wrap: break-word; }
.ldp-table tbody tr:nth-child(even):not(.m):not(.tot):not(.bf):not(.cf) td { background: #fafbfc; }
.ldp-table tr { break-inside: avoid; page-break-inside: avoid; }
.ldp-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ldp-table .bal { font-weight: 700; color: #111827; }
.ldp-table .no { font-family: 'Courier New', monospace; font-size: 7.8pt; }
.ldp-table small { display: block; margin: 1px 0 0; font-size: 6.9pt; font-weight: 400; letter-spacing: 0; text-transform: none; color: #8a94a3; }
.ldp-table .vc { display: inline-block; font-size: 6.6pt; font-weight: 800; padding: 1px 4px; border-radius: 3px; border: 1px solid #cfd6df; color: #5b6574; }
.ldp-table tr.m td { padding: 8px 7px 3px; font-size: 6.9pt; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid #d9dee6; }
.ldp-table tr.bf td, .ldp-table tr.cf td { background: #f3f5f8; font-weight: 700; }
.ldp-table tr.bf i, .ldp-table tr.cf i { font-style: normal; font-size: 6.6pt; font-weight: 800; text-transform: uppercase; padding: 1px 4px; margin-right: 6px;
    border-radius: 3px; background: #fff; border: 1px solid #cfd6df; }
.ldp-table tr.tot td { font-weight: 800; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.ldp-table tr.cf td { border-bottom: 0; }

/* aging */
.ldp-aging { margin-top: 14px; break-inside: avoid; }
.ldp-aging h3 { margin: 0 0 6px; font-size: 8pt; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.ldp-aging h3 small { display: inline; margin: 0; letter-spacing: .3px; text-transform: none; font-weight: 400; font-size: 7.5pt; }
.ldp-aging > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ldp-aging .ag { border: 1px solid #e3e7ed; border-radius: 4px; padding: 6px 8px; text-align: right; background: none; }
.ldp-aging .ag b { font-size: 9.5pt; font-variant-numeric: tabular-nums; }
.ldp-aging .tot { background: #f3f5f8; }

/* footer */
.ldp-foot { display: grid; grid-template-columns: 1fr 1.2fr 0.8fr; gap: 18px; margin-top: 16px; padding-top: 10px; border-top: 1px solid #e3e7ed; break-inside: avoid; font-size: 7.8pt; color: #5b6574; }
.ldp-foot p { margin: 0; line-height: 1.5; }
.ldp-foot .sign { display: flex; flex-direction: column; justify-content: flex-end; text-align: center; font-size: 7.5pt; color: #8a94a3; }
.ldp-foot .sign span { border-top: 1px solid #5b6574; margin: 36px 6px 4px; }

/* remittance slip */
.ldp-slip { margin-top: 18px; break-inside: avoid; }
.ldp-slip .cut { border-top: 1.5px dashed #b8c0cc; text-align: center; font-size: 7pt; color: #8a94a3; letter-spacing: .6px; text-transform: uppercase; }
.ldp-slip .cut i { background: #fff; padding: 0 6px; position: relative; top: -7px; margin-right: 2px; }
.ldp-slip .grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 10px; padding: 4px 2px 0; font-size: 7.8pt; color: #5b6574; }
.ldp-slip .grid b { display: block; font-size: 9.5pt; color: #111827; font-variant-numeric: tabular-nums; }
.ldp-slip .grid b.blank { border-bottom: 1px solid #5b6574; height: 16px; }
.ldp-gen { margin: 12px 0 0; text-align: center; font-size: 6.8pt; color: #a4adb9; letter-spacing: .3px; }

/* invoice view: ledger-style summary + tabs */
.ldg-stats.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ldg-pname a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(var(--navy-accent-rgb), .8); }
.ldg-pname a:hover { color: var(--navy-accent); border-bottom-style: solid; }
.inv-tab-n { font-style: normal; font-size: 11px; font-weight: 700; min-width: 20px; padding: 1px 7px; border-radius: 10px;
    background: var(--bg-primary); color: var(--text-muted); text-align: center; }
.inv-tabs button.on .inv-tab-n { background: rgba(var(--navy-accent-rgb), .15); color: var(--text-primary); }
.ldg-card > .ldg { border-radius: 0 0 8px 8px; overflow: hidden; }
@media (max-width: 1000px) { .ldg-stats.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* wide popup — 90% of the screen, no 800px cap. adjustment fields sit in one row */
.modal.modal-wide { width: 90%; max-width: 90%; }
.adj-grid { grid-template-columns: 1.3fr 1fr 1fr 1.4fr; }
.adj-grid .form-group-full { grid-column: 1 / -1; }
@media (max-width: 1000px) { .adj-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
    .modal.modal-wide { width: 100%; max-width: 100%; }
    .adj-grid { grid-template-columns: 1fr; }
}

/* searchable dropdown in a form = same box as the inputs beside it (sizes come from the .form-group input rules) */
.form-group .sd-btn { line-height: normal; box-sizing: border-box; }
.form-group .sd-btn .sd-val { font-size: inherit; }
.form-group .sd-btn:hover { border-color: var(--navy-accent); }

/* ===== dashboard v2 — kpi strip + goal, chart / donut / feed, table / overview / promo ===== */
.t-navy   { --dx-c: var(--navy-accent); --dx-t: rgba(var(--navy-accent-rgb), .12); }
.t-green  { --dx-c: #1f9d57; --dx-t: rgba(31, 157, 87, .13); }
.t-cyan   { --dx-c: #0d8a9e; --dx-t: rgba(13, 138, 158, .13); }
.t-amber  { --dx-c: #d98200; --dx-t: rgba(217, 130, 0, .14); }
.t-purple { --dx-c: #6f42c1; --dx-t: rgba(111, 66, 193, .13); }
.t-red    { --dx-c: #c0392b; --dx-t: rgba(192, 57, 43, .12); }
.t-slate  { --dx-c: #607d8b; --dx-t: rgba(96, 125, 139, .14); }
.pill-service { background: rgba(111, 66, 193, .13); color: #6f42c1; }

.dx-top { display: grid; grid-template-columns: minmax(0, 3.1fr) minmax(0, 1.1fr); gap: 16px; margin-bottom: 16px; }
.dx-top.no-goal { grid-template-columns: minmax(0, 1fr); }
.dx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.dx-kpis.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dx-kpis.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dx-kpis.c1 { grid-template-columns: minmax(0, 1fr); }

.dx-row { display: grid; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.dx-row.n3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.1fr); }
.dx-row.n2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr); }
.dx-row.n1 { grid-template-columns: minmax(0, 1fr); }
.dx-row.even.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dx-row.even.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dx-card { background: var(--bg-card); border: 1px solid var(--border-color); padding: 18px; min-width: 0;
    display: flex; flex-direction: column; transition: border-color .2s; }
.dx-card:hover { border-color: rgba(var(--navy-accent-rgb), .35); }
.dx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dx-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 9px; min-width: 0; }
.dx-head h3 i { color: var(--navy-accent); }
.dx-link { font-size: 12.5px; font-weight: 600; color: var(--navy-accent); text-decoration: none; white-space: nowrap; }
.dx-link i { font-size: 11px; margin-left: 3px; transition: transform .2s; }
.dx-link:hover i { transform: translateX(3px); }
.dx-more { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted);
    text-decoration: none; flex: none; transition: background .2s, color .2s; }
.dx-more:hover { background: var(--bg-primary); color: var(--navy-accent); }
.dx-mut { color: var(--text-muted); }
.dx-neg { color: #c0392b; }
body.dark-mode .dx-neg { color: #ff7b6e; }

/* icon badge */
.dx-ic { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
    background: var(--dx-t, rgba(var(--navy-accent-rgb), .12)); color: var(--dx-c, var(--navy-accent)); }
.dx-ic.sm { width: 36px; height: 36px; font-size: 14px; }

/* kpi */
.dx-kpi { gap: 6px; }
.dx-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.dx-kpi-l { font-size: 13.5px; color: var(--text-secondary); font-weight: 500; }
.dx-kpi-v { font-size: clamp(1.3rem, 1.55vw, 1.75rem); font-weight: 700; color: var(--text-primary); line-height: 1.2;
    font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-kpi-f { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; min-width: 0; }
.dx-kpi-f small { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-trend { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; flex: none; }
.dx-trend.up   { background: rgba(31, 157, 87, .13); color: #1f9d57; }
.dx-trend.down { background: rgba(192, 57, 43, .12); color: #c0392b; }
.dx-trend.flat { background: rgba(96, 125, 139, .14); color: #607d8b; }
body.dark-mode .dx-trend.up { color: #4cd38a; }
body.dark-mode .dx-trend.down { color: #ff7b6e; }
body.dark-mode .dx-trend.flat { color: #a9bcc6; }

/* goal */
.dx-goal { background: rgba(var(--navy-accent-rgb), .06); border-color: rgba(var(--navy-accent-rgb), .28); }
.dx-goal .dx-head { margin-bottom: 10px; }
.dx-goal-t { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: var(--text-primary); }
.dx-prog { display: flex; align-items: center; gap: 12px; }
.dx-prog b { font-size: 13px; color: var(--navy-accent); min-width: 40px; text-align: right; }
.dx-prog-bar { flex: 1; height: 8px; background: rgba(var(--navy-accent-rgb), .14); overflow: hidden; }
.dx-prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--navy-primary), var(--navy-accent)); transition: width .6s ease; }
.dx-goal-s { display: block; margin: 10px 0 12px; font-size: 12px; color: var(--text-muted); }
.dx-goal .dx-link { margin-top: auto; }

/* chart range segment */
.dx-seg { display: inline-flex; border: 1px solid var(--border-color); flex: none; }
.dx-seg button { border: 0; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; padding: 5px 11px;
    cursor: pointer; touch-action: manipulation; transition: background .2s, color .2s; }
.dx-seg button + button { border-left: 1px solid var(--border-color); }
.dx-seg button:hover { color: var(--navy-accent); }
.dx-seg button.on { background: var(--navy-accent); color: #fff; }
.dx-legend-inline { display: flex; gap: 16px; flex-wrap: wrap; margin: -4px 0 10px; font-size: 12.5px; color: var(--text-secondary); }
.dx-legend-inline span { display: inline-flex; align-items: center; gap: 6px; }
.dx-legend-inline i { width: 10px; height: 10px; display: inline-block; }
.dx-row .chart-box { flex: 1; min-height: 280px; }
.chart-box.xs { height: 64px; min-height: 0; flex: none; margin: 4px 0 2px; }

/* donut */
.dx-donut { position: relative; height: 200px; margin: 4px 0 16px; }
.dx-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dx-donut-c b { font-size: 1.5rem; color: var(--text-primary); line-height: 1.1; }
.dx-donut-c span { font-size: 12px; color: var(--text-muted); }
.dx-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dx-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 52px; align-items: center; gap: 10px; font-size: 13px; }
.dx-legend li i { width: 10px; height: 10px; }
.dx-legend li span { color: var(--text-secondary); text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-legend li em { font-style: normal; color: var(--text-muted); font-size: 12px; }
.dx-legend li b { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* feed + small lists */
.dx-feed, .dx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.dx-feed li, .dx-list li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dx-feed li > div, .dx-list li > div { flex: 1; min-width: 0; }
.dx-feed b, .dx-list b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-feed b a, .dx-list b a { color: inherit; text-decoration: none; }
.dx-feed b a:hover, .dx-list b a:hover { color: var(--navy-accent); }
.dx-feed small, .dx-list li > div small { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-feed time { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; align-self: flex-start; padding-top: 2px; }
.dx-list .av { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center;
    background: var(--navy-primary); color: #fff; font-size: 12px; font-weight: 700; }
.dx-list em { font-style: normal; font-weight: 700; font-size: 13.5px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dx-list em small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-top: 3px; }
.dx-none { display: block !important; }
.dx-empty { padding: 26px 10px; }
.dx-empty i { font-size: 30px; }

/* latest table */
.dx-table-wrap { overflow-x: auto; margin: 0 -18px -18px; }
.dx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dx-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 10px 12px;
    background: var(--bg-primary); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); white-space: nowrap; }
.dx-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); vertical-align: middle; white-space: nowrap; }
.dx-table tr:last-child td { border-bottom: 0; }
.dx-table tbody tr { transition: background .15s; }
.dx-table tbody tr:hover { background: var(--table-hover); }
.dx-table th:first-child, .dx-table td:first-child { padding-left: 18px; }
.dx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dx-table .dx-act { width: 44px; text-align: right; padding-right: 12px; }
.dx-table .tab-id .tx { min-width: 0; }
.dx-table .tab-id .tx b { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* aging / overview */
.dx-big { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dx-big b { display: block; font-size: 1.75rem; font-weight: 700; color: var(--text-primary); line-height: 1.15; font-variant-numeric: tabular-nums; }
.dx-big span:not(.dx-trend) { font-size: 12.5px; color: var(--text-muted); }
.dx-spark-l { display: block; font-size: 11.5px; color: var(--text-muted); margin-bottom: 14px; }
.dx-bars { display: grid; gap: 12px; }
.dx-bars > div { display: grid; grid-template-columns: 82px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 12.5px; }
.dx-bars span { color: var(--text-secondary); white-space: nowrap; }
.dx-bars b { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dx-bar { height: 8px; background: var(--border-light); overflow: hidden; }
.dx-bar i { display: block; height: 100%; background: var(--dx-c); transition: width .6s ease; }

/* promo — navy block, owner / admin / staff variants */
.dx-promo { position: relative; overflow: hidden; color: #fff; border: 0;
    background: linear-gradient(140deg, var(--navy-primary) 0%, var(--navy-light) 100%); }
.dx-promo:hover { border-color: transparent; }
.dx-promo-mark { position: absolute; right: -14px; top: -10px; font-size: 110px; opacity: .08; pointer-events: none; }
.dx-promo h4 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: #fff; position: relative; }
.dx-promo > p { margin: 0 0 16px; font-size: 13px; color: rgba(255, 255, 255, .72); line-height: 1.5; position: relative; }
.dx-promo-btn { position: relative; margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; background: #fff; color: var(--navy-primary); font-weight: 700; font-size: 13.5px; text-decoration: none;
    transition: transform .2s, box-shadow .2s; }
.dx-promo-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.dx-usage { display: grid; gap: 12px; margin-bottom: 18px; position: relative; }
.dx-use { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; font-size: 12.5px; }
.dx-use span { color: rgba(255, 255, 255, .8); }
.dx-use span i { width: 16px; opacity: .8; }
.dx-use b { color: #fff; font-variant-numeric: tabular-nums; }
.dx-use-bar { grid-column: 1 / -1; height: 6px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.dx-use-bar i { display: block; height: 100%; background: #4cd38a; }
.dx-use.full .dx-use-bar i { background: #ff7b6e; }
.dx-use.full b { color: #ffb4ab; }
.dx-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; position: relative; }
.dx-quick a { display: flex; flex-direction: column; gap: 6px; padding: 12px; color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 600;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: background .2s; }
.dx-quick a i { font-size: 16px; opacity: .9; }
.dx-quick a:hover { background: rgba(255, 255, 255, .16); }
.dx-promo-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; position: relative; }
.dx-promo-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; background: rgba(255, 255, 255, .08); font-size: 13px; }
.dx-promo-list li b { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-promo-list li span { color: #ffd479; font-weight: 700; white-space: nowrap; }
.dx-promo-list .dx-empty, .dx-promo-list .dx-empty b { color: rgba(255, 255, 255, .8); }
.dx-promo-list li.dx-none { background: transparent; padding: 0; }

/* skeletons while the first read is in flight */
.dx-sk { display: grid; gap: 10px; list-style: none; }
.dx-sk .skeleton { display: block; height: 14px; }
.dx-sk .skeleton:nth-child(2) { width: 80%; }
.dx-sk .skeleton:nth-child(3) { width: 60%; }
.dx-kpi .dx-sk-ic { width: 40px; height: 40px; display: block; margin-bottom: 8px; }
.dx-kpi .dx-sk-l { width: 60%; height: 12px; display: block; }
.dx-kpi .dx-sk-v { width: 75%; height: 26px; display: block; margin-top: 4px; }

@media (max-width: 1400px) {
    .dx-top { grid-template-columns: minmax(0, 1fr); }
    .dx-goal .dx-goal-t { margin-bottom: 10px; }
}
@media (max-width: 1200px) {
    .dx-row.n3, .dx-row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dx-row.n3 > :first-child, .dx-row.n2 > :first-child { grid-column: 1 / -1; }
    .dx-row.even.n3 > :first-child, .dx-row.even.n2 > :first-child { grid-column: auto; }
    .dx-row.even.n3 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 992px) {
    .dx-kpis, .dx-kpis.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .dx-row.n3, .dx-row.n2, .dx-row.even.n3, .dx-row.even.n2 { grid-template-columns: minmax(0, 1fr); }
    .dx-row > * { grid-column: auto !important; }
    .dx-card { padding: 16px; }
    .dx-table-wrap { margin: 0 -16px -16px; }
    .dx-head { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .dx-kpis, .dx-kpis.c3, .dx-kpis.c2 { grid-template-columns: minmax(0, 1fr); }
    .dx-quick { grid-template-columns: minmax(0, 1fr); }
}
@media print {
    .dx-seg, .dx-more, .dx-promo-btn { display: none !important; }
}

@media (max-width: 1200px) { .cs-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* logo upload card — preview, drop target, real file input */
.cs-logo-drop { display: flex; align-items: center; gap: 18px; padding: 16px; border: 2px dashed var(--border-color); border-radius: 12px;
    background: var(--bg-primary); transition: border-color .15s, background .15s; }
.cs-logo-drop.over { border-color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .08); }
.cs-logo-drop .cs-logo-box { width: 104px; height: 104px; border: 1px solid var(--border-color); border-style: solid; background: var(--bg-card); border-radius: 10px; }
.cs-logo-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-logo-tx > b { font-size: 15px; color: var(--text-primary); }
.cs-logo-tx > b i { color: var(--navy-accent); margin-right: 6px; }
.cs-logo-tx > span { font-size: 12.5px; color: var(--text-muted); }
.cs-logo-tx .file-input { margin-top: 4px; background: var(--bg-card); }
.cs-logo-info { font-size: 12px; color: var(--text-secondary); }
.cs-logo-info i { color: #16a34a; margin-right: 4px; }
@media (max-width: 768px) { .cs-logo-drop { flex-direction: column; align-items: stretch; text-align: center; } .cs-logo-drop .cs-logo-box { margin: 0 auto; } }

/* printed payment methods */
.cs-head-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cs-head-links .inv-tbtn { text-decoration: none; }
.cs-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 16px; border: 2px dashed var(--border-color);
    border-radius: 10px; color: var(--text-muted); font-size: 13px; }
.cs-empty > i { font-size: 26px; color: var(--navy-accent); }
.cs-empty b { color: var(--text-primary); font-size: 14px; }
.cs-pay-prev { margin-top: 4px; }
.cs-pay-prev > small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.cs-pay-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cs-pay-card { position: relative; padding: 14px 16px 14px 18px; border-radius: 10px; border: 1px solid var(--border-light);
    background: rgba(37, 99, 235, .06); box-shadow: inset 3px 0 0 #2563eb; }
.cs-pay-card:nth-child(2) { background: rgba(22, 163, 74, .06); box-shadow: inset 3px 0 0 #16a34a; }
.cs-pay-card b { display: block; font-size: 14px; color: var(--text-primary); margin: 0 0 6px; padding-right: 28px; }
.cs-pay-card b i { color: var(--navy-accent); margin-right: 4px; }
.cs-pay-card address { font-style: normal; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.cs-pay-card em { font-style: normal; font-size: 12.5px; color: #b45309; }
.cs-slot { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--text-primary); color: var(--bg-card);
    font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
@media (max-width: 768px) { .cs-pay-cards { grid-template-columns: 1fr; } }

/* ---------- company settings: invoice settings panel + live preview ---------- */
.cs-inv { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
.cs-inv > form { min-width: 0; }
.cs-inv .cs-row { grid-template-columns: 1fr; gap: 14px; }
.cs-inv-prev { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-left: 1px solid var(--border-light);
    background: var(--bg-secondary); min-width: 0; align-self: stretch; }
.cs-inv-prev-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs-inv-prev-h span { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.cs-inv-prev-h span i { color: var(--navy-accent); margin-right: 4px; }
.cs-inv-prev-h small { font-size: 12px; color: var(--text-muted); font-family: 'Courier New', monospace; }
.cs-inv-paper { min-width: 0; overflow: hidden; }
.cs-inv-paper .inv-doc { margin: 0; }
.cs-tog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs-toggle-tx small a { color: var(--navy-accent); }
@media (max-width: 1500px) {
    .cs-inv { grid-template-columns: 1fr; }
    .cs-inv-prev { position: static; border-left: 0; border-top: 1px solid var(--border-light); }
}
@media (max-width: 700px) { .cs-tog-grid { grid-template-columns: 1fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pm-tpl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 8px; font-size: 12px; color: var(--text-muted); }
.ldp-foot p.pm { margin-top: 5px; } .ldp-foot p.pm b { color: #111827; }

/* printed-method picker — click cards, numbered in pick order */
.pm-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pm-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; font: inherit; cursor: pointer;
    border: 1.5px solid var(--border-color); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); text-decoration: none;
    transition: border-color .15s, background .15s, box-shadow .15s; touch-action: manipulation; min-width: 0; }
.pm-card:hover { border-color: var(--navy-accent); }
.pm-card:disabled { cursor: default; opacity: .7; }
.pm-card.on { border-color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .09); box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), .15); }
.pm-ic { width: 38px; height: 38px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-style: normal;
    background: var(--bg-primary); color: var(--text-secondary); font-size: 15px; }
.pm-card.on .pm-ic { background: var(--navy-accent); color: #fff; }
.pm-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 22px; }
.pm-body b { font-size: 14px; }
.pm-body small { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-body small.warn { color: #b45309; }
.pm-slot { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-color); color: transparent; }
.pm-card.on .pm-slot { background: var(--navy-accent); border-color: var(--navy-accent); color: #fff; }
.pm-add { flex-direction: column; justify-content: center; gap: 3px; border-style: dashed; color: var(--text-muted); text-align: center; }
.pm-add > i { font-size: 16px; color: var(--navy-accent); }
.pm-add b { font-size: 13.5px; color: var(--text-primary); }
.pm-add small { font-size: 11.5px; }
.pm-pick-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 16px; font-size: 12.5px; color: var(--text-muted); }
.pm-pick-foot a { color: var(--text-secondary); font-weight: 600; text-decoration: none; }
.pm-pick-foot a:hover { color: var(--navy-accent); }
.pm-pick-foot i { margin-right: 4px; }
.cs-pay-prev > small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.pm-howto { border: 1px solid var(--border-color); border-radius: 10px; padding: 16px 18px; background: #fff; color: #1f2937; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.pm-howto h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #6b7280; }
.pm-howto-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; }
.pm-howto .note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #374151; }
.pm-howto .note.muted { color: #9ca3af; }
.pm-howto .m b { display: block; font-size: 13.5px; color: #111827; margin-bottom: 3px; }
.pm-howto .m b i { color: #6b7280; margin-right: 4px; }
.pm-howto address { font-style: normal; font-size: 12.5px; line-height: 1.55; color: #4b5563; }
.pm-howto em { font-size: 12px; color: #b45309; font-style: normal; }
.pm-howto .ref { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed #e5e7eb; font-size: 12px; color: #6b7280; font-style: italic; }

/* ================= invoice print designs — .tpl-<key> on .inv-doc, modern = the base rules above ================= */

/* classic — plain black & white, bordered grid */
.tpl-classic { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; }
.tpl-classic .pd-head { border-bottom: 0; padding-bottom: 6px; }
.tpl-classic .pd-mark { display: none; }
.tpl-classic .pd-co address b { color: #111; font-size: 1.5em; }
.tpl-classic .pd-co address small { color: #333; }
.tpl-classic .pd-h { font-size: 1.7em; font-weight: 700; letter-spacing: 0; color: #111; }
.tpl-classic .pd-no, .tpl-classic .pd-title dl { display: none; }
.tpl-classic .pd-info { margin: 30px 0 24px; gap: 26px; }
.tpl-classic .pd-box, .tpl-classic .pd-due, .tpl-classic .pd-due.late, .tpl-classic .pd-due.clear { border: 0; padding: 0; background: none; border-radius: 0; }
.tpl-classic .pd-box > small, .tpl-classic .pd-due > small { color: #111; font-size: .9em; font-weight: 700; letter-spacing: 0; text-transform: none; }
.tpl-classic .pd-party { font-size: 1em; }
.tpl-classic .x-meta { display: table-row; }
.tpl-classic .pd-box td { border: 0; padding: 2px 0; color: #333; }
.tpl-classic .pd-box td:first-child { font-weight: 700; color: #111; text-align: right; padding-right: 16px; }
.tpl-classic .pd-due b, .tpl-classic .pd-due.clear b { color: #111; font-size: 1.35em; }
.tpl-classic .pd-due em, .tpl-classic .pd-due.clear em { color: #555; }
.tpl-classic .pd-lines { border: 1px solid #9ca3af; }
.tpl-classic .pd-lines th { background: #f3f4f6; color: #111; border: 1px solid #9ca3af; border-radius: 0; text-align: center; letter-spacing: 0; font-size: .8em; }
.tpl-classic .pd-lines td { border: 1px solid #9ca3af; }
.tpl-classic .pd-lines tbody tr:nth-child(even) td { background: none; }
.tpl-classic .pd-lines td.i { color: #111; text-align: center; }
.tpl-classic .pd-lines td b { font-weight: 400; }
.tpl-classic .pd-sum td { border: 0; padding: 5px 12px; color: #111; }
.tpl-classic .pd-sum tr.tot td { background: none; color: #111; font-size: 1.25em; border-top: 1px solid #111; padding: 9px 12px; }
.tpl-classic .pd-sum tr.tot td:last-child { background: #f3f4f6; border: 1px solid #9ca3af; }
.tpl-classic .pd-sum tr.paid td:last-child, .tpl-classic .pd-sum tr.due td, .tpl-classic .pd-sum tr.due.clear td { background: none; color: #111; border-bottom: 0; }
.tpl-classic .pd-words, .tpl-classic .pd-pay { border: 0; padding: 0; }
.tpl-classic .pd-words > small, .tpl-classic .pd-pay-main > small, .tpl-classic .pd-notes small { color: #111; font-size: .9em; letter-spacing: 0; text-transform: none; }
.tpl-classic .pd-notes { border-top: 0; }
.tpl-classic .pd-sign b { border-bottom-color: #111; }
.tpl-classic .pd-end { border-top: 0; align-items: flex-start; text-align: left; }
.tpl-classic .pd-end b { color: #111; }

/* corporate — spreadsheet look, coloured header bars */
.tpl-corporate { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; }
.tpl-corporate .pd-head { border-bottom: 0; }
.tpl-corporate .pd-mark { display: none; }
.tpl-corporate .pd-co address b { font-size: 2em; font-weight: 400; color: var(--ink); }
.tpl-corporate .pd-h { font-size: 2.6em; font-weight: 800; letter-spacing: .02em; color: var(--acc); }
.tpl-corporate .pd-no { display: none; }
.tpl-corporate .x-dl { display: block; }
.tpl-corporate .pd-title dl { gap: 3px 8px; margin-top: 8px; }
.tpl-corporate .pd-title dt { text-transform: uppercase; font-size: .85em; font-weight: 600; color: #111; align-self: center; }
.tpl-corporate .pd-title dd { min-width: 118px; padding: 2px 10px; border: 1px solid #c9d3e3; text-align: center; font-weight: 600; }
.tpl-corporate .pd-title dd .pd-pill { padding: 0; background: none; }
.tpl-corporate .pd-info { gap: 18px; }
.tpl-corporate .pd-box { border: 0; padding: 0; border-radius: 0; }
.tpl-corporate .pd-box > small { margin: 0 0 6px; padding: 4px 10px; background: var(--ink); color: #fff; font-size: .8em; }
.tpl-corporate .pd-box td { border-bottom: 1px solid #e3e8f0; }
.tpl-corporate .pd-due, .tpl-corporate .pd-due.late, .tpl-corporate .pd-due.clear { border-radius: 0; background: #eef2f8; border: 1px solid #c9d3e3; }
.tpl-corporate .pd-due > small, .tpl-corporate .pd-due.clear > small { color: var(--ink); }
.tpl-corporate .pd-due b, .tpl-corporate .pd-due.clear b { color: var(--ink); }
.tpl-corporate .pd-due.late b { color: #b3261e; }
.tpl-corporate .pd-due em, .tpl-corporate .pd-due.clear em { color: #4b5563; }
.tpl-corporate .pd-lines { border: 1px solid #c9d3e3; border-bottom: 2px solid var(--ink); }
.tpl-corporate .pd-lines th { border-radius: 0; text-align: center; }
.tpl-corporate .pd-lines td { padding: 6px 10px; border-bottom: 0; border-left: 1px solid #c9d3e3; }
.tpl-corporate .pd-lines tbody tr:nth-child(odd) td { background: #eef2f8; }
.tpl-corporate .pd-lines tbody tr:nth-child(even) td { background: #fff; }
.tpl-corporate .pd-lines tr.x-fill { display: table-row; }
.tpl-corporate .pd-lines td b, .tpl-corporate .pd-lines td.a { font-weight: 400; }
.tpl-corporate .pd-sum td { border: 0; padding: 4px 12px; }
.tpl-corporate .pd-sum tr.tot td { background: #dfe6f2; color: var(--ink); border-top: 2px solid var(--ink); }
.tpl-corporate .pd-sum tr.due td { background: none; border-bottom: 2px solid var(--ink); }
.tpl-corporate .pd-left .pd-box, .tpl-corporate .pd-notes > div { position: relative; border: 1px solid var(--ink); border-top-width: 24px; border-radius: 0; padding: 8px 10px; }
.tpl-corporate .pd-left .pd-box > small, .tpl-corporate .pd-pay-main > small, .tpl-corporate .pd-notes small { position: absolute; top: -19px; left: 10px; margin: 0; padding: 0; background: none; color: #fff; }
.tpl-corporate .pd-notes { border-top: 0; }
.tpl-corporate .pd-sign b { border-bottom-color: var(--ink); }
.tpl-corporate .pd-end { border-top: 0; }
.tpl-corporate .pd-end b { font-style: italic; font-size: 1.15em; color: #111; }

/* elegant — framed page, serif name, hairlines only */
.tpl-elegant { border: 16px solid var(--ink); border-radius: 0; padding: 40px 44px 26px; font-family: 'Helvetica Neue', Arial, sans-serif; }
.tpl-elegant .pd-head { border-bottom: 0; }
.tpl-elegant .pd-co { flex-direction: column; gap: 10px; }
.tpl-elegant .pd-mark { display: none; }
.tpl-elegant .pd-co address::before { content: attr(data-title); display: block; font-size: 1.05em; letter-spacing: .08em; text-transform: uppercase; color: #374151; }
.tpl-elegant .pd-co address b { margin-bottom: 10px; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 2.8em; line-height: 1.05; letter-spacing: -.01em; color: #1f2937; }
.tpl-elegant .pd-co address small { color: #374151; }
.tpl-elegant .pd-h { display: none; }
.tpl-elegant .pd-no { display: inline-block; margin: 0 0 12px; padding: 8px 14px; background: var(--ink); color: #fff; letter-spacing: .04em; }
.tpl-elegant .pd-title dt { color: #374151; }
.tpl-elegant .pd-title dd { font-weight: 600; }
.tpl-elegant .pd-pill { padding: 0; background: none; }
.tpl-elegant .pd-info { margin: 26px 0 18px; padding-bottom: 18px; border-bottom: 1px solid #d1d5db; }
.tpl-elegant .pd-box, .tpl-elegant .pd-due, .tpl-elegant .pd-due.late, .tpl-elegant .pd-due.clear { border: 0; padding: 0; background: none; border-radius: 0; }
.tpl-elegant .pd-box > small, .tpl-elegant .pd-due > small, .tpl-elegant .pd-due.clear > small { color: #111; font-size: .8em; letter-spacing: .06em; }
.tpl-elegant .pd-party { font-size: 1em; font-weight: 800; text-transform: uppercase; }
.tpl-elegant .pd-box td { border-bottom: 0; }
.tpl-elegant .pd-due b, .tpl-elegant .pd-due.clear b { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 2em; color: #111; }
.tpl-elegant .pd-due.late b { color: #b3261e; }
.tpl-elegant .pd-due em, .tpl-elegant .pd-due.clear em { color: #6b7280; }
.tpl-elegant .pd-lines { border-bottom: 1px solid #d1d5db; }
.tpl-elegant .pd-lines th { padding: 12px 10px; background: none; color: #111; font-weight: 400; font-size: .95em; letter-spacing: .04em; border-radius: 0;
    border-top: 1px solid #111; border-bottom: 1px solid #111; }
.tpl-elegant .pd-lines td { padding: 8px 10px; border-bottom: 0; }
.tpl-elegant .pd-lines tbody tr:nth-child(even) td { background: none; }
.tpl-elegant .pd-lines td b, .tpl-elegant .pd-lines td.a { font-weight: 400; }
.tpl-elegant .pd-sum { border-left: 1px solid #d1d5db; }
.tpl-elegant .pd-sum td { padding: 4px 12px; border: 0; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; color: #374151; }
.tpl-elegant .pd-sum td:last-child { color: #111; }
.tpl-elegant .pd-sum tr.tot td { background: none; color: #111; font-size: .9em; }
.tpl-elegant .pd-sum tr.due td, .tpl-elegant .pd-sum tr.due.clear td { padding-top: 10px; background: none; color: #111; border-top: 1px solid #111; border-bottom: 0; }
.tpl-elegant .pd-words, .tpl-elegant .pd-pay { border: 0; padding: 0; }
.tpl-elegant .pd-notes { padding-top: 18px; border-top: 1px solid #d1d5db; }
.tpl-elegant .pd-notes > div + div { padding-left: 22px; border-left: 1px solid #d1d5db; }
.tpl-elegant .pd-notes small { font-size: 1.05em; font-weight: 700; letter-spacing: 0; text-transform: none; color: #111; }
.tpl-elegant .pd-end { border-top: 0; }
.tpl-elegant .pd-end b { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; font-size: 1.1em; }

/* bold — black bars, big title, footer banner */
.tpl-bold { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; }
.tpl-bold .pd-head { border-bottom: 0; }
.tpl-bold .pd-mark { background: #111; border-radius: 50%; }
.tpl-bold .pd-co address::before { content: 'Seller'; display: block; margin-bottom: 4px; font-size: .8em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #111; }
.tpl-bold .pd-co address b { color: #111; font-size: 1.2em; }
.tpl-bold .pd-h { font-size: 3em; font-weight: 900; letter-spacing: 0; color: #111; }
.tpl-bold .pd-no { color: #111; }
.tpl-bold .pd-info { gap: 22px; padding-top: 10px; border-top: 2px solid #111; }
.tpl-bold .pd-box, .tpl-bold .pd-due, .tpl-bold .pd-due.late, .tpl-bold .pd-due.clear { border: 0; padding: 0; background: none; border-radius: 0; }
.tpl-bold .pd-box > small, .tpl-bold .pd-due > small, .tpl-bold .pd-due.clear > small { color: #111; font-weight: 800; letter-spacing: .04em; }
.tpl-bold .pd-box td { border-bottom: 0; }
.tpl-bold .pd-due b, .tpl-bold .pd-due.clear b { color: #111; }
.tpl-bold .pd-due.late b { color: #b91c1c; }
.tpl-bold .pd-due em, .tpl-bold .pd-due.clear em { color: #6b7280; }
.tpl-bold .pd-lines { border-bottom: 2px solid #111; }
.tpl-bold .pd-lines th { background: #111; border-radius: 0; }
.tpl-bold .pd-lines td { padding: 6px 10px; border: 1px solid #e5e7eb; border-top: 0; }
.tpl-bold .pd-lines tbody tr:nth-child(even) td { background: none; }
.tpl-bold .pd-lines tr.x-fill { display: table-row; }
.tpl-bold .pd-lines td.i { color: #111; }
.tpl-bold .pd-sum td { border: 0; padding: 4px 12px; }
.tpl-bold .pd-sum tr.tot td { background: none; color: #111; border-top: 2px solid #111; }
.tpl-bold .pd-sum tr.due td, .tpl-bold .pd-sum tr.due.clear td { background: #111; color: #fff; border: 0; }
.tpl-bold .pd-words { border: 0; padding: 0; }
.tpl-bold .pd-words b { font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: #9ca3af; }
.tpl-bold .pd-pay { border-color: #111; border-radius: 0; }
.tpl-bold .pd-notes { border-top: 1px solid #111; }
.tpl-bold .pd-sign b { border-bottom-color: #111; }
.tpl-bold .pd-end { margin-top: 24px; padding: 10px 12px; border-top: 0; background: #111; }
.tpl-bold .pd-end b { color: #fff; letter-spacing: .08em; text-transform: uppercase; }
.tpl-bold .pd-end small { color: #d1d5db; }

@media print {
    .inv-doc.tpl-elegant { border: 10px solid var(--ink); padding: 28px 30px 20px; }
}

/* ================= A4 report print (invReport) — any list, portrait or landscape ================= */
#invRpt { display: none; }
@page rpt-land { size: A4 landscape; margin: 10mm 10mm 12mm; }
@media print {
    body.print-rpt { background: #fff !important; margin: 0 !important; }
    body.print-rpt > *:not(#invRpt) { display: none !important; }
    body.print-rpt #invRpt { display: block !important; }
    #invRpt.land { page: rpt-land; }
}
.rpt { --ink: var(--navy-primary, #111827); font-family: Arial, 'Helvetica Neue', 'Segoe UI', sans-serif; color: #1f2937; font-size: 8.5pt; line-height: 1.4;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rpt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 8px 0 12px; border-top: 5px solid var(--ink); border-bottom: 1px solid #e3e7ed; }
.rpt-co { display: flex; gap: 12px; align-items: flex-start; max-width: 55%; }
.rpt-co img { width: 52px; height: 52px; object-fit: contain; }
.rpt-co div { display: flex; flex-direction: column; gap: 1px; font-size: 8pt; color: #5b6574; }
.rpt-co b { font-size: 14pt; color: var(--ink); margin-bottom: 2px; }
.rpt-title { text-align: right; }
.rpt-title h1 { margin: 0; font-size: 18pt; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); line-height: 1.05; }
.rpt-title > span { display: block; font-size: 8pt; color: #8a94a3; margin: 3px 0 6px; }
.rpt-title dl { display: grid; grid-template-columns: auto auto; gap: 1px 10px; margin: 0; justify-content: end; font-size: 7.8pt; }
.rpt-title dt { color: #8a94a3; text-align: right; } .rpt-title dd { margin: 0; font-weight: 700; text-align: right; }
.rpt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 7px 0; font-size: 7.8pt; color: #5b6574; border-bottom: 1px solid #e3e7ed; }
.rpt-filters > b { color: var(--ink); text-transform: uppercase; letter-spacing: .8px; font-size: 7pt; }
.rpt-filters span b { color: #111827; }
.rpt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.rpt-kpis .k { border: 1px solid #e3e7ed; border-radius: 5px; padding: 7px 10px; background: var(--t, #f6f7f9); }
.rpt-kpis .k small { display: block; font-size: 6.8pt; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--c, #6b7280); }
.rpt-kpis .k b { font-size: 12pt; font-variant-numeric: tabular-nums; color: #111827; }
.rpt-kpis .blue  { --c: #1d4ed8; --t: #eff4ff; } .rpt-kpis .green { --c: #15803d; --t: #effaf3; }
.rpt-kpis .amber { --c: #b45309; --t: #fff7ea; } .rpt-kpis .red   { --c: #b91c1c; --t: #fef1f0; }
.rpt-kpis .slate { --c: #475569; --t: #f5f7fa; } .rpt-kpis .purple { --c: #6d28d9; --t: #f5f0ff; }
.rpt-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8pt; }
.rpt-table thead { display: table-header-group; }
.rpt-table th { padding: 6px; text-align: left; font-size: 6.8pt; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    color: #5b6574; background: #f3f5f8; border-top: 1px solid #d9dee6; border-bottom: 1.5px solid var(--ink); }
.rpt-table td { padding: 4.5px 6px; border-bottom: 1px solid #edf0f4; vertical-align: top; word-wrap: break-word; }
.rpt-table tr { break-inside: avoid; page-break-inside: avoid; }
.rpt-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt-table .mono { font-family: 'Courier New', monospace; font-size: 7.6pt; }
.rpt-table small { display: block; color: #8a94a3; font-size: 6.9pt; }
.rpt-table tr.grp td { padding: 9px 6px 4px; font-size: 7.5pt; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid #d9dee6; }
.rpt-table tr.grp span { font-weight: 400; letter-spacing: 0; text-transform: none; color: #8a94a3; margin-left: 6px; }
.rpt-table tr.sub td { background: #f6f7f9; font-weight: 700; color: #374151; }
.rpt-table tr.grand td { font-weight: 800; font-size: 8.6pt; border-top: 1.5px solid var(--ink); border-bottom: 3px double var(--ink); background: #f3f5f8; }
.rpt-table tr.warn td { background: #fff8ec; } .rpt-table tr.bad td { background: #fef2f1; }
.rpt-table .none { text-align: center; color: #9ca3af; padding: 20px; }
.rpt-tag { display: inline-block; font-size: 6.6pt; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; border: 1px solid; }
.rpt-tag.in { color: #15803d; border-color: #9fd8b2; } .rpt-tag.low { color: #b45309; border-color: #f3cf92; }
.rpt-tag.out { color: #b91c1c; border-color: #f2b4ae; } .rpt-tag.service { color: #475569; border-color: #cbd5e1; }
.rpt-note { margin: 10px 0 0; font-size: 7.5pt; color: #6b7280; }
.rpt-gen { margin: 10px 0 0; text-align: center; font-size: 6.8pt; color: #a4adb9; }
.rpt-table col.w4 { width: 4%; } .rpt-table col.w5 { width: 5%; } .rpt-table col.w6 { width: 6%; } .rpt-table col.w7 { width: 7%; }
.rpt-table col.w8 { width: 8%; } .rpt-table col.w9 { width: 9%; } .rpt-table col.w10 { width: 10%; } .rpt-table col.w12 { width: 12%; }
.rpt-table col.w14 { width: 14%; } .rpt-table col.w16 { width: 16%; } .rpt-table col.w18 { width: 18%; } .rpt-table col.w20 { width: 20%; }
.rpt-table col.w24 { width: 24%; } .rpt-table col.w28 { width: 28%; }

/* payment slip page — the receipt preview at full A4 width */
.inv-doc.rcp.rcp-page { max-width: 820px; margin: 0 auto 24px; padding: 40px 44px 26px; font-size: 13px; }
.rcp-page .pd-lines td a { color: inherit; text-decoration: none; }
.rcp-page .pd-lines td a:hover { color: var(--acc); }
.rcp-lines tfoot td { padding: 9px 8px; border-top: 2px solid var(--ink); font-weight: 700; color: var(--text-primary); }
.rcp-foot { margin: 18px 0 0; text-align: center; font-size: 11px; color: var(--text-muted); }
@media (max-width: 768px) { .inv-doc.rcp.rcp-page { padding: 20px 16px; } }
@media print { .inv-doc.rcp.rcp-page { padding: 0; font-size: 9.6pt; } .rcp-page .pd-lines td a { color: inherit; } }
.pd-lines tr.x-fill td { padding-top: 5px; padding-bottom: 5px; }
.tpl-corporate .pd-sign, .tpl-bold .pd-sign { margin-top: 32px; }
.pd-lines tr.x-fill td { padding-top: 3px; padding-bottom: 3px; }
.pd-end { break-inside: avoid; page-break-inside: avoid; }
/* print: tighter rhythm so a normal invoice stays on one A4 sheet in every design */
@media print {
    .inv-doc { font-size: 9pt; }
    .pd-head { padding-bottom: 12px; }
    .pd-info { margin: 14px 0 16px; }
    .pd-close { margin-top: 12px; }
    .pd-notes { margin-top: 14px; padding-top: 10px; }
    .pd-sign, .tpl-corporate .pd-sign, .tpl-bold .pd-sign { margin-top: 26px; }
    .pd-end { margin-top: 14px; }
    .inv-doc.tpl-elegant { padding: 22px 26px 14px; }
    .tpl-elegant .pd-co address b { font-size: 2.4em; }
}

/* design picker (company settings) — radio cards with a mini sheet */
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tp-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px;
    cursor: pointer; background: var(--bg-card); transition: border-color .15s, box-shadow .15s; }
.tp-card:hover { border-color: var(--navy-accent); }
.tp-card input { position: absolute; opacity: 0; pointer-events: none; }
.tp-card:has(input:checked) { border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), .18); }
.tp-card:has(input:checked)::after { content: "\f00c"; font: 900 11px 'Font Awesome 6 Free'; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--navy-accent); color: #fff; }
.tp-card b { font-size: 13.5px; color: var(--text-primary); display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.tp-card b i { color: var(--navy-accent); }
.tp-card small { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.tp-thumb { display: flex; flex-direction: column; gap: 4px; height: 118px; padding: 9px 10px; background: #fff; border: 1px solid #dfe3ea; border-radius: 3px; }
.tp-thumb i { display: block; height: 5px; border-radius: 1px; background: #e5e7eb; }
.tp-thumb .a { width: 45%; height: 8px; margin-left: auto; background: #001f3f; }
.tp-thumb .b { height: 16px; margin: 3px 0 5px; background: linear-gradient(90deg, #eef1f5 0 38%, transparent 38% 41%, #eef1f5 41% 68%, transparent 68% 71%, #001f3f 71%); }
.tp-thumb .h { height: 7px; background: #001f3f; }
.tp-thumb .f { margin-top: auto; width: 60%; align-self: center; }
.tp-classic .a { width: 30%; background: #111; }
.tp-classic .b { background: linear-gradient(90deg, #d1d5db 0 30%, transparent 30% 45%, #d1d5db 45% 75%, transparent 75%); height: 12px; }
.tp-classic .h { background: #f3f4f6; border: 1px solid #9ca3af; }
.tp-classic .r { background: #fff; border: 1px solid #9ca3af; border-top: 0; height: 6px; margin-top: -4px; }
.tp-corporate .a { width: 50%; background: #0074D9; }
.tp-corporate .b { background: linear-gradient(90deg, #001f3f 0 40%, transparent 40% 60%, #eef2f8 60%); height: 10px; }
.tp-corporate .r:nth-child(odd) { background: #eef2f8; } .tp-corporate .r:nth-child(even) { background: #fff; border: 1px solid #eef2f8; }
.tp-elegant { border: 5px solid #001f3f; }
.tp-elegant .a { width: 55%; margin-left: 0; height: 9px; background: #374151; }
.tp-elegant .b { background: linear-gradient(90deg, #e5e7eb 0 35%, transparent 35%); height: 10px; }
.tp-elegant .h { background: none; border-top: 1px solid #111; border-bottom: 1px solid #111; height: 6px; }
.tp-elegant .r { background: none; border-bottom: 1px solid #e5e7eb; height: 4px; }
.tp-bold .a { width: 40%; height: 11px; background: #111; }
.tp-bold .b { background: none; border-top: 2px solid #111; height: 8px; }
.tp-bold .h { background: #111; }
.tp-bold .r { background: #fff; border: 1px solid #e5e7eb; }
.tp-bold .f { width: 100%; height: 8px; background: #111; }

/* design switcher on the invoice page */
.inv-tpl-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 820px; margin: 0 auto 14px; }
.inv-tpl-bar > span { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.inv-tpl-bar > span i { color: var(--navy-accent); margin-right: 4px; }
.inv-tpl-bar a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--border-color); border-radius: 20px;
    font-size: 12.5px; font-weight: 600; color: var(--text-secondary); text-decoration: none; background: var(--bg-card); }
.inv-tpl-bar a:hover { border-color: var(--navy-accent); color: var(--navy-accent); }
.inv-tpl-bar a.on { background: var(--navy-primary); border-color: var(--navy-primary); color: #fff; }
.inv-tpl-bar a em { font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 1px 6px; border-radius: 8px; background: rgba(var(--navy-accent-rgb), .15); }
.inv-tpl-bar a.on em { background: rgba(255, 255, 255, .2); }
.inv-tpl-bar .inv-tpl-set { margin-left: auto; border-style: dashed; }

/* thermal receipt — 80mm roll, 72mm printable. named page so the app-wide A4 @page never applies */
@page thermal { size: 80mm 200mm; margin: 0; }
.print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }
body.thermal-body { background: #e9ecf1; margin: 0; padding: 24px 12px 90px; color: #000; min-height: 100vh; }
.th-receipt { page: thermal; width: 72mm; margin: 0 auto; padding: 5mm 4mm 6mm; background: #fff; box-sizing: content-box;
    font: 12px/1.35 'Courier New', Consolas, monospace; color: #000; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.th-receipt, .th-receipt * { color: #000; }
.th-receipt small { display: block; font-size: 10.5px; }
.th-head { text-align: center; padding-bottom: 8px; border-bottom: 1px dashed #000; }
.th-head img { max-width: 34mm; max-height: 16mm; object-fit: contain; display: block; margin: 0 auto 5px; filter: grayscale(1); }
.th-head b { display: block; font-size: 15px; letter-spacing: .3px; margin-bottom: 2px; }
.th-title { margin: 8px 0; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.th-sec { padding: 7px 0; border-top: 1px dashed #000; }
.th-lbl { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.th-party { display: block; font-size: 13.5px; margin: 2px 0 1px; }
.th-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 1.5px 0; }
.th-row span { min-width: 0; overflow-wrap: anywhere; }
.th-row span em { display: block; font-style: normal; font-size: 10px; }
.th-row b { white-space: nowrap; text-align: right; }
.th-row.th-hd { font-weight: 700; border-bottom: 1px solid #000; margin-bottom: 3px; padding-bottom: 3px; }
.th-total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 0 4px;
    border-top: 2px solid #000; border-bottom: 2px solid #000; font-weight: 700; }
.th-total span { font-size: 12px; letter-spacing: 1.5px; }
.th-total b { font-size: 17px; }
.th-words { margin: 5px 0 0; font-size: 10.5px; text-align: center; text-transform: capitalize; }
.th-note { margin-top: 4px; font-style: italic; }
.th-sign { margin: 22px 8mm 0; text-align: center; }
.th-sign span { display: block; border-top: 1px solid #000; margin-bottom: 3px; }
.th-foot { margin-top: 12px; padding-top: 8px; border-top: 1px dashed #000; text-align: center; }
.th-foot b { display: block; font-size: 13px; margin-bottom: 2px; }
.th-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 10px; padding: 12px;
    background: var(--navy-primary, #001f3f); }
.th-bar button, .th-bar a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font: 600 14px/1 Arial, sans-serif;
    border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.th-bar button { background: #fff; color: var(--navy-primary, #001f3f); border-color: #fff; }
@media print {
    body.thermal-body { background: #fff !important; padding: 0; min-height: 0; }
    .th-receipt { box-shadow: none; margin: 0; }
}

/* ================= about page — hero, sticky contents, tinted tiles, searchable formulas ================= */
.ab-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px; margin: 0 0 18px; }
.ab-hero-main { display: flex; gap: 16px; align-items: flex-start; }
.ab-logo { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; border: 1px solid var(--border-color); }
.ab-hero h2 { margin: 0 0 6px; font-size: 22px; color: var(--text-primary); }
.ab-hero p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.ab-trust { display: inline-flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 8px 12px; border-radius: 8px;
    background: rgba(22, 163, 74, .08); color: #15803d; font-weight: 600; }
body.dark-mode .ab-trust { color: #5fd68e; }
.ab-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ab-stats .cs-tile { padding: 12px 14px; }
.ab-stats .cs-tile > b { font-size: 22px; }

.ab-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.ab-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 8px; max-height: calc(100vh - 32px); overflow-y: auto; }
.ab-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; font-size: 13.5px; font-weight: 600;
    color: var(--text-secondary); text-decoration: none; border-left: 3px solid transparent; }
.ab-nav a i { width: 16px; text-align: center; color: var(--text-muted); }
.ab-nav a:hover { background: var(--bg-primary); color: var(--text-primary); }
.ab-nav a.on { background: rgba(var(--navy-accent-rgb), .1); color: var(--text-primary); border-left-color: var(--navy-accent); }
.ab-nav a.on i { color: var(--navy-accent); }
.ab-nav-sub { display: flex; flex-direction: column; margin: 0 0 4px 22px; padding-left: 8px; border-left: 1px solid var(--border-light); }
.ab-nav-sub a { font-size: 12.5px; font-weight: 500; padding: 6px 10px; justify-content: space-between; }
.ab-nav-sub a em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: var(--bg-primary); border-radius: 8px; padding: 1px 7px; }

.ab-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ab-sec { padding: 20px 22px; margin: 0; scroll-margin-top: 16px; }
.ab-sec-h { margin-bottom: 16px; }
.ab-sec-h h3 { margin: 0 0 4px; font-size: 16px; color: var(--text-primary); display: flex; gap: 8px; align-items: center; }
.ab-sec-h h3 i { color: var(--navy-accent); }
.ab-sec-h p { margin: 0; font-size: 13px; color: var(--text-muted); }
.ab-legend { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.ab-legend .perm-dot { margin-left: 6px; }

.ab-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ab-tier small { font-size: 12.5px; color: var(--text-secondary); }
.ab-tier dl { margin: 4px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.ab-tier dt { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.ab-tier dd { margin: 0; color: var(--text-primary); line-height: 1.45; }

.ab-matrix-wrap { max-height: 70vh; overflow: auto; border: 1px solid var(--border-color); border-radius: 8px; }
.ab-matrix { margin: 0; }
.ab-matrix thead th { position: sticky; top: 0; z-index: 2; }
.ab-matrix tbody td:first-child, .ab-matrix thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-card); white-space: nowrap; }
.ab-matrix thead th:first-child { z-index: 3; }
.ab-matrix tbody td:first-child i { color: var(--text-muted); width: 16px; margin-right: 4px; }
.ab-matrix tr.ab-grp td { background: var(--bg-primary); font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-secondary); }
.ab-matrix td { white-space: nowrap; }

.ab-search { margin-top: 12px; max-width: 460px; }
.ab-search input { width: 100%; }
.ab-fsec { border: 1px solid var(--border-light); border-radius: 8px; margin-bottom: 10px; overflow: hidden; scroll-margin-top: 16px; }
.ab-fsec summary { list-style: none; cursor: pointer; padding: 11px 14px; font-weight: 700; font-size: 14px; color: var(--text-primary);
    display: flex; align-items: center; gap: 10px; background: var(--bg-primary); }
.ab-fsec summary::-webkit-details-marker { display: none; }
.ab-fsec summary i { font-size: 11px; color: var(--navy-accent); transition: transform .15s; }
.ab-fsec[open] summary i { transform: rotate(90deg); }
.ab-fsec summary em { font-style: normal; margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 10px; padding: 1px 8px; }
.ab-fsec .about-table-wrapper { margin: 0; border-radius: 0; }
.ab-ftable { margin: 0; }
.ab-ftable col.c-what { width: 22%; } .ab-ftable col.c-how { width: 44%; }
.ab-ftable code { font-size: 12px; line-height: 1.55; white-space: normal; }
.ab-none { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

.ab-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ab-chips code { font-size: 11px; padding: 2px 7px; border-radius: 5px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); }
.ab-dtile p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }

.ab-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(var(--navy-accent-rgb), .12), rgba(var(--navy-accent-rgb), .03)); }
.ab-cta h3 { margin: 0 0 6px; font-size: 18px; color: var(--text-primary); }
.ab-cta p { margin: 0 0 6px; font-size: 13.5px; color: var(--text-secondary); }
.ab-cta small { font-size: 12px; color: var(--text-muted); }
.ab-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ab-btn { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 10px; text-decoration: none; color: #fff; min-width: 230px; }
.ab-btn i { font-size: 22px; }
.ab-btn span { display: flex; flex-direction: column; font-size: 12px; opacity: .95; }
.ab-btn b { font-size: 14px; }
.ab-btn.wa { background: #1fa855; } .ab-btn.mail { background: #2563eb; }
.ab-btn:hover { filter: brightness(1.07); }

@media (max-width: 1200px) {
    .ab-tiers, .ab-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-hero { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .ab-wrap { grid-template-columns: 1fr; }
    .ab-nav { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
    .ab-nav-sub { display: none; }
}
@media (max-width: 600px) {
    .ab-tiers, .ab-data, .ab-stats { grid-template-columns: 1fr; }
    .ab-hero-main { flex-direction: column; }
    .ab-btn { min-width: 0; width: 100%; }
    .ab-cta-btns { width: 100%; }
}

/* payment method popup — form left, live preview right */
.pm-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.pm-left .form-actions { margin-top: 18px; }
.pm-right { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px;
    background: var(--bg-primary); border: 1px solid var(--border-color); }
.pm-pv-h { font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-primary); display: flex; gap: 8px; align-items: center; }
.pm-pv-h i { color: var(--navy-accent); }
.pm-pv-l { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); margin-top: 8px; }
.pm-pv-card { cursor: default; }
.pm-pv-card:hover { border-color: var(--navy-accent); }
.pm-right .pm-howto { padding: 14px 16px; }
.pm-right .pm-howto em { font-size: 12px; color: #9ca3af; font-style: italic; }
.pm-pv-sel { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--input-border); border-radius: 4px;
    background: var(--input-bg); font-size: 14px; color: var(--text-primary); }
.pm-pv-sel > i:first-child { color: var(--text-muted); width: 16px; text-align: center; }
.pm-pv-sel span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-pv-sel em { font-style: normal; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; border-radius: 10px;
    background: rgba(22, 163, 74, .12); color: #15803d; }
.pm-pv-sel > i:last-child { font-size: 11px; color: var(--text-muted); }
.pm-pv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pm-pv-tags span { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); }
.pm-pv-tags span i { margin-right: 4px; }
.pm-pv-tags .ok { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .3); color: #15803d; }
.pm-pv-tags .off { background: rgba(148, 163, 184, .15); color: #64748b; }
@media (max-width: 1000px) { .pm-split { grid-template-columns: 1fr; } .pm-right { position: static; } }

/* ================= reports — library nav, header, filters, tiles, chart ================= */
.rp-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.rp-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 10px; max-height: calc(100vh - 32px); overflow-y: auto; }
.rp-nav-g { font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--text-muted); padding: 12px 10px 6px; }
.rp-nav-g:first-child { padding-top: 4px; }
.rp-nav a { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--text-secondary);
    border: 1px solid transparent; transition: background .15s, border-color .15s; }
.rp-nav a .cs-ic { width: 30px; height: 30px; font-size: 13px; background: var(--t); color: var(--c); }
.rp-nav a span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-nav a b { font-size: 13.5px; color: var(--text-primary); }
.rp-nav a small { font-size: 11.5px; line-height: 1.35; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rp-nav a:hover { background: var(--bg-primary); }
.rp-nav a.on { background: var(--t); border-color: var(--c); }
.rp-nav a.on .cs-ic { background: var(--c); color: #fff; }
.rp-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.rp-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin: 0; }
.rp-ic { width: 52px; height: 52px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px;
    font-style: normal; background: var(--t); color: var(--c); }
.rp-head-tx { flex: 1; min-width: 0; }
.rp-head h2 { margin: 0 0 4px; font-size: 20px; color: var(--text-primary); }
.rp-head p { margin: 0; font-size: 13px; color: var(--text-muted); }
.rp-period { flex: none; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 20px; background: var(--bg-primary); color: var(--text-secondary);
    border: 1px solid var(--border-color); white-space: nowrap; }
.rp-period i { color: var(--navy-accent); margin-right: 6px; }

.rp-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rp-bar button, .rp-seg button { height: 42px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); color: var(--text-secondary);
    font-size: 13.5px; font-weight: 600; cursor: pointer; touch-action: manipulation; transition: border-color .15s, background .15s; }
.rp-bar button:hover, .rp-seg button:hover { border-color: var(--navy-accent); color: var(--text-primary); }
.rp-bar button.on, .rp-seg button.on { background: rgba(var(--navy-accent-rgb), .12); border-color: var(--navy-accent); color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--navy-accent); }
.rp-opts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rp-opts:not(:has(> div:not(.initially-hidden))) { display: none; }
.rp-custom { display: flex; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); }
.rp-custom label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.rp-custom input { padding: 7px 10px; font-size: 14px; border: 1px solid var(--input-border); border-radius: 6px; background: var(--input-bg); color: var(--text-primary); }
.rp-seg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rp-seg > span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-right: 4px; }
.rp-seg button { padding: 0 14px; }
.rp-party { min-width: 320px; }
.rp-party .sd { width: 100%; }
.rp-party .sd-btn { height: 42px; }

.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.rp-kpis:empty { display: none; }
.rp-kpis .cs-tile > b { font-size: 19px; }

.rp-card { padding: 0; margin: 0; overflow: hidden; }
.rp-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-light); }
.rp-card-h h3 { margin: 0; font-size: 14px; color: var(--text-primary); display: flex; gap: 8px; align-items: center; }
.rp-card-h h3 i { color: var(--navy-accent); }
.rp-chart { position: relative; height: 290px; padding: 14px 18px; }
.rp-card #tbl { padding: 0; }
.rp-card #skel { padding: 14px 18px; }
.rp-card .inv-empty { margin: 18px; }
.rp-card .tabulator { border: 0; }
.rp-card .tabulator .tabulator-calcs-bottom .tabulator-cell { background: var(--bg-primary); border-top: 2px solid var(--border-color); }

@media (max-width: 1100px) {
    .rp-wrap { grid-template-columns: 1fr; }
    .rp-nav { position: static; max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-nav-g { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .rp-nav { grid-template-columns: 1fr; }
    .rp-nav a small { display: none; }
    .rp-head { flex-wrap: wrap; }
    .rp-period { width: 100%; text-align: center; }
    .rp-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-bar button:last-child { grid-column: 1 / -1; }
    .rp-party { min-width: 0; width: 100%; }
    .rp-chart { height: 240px; }
}

/* ---------- invoice form: add by code + keyboard ---------- */
.invf-code { margin: 0 0 12px; padding: 12px; border: 1px dashed rgba(var(--navy-accent-rgb), .55); border-radius: 6px; background: rgba(var(--navy-accent-rgb), .05); }
.invf-code label { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.invf-code label i { color: var(--navy-accent); }
.invf-code label kbd, .invf-btns .btn kbd { margin-left: auto; padding: 0 5px; font: 700 10.5px/1.6 inherit; border-radius: 3px; border: 1px solid currentColor; opacity: .7; }
.invf-code-in { display: flex; }
.invf-code-in input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; font-size: 20px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums;
    border: 1px solid var(--input-border, var(--border-color)); border-right: 0; border-radius: 4px 0 0 4px; background: var(--input-bg, var(--bg-card)); color: var(--text-primary); }
.invf-code-in input::placeholder { font-size: 14px; font-weight: 400; letter-spacing: 0; }
.invf-code-in input:focus { outline: 0; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(var(--navy-accent-rgb), .15); }
.invf-code-in button { width: 46px; flex: none; border: 0; border-radius: 0 4px 4px 0; background: var(--navy-primary); color: #fff; cursor: pointer; touch-action: manipulation; }
.invf-code-in button:hover { background: var(--navy-accent); }
.invf-code-hint { display: block; min-height: 17px; margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.invf-code-hint.ok { color: #15803d; } .invf-code-hint.bad { color: var(--danger); }
.invf-code-hint a { color: var(--navy-accent); }
.invf-btns .btn { gap: 8px; }
.invf-btns .btn kbd { margin-left: 4px; opacity: .65; }

/* quantity popup */
.qpop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); animation: qpFade .12s ease; }
.qpop[hidden] { display: none; }
.qpop-card { width: 100%; max-width: 420px; border-radius: 10px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3); animation: qpPop .16s ease; }
.qpop-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--navy-primary); color: #fff; }
.qpop-code { min-width: 46px; height: 46px; padding: 0 8px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 8px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qpop-title { flex: 1; min-width: 0; }
.qpop-head b { display: block; font-size: 16px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qpop-head small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.qpop-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; touch-action: manipulation; }
.qpop-x:hover { background: rgba(255, 255, 255, .25); }
.qpop-body { padding: 18px; }
.qpop-card label { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.qpop-card label i { color: var(--navy-accent); margin-right: 4px; }
.qpop-card label em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.qpop-step { display: flex; align-items: stretch; border: 2px solid var(--navy-accent); border-radius: 8px; overflow: hidden; background: var(--input-bg, var(--bg-card)); }
.qpop-step:focus-within { box-shadow: 0 0 0 4px rgba(var(--navy-accent-rgb), .18); }
.qpop-step button { width: 56px; flex: none; border: 0; background: var(--bg-primary); color: var(--navy-primary); font-size: 16px; cursor: pointer; touch-action: manipulation; }
.qpop-step button:hover { background: var(--navy-accent); color: #fff; }
.qpop-card .qpop-step input { flex: 1; min-width: 0; width: auto; height: 58px; padding: 0 8px; border: 0; box-shadow: none; font-size: 28px !important; font-weight: 800;
    text-align: center; font-variant-numeric: tabular-nums; background: transparent; color: var(--text-primary); -moz-appearance: textfield; }
.qpop-step input::-webkit-inner-spin-button, .qpop-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qpop-card .qpop-step input:focus { outline: 0; box-shadow: none; }
.qpop-step:has(input.bad) { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(220, 38, 38, .15); }
.qpop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qpop-chips:empty { display: none; }
.qpop-chips button { min-width: 44px; height: 32px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-card);
    color: var(--text-primary); font-weight: 700; font-size: 13px; cursor: pointer; touch-action: manipulation; }
.qpop-chips button:hover { border-color: var(--navy-accent); color: var(--navy-accent); }
.qpop-chips button.max { margin-left: auto; border-style: dashed; color: var(--navy-accent); }
.qpop-stock { margin-top: 14px; }
.qpop-stock[hidden] { display: none; }
.qpop-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-muted); }
.qpop-line i { margin-right: 4px; }
.qpop-line b { font-size: 15px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.qpop-bar { height: 6px; margin-top: 6px; border-radius: 3px; background: var(--border-light); overflow: hidden; }
.qpop-bar i { display: block; height: 100%; border-radius: 3px; background: var(--success); transition: width .15s; }
.qpop-warn { display: block; margin-top: 10px; padding: 8px 10px; border-radius: 4px; font-size: 12.5px; background: #fff4e5; color: #9a4d00; }
.qpop-warn[hidden] { display: none; }
.qpop-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 8px;
    background: rgba(var(--navy-accent-rgb), .08); border: 1px solid rgba(var(--navy-accent-rgb), .25); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.qpop-total small { display: block; margin-top: 2px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.qpop-total b { font-size: 22px; color: var(--navy-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.dark-mode .qpop-total b { color: var(--text-primary); }
.qpop-actions { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border-light); background: var(--bg-primary); }
.qpop-actions .btn { flex: 1; justify-content: center; }
.qpop-actions #qpAdd { flex: 1.4; }
.qpop-actions .btn:disabled { opacity: .5; cursor: not-allowed; }
.qpop-actions kbd { margin-left: 6px; padding: 0 5px; font-size: 10.5px; border-radius: 3px; border: 1px solid currentColor; opacity: .7; background: transparent; color: inherit; }
@media (max-width: 480px) { .qpop { align-items: flex-end; padding: 0; } .qpop-card { max-width: none; border-radius: 14px 14px 0 0; } .qpop-actions kbd { display: none; } }

.shake { animation: invShake .3s; }
#rows tr.flash td { animation: rowFlash 1.2s ease; }
@keyframes qpFade { from { opacity: 0; } }
@keyframes qpPop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes invShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes rowFlash { 0%, 30% { background: rgba(22, 163, 74, .16); } }
@media (prefers-reduced-motion: reduce) { .qpop, .qpop-card, .shake, #rows tr.flash td { animation: none; } }
.qpop-warn:has(.fa-triangle-exclamation) { background: #fde8e6; color: #b3261e; }

/* invoice form: A4 draft preview popup */
.invf-prev-btn { background: transparent; color: var(--navy-primary); border: 1px dashed var(--navy-accent); }
.invf-prev-btn:hover { background: rgba(var(--navy-accent-rgb), .08); color: var(--navy-accent); }
body.dark-mode .invf-prev-btn { color: var(--text-primary); }
body.pvw-lock { overflow: hidden; }
.pvw { position: fixed; inset: 0; z-index: 1150; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); animation: qpFade .12s ease; }
.pvw[hidden] { display: none; }
.pvw-card { display: flex; flex-direction: column; width: 100%; max-width: 920px; height: 100%; max-height: calc(100vh - 32px); border-radius: 10px; overflow: hidden;
    background: var(--bg-card); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); animation: qpPop .16s ease; }
.pvw-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--navy-primary); color: #fff; }
.pvw-head > b { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #fff; }
.pvw-head > b em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px;
    background: rgba(255, 255, 255, .18); }
.pvw-tpls { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.pvw-tpls button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 16px;
    background: transparent; color: rgba(255, 255, 255, .85); font-size: 12px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.pvw-tpls button:hover { border-color: #fff; color: #fff; }
.pvw-tpls button.on { background: #fff; border-color: #fff; color: var(--navy-primary); }
.pvw-x { width: 34px; height: 34px; flex: none; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; cursor: pointer; }
.pvw-x:hover { background: rgba(255, 255, 255, .25); }
.pvw-body { flex: 1; overflow: auto; padding: 16px; background: #e9edf2; transition: opacity .15s; }
.pvw-body.busy { opacity: .55; }
.pvw-body .inv-doc { margin: 0 auto; }
.pvw-foot { padding: 9px 16px; border-top: 1px solid var(--border-color); font-size: 12px; }
.pvw-foot kbd { padding: 0 5px; font-size: 11px; border: 1px solid var(--border-color); border-bottom-width: 2px; border-radius: 3px; background: var(--bg-secondary); }
@media (max-width: 700px) { .pvw-tpls { order: 3; width: 100%; margin-left: 0; } .pvw-x { margin-left: auto; } }
@media print { .pvw { display: none !important; } }

/* ================= tax rates ================= */
.tx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 4px 0 14px; }
.tx-kpis .cs-tile > b { font-size: 20px; }
.tx-note { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px;
    background: rgba(var(--navy-accent-rgb), .07); color: var(--text-secondary); }
.tx-note i { color: var(--navy-accent); }
.tx-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tx-name b { font-size: 14px; color: var(--text-primary); }
.tx-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; }
.tx-tag.def { background: rgba(22, 163, 74, .12); color: #15803d; }
.tx-tag.off { background: rgba(148, 163, 184, .18); color: #64748b; }
.tx-rate { display: flex; align-items: center; gap: 12px; width: 100%; }
.tx-rate b { min-width: 72px; text-align: center; padding: 4px 10px; border-radius: 8px; font-size: 14px; font-variant-numeric: tabular-nums;
    background: var(--t); color: var(--c); }
.tx-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-primary); overflow: hidden; }
.tx-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c); }
.tx-rate.zero { --c: #64748b; --t: rgba(100, 116, 139, .12); }
.tx-rate.low  { --c: #0d9488; --t: rgba(13, 148, 136, .12); }
.tx-rate.mid  { --c: #d97706; --t: rgba(217, 119, 6, .12); }
.tx-rate.high { --c: #dc2626; --t: rgba(220, 38, 38, .10); }
.tx-used { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.tx-used i { color: #2563eb; margin-right: 4px; }
.tx-used.none { color: var(--text-muted); font-weight: 400; font-style: italic; }
.tx-star { border: 0; background: none; cursor: pointer; font-size: 17px; color: var(--border-color); padding: 4px 8px; border-radius: 6px; }
.tx-star:hover { color: #f2b21b; background: rgba(242, 178, 27, .1); }
.tx-star.on { color: #f2b21b; cursor: default; }
.tx-calc { margin-top: 6px; padding: 12px 14px; border-radius: 8px; background: rgba(var(--navy-accent-rgb), .08); font-size: 13.5px; color: var(--text-secondary); }
.tx-calc i { color: var(--navy-accent); margin-right: 6px; }
.tx-calc b { color: var(--text-primary); }
@media (max-width: 1100px) { .tx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .tx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* dropdown option tag (data-meta) — balances, counts, statuses */
.sd-meta { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    font-variant-numeric: tabular-nums; background: var(--bg-primary); color: var(--text-muted); }
.sd-meta + .tick { margin-left: 8px; }
.sd-opt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sd-meta.due { background: #fff1e0; color: #a35a00; }
.sd-meta.adv { background: #e3f6ec; color: #1b7a45; }
.sd-meta.nil { background: var(--bg-primary); color: var(--text-muted); font-weight: 600; }
body.dark-mode .sd-meta.due { background: #3a2a12; color: #f5b964; }
body.dark-mode .sd-meta.adv { background: #123325; color: #6fd6a0; }

/* ================= my account ================= */
.ac-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: center; padding: 22px; margin: 0 0 18px;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px;
    background-image: linear-gradient(120deg, rgba(var(--navy-accent-rgb), .10), transparent 55%); }
.ac-hero-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ac-avatar { position: relative; width: 96px; height: 96px; flex: none; border-radius: 50%; background: var(--bg-primary);
    border: 3px solid var(--bg-card); box-shadow: 0 0 0 2px var(--navy-accent), 0 6px 18px rgba(0, 0, 0, .1);
    display: flex; align-items: center; justify-content: center; }
.ac-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ac-avatar > i { font-size: 38px; color: var(--text-muted); }
.ac-cam { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--navy-accent); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; border: 3px solid var(--bg-card); font-size: 12px; }
.ac-cam:hover { filter: brightness(1.08); }
.ac-id-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ac-id-tx h2 { margin: 0; font-size: 22px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.ac-mail { font-size: 13px; color: var(--text-secondary); }
.ac-mail i { color: var(--text-muted); margin-right: 4px; }
.ac-role .status-badge { font-size: 11px; }
.ac-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ac-tiles .cs-tile > b { font-size: 16px; }
.ac-card { padding: 0; margin: 0 0 18px; overflow: hidden; }
.ac-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.ac-drop { align-items: center; }
.ac-drop-ic { width: 64px; height: 64px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--navy-accent-rgb), .12); color: var(--navy-accent); font-size: 24px; }
.ac-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.ac-meter span { height: 5px; border-radius: 3px; background: var(--bg-primary); }
.ac-meter span.weak { background: #dc2626; } .ac-meter span.fair { background: #d97706; }
.ac-meter span.good { background: #2563eb; } .ac-meter span.strong { background: #16a34a; }
.ac-meter-tx { display: block; margin-top: 5px; font-size: 12px; color: var(--text-muted); }
.ac-meter-tx.weak { color: #dc2626; } .ac-meter-tx.fair { color: #b45309; } .ac-meter-tx.good { color: #2563eb; } .ac-meter-tx.strong { color: #15803d; }
.ac-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ac-links a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px;
    text-decoration: none; color: var(--text-primary); transition: border-color .15s, background .15s; }
.ac-links a:hover { border-color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .05); }
.ac-links a span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ac-links b { font-size: 13.5px; }
.ac-links small { font-size: 12px; color: var(--text-muted); }
.ac-links a > i { color: var(--text-muted); font-size: 12px; }
@media (max-width: 1100px) { .ac-hero { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .ac-hero-id { flex-direction: column; text-align: center; }
    .ac-tiles { grid-template-columns: 1fr; }
    .ac-actions .btn { width: 100%; justify-content: center; }
}

/* searchable dropdown list — compact rows, one line per option, grows to fit its longest label */
.sd-pop { width: max-content; max-width: min(420px, calc(100vw - 16px)); }
.sd-search { padding: 6px; }
.sd-search input { height: 32px; padding: 0 9px; font-size: 13px; }
.sd-list { padding: 3px; }
.sd-opt { padding: 6px 9px; gap: 10px; font-size: 13px; line-height: 1.35; white-space: nowrap; }
.sd-opt i.tick { font-size: 11px; }
.sd-none { padding: 10px; font-size: 12.5px; }
@media (max-width: 768px) {
    .sd-search input { height: 38px; font-size: 16px; }   /* 16px stops ios zoom-on-focus */
    .sd-opt { padding: 9px 10px; font-size: 14px; white-space: normal; }
}

/* purchase form: supplier bill # + scan under the supplier/dates row */
.invf-bill { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; border-top: 1px solid var(--border-light); }
.invf-bill .form-group { margin-bottom: 0; }
.invf-disc small { font-size: 11.5px; }
@media (max-width: 768px) { .invf-bill { grid-template-columns: 1fr; } }

/* credit note form */
.cn-lines td input[type=number] { width: 100%; max-width: 110px; text-align: right; }
.cn-lines tr.cn-done td { opacity: .5; }
.cn-lines td small { display: block; color: var(--text-muted); font-size: 12px; }
.cn-effect { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--border-light); font-size: 13px; }
.cn-effect:empty { display: none; }
.cn-effect div { display: flex; justify-content: space-between; padding: 3px 0; }
.cn-effect p { margin: 8px 0 0; color: var(--text-muted); }
.cn-effect p i { color: var(--primary-light, #0074D9); }

/* cash & bank account cards */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.acc-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.acc-card:hover { border-color: var(--navy-accent); }
.acc-card.on { border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(var(--navy-accent-rgb), .18); }
.acc-card.off { opacity: .6; }
.acc-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acc-top .pill { margin-left: auto; }
.acc-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--navy-primary); }
.acc-ic.t-cash { background: var(--success); } .acc-ic.t-bank { background: var(--navy-accent); } .acc-ic.t-wallet { background: #6a1b9a; } .acc-ic.t-card { background: #92520a; }
.acc-nm { min-width: 0; }
.acc-nm b, .acc-nm small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-nm small { color: var(--text-muted); font-size: 12px; }
.acc-bal { font-size: 22px; font-weight: 700; margin: 12px 0 8px; font-variant-numeric: tabular-nums; }
.acc-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-muted); }
.acc-btns { display: flex; gap: 4px; }
.acc-btns button { border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); width: 30px; height: 30px; border-radius: 3px; cursor: pointer; }
.acc-btns button:hover { border-color: var(--navy-accent); color: var(--navy-accent); }
.acc-btns button.del:hover { border-color: var(--danger); color: var(--danger); }
.acc-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.acc-kinds button { padding: 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); border-radius: 3px; font: inherit; cursor: pointer; }
.acc-kinds button.on { border-color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .08); color: var(--navy-accent); font-weight: 600; }

/* expenses */
.exp-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--border-color); border-radius: 4px; }
.exp-total b { font-size: 18px; font-variant-numeric: tabular-nums; }
.exp-cat-add { display: flex; gap: 8px; margin-bottom: 14px; }
.exp-cat-add input { flex: 1; min-width: 0; }
.exp-cats { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.exp-cat { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-light); border-radius: 3px; }
.exp-cat i { width: 18px; color: var(--navy-accent); }
@media (max-width: 600px) { .acc-kinds { grid-template-columns: 1fr; } .acc-bal { font-size: 20px; } }

/* whatsapp share */
.tab-act button.wa:hover { background: rgba(37, 211, 102, .14); color: #128c4a; }
.wa-vars { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.wa-vars code { font-size: 11px; padding: 2px 6px; border-radius: 3px; background: rgba(var(--navy-accent-rgb), .08); color: var(--navy-accent); }
.wa-tpls { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.wa-tpls textarea { width: 100%; resize: vertical; font-size: 16px; }
.wa-tpls label i { color: #25d366; }

/* pay now — public invoice */
.pay-now { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; padding: 16px 18px; margin-bottom: 16px; }
.pay-now header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pay-now header span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.pay-now header b { font-size: 24px; font-variant-numeric: tabular-nums; color: var(--navy-primary); }
body.dark-mode .pay-now header b { color: #fff; }
.pay-now details { margin-top: 12px; border-top: 1px solid var(--border-light); padding-top: 12px; }
.pay-now summary { cursor: pointer; font-weight: 600; color: var(--navy-accent); list-style: none; }
.pay-now summary::-webkit-details-marker { display: none; }
.pay-form-pub { margin-top: 12px; }
.pay-form-pub input:not([type=radio]) { font-size: 16px; }
.pay-form-pub .btn { margin-top: 10px; width: 100%; justify-content: center; }
.pay-methods { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-methods label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 3px; cursor: pointer; }
.pay-methods label:has(input:checked) { border-color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .08); color: var(--navy-accent); }
.pay-msg { margin: 12px 0 0; padding: 10px 12px; border-radius: 3px; background: #fdecec; color: #b3261e; }
.pay-msg.ok { background: #e3f6ec; color: #1b7a45; }
.pay-claim { margin: 10px 0 0; font-size: 14px; color: var(--text-secondary); }
.pay-claim.st-pending i { color: var(--warning); } .pay-claim.st-approved i { color: var(--success); } .pay-claim.st-rejected i { color: var(--danger); }

/* payment proofs inbox */
.claims-card { padding: 14px 16px; margin-bottom: 16px; }
.claims-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.claims-h small { color: var(--text-muted); }
.claims-list { display: grid; gap: 8px; }
.claim { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 4px; }
.claim.st-pending { border-left: 3px solid var(--warning); }
.claim.st-approved, .claim.st-rejected { opacity: .7; }
.claim-main, .claim-amt { min-width: 0; }
.claim-main b, .claim-main small, .claim-amt b, .claim-amt small { display: block; }
.claim-main small, .claim-amt small { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.claim-amt { text-align: right; } .claim-amt b { font-variant-numeric: tabular-nums; }
.claim-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.claim-act .sd, .claim-act select { min-width: 150px; }
@media (max-width: 760px) { .claim { grid-template-columns: 1fr; } .claim-amt { text-align: left; } .claim-act { justify-content: flex-start; } }

/* recurring invoices */
.pill-paused { background: #fff8e1; color: #ef6c00; } .pill-ended { background: #eceff1; color: #546e7a; }
.rec-sched { display: grid; gap: 12px; }
.rec-every { display: flex; align-items: center; gap: 8px; }
.rec-every input { width: 90px; flex: none; }
.rec-every span { color: var(--text-muted); }
.rec-plan { list-style: none; margin: 0; padding: 10px 12px; border: 1px dashed var(--border-color); border-radius: 4px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.rec-plan li.h { width: 100%; font-weight: 600; color: var(--text-secondary); }
.rec-plan li i { color: var(--navy-accent); }
.rec-plan em { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: rgba(var(--navy-accent-rgb), .1); color: var(--navy-accent); }
.pill-received { background: #e8f5e9; color: #2e7d32; } .pill-closed { background: #ede7f6; color: #5e35b1; }
.pill-delivered { background: #e3f2fd; color: #1565c0; } .pill-invoiced { background: #e8f5e9; color: #2e7d32; }

/* price lists */
.pl-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px; }
.pl-h small { color: var(--text-muted); flex: 1; }

/* header branch switcher */
.head-branch { position: relative; }
.head-branch summary, .head-branch.is-fixed { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-card); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; }
.head-branch summary::-webkit-details-marker { display: none; }
.head-branch summary i:first-child, .head-branch.is-fixed i { color: var(--navy-accent); }
.head-branch.is-fixed { cursor: default; }
.head-branch .hb-caret { font-size: 10px; color: var(--text-muted); }
.head-branch[open] summary { border-color: var(--navy-accent); }
.hb-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 10px 30px var(--shadow-color); padding: 6px; z-index: 60; }
.hb-menu a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 3px; color: var(--text-primary); text-decoration: none; font-size: 14px; }
.hb-menu a:hover { background: var(--table-hover); }
.hb-menu a.on { background: rgba(var(--navy-accent-rgb), .1); color: var(--navy-accent); font-weight: 600; }
.hb-menu a i { width: 16px; color: var(--navy-accent); }
.hb-menu em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-muted); }
@media (max-width: 760px) { .head-branch summary span, .head-branch.is-fixed span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; } }

/* user form branch chips */
.user-branches { display: flex; flex-wrap: wrap; gap: 6px; }
.user-branches label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--border-color); border-radius: 3px; cursor: pointer; font-size: 14px; }
.user-branches label:has(input:checked) { border-color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .08); color: var(--navy-accent); }

/* admin module — custom field block, party groups modal, bulk group picker */
.cf-head { margin: 4px 0 -4px; padding-top: 10px; border-top: 1px dashed var(--border-color); }
.cf-head span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.cf-head span i { color: var(--navy-accent); margin-right: 6px; }
.grp-add { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); }
.grp-table input.grp-name { width: 100%; min-width: 140px; }
.grp-table .grp-act { white-space: nowrap; }
.grp-table .grp-act .btn + .btn { margin-left: 6px; }
.inv-bulk .bulk-group, .inv-bulk .bulk-group + .sd { min-width: 160px; max-width: 220px; }
.inv-bulk .sd:has(> .bulk-group) { min-width: 160px; max-width: 220px; }

/* reports pack: branch picker, tab segment, filing csv, statement rows, expiry pills */
.rp-bar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rp-branch { min-width: 220px; }
.rp-branch .sd { width: 100%; }
.rp-branch .sd-btn { height: 42px; }
.rp-extra .btn { height: 42px; }
.rp-note { margin: 0; padding: 10px 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); background: rgba(var(--navy-accent-rgb), .06);
    border: 1px solid var(--border-light); border-left: 3px solid var(--navy-accent); border-radius: 6px; }
.rp-note i { color: var(--navy-accent); margin-right: 4px; }
.rp-card .tabulator-row.rp-k-head .tabulator-cell { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); background: var(--bg-primary); }
.rp-card .tabulator-row.rp-k-total .tabulator-cell { font-weight: 700; border-top: 1px solid var(--border-color); }
.rp-card .tabulator-row.rp-k-grand .tabulator-cell { font-weight: 800; color: var(--text-primary); background: rgba(var(--navy-accent-rgb), .08); border-top: 2px solid var(--navy-accent); }
.rpt-table tr.rp-k-head td { padding-top: 9px; font-size: 7.5pt; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; border-bottom: 1px solid #d9dee6; }
.rpt-table tr.rp-k-total td { font-weight: 700; background: #f6f7f9; }
.rpt-table tr.rp-k-grand td { font-weight: 800; border-top: 1.5px solid #111827; border-bottom: 3px double #111827; background: #f3f5f8; }
.pill-soon { background: #fff3e0; color: #e65100; }
.pill-watch { background: rgba(var(--navy-accent-rgb), .12); color: var(--navy-accent); }
.pill-none { background: var(--bg-primary); color: var(--text-muted); }
@media (max-width: 768px) {
    .rp-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-branch, .rp-extra, .rp-extra .btn { width: 100%; min-width: 0; }
}

/* ---------- money: payment discount + cheque fields ---------- */
.pay-chq[hidden], #allocDiscBox[hidden] { display: none !important; }
.pay-tally:has(#allocDiscBox:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#allocDiscBox { --c: #7b1fa2; }
.pill-in_hand { background: #fff3e0; color: #e65100; }
.pill-deposited { background: #e3f2fd; color: #1565c0; }
.pill-cleared, .pill-reconciled { background: #e8f5e9; color: #2e7d32; }
.pill-bounced { background: #ffebee; color: #c62828; }
.pill-open { background: #fff8e1; color: #8d6e00; }

/* ---------- cheques ---------- */
.chq-note { margin: 0 0 12px; }
.chq-sum { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px;
    border: 1px dashed var(--border-color); border-radius: 4px; color: var(--text-secondary); min-width: 0; }
.chq-sum span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chq-sum b { font-size: 18px; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- bank reconciliation ---------- */
.br-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.br-head .form-group { margin: 0; min-width: 180px; flex: 0 1 220px; }
.br-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.br-btns [hidden] { display: none; }
.br-tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.br-t { --c: var(--navy-primary); padding: 10px 12px; border: 1px solid var(--border-light); border-left: 4px solid var(--c); border-radius: 4px; background: var(--bg-card); min-width: 0; }
.br-t.t-green { --c: var(--success); } .br-t.t-red { --c: var(--danger); } .br-t.t-amber { --c: var(--warning); } .br-t.t-blue { --c: var(--navy-accent); }
.br-t span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-t span i { color: var(--c); margin-right: 3px; }
.br-t b { display: block; margin-top: 3px; font-size: 17px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.br-t.t-amber b { color: var(--warning); } .br-t.t-green:last-child b { color: var(--success); }

/* ---------- loans ---------- */
.loan-emi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.loan-emi > div { padding: 10px 12px; border: 1px dashed var(--border-color); border-radius: 4px; min-width: 0; }
.loan-emi span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.loan-emi b { display: block; margin-top: 2px; font-size: 16px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.loan-sched { max-height: 280px; overflow-y: auto; border: 1px solid var(--border-light); border-radius: 4px; }
.loan-sched td.r, .loan-sched th.r { text-align: right; font-variant-numeric: tabular-nums; }
.loan-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.loan-meta > div { padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 4px; min-width: 0; }
.loan-meta span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.loan-meta b { display: block; margin-top: 2px; color: var(--text-primary); overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .pay-tally:has(#allocDiscBox:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .br-head .form-group { flex: 1 1 100%; }
    .br-btns { margin-left: 0; width: 100%; }
    .br-btns .btn { flex: 1 1 auto; }
}

/* ---------- items: scan box, line batches / serials, label sheet ---------- */
.invf-scan { border-style: solid; }
.invf-scan .invf-code-in input { font-size: 16px; letter-spacing: .02em; }
.invf-code-in button.invf-add { border-radius: 0; }
.invf-code-in button.invf-cam { border-radius: 0 4px 4px 0; border-left: 1px solid rgba(255,255,255,.18); background: var(--navy-accent); }
.invf-code-in button.invf-cam:hover { background: var(--navy-primary); }
.invf-code-in button.invf-add:last-child { border-radius: 0 4px 4px 0; }
/* camera scan popup */
.modal.cam-modal { max-width: 520px; }
.cam-view { width: 100%; min-height: 240px; background: var(--navy-dark); border-radius: 4px; overflow: hidden; }
.cam-view video { width: 100% !important; display: block; }
.cam-status { margin: 12px 0 4px; font-weight: 600; color: var(--text-primary); }
.cam-status.ok { color: var(--success); }
.cam-status.bad { color: var(--danger); }
.cam-status em { font-style: normal; font-weight: 500; color: var(--text-muted); }
.cam-tip { margin: 0; font-size: 13px; color: var(--text-muted); }
.cam-tip i { color: var(--warning); }
.cam-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 768px) { .cam-view { min-height: 300px; } }
.r-lots { margin-top: 6px; display: grid; gap: 5px; }
.r-lots[hidden] { display: none; }
.r-lot-in { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.r-lots input, .r-lots textarea { width: 100%; min-width: 0; padding: 6px 8px; font-size: 16px; border: 1px solid var(--border-color); border-radius: 3px; background: var(--bg-card); color: var(--text-primary); }
.r-lots textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.4; }
.r-lots input:focus, .r-lots textarea:focus { outline: 0; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(var(--navy-accent-rgb), .15); }
.r-ser-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.r-ser-n { font-size: 11.5px; color: var(--success); font-weight: 600; }
.r-ser-n.bad { color: var(--danger); }
.r-ser-pick { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--navy-accent); border-radius: 3px; padding: 3px 8px; font-size: 12px; cursor: pointer; touch-action: manipulation; }
.r-ser-pick:hover { background: rgba(var(--navy-accent-rgb), .1); }
.ser-pick { max-height: 320px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; text-align: left; }
.ser-pick label { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--border-light); border-radius: 3px; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.ser-pick label:has(input:checked) { border-color: var(--navy-accent); background: rgba(var(--navy-accent-rgb), .1); }
.inv-doc .pd-lines .pd-lot { display: block; margin-top: 2px; font-size: .86em; color: #555; }

.lbl-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-bottom: 16px; }
.lbl-wrap .lte-card, .lbl-preview { padding: 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; }
.lbl-add { align-items: end; }
.lbl-add-btn .btn { width: 100%; }
.lbl-copies { width: 80px; padding: 5px 7px; font-size: 16px; border: 1px solid var(--border-color); border-radius: 3px; background: var(--bg-card); color: var(--text-primary); }
.lbl-preview { overflow-x: auto; }
.lbl-sheet { display: grid; gap: 0; margin: 0 auto; background: #fff; color: #111; }
.lbl-sheet.sz-a4-3x8 { grid-template-columns: repeat(3, 70mm); grid-auto-rows: 37.1mm; width: 210mm; }
.lbl-sheet.sz-a4-4x10 { grid-template-columns: repeat(4, 52.5mm); grid-auto-rows: 29.7mm; width: 210mm; }
.lbl-sheet.sz-th-50x25 { grid-template-columns: 50mm; grid-auto-rows: 25mm; width: 50mm; gap: 3mm; }
.lbl { box-sizing: border-box; overflow: hidden; padding: 2mm 3mm; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #d5d9e2; text-align: center; }
.lbl-blank { border-style: dotted; opacity: .4; }
.lbl-name { font-size: 9pt; line-height: 1.15; max-height: 2.3em; overflow: hidden; width: 100%; }
.lbl-bc { max-width: 100%; height: auto; margin: 1mm 0; }
.lbl-foot { display: flex; justify-content: space-between; width: 100%; font-size: 8pt; gap: 4px; }
.sz-a4-4x10 .lbl-name, .sz-th-50x25 .lbl-name { font-size: 7.5pt; }
.sz-th-50x25 .lbl { padding: 1mm 2mm; }
@media print {
    .lbl-preview { border: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible; box-shadow: none; }
    .lbl-sheet .lbl { border-color: transparent; }
    .lbl-blank { visibility: hidden; }
    .sz-th-50x25.lbl-sheet { gap: 0; }
    .sz-th-50x25 .lbl { break-after: page; page-break-after: always; }
    .lbl-sheet.sz-a4-3x8 .lbl:nth-child(24n), .lbl-sheet.sz-a4-4x10 .lbl:nth-child(40n) { break-after: page; }
}
@media (max-width: 900px) { .lbl-wrap { grid-template-columns: 1fr; } }

/* ===== document extras: charges, currency, round-off, units, free qty, last rate ===== */
.dx-box:empty { display: none; }
.dx-box { padding: 4px 0; border-top: 1px dashed var(--border-light); border-bottom: 1px dashed var(--border-light); margin: 4px 0; }
.dx-cur { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; font-size: 13.5px; color: var(--text-secondary); }
.dx-cur-lbl { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-primary); }
.dx-cur-lbl i { color: var(--navy-accent); }
.dx-cur .sd { width: 100%; }
.dx-cur .sd-btn { min-height: 38px; }
.dx-rate-row { display: none; align-items: center; gap: 8px; padding: 6px 8px; border: 1px dashed var(--navy-accent); border-radius: 6px; background: rgba(var(--navy-accent-rgb), .05); }
.dx-cur.is-foreign .dx-rate-row { display: flex; }
.dx-rate-pre, .dx-rate-base { white-space: nowrap; font-weight: 600; color: var(--text-primary); }
.dx-rate-row .dx-rate { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; text-align: right; border: 1px solid var(--navy-accent); border-radius: 6px;
    background: var(--bg-card); color: var(--text-primary); font-size: 16px; }
.dx-cur-note { color: var(--navy-accent); font-weight: 600; }
.dx-cur-note:empty { display: none; }
.dx-ch { padding: 4px 0; }
.dx-ch-row { display: grid; grid-template-columns: 1fr 92px; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--border-light); position: relative; }
.dx-ch-row input { height: 32px; padding: 0 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); font-size: 16px; min-width: 0; }
.dx-ch-row .dx-ch-amt { text-align: right; }
.dx-ch-row .sd, .dx-ch-row .dx-ch-tax { grid-column: 1 / 2; }
.dx-ch-del { grid-column: 2 / 3; justify-self: end; align-self: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: rgba(var(--navy-accent-rgb), .08);
    color: var(--danger); cursor: pointer; touch-action: manipulation; }
.dx-ch-add { margin: 6px 0 2px; border: 1px dashed var(--border-color); background: transparent; color: var(--navy-accent); border-radius: 6px; padding: 6px 10px;
    font-size: 13px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.dx-ch-add:hover { background: rgba(var(--navy-accent-rgb), .1); }
.invf-items .r-qtyrow { display: flex; gap: 4px; align-items: stretch; }
.invf-items .r-qtyrow .r-qty { flex: 1 1 auto; min-width: 48px; width: auto; }
.invf-items .r-qtyrow .r-free { flex: 0 0 58px; width: 58px; min-width: 0; padding: 0 6px; text-align: right; font-size: 13px; border: 1px dashed var(--border-color);
    border-radius: 6px; background: var(--bg-card); color: var(--success); }
.invf-items .r-qtyrow .r-free:focus { border-style: solid; border-color: var(--navy-accent); outline: none; }
.invf-items .r-ux { display: flex; gap: 4px; margin-top: 4px; }
.invf-items .r-ux:empty { display: none; }
.invf-items .r-ux .sd, .invf-items .r-ux select { flex: 1 1 60px; min-width: 0; }
.invf-items .r-last { display: block; margin-top: 3px; font-size: 11px; color: var(--navy-accent); text-align: right; white-space: nowrap; }
.invf-items .r-last[hidden] { display: none; }
.pd-lines .pd-meta { display: block; color: var(--text-muted); font-size: .85em; }
.pd-lines .pd-free { display: block; color: #15803d; font-size: .8em; font-weight: 600; white-space: nowrap; }
.pd-sum tr.chg td:first-child small { color: var(--text-muted); font-weight: 400; }
.pd-sum tr.ro td { font-style: italic; }
.pd-sum tr.base td { font-size: .85em; color: var(--text-muted); border-bottom: 0; }
@media (max-width: 768px) {
    .invf-items .r-ux { flex-basis: 100%; }
    .invf-items .r-last { text-align: left; }
}

/* ===== year close ===== */
.yc-card { padding: 18px; margin-bottom: 18px; }
.yc-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.yc-head h2 { margin: 0; font-size: 1.1rem; color: var(--text-primary); }
.yc-head small { color: var(--text-muted); }
.yc-preview { margin-top: 16px; border-top: 1px solid var(--border-light); padding-top: 12px; }
.yc-sub { margin: 16px 0 8px; font-size: .95rem; color: var(--text-primary); }
.yc-tot { margin-bottom: 8px; }
.invf-items .r-qtyrow .r-free { font-size: 16px; } /* no zoom on phones */

/* loyalty points */
.loy-box { padding: 8px 0; border-bottom: 1px dashed var(--border-light); margin: 4px 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.loy-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--text-secondary); }
.loy-head i { color: var(--warning); }
.loy-head b { color: var(--text-primary); font-weight: 600; font-size: 12.5px; }
.loy-row { display: flex; gap: 6px; }
.loy-row .loy-pts { flex: 1; min-width: 0; font-size: 16px; }
.loy-max { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--navy-accent); border-radius: 3px; padding: 0 10px; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.loy-max:hover { background: rgba(var(--navy-accent-rgb), .1); }
.loy-note { color: var(--text-muted); font-size: 12px; min-height: 0; }
.loy-note:empty { display: none; }
#lnLoy i { color: var(--warning); font-size: 11px; }
.loy-kpi { margin-bottom: 14px; }
.loy-adj { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--border-light); }
.loy-table td.r, .loy-table th.r { text-align: right; }
.loy-empty { text-align: center; color: var(--text-muted); padding: 18px !important; }
.ldg-pts { display: block; color: var(--text-muted); font-size: 11.5px; }
.ldg-stat.s-pts .ldg-ic { color: var(--warning); }
@media (min-width: 1201px) { .ldg-stats:has(.s-pts) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.public-loy { max-width: 900px; margin: 0 auto 14px; padding: 10px 14px; border: 1px solid var(--border-color); border-left: 3px solid var(--warning); border-radius: 3px; background: var(--bg-card); color: var(--text-secondary); font-size: 14px; }
.public-loy i { color: var(--warning); }
.public-loy b { color: var(--text-primary); }
@media print { .public-loy { display: none; } }