rk-theme.css , /* ============================================================================
   RK THEME SYSTEM - FORM INNARDS ONLY + ACADEMIC ALERTS DRAWER STYLES
   ============================================================================
   - ONLY targets elements INSIDE forms (your existing styles preserved)
   - PLUS Academic Alerts drawer styles at the bottom
   - Modern curved edges, neumorphism for labels/filters
   ============================================================================ */

/* ----------------------------------------------------------------------------
   SCOPE: Only apply to form containers
   All styles are scoped to elements inside forms
   -------------------------------------------------------------------------- */

/* ---------- FORM CONTAINERS ---------- */
.t-Region,
.apex-form,
form {
  /* Form container styling */
} 

/* ============================================================================
   INNER FORM TABS — Modern • Elegant • Subtle 3D
   - Soft raised inactive tabs
   - Active tab slightly elevated
   - No clipping, no scaling
   - Clean and sophisticated
   ============================================================================ */

/* Wrapper */
.t-Region .t-Tabs,
.t-Region .a-Tabs,
.apex-form .t-Tabs,
.apex-form .a-Tabs,
form .t-Tabs,
form .a-Tabs {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* UL reset */
.t-Region .t-Tabs ul,
.t-Region .a-Tabs ul,
.apex-form .t-Tabs ul,
.apex-form .a-Tabs ul,
form .t-Tabs ul,
form .a-Tabs ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Base tab (inactive) */
.t-Region .t-Tabs-link,
.t-Region .a-Tabs-link,
.apex-form .t-Tabs-link,
.apex-form .a-Tabs-link,
form .t-Tabs-link,
form .a-Tabs-link,
.t-Region li.apex-rds-item > a,
.apex-form li.apex-rds-item > a,
form li.apex-rds-item > a {

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 18px !important;
  border-radius: 14px !important;

  background: #f3f6fa !important;
  border: 1px solid #e2e8f0 !important;

  color: #1e293b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  text-decoration: none !important;

  /* subtle raised 3D */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 2px 4px rgba(209, 208, 208, 0.04),
    0 6px 12px rgba(0,0,0,0.03) !important;

  transition:
    background 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease,
    color 150ms ease !important;
}

/* Hover */
.t-Region .t-Tabs-link:hover,
.t-Region .a-Tabs-link:hover,
.apex-form .t-Tabs-link:hover,
.apex-form .a-Tabs-link:hover,
form .t-Tabs-link:hover,
form .a-Tabs-link:hover,
.t-Region li.apex-rds-item > a:hover,
.apex-form li.apex-rds-item > a:hover,
form li.apex-rds-item > a:hover {

  background: #e9eff7 !important;
  border-color: #d0d8e2 !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 4px 10px rgba(0,0,0,0.06) !important;
}

/* ACTIVE — Elegant raised primary */
.t-Region .t-Tabs-link.is-active,
.t-Region .a-Tabs-link.active,
.apex-form .t-Tabs-link.is-active,
.apex-form .a-Tabs-link.active,
form .t-Tabs-link.is-active,
form .a-Tabs-link.active,

.t-Region .t-Tabs-item.is-active > .t-Tabs-link,
.t-Region .a-Tabs-item.is-active > .a-Tabs-link,
.apex-form .t-Tabs-item.is-active > .t-Tabs-link,
.apex-form .a-Tabs-item.is-active > .a-Tabs-link,
form .t-Tabs-item.is-active > .t-Tabs-link,
form .a-Tabs-item.is-active > .a-Tabs-link,

.t-Region .t-Tabs-link[aria-selected="true"],
.t-Region .a-Tabs-link[aria-selected="true"],
.apex-form .t-Tabs-link[aria-selected="true"],
.apex-form .a-Tabs-link[aria-selected="true"],
form .t-Tabs-link[aria-selected="true"],
form .a-Tabs-link[aria-selected="true"],

.t-Region li.apex-rds-selected > a,
.apex-form li.apex-rds-selected > a,
form li.apex-rds-selected > a {

  background: #4d97e6 !important;
  border: 1px solid #1a4f90 !important;
  color: #ffffff !important;

  /* elegant lifted depth */
  box-shadow:
    0 2px 0 rgba(255,255,255,0.2) inset,
    0 6px 14px rgba(31,95,174,0.25),
    0 12px 24px rgba(0,0,0,0.08) !important;
}

/* Remove UT underline indicator */
.t-Region .t-Tabs-link::before,
.t-Region .a-Tabs-link::before,
.apex-form .t-Tabs-link::before,
.apex-form .a-Tabs-link::before,
form .t-Tabs-link::before,
form .a-Tabs-link::before {
  content: none !important;
  display: none !important;
}

/* Focus */
.t-Region .t-Tabs-link:focus-visible,
.t-Region .a-Tabs-link:focus-visible,
.apex-form .t-Tabs-link:focus-visible,
.apex-form .a-Tabs-link:focus-visible,
form .t-Tabs-link:focus-visible,
form .a-Tabs-link:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.25) !important;
}

/* Remove ANY pseudo underline/bottom bar UT sometimes adds */
.t-Region .t-Tabs-link::before,
.t-Region .a-Tabs-link::before,
.apex-form .t-Tabs-link::before,
.apex-form .a-Tabs-link::before,
form .t-Tabs-link::before,
form .a-Tabs-link::before {
  content: none !important;
  display: none !important;
}

/* Keyboard focus (nice but not noisy) */
.t-Region .t-Tabs-link:focus-visible,
.t-Region .a-Tabs-link:focus-visible,
.apex-form .t-Tabs-link:focus-visible,
.apex-form .a-Tabs-link:focus-visible,
form .t-Tabs-link:focus-visible,
form .a-Tabs-link:focus-visible {
  outline: 2px solid rgba(46, 134, 255, 0.55) !important;
  outline-offset: 2px !important;
}

