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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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: 10px;
    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: 10px !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: 8px !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: 4px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--navy-accent);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.status-current {
    background: #e3f2fd;
    color: #1565c0;
}

/* ===== 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: 2px;
    font-size: 16px;
    transition: all 0.3s;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--text-primary);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Filters Section ===== */
/* 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: 4px;
    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: 3px;
    font-size: 14px;
    transition: all 0.3s;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--text-primary);
}

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

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

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

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

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

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

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

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

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

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

    .modal {
        width: 95%;
    }

    .filters-section {
        padding: 15px;
    }

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

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

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

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

    .info-label {
        width: 100%;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.control-info {
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Info Banner */
.info-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 116, 217, 0.05);
    border: 1px solid rgba(0, 116, 217, 0.2);
    border-left: 4px solid var(--navy-accent);
    padding: 16px 20px;
    margin-bottom: 18px;
    border-radius: 6px;
    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: 8px;
    margin-bottom: 12px;
    border: 1px solid #e9ecef;
    transition: all 0.3s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.toggle-input {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body {
    top: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .chart-container {
        height: 250px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .dataTables_paginate {
        padding-top: 15px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .filters-grid {
        gap: 12px;
    }

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

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

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

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

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

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

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

    .header {
        padding: 12px;
    }

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

    .data-section {
        padding: 12px;
    }

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

    .stat-card {
        padding: 15px;
    }

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

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

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

    .chart-container {
        height: 200px;
    }

    .modal-body {
        padding: 15px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .app-container {
        display: block;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== AdminLTE small-box KPI (dashboard) ===== */
.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: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #fff;
    overflow: hidden;
    transition: transform 0.25s;
}
.small-box:hover { transform: translateY(-3px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
.small-box .inner { 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: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    transition: all 0.25s;
}
.header-tool-btn:hover { background: #f0f0f0; color: var(--navy-primary); }
.header-tool-btn .lang-current { font-size: 12px; font-weight: 700; }
body.dark-mode .header-tool-btn { color: var(--text-secondary); }
body.dark-mode .header-tool-btn:hover { background: var(--bg-primary); color: var(--text-primary); }

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

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

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

/* 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: 6px;
    background: var(--input-bg);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== About Section Styles ===== */
.about-section {
    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: 4px;
    color: white;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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: 14px !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: 10px !important; }
/* file input stays squared per DaisyUI standard — do not round */

/* ===== Smooth SPA-like navigation (View Transitions) ===== */
/* opt every page into cross-document transitions — clicking the sidebar crossfades
   the content while the sidebar / bottom-nav / header tools stay put (no white flash).
   Unsupported browsers just navigate normally (graceful fallback). */
@view-transition { navigation: auto; }

.sidebar           { view-transition-name: app-sidebar; }
.mobile-bottom-nav { view-transition-name: app-mobilenav; }
.header-right      { view-transition-name: app-headertools; }

/* persistent chrome — snap instantly, don't crossfade */
::view-transition-group(app-sidebar),
::view-transition-group(app-mobilenav),
::view-transition-group(app-headertools) { animation-duration: 0s; }

/* content area — gentle crossfade + rise */
::view-transition-old(root) { animation: rsPageOut 0.16s ease both; }
::view-transition-new(root) { animation: rsPageIn 0.30s ease both; }
@keyframes rsPageOut { to { opacity: 0; } }
@keyframes rsPageIn { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

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

.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: 3px;
    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 3px 3px 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: 4px 4px 0 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: 50%;
    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: 3px;
    -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: 3px;
    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: 3px;
    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: 4px;
    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: 3px;
}

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: 3px;
}

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

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

.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: 6px;
    overflow: hidden;
}

.completion-fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--navy-accent);
    border-radius: 6px;
    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: 4px;
    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: 3px;
    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: 4px;
}

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

.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: 4px;
    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: 3px;
    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: 20px;
    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: 50%;
    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: 5px;
    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: 50%;
    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: 999px;
    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: 50%;
    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: 6px;
    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: 50%;
    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: 3px;
}

#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: 6px;
    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: 6px;
}

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

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

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

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

.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: 3px;
    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: 3px;
}

.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: 3px;
    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: 3px;
}

.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: 10px; }
.rc-t-modern .rc-photo { border-radius: 10px; }

.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: 8px;
}

.rc-t-modern .rc-table th { border: none; }
.rc-t-modern .rc-table th:first-child { border-radius: 6px 0 0 6px; }
.rc-t-modern .rc-table th:last-child { border-radius: 0 6px 6px 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: 8px;
}

.rc-t-modern .rc-badge { border-radius: 999px; }

/* 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: 10px;
}

.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: 20px;
}

.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: 4px;
    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: 4px;
    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: 10px;
}

.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: 3px;
    overflow: hidden;
}

body.dark-mode .tplg-thumb { background: #f7f7f7; }

.tt-bar { height: 10px; background: var(--navy-primary); border-radius: 1px; }
.tt-bar-o { height: 10px; border: 1px solid var(--navy-primary); border-radius: 1px; }
.tt-row { height: 6px; background: #d7dde5; border-radius: 1px; }
.tt-row-thin { height: 4px; background: #e3e8ee; border-radius: 1px; }
.tt-head { height: 8px; background: var(--navy-primary); opacity: .85; border-radius: 1px; }
.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: 4px; }
.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: 1px; 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: 1px; }
.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: 4px;
}

.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: 4px;
}

.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: 8px;
    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: 999px;
    overflow: hidden;
}

.proc-bar > i {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--navy-accent);
    border-radius: 999px;
    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: 6px;
    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: 6px;
}

.sprof-photo {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    object-fit: cover;
    border-radius: 6px;
    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: 6px;
}

.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: 10px;
    }

    .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: 3px;
    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: 6px;
    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; }
}

.initially-hidden {
    display: none;
}