/* Fee Reminder System - Offline Design System */
:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bg-main: #0b0f19;
  --bg-card: #131b2e;
  --bg-card-hover: #1a243c;
  --bg-input: #1a233a;
  --border-color: #23304e;
  --border-highlight: #3b82f6;

  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-light: rgba(79, 70, 229, 0.15);
  
  --secondary: #0ea5e9;
  --accent: #8b5cf6;

  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.15);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.15);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.15);
  --info: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.15);

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px -1px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 28px -4px rgba(0, 0, 0, 0.5);

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* Standard Top Screen Activity & Progress Bar */
.top-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #06b6d4, #10b981);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 5px rgba(16, 185, 129, 0.6);
  z-index: 999999;
  opacity: 0;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  pointer-events: none;
}

.top-progress-bar.active {
  opacity: 1;
}

/* Layout */
.app-header {
  background-color: rgba(19, 27, 46, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.5rem;
}

.header-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: nowrap;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 0;
}

.brand-icon {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0 16px rgba(79, 70, 229, 0.4);
  flex-shrink: 0;
}

.brand-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(to right, #fff, #94a3b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-badge {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Instant Search by Student ID */
.header-search {
  flex: 1 1 auto;
  max-width: 320px;
  min-width: 140px;
  position: relative;
}

.header-right-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.lang-segmented-control {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}

.lang-btn {
  border: none;
  cursor: pointer;
  padding: 2.5px 7px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  transition: all 0.15s ease;
  white-space: nowrap;
  color: #94a3b8;
  background: transparent;
}

.lang-btn.active {
  background: #4f46e5;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(79, 70, 229, 0.5);
}

.header-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.85rem;
  transition: var(--transition-fast);
}

.search-input-wrapper:focus-within {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

.search-icon {
  color: var(--text-dim);
  width: 18px;
  height: 18px;
  margin-right: 8px;
  flex-shrink: 0;
}

.search-input {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 0.9rem;
  width: 100%;
  outline: none;
}

.search-input::placeholder {
  color: var(--text-dim);
}

.search-badge {
  font-size: 0.75rem;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Live Search Dropdown */
.search-results-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 380px;
  overflow-y: auto;
  z-index: 200;
  display: none;
}

.search-results-dropdown.active {
  display: block;
}

.search-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: var(--transition-fast);
}

.search-item:hover {
  background: var(--bg-card-hover);
}

.search-item-id {
  font-weight: 700;
  color: var(--secondary);
  font-family: monospace;
}

.search-item-name {
  font-size: 0.9rem;
  color: var(--text-main);
}

.search-item-fee {
  font-weight: 700;
  color: var(--danger);
}

/* Burger + logo + school name, kept on one line at every width. */
.header-brand-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* Menu toggle and drawer chrome.
   Hidden by default: on a wide screen the rail is part of the layout, always
   open, and neither control has anything to do. The mobile block below turns
   them on. */
.nav-burger,
.nav-drawer-close {
  display: none;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0.35rem;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.nav-burger:hover,
.nav-drawer-close:hover {
  background: rgba(255, 255, 255, 0.06);
}

.nav-backdrop {
  display: none;
}

/* Application body: navigation rail + the view it drives, side by side. */
.app-body {
  display: flex;
  align-items: stretch;
  flex: 1;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  min-height: 0;
}

/* Left navigation rail.
   The rail is its own scroll container rather than growing the page, so the
   module list can keep getting longer without pushing anything off screen -
   the reason the tabs moved off the header in the first place. It sticks below
   the header, whose height it has to clear. */
.side-nav {
  --header-height: 4.25rem;

  flex: 0 0 15rem;
  width: 15rem;
  align-self: flex-start;
  position: sticky;
  top: var(--header-height);

  /* A fixed height rather than a max: the rail should read as a full-height
     edge of the window whether it holds eight modules or thirty, instead of
     stopping wherever the last button happens to fall. */
  height: calc(100vh - var(--header-height));

  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border-right: 1px solid var(--border-color);
  background: rgba(19, 27, 46, 0.35);
}

/* Only the module list scrolls; Sign Out below it stays put. */
.side-nav .nav-tabs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.side-nav .nav-tabs::-webkit-scrollbar {
  width: 6px;
}

.side-nav .nav-tabs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

.side-nav-foot {
  flex: 0 0 auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}

/* Navigation Tabs */
.nav-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: var(--transition-fast);

  /* Full-width rows reading left to right, and long module names wrap rather
     than widen the rail or get clipped. */
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  line-height: 1.25;
}