/* Mobile: keep readable */
@media (max-width: 768px) {
  .t-Region .t-Tabs-link,
  .t-Region .a-Tabs-link,
  .apex-form .t-Tabs-link,
  .apex-form .a-Tabs-link,
  form .t-Tabs-link,
  form .a-Tabs-link {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}

/* Alternative color themes for different form contexts */

/* Success/Green theme for selected tabs */
form.t-success .t-Tabs-link.is-active,
form .t-success .t-Tabs-link.is-active,
.t-Region.t-success .t-Tabs-link.is-active,
.apex-form.t-success .t-Tabs-link.is-active {
  background: linear-gradient(135deg, #059669, #10b981, #059669) !important;
  background-size: 200% 200% !important;
  border-color: #047857 !important;
  box-shadow: 0 10px 20px -5px rgba(5, 150, 105, 0.5), 0 8px 10px -6px rgba(5, 150, 105, 0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* Warning/Orange theme for selected tabs */
form.t-warning .t-Tabs-link.is-active,
form .t-warning .t-Tabs-link.is-active,
.t-Region.t-warning .t-Tabs-link.is-active,
.apex-form.t-warning .t-Tabs-link.is-active {
  background: linear-gradient(135deg, #ea580c, #f97316, #ea580c) !important;
  background-size: 200% 200% !important;
  border-color: #c2410c !important;
  box-shadow: 0 10px 20px -5px rgba(234, 88, 12, 0.5), 0 8px 10px -6px rgba(234, 88, 12, 0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* Danger/Red theme for selected tabs */
form.t-danger .t-Tabs-link.is-active,
form .t-danger .t-Tabs-link.is-active,
.t-Region.t-danger .t-Tabs-link.is-active,
.apex-form.t-danger .t-Tabs-link.is-active {
  background: linear-gradient(135deg, #dc2626, #ef4444, #dc2626) !important;
  background-size: 200% 200% !important;
  border-color: #b91c1c !important;
  box-shadow: 0 10px 20px -5px rgba(220, 38, 38, 0.5), 0 8px 10px -6px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* ============================================================================
   2) MAIN PAGE LAYOUT - Clean background
   ============================================================================ */
body {
  background-color: #f9fafb !important;
}

/* ============================================================================
   3) SIDEBAR STYLING - Optional if you have a sidebar region
   ============================================================================ */
.t-Body-sidebar {
  background-color: #ffffff !important;
  border-left: 1px solid #e5e7eb !important;
}

/* ============================================================================
   4) CONTENT AREA STYLING
   ============================================================================ */
.t-Body-content {
  background-color: #f9fafb !important;
}

/* ============================================================================
   5) CARD/REGION STYLING - To match the clean look
   ============================================================================ */
.t-Region {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* ============================================================================
   6) FORM LABELS - Neumorphism Pressed Style (ONLY inside forms)
   ============================================================================ */
/*.t-Region .t-Form-label,
.t-Region label,
.apex-form .t-Form-label,
.apex-form label,
form .t-Form-label,
form label {
  display: inline-block !important;
  padding: 4px 12px !important;
  background: #eef2f6 !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #2c3e50 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.05),
    inset -3px -3px 6px rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(0,0,0,0.02) !important;
  border: none !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
  transition: all 0.2s ease !important;
  text-transform: uppercase !important;
  font-family: inherit !important;
}*/

/* Hover effect on labels - even more pressed */
.t-Region .t-Form-field:hover .t-Form-label,
.t-Region .t-Form-field:hover label,
.apex-form .t-Form-field:hover .t-Form-label,
.apex-form .t-Form-field:hover label,
form .t-Form-field:hover .t-Form-label,
form .t-Form-field:hover label {
  color: #2563eb !important;
  background: #e2e8f0 !important;
  box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.08),
    inset -4px -4px 8px rgba(255, 255, 255, 0.9) !important;
  transform: translateY(1px) !important;
}

/* Required indicator */
.t-Region .required-marker,
.apex-form .required-marker,
form .required-marker {
  color: #dc2626 !important;
  margin-left: 4px !important;
  font-size: 13px !important;
}

/* Required field label indicator */
.t-Region .t-Form-label.is-required::after,
.t-Region label.is-required::after,
.apex-form .t-Form-label.is-required::after,
.apex-form label.is-required::after,
form .t-Form-label.is-required::after,
form label.is-required::after {
  content: '*' !important;
  color: #dc2626 !important;
  margin-left: 4px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Section header labels (like "Basic Information") */
.t-Region .t-Region-title,
.apex-form .t-Region-title,
form .t-Region-title {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #1e293b !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-bottom: 16px !important;
}

/* ============================================================================
   7) FORM INPUTS - Curved Edges (ONLY inside forms)
   FIXED: Better selectors to avoid overriding login page icons
   ============================================================================ */
.t-Region input[type="text"],
.t-Region input[type="email"],
.t-Region input[type="number"],
.t-Region input[type="password"],
.t-Region input[type="search"],
.t-Region input[type="tel"],
.t-Region input[type="url"],
.t-Region select:not(.rk-filter-select):not(.rk-filter-bar .rk-filter-select),
.t-Region textarea,
.t-Region .t-Form-inputContainer input,
.t-Region .t-Form-inputContainer select,
.t-Region .t-Form-inputContainer textarea,
.t-Region .a-Combobox,
.t-Region .select2-choice,
.apex-form input[type="text"],
.apex-form input[type="email"],
.apex-form input[type="number"],
.apex-form input[type="password"],
.apex-form input[type="search"],
.apex-form input[type="tel"],
.apex-form input[type="url"],
.apex-form select:not(.rk-filter-select):not(.rk-filter-bar .rk-filter-select),
.apex-form textarea,
.apex-form .t-Form-inputContainer input,
.apex-form .t-Form-inputContainer select,
.apex-form .t-Form-inputContainer textarea,
.apex-form .a-Combobox,
.apex-form .select2-choice,
form input[type="text"],
form input[type="email"],
form input[type="number"],
form input[type="password"],
form input[type="search"],
form input[type="tel"],
form input[type="url"],
form select:not(.rk-filter-select):not(.rk-filter-bar .rk-filter-select),
form textarea,
form .t-Form-inputContainer input,
form .t-Form-inputContainer select,
form .t-Form-inputContainer textarea,
form .a-Combobox,
form .select2-choice {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #1e293b !important;
  background: #ffffff !important;
  transition: all 0.15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

.t-Region input:hover,
.t-Region select:not(.rk-filter-select):hover,
.t-Region textarea:hover,
.apex-form input:hover,
.apex-form select:not(.rk-filter-select):hover,
.apex-form textarea:hover,
form input:hover,
form select:not(.rk-filter-select):hover,
form textarea:hover {
  border-color: #94a3b8 !important;
  background: #fafdff !important;
}

.t-Region input:focus,
.t-Region select:not(.rk-filter-select):focus,
.t-Region textarea:focus,
.apex-form input:focus,
.apex-form select:not(.rk-filter-select):focus,
.apex-form textarea:focus,
form input:focus,
form select:not(.rk-filter-select):focus,
form textarea:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

/* Select dropdown arrow - now only applies to select elements within forms, excluding filter selects */
.t-Region select:not(.rk-filter-select):not(.rk-filter-bar .rk-filter-select),
.apex-form select:not(.rk-filter-select):not(.rk-filter-bar .rk-filter-select),
form select:not(.rk-filter-select):not(.rk-filter-bar .rk-filter-select) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-position: right 14px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  padding-right: 42px !important;
  appearance: none !important;
}

/* Ensure filter selects retain their native styling or custom styling without conflict */
.rk-filter-select,
.rk-filter-bar .rk-filter-select {
  appearance: auto !important;
  background-image: none !important;
  padding-right: 20px !important;
  cursor: pointer;
}

/* ============================================================================
   8) FORM BUTTONS - Modern with Shadow Offset (ONLY inside forms)
   ============================================================================ */
.t-Region .t-Button,
.t-Region button,
.apex-form .t-Button,
.apex-form button,
form .t-Button,
form button {
  position: relative !important;
  border-radius: 10px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  letter-spacing: 0.2px !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.t-Region .t-Button:hover,
.t-Region button:hover,
.apex-form .t-Button:hover,
.apex-form button:hover,
form .t-Button:hover,
form button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1) !important;
}

.t-Region .t-Button:active,
.t-Region button:active,
.apex-form .t-Button:active,
.apex-form button:active,
form .t-Button:active,
form button:active {
  transform: translateY(1px) !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Primary button (Edit Family, Save) */
.t-Region .t-Button--primary,
.apex-form .t-Button--primary,
form .t-Button--primary {
  background: #2563eb !important;
  color: white !important;
  box-shadow: 3px 3px 0 #1e40af !important;
}

.t-Region .t-Button--primary:hover,
.apex-form .t-Button--primary:hover,
form .t-Button--primary:hover {
  background: #1d4ed8 !important;
  box-shadow: 4px 4px 0 #1e40af !important;
}

/* Success button (Assign) */
.t-Region .t-Button--success,
.apex-form .t-Button--success,
form .t-Button--success {
  background: #16a34a !important;
  color: white !important;
  box-shadow: 3px 3px 0 #0f6e3f !important;
}

.t-Region .t-Button--success:hover,
.apex-form .t-Button--success:hover,
form .t-Button--success:hover {
  background: #15803d !important;
  box-shadow: 4px 4px 0 #0f6e3f !important;
}

/* Danger button (Delete, Unassign) */
.t-Region .t-Button--danger,
.apex-form .t-Button--danger,
form .t-Button--danger {
  background: #dc2626 !important;
  color: white !important;
  box-shadow: 3px 3px 0 #991b1b !important;
}

.t-Region .t-Button--danger:hover,
.apex-form .t-Button--danger:hover,
form .t-Button--danger:hover {
  background: #b91c1c !important;
  box-shadow: 4px 4px 0 #991b1b !important;
}

/* Secondary button (Cancel) */
.t-Region .t-Button--secondary,
.apex-form .t-Button--secondary,
form .t-Button--secondary {
  background: #ffffff !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 3px 3px 0 #cbd5e1 !important;
}

.t-Region .t-Button--secondary:hover,
.apex-form .t-Button--secondary:hover,
form .t-Button--secondary:hover {
  background: #f8fafc !important;
  box-shadow: 4px 4px 0 #cbd5e1 !important;
}

/* Small buttons (table actions) */
.t-Region .t-Button--small,
.apex-form .t-Button--small,
form .t-Button--small {
  padding: 4px 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1) !important;
}

.t-Region .t-Button--small:hover,
.apex-form .t-Button--small:hover,
form .t-Button--small:hover {
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================================
   9) FORM FILTER PILLS - Neumorphism Style (ONLY inside forms)
   ============================================================================ */
.t-Region .filter-pills,
.t-Region .rk-filter-pills,
.apex-form .filter-pills,
.apex-form .rk-filter-pills,
form .filter-pills,
form .rk-filter-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 16px 0 !important;
}

.t-Region .filter-pill,
.t-Region .rk-filter-pill,
.apex-form .filter-pill,
.apex-form .rk-filter-pill,
form .filter-pill,
form .rk-filter-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 16px !important;
  background: #f0f3f7 !important;
  border-radius: 30px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  border: none !important;
  box-shadow: 
    inset 2px 2px 4px rgba(255, 255, 255, 0.8),
    inset -2px -2px 4px rgba(0, 0, 0, 0.03) !important;
}

.t-Region .filter-pill:hover,
.t-Region .rk-filter-pill:hover,
.apex-form .filter-pill:hover,
.apex-form .rk-filter-pill:hover,
form .filter-pill:hover,
form .rk-filter-pill:hover {
  background: #e9eef2 !important;
}

.t-Region .filter-pill.active,
.t-Region .rk-filter-pill.active,
.apex-form .filter-pill.active,
.apex-form .rk-filter-pill.active,
form .filter-pill.active,
form .rk-filter-pill.active {
  background: #2563eb !important;
  color: white !important;
  box-shadow: 
    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
    inset -2px -2px 4px rgba(0, 0, 0, 0.1) !important;
}

.t-Region .filter-pill .count,
.t-Region .rk-filter-pill .count,
.apex-form .filter-pill .count,
.apex-form .rk-filter-pill .count,
form .filter-pill .count,
form .rk-filter-pill .count {
  margin-left: 6px !important;
  font-weight: 700 !important;
  opacity: 0.8 !important;
}

/* ============================================================================
   10) FORM TABLES - Clean Style (ONLY inside forms)
   ============================================================================ */
.t-Region .t-Report-table,
.t-Region table,
.apex-form .t-Report-table,
.apex-form table,
form .t-Report-table,
form table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  font-size: 13px !important;
}

.t-Region .t-Report-table th,
.t-Region table th,
.apex-form .t-Report-table th,
.apex-form table th,
form .t-Report-table th,
form table th {
  background: #f8fafc !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #475569 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #edf2f7 !important;
  text-align: left !important;
}

.t-Region .t-Report-table td,
.t-Region table td,
.apex-form .t-Report-table td,
.apex-form table td,
form .t-Report-table td,
form table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #edf2f7 !important;
  color: #1e293b !important;
}

.t-Region tr:hover td,
.apex-form tr:hover td,
form tr:hover td {
  background: #f8fafc !important;
}

/* ============================================================================
   ============== ACADEMIC ALERTS DRAWER STYLES (v0 Styles) ==================
   ============================================================================
   These styles ONLY apply to the Academic Alerts drawer
   ============================================================================ */

/* Root Variables for Academic Alerts */
.rk-academic-alerts-drawer {
  --rk-primary: #2563eb;
  --rk-primary-hover: #1d4ed8;
  --rk-critical: #dc2626;
  --rk-critical-light: #fee2e2;
  --rk-warning: #f59e0b;
  --rk-warning-light: #fef3c7;
  --rk-success: #10b981;
  --rk-success-light: #d1fae5;
  --rk-info: #3b82f6;
  --rk-info-light: #dbeafe;
  --rk-bg: #ffffff;
  --rk-bg-soft: #f9fafb;
  --rk-border: #e5e7eb;
  --rk-text: #111827;
  --rk-text-soft: #6b7280;
}

/* ============== Teacher Flag Section ============== */
.rk-teacher-flag-section {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.rk-flag-title {
  font-size: 15px;
  font-weight: 600;
  color: #dc2626;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.rk-flag-count {
  font-weight: 700;
  color: #111827;
  background: #ffffff;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 8px;
}

/* Duration Categories Grid */
.rk-duration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.rk-duration-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.rk-duration-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  border-color: #d1d5db;
}

.rk-duration-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.rk-duration-label.critical { color: #dc2626; }
.rk-duration-label.unacceptable { color: #f97316; }
.rk-duration-label.review { color: #eab308; }
.rk-duration-label.good { color: #10b981; }
.rk-duration-label.extended { color: #3b82f6; }

.rk-duration-value {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  display: block;
}

/* ============== Student Entry Cards ============== */
.rk-student-entries {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.rk-student-entry {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.rk-student-entry:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.rk-student-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.rk-student-avatar-small {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
}

.rk-student-name-large {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.rk-class-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.rk-class-tag {
  background: #f3f4f6;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.rk-class-tag:hover {
  background: #e5e7eb;
  transform: translateY(-1px);
}

.rk-class-tag.quran {
  background: #dbeafe;
  color: #1e40af;
  border-color: #bfdbfe;
}

.rk-class-tag.vvi {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.rk-class-time {
  font-weight: 600;
  margin-left: 4px;
  color: #6b7280;
}

/* ============== Stats Cards Enhancement ============== */
.rk-stat-value.large {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
}

.rk-stat-subtitle {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  font-weight: 400;
}

/* ============== Alert Cards Enhancement ============== */
.rk-alert-card {
  background: linear-gradient(145deg, #ffffff, #f9fafb);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
}

.rk-alert-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.15);
  border-color: #d1d5db;
}

.rk-alert-count {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============== Tab Navigation Enhancement ============== */
.rk-tab-btn {
  background: transparent;
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 9px;
  margin: 4 25px;
}

.rk-tab-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.rk-tab-btn.rk-tab-active {
  background: #538ded;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* ============== Filter Bar Enhancement ============== */
.rk-filter-select {
  border: 1px solid #e5e7eb;
  border-radius: 30px;
  padding: 8px 20px 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  background-color: white;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  min-width: 150px;
}

.rk-filter-select:hover {
  border-color: #9ca3af;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.rk-filter-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============== Legend Section Enhancement ============== */
.rk-legend-section {
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  padding: 20px 24px;
  margin-top: 24px;
}

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

.rk-legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #4b5563;
}

.rk-legend-badge {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ============== Empty State Enhancement ============== */
.rk-empty-state {
  text-align: center;
  padding: 60px 24px;
  background: #f9fafb;
  border-radius: 16px;
  color: #9ca3af;
}

.rk-empty-state svg {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* ============== Loading State Enhancement ============== */
.rk-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============== Responsive Adjustments ============== */
@media (max-width: 768px) {
  .rk-duration-grid {
    grid-template-columns: 1fr;
  }
  
  .rk-student-header {
    flex-direction: column;
    text-align: center;
  }
  
  .rk-class-tags {
    justify-content: center;
  }
  
  .rk-filter-select {
    width: 100%;
    margin-bottom: 8px;
  }
}

/* ============================================================================
   ============== LOGIN PAGE FIXES ===========================================
   ============================================================================
   These styles specifically prevent icon overrides on the login page
   ============================================================================ */

body.u-page-login,
body.t-PageBody--login,
body.signin-page {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(37, 99, 235, 0.16), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(20, 184, 166, 0.14), transparent 38%),
    linear-gradient(135deg, #f8fbff 0%, #edf4ff 48%, #f7fafc 100%) !important;
}

body.u-page-login .t-Body,
body.t-PageBody--login .t-Body,
body.signin-page .t-Body,
body.u-page-login .t-Body-main,
body.t-PageBody--login .t-Body-main,
body.signin-page .t-Body-main,
body.u-page-login .t-Body-content,
body.t-PageBody--login .t-Body-content,
body.signin-page .t-Body-content {
  background: transparent !important;
}

body.u-page-login .t-Login-container,
body.t-PageBody--login .t-Login-container,
body.signin-page .t-Login-container {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

body.u-page-login .t-Login-region,
body.t-PageBody--login .t-Login-region,
body.signin-page .t-Login-region,
body.u-page-login .t-Login,
body.t-PageBody--login .t-Login,
body.signin-page .t-Login {
  width: min(430px, calc(100vw - 32px)) !important;
}

body.u-page-login .t-Login-region,
body.t-PageBody--login .t-Login-region,
body.signin-page .t-Login-region {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(203, 213, 225, 0.82) !important;
  border-radius: 22px !important;
  box-shadow:
    0 28px 56px -28px rgba(15, 23, 42, 0.34),
    0 10px 28px -18px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  overflow: hidden !important;
}

body.u-page-login .t-Login-header,
body.t-PageBody--login .t-Login-header,
body.signin-page .t-Login-header {
  padding-top: 28px !important;
}

body.u-page-login .t-Login-title,
body.t-PageBody--login .t-Login-title,
body.signin-page .t-Login-title {
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* Reset any conflicting styles for login page form elements */
.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="email"],
.login-form input[type="number"],
.login-form input[type="search"],
.login-form input[type="tel"],
.login-form input[type="url"],
.login-form select,
.login-form textarea,
form:not(.apex-form):not(.t-Region form) input[type="text"],
form:not(.apex-form):not(.t-Region form) input[type="password"],
form:not(.apex-form):not(.t-Region form) input[type="email"],
form:not(.apex-form):not(.t-Region form) input[type="number"],
form:not(.apex-form):not(.t-Region form) select,
form:not(.apex-form):not(.t-Region form) textarea {
  /* Ensure login page inputs don't get conflicting styles */
  background-image: none !important;
  padding-right: 16px !important;
}

/* Preserve APEX login page icon containers */
.t-Login-Form .t-Form-inputContainer .t-Icon,
.t-Login-Form .t-Form-inputContainer .apex-item-icon.fa-user,
.t-Login-Form .t-Form-inputContainer .apex-item-icon.fa-key {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  color: #64748b !important;
  pointer-events: none !important;
}

.t-Login-Form .t-Form-inputContainer .apex-item-icon.fa-eye,
.t-Login-Form .t-Form-inputContainer .apex-item-icon.fa-eye-slash {
  left: auto !important;
  right: 14px !important;
  width: 20px !important;
  height: 20px !important;
}

/* Ensure login page input wrappers don't break */
.t-Login-Form .t-Form-inputContainer {
  position: relative !important;
  display: block !important;
}

/* Make sure login page icons are visible and properly positioned */
.t-Login-Form .t-Form-inputContainer .fa,
.t-Login-Form .t-Form-inputContainer .fas,
.t-Login-Form .t-Form-inputContainer .far {
  position: static !important;
  transform: none !important;
  color: inherit !important;
  font-size: 16px !important;
  pointer-events: none !important;
}

body.u-page-login .t-Login-region .t-Form-itemWrapper,
body.t-PageBody--login .t-Login-region .t-Form-itemWrapper,
body.signin-page .t-Login-region .t-Form-itemWrapper,
.t-Login-region .t-Form-itemWrapper {
  position: relative !important;
}

body.u-page-login .t-Login-region .apex-item-group--password,
body.t-PageBody--login .t-Login-region .apex-item-group--password,
body.signin-page .t-Login-region .apex-item-group--password,
.t-Login-region .apex-item-group--password {
  position: relative !important;
  display: block !important;
}

body.u-page-login .t-Login-region input.apex-item-has-icon,
body.t-PageBody--login .t-Login-region input.apex-item-has-icon,
body.signin-page .t-Login-region input.apex-item-has-icon,
.t-Login-region input.apex-item-has-icon {
  min-height: 48px !important;
  padding-left: 50px !important;
}

body.u-page-login .t-Login-region input.apex-item-password,
body.t-PageBody--login .t-Login-region input.apex-item-password,
body.signin-page .t-Login-region input.apex-item-password,
.t-Login-region input.apex-item-password {
  padding-right: 50px !important;
}

body.u-page-login .t-Login-region .apex-item-icon.fa-user,
body.u-page-login .t-Login-region .apex-item-icon.fa-key,
body.t-PageBody--login .t-Login-region .apex-item-icon.fa-user,
body.t-PageBody--login .t-Login-region .apex-item-icon.fa-key,
body.signin-page .t-Login-region .apex-item-icon.fa-user,
body.signin-page .t-Login-region .apex-item-icon.fa-key,
.t-Login-region .apex-item-icon.fa-user,
.t-Login-region .apex-item-icon.fa-key {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 4 !important;
  color: #64748b !important;
  pointer-events: none !important;
}

body.u-page-login .t-Login-region .t-Button--passwordVisibility,
body.t-PageBody--login .t-Login-region .t-Button--passwordVisibility,
body.signin-page .t-Login-region .t-Button--passwordVisibility,
.t-Login-region .t-Button--passwordVisibility {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.u-page-login .t-Login-region .t-Button--passwordVisibility .apex-item-icon,
body.t-PageBody--login .t-Login-region .t-Button--passwordVisibility .apex-item-icon,
body.signin-page .t-Login-region .t-Button--passwordVisibility .apex-item-icon,
.t-Login-region .t-Button--passwordVisibility .apex-item-icon {
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  color: #64748b !important;
}

/* Adjust login input padding to accommodate icons */
.t-Login-Form input[type="text"],
.t-Login-Form input[type="password"],
.t-Login-Form input[type="email"] {
  min-height: 48px !important;
  padding: 0 16px 0 50px !important;
  background: #f8fafc !important;
  border: 1px solid #dbe4ef !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(15, 23, 42, 0.03) !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease !important;
}

.t-Login-Form input[type="password"] {
  padding-right: 46px !important;
}

.t-Login-Form input[type="text"]:focus,
.t-Login-Form input[type="password"]:focus,
.t-Login-Form input[type="email"]:focus {
  background: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.12),
    0 8px 18px -14px rgba(37, 99, 235, 0.55) !important;
}

.t-Login-Form .t-Form-label {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

/* Ensure login page buttons retain default styling */
.t-Login-Form .t-Button {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 16px 28px -16px rgba(37, 99, 235, 0.72) !important;
  transform: none !important;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease !important;
}

.t-Login-Form .t-Button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
  box-shadow: 0 20px 34px -18px rgba(37, 99, 235, 0.8) !important;
}

.t-Login-Form .t-Button:active {
  transform: translateY(0) !important;
}

body.u-page-login .t-Login-footer,
body.t-PageBody--login .t-Login-footer,
body.signin-page .t-Login-footer {
  color: #64748b !important;
}

/* ============================================================================
   ============== GENERAL UI REFINEMENTS =====================================
   ============================================================================ */

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

/* Better focus indicators for accessibility */
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Improved card hover effects for interactive elements */
.t-Region:hover,
.card:hover,
.rk-card:hover {
  transition: all 0.2s ease-in-out;
}

/* Subtle loading animation for async operations */
.rk-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.rk-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Better notification styling */
.rk-notification {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
}

.rk-notification-success {
  background: #10b981;
  color: white;
}

.rk-notification-error {
  background: #ef4444;
  color: white;
}

.rk-notification-warning {
  background: #f59e0b;
  color: white;
}

.rk-notification-info {
  background: #3b82f6;
  color: white;
}

*/

*/

/* ==== BEGIN LOCKED UNIVERSAL CHROME (permanent — survives css_file_urls restores) ==== */
/* Source: frontend/css/rk-universal-chrome.css — do not delete this block */
/* rk-universal-chrome.css
   v=uchrome6 2026-07-28
   Filter light-blue theme: app buttons + list ID links + separated 3D table rows + dark-green CTA pills.
   Tabs owned by rk-modern-tabs.css (ribbon). EXCLUDES dashboard page-1.
   Reverse: git reset --hard backup-pre-universal-filter-theme-20260728
*/

/* ---- CSS variables (APEX UT) ---- */
html body:not(.page-1) {
  --a-button-background-color: #e0f0fe !important;
  --a-button-hover-background-color: #d2e9fd !important;
  --a-button-active-background-color: #c5e2fb !important;
  --a-button-border-color: #9ecff2 !important;
  --a-button-text-color: #183746 !important;
  --a-button-shadow: none !important;
}

/* ---- Soft light-blue 3D buttons (incl. hot/primary — same as All/Initial/Trial filters) ---- */
html body:not(.page-1) .t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873),
html body:not(.page-1) a.t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873),
html body:not(.page-1) button.t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873),
html body:not(.page-1) .t-Region .t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873),
html body:not(.page-1) .apex-form .t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873),
html body:not(.page-1) form .t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873),
html body:not(.page-1) .t-ButtonRegion .t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873),
html body:not(.page-1) .a-IRR .t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873),
html body:not(.page-1) .t-Body-buttons .t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873) {
  --a-button-background-color: #e0f0fe !important;
  --a-button-hover-background-color: #d2e9fd !important;
  --a-button-border-color: #9ecff2 !important;
  --a-button-text-color: #183746 !important;
  --a-button-shadow: none !important;
  color: #183746 !important;
  -webkit-text-fill-color: #183746 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e0f0fe 55%, #d2e9fd 100%) !important;
  background-color: #e0f0fe !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #e0f0fe 55%, #d2e9fd 100%) !important;
  border: 1px solid #9ecff2 !important;
  border-top-color: #c5e4fa !important;
  border-bottom-color: #5aa8de !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -2px 0 rgba(90, 168, 222, 0.28),
    0 1px 0 rgba(15, 23, 42, 0.05),
    0 2px 4px rgba(15, 23, 42, 0.12),
    0 3px 0 #5aa8de !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

html body:not(.page-1) .t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873):hover,
html body:not(.page-1) a.t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873):hover,
html body:not(.page-1) button.t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873):hover,
html body:not(.page-1) .t-Region .t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873):hover,
html body:not(.page-1) .apex-form .t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873):hover,
html body:not(.page-1) form .t-Button:not(.t-Button--danger):not(.t-Button--success):not(.t-Button--warning):not(.ikb-custom-button):not(.addstd_button):not(.familyform-button):not(#addbtn):not(#B65785504288074664):not(#B70623746062419531):not(#B162039964930430235):not(#B62271361835100750):not(#B96417487282370775):not(#B72225976718274873):hover {
  background: linear-gradient(180deg, #ffffff 0%, #d2e9fd 55%, #c5e2fb 100%) !important;
  background-color: #d2e9fd !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #d2e9fd 55%, #c5e2fb 100%) !important;
  border-color: #7eb8e8 !important;
  border-top-color: #b8daf5 !important;
  border-bottom-color: #4a97d0 !important;
  color: #183746 !important;
  -webkit-text-fill-color: #183746 !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -2px 0 rgba(74, 151, 208, 0.3),
    0 2px 0 rgba(15, 23, 42, 0.05),
    0 3px 6px rgba(15, 23, 42, 0.14),
    0 4px 0 #4a97d0 !important;
}

/* ---- Danger / success keep meaning, same 3D language ---- */
html body:not(.page-1) .t-Button.t-Button--success,
html body:not(.page-1) .t-Region .t-Button.t-Button--success {
  border: 1px solid #4ade80 !important;
  border-top-color: #86efac !important;
  border-bottom-color: #15803d !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(15, 23, 42, 0.12),
    0 3px 0 #15803d !important;
}

html body:not(.page-1) .t-Button.t-Button--danger,
html body:not(.page-1) .t-Region .t-Button.t-Button--danger {
  border: 1px solid #f87171 !important;
  border-top-color: #fca5a5 !important;
  border-bottom-color: #991b1b !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(15, 23, 42, 0.12),
    0 3px 0 #991b1b !important;
}

/* ---- Tabs: owned by rk-modern-tabs.css (ribbon style). Do not restyle here. ---- */

/* ============================================================
   LIST ID LINK-BUTTONS
   Families FAMILY_ID, Employees EMPLOYEE_ID, and similar IR ID links
   (left-column IDs). Does not restyle action/javascript links.
   ============================================================ */
html body:not(.page-1) .a-IRR-table td[headers="FAMILY_ID"] a,
html body:not(.page-1) .a-IRR-table td[headers="EMPLOYEE_ID"] a,
html body:not(.page-1) .a-IRR-table td[headers="STUDENTS_ID"] a,
html body:not(.page-1) .a-IRR-table td[headers="STUDENT_ID"] a,
html body:not(.page-1) .a-IRR-table td[headers="ID"] a,
html body:not(.page-1) .a-IRR-table td[headers="REMINDER_ID"] a,
html body:not(.page-1) .a-IRR-table td[headers="EMAIL_ID"] a,
html body:not(.page-1) .t-Report-report td[headers="FAMILY_ID"] a,
html body:not(.page-1) .t-Report-report td[headers="EMPLOYEE_ID"] a,
html body:not(.page-1) .t-Report-report td[headers="ID"] a,
html body:not(.page-1) .a-GV-cell[data-header="FAMILY_ID"] a,
html body:not(.page-1) .a-GV-cell[data-header="EMPLOYEE_ID"] a,
html body:not(.page-1) .a-GV-cell[data-header="ID"] a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 28px !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  border: 1px solid #9ecff2 !important;
  border-top-color: #c5e4fa !important;
  border-bottom-color: #5aa8de !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #ffffff 0%, #e0f0fe 55%, #d2e9fd 100%) !important;
  background-color: #e0f0fe !important;
  color: #183746 !important;
  -webkit-text-fill-color: #183746 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(90, 168, 222, 0.22),
    0 1px 2px rgba(15, 23, 42, 0.10),
    0 2px 0 #5aa8de !important;
  white-space: nowrap !important;
}

html body:not(.page-1) .a-IRR-table td[headers="FAMILY_ID"] a:hover,
html body:not(.page-1) .a-IRR-table td[headers="EMPLOYEE_ID"] a:hover,
html body:not(.page-1) .a-IRR-table td[headers="STUDENTS_ID"] a:hover,
html body:not(.page-1) .a-IRR-table td[headers="STUDENT_ID"] a:hover,
html body:not(.page-1) .a-IRR-table td[headers="ID"] a:hover,
html body:not(.page-1) .a-IRR-table td[headers="REMINDER_ID"] a:hover,
html body:not(.page-1) .a-IRR-table td[headers="EMAIL_ID"] a:hover,
html body:not(.page-1) .t-Report-report td[headers="FAMILY_ID"] a:hover,
html body:not(.page-1) .t-Report-report td[headers="EMPLOYEE_ID"] a:hover,
html body:not(.page-1) .t-Report-report td[headers="ID"] a:hover,
html body:not(.page-1) .a-GV-cell[data-header="FAMILY_ID"] a:hover,
html body:not(.page-1) .a-GV-cell[data-header="EMPLOYEE_ID"] a:hover,
html body:not(.page-1) .a-GV-cell[data-header="ID"] a:hover {
  background: linear-gradient(180deg, #ffffff 0%, #d2e9fd 55%, #c5e2fb 100%) !important;
  border-color: #7eb8e8 !important;
  border-top-color: #b8daf5 !important;
  border-bottom-color: #4a97d0 !important;
  color: #183746 !important;
  -webkit-text-fill-color: #183746 !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 4px rgba(15, 23, 42, 0.12),
    0 3px 0 #4a97d0 !important;
}

html body:not(.page-1) .a-IRR-table td[headers="FAMILY_ID"] a b,
html body:not(.page-1) .a-IRR-table td[headers="EMPLOYEE_ID"] a b,
html body:not(.page-1) .a-IRR-table td[headers="ID"] a b,
html body:not(.page-1) .t-Report-report td[headers="FAMILY_ID"] a b,
html body:not(.page-1) .t-Report-report td[headers="EMPLOYEE_ID"] a b {
  font-weight: 600 !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* ============================================================
   UNIVERSAL TABLE ROWS — modern separated 3D outer frame
   Applies to all IR / classic reports (NOT dashboard page-1).
   ============================================================ */
html body:not(.page-1) .a-IRR-content,
html body:not(.page-1) .a-IRR-tableContainer,
html body:not(.page-1) .t-Report-wrap,
html body:not(.page-1) .t-Report-tableWrap {
  background: transparent !important;
}

html body:not(.page-1) table.a-IRR-table,
html body:not(.page-1) .a-IRR-table,
html body:not(.page-1) table.t-Report-report,
html body:not(.page-1) .t-Report-report,
html body:not(.page-1) table.a-GV-table,
html body:not(.page-1) .a-GV-table {
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

html body:not(.page-1) .a-IRR-table > thead > tr > th,
html body:not(.page-1) .a-IRR-table > thead > tr > td,
html body:not(.page-1) .t-Report-report > thead > tr > th,
html body:not(.page-1) .t-Report-report > thead > tr > td,
html body:not(.page-1) .a-GV-table > thead > tr > th {
  border: none !important;
  border-bottom: 2px solid #9ecff2 !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

html body:not(.page-1) .a-IRR-table > tbody > tr,
html body:not(.page-1) .t-Report-report > tbody > tr,
html body:not(.page-1) .a-GV-table > tbody > tr {
  background: transparent !important;
  background-color: transparent !important;
}

html body:not(.page-1) .a-IRR-table > tbody > tr > td,
html body:not(.page-1) .t-Report-report > tbody > tr > td,
html body:not(.page-1) .a-GV-table > tbody > tr > td,
html body:not(.page-1) .a-IRR-table tbody tr td,
html body:not(.page-1) .t-Report-report tbody tr td {
  border-top: 1px solid #9ecff2 !important;
  border-bottom: 1px solid #5aa8de !important;
  border-left: 0 none transparent !important;
  border-right: 0 none transparent !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f7fbfe 100%) !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 0 #5aa8de,
    0 5px 10px rgba(15, 23, 42, 0.10) !important;
  vertical-align: middle !important;
}

html body:not(.page-1) .a-IRR-table > tbody > tr > td:first-child,
html body:not(.page-1) .t-Report-report > tbody > tr > td:first-child,
html body:not(.page-1) .a-GV-table > tbody > tr > td:first-child,
html body:not(.page-1) .a-IRR-table tbody tr td:first-child,
html body:not(.page-1) .t-Report-report tbody tr td:first-child {
  border-left: 1px solid #9ecff2 !important;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

html body:not(.page-1) .a-IRR-table > tbody > tr > td:last-child,
html body:not(.page-1) .t-Report-report > tbody > tr > td:last-child,
html body:not(.page-1) .a-GV-table > tbody > tr > td:last-child,
html body:not(.page-1) .a-IRR-table tbody tr td:last-child,
html body:not(.page-1) .t-Report-report tbody tr td:last-child {
  border-right: 1px solid #9ecff2 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

html body:not(.page-1) .a-IRR-table > tbody > tr:hover > td,
html body:not(.page-1) .t-Report-report > tbody > tr:hover > td,
html body:not(.page-1) .a-IRR-table tbody tr:hover td,
html body:not(.page-1) .t-Report-report tbody tr:hover td {
  background-image: linear-gradient(180deg, #ffffff 0%, #eaf5fd 100%) !important;
  border-top-color: #7eb8e8 !important;
  border-bottom-color: #4a97d0 !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 0 #4a97d0,
    0 7px 14px rgba(15, 23, 42, 0.12) !important;
}

html body:not(.page-1) .a-IRR-table > tbody > tr:hover > td:first-child,
html body:not(.page-1) .a-IRR-table tbody tr:hover td:first-child,
html body:not(.page-1) .t-Report-report tbody tr:hover td:first-child {
  border-left-color: #7eb8e8 !important;
}

html body:not(.page-1) .a-IRR-table > tbody > tr:hover > td:last-child,
html body:not(.page-1) .a-IRR-table tbody tr:hover td:last-child,
html body:not(.page-1) .t-Report-report tbody tr:hover td:last-child {
  border-right-color: #7eb8e8 !important;
}

/* kill theme cell grid lines that break the card frame */
html body:not(.page-1) .a-IRR-table tbody tr td[class*="u-t"],
html body:not(.page-1) .t-Report-report tbody tr td[class*="u-t"] {
  border-left-width: 0 !important;
  border-right-width: 0 !important;
}

html body:not(.page-1) .a-IRR-table tbody tr td:first-child[class*="u-t"],
html body:not(.page-1) .t-Report-report tbody tr td:first-child[class*="u-t"] {
  border-left: 1px solid #9ecff2 !important;
}

html body:not(.page-1) .a-IRR-table tbody tr td:last-child[class*="u-t"],
html body:not(.page-1) .t-Report-report tbody tr td:last-child[class*="u-t"] {
  border-right: 1px solid #9ecff2 !important;
}
/* ============================================================
   DARK-GREEN GLOSSY CTA PILLS
   New Lead / Add New / Add Transaction / similar create CTAs
   ============================================================ */
html body:not(.page-1) .t-Button.ikb-custom-button,
html body:not(.page-1) a.t-Button.ikb-custom-button,
html body:not(.page-1) button.t-Button.ikb-custom-button,
html body:not(.page-1) .t-Button.addstd_button,
html body:not(.page-1) .t-Button.familyform-button,
html body:not(.page-1) #addbtn,
html body:not(.page-1) a#addbtn,
html body:not(.page-1) button#addbtn,
html body:not(.page-1) #B65785504288074664,
html body:not(.page-1) #B70623746062419531,
html body:not(.page-1) #B162039964930430235,
html body:not(.page-1) #B62271361835100750,
html body:not(.page-1) #B96417487282370775,
html body:not(.page-1) #B72225976718274873,
html body:not(.page-1) .t-Region #B65785504288074664,
html body:not(.page-1) .t-ButtonRegion #B65785504288074664 {
  --a-button-background-color: #0f766e !important;
  --a-button-hover-background-color: #0d9488 !important;
  --a-button-active-background-color: #115e59 !important;
  --a-button-border-color: #134e4a !important;
  --a-button-text-color: #ffffff !important;
  --a-button-shadow: none !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 10px 28px !important;
  border: 2px solid #0f766e !important;
  border-top-color: #5eead4 !important;
  border-bottom-color: #042f2e !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: 0 1px 1px rgba(2, 44, 34, 0.45) !important;
  background-color: #0f766e !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 30% 18%, rgba(255, 255, 255, 0.35) 0%, transparent 55%),
    linear-gradient(180deg, #2dd4bf 0%, #0f766e 48%, #064e3b 100%) !important;
  box-shadow:
    0 8px 18px rgba(6, 78, 59, 0.45),
    0 3px 0 #042f2e,
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 0 rgba(2, 44, 34, 0.35) !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  transform: none !important;
  overflow: visible !important;
}

html body:not(.page-1) .t-Button.ikb-custom-button .t-Button-label,
html body:not(.page-1) .t-Button.addstd_button .t-Button-label,
html body:not(.page-1) .t-Button.familyform-button .t-Button-label,
html body:not(.page-1) #addbtn .t-Button-label,
html body:not(.page-1) #B65785504288074664 .t-Button-label,
html body:not(.page-1) #B70623746062419531 .t-Button-label,
html body:not(.page-1) #B162039964930430235 .t-Button-label,
html body:not(.page-1) #B62271361835100750 .t-Button-label,
html body:not(.page-1) #B96417487282370775 .t-Button-label,
html body:not(.page-1) #B72225976718274873 .t-Button-label,
html body:not(.page-1) .t-Button.ikb-custom-button .t-Button-label b,
html body:not(.page-1) #B65785504288074664 .t-Button-label b {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 1px rgba(2, 44, 34, 0.45) !important;
}

html body:not(.page-1) .t-Button.ikb-custom-button .t-Button-label::before,
html body:not(.page-1) .t-Button.addstd_button .t-Button-label::before,
html body:not(.page-1) .t-Button.familyform-button .t-Button-label::before,
html body:not(.page-1) #addbtn .t-Button-label::before,
html body:not(.page-1) #B65785504288074664 .t-Button-label::before,
html body:not(.page-1) #B70623746062419531 .t-Button-label::before,
html body:not(.page-1) #B162039964930430235 .t-Button-label::before,
html body:not(.page-1) #B62271361835100750 .t-Button-label::before,
html body:not(.page-1) #B96417487282370775 .t-Button-label::before,
html body:not(.page-1) #B72225976718274873 .t-Button-label::before {
  content: "\203A" !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  opacity: 0.95 !important;
}

html body:not(.page-1) .t-Button.ikb-custom-button .t-Button-label::after,
html body:not(.page-1) .t-Button.addstd_button .t-Button-label::after,
html body:not(.page-1) .t-Button.familyform-button .t-Button-label::after,
html body:not(.page-1) #addbtn .t-Button-label::after,
html body:not(.page-1) #B65785504288074664 .t-Button-label::after,
html body:not(.page-1) #B70623746062419531 .t-Button-label::after,
html body:not(.page-1) #B162039964930430235 .t-Button-label::after,
html body:not(.page-1) #B62271361835100750 .t-Button-label::after,
html body:not(.page-1) #B96417487282370775 .t-Button-label::after,
html body:not(.page-1) #B72225976718274873 .t-Button-label::after {
  content: "\2039" !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  opacity: 0.95 !important;
}

html body:not(.page-1) .t-Button.ikb-custom-button:hover,
html body:not(.page-1) .t-Button.addstd_button:hover,
html body:not(.page-1) .t-Button.familyform-button:hover,
html body:not(.page-1) #addbtn:hover,
html body:not(.page-1) #B65785504288074664:hover,
html body:not(.page-1) #B70623746062419531:hover,
html body:not(.page-1) #B162039964930430235:hover,
html body:not(.page-1) #B62271361835100750:hover,
html body:not(.page-1) #B96417487282370775:hover,
html body:not(.page-1) #B72225976718274873:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 30% 18%, rgba(255, 255, 255, 0.42) 0%, transparent 55%),
    linear-gradient(180deg, #5eead4 0%, #14b8a6 45%, #0f766e 100%) !important;
  border-top-color: #99f6e4 !important;
  border-bottom-color: #042f2e !important;
  box-shadow:
    0 10px 22px rgba(6, 78, 59, 0.5),
    0 4px 0 #042f2e,
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 0 rgba(2, 44, 34, 0.3) !important;
  transform: translateY(-1px) !important;
}
/* ==== END LOCKED UNIVERSAL CHROME ==== */

/* ==== BEGIN LOCKED MODERN TABS (permanent — gloss light-blue pills) ==== */
/* Source: frontend/css/rk-modern-tabs.css — do not delete this block */
/* rk-modern-tabs.css
   v=tabsmodern_20260728_gloss
   Glossy light-blue 3D pill tabs (single color) with soft colored shadow.
   Dashboard page-1 excluded — rk-tab / v0-tab unchanged. */

/* ========== TAB RAIL ========== */
html body:not(.page-1) .t-Tabs,
html body:not(.page-1) .a-Tabs,
html body:not(.page-1) .apex-rds,
html body:not(.page-1) .apex-rds-container .apex-rds,
html body:not(.page-1) .t-Region .t-Tabs,
html body:not(.page-1) .t-Region .a-Tabs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 8px 6px !important;
  margin-bottom: 14px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  list-style: none !important;
}

html body:not(.page-1) .t-Tabs-item,
html body:not(.page-1) .a-Tabs-item,
html body:not(.page-1) .apex-rds-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: none !important;
}

/* ========== GLOSSY LIGHT-BLUE PILL ========== */
html body:not(.page-1) .t-Tabs-link,
html body:not(.page-1) .a-Tabs-link,
html body:not(.page-1) .apex-rds a,
html body:not(.page-1) .apex-rds .apex-rds-item a,
html body:not(.page-1) .t-Region .t-Tabs-link,
html body:not(.page-1) .t-Region .a-Tabs-link,
html body:not(.page-1) li.apex-rds-item > a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 8px 20px !important;
  margin: 0 !important;
  border: 1px solid #5eb8ea !important;
  border-top-color: #9fd8f5 !important;
  border-bottom-color: #2f8fc4 !important;
  border-radius: 999px !important;
  clip-path: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 1px rgba(15, 74, 120, 0.35) !important;
  /* light blue body */
  background:
    radial-gradient(ellipse 70% 55% at 28% 22%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.12) 45%, transparent 70%),
    linear-gradient(180deg, #7ec8f0 0%, #4aafe0 48%, #2f96cc 100%) !important;
  background-color: #4aafe0 !important;
  box-shadow:
    0 6px 16px rgba(47, 150, 204, 0.42),
    0 2px 4px rgba(47, 150, 204, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(20, 90, 140, 0.22) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, opacity 0.15s ease !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* soft top gloss flare (extra specular) */
html body:not(.page-1) .t-Tabs-link::before,
html body:not(.page-1) .a-Tabs-link::before,
html body:not(.page-1) .apex-rds a::before,
html body:not(.page-1) .t-Region .t-Tabs-link::before,
html body:not(.page-1) li.apex-rds-item > a::before {
  content: "" !important;
  position: absolute !important;
  left: 10% !important;
  right: 28% !important;
  top: 3px !important;
  height: 42% !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 70%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html body:not(.page-1) .t-Tabs-link::after,
html body:not(.page-1) .a-Tabs-link::after,
html body:not(.page-1) .apex-rds a::after,
html body:not(.page-1) .t-Region .t-Tabs-link::after,
html body:not(.page-1) li.apex-rds-item > a::after {
  content: none !important;
  display: none !important;
}

/* Inactive — same light blue, slightly dimmer + softer shadow */
html body:not(.page-1) .t-Tabs-item:not(.is-active):not(.a-Tabs-selected) .t-Tabs-link,
html body:not(.page-1) .a-Tabs-item:not(.is-active):not(.a-Tabs-selected) .a-Tabs-link,
html body:not(.page-1) .apex-rds-item:not(.apex-rds-selected) > a {
  filter: brightness(0.96) saturate(0.92) !important;
  opacity: 0.82 !important;
  box-shadow:
    0 4px 10px rgba(47, 150, 204, 0.28),
    0 1px 2px rgba(47, 150, 204, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(20, 90, 140, 0.16) !important;
  transform: translateY(0) !important;
}

/* Active — brighter gloss + stronger light-blue glow shadow */
html body:not(.page-1) .t-Tabs-item.is-active .t-Tabs-link,
html body:not(.page-1) .t-Tabs-item.a-Tabs-selected .t-Tabs-link,
html body:not(.page-1) .a-Tabs-item.is-active .a-Tabs-link,
html body:not(.page-1) .a-Tabs-item.a-Tabs-selected .a-Tabs-link,
html body:not(.page-1) .apex-rds-item.apex-rds-selected > a,
html body:not(.page-1) .apex-rds .apex-rds-selected a,
html body:not(.page-1) .apex-rds a.is-active {
  filter: none !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  background:
    radial-gradient(ellipse 70% 55% at 28% 22%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.16) 45%, transparent 70%),
    linear-gradient(180deg, #8fd0f5 0%, #4eb3e4 46%, #2a8ec6 100%) !important;
  background-color: #4eb3e4 !important;
  box-shadow:
    0 8px 20px rgba(47, 150, 204, 0.55),
    0 3px 6px rgba(47, 150, 204, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(20, 90, 140, 0.24) !important;
}

html body:not(.page-1) .t-Tabs-link:hover,
html body:not(.page-1) .a-Tabs-link:hover,
html body:not(.page-1) .apex-rds a:hover,
html body:not(.page-1) .t-Region .t-Tabs-link:hover,
html body:not(.page-1) li.apex-rds-item > a:hover {
  filter: none !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  box-shadow:
    0 8px 18px rgba(47, 150, 204, 0.48),
    0 3px 6px rgba(47, 150, 204, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 0 rgba(20, 90, 140, 0.22) !important;
}

html body:not(.page-1) .t-Tabs-link:focus,
html body:not(.page-1) .a-Tabs-link:focus,
html body:not(.page-1) .apex-rds a:focus {
  outline: none !important;
  box-shadow:
    0 8px 20px rgba(47, 150, 204, 0.5),
    0 0 0 3px rgba(158, 207, 242, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* ========== DASHBOARD custom tabs — leave previous look (page-1 only) ========== */
body.page-1 .rk-tab,
body.page-1 .v0-tab {
  border: 1px solid #dbe4ef !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  background-color: #f8fafc !important;
  color: #334155 !important;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08) !important;
  text-shadow: none !important;
  clip-path: none !important;
  text-transform: none !important;
}

body.page-1 .rk-tab.is-active,
body.page-1 .rk-tab.active,
body.page-1 .v0-tab.is-active,
body.page-1 .v0-tab.active {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.14) !important;
  transform: translateY(-1px) !important;
}

body.page-1 .rk-tab:hover,
body.page-1 .v0-tab:hover {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
}
/* ==== END LOCKED MODERN TABS ==== */