/*
  Developed by Mohammad Rameez Imdad (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;
    --success: #34a853;
    --warning: #fbbc04;
    --danger: #ea4335;

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

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

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

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

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

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

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

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

/* ===== Sidebar ===== */
.sidebar {
    width: 240px;
    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: 14px 14px;
    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: 0;
    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: 10px;
    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: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
    border-radius: 0;
    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);
}

/* no flex:1 here — it spread the leftover height across every group as dead space.
   .sidebar-theme's margin-top:auto pins theme+logout to the bottom instead */
.sidebar-menu-section {
    padding: 10px 12px 6px;
}

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

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

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

.sidebar-menu a,
.sidebar-menu button {
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    border-radius: 0;
    font-size: 14px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    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: 18px;
    text-align: center;
    font-size: 15px;
}

/* soak up the free space so the groups above stay tight */
.sidebar-theme { margin-top: auto; }

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

.sidebar-logout button {
    width: 100%;
    padding: 10px 14px;
    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: 0;
    font-size: 14px;
    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: 14px;
}

/* 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: 0;
    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: 0;
    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: 10px 8px;
}

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

.sidebar.collapsed .sidebar-menu a,
.sidebar.collapsed .sidebar-menu button {
    justify-content: center;
    padding: 11px 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: 0;
    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: 0;
    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: 0;
    transition: all 0.3s ease;
    background: none;
    border: none;
    cursor: pointer;
    min-width: 60px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.header {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 0;
    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;
    margin-bottom: 20px;
    border-radius: 0;
    box-shadow: 0 2px 4px var(--shadow-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* trailing margin inside a card doubles up with its padding — kill it so every card
   closes on exactly its own padding (filters box was leaving 45px of dead space) */
.data-section > *:last-child { margin-bottom: 0; }

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

@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: 0;
    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: 0;
}

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

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

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

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

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

/* one toolbar row, dt's own chrome reordered: search | length | exports, table under it,
   info + paging last. grid + explicit placement so 'Blfrtip', 'Bfrtip' and 'lfrtip' all line up */
.dataTables_wrapper {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    row-gap: 14px;
    column-gap: 12px;
}

/* dt's clearfix would eat a grid cell */
.dataTables_wrapper::after { content: none; }

/* the strip surface — abs positioned into row 1 so it never affects track sizing */
.dataTables_wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    grid-area: 1 / 1 / 2 / -1;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dt-buttons {
    position: relative; /* above the strip */
    z-index: 1;
    float: none;
    margin: 0;
    padding: 9px 0;
    text-align: left;
}

.dataTables_wrapper .dataTables_filter {
    grid-area: 1 / 1;
    min-width: 0;
    padding-left: 12px;
}

.dataTables_wrapper .dataTables_length { grid-area: 1 / 2; }

.dataTables_wrapper .dt-buttons {
    grid-area: 1 / 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 12px;
}

/* empty buttons box (dom without B) must not hold the strip open */
.dataTables_wrapper .dt-buttons:empty { display: none; }

/* table sits on its own row, full width of the strip */
.dataTables_wrapper table.dataTable {
    grid-column: 1 / -1;
    margin: 0;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-muted);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    margin: 0;
    padding: 8px 12px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dataTables_wrapper .dataTables_filter input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 280px;
}

.dataTables_wrapper .dataTables_length select { cursor: pointer; }

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

.dt-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    margin: 0 !important;
    padding: 8px 14px !important;
    background: var(--navy-primary) !important;
    background-image: none !important;
    border: 1px solid var(--navy-primary) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer !important;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

/* dt wraps the icon + label in a span */
.dt-button span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dt-button:hover,
.dt-button:focus {
    background: var(--navy-hover) !important;
    border-color: var(--navy-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.dt-button:active { transform: none; }

.dataTables_wrapper .dataTables_info {
    grid-column: 1;
    float: none;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.dataTables_wrapper .dataTables_paginate {
    grid-column: 2 / -1;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    float: none;
    margin: 0;
    padding: 0;
}

/* dt nests the numbered pages in a span between prev/next */
.dataTables_wrapper .dataTables_paginate > span {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 38px;
    margin: 0;
    padding: 8px 12px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--table-hover) !important;
    border-color: var(--navy-accent) !important;
    color: var(--navy-accent) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--navy-accent) !important;
    border-color: var(--navy-accent) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    border-color: var(--border-light) !important;
    color: var(--text-muted) !important;
    opacity: 0.55;
    cursor: default;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    align-self: center;
    padding: 0 4px;
    color: var(--text-muted);
}

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

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

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

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

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

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

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

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

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

.error {
    margin-top: 15px;
    margin-bottom: 15px;
    color: var(--danger);
    font-size: 14px;
    background: #fef2f2;
    padding: 12px;
    border-radius: 0;
    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: 0;
    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: 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: 0;
    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 ===== */
/* compact by design — the filter bar is a control strip, not a panel. one rule keeps
   students / teachers / classes / subjects / results / marks entry visually identical */
.filters-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 12px 14px;
    margin-bottom: 16px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.filters-header h3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.filters-header h3 i { color: var(--navy-accent); }

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

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

.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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 16px 20px;
    margin-bottom: 18px;
    border-radius: 0;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

.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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(52, 168, 83, 0.2);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sidebar-submenu {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
}

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

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

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

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

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

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

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

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

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

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

    .chart-container {
        height: 250px;
    }

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

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

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

    .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: 0;
        margin: 0;
    }

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

    /* min-width only for tables the Responsive extension is NOT driving. Responsive marks
       its own tables .dtr-inline and folds surplus columns into a child row; a forced
       600px floor means it can never fit, so it folds nothing and the table just overflows */
    table.dataTable:not(.dtr-inline) {
        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: 0;
        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: 0;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .filters-grid {
        gap: 12px;
    }

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

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

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

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

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

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

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

    .header {
        padding: 12px;
    }

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

    .data-section {
        padding: 12px;
    }

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

    .stat-card {
        padding: 15px;
    }

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

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

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

    .chart-container {
        height: 200px;
    }

    .modal-body {
        padding: 15px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .app-container {
        display: block;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.profile-image-container {
    width: 120px;
    height: 120px;
    border-radius: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
}
.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: 0;
    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: 0;
}

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

.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: 0;
    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: 0;
    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: 0;
    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: 0;
}
.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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    letter-spacing: 0.3px;
}

/* ===== AdminLTE-style collapsible card (theme-aware) ===== */
.lte-card {
    background: var(--bg-card);
    border-radius: 0;
    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: 0;
    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: 0;
    min-width: 145px;
}
.current-swatch-chip {
    width: 34px;
    height: 34px;
    border-radius: 0;
    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: 0;
    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: 0;
    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) ===== */
.lte-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 1200px) { .lte-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .lte-kpi-grid { grid-template-columns: 1fr; } }

.small-box {
    position: relative;
    display: block;
    border-radius: 0;
    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 { padding: 18px 20px 12px; position: relative; z-index: 2; }
.small-box .inner h3 { font-size: clamp(24px, 4.5vw, 32px); font-weight: 700; margin: 0 0 6px; white-space: nowrap; }
.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;
    width: 100%;
    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 — one navy ramp (4 steps, all off the theme primary) for plain counts,
   semantic green/amber/red kept for status only. lighter steps are a white wash over the
   same gradient so they follow a custom theme instead of introducing a second hue */
.bg-navy    { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-primary) 100%); }
.bg-navy-2,
.bg-info    { background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%); }
.bg-navy-3  {
    background-image:
        linear-gradient(0deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.13)),
        linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
}
.bg-navy-4  {
    background-image:
        linear-gradient(0deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)),
        linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
}
.bg-success { background: linear-gradient(135deg, #1f6633 0%, #29803f 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-warning .icon { color: rgba(0, 0, 0, 0.2); }
.bg-danger  { background: linear-gradient(135deg, #a51b18 0%, #c5221f 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: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    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; }

/* 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 lives at the very BOTTOM of this file, not here — see the note there */

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

.select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid var(--input-border);
    border-radius: 0;
    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: 0;
    z-index: 10060;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--input-border);
    border-radius: 0;
    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: 0;
    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: 0;
    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: 0;
    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: 0;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid var(--border-color);
}

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

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

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

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

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

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

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

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

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

.notification-bell-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #555;
    position: relative;
    padding: 8px;
    border-radius: 0;
    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: 0;
    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: 0;
    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 {
    width: 100%;
    margin: 0;
    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: 0;
    color: white;
}

.about-logo img {
    width: 80px;
    height: 80px;
    border-radius: 0;
    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: 0;
    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: 0;
    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: 0;
    font-size: 12px;
    font-weight: 600;
}

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

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

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

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

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

.developer-avatar {
    width: 100px;
    height: 100px;
    border-radius: 0;
    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: 0;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
}

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

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

.dev-link.youtube {
    background: #FF0000;
    color: white;
}

.dev-link.youtube:hover {
    background: #CC0000;
    transform: translateY(-2px);
}

.about-footer {
    text-align: center;
    padding: 25px;
    color: #666;
    font-size: 14px;
}

.about-version {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

/* Dark Mode — About Section */
body.dark-mode .about-card {
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

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

body.dark-mode .about-card p {
    color: var(--text-secondary);
}

body.dark-mode .about-features li {
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

body.dark-mode .about-roles-table th {
    background: var(--navy-primary);
}

body.dark-mode .about-roles-table td {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark-mode .about-roles-table td:first-child {
    background: var(--bg-primary);
}

body.dark-mode .developer-details h3 {
    color: var(--text-primary);
}

body.dark-mode .developer-avatar {
    border-color: var(--navy-accent);
}

body.dark-mode .about-footer {
    color: var(--text-secondary);
}

body.dark-mode .about-version {
    color: var(--text-muted);
}

/* Mobile — Notification Dropdown */
@media (max-width: 768px) {
    .notification-dropdown {
        width: 300px;
        right: -40px;
    }

    .header-right {
        gap: 10px;
        font-size: 13px;
    }

    .about-header {
        flex-direction: column;
        text-align: center;
    }

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

    .developer-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .developer-links {
        justify-content: center;
    }
}

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

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

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

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

/* ===== Slight curved feel — global rounding polish (subtle, dashboard-wide) ===== */
/* 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,
.data-section input:not([type="file"]),
.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; }
/* vt-name creates a stacking context — without its own z-index the bell dropdown
   (trapped inside) paints UNDER any later positioned element on the page. MUST stay
   BELOW modal overlays (1000) and the mobile menu overlay (999) — at 1200 the hoisted
   header buttons + welcome/bell/theme tools floated over every open modal's header. */
.header-right      { view-transition-name: app-headertools; position: relative; z-index: 990; }

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

/* ===== ORMS — Result Management ===== */

/* ---- SearchableDropdown ---- */
.orms-dd-wrap {
    position: relative;
    width: 100%;
}

.orms-dd {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    text-align: left;
    font-family: inherit;
    font-size: 16px;
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
    border-radius: 0;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

.orms-dd:hover { border-color: var(--navy-accent); }

.orms-dd:focus,
.orms-dd.orms-dd-open {
    outline: none;
    border-color: var(--navy-accent);
    box-shadow: 0 0 0 2px rgba(0, 116, 217, 0.2);
}

/* trigger draws its own caret - don't add one in markup */
.orms-dd::after {
    content: "\f107";
    font: 900 14px/1 "Font Awesome 6 Free";
    color: var(--text-muted);
    flex: 0 0 auto;
    transition: transform .2s;
}

.orms-dd.orms-dd-open::after { transform: rotate(180deg); }

/* truncating label */
.orms-dd-txt {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orms-dd:disabled,
.orms-dd.is-disabled {
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.orms-dd-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: 0 12px 30px var(--shadow-hover);
    z-index: 10070;
}

/* open via sibling class, wrapper class or inline display - all three work */
.orms-dd.orms-dd-open + .orms-dd-panel,
.orms-dd-wrap.orms-dd-open .orms-dd-panel { display: flex; }

/* when the panel is portalled to body to escape modal overflow */
.orms-dd-panel.orms-dd-fixed { position: fixed; right: auto; }

.orms-dd-search {
    width: 100%;
    flex: 0 0 auto;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 16px;
    color: var(--text-primary);
    background: var(--input-bg);
    border: none;
    border-bottom: 1px solid var(--border-color);
}

.orms-dd-search:focus { outline: none; border-bottom-color: var(--navy-accent); }
.orms-dd-search::placeholder { color: var(--text-muted); }

.orms-dd-list {
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.orms-dd-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
}

.orms-dd-opt:last-child { border-bottom: none; }
.orms-dd-opt:hover { background: var(--table-hover); color: var(--navy-accent); }

.orms-dd-opt.active {
    background: rgba(0, 116, 217, 0.12);
    color: var(--navy-accent);
}

.orms-dd-opt.selected {
    font-weight: 700;
    color: var(--navy-accent);
}

.orms-dd-opt.selected::before {
    content: "\f00c";
    font: 900 12px/1 "Font Awesome 6 Free";
    flex: 0 0 auto;
}

/* rich option — avatar + two-line label, fed by data-av / data-sub on the <option> */
.orms-dd-av {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--navy-primary), var(--navy-accent));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.orms-dd-rich { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }

.orms-dd-rich-t {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orms-dd-rich small {
    font-size: 11.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orms-dd-opt-rich { padding-top: 8px; padding-bottom: 8px; }

.orms-dd-empty {
    padding: 22px 14px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

.orms-dd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.orms-dd-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 11px;
    background: var(--navy-primary);
    color: #fff;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.orms-dd-chip i {
    font-size: 11px;
    padding: 3px;
    opacity: .75;
    cursor: pointer;
    transition: opacity .2s;
}

.orms-dd-chip i:hover { opacity: 1; }

body.dark-mode .orms-dd-chip { background: var(--navy-light); }
body.dark-mode .orms-dd-opt.active { background: rgba(0, 116, 217, 0.22); }

/* ---- Top loading bar ---- */
#ormsBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s;
    z-index: 99999;
}

#ormsBar.orms-bar-active { opacity: 1; }

.orms-bar-fill {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(0, 116, 217, 0) 0%, var(--navy-accent) 45%, #62b3ff 100%);
    transform: translateX(-110%);
}

#ormsBar.orms-bar-active .orms-bar-fill { animation: ormsBarSlide 1.1s ease-in-out infinite; }

@keyframes ormsBarSlide {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}

body.dark-mode .orms-bar-fill {
    background: linear-gradient(90deg, rgba(0, 116, 217, 0) 0%, #4da3ff 45%, #9ed0ff 100%);
}

/* ---- Button busy state (.btn:disabled already exists - reused) ---- */
.btn .fa-spinner {
    font-size: .95em;
    margin-right: 2px;
}

.btn.is-busy {
    opacity: .72;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

body.dark-mode .btn.is-busy { opacity: .6; }

/* ---- Bulk marks entry popup ---- */
.marks-modal {
    width: 90vw;
    max-width: none;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.marks-modal-head {
    position: sticky;
    top: 0;
    z-index: 3;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    background: var(--navy-primary);
    color: #fff;
    border-radius: 0;
}

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

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

/* sits between head and body so it never fights the sticky thead */
.marks-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 22px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-secondary);
}

.marks-toolbar .subject-chip { flex: 0 0 auto; }
.marks-toolbar b { color: var(--navy-accent); font-weight: 700; }

.marks-modal-body {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
}

.marks-modal-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 22px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.marks-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    background: var(--bg-card);
}

.marks-grid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 12px 10px;
    background: var(--navy-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid var(--navy-dark);
}

body.dark-mode .marks-grid thead th { background: var(--navy-light); }

.marks-grid tbody td {
    padding: 8px 10px;
    vertical-align: middle;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.marks-grid tbody tr:hover td { background: var(--table-hover); }

/* first column pinned; corner cell rides highest */
.marks-grid thead th:first-child,
.marks-grid tbody td:first-child,
.marks-grid .col-roll + .col-student {
    position: sticky;
    left: 0;
    box-shadow: 1px 0 0 var(--border-color);
}

.marks-grid tbody td:first-child,
.marks-grid tbody .col-roll + .col-student {
    z-index: 2;
    background: var(--bg-card);
}

.marks-grid thead th:first-child,
.marks-grid thead .col-roll + .col-student { z-index: 4; }

.marks-grid .col-roll {
    width: 60px;
    min-width: 60px;
    text-align: center;
    font-weight: 700;
    color: var(--text-muted);
}

.marks-grid .col-roll + .col-student { left: 60px; }

.marks-grid .col-student { min-width: 210px; }

.marks-grid .col-subject {
    min-width: 190px;
    white-space: nowrap;
}

.marks-student {
    display: flex;
    align-items: center;
    gap: 10px;
}

.marks-student-photo {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.marks-student-name {
    display: block;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-primary);
    line-height: 1.3;
}

.marks-student-roll {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
}

.marks-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mark-input {
    width: 78px;
    min-height: 44px;
    padding: 8px 10px;
    text-align: right;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 0;
    -moz-appearance: textfield;
    transition: border-color .15s, box-shadow .15s;
}

.mark-input::-webkit-outer-spin-button,
.mark-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

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

.mark-input.invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.22);
}

.mark-input:disabled {
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.mark-total-hint {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.mark-ab-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 0;
    cursor: pointer;
    transition: all .2s;
}

.mark-ab-btn:hover { border-color: var(--danger); color: var(--danger); }

.mark-ab-btn.active {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.mark-grade-preview {
    display: inline-block;
    min-width: 32px;
    padding: 3px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    border-radius: 0;
    background: rgba(0, 116, 217, 0.12);
    color: var(--navy-accent);
}

.mark-grade-preview.is-fail {
    background: rgba(234, 67, 53, 0.14);
    color: var(--danger);
}

.marks-grid .marks-row-saved > td,
.marks-grid .marks-row-saved > td:first-child { background: rgba(52, 168, 83, 0.10); }

.marks-grid .marks-row-error > td,
.marks-grid .marks-row-error > td:first-child { background: rgba(234, 67, 53, 0.10); }

body.dark-mode .marks-grid .marks-row-saved > td,
body.dark-mode .marks-grid .marks-row-saved > td:first-child { background: rgba(52, 168, 83, 0.18); }

body.dark-mode .marks-grid .marks-row-error > td,
body.dark-mode .marks-grid .marks-row-error > td:first-child { background: rgba(234, 67, 53, 0.18); }

.marks-locked-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    font-size: 13.5px;
    font-weight: 600;
    color: #7a5b00;
    background: rgba(251, 188, 4, 0.16);
    border-left: 4px solid var(--warning);
}

.marks-locked-banner i { font-size: 16px; color: var(--warning); }

body.dark-mode .marks-locked-banner { background: rgba(251, 188, 4, 0.10); }

.marks-footer-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.marks-footer-summary b { color: var(--navy-accent); font-size: 15px; }

/* ---- Result card / DMC ---- */
.result-card {
    max-width: 820px;
    margin: 0 auto 24px;
    padding: 28px 30px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: 0 2px 10px var(--shadow-color);
}

.rc-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 3px double var(--navy-primary);
}

.rc-logo {
    width: 74px;
    height: 74px;
    flex: 0 0 auto;
    object-fit: contain;
}

.rc-school {
    flex: 1 1 auto;
    text-align: center;
}

.rc-school-name {
    margin: 0 0 4px;
    font-size: clamp(19px, 3.2vw, 27px);
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--navy-primary);
}

.rc-school-meta {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
}

.rc-title {
    display: block;
    margin: 14px 0 0;
    padding: 8px 14px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: var(--navy-primary);
    color: #fff;
    border-radius: 0;
}

body.dark-mode .rc-title { background: var(--navy-light); }

.rc-student {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

.rc-photo {
    width: 88px;
    height: 104px;
    flex: 0 0 auto;
    object-fit: cover;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.rc-fields {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 26px;
}

.rc-field {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    font-size: 13.5px;
}

.rc-field > :first-child {
    flex: 0 0 112px;
    font-weight: 600;
    color: var(--text-muted);
}

.rc-field > :last-child {
    font-weight: 700;
    color: var(--text-primary);
}

.rc-table {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
    font-size: 13.5px;
}

.rc-table th {
    padding: 10px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    background: var(--navy-primary);
    color: #fff;
    border: 1px solid var(--navy-dark);
}

.rc-table td {
    padding: 9px 10px;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.rc-table tbody tr.rc-fail > td {
    background: rgba(234, 67, 53, 0.10);
    color: var(--danger);
    font-weight: 600;
}

body.dark-mode .rc-table th { background: var(--navy-light); }
body.dark-mode .rc-table tbody tr.rc-fail > td { background: rgba(234, 67, 53, 0.18); }

.rc-absent {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--danger);
}

.rc-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 12px;
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.rc-summary-item { text-align: center; }

.rc-summary-item span {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rc-summary-item strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy-accent);
}

.rc-badge {
    display: inline-block;
    padding: 7px 20px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 0;
}

.rc-badge-pass { background: var(--success); color: #fff; }
.rc-badge-fail { background: var(--danger); color: #fff; }

.rc-signatures {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 46px;
}

.rc-sign {
    flex: 1 1 0;
    padding-top: 8px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    border-top: 1px solid var(--text-muted);
}

.rc-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
    padding-top: 12px;
    font-size: 11.5px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}

/* ---- Chevron pipeline ---- */
.chev-pipeline {
    display: flex;
    align-items: stretch;
    gap: 3px;
    margin-bottom: 18px;
    padding-bottom: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.chev-item {
    position: relative;
    flex: 1 1 0;
    min-width: 152px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 9px 26px 9px 32px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: none;
    cursor: pointer;
    transition: background .2s, color .2s;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}

.chev-item:first-child {
    padding-left: 20px;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

.chev-item:last-child {
    padding-right: 20px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
}

.chev-item:first-child:last-child { clip-path: none; }

.chev-item:hover { background: var(--table-hover); color: var(--navy-accent); }

.chev-item.active {
    background: var(--navy-primary);
    color: #fff;
}

body.dark-mode .chev-item { background: var(--bg-card); }
body.dark-mode .chev-item.active { background: var(--navy-accent); }

.chev-label { font-size: 13px; font-weight: 600; }
.chev-count { font-size: 11px; font-weight: 700; opacity: .82; }

/* ---- Completion / progress ---- */
.completion-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 130px;
}

.completion-bar {
    position: relative;
    flex: 1 1 auto;
    min-width: 80px;
    height: 10px;
    background: var(--border-light);
    border-radius: 0;
    overflow: hidden;
}

.completion-fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--navy-accent);
    border-radius: 0;
    transition: width .4s ease;
}

.completion-pct {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--text-secondary);
}

.is-none .completion-fill,    .completion-fill.is-none    { background: var(--text-muted); }
.is-partial .completion-fill, .completion-fill.is-partial { background: var(--warning); }
.is-complete .completion-fill,.completion-fill.is-complete{ background: var(--success); }
.is-published .completion-fill,.completion-fill.is-published { background: var(--navy-accent); }

.completion-pct.is-none     { color: var(--text-muted); }
.completion-pct.is-partial  { color: #b98800; }
.completion-pct.is-complete { color: var(--success); }
.completion-pct.is-published{ color: var(--navy-accent); }

body.dark-mode .completion-bar { background: var(--border-color); }
body.dark-mode .completion-pct.is-partial { color: var(--warning); }

/* ---- Teacher assignment cards ---- */
.assign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.assign-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--navy-accent);
    border-radius: 0;
    box-shadow: 0 2px 6px var(--shadow-color);
    transition: transform .2s, box-shadow .2s;
}

.assign-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px var(--shadow-hover);
}

.assign-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.assign-card-head i { color: var(--navy-accent); }

.assign-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.assign-card-meta i { margin-right: 5px; color: var(--navy-accent); }

.assign-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.subject-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 0;
    background: rgba(0, 116, 217, 0.12);
    color: var(--navy-accent);
}

body.dark-mode .subject-chip { background: rgba(0, 116, 217, 0.22); }

/* ---- Credential slip ---- */
.cred-slip {
    max-width: 430px;
    margin: 0 auto;
    padding: 20px 22px;
    background: var(--bg-card);
    border: 2px dashed var(--border-color);
    border-radius: 0;
}

.cred-slip-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy-primary);
    border-bottom: 1px solid var(--border-color);
}

.cred-slip-head i { color: var(--navy-accent); }

.cred-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border-light);
}

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