.nav-tab-btn svg {
  flex: 0 0 auto;
}

.side-nav-foot .nav-tab-btn {
  width: 100%;
}

/* Whole-application actions in the rail foot. They keep their own colour so
   they stay distinguishable from the module list above them. */
.side-nav-foot .nav-action {
  margin-bottom: 0.25rem;
}

.nav-action-broadcast {
  background: rgba(37, 211, 102, 0.14);
  border-color: rgba(37, 211, 102, 0.35);
  color: #6ee7a8;
}

.nav-action-broadcast:hover {
  background: rgba(37, 211, 102, 0.22);
  color: #86efac;
}

.nav-action-license {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}

.nav-action-license:hover {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.nav-tab-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
}

.nav-tab-btn.active {
  background: var(--primary-light);
  color: #818cf8;
  border-color: rgba(99, 102, 241, 0.3);
}

/* Main Container */
.main-container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem;
  flex: 1;

  /* Without this a wide table or chart inside would refuse to shrink and push
     the rail off screen instead of scrolling itself. */
  min-width: 0;
}

/* Stats Cards Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.stat-card.total::before { background: var(--info); }
.stat-card.collected::before { background: var(--success); }
.stat-card.pending::before { background: var(--warning); }
.stat-card.overdue::before { background: var(--danger); }
.stat-card.reminders::before { background: var(--accent); }

.stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.stat-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  line-height: 1.2;
}

.stat-subtext {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 0.35rem;
}

/* Tab Views */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Card Container */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 0 12px rgba(79, 70, 229, 0.4);
}

.btn-secondary {
  background: var(--bg-input);
  border-color: var(--border-color);
  color: var(--text-main);
}
.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-success {
  background: var(--success);
  color: #fff;
}
.btn-success:hover {
  filter: brightness(1.1);
}

.btn-danger {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}
.btn-danger:hover {
  background: var(--danger);
  color: #fff;
}

.btn-sm {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
}

.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-sm);
}

/* Filter Controls */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.form-control {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  color: var(--text-main);
  font-size: 0.875rem;
  outline: none;
  transition: var(--transition-fast);
}

