:root {
      --primary: #1E3A8A;
      --primary-hover: #172b66;
      --primary-soft: #e0e7ff;
      --accent: #0f8f61;
      --accent-hover: #0a6645;
      --accent-soft: #ecfdf5;
      --school-red: #d7162f;
      --red-soft: #fde8eb;
      --school-charcoal: #11191d;
      --school-charcoal-2: #1c282d;
      --warning: #b97412;
      --danger: #c4162a;
      --bg-light: #f8fafc;
      --surface: #ffffff;
      --surface-muted: #f1f5f9;
      --text-dark: #0f172a;
      --text-muted: #64748b;
      --border-color: #e2e8f0;
      --sidebar-bg: #011652;
      --sidebar-hover: #172b66;
      --brand-bg: #172b66;
      --card-header-bg: linear-gradient(90deg, #f8fafb, #eef5f7);
      --input-focus-bg: #ffffff;
      --net-pay-bg: #f0fdf4;
      --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
      --shadow-md: 0 12px 24px rgba(15, 23, 42, 0.08);
      --shadow-lg: 0 22px 48px rgba(15, 23, 42, 0.12);
      --transition: 0.2s ease;
    }

    body.dark-theme, :root.dark-theme {
      --bg-light: #000000;
      --surface: #0a0a0a;
      --surface-muted: #121212;
      --text-dark: #f3f4f6;
      --text-muted: #a3a3a3;
      --border-color: #1a1a1a;
      --primary: #3b82f6;
      --primary-hover: #2563eb;
      --primary-soft: #1e3a8a;
      --accent: #10b981;
      --accent-soft: #064e3b;
      --sidebar-bg: #000000;
      --sidebar-hover: #172b66;
      --brand-bg: #000000;
      --card-header-bg: #0a0a0a;
      --input-focus-bg: #0a0a0a;
      --net-pay-bg: rgba(16, 185, 129, 0.15);
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 22px 48px rgba(0, 0, 0, 0.5);
      --school-red: #f87171;
      --red-soft: rgba(239, 68, 68, 0.15);
      --warning: #fbbf24;
      --danger: #f87171;
    }

    /* =========================================================
       DARK THEME OVERRIDES — Fix hardcoded colours & containers
    ========================================================= */
    body.dark-theme .chart-card,
    body.dark-theme .analytics-charts-grid .chart-card {
      background: var(--surface) !important;
      border-color: var(--border-color) !important;
    }

    body.dark-theme .matrix-display-container {
      background: var(--surface) !important;
      border-color: var(--border-color) !important;
    }

    body.dark-theme .metric-summary-card {
      background: var(--surface-muted) !important;
      border-color: var(--border-color) !important;
    }

    /* Payroll table: override hardcoded light-mode inline colours */
    body.dark-theme #payroll-table td { color: var(--text-dark) !important; }
    body.dark-theme #payroll-table .gross-pay-cell { color: #e2e8f0 !important; }
    body.dark-theme #payroll-table .net-pay-cell  {
      background-color: rgba(16,185,129,0.12) !important;
      color: #34d399 !important;
    }
    /* totalDeductions pink tint background in dark */
    body.dark-theme #payroll-table td[style*="#fff5f5"] {
      background-color: rgba(239,68,68,0.1) !important;
    }
    body.dark-theme #payroll-table td[style*="#fdf2f8"] {
      background-color: rgba(219,39,119,0.1) !important;
    }
    /* Matrix column title in dark */
    body.dark-theme .matrix-column-title {
      color: #93c5fd !important;
      border-bottom-color: var(--border-color) !important;
    }
    /* Card backgrounds for payroll analytics section */
    body.dark-theme #payroll .card {
      background: var(--surface) !important;
      border-color: var(--border-color) !important;
    }
    /* Archive/edit table cells */
    body.dark-theme .archive-edit-table td,
    body.dark-theme .archive-edit-table th {
      background: var(--surface-muted) !important;
      color: var(--text-dark) !important;
      border-color: var(--border-color) !important;
    }
    /* Modals in dark */
    body.dark-theme .modal-content {
      background: var(--surface) !important;
      border-color: var(--border-color) !important;
    }
    body.dark-theme .modal-header {
      background: var(--surface-muted) !important;
      border-bottom-color: var(--border-color) !important;
    }
    /* Form inputs in dark */
    body.dark-theme input, body.dark-theme select, body.dark-theme textarea {
      background: var(--surface-muted) !important;
      color: var(--text-dark) !important;
      border-color: var(--border-color) !important;
    }
    /* Table header in dark */
    body.dark-theme th {
      background: var(--surface-muted) !important;
      color: var(--text-dark) !important;
      border-bottom-color: var(--border-color) !important;
    }
    body.dark-theme td {
      border-bottom-color: var(--border-color) !important;
    }
    /* Stat cards */
    body.dark-theme .stat-card {
      background: var(--surface) !important;
      border-color: var(--border-color) !important;
    }
    /* Card general */
    body.dark-theme .card {
      background: var(--surface) !important;
      border-color: var(--border-color) !important;
    }
    /* Topbar */
    body.dark-theme .topbar {
      background: var(--surface) !important;
      border-bottom-color: var(--border-color) !important;
    }
    /* Payroll tfoot row */
    body.dark-theme #payroll-table tfoot tr {
      background: var(--surface-muted) !important;
      color: var(--text-dark) !important;
    }
    /* Total summary row cells */
    body.dark-theme #payroll-table tfoot td {
      color: var(--text-dark) !important;
      border-top-color: var(--border-color) !important;
    }


    html { scroll-behavior: smooth; height: 100%; }
    body { margin: 0; min-height: 100%; color: var(--text-dark); background: var(--bg-light); transition: background 0.3s ease, color 0.3s ease; }
    
    .app-container { display: flex; width: 100%; height: 100vh; overflow: hidden; background: var(--bg-light); }
    
    /* SIDEBAR & HAMBURGER TOGGLE */
    .sidebar { width: 280px; background: var(--sidebar-bg);
      color: #cbd5e1; display: flex; flex-direction: column; transition: margin-left 0.3s ease; z-index: 1000; flex-shrink: 0; overflow-y: auto; border-right: 1px solid rgba(255,255,255,0.08); box-shadow: 12px 0 28px rgba(17,25,29,0.18);
    }
    .sidebar.collapsed { margin-left: -280px; }
    
    @media (max-width: 768px) {
      .sidebar { position: fixed; height: 100%; left: 0; top: 0; box-shadow: 4px 0 15px rgba(0,0,0,0.2); }
      .sidebar.collapsed { margin-left: -280px; box-shadow: none; }
    }
    
    .brand { padding: 22px 24px; display: flex; align-items: center; gap: 12px; background: var(--brand-bg); border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 14px; position: sticky; top: 0; z-index: 2; transition: background 0.3s ease; }
    .brand img { height: 44px; width: 44px; object-fit: contain; }
    .brand h2 { color: white; font-size: 1.08rem; font-weight: 800; letter-spacing: 0; }
    
    .sidebar-section-title { color: #64748b; font-size: 0.72rem; text-transform: uppercase; padding: 16px 24px 8px; font-weight: 800; letter-spacing: 0.8px; }
    .nav-menu { list-style: none; padding: 0 12px; margin-bottom: 16px; }
    .nav-item { padding: 11px 14px; margin-bottom: 4px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 12px; font-size: 0.93rem; font-weight: 650; transition: var(--transition); border: 1px solid transparent; color: #94a3b8; }
    .nav-item i { width: 20px; text-align: center; font-size: 1.04rem; color: #64748b; transition: var(--transition); }
    .nav-item:hover { background-color: var(--sidebar-hover); color: white; border-color: rgba(255,255,255,0.08); }
    .nav-item:hover i { color: var(--accent); }
    .nav-item.active { background: #2563eb; color: white; border-color: rgba(37,99,235,0.25); box-shadow: inset 4px 0 0 #60a5fa; }
    .nav-item.active i { color: white; }

    /* MAIN CONTENT & TOPBAR */
    .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; transition: width 0.3s ease; }
    .topbar { height: 75px; background: var(--surface); display: flex; justify-content: space-between; align-items: center; padding: 0 32px; box-shadow: var(--shadow-sm); border-bottom: 1px solid var(--border-color); z-index: 10; flex-shrink: 0; margin: 0; }
    .topbar-left { display: flex; align-items: center; gap: 16px; }
    .system-title { font-weight: 700; text-transform: uppercase; color: var(--primary); font-size: 1.1rem; letter-spacing: 0.5px; }
    .brand-school { font-weight: 800; color: var(--accent); }
    
    .topbar-right { display: flex; align-items: center; gap: 20px; }
    .admin-name { font-weight: 700; color: var(--text-dark); background: var(--surface-muted); padding: 9px 16px; border-radius: 8px; font-size: 0.92rem; border: 1px solid var(--border-color); display: flex; align-items: center; gap: 8px; box-shadow: none; }
    
    .icon-btn { background: var(--surface); border: 1px solid var(--border-color); font-size: 1.1rem; color: var(--text-muted); cursor: pointer; transition: var(--transition); padding: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; box-shadow: none; }
    .icon-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: #b9cce7; }

    /* VIEWS & DASHBOARD */
    .views-container { flex: 1; padding: 30px; overflow-y: auto; }
    .view-section { display: none; animation: fadeIn 0.4s ease; }
    .view-section.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    
    .header-action { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; }
    .header-action h2 { font-size: 1.65rem; color: var(--text-dark); letter-spacing: 0; }
    .dashboard-hero { position: relative; overflow: hidden; background:
      linear-gradient(90deg, rgba(17,25,29,0.96), rgba(18,59,109,0.94)),
      url("assets/logo.png") right 28px center / 150px auto no-repeat;
      color: white; border-radius: 8px; padding: 28px; margin-bottom: 24px; box-shadow: var(--shadow-md); border: 1px solid rgba(255,255,255,0.08);
    }
    .dashboard-hero::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); pointer-events: none; }
    .dashboard-hero h2 { position: relative; font-size: 1.68rem; margin-bottom: 8px; letter-spacing: 0; }
    .dashboard-hero p { position: relative; color: rgba(255,255,255,0.88); max-width: 680px; line-height: 1.55; }
    .dashboard-hero-meta { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
    .hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); font-size: 0.84rem; font-weight: 700; color: white; }
    
    .btn { padding: 10px 18px; border-radius: 8px; font-weight: 700; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 8px; font-size: 0.94rem; transition: var(--transition); min-height: 40px; }
    .btn-primary { background: var(--primary); color: white; box-shadow: 0 8px 16px rgba(15,86,179,0.16); }
    .btn-primary:hover { background: var(--primary-hover); box-shadow: 0 10px 18px rgba(15,86,179,0.22); }
    .btn-outline { background: var(--surface); border: 1px solid var(--border-color); color: var(--text-dark); box-shadow: none; }
    .btn-outline:hover { background: var(--surface-muted); border-color: #b8c4c9; }
    .btn-success { background: var(--accent); color: #ffffff; }
    .btn-success:hover { background: var(--accent-hover); }
    .btn-danger { color: var(--danger); border-color: var(--danger); }
    .btn-danger:hover { background: var(--red-soft); border-color: var(--danger); }
    
    .role-select { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 0.85rem; font-weight: 700; background: var(--surface); color: var(--text-dark); cursor: pointer; outline: none; box-shadow: none; }
    .role-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,86,179,0.12); }

     /* STAT CARDS */
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-bottom: 28px; }
    .stat-card { background: var(--surface); padding: 22px; border-radius: 8px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; transition: var(--transition); }
    .stat-card::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--primary); opacity: 0.92; transition: var(--transition); }
    .stat-card:hover { box-shadow: var(--shadow-md); border-color: #c9d3d7; }
    .stat-card:hover::after { background: var(--accent); }
    .stat-icon { width: 54px; height: 54px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(17,25,29,0.06); }
    .stat-details p { color: var(--text-muted); font-size: 0.84rem; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.04em; }
    .stat-details h3 { color: var(--text-dark); font-size: 1.62rem; font-weight: 800; letter-spacing: 0; }

    /* TABLES */
    .card { background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); padding: 24px; }
    .table-responsive { overflow-x: auto; padding: 0; }
    .table-responsive.card { overflow-x: auto; overflow-y: hidden; }
    .table-responsive.card table { min-width: 720px; }
    table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; }
    th { padding: 15px 22px; background: var(--surface-muted); color: var(--text-dark); font-weight: 800; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1; }
    td { padding: 16px 22px; border-bottom: 1px solid var(--border-color); color: var(--text-dark); font-size: 0.94rem; vertical-align: middle; }
    tbody tr { transition: background-color 0.18s ease; }
    tbody tr:hover { background-color: var(--surface-muted); }
    tbody tr:last-child td { border-bottom: none; }
    .empty-state { text-align: center; padding: 58px 20px; background: var(--surface); }
    .empty-state i { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: 2rem; margin-bottom: 16px; }
    .empty-state p { color: var(--text-muted); font-weight: 600; }
    .section-subtitle { color: var(--text-muted); font-size: 0.9rem; margin-top: 5px; line-height: 1.5; }
    .card-title { display: flex; align-items: center; gap: 10px; color: var(--text-dark); font-size: 1.08rem; margin-bottom: 18px; }
    .users-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 14px; box-shadow: none; }
    .finance-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 18px; }
    .finance-summary-card { background: linear-gradient(135deg, var(--surface), var(--surface-muted)); border: 1px solid var(--border-color); border-radius: 10px; padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px; }
    .finance-summary-card span { color: var(--text-muted); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
    .finance-summary-card strong { color: var(--text-dark); font-size: 1.45rem; font-weight: 800; }
    .finance-note-card { margin-bottom: 18px; padding: 0; overflow: hidden; }
    .finance-note-content { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; background: linear-gradient(90deg, rgba(30,58,138,0.06), rgba(15,143,97,0.06)); }
    .finance-note-content h3 { margin: 0 0 8px; color: var(--text-dark); font-size: 1.02rem; }
    .finance-note-content p { margin: 0; color: var(--text-muted); line-height: 1.6; }
    .finance-note-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; box-shadow: 0 10px 18px rgba(30,58,138,0.16); }
    .finance-student-cell { display: flex; flex-direction: column; gap: 4px; }
    .finance-student-cell strong { color: var(--text-dark); }
    .finance-student-cell span { color: var(--text-muted); font-size: 0.82rem; }
    .finance-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .finance-actions .btn { min-height: 34px; padding: 7px 12px; font-size: 0.82rem; }
    .finance-status-pill, .finance-method-pill { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; }
    .finance-status-pending { background: #fee2e2; color: #b91c1c; }
    .finance-status-cleared { background: #dcfce7; color: #166534; }
    .finance-method-pill { background: var(--primary-soft); color: var(--primary); }
    .finance-payments-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 0; }
    #fees-payments-card .card-title { margin-bottom: 6px; }
    #fees-payments-card .section-subtitle { margin: 0 0 18px; }
    .users-toolbar i { color: var(--text-muted); }
    .users-toolbar input { width: 100%; border: none; outline: none; background: transparent; color: var(--text-dark); font-size: 0.95rem; }
    .users-toolbar input::placeholder { color: #94a3b8; }
    .user-identity { display: flex; align-items: center; gap: 14px; min-width: 310px; }
    .user-avatar-small { width: 46px; height: 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; background: var(--primary-soft); color: var(--primary); font-weight: 800; box-shadow: inset 0 0 0 1px rgba(15,86,179,0.10); }
    .user-avatar-small img { width: 100%; height: 100%; object-fit: cover; }
    .user-primary { font-weight: 800; color: var(--text-dark); line-height: 1.25; font-size: 0.98rem; }
    .user-secondary { color: var(--text-muted); font-size: 0.84rem; margin-top: 4px; word-break: break-word; line-height: 1.25; }
    .provider-stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
    .provider-icon { font-size: 1.05rem; width: 22px; text-align: center; }
    .provider-icon.google { color: #4285f4; }
    .provider-icon.email { color: #9aa4b2; }
    .clean-cell { min-width: 170px; }
    .clean-cell strong { display: block; color: var(--text-dark); font-size: 0.95rem; line-height: 1.25; white-space: nowrap; }
    .clean-cell span { display: block; color: var(--text-muted); font-size: 0.82rem; margin-top: 5px; line-height: 1.25; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .role-select { min-width: 190px; white-space: nowrap; border-radius: 10px; box-shadow: none; }
    .users-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .users-actions .icon-btn { width: 38px; height: 38px; border-radius: 10px; font-size: 0.95rem; }
    #users-table { min-width: 1180px; table-layout: auto; }
    #users-table th, #users-table td { vertical-align: middle; }
    #users-table th { background: var(--surface-muted); color: var(--text-dark); }
    #users-table td { padding-top: 18px; padding-bottom: 18px; }
    #users-table tbody tr:nth-child(odd) { background: var(--surface); }
    #users-table tbody tr:nth-child(even) { background: var(--surface-muted); }
    #users-table tbody tr:hover { background: var(--primary-soft); }
    .students-directory { display: flex; flex-direction: column; gap: 24px; }
    .student-class-group { background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: var(--shadow-sm); overflow: hidden; }
    .student-class-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; background: var(--surface-muted); border-bottom: 1px solid var(--border-color); }
    .student-class-title { display: flex; align-items: center; gap: 10px; color: var(--primary); font-size: 0.98rem; font-weight: 800; }
    .student-count-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 5px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
    .student-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 18px; padding: 20px; }
    .student-profile-card { position: relative; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; min-height: 100%; transition: var(--transition); box-shadow: 0 8px 18px rgba(17, 25, 29, 0.06); }
    .student-profile-card:hover { border-color: #b8c7ce; box-shadow: 0 18px 34px rgba(17, 25, 29, 0.14); transform: translateY(-3px); }
    .student-profile-card.medical-warning-card { border: 2.2px solid #ef4444 !important; box-shadow: 0 8px 24px rgba(239, 68, 68, 0.15) !important; }
    .student-profile-card.medical-warning-card:hover { border-color: #ef4444 !important; box-shadow: 0 18px 34px rgba(239, 68, 68, 0.25) !important; }
    .medical-warning-badge { display: inline-flex; align-items: center; gap: 4px; background-color: #fef2f2; color: #ef4444; border: 1.5px solid #fee2e2; padding: 3px 7px; border-radius: 6px; font-size: 0.72rem; font-weight: 800; margin-top: 4px; }
    .dark-theme .medical-warning-badge { background-color: rgba(239, 68, 68, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); }
    .student-medical-flag { position: absolute; top: 12px; right: 12px; background-color: #ef4444; color: white; border-radius: 20px; padding: 5px 12px; font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; gap: 5px; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4); cursor: pointer; z-index: 10; transition: var(--transition); }
    .student-medical-flag:hover { transform: scale(1.06); background-color: #dc2626; box-shadow: 0 6px 14px rgba(239, 68, 68, 0.55); }
    .student-photo-frame { width: 100%; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #e8f1ff, #e8f4e7); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--primary); font-size: 2.1rem; font-weight: 800; border-bottom: 1px solid var(--border-color); }
    .student-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .student-card-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
    .student-card-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .student-card-name { color: var(--text-dark); font-size: 1.08rem; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
    .student-summary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .student-summary-box { background: var(--surface-muted); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 11px; min-width: 0; }
    .student-summary-box span { display: block; color: var(--text-muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; }
    .student-summary-box strong { display: block; color: var(--text-dark); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .student-meta-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
    .student-meta-item { display: flex; align-items: flex-start; gap: 9px; color: var(--text-muted); font-size: 0.86rem; line-height: 1.35; }
    .student-meta-item i { color: var(--primary); width: 16px; margin-top: 2px; text-align: center; }
    .student-meta-item strong { color: var(--text-dark); font-weight: 750; }
    .student-parent-row { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; color: var(--text-muted); font-size: 0.86rem; line-height: 1.35; }
    .student-parent-avatar { width: 42px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--primary-soft); color: var(--primary); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 800; }
    .student-parent-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .student-parent-row strong { color: var(--text-dark); font-weight: 750; }
    .student-details-btn { width: 100%; justify-content: center; background: var(--primary); color: #ffffff; margin-top: 2px; }
    .student-details-btn:hover { background: var(--primary-hover); }
    .student-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: auto; }
    .student-actions { display: flex; align-items: center; gap: 8px; }
    .student-actions .icon-btn { width: 38px; height: 38px; font-size: 0.95rem; }
    .student-details-hero { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 24px; border-bottom: 1px solid var(--border-color); background: var(--surface-muted); }
    .student-details-photo { width: 150px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #e8f1ff, #e8f4e7); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 2rem; font-weight: 800; border: 1px solid var(--border-color); }
    .student-details-photo img { width: 100%; height: 100%; object-fit: cover; }
    .student-details-title { display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 0; }
    .student-details-title h4 { font-size: 1.35rem; color: var(--text-dark); overflow-wrap: anywhere; }
    .student-details-title p { color: var(--text-muted); line-height: 1.4; }
    .student-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 24px; overflow-y: auto; max-height: 55vh; }
    .student-detail-field { background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 14px; min-width: 0; }
    .student-detail-field span { display: block; color: var(--text-muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
    .student-detail-field strong { display: block; color: var(--text-dark); font-size: 0.92rem; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
    
    .staff-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
    .staff-profile-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; box-shadow: 0 8px 18px rgba(17, 25, 29, 0.06); transition: var(--transition); display: flex; flex-direction: column; min-height: 100%; }
    .staff-profile-card:hover { border-color: #b8c7ce; box-shadow: 0 18px 34px rgba(17, 25, 29, 0.14); transform: translateY(-3px); }
    .staff-card-header { display: grid; grid-template-columns: 86px 1fr; gap: 14px; padding: 18px; background: var(--card-header-bg); border-bottom: 1px solid var(--border-color); }
    .staff-photo-frame { width: 86px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #e8f1ff, #e8f4e7); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.45rem; font-weight: 800; border: 1px solid var(--border-color); }
    .staff-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
    .staff-card-title { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
    .staff-card-title h3 { color: var(--text-dark); font-size: 1.04rem; line-height: 1.25; overflow-wrap: anywhere; }
    .staff-card-role { display: inline-flex; width: fit-content; padding: 5px 10px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 0.76rem; font-weight: 800; text-transform: capitalize; }
    .staff-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
    .staff-meta-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
    .staff-meta-item { display: flex; align-items: flex-start; gap: 9px; color: var(--text-muted); font-size: 0.86rem; line-height: 1.35; }
    .staff-meta-item i { color: var(--primary); width: 16px; margin-top: 2px; text-align: center; }
    .staff-meta-item strong { color: var(--text-dark); font-weight: 750; }
    .staff-payroll-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .staff-payroll-box { background: var(--surface-muted); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 11px; min-width: 0; }
    .staff-payroll-box span { display: block; color: var(--text-muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; }
    .staff-payroll-box strong { display: block; color: var(--text-dark); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .staff-payroll-box.net strong { color: var(--accent-hover); }
    .staff-payroll-box.deduct strong { color: var(--danger); }
    
    .staff-card-actions { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: auto; }
    .staff-card-actions-row { display: flex; align-items: center; gap: 8px; }
    .staff-details-btn { width: 100%; justify-content: center; background: var(--primary); color: #ffffff; }
    .staff-details-btn:hover { background: var(--primary-hover); }
    .staff-card-actions .role-select { width: 100%; min-width: 0; }
    
    .staff-details-hero { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 18px 24px; border-bottom: 1px solid var(--border-color); background: var(--surface-muted); }
    .staff-details-photo { width: 100px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #e8f1ff, #e8f4e7); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.5rem; font-weight: 800; border: 1px solid var(--border-color); }
    .staff-details-photo img { width: 100%; height: 100%; object-fit: cover; }
    .staff-details-title { display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 0; }
    .staff-details-title h4 { font-size: 1.35rem; color: var(--text-dark); overflow-wrap: anywhere; }
    
    .staff-details-meta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
    .staff-details-meta-row span { color: var(--text-muted); font-size: 0.88rem; display: inline-flex; align-items: center; gap: 6px; }
    .staff-details-meta-row span i { color: var(--primary); width: 14px; text-align: center; }
    .staff-details-meta-row span strong { color: var(--text-dark); font-weight: 600; }
    
    .gross-pay-container {
      position: relative;
      overflow: hidden;
    }
    .view-finances-overlay-btn {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--primary);
      color: #ffffff !important;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 700;
      text-decoration: none;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, background-color 0.2s ease;
    }
    .gross-pay-container:hover .view-finances-overlay-btn {
      opacity: 1;
      pointer-events: auto;
      cursor: pointer;
    }
    .view-finances-overlay-btn:hover {
      background: var(--primary-hover);
    }
    
    @keyframes payrollRowFlash {
      0% { background-color: #fef08a !important; }
      100% { }
    }
    .payroll-row-highlight td {
      animation: payrollRowFlash 3s ease-out forwards;
    }
    
    .staff-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 24px; overflow-y: auto; max-height: 55vh; }
    .staff-form-section { margin-bottom: 22px; }
    .staff-form-section h4 { margin-bottom: 14px; color: var(--primary); border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
    .people-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
    .people-profile-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 18px rgba(17, 25, 29, 0.06); overflow: hidden; display: flex; flex-direction: column; min-height: 100%; transition: var(--transition); }
    .people-profile-card:hover { border-color: #b8c7ce; box-shadow: 0 18px 34px rgba(17, 25, 29, 0.14); transform: translateY(-3px); }
    
    .people-card-header { display: grid; grid-template-columns: 58px 1fr; gap: 13px; align-items: center; padding: 18px; background: var(--card-header-bg); border-bottom: 1px solid var(--border-color); }
    .people-avatar { width: 58px; aspect-ratio: 1; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 800; border: 1px solid var(--border-color); overflow: hidden; }
    .people-card-title { min-width: 0; }
    .people-card-title h3 { color: var(--text-dark); font-size: 1.04rem; line-height: 1.25; overflow-wrap: anywhere; }
    .people-card-title p { color: var(--text-muted); margin-top: 5px; font-size: 0.84rem; overflow-wrap: anywhere; }
    .people-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
    .people-summary-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .people-summary-box { background: var(--surface-muted); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 11px; min-width: 0; }
    .people-summary-box span { display: block; color: var(--text-muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; }
    .people-summary-box strong { display: block; color: var(--text-dark); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .people-meta-list { display: grid; grid-template-columns: 1fr; gap: 9px; }
    .people-meta-item { display: flex; align-items: flex-start; gap: 9px; color: var(--text-muted); font-size: 0.86rem; line-height: 1.35; }
    .people-meta-item i { color: var(--primary); width: 16px; margin-top: 2px; text-align: center; }
    .people-meta-item strong { color: var(--text-dark); font-weight: 750; }
    .child-face-list { display: flex; flex-wrap: wrap; gap: 10px; }
    .child-face { display: flex; align-items: center; gap: 8px; background: var(--surface-muted); border: 1px solid var(--border-color); border-radius: 8px; padding: 7px 9px; max-width: 100%; }
    .child-face-avatar { width: 38px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 800; flex-shrink: 0; }
    .child-face-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .child-face span { color: var(--text-dark); font-weight: 750; font-size: 0.83rem; overflow-wrap: anywhere; }
    .people-card-actions { display: flex; flex-wrap: wrap; gap: 9px; border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: auto; }
    .people-card-actions .btn { flex: 1 1 auto; justify-content: center; min-width: 120px; }
    .learning-shell { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
    .learning-shell.no-form { grid-template-columns: 1fr; }
    .learning-panel { background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: var(--shadow-sm); padding: 18px; }
    
    /* ========================================= */
    /* PREMIUM NOTICE CARD STYLING               */
    /* ========================================= */
    .notice-card {
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 22px 24px;
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      border-left: 4px solid var(--text-muted); /* Default normal notice is neutral */
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .notice-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--border-color);
    }
    .notice-card.pending {
      border-left-color: #f59e0b; /* Amber warning color */
    }
    .notice-card.urgent {
      border-left-color: var(--danger) !important;
      background: var(--red-soft);
      border-color: rgba(239, 68, 68, 0.15);
    }
    body.dark-theme .notice-card.urgent {
      background: rgba(239, 68, 68, 0.08);
      border-color: rgba(239, 68, 68, 0.2);
    }
    .notice-card.urgent:hover {
      border-color: rgba(239, 68, 68, 0.35);
      box-shadow: 0 12px 24px rgba(239, 68, 68, 0.06);
    }
    .notice-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }
    .notice-card-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text-dark);
      line-height: 1.35;
    }
    .notice-author-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      border-top: 1px solid var(--border-color);
      padding-top: 14px;
      margin-top: 4px;
    }
    .notice-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--primary-soft);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.85rem;
      text-transform: uppercase;
      border: 1px solid rgba(30, 58, 138, 0.1);
      flex-shrink: 0;
    }
    body.dark-theme .notice-avatar {
      background: rgba(59, 130, 246, 0.1);
      color: #3b82f6;
      border-color: rgba(59, 130, 246, 0.2);
    }
    .notice-avatar-img {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid rgba(30, 58, 138, 0.1);
      flex-shrink: 0;
    }
    body.dark-theme .notice-avatar-img {
      border-color: rgba(59, 130, 246, 0.2);
    }
    .notice-meta-details {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .notice-author-name {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-dark);
    }
    .notice-author-role {
      font-size: 0.74rem;
      color: var(--text-muted);
      font-weight: 500;
      text-transform: capitalize;
    }
    .notice-date-pill {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 500;
    }
    .notice-body {
      font-size: 0.95rem;
      color: var(--text-muted);
      line-height: 1.6;
      white-space: pre-wrap;
    }
    .urgent-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--danger);
      color: white;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 0.74rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
      animation: pulse-urgent 2.5s infinite;
    }
    @keyframes pulse-urgent {
      0% { opacity: 1; }
      50% { opacity: 0.85; }
      100% { opacity: 1; }
    }
    .input-wrapper input:focus,
    .input-wrapper textarea:focus,
    .input-wrapper select:focus {
      border-color: var(--primary) !important;
      background: var(--surface) !important;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    }
    body.dark-theme .input-wrapper input:focus,
    body.dark-theme .input-wrapper textarea:focus,
    body.dark-theme .input-wrapper select:focus {
      border-color: var(--primary) !important;
      background: #000000 !important;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    }
    .urgent-toggle-group:hover {
      border-color: rgba(239, 68, 68, 0.3) !important;
      background: var(--red-soft) !important;
    }
    body.dark-theme .urgent-toggle-group:hover {
      border-color: rgba(239, 68, 68, 0.4) !important;
      background: rgba(239, 68, 68, 0.05) !important;
    }
    .learning-panel h3 { color: var(--text-dark); font-size: 1.05rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
    .learning-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
    .learning-toolbar select, .learning-toolbar input { min-height: 40px; border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; background: var(--surface); color: var(--text-dark); font-size: 0.9rem; }
    .learning-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
    .learning-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; box-shadow: 0 8px 18px rgba(17, 25, 29, 0.05); }
    .learning-card h4 { color: var(--text-dark); font-size: 0.98rem; margin-bottom: 8px; overflow-wrap: anywhere; }
    .learning-card p { color: var(--text-muted); font-size: 0.84rem; line-height: 1.45; margin-top: 5px; }
    .learning-card-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
    .learning-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; background: var(--surface-muted); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.74rem; font-weight: 800; }
    .transport-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
    .transport-directory { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .transport-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 18px rgba(17,25,29,0.06); overflow: hidden; display: flex; flex-direction: column; min-height: 100%; transition: var(--transition); }
    .transport-card:hover { border-color: #b8c7ce; box-shadow: 0 18px 34px rgba(17,25,29,0.14); transform: translateY(-3px); }
    .transport-card-header { padding: 17px 18px; background: var(--card-header-bg); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
    .transport-card-header h3 { color: var(--text-dark); font-size: 1.04rem; line-height: 1.28; overflow-wrap: anywhere; }
    .transport-card-header p { color: var(--text-muted); font-size: 0.82rem; margin-top: 5px; }
    .transport-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
    .transport-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .transport-meta-box { background: var(--surface-muted); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 11px; min-width: 0; }
    .transport-meta-box span { display: block; color: var(--text-muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; }
    .transport-meta-box strong { display: block; color: var(--text-dark); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .transport-rider-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .transport-rider { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-muted); max-width: 100%; }
    .transport-rider-avatar { width: 30px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; flex-shrink: 0; }
    .transport-rider-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .transport-rider span { font-size: 0.78rem; color: var(--text-dark); font-weight: 750; overflow-wrap: anywhere; }
    .transport-actions { display: flex; gap: 8px; border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: auto; justify-content: flex-end; }
    .attendance-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
    .attendance-student-row { background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
    .attendance-student-row select { grid-column: 1 / -1; min-height: 38px; border: 1px solid var(--border-color); border-radius: 8px; padding: 7px 10px; background: var(--surface-muted); }
    .attendance-face { width: 44px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 800; }
    .attendance-face img { width: 100%; height: 100%; object-fit: cover; }
    .learning-empty { text-align: center; padding: 32px 18px; color: var(--text-muted); border: 1px dashed var(--border-color); border-radius: 8px; background: var(--surface-muted); }
    .stat-blue { color: var(--primary); background: var(--primary-soft); }
    .stat-red { color: var(--danger); background: var(--red-soft); }
    .stat-orange { color: var(--accent-hover); background: var(--accent-soft); }
    .stat-purple { color: var(--school-charcoal); background: #e8ecee; }
    .stat-green { color: var(--accent-hover); background: var(--accent-soft); }

    /* MODAL */
    .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.64); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 2000; padding: 20px; }
    .modal-overlay.active { display: flex; }
    .modal-content { background: var(--surface); width: 100%; max-width: 800px; border-radius: 8px; box-shadow: var(--shadow-lg); overflow: hidden; animation: slideUp 0.3s ease; display: flex; flex-direction: column; max-height: 90vh; border: 1px solid var(--border-color); }
    @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    .modal-header { padding: 22px 24px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: var(--surface); flex-shrink: 0; }
    .modal-header h3 { color: var(--text-dark); font-size: 1.25rem; }
    .close-btn { background: none; border: none; font-size: 1.2rem; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
    .close-btn:hover { color: var(--danger); }
    form { padding: 24px; overflow-y: auto; }
    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.9rem; color: var(--text-dark); }
    .form-group input, .form-group select { width: 100%; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.95rem; outline: none; transition: var(--transition); background: var(--surface-muted); }
    .form-group input:focus, .form-group select:focus { border-color: var(--primary); background: var(--input-focus-bg); box-shadow: 0 0 0 3px rgba(15,86,179,0.1); }

    .badge { padding: 5px 12px; border-radius: 8px; font-size: 0.78rem; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; }
    .badge-paid { background: var(--accent-soft); color: var(--accent-hover); }
    .badge-pending { background: var(--red-soft); color: var(--danger); }

    #payroll {
      --primary: #1E3A8A;
      --primary-hover: #172b66;
      --primary-soft: #e0e7ff;
      --accent: #10B981;
      --accent-hover: #059669;
      --accent-soft: #d1fae5;
      --text-dark: #0f172a;
      --text-muted: #64748b;
      --border-color: #e2e8f0;
    }
    body.dark-theme #payroll {
      --primary: #3b82f6;
      --primary-hover: #2563eb;
      --primary-soft: #1e3a8a;
      --accent: #10b981;
      --accent-soft: #064e3b;
    }
    #payroll .btn-primary { background: linear-gradient(135deg, var(--primary), #2563eb); color: white; box-shadow: 0 10px 18px rgba(30,58,138,0.18); }
    #payroll .btn-primary:hover { background: linear-gradient(135deg, var(--primary-hover), var(--primary)); transform: translateY(-2px); box-shadow: 0 16px 26px rgba(30,58,138,0.24); }
    #payroll .btn-outline { background: var(--surface); border: 1px solid var(--border-color); color: var(--text-dark); box-shadow: var(--shadow-sm); }
    #payroll .btn-outline:hover { background: var(--surface-muted); border-color: #cbd5e1; transform: translateY(-1px); }
    #payroll .btn-danger { background: var(--danger); color: white; }
    #payroll .btn-danger:hover { background: #dc2626; }

    /* ========================================= */
    /* ADVANCED PAYROLL SHEET UI SYSTEM        */
    /* ========================================= */
    .payroll-container {
        width: 100%;
        overflow-x: auto; 
        background: var(--surface);
        padding: 6px;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
    }

    #payroll-table {
        width: 100%;
        min-width: 1950px; 
        border-collapse: collapse;
        font-size: 0.8rem;
    }

    #payroll-table th, #payroll-table td {
        padding: 10px 14px;
        border: 1px solid var(--border-color);
        text-align: left;
        white-space: nowrap; 
    }

    /* Stack long headers vertically */
    #payroll-table th.stacked-th {
        white-space: normal !important;
        vertical-align: bottom;
        line-height: 1.2;
        padding-top: 12px;
        padding-bottom: 12px;
        min-width: 105px;
    }

    #payroll-table th { 
        background: var(--surface-muted);
        font-weight: 700; 
        color: var(--text-dark); 
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Distinct Monospace Styling for IDs and PIN codes */
    #payroll-table td.code-cell {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.78rem;
        color: var(--text-dark);
        letter-spacing: -0.3px;
    }

    /* Accent highlighting for important monetary indicators */
    #payroll-table td.gross-pay-cell {
        font-weight: 600;
        color: var(--text-dark);
    }
    #payroll-table td.net-pay-cell {
        font-weight: 700;
        color: var(--primary);
        background-color: var(--net-pay-bg);
    }

    /* =========================================================================
    DYNAMIC INLINE EDIT SYSTEM & HOVER EFFECTS
    ========================================================================= */
    .editable-payroll-cell {
        position: relative;
        cursor: pointer;
        padding-right: 28px !important; /* reserve room for icon placement */
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .editable-payroll-cell:hover {
        background-color: var(--surface-muted) !important; /* Soft Slate highlight background on cell hover */
        color: var(--primary) !important;
    }

    /* Edit indicator pen icon */
    .editable-payroll-cell::after {
        content: '\f303'; /* FontAwesome Pen Icon Unicode string */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.7rem;
        color: var(--text-muted);
        opacity: 0; /* Hidden when mouse is not over cell */
        transition: opacity 0.15s ease, color 0.15s ease;
        pointer-events: none;
    }

    /* Smooth opacity reveal when mouse hovers over editable block */
    .editable-payroll-cell:hover::after {
        opacity: 1;
        color: var(--primary);
    }

    #payroll-table td strong {
        text-decoration: none !important;
    }

    /* ========================================= */
    /* ANALYTICS CHARTS GRID STYLING             */
    /* ========================================= */
    .analytics-charts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
      gap: 24px;
      margin-top: 32px;
      width: 100%;
    }
    .chart-card {
      background: var(--surface);
      border-radius: 8px;
      border: 1px solid var(--border-color);
      padding: 24px;
      box-shadow: var(--shadow-sm);
    }
    @media (max-width: 992px) {
      .analytics-charts-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ========================================= */
    /* PAYROLL ANALYTICS METRIC PANEL STYLING    */
    /* ========================================= */
    .analytics-dashboard-row {
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        gap: 32px;
        align-items: center;
        width: 100%;
        margin-top: 8px;
    }

    .chart-viewport-wrapper {
        height: 280px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }

    .metric-summary-card {
        background: var(--surface);
        padding: 16px;
        border-radius: 10px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-color);
        min-width: 0;
        transition: transform 0.2s ease;
    }

    .metric-summary-card:hover {
        transform: translateY(-1px);
    }

    .metric-card-label {
        font-size: 0.72rem;
        color: #64748b;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: block;
        margin-bottom: 4px;
    }

    .metric-card-value {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--text-dark);
        letter-spacing: -0.3px;
    }

    .matrix-display-container {
        background: var(--surface);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 20px;
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 32px;
        box-shadow: var(--shadow-sm);
        width: 100%;
    }

    .matrix-column-title {
        font-size: 0.78rem;
        color: #1e3a8a;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 14px;
        font-weight: 700;
        border-bottom: 2px solid #f1f5f9;
        padding-bottom: 6px;
    }

    .matrix-data-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        font-size: 0.85rem;
        color: var(--text-dark);
    }

    .matrix-data-row:last-child {
        margin-bottom: 0;
    }

    @media (max-width: 1100px) {
        .analytics-dashboard-row {
            grid-template-columns: 1fr;
            gap: 24px;
        }
        .chart-viewport-wrapper {
            height: 245px;
        }
    }

    /* ========================================= */
    /* RESPONSIVE MEDIA QUERIES                  */
    /* ========================================= */
    .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    @media (max-width: 992px) {
      .header-action { flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
      #add-student-form > div { grid-template-columns: 1fr !important; gap: 15px !important; margin-bottom: 10px !important; }
    }

    @media (max-width: 768px) {
      .sidebar { z-index: 1050; }
      .topbar { padding: 0 16px; height: 65px; }
      .system-title { font-size: 0.95rem; }
      .admin-name { font-size: 0.85rem; padding: 6px 12px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .views-container { padding: 16px; }
      .header-action h2 { font-size: 1.4rem; }
      .dashboard-hero { padding: 22px; background-size: 120px auto; background-position: right -20px bottom -15px; }
      .dashboard-hero h2 { font-size: 1.45rem; }
      .stats-grid { gap: 16px; margin-bottom: 24px; }
      .modal-header { padding: 16px 20px; }
      form { padding: 20px !important; }
      th, td { padding: 12px 16px; font-size: 0.85rem; }
      .card { padding: 16px; }
      .finance-note-content { flex-direction: column; }
      .finance-actions { flex-direction: column; }
      .finance-actions .btn { width: 100%; justify-content: center; }
    }

    @media (max-width: 480px) {
      .stats-grid { grid-template-columns: 1fr; }
      .stat-card { padding: 16px; gap: 15px; }
      .stat-icon { width: 48px; height: 48px; font-size: 1.3rem; }
      .stat-details h3 { font-size: 1.4rem; }
      .system-title { display: none; }
      .header-action .btn { width: 100%; justify-content: center; }
      .brand img { height: 35px; }
      .brand h2 { font-size: 1rem; }
      .topbar-right { gap: 10px; }
      .dashboard-hero-meta { gap: 8px; }
      .hero-pill { width: 100%; justify-content: center; }
      .student-card-grid { grid-template-columns: 1fr; padding: 14px; }
      .student-summary-row { grid-template-columns: 1fr; }
      .student-card-footer { align-items: flex-start; flex-direction: column; }
      .student-actions { width: 100%; justify-content: flex-end; }
      .student-details-hero { grid-template-columns: 1fr; }
      .student-details-photo { width: 100%; max-width: 220px; justify-self: center; }
      .student-details-grid { grid-template-columns: 1fr; padding: 18px; }
      .staff-directory { grid-template-columns: 1fr; }
      .staff-card-header { grid-template-columns: 72px 1fr; }
      .staff-photo-frame { width: 72px; }
      .staff-payroll-strip { grid-template-columns: 1fr; }
      .staff-details-hero { grid-template-columns: 1fr; }
      .staff-details-photo { width: 100px; justify-self: center; }
      .staff-details-meta-row { flex-direction: column; gap: 8px; }
      .staff-details-grid { grid-template-columns: 1fr; padding: 18px; }
      .staff-form-section > div { grid-template-columns: 1fr !important; gap: 10px !important; }
      .staff-form-section .form-group[style*="grid-column"] { grid-column: auto !important; }
      .people-card-grid { grid-template-columns: 1fr; }
      .people-summary-strip { grid-template-columns: 1fr; }
      .learning-shell { grid-template-columns: 1fr; }
      .learning-toolbar select, .learning-toolbar input, .learning-toolbar .btn { width: 100%; justify-content: center; }
      .transport-directory { grid-template-columns: 1fr; }
      .transport-meta-grid { grid-template-columns: 1fr; }
    }

    /* Warning Button */
    .btn-warning {
      background: #f59e0b;
      color: white;
      box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
    }
    .btn-warning:hover {
      background: #d97706;
      box-shadow: 0 6px 14px rgba(245, 158, 11, 0.35);
      transform: translateY(-1px);
    }

    /* Payroll Premium Header Card & Toolbar */
    .payroll-header-card {
      background: var(--surface);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .payroll-title-block {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 16px;
    }
    .payroll-title-block h2 {
      font-size: 1.65rem;
      color: var(--text-dark);
      font-weight: 800;
    }
    .active-period-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: var(--primary-soft);
      color: var(--primary);
      border-radius: 99px;
      font-size: 0.9rem;
      font-weight: 600;
      border: 1px solid rgba(15, 86, 179, 0.15);
      transition: background 0.3s ease, color 0.3s ease;
    }
    .active-period-badge i {
      font-size: 1rem;
    }
    .payroll-toolbar-groups {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .toolbar-group {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .toolbar-group .group-label {
      font-size: 0.72rem;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-right: 6px;
      white-space: nowrap;
    }
    .group-buttons {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .group-buttons .btn {
      min-height: 40px;
      padding: 10px 18px;
      justify-content: center;
      white-space: nowrap;
    }
    .toolbar-divider {
      width: 1px;
      height: 32px;
      background-color: var(--border-color);
    }
    @media (max-width: 1200px) {
      .payroll-toolbar-groups {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .toolbar-divider {
        display: none;
      }
      .toolbar-group {
        flex-direction: column;
        align-items: flex-start;
      }
      .toolbar-group .group-label {
        margin-bottom: 4px;
      }
      .group-buttons {
        width: 100%;
        flex-wrap: wrap;
      }
      .group-buttons .btn {
        flex: 1 1 auto;
      }
    }

    /* Leaflet Dark Theme Overrides & Professional Marker Styles */
    .leaflet-popup-content-wrapper {
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }
    .leaflet-popup-content {
      margin: 12px 16px;
      font-size: 0.85rem;
      line-height: 1.4;
    }
    .custom-school-icon div {
      transition: transform 0.2s ease-in-out;
    }
    .custom-school-icon div:hover {
      transform: scale(1.15) !important;
    }
    .custom-student-icon div {
      transition: transform 0.2s ease-in-out;
    }
    .custom-student-icon div:hover {
      transform: scale(1.15) !important;
    }
    .custom-van-icon div {
      transition: transform 0.2s ease-in-out;
    }
    .custom-van-icon div:hover {
      transform: scale(1.15) !important;
    }
    @keyframes van-pulse-anim {
      0% { transform: scale(0.9); opacity: 0.8; }
      100% { transform: scale(1.6); opacity: 0; }
    }
    .leaflet-control-layers {
      border-radius: 8px !important;
      border: 1px solid var(--border-color) !important;
      background-color: var(--surface) !important;
      color: var(--text-dark) !important;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 0.8rem;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
      padding: 6px 10px !important;
    }
    .dark-theme .leaflet-container {
      background: #1e293b !important;
      color: #f8fafc;
    }
    .dark-theme .leaflet-popup-content-wrapper,
    .dark-theme .leaflet-popup-tip {
      background: #1e293b;
      color: #f8fafc;
      border: 1px solid #334155;
    }
    .dark-theme .leaflet-bar a {
      background-color: #1e293b;
      color: #f8fafc;
      border-bottom: 1px solid #334155;
    }
    .dark-theme .leaflet-bar a:hover {
      background-color: #334155;
    }

    /* Permanent Tooltips Style */
    .custom-map-tooltip {
      background-color: rgba(255, 255, 255, 0.95) !important;
      border: 1.5px solid #cbd5e1 !important;
      color: #1e293b !important;
      font-weight: 700;
      font-size: 0.78rem !important;
      border-radius: 6px !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
      padding: 4px 8px !important;
    }
    .custom-map-tooltip::before {
      border-top-color: rgba(255, 255, 255, 0.95) !important;
    }
    .dark-theme .custom-map-tooltip {
      background-color: rgba(30, 41, 59, 0.95) !important;
      border: 1.5px solid #475569 !important;
      color: #f8fafc !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    }
    .dark-theme .custom-map-tooltip::before {
      border-top-color: rgba(30, 41, 59, 0.95) !important;
    }

    /* Predefined Route Dropdown & Live Tracking Pulse */
    .custom-dropdown-item:hover {
      background: var(--bg-hover) !important;
    }
    .driver-initials-fallback {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--accent);
      color: white;
    }
    .dark-theme .custom-dropdown-list {
      background: #1e293b !important;
      border-color: #334155 !important;
    }
    .dark-theme .custom-dropdown-item {
      border-bottom-color: #334155 !important;
      color: #f8fafc !important;
    }
    @keyframes pulse {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1); opacity: 0.7; }
      100% { transform: scale(1); opacity: 1; }
    }

/* Extracted inline portal styles */
.portal-inline-001 { display: none; }

.portal-inline-002 { color: var(--school-red); }

.portal-inline-003 { margin-top: auto; padding-bottom: 20px; }

.portal-inline-004 { color: var(--danger); border: 1px solid rgba(196, 22, 42, 0.28); }

.portal-inline-005 { color: var(--danger); }

.portal-inline-006 { display: flex; align-items: center; gap: 15px; }

.portal-inline-007 { font-size: 1.1rem; color: var(--text-dark); cursor: pointer; background: transparent; border: none; outline: none; transition: var(--transition); }

.portal-inline-008 { font-size: 1.8rem; font-weight: 800; margin-bottom: 12px; }

.portal-inline-009 { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 14px; margin-bottom: 18px; }

.portal-inline-010 { flex: 1; min-width: 260px; }

.portal-inline-011 { color: var(--accent); font-size: 0.95rem; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }

.portal-inline-012 { font-size: 0.9rem; line-height: 1.48; color: rgba(255,255,255,0.9); margin: 0; }

.portal-inline-013 { margin-top: 8px; }

.portal-inline-014 { background: linear-gradient(135deg, rgba(15, 143, 97, 0.98), rgba(30, 58, 138, 0.96)); color: #ffffff; font-weight: 700; text-decoration: none; padding: 8px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18); }
.portal-inline-014:hover { transform: translateY(-2px); box-shadow: 0 14px 24px rgba(15, 23, 42, 0.24); background: linear-gradient(135deg, rgba(10, 102, 69, 0.98), rgba(23, 43, 102, 0.96)); }

.portal-inline-015 { color: #d1fae5; }

.portal-inline-016 { cursor: pointer; }

.portal-inline-017 { display: none; margin-top: 32px; }

.portal-inline-018 { position: relative; height: 300px; width: 100%; }

.portal-inline-019 { color: var(--primary); }

.portal-inline-020 { margin-bottom: 16px; }

.portal-inline-021 { font-size: 1.2rem; color: var(--text-dark); }

.portal-inline-022 { color: #475569; border-color: #cbd5e1; }

.portal-inline-023 { max-width: 500px; }

.portal-inline-024 { padding: 20px; }

.portal-inline-025 { max-width: 95%; width: 1100px; }

.portal-inline-026 { color: var(--primary); margin-right: 8px; }

.portal-inline-027 { padding: 20px; overflow-x: auto; max-height: 70vh; }

.portal-inline-028 { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 15px; }

.portal-inline-029 { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 8px; }

.portal-inline-030 { width: 100%; border-collapse: collapse; font-size: 0.85rem; }

.portal-inline-031 { background: #f8fafc; border-bottom: 2px solid #cbd5e1; font-weight: 700; color: #475569; }

.portal-inline-032 { padding: 12px 10px; text-align: left; border-right: 1px solid #cbd5e1; }

.portal-inline-033 { padding: 12px 10px; text-align: center; border-right: 1px solid #cbd5e1; }

.portal-inline-034 { padding: 12px 10px; text-align: right; border-right: 1px solid #cbd5e1; }

.portal-inline-035 { padding: 12px 10px; text-align: left; }

.portal-inline-036 { color: #334155; }

.portal-inline-037 { padding: 15px 20px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #e2e8f0; }

.portal-inline-038 { margin-bottom: 16px; display: flex; gap: 12px; align-items: center; background: var(--surface); padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border-color); }

.portal-inline-039 { color: var(--text-muted); }

.portal-inline-040 { width: 100%; border: none; outline: none; font-size: 0.9rem; background: transparent; }

.portal-inline-041 { background: #e2e8f0; text-align: center; font-weight: 800; border-bottom: 2px solid #cbd5e1; color: #475569; }

.portal-inline-042 { background: #ffedd5; text-align: center; font-weight: 800; border-bottom: 2px solid #fed7aa; color: #c2410c; }

.portal-inline-043 { background: #dbeafe; text-align: center; font-weight: 800; border-bottom: 2px solid #bfdbfe; color: #1d4ed8; }

.portal-inline-044 { background: #f1f5f9; text-align: center; font-weight: 800; border-bottom: 2px solid #cbd5e1; color: #475569; }

.portal-inline-045 { background: #dcfce7; color: #15803d; font-weight: 800; }

.portal-inline-046 { margin-top: 24px; background: #f8fafc; border: 1px solid var(--border-color); }

.portal-inline-047 { margin-bottom: 16px; color: var(--text-dark); font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }

.portal-inline-048 { grid-template-columns: 0.9fr 1.4fr; }

.portal-inline-049 { padding: 0; }

.portal-inline-050 { width: 100%; }

.portal-inline-051 { margin-top: 24px; font-size: 0.75rem; color: #64748b; border-top: 1px solid #e2e8f0; padding-top: 12px; line-height: 1.4; }

.portal-inline-052 { margin-bottom: 20px; }

.portal-inline-053 { color: var(--text-muted); font-size: 0.9rem; margin-top: 5px; }

.portal-inline-054 { max-height: 600px; }

.portal-inline-055 { position: relative; }

.portal-inline-056 { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.95rem; }

.portal-inline-057 { padding-left: 40px; width: 100%; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.95rem; background: var(--surface-muted); color: var(--text-dark); height: 42px; outline: none; transition: var(--transition); }

.portal-inline-058 { position: absolute; left: 14px; top: 16px; color: var(--text-muted); font-size: 0.95rem; }

.portal-inline-059 { padding-left: 40px; padding-top: 12px; width: 100%; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.95rem; background: var(--surface-muted); color: var(--text-dark); outline: none; transition: var(--transition); resize: vertical; min-height: 120px; }

.portal-inline-060 { padding-left: 40px; width: 100%; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.95rem; background: var(--surface-muted); color: var(--text-dark); height: 42px; outline: none; transition: var(--transition); cursor: pointer; }

.portal-inline-061 { display: flex; align-items: center; gap: 10px; margin: 15px 0 20px 0; background: var(--surface-muted); padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border-color); transition: var(--transition); cursor: pointer; user-select: none; }

.portal-inline-062 { width: 18px; height: 18px; cursor: pointer; accent-color: var(--danger); }

.portal-inline-063 { margin-bottom: 0; cursor: pointer; font-weight: 600; font-size: 0.9rem; text-transform: none; letter-spacing: normal; color: var(--text-dark); display: flex; align-items: center; gap: 8px; width: 100%; }

.portal-inline-064 { color: var(--danger); font-size: 1rem; }

.portal-inline-065 { width:100%; justify-content:center; height: 44px; font-weight: 700; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }

.portal-inline-066 { margin-bottom: 12px; color: var(--primary); font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }

.portal-inline-067 { grid-template-columns: 1fr; gap: 12px; }

.portal-inline-068 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.portal-inline-069 { width:100%; justify-content:center; }

.portal-inline-070 { margin-top:18px; }

.portal-inline-071 { text-align: right; }

.portal-inline-072 { margin-top: 18px; margin-bottom: 20px; overflow: hidden; padding: 0; }

.portal-inline-073 { background: var(--surface-muted); padding: 14px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }

.portal-inline-074 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-dark); display: flex; align-items: center; gap: 8px; }

.portal-inline-075 { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }

.portal-inline-076 { height: 550px; width: 100%; z-index: 1; }

.portal-inline-077 { min-width: 150px; }

.portal-inline-078 { max-width: 800px; }

.portal-inline-079 { border: none; box-shadow: none; border-radius: 0; }

.portal-inline-080 { color: var(--warning); margin-right: 8px; }

.portal-inline-081 { padding: 12px 10px; text-align: right; border-right: 1px solid #cbd5e1; width: 130px; }

.portal-inline-082 { padding: 12px 10px; text-align: right; border-right: 1px solid #cbd5e1; width: 110px; }

.portal-inline-083 { padding: 12px 10px; text-align: center; border-right: 1px solid #cbd5e1; width: 100px; }

.portal-inline-084 { padding: 12px 10px; text-align: right; }

.portal-inline-085 { background-color: var(--primary); border-color: var(--primary); }

.portal-inline-086 { max-width: 450px; }

.portal-inline-087 { padding: 24px; }

.portal-inline-088 { margin-bottom: 15px; color: var(--text-muted); font-size: 0.95rem; }

.portal-inline-089 { color: var(--text-dark); }

.portal-inline-090 { background: var(--primary-soft); padding: 16px; border-radius: 8px; margin-bottom: 24px; border: 1px solid #b9cce7; text-align: center; }

.portal-inline-091 { font-size: 0.8rem; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }

.portal-inline-092 { color: var(--primary); margin-top: 5px; font-size: 2rem; }

.portal-inline-093 { font-weight: 700; }

.portal-inline-094 { font-size: 1.1rem; font-weight: bold; color: var(--primary); }

.portal-inline-095 { width: 100%; justify-content: center; padding: 14px; font-size: 1.05rem; margin-top: 10px; }

.portal-inline-096 { margin-left: 8px; }

.portal-inline-097 { max-width: 700px; }

.portal-inline-098 { padding: 24px; overflow-y: auto; max-height: 60vh; }

.portal-inline-099 { padding: 20px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: #f8fafc; flex-shrink: 0; }

.portal-inline-100 { color: var(--primary); border-color: var(--primary); }

.portal-inline-101 { display: flex; gap: 12px; }

.portal-inline-102 { max-width: 920px; }

.portal-inline-103 { max-width: 900px; }

.portal-inline-104 { padding: 24px; overflow-y: auto; max-height: calc(90vh - 120px); }

.portal-inline-105 { border: 1px solid var(--border-color); padding: 20px; border-radius: 8px; margin-bottom: 24px; }

.portal-inline-106 { padding: 0 10px; font-weight: 700; color: var(--primary); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; }

.portal-inline-107 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 15px; }

.portal-inline-108 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 15px; }

.portal-inline-109 { color:var(--danger) }

.portal-inline-110 { display: flex; gap: 24px; align-items: center; margin-top: 15px; background: var(--bg-light); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); flex-wrap: wrap; }

.portal-inline-111 { display:flex; align-items:center; gap:8px; font-weight:600; }

.portal-inline-112 { display: none; margin-top: 15px; padding: 15px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border-color); }

.portal-inline-113 { margin-top: 10px; }

.portal-inline-114 { display:flex; gap: 20px; }

.portal-inline-115 { display:flex; align-items:center; gap:8px; }

.portal-inline-116 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

.portal-inline-117 { background: var(--surface-muted); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); }

.portal-inline-118 { margin-bottom: 12px; color: var(--primary); }

.portal-inline-119 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 15px; }

.portal-inline-120 { margin-top: 20px; }

.portal-inline-121 { border: 1px solid var(--border-color); padding: 10px; border-radius: 8px; }

.portal-inline-122 { margin-bottom: 5px; }

.portal-inline-123 { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.portal-inline-124 { border: 1px solid var(--border-color); padding: 12px; border-radius: 8px; }

.portal-inline-125 { color: var(--primary); margin-bottom: 10px; }

.portal-inline-126 { display:flex; gap: 15px; margin-top:5px; }

.portal-inline-127 { background: var(--surface-muted); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.portal-inline-128 { display:flex; gap: 10px; margin-top:5px; flex-wrap:wrap; }

.portal-inline-129 { display:flex; align-items:center; gap:6px; }

.portal-inline-130 { margin-top: 15px; }

.portal-inline-131 { background: #eef2ff; padding: 15px; border-radius: 8px; border: 1px solid #c7d2fe; margin-bottom: 15px; }

.portal-inline-132 { display:flex; align-items:flex-start; gap:8px; font-weight:600; margin-bottom:8px; }

.portal-inline-133 { display:flex; align-items:flex-start; gap:8px; font-weight:600; }

.portal-inline-134 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.portal-inline-135 { width: 100%; justify-content: center; padding: 14px; font-size: 1.05rem; }

.portal-inline-136 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.portal-inline-137 { grid-column: 1 / -1; }

.portal-inline-138 { width: 100%; justify-content: center; padding: 14px; }

.portal-inline-139 { max-width: 760px; }

.portal-inline-140 { display:grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.portal-inline-141 { display: none; position: absolute; top: 100%; left: 0; width: 100%; max-height: 220px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; z-index: 1000; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.15); }

.portal-inline-142 { background: var(--bg-hover); cursor: not-allowed; }

.portal-inline-143 { grid-column: 1 / -1; display: none; }

.portal-inline-144 { width: 100%; justify-content: center; padding: 14px; margin-top: 15px; }

.portal-inline-145 { margin-bottom: 30px; }

.portal-inline-146 { color:#f59e0b; }