.cred-label {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.cred-value {
    font-family: "Courier New", Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    word-break: break-all;
    text-align: right;
    color: var(--text-primary);
}

body.dark-mode .cred-slip { border-color: var(--border-color); }

/* ---- Empty state / mini stats / tabs ---- */
.orms-empty {
    padding: 44px 20px;
    text-align: center;
    color: var(--text-muted);
}

.orms-empty i {
    display: block;
    margin-bottom: 14px;
    font-size: 52px;
    color: var(--border-color);
}

.orms-empty h4 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-secondary);
}

.orms-empty p { margin: 0; font-size: 13.5px; }

body.dark-mode .orms-empty i { color: var(--border-color); }

.stat-mini {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.stat-mini > div,
.stat-mini-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.stat-mini i { color: var(--navy-accent); }

.stat-mini b {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy-accent);
}

body.dark-mode .stat-mini { background: var(--bg-card); }

.tab-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 22px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 2px solid var(--border-color);
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-bottom: -2px;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}

.tab-btn i { font-size: 13px; }
.tab-btn:hover { color: var(--navy-accent); background: var(--table-hover); }

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

.tab-pane { display: none; }
.tab-pane.active { display: block; animation: ormsFadeIn .25s ease; }

@keyframes ormsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Dark mode: elements that carry their own colour on a coloured fill.
   needs !important to beat the global body.dark-mode span/div text catch-all ---- */