.form-control:focus {
  border-color: var(--info);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

select.form-control {
  cursor: pointer;
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Data Table */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
}

.data-table th {
  background: #0f172a;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
  white-space: nowrap;
}

.data-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-paid {
  background: var(--success-bg);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-pending {
  background: var(--warning-bg);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-overdue {
  background: var(--danger-bg);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-early {
  background: var(--info-bg);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-today {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Modals */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

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

.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 650px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  padding: 1.25rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
}

.modal-close:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.1);
}

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

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

/* Student Quick Profile Card in Modal */
.student-profile-summary {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.profile-fee-highlight {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px dashed var(--border-color);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

.fee-due-tag {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--danger);
}

.profile-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
}

.detail-label {
  color: var(--text-dim);
}

.detail-val {
  color: var(--text-main);
  font-weight: 600;
}

/* Preview Box for Messages */
.preview-box {
  background: #0f172a;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1rem;
  font-family: monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  color: #e2e8f0;
  max-height: 250px;
  overflow-y: auto;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 2000;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  animation: slideToast 0.2s ease-out;
}

@keyframes slideToast {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }
.toast.info { border-left: 4px solid var(--info); }

/* Responsive adjustments */
@media (max-width: 1350px) {
  .brand-badge-session { display: none !important; }
}

/* In mobile mode the header has room only for the school's name. */
@media (max-width: 900px) {
  .brand-badge-session { display: none !important; }

  /* A step down from the desktop 1.15rem, so the name sits beside the burger
     and logo without crowding them. !important because the size is set as an
     inline style on the element. */
  .brand-title { font-size: 1rem !important; }

  /* A long school name is truncated with an ellipsis rather than pushing the
     burger and logo off the line.
     text-overflow only fires on a box that is actually constrained, and a flex
     item defaults to min-width: auto - its content's width - so it refuses to
     shrink. Every ancestor between the row and the text therefore has to be
     told it may. .brand-section also carries an inline flex-shrink: 0, which
     is why that one needs !important. */
  /* width: 100% is what makes the ellipsis possible. .header-container carries
     an inline align-items: center, which outranks the stretch this stylesheet
     asks for at 768px, so in the stacked header its children are sized by their
     content - a long name would simply run off the line instead of being
     constrained and truncated. An explicit width resolves against the
     container instead. */
  .header-brand-row {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .header-brand-row .brand-section {
    flex: 1 1 auto !important;
    flex-shrink: 1 !important;
    min-width: 0;
  }

  /* The title's wrapper, and only it. :not(.brand-icon) matters: a bare
     > div also matches the logo plate, and flex-grow would stretch that 34px
     box across whatever width the name did not use. */
  .header-brand-row .brand-section > div:not(.brand-icon) {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* The logo keeps its own size regardless. */
  .header-brand-row .brand-icon {
    flex: 0 0 auto;
  }

  .brand-title {
    max-width: 100% !important;
    min-width: 0;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 1024px) {
  .header-search { max-width: 200px; min-width: 110px; }
  .header-action-btn span[data-i18n] { font-size: 0.74rem; }
}

@media (max-width: 768px) {
  .header-container { flex-direction: column; align-items: stretch; flex-wrap: wrap !important; gap: 0.75rem; }
  /* The brand row is the one child that stays horizontal. The title may
     shrink and ellipsise, but it never drops below the burger. */
  .header-brand-row { flex-direction: row; align-items: center; }
  .header-search { max-width: 100%; min-width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .profile-detail-grid { grid-template-columns: 1fr; }
}

/* Login Modal Overlay */
.login-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 30, 0.96);
  backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-card {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
  width: 100%;
  max-width: 400px;
  padding: 2.25rem 2rem;
  animation: modalIn 0.25s ease-out;
}

.login-brand {
  text-align: center;
  margin-bottom: 1.75rem;
}

.login-brand-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-xs {
  padding: 4px 8px;
  font-size: 0.75rem;
}

/* Identity photograph slots (student, father, mother, guardian) */
.photo-slot-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.7rem;
}

.photo-slot {
  text-align: center;
}

.photo-slot-frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 150px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
}

.photo-slot-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-slot-frame.filled {
  border-style: solid;
  border-color: rgba(52, 211, 153, 0.45);
}

.photo-slot-frame.missing-required {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(239, 68, 68, 0.07);
}

.photo-slot-empty {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.photo-slot-label {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  font-weight: 600;
}

.photo-req {
  color: #f87171;
}

.photo-slot-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 0.3rem;
}

.photo-slot-actions .btn {
  font-size: 0.68rem;
  padding: 2px 7px;
}

/* Gate Security: authorised person cards the guard matches the visitor's face against */
.gate-person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.gate-person-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.55);
  padding: 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.gate-person-card:hover {
  border-color: rgba(59, 130, 246, 0.5);
}

.gate-person-card.selected {
  border-color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35);
}

.gate-person-card.no-photo {
  border-style: dashed;
  border-color: rgba(248, 113, 113, 0.45);
}

.gate-person-card.deceased {
  opacity: 0.5;
  cursor: not-allowed;
}

.gate-person-photo {
  width: 96px;
  height: 120px;
  margin: 0 auto 0.5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(30, 41, 59, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gate-person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Component-wise fee instalment tables (rendered inside the narrower student profile modal) */
.fee-schedule-table th,
.fee-schedule-table td {
  padding: 0.4rem 0.4rem;
  font-size: 0.78rem;
}

.fee-schedule-table th:first-child,
.fee-schedule-table td:first-child {
  padding-left: 0.55rem;
}

.fee-schedule-table th:last-child,
.fee-schedule-table td:last-child {
  padding-right: 0.55rem;
}

.fee-schedule-table th {
  font-size: 0.66rem;
  letter-spacing: 0.03em;
}

/* Accordion Style Append-Only Fee Ledger */
.payment-accordion-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.55);
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: all 0.2s ease;
}

.payment-accordion-item:hover {
  border-color: rgba(59, 130, 246, 0.4);
}

.payment-accordion-item.is-correction {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.04);
}

.payment-accordion-header {
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  background: rgba(30, 41, 59, 0.4);
  transition: background 0.15s ease;
}

.payment-accordion-header:hover {
  background: rgba(59, 130, 246, 0.1);
}

.payment-accordion-header .acc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
}

.payment-accordion-header .acc-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.payment-accordion-body {
  display: none;
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 15, 30, 0.6);
  font-size: 0.84rem;
  animation: modalIn 0.18s ease-out;
}

.payment-accordion-item.open .payment-accordion-body {
  display: block;
}

.payment-accordion-item.open .acc-chevron {
  transform: rotate(180deg);
}

.acc-chevron {
  transition: transform 0.2s ease;
  color: var(--text-dim);
}

.version-pill {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: monospace;
}

.version-pill.v-original {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.version-pill.v-correction {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

/* Broadcast Composer & WhatsApp Live Preview */
.broadcast-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 820px) {
  .broadcast-grid {
    grid-template-columns: 1fr;
  }
}

.bc-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.bc-preset-chip:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93c5fd;
  transform: translateY(-1px);
}

.bc-token-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-family: monospace;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bc-token-chip:hover {
  background: rgba(16, 185, 129, 0.3);
  color: #a7f3d0;
}

.whatsapp-mockup {
  background: #0b141a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.whatsapp-mockup-header {
  background: #202c33;
  padding: 0.65rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.whatsapp-mockup-body {
  background-color: #0b141a;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 16px 16px;
  padding: 1rem 0.85rem;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.whatsapp-bubble {
  background: #005c4b;
  color: #e9edef;
  border-radius: 8px 8px 2px 8px;
  padding: 0.75rem 0.85rem 0.5rem;
  font-size: 0.83rem;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  max-width: 95%;
  align-self: flex-end;
  position: relative;
  word-break: break-word;
}

.whatsapp-bubble::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid #005c4b;
  border-top: 6px solid transparent;
}

/* RBAC Service & Object Matrix Styling */
.rbac-role-pill {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.rbac-role-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.2);
}
.rbac-role-pill.active {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #818cf8 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.45);
}
.rbac-perm-checkbox {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: #4f46e5;
  transition: transform 0.15s ease;
}
.rbac-perm-checkbox:hover {
  transform: scale(1.15);
}
.rbac-perm-checkbox:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}



/* Navigation rail: narrow screens.
   There is no room for a rail beside the content here, and the horizontal
   strip it used to become still spent a row of a short screen on navigation.
   So the whole rail - every module and the Sign Out button with them - goes
   off-canvas behind the burger, and slides over the page when asked for. */
@media (max-width: 900px) {
  .nav-burger,
  .nav-drawer-close {
    display: inline-flex;
    flex-shrink: 0;
  }

  .nav-drawer-close {
    align-self: flex-end;
    margin-bottom: 0.25rem;
  }

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

  .side-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;

    width: min(17rem, 82vw);
    height: 100%;
    max-height: none;
    padding: 0.85rem 0.75rem;
    border-right: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: 2px 0 18px rgba(0, 0, 0, 0.45);

    /* Closed by default. transform rather than display so the panel can be
       animated, and visibility so a closed drawer is not focusable. */
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s ease;
  }

  .side-nav.open {
    transform: translateX(0);
    visibility: visible;
  }

  /* The drawer sits over the page, so the page must not scroll behind it. */
  body.nav-open {
    overflow: hidden;
  }

  /* :not([hidden]) is load-bearing. A bare .nav-backdrop rule outranks the
     UA stylesheet's [hidden] { display: none }, which would leave this overlay
     permanently on top of the page - invisible enough to miss, and sitting
     above the header, so it would swallow every tap including the burger's. */
  .nav-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, 0.55);
  }
}

/* Motion is a nicety; respect a request to do without it. */
@media (prefers-reduced-motion: reduce) {
  .side-nav {
    transition: none;
  }
}