body.dark-mode .orms-dd-chip,
body.dark-mode .marks-modal-head,
body.dark-mode .marks-modal-head h3,
body.dark-mode .mark-ab-btn.active,
body.dark-mode .chev-item.active,
body.dark-mode .chev-item.active .chev-label,
body.dark-mode .chev-item.active .chev-count,
body.dark-mode .rc-title,
body.dark-mode .rc-badge-pass,
body.dark-mode .rc-badge-fail { color: #fff !important; }

body.dark-mode .mark-grade-preview,
body.dark-mode .subject-chip,
body.dark-mode .rc-summary-item strong,
body.dark-mode .marks-footer-summary b,
body.dark-mode .stat-mini b { color: var(--navy-accent) !important; }

body.dark-mode .mark-grade-preview.is-fail,
body.dark-mode .rc-absent,
body.dark-mode .rc-table tbody tr.rc-fail > td { color: #ff9a90 !important; }

body.dark-mode .marks-locked-banner { color: #f3cf72 !important; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .marks-modal {
        width: 96vw;
        max-width: none;
        max-height: 92vh;
    }
    .marks-modal-head,
    .marks-toolbar,
    .marks-modal-foot { padding-left: 14px; padding-right: 14px; }
    .marks-modal-body { overflow-x: auto; }
    .marks-grid { min-width: 620px; }
    .marks-grid .col-student { min-width: 170px; }
    .marks-modal-foot { justify-content: center; }
    .rc-fields { grid-template-columns: 1fr; }
    .rc-student { gap: 14px; }
    .result-card { padding: 20px 16px; }
}

@media (max-width: 768px) {
    .chev-item { flex: 0 0 auto; min-width: 134px; }
    .rc-header { flex-direction: column; gap: 10px; text-align: center; }
    .rc-signatures { gap: 16px; margin-top: 34px; }
    .assign-grid { grid-template-columns: 1fr; }
    .tab-btn { padding: 12px 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    #ormsBar.orms-bar-active .orms-bar-fill { animation: none; transform: none; width: 100%; }
    .tab-pane.active { animation: none; }
    .assign-card,
    .completion-fill,
    .chev-item { transition: none; }
    .assign-card:hover { transform: none; }
}

/* ---- Print (A4) ---- */
.print-only { display: none; }
/* set by ORMS.printOnly() on every sibling between the printed element and <body> */
@media print { .print-hidden { display: none !important; } }
.page-break { page-break-after: always; break-after: page; }
.page-break:last-child { page-break-after: auto; break-after: auto; }

@media print {
    /* print has to win over screen rules and the DataTables !important set */
    @page { size: A4; margin: 12mm; }

    .no-print,
    #ormsBar,
    .header,
    .header-right,
    .breadcrumb,
    .filters-section,
    .section-header,
    .table-scroll-hint,
    .quick-actions-bar,
    .impersonate-notice,
    .notification-bell-wrapper,
    .header-tool-wrapper,
    .chev-pipeline,
    .tab-nav,
    .modal-overlay,
    .marks-toolbar,
    .stat-mini,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_info,
    .dataTables_paginate { display: none !important; }

    .print-only { display: block !important; }

    html, body {
        background: #fff !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .main-content { margin: 0 !important; padding: 0 !important; width: 100% !important; }

    .data-section,
    .lte-card,
    .lte-card-body {
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    .result-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: #fff !important;
        color: #000 !important;
        border: none !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .result-card *,
    .cred-slip * { color: #000 !important; }

    .rc-table th,
    .rc-title,
    .rc-badge-pass,
    .rc-badge-fail {
        color: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-table th { background: #001f3f !important; border: 1px solid #001f3f !important; }
    .rc-title { background: #001f3f !important; }
    .rc-badge-pass { background: #34a853 !important; }
    .rc-badge-fail { background: #ea4335 !important; }

    .rc-table td { border: 1px solid #666 !important; }
    .rc-table tbody tr.rc-fail > td { background: #fdecea !important; }
    .rc-summary { background: #f4f4f4 !important; border: 1px solid #999 !important; }
    .rc-header { border-bottom-color: #001f3f !important; }
    .rc-sign { border-top: 1px solid #000 !important; }

    /* honour the configured accent instead of hardcoding navy */
    .rc-table th { background: var(--rc-accent, #001f3f) !important; border-color: var(--rc-accent, #001f3f) !important; }
    .rc-title    { background: var(--rc-accent, #001f3f) !important; }

    /* ink-only skins print outlined — a filled navy bar would flatten them all back to classic */
    .rc-t-compact .rc-title, .rc-t-elegant .rc-title, .rc-t-board .rc-title,
    .rc-t-compact .rc-table th, .rc-t-elegant .rc-table th, .rc-t-board .rc-table th {
        background: transparent !important;
        color: #000 !important;
    }
    .rc-t-compact .rc-title    { border: 1px solid var(--rc-accent, #001f3f) !important; }
    .rc-t-board .rc-title      { border: 2px solid #000 !important; }
    .rc-t-board .rc-table th   { border: 1.5px solid #000 !important; }
    .rc-t-elegant .rc-title    { border: none !important; border-top: 1px solid #000 !important; border-bottom: 1px solid #000 !important; }
    .rc-t-elegant .rc-table th { border: none !important; border-top: 2px solid #000 !important; border-bottom: 2px solid #000 !important; }
    .rc-t-board .rc-badge-pass,
    .rc-t-board .rc-badge-fail { background: transparent !important; color: #000 !important; border: 2px solid #000 !important; }

    /* the sheet IS the page — drop its screen chrome so nothing double-margins */
    .a4-wrap {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        overflow: visible !important;
    }

    .a4-sheet {
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .cred-slip {
        background: #fff !important;
        border: 2px dashed #666 !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .rc-photo, .rc-logo { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ===== end ORMS ===== */

/* ===== ORMS — dropdown JS/CSS reconciliation ===== */

/* js emits a real FA caret element - kill the pseudo one so it isn't drawn twice */
.orms-dd::after { content: none; }

.orms-dd-caret {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--text-muted);
    transition: transform .2s;
}

.orms-dd.orms-dd-open .orms-dd-caret,
.orms-dd-wrap.orms-dd-open .orms-dd-caret { transform: rotate(180deg); }

/* js label class - same truncation as .orms-dd-txt */
.orms-dd-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* nothing picked yet */
.orms-dd-ph { color: var(--text-muted); }

/* js disabled class alongside :disabled/.is-disabled */
.orms-dd.orms-dd-disabled {
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: not-allowed;
    pointer-events: none;
}

/* multiselect trigger grows with its chips */
.orms-dd.orms-dd-multi {
    flex-wrap: wrap;
    height: auto;
    min-height: 44px;
    padding: 7px 14px;
}

.orms-dd-chip-x {
    flex: 0 0 auto;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1;
    opacity: .75;
    cursor: pointer;
}

.orms-dd-chip-x:hover { opacity: 1; }

/* ===== end ORMS reconciliation ===== */


/* ===== ORMS — Welcome Tour ===== */

/* first-run overlay — above modals/dropdowns, below the top loading bar */
.orms-tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 21, 41, 0.62);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 10500;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

body.dark-mode .orms-tour-overlay {
    background: rgba(0, 0, 0, 0.78);
}

/* js adds this — no flash before it, and a dead js never blocks the page */
.orms-tour-overlay.orms-tour-open {
    opacity: 1;
    visibility: visible;
}

body.orms-tour-lock {
    overflow: hidden;
}

.orms-tour-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 440px;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    transform: translateY(14px) scale(.97);
    transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}

body.dark-mode .orms-tour-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
}

.orms-tour-overlay.orms-tour-open .orms-tour-card {
    transform: none;
}

/* branded strip so it doesn't read as a plain alert box */
.orms-tour-card::before {
    content: '';
    flex: 0 0 4px;
    display: block;
    background: linear-gradient(90deg, var(--navy-primary), var(--navy-accent));
}

body.dark-mode .orms-tour-card::before {
    background: linear-gradient(90deg, var(--navy-light), var(--navy-accent));
}

.orms-tour-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s, color .2s;
}

body.dark-mode .orms-tour-close {
    color: var(--text-muted);
}

.orms-tour-close:hover {
    background: var(--table-hover);
    color: var(--text-primary);
}

body.dark-mode .orms-tour-close:hover {
    background: var(--border-light);
    color: var(--text-primary);
}

.orms-tour-body {
    padding: 32px 26px 18px;
    text-align: center;
}

/* every step ships in the dom, only the active one is visible */
.orms-tour-step {
    display: none;
}

.orms-tour-step.orms-tour-on {
    display: block;
    animation: ormsTourIn .28s ease both;
}

@keyframes ormsTourIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.orms-tour-ico {
    width: 74px;
    height: 74px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    font-size: 30px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--navy-accent), var(--navy-primary));
    box-shadow: 0 10px 26px rgba(0, 116, 217, .32);
}

body.dark-mode .orms-tour-ico {
    color: #ffffff;
    background: linear-gradient(135deg, var(--navy-accent), var(--navy-light));
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}

.orms-tour-title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    color: var(--navy-primary);
}

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

.orms-tour-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
}

body.dark-mode .orms-tour-text {
    color: var(--text-secondary);
}

.orms-tour-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 16px;
}

/* 44px hit area, the visible pill is the pseudo */
.orms-tour-dot {
    width: 24px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.orms-tour-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: var(--border-color);
    transition: width .22s ease, background .22s ease;
}

body.dark-mode .orms-tour-dot::before {
    background: var(--border-color);
}

.orms-tour-dot:hover::before {
    background: var(--text-muted);
}

body.dark-mode .orms-tour-dot:hover::before {
    background: var(--text-muted);
}

.orms-tour-dot.orms-tour-on::before {
    width: 20px;
    border-radius: 0;
    background: var(--navy-accent);
}

body.dark-mode .orms-tour-dot.orms-tour-on::before {
    background: var(--navy-accent);
}

.orms-tour-count {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-muted);
}

body.dark-mode .orms-tour-count {
    color: var(--text-muted);
}

.orms-tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 26px 22px;
    border-top: 1px solid var(--border-light);
}

body.dark-mode .orms-tour-actions {
    border-top-color: var(--border-light);
}

.orms-tour-nav {
    display: flex;
    gap: 8px;
}

.orms-tour-btn {
    min-height: 44px;
    padding: 10px 18px;
}

.orms-tour-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

body.dark-mode .orms-tour-btn:disabled {
    opacity: .35;
}

/* beats .btn's inline-flex */
.orms-tour-hide {
    display: none !important;
}

.orms-tour-close:focus-visible,
.orms-tour-dot:focus-visible,
.orms-tour-btn:focus-visible {
    outline: 2px solid var(--navy-accent);
    outline-offset: 2px;
}

body.dark-mode .orms-tour-close:focus-visible,
body.dark-mode .orms-tour-dot:focus-visible,
body.dark-mode .orms-tour-btn:focus-visible {
    outline-color: var(--navy-accent);
}

/* phones — full-screen sheet, stacked actions */
@media (max-width: 560px) {
    .orms-tour-overlay {
        padding: 0;
        align-items: stretch;
    }

    .orms-tour-card {
        max-width: none;
        max-height: none;
        min-height: 100%;
        border: none;
        border-radius: 0;
    }

    body.dark-mode .orms-tour-card {
        border: none;
    }

    .orms-tour-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 48px 20px 16px;
    }

    .orms-tour-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: 14px 20px 18px;
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }

    .orms-tour-nav .orms-tour-btn {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orms-tour-overlay,
    .orms-tour-card,
    .orms-tour-close,
    .orms-tour-dot::before {
        transition: none;
    }

    .orms-tour-overlay .orms-tour-card {
        transform: none;
    }

    .orms-tour-step.orms-tour-on {
        animation: none;
    }
}

@media print {
    .orms-tour-overlay { display: none !important; }
}

/* ===== end Welcome Tour ===== */

/* ===== ORMS — role badges for Teacher / Student ===== */
.role-teacher {
    background: #cce5ff;
    color: #0074D9;
}

.role-student {
    background: #e2e3e5;
    color: #495057;
}

body.dark-mode .role-teacher { background: rgba(0, 116, 217, .22); color: #7cc0ff; }
body.dark-mode .role-student { background: rgba(108, 117, 125, .25); color: #cfd4d9; }
/* ===== end role badges ===== */

/* ===== ORMS — public result portal (index.php) ===== */
/* append to styles.css as-is. vars only, no hardcoded hexes */

.orms-home-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-primary);
}

/* hero — branding comes straight from Result Settings, this only frames it */
.orms-home-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 40px 20px 34px;
    text-align: left;
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
    color: #fff;
}

.orms-home-logo {
    width: 92px;
    height: 92px;
    flex: 0 0 auto;
    border-radius: 0;
    object-fit: cover;
    background: var(--bg-card);
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.orms-home-hero-text {
    min-width: 0;
}

.orms-home-school {
    margin: 0 0 6px;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.orms-home-meta {
    margin: 0 0 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
}

.orms-home-meta i {
    width: 16px;
    margin-right: 6px;
    color: rgba(255, 255, 255, 0.7);
}

.orms-home-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 14px;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
}

/* centered content column */
.orms-home-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    padding: 26px 16px 34px;
}

.orms-home-card {
    margin-bottom: 20px;
}

.orms-home-card:last-child {
    margin-bottom: 0;
}

/* mobile keyboards must not zoom the form */
.orms-home-page input,
.orms-home-page select,
.orms-home-page textarea {
    font-size: 16px;
}

.orms-home-submit {
    min-height: 48px;
    font-size: 15px;
}

.orms-home-links {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.orms-home-links > .btn {
    min-height: 44px;
    flex: 0 0 auto;
}

/* anchor-buttons (login, back home) — no underline, any state */
.orms-home-page a.btn,
.orms-home-page a.btn:hover,
.orms-home-page a.btn:focus,
.orms-home-page a.btn:active { text-decoration: none; }

.orms-home-footer {
    flex: 0 0 auto;
    padding: 18px 16px 26px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}

.orms-home-footer p {
    margin: 0;
}

/* ----- dark mode ----- */

body.dark-mode .orms-home-page { background: var(--bg-primary); }

body.dark-mode .orms-home-hero {
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-primary) 100%);
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .orms-home-logo {
    background: var(--bg-card);
    border-color: var(--navy-accent);
}

body.dark-mode .orms-home-school { color: #fff; }

body.dark-mode .orms-home-meta { color: rgba(255, 255, 255, 0.78); }

body.dark-mode .orms-home-tag {
    background: rgba(0, 116, 217, 0.28);
    border-color: var(--navy-accent);
}

body.dark-mode .orms-home-footer {
    color: var(--text-muted);
    border-top-color: var(--border-color);
}

/* ----- responsive ----- */

@media (max-width: 640px) {
    .orms-home-hero {
        flex-direction: column;
        gap: 14px;
        padding: 30px 18px 26px;
        text-align: center;
    }

    .orms-home-logo { width: 74px; height: 74px; }

    .orms-home-school { font-size: 22px; }

    .orms-home-main { padding: 18px 12px 26px; }

    .orms-home-links { flex-direction: column; align-items: stretch; }

    .orms-home-links > .btn { width: 100%; }
}

/* ----- print: the card only ----- */

@media print {
    .orms-home-hero,
    .orms-home-footer,
    .orms-home-links { display: none !important; }

    .orms-home-page { display: block; min-height: 0; background: #fff !important; }

    .orms-home-main {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .orms-home-card { margin: 0 !important; }
}

/* ----- home v2 — hero glow, trust bar, steps strip, grouped form ----- */

/* soft radial glows, markup untouched */
.orms-home-hero { position: relative; overflow: hidden; }
.orms-home-hero::before,
.orms-home-hero::after {
    content: '';
    position: absolute;
    border-radius: 0;
    pointer-events: none;
}
.orms-home-hero::before {
    width: 380px; height: 380px; top: -190px; right: -120px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
}
.orms-home-hero::after {
    width: 300px; height: 300px; bottom: -170px; left: -90px;
    background: radial-gradient(circle, rgba(0, 116, 217, 0.35) 0%, transparent 70%);
}
.orms-home-hero > * { position: relative; z-index: 1; }

/* slim trust band under the hero */
.orms-home-trustbar {
    display: flex;
    justify-content: center;
    gap: 10px 34px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--navy-dark);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12.5px;
}

.orms-home-trustbar span { display: inline-flex; align-items: center; gap: 8px; }

.orms-home-trustbar i { color: var(--navy-accent); }

/* how-it-works strip */
.orms-home-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.orms-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: 0 2px 6px var(--shadow-color);
}

.orms-step-n {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--navy-primary), var(--navy-accent));
}

.orms-step h4 { margin: 0 0 3px; font-size: 13.5px; color: var(--text-primary); }

.orms-step h4 i { margin-right: 5px; color: var(--navy-accent); }

.orms-step p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }

/* grouped form headings */
.orms-fs-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.orms-fs-title i { color: var(--navy-accent); }

.orms-fs-title::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }

/* 2-by-2 form — exam block (2×2 selects) left, identity stacked right */
.orms-form-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 32px;
    align-items: start;
}

@media (max-width: 900px) {
    .orms-form-cols { grid-template-columns: 1fr; gap: 14px; }
}

/* equal squared fields — dd buttons and text/date inputs share one box */
#lookupForm .form-group input {
    height: 48px;
    padding: 10px 14px;
    border-radius: 0;
}

#lookupForm .orms-dd { min-height: 48px; }

/* check result + login share one row */
.orms-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.orms-actions-row .btn {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 640px) {
    .orms-actions-row { grid-template-columns: 1fr; }
}

/* navy top accent on the working cards */
.orms-card-accent { border-top: 3px solid var(--navy-accent); }

/* submit — gradient + lift, note line under */
.orms-home-submit {
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
    letter-spacing: .3px;
    box-shadow: 0 4px 14px rgba(0, 31, 63, 0.28);
    transition: transform .18s, box-shadow .18s;
}

.orms-home-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 31, 63, 0.35); }

/* result-only mode — once a card is on screen everything else leaves */
.orms-result-mode .orms-home-hero,
.orms-result-mode .orms-home-trustbar,
.orms-result-mode .orms-home-steps,
.orms-result-mode .orms-home-links,
.orms-result-mode .orms-home-footer { display: none; }

.orms-result-mode .orms-home-main { padding-top: 18px; }

body.dark-mode .orms-home-trustbar { background: rgba(0, 0, 0, 0.35); border-bottom: 1px solid var(--border-color); }

@media (max-width: 640px) {
    .orms-home-steps { grid-template-columns: 1fr; gap: 10px; }
    .orms-home-trustbar { gap: 8px 18px; font-size: 12px; }
}

@media print {
    .orms-home-trustbar,
    .orms-home-steps { display: none !important; }
}

/* ===== end public result portal ===== */

/* ===== ORMS — info-box base (template shipped only the radius polish) ===== */
.info-box {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 80px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: 0 2px 6px var(--shadow-color);
    transition: transform 0.25s, box-shadow 0.25s;
}

.info-box:hover { transform: translateY(-2px); box-shadow: 0 4px 14px var(--shadow-hover); }

.info-box-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 22px;
    color: #fff;
    background: var(--navy-primary);
    border-radius: 0;
}

.info-box-content {
    flex: 1 1 auto;
    min-width: 0;
}

.info-box-text {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-box-number {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

@media (max-width: 600px) {
    .info-box { min-height: 68px; padding: 12px; gap: 10px; }
    .info-box-icon { width: 44px; height: 44px; font-size: 18px; }
    .info-box-number { font-size: 19px; }
}
/* ===== end info-box base ===== */

/* text alignment utility */
.text-left { text-align: left; }

/* ===== ORMS — result card accent + live preview ===== */

/* accent is a runtime value set inline on .result-card; falls back to the navy default */
.rc-header { border-bottom-color: var(--rc-accent, var(--navy-primary)); }
.rc-title  { background: var(--rc-accent, var(--navy-primary)); }
.rc-table th { background: var(--rc-accent, var(--navy-primary)); }
.rc-school-name { color: var(--rc-accent, var(--navy-primary)); }
body.dark-mode .rc-table th { background: var(--rc-accent, var(--navy-light)); }

/* preview left / form right */
.rs-split {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 24px;
    align-items: start;
}

.rs-preview-pane {
    position: sticky;
    top: 16px;
    padding: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.rs-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.rs-preview-badge {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--navy-accent);
    border-radius: 0;
}

/* shrink the real card so a full A4 layout reads at a glance */
.rs-preview-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.rs-preview-card .result-card {
    transform: scale(0.62);
    transform-origin: top left;
    width: 161.3%;          /* 100 / 0.62 - keeps the scaled card flush in its box */
    margin: 0;
    box-shadow: none;
}

.rs-preview-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

/* the customization toggle grid */
.rs-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px 16px;
}

.rs-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.rs-toggle-row > span {
    font-size: 13px;
    line-height: 1.3;
    color: var(--text-primary);
}

/* air above in-pane section headers */
.rs-form-pane .section-header { margin-top: 28px; }

.rs-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rs-color-row input[type="color"] {
    width: 46px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--input-border);
    border-radius: 0;
    background: var(--input-bg);
    cursor: pointer;
}

@media (max-width: 1100px) {
    .rs-split { grid-template-columns: 1fr; }
    .rs-preview-pane { position: static; order: -1; }
}

body.dark-mode .rs-preview-card { background: #f7f7f7; }
/* ===== end result card accent + live preview ===== */

/* ===== ORMS — result card template skins ===== */

/* key to grades legend — formal + report */
.rc-key {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.rc-key-title {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rc-key-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.rc-key-item { font-size: 12px; color: var(--text-secondary); }
.rc-key-item b { color: var(--rc-accent, var(--navy-primary)); }
.rc-key-fail { font-style: normal; font-size: 11px; color: var(--danger); }

/* compact — same markup, ink-light + dense for bulk printing */
.rc-t-compact { padding: 18px 20px; box-shadow: none; }

.rc-t-compact .rc-title {
    padding: 5px 10px;
    background: transparent;
    color: var(--rc-accent, var(--navy-primary));
    border: 1px solid var(--rc-accent, var(--navy-primary));
}

.rc-t-compact .rc-table th {
    padding: 6px 8px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.rc-t-compact .rc-table td { padding: 5px 8px; font-size: 12.5px; }
.rc-t-compact .rc-student { padding: 10px 0; }
.rc-t-compact .rc-photo { width: 68px; height: 80px; }
.rc-t-compact .rc-summary { margin-top: 12px; padding: 10px 12px; }
.rc-t-compact .rc-summary-item strong { font-size: 15px; color: var(--text-primary); }
.rc-t-compact .rc-signatures { margin-top: 34px; }
body.dark-mode .rc-t-compact .rc-title { background: transparent; }
body.dark-mode .rc-t-compact .rc-table th { background: transparent; }

/* formal slip — bordered exam slip, stats box beside the info fields */
.rc-t-formal {
    border: 2px solid var(--rc-accent, var(--navy-primary));
    border-radius: 0;
}

.rc-t-formal .rc-header { border-bottom: 2px solid var(--rc-accent, var(--navy-primary)); }

.rcf-info {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.rcf-info .rc-fields { grid-template-columns: 1fr; align-content: start; }

.rcf-stats {
    flex: 0 0 240px;
    margin-left: auto;
    border: 1px solid var(--border-color);
    border-radius: 0;
    overflow: hidden;
}

.rcf-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    font-size: 12.5px;
    border-bottom: 1px solid var(--border-color);
}

.rcf-stat:last-child { border-bottom: none; }
.rcf-stat > span { font-weight: 600; color: var(--text-muted); }
.rcf-stat > b { color: var(--text-primary); }
.rcf-stat .rc-badge { padding: 3px 12px; font-size: 12px; }

.rcf-table th, .rcf-table td { text-align: center; }
.rcf-table th:nth-child(2), .rcf-table td:nth-child(2) { text-align: left; }

.rcf-bottom {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
    margin-top: 14px;
    align-items: stretch;
}

.rcf-bottom .rc-key { margin-top: 0; }

.rcf-comment {
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.rcf-comment p { margin: 6px 0 0; font-size: 12.5px; color: var(--text-secondary); }

/* term-wise academic report — photo right, term columns, summary tfoot */
.rc-t-report .rc-student { flex-direction: row-reverse; }

.rcr-table th, .rcr-table td { padding: 8px; font-size: 12.5px; text-align: center; }
.rcr-table th:first-child, .rcr-table td:first-child { text-align: left; }
.rcr-table sup { font-size: 9px; }

.rcr-table tfoot td {
    font-weight: 700;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.rcr-draft { margin-top: 8px; font-size: 11.5px; }
.rc-t-report .rc-summary { margin-top: 14px; }

/* modern — rounded, gradient title, striped rows, stat chips */
.rc-t-modern { border-radius: 0; }
.rc-t-modern .rc-photo { border-radius: 0; }

.rc-t-modern .rc-title {
    background: var(--rc-accent, var(--navy-primary));
    background: linear-gradient(90deg, var(--rc-accent, var(--navy-primary)), color-mix(in srgb, var(--rc-accent, #0074D9) 55%, #ffffff));
    border-radius: 0;
}

.rc-t-modern .rc-table th { border: none; }
.rc-t-modern .rc-table th:first-child { border-radius: 0; }
.rc-t-modern .rc-table th:last-child { border-radius: 0; }
.rc-t-modern .rc-table td { border: none; border-bottom: 1px solid var(--border-color); }
.rc-t-modern .rc-table tbody tr:nth-child(even) > td { background: var(--table-hover); }
.rc-t-modern .rc-table tbody tr.rc-fail > td { background: rgba(234, 67, 53, 0.10); }
body.dark-mode .rc-t-modern .rc-table tbody tr.rc-fail > td { background: rgba(234, 67, 53, 0.18); }

.rc-t-modern .rc-summary {
    padding: 0;
    background: transparent;
    border: none;
}

.rc-t-modern .rc-summary-item {
    padding: 10px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.rc-t-modern .rc-badge { border-radius: 0; }

/* elegant — serif certificate feel, double frame, understated rules */
.rc-t-elegant {
    font-family: Georgia, 'Times New Roman', serif;
    border: 4px double var(--rc-accent, var(--navy-primary));
    border-radius: 0;
}

.rc-t-elegant .rc-school-name { letter-spacing: 1.5px; }
.rc-t-elegant .rc-header { border-bottom: 1px solid var(--rc-accent, var(--navy-primary)); }

.rc-t-elegant .rc-title {
    background: transparent;
    color: var(--rc-accent, var(--navy-primary));
    border-top: 1px solid var(--rc-accent, var(--navy-primary));
    border-bottom: 1px solid var(--rc-accent, var(--navy-primary));
    border-radius: 0;
    letter-spacing: 3px;
}

.rc-t-elegant .rc-table th {
    background: transparent;
    color: var(--rc-accent, var(--navy-primary));
    border: none;
    border-top: 2px solid var(--rc-accent, var(--navy-primary));
    border-bottom: 2px solid var(--rc-accent, var(--navy-primary));
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.rc-t-elegant .rc-table td { border: none; border-bottom: 1px solid var(--border-color); }

.rc-t-elegant .rc-summary {
    background: transparent;
    border: none;
    border-top: 2px solid var(--rc-accent, var(--navy-primary));
    border-bottom: 2px solid var(--rc-accent, var(--navy-primary));
    border-radius: 0;
}

.rc-t-elegant .rc-summary-item strong { color: var(--text-primary); }
.rc-t-elegant .rc-badge { border-radius: 0; letter-spacing: 2px; }
body.dark-mode .rc-t-elegant .rc-title,
body.dark-mode .rc-t-elegant .rc-table th { background: transparent; }

/* board marksheet — dense monochrome grid, ink only */
.rc-t-board { border: 2px solid var(--text-primary); border-radius: 0; box-shadow: none; }
.rc-t-board .rc-header { border-bottom: 2px solid var(--text-primary); }
.rc-t-board .rc-school-name { color: var(--text-primary); }
.rc-t-board .rc-photo { border-radius: 0; border-color: var(--text-primary); }

.rc-t-board .rc-title {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--text-primary);
    border-radius: 0;
    letter-spacing: 2px;
}

.rc-t-board .rc-field { border-bottom: 1px dotted var(--text-muted); }

.rc-t-board .rc-table th {
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--text-primary);
    font-size: 11.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.rc-t-board .rc-table td { border: 1px solid var(--text-secondary); color: var(--text-primary); }
.rc-t-board .rc-table tbody tr.rc-fail > td { background: transparent; }

.rc-t-board .rc-summary {
    background: transparent;
    border: 1px solid var(--text-primary);
    border-radius: 0;
}

.rc-t-board .rc-summary-item strong { color: var(--text-primary); }
.rc-t-board .rc-badge { background: transparent; border: 2px solid currentColor; border-radius: 0; }
.rc-t-board .rc-badge-pass { color: var(--success); }
.rc-t-board .rc-badge-fail { color: var(--danger); }
.rc-t-board .rc-sign { border-top-color: var(--text-primary); }
body.dark-mode .rc-t-board .rc-title,
body.dark-mode .rc-t-board .rc-table th { background: transparent; }

/* term-wise progress matrix — big grade letters */
.rcp-table th, .rcp-table td { padding: 8px; font-size: 12.5px; text-align: center; }
.rcp-table th:first-child, .rcp-table td:first-child { text-align: left; }
.rcp-table td b { font-size: 14px; font-weight: 800; }
.rcp-table sup { font-size: 9px; }

.rcp-table tfoot td {
    font-weight: 700;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.rc-t-progress .rc-summary { margin-top: 14px; }

@media (max-width: 700px) {
    .rcf-info { flex-wrap: wrap; }
    .rcf-stats { flex-basis: 100%; margin-left: 0; }
    .rcf-bottom { grid-template-columns: 1fr; }
    .rcr-table, .rcp-table { display: block; overflow-x: auto; }
}

/* my_results — one compact identity bar: avatar + meta chips + picker on a single row.
   replaced a full picker card (section head + filters box) and a separate details card */
.myr-hero { padding: 14px 18px; }

.myr-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 22px;
}

.myr-id {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 340px;
    min-width: 0;
}

.myr-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    object-fit: cover;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.myr-avatar-txt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--navy-primary), var(--navy-accent));
    border: none;
}

.myr-id-empty .myr-avatar-txt {
    background: var(--bg-primary);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.myr-id-text { min-width: 0; }

.myr-id-text h2 {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.myr-id-text p { margin: 0; font-size: 12.5px; color: var(--text-muted); }

.myr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.myr-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.myr-chip i { font-size: 10px; color: var(--navy-accent); }
.myr-chip b { font-weight: 700; color: var(--navy-accent); }

.myr-chip-ok {
    color: #1e7e34;
    background: rgba(52, 168, 83, .10);
    border-color: rgba(52, 168, 83, .35);
}

.myr-chip-ok i { color: var(--success); }
.myr-chip-off, .myr-chip-off i { color: var(--text-muted); }
body.dark-mode .myr-chip-ok { color: #7ee2a0; }

.myr-pick {
    flex: 0 1 340px;
    min-width: 230px;
}

.myr-pick label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.myr-pick label i { color: var(--navy-accent); }

@media (max-width: 700px) {
    .myr-pick { flex-basis: 100%; }
}

/* compact KPI row — same small-box system, roughly a third less height */
.myr-kpi { gap: 14px; margin-bottom: 16px; }
.small-box-sm .inner { padding: 12px 14px 9px; }
.small-box-sm .inner h3 { font-size: clamp(19px, 3vw, 25px); margin: 0 0 2px; }
.small-box-sm .inner p { font-size: 12px; }
.small-box-sm .icon { top: 6px; right: 10px; font-size: 42px; }
.small-box-sm:hover .icon { font-size: 46px; }
.small-box-sm .small-box-footer { padding: 5px 0; font-size: 11.5px; }

.myr-sub {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

/* on-screen A4 sheet — holds the same markup the printer gets */
.a4-wrap {
    display: flex;
    justify-content: center;
    padding: 26px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    overflow-x: auto;
}

/* theme vars re-declared here so the card reads as paper even in dark mode */
.a4-sheet {
    --bg-card: #ffffff;
    --bg-primary: #f7f8fa;
    --bg-secondary: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #333333;
    --text-muted: #666666;
    --border-color: #d0d5dd;
    --table-hover: #f2f4f7;
    width: 210mm;
    max-width: 100%;
    min-height: 250mm;
    padding: 14mm;
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.a4-sheet .result-card {
    max-width: none;
    margin: 0;
    border: none;
    box-shadow: none;
}

/* framed skins keep their own frame inside the sheet */
.a4-sheet .rc-t-formal  { border: 2px solid var(--rc-accent, #001f3f); }
.a4-sheet .rc-t-elegant { border: 4px double var(--rc-accent, #001f3f); }
.a4-sheet .rc-t-board   { border: 2px solid #1a1a1a; }

/* settings — template preview stack, one skin visible at a time */
.tpl-pv { display: none; }
.tpl-pv.active { display: block; }

/* settings — template gallery */
.tplg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.tplg-card {
    position: relative;
    padding: 12px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.tplg-card:hover { border-color: var(--navy-accent); }
.tplg-card.active { border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0, 116, 217, .15); }
.tplg-card input { position: absolute; opacity: 0; pointer-events: none; }

.tplg-check {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
    color: var(--navy-accent);
    opacity: 0;
    transition: opacity .15s;
}

.tplg-card.active .tplg-check { opacity: 1; }

.tplg-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.tplg-chip {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    background: var(--navy-accent);
    border-radius: 0;
}

.tplg-desc { font-size: 12px; line-height: 1.45; color: var(--text-muted); }

/* mini css sketches inside the gallery cards */
.tplg-thumb {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 110px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 0;
    overflow: hidden;
}

body.dark-mode .tplg-thumb { background: #f7f7f7; }

.tt-bar { height: 10px; background: var(--navy-primary); border-radius: 0; }
.tt-bar-o { height: 10px; border: 1px solid var(--navy-primary); border-radius: 0; }
.tt-row { height: 6px; background: #d7dde5; border-radius: 0; }
.tt-row-thin { height: 4px; background: #e3e8ee; border-radius: 0; }
.tt-head { height: 8px; background: var(--navy-primary); opacity: .85; border-radius: 0; }
.tt-split { display: flex; gap: 4px; }
.tt-split > * { flex: 1 1 0; }
.tt-stack { display: flex; flex-direction: column; gap: 4px; }
.tt-r { border-radius: 0; }
.tt-mid { width: 64%; height: 8px; align-self: center; border-top: 2px solid var(--navy-primary); border-bottom: 2px solid var(--navy-primary); }
.tt-frame2 { border: 3px double var(--navy-primary); border-radius: 0; }
.tt-cellrow { display: flex; }
.tt-cellrow > i { flex: 1 1 0; height: 10px; background: #f2f4f7; border: 1px solid #aab3bf; margin-left: -1px; }
.tt-cellrow > i:first-child { margin-left: 0; flex: 1.6 1 0; }
.tt-box { flex: 0 0 34%; border: 1px solid #c6ced8; border-radius: 0; background: #eef1f5; }
.tt-frame { border: 2px solid var(--navy-primary); border-radius: 0; }
.tt-cols { display: flex; gap: 3px; }
.tt-cols > i { flex: 1 1 0; height: 6px; background: #d7dde5; border-radius: 0; }
.tt-cols > i:first-child { flex: 1.6 1 0; }
.tt-cols > i:last-child { background: var(--navy-primary); opacity: .7; }
/* ===== end result card template skins ===== */

/* form-grid cell that spans the full row (textareas, notes) */
.form-group-full { grid-column: 1 / -1; }

/* subject printed on the card but excluded from totals/percentage/gpa/pass-fail */
.rc-table tbody tr.rc-skip > td { opacity: .68; }
.rc-table tbody tr.rc-skip > td:first-child { font-style: italic; }

/* theory + practical in one cell — narrower boxes so a split subject doesn't widen the grid */
.marks-cell-split .mark-input {
    width: 56px;
    min-width: 56px;
    padding-left: 4px;
    padding-right: 4px;
}

.marks-cell-split .mark-total-hint { font-size: 10px; }

/* per-cell remark button — icon only, stays out of the tab order */
.marks-cell .mark-ab-btn + [data-note] { margin-left: 2px; }

/* ---- compact square cell: dense data entry, not a form. every control 32px, no radius ---- */
.marks-cell { gap: 4px; }

.mark-input {
    width: 56px;
    min-height: 32px;
    padding: 4px 6px;
    border-radius: 0;
}

.mark-input:focus  { box-shadow: 0 0 0 2px rgba(0, 116, 217, 0.30); }
.mark-input.invalid { box-shadow: 0 0 0 2px rgba(234, 67, 53, 0.25); }

/* 16px keeps ios from zooming the grid on focus; desktop can afford the tighter size */
@media (min-width: 1025px) { .mark-input { font-size: 14px; } }

.mark-total-hint { font-size: 11px; }

.mark-ab-btn {
    min-width: 32px;
    min-height: 32px;
    padding: 0 6px;
    border-radius: 0;
}

.marks-cell [data-note] {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 12px;
    border-radius: 0;
}

.mark-grade-preview {
    min-width: 26px;
    padding: 4px 5px;
    font-size: 11px;
    border-radius: 0;
}

.marks-cell-split .mark-input { width: 44px; min-width: 44px; }

/* ===== wide modal: form on the left, live profile document on the right =====
   cap is raised to 1400 so 90% is actually reached on a normal laptop instead of
   being clipped back by max-width; only a very wide monitor hits the cap */
.modal-wide { width: 90%; max-width: 1400px; }

.modal-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 22px;
    align-items: start;
}

.modal-main { min-width: 0; }

.modal-side {
    position: sticky;
    top: 0;
    padding: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.modal-side .info-banner { margin-bottom: 0; font-size: 12px; padding: 12px 14px; }
.modal-side .form-group label { font-size: 12px; }

/* the preview reads like the document being created, not another form block */
.stu-pv { text-align: center; }

.stu-pv-frame { margin-bottom: 12px; }

.stu-pv-photo {
    width: 100%;
    max-width: 170px;
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    object-fit: cover;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.stu-pv-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
    color: var(--border-color);
}

.stu-pv-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
    word-break: break-word;
}

.stu-pv-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.stu-pv-rows {
    margin-top: 12px;
    text-align: left;
    border-top: 1px solid var(--border-color);
}

.stu-pv-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--border-color);
}

.stu-pv-row > span { color: var(--text-muted); }
.stu-pv-row > b { color: var(--text-primary); text-align: right; word-break: break-word; }

@media (max-width: 900px) {
    .modal-wide { width: 94%; }
    .modal-split { grid-template-columns: 1fr; }
    .modal-side { position: static; order: -1; }
}

/* ===== Processing overlay — every write shows it, every path clears it =====
   Two signals, never both: overlay = writes, the thin #ormsBar = reads.
   Visibility rides .proc-on (not .initially-hidden) so it stays independent of that utility. */
.proc-ov {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(10, 18, 28, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.proc-ov.proc-on { display: flex; }

.proc-logo {
    width: 84px;
    height: 84px;
    object-fit: cover;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
    animation: procPulse 1.5s ease-in-out infinite;
}

@keyframes procPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.06); opacity: .86; }
}

.proc-bar {
    width: 210px;
    height: 4px;
    background: rgba(255, 255, 255, .25);
    border-radius: 0;
    overflow: hidden;
}

.proc-bar > i {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--navy-accent);
    border-radius: 0;
    animation: procSlide 1.1s ease-in-out infinite;
}

@keyframes procSlide {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(310%); }
}

.proc-label {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.proc-count { color: rgba(255, 255, 255, .75); font-size: 12px; font-weight: 600; }
.proc-count:empty { display: none; }

/* reduced motion = less movement, NOT less information — the indicator still shows */
@media (prefers-reduced-motion: reduce) {
    .proc-logo { animation: none; }
    .proc-bar > i { animation-duration: 2.6s; }
}

/* ===== card verify QR — bottom of every published card (js fills the box) ===== */
.rc-verify {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}
.rc-qr { width: 84px; height: 84px; flex: 0 0 84px; }
.rc-qr img, .rc-qr canvas { display: block; width: 84px; height: 84px; background: #fff; }
.rc-verify-txt {
    font-size: 10.5px;
    color: var(--text-muted);
    max-width: 130px;
    text-align: right;
    line-height: 1.35;
}
.rc-t-board .rc-qr img, .rc-t-board .rc-qr canvas { border: 1px solid var(--text-primary); }

/* ===== public verify page (index.php?verify=) ===== */
.verify-card { text-align: center; }
.verify-card h2 { margin: 6px 0 4px; }
.verify-badge { font-size: 52px; line-height: 1; }
.verify-ok .verify-badge { color: var(--success); }
.verify-bad .verify-badge { color: var(--danger); }
.verify-sub { color: var(--text-secondary); margin-bottom: 14px; }
.verify-card .about-table-wrapper { text-align: left; margin-top: 6px; }
.verify-card .about-roles-table th { width: 40%; white-space: nowrap; }
.verify-note { margin-top: 12px; font-size: 12.5px; color: var(--text-muted); }

/* ===== merit & analytics tab ===== */
.merit-chart { position: relative; height: 320px; margin-top: 6px; }

/* marks grid: elective cell of a student who doesn't take it */
.marks-cell-na { justify-content: center; opacity: .7; }
.mark-na { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ===== marks grid: zebra rows =====
   Declared here (late) on purpose. The pinned Roll/Student cells set their own opaque
   background so scrolled content can't show through them, so a stripe on plain `td`
   alone would stop dead at the third column — every rule below repaints those two too.
   Order matters: stripe, then hover, then saved/error, so each one outranks the last. */
.marks-grid tbody tr:nth-child(odd) > td,
.marks-grid tbody tr:nth-child(odd) > td:first-child,
.marks-grid tbody tr:nth-child(odd) > .col-roll + .col-student {
    background: rgba(0, 31, 63, .035);
}

.marks-grid tbody tr:hover > td,
.marks-grid tbody tr:hover > td:first-child,
.marks-grid tbody tr:hover > .col-roll + .col-student {
    background: var(--table-hover);
}

.marks-grid tbody tr.marks-row-saved > td,
.marks-grid tbody tr.marks-row-saved > td:first-child,
.marks-grid tbody tr.marks-row-saved > .col-roll + .col-student {
    background: rgba(52, 168, 83, .10);
}

.marks-grid tbody tr.marks-row-error > td,
.marks-grid tbody tr.marks-row-error > td:first-child,
.marks-grid tbody tr.marks-row-error > .col-roll + .col-student {
    background: rgba(234, 67, 53, .10);
}

body.dark-mode .marks-grid tbody tr:nth-child(odd) > td,
body.dark-mode .marks-grid tbody tr:nth-child(odd) > td:first-child,
body.dark-mode .marks-grid tbody tr:nth-child(odd) > .col-roll + .col-student {
    background: rgba(255, 255, 255, .04);
}

/* dark hover needs the body.dark-mode prefix too, or the dark stripe above outranks it */
body.dark-mode .marks-grid tbody tr:hover > td,
body.dark-mode .marks-grid tbody tr:hover > td:first-child,
body.dark-mode .marks-grid tbody tr:hover > .col-roll + .col-student {
    background: var(--table-hover);
}

body.dark-mode .marks-grid tbody tr.marks-row-saved > td,
body.dark-mode .marks-grid tbody tr.marks-row-saved > td:first-child,
body.dark-mode .marks-grid tbody tr.marks-row-saved > .col-roll + .col-student {
    background: rgba(52, 168, 83, .18);
}

body.dark-mode .marks-grid tbody tr.marks-row-error > td,
body.dark-mode .marks-grid tbody tr.marks-row-error > td:first-child,
body.dark-mode .marks-grid tbody tr.marks-row-error > .col-roll + .col-student {
    background: rgba(234, 67, 53, .18);
}

/* ===== elective enrolment modal (subjects.php) ===== */
.elect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin: 10px 0 18px;
}
.elect-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 8px 10px;
    cursor: pointer;
}
.elect-item:hover { background: var(--table-hover); }
.elect-item > span { display: flex; flex-direction: column; line-height: 1.25; }
.elect-item small { color: var(--text-muted); font-size: 11px; }
.elect-locked { opacity: .75; cursor: not-allowed; }

/* ===== wide modals — same treatment .marks-modal already uses ===== */
.modal.modal-wide {
    width: 90vw;
    max-width: none;
}

.modal.modal-lg {
    width: 80vw;
    max-width: none;
}

/* ===== Consolidated Mark Sheet skin =====
   Board-style bordered sheet: centred masthead, boxed identity block, and a grid where each
   term owns a FULL / SECURED column pair. Colour comes from --rc-accent (Result Settings),
   never a hardcoded hex, so the sheet follows whatever accent the school sets. */
.rc-t-marksheet {
    border: 2px solid var(--rc-accent, var(--navy-primary));
    border-radius: 0;
    box-shadow: none;
}

.rc-t-marksheet .rc-header {
    align-items: center;
    gap: 14px;
    padding-bottom: 6px;
    border-bottom: none;
}

.rc-t-marksheet .rc-school { text-align: center; }

.rc-t-marksheet .rc-school-name {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rc-accent, var(--navy-primary));
}

.rc-t-marksheet .rc-school-meta {
    font-weight: 600;
    color: var(--rc-accent, var(--navy-primary));
}

/* the session banner is text, not a filled bar — matches a printed board sheet */
.rc-t-marksheet .rc-title {
    display: block;
    margin: 0 0 12px;
    padding: 4px 0 8px;
    background: transparent;
    color: var(--rc-accent, var(--navy-primary));
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .8px;
    border-bottom: 1.5px solid var(--rc-accent, var(--navy-primary));
    border-radius: 0;
}

/* identity block — boxed, two columns of label/value pairs */
.rcm-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px solid var(--text-secondary);
}

.rc-t-marksheet .rcm-info .rc-photo {
    width: 62px;
    height: 62px;
    border-radius: 0;
    border-color: var(--text-secondary);
}

.rcm-info-cols {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
    min-width: 0;
}

.rcm-field {
    display: flex;
    gap: 6px;
    padding: 2px 0;
    font-size: 12.5px;
    line-height: 1.45;
}

.rcm-field > span { color: var(--text-secondary); }
.rcm-field > b { color: var(--text-primary); word-break: break-word; }

/* the grid itself — every cell ruled, subject column left, marks centred */
.rcm-table th,
.rcm-table td {
    padding: 5px 6px;
    text-align: center;
    font-size: 12px;
    border: 1px solid var(--text-secondary);
}

.rcm-table th {
    background: transparent;
    color: var(--text-primary);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    border-color: var(--text-primary);
}

.rcm-table th.rcm-sub,
.rcm-table td.rcm-sub {
    text-align: left;
    font-weight: 700;
    color: var(--text-primary);
}

.rcm-table th sup { font-size: 9px; }
.rcm-table th small { font-weight: 600; opacity: .75; }

.rcm-table tbody tr.rc-fail > td {
    background: transparent;
    color: var(--danger);
}

.rcm-table tbody tr.rcm-total > td,
.rcm-table tfoot td {
    font-weight: 700;
    color: var(--text-primary);
}

.rc-t-marksheet .rc-badge {
    padding: 2px 10px;
    background: transparent;
    border: 1.5px solid currentColor;
    border-radius: 0;
    font-size: 11px;
}

.rc-t-marksheet .rc-badge-pass { color: var(--success); }
.rc-t-marksheet .rc-badge-fail { color: var(--danger); }

.rc-t-marksheet .rc-summary {
    background: transparent;
    border: 1px solid var(--text-primary);
    border-radius: 0;
}

.rc-t-marksheet .rc-summary-item strong { color: var(--text-primary); }
.rc-t-marksheet .rc-sign { border-top-color: var(--text-primary); }

@media (max-width: 720px) {
    .rcm-info-cols { grid-template-columns: 1fr; }
    .rcm-table { display: block; overflow-x: auto; }
}

/* fixed layout so the mark columns divide evenly however many terms there are —
   the subject column keeps a fixed share and long names wrap instead of pushing the grid wide */
.rcm-table { table-layout: fixed; width: 100%; }
.rcm-table th.rcm-sub,
.rcm-table td.rcm-sub { width: 24%; word-break: break-word; }

/* ===== term density — 3, 4 or 5+ terms still have to fit one A4 sheet =====
   ormsTermDensity() stamps these on the term-wise tables from the term count, so a school
   running three or four terms needs no manual tuning. Declared after the per-template rules
   above so these win the equal-specificity tie. */
.rc-dense-1 th,
.rc-dense-1 td { padding: 4px 5px; font-size: 11px; }

.rc-dense-2 th,
.rc-dense-2 td { padding: 3px 4px; font-size: 10px; }

.rc-dense-3 th,
.rc-dense-3 td { padding: 2px 3px; font-size: 9px; }

.rc-dense-1 th { font-size: 10px; }
.rc-dense-2 th { font-size: 9.5px; }
.rc-dense-3 th { font-size: 8.5px; }

/* code/label extras are the first thing to go when space gets tight */
.rc-dense-2 td small,
.rc-dense-3 td small { display: none; }

/* a very wide sheet scrolls on screen rather than bursting the card */
.rc-t-marksheet .rcm-table,
.rc-t-report .rcr-table,
.rc-t-progress .rcp-table { max-width: 100%; }

/* gallery thumbnail — paired cells hint at the full/secured columns */
.tt-cellrow.tt-pair > i:nth-child(even) { background: #dfe5ec; }

/* ===== result settings: wide template preview =====
   6fr/4fr = a true 60/40 of the row (the gap comes out of the track sizes, so an explicit
   60% would overflow). minmax(0,…) lets the scaled card shrink instead of forcing the grid wider. */
.rs-split.rs-split-wide {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
}

/* the 1100px stack rule further up is equal specificity — this restates it so the wide
   variant still collapses to one column on a narrow screen */
@media (max-width: 1100px) {
    .rs-split.rs-split-wide { grid-template-columns: 1fr; }
}

/* at 60% the card can outgrow the viewport, and a sticky box taller than the screen clips its
   own bottom with no way to reach it — so this one scrolls inside instead */
.rs-split-wide .rs-preview-pane {
    max-height: calc(100vh - 32px);
    overflow: auto;
}

/* the shrink hack below only exists to squeeze an A4 card into the narrow 420px rail.
   The wide pane is big enough for the real thing, and .result-card's own 820px cap would
   otherwise leave a band of dead white space to the right of the scaled card. */
.rs-split-wide .rs-preview-card { overflow: auto; }

.rs-split-wide .rs-preview-card .result-card {
    transform: none;
    width: auto;
    max-width: 100%;
}

.rs-preview-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== printable modal =====
   The global print block hides EVERY .modal-overlay, which is why anything shown in a popup
   used to print blank. This opt-in class outranks it (0,2,0 beats 0,1,0) and flattens the
   overlay into normal flow so its content can paginate. ORMS.printOnly() still hides the
   modal header and the rest of the page, so only the target sheet reaches the paper. */
@media print {
    .modal-overlay.printable-modal {
        display: block !important;
        position: static !important;
        padding: 0 !important;
        background: none !important;
    }

    .modal-overlay.printable-modal .modal {
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
        background: #fff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .modal-overlay.printable-modal .modal-body {
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .modal-overlay.printable-modal .a4-wrap {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        overflow: visible !important;
    }

    .modal-overlay.printable-modal .a4-sheet {
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
}

/* ===== dashboard: marks-entry progress per section ===== */
.dash-prog + .dash-prog { margin-top: 14px; }

.dash-prog-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 13px;
}

.dash-prog-top > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-weight: 600;
}

.dash-prog-top > b { color: var(--text-muted); font-weight: 600; white-space: nowrap; }

/* chips that wrap onto several lines need real vertical spacing, not just word-spacing */
.chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ===== student profile card (students.php view modal) ===== */
.sprof-head {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px;
    margin-bottom: 18px;
    background: var(--navy-primary);
    border-radius: 0;
}

.sprof-photo {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    object-fit: cover;
    border-radius: 0;
    border: 3px solid rgba(255, 255, 255, .35);
    background: #fff;
}

.sprof-id { flex: 1 1 260px; min-width: 0; }

.sprof-id h3 {
    margin: 0 0 4px;
    font-size: 22px;
    color: #fff;
}

.sprof-sub {
    margin: 0 0 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, .82);
}

.sprof-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* on the navy header the plain chip would vanish — give it a light face */
.sprof-badges .subject-chip {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.sprof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.sprof-card {
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.sprof-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--navy-accent);
    border-bottom: 1px solid var(--border-light);
}

.sprof-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--border-light);
}

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

.sprof-row > span {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--text-muted);
}

.sprof-row > b {
    flex: 1 1 auto;
    text-align: right;
    font-size: 13.5px;
    color: var(--text-primary);
    word-break: break-word;
}

@media (max-width: 640px) {
    .sprof-head { justify-content: center; text-align: center; }
    .sprof-badges { justify-content: center; }
}

/* ===== DataTables toolbar — narrow screens =====
   must sit after the older mobile dt rules higher up so it wins the ties */
@media (max-width: 768px) {
    .dataTables_wrapper {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 10px;
        column-gap: 0;
    }

    /* one band per control instead of a single strip — safe for any dom string */
    .dataTables_wrapper::before { content: none; }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dt-buttons {
        grid-row: auto;
        grid-column: 1;
        margin: 0;
        padding: 10px 12px;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 0;
    }

    .dataTables_wrapper .dataTables_filter { order: 1; }
    .dataTables_wrapper .dataTables_length { order: 2; }
    .dataTables_wrapper .dt-buttons { order: 3; justify-content: flex-start; }
    .dataTables_wrapper table.dataTable { order: 4; }
    .dataTables_wrapper .dataTables_info { order: 5; }

    .dataTables_wrapper .dataTables_paginate {
        order: 6;
        grid-column: 1;
        justify-self: start;
        padding-top: 0;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        flex-wrap: wrap;
        gap: 6px 8px;
        width: 100%;
    }

    /* the old full-width rule pushes these down 8px — kills the label alignment */
    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        margin-top: 0;
        max-width: none;
    }

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

    .dt-button { min-height: 44px; }
}

@media print {
    .dataTables_wrapper { display: block; }
    .dataTables_wrapper::before { content: none; }
}

/* ===== Card-in-card flattening =====
   the outer .data-section already pays for padding, bg and shadow — anything card-shaped
   dropped inside it drops its own so content isn't inset twice */
.data-section .lte-card {
    background: none;
    box-shadow: none;
    border-radius: 0 !important;
    overflow: visible;
    margin-bottom: 18px;
}

.data-section .lte-card:last-child { margin-bottom: 0; }
.data-section .lte-card > .lte-card-header { padding: 0 0 10px; }
.data-section .lte-card > .lte-card-body { padding: 14px 0 0; }

.data-section > .tab-pane {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

/* tabs opening a card = that card's header strip: underline runs to the card edges
   instead of floating in a 20px gutter */
.data-section > .tab-nav:first-child {
    margin: -20px -20px 18px;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .data-section > .tab-nav:first-child { margin: -15px -15px 16px; padding: 0 15px; }
}

@media (max-width: 480px) {
    .data-section > .tab-nav:first-child { margin: -12px -12px 14px; padding: 0 12px; }
}

/* ===== Merged page header — title + breadcrumb in one bar ===== */
/* left block: h1 on top, trail tucked under it. beats the mobile `.header > div`
   rule (0,1,1) on specificity so the title never flips to right-aligned. */
.header > .header-page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}

/* trail — same look as the old standalone .breadcrumb, minus its bar padding */
.header-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--text-muted);
}

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

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

.header-crumb a i { font-size: 11px; }

body.dark-mode .header-crumb { color: var(--text-muted); }
body.dark-mode .header-crumb a { color: var(--navy-accent); }
body.dark-mode .header-crumb a:hover { color: #fff; }

/* desktop only — mobile already stacks .header into a column at 768px, don't touch it */
@media (min-width: 769px) {
    .header { flex-wrap: wrap; gap: 16px; }
    .header > .header-right { flex: 0 0 auto; margin-left: auto; }
}

/* ===== hide utility — MUST stay the last rule in this file =====
   Equal specificity (0,1,0) against every component class, so ties are broken by source
   order alone. Declared earlier it LOST to any component that sets its own display
   (.marks-locked-banner, .orms-empty, .stat-mini, .assign-grid, .a4-wrap) and those
   elements stayed permanently visible. Deliberately NOT !important: a dozen pages reveal
   panels with jQuery .show(), which writes an inline display that must still win.
   Add new rules ABOVE this block. */
/* ===== Approvals, head teacher signature, offline score sheet ===== */

/* approval chip — its own dimension beside .status-badge so the two never fight */
.appr-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.appr-badge i { margin-right: 4px; font-size: 11px; }

.appr-draft    { background: #eceff1; color: #455a64; }
.appr-pending  { background: #fff3cd; color: #7a5b00; }
.appr-approved { background: #d4edda; color: #155724; }
.appr-rejected { background: #f8d7da; color: #721c24; }

body.dark-mode .appr-draft    { background: rgba(120, 144, 156, .22); color: #cfd8dc; }
body.dark-mode .appr-pending  { background: rgba(251, 188, 4, .18);   color: #ffd75e; }
body.dark-mode .appr-approved { background: rgba(52, 168, 83, .18);   color: #7ee2a0; }
body.dark-mode .appr-rejected { background: rgba(234, 67, 53, .18);   color: #ff9b92; }

/* reviewer's send-back note under the chip */
.appr-note {
    display: inline-block;
    margin-top: 4px;
    color: var(--danger);
    font-size: 11.5px;
    line-height: 1.4;
}

/* head teacher's signature scan. .rc-sign's border-top IS the signature rule, so anything in
   flow lands UNDER it — park the scan out of flow directly above the line instead, which keeps
   the row's own layout untouched and prints the same. */
.rc-sign { position: relative; }

.rc-sign-img {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    max-width: 150px;
    max-height: 44px;
    margin-bottom: 4px;
    object-fit: contain;
}

/* formal slip carries both comments in one box — space the second title off the first paragraph */
.rcf-comment > .rc-key-title:not(:first-child) { margin-top: 10px; }

/* signature upload thumbnail — a signature is wide and short, not a round avatar */
.sign-preview-img {
    width: 120px;
    height: 60px;
    padding: 4px;
    border: 2px solid #e9ecef;
    border-radius: 0;
    object-fit: contain;
    background: var(--bg-secondary);
}

body.dark-mode .sign-preview-img { border-color: var(--border-color); }

/* download/import group sits at the far end of the existing popup toolbar */
.marks-offline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

/* the one-line workflow hint — an .info-banner flattened into a popup strip */
.marks-help {
    flex: 0 0 auto;
    margin: 0;
    border-radius: 0;
}

/* import problem list inside the swal — scrolls on its own, never stretches the dialog */
.sheet-issues {
    max-height: 240px;
    overflow: auto;
    text-align: left;
}

/* add / update / clear / skipped counters above the problem list */
.sheet-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin-bottom: 12px;
    font-size: 14px;
}

.sheet-counts b { color: var(--navy-accent); font-weight: 700; }
.sheet-counts i { color: var(--navy-accent); }

@media (max-width: 768px) {
    .marks-offline { margin-left: 0; width: 100%; }
    .sheet-issues { max-height: 180px; }
}

@media print {
    .rc-sign-img { max-height: 40px; }
    .appr-note   { color: #000 !important; }
}

/* ===== ORMS — grading sets, components, broadsheet, attendance, fees =====
   Six features shipped in one batch. Everything here rides the same tokens the rest of the
   file uses (--navy-*, --success/--danger, --rc-accent on the card) so a user theme and dark
   mode carry straight through. Nothing sets `display` on a class that also wears
   .initially-hidden — that utility is still the last rule and wins on source order. */

/* ---- Report card: grade key table, attendance, CA split, withheld stamp ---- */

/* the legend grew from a chip row into a real 3-col table — grade / range / what it means */
.rc-key-table {
    width: 100%;
    margin-top: 2px;
    border-collapse: collapse;
    font-size: 12px;
}

.rc-key-table th {
    padding: 5px 8px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border-bottom: 1px solid var(--border-color);
}

.rc-key-table td {
    padding: 5px 8px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.rc-key-table tbody tr:last-child td { border-bottom: none; }

/* grade + range stay narrow so the interpretation gets the room */
.rc-key-table td:first-child {
    width: 64px;
    font-weight: 700;
    color: var(--rc-accent, var(--navy-primary));
}

.rc-key-table td:nth-child(2) { width: 94px; white-space: nowrap; }
.rc-key-table td:last-child { line-height: 1.45; }

.rc-key-note {
    margin: 8px 0 0;
    font-size: 11.5px;
    font-style: italic;
    line-height: 1.5;
    color: var(--text-muted);
}

/* days present / days in session — one value, never broken across lines */
.rc-att { white-space: nowrap; }

.rc-att-pct {
    font-weight: 800;
    color: var(--rc-accent, var(--navy-accent));
}

/* CA + Exam columns — a numeric pair, no wider than the digits need */
.rc-ca-col { text-align: center; white-space: nowrap; }
.rc-table .rc-ca-col { width: 62px; text-align: center; font-size: .95em; }

/* withheld — a stamp, not a footnote. one block treatment covers the card stamp,
   the staff banner and the public "we're holding this" panel */
.rc-withheld {
    margin: 16px 0;
    padding: 13px 18px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--danger);
    background: rgba(234, 67, 53, .08);
    border: 2px solid var(--danger);
    border-radius: 0;
}

.rc-withheld i { font-size: 1.2em; }

.rc-withheld h3 {
    margin: 8px 0 6px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--danger);
}

.rc-withheld p {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
}

.rc-withheld .rc-key-note { margin-top: 8px; }

/* same flag inline in a broadsheet / results cell — span only, so the block form above
   (and the .initially-hidden panel in my_results) is never touched by this */
span.rc-withheld {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    border-width: 1px;
    border-radius: 0;
    vertical-align: middle;
}

/* ---- Broadsheet — one wide sheet, scrolls in its own box ---- */
.bs-wrap { margin-bottom: 18px; }

/* nowrap is what makes it overflow the wrapper instead of the page */
.bs-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

table.bs-table thead th {
    padding: 9px 10px !important;
    font-size: 12px !important;
    text-align: center;
    white-space: nowrap;
    border: 1px solid var(--navy-dark);
}

table.bs-table tbody td {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
    text-align: center;
    border: 1px solid var(--border-light);
}

/* roll + student stay left-read; every score column is centred */
table.bs-table thead th:first-child,
table.bs-table thead th:nth-child(2),
table.bs-table tbody td:first-child,
table.bs-table tbody td:nth-child(2) { text-align: left; }

/* CA / Exam feed the subject total beside them — lighter so the total reads first */
.bs-sub { font-size: 11.5px !important; color: var(--text-muted); }
table.bs-table thead th.bs-sub { font-size: 11px !important; opacity: .88; }

.bs-tot {
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(0, 116, 217, .06);
}

/* the aggregate headers get an accent rule instead of a second fill — theme-safe */
table.bs-table thead th.bs-tot { box-shadow: inset 0 -3px 0 var(--navy-accent); }

/* below the pass mark — tinted, still readable, never a solid red block */
.bs-fail {
    color: var(--danger);
    font-weight: 700;
    background: rgba(234, 67, 53, .10);
}

/* absent is a different read from failed — greyed, not alarmed */
td.bs-abs { background: rgba(0, 0, 0, .04); }

span.bs-abs {
    display: inline-block;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--text-muted);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.bs-foot { margin-top: 6px; }
.bs-legend { margin-top: 6px; }
.bs-legend .rc-key { margin-top: 0; }

/* class stats / subject spread / grade distribution — same skin as the about tables */
.bs-stat {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.bs-stat th,
.bs-stat td {
    padding: 9px 12px;
    text-align: left;
    border: 1px solid var(--border-color);
}

.bs-stat th {
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    background: var(--navy-primary);
}

.bs-stat th i { opacity: .85; }
.bs-stat td { color: var(--text-secondary); }
.bs-stat td b { font-weight: 800; color: var(--navy-accent); }
.bs-stat td small { color: var(--text-muted); }
.bs-stat-row:hover > td { background: var(--table-hover); }
.bs-stat tbody tr.bs-fail > td { background: rgba(234, 67, 53, .08); }

/* branded head on the printed sheet only — hidden on screen with .print-only */
.bs-print-head { text-align: center; }
.bs-print-head img { max-height: 62px; margin-bottom: 6px; }

.bs-print-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.bs-print-head h3 {
    margin: 8px 0 2px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.bs-print-head p { margin: 2px 0; font-size: 11.5px; }

/* ---- Attendance — a typing grid, not a form ---- */

/* the "days the school was in session" shortcut above the grid */
.att-bulk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.att-bulk label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.att-bulk label i { color: var(--navy-accent); }
.att-bulk .att-in { width: 150px; }
.att-bulk .myr-sub { flex: 1 1 220px; }

.att-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: var(--bg-card);
}

.att-grid thead th {
    padding: 11px 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    background: var(--navy-primary);
    border-bottom: 2px solid var(--navy-dark);
}

.att-grid thead th i { opacity: .85; }

.att-grid tbody td {
    padding: 7px 12px;
    vertical-align: middle;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.att-grid tbody td small { color: var(--text-muted); }
.att-row:hover > td { background: var(--table-hover); }

/* square, dense boxes — same language the marks grid speaks */
.att-in {
    width: 110px;
    min-height: 38px;
    padding: 6px 9px;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 0;
    transition: border-color .15s, box-shadow .15s;
}

.att-grid .att-in[data-f="r"] { width: 100%; min-width: 160px; font-weight: 500; }

.att-in::-webkit-outer-spin-button,
.att-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.att-in[type="number"] { -moz-appearance: textfield; }

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

.att-in:read-only {
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: default;
}

/* live percentage as the teacher types */
.att-pct {
    display: inline-block;
    min-width: 56px;
    padding: 3px 9px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--navy-accent);
    background: rgba(0, 116, 217, .10);
    border-radius: 0;
}

/* ---- Fees — money reads as money, arrears read as a warning ---- */

/* money strings are far longer than a headcount, so the KPI number backs off */
.fee-kpi .small-box .inner h3 { font-size: clamp(17px, 2.6vw, 24px); }

.fee-balance {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* owing = danger, cleared = success. also stands alone as a chip on results.php */
.fee-owing,
.fee-clear {
    display: inline-block;
    padding: 2px 9px;
    font-weight: 700;
    line-height: 1.6;
    border-radius: 0;
}

.fee-owing {
    color: var(--danger);
    background: rgba(234, 67, 53, .10);
}

.fee-clear {
    color: #1e7e34;
    background: rgba(52, 168, 83, .10);
}

.fee-owing i { margin-right: 4px; }
.fee-clear i { margin-right: 4px; }

/* manual hold — the switch a principal flips, distinct from an arrears block */
.fee-hold {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: #8a6100;
    background: rgba(251, 188, 4, .16);
    border: 1px solid rgba(251, 188, 4, .45);
    border-radius: 0;
}

.fee-ledger { margin-top: 4px; }
.fee-ledger .about-roles-table td { white-space: nowrap; }
.fee-ledger .about-roles-table td:nth-child(3) { white-space: normal; min-width: 180px; }

/* ---- Result settings: grading sets + assessment components ---- */

/* set / scheme picker — reads like the tab bar, wraps when there are many */
.gs-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 4px;
    margin-bottom: 18px;
    padding: 6px 6px 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
    border-radius: 0;
}

.gs-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin-bottom: -2px;
    padding: 9px 15px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}

.gs-chip i { font-size: 12px; }
.gs-chip .status-badge { padding: 2px 8px; font-size: 11px; }
.gs-chip:hover { color: var(--navy-accent); background: var(--table-hover); }

.gs-chip-active {
    color: var(--navy-accent);
    background: var(--bg-card);
    border-bottom-color: var(--navy-accent);
}

/* components table + the running weight total under it */
.ac-wrap { margin-bottom: 18px; }
.ac-wrap .about-table-wrapper { margin-bottom: 0; }
.ac-row td { vertical-align: middle; }

.ac-weight {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--navy-accent);
}

.ac-weight-bad { color: var(--danger); }

/* the Σ strip — the one number that says whether the scheme actually works */
.ac-sum {
    margin-top: 12px;
    padding: 11px 15px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    color: #1e7e34;
    background: rgba(52, 168, 83, .10);
    border: 1px solid rgba(52, 168, 83, .35);
    border-radius: 0;
}

.ac-sum i { margin-right: 6px; color: var(--success); }
.ac-sum strong { font-weight: 800; }

.ac-sum-bad {
    color: #a32219;
    background: rgba(234, 67, 53, .10);
    border-color: rgba(234, 67, 53, .38);
}

.ac-sum-bad i { color: var(--danger); }

/* ---- Marks entry: one box per component, several per cell ---- */

/* label over box, so four components still fit a subject column */
.me-comp {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.me-comp-head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
    color: var(--text-muted);
}

/* in the sticky navy header the same class lists the whole scheme under the subject */
.marks-grid thead .me-comp-head {
    display: block;
    margin-top: 3px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    color: rgba(255, 255, 255, .78);
}

.me-comp-in {
    width: 50px;
    min-width: 50px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

/* live converted total for the cell — the number that actually lands in marks */
.me-comp-sum {
    display: inline-block;
    min-width: 58px;
    padding: 4px 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    color: var(--navy-accent);
    background: rgba(0, 116, 217, .10);
}

/* ---- Dark mode: the new elements that carry their own colour on a tinted fill ---- */
body.dark-mode .rc-att-pct,
body.dark-mode .att-pct,
body.dark-mode .me-comp-sum,
body.dark-mode .ac-weight,
body.dark-mode .bs-stat td b,
body.dark-mode .gs-chip-active { color: var(--navy-accent) !important; }

body.dark-mode .fee-clear,
body.dark-mode .ac-sum { color: #7ee2a0 !important; }

body.dark-mode .rc-withheld,
body.dark-mode .rc-withheld h3,
body.dark-mode .rc-withheld i,
body.dark-mode .rc-withheld b,
body.dark-mode .fee-owing,
body.dark-mode .bs-fail,
body.dark-mode .bs-stat tbody tr.bs-fail > td,
body.dark-mode .ac-weight-bad,
body.dark-mode .ac-sum-bad { color: #ff9a90 !important; }

body.dark-mode .fee-hold { color: #f3cf72 !important; }

body.dark-mode .rc-withheld p,
body.dark-mode .rc-key-note,
body.dark-mode .bs-sub,
body.dark-mode .me-comp-head,
body.dark-mode span.bs-abs { color: var(--text-muted) !important; }

body.dark-mode .marks-grid thead .me-comp-head { color: rgba(255, 255, 255, .78) !important; }

/* coloured surfaces follow the dark palette the same way the card/table headers do */
body.dark-mode .att-grid thead th,
body.dark-mode .bs-stat th { background: var(--navy-light); }
body.dark-mode table.bs-table thead th.bs-tot { background: var(--navy-primary) !important; }
body.dark-mode td.bs-abs { background: rgba(255, 255, 255, .05); }
body.dark-mode .bs-fail { background: rgba(234, 67, 53, .18); }
body.dark-mode .att-bulk,
body.dark-mode .gs-bar { background: var(--bg-card); }

/* ---- Responsive: the wide two scroll in place, the strips stack ---- */
@media (max-width: 900px) {
    .att-bulk { align-items: stretch; flex-direction: column; }
    .att-bulk .att-in { width: 100%; }
    .att-grid .att-in[data-f="r"] { min-width: 140px; }
    .rc-key-table { font-size: 11.5px; }
    .rc-key-table td:first-child { width: 54px; }
    .rc-key-table td:nth-child(2) { width: 84px; }
}

@media (max-width: 768px) {
    .gs-chip { min-height: 40px; padding: 8px 11px; font-size: 12.5px; }
    .gs-chip .status-badge { display: none; }
    .bs-stat th, .bs-stat td { padding: 7px 9px; }
    .fee-ledger .about-roles-table td:nth-child(3) { min-width: 140px; }
    .rc-withheld { padding: 12px 14px; font-size: 13px; letter-spacing: 1px; }
    .rc-withheld h3 { font-size: 17px; }
}

/* ---- Print ---- */

/* the broadsheet is the one sheet that needs the page turned sideways */
@page bsland { size: A4 landscape; margin: 10mm; }
.bs-print { page: bsland; }

@media print {
    /* dark mode leaves headings/spans light — force ink on everything in the sheet */
    .bs-print,
    .bs-print * { color: #000 !important; }
    .bs-print { background: #fff !important; }

    .bs-print-head { margin-bottom: 6mm; page-break-after: avoid; break-after: avoid; }
    .bs-print-head h2 { font-size: 17px; }
    .bs-print-head h3 { font-size: 13px; }
    .bs-print-head p { font-size: 10px; }

    /* headers wrap here — a 30-column sheet has to fit the page width, not scroll */
    .bs-print .bs-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto;
        page-break-inside: auto;
        break-inside: auto;
    }

    .bs-print .bs-table th,
    .bs-print .bs-table td {
        padding: 3px 4px !important;
        font-size: 8.5px !important;
        white-space: normal !important;
        word-break: break-word;
        border: 1px solid #777 !important;
    }

    .bs-print .bs-table th {
        color: #000 !important;
        background: #e8ecf1 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .bs-print .bs-table tr { page-break-inside: avoid; break-inside: avoid; }
    .bs-print .bs-tot { background: #f0f3f7 !important; font-weight: 700; }
    .bs-print .bs-fail { background: #fdecea !important; }
    .bs-print td.bs-abs { background: #f2f2f2 !important; }
    .bs-print span.bs-abs { background: transparent !important; border-color: #777 !important; }

    .bs-print .bs-foot,
    .bs-print .bs-legend { margin-top: 6mm; page-break-inside: avoid; break-inside: avoid; }

    .bs-print h4 {
        margin: 0 0 4px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        page-break-after: avoid;
        break-after: avoid;
    }

    .bs-print .bs-stat { width: 100% !important; font-size: 9px !important; margin-bottom: 4mm; }

    .bs-print .bs-stat th,
    .bs-print .bs-stat td { padding: 3px 5px !important; border: 1px solid #777 !important; }

    .bs-print .bs-stat th {
        color: #000 !important;
        background: #e8ecf1 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* the card additions — legend, attendance, CA columns, stamp. all 8 skins */
    .rc-key {
        background: #f7f7f7 !important;
        border: 1px solid #999 !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .rc-key-table { width: 100% !important; }
    .rc-key-table th { border-bottom: 1px solid #666 !important; }
    .rc-key-table td { border-bottom: 1px solid #ccc !important; }
    .rc-key-note { color: #444 !important; }

    /* ink-only skins keep their fill-free look — a grey legend box would flatten them */
    .rc-t-compact .rc-key,
    .rc-t-elegant .rc-key,
    .rc-t-board .rc-key { background: transparent !important; }
    .rc-t-board .rc-key-table th { border-bottom: 1.5px solid #000 !important; }
    .rc-t-elegant .rc-key { border: none !important; border-top: 1px solid #000 !important; }

    .rc-att-pct { font-weight: 800; }
    .rc-table .rc-ca-col { font-size: .92em; }

    .rc-withheld,
    .rc-withheld i,
    .rc-withheld b,
    .rc-withheld h3 { color: #b3261e !important; }

    .rc-withheld {
        background: #fdecea !important;
        border-color: #b3261e !important;
        page-break-inside: avoid;
        break-inside: avoid;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rc-withheld p { color: #333 !important; }

    /* attendance sheet prints as a plain grid — the boxes become the values */
    .att-grid { width: 100% !important; }

    .att-grid th,
    .att-grid td { padding: 5px 7px !important; border: 1px solid #777 !important; }

    .att-grid th {
        color: #000 !important;
        background: #e8ecf1 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .att-in {
        width: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        font-size: 11px !important;
        color: #000 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .att-pct { background: transparent !important; color: #000 !important; padding: 0 !important; }
    .att-row { page-break-inside: avoid; break-inside: avoid; }

    /* fee chips stay legible on paper */
    .fee-owing,
    .fee-clear,
    .fee-hold {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}
/* ===== end grading sets / broadsheet / attendance / fees ===== */


/* ===================================================================
   Dashboard 2.0 — kpi cards, ring gauges, chart cards, quick actions
   colours live here as one ramp so a tile, its spark and its bar match
   =================================================================== */

.dash-page {
    --d1: #6366f1;   /* indigo  */
    --d2: #10b981;   /* emerald */
    --d3: #a855f7;   /* violet  */
    --d4: #f59e0b;   /* amber   */
    --d5: #14b8a6;   /* teal    */
    --d-card: var(--bg-card);
    --d-line: #ebedf3;                 /* hairline, lighter than the app default */
    --d-soft: rgba(16, 24, 40, 0.04);
    --d-radius: 0;
}

/* dark mode hands the borders back to the theme */
body.dark-mode.dash-page { --d-line: var(--border-color); --d-soft: rgba(0, 0, 0, 0.28); }

/* the cool page tint the cards sit on — dashboard only, every other page keeps its own */
.dash-page .main-content { background: #f7f8fc; }
body.dark-mode.dash-page .main-content { background: var(--bg-primary); }

/* ---------- kpi cards ---------- */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.dash-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dk-card {
    position: relative;
    padding: 16px 18px;
    background: var(--d-card);
    border: 1px solid var(--d-line);
    border-radius: 0;
    box-shadow: 0 1px 2px var(--d-soft);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.dk-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--d-soft); }

.dk-accent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 0;
    background: var(--d1);
}

.dk-top { display: flex; align-items: center; gap: 13px; }

.dk-ic {
    width: 46px;
    height: 46px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.dk-ic-1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.dk-ic-2 { background: linear-gradient(135deg, #10b981, #059669); }
.dk-ic-3 { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.dk-ic-4 { background: linear-gradient(135deg, #f59e0b, #f97316); }
.dk-ic-5 { background: linear-gradient(135deg, #14b8a6, #0d9488); }

.dk-val { min-width: 0; }
.dk-val h3 { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--text-primary); }
.dk-val p { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; font-weight: 500; }

.dk-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.dk-delta { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }

.dk-spark {
    display: block;          /* span: no box, no size — chart.js would size to 0 */
    position: relative;
    width: 92px;
    height: 34px;
    flex-shrink: 0;
}

/* ---------- mini metric cards ---------- */
.dash-mini {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.dash-mini-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dm-card {
    padding: 16px 18px;
    background: var(--d-card);
    border: 1px solid var(--d-line);
    border-radius: 0;
    box-shadow: 0 1px 2px var(--d-soft);
}

.dm-head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.dm-ic {
    width: 30px;
    height: 30px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.dmi-1 { background: rgba(99, 102, 241, 0.12);  color: #6366f1; }
.dmi-2 { background: rgba(16, 185, 129, 0.12);  color: #10b981; }
.dmi-3 { background: rgba(245, 158, 11, 0.14);  color: #f59e0b; }
.dmi-4 { background: rgba(59, 130, 246, 0.12);  color: #3b82f6; }
.dmi-5 { background: rgba(168, 85, 247, 0.12);  color: #a855f7; }

.dm-sub { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.dm-sub:not(:empty)::before { content: '- '; }

.dm-body { display: flex; align-items: center; gap: 16px; }

.dm-gauge {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
}

.dm-gauge-txt {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
}

.dm-stats { flex: 1; min-width: 0; }
.dm-big { font-size: 17px; font-weight: 800; color: var(--text-primary); }
.dm-c2 { color: #10b981; }
.dm-lbl { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.dm-bar {
    height: 6px;
    border-radius: 0;
    background: var(--border-light);
    margin: 9px 0 11px;
    overflow: hidden;
}

.dm-bar-fill { display: block; height: 100%; width: 0; border-radius: 0; transition: width 0.6s ease; }
.dm-f1 { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.dm-f2 { background: linear-gradient(90deg, #10b981, #059669); }

.dm-body-state { justify-content: space-between; }
.dm-state-txt h4 { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.dm-state-txt p { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

.dm-state-ic {
    width: 54px;
    height: 54px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.dms-3    { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }
.dms-4    { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.dms-warn { background: rgba(234, 67, 53, 0.12);  color: #ea4335; }

/* flat variant — label + value, used by the principal secondary row */
.dm-flat { display: flex; align-items: center; gap: 12px; }
.dm-flat-txt { min-width: 0; flex: 1; }
.dm-flat-txt small { display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.dm-flat-txt b { font-size: 17px; font-weight: 800; color: var(--text-primary); }

/* ---------- chart + panel cards ---------- */
.dash-charts,
.dash-bottom,
.dash-2col {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.dash-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr); }
.dash-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.dash-2col   { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.dc-card {
    background: var(--d-card);
    border: 1px solid var(--d-line);
    border-radius: 0;
    box-shadow: 0 1px 2px var(--d-soft);
    margin-bottom: 18px;
    overflow: hidden;
}

.dash-charts .dc-card,
.dash-bottom .dc-card,
.dash-2col .dc-card { margin-bottom: 0; }

.dc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
}

.dc-head h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.dc-head h3 i { color: var(--navy-accent); font-size: 15px; }
.dc-head h3 span { font-size: 12px; font-weight: 500; color: var(--text-muted); }

.dc-tools { display: flex; align-items: center; gap: 8px; }

.dc-tools button,
.dc-tools > a:not(.dc-more) {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 0;
}

.dc-tools button:hover,
.dc-tools > a:not(.dc-more):hover { background: var(--table-hover); color: var(--navy-accent); }

.dc-more { font-size: 12.5px; font-weight: 600; color: var(--navy-accent); text-decoration: none; }
.dc-more:hover { text-decoration: underline; }

.dc-body { padding: 16px 18px; }
.dc-body .chart-container { height: 252px; }
.dc-card.collapsed .dc-body { display: none; }

/* doughnut + its own legend */
.dc-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dc-donut-c { position: relative; width: 236px; height: 236px; flex-shrink: 0; }
.dc-legend { flex: 1; min-width: 180px; }

.dl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-light);
}

.dl-row:last-child { border-bottom: none; }
.dl-dot { display: inline-block; width: 11px; height: 11px; border-radius: 0; flex-shrink: 0; }
.dl-name { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.dl-name em { font-style: normal; font-weight: 500; color: var(--text-muted); }
.dl-n { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* ---------- quick actions ---------- */
.dq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }

.dq-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 17px 10px;
    border: 1px solid var(--d-line);
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    text-decoration: none;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.dq-tile:hover { transform: translateY(-2px); border-color: var(--navy-accent); box-shadow: 0 6px 16px var(--d-soft); }

.dq-ic {
    width: 40px;
    height: 40px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.dqi-1 { background: rgba(59, 130, 246, 0.12);  color: #3b82f6; }
.dqi-2 { background: rgba(16, 185, 129, 0.12);  color: #10b981; }
.dqi-3 { background: rgba(168, 85, 247, 0.12);  color: #a855f7; }
.dqi-4 { background: rgba(245, 158, 11, 0.14);  color: #f59e0b; }
.dqi-5 { background: rgba(20, 184, 166, 0.12);  color: #14b8a6; }
.dqi-6 { background: rgba(99, 102, 241, 0.12);  color: #6366f1; }

/* ---------- activity feed ---------- */
.da-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-light);
}

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

.da-ic {
    width: 34px;
    height: 34px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.dai-1 { background: rgba(99, 102, 241, 0.12);  color: #6366f1; }
.dai-2 { background: rgba(59, 130, 246, 0.12);  color: #3b82f6; }
.dai-3 { background: rgba(16, 185, 129, 0.12);  color: #10b981; }
.dai-4 { background: rgba(148, 163, 184, 0.18); color: #64748b; }
.dai-5 { background: rgba(245, 158, 11, 0.14);  color: #f59e0b; }
.dai-6 { background: rgba(234, 67, 53, 0.12);   color: #ea4335; }

.da-txt { flex: 1; min-width: 0; }

.da-txt b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.da-txt small { font-size: 11px; color: var(--text-muted); }
.da-time { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }

.skeleton-avatar { width: 34px; height: 34px; border-radius: 0; flex-shrink: 0; }

/* ---------- back to top ---------- */
.dash-fab {
    position: fixed;
    right: 26px;
    bottom: 26px;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 0;
    background: linear-gradient(135deg, #4f6ef7, #8b5cf6);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(79, 110, 247, 0.42);
    z-index: 900;
    transition: transform 0.2s, box-shadow 0.2s;
}

.dash-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px rgba(79, 110, 247, 0.5); }

/* ---------- compact term picker (searchable dropdown) ---------- */
.dc-tools .orms-dd-wrap { min-width: 132px; }

.dc-tools .orms-dd {
    padding: 7px 11px;
    min-height: 0;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1400px) {
    .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dash-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .dash-charts,
    .dash-bottom { grid-template-columns: minmax(0, 1fr); }
    .dc-donut-c { width: 210px; height: 210px; margin: 0 auto; }
}

@media (max-width: 900px) {
    .dash-kpis,
    .dash-kpis-4,
    .dash-mini-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .dash-kpis,
    .dash-kpis-4,
    .dash-mini-4 { grid-template-columns: minmax(0, 1fr); }
    .dm-body { gap: 12px; }
    .dm-gauge { width: 84px; height: 84px; }
    .dash-fab { right: 16px; bottom: 82px; width: 50px; height: 50px; font-size: 18px; }
}

/* ===== end dashboard 2.0 ===== */

/* ===== subject remark popup (marks entry) ===== */
.rmk-pop { text-align: left; }

.rmk-who {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    margin-bottom: 12px;
}

.rmk-av {
    width: 36px;
    height: 36px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--navy-primary), var(--navy-accent));
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}

.rmk-who-t { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; text-align: left; }
.rmk-who-t b { font-size: 14.5px; color: var(--text-primary); }
.rmk-who-t small { font-size: 12px; color: var(--text-muted); }
.rmk-who-t small i { margin-right: 3px; color: var(--navy-accent); }

.rmk-text {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid var(--input-border);
    border-radius: 0;
    background: var(--input-bg);
    color: var(--text-primary);
    resize: vertical;
    min-height: 76px;
}

.rmk-text:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 2px rgba(0, 116, 217, 0.2); }

.rmk-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.rmk-quick { display: flex; flex-wrap: wrap; gap: 6px; }

.rmk-chip {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy-accent);
    background: rgba(0, 116, 217, 0.08);
    border: 1px solid rgba(0, 116, 217, 0.25);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s;
}

.rmk-chip:hover { background: rgba(0, 116, 217, 0.16); }

.rmk-count { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; padding-top: 5px; }

.rmk-view {
    padding: 12px;
    font-size: 14.5px;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px dashed var(--border-color);
    border-radius: 0;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}

.rmk-view i { color: var(--text-muted); }
/* ===== end subject remark popup ===== */

/* ===== subscription lapsed (renew.php) — standalone page, no sidebar ===== */
.renew-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(160deg, var(--navy-primary) 0%, var(--navy-dark) 100%);
}

.renew-card {
    width: 100%;
    max-width: 520px;
    padding: 34px 30px;
    background: var(--bg-card);
    border-radius: 0;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
    text-align: center;
    color: var(--text-primary);
}

.renew-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
}

.renew-card h1 { font-size: 21px; font-weight: 700; margin-bottom: 12px; }
.renew-card p  { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }

.renew-school { font-weight: 600; color: var(--text-primary) !important; }
.renew-school i { color: var(--navy-accent); margin-right: 4px; }

.renew-code {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 0;
    color: var(--navy-accent);
    background: rgba(0, 116, 217, 0.12);
}

.renew-meta { font-size: 12.5px !important; color: var(--text-muted) !important; }
.renew-actions { margin: 18px 0 10px; }
.renew-actions .btn { min-width: 240px; justify-content: center; }

.renew-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-muted);
}

.renew-foot a { color: var(--navy-accent); text-decoration: none; font-weight: 600; }
.renew-foot a:hover { text-decoration: underline; }
/* ===== end subscription lapsed ===== */

/* =========================================================================
   MOBILE LAYER — phones and small tablets
   Sits last on purpose: nearly every rule here has to beat a base rule of
   identical specificity, and ties break on source order. New mobile rules go
   in HERE, above .initially-hidden, which stays the final rule in this file.
   ========================================================================= */

/* dynamic viewport height — mobile browser chrome eats a chunk of 100vh, so a
   100vh shell jumps every time the address bar hides */
@supports (height: 100dvh) {
    .app-container,
    .login-container,
    .maintenance-container { min-height: 100dvh; }
}

/* ---- DataTables Responsive child row ----
   the extension is loaded on every list page and is now actually allowed to
   fold columns (the 600px floor above is scoped off .dtr-inline). its own CSS
   only paints the +/- control — green/red, which reads as add/delete here and
   dies in dark mode — and leaves the folded row completely unthemed. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: var(--navy-accent);
    border: none;
    box-shadow: none;
    color: #fff;
    font-weight: 700;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
    background-color: var(--navy-primary);
}

table.dataTable > tbody > tr.child { background: var(--bg-primary); }
table.dataTable > tbody > tr.child > td.child { padding: 2px 12px 8px; }
table.dataTable > tbody > tr.child ul.dtr-details { display: block; width: 100%; }

table.dataTable > tbody > tr.child ul.dtr-details > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-light);
}

table.dataTable > tbody > tr.child ul.dtr-details > li:last-child { border-bottom: none; }

table.dataTable > tbody > tr.child span.dtr-title {
    flex: 0 0 38%;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}

table.dataTable > tbody > tr.child span.dtr-data {
    flex: 1 1 auto;
    text-align: right;
    color: var(--text-primary);
}

/* action icons / chips folded into the child row need room, not a cramped line */
table.dataTable > tbody > tr.child span.dtr-data .action-icon { margin: 0 0 0 4px; }
table.dataTable > tbody > tr.child span.dtr-data .chip-wrap { justify-content: flex-end; }

/* ---- dropdown bottom-sheet backdrop ----
   a real element, not a pseudo on .orms-dd-wrap: the outside-click handler closes on
   anything that fails `closest('.orms-dd-wrap')`, and a pseudo-element counts as the
   wrap — the sheet could never be dismissed by tapping away from it.
   styled outside the media query so a mid-open resize can't leave an invisible
   click-eating layer on screen; orms.js owns whether it exists at all. */
.orms-dd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10075;
    background: rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
}

body.orms-dd-sheet-open { overflow: hidden; }

@media (max-width: 768px) {

    /* ---- notch clearance ----
       the base mobile block sets a flat 90px and outranks the top-level
       @supports safe-area rule by source order, so the inset is re-applied here */
    .main-content {
        padding-bottom: 90px;
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-bottom-nav {
        padding-left: max(5px, env(safe-area-inset-left, 0px));
        padding-right: max(5px, env(safe-area-inset-right, 0px));
    }

    .sidebar { padding-bottom: env(safe-area-inset-bottom, 0px); }

    /* ---- DataTables toolbar ----
       search + page-length + export trio in one 360px row leaves the search box
       at ~0. stack them; each piece carries its own surface so the abs-positioned
       ::before strip (sized for a single row) can be dropped instead of re-spanned */
    .dataTables_wrapper {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 10px;
    }

    .dataTables_wrapper::before { content: none; }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dt-buttons {
        grid-area: auto;
        width: 100%;
        padding: 9px 12px;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 0;
    }

    .dataTables_wrapper .dt-buttons { justify-content: flex-start; margin-bottom: 0; }
    .dataTables_wrapper .dataTables_filter input { max-width: none; }

    /* info/paginate carry desktop grid-columns (1 and 2/-1). left alone, the paginator
       would conjure an implicit second column and un-stack the whole strip */
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: center;
        text-align: center;
    }

    /* ---- wide tables ----
       the scroll wrappers already exist (.table-responsive / .about-table-wrapper /
       .rbac-wrap) but every table inside is width:100%, so it crushes its columns
       instead of overflowing and the wrapper never gets anything to scroll */
    .about-table-wrapper > .about-roles-table { min-width: 560px; }
    .about-table-wrapper > .setup-guide-table,
    .card-body-flush-scroll > .setup-guide-table { min-width: 620px; }
    .rbac-table { min-width: 640px; table-layout: auto; }
    .bs-table { min-width: 760px; }
    .att-grid { min-width: 680px; }

    .about-table-wrapper,
    .card-body-flush-scroll,
    .rbac-wrap,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .rbac-wrap { max-height: 60vh; }

    /* ---- modals ----
       .modal.modal-wide / .modal-lg are (0,2,0) and outranked the mobile
       .modal rule, so a phone got an 80-90vw sheet floating in dark gutters */
    .modal.modal-wide,
    .modal.modal-lg,
    .modal.marks-modal {
        width: 100%;
        max-width: 100%;
        max-height: 95vh;
        border-radius: 0;
    }

    .modal-body { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

    /* form beside a live preview pane never fits a phone */
    .modal-split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .modal-side { position: static; }
    .marks-modal-foot { flex-wrap: wrap; gap: 10px; }
    .marks-modal-foot .btn { flex: 1 1 auto; justify-content: center; }

    /* ---- marks grid ----
       roll AND student were both pinned — 60 + 170 = 230px of a 360px screen frozen,
       leaving ~90px for the box you opened the page to type in. the grid runs one column
       per subject, so it is always a sideways scroll; only the row's identity has to
       survive it, and roll is the mark register's own key. so: pin roll, release the
       name, and shrink everything the pin no longer has to pay for */
    .marks-grid .col-roll + .col-student {
        position: static;
        left: auto;
        box-shadow: none;
    }

    .marks-grid .col-roll { width: 48px; min-width: 48px; }
    .marks-grid .col-student { min-width: 124px; }
    .marks-grid .col-subject { min-width: 148px; }
    .marks-grid thead th,
    .marks-grid tbody td { padding: 8px 6px; }

    /* the avatar is 34px + 10px gap of pure cost on a screen this narrow */
    .marks-student-photo { display: none; }
    .marks-student-name { font-size: 13px; }
    .mark-input { width: 66px; }
    .marks-toolbar { padding: 10px 14px; gap: 6px 10px; }

    /* ---- result card / A4 sheet ----
       210mm forced into 360px crushes every mark column, and the term-wise skins
       (up to 5 terms x 2 cols) become unreadable. keep the sheet at true size and
       let it pan — pinch-zoom is enabled again, so it reads like a PDF */
    .a4-wrap {
        justify-content: flex-start;
        padding: 12px;
        overscroll-behavior-x: contain;
    }

    .a4-sheet {
        flex: 0 0 auto;
        width: 210mm;
        max-width: none;
    }

    /* the on-screen (non-A4) card still reflows */
    .result-card { padding: 18px 14px; max-width: 100%; }
    .rc-table { font-size: 12.5px; }
    .rc-table th,
    .rc-table td { padding: 8px 6px; }
    .rc-signatures { flex-wrap: wrap; }

    /* ---- my_results — the surface students actually live on ---- */
    .myr-hero { padding: 12px 14px; }
    .myr-bar { gap: 12px 14px; }
    .myr-id { flex: 1 1 100%; }
    .myr-pick { flex: 1 1 100%; min-width: 0; }
    .myr-avatar { width: 40px; height: 40px; }

    /* ---- public QR verify page — opened on a phone by definition ---- */
    .verify-badge { font-size: 42px; }
    .verify-card .about-roles-table { min-width: 0; font-size: 13px; }
    .verify-card .about-roles-table th { width: 42%; white-space: normal; }
    .verify-card .about-roles-table th,
    .verify-card .about-roles-table td { padding: 9px 10px; }

    /* ---- student profile / credential slip ---- */
    .sprof-head { padding: 14px; gap: 12px; }
    .sprof-photo { width: 64px; height: 64px; flex: 0 0 64px; }
    .cred-slip { max-width: 100%; padding: 16px; }

    /* ---- SearchableDropdown becomes a bottom sheet ----
       the desktop panel is a 320px box anchored under its trigger. once its own search
       box raises the keyboard the visible viewport is ~250px, so the list is clipped or
       pushed off screen entirely. plain <select> is banned project-wide, which means this
       one rule set lands on every filter and every form field in the app.
       --orms-dd-lift is written by orms.js from visualViewport: iOS pins position:fixed
       to the LAYOUT viewport, so without it an open keyboard sits on top of the sheet. */
    .orms-dd-panel {
        position: fixed;
        top: auto;
        right: 0;
        bottom: var(--orms-dd-lift, 0px);
        left: 0;
        max-height: 70vh;
        max-height: 70dvh;
        border: none;
        border-radius: 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: 10080;
    }

    /* grab handle — reads as a sheet, not a popup that lost its anchor */
    .orms-dd-panel::before {
        content: '';
        flex: 0 0 auto;
        width: 40px;
        height: 4px;
        margin: 10px auto 6px;
        background: var(--border-color);
        border-radius: 0;
    }

    .orms-dd-search { border-radius: 0; }
    .orms-dd-list { max-height: none; flex: 1 1 auto; overscroll-behavior: contain; }
    .orms-dd-opt { min-height: 50px; font-size: 15.5px; }

    /* ---- odds and ends that had no mobile rule at all ---- */
    .me-comp { width: 100%; }
    .maintenance-container { padding: 16px; }
    .chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
    .tplg-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .rs-split-wide { grid-template-columns: minmax(0, 1fr); }
    .elect-grid { grid-template-columns: minmax(0, 1fr); }
    .theme-quick-grid { grid-template-columns: repeat(4, 1fr); }
    .merit-chart { height: 260px; }

    /* header tools stay reachable with a thumb */
    .header-right { flex-wrap: wrap; gap: 8px; }
    .btn-group-inline { flex-wrap: wrap; }
    .btn-group-inline > .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- small phones ---- */
@media (max-width: 480px) {
    .a4-wrap { padding: 8px; }
    .rbac-table { font-size: 11px; }
    .about-table-wrapper > .about-roles-table,
    .about-table-wrapper > .setup-guide-table { font-size: 12.5px; }
    .modal-header { padding: 16px; }
    .modal-header h3 { font-size: 16px; }
    .theme-quick-grid { grid-template-columns: repeat(3, 1fr); }
    .tplg-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    table.dataTable > tbody > tr.child span.dtr-title { flex-basis: 44%; }
}

/* iOS zooms any focused control under 16px. the base fix missed the newer input
   types, which matters more now that user-scalable=no is gone */
@supports (-webkit-touch-callout: none) {
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="search"],
    input[type="time"],
    input[type="url"] { font-size: 16px !important; }
}

/* ============================================================
   Billing console (plans.php · subscriptions.php) — prefix .bill-
   ============================================================ */

/* chip shared by both pages. same shape language as .subject-chip,
   with its own colour per billing state */
.bill-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 0;
    background: rgba(0, 116, 217, 0.12);
    color: var(--navy-accent);
}

.bill-unl   { background: rgba(52, 168, 83, 0.14); color: #1f6633; }
.bill-count { background: rgba(0, 31, 63, 0.10);   color: var(--navy-primary); }

/* the five states. must stay legible in both themes — dark overrides below */
.bill-st-active    { background: #d4edda; color: #155724; }
.bill-st-expiring  { background: #fff3cd; color: #7a5b00; }
.bill-st-expired   { background: #f8d7da; color: #721c24; }
.bill-st-suspended { background: #e2e3e5; color: #41464b; }
.bill-st-cancelled { background: #ded4ee; color: #4a2d7a; }

body.dark-mode .bill-chip      { background: rgba(0, 116, 217, 0.22); }
body.dark-mode .bill-unl       { background: rgba(52, 168, 83, 0.26);  color: #8fe3a8; }
body.dark-mode .bill-count     { background: rgba(0, 116, 217, 0.26);  color: #9ecbff; }
body.dark-mode .bill-st-active    { background: rgba(52, 168, 83, 0.26);  color: #8fe3a8; }
body.dark-mode .bill-st-expiring  { background: rgba(251, 188, 4, 0.26); color: #f5d76e; }
body.dark-mode .bill-st-expired   { background: rgba(234, 67, 53, 0.26); color: #ff9d95; }
body.dark-mode .bill-st-suspended { background: rgba(255, 255, 255, 0.10); color: var(--text-secondary); }
body.dark-mode .bill-st-cancelled { background: rgba(138, 96, 208, 0.26); color: #cbb3f2; }

/* feature chips wrap instead of stretching the row */
.bill-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 280px;
}

/* a field that needs the full modal width inside the 2-col .form-grid */
.bill-span-2 { grid-column: 1 / -1; }

/* school cell: name over code */
.bill-school {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bill-code {
    display: inline-block;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    border-radius: 0;
    background: var(--bg-primary);
    color: var(--text-muted);
}

body.dark-mode .bill-code { background: rgba(255, 255, 255, 0.07); }

/* the quiet second line under a value — payment count, last paid, early-renewal note */
.bill-sub {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.bill-money {
    font-weight: 700;
    white-space: nowrap;
    color: var(--text-primary);
}

/* which school a modal is about — repeated in all three write dialogs */
.bill-target {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-left: 3px solid var(--navy-accent);
    border-radius: 0;
    background: var(--bg-primary);
    font-size: 14px;
    color: var(--text-primary);
}

.bill-target .bill-sub { flex: 1 0 100%; margin-top: 0; }

/* currency is fixed after the first payment — show it, don't offer it */
.bill-lock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: var(--bg-primary);
    font-weight: 700;
    color: var(--text-secondary);
}

/* "access will run X -> Y" — answers the only question the operator has before clicking save */
.bill-preview {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px;
    padding: 12px 14px;
    border-radius: 0;
    background: rgba(0, 116, 217, 0.08);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-primary);
}

.bill-preview > i { margin-top: 3px; color: var(--navy-accent); }

body.dark-mode .bill-preview { background: rgba(0, 116, 217, 0.16); }

/* section heading inside the history modal */
.bill-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.bill-h + .about-table-wrapper,
.bill-h + .orms-empty { margin-bottom: 26px; }

.bill-h i { color: var(--navy-accent); }

@media (max-width: 768px) {
    .bill-feats { max-width: none; }
    .bill-lock { width: 100%; }
    .bill-target { font-size: 13.5px; }
}

/* ===== Tenant console — schools.php + branches.php ===== */

/* lifecycle chip. status is the one thing an operator scans for, so it never renders as plain text */
.tnt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    border-radius: 0;
    white-space: nowrap;
}

.tnt-chip-trial     { background: #fff3cd; color: #7a5b00; }
.tnt-chip-active    { background: #d4edda; color: #155724; }
.tnt-chip-suspended { background: #ffe5cc; color: #8a4b00; }
.tnt-chip-cancelled { background: #f8d7da; color: #721c24; }
.tnt-chip-main      { background: rgba(0, 116, 217, .12); color: var(--navy-accent); }

body.dark-mode .tnt-chip-trial     { background: rgba(251, 188, 4, .18);  color: #f5c451; }
body.dark-mode .tnt-chip-active    { background: rgba(52, 168, 83, .20);  color: #7ddc9b; }
body.dark-mode .tnt-chip-suspended { background: rgba(255, 152, 0, .20);  color: #ffb970; }
body.dark-mode .tnt-chip-cancelled { background: rgba(234, 67, 53, .20);  color: #ff9c93; }
body.dark-mode .tnt-chip-main      { background: rgba(0, 116, 217, .24); }

/* a term that has already run out must not look like any other date */
.tnt-expired  { font-weight: 700; color: var(--danger); }
.tnt-sub-none { color: var(--text-muted); }

/* second line under a cell — email under a school, address under a branch */
.tnt-sub {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

/* one modal serves add + edit; the create-only blocks collapse once it is editing */
form.tnt-edit .tnt-new-only { display: none; }

/* danger zone — the hard purge lives behind a typed confirmation, and looks like it */
.tnt-danger {
    margin-top: 24px;
    padding: 16px 18px;
    background: rgba(234, 67, 53, .07);
    border: 1px solid var(--danger);
    border-left-width: 4px;
    border-radius: 0;
}

.tnt-danger h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--danger);
}

.tnt-danger p {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.tnt-danger code {
    padding: 1px 5px;
    font-family: "Courier New", Consolas, monospace;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-radius: 0;
}

body.dark-mode .tnt-danger { background: rgba(234, 67, 53, .12); }

/* ===== Multi-tenant login + school registration ===== */

/* school codes are stored upper-case, so the field types that way too */
.school-code-input {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reg-box {
    max-width: 560px;
    text-align: left;
}

.reg-box .login-logo,
.reg-box h2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.reg-box h2 {
    margin-bottom: 22px;
}

/* section divider inside the wizard — cheaper than a fieldset, same reading */
.reg-legend {
    margin: 22px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--navy-primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.reg-legend i {
    margin-right: 6px;
    color: var(--navy-accent);
}

.reg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

/* the credential panel shown once the school exists */
.reg-cred {
    margin: 18px 0;
    padding: 16px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--navy-accent);
    border-radius: 0;
}

.reg-cred p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
}

.reg-cred p + p {
    border-top: 1px dashed var(--border-color);
}

.reg-cred span {
    color: var(--text-muted);
}

.reg-cred strong {
    color: var(--navy-primary);
    font-size: 16px;
    letter-spacing: 1px;
}

body.dark-mode .reg-legend,
body.dark-mode .reg-cred strong {
    color: var(--text-primary);
}

@media (max-width: 560px) {
    .reg-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Tenant nav — sidebar school identity + branch switcher,
   public portal school step. prefix .orms-tn-
   ============================================================ */

/* a school name is longer than "Dashboard" ever was — shrink it and clip cleanly */
.orms-tn-brand .sidebar-title-text {
    font-size: 15px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orms-tn-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.orms-tn-badge i { font-size: 11px; }

/* branch picker block. the searchable control replaces the select, so the raw one only
   ever flashes for a frame on a page where orms.js failed to load */
.orms-tn-switch {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.orms-tn-switch .sidebar-menu-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.orms-tn-switch .orms-dd-wrap,
.orms-tn-switch .orms-tn-select {
    width: 100%;
}

.orms-tn-switch .orms-tn-select {
    padding: 8px 10px;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 13px;
}

.orms-tn-switch .orms-dd {
    width: 100%;
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* the rail is a scroll container — keep the list short enough to sit inside it */
.orms-tn-switch .orms-dd-panel { max-height: 240px; }

/* icons-only rail has no room for a picker — the pinned filter still applies */
.sidebar.collapsed .orms-tn-switch { display: none; }

/* public portal: the school step reads as the gate it is, not just another filter */
.orms-tn-step {
    padding-bottom: 4px;
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .orms-tn-brand .sidebar-title-text { font-size: 14px; }
}

/* ===== Let's Work Together — About developer card + login footer ===== */
.dev-cta {
    margin: 18px 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy-primary, #001f3f);
    display: flex;
    align-items: center;
    gap: 8px;
}

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

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

.dev-link.email {
    background: var(--navy-primary, #001f3f);
    color: #fff;
}

.dev-link.email:hover {
    background: var(--navy-light, #0074D9);
    transform: translateY(-2px);
}

.login-contact {
    margin: 14px 0 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.login-contact-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--navy-primary, #001f3f);
}

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

.login-contact-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--navy-light, #0074D9);
}

.login-contact-links a:hover { text-decoration: underline; }

body.dark-mode .login-contact { border-top-color: rgba(255, 255, 255, 0.12); }
body.dark-mode .login-contact-title { color: var(--text-primary); }

/* toggle width lock — .form-group input{width:100%} (0,1,1) outranks a bare component class,
   which stretches the switch across the form and strands the knob at the far left */
.form-group .toggle-switch,
.toggle-row .toggle-switch,
.rs-toggle-row .toggle-switch {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    flex: 0 0 60px;
}

/* floating buttons injected by push_register.js / pwa_install.js — was inline cssText */
.orms-float-btn {
    position: fixed;
    bottom: 90px;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 0;
    background: var(--navy-primary, #001f3f);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.orms-float-btn.left  { left: 18px; }
.orms-float-btn.right { right: 18px; }

/* body scroll lock while the mobile sidebar is open — only the top offset stays inline
   because it is computed from scrollY */
.scroll-locked {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.mt-8 { margin-top: 8px; }

/* demo-data quick-add button, injected into every modal header by sidebar.php */
.modal-head-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;        /* pin right even when the header has more than title + tools */
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* both buttons share one box so the icons sit on the same baseline */
.modal-head-tools .close-btn {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
}

.demo-seed-btn {
    font-size: 22px;          /* matches the 28px close glyph optically — an icon reads smaller */
    line-height: 1;
    opacity: .7;
}

.demo-seed-btn:hover {
    opacity: 1;
    color: var(--warning, #FF851B);
}

/* the header now carries a toolbar, so it has to be able to reflow as a whole. without this the
   two halves just squeeze and the right-hand tools spill onto a ragged second line. */
.header {
    flex-wrap: wrap;
    gap: 12px 16px;
}

.header-page { min-width: 0; }

.header-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

/* ===== page action buttons hoisted into the header (orms.js ORMS.hoistActions) ===== */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;        /* a half-wrapped toolbar looks broken — the header wraps as a whole */
    justify-content: flex-end;
    min-width: 0;
}

.header-actions .ha-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin: 0;
}

/* compact in the header — these are the page's own .btn elements, just denser */
.header-actions .btn {
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
}

.header-actions .btn i { margin-right: 0; }
.header-actions .btn .ha-label { margin-left: 6px; }

/* the section headers keep their titles; the toolbar that used to sit beside them is gone */
.section-header > .btn-group-inline:empty { display: none; }

/* tablet: icons only, labels drop out — the title attribute carries the meaning */
@media (max-width: 1100px) {
    .header-actions .btn .ha-label { display: none; }
    .header-actions .btn { padding: 8px 11px; }
    .header-actions .btn i { margin-right: 0; }
}

/* phone: the header stacks, so let the toolbar sit on its own line and scroll if it must */
@media (max-width: 768px) {
    .header-actions {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .header-actions .ha-group { flex-wrap: nowrap; }
}

/* ===== results.php status cell — one flex column, not a <br> pile ===== */
.st-cell { vertical-align: middle; }

.st-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 132px;
}

/* every chip in the stack sizes to its own text and lines up on the left edge */
.st-stack > * { margin: 0; }

.st-stack .status-badge,
.st-stack .appr-badge,
.st-stack .fee-owing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* the primary state reads first — heavier than the sign-off / fee chips under it */
.st-main {
    font-weight: 700;
    letter-spacing: .2px;
    padding: 5px 11px;
}

.st-main i { font-size: 11px; }

.st-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-muted);
}

.st-meta i { font-size: 10px; }

/* a long unpublish reason must not stretch the column — the full text is in the title */
.st-why {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

@media (max-width: 768px) {
    .st-stack { min-width: 0; }
    .st-why   { max-width: 150px; }
}

/* ===== student 360 view (students.php view modal) ===== */
.s360 {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ---- left identity rail ---- */
.s360-side {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 18px 16px;
    text-align: center;
    position: sticky;
    top: 0;
}

.s360-photo {
    width: 116px;
    height: 116px;
    object-fit: cover;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    display: block;
    margin: 0 auto 12px;
}

.s360-name {
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 4px;
    color: var(--text-primary);
    word-break: break-word;
}

.s360-sub {
    margin: 0 0 2px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.s360-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 4px;
}

.s360-kpis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 14px 0 4px;
}

.s360-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--navy-light);
    padding: 8px 10px;
    text-align: left;
}

.s360-kpi span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
}

.s360-kpi b {
    font-size: 15px;
    color: var(--text-primary);
}

/* an outstanding balance is the one number that must never be missed */
.s360-kpi.is-owing { border-left-color: var(--danger); }
.s360-kpi.is-owing b { color: var(--danger); }

.s360-facts {
    margin-top: 14px;
    text-align: left;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

/* ---- right side: tabs + panes ---- */
.s360-main { min-width: 0; }

.s360-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 16px;
}

.s360-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color .2s, border-color .2s, background-color .2s;
}

.s360-tab:hover { color: var(--navy-light); background: var(--bg-primary); }

.s360-tab.active {
    color: var(--navy-light);
    border-bottom-color: var(--navy-light);
}

/* .s360-pane, not .tab-pane — ORMS.syncActions() keys the header toolbar off .tab-pane.active */
.s360-pane { display: none; }
.s360-pane.active { display: block; }

.s360-empty {
    padding: 26px 14px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-primary);
    border: 1px dashed var(--border-color);
}

.s360-empty i { margin-right: 6px; }

/* the modal body scrolls, so keep the rail visible against a long ledger */
#viewBody .s360-side { top: 0; }

@media (max-width: 900px) {
    .s360 { grid-template-columns: 1fr; }
    .s360-side { position: static; }
    .s360-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .s360-tab { white-space: nowrap; }
}

/* printing a profile should give the WHOLE record, not just the tab that happened to be open */
@media print {
    .s360 { grid-template-columns: 200px 1fr; }
    .s360-tabs { display: none !important; }
    .s360-pane { display: block !important; page-break-inside: avoid; }
    .s360-pane + .s360-pane { margin-top: 18px; padding-top: 14px; border-top: 1px solid #999; }
    .s360-side { position: static; border: 1px solid #999; }
}

/* ===== button system polish =====
   these ride LAST on purpose: same specificity as the base .btn rules above, so source order
   wins and the per-variant colours are left exactly as they are. */
.btn {
    min-height: 40px;
    line-height: 1.2;
    letter-spacing: .2px;
    border: 1px solid transparent;   /* box-sizing is border-box, so this costs no width */
    /* was `all .3s` — animating everything (colour AND transform) at 300ms feels sluggish
       and made toolbars wobble. target the properties and halve the time. */
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .12s ease;
}

.btn i { line-height: 1; }

/* the lift was -2px with no shadow, so buttons looked unanchored. -1px plus a shadow reads
   as a real lift, and it no longer jostles a dense toolbar. */
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}

/* there was no pressed state at all — the button felt dead under the cursor */
.btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22);
}

/* keyboard users had no focus ring once the ua default was overridden */
.btn:focus-visible {
    outline: 2px solid var(--navy-accent);
    outline-offset: 2px;
}

/* disabled used to flatten every variant to #ccc with white text — unreadable, and it threw
   away the meaning of the button. dim it instead and keep its identity. */
.btn:disabled,
.btn[disabled] {
    opacity: .45;
    filter: grayscale(30%);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-sm {
    min-height: 34px;
    padding: 7px 14px;
}

/* neutral buttons sitting on a dark bar: #6c757d on navy is mud. give them a glass treatment
   so they read as buttons, and leave success/danger solid — those carry meaning. */
.modal-header .btn-secondary,
.modal-header .btn-primary,
body.dark-mode .header-actions .btn-secondary,
body.dark-mode .header-actions .btn-primary {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
}

.modal-header .btn-secondary:hover,
.modal-header .btn-primary:hover,
body.dark-mode .header-actions .btn-secondary:hover,
body.dark-mode .header-actions .btn-primary:hover {
    background: rgba(255, 255, 255, .26);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.modal-header .btn:focus-visible {
    outline-color: #fff;
}

/* header toolbar: match the theme/language tool height so the row is not ragged */
.header-actions .btn {
    min-height: 36px;
}

.header-actions .btn-sm {
    min-height: 34px;
}

/* the close control is the only unlabelled button in the header — give it a real target */
.modal-head-tools .close-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

.initially-hidden {
    display: none;
}

/* ===== branches drill-down + student 360 (branches.php) =====
   count chips become real buttons, two stacked 90vw layers: branch list -> one student */
.chip-btn {
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
}

.chip-btn:hover,
.chip-btn:focus-visible {
    background: rgba(0, 116, 217, 0.24);
    border-color: var(--navy-accent);
    outline: none;
}

.chip-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 116, 217, 0.35);
}

.chip-btn .chip-go {
    font-size: 9px;
    opacity: 0.6;
}

/* second layer sits above the drill modal */
.modal-overlay.overlay-stacked { z-index: 1010; }

.drill-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.drill-hint i { color: var(--navy-accent); }

#drillTable tbody tr.drill-row { cursor: pointer; }

.drill-who {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.drill-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

.drill-avatar-txt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--navy-primary), var(--navy-accent));
    border: none;
}

.stu360-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.stu360-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

.stu360-avatar-txt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--navy-primary), var(--navy-accent));
    border: none;
}

.stu360-id { flex: 1 1 260px; min-width: 0; }

.stu360-id h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--text-primary);
}

.stu360-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.stu360-sec { margin-top: 24px; }

.stu360-sec > h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    font-size: 15px;
    color: var(--navy-primary);
    border-bottom: 2px solid var(--navy-accent);
}

body.dark-mode .stu360-sec > h4 { color: var(--navy-accent); }

.stu360-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.stu360-item {
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    min-width: 0;
}

.stu360-item .lbl {
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.stu360-item .val {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: break-word;
}

.stu360-item .val i {
    margin-right: 6px;
    color: var(--navy-accent);
}

.stu360-none {
    padding: 14px;
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-primary);
    border: 1px dashed var(--border-color);
}

.stu360-none i { margin-right: 6px; }

.subject-chip.chip-money-pos { background: rgba(46, 204, 64, 0.14); color: var(--success); }
.subject-chip.chip-money-neg { background: rgba(255, 65, 54, 0.14); color: var(--danger); }

@media (max-width: 640px) {
    .stu360-head { gap: 12px; padding: 12px; }
    .stu360-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .stu360-id h4 { font-size: 17px; }
}

/* ===== hoisted toolbar tab-sync ===== */
/* syncActions() hides an inactive tab's toolbar via the hidden ATTRIBUTE — but
   .btn-group-inline/.ha-group set display:flex, which outranks the UA's [hidden] rule,
   so every tab's buttons showed at once. This guard lets the attribute win. */
.header-actions .ha-group[hidden] { display: none !important; }

/* ===== daily register (attendance.php) ===== */
.att-seg {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}

.att-seg button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: var(--text-muted);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.att-seg button:hover:not(:disabled) { border-color: var(--navy-accent); color: var(--navy-accent); }
.att-seg button:disabled { cursor: not-allowed; opacity: 0.6; }

.att-seg button.active[data-st="P"]  { background: var(--success); border-color: var(--success); color: #fff; }
.att-seg button.active[data-st="A"]  { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.att-seg button.active[data-st="L"]  { background: var(--warning); border-color: var(--warning); color: #fff; }
.att-seg button.active[data-st="LV"] { background: var(--navy-accent); border-color: var(--navy-accent); color: #fff; }

/* ===== setup health card (dashboard.php) ===== */
.health-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.health-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--success);
}

.health-row.health-bad { border-left-color: var(--danger); }
.health-row > i { font-size: 16px; color: var(--success); flex: 0 0 auto; }
.health-row.health-bad > i { color: var(--danger); }

.health-label { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }

.health-why {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.health-row .btn { flex: 0 0 auto; }

@media (max-width: 640px) {
    .health-row { flex-wrap: wrap; }
    .health-why { flex-basis: 100%; }
}

/* ===== timetable grid (timetable.php) ===== */
.tt-table td.tt-cell { min-width: 130px; vertical-align: top; }

.tt-table td.tt-edit { cursor: pointer; }

.tt-table td.tt-edit:hover,
.tt-table td.tt-edit:focus-visible {
    background: var(--table-hover);
    outline: 1px dashed var(--navy-accent);
    outline-offset: -1px;
}

/* ============================================================
   Billing / subscription — billing.php, gateways.php, payment_return.php
   Tone classes (bil-ok / bil-warn / bil-bad / bil-mut) are shared by the
   status card, the usage meters and the invoice chips so one state reads
   the same everywhere it appears.
   ============================================================ */

.bil-hint { color: var(--text-muted); font-size: 13px; margin: 0 0 14px; }
.bil-hint code { background: var(--border-light); padding: 2px 6px; border-radius: 3px; word-break: break-all; }

/* --- status card --- */
.bil-status { display: block; }
.bil-card { border: 1px solid var(--border-color); border-left: 4px solid var(--navy-accent); border-radius: 3px; padding: 16px 18px; background: var(--bg-card); }
.bil-card.bil-ok   { border-left-color: var(--success); }
.bil-card.bil-warn { border-left-color: var(--warning); }
.bil-card.bil-bad  { border-left-color: var(--danger); }
.bil-card-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.bil-plan-name { font-size: 18px; font-weight: 700; color: var(--navy-primary); }
.bil-card-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--text-secondary); font-size: 13px; }
.bil-days { font-weight: 600; }

/* --- chips --- */
.bil-chip { display: inline-block; padding: 2px 10px; border-radius: 3px; font-size: 12px; font-weight: 600; line-height: 1.6; }
.bil-chip.bil-ok   { background: rgba(52, 168, 83, .12);  color: #1e7e34; }
.bil-chip.bil-warn { background: rgba(251, 188, 4, .18);  color: #8a6100; }
.bil-chip.bil-bad  { background: rgba(234, 67, 53, .12);  color: #b3261e; }
.bil-chip.bil-mut  { background: var(--border-light);     color: var(--text-muted); }

/* --- usage meters --- */
.bil-quotas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.bil-meter { border: 1px solid var(--border-color); border-radius: 3px; padding: 14px; background: var(--bg-card); }
.bil-meter-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 14px; }
.bil-meter-top span { color: var(--text-secondary); }
.bil-meter-top b { color: var(--navy-primary); font-size: 16px; }
.bil-inf { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.bil-bar { height: 8px; background: var(--border-light); border-radius: 3px; overflow: hidden; }
.bil-bar i { display: block; height: 100%; background: var(--navy-accent); transition: width .35s ease; }
.bil-meter.bil-ok   .bil-bar i { background: var(--success); }
.bil-meter.bil-warn .bil-bar i { background: var(--warning); }
.bil-meter.bil-bad  .bil-bar i { background: var(--danger); }
.bil-left { display: block; margin-top: 6px; font-size: 12px; color: var(--text-muted); }

/* --- plan cards --- */
.bil-cycle { display: inline-flex; border: 1px solid var(--border-color); border-radius: 3px; overflow: hidden; }
.bil-cyc { background: var(--bg-card); border: 0; padding: 8px 16px; cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.bil-cyc.active { background: var(--navy-primary); color: #fff; }
.bil-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.bil-plan { border: 1px solid var(--border-color); border-radius: 3px; padding: 18px; background: var(--bg-card); display: flex; flex-direction: column; }
.bil-plan.is-current { border-color: var(--navy-accent); box-shadow: 0 0 0 1px var(--navy-accent) inset; }
.bil-plan h4 { margin: 0 0 10px; color: var(--navy-primary); font-size: 16px; }
.bil-price { font-size: 22px; font-weight: 700; color: var(--navy-primary); margin-bottom: 12px; }
.bil-price small { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.bil-lims { list-style: none; padding: 0; margin: 0 0 12px; }
.bil-lims li { font-size: 13px; color: var(--text-secondary); padding: 3px 0; }
.bil-lims i { color: var(--success); margin-right: 6px; }
.bil-feat { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }
.bil-plan .btn { margin-top: auto; }

/* --- checkout modal --- */
.bil-sum { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--border-light); border-radius: 3px; margin-bottom: 16px; }
.bil-sum b { font-size: 18px; color: var(--navy-primary); }
.bil-gws { display: grid; gap: 10px; }
.bil-gw { display: block; cursor: pointer; }
.bil-gw input { display: none; }
.bil-gw-body { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border-color); border-radius: 3px; padding: 12px 14px; flex-wrap: wrap; }
.bil-gw input:checked + .bil-gw-body { border-color: var(--navy-accent); background: rgba(0, 116, 217, .05); }
.bil-gw-body i { font-size: 18px; color: var(--navy-accent); }
.bil-gw-body b { color: var(--navy-primary); }
.bil-gw-body small { flex: 1 0 100%; color: var(--text-muted); font-size: 12px; }
.bil-manual { white-space: pre-wrap; background: var(--border-light); border-radius: 3px; padding: 14px; font-size: 13px; color: var(--text-secondary); margin-top: 14px; }

/* --- payment return states --- */
.renew-icon.pay-good { color: var(--success); }
.renew-icon.pay-warn { color: var(--warning); }
.renew-icon.pay-bad  { color: var(--danger); }
.renew-icon.pay-wait { color: var(--navy-accent); }

/* small modal variant used by the transfer-reference dialog */
.modal.modal-sm { max-width: 460px; }

@media (max-width: 600px) {
    .bil-card-meta { gap: 8px; }
    .bil-plans, .bil-quotas { grid-template-columns: 1fr; }
}

/* installer: App Owner bootstrap card */
.setup-note { border: 1px solid var(--border-color); border-left: 4px solid var(--navy-accent); border-radius: 3px; padding: 18px; margin-bottom: 18px; background: var(--bg-card); text-align: left; }
.setup-note h3 { margin: 0 0 6px; color: var(--navy-primary); font-size: 16px; }
.setup-note .subtitle { margin-bottom: 14px; }

/* ── branch seat chip: how full a campus is, coloured by pressure ───────────── */
.seat-chip b { margin-left: 2px; font-weight: 800; }
.seat-chip.seat-ok    { background: rgba(40, 167, 69, .12); color: var(--success); }
.seat-chip.seat-tight { background: rgba(255, 193, 7, .16); color: #8a6100; }
.seat-chip.seat-full  { background: rgba(220, 53, 69, .12); color: var(--danger); }
body.dark-mode .seat-chip.seat-tight { color: var(--warning); }

/* ── user 360: chain of authority ladder ───────────────────────────────────── */
.u360-ladder { display: flex; flex-direction: column; gap: 6px; }

.u360-rung {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
}

.u360-rung.is-them {
    border-left-color: var(--navy-accent);
    background: rgba(0, 116, 217, .07);
}

body.dark-mode .u360-rung.is-them { background: rgba(0, 116, 217, .16); }

.u360-rung-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    background: var(--border-light);
}

.u360-rung.is-them .u360-rung-no { color: #fff; background: var(--navy-accent); }

.u360-rung-me {
    font-size: 12px;
    font-weight: 700;
    color: var(--navy-accent);
}

.u360-rung-n {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

/* permission ticks inside the 360 matrix */
.perm-yes { color: var(--success); }
.perm-no  { color: var(--text-muted); opacity: .55; }

@media (max-width: 600px) {
    .u360-rung-n { margin-left: 0; width: 100%; }
}

/* ================= Chip-row dense table — only applies to .chip-table =================
   A wide flat table (12+ columns) drifts its header away from its body and nobody reads the
   right half. Each cell stacks [label chip] .......... value rows instead, so the row reads
   top-to-bottom in one place. Scoped to .chip-table: every other table in the app is untouched. */
table.dataTable.chip-table { width: 100% !important; border-collapse: separate; border-spacing: 0; min-width: 1100px; }
table.dataTable.chip-table thead th { background: var(--navy-primary) !important; color: #fff !important; padding: 9px 10px !important; text-align: center; font-weight: 700; font-size: 13px; white-space: nowrap; border: none; }
table.dataTable.chip-table tbody td { padding: 5px 9px !important; font-size: 12.5px; color: var(--text-primary); vertical-align: middle; border-bottom: 1px solid var(--border-light); }

/* 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: 14px; min-width: 152px; 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: 82px; 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; }
.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; }

/* 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; }
.val-pos    { color: #1f8b4c; }
.val-neg    { color: #c0392b; }
.val-navy   { color: var(--navy-primary); }
.val-muted  { color: var(--text-muted); font-weight: 700; }
.val-box    { background: var(--border-light); color: var(--text-secondary); 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; }
.cell-sub   { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; white-space: normal; }

/* a count chip that opens a drill-down: the VALUE is the button, not the label */
.chip-row .val .chip-btn { font-size: 11.5px; padding: 1px 7px; }

/* squared action icons — one row, never a vertical stack */
.actions-cell { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; }
table.dataTable.chip-table td.ctr, table.dataTable.chip-table th.ctr { text-align: center; }
table.dataTable.chip-table td.col-actions, table.dataTable.chip-table th.col-actions { white-space: nowrap; width: 1%; }

/* status-tinted rows — !important beats DataTables' own striping */
table.dataTable.chip-table tbody tr.row-good td { background: #e9f7ef !important; }
table.dataTable.chip-table tbody tr.row-bad  td { background: #fdecea !important; }
table.dataTable.chip-table tbody tr.row-wait td { background: #fff7e0 !important; }

body.dark-mode table.dataTable.chip-table tbody td { color: #cbd5e1; border-bottom-color: #2f3846; }
body.dark-mode .cell-title { color: #e8edf3; }
body.dark-mode .val-box { background: #2a3240; color: #cbd5e1; }
body.dark-mode table.dataTable.chip-table tbody tr.row-good td { background: #12301f !important; }
body.dark-mode table.dataTable.chip-table tbody tr.row-bad  td { background: #3a1a18 !important; }
body.dark-mode table.dataTable.chip-table tbody tr.row-wait td { background: #33290d !important; }

/* section tab counts — the headcount rides the tab so a section is picked by size, not by guess */
.tab-btn .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    background: var(--border-light);
    border-radius: 3px;
}
.tab-btn.active .tab-count { color: #fff; background: var(--navy-accent); }
body.dark-mode .tab-btn .tab-count { background: #2a3240; color: #cbd5e1; }

/* ================= Payment Gateways — settings-style console (page-gateways) =================
   The money page reads top-down like Site Settings: a live status strip, then one card per
   gateway with its own switch and a pill that answers "would a school see this right now",
   then a sticky bar that only appears once something actually differs from what is saved. */

/* live status strip */
.gw-live {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.gw-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
}

.gw-stat i { font-size: 20px; color: var(--text-muted); }
.gw-stat span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.gw-stat b { font-size: 16px; color: var(--text-primary); }

.gw-stat.gw-ok   { border-left-color: var(--success); }
.gw-stat.gw-ok i { color: var(--success); }
.gw-stat.gw-warn { border-left-color: var(--warning); }
.gw-stat.gw-warn i { color: var(--warning); }
.gw-stat.gw-test { border-left-color: var(--navy-accent); }
.gw-stat.gw-test i { color: var(--navy-accent); }
.gw-stat.gw-off  { border-left-color: var(--danger); }
.gw-stat.gw-off i { color: var(--danger); }

/* card header: title block grows so the switch sits hard right */
.page-gateways .settings-card-head-text { flex: 1 1 auto; min-width: 0; }

.gw-card-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin: 0;
}

.gw-card-switch label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy-primary);
    white-space: nowrap;
}

body.dark-mode .gw-card-switch label { color: var(--text-primary); }

/* status pill beside a gateway's name */
.gw-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    vertical-align: middle;
}

.gw-pill.gw-live { background: rgba(52, 168, 83, .14); color: #1e7e34; }
.gw-pill.gw-test { background: rgba(0, 116, 217, .14); color: #0a58a2; }
.gw-pill.gw-warn { background: rgba(251, 188, 4, .20); color: #8a6100; }
.gw-pill.gw-off  { background: var(--border-light);    color: var(--text-muted); }

body.dark-mode .gw-pill.gw-test { color: var(--navy-accent); }
body.dark-mode .gw-pill.gw-warn { color: var(--warning); }

/* a disabled gateway stays readable but stops competing for attention */
.gw-card-off .settings-card-body { opacity: .55; }

/* full-width switch row: label + one line of why it matters, switch pinned right */
.gw-switch {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
}

.gw-switch:first-child { padding-top: 0; }

.gw-switch-text { flex: 1 1 auto; min-width: 0; }

.gw-switch-text label {
    display: block;
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.gw-switch-text p { margin: 0; font-size: 12.5px; color: var(--text-muted); }

/* secret field + its Replace button */
.gw-secret { display: flex; gap: 8px; align-items: stretch; }
.gw-secret input { flex: 1 1 auto; min-width: 0; }
.gw-secret .btn { flex: 0 0 auto; white-space: nowrap; }

.gw-keychip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.gw-keychip.gw-key-set  { background: rgba(52, 168, 83, .14); color: #1e7e34; }
.gw-keychip.gw-key-new  { background: rgba(0, 116, 217, .14); color: #0a58a2; }
.gw-keychip.gw-key-none { background: var(--border-light);    color: var(--text-muted); }

/* the webhook endpoint, copyable in one click */
.gw-hook {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 6px 0 14px;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--navy-accent);
}

.gw-hook-text { flex: 1 1 260px; min-width: 0; }

.gw-hook-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
}

.gw-hook code {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy-primary);
    word-break: break-all;
}

body.dark-mode .gw-hook code { color: var(--navy-accent); }

/* sticky save bar — hidden until the form differs from what is saved */
.gw-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--warning);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .10);
}

.gw-savebar[hidden] { display: none !important; }

.gw-savebar-note {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.gw-savebar-note i { margin-right: 6px; color: var(--warning); }

@media (max-width: 600px) {
    .settings-card-header { flex-wrap: wrap; }
    .gw-card-switch { width: 100%; justify-content: space-between; }
    .gw-switch { align-items: flex-start; }
    .gw-secret { flex-direction: column; }
    .gw-savebar { flex-direction: column; align-items: stretch; }
    .gw-savebar .btn-group-inline { justify-content: stretch; }
}

/* --- gateways: breathing room. Dense credential forms are the ones people misread, so every
       block of text here gets real padding, a wider line height and space under it. --- */
.page-gateways .tab-nav { margin-bottom: 26px; }
.page-gateways .settings-card-header { padding: 22px 26px; gap: 18px; }
.page-gateways .settings-card-title { line-height: 1.35; margin-bottom: 6px; }
.page-gateways .settings-card-subtitle { line-height: 1.55; max-width: 70ch; }
.page-gateways .settings-card-body { padding: 26px; }
.page-gateways .settings-card-body > .form-grid { margin-bottom: 0; }
.page-gateways .settings-card-body .form-group { margin-bottom: 22px; }
.page-gateways .settings-card-body .form-group:last-child { margin-bottom: 0; }
.page-gateways .settings-card-body label { margin-bottom: 8px; line-height: 1.4; }
.page-gateways .help-text { margin-top: 8px; line-height: 1.6; }
.page-gateways textarea { line-height: 1.6; padding: 12px 14px; }
.page-gateways input[type="text"] { padding: 11px 14px; }

/* the hint under the webhook block reads as a note, not a stray sentence */
.page-gateways .bil-hint {
    margin: 0;
    padding: 14px 16px;
    line-height: 1.65;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
}

.page-gateways .gw-switch { padding: 18px 0; gap: 20px; }
.page-gateways .gw-switch-text label { margin-bottom: 5px; }
.page-gateways .gw-switch-text p { line-height: 1.6; max-width: 78ch; }
.page-gateways .gw-live { margin-bottom: 26px; }
.page-gateways .gw-stat { padding: 16px 18px; }
.page-gateways .gw-stat span { margin-bottom: 3px; }
.page-gateways .gw-hook { padding: 16px 18px; margin: 4px 0 18px; }
.page-gateways .gw-hook code { line-height: 1.55; }
.page-gateways .gw-savebar { padding: 16px 20px; }

/* --- palette gallery: 41 swatches need a search box and section breaks --- */
.palette-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.palette-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.palette-search i { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; }
.palette-search input { width: 100%; padding: 10px 14px 10px 34px; }

.palette-count { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }

/* a full-width heading inside the swatch grid */
.palette-group {
    grid-column: 1 / -1;
    margin: 10px 0 2px;
    padding-bottom: 6px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--navy-primary);
    border-bottom: 1px solid var(--border-color);
}

.palette-group:first-child { margin-top: 0; }
body.dark-mode .palette-group { color: var(--navy-accent); }
.palette-group[hidden], .palette-card[hidden] { display: none !important; }

/* ===== Sidebar dropdown groups — the "+" expands, rotates into an "x" =====
   Secondary sections (My Account, System) collapse so the daily-use navigation above them stays
   the first thing on screen. Primary sections stay flat section labels. */
.sb-plus {
    margin-left: auto;
    width: auto !important;
    font-size: 12px !important;
    opacity: .7;
    transition: transform .25s;
}

.sb-group.open > .sb-group-btn .sb-plus { transform: rotate(45deg); }   /* + becomes x */
.sb-group.open > .sb-group-btn { background: rgba(255, 255, 255, .06); color: #fff; }
.sb-group > .sb-group-btn { font-weight: 600; }

.sb-sub {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0 0 0 12px;
    transition: max-height .3s ease;
}

.sb-group.open > .sb-sub { max-height: 520px; }
.sb-sub a { padding: 8px 12px; font-size: 13.5px; }
.sb-sub i { font-size: 14px; }

/* collapsed 70px rail: no group headers, submenus forced open so every link stays reachable */
.sidebar.collapsed .sb-group > .sb-group-btn { display: none; }
.sidebar.collapsed .sb-sub { max-height: none; padding-left: 0; overflow: visible; }

/* ===== Chevron pipeline — one hue per stage =====
   The pipeline was a row of grey arrows: every stage looked the same, so the eye had to read each
   label to find "Failed" or "Expiring". Each position now carries its own colour, the active stage
   goes solid in that same hue, and the count rides in a contrasting pill. Position-based on purpose:
   results / subscriptions / users each build their stages differently, and none of them has to
   change a line for this to work. */
.chev-item {
    --chev: #0b2545;                       /* stage colour, solid  */
    --chev-soft: rgba(11, 37, 69, .10);    /* stage colour, tinted */
    background: var(--chev-soft);
    color: var(--chev);
}

.chev-item:nth-child(7n + 1) { --chev: #0b2545; --chev-soft: rgba(11, 37, 69, .10); }   /* usually "All" */
.chev-item:nth-child(7n + 2) { --chev: #0a66c2; --chev-soft: rgba(10, 102, 194, .12); }
.chev-item:nth-child(7n + 3) { --chev: #1f8b4c; --chev-soft: rgba(31, 139, 76, .13); }
.chev-item:nth-child(7n + 4) { --chev: #b06f00; --chev-soft: rgba(217, 138, 0, .16); }
.chev-item:nth-child(7n + 5) { --chev: #6a1b9a; --chev-soft: rgba(106, 27, 154, .12); }
.chev-item:nth-child(7n + 6) { --chev: #0d7878; --chev-soft: rgba(13, 120, 120, .14); }
.chev-item:nth-child(7n + 7) { --chev: #b3261e; --chev-soft: rgba(179, 38, 30, .12); }

.chev-item:hover { background: var(--chev-soft); color: var(--chev); filter: brightness(.94); }

.chev-item.active {
    background: var(--chev);
    color: #fff;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}

/* the number reads as a badge, not as faded label text */
.chev-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 800;
    opacity: 1;
    color: var(--chev);
    background: rgba(255, 255, 255, .72);
}

.chev-item.active .chev-count { color: #fff; background: rgba(255, 255, 255, .22); }

body.dark-mode .chev-item { background: var(--chev-soft); color: #e6edf6; }
body.dark-mode .chev-item .chev-count { color: #e6edf6; background: rgba(255, 255, 255, .12); }
body.dark-mode .chev-item.active { background: var(--chev); color: #fff; }

/* plan pricing: one row per extra currency */
.pc-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pc-row { display: grid; grid-template-columns: minmax(150px, 1.6fr) 1fr 1fr auto; gap: 8px; align-items: center; }
.pc-row select, .pc-row input { width: 100%; }
@media (max-width: 700px) { .pc-row { grid-template-columns: 1fr 1fr auto; } .pc-row select { grid-column: 1 / -1; } }

/* a health row whose fix page this viewer cannot open: name the page, never a dead button */
.health-where { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.health-where i { margin-right: 5px; }

/* ===================================================================
   Dashboard — AdminLTE layer (small-box KPI row · info-box strip · lte-card panels)
   every role's dashboard is built from these three; the dk-/dm-/dc- cards above are legacy
   =================================================================== */
.dash-page .lte-kpi-grid { margin-bottom: 18px; }
.small-box .inner { min-height: 98px; }
.small-box .inner h3 { font-size: clamp(22px, 3.6vw, 30px); }
.small-box .sb-cap { display: block; font-size: 11.5px; opacity: 0.85; margin-top: 3px; min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-warning .sb-cap { opacity: 0.75; }

/* secondary strip — four per row, two on tablets, one on phones */
.ib-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
@media (max-width: 1200px) { .ib-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px)  { .ib-strip { grid-template-columns: 1fr; } }
.info-box[hidden] { display: none !important; }
a.info-box { text-decoration: none; color: inherit; }
/* the tone classes lose to .info-box-icon's own navy on source order — restate them at higher specificity */
.info-box-icon.bg-navy, .info-box-icon.bg-info, .info-box-icon.bg-success, .info-box-icon.bg-warning, .info-box-icon.bg-danger { color: #fff; }
.info-box-icon.bg-info    { background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%); }
.info-box-icon.bg-success { background: linear-gradient(135deg, #1f6633 0%, #29803f 100%); }
.info-box-icon.bg-warning { background: linear-gradient(135deg, #e0a800 0%, var(--warning) 100%); color: #1f2d3d; }
.info-box-icon.bg-danger  { background: linear-gradient(135deg, #c5221f 0%, var(--danger) 100%); }
.info-box-progress { height: 5px; background: var(--border-light); margin: 6px 0 4px; overflow: hidden; }
.info-box-progress span { display: block; height: 100%; width: 0; background: var(--navy-accent); transition: width 0.6s ease; }
.info-box-desc { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-box-number small { font-size: 12px; font-weight: 500; color: var(--text-muted); }

/* card chrome on the dashboard */
.dash-page .lte-card { margin-bottom: 18px; }
.dash-page .dashboard-grid-2 { gap: 16px; margin-bottom: 18px; }
.dash-page .dashboard-grid-2 .lte-card { margin-bottom: 0; }
@media (max-width: 992px) { .dash-page .dashboard-grid-2 { grid-template-columns: 1fr; } }
.lte-card-sub { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.lte-card-sub:not(:empty)::before { content: '· '; }
.lte-more { font-size: 12.5px; font-weight: 600; color: var(--navy-accent); text-decoration: none; margin-right: 6px; white-space: nowrap; }
.lte-more:hover { text-decoration: underline; }
.lte-card-tools .lte-term { min-width: 150px; }
.lte-card .chart-container { height: 260px; }
.lte-card .health-list { margin: 0; }
.lte-card .text-muted i { color: var(--navy-accent); margin-right: 4px; }

/* today lists — periods, registers due */
.tt-list { display: flex; flex-direction: column; }
.tt-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.tt-row:last-child { border-bottom: none; }
.tt-row .tt-p { width: 36px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--navy-primary); color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.tt-row .tt-time { width: 100px; color: var(--text-muted); font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.tt-row b { color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-row em { font-style: normal; color: var(--text-muted); margin-left: auto; font-size: 12px; white-space: nowrap; }

/* campus list on the owner view */
.br-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }

/* timetable — a period whose subject has left the class's subject list */
.tt-off { color: var(--warning); font-size: 11px; margin-left: 3px; }