/* ═══════════════════════════════════════════════════════════════
   Öğrenci Takip Sistemi — styles.css
   Font: Inclusive Sans (CDN)
   Light palette: F9F8F6, EFE9E3, D9CFC7, C9B59C
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.cdnfonts.com/css/inclusive-sans');
@import url('styles/commandPalette.css');

@import url('styles/_variables.css');
@import url('styles/_base.css');
@import url('styles/_layout.css');
@import url('styles/_components.css');
@import url('styles/_utilities.css');
@import url('styles/_features.css');
@import url('styles/_branding.css');
@import url('styles/exam-results.css');

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

/* ─── CSS Variables ───────────────────────────────────────────── */
:root {
  /* Brand — refined for light theme */
  --accent: #2c3e8c;
  /* deeper blue that complements warm beige */
  --accent-hover: #1e2f6b;
  --accent-light: #e9edf5;
  /* soft light blue background */
  --accent-subtle: rgba(44, 62, 140, 0.08);
  --primary-color: var(--accent);
  --primary: var(--accent);

  /* Semantic — softer, warm-tinted for light mode */
  --success-color: #2c6e2c;
  --success-bg: #eef5e8;
  --danger-color: #b13b3b;
  --danger-bg: #fcebea;
  --warning-color: #b1621a;
  --warning-bg: #fef3e0;
  --info-color: #2c7a7a;
  --info-bg: #e3f0f0;

  /* Layout — Light (new palette) */
  --background: #f7f3eb;
  /* warmer cream */
  --surface: #efe7dc;
  /* more saturated cream */
  --secondary-bg: #d9c8b3;
  /* warm tan */
  --card-bg: #f3ede4;
  /* soft cream */
  --hover-bg: #e3d4c1;
  /* subtle variant for hover states */

  /* Text — Light */
  --text-primary: #2c2520;
  /* warm dark */
  --text-secondary: #5a4f42;
  --text-tertiary: #8a7c6a;

  /* Border */
  --border-color: #c8b393;
  /* warm earth */
  --border-strong: #b59a7a;

  /* Shadows — slightly warmer */
  --shadow-xs: 0 1px 2px rgba(44, 40, 36, 0.04);
  --shadow-sm: 0 1px 3px rgba(44, 40, 36, 0.08), 0 1px 2px rgba(44, 40, 36, 0.04);
  --shadow-md: 0 4px 6px rgba(44, 40, 36, 0.06), 0 2px 4px rgba(44, 40, 36, 0.04);
  --shadow-lg: 0 10px 24px rgba(44, 40, 36, 0.08), 0 4px 8px rgba(44, 40, 36, 0.04);
  --shadow-xl: 0 20px 40px rgba(44, 40, 36, 0.1);

  /* Layout */
  --sidebar-width: 248px;
  --navbar-height: 64px;
  --footer-height: 42px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Transitions */
  --transition: background-color 0.18s ease, color 0.18s ease;
  --transition-slow: background-color 0.3s ease, color 0.3s ease;

  /* Typography */
  --font: 'Inclusive Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Form Controls */
  --input-height: 42px;
  --input-padding-x: 14px;
  --input-padding-y: 10px;
  --input-radius: 10px;
  --input-border: 1px solid var(--border-color);
  --input-border-hover: 1px solid var(--border-strong);
  --input-border-focus: 1px solid var(--accent);
  --input-shadow-focus: 0 0 0 3px var(--accent-subtle);
  --input-bg: var(--card-bg);
  --input-bg-hover: var(--hover-bg);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-tertiary);
  --input-icon-size: 16px;
  --input-icon-gap: 10px;
  --select-arrow-size: 10px;

  /* ─── Glassmorphism system ─────────────────────────────────────── */
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-bg-heavy: rgba(255, 255, 255, 0.96);
  --glass-bg-tinted: rgba(99, 102, 241, 0.08);
  --glass-border: rgba(200, 179, 147, 0.4);
  --glass-border-strong: rgba(200, 179, 147, 0.7);
  --glass-blur: 14px;
  --glass-blur-heavy: 22px;
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.10);
  --glass-shadow-hover: 0 16px 48px rgba(31, 38, 135, 0.18);
  --glass-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05));

  /* ─── Çözüm Saati status palette ──────────────────────────────── */
  --qs-status-scheduled: #3b82f6;
  --qs-status-scheduled-bg: rgba(59, 130, 246, 0.12);
  --qs-status-completed: #10b981;
  --qs-status-completed-bg: rgba(16, 185, 129, 0.12);
  --qs-status-no-show: #ef4444;
  --qs-status-no-show-bg: rgba(239, 68, 68, 0.12);
  --qs-status-cancelled: #9ca3af;
  --qs-status-cancelled-bg: rgba(156, 163, 175, 0.12);
  --qs-attendance-present: #10b981;
  --qs-attendance-absent: #ef4444;
  --qs-trend-up: #10b981;
  --qs-trend-down: #ef4444;
  --qs-trend-neutral: #9ca3af;

  /* ─── Çözüm Saati KPI color tokens ────────────────────────────── */
  --qs-kpi-blue-1: #3b82f6;
  --qs-kpi-blue-2: #6366f1;
  --qs-kpi-green-1: #10b981;
  --qs-kpi-green-2: #14b8a6;
  --qs-kpi-purple-1: #8b5cf6;
  --qs-kpi-purple-2: #6366f1;
  --qs-kpi-orange-1: #f59e0b;
  --qs-kpi-orange-2: #ef4444;
}

[data-theme='dark'] {
  /* Brand — slightly brighter for dark mode */
  --accent: #6e8cc8;
  /* slightly cooler */
  --accent-hover: #8aa4d8;
  --accent-light: rgba(110, 140, 200, 0.14);
  --accent-subtle: rgba(110, 140, 200, 0.07);
  --primary-color: var(--accent);
  --primary: var(--accent);

  /* Semantic — modern, vivid for dark background */
  --success-color: #5ed1a3;
  /* mint */
  --success-bg: rgba(94, 209, 163, 0.12);
  --danger-color: #ff7b8b;
  /* cool coral */
  --danger-bg: rgba(255, 123, 139, 0.12);
  --warning-color: #ffc774;
  /* amber */
  --warning-bg: rgba(255, 199, 116, 0.12);
  --info-color: #6ad4f5;
  /* frost cyan */
  --info-bg: rgba(106, 212, 245, 0.12);

  /* Layout — Dark (original refined) */
  --background: #0b1424;
  /* deeper cold navy */
  --surface: #0f1a2e;
  /* cold slate */
  --secondary-bg: #08111e;
  /* deepest cold */
  --card-bg: #111827;
  --hover-bg: #1a2a40;
  /* cool hover */

  /* Text — Dark */
  --text-primary: #e8eef7;
  /* icy white */
  --text-secondary: #9aa8c4;
  /* cool blue-gray */
  --text-tertiary: #5a6e8f;
  /* cold muted */

  /* Border — Dark */
  --border-color: #1f2a44;
  /* icy slate */
  --border-strong: #2d4068;
  /* cool slate */

  /* Shadows — Dark */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);

  /* ─── Glassmorphism system — Dark ──────────────────────────────── */
  --glass-bg: rgba(15, 26, 46, 0.85);
  --glass-bg-heavy: rgba(15, 26, 46, 0.92);
  --glass-bg-tinted: rgba(110, 140, 200, 0.10);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-blur: 14px;
  --glass-blur-heavy: 22px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.6);
  --glass-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

/* ─── Base ────────────────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--background);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.teacher-notif-tabs-shell {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--primary-color, #2c3e8c) 10%, var(--card-bg)) 0%,
      var(--card-bg) 72%);
  box-shadow: var(--shadow-sm);
}

.teacher-notif-tabs-copy {
  max-width: 520px;
}

.teacher-notif-tabs-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 14%, transparent);
  color: var(--primary-color, #2c3e8c);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.teacher-notif-tabs-copy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.teacher-notif-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  min-width: min(100%, 420px);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card-bg) 86%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.teacher-notif-tab-btn {
  appearance: none;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text-secondary);
  padding: 12px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.teacher-notif-tab-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.teacher-notif-tab-btn.active {
  background: var(--primary-color);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.teacher-notif-tab-content {
  display: none;
}

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

.teacher-notif-layout {
  display: grid;
  gap: 18px;
}

.teacher-report-shell {
  display: grid;
  gap: 20px;
  padding-bottom: 24px;
}

.teacher-report-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr);
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary-color, #2c3e8c) 22%, transparent) 0%, transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #2c3e8c) 9%, var(--card-bg)) 0%, var(--card-bg) 72%);
  box-shadow: var(--shadow-md);
}

.teacher-report-hero-copy h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.teacher-report-hero-copy p {
  margin: 0;
  max-width: 760px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
}

.teacher-report-eyebrow,
.teacher-report-catalog-eyebrow,
.teacher-report-detail-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 14%, transparent);
  color: var(--primary-color, #2c3e8c);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.teacher-report-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.teacher-report-primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.teacher-report-hero-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: 12px;
}

.teacher-report-hero-meta span {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-bg) 80%, transparent);
}

.teacher-report-insight-column {
  display: grid;
  gap: 12px;
  align-content: start;
}

.teacher-report-insight-card {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  box-shadow: var(--shadow-xs);
}

.teacher-report-insight-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.teacher-report-insight-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 30px;
  line-height: 1;
}

.teacher-report-insight-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.teacher-report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.teacher-report-kpi-card {
  padding: 16px 14px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--card-bg);
  box-shadow: var(--shadow-xs);
}

.teacher-report-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 6px 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teacher-report-kpi) 16%, transparent);
  color: var(--teacher-report-kpi);
  font-size: 12px;
  font-weight: 800;
}

.teacher-report-kpi-card strong {
  display: block;
  font-size: 24px;
  line-height: 1.05;
  color: var(--teacher-report-kpi);
}

.teacher-report-kpi-card p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.teacher-report-catalog-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}

.teacher-report-catalog-head h3 {
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -.03em;
}

.teacher-report-catalog-head p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.teacher-report-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.teacher-report-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--teacher-report-accent) 6%, var(--card-bg)) 0%, var(--card-bg) 100%);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}

.teacher-report-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--teacher-report-accent) 45%, var(--border-color));
  box-shadow: 0 18px 35px color-mix(in srgb, var(--teacher-report-accent) 16%, transparent);
}

.teacher-report-card.active {
  border-color: color-mix(in srgb, var(--teacher-report-accent) 60%, var(--border-color));
  box-shadow: 0 18px 35px color-mix(in srgb, var(--teacher-report-accent) 20%, transparent);
}

.teacher-report-card-glow {
  position: absolute;
  inset: -60px auto auto -30px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teacher-report-accent) 20%, transparent);
  filter: blur(24px);
  opacity: .55;
  pointer-events: none;
}

.teacher-report-card-top,
.teacher-report-card-actions,
.teacher-report-detail-head,
.teacher-report-detail-copy,
.teacher-report-detail-actions {
  position: relative;
  z-index: 1;
}

.teacher-report-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.teacher-report-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--teacher-report-accent) 16%, transparent);
  color: var(--teacher-report-accent);
}

.teacher-report-card-icon svg {
  width: 22px;
  height: 22px;
}

.teacher-report-card-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teacher-report-accent) 12%, transparent);
  color: var(--teacher-report-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.teacher-report-card-body h4 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.2;
}

.teacher-report-card-body p,
.teacher-report-card-body small {
  display: block;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.teacher-report-card-body p {
  font-size: 13px;
}

.teacher-report-card-body small {
  margin-top: 10px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.teacher-report-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.teacher-report-card-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  border-color: color-mix(in srgb, var(--teacher-report-accent) 55%, var(--border-color));
  color: var(--teacher-report-accent);
}

.teacher-report-card-btn-primary:hover {
  background: color-mix(in srgb, var(--teacher-report-accent) 12%, transparent);
}

.teacher-report-mini-btn {
  appearance: none;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  min-width: 58px;
  padding: 10px 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}

.teacher-report-mini-btn:hover {
  border-color: var(--teacher-report-accent);
  color: var(--teacher-report-accent);
  background: color-mix(in srgb, var(--teacher-report-accent) 10%, transparent);
}

.teacher-report-detail-area {
  margin-top: 8px;
}

.teacher-report-detail-card {
  border: 1px solid var(--border-color);
  border-radius: 26px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: var(--shadow-md);
}

.teacher-report-detail-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(180deg, color-mix(in srgb, var(--secondary-bg) 72%, transparent) 0%, transparent 100%);
}

.teacher-report-detail-copy {
  display: flex;
  align-items: start;
  gap: 14px;
}

.teacher-report-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  flex-shrink: 0;
}

.teacher-report-detail-icon svg {
  width: 22px;
  height: 22px;
}

.teacher-report-detail-copy h3 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: -.03em;
}

.teacher-report-detail-copy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.teacher-report-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.teacher-report-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.teacher-report-close-btn {
  appearance: none;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  width: 40px;
  height: 40px;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

.teacher-report-close-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.teacher-report-detail-content {
  padding: 22px;
}

/* =============================================
   TEACHER REPORTS RESPONSIVE
   ============================================= */

/* ---- Large Desktop (≥1200px) ---- */
@media (min-width: 1200px) {
  .teacher-report-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .teacher-report-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* ---- Desktop & Tablet Landscape (1025px–1199px) ---- */
@media (max-width: 1199px) {
  .teacher-report-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- Tablet Landscape & Portrait (769px–1024px) ---- */
@media (max-width: 1024px) {
  .teacher-report-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .teacher-report-hero-copy h2 {
    font-size: clamp(22px, 4vw, 32px);
  }

  .teacher-report-insight-column {
    grid-template-columns: repeat(2, 1fr);
  }

  .teacher-report-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .teacher-report-kpi-card {
    padding: 14px 12px;
  }

  .teacher-report-kpi-card strong {
    font-size: 22px;
  }

  .teacher-report-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
  }

  .teacher-report-card {
    padding: 16px;
    gap: 14px;
  }

  .teacher-report-card-body h4 {
    font-size: 16px;
  }
}

/* ---- Tablet Portrait (641px–768px) ---- */
@media (max-width: 768px) {
  .teacher-report-shell {
    gap: 16px;
  }

  .teacher-report-hero {
    padding: 20px;
    border-radius: 22px;
  }

  .teacher-report-hero-copy h2 {
    font-size: clamp(20px, 5vw, 28px);
  }

  .teacher-report-hero-copy p {
    font-size: 13px;
    line-height: 1.6;
  }

  .teacher-report-hero-actions {
    margin-top: 16px;
    gap: 10px;
  }

  .teacher-report-primary-cta {
    font-size: 13px;
  }

  .teacher-report-insight-column {
    gap: 10px;
  }

  .teacher-report-insight-card {
    padding: 14px;
  }

  .teacher-report-insight-card strong {
    font-size: 26px;
  }

  .teacher-report-insight-card p {
    font-size: 11px;
  }

  .teacher-report-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .teacher-report-kpi-card {
    padding: 12px 10px;
  }

  .teacher-report-kpi-icon {
    min-width: 36px;
    padding: 5px 8px;
    font-size: 11px;
  }

  .teacher-report-kpi-card strong {
    font-size: 20px;
  }

  .teacher-report-kpi-card p {
    font-size: 11px;
  }

  .teacher-report-catalog-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .teacher-report-catalog-head h3 {
    font-size: 20px;
  }

  .teacher-report-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }

  .teacher-report-card {
    padding: 14px;
    gap: 12px;
    border-radius: 20px;
  }

  .teacher-report-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .teacher-report-card-icon svg {
    width: 20px;
    height: 20px;
  }

  .teacher-report-card-body h4 {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .teacher-report-card-body p {
    font-size: 12px;
  }

  .teacher-report-detail-head {
    padding: 18px 20px;
  }

  .teacher-report-detail-copy {
    gap: 12px;
  }

  .teacher-report-detail-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .teacher-report-detail-icon svg {
    width: 20px;
    height: 20px;
  }

  .teacher-report-detail-copy h3 {
    font-size: 20px;
  }

  .teacher-report-detail-copy p {
    font-size: 12px;
  }

  .teacher-report-detail-actions {
    gap: 6px;
  }

  .teacher-report-export-btn {
    font-size: 12px;
    padding: 8px 12px;
  }

  .teacher-report-detail-content {
    padding: 18px;
  }
}

/* ---- Phone Landscape & Small Tablet (481px–640px) ---- */
@media (max-width: 640px) {
  .teacher-report-hero {
    padding: 18px;
    border-radius: 18px;
  }

  .teacher-report-hero-copy h2 {
    font-size: clamp(18px, 5vw, 24px);
    margin-bottom: 8px;
  }

  .teacher-report-hero-copy p {
    font-size: 12px;
  }

  .teacher-report-hero-meta {
    flex-direction: column;
    gap: 8px;
  }

  .teacher-report-hero-meta span {
    font-size: 11px;
    padding: 6px 10px;
  }

  .teacher-report-hero-actions {
    margin-top: 14px;
  }

  .teacher-report-insight-column {
    grid-template-columns: 1fr;
  }

  .teacher-report-insight-card {
    padding: 12px 14px;
  }

  .teacher-report-insight-card strong {
    font-size: 24px;
  }

  .teacher-report-insight-card p {
    font-size: 11px;
  }

  .teacher-report-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .teacher-report-kpi-card {
    padding: 10px;
  }

  .teacher-report-kpi-icon {
    min-width: 32px;
    padding: 4px 6px;
    font-size: 10px;
    margin-bottom: 8px;
  }

  .teacher-report-kpi-card strong {
    font-size: 18px;
  }

  .teacher-report-kpi-card p {
    font-size: 10px;
    margin-top: 4px;
  }

  .teacher-report-catalog-head h3 {
    font-size: 18px;
  }

  .teacher-report-catalog-head p {
    font-size: 12px;
  }

  .teacher-report-card-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .teacher-report-card {
    padding: 14px 16px;
    gap: 12px;
    border-radius: 18px;
  }

  .teacher-report-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .teacher-report-card-icon svg {
    width: 18px;
    height: 18px;
  }

  .teacher-report-card-chip {
    font-size: 10px;
    padding: 4px 8px;
  }

  .teacher-report-card-body h4 {
    font-size: 15px;
  }

  .teacher-report-card-body p {
    font-size: 12px;
  }

  .teacher-report-card-body small {
    font-size: 11px;
    margin-top: 8px;
  }

  .teacher-report-card-actions {
    gap: 6px;
  }

  .teacher-report-card-btn-primary {
    font-size: 12px;
    padding: 8px 10px;
  }

  .teacher-report-mini-btn {
    font-size: 10px;
    padding: 8px 10px;
    min-width: 50px;
    border-radius: 10px;
  }

  .teacher-report-detail-head {
    padding: 16px;
    flex-direction: column;
    gap: 12px;
  }

  .teacher-report-detail-copy {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
  }

  .teacher-report-detail-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .teacher-report-detail-icon svg {
    width: 18px;
    height: 18px;
  }

  .teacher-report-detail-copy h3 {
    font-size: 18px;
  }

  .teacher-report-detail-copy p {
    font-size: 11px;
  }

  .teacher-report-detail-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }

  .teacher-report-export-btn {
    font-size: 11px;
    padding: 7px 10px;
  }

  .teacher-report-close-btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .teacher-report-detail-content {
    padding: 14px;
  }

  .teacher-report-detail-card {
    border-radius: 20px;
  }
}

/* ---- Phone Portrait (≤480px) ---- */
@media (max-width: 480px) {
  .teacher-report-shell {
    gap: 12px;
    padding-bottom: 16px;
  }

  .teacher-report-hero {
    padding: 16px;
    border-radius: 16px;
  }

  .teacher-report-hero .section-header h2,
  .teacher-report-hero-copy h2 {
    font-size: clamp(16px, 5vw, 20px);
  }

  .teacher-report-eyebrow {
    font-size: 10px;
    padding: 4px 8px;
    margin-bottom: 8px;
  }

  .teacher-report-hero-copy p {
    font-size: 11px;
    line-height: 1.5;
  }

  .teacher-report-hero-actions {
    margin-top: 12px;
    gap: 8px;
  }

  .teacher-report-primary-cta {
    font-size: 12px;
    padding: 8px 12px;
  }

  .teacher-report-hero-meta {
    flex-direction: column;
    gap: 6px;
  }

  .teacher-report-hero-meta span {
    font-size: 10px;
    padding: 5px 8px;
  }

  .teacher-report-insight-column {
    gap: 8px;
  }

  .teacher-report-insight-card {
    padding: 10px 12px;
    border-radius: 14px;
  }

  .teacher-report-insight-label {
    font-size: 10px;
    margin-bottom: 6px;
  }

  .teacher-report-insight-card strong {
    font-size: 22px;
    margin-bottom: 4px;
  }

  .teacher-report-insight-card p {
    font-size: 10px;
  }

  .teacher-report-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .teacher-report-kpi-card {
    padding: 10px 8px;
    border-radius: 14px;
  }

  .teacher-report-kpi-icon {
    min-width: 28px;
    padding: 4px 6px;
    margin-bottom: 6px;
  }

  .teacher-report-kpi-card strong {
    font-size: 18px;
  }

  .teacher-report-kpi-card p {
    font-size: 10px;
  }

  .teacher-report-catalog-head {
    gap: 8px;
  }

  .teacher-report-catalog-head h3 {
    font-size: 16px;
  }

  .teacher-report-catalog-head p {
    font-size: 11px;
  }

  .teacher-report-card-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .teacher-report-card {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 16px;
  }

  .teacher-report-card-glow {
    display: none;
  }

  .teacher-report-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .teacher-report-card-icon svg {
    width: 16px;
    height: 16px;
  }

  .teacher-report-card-chip {
    font-size: 9px;
    padding: 3px 6px;
  }

  .teacher-report-card-body h4 {
    font-size: 14px;
  }

  .teacher-report-card-body p {
    font-size: 11px;
  }

  .teacher-report-card-body small {
    font-size: 10px;
    margin-top: 6px;
  }

  .teacher-report-card-btn-primary {
    font-size: 11px;
    padding: 7px 10px;
    border-radius: 10px;
  }

  .teacher-report-mini-btn {
    font-size: 9px;
    padding: 6px 8px;
    min-width: 44px;
    border-radius: 8px;
  }

  .teacher-report-detail-head {
    padding: 14px;
    gap: 10px;
  }

  .teacher-report-detail-copy {
    flex-direction: row;
    gap: 10px;
  }

  .teacher-report-detail-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .teacher-report-detail-icon svg {
    width: 16px;
    height: 16px;
  }

  .teacher-report-detail-copy h3 {
    font-size: 16px;
  }

  .teacher-report-detail-copy p {
    font-size: 11px;
  }

  .teacher-report-detail-actions {
    gap: 6px;
  }

  .teacher-report-export-btn {
    font-size: 11px;
    padding: 7px 10px;
    border-radius: 10px;
  }

  .teacher-report-close-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
    border-radius: 8px;
  }

  .teacher-report-detail-content {
    padding: 12px;
  }

  .teacher-report-detail-card {
    border-radius: 16px;
  }

  .teacher-report-card-btn-primary,
  .teacher-report-mini-btn,
  .teacher-report-export-btn {
    border-radius: 10px;
  }
}

/* ---- Small Phone (≤360px) ---- */
@media (max-width: 360px) {
  .teacher-report-detail-content {
    padding: 10px;
  }
}

/* ---- Topics Grid Responsive ---- */
.teacher-report-topics-grid {
  display: grid;
  gap: 10px;
}

@media (max-width: 640px) {
  .teacher-report-topics-grid {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .teacher-report-topics-grid>div {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    gap: 10px;
  }

  .teacher-report-topics-grid>div>span:first-child {
    font-size: 12px !important;
    min-width: 22px;
  }

  .teacher-report-topics-grid>div>div>div:first-child {
    margin-bottom: 4px;
  }

  .teacher-report-topics-grid>div>div>div:first-child>span:first-child {
    font-size: 12px;
  }

  .teacher-report-topics-grid>div>div>div:first-child>span:last-child {
    font-size: 10px;
  }

  .teacher-report-topics-grid>div>div:last-child {
    font-size: 10px;
    gap: 4px;
  }
}

@media (max-width: 360px) {
  .teacher-report-topics-grid>div {
    padding: 8px 10px !important;
    gap: 8px;
  }
}

/* ---- Comparison Cards Responsive ---- */
.teacher-report-comp-grid {
  display: grid;
  gap: 12px;
}

@media (max-width: 640px) {
  .teacher-report-comp-grid {
    gap: 10px;
  }

  .comparison-card {
    padding: 14px 16px !important;
    border-radius: 12px !important;
  }

  .comparison-card>div:first-child>div:last-child {
    gap: 10px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .comparison-card {
    padding: 12px !important;
    border-left-width: 3px !important;
  }

  .comparison-card>div:first-child {
    margin-bottom: 10px;
  }

  .comparison-card>div:first-child>div:last-child {
    flex-direction: column;
    gap: 6px;
  }

  .comparison-card>div:last-child>div {
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .comparison-card {
    padding: 10px !important;
  }
}

/* ---- Goals Cards Responsive ---- */
.teacher-report-goals-grid {
  display: grid;
  gap: 14px;
}

@media (max-width: 640px) {
  .teacher-report-goals-grid {
    gap: 10px;
  }

  .goals-card {
    padding: 14px 16px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 480px) {
  .goals-card {
    padding: 12px !important;
  }

  .goals-card>div:first-child {
    margin-bottom: 10px;
    flex-direction: column;
    gap: 8px;
  }

  .goals-card>div:first-child>div:last-child {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
  }

  .goals-card>div:first-child>div:last-child>span:first-child {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 14px;
  }
}

@media (max-width: 360px) {
  .goals-card {
    padding: 10px !important;
  }
}

/* ---- Monthly Chart Responsive ---- */
.teacher-report-monthly-chart {
  background: var(--secondary-bg);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
}

.teacher-report-monthly-chart h4 {
  margin: 0 0 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-tertiary);
}

.teacher-report-monthly-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
}

.teacher-report-monthly-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.teacher-report-monthly-bar-label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.3;
}

.teacher-report-monthly-bar-count {
  font-size: 9px;
  color: var(--text-tertiary);
}

@media (max-width: 640px) {
  .teacher-report-monthly-chart {
    padding: 14px 16px;
    margin-bottom: 14px;
  }

  .teacher-report-monthly-chart h4 {
    font-size: 11px;
    margin-bottom: 12px;
  }

  .teacher-report-monthly-bars {
    height: 100px;
    gap: 8px;
  }

  .teacher-report-monthly-bar-label {
    font-size: 9px;
  }

  .teacher-report-monthly-bar-count {
    font-size: 8px;
  }
}

@media (max-width: 480px) {
  .teacher-report-monthly-chart {
    padding: 12px;
    border-radius: 12px;
  }

  .teacher-report-monthly-bars {
    height: 80px;
    gap: 6px;
  }
}

@media (max-width: 360px) {
  .teacher-report-monthly-chart {
    padding: 10px;
  }

  .teacher-report-monthly-bars {
    height: 60px;
    gap: 4px;
  }
}

/* ---- Notification Cards Responsive ---- */
.notif-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.notif-stats>div {
  background: var(--secondary-bg);
  border-radius: 10px;
  padding: 12px 18px;
  text-align: center;
}

.notif-stats>div>div:first-child {
  font-size: 22px;
  font-weight: 900;
}

.notif-stats>div>div:last-child {
  font-size: 11px;
  color: var(--text-tertiary);
}

.notif-list {
  display: grid;
  gap: 10px;
}

.notif-card {
  background: var(--secondary-bg);
  border-radius: 10px;
  padding: 14px 18px;
}

.notif-card>div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.notif-card>div:first-child>span:first-child {
  font-size: 14px;
  font-weight: 800;
}

.notif-card>div:first-child>span:last-child {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.notif-card>p {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 10px;
  white-space: pre-wrap;
}

@media (max-width: 640px) {
  .notif-stats {
    gap: 10px;
  }

  .notif-stats>div {
    padding: 10px 14px;
  }

  .notif-stats>div>div:first-child {
    font-size: 20px;
  }

  .notif-card {
    padding: 12px 14px;
  }
}

@media (max-width: 480px) {
  .notif-stats {
    gap: 8px;
  }

  .notif-stats>div {
    padding: 8px 12px;
    border-radius: 8px;
  }

  .notif-stats>div>div:first-child {
    font-size: 18px;
  }

  .notif-stats>div>div:last-child {
    font-size: 10px;
  }

  .notif-card {
    padding: 10px 12px;
    border-radius: 10px;
  }

  .notif-card>div:first-child>span:first-child {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .notif-card {
    padding: 8px 10px;
  }

  .notif-card>p {
    font-size: 11px;
  }
}

/* ---- Full Report KPI Cards Responsive ---- */
.teacher-report-full-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

@media (max-width: 640px) {
  .teacher-report-full-kpis {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }

  .teacher-report-full-kpis>div {
    padding: 12px 10px;
    border-radius: 12px;
  }

  .teacher-report-full-kpis>div>div:first-child {
    font-size: 18px;
    margin-bottom: 2px;
  }

  .teacher-report-full-kpis>div>div:nth-child(2) {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
  }

  .teacher-report-full-kpis>div>div:last-child {
    font-size: 10px;
    margin-top: 3px;
  }
}

@media (max-width: 480px) {
  .teacher-report-full-kpis {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .teacher-report-full-kpis>div {
    padding: 10px 8px;
  }

  .teacher-report-full-kpis>div>div:first-child {
    font-size: 16px;
  }

  .teacher-report-full-kpis>div>div:nth-child(2) {
    font-size: 18px;
  }
}

@media (max-width: 360px) {
  .teacher-report-full-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .teacher-report-full-kpis>div>div:first-child {
    font-size: 14px;
  }

  .teacher-report-full-kpis>div>div:nth-child(2) {
    font-size: 16px;
  }
}

/* ---- Guidance Stats Responsive ---- */
.teacher-report-guidance-grid {
  display: grid;
  gap: 12px;
}

@media (max-width: 640px) {
  .teacher-report-guidance-grid {
    gap: 10px;
  }

  .teacher-report-guidance-stat-bar {
    padding: 12px 14px;
  }

  .teacher-report-guidance-bar-label {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .teacher-report-guidance-grid {
    gap: 8px;
  }

  .teacher-report-guidance-stat-bar {
    padding: 10px 12px;
    border-radius: 10px;
  }

  .teacher-report-guidance-stat-bar>div:last-child {
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .teacher-report-guidance-stat-bar {
    padding: 8px 10px;
  }
}

/* ---- Assignment Cards Responsive ---- */
.teacher-report-assignment-grid {
  display: grid;
  gap: 10px;
}

@media (max-width: 640px) {
  .teacher-report-assignment-grid {
    gap: 8px;
  }

  .teacher-report-guidance-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .teacher-report-guidance-grid>div {
    padding: 14px;
  }

  .teacher-report-guidance-grid h4 {
    font-size: 11px !important;
    margin-bottom: 10px !important;
  }
}

@media (max-width: 480px) {
  .teacher-report-assignment-grid>div {
    padding: 12px 14px;
    border-radius: 10px;
  }

  .teacher-report-guidance-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .teacher-report-guidance-grid>div {
    padding: 12px;
    border-radius: 10px;
  }
}

@media (max-width: 360px) {
  .teacher-report-assignment-grid>div {
    padding: 10px 12px;
  }

  .teacher-report-guidance-grid>div {
    padding: 10px;
  }
}

@media (max-width: 480px) {

  .teacher-report-card-btn-primary,
  .teacher-report-mini-btn {
    font-size: 10px;
    padding: 6px 8px;
    min-width: 44px;
    border-radius: 8px;
  }

  .teacher-report-export-btn {
    font-size: 11px;
    padding: 7px 10px;
    border-radius: 10px;
  }
}

@media (max-width: 360px) {

  .teacher-report-card-btn-primary,
  .teacher-report-mini-btn {
    font-size: 9px;
    padding: 5px 7px;
    min-width: 40px;
    border-radius: 6px;
  }

  .teacher-report-export-btn {
    font-size: 10px;
    padding: 6px 8px;
    border-radius: 8px;
  }
}

/* ---- Comparison & Goals Cards Responsive ---- */
@media (max-width: 640px) {

  .teacher-report-detail-content .comparison-card,
  .teacher-report-detail-content .goals-card {
    padding: 14px 16px;
  }

  .teacher-report-detail-content .comparison-card>div:first-child,
  .teacher-report-detail-content .goals-card>div:first-child {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 480px) {

  .teacher-report-detail-content .comparison-card,
  .teacher-report-detail-content .goals-card {
    padding: 12px;
    border-radius: 12px;
  }

  .teacher-report-detail-content .comparison-card>div:last-child,
  .teacher-report-detail-content .goals-card>div:last-child {
    font-size: 11px;
    gap: 10px;
  }
}

@media (max-width: 360px) {

  .teacher-report-detail-content .comparison-card,
  .teacher-report-detail-content .goals-card {
    padding: 10px;
  }
}

/* ---- Monthly Chart Responsive ---- */
@media (max-width: 640px) {
  .teacher-report-detail-content .monthly-chart-wrap {
    padding: 14px 16px;
  }

  .teacher-report-detail-content .monthly-chart-wrap h4 {
    font-size: 11px;
    margin-bottom: 12px;
  }

  .teacher-report-detail-content .monthly-chart-wrap>div {
    height: 100px;
  }

  .teacher-report-detail-content .monthly-chart-wrap>div>div>span:first-child {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .teacher-report-detail-content .monthly-chart-wrap {
    padding: 12px;
    border-radius: 12px;
  }

  .teacher-report-detail-content .monthly-chart-wrap>div {
    height: 80px;
    gap: 6px;
  }
}

@media (max-width: 360px) {
  .teacher-report-detail-content .monthly-chart-wrap {
    padding: 10px;
  }

  .teacher-report-detail-content .monthly-chart-wrap>div {
    height: 60px;
    gap: 4px;
  }
}

/* ---- Notification Cards Responsive ---- */
@media (max-width: 640px) {
  .teacher-report-detail-content .notif-card {
    padding: 12px 14px;
  }

  .teacher-report-detail-content .notif-card>div:first-child {
    flex-direction: column;
    gap: 6px;
  }

  .teacher-report-detail-content .notif-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .teacher-report-detail-content .notif-card {
    padding: 10px 12px;
    border-radius: 10px;
  }

  .teacher-report-detail-content .notif-card>div:first-child>span:first-child {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .teacher-report-detail-content .notif-card {
    padding: 8px 10px;
  }
}

.teacher-report-hero-copy h2 {
  font-size: 16px;
}

.teacher-report-insight-card {
  padding: 8px 10px;
}

.teacher-report-insight-card strong {
  font-size: 20px;
}

.teacher-report-kpi-grid {
  gap: 6px;
}

.teacher-report-kpi-card {
  padding: 8px;
}

.teacher-report-kpi-icon {
  min-width: 24px;
  padding: 3px 5px;
  font-size: 9px;
}

.teacher-report-kpi-card strong {
  font-size: 16px;
}

.teacher-report-kpi-card p {
  font-size: 9px;
}

.teacher-report-card {
  padding: 10px 12px;
  gap: 8px;
  border-radius: 14px;
}

.teacher-report-card-icon {
  width: 32px;
  height: 32px;
}

.teacher-report-card-body h4 {
  font-size: 13px;
}

.teacher-report-detail-head {
  padding: 12px;
}

.teacher-report-detail-icon {
  width: 30px;
  height: 30px;
}

.teacher-report-detail-copy h3 {
  font-size: 14px;
}

.teacher-report-detail-content {
  padding: 10px;
}

/* ---- Landscape Orientation Adjustments ---- */
@media (max-height: 500px) and (orientation: landscape) {
  .teacher-report-hero {
    padding: 16px 20px;
  }

  .teacher-report-insight-column {
    grid-template-columns: repeat(2, 1fr);
  }

  .teacher-report-insight-card {
    padding: 10px 12px;
  }

  .teacher-report-insight-card strong {
    font-size: 22px;
  }

  .teacher-report-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .teacher-report-kpi-card {
    padding: 10px;
  }
}

@media (max-width: 640px) and (orientation: landscape) {
  .teacher-report-hero {
    grid-template-columns: 1fr 1fr;
    padding: 16px;
  }

  .teacher-report-insight-column {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .teacher-report-insight-card {
    padding: 10px 12px;
  }

  .teacher-report-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

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

  .teacher-report-card {
    padding: 12px;
    gap: 10px;
  }
}

@media (max-width: 480px) and (orientation: landscape) {
  .teacher-report-hero {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .teacher-report-insight-column {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .teacher-report-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .teacher-report-catalog-head h3 {
    font-size: 15px;
  }
}

/* =============================================
   TEACHER REPORTS — REPORT DETAIL TABLES
   ============================================= */

.teacher-report-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.teacher-report-table-wrap table {
  min-width: 500px;
}

.teacher-report-table-wrap th,
.teacher-report-table-wrap td {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .teacher-report-table-wrap {
    margin-left: -4px;
    margin-right: -4px;
    border-radius: 0;
  }

  .teacher-report-table-wrap table {
    font-size: 12px;
  }

  .teacher-report-table-wrap th,
  .teacher-report-table-wrap td {
    padding: 8px 10px !important;
  }
}

@media (max-width: 480px) {
  .teacher-report-table-wrap table {
    font-size: 11px;
    min-width: 400px;
  }

  .teacher-report-table-wrap th,
  .teacher-report-table-wrap td {
    padding: 7px 8px !important;
  }
}

@media (max-width: 360px) {
  .teacher-report-table-wrap table {
    font-size: 10px;
    min-width: 320px;
  }

  .teacher-report-table-wrap th,
  .teacher-report-table-wrap td {
    padding: 6px 7px !important;
  }
}

.teacher-notif-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--primary-color, #2c3e8c) 10%, var(--card-bg)) 0%,
      var(--card-bg) 72%);
}

.teacher-notif-hero-copy {
  max-width: 760px;
}

.teacher-notif-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 14%, transparent);
  color: var(--primary-color, #2c3e8c);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.teacher-notif-hero-title {
  margin-bottom: 6px;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
}

.teacher-notif-hero-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.teacher-notif-channel-strip,
.teacher-notif-history-badges,
.teacher-notif-recipient-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.teacher-notif-channel-strip {
  margin-top: 14px;
}

.teacher-notif-channel-pill,
.teacher-notif-recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary-color, #2c3e8c) 16%, var(--border-color));
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
}

.teacher-notif-channel-pill.subtle,
.teacher-notif-recipient-chip {
  border-color: var(--border-color);
  background: var(--card-bg);
  color: var(--text-secondary);
}

.teacher-notif-stat-grid,
.teacher-notif-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  flex: 1;
  min-width: 280px;
}

.teacher-notif-stat-card {
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--card-bg);
}

.teacher-notif-stat-label {
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

.teacher-notif-stat-value {
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 800;
}

.teacher-notif-stat-value-sm {
  font-size: 20px;
}

.teacher-notif-compose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.teacher-notif-compose-main,
.teacher-notif-compose-side,
.teacher-notif-form-grid,
.teacher-notif-channel-stack,
.teacher-notif-custom-channel-stack {
  display: grid;
  gap: 18px;
}

.teacher-notif-panel {
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--card-bg);
}

.teacher-notif-history-panel {
  overflow: hidden;
  padding: 0;
}

.teacher-notif-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.teacher-notif-history-head {
  margin-bottom: 0;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(180deg, var(--secondary-bg), transparent);
}

.teacher-notif-panel-head h3 {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}

.teacher-notif-panel-head p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.teacher-notif-panel-head-tight {
  align-items: center;
}

.teacher-notif-template-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.teacher-notif-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}

.teacher-notif-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
  font: inherit;
}

.teacher-notif-textarea {
  resize: vertical;
  min-height: 170px;
}

.teacher-notif-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #2c3e8c) 14%, transparent);
}

.teacher-notif-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.teacher-notif-channel-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--secondary-bg);
  cursor: pointer;
  transition: var(--transition);
}

.teacher-notif-channel-option:hover {
  border-color: color-mix(in srgb, var(--primary-color, #2c3e8c) 28%, var(--border-color));
  background: color-mix(in srgb, var(--secondary-bg) 78%, var(--card-bg));
}

.teacher-notif-channel-option.is-disabled {
  opacity: 0.88;
}

.teacher-notif-channel-option-copy {
  display: grid;
  gap: 4px;
}

.teacher-notif-channel-option-copy strong,
.teacher-notif-channel-option-copy small {
  line-height: 1.35;
}

.teacher-notif-channel-option-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 13px;
}

.teacher-notif-channel-option-copy small {
  color: var(--text-secondary);
  font-size: 11px;
}

.teacher-notif-section-kicker {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.teacher-notif-section-meta {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}

.teacher-notif-selected-count {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--primary-color);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.teacher-notif-student-picker {
  max-height: 420px;
  overflow-y: auto;
}

.teacher-notif-submit-btn {
  width: 100%;
  justify-content: center;
}

.teacher-notif-history-list {
  padding: 16px;
}

.teacher-notif-history-item {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--secondary-bg);
}

.teacher-notif-history-item+.teacher-notif-history-item {
  margin-top: 12px;
}

.teacher-notif-history-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.teacher-notif-history-item-title {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}

.teacher-notif-history-item-date {
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.teacher-notif-history-item-message {
  margin-top: 10px;
  color: var(--text-secondary);
  line-height: 1.65;
  white-space: pre-wrap;
}

.teacher-notif-recipient-chips {
  margin-top: 12px;
}

@media (max-width: 1024px) {
  .teacher-notif-compose-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .teacher-notif-tabs-shell {
    padding: 16px;
  }

  .teacher-notif-tabs {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .teacher-notif-hero,
  .teacher-notif-panel {
    padding: 16px;
  }

  .teacher-notif-history-head {
    padding: 16px;
  }

  .teacher-notif-history-list {
    padding: 14px;
  }

  .teacher-notif-channel-grid,
  .teacher-notif-stat-grid,
  .teacher-notif-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Screens ─────────────────────────────────────────────────── */
.screen {
  display: none;
  min-height: 100vh;
}

.screen.active {
  display: block;
}

#loginScreen.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Login ───────────────────────────────────────────────────── */
#loginScreen {
  min-height: 100vh;
  background: var(--background);
  position: relative;
  overflow: hidden;
}

#loginScreen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(44, 62, 140, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 110%, rgba(92, 124, 186, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.login-container {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 420px;
  padding: 48px 40px;
  box-shadow: var(--shadow-xl);
  margin: 16px;
}

.login-header {
  text-align: center;
  margin-bottom: 36px;
}

.login-header h1 {
  font-size: 32px;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 4px;
  letter-spacing: -0.6px;
  line-height: 1.2;
}

.login-header p {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.demo-info {
  margin-top: 28px;
  padding: 16px;
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  font-size: 13px;
}

.demo-info p {
  margin: 5px 0;
  color: var(--text-secondary);
}

.demo-info strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Login yardım satırı: "Şifrenizi mi unuttunuz? Şifremi Sıfırla"
   Tema uyumlu, modern kart tasarımı — ikon rozeti + chip buton */
.login-help-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  margin-bottom: 20px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--accent-subtle) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 4%, transparent);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.login-help-row:hover {
  background: color-mix(in srgb, var(--accent-subtle) 90%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.login-help-row > svg {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  opacity: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}

.login-help-row:hover > svg {
  transform: scale(1.05);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.login-help-row > span {
  color: var(--text-secondary);
  font-weight: 500;
}

.login-help-row > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}

.login-help-row > a::after {
  content: "→";
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.18s ease;
}

.login-help-row > a:hover,
.login-help-row > a:focus-visible {
  color: var(--accent-hover, var(--accent));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-1px);
  outline: none;
}

.login-help-row > a:hover::after,
.login-help-row > a:focus-visible::after {
  transform: translateX(2px);
}

.login-help-row > a:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Dark mode ince ayar — arka planı hafifçe koyulaştır, kontrast koru */
[data-theme="dark"] .login-help-row {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: none;
}
[data-theme="dark"] .login-help-row > svg {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
[data-theme="dark"] .login-help-row > a {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Mobil için kompakt yerleşim */
@media (max-width: 480px) {
  .login-help-row {
    gap: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
  }
  .login-help-row > a {
    padding: 3px 10px;
    font-size: 12px;
  }
}

/* Login Button */
.login-form #loginBtn {
  width: 100%;
  margin-top: 0;
}

/* ─── Tarayıcı Yerleşik "Şifreyi Göster" İkonunu Gizle ─────── */
/* Chrome/Edge: type=password alanlarının yanına otomatik eklenen
   göz ikonunu tüm varyantlarında gizler. Bizim kendi .password-toggle-btn
   butonumuz zaten wrapper içinde sağda duruyor. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
}

input[type="password"]::-webkit-textfield-decoration-container,
input[type="password"]::-webkit-textfield-decoration,
input[type="password"]::-webkit-credentials-auto-fill-button {
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

/* Yeni Chromium: ::-internal-shadow-textfield-decoration-controller Chrome sürümü için */
input[type="password"]::internal-shadow-textfield-decoration-container,
input[type="password"]::internal-textfield-decoration-container,
input[type="password"]::internal-pretty-decoration-container {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Firefox: password reveal toggle */
input[type="password"]::-internal-password-toggle-button,
input[type="password"]::-internal-password-toggle {
  display: none !important;
}

/* Bazı mobil tarayıcıların otomatik eklediği clear/eye dekorasyonları */
input[type="password"]::-webkit-search-cancel-button,
input[type="password"]::-webkit-search-decoration,
input[type="password"]::-webkit-search-results-button,
input[type="password"]::-webkit-search-results-decoration {
  display: none !important;
}

/* ─── Password Input Wrapper ─────────────────────────────────── */
.password-input-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
  width: 100%;
  padding-right: 12px;
}

.password-toggle-btn {
  position: static;
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
  line-height: 1;
  /* Mobilde dokunma gecikmesini önle (300ms tap delay), çift dokunma zoom'u engelle */
  touch-action: manipulation;
  /* Erişilebilirlik: minimum 44x44 tıklama alanı (WCAG/Apple HIG) */
  min-width: 44px;
  min-height: 44px;
  margin: 0 4px 0 0;
}

.password-toggle-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
}

.password-toggle-btn:focus {
  outline: 2px solid var(--primary-color, #2c3e8c);
  outline-offset: 2px;
}

.password-toggle-btn:focus:not(:focus-visible) {
  outline: none;
}

.password-toggle-btn .eye-off-icon {
  display: none;
}

.password-toggle-btn.is-visible .eye-icon {
  display: none;
}

.password-toggle-btn.is-visible .eye-off-icon {
  display: block;
}

/* ─── Reset Password Screen ─────────────────────────────────── */
#resetPasswordScreen {
  min-height: 100vh;
  background: var(--background);
  position: relative;
  overflow: hidden;
}

#resetPasswordScreen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(44, 62, 140, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 110%, rgba(92, 124, 186, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.reset-password-container {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 420px;
  padding: 48px 40px;
  box-shadow: var(--shadow-xl);
  margin: 16px;
}

.reset-password-header {
  text-align: center;
  margin-bottom: 36px;
}

.reset-password-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}

.reset-password-header p {
  color: var(--text-secondary);
  font-size: 14px;
}

/* ─── Access Denied Screen ─────────────────────────────────────── */
.access-denied-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  padding: 40px 20px;
  text-align: center;
}

.access-denied-icon {
  font-size: 80px;
  margin-bottom: 24px;
}

.access-denied-container h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.access-denied-message {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.access-denied-hint {
  font-size: 14px;
  color: var(--text-tertiary);
  max-width: 400px;
  line-height: 1.5;
  margin-bottom: 32px;
}

.access-denied-actions {
  display: flex;
  gap: 12px;
}

/* ─── Navbar ──────────────────────────────────────────────────── */
.navbar {
  height: var(--navbar-height);
  background: var(--card-bg);
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.navbar-brand h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.navbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-app-close-btn[hidden] {
  display: none !important;
}

.pwa-install-intent {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10000;
  width: min(560px, calc(100vw - 32px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}

.pwa-install-intent strong,
.pwa-install-intent span {
  display: block;
}

.pwa-install-intent span {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}

.pwa-install-intent-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-install-inapp-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pwa-install-inapp-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.pwa-install-inapp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}

.pwa-install-inapp-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
}

.pwa-install-inapp-close:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

@media (max-width: 480px) {
  .pwa-install-inapp-btn .pwa-install-inapp-label {
    display: none;
  }

  .pwa-install-inapp-btn {
    padding: 6px;
  }
}

.seasonal-gesture {
  --seasonal-bg: rgba(44, 62, 140, 0.08);
  --seasonal-border: rgba(44, 62, 140, 0.16);
  --seasonal-accent: var(--accent);
  --seasonal-accent-2: #f7d154;
  --seasonal-soft: rgba(247, 209, 84, 0.22);
  --seasonal-ink: var(--text-primary);
  --seasonal-muted: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  max-width: 180px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--seasonal-border);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)),
    var(--seasonal-bg);
  color: var(--seasonal-ink);
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(44, 40, 36, 0.04);
}

.seasonal-gesture__art {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.24) 64%),
    var(--seasonal-soft);
  flex-shrink: 0;
}

.seasonal-gesture__art svg {
  width: 20px;
  height: 20px;
  display: block;
}

.seasonal-gesture__art svg * {
  vector-effect: non-scaling-stroke;
}

.seasonal-gesture__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.seasonal-gesture--child {
  --seasonal-bg: rgba(247, 209, 84, 0.16);
  --seasonal-border: rgba(177, 98, 26, 0.22);
  --seasonal-accent: #2c7a7a;
  --seasonal-accent-2: #f7d154;
  --seasonal-soft: rgba(44, 122, 122, 0.12);
}

.seasonal-gesture--flag,
.seasonal-gesture--victory {
  --seasonal-bg: rgba(225, 29, 46, 0.08);
  --seasonal-border: rgba(225, 29, 46, 0.22);
  --seasonal-accent: #e11d2e;
  --seasonal-accent-2: #f7d154;
}

.seasonal-gesture--memorial {
  --seasonal-bg: rgba(185, 28, 28, 0.08);
  --seasonal-border: rgba(185, 28, 28, 0.24);
  --seasonal-accent: #b91c1c;
  --seasonal-accent-2: #111827;
  --seasonal-soft: rgba(17, 24, 39, 0.1);
  --seasonal-ink: #111827;
  --seasonal-muted: #4b5563;
}

.seasonal-gesture--ribbon {
  --seasonal-bg: rgba(17, 24, 39, 0.08);
  --seasonal-border: rgba(17, 24, 39, 0.22);
  --seasonal-soft: rgba(17, 24, 39, 0.12);
  --seasonal-ink: #111827;
  --seasonal-muted: #6b7280;
}

.seasonal-gesture--memorial .seasonal-gesture__art,
.seasonal-gesture--ribbon .seasonal-gesture__art {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(243, 244, 246, 0.78) 68%),
    var(--seasonal-soft);
}

.seasonal-gesture--ramadan,
.seasonal-gesture--sacrifice {
  --seasonal-bg: rgba(44, 110, 44, 0.1);
  --seasonal-border: rgba(44, 110, 44, 0.2);
  --seasonal-accent: #2c6e2c;
  --seasonal-accent-2: #f7d154;
  --seasonal-soft: rgba(44, 110, 44, 0.12);
}

[data-theme='dark'] .seasonal-gesture--memorial,
[data-theme='dark'] .seasonal-gesture--ribbon {
  --seasonal-bg: rgba(248, 250, 252, 0.08);
  --seasonal-border: rgba(248, 250, 252, 0.18);
  --seasonal-ink: #f9fafb;
  --seasonal-muted: #d1d5db;
}

.login-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
  margin-bottom: 12px;
}

.user-badge {
  background: var(--accent);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Main Layout ─────────────────────────────────────────────── */
.main-content {
  display: flex;
  height: calc(100vh - var(--navbar-height) - var(--footer-height, 42px));
  height: calc(100dvh - var(--navbar-height) - var(--footer-height, 42px));
  background: var(--background);
  overflow: hidden;
  min-height: 0;
}

/* ─── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--card-bg);
  border-right: 1px solid var(--border-color);
  padding: 0 10px 20px;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 14px;
  margin-bottom: 6px;
}

.sidebar-brand-mark {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.sidebar-brand-mark:hover {
  transform: scale(1.04);
  background: color-mix(in srgb, var(--primary-color) 16%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent),
    0 2px 8px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.sidebar-brand-mark svg {
  width: 20px;
  height: 20px;
  display: block;
}

.sidebar-brand-icon {
  font-size: 22px;
  line-height: 1;
}

.sidebar-brand-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.sidebar-divider-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-tertiary);
  padding: 16px 14px 6px;
  margin-top: 4px;
  opacity: 0.7;
}

/* Sidebar Group Labels */
.sidebar-group {
  display: block;
  padding: 12px 12px 4px;
  margin-top: 4px;
  cursor: grab;
}

.sidebar-group:active {
  cursor: grabbing;
}

.sidebar-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-tertiary);
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.sidebar-group>.sidebar-section {
  margin-bottom: 2px;
}

.sidebar-group-controls {
  padding-bottom: 16px;
}

.sidebar-reorder-btn {
  margin-top: auto;
  padding-top: 16px;
}

.sidebar-group:hover .sidebar-group-label {
  color: var(--accent);
}

.sidebar-group.sb-dragging {
  opacity: 0.5;
}

.group-edit-btn {
  margin-left: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.group-edit-btn:hover {
  opacity: 1;
}

.sidebar-group-controls {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.sidebar-group-controls button {
  flex-shrink: 0;
}

/* Mobile sidebar group buttons */
@media (max-width: 768px) {

  .group-edit-btn,
  .group-delete-btn {
    font-size: 14px;
    padding: 4px 6px;
  }

  .sidebar-group-controls button {
    flex: 1;
    justify-content: center;
  }

  .sidebar-group-label {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
  }

  /* Touch-friendly sidebar buttons */
  .sidebar-btn {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .sidebar-btn .sb-handle {
    font-size: 16px;
  }

  /* Sidebar reorder active - touch friendly */
  .sidebar-reorder-active .sidebar-btn {
    padding: 14px 16px;
  }

  /* Content scroll for mobile */
  .content-area {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Lesson cards - full width on mobile */
  .lesson-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Pagination - wrap on mobile */
  .pagination-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  /* Modal footer - stack on mobile */
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  /* Schedule radio labels - full width mobile */
  .schedule-radio-label {
    padding: 14px;
  }

  /* Ders Yönetimi paneli - mobil */
  #groupLessonsSection .section-header>div:last-child {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  #groupLessonsSection input,
  #groupLessonsSection select,
  #groupLessonsSection button {
    width: 100%;
    min-width: unset;
  }

  .lesson-stats-card {
    min-width: 100% !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Mobile sidebar group buttons */
@media (max-width: 768px) {

  .group-edit-btn,
  .group-delete-btn {
    font-size: 14px;
    padding: 4px 6px;
  }

  /* Sidebar group - touch friendly */
  .sidebar-group-label {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
  }

  /* Touch-friendly sidebar buttons */
  .sidebar-btn {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .sidebar-btn .sb-handle {
    font-size: 16px;
  }

  /* Sidebar reorder active - touch friendly */
  .sidebar-reorder-active .sidebar-btn {
    padding: 14px 16px;
  }

  /* Content scroll for mobile */
  .content-area {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Lesson cards - full width on mobile */
  .lesson-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Pagination - wrap on mobile */
  .pagination-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  /* Modal footer - stack on mobile */
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  /* Schedule radio labels - full width mobile */
  .schedule-radio-label {
    padding: 14px;
  }
}

/* Small mobile ≤ 480px */
@media (max-width: 480px) {
  .sidebar {
    width: 100vw !important;
  }

  .content-area {
    padding: 12px 12px calc(104px + env(safe-area-inset-bottom, 0px));
  }

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

  .form-group label {
    font-size: 13px;
  }

  /* Compact stats */
  .lesson-stats-card {
    padding: 12px;
  }

  .lesson-stats-card>div:first-child {
    font-size: 10px;
  }

  .lesson-stats-card>div:last-child {
    font-size: 22px;
  }
}

/* Sidebar drag states */
.sb-drag-over {
  background: var(--accent-subtle) !important;
  border-radius: var(--radius-sm);
}

.sb-dragging {
  opacity: 0.4;
}

.content-area {
  flex: 1;
  padding: 32px 32px calc(88px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.content-area::after {
  content: "";
  display: block;
  height: 28px;
  flex: 0 0 auto;
}

.content-area::-webkit-scrollbar {
  width: 4px;
}

.content-area::-webkit-scrollbar-track {
  background: transparent;
}

.content-area::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 2px;
  position: relative;
  z-index: 1;
}

.sidebar-section.open {
  z-index: 10;
}

.sidebar-btn {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 2px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.sidebar-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.sidebar-btn.active {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.sidebar-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* Sidebar SVG ikonlar — düzgün render için (merged from _layout.css) */
.sidebar-btn svg,
.sidebar-btn > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  opacity: 1;
  visibility: visible;
  min-width: 18px;
  min-height: 18px;
}

.sidebar-btn.active svg {
  color: var(--accent);
}

.sidebar-btn:hover svg,
.sidebar-btn:focus-visible svg {
  color: currentColor;
}

.sidebar-btn svg path,
.sidebar-btn svg line,
.sidebar-btn svg rect,
.sidebar-btn svg circle,
.sidebar-btn svg polyline {
  stroke: currentColor;
  fill: none;
}

[data-theme='dark'] .sidebar-btn.active {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* ─── Sidebar Submenu — Premium Edition ───────────────────────── */
.sidebar-submenu {
  max-height: 0;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  position: relative;
  z-index: 10;
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-submenu-inner {
  padding-left: 12px;
  border-left: 2px solid var(--border-color);
  margin-left: 18px;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    border-color 0.2s ease;
}

.sidebar-section.open .sidebar-submenu {
  max-height: 500px;
  margin-bottom: 4px;
}

.sidebar-section.open .sidebar-submenu-inner {
  opacity: 1;
  transform: translateY(0);
}

.sidebar-section:has(.sidebar-submenu)>.sidebar-btn::after {
  content: '';
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8279' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.18s ease;
}

.sidebar-section:has(.sidebar-submenu):hover>.sidebar-btn::after {
  opacity: 0.6;
}

.sidebar-section:has(.sidebar-submenu).open>.sidebar-btn::after {
  transform: rotate(180deg);
}

.sidebar-subbtn {
  position: relative;
  width: 100%;
  padding: 9px 12px 9px 14px;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-subbtn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  width: 3px;
  height: 60%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-subbtn:hover {
  background: var(--hover-bg);
  color: var(--text-secondary);
  transform: translateX(4px);
}

.sidebar-subbtn:hover::before {
  transform: translateY(-50%) scaleX(1);
}

.sidebar-subbtn:active {
  transform: translateX(2px) scale(0.98);
}

.sidebar-subbtn.active {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 600;
  transform: translateX(4px);
}

.sidebar-subbtn.active::before {
  transform: translateY(-50%) scaleX(1);
  box-shadow: 0 0 8px var(--accent);
}

.sidebar-subbtn .submenu-icon {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  flex-shrink: 0;
}

.sidebar-subbtn:hover .submenu-icon,
.sidebar-subbtn.active .submenu-icon {
  opacity: 1;
  transform: scale(1.1);
}

.sidebar-subbtn .submenu-chevron {
  width: 12px;
  height: 12px;
  margin-left: auto;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.sidebar-subbtn:hover .submenu-chevron {
  opacity: 0.4;
  transform: translateX(0);
}

.sidebar-subbtn:hover .submenu-chevron {
  opacity: 0.6;
}

.sidebar-subbtn .submenu-badge {
  margin-left: auto;
  padding: 2px 7px;
  background: var(--danger-color);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.sidebar-subbtn.has-badge .submenu-badge {
  opacity: 1;
  transform: scale(1);
}

.sidebar-subbtn.has-badge.new .submenu-badge {
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(177, 59, 59, 0.4);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(177, 59, 59, 0);
  }
}

/* Ripple Effect */
.sidebar-subbtn.ripple {
  position: relative;
  overflow: hidden;
}

.sidebar-subbtn.ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition:
    transform 0.5s ease-out,
    opacity 0.5s ease-out;
  pointer-events: none;
}

.sidebar-subbtn.ripple:active::after {
  opacity: 0.15;
  transform: scale(2);
  transition:
    transform 0s,
    opacity 0s;
}

/* Submenu section open state indicator */
.sidebar-section.open:has(.sidebar-subbtn.active)>.sidebar-btn {
  color: var(--accent);
}

.sidebar-section.open:has(.sidebar-submenu)>.sidebar-btn {
  color: var(--text-primary);
}

/* ─── Sidebar — Keyboard Focus ─────────────────────────────────── */
.sidebar-btn:focus-visible,
.sidebar-subbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Content Area ────────────────────────────────────────────── */
.admin-section,
.institution-section,
.student-section,
.teacher-section {
  display: none;
  animation: sectionIn 0.25s ease;
}

.admin-section.active,
.institution-section.active,
.student-section.active,
.teacher-section.active {
  display: block;
}

@keyframes sectionIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Section Header ──────────────────────────────────────────── */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}

.accounting-section-header {
  align-items: flex-start;
  flex-direction: column;
}

.accounting-section-header h2 {
  margin: 0;
  width: 100%;
}

.section-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.4px;
  line-height: 1.2;
}

/* ─── Section Tabs (Personel & Revir) ────────────────────────────── */
.section-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.section-tabs .tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
  white-space: nowrap;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.section-tabs .tab-btn:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

.section-tabs .tab-btn.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
  background: var(--accent-light);
}

.tab-content {
  display: none;
  padding: 4px 0;
}

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

/* ─── NPS Tabs ──────────────────────────────────────────────────── */
.nps-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 24px;
}

.nps-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.nps-tab-btn:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

.nps-tab-btn.active {
  color: var(--accent);
  font-weight: 700;
  border-bottom-color: var(--accent);
  background: var(--accent-light);
}

.nps-tab-btn.active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 2px;
}

/* ─── Tables in institution sections ───────────────────────────── */
.institution-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.institution-section table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid var(--border-color);
}

.institution-section table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.institution-section table tr:hover td {
  background: var(--hover-bg);
}

.institution-section .search-box input {
  width: 100%;
  padding: 10px 14px;
  border: var(--input-border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  background: var(--input-bg);
  color: var(--input-text);
}

.institution-section .search-box input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

.institution-section select.form-input {
  padding: 8px 12px;
  font-size: 13px;
  min-height: auto;
}

.institution-section .filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.institution-section .filter-row select {
  flex: 1;
  min-width: 150px;
  padding: 9px 14px;
  border: var(--input-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--input-bg);
  color: var(--input-text);
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.institution-section .filter-row select:hover {
  border-color: var(--border-strong);
}

.institution-section .filter-row select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

/* Personel panel responsive */
#instStaff {
  max-width: 100%;
  overflow-x: hidden;
}

#instStaff .section-header {
  align-items: flex-start;
}

#instStaff .section-header h2 {
  min-width: 0;
}

#instStaff .section-header>div:last-child {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px !important;
  flex: 1 1 280px;
  min-width: 0;
}

#instStaff .section-header .btn {
  min-height: 40px;
}

#instStaff .search-box {
  margin-bottom: 12px;
  max-width: 560px;
}

#instStaff .search-box input,
#instStaff .filter-row select {
  min-height: 42px;
}

#staffFilters {
  align-items: stretch;
}

#staffListContent,
#positionListContent {
  min-width: 0;
}

.staff-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

.staff-table {
  min-width: 760px;
}

.staff-table th,
.staff-table td {
  vertical-align: middle;
}

.staff-table th:first-child,
.staff-table td:first-child {
  min-width: 160px;
}

.staff-table th:nth-child(5),
.staff-table td:nth-child(5) {
  min-width: 190px;
  overflow-wrap: anywhere;
}

.staff-table td:last-child {
  white-space: nowrap;
}

.staff-table .btn-icon,
.position-card-grid .btn-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.position-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
}

.position-card-grid .card {
  min-width: 0;
  padding: 18px;
}

.position-card-grid .card h4,
.position-card-grid .card p {
  overflow-wrap: anywhere;
}

#staffPagination>div {
  gap: 10px;
  flex-wrap: wrap;
}

#staffPagination>div>div {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#addStaffModal .modal-content,
#staffDetailModal .modal-content {
  width: min(560px, calc(100vw - 32px));
  max-height: min(90vh, 760px);
}

#addPositionModal .modal-content {
  width: min(640px, calc(100vw - 32px));
}

#addStaffModal .modal-body,
#staffDetailModal .modal-body,
#addPositionModal .modal-body {
  max-height: calc(90vh - 76px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#addStaffModal .modal-body>div[style*='grid-template-columns:1fr 1fr'],
#staffDetailModal .modal-body>div[style*='grid-template-columns:1fr 1fr'],
#addStaffModal #staffAccountHelp+div,
#addPositionModal .tab-panel>div[style*='grid-template-columns:1fr 1fr'] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#addStaffModal .modal-body>div:last-child,
#addPositionModal .modal-body>div:last-child {
  flex-wrap: wrap;
}

#addPositionModal .position-modal-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#addPositionModal .position-modal-tabs .tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

#addPositionModal .tab-panel label {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (hover: none) and (pointer: coarse) {

  .staff-table .btn-icon,
  .position-card-grid .btn-icon {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 768px) {
  #instStaff .section-header {
    gap: 12px;
    margin-bottom: 18px;
  }

  #instStaff .section-header h2 {
    font-size: 21px;
  }

  #instStaff .section-header>div:last-child {
    justify-content: flex-start;
    flex-basis: 100%;
  }

  #instStaff .search-box {
    max-width: none;
  }

  #staffFilters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #staffFilters select {
    min-width: 0;
    width: 100%;
  }

  #staffPagination>div {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  #staffPagination>div>span {
    flex: 1 1 100%;
  }

  #staffPagination>div>div {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .staff-table-wrap {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .staff-table,
  .staff-table thead,
  .staff-table tbody,
  .staff-table tr,
  .staff-table th,
  .staff-table td {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .staff-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .staff-table thead {
    display: none;
  }

  .staff-table tbody {
    display: grid;
    gap: 12px;
  }

  .staff-table tr {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    overflow: hidden;
  }

  .staff-table td {
    display: grid;
    grid-template-columns: minmax(88px, 36%) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    overflow-wrap: anywhere;
  }

  .staff-table td::before {
    color: var(--text-tertiary);
    content: '';
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .staff-table td:nth-child(1)::before {
    content: 'Ad Soyad';
  }

  .staff-table td:nth-child(2)::before {
    content: 'Rol';
  }

  .staff-table td:nth-child(3)::before {
    content: 'Pozisyon';
  }

  .staff-table td:nth-child(4)::before {
    content: 'Telefon';
  }

  .staff-table td:nth-child(5)::before {
    content: 'E-posta';
  }

  .staff-table td:nth-child(6)::before {
    content: 'Durum';
  }

  .staff-table td:nth-child(7) {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    border-bottom: 0;
  }

  .staff-table td:nth-child(7)::before {
    content: 'Ä°ÅŸlemler';
    margin-right: auto;
    align-self: center;
  }

  #addStaffModal .modal-body>div[style*='grid-template-columns:1fr 1fr'],
  #staffDetailModal .modal-body>div[style*='grid-template-columns:1fr 1fr'],
  #addStaffModal #staffAccountHelp+div,
  #addPositionModal .tab-panel>div[style*='grid-template-columns:1fr 1fr'] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  #instStaff .section-header>div:last-child {
    flex-direction: column;
    align-items: stretch;
  }

  #instStaff .section-header .btn,
  #staffFilters select,
  #staffPagination .btn {
    width: 100%;
  }

  #staffFilters {
    grid-template-columns: 1fr;
  }

  #staffPagination>div>div {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #staffPagination>div>div span {
    align-self: center;
    justify-self: center;
  }

  #addStaffModal .modal-content,
  #staffDetailModal .modal-content,
  #addPositionModal .modal-content {
    width: 100vw;
    max-width: 100vw !important;
    max-height: 100dvh;
    border-radius: 0;
  }

  #addStaffModal .modal-body,
  #staffDetailModal .modal-body,
  #addPositionModal .modal-body {
    max-height: calc(100dvh - 64px);
  }

  #addStaffModal .modal-body>div:last-child .btn,
  #addPositionModal .modal-body>div:last-child .btn {
    width: 100%;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  #instStaff .section-header {
    margin-bottom: 12px;
  }

  #instStaff .section-tabs {
    margin-bottom: 12px;
  }

  #addStaffModal .modal-content,
  #staffDetailModal .modal-content,
  #addPositionModal .modal-content {
    max-height: 96vh;
  }

  #addStaffModal .modal-body,
  #staffDetailModal .modal-body,
  #addPositionModal .modal-body {
    max-height: calc(96vh - 60px);
  }
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--card-bg);
  color: var(--text-primary);
  letter-spacing: 0.1px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  border-color: var(--border-color);
  box-shadow: var(--shadow-xs);
}

.btn:hover {
  background: var(--hover-bg);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn:active {
  transform: scale(0.97) translateY(0);
  box-shadow: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(44, 62, 140, 0.25);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
  box-shadow: 0 4px 14px rgba(44, 62, 140, 0.35);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--secondary-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  background: var(--hover-bg);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.btn-success {
  background: var(--success-color);
  color: #fff;
  border-color: var(--success-color);
  box-shadow: 0 2px 8px rgba(44, 110, 44, 0.25);
}

.btn-success:hover {
  opacity: 0.9;
  color: #fff;
  box-shadow: 0 4px 14px rgba(44, 110, 44, 0.35);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--danger-color);
  color: #fff;
  border-color: var(--danger-color);
  box-shadow: 0 2px 8px rgba(177, 59, 59, 0.25);
}

.btn-danger:hover {
  opacity: 0.9;
  color: #fff;
  box-shadow: 0 4px 14px rgba(177, 59, 59, 0.35);
  transform: translateY(-1px);
}

.btn-warning {
  background: var(--warning-color);
  color: #1a1a1a;
  border-color: var(--warning-color);
  box-shadow: 0 2px 8px rgba(200, 140, 0, 0.25);
}

.btn-warning:hover {
  opacity: 0.9;
  box-shadow: 0 4px 14px rgba(200, 140, 0, 0.35);
  transform: translateY(-1px);
}

.btn-small {
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 6px;
  gap: 5px;
  min-height: 30px;
  line-height: 1;
}

/* Ghost / outline variant — subtle, modern */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
  box-shadow: none;
}

.btn-ghost:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
  border-color: transparent;
  box-shadow: none;
}

.btn.btn-small.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
}

.btn.btn-small.btn-ghost:hover {
  border-color: var(--primary-color, #2c3e8c);
}

.btn.btn-small.btn-ghost.btn-ghost-danger:hover {
  color: var(--danger-color);
  border-color: color-mix(in srgb, var(--danger-color) 42%, transparent);
  background: color-mix(in srgb, var(--danger-color) 10%, transparent);
}

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

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13.5px;
  letter-spacing: 0.01em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  background: var(--input-bg);
  color: var(--input-text);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-group select {
  font-size: 13.5px;
  font-weight: 500;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: var(--border-strong);
  background: var(--input-bg-hover);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
  background: var(--input-bg);
}

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

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface);
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-row .form-group {
  flex: 1;
}

.form-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 20px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.form-section-title:first-child {
  margin-top: 0;
}

.field-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.form-error {
  background: color-mix(in srgb, var(--danger-color) 10%, transparent);
  border: 1px solid var(--danger-color);
  border-radius: var(--input-radius);
  padding: 10px 14px;
  color: var(--danger-color);
  font-size: 13px;
  margin-top: 12px;
}

.required {
  color: var(--danger-color);
}

/* Input validation states */
.form-group input.error,
.form-group input.error:focus {
  border-color: var(--danger-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-color) 20%, transparent);
}

.form-group input.success,
.form-group input.success:focus {
  border-color: var(--success-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-color) 20%, transparent);
}

/* Select dropdown arrow */
.form-group select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: var(--select-arrow-size);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

[data-theme='dark'] .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.form-group select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232c3e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .form-group select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c7cba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ── Standalone form inputs (used in SMS settings, etc.) ── */
.form-input {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font);
  font-size: 14px;
  background: var(--input-bg);
  color: var(--input-text);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.form-input {
  appearance: auto;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

select.form-input:focus {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

.form-input:hover {
  border-color: var(--border-strong);
  background: var(--input-bg-hover);
}

.form-input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

.form-input::placeholder {
  color: var(--input-placeholder);
}

.form-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface);
}

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

/* ─── Search ──────────────────────────────────────────────────── */
.search-box {
  margin-bottom: 20px;
}

.search-box input {
  width: 100%;
  max-width: 380px;
  min-height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font);
  font-size: 14px;
  background: var(--input-bg);
  color: var(--input-text);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.search-box input:hover {
  border-color: var(--border-strong);
}

.search-box input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

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

/* ─── Lesson Cards Grid ───────────────────────────────────────────────── */
.lesson-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.lesson-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.lesson-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.lesson-card-header {
  padding: 18px 20px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-top: 3px solid var(--accent);
}

.lesson-card-info h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}

.lesson-card-subject {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.lesson-card-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.lesson-card-meta {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--border-color);
  background: var(--secondary-bg);
}

.lesson-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.lesson-meta-item .meta-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.lesson-card-actions {
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ─── Lesson Type Tabs ──────────────────────────────────────────────────── */
.lesson-type-tab.active {
  background: var(--accent) !important;
  color: #fff !important;
}

.lesson-type-tab:hover:not(.active) {
  background: var(--card-bg);
}

/* ─── Group Lesson Modal — Schedule Slots ──────────────────────────────── */
.ws-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--secondary-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.ws-slot select {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
  min-width: 90px;
}

.ws-slot .ws-room {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
}

/* ─── Session Rows ────────────────────────────────────────────────────── */
.session-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--secondary-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.session-row input[type='date'],
.session-row input[type='text'] {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
}

.session-row select {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
  min-width: 80px;
}

/* ─── Lesson Participants Modal ────────────────────────────────────────── */
.lp-participant-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  margin-bottom: 6px;
  background: var(--card-bg);
}

.lp-participant-item.selectable {
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}

.lp-participant-item.selectable:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.lp-participant-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.lp-participant-class,
.lp-participant-grade {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ─── Attendance Modal ─────────────────────────────────────────────────── */
.att-participant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--secondary-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  margin-bottom: 6px;
}

.att-student-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.att-status-btns {
  display: flex;
  gap: 6px;
}

.att-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.att-btn:hover {
  transform: scale(1.1);
  border-color: var(--accent);
}

.att-btn.present.active {
  background: var(--success-bg);
  border-color: var(--success-color);
}

.att-btn.absent.active {
  background: var(--danger-bg);
  border-color: var(--danger-color);
}

.att-btn.late.active {
  background: var(--warning-bg);
  border-color: var(--warning-color);
}

/* Lesson management polish */
#groupLessonsSection .section-header {
  align-items: flex-start;
  gap: 16px;
}

#groupLessonsSection .section-header>div {
  justify-content: flex-end;
}

.lesson-inline-icon,
.lesson-meta-item .meta-icon,
.lp-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  flex-shrink: 0;
}

.lesson-inline-icon svg,
.lesson-meta-item .meta-icon svg,
.lp-add-icon svg {
  width: 1em;
  height: 1em;
  stroke-width: 2;
}

.lesson-card-badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.lesson-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.lesson-schedule-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.lesson-card-actions .btn,
#glAddBtn,
#glAddWeekSlot,
#glAddSession,
#glSaveBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.lp-remove-btn {
  width: 34px;
  min-width: 34px;
  padding-inline: 0;
}

.lp-add-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
}

.att-btn svg,
.lp-remove-btn svg,
.ws-slot .btn svg,
.session-row .btn svg {
  width: 16px;
  height: 16px;
}

.att-btn {
  color: var(--text-secondary);
}

.att-btn.present.active {
  color: var(--success-color);
}

.att-btn.absent.active {
  color: var(--danger-color);
}

.att-btn.late.active {
  color: var(--warning-color);
}

.slot-separator {
  color: var(--text-tertiary);
  font-weight: 700;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.card:hover::before {
  transform: scaleX(1);
}

.card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card p {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 8px 0;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.card p strong {
  color: var(--text-primary);
  font-weight: 500;
  min-width: 110px;
  flex-shrink: 0;
}

.card-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Table ───────────────────────────────────────────────────── */
.table-container {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
}

thead {
  background: var(--secondary-bg);
}

th {
  padding: 14px 20px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  white-space: nowrap;
}

td {
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-primary);
  vertical-align: middle;
}

tbody tr {
  transition: var(--transition);
}

tbody tr:hover {
  background: var(--hover-bg);
}

tbody tr:first-child td {
  border-top: none;
}

/* ═══════════════════════════════════════════════════════
   STATS — Completely redesigned stat cards
   ═══════════════════════════════════════════════════════ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

/* Base stat card — horizontal layout with left icon + right text */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: var(--shadow-xs);
}

/* Gradient stripe at top */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sc-accent, var(--accent));
  opacity: 0.8;
}

/* Decorative circle in corner */
.stat-card::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--sc-accent, var(--accent));
  opacity: 0.05;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  pointer-events: none;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--border-strong);
}

.stat-card:hover::after {
  opacity: 0.09;
  transform: scale(1.15) translate(-6px, -6px);
}

/* Icon box — left side */
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--sc-bg, var(--accent-light));
  flex-shrink: 0;
  line-height: 1;
}

/* Text block */
.stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.stat-card h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card .stat-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1px;
  line-height: 1.1;
}

.stat-card .stat-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* Overview stats grid — responsive grid for Kurum Genel Bakış */
.stats-grid-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  align-items: stretch;
}

.stats-grid-overview .stat-card {
  aspect-ratio: unset;
  min-height: 88px;
  border-radius: 10px;
  padding: 14px;
  gap: 10px;
  flex-direction: row;
  align-items: center;
  text-align: left;
  justify-content: flex-start;
}

.stats-grid-overview .stat-card::before {
  display: none;
}

.stats-grid-overview .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 18px;
  flex-shrink: 0;
}

.stats-grid-overview .stat-body {
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  padding: 0;
  min-width: 0;
}

.stats-grid-overview .stat-card h3 {
  font-size: 11px;
  text-align: left;
  margin: 0;
  white-space: normal;
  overflow: visible;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.stats-grid-overview .stat-card .stat-value {
  font-size: 22px;
  text-align: left;
  line-height: 1.1;
  font-weight: 800;
}

.stats-grid-overview .stat-card .stat-sub {
  font-size: 10px;
  text-align: left;
  color: var(--text-tertiary);
  white-space: normal;
  overflow: visible;
}

@media (max-width: 1400px) {
  .stats-grid-overview {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 1100px) {
  .stats-grid-overview {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 800px) {
  .stats-grid-overview {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 580px) {
  .stats-grid-overview {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .stats-grid-overview .stat-card {
    min-height: 72px;
    padding: 10px 12px;
    gap: 10px;
  }

  .stats-grid-overview .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .stats-grid-overview .stat-card .stat-value {
    font-size: 18px;
  }
}

@media (max-width: 380px) {
  .stats-grid-overview {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Base stat card */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: var(--transition-slow);
  box-shadow: var(--shadow-xs);
}

/* Decorative circle in corner */
.stat-card::after {
  content: '';
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--sc-accent, var(--accent));
  opacity: 0.07;
  transition: var(--transition-slow);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.stat-card:hover::after {
  opacity: 0.13;
  transform: scale(1.25) translate(-6px, -6px);
}

/* Icon box */
.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--sc-bg, var(--accent-light));
  flex-shrink: 0;
  line-height: 1;
}

[data-theme='dark'] .stat-icon {
  background: var(--sc-bg-dark, rgba(92, 124, 186, 0.1));
}

/* Text block */
.stat-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.stat-card h3 {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.3;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1px;
  line-height: 1.15;
}

.stat-card .stat-sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* Compact stats grid for institution overview */
.stats-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stats-grid-compact .stat-card {
  padding: 14px 16px;
  gap: 12px;
  border-radius: 10px;
  flex-direction: row;
  align-items: center;
}

.stats-grid-compact .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 18px;
  flex-shrink: 0;
}

.stats-grid-compact .stat-body {
  align-items: flex-start;
  padding: 0;
  gap: 2px;
}

.stats-grid-compact .stat-card h3 {
  font-size: 10px;
}

.stats-grid-compact .stat-card .stat-value {
  font-size: 20px;
}

.stats-grid-compact .stat-card .stat-sub {
  font-size: 10px;
}

/* Archived institution cards */
.archived-inst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.archived-inst-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--warning-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  opacity: 0.85;
  transition: var(--transition-slow);
}

.archived-inst-card:hover {
  opacity: 1;
  box-shadow: var(--shadow-md);
}

.archived-inst-card h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.archived-inst-card p {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 0 0 4px;
}

.archived-inst-card .archived-date {
  font-size: 10px;
  color: var(--warning-color);
  margin-top: 6px;
}

.archived-inst-group {
  margin-bottom: 20px;
}

.archived-inst-title {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.pagination-wrap {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.pagination-info {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 0 8px;
}

.pagination-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Compact insight for overview section */
.inst-stats-section>.stat-insight {
  padding: 10px 14px;
  font-size: 12.5px;
  margin-bottom: 16px;
}

/* Compact section heading for overview */
.inst-stats-section>h3 {
  font-size: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
}

/* ─── Notes & Reminders Styles ────────────────────────────────────── */
.notes-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.notes-search {
  flex: 1;
  max-width: 300px;
}

.notes-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  min-height: 100px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

.notes-grid>.empty-state {
  grid-column: 1 / -1;
}

.notes-grid>.note-card {
  align-self: start;
}

.note-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  transition: var(--transition);
  border-left: 3px solid var(--border-color);
  min-width: 0;
  width: 100%;
  min-height: 120px;
  position: relative;
}

.note-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.note-card.sticky {
  background: var(--accent-light);
  border-left-color: var(--accent) !important;
}

.note-card.sticky::before {
  content: '📌';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
}

.note-card.is-pinned {
  border-left-color: var(--info-color) !important;
}

.note-card.is-pinned::after {
  content: '📍';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
}

.pin-indicator {
  font-size: 10px;
  margin-left: 4px;
}

.note-card.sticky.is-pinned::before {
  content: '📌';
  top: 8px;
  right: 24px;
}

.note-card.sticky.is-pinned::after {
  content: '📍';
  top: 8px;
  right: 8px;
}

.note-card.priority-low {
  border-left-color: var(--info-color);
}

.note-card.priority-medium {
  border-left-color: var(--warning-color);
}

.note-card.priority-high {
  border-left-color: #ff9800;
}

.note-card.priority-urgent {
  border-left-color: var(--danger-color);
}

.note-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.note-priority-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--secondary-bg);
}

.note-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.note-card:hover .note-actions {
  opacity: 1;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.btn-icon:hover {
  opacity: 1;
}

.note-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.note-content {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 10px;
  line-height: 1.5;
  max-height: 60px;
  overflow: hidden;
}

.note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-tertiary);
}

.note-category {
  background: var(--secondary-bg);
  padding: 2px 8px;
  border-radius: 8px;
}

/* Sticky Notes Panel */
.sticky-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.sticky-panel.pinned {
  position: relative;
  max-height: none;
  height: 300px;
}

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

.sticky-panel-header h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin: 0;
}

.sticky-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.sticky-notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sticky-note {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.sticky-note:hover {
  background: var(--hover-bg);
}

.sticky-note.is-pinned::after {
  content: '📍';
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
}

.sticky-note-priority {
  width: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.sticky-note.priority-low .sticky-note-priority {
  background: var(--info-color);
}

.sticky-note.priority-medium .sticky-note-priority {
  background: var(--warning-color);
}

.sticky-note.priority-high .sticky-note-priority {
  background: #ff9800;
}

.sticky-note.priority-urgent .sticky-note-priority {
  background: var(--danger-color);
}

.sticky-note-content strong {
  font-size: 12px;
  display: block;
  margin-bottom: 2px;
}

.sticky-note-content p {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Reminder Cards */
.reminder-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}

.reminder-card.completed {
  opacity: 0.5;
  text-decoration: line-through;
}

.reminder-time {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 2px;
}

.reminder-title {
  font-size: 13px;
  color: var(--text-primary);
}

.reminder-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.reminder-actions {
  display: flex;
  gap: 4px;
}

/* Note Editor Modal Styles */
.note-editor-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.note-editor-section .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.note-editor-section .form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.note-editor-section .form-row .form-group {
  flex: 1;
  min-width: 140px;
}

.note-quick-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note-quick-input input,
.note-quick-input textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--text-primary);
  font-size: 14px;
}

.note-quick-input textarea {
  min-height: 100px;
  resize: vertical;
}

.note-advanced {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.note-advanced summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  user-select: none;
}

.note-advanced[open] {
  padding-top: 14px;
}

.note-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.note-settings select {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
  cursor: pointer;
}

.note-settings label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.incident-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.incident-fields input,
.incident-fields textarea {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
}

.incident-fields textarea {
  grid-column: 1 / -1;
  min-height: 60px;
  resize: vertical;
}

#instNotes {
  max-width: 100%;
  overflow-x: hidden;
}

#instNotes .notes-section {
  gap: clamp(12px, 2vw, 20px);
}

#instNotes .notes-header {
  align-items: center;
  gap: 12px;
}

#instNotes .notes-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  line-height: 1.25;
}

#instNotes .notes-header>div {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: min(360px, 100%);
  flex: 1 1 360px;
  justify-content: flex-end;
}

#instNotes .notes-search {
  min-width: 180px;
  max-width: 320px;
}

#instNotes .notes-search input {
  min-height: 40px;
}

#instNotes .notes-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(10px, 1.6vw, 14px);
  overflow: visible;
}

#instNotes .note-card,
#instNotes .sticky-panel,
#instNotes .reminder-card {
  min-width: 0;
}

#instNotes .note-card {
  padding: clamp(12px, 1.8vw, 14px);
}

#instNotes .note-card-header,
#instNotes .note-footer,
#instNotes .reminder-card,
#instNotes .sticky-panel-header {
  gap: 8px;
}

#instNotes .note-actions {
  opacity: 1;
  flex-shrink: 0;
}

#instNotes .note-title,
#instNotes .note-content,
#instNotes .sticky-note-content,
#instNotes .reminder-info,
#instNotes .reminder-title,
#instNotes .reminder-desc {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instNotes .note-footer {
  flex-wrap: wrap;
}

#instNotes .sticky-panel.pinned {
  height: auto;
  max-height: clamp(220px, 34vh, 300px);
}

#instNotes .sticky-note-content {
  flex: 1;
}

#instNotes .notes-pagination,
#instNotes .sticky-pagination,
#instNotes .reminder-pagination {
  flex-wrap: wrap;
}

#instNotes .reminder-info {
  flex: 1;
}

#instNotes .reminder-actions {
  flex-shrink: 0;
}

#noteEditorModal .modal-content,
#reminderModal .modal-content {
  width: min(720px, 96vw);
}

#noteEditorModal .modal-body,
#reminderModal .modal-body {
  max-height: min(68vh, 720px);
  overflow-y: auto;
}

#noteEditorModal .modal-footer,
#reminderModal .modal-footer {
  flex-wrap: wrap;
}

#noteEditorModal .note-editor-section,
#noteEditorModal .note-quick-input,
#noteEditorModal .note-advanced,
#noteEditorModal .note-settings,
#noteEditorModal .form-group,
#reminderModal .form-group {
  min-width: 0;
}

#noteEditorModal .note-quick-input input,
#noteEditorModal .note-quick-input textarea,
#noteEditorModal .note-settings select,
#noteEditorModal .incident-fields input,
#noteEditorModal .incident-fields textarea,
#reminderModal input,
#reminderModal textarea,
#reminderModal select {
  max-width: 100%;
}

@media (max-width: 768px) {
  #instNotes .notes-header {
    align-items: stretch;
  }

  #instNotes .notes-header>div {
    flex-basis: 100%;
    justify-content: stretch;
  }

  #instNotes .notes-search {
    flex: 1 1 auto;
    max-width: none;
  }

  #instNotes .sticky-panel {
    max-height: none;
  }

  #instNotes .sticky-panel.pinned {
    max-height: 260px;
  }

  #noteEditorModal .modal-body,
  #reminderModal .modal-body {
    max-height: min(72vh, 760px);
  }

  #noteEditorModal .incident-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  #instNotes .notes-section {
    gap: 12px;
  }

  #instNotes .notes-header>div {
    flex-direction: column;
  }

  #instNotes .notes-search,
  #instNotes .notes-header .btn {
    width: 100%;
  }

  #instNotes .notes-header .btn {
    justify-content: center;
  }

  #instNotes .notes-grid {
    grid-template-columns: 1fr;
  }

  #instNotes .note-card-header,
  #instNotes .reminder-card {
    align-items: flex-start;
  }

  #instNotes .reminder-card {
    flex-direction: column;
  }

  #instNotes .reminder-actions {
    width: 100%;
    justify-content: flex-end;
  }

  #instNotes .notes-pagination .btn,
  #instNotes .reminder-pagination .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  #noteEditorModal .modal-content,
  #reminderModal .modal-content {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  #noteEditorModal .modal-body,
  #reminderModal .modal-body {
    max-height: calc(100vh - 150px);
  }

  #noteEditorModal .modal-footer .btn,
  #reminderModal .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  #noteEditorModal .note-advanced {
    padding: 10px;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  #instNotes .notes-section {
    gap: 10px;
  }

  #instNotes .sticky-panel.pinned {
    max-height: 180px;
  }

  #noteEditorModal .modal-body,
  #reminderModal .modal-body {
    max-height: calc(100vh - 118px);
  }
}

/* Reminder Modal */

/* Sticky Notes Panel */
.sticky-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.sticky-panel.pinned {
  position: relative;
  max-height: none;
  height: 300px;
}

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

.sticky-panel-header h4 {
  font-size: 12px;
  color: var(--text-tertiary);
}

.survey-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.survey-meta-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}

.survey-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border-color);
  gap: 8px;
}

.survey-participation-bar {
  flex: 1;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  max-width: 80px;
}

.survey-participation-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.survey-participation-text {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  min-width: 36px;
  text-align: right;
}

.survey-expired-warning {
  margin: 0 16px 12px;
  padding: 8px 12px;
  background: var(--danger-bg);
  border: 1px solid rgba(177, 59, 59, 0.2);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--danger-color);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.pagination-info {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Student Survey List */
.student-survey-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.student-survey-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 0;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  position: relative;
}

.student-survey-card:hover {
  border-color: var(--accent);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px var(--accent-subtle);
  transform: translateY(-2px);
}

.student-survey-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.student-survey-disabled:hover {
  border-color: var(--border-color);
  box-shadow: none;
  transform: none;
}

.student-survey-card-top {
  height: 3px;
  width: 100%;
}

.student-survey-card-top.pending {
  background: linear-gradient(90deg, var(--accent), var(--success-color));
}

.student-survey-card-top.completed {
  background: linear-gradient(90deg, var(--success-color), #3d8b3d);
}

.student-survey-card-top.expired {
  background: linear-gradient(90deg, var(--text-tertiary), var(--border-strong));
}

.student-survey-card-inner {
  padding: 14px 16px;
}

.student-survey-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.student-survey-type {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.student-survey-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.student-survey-status.pending {
  background: var(--accent-subtle);
  color: var(--accent);
}

.student-survey-status.completed {
  background: var(--success-bg);
  color: var(--success-color);
}

.student-survey-status.expired {
  background: var(--secondary-bg);
  color: var(--text-tertiary);
}

.student-survey-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.student-survey-description {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.student-survey-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.student-survey-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s;
}

.student-survey-card:hover .student-survey-cta {
  background: var(--accent-hover);
}

.student-survey-cta svg {
  width: 14px;
  height: 14px;
}

/* ─── Survey Form (Student Fill) ─────────────────────────────────── */
.survey-question {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--secondary-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  transition: border-color 0.2s;
}

.survey-question:hover {
  border-color: var(--border-strong);
}

.survey-question-text {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.survey-question-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.survey-question-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.survey-option-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
  color: var(--text-primary);
}

.survey-option-label:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.survey-option-label.selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.survey-option-label input[type='radio'],
.survey-option-label input[type='checkbox'] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.survey-rating-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.survey-rating-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  min-width: 52px;
  transition: all 0.15s ease;
  font-size: 13px;
  color: var(--text-primary);
}

.survey-rating-label:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
  transform: translateY(-2px);
}

.survey-rating-label.selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.survey-rating-label input[type='radio'] {
  accent-color: var(--accent);
}

.survey-rating-stars {
  font-size: 18px;
  letter-spacing: 2px;
}

.survey-text-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--input-bg);
  color: var(--input-text);
  resize: vertical;
  font-family: var(--font);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  line-height: 1.5;
}

.survey-text-input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

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

/* Empty state icon */
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-state-icon svg {
  width: 48px;
  height: 48px;
}

/* ─── Survey Question Builder (Teacher/Institution) ───────────────────── */
.survey-q-builder-item {
  background: var(--secondary-bg);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s;
  position: relative;
}

.survey-q-builder-item:hover {
  border-color: var(--border-strong);
}

.survey-q-builder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.survey-q-builder-num {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.survey-q-builder-num::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.survey-q-type-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent-subtle);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.survey-q-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: var(--font);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.survey-q-input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

.survey-q-input::placeholder {
  color: var(--input-placeholder);
}

.form-select {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--input-padding-y) 40px var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font);
  font-size: 14px;
  background: var(--input-bg);
  color: var(--input-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: var(--select-arrow-size);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.form-select:hover {
  border-color: var(--border-strong);
  background-color: var(--input-bg-hover);
}

.form-select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232c3e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.form-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--surface);
}

[data-theme='dark'] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .form-select:hover {
  background-color: var(--input-bg-hover);
}

[data-theme='dark'] .form-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c7cba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.form-select-sm {
  min-height: 36px;
  padding: 6px 36px 6px 10px;
  font-size: 13px;
  background-position: right 10px center;
}

.form-select-lg {
  min-height: 50px;
  padding: 12px 48px 12px 16px;
  font-size: 16px;
  background-position: right 18px center;
  background-size: 14px;
}

/* Global select polish: keep the custom arrow stable on hover/focus. */
:root {
  --select-arrow-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] {
  --select-arrow-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

select.form-select,
.form-group select.form-select,
.form-group select {
  background-color: var(--input-bg);
  background-image: var(--select-arrow-url) !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 12px !important;
  padding-right: 40px;
  color: var(--input-text);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.form-select:hover,
.form-group select.form-select:hover,
.form-group select:hover {
  background-color: var(--input-bg-hover);
  background-image: var(--select-arrow-url) !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 12px !important;
}

select.form-select:focus,
.form-group select.form-select:focus,
.form-group select:focus {
  background-color: var(--input-bg);
  background-image: var(--select-arrow-url) !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 12px !important;
}

.form-select-sm,
select.form-select.form-select-sm {
  padding-right: 36px;
  background-position: right 10px center !important;
  background-size: 11px 11px !important;
}

.form-select-lg,
select.form-select.form-select-lg {
  padding-right: 48px;
  background-position: right 18px center !important;
  background-size: 14px 14px !important;
}

.survey-q-type-select {
  padding: 8px 36px 8px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 12px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: unset;
  box-sizing: border-box;
}

.survey-q-type-select:hover {
  border-color: var(--border-strong);
  background-color: var(--input-bg-hover);
}

.survey-q-type-select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%232c3e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .survey-q-type-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  border-color: var(--border-color);
}

[data-theme='dark'] .survey-q-type-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%235c7cba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.survey-q-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.survey-q-options-wrap {
  width: 100%;
}

.survey-q-options-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.survey-q-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.survey-q-option-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.survey-q-option-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.survey-q-option-input {
  flex: 1;
  padding: 7px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: var(--font);
  transition: border-color 0.2s;
}

.survey-q-option-input:focus {
  outline: none;
  border-color: var(--input-border-focus);
}

.survey-q-option-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--danger-bg);
  color: var(--danger-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s;
  flex-shrink: 0;
}

.survey-q-option-remove:hover {
  background: var(--danger-color);
  color: #fff;
  transform: scale(1.1);
}

.survey-q-add-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
  margin-top: 4px;
}

.survey-q-add-option:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

/* ─── Survey Detail (Responses Table) ───────────────────────────────── */
.survey-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.survey-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.survey-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.survey-stat-card.responses::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

.survey-stat-card.target::before {
  background: linear-gradient(90deg, var(--info-color), #3a9e9e);
}

.survey-stat-card.participation::before {
  background: linear-gradient(90deg, var(--success-color), #3d8b3d);
}

.survey-stat-card.deadline::before {
  background: linear-gradient(90deg, var(--warning-color), #c97a2b);
}

.survey-stat-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.survey-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.survey-stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.survey-stat-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.survey-overview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.survey-overview-survey-info {
  flex: 1;
  min-width: 200px;
}

.survey-overview-survey-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.survey-overview-survey-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.survey-meta-item {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.survey-meta-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.survey-meta-badge.active {
  background: var(--success-color);
  color: #fff;
}

.survey-meta-badge.closed {
  background: var(--danger-color);
  color: #fff;
}

.survey-meta-badge.draft {
  background: var(--warning-color);
  color: #fff;
}

.survey-overview-stats {
  display: flex;
  gap: 16px;
}

.survey-overview-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  background: var(--secondary-bg);
  border-radius: var(--radius-lg);
  min-width: 70px;
}

.survey-overview-stat.good {
  background: var(--success-color);
  color: #fff;
}

.survey-overview-stat.medium {
  background: var(--warning-color);
  color: #fff;
}

.survey-overview-stat.low {
  background: var(--danger-color);
  color: #fff;
}

.survey-overview-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: inherit;
}

.survey-overview-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.survey-overview-participation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.survey-participation-bar-container {
  flex: 1;
  height: 8px;
  background: var(--secondary-bg);
  border-radius: 4px;
  overflow: hidden;
}

.survey-participation-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--success-color), var(--accent));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.survey-participation-text {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.survey-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0;
}

.survey-tab {
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.15s;
  font-weight: 600;
  font-family: var(--font);
  position: relative;
}

.survey-tab:hover {
  color: var(--text-primary);
  background: var(--secondary-bg);
}

.survey-tab.active {
  color: var(--accent);
  background: var(--secondary-bg);
}

.survey-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

.survey-section-title {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.survey-q-analysis {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 20px;
  margin-bottom: 14px;
  transition: border-color 0.2s;
}

.survey-q-analysis:hover {
  border-color: var(--border-strong);
}

.survey-q-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.survey-q-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.survey-q-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.survey-q-count {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 600;
  padding: 3px 10px;
  background: var(--secondary-bg);
  border-radius: 20px;
  flex-shrink: 0;
}

.survey-q-type-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--accent-subtle);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.survey-q-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.survey-q-option {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}

.survey-q-option-text {
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.survey-q-option-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.survey-q-option-count {
  min-width: 60px;
  text-align: right;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.survey-q-bar {
  width: 120px;
  height: 8px;
  background: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.survey-q-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.survey-q-bar-fill.animated {
  animation: surveyBarFill 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes surveyBarFill {
  from {
    width: 0 !important;
  }
}

.survey-q-ratings {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.survey-q-rating-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--card-bg);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
}

.survey-q-rating-badge:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.survey-q-rating-stars {
  color: #f5a623;
  font-size: 14px;
  letter-spacing: 1px;
}

.survey-q-text-hint {
  color: var(--text-tertiary);
  font-size: 13px;
  font-style: italic;
  padding: 12px;
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 8px;
}

.survey-responses-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--secondary-bg);
  border-radius: var(--radius-lg);
  align-items: center;
}

.survey-filter-search {
  flex: 1;
  min-width: 180px;
  padding: 8px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 12px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: var(--font);
  transition: border-color 0.2s;
}

.survey-filter-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--input-shadow-focus);
}

.survey-filter-select {
  padding: 8px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 12px;
  background: var(--input-bg);
  color: var(--input-text);
  min-width: 110px;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.2s;
}

.survey-filter-select:focus {
  outline: none;
  border-color: var(--accent);
}

.survey-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 0;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  position: relative;
}

.survey-card:hover {
  border-color: var(--accent);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px var(--accent-subtle);
  transform: translateY(-2px);
}

.survey-card-top-bar {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

.survey-card-top-bar.draft {
  background: linear-gradient(90deg, var(--text-tertiary), var(--border-strong));
}

.survey-card-top-bar.published {
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

.survey-card-top-bar.closed {
  background: linear-gradient(90deg, var(--danger-color), #d47272);
}

.survey-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;
  gap: 12px;
}

.survey-card-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-subtle);
  color: var(--accent);
}

.survey-card-type-badge.teacher {
  background: rgba(92, 124, 186, 0.15);
  color: var(--accent);
}

.survey-card-type-badge.institution {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.survey-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.survey-card-body {
  padding: 12px 16px 16px;
}

.survey-card-title h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.survey-card-title h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.survey-card-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.survey-description {
  margin: 8px 0 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.survey-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.survey-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.survey-meta-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}

.survey-card-expired {
  opacity: 0.85;
}

.survey-card-expired:hover {
  opacity: 1;
}

.survey-responses-count {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-weight: 600;
}

.survey-responses-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.survey-responses-table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--secondary-bg);
  border-bottom: 2px solid var(--border-color);
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.survey-responses-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.survey-responses-table tr:last-child td {
  border-bottom: none;
}

.survey-responses-table tr:hover td {
  background: var(--secondary-bg);
}

.survey-student-name {
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.survey-student-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.survey-date {
  color: var(--text-tertiary);
  white-space: nowrap;
  font-size: 12px;
}

.survey-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.survey-answer-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--accent-subtle);
  border-radius: 20px;
  font-size: 11px;
  color: var(--text-primary);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.survey-no-responses {
  text-align: center;
  color: var(--text-tertiary);
  padding: 60px 20px;
  background: var(--secondary-bg);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--border-color);
}

.survey-no-responses-icon {
  font-size: 48px;
  margin-bottom: 12px;
  display: block;
}

.survey-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ─── Responsive Survey ─────────────────────────────────────────────── */
.survey-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .survey-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .survey-responses-table {
    font-size: 12px;
  }

  .survey-responses-table th,
  .survey-responses-table td {
    padding: 8px 10px;
  }

  .survey-q-bar {
    width: 80px;
  }

  .survey-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .survey-card-header {
    flex-direction: column;
    gap: 8px;
  }

  .survey-card-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .survey-meta {
    gap: 8px;
  }

  .survey-stat-card {
    padding: 12px;
  }

  .survey-stat-value {
    font-size: 22px;
  }

  .survey-q-option {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .survey-q-bar {
    width: 100%;
    order: 3;
  }

  .survey-tab {
    padding: 8px 14px;
    font-size: 12px;
  }
}

.pagination {
  flex-wrap: wrap;
}

/* ─── Admin Survey List ───────────────────────────────────────────────── */
.admin-surveys-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
  padding: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.admin-surveys-header .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-surveys-header .search-box {
  flex: 1;
  min-width: 200px;
}

.admin-surveys-header .search-box input {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  font-size: 13px;
  color: var(--input-text);
  font-family: var(--font);
  transition: border-color 0.2s;
}

.admin-surveys-header .search-box input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--input-shadow-focus);
}

.admin-surveys-filter-select {
  padding: 9px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.2s;
  min-width: 130px;
}

.admin-surveys-filter-select:focus {
  outline: none;
  border-color: var(--accent);
}

.admin-surveys-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
  padding-top: 4px;
  border-top: 1px solid var(--border-color);
}

.admin-surveys-stats-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-surveys-stats-count {
  font-weight: 800;
  color: var(--text-primary);
}

.admin-survey-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-survey-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 0;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  position: relative;
}

.admin-survey-card:hover {
  border-color: var(--accent);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px var(--accent-subtle);
  transform: translateY(-2px);
}

.admin-survey-card-top-bar {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

.admin-survey-card-top-bar.draft {
  background: linear-gradient(90deg, var(--text-tertiary), var(--border-strong));
}

.admin-survey-card-top-bar.closed {
  background: linear-gradient(90deg, var(--danger-color), #d47272);
}

.admin-survey-card-inner {
  padding: 16px;
}

.admin-survey-expired {
  opacity: 0.85;
}

.admin-survey-expired:hover {
  opacity: 1;
}

.admin-survey-expired .admin-survey-card-inner {
  cursor: pointer;
}

.admin-survey-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-survey-info {
  flex: 1;
  min-width: 0;
}

.admin-survey-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.admin-survey-title-row h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.admin-survey-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.admin-survey-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.admin-survey-description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-survey-owner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 8px 12px;
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}

.admin-survey-owner svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ─── Institution Survey Header ────────────────────────────────────────────── */
.inst-surveys-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
  padding: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.inst-surveys-header .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.inst-surveys-header .search-box {
  flex: 1;
  min-width: 200px;
}

.inst-surveys-header .search-box input {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  font-size: 13px;
  color: var(--input-text);
  font-family: var(--font);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.inst-surveys-header .search-box input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--input-shadow-focus);
}

.inst-surveys-filter-select {
  padding: 9px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.2s;
  min-width: 130px;
}

.inst-surveys-filter-select:focus {
  outline: none;
  border-color: var(--accent);
}

.inst-surveys-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
  padding-top: 4px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.inst-surveys-stats-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inst-surveys-stats-count {
  font-weight: 800;
  color: var(--text-primary);
}

/* ─── Survey Analysis Components ─────────────────────────────────────────────── */
.survey-analysis-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.survey-analysis-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 20px;
}

.survey-analysis-title {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.survey-analysis-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.survey-donut-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.survey-donut {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.survey-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.survey-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
}

.survey-donut-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.survey-class-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.survey-class-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.survey-class-stat-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.survey-class-stat-count {
  font-size: 12px;
  color: var(--text-tertiary);
}

.survey-class-stat-bar {
  height: 8px;
  background: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

.survey-class-stat-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: 4px;
  transition: width 0.5s ease;
}

.survey-rating-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.survey-rating-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.survey-rating-stat-question {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.survey-rating-stat-score {
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.survey-rating-bar {
  height: 8px;
  background: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

.survey-rating-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.survey-heatmap-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.survey-heatmap-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.survey-heatmap-label {
  font-size: 11px;
  color: var(--text-tertiary);
  width: 60px;
  flex-shrink: 0;
}

.survey-heatmap-cells {
  display: flex;
  gap: 3px;
  flex: 1;
}

.survey-heatmap-cell {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  transition: transform 0.15s;
}

.survey-heatmap-cell:hover {
  transform: scale(1.1);
}

/* ─── AI-01: Performance Heatmap Cells ────────────────────────────────────── */
.heatmap-cell {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.heat-good {
  background: #22c55e;
}

.heat-medium {
  background: #f59e0b;
}

.heat-bad {
  background: #ef4444;
}

/* ─── Admin Survey Detail ─────────────────────────────────────────────────────── */
.admin-survey-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--secondary-bg);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.admin-survey-detail-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-survey-detail-institution {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.admin-survey-detail-owner {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-survey-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Color variants — assign via class on .stat-card */
.stat-card.stat-blue {
  --sc-bg: #eff3fc;
  --sc-bg-dark: rgba(59, 89, 182, 0.15);
  --sc-accent: #3b58e8;
}

.stat-card.stat-green {
  --sc-bg: #ecf7e7;
  --sc-bg-dark: rgba(52, 160, 54, 0.15);
  --sc-accent: #2e9e3e;
}

.stat-card.stat-orange {
  --sc-bg: #fff0db;
  --sc-bg-dark: rgba(240, 145, 0, 0.15);
  --sc-accent: #e88a00;
}

.stat-card.stat-purple {
  --sc-bg: #f5ecfc;
  --sc-bg-dark: rgba(152, 67, 198, 0.15);
  --sc-accent: #8b47e0;
}

.stat-card.stat-red {
  --sc-bg: #fdeaea;
  --sc-bg-dark: rgba(230, 67, 67, 0.15);
  --sc-accent: #d94444;
}

.stat-card.stat-cyan {
  --sc-bg: #ddf7f8;
  --sc-bg-dark: rgba(28, 181, 184, 0.15);
  --sc-accent: #18a8ad;
}

.stat-card.stat-yellow {
  --sc-bg: #fff8db;
  --sc-bg-dark: rgba(240, 183, 0, 0.15);
  --sc-accent: #d4a200;
}

/* ═══════════════════════════════════════════════════════
   STATISTICS PANELS — Redesigned for clarity & elegance
   ═══════════════════════════════════════════════════════ */

/* ── Page-level stats layout ── */
.stats-page-header {
  margin-bottom: 32px;
}

.stats-page-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.stats-page-header p {
  font-size: 14px;
  color: var(--text-tertiary);
}

/* ── Common section wrapper ── */
.stats-section,
.inst-stats-section {
  margin-bottom: 24px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ── Section heading ── */
.stats-section h3,
.inst-stats-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Insight callout (açıklayıcı özet kutusu) ── */
.stat-insight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, var(--accent-subtle) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 1px solid var(--accent-light);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  border-radius: 10px;
}

.stat-insight-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.stat-insight strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ── Inline key-value detail row (stat context) ── */
.stat-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13.5px;
}

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

.stat-detail-label {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 140px;
  flex-shrink: 0;
}

.stat-detail-value {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Bar chart rows ── */
.bar-row,
.inst-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.bar-label,
.inst-bar-label {
  width: 160px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.bar-track,
.inst-bar-track {
  flex: 1;
  background: var(--secondary-bg);
  border-radius: 8px;
  height: 26px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  position: relative;
}

.bar-fill,
.inst-bar-fill {
  height: 100%;
  border-radius: 7px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  min-width: 6px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bar-val,
.inst-bar-val {
  font-size: 13px;
  font-weight: 700;
  min-width: 48px;
  text-align: right;
  color: var(--text-primary);
}

/* ── Bar meta tags (extra info beside bars) ── */
.bar-meta {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.bar-tag {
  font-size: 11.5px;
  color: var(--text-tertiary);
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
  font-weight: 500;
}

/* ── Heatmap Calendar (yatay — haftalar sütun, günler satır) ── */
.hm-cal {
  position: relative;
  overflow-x: auto;
  padding-bottom: 8px;
  min-width: max-content;
}

/* Header: day label column + week columns across top */
.hm-header {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}

.hm-day-label-col {
  width: 28px;
  flex-shrink: 0;
}

.hm-week-headers {
  display: flex;
  gap: 3px;
}

.hm-week-h {
  width: 14px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.3px;
  cursor: default;
}

/* Body: each row is a day of the week */
.hm-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hm-day-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hm-day-label {
  width: 28px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-align: right;
  flex-shrink: 0;
}

/* Cells for one day across all weeks */
.hm-day-week-cells {
  display: flex;
  gap: 3px;
}

/* Base cell */
.hm-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  cursor: default;
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
  flex-shrink: 0;
}

.hm-cell:hover {
  transform: scale(1.5);
  z-index: 10;
  filter: brightness(1.15);
}

.hm-cell-empty {
  background: transparent !important;
  pointer-events: none;
}

/* Legend */
.hm-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Popup */
.hm-popup {
  display: none;
  position: absolute;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 100;
  pointer-events: none;
  min-width: 130px;
  text-align: center;
}

.heatmap-popup-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.heatmap-popup-day {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.heatmap-popup-count {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
}

/* ── Top student / rank rows ── */
.top-student-row,
.inst-student-rank {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  margin-bottom: 8px;
  transition: var(--transition);
}

.top-student-row:hover,
.inst-student-rank:hover {
  background: var(--hover-bg);
  border-color: var(--border-strong);
  transform: translateX(3px);
}

.rank-badge,
.inst-rank-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.rank-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Mini badge (net score pill) ── */
.mini-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}

.mini-badge-green {
  background: var(--success-color);
  color: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}

.mini-badge-red {
  background: var(--danger-color);
  color: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}

.mini-count {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  white-space: nowrap;
}

/* ── Class stat table ── */
.class-stat-table td,
.class-stat-table th {
  padding: 11px 16px;
}

.class-stat-table td:nth-child(4) {
  font-weight: 700;
  color: var(--accent);
}

/* ── Section h4 (sub-heading inside section) ── */
.stats-section h4,
.inst-stats-section h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
  margin-bottom: 14px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-section h4::before,
.inst-stats-section h4::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Capacity progress bar ── */
.capacity-bar-wrap {
  background: var(--secondary-bg);
  border-radius: 10px;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
  position: relative;
}

.capacity-bar-fill {
  height: 100%;
  border-radius: 9px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.capacity-bar-label {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  z-index: 1;
}

/* ── Two-col stats layout ── */
.stats-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .stats-two-col {
    grid-template-columns: 1fr;
  }
}

/* ── Gender chart ── */
.gender-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gender-bar {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  height: 36px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.gender-bar-male,
.gender-bar-female {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  gap: 5px;
  transition: width 0.4s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.gender-bar-male {
  background: #3b82f6;
}

.gender-bar-female {
  background: #ec4899;
}

.gender-legend {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.gender-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.gender-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gender-legend-label {
  color: var(--text-secondary);
  font-size: 13px;
}

.gender-legend-count {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 16px;
}

.gender-legend-pct {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ── Gender Stats Tabs ── */
.gender-stats-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 8px;
}

.gender-tab-btn {
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.gender-tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.gender-tab-btn.active {
  color: var(--accent);
  background: var(--bg-secondary);
}

.gender-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

/* ── Gender Overview Grid ── */
.gender-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.gender-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
}

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

.gender-stat-card.gender-male::before {
  background: #3b82f6;
}

.gender-stat-card.gender-female::before {
  background: #ec4899;
}

.gender-stat-card.gender-other::before {
  background: #94a3b8;
}

.gender-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.gender-stat-card .gender-stat-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.gender-stat-card .gender-stat-count {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.gender-stat-card .gender-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.gender-stat-card .gender-stat-pct {
  font-size: 11px;
  color: var(--text-tertiary);
}

.gender-stat-card.gender-male .gender-stat-count {
  color: #3b82f6;
}

.gender-stat-card.gender-female .gender-stat-count {
  color: #ec4899;
}

.gender-stat-card.gender-other .gender-stat-count {
  color: #94a3b8;
}

.gender-stat-card.gender-male {
  border-color: rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), transparent);
}

.gender-stat-card.gender-female {
  border-color: rgba(236, 72, 153, 0.3);
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), transparent);
}

.gender-stat-card.gender-other {
  border-color: rgba(148, 163, 184, 0.3);
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.08), transparent);
}

.gender-stat-icon {
  font-size: 32px;
  line-height: 1;
}

.gender-stat-count {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.gender-stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.gender-stat-pct {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ── Attendance History ── */
.history-day-separator {
  display: flex;
  align-items: center;
  margin: 20px 0 12px;
  gap: 12px;
}

.history-day-separator::before,
.history-day-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.history-day-separator span {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  padding: 4px 12px;
  background: var(--bg-secondary);
  border-radius: 20px;
  border: 1px solid var(--border-color);
}

.history-record-card {
  border-left: 3px solid var(--accent);
}

/* ── Gender Stacked Bar ── */
.gender-stacked-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.gender-stacked-bar {
  display: flex;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.gender-stacked-segment {
  height: 100%;
  transition: width 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2px;
}

.gender-stacked-male {
  background: #3b82f6;
}

.gender-stacked-female {
  background: #ec4899;
}

.gender-stacked-other {
  background: #94a3b8;
}

.gender-stacked-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.gender-stacked-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-primary);
}

.gender-stacked-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Gender Bar Chart ── */
.gender-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.gender-chart-row {
  display: grid;
  grid-template-columns: 110px 1fr 100px;
  align-items: center;
  gap: 12px;
}

.gender-chart-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.gender-chart-track {
  height: 28px;
  background: var(--bg-secondary);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.gender-chart-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease;
}

.gender-chart-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
}

/* ── Gender Grade List ── */
.gender-grade-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gender-grade-row {
  display: grid;
  grid-template-columns: 80px 1fr 180px;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.gender-grade-row:hover {
  background: var(--border-color);
}

.gender-grade-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.gender-grade-bar-wrap {
  flex: 1;
}

.gender-grade-bar {
  display: flex;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.1);
}

.gender-grade-male {
  background: #3b82f6;
  transition: width 0.4s ease;
}

.gender-grade-female {
  background: #ec4899;
  transition: width 0.4s ease;
}

.gender-grade-stats {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
}

.gender-grade-male-count {
  color: #3b82f6;
  font-weight: 600;
}

.gender-grade-female-count {
  color: #ec4899;
  font-weight: 600;
}

.gender-grade-total {
  color: var(--text-tertiary);
  margin-left: auto;
}

@media (max-width: 640px) {
  .gender-grade-row {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
  }

  .gender-grade-label {
    grid-row: 1;
  }

  .gender-grade-bar-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .gender-grade-stats {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: center;
    gap: 16px;
  }

  .gender-grade-total {
    margin-left: 0;
  }
}

/* ── Donut Chart ── */
.donut-chart-container {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.donut-chart-wrap {
  position: relative;
  flex-shrink: 0;
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.donut-total-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.donut-total-label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.donut-legend-label {
  color: var(--text-primary);
  font-weight: 500;
  min-width: 50px;
}

.donut-legend-value {
  font-weight: 700;
  color: var(--text-primary);
  min-width: 30px;
}

.donut-legend-pct {
  color: var(--text-tertiary);
  font-size: 12px;
}

/* ── Line Chart ── */
.line-chart-wrap {
  position: relative;
  height: 180px;
  margin: 8px 0 16px;
  border-bottom: 1px solid var(--border-color);
}

.line-chart-grid-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--border-color);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 4px;
}

.line-chart-grid-line span {
  font-size: 10px;
  color: var(--text-tertiary);
  transform: translateY(-50%);
}

.line-chart-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 24px);
}

.line-chart-line {
  vector-effect: non-scaling-stroke;
}

.line-chart-area {
  vector-effect: non-scaling-stroke;
}

.line-chart-labels {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  display: flex;
  justify-content: space-between;
}

.line-chart-labels span {
  font-size: 10px;
  color: var(--text-tertiary);
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.line-chart-labels span:first-child {
  transform: translateX(0);
}

.line-chart-labels span:last-child {
  transform: translateX(-100%);
}

.line-chart-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding-top: 8px;
}

.line-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.line-chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Progress Ring ── */
.progress-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-ring-label {
  position: absolute;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Trend Indicator ── */
.trend-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.trend-indicator.trend-up {
  background: var(--success-bg);
  color: var(--success-color);
}

.trend-indicator.trend-down {
  background: var(--danger-bg);
  color: var(--danger-color);
}

.trend-indicator.trend-neutral {
  background: var(--secondary-bg);
  color: var(--text-tertiary);
}

/* ── KPI row (big numbers) ── */
.stats-kpi-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.stats-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 90px;
}

.stats-kpi-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1.5px;
  line-height: 1;
}

.stats-kpi-label {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stats-kpi-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ── Divider ── */
.stats-divider {
  width: 1px;
  background: var(--border-color);
  align-self: stretch;
  flex-shrink: 0;
}

/* ── Empty state inside stat section ── */
.stats-empty {
  padding: 24px 0 8px;
  color: var(--text-tertiary);
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Absence warning badge ── */
.absence-warn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--danger-bg);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
}

/* ── Student exam perf card ── */
.perf-subject-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13.5px;
}

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

.perf-subject-name {
  font-weight: 600;
  color: var(--text-primary);
}

.perf-score {
  font-weight: 700;
  min-width: 52px;
  text-align: right;
}

.perf-score.correct {
  color: var(--success-color);
}

.perf-score.wrong {
  color: var(--danger-color);
}

.perf-score.empty {
  color: var(--warning-color);
}

.perf-score.net {
  color: var(--accent);
  font-size: 15px;
}

/* ─────────────────────────────────────────── */

/* ─── Modal ───────────────────────────────────────────────────── */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  overflow-y: auto;
  padding: 24px;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
  animation: modalBgIn 0.2s ease;
}

@keyframes modalBgIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-content {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-large {
  max-width: 900px;
}

/* Modal body with scroll */
.modal {
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-body {
  padding: 26px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.modal-body h3 {
  margin: 28px 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-body h3:first-child {
  margin-top: 0;
}

.modal-footer {
  padding: 18px 26px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--secondary-bg);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Modal Tabs */
.modal-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.modal-tab-btn {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: -1px;
}

.modal-tab-btn:hover {
  color: var(--primary-color);
}

.modal-tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 600;
}

.modal-tab-content {
  display: none;
}

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

/* Student Relations */
.relation-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.relation-card-info {
  flex: 1;
}

.relation-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.relation-card-type {
  font-size: 12px;
  color: var(--text-secondary);
}

.relation-type-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.relation-type-badge.sibling {
  background: var(--accent-subtle);
  color: var(--accent);
}

.relation-type-badge.cousin {
  background: var(--info-bg);
  color: var(--info-color);
}

.relation-type-badge.twin {
  background: var(--warning-bg);
  color: var(--warning-color);
}

.relation-type-badge.other {
  background: var(--secondary-bg);
  color: var(--text-secondary);
}

/* Schedule type selector (modal) */
.schedule-type-selector {
  display: flex;
  gap: 10px;
}

.schedule-type-option {
  flex: 1;
  padding: 14px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
}

.schedule-type-option:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.schedule-type-option.selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.schedule-type-option input:checked+span {
  color: var(--accent);
}

.schedule-type-option input:checked~span {
  color: var(--accent);
}

.schedule-radio-label {
  flex: 1;
  padding: 14px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.schedule-radio-label:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.schedule-radio-label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.schedule-radio-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* ── Attendance Filter Bar ── */
.attendance-filter-bar {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.afb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.afb-field {
  flex: 1 1 160px;
  min-width: 140px;
  margin: 0;
}

.afb-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: block;
}

.afb-date-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 3px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  flex: 0 0 auto;
}

.afb-date-nav:hover {
  border-color: var(--border-strong);
}

.afb-date-nav:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.afb-date-nav input {
  background: transparent;
  border: none;
  min-height: unset;
  min-width: 115px;
  padding: 6px 8px;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
}

.afb-date-nav input:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

.afb-date-input {
  background: transparent;
  border: none;
  min-height: unset;
  min-width: 115px;
  padding: 6px 8px;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.afb-date-input:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

.afb-date-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.afb-date-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.afb-date-btn:active {
  background: var(--accent-subtle);
  color: var(--accent);
}

.afb-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.afb-actions .btn {
  min-width: 100px;
  font-weight: 600;
}

[data-theme='dark'] .afb-date-btn:hover {
  background: var(--hover-bg);
}

[data-theme='dark'] .afb-date-btn:active {
  background: var(--accent-subtle);
  color: var(--accent);
}

@media (max-width: 768px) {
  .attendance-filter-bar {
    padding: 14px 16px;
  }

  .afb-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .afb-field {
    flex: 1 1 100%;
    min-width: unset;
  }

  .afb-date-nav {
    width: 100%;
    justify-content: center;
  }

  .afb-date-nav input {
    flex: 1;
    min-width: unset;
    text-align: center;
  }

  .afb-actions {
    margin-left: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
  }

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

/* Legacy support */
.attendance-history-filters,
.attendance-date-filters {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.attendance-history-filters .form-group {
  flex: 1 1 160px;
  min-width: 140px;
}

.attendance-history-filters .form-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: block;
}

.date-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.date-nav-compact {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 3px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  flex: 0 0 auto;
}

.date-nav-compact:hover {
  border-color: var(--border-strong);
}

.date-nav-compact:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.date-input-compact {
  background: transparent;
  border: none;
  min-height: unset;
  min-width: 115px;
  padding: 6px 8px;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.date-input-compact:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

.btn-icon.btn-secondary {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-icon.btn-secondary:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.btn-icon.btn-secondary:active {
  background: var(--accent-subtle);
  color: var(--accent);
}

.form-group-compact {
  flex: 1 1 140px;
  min-width: 120px;
}

.form-group-compact label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: block;
}

.select-compact {
  width: 100%;
  min-height: 36px;
  padding: 6px 32px 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.select-compact:hover {
  border-color: var(--border-strong);
  background-color: var(--hover-bg);
}

.select-compact:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232c3e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .date-nav-compact {
  background-image: none;
}

[data-theme='dark'] .select-compact {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .select-compact:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235c7cba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .btn-icon.btn-secondary:hover {
  background: var(--hover-bg);
}

[data-theme='dark'] .btn-icon.btn-secondary:active {
  background: var(--accent-subtle);
  color: var(--accent);
}

@media (max-width: 768px) {

  .attendance-history-filters,
  .attendance-date-filters {
    padding: 14px 16px;
  }

  .attendance-history-filters .form-group {
    flex: 1 1 100%;
    min-width: unset;
  }

  .date-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .date-nav-compact {
    width: 100%;
    justify-content: center;
  }

  .date-input-compact {
    flex: 1;
    min-width: unset;
    text-align: center;
  }

  .form-group-compact {
    flex: 1 1 100%;
    min-width: unset;
  }

  .attendance-history-filters .filter-actions {
    margin-left: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
  }

  .attendance-history-filters .filter-actions .btn {
    flex: 1;
  }
}

.modal-header {
  padding: 22px 26px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 1;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
  padding: 6px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.modal-body {
  padding: 26px;
}

.modal-body h3 {
  margin: 28px 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-body h3:first-child {
  margin-top: 0;
}

.modal-footer {
  padding: 18px 26px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--secondary-bg);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  flex-wrap: wrap;
}

/* ─── Selection List ──────────────────────────────────────────── */
.selection-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: var(--card-bg);
}

.filter-section {
  padding: 16px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.selection-item {
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--hover-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition);
}

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

.selection-item:hover {
  background: var(--secondary-bg);
}

.selection-item input[type='checkbox'] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

.selection-item label {
  flex: 1;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 14px;
}

/* ─── Schedule Builder ────────────────────────────────────────── */
.schedule-builder {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  max-height: 450px;
  overflow-y: auto;
  background: var(--secondary-bg);
}

.schedule-slot {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  padding: 14px;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.schedule-slot:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.schedule-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}

.schedule-slot-color-preview {
  width: 6px;
  height: 32px;
  border-radius: 3px;
  flex-shrink: 0;
}

.schedule-slot-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.schedule-slot-row-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.schedule-slot select,
.schedule-slot input {
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  border: var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font);
  font-size: 13px;
  background: var(--input-bg);
  color: var(--input-text);
  transition: border-color 0.15s ease;
}

.schedule-slot select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.schedule-slot select:focus,
.schedule-slot input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.schedule-slot input[type='color'] {
  padding: 4px;
  height: 38px;
  cursor: pointer;
  border-radius: var(--input-radius);
  border: var(--input-border);
}

.schedule-slot input[type='color']::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.schedule-slot input[type='color']::-webkit-color-swatch {
  border-radius: 4px;
  border: none;
}

.schedule-slot .slot-delete-btn {
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--input-radius);
  background: var(--danger-bg);
  color: var(--danger-color);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.schedule-slot .slot-delete-btn:hover {
  background: var(--danger-color);
  color: #fff;
}

.schedule-slot-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.schedule-slot-field {
  display: flex;
  flex-direction: column;
}

/* Responsive for schedule slots */
@media (max-width: 768px) {
  .schedule-slot-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .schedule-slot-row {
    grid-template-columns: 1fr;
  }

  .schedule-slot-header {
    flex-wrap: wrap;
  }
}

[data-theme='dark'] .schedule-slot select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .schedule-slot select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235c7cba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ─── Attendance ──────────────────────────────────────────────── */
.attendance-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.attendance-controls select,
.attendance-controls input {
  min-height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font);
  font-size: 14px;
  background: var(--input-bg);
  color: var(--input-text);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.attendance-controls select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.attendance-controls select:hover,
.attendance-controls input:hover {
  border-color: var(--border-strong);
  background-color: var(--input-bg-hover);
}

.attendance-controls select:focus,
.attendance-controls input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

[data-theme='dark'] .attendance-controls select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.attendance-grid {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 20px;
}

.attendance-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.attendance-item:last-child {
  border-bottom: none;
}

.attendance-status {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.status-btn {
  padding: 7px 14px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition);
  color: var(--text-primary);
}

.status-btn:hover {
  background: var(--hover-bg);
}

.status-btn.present {
  border-color: var(--success-color);
  background: var(--success-color);
  color: #fff;
}

.status-btn.absent {
  border-color: var(--danger-color);
  background: var(--danger-color);
  color: #fff;
}

/* ─── Contracts / Ön Muhasebe ───────────────────────────────────── */
.contracts-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 20px;
  align-items: start;
}

.contracts-list-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.contracts-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 600px;
  overflow-y: auto;
}

.contract-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.15s;
}

.contract-list-item:last-child {
  border-bottom: none;
}

.contract-list-item:hover {
  background: var(--hover-bg);
}

.contract-list-item.active {
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
}

.contract-list-item.selected {
  background: color-mix(in srgb, var(--accent) 10%, var(--card-bg));
  border-left: 3px solid var(--accent);
}

.contract-list-item.active.selected {
  background: color-mix(in srgb, var(--accent) 16%, var(--card-bg));
}

.contract-list-item-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
  margin: 0;
}

.contract-list-item-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.contract-list-item-info {
  flex: 1;
  min-width: 0;
}

.contract-list-item-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.contract-list-item-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  gap: 10px;
}

.contract-list-item-amount {
  text-align: right;
}

.contract-list-item-total {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.contract-list-item-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.contract-list-item-status.active {
  background: var(--warning-bg);
  color: var(--warning-color);
}

.contract-list-item-status.cancelled {
  background: color-mix(in srgb, #9ca3af 14%, transparent);
  color: #6b7280;
}

.contract-list-item-status.completed {
  background: var(--accent-light);
  color: var(--accent);
}

.contract-list-item-status.overdue {
  background: var(--danger-bg);
  color: var(--danger-color);
}

.contracts-pagination {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

/* ── Detail Panel ── */
.contracts-detail-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.contract-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
  flex-wrap: wrap;
}

.contract-detail-header h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
}

.contract-detail-student {
  font-size: 12px;
  color: var(--text-secondary);
}

.contract-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--border-color);
}

.contract-summary-card {
  padding: 16px;
  text-align: center;
  border-right: 1px solid var(--border-color);
}

.contract-summary-card:last-child {
  border-right: none;
}

.csc-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.csc-value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.csc-value.success {
  color: var(--success-color);
}

.csc-value.warning {
  color: var(--warning-color);
}

.csc-value.danger {
  color: var(--danger-color);
}

.contract-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--border-color);
}

.contract-info-item {
  padding: 12px 16px;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.contract-info-item:nth-child(3n) {
  border-right: none;
}

.ci-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.ci-value {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.installments-section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color);
}

.installments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.installments-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.installments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.installment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.installment-item.overdue {
  border-color: var(--danger-color);
  background: var(--danger-bg);
}

.installment-item.paid {
  opacity: 0.6;
}

.installment-item.down-payment {
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 10%, var(--card-bg)) 0%,
      var(--card-bg) 100%);
  border-left: 3px solid var(--accent);
}

.installment-item.down-payment.paid {
  opacity: 1;
}

.down-payment-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.installment-due-date {
  font-size: 12px;
  color: var(--text-tertiary);
  width: 80px;
  flex-shrink: 0;
}

.installment-amount {
  font-weight: 700;
  flex: 1;
}

.installment-paid {
  font-size: 12px;
  color: var(--success-color);
  flex: 1;
}

.installment-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  flex-shrink: 0;
}

.installment-status-badge.pending {
  background: var(--secondary-bg);
  color: var(--text-secondary);
}

.installment-status-badge.paid {
  background: var(--success-bg);
  color: var(--success-color);
}

.installment-status-badge.partial {
  background: var(--warning-bg);
  color: var(--warning-color);
}

.installment-status-badge.overdue {
  background: var(--danger-bg);
  color: var(--danger-color);
}

.installment-pay-btn {
  padding: 4px 10px;
  font-size: 11px;
  flex-shrink: 0;
}

.contract-notes-section {
  padding: 16px 18px;
}

.contract-notes-section h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contract-notes-section p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Installment Builder ── */
.installment-builder {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.installment-builder-row {
  display: grid;
  grid-template-columns: 1fr 120px auto;
  gap: 10px;
  align-items: center;
}

.installment-builder-row .form-input {
  margin-bottom: 0;
}

/* ── Filter Select ── */
.filter-select {
  min-height: 38px;
  padding: 8px 36px 8px 12px;
  border: var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-text);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.filter-select:hover {
  border-color: var(--border-strong);
  background-color: var(--input-bg-hover);
}

.filter-select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232c3e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .filter-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235c7cba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ── Question Bank Filter Bar ── */
.qb-filter-bar {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.qb-filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

.qb-filter-row:last-child {
  margin-bottom: 0;
}

.qb-filter-select {
  min-height: 38px;
  padding: 7px 36px 7px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.qb-filter-select:hover {
  border-color: var(--border-strong);
  background-color: var(--hover-bg);
}

.qb-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

[data-theme='dark'] .qb-filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .qb-filter-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.qb-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.qb-search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.qb-search-input {
  width: 100%;
  min-height: 38px;
  padding: 7px 12px 7px 38px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

.qb-search-input:hover {
  border-color: var(--border-strong);
}

.qb-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.qb-sort-group {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.qb-sort-label {
  font-weight: 600;
  margin-right: 2px;
  white-space: nowrap;
}

.qb-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.qb-sort-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.qb-sort-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.qb-sort-btn .sort-icon {
  font-size: 10px;
  opacity: 0.7;
}

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sort-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.sort-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.sort-btn .sort-icon {
  font-size: 10px;
  opacity: 0.7;
}

.qb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.qb-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  flex: 1;
  min-width: 120px;
}

.qb-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.qb-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.qb-stat-card.easy {
  border-left: 3px solid #22c55e;
}

.qb-stat-card.medium {
  border-left: 3px solid #eab308;
}

.qb-stat-card.hard {
  border-left: 3px solid #ef4444;
}

.qb-stat-card.total {
  border-left: 3px solid var(--accent);
}

.qb-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.qb-empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.qb-empty-state-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.qb-table-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.qb-table {
  width: 100%;
  border-collapse: collapse;
}

.qb-table thead tr {
  background: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
}

.qb-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.qb-table th:last-child {
  text-align: center;
}

.qb-table th:nth-child(5),
.qb-table th:nth-child(6) {
  text-align: center;
}

.qb-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}

.qb-table tbody tr:last-child {
  border-bottom: none;
}

.qb-table tbody tr:hover {
  background: var(--secondary-bg);
}

.qb-table td {
  padding: 12px 16px;
}

.qb-table td:nth-child(5),
.qb-table td:nth-child(6) {
  text-align: center;
}

.qb-table td:last-child {
  text-align: center;
}

.qb-table .question-preview {
  font-size: 13px;
  line-height: 1.5;
}

.qb-table .exam-tag,
.qb-table .subject-tag {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}

.qb-table .topic-name {
  font-size: 12px;
  color: var(--text-secondary);
}

.qb-table .difficulty-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  color: #fff;
  display: inline-block;
}

.qb-table .difficulty-badge.easy {
  background: #22c55e;
}

.qb-table .difficulty-badge.medium {
  background: #eab308;
}

.qb-table .difficulty-badge.hard {
  background: #ef4444;
}

.qb-table .correct-answer {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
}

.qb-table .row-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
}

/* ── Student Homework ── */
.student-hw-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hw-item {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.hw-item.done {
  opacity: 0.7;
  border-left: 3px solid #22c55e;
}

.hw-item.overdue {
  border-left: 3px solid #ef4444;
}

.hw-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.hw-item-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
}

.hw-item-status.completed {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.hw-item-status.overdue {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.hw-item-status.in_progress {
  background: rgba(99, 102, 241, 0.1);
  color: #2c3e8c;
}

.hw-item-status.assigned {
  background: var(--secondary-bg);
  color: var(--text-secondary);
}

.hw-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

/* ── Teacher AI Analiz ── */
.analiz-header {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.analiz-student-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #2c3e8c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.analiz-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.analiz-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.analiz-stat-icon {
  font-size: 20px;
  margin-bottom: 6px;
}

.analiz-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}

.analiz-stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.analiz-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.analiz-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.analiz-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.analiz-topic-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analiz-topic-item {
  display: grid;
  grid-template-columns: 24px 1fr auto 80px;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s;
}

.analiz-topic-item:hover {
  background: var(--secondary-bg);
}

.analiz-topic-rank {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-align: center;
}

.analiz-topic-name {
  font-size: 13px;
  font-weight: 500;
}

.analiz-topic-count {
  font-size: 11px;
  color: var(--text-secondary);
}

.analiz-topic-bar {
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

.analiz-topic-bar div {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

.analiz-subject-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.analiz-subject-card {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
}

.analiz-ai-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.analiz-hw-summary {
  display: flex;
  gap: 24px;
}

.analiz-hw-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Dashboard cache toolbar */
.dashboard-cache-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
}

.dashboard-cache-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dashboard-cache-copy strong {
  color: var(--text-primary);
  font-size: 14px;
}

.dashboard-cache-copy span {
  color: var(--text-secondary);
  font-size: 12px;
}

.dashboard-cache-toolbar .btn {
  flex-shrink: 0;
}

/* Student Risk Score */
.student-risk-shell {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 12px;
}

.student-risk-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg);
}

.student-risk-eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.student-risk-hero h3 {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-size: 20px;
}

.student-risk-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.student-risk-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.student-risk-toolbar input,
.student-risk-toolbar select {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
}

.risk-count-label {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding-right: 8px;
  border-right: 1px solid var(--border-color);
  margin-right: 4px;
}

#studentRiskPagination {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.risk-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.risk-summary-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg);
}

.risk-summary-card span {
  color: var(--accent);
}

.risk-summary-card strong {
  color: var(--text-primary);
  font-size: 24px;
  line-height: 1;
}

.risk-summary-card.wide strong {
  font-size: 16px;
  line-height: 1.25;
}

.risk-summary-card em {
  color: var(--text-secondary);
  font-style: normal;
  font-size: 12px;
}

.student-risk-list {
  display: grid;
  gap: 12px;
}

.student-risk-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--risk-color, var(--accent));
  border-radius: 12px;
  background: var(--card-bg);
}

.student-risk-card-main {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.student-risk-name {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
}

.student-risk-meta {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}

.student-risk-score {
  min-width: 96px;
  text-align: right;
  color: var(--risk-color);
}

.student-risk-score strong {
  display: block;
  font-size: 30px;
  line-height: 1;
}

.student-risk-score span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
}

.student-risk-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.student-risk-metrics span,
.student-risk-factors span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--secondary-bg);
  color: var(--text-secondary);
  font-size: 12px;
}

.student-risk-topic {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.1);
  color: var(--text-primary);
  font-size: 13px;
}

.student-risk-factors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.student-risk-actions {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.student-risk-actions p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.student-risk-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--border-color, #e5e7eb);
}

.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #e5e7eb);
  background: var(--bg-secondary, #f9fafb);
  color: var(--text-secondary, #6b7280);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.quick-action-btn:hover {
  background: var(--bg-tertiary, #f3f4f6);
  color: var(--text-primary, #111827);
  border-color: var(--primary-color, #3b82f6);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.quick-action-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.quick-action-btn[data-action-type*="call-parent"] {
  border-color: #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
}

.quick-action-btn[data-action-type*="call-parent"]:hover {
  background: #dbeafe;
}

.quick-action-btn[data-action-type*="schedule-meeting"] {
  border-color: #fce7f3;
  background: #fdf2f8;
  color: #be185d;
}

.quick-action-btn[data-action-type*="schedule-meeting"]:hover {
  background: #fce7f3;
}

.quick-action-btn[data-action-type*="send-sms"] {
  border-color: #d1fae5;
  background: #ecfdf5;
  color: #047857;
}

.quick-action-btn[data-action-type*="send-sms"]:hover {
  background: #d1fae5;
}

.quick-action-btn[data-action-type*="create-study-plan"],
.quick-action-btn[data-action-type*="schedule-tutoring"],
.quick-action-btn[data-action-type*="schedule-topic-tutoring"] {
  border-color: #e0e7ff;
  background: #eef2ff;
  color: #4338ca;
}

.quick-action-btn[data-action-type*="create-study-plan"]:hover,
.quick-action-btn[data-action-type*="schedule-tutoring"]:hover,
.quick-action-btn[data-action-type*="schedule-topic-tutoring"]:hover {
  background: #e0e7ff;
}

.quick-action-btn[data-action-type*="add-note"],
.quick-action-btn[data-action-type*="add-attendance-note"] {
  border-color: #fef3c7;
  background: #fffbeb;
  color: #b45309;
}

.quick-action-btn[data-action-type*="add-note"]:hover,
.quick-action-btn[data-action-type*="add-attendance-note"]:hover {
  background: #fef3c7;
}

.quick-action-btn[data-action-type*="add-watch"],
.quick-action-btn[data-action-type*="send-reminder"],
.quick-action-btn[data-action-type*="send-warning"] {
  border-color: #fed7d7;
  background: #fff5f5;
  color: #c53030;
}

.quick-action-btn[data-action-type*="add-watch"]:hover,
.quick-action-btn[data-action-type*="send-reminder"]:hover,
.quick-action-btn[data-action-type*="send-warning"]:hover {
  background: #fed7d7;
}

.quick-action-btn[data-action-type*="send-motivation"],
.quick-action-btn[data-action-type*="create-daily-goal"],
.quick-action-btn[data-action-type*="create-micro-goal"] {
  border-color: #fce7f3;
  background: #fdf2f8;
  color: #9d174d;
}

.quick-action-btn[data-action-type*="send-motivation"]:hover,
.quick-action-btn[data-action-type*="create-daily-goal"]:hover,
.quick-action-btn[data-action-type*="create-micro-goal"]:hover {
  background: #fce7f3;
}

.quick-action-btn[data-action-type*="assign-group-study"],
.quick-action-btn[data-action-type*="request-private-lesson"],
.quick-action-btn[data-action-type*="request-extra-lesson"] {
  border-color: #cffafe;
  background: #ecfeff;
  color: #0e7490;
}

.quick-action-btn[data-action-type*="assign-group-study"]:hover,
.quick-action-btn[data-action-type*="request-private-lesson"]:hover,
.quick-action-btn[data-action-type*="request-extra-lesson"]:hover {
  background: #cffafe;
}

.quick-action-btn[data-action-type*="add-positive-note"],
.quick-action-btn[data-action-type*="create-reward"] {
  border-color: #d1fae5;
  background: #ecfdf5;
  color: #047857;
}

.quick-action-btn[data-action-type*="add-positive-note"]:hover,
.quick-action-btn[data-action-type*="create-reward"]:hover {
  background: #d1fae5;
}

.quick-action-btn[data-action-type*="create-odsb-record"],
.quick-action-btn[data-action-type*="create-discipline-note"] {
  border-color: #fee2e2;
  background: #fef2f2;
  color: #b91c1c;
}

.quick-action-btn[data-action-type*="create-odsb-record"]:hover,
.quick-action-btn[data-action-type*="create-discipline-note"]:hover {
  background: #fee2e2;
}

.quick-action-btn[data-action-type*="create-review-plan"],
.quick-action-btn[data-action-type*="create-mistake-review"] {
  border-color: #e0e7ff;
  background: #eef2ff;
  color: #4338ca;
}

.quick-action-btn[data-action-type*="create-review-plan"]:hover,
.quick-action-btn[data-action-type*="create-mistake-review"]:hover {
  background: #e0e7ff;
}

.quick-action-btn[data-action-type*="create-routine"],
.quick-action-btn[data-action-type*="restart-engagement"] {
  border-color: #fef3c7;
  background: #fffbeb;
  color: #b45309;
}

.quick-action-btn[data-action-type*="create-routine"]:hover,
.quick-action-btn[data-action-type*="restart-engagement"]:hover {
  background: #fef3c7;
}

.quick-action-btn[data-action-type*="send-information"],
.quick-action-btn[data-action-type*="schedule-checkin"] {
  border-color: #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
}

.quick-action-btn[data-action-type*="send-information"]:hover,
.quick-action-btn[data-action-type*="schedule-checkin"]:hover {
  background: #dbeafe;
}

.quick-action-btn[data-action-type*="add-exam"],
.quick-action-btn[data-action-type*="add-exam-subject"],
.quick-action-btn[data-action-type*="add-homework-data"],
.quick-action-btn[data-action-type*="add-attendance"] {
  border-color: #e5e7eb;
  background: #f9fafb;
  color: #374151;
}

.quick-action-btn[data-action-type*="add-exam"]:hover,
.quick-action-btn[data-action-type*="add-exam-subject"]:hover,
.quick-action-btn[data-action-type*="add-homework-data"]:hover,
.quick-action-btn[data-action-type*="add-attendance"]:hover {
  background: #e5e7eb;
}

.quick-action-btn[data-action-type*="create-coverage-plan"],
.quick-action-btn[data-action-type*="request-evaluation"] {
  border-color: #e0e7ff;
  background: #eef2ff;
  color: #4338ca;
}

.quick-action-btn[data-action-type*="create-coverage-plan"]:hover,
.quick-action-btn[data-action-type*="request-evaluation"]:hover {
  background: #e0e7ff;
}

.quick-action-btn[data-action-type*="create-initial-assessment"],
.quick-action-btn[data-action-type*="request-data-entry"] {
  border-color: #fef3c7;
  background: #fffbeb;
  color: #b45309;
}

.quick-action-btn[data-action-type*="create-initial-assessment"]:hover,
.quick-action-btn[data-action-type*="request-data-entry"]:hover {
  background: #fef3c7;
}

.quick-action-btn[data-action-type*="add-regular-followup"],
.quick-action-btn[data-action-type*="add-to-calendar"] {
  border-color: #e5e7eb;
  background: #f9fafb;
  color: #374151;
}

.quick-action-btn[data-action-type*="add-regular-followup"]:hover,
.quick-action-btn[data-action-type*="add-to-calendar"]:hover {
  background: #e5e7eb;
}

.student-risk-identity {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.student-risk-identity p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.student-risk-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.student-risk-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}

.student-risk-score em {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  background: var(--secondary-bg);
  color: var(--text-secondary);
}

.student-risk-score em.confidence-high {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.student-risk-score em.confidence-medium {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}

.student-risk-score em.confidence-low {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.student-risk-metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.risk-metric {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--secondary-bg);
}

.risk-metric span,
.risk-metric em {
  color: var(--text-secondary);
  font-style: normal;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-metric strong {
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.1;
}

.risk-metric.warn strong {
  color: #d97706;
}

.student-risk-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 12px;
}

.student-risk-evidence h4 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 13px;
}

.student-risk-factors span b {
  color: var(--text-primary);
}

.student-risk-factors .factor-performance {
  border-color: rgba(239, 68, 68, 0.25);
  color: #dc2626;
}

.student-risk-factors .factor-attendance {
  border-color: rgba(245, 158, 11, 0.3);
  color: #d97706;
}

.student-risk-factors .factor-engagement,
.student-risk-factors .factor-behavior {
  border-color: rgba(59, 130, 246, 0.28);
  color: #2563eb;
}

.student-risk-factors .factor-data {
  border-color: rgba(100, 116, 139, 0.28);
  color: var(--text-secondary);
}

.student-risk-missing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

.risk-summary-card.danger strong {
  color: #dc2626;
}

.risk-summary-card.warn strong {
  color: #d97706;
}

@media (max-width: 768px) {
  .dashboard-cache-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-cache-toolbar .btn {
    width: 100%;
    justify-content: center;
  }

  .student-risk-hero,
  .student-risk-card-main {
    flex-direction: column;
  }

  .student-risk-toolbar {
    width: 100%;
    justify-content: stretch;
  }

  .student-risk-toolbar input,
  .student-risk-toolbar select,
  .student-risk-toolbar button {
    flex: 1;
    min-width: 0;
  }

  .risk-count-label {
    display: none;
  }

  .risk-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-risk-score {
    text-align: left;
  }

  .student-risk-metrics-grid,
  .student-risk-evidence {
    grid-template-columns: 1fr;
  }
}

/* ── Öğrenci Risk Skoru: Sparkline, Breakdown, Priority ───── */
.student-risk-sparkline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-top: 10px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.student-risk-sparkline svg {
  flex: 1;
  min-width: 0;
  max-width: 140px;
  height: 32px;
}

.student-risk-sparkline-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.student-risk-breakdown {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.risk-breakdown-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

.risk-breakdown-bar-group {
  display: flex;
  width: 100%;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-color);
}

.risk-breakdown-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: flex-grow 0.3s ease;
  position: relative;
  cursor: help;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-breakdown-bar span {
  padding: 0 4px;
}

.risk-breakdown-bar:hover {
  filter: brightness(1.1);
  z-index: 1;
}

.rec-yuksek,
.rec-orta,
.rec-dusuk {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
}

.rec-yuksek {
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger-color, #ef4444);
  border-left: 3px solid var(--danger-color, #ef4444);
}

.rec-orta {
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning-color, #f59e0b);
  border-left: 3px solid var(--warning-color, #f59e0b);
}

.rec-dusuk {
  background: rgba(34, 197, 94, 0.08);
  color: var(--success-color, #22c55e);
  border-left: 3px solid var(--success-color, #22c55e);
}

.rec-priority {
  flex-shrink: 0;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
}

.rec-priority svg {
  display: block;
}

.risk-summary-card.good {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), transparent);
  border-color: rgba(34, 197, 94, 0.2);
}

.risk-summary-card.good strong {
  color: #22c55e;
}

.student-risk-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

/* ── AI Homework ── */
.ai-hw-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ai-hw-create-panel,
.ai-hw-list-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

.ai-hw-empty {
  text-align: center;
  padding: 32px;
  color: var(--text-secondary);
}

.ai-hw-card {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}

.ai-hw-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.ai-hw-due-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
}

.ai-hw-due-badge.overdue {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.ai-hw-card-stats {
  display: flex;
  gap: 8px;
}

/* =============================================
   AI ÖDEV RESPONSIVE
   ============================================= */

#teacherAIHomeworkContent .ai-hw-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
  #teacherAIHomeworkContent .ai-hw-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  #teacherAIHomeworkContent .ai-hw-container {
    gap: 14px;
  }
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-container {
    gap: 12px;
  }
}

/* ---- Panels ---- */
#teacherAIHomeworkContent .ai-hw-create-panel,
#teacherAIHomeworkContent .ai-hw-list-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

@media (max-width: 1024px) {

  #teacherAIHomeworkContent .ai-hw-create-panel,
  #teacherAIHomeworkContent .ai-hw-list-panel {
    padding: 16px;
    border-radius: 10px;
  }
}

@media (max-width: 768px) {

  #teacherAIHomeworkContent .ai-hw-create-panel,
  #teacherAIHomeworkContent .ai-hw-list-panel {
    padding: 14px;
    border-radius: 8px;
  }
}

@media (max-width: 480px) {

  #teacherAIHomeworkContent .ai-hw-create-panel,
  #teacherAIHomeworkContent .ai-hw-list-panel {
    padding: 12px;
    border-radius: 8px;
  }
}

/* ---- Panel Titles ---- */
#teacherAIHomeworkContent .ai-hw-create-panel>h3,
#teacherAIHomeworkContent .ai-hw-list-panel>h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}

@media (max-width: 768px) {

  #teacherAIHomeworkContent .ai-hw-create-panel>h3,
  #teacherAIHomeworkContent .ai-hw-list-panel>h3 {
    font-size: 13px;
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {

  #teacherAIHomeworkContent .ai-hw-create-panel>h3,
  #teacherAIHomeworkContent .ai-hw-list-panel>h3 {
    font-size: 12px;
    margin-bottom: 10px;
  }
}

/* ---- Form Grid ---- */
#teacherAIHomeworkContent .ai-hw-create-panel .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

@media (max-width: 768px) {
  #teacherAIHomeworkContent .ai-hw-create-panel .form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-create-panel .form-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

#teacherAIHomeworkContent .ai-hw-create-panel .form-group {
  margin-bottom: 12px;
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-create-panel .form-group {
    margin-bottom: 10px;
  }
}

#teacherAIHomeworkContent .ai-hw-create-panel .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-create-panel .form-group label {
    font-size: 11px;
  }
}

/* ---- Form Inputs ---- */
#teacherAIHomeworkContent .ai-hw-create-panel .form-input,
#teacherAIHomeworkContent .ai-hw-create-panel .form-select {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-primary);
}

@media (max-width: 480px) {

  #teacherAIHomeworkContent .ai-hw-create-panel .form-input,
  #teacherAIHomeworkContent .ai-hw-create-panel .form-select {
    padding: 7px 8px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {

  #teacherAIHomeworkContent .ai-hw-create-panel .form-input,
  #teacherAIHomeworkContent .ai-hw-create-panel .form-select {
    padding: 6px 7px;
    font-size: 11px;
  }
}

/* ---- Difficulty Radio ---- */
#teacherAIHomeworkContent .ai-hw-create-panel [style*="display:flex"][style*="gap:8px"] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-create-panel [style*="display:flex"][style*="gap:8px"] {
    gap: 6px;
  }
}

#teacherAIHomeworkContent .ai-hw-create-panel [style*="display:flex"][style*="gap:8px"] label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-create-panel [style*="display:flex"][style*="gap:8px"] label {
    font-size: 11px;
    gap: 3px;
  }
}

/* ---- Student Checklist ---- */
#teacherAIHomeworkContent .ai-hw-create-panel .hw-student-cb {
  margin-right: 4px;
}

#teacherAIHomeworkContent .ai-hw-create-panel [style*="max-height:120px"] {
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-create-panel [style*="max-height:120px"] {
    max-height: 100px;
    padding: 6px;
    border-radius: 6px;
  }
}

@media (max-width: 360px) {
  #teacherAIHomeworkContent .ai-hw-create-panel [style*="max-height:120px"] {
    max-height: 80px;
    padding: 5px;
  }
}

/* ---- Topic Suggestion Area ---- */
#teacherAIHomeworkContent .ai-hw-create-panel #hwTopicSuggestionArea {
  margin-top: 8px;
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-create-panel #hwTopicSuggestionArea {
    margin-top: 6px;
  }
}

/* ---- Create Button ---- */
#teacherAIHomeworkContent .ai-hw-create-panel #hwCreateBtn {
  margin-top: 8px;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 8px;
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-create-panel #hwCreateBtn {
    width: 100%;
    font-size: 12px;
    padding: 9px 14px;
    margin-top: 10px;
  }
}

@media (max-width: 360px) {
  #teacherAIHomeworkContent .ai-hw-create-panel #hwCreateBtn {
    font-size: 11px;
    padding: 8px 12px;
  }
}

/* ---- Template Library ---- */
#teacherAIHomeworkContent #hwTemplateLibrary {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
}

@media (max-width: 768px) {
  #teacherAIHomeworkContent #hwTemplateLibrary {
    margin-top: 16px;
    padding: 14px;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent #hwTemplateLibrary {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
  }
}

#teacherAIHomeworkContent #hwTemplateLibrary>h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent #hwTemplateLibrary>h4 {
    margin-bottom: 10px;
    font-size: 12px;
  }
}

#teacherAIHomeworkContent #hwTemplateLibrary>h4 span {
  font-weight: 400;
  color: var(--text-tertiary);
}

#teacherAIHomeworkContent #hwTemplateLibraryContent {
  font-size: 12px;
  color: var(--text-secondary);
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent #hwTemplateLibraryContent {
    font-size: 11px;
  }
}

/* ---- Homework Card ---- */
#teacherAIHomeworkContent .ai-hw-card {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  #teacherAIHomeworkContent .ai-hw-card {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-card {
    padding: 10px;
    margin-bottom: 6px;
    border-radius: 8px;
  }
}

#teacherAIHomeworkContent .ai-hw-card:last-child {
  margin-bottom: 0;
}

/* ---- Card Header ---- */
#teacherAIHomeworkContent .ai-hw-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 10px;
}

@media (max-width: 768px) {
  #teacherAIHomeworkContent .ai-hw-card-header {
    margin-bottom: 8px;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-card-header {
    flex-direction: column;
    margin-bottom: 8px;
  }
}

#teacherAIHomeworkContent .ai-hw-card-header>div:first-child>div:first-child {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  #teacherAIHomeworkContent .ai-hw-card-header>div:first-child>div:first-child {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-card-header>div:first-child>div:first-child {
    font-size: 12px;
  }
}

#teacherAIHomeworkContent .ai-hw-card-header>div:first-child>div:last-child {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

@media (max-width: 768px) {
  #teacherAIHomeworkContent .ai-hw-card-header>div:first-child>div:last-child {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-card-header>div:first-child>div:last-child {
    font-size: 10px;
  }
}

#teacherAIHomeworkContent .ai-hw-card-header>div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-card-header>div:last-child {
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
  }
}

/* ---- Due Badge ---- */
#teacherAIHomeworkContent .ai-hw-due-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-due-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
  }
}

#teacherAIHomeworkContent .ai-hw-due-badge.overdue {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* ---- Card Stats Buttons ---- */
#teacherAIHomeworkContent .ai-hw-card-stats {
  display: flex;
  gap: 8px;
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-card-stats {
    gap: 6px;
  }
}

#teacherAIHomeworkContent .ai-hw-card-stats .btn-small {
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 6px;
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-card-stats .btn-small {
    font-size: 10px;
    padding: 4px 6px;
    border-radius: 5px;
  }
}

@media (max-width: 360px) {
  #teacherAIHomeworkContent .ai-hw-card-stats .btn-small {
    font-size: 9px;
    padding: 3px 5px;
  }
}

/* ---- Empty State ---- */
#teacherAIHomeworkContent .ai-hw-empty {
  text-align: center;
  padding: 32px;
  color: var(--text-secondary);
  font-size: 13px;
}

@media (max-width: 480px) {
  #teacherAIHomeworkContent .ai-hw-empty {
    padding: 24px 16px;
    font-size: 12px;
  }
}

/* ---- Landscape Orientation ---- */
@media (max-width: 640px) and (orientation: landscape) {
  #teacherAIHomeworkContent .ai-hw-container {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  #teacherAIHomeworkContent .ai-hw-create-panel,
  #teacherAIHomeworkContent .ai-hw-list-panel {
    padding: 14px;
  }

  #teacherAIHomeworkContent .ai-hw-create-panel .form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  #teacherAIHomeworkContent .ai-hw-card {
    padding: 10px;
    margin-bottom: 8px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {

  #teacherAIHomeworkContent .ai-hw-create-panel,
  #teacherAIHomeworkContent .ai-hw-list-panel {
    padding: 12px;
  }

  #teacherAIHomeworkContent .ai-hw-create-panel .form-grid {
    gap: 8px;
  }

  #teacherAIHomeworkContent .ai-hw-card {
    padding: 10px;
    margin-bottom: 6px;
  }

  #teacherAIHomeworkContent .ai-hw-card-header {
    margin-bottom: 6px;
  }

  #teacherAIHomeworkContent .ai-hw-card-stats {
    gap: 6px;
  }
}

/* ── Accounting: Installment Plans & Salaries ── */
.acc-plan-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.acc-plan-card:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-color));
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.acc-plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.acc-plan-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  flex-wrap: wrap;
}

.acc-plan-title svg {
  color: var(--accent);
  flex-shrink: 0;
}

.acc-plan-source-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--secondary-bg) 70%, transparent);
  color: var(--text-tertiary);
  font-weight: 500;
}

.acc-plan-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.acc-plan-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.acc-plan-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--secondary-bg) 70%, transparent);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-secondary);
}

.acc-plan-meta-chip svg {
  flex-shrink: 0;
}

.acc-plan-progress {
  margin: 12px 0 14px;
}

.acc-plan-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.acc-plan-progress-labels strong {
  color: var(--text-primary);
}

.acc-plan-progress-bar {
  height: 8px;
  background: color-mix(in srgb, var(--border-color) 70%, transparent);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}

.acc-plan-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 75%, var(--success-color)));
  border-radius: 999px;
  transition: width 0.3s ease;
}

.acc-plan-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
}

.acc-plan-remaining {
  color: var(--danger-color);
  font-weight: 600;
}

.acc-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}

.acc-plan-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.acc-plan-actions .btn svg {
  flex-shrink: 0;
}

.acc-plan-detail-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--secondary-bg) 50%, transparent);
  border-radius: 10px;
  margin-bottom: 16px;
}

.acc-plan-detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acc-plan-detail-row span {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.acc-plan-detail-row strong {
  font-size: 13px;
  color: var(--text-primary);
}

.acc-plan-detail-table-wrap {
  overflow-x: auto;
}

@media (max-width: 720px) {
  .acc-plan-detail-summary {
    grid-template-columns: 1fr 1fr;
  }
}

.acc-salary-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px;
}

.acc-overdue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.08);
  margin-bottom: 4px;
  font-size: 12px;
}

.acc-overdue-student {
  font-weight: 600;
}

.acc-overdue-amount {
  color: #ef4444;
  font-weight: 700;
}

.acc-overdue-days {
  color: var(--text-tertiary);
  font-size: 11px;
}

.acc-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  transition: background 0.15s;
}

.acc-recent-item:hover {
  background: var(--secondary-bg);
}

.acc-recent-type {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.acc-recent-type.income {
  background: rgba(34, 197, 94, 0.1);
}

.acc-recent-type.expense {
  background: rgba(239, 68, 68, 0.1);
}

.acc-recent-info {
  flex: 1;
  min-width: 0;
}

.acc-recent-desc {
  font-size: 13px;
  font-weight: 500;
}

.acc-recent-date {
  font-size: 11px;
  color: var(--text-tertiary);
}

.acc-recent-amount {
  font-weight: 700;
  font-size: 13px;
}

.acc-recent-amount.income {
  color: #22c55e;
}

.acc-recent-amount.expense {
  color: #ef4444;
}

/* ── Gamification: Sıralama & Rozetler ── */
.gam-container {
  padding: 0;
}

.gam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.gam-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.gam-period-selector {
  display: flex;
  gap: 4px;
}

.gam-period-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.gam-period-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.gam-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.gam-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.gam-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}

.gam-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gam-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.gam-left,
.gam-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gam-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.gam-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.gam-streak-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gam-streak-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--secondary-bg);
  border-radius: 10px;
}

.gam-streak-icon {
  font-size: 32px;
}

.gam-streak-info {
  flex: 1;
}

.gam-streak-label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.gam-streak-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.gam-streak-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

.gam-streak-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s;
}

.gam-streak-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.gam-streak-next {
  font-size: 11px;
  color: var(--text-secondary);
}

.gam-streak-best {
  font-size: 11px;
  color: var(--text-tertiary);
}

.gam-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}

.gam-ranking-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s;
  font-size: 13px;
}

.gam-ranking-row:hover {
  background: var(--secondary-bg);
}

.gam-ranking-row.me {
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
  font-weight: 600;
}

.gam-rank-num {
  font-size: 16px;
  text-align: center;
}

.gam-rank-name {
  color: var(--text-primary);
}

.gam-rank-net {
  color: var(--accent);
  font-weight: 600;
}

.gam-rank-exams {
  color: var(--text-tertiary);
  font-size: 11px;
}

.gam-badge-category {
  margin-bottom: 14px;
}

.gam-badge-cat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 600;
}

.gam-badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gam-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: var(--secondary-bg);
  border: 2px solid transparent;
  border-radius: 12px;
  min-width: 80px;
  text-align: center;
}

.gam-badge-icon {
  font-size: 28px;
}

.gam-badge-name {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.gam-badge-date {
  font-size: 10px;
  color: var(--text-tertiary);
}

.gam-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* ── Responsive — Contracts ── */
@media (max-width: 1200px) {
  .contracts-layout {
    grid-template-columns: 1fr 360px;
  }
}

@media (max-width: 1024px) {
  .contracts-layout {
    grid-template-columns: 1fr;
  }

  .contracts-detail-panel {
    order: -1;
  }

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

  .contract-summary-card:nth-child(2) {
    border-right: none;
  }

  .contract-summary-card:nth-child(3) {
    border-top: 1px solid var(--border-color);
  }

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

  .contract-info-item:nth-child(3n) {
    border-right: 1px solid var(--border-color);
  }

  .contract-info-item:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .contract-summary-cards {
    grid-template-columns: 1fr 1fr;
  }

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

@media (max-width: 600px) {
  .contract-summary-cards {
    grid-template-columns: 1fr;
  }

  .contract-summary-card {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .contract-summary-card:last-child {
    border-bottom: none;
  }

  .installment-builder-row {
    grid-template-columns: 1fr;
  }
}

.templates-section h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.template-btn {
  padding: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

.template-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}

/* ─── Notifications ───────────────────────────────────────────── */
.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-item {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  border-left: 3px solid var(--border-strong);
  transition: var(--transition);
  margin-bottom: 10px;
}

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

.notification-item:hover {
  box-shadow: var(--shadow-sm);
}

.notification-item.unread {
  border-left-color: var(--accent);
  background: var(--accent-light);
}

[data-theme='dark'] .notification-item.unread {
  background: var(--accent-subtle);
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.notification-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14.5px;
}

.notification-date {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.notification-message {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
}

/* ─── Badge ───────────────────────────────────────────────────── */
.badge {
  background: var(--danger-color);
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 600;
  margin-left: 6px;
  display: inline-block;
  line-height: 1.6;
}

/* ─── Info Card ───────────────────────────────────────────────── */
.info-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), #7c9ce0);
}

.info-row {
  padding: 13px 0;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

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

.info-label {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 13.5px;
  min-width: 130px;
  flex-shrink: 0;
}

.info-value {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

/* ─── Exam Sections ───────────────────────────────────────────── */
.exam-subject {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  padding: 18px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.exam-subject h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.result-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 12px;
}

/* ─── Performance Summary ─────────────────────────────────────── */
.performance-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.performance-card {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  padding: 18px 16px;
  border-radius: var(--radius-md);
  text-align: center;
  transition: var(--transition);
}

.performance-card:hover {
  box-shadow: var(--shadow-sm);
}

.performance-card h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.performance-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1px;
  line-height: 1.1;
}

/* ─── Topic Analysis ──────────────────────────────────────────── */
.topic-analysis {
  margin-top: 28px;
}

.topic-group {
  margin-bottom: 22px;
}

.topic-group h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.topic-item {
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.topic-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 13.5px;
}

.topic-stats {
  display: flex;
  gap: 14px;
  font-size: 13px;
  flex-shrink: 0;
}

.topic-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.topic-stat.correct {
  color: var(--success-color);
}

.topic-stat.wrong {
  color: var(--danger-color);
}

.topic-stat.empty {
  color: var(--warning-color);
}

/* ─── Class Detail ────────────────────────────────────────────── */
.class-detail-header {
  margin-bottom: 28px;
}

/* ─── Empty State ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-secondary);
}

.empty-state-icon {
  font-size: 56px;
  margin-bottom: 14px;
  opacity: 0.45;
  display: block;
}

.empty-state .empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.empty-state .empty-icon svg {
  width: 48px;
  height: 48px;
  opacity: 0.6;
}

.empty-state h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.empty-state p {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ─── Messages ────────────────────────────────────────────────── */
.success-message {
  background: var(--success-bg);
  color: var(--success-color);
  border: 1px solid var(--success-color);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.error-message {
  background: var(--danger-bg);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

/* ─── Error Boundary ──────────────────────────────────────────── */
.error-boundary {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.error-boundary.show {
  display: flex;
}

.error-boundary-content {
  background: var(--card-bg);
  border: 2px solid var(--danger-color);
  border-radius: 16px;
  padding: 40px 32px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: errorSlideIn 0.3s ease;
}

@keyframes errorSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.error-boundary-icon {
  font-size: 64px;
  margin-bottom: 16px;
  display: block;
}

.error-boundary h2 {
  color: var(--danger-color);
  font-size: 24px;
  margin-bottom: 12px;
  font-weight: 700;
}

.error-boundary-message {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--danger-bg);
  border-radius: 10px;
  border: 1px solid rgba(220, 53, 69, 0.2);
  word-break: break-word;
  text-align: left;
}

.error-boundary-stack {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 24px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-family: monospace;
  max-height: 150px;
  overflow-y: auto;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
}

.error-boundary-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.error-boundary-actions .btn {
  min-width: 140px;
  padding: 12px 20px;
  font-size: 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.error-boundary-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
  .error-boundary-content {
    padding: 28px 20px;
  }

  .error-boundary h2 {
    font-size: 20px;
  }

  .error-boundary-icon {
    font-size: 48px;
  }

  .error-boundary-actions {
    flex-direction: column;
  }

  .error-boundary-actions .btn {
    width: 100%;
  }
}

/* ─── App Footer ──────────────────────────────────────────────── */
.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border-top: 1px solid var(--border-color);
  padding: 10px 24px;
  z-index: 99;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.footer-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

.footer-divider {
  color: var(--border-strong);
}

/* ─── Theme Toggle ────────────────────────────────────────────── */
.theme-toggle {
  position: fixed;
  bottom: 72px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
  z-index: 1000;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.theme-toggle:active {
  transform: scale(0.94);
}

/* ─── Loading ─────────────────────────────────────────────────── */
#_loadingOverlay {
  pointer-events: all;
}

/* ─── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* ─── Focus ───────────────────────────────────────────────────── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Animations ──────────────────────────────────────────────── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.card,
.notification-item,
.stat-card {
  animation: fadeIn 0.28s ease both;
}

/* Stagger for stats grid */
.stats-grid>*:nth-child(1) {
  animation-delay: 0.04s;
}

.stats-grid>*:nth-child(2) {
  animation-delay: 0.08s;
}

.stats-grid>*:nth-child(3) {
  animation-delay: 0.12s;
}

.stats-grid>*:nth-child(4) {
  animation-delay: 0.16s;
}

.stats-grid>*:nth-child(5) {
  animation-delay: 0.2s;
}

.stats-grid>*:nth-child(6) {
  animation-delay: 0.24s;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet ≤ 1024px ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 220px;
  }

  .content-area {
    padding: 24px 24px calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  }
}

/* ══════════════════════════════════════════════════════════════════
   HAMBURGER BUTONU
   ══════════════════════════════════════════════════════════════════ */

.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.hamburger-btn:hover {
  background: var(--hover-bg);
}

.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease,
    width 0.2s ease;
  transform-origin: center;
}

.hamburger-btn.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.is-open span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.hamburger-btn.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR OVERLAY — Mobil drawer backdrop
   ══════════════════════════════════════════════════════════════════ */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 299;
}

.sidebar-overlay.active {
  display: block;
  animation: overlayIn 0.2s ease;
}

@keyframes overlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

body.sidebar-open {
  overflow: hidden;
}

/* Touch reorder sürüklenen buton */
.sb-touch-dragging {
  opacity: 0.25;
  border: 1px dashed var(--accent) !important;
  background: var(--accent-subtle) !important;
}

/* ── Tablet ≤ 1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 220px;
  }

  /* Tablet sidebar drawer mode */
  .sidebar {
    position: fixed !important;
    top: var(--navbar-height);
    left: 0;
    height: calc(100dvh - var(--navbar-height));
    width: min(280px, 85vw) !important;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    border-right: 1px solid var(--border-color) !important;
    border-bottom: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
  }

  .sidebar.sidebar-drawer-open {
    transform: translateX(0);
  }

  .hamburger-btn {
    display: flex;
  }

  .navbar {
    gap: 10px;
  }

  .navbar-actions {
    gap: 6px;
  }

  .navbar-actions .btn {
    padding: 7px 12px;
    font-size: 13px;
  }

  .content-area {
    padding: 24px 24px calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  }

  .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
  }

  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-row select,
  .filter-row .btn {
    width: 100%;
    min-width: unset !important;
  }
}

/* ── Mobile ≤ 768px ──────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hamburger görünür */
  .hamburger-btn {
    display: flex;
  }

  /* Navbar: çok satırlı kompakt düzen */
  .navbar {
    padding: 8px 12px;
    gap: 8px 6px;
    flex-wrap: wrap;
    height: auto;
    min-height: var(--navbar-height);
  }

  .navbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding-left: 0;
    margin-left: auto;
    flex-shrink: 0;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }

  .navbar-brand {
    gap: 8px;
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    box-sizing: border-box;
  }

  .navbar-brand .hamburger-btn {
    order: 1;
    flex-shrink: 0;
  }

  .navbar-brand h2 {
    order: 2;
    font-size: 15px;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
    margin: 0;
  }

  .user-badge {
    order: 3;
    padding: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    line-height: 36px;
    text-align: center;
    font-size: 0;
    max-width: none;
    flex-shrink: 0;
    overflow: hidden;
  }

  .user-badge::first-letter {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
  }

  /* Seasonal Gesture: compact icon pill on mobile */
  .seasonal-gesture {
    order: 4;
    height: 32px;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    margin: 0;
    gap: 0;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .seasonal-gesture__art {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
  }

  .seasonal-gesture__art svg {
    width: 18px;
    height: 18px;
  }

  .seasonal-gesture__label {
    display: none !important;
  }

  /* Academic year: tam satıra yayıl */
  .academic-year-wrapper {
    order: 10;
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-top: 6px;
    gap: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
  }

  .academic-year-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .academic-year-active-badge {
    flex-shrink: 0;
  }

  .academic-year-readonly-badge {
    flex-shrink: 0;
  }

  .academic-year-add {
    flex-shrink: 0;
  }

  .academic-year-warning {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .navbar>.btn,
  .navbar-actions .btn {
    font-size: 12px;
    padding: 6px;
    height: 32px;
    min-width: 32px;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
    border-radius: var(--radius-md, 8px);
  }

  .navbar-actions .btn .btn-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    margin: 0;
  }

  .navbar-actions .btn .btn-label {
    display: none !important;
  }

  .pwa-install-intent {
    align-items: stretch;
    flex-direction: column;
  }

  .pwa-install-intent-actions {
    width: 100%;
  }

  .pwa-install-intent-actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* Sidebar → Drawer */
  .main-content {
    flex-direction: row;
  }

  .sidebar {
    position: fixed !important;
    top: var(--navbar-height);
    left: 0;
    height: calc(100dvh - var(--navbar-height));
    width: min(280px, 82vw) !important;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    border-right: 1px solid var(--border-color) !important;
    border-bottom: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
  }

  .sidebar.sidebar-drawer-open {
    transform: translateX(0);
  }

  .sidebar-btn {
    white-space: normal;
    margin-bottom: 2px;
    flex-shrink: unset;
    padding: 12px 14px;
    font-size: 14px;
    min-height: 44px;
  }

  .sidebar-group {
    display: block;
    padding: 14px 12px 6px;
    margin-top: 6px;
  }

  .sidebar-group-label {
    font-size: 11px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 8px;
  }

  .sidebar-group>.sidebar-section {
    margin-bottom: 2px;
  }

  .sidebar-group-controls {
    padding-bottom: 16px;
  }

  .sidebar-reorder-btn {
    margin-top: auto;
    padding-top: 16px;
  }

  .sidebar-divider-label {
    display: block !important;
    padding: 12px 8px 4px;
  }

  .sidebar-divider {
    display: block !important;
    margin: 8px 4px;
  }

  .sidebar-group-controls {
    padding: 8px;
    margin-bottom: 4px;
  }

  .sidebar-group-controls button {
    width: 100%;
    justify-content: center;
    padding: 10px;
    font-size: 13px;
  }

  /* Content */
  .content-area {
    padding: 14px 14px calc(96px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    min-width: 0;
  }

  /* Section header */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }

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

  /* Cards */
  .cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .card {
    padding: 16px;
  }

  /* Student panel responsive */
  .filter-row {
    flex-direction: column;
    align-items: stretch !important;
  }

  .filter-row select,
  .filter-row .btn {
    width: 100%;
    min-width: unset !important;
  }

  .filter-row .date-inputs {
    flex-direction: column;
    width: 100%;
  }

  .filter-row .date-inputs input {
    width: 100%;
  }

  /* Lesson type tabs - mobile */
  .lesson-type-tabs {
    width: 100%;
    display: flex;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .lesson-type-tab {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 12px;
  }

  /* Ders Yönetimi paneli - mobil */
  #groupLessonsSection .section-header>div:last-child {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  #groupLessonsSection input,
  #groupLessonsSection select,
  #groupLessonsSection button {
    width: 100%;
    min-width: unset;
  }

  .lesson-stats-card {
    min-width: 100% !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* Modal responsive */
  .modal-content {
    max-width: 95vw !important;
    max-height: 90vh;
  }

  .modal-body {
    padding: 16px;
  }

  .schedule-type-selector {
    flex-direction: column;
  }

  .schedule-type-option {
    padding: 12px;
  }

  /* Form responsive */
  .form-row {
    flex-direction: column;
    gap: 12px;
  }

  .form-row .form-group {
    width: 100%;
  }

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

  table {
    font-size: 12px;
  }

  /* Filter controls */
  .filter-controls {
    flex-direction: column;
    gap: 8px;
  }

  .filter-controls>* {
    width: 100%;
  }
}

/* ── Tablet 769px - 1024px ─────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    --sidebar-width: 200px;
  }

  .content-area {
    padding: 20px 20px calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .sidebar-btn {
    padding: 8px 10px;
    font-size: 13px;
  }

  .sidebar-group-label {
    font-size: 10px;
  }

  .section-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .lesson-stats-card {
    flex: 1 1 calc(50% - 8px);
    min-width: 160px;
  }

  .form-row {
    flex-wrap: wrap;
  }

  .form-row .form-group {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }

  /* Schedule horizontal scroll on small screens */
  .student-section #studentScheduleContent {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .card-actions {
    gap: 6px;
    flex-wrap: wrap;
  }

  .card-actions .btn {
    flex: 1;
    min-width: 0;
    text-align: center;
    justify-content: center;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-card {
    padding: 14px 12px;
    gap: 10px;
  }

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

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

  .stat-icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
    border-radius: 10px;
  }

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

  .form-group label {
    font-size: 13px;
  }

  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='number'],
  input[type='tel'],
  input[type='date'],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }

  textarea {
    min-height: 80px;
  }

  /* Buttons */
  .btn {
    min-height: 42px;
  }

  .btn-small {
    min-height: 34px;
    font-size: 12px;
    padding: 6px 10px;
  }

  /* Table */
  .table-container {
    border-radius: var(--radius-md);
  }

  th {
    padding: 10px 12px;
    font-size: 11px;
  }

  td {
    padding: 10px 12px;
    font-size: 13px;
  }

  /* Schedule */
  .schedule-slot {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  .schedule-slot input[type='color'] {
    width: 100%;
  }

  .schedule-slot .btn-danger {
    grid-column: span 3;
    justify-self: end;
  }

  /* Results */
  .result-inputs {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Performance */
  .performance-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .performance-value {
    font-size: 24px;
  }

  /* Info rows */
  .info-label {
    min-width: 100px;
  }

  /* Modal → Bottom Sheet */
  .modal {
    padding: 0;
    align-items: flex-end !important;
  }

  .modal-content {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    max-width: 100% !important;
    width: 100%;
    max-height: 92dvh;
    animation: sheetUp 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes sheetUp {
    from {
      transform: translateY(60px);
      opacity: 0.7;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .modal-header {
    padding: 28px 18px 16px;
    position: relative;
  }

  .modal-header::before {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
  }

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

  .modal-body {
    padding: 16px 18px;
  }

  .modal-footer {
    padding: 12px 18px 22px;
    gap: 8px;
  }

  .modal-footer .btn {
    flex: 1;
  }

  .modal-large {
    max-width: 100% !important;
  }

  /* Attendance */
  .attendance-controls {
    flex-direction: column;
  }

  .attendance-controls select,
  .attendance-controls input {
    width: 100%;
  }

  /* Search */
  .search-box input {
    max-width: 100%;
    width: 100%;
  }

  /* Theme toggle */
  .theme-toggle {
    bottom: 16px;
    right: 14px;
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  /* Footer */
  .app-footer {
    padding: 8px 14px;
    font-size: 11px;
  }

  /* Pagination */
  .pagination-wrap {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .pagination-btn {
    min-width: 40px;
    height: 40px;
  }

  /* Admin stats vertical */
  .admin-stats-vertical {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .admin-stats-vertical .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-stats-vertical .chart-wrapper,
  .admin-stats-vertical .stat-card {
    width: 100%;
  }

  /* Guidance calendar */
  .guidance-calendar {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .guidance-day {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
  }

  .guidance-day h4 {
    margin-bottom: 10px;
    color: var(--text-primary);
  }

  .guidance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
  }

  .guidance-item:last-child {
    border-bottom: none;
  }

  /* Assignments */
  .assignments-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Bar chart */
  .bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .bar-label {
    width: 120px;
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .bar-track {
    flex: 1;
    background: var(--secondary-bg);
    border-radius: 6px;
    height: 22px;
    overflow: hidden;
    border: 1px solid var(--border-color);
  }

  .bar-fill {
    height: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding-left: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    min-width: 4px;
  }

  .bar-val {
    font-size: 12px;
    font-weight: 700;
    min-width: 40px;
    text-align: right;
  }

  /* Topic item */
  .topic-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .topic-stats {
    gap: 10px;
  }

  /* Card size */
  .card h3 {
    font-size: 15px;
  }

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

  /* Buttons within 420 range pulled up */
  .btn {
    padding: 9px 16px;
    font-size: 13px;
  }

  .btn-small {
    padding: 5px 11px;
    font-size: 12px;
  }

  /* Schedule single col */
  .schedule-slot {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .schedule-slot input[type='color'] {
    width: 100%;
  }

  /* User score chip */
  .user-score-chip {
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
  }
}

/* ── Small mobile ≤ 480px ─────────────────────────────────────── */
@media (max-width: 480px) {
  .navbar {
    padding: 6px 10px;
    gap: 6px 4px;
  }

  .navbar-logo {
    height: 22px;
  }

  .navbar-brand h2 {
    font-size: 13px;
    gap: 4px;
  }

  .navbar-brand h2 .navbar-logo {
    margin-right: 0;
  }

  .hamburger-btn {
    width: 34px;
    height: 34px;
  }

  .hamburger-btn span {
    width: 18px;
  }

  .user-badge {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }

  .user-badge::first-letter {
    font-size: 12px;
  }

  .academic-year-select {
    font-size: 12px;
    padding: 5px 24px 5px 10px;
    min-width: 100px;
  }

  .academic-year-add {
    padding: 5px 6px;
  }

  .academic-year-active-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  .navbar-actions {
    padding-left: 38px;
  }

  .navbar-actions .btn {
    padding: 5px 7px;
  }
}

/* ── Small phone ≤ 420px ─────────────────────────────────────── */
@media (max-width: 420px) {
  .login-container {
    padding: 28px 16px;
  }

  .login-header h1 {
    font-size: 20px;
  }

  .navbar-brand h2 {
    font-size: 12px;
  }

  .stats-grid {
    gap: 8px;
  }

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

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

  .performance-value {
    font-size: 20px;
  }

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

  th {
    padding: 8px 10px;
  }

  td {
    padding: 8px 10px;
    font-size: 12px;
  }

  .card-actions .btn {
    font-size: 11px;
    padding: 5px 7px;
  }

  .result-inputs {
    grid-template-columns: 1fr;
  }

  .modal-body {
    padding: 12px 14px;
  }

  .modal-footer {
    padding: 10px 14px 20px;
  }

  .schedule-slot {
    grid-template-columns: 1fr;
  }

  .schedule-slot .btn-danger {
    grid-column: span 1;
  }
}

/* ── Landscape telefon ───────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .sidebar {
    height: calc(100dvh - var(--navbar-height));
  }

  .modal-content {
    max-height: 96dvh;
  }
}

/* ═══════════════════════════════════════════════════════════
   ÖĞRETMEN PANELİ — Özel Stiller
   ═══════════════════════════════════════════════════════════ */

/* ── Haftalık Takvim Genel ─────────────────────────────── */
.teacher-week-calendar {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: var(--shadow-xs);
}

.week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 2px solid var(--border-color);
}

.week-day-header {
  padding: 12px 8px;
  text-align: center;
  background: var(--secondary-bg);
  border-right: 1px solid var(--border-color);
}

.week-day-header:last-child {
  border-right: none;
}

.week-day-header.today {
  background: var(--accent);
}

.week-day-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
}

.week-day-header.today .week-day-name,
.week-day-header.today .week-day-num {
  color: #fff;
}

.week-day-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 2px;
}

.week-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  min-height: 160px;
}

.week-day-cell {
  padding: 8px;
  border-right: 1px solid var(--border-color);
  min-height: 100px;
  vertical-align: top;
}

.week-day-cell:last-child {
  border-right: none;
}

.week-day-cell.today {
  background: rgba(59, 130, 246, 0.03);
}

/* ── Rehberlik Oturumu Kartı (takvim içi) ──────────────── */
.guidance-slot-card {
  margin-bottom: 6px;
  padding: 6px 8px;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  font-size: 12px;
  transition:
    opacity 0.15s,
    transform 0.15s;
}

.guidance-slot-card:hover {
  opacity: 0.85;
  transform: translateX(2px);
}

.guidance-slot-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guidance-slot-time {
  font-size: 11px;
  color: var(--text-secondary);
}

.guidance-slot-topic {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Rehberlik Liste Öğesi ──────────────────────────────── */
.guidance-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  gap: 12px;
  transition: background 0.15s;
}

.guidance-list-item:hover {
  background: var(--secondary-bg);
}

.guidance-student-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.guidance-color-bar {
  width: 4px;
  height: 36px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Öğrenci Renk Efsanesi ─────────────────────────────── */
.student-color-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Ödev Kartı ────────────────────────────────────────── */
.assignment-card {
  border-left: 4px solid var(--accent);
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.assignment-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.assignment-card.overdue {
  border-left-color: var(--danger-color);
}

.assignment-completion-bar {
  margin-bottom: 14px;
}

/* ── Öğrenci Detay Modal (öğretmen) ─────────────────────── */
.teacher-student-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.teacher-student-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--primary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

/* ── Net Trend Mini Grafik ─────────────────────────────── */
.net-trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 60px;
  margin-bottom: 12px;
}

.trend-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.trend-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  opacity: 0.85;
  transition: height 0.3s;
}

.trend-bar-label {
  font-size: 8px;
  color: var(--text-tertiary);
}

/* ── Performans Sıralama ────────────────────────────────── */
.perf-rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.perf-rank-medal {
  width: 32px;
  text-align: center;
  font-size: 16px;
  flex-shrink: 0;
}

/* ── Veli Bildirimi Şablon Butonları ───────────────────── */
.teacher-template-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Haftalık Takvim Navigasyon ─────────────────────────── */
.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.week-nav-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
}

.week-nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Profil Üst Başlık ────────────────────────────────── */
.teacher-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.teacher-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--primary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

/* ── Admin Öğretmen Tablosu ─────────────────────────────── */
.admin-teacher-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--primary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.guidance-student-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.guidance-chip {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

/* ── Öğrenci Tamamlanma Durumu Chip ─────────────────────── */
.student-status-chip {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-color);
  background: var(--secondary-bg);
}

.student-status-chip.done {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--success-color);
}

.student-status-chip.pending {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--warning-color);
}

/* ── Bildirim Gönderim Geçmişi ──────────────────────────── */
.teacher-notification-history {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.teacher-notification-history-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--secondary-bg);
}

/* ── Kurum öğretmen kartı geliştirilmiş ─────────────────── */
.teacher-card {
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  margin-bottom: 14px;
}

.teacher-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.teacher-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.class-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 190px;
  border-radius: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.class-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.class-card-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.class-card-muted {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.class-card-muted span {
  color: var(--text-tertiary);
}

.class-card-actions {
  margin-top: auto;
  gap: 8px;
}

/* ─── Class management (modern) ─────────────────────────────────────────── */

.class-card-modern {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  position: relative;
  border-left: 4px solid var(--accent);
  background: var(--card-bg);
}

.class-card-modern__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.class-card-modern__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  min-width: 0;
}

.class-card-modern__title .icon {
  color: var(--accent);
  flex-shrink: 0;
}

.class-card-modern__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 0;
}

.class-card-modern__stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  min-width: 0;
}

.class-card-modern__stat .icon {
  color: var(--accent);
  flex-shrink: 0;
  opacity: 0.85;
}

.class-card-modern__stat-value {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.class-card-modern__stat-value--empty {
  color: var(--text-tertiary);
  font-weight: 500;
  font-style: italic;
}

.class-card-modern__fill {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.class-card-modern__fill-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.class-card-modern__fill-head strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.class-card-modern__fill-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--border-color);
  overflow: hidden;
}

.class-card-modern__fill-bar>span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.class-card-modern__fill-bar.fill-warn>span {
  background: var(--warning-color);
}

.class-card-modern__fill-bar.fill-danger>span {
  background: var(--danger-color);
}

.class-card-modern__fill-bar.fill-ok>span {
  background: var(--success-color);
}

.class-card-modern__fill-bar.fill-accent>span {
  background: var(--accent);
}

.class-card-modern__hint {
  font-size: 11px;
  margin: 0;
  font-weight: 600;
  color: var(--danger-color);
}

.class-card-modern__actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-top: 4px;
}

.class-card-modern__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ─── Sınıf detay modal yenileme ─────────────────────────────────────────── */

.class-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-subtle), transparent);
  border: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.class-detail-hero__title {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.class-detail-hero__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.class-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.class-detail-stat {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.class-detail-stat__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.class-detail-stat__label .icon {
  color: var(--accent);
}

.class-detail-stat__value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.class-detail-stat__value--muted {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.class-detail-stat__bar {
  margin-top: 6px;
  height: 5px;
  border-radius: 999px;
  background: var(--border-color);
  overflow: hidden;
}

.class-detail-stat__bar>span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.4s ease;
}

.class-detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.class-detail-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.class-detail-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.class-detail-section__title .icon {
  color: var(--accent);
}

.class-detail-section__count {
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 13px;
}

/* ─── Öğrenci tablosu yenileme (sınıf detayı) ──────────────────────────── */

.class-student-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}

.class-student-row {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border-color);
  font-size: 13px;
  align-items: center;
}

.class-student-row__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-weight: 500;
  min-width: 0;
}

.class-student-row__name .icon {
  color: var(--accent);
  opacity: 0.8;
  flex-shrink: 0;
}

.class-student-row__meta {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.class-student-empty {
  padding: 28px 16px;
  text-align: center;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  font-size: 13px;
  margin-bottom: 24px;
}

.class-student-empty .icon {
  display: block;
  margin: 0 auto 8px auto;
  opacity: 0.5;
}

/* ─── Haftalık ders programı (günlere göre gruplanmış) ────────────────── */

.class-schedule-week {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.class-schedule-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.class-schedule-day__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

.class-schedule-day__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.class-schedule-day__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--accent-subtle);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.2px;
}

.class-schedule-lessons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.class-schedule-lesson {
  display: flex;
  align-items: stretch;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.class-schedule-lesson:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}

.class-schedule-lesson__bar {
  width: 4px;
  flex-shrink: 0;
  background: var(--accent);
}

.class-schedule-lesson__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 16px;
  align-items: center;
  min-width: 0;
}

.class-schedule-lesson__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.class-schedule-lesson__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.class-schedule-lesson__teacher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.class-schedule-lesson__teacher .icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.class-schedule-lesson__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  background: var(--accent-subtle);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.class-schedule-lesson__time .icon {
  color: var(--accent);
}

.class-schedule-empty {
  padding: 36px 20px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
  text-align: center;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.class-schedule-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.class-schedule-empty__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.class-schedule-empty__hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 360px;
}

/* ─── Schedule slot kartı (modern) ─────────────────────────────────────── */

.schedule-slot-modern {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.schedule-slot-modern:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.schedule-slot-modern.is-empty {
  border-style: dashed;
  background: var(--accent-subtle);
}

.schedule-slot-modern__hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.schedule-slot-modern__hint .icon {
  color: var(--accent);
}

.schedule-slot-modern__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.schedule-slot-modern__swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.schedule-slot-modern__day {
  flex: 1;
  min-width: 160px;
  position: relative;
  padding: 0;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

.schedule-slot-modern__day:hover {
  border-color: var(--border-strong);
}

.schedule-slot-modern__day:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.schedule-slot-modern__day::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  transition: border-color 0.15s ease;
}

.schedule-slot-modern__day:focus-within::after {
  border-color: var(--accent);
}

.schedule-slot-modern__day select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  min-height: 40px;
  padding: 8px 36px 8px 14px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  outline: none;
  background-image: none;
}

.schedule-slot-modern__day select option {
  background: var(--card-bg);
  color: var(--text-primary);
  font-weight: 500;
}

.schedule-slot-modern__remove {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  margin-left: auto;
}

.schedule-slot-modern__remove:hover {
  background: var(--danger-bg);
  color: var(--danger-color);
  border-color: var(--danger-color);
}

.schedule-slot-modern__grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.schedule-slot-modern__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.schedule-slot-modern__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.schedule-slot-modern__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.schedule-slot-modern__field input,
.schedule-slot-modern__field select {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  background: var(--input-bg);
  color: var(--input-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.schedule-slot-modern__field input:focus,
.schedule-slot-modern__field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.schedule-slot-modern__field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  appearance: none;
}

.schedule-slot-modern__color {
  width: 56px;
  height: 40px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--input-bg);
}

.schedule-slot-modern__color::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.schedule-slot-modern__color::-webkit-color-swatch {
  border-radius: 4px;
  border: none;
}

.schedule-slot-modern__field--required label::after {
  content: ' *';
  color: var(--danger-color);
}

@media (max-width: 768px) {
  .class-card-modern__stats {
    grid-template-columns: 1fr;
  }

  .class-card-modern__actions {
    grid-template-columns: 1fr;
  }

  .class-detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .class-student-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .class-student-row__meta {
    font-size: 12px;
  }

  .schedule-slot-modern__grid,
  .schedule-slot-modern__row {
    grid-template-columns: 1fr 1fr;
  }

  .schedule-slot-modern__color {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .class-detail-stats {
    grid-template-columns: 1fr;
  }

  .class-schedule-lesson__body {
    grid-template-columns: 1fr;
  }

  .schedule-slot-modern__grid,
  .schedule-slot-modern__row {
    grid-template-columns: 1fr;
  }
}

[data-theme='dark'] .schedule-slot-modern__day::after {
  border-color: #94a3b8;
}

[data-theme='dark'] .schedule-slot-modern__field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .class-schedule-lesson__time {
  background: rgba(92, 124, 186, 0.18);
}

/* ── Mobile: Haftalık takvim scroll ─────────────────────── */
@media (max-width: 768px) {

  .week-header,
  .week-body {
    min-width: 560px;
  }

  .teacher-week-calendar {
    overflow-x: auto;
  }

  .week-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .net-trend-chart {
    height: 48px;
  }

  .student-color-legend {
    gap: 8px;
  }

  .perf-rank-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── Kurum öğretmen detayı (viewTeacherDetail) ──────────── */
.teacher-detail-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}

.teacher-detail-section h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

/* ── Boş hücre göstergesi takvimde ─────────────────────── */
.week-empty-cell {
  color: var(--text-tertiary);
  font-size: 11px;
  text-align: center;
  padding-top: 12px;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════
   PAGINATION — Sayfalama Kontrolleri
   ═══════════════════════════════════════════════════════════ */

.pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0 8px;
}

.pagination-info {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.pagination-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.pagination-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pagination-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pagination-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pagination-ellipsis {
  width: 28px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   TOPLU YOKLAMA — Bulk Attendance Grid
   ═══════════════════════════════════════════════════════════ */

.bulk-attendance-btn {
  transition: all 0.15s ease;
}

.bulk-attendance-btn:hover {
  opacity: 0.8;
  transform: scale(1.08);
}

.bulk-attendance-btn.present {
  background: color-mix(in srgb, var(--success-color) 15%, transparent) !important;
  color: var(--success-color) !important;
}

.bulk-attendance-btn.absent {
  background: color-mix(in srgb, var(--danger-color) 15%, transparent) !important;
  color: var(--danger-color) !important;
}

/* ═══════════════════════════════════════════════════════════
   SINIF ÖĞRENCİ SEÇİM — Class Student Selection
   ═══════════════════════════════════════════════════════════ */

.selection-item.in-class {
  background: color-mix(in srgb, var(--success-color) 8%, transparent);
  border-left: 3px solid var(--success-color);
  padding-left: 9px;
}

/* ═══════════════════════════════════════════════════════════
   NET ORANI — Radio Button Stili
   ═══════════════════════════════════════════════════════════ */

input[type='radio'] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   FORM — TC Kimlik monospace gösterim
   ═══════════════════════════════════════════════════════════ */

span[style*='font-family:monospace'] {
  letter-spacing: 0.05em;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN TEACHERS TABLE WRAP
   ═══════════════════════════════════════════════════════════ */

#adminTeachersTableWrap .table-container {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN TEACHER SEARCH WRAP
   ═══════════════════════════════════════════════════════════ */

.admin-teacher-search-wrap input {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   SINIFA ÖĞRENCİ EKLE — Filtre Paneli
   ═══════════════════════════════════════════════════════════ */

.class-student-filter-panel {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.class-student-filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Arama kutusu */
.class-student-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
}

.class-student-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.class-student-search-input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  box-sizing: border-box;
}

.class-student-search-input::placeholder {
  color: var(--text-tertiary);
}

.class-student-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Select'ler */
.class-student-filter-select {
  min-height: 38px;
  padding: 8px 36px 8px 12px;
  border: var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 13.5px;
  font-weight: 500;
  min-width: 150px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.class-student-filter-select--short {
  min-width: 110px;
}

.class-student-filter-select:hover {
  border-color: var(--border-strong);
  background-color: var(--input-bg-hover);
}

.class-student-filter-select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232c3e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .class-student-filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .class-student-filter-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235c7cba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Meta satır */
.class-student-filter-meta {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

/* Seçim sayacı badge */
.class-student-count-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 3px 12px;
  transition:
    background 0.15s,
    color 0.15s;
}

.class-student-count-badge.has-selection {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Liste */
.class-student-list {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

/* Scrollbar temaya uygun */
.class-student-list::-webkit-scrollbar {
  width: 6px;
}

.class-student-list::-webkit-scrollbar-track {
  background: var(--secondary-bg);
  border-radius: 3px;
}

.class-student-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.class-student-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN RAPORLAR — Tamamen yeniden yazılmış, temaya tam uyumlu
   ═══════════════════════════════════════════════════════════════════ */

/* ── Temel kart ── */
.rpt-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 16px;
}

/* ── Filtre kartı ── */
.rpt-filter-card {
  padding: 20px 22px 0;
}

.rpt-filter-top {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 18px;
}

.rpt-filter-fields {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.rpt-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 140px;
}

.rpt-field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.65px;
  color: var(--text-tertiary);
  user-select: none;
}

.rpt-field-ctrl {
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13.5px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  width: 100%;
}

.rpt-field-ctrl:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44, 62, 140, 0.12);
}

/* ── Filtre aksiyon butonları ── */
.rpt-filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.rpt-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.rpt-dl-pdf {
  background: var(--danger-bg);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
}

.rpt-dl-pdf:hover {
  background: var(--danger-color);
  color: #fff;
  box-shadow: 0 4px 12px rgba(177, 59, 59, 0.25);
}

.rpt-dl-excel {
  background: var(--success-bg);
  color: var(--success-color);
  border: 1px solid var(--success-color);
}

.rpt-dl-excel:hover {
  background: var(--success-color);
  color: #fff;
  box-shadow: 0 4px 12px rgba(44, 110, 44, 0.25);
}

/* ── Rapor türü sekme şeridi ── */
.rpt-type-strip {
  display: flex;
  gap: 2px;
  border-top: 1px solid var(--border-color);
  margin: 0 -22px;
  padding: 0 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.rpt-type-strip::-webkit-scrollbar {
  display: none;
}

.rpt-type-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 18px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
  /* space balance */
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 0;
}

.rpt-type-btn:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

.rpt-type-btn.active {
  color: var(--accent);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

.rpt-type-icon {
  font-size: 16px;
  line-height: 1;
}

/* ── Meta şerit ── */
.rpt-meta-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.rpt-meta-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  min-width: 110px;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}

.rpt-meta-chip:hover {
  box-shadow: var(--shadow-sm);
}

.rpt-meta-chip--danger {
  border-color: var(--danger-color);
  background: var(--danger-bg);
}

.rpt-meta-chip-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.rpt-meta-chip-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rpt-meta-chip-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

.rpt-meta-chip-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.rpt-meta-chip--danger .rpt-meta-chip-val {
  color: var(--danger-color);
}

/* ── Çıktı kartı ── */

.rpt-section-head {
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-color);
  background: var(--secondary-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rpt-section-head--danger {
  background: var(--danger-bg);
}

.rpt-section-head-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-secondary);
}

.rpt-section-head--danger .rpt-section-head-title {
  color: var(--danger-color);
}

.rpt-section-body {
  padding: 18px 22px;
}

/* ── Bar chart ── */
.rpt-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rpt-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rpt-bar-label {
  width: 150px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.rpt-bar-track {
  flex: 1;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  height: 28px;
  overflow: hidden;
  position: relative;
}

.rpt-bar-fill {
  height: 100%;
  border-radius: 7px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  min-width: 4px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.rpt-bar-num {
  font-size: 13px;
  font-weight: 700;
  min-width: 36px;
  text-align: right;
  color: var(--text-primary);
  flex-shrink: 0;
}

.rpt-bar-tag {
  font-size: 11.5px;
  color: var(--text-tertiary);
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
  font-weight: 500;
  flex-shrink: 0;
}

/* ── Kapasite bar ── */
.rpt-cap-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.rpt-cap-track {
  flex: 1;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  height: 10px;
  overflow: hidden;
}

.rpt-cap-fill {
  height: 100%;
  border-radius: 7px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.rpt-cap-nums {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}

/* ── Podium (top 5) ── */
.rpt-podium-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  margin-bottom: 8px;
  transition: var(--transition);
}

.rpt-podium-row:hover {
  background: var(--hover-bg);
  border-color: var(--border-strong);
  transform: translateX(3px);
}

.rpt-podium-medal {
  font-size: 26px;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}

.rpt-podium-info {
  flex: 1;
  min-width: 0;
}

.rpt-podium-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rpt-podium-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.rpt-podium-stats {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── Badges ── */
.rpt-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--secondary-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.rpt-badge--accent {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent-light);
}

.rpt-badge--green {
  background: var(--success-bg);
  color: var(--success-color);
  border-color: var(--success-bg);
}

.rpt-badge--muted {
  background: var(--secondary-bg);
  color: var(--text-tertiary);
}

.rpt-badge--danger {
  background: var(--danger-color);
  color: #fff;
  border: none;
}

.rpt-badge--danger-outline {
  background: var(--danger-bg);
  color: var(--danger-color);
  border-color: var(--danger-color);
}

/* ── Alert satırı (kritik devamsızlık) ── */
.rpt-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger-color) 25%, transparent);
  border-left: 3px solid var(--danger-color);
  margin-bottom: 8px;
  transition: var(--transition);
}

.rpt-alert-row:hover {
  opacity: 0.85;
}

.rpt-alert-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.rpt-alert-info strong {
  color: var(--text-primary);
  font-size: 14px;
}

.rpt-alert-inst {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: 4px;
}

.rpt-alert-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── OK banner ── */
.rpt-ok-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--success-bg);
  color: var(--success-color);
  border: 1px solid color-mix(in srgb, var(--success-color) 25%, transparent);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
}

/* ── Tablo hücre stilleri ── */
.rpt-td-num {
  color: var(--text-tertiary);
  font-size: 12px;
  width: 32px;
}

.rpt-td-center {
  text-align: center;
}

.rpt-td-muted {
  color: var(--text-secondary);
  font-size: 13px;
}

.rpt-td-accent {
  color: var(--accent);
  font-weight: 700;
}

.rpt-td-green {
  color: var(--success-color);
  font-weight: 600;
}

.rpt-td-red {
  color: var(--danger-color);
  font-weight: 600;
}

.rpt-td-lg {
  font-size: 15px;
}

.rpt-td-bold {
  font-weight: 700;
}

/* ── Tür chip (deneme türü) ── */
.rpt-type-chip {
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Boş state ── */
.rpt-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
  font-size: 14px;
  padding: 12px 0;
}

.rpt-empty-icon {
  font-size: 22px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .rpt-filter-top {
    flex-direction: column;
    align-items: stretch;
  }

  .rpt-filter-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .rpt-meta-strip {
    gap: 8px;
  }

  .rpt-meta-chip {
    min-width: 90px;
    padding: 8px 10px;
  }

  .rpt-meta-chip-val {
    font-size: 16px;
  }

  .rpt-bar-label {
    width: 100px;
  }

  .rpt-podium-stats {
    flex-wrap: wrap;
  }

  .rpt-section-body {
    padding: 14px 16px;
  }

  .rpt-section-head {
    padding: 12px 16px;
  }

  .rpt-filter-card {
    padding: 16px 16px 0;
  }

  .rpt-type-strip {
    margin: 0 -16px;
    padding: 0 16px;
  }
}

@media (max-width: 600px) {
  .rpt-type-btn {
    padding: 12px 12px;
    font-size: 12.5px;
    gap: 5px;
  }

  .rpt-type-icon {
    font-size: 14px;
  }

  .rpt-bar-label {
    width: 80px;
    font-size: 12px;
  }

  .rpt-meta-chip {
    flex: 1;
    min-width: 80px;
  }

  .rpt-dl-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REHBERLİK — Sınav Hedefi, Döngüsel Görüşme, Öğrenci Filtresi
   ═══════════════════════════════════════════════════════════════ */

/* ── Sınav Hedefi Chip (guidance modal) ── */
.guidance-exam-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.exam-target-chip {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
}

.exam-target-chip input[type='radio'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.exam-target-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--card-bg);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.exam-target-chip:hover span {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.exam-target-chip input[type='radio']:checked+span {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(44, 62, 140, 0.25);
}

/* ── Döngüsel Görüşme Kutusu ── */
.guidance-recurring-box {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.guidance-recurring-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.guidance-recurring-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.guidance-recurring-check-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.guidance-recurring-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  padding-top: 2px;
}

/* ── Döngüsel önizleme ── */
.guidance-recurring-preview {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 12px;
}

.guidance-recur-preview-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.guidance-recur-preview-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.guidance-recur-date {
  padding: 3px 10px;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--accent-light);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
}

.guidance-recur-date--more {
  background: var(--secondary-bg);
  color: var(--text-tertiary);
  border-color: var(--border-color);
}

/* ── Öğrenci Seçim Filtresi (addTeacher modal) ── */
.gs-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.gs-filter-search-wrap {
  position: relative;
  flex: 1;
  min-width: 160px;
}

.gs-filter-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.gs-filter-search {
  width: 100%;
  padding: 8px 10px 8px 30px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.gs-filter-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44, 62, 140, 0.1);
}

.gs-filter-select {
  min-height: 38px;
  padding: 8px 36px 8px 12px;
  border: var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-text);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  min-width: 130px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.gs-filter-select:hover {
  border-color: var(--border-strong);
  background-color: var(--input-bg-hover);
}

.gs-filter-select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232c3e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .gs-filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .gs-filter-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235c7cba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.gs-filter-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.gs-count-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 3px 12px;
  transition:
    background 0.15s,
    color 0.15s;
}

.gs-count-badge.has-selection {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent-light);
}

/* ── Sınav Hedefi Rozeti (öğrenci listesi satırı) ── */
.gs-exam-badge,
.ts-exam-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.gs-exam-lgs,
.ts-exam-lgs {
  background: #e0f2fe;
  color: #0284c7;
}

.gs-exam-tyt,
.ts-exam-tyt {
  background: #ede9fe;
  color: #7c3aed;
}

.gs-exam-ayt,
.ts-exam-ayt {
  background: #fce7f3;
  color: #be185d;
}

.gs-exam-kpss,
.ts-exam-kpss {
  background: #fef3c7;
  color: #b45309;
}

.gs-exam-ales,
.ts-exam-ales {
  background: #d1fae5;
  color: #065f46;
}

[data-theme='dark'] .gs-exam-lgs,
[data-theme='dark'] .ts-exam-lgs {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
}

[data-theme='dark'] .gs-exam-tyt,
[data-theme='dark'] .ts-exam-tyt {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
}

[data-theme='dark'] .gs-exam-ayt,
[data-theme='dark'] .ts-exam-ayt {
  background: rgba(190, 24, 93, 0.15);
  color: #f9a8d4;
}

[data-theme='dark'] .gs-exam-kpss,
[data-theme='dark'] .ts-exam-kpss {
  background: rgba(180, 83, 9, 0.15);
  color: #fbbf24;
}

[data-theme='dark'] .gs-exam-ales,
[data-theme='dark'] .ts-exam-ales {
  background: rgba(6, 95, 70, 0.15);
  color: #34d399;
}

/* ── Öğretmen Öğrenci Listesi Filtresi ── */
.ts-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

.ts-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
}

.ts-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.ts-search-input {
  width: 100%;
  padding: 9px 12px 9px 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13.5px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.ts-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44, 62, 140, 0.1);
}

.ts-filter-select {
  min-height: 38px;
  padding: 8px 36px 8px 12px;
  border: var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-text);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  min-width: 120px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.ts-filter-select:hover {
  border-color: var(--border-strong);
  background-color: var(--input-bg-hover);
}

.ts-filter-select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232c3e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .ts-filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .ts-filter-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235c7cba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.ts-count-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* =============================================
   TEACHER STUDENTS PANEL RESPONSIVE
   ============================================= */

/* ---- Filter Bar ---- */
#teacherStudentsList .ts-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  #teacherStudentsList .ts-filter-bar {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  #teacherStudentsList .ts-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 12px;
  }

  #teacherStudentsList .ts-search-wrap {
    width: 100%;
  }

  #teacherStudentsList .ts-filter-select {
    font-size: 12px;
    padding: 7px 32px 7px 10px;
    min-height: 36px;
  }
}

@media (max-width: 360px) {
  #teacherStudentsList .ts-filter-bar {
    gap: 5px;
  }

  #teacherStudentsList .ts-filter-select {
    font-size: 11px;
    padding: 6px 28px 6px 8px;
    min-height: 34px;
  }
}

/* ---- Search Input ---- */
#teacherStudentsList .ts-search-input {
  font-size: 13.5px;
  padding: 9px 12px 9px 32px;
}

@media (max-width: 480px) {
  #teacherStudentsList .ts-search-input {
    font-size: 12px;
    padding: 8px 10px 8px 30px;
  }
}

@media (max-width: 360px) {
  #teacherStudentsList .ts-search-input {
    font-size: 11px;
    padding: 7px 8px 7px 28px;
  }
}

/* ---- Table Container ---- */
#teacherStudentsList .table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

#teacherStudentsList #tsTable {
  min-width: 700px;
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 480px) {
  #teacherStudentsList .table-container {
    border-radius: 8px;
  }

  #teacherStudentsList #tsTable {
    min-width: 500px;
  }
}

@media (max-width: 360px) {
  #teacherStudentsList #tsTable {
    min-width: 400px;
  }
}

/* ---- Table Header ---- */
#teacherStudentsList #tsTable thead th {
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-tertiary);
  background: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

@media (max-width: 768px) {
  #teacherStudentsList #tsTable thead th {
    font-size: 10px;
    padding: 8px 10px;
  }
}

@media (max-width: 480px) {
  #teacherStudentsList #tsTable thead th {
    font-size: 9px;
    padding: 6px 8px;
  }
}

@media (max-width: 360px) {
  #teacherStudentsList #tsTable thead th {
    font-size: 9px;
    padding: 5px 6px;
  }
}

/* ---- Table Body Rows ---- */
#teacherStudentsList #tsTable tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}

#teacherStudentsList #tsTable tbody tr:last-child {
  border-bottom: none;
}

#teacherStudentsList #tsTable tbody tr:hover {
  background: var(--secondary-bg);
}

/* ---- Table Cells ---- */
#teacherStudentsList #tsTable tbody td {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-primary);
  vertical-align: middle;
}

@media (max-width: 768px) {
  #teacherStudentsList #tsTable tbody td {
    font-size: 12px;
    padding: 8px 10px;
  }
}

@media (max-width: 480px) {
  #teacherStudentsList #tsTable tbody td {
    font-size: 11px;
    padding: 6px 8px;
  }
}

@media (max-width: 360px) {
  #teacherStudentsList #tsTable tbody td {
    font-size: 10px;
    padding: 5px 6px;
  }
}

/* ---- Name Cell (Avatar + Name) ---- */
#teacherStudentsList #tsTable tbody td>div[style*="display:flex"] {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

#teacherStudentsList #tsTable tbody td>div>span[style*="32px"] {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 14px;
}

@media (max-width: 768px) {
  #teacherStudentsList #tsTable tbody td>div>span[style*="32px"] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  #teacherStudentsList #tsTable tbody td>div>span[style*="32px"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 11px;
  }

  #teacherStudentsList #tsTable tbody td>div>strong {
    font-size: 12px;
  }

  #teacherStudentsList #tsTable tbody td>div[style*="display:flex"] {
    gap: 6px;
  }
}

@media (max-width: 360px) {
  #teacherStudentsList #tsTable tbody td>div>span[style*="32px"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    font-size: 10px;
  }

  #teacherStudentsList #tsTable tbody td>div>strong {
    font-size: 11px;
  }
}

/* ---- Exam Badge ---- */
#teacherStudentsList .ts-exam-badge {
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 20px;
  font-weight: 700;
}

@media (max-width: 480px) {
  #teacherStudentsList .ts-exam-badge {
    font-size: 9px;
    padding: 2px 6px;
  }
}

/* ---- Detay Button ---- */
#teacherStudentsList #tsTable tbody td .btn-small {
  font-size: 11px;
  padding: 6px 10px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  #teacherStudentsList #tsTable tbody td .btn-small {
    font-size: 10px;
    padding: 5px 8px;
  }
}

@media (max-width: 480px) {
  #teacherStudentsList #tsTable tbody td .btn-small {
    font-size: 10px;
    padding: 5px 8px;
    border-radius: 6px;
  }
}

@media (max-width: 360px) {
  #teacherStudentsList #tsTable tbody td .btn-small {
    font-size: 9px;
    padding: 4px 6px;
    border-radius: 5px;
  }
}

/* ---- Column Visibility ---- */
/* Hide Veli and Telefon on tablet */
@media (max-width: 768px) {

  #teacherStudentsList th:nth-child(3),
  #teacherStudentsList th:nth-child(4),
  #teacherStudentsList td:nth-child(3),
  #teacherStudentsList td:nth-child(4) {
    display: none;
  }
}

/* Hide Ort. Net on phone */
@media (max-width: 480px) {

  #teacherStudentsList th:nth-child(6),
  #teacherStudentsList td:nth-child(6) {
    display: none;
  }
}

/* ---- Count Badge Responsive ---- */
#teacherStudentsList .ts-count-badge {
  font-size: 11px;
  padding: 3px 10px;
}

@media (max-width: 480px) {
  #teacherStudentsList .ts-count-badge {
    text-align: center;
    font-size: 10px;
  }
}

/* ---- Landscape Orientation ---- */
@media (max-width: 640px) and (orientation: landscape) {
  #teacherStudentsList .ts-filter-bar {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #teacherStudentsList .ts-search-wrap {
    flex: 1;
    min-width: 150px;
  }

  #teacherStudentsList .ts-filter-select {
    font-size: 11px;
    padding: 6px 28px 6px 10px;
  }

  #teacherStudentsList #tsTable thead th {
    font-size: 10px;
    padding: 7px 8px;
  }

  #teacherStudentsList #tsTable tbody td {
    font-size: 11px;
    padding: 7px 8px;
  }

  #teacherStudentsList #tsTable tbody td>div>span[style*="32px"] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    font-size: 12px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  #teacherStudentsList .ts-filter-bar {
    margin-bottom: 10px;
  }

  #teacherStudentsList #tsTable tbody td {
    padding: 5px 8px;
  }

  #teacherStudentsList #tsTable tbody td>div>span[style*="32px"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }
}

/* ---- Net Color Cells ---- */
#teacherStudentsList #tsTable tbody td[style*="font-weight:800"] {
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 480px) {
  #teacherStudentsList #tsTable tbody td[style*="font-weight:800"] {
    font-size: 11px;
  }
}

/* ---- Avg Net Cell ---- */
#teacherStudentsList #tsTable tbody td[style*="font-weight:700"][style*="color:var(--accent)"] {
  font-weight: 700;
}

@media (max-width: 480px) {
  #teacherStudentsList #tsTable tbody td[style*="font-weight:700"][style*="color:var(--accent)"] {
    font-size: 11px;
  }
}

/* ---- Empty State ---- */
#teacherStudentsList .empty-state {
  padding: 40px 20px;
}

@media (max-width: 480px) {
  #teacherStudentsList .empty-state {
    padding: 30px 16px;
  }

  #teacherStudentsList .empty-state-icon {
    font-size: 36px;
  }

  #teacherStudentsList .empty-state h3 {
    font-size: 16px;
  }

  #teacherStudentsList .empty-state p {
    font-size: 12px;
  }
}

/* =============================================
   AI YOKLAMA YORUMU RESPONSIVE
   ============================================= */

#teacherAIYoklamaYorumContent .ai-yoklama-wrap {
  padding: 20px;
}

@media (max-width: 768px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-wrap {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-wrap {
    padding: 12px;
  }
}

@media (max-width: 360px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-wrap {
    padding: 10px;
  }
}

/* ---- Section Title ---- */
#teacherAIYoklamaYorumContent .ai-yoklama-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-title {
    margin-bottom: 12px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-title {
    margin-bottom: 10px;
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-title {
    margin-bottom: 8px;
    font-size: 13px;
  }
}

/* ---- Summary Cards ---- */
#teacherAIYoklamaYorumContent .ai-yoklama-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-cards {
    gap: 10px;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-cards {
    gap: 8px;
    margin-bottom: 16px;
  }
}

@media (max-width: 360px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-cards {
    gap: 6px;
    margin-bottom: 12px;
  }
}

#teacherAIYoklamaYorumContent .ai-yoklama-stat-card {
  background: var(--bg-secondary);
  padding: 16px;
  border-radius: 12px;
  min-width: 140px;
  flex: 1;
}

@media (max-width: 768px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card {
    padding: 14px;
    border-radius: 10px;
    min-width: 120px;
  }
}

@media (max-width: 640px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card {
    min-width: calc(33.333% - 8px);
    flex: 1 1 calc(33.333% - 8px);
    padding: 12px;
  }
}

@media (max-width: 480px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card {
    min-width: calc(50% - 8px);
    flex: 1 1 calc(50% - 8px);
    padding: 10px;
    border-radius: 8px;
  }
}

@media (max-width: 360px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card {
    min-width: 100%;
    padding: 10px;
  }
}

#teacherAIYoklamaYorumContent .ai-yoklama-stat-card .ai-yoklama-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
}

#teacherAIYoklamaYorumContent .ai-yoklama-stat-card.green .ai-yoklama-stat-value {
  color: #10b981;
}

#teacherAIYoklamaYorumContent .ai-yoklama-stat-card.red .ai-yoklama-stat-value {
  color: #ef4444;
}

#teacherAIYoklamaYorumContent .ai-yoklama-stat-card .ai-yoklama-stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

@media (max-width: 768px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card .ai-yoklama-stat-value {
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card .ai-yoklama-stat-value {
    font-size: 18px;
  }

  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card .ai-yoklama-stat-label {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card .ai-yoklama-stat-value {
    font-size: 18px;
  }

  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card .ai-yoklama-stat-label {
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card .ai-yoklama-stat-value {
    font-size: 16px;
  }
}

/* ---- Table Container ---- */
#teacherAIYoklamaYorumContent .ai-yoklama-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

@media (max-width: 768px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-table-wrap {
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-table-wrap {
    border-radius: 8px;
  }
}

#teacherAIYoklamaYorumContent .ai-yoklama-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 550px;
}

@media (max-width: 480px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-table {
    font-size: 12px;
    min-width: 450px;
  }
}

@media (max-width: 360px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-table {
    font-size: 11px;
    min-width: 380px;
  }
}

/* ---- Table Header ---- */
#teacherAIYoklamaYorumContent .ai-yoklama-table thead th {
  padding: 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

@media (max-width: 768px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-table thead th {
    font-size: 10px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-table thead th {
    font-size: 9px;
    padding: 8px 6px;
  }
}

@media (max-width: 360px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-table thead th {
    font-size: 9px;
    padding: 6px 5px;
  }
}

/* ---- Table Body ---- */
#teacherAIYoklamaYorumContent .ai-yoklama-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}

#teacherAIYoklamaYorumContent .ai-yoklama-table tbody tr:last-child {
  border-bottom: none;
}

#teacherAIYoklamaYorumContent .ai-yoklama-table tbody tr:hover {
  background: var(--bg-secondary);
}

/* ---- Table Cells ---- */
#teacherAIYoklamaYorumContent .ai-yoklama-table tbody td {
  padding: 12px;
  font-size: 14px;
  color: var(--text-primary);
  vertical-align: middle;
}

@media (max-width: 768px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-table tbody td {
    font-size: 12px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-table tbody td {
    font-size: 11px;
    padding: 8px 6px;
  }
}

@media (max-width: 360px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-table tbody td {
    font-size: 10px;
    padding: 6px 5px;
  }
}

/* ---- Student Name Cell ---- */
#teacherAIYoklamaYorumContent .ai-yoklama-student-name {
  font-weight: 600;
}

@media (max-width: 480px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-student-name {
    font-size: 11px;
  }
}

/* ---- Stats Cells ---- */
#teacherAIYoklamaYorumContent .ai-yoklama-absent {
  text-align: center;
  color: #ef4444;
  font-weight: 600;
}

#teacherAIYoklamaYorumContent .ai-yoklama-present {
  text-align: center;
  color: #10b981;
  font-weight: 600;
}

#teacherAIYoklamaYorumContent .ai-yoklama-rate {
  text-align: center;
  font-weight: 600;
}

#teacherAIYoklamaYorumContent .ai-yoklama-rate.high {
  color: #10b981;
}

#teacherAIYoklamaYorumContent .ai-yoklama-rate.medium {
  color: #f59e0b;
}

#teacherAIYoklamaYorumContent .ai-yoklama-rate.low {
  color: #ef4444;
}

/* ---- Comment Cell ---- */
#teacherAIYoklamaYorumContent .ai-yoklama-comment {
  max-width: 300px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.5;
}

#teacherAIYoklamaYorumContent .ai-yoklama-comment-empty {
  color: var(--text-tertiary);
  font-style: italic;
  font-size: 12px;
}

@media (max-width: 768px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-comment {
    max-width: 200px;
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-comment {
    max-width: 150px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-comment {
    max-width: 100px;
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-comment {
    max-width: 80px;
    font-size: 9px;
  }
}

/* ---- Empty State ---- */
#teacherAIYoklamaYorumContent .ai-yoklama-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

@media (max-width: 480px) {
  #teacherAIYoklamaYorumContent .ai-yoklama-empty {
    padding: 32px 16px;
    font-size: 12px;
  }
}

/* ---- Landscape Orientation ---- */
@media (max-width: 640px) and (orientation: landscape) {
  #teacherAIYoklamaYorumContent .ai-yoklama-wrap {
    padding: 14px 16px;
  }

  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card {
    min-width: calc(33.333% - 8px);
    flex: 1 1 calc(33.333% - 8px);
    padding: 12px;
  }

  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card .ai-yoklama-stat-value {
    font-size: 18px;
  }

  #teacherAIYoklamaYorumContent .ai-yoklama-comment {
    max-width: 180px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  #teacherAIYoklamaYorumContent .ai-yoklama-cards {
    margin-bottom: 16px;
  }

  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card {
    padding: 10px;
  }

  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card .ai-yoklama-stat-value {
    font-size: 16px;
  }

  #teacherAIYoklamaYorumContent .ai-yoklama-stat-card .ai-yoklama-stat-label {
    font-size: 10px;
  }

  #teacherAIYoklamaYorumContent .ai-yoklama-table tbody td {
    padding: 8px 10px;
  }
}

/* ── Responsive — Bildirimler & SMS ── */
@media (max-width: 1024px) {
  .notif-layout {
    grid-template-columns: 1fr;
  }

  .notif-sms-panel {
    order: -1;
  }
}

@media (max-width: 768px) {
  .notif-tabs {
    padding: 0 12px;
    overflow-x: auto;
  }

  .notif-tab-content {
    padding: 16px;
  }

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

@media (max-width: 600px) {
  .notif-tabs {
    padding: 0 8px;
  }

  .notif-tab-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .templates-grid {
    gap: 8px;
  }

  .template-btn {
    padding: 14px 10px;
  }
}

.exam-target-chip span {
  padding: 6px 12px;
  font-size: 12px;
}

.gs-filter-bar {
  padding: 8px 10px;
}

.gs-filter-select {
  min-width: 100px;
}

.ts-filter-bar {
  gap: 6px;
}

.ts-filter-select {
  min-width: 100px;
}

/* Modal büyütme — bildirim modalı için 2 sütun layout */
#teacherNotificationModal .modal-content {
  max-width: 860px;
  width: 95vw;
}

@media (max-width: 700px) {
  #teacherNotificationModal .modal-body {
    flex-direction: column !important;
  }

  #teacherNotificationModal .modal-body>div:last-child {
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════
   StudentPicker (sp-*) — Evrensel Öğrenci Seçici
   ══════════════════════════════════════════════════════════ */

.sp-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card-bg);
}

/* ── Araç çubuğu ── */
.sp-toolbar {
  background: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Arama */
.sp-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sp-search-icon {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.sp-search {
  width: 100%;
  padding: 7px 34px 7px 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.sp-search:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.sp-clear-btn {
  position: absolute;
  right: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--text-tertiary);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.sp-clear-btn:hover {
  opacity: 1;
}

/* Filtreler satırı */
.sp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sp-select {
  min-height: 34px;
  padding: 6px 32px 6px 10px;
  border: var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 12px;
  cursor: pointer;
  max-width: 160px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.sp-select:hover {
  border-color: var(--border-strong);
  background-color: var(--input-bg-hover);
}

.sp-select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232c3e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .sp-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme='dark'] .sp-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235c7cba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Toggle */
.sp-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.sp-toggle-wrap input {
  display: none;
}

.sp-toggle-knob {
  width: 30px;
  height: 17px;
  border-radius: 9px;
  background: var(--border-color);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}

.sp-toggle-knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sp-toggle-wrap input:checked~.sp-toggle-knob {
  background: var(--primary-color);
}

.sp-toggle-wrap input:checked~.sp-toggle-knob::after {
  transform: translateX(13px);
}

.sp-toggle-label {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Hızlı seçim */
.sp-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sp-quick-btn {
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.sp-quick-btn:hover {
  background: var(--secondary-bg);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.sp-q-all {
  border-color: #10b981;
  color: #10b981;
}

.sp-q-none {
  border-color: #ef4444;
  color: #ef4444;
}

.sp-q-inv {
  border-color: #f59e0b;
  color: #f59e0b;
}

.sp-q-male {
  border-color: #3b82f6;
  color: #3b82f6;
}

.sp-q-female {
  border-color: #ec4899;
  color: #ec4899;
}

.sp-q-vis {
  border-color: #8b5cf6;
  color: #8b5cf6;
}

/* Meta satırı */
.sp-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sp-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--border-color);
  color: var(--text-secondary);
  transition:
    background 0.2s,
    color 0.2s;
}

.sp-count--has {
  background: var(--primary-color);
  color: #fff;
}

.sp-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sp-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
}

/* ── Liste ── */
.sp-list {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sp-list::-webkit-scrollbar {
  width: 5px;
}

.sp-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.sp-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

.sp-empty span {
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
}

.sp-empty p {
  margin: 0;
}

/* Öğrenci satırı */
.sp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}

.sp-item:last-child {
  border-bottom: none;
}

.sp-item:hover {
  background: var(--secondary-bg);
}

.sp-item--checked {
  background: color-mix(in srgb, var(--primary-color) 6%, transparent);
}

.sp-item--checked:hover {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.sp-item input[type='checkbox'] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--primary-color);
  margin: 0;
}

.sp-avatar {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

.sp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}

.sp-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

.sp-chip--exam {
  background: var(--primary-color);
  color: #fff;
}

.sp-chip--gender {
  background: var(--secondary-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.sp-chip--phone {
  background: #d1fae5;
  color: #065f46;
}

.sp-chip--nophone {
  background: #fee2e2;
  color: #991b1b;
}

/* Öğrencinin bu sınıfta zaten kayıtlı olduğunu gösteren badge */
.sp-chip--active-class {
  background: #d1fae5;
  color: #065f46;
  font-weight: 600;
}

/* Öğrenci başka sınıfta, henüz bu sınıfta değil */
.sp-chip--other-class {
  background: #fef3c7;
  color: #92400e;
}

/* Seçili öğrenci başka sınıftan transfer edilecek (özel animasyonlu) */
.sp-chip--transfer {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 600;
  animation: spTransferPulse 1.5s ease-in-out infinite;
}

@keyframes spTransferPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(30, 64, 175, 0.4);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(30, 64, 175, 0);
  }
}

/* Transfer edilecek satırın arka planı hafif vurgulu */
.sp-item--transfer {
  background: linear-gradient(90deg, rgba(219, 234, 254, 0.18) 0%, rgba(219, 234, 254, 0) 100%);
  border-left: 3px solid #3b82f6;
}

[data-theme='dark'] .sp-chip--phone {
  background: #064e3b;
  color: #6ee7b7;
}

[data-theme='dark'] .sp-chip--nophone {
  background: #450a0a;
  color: #fca5a5;
}

[data-theme='dark'] .sp-chip--active-class {
  background: #064e3b;
  color: #6ee7b7;
}

[data-theme='dark'] .sp-chip--other-class {
  background: #78350f;
  color: #fbbf24;
}

[data-theme='dark'] .sp-chip--transfer {
  background: #1e3a8a;
  color: #93c5fd;
}

[data-theme='dark'] .sp-item--transfer {
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.25) 0%, rgba(30, 58, 138, 0) 100%);
  border-left-color: #60a5fa;
}

/* Responsive — dar ekranlarda dikey */
@media (max-width: 480px) {
  .sp-filters {
    flex-direction: column;
  }

  .sp-select {
    max-width: 100%;
  }

  .sp-quick {
    gap: 4px;
  }

  .sp-quick-btn {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — Sabitlik & Sıralama
   ═══════════════════════════════════════════════════════════════ */

/* Sidebar her zaman viewport'a sabit — navbar kadar boşluk bırak */
.sidebar {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

/* Ayırıcı çizgi */
.sidebar-divider {
  height: 1px;
  background: var(--border-color);
  margin: 8px 4px;
  opacity: 0.6;
}

/* Sıra düzenleme butonu — biraz farklı görünüm */
.sidebar-reorder-btn {
  font-size: 12px !important;
  color: var(--text-tertiary) !important;
  opacity: 0.75;
  letter-spacing: 0.2px;
}

.sidebar-reorder-btn:hover {
  opacity: 1;
  color: var(--accent) !important;
}

/* Reorder modu aktifken sidebar hafif farklı arka plan */
.sidebar-reorder-active {
  background: color-mix(in srgb, var(--card-bg) 92%, var(--accent) 8%) !important;
}

/* Reorder modunda butonlar taşınabilir görünüm */
.sidebar-reorder-active .sidebar-btn[data-section] {
  cursor: grab;
  border: 1px dashed var(--border-color);
  margin-bottom: 3px;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  user-select: none;
}

.sidebar-reorder-active .sidebar-section[data-section] {
  cursor: grab;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  user-select: none;
}

.sidebar-reorder-active .sidebar-section[data-section]:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.sidebar-reorder-active .sidebar-section[data-section] .sidebar-submenu {
  display: none;
}

.sidebar-reorder-active .sidebar-btn[data-section]:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

/* Reorder modunda gruplar da taşınabilir görünüm */
.sidebar-reorder-active .sidebar-group {
  cursor: grab;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  user-select: none;
  margin-bottom: 4px;
  transition: border-color 0.15s, background 0.15s;
}

.sidebar-reorder-active .sidebar-group:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.sidebar-reorder-active .sidebar-group.sb-drag-over {
  border-color: var(--accent);
  background: var(--accent-light);
}

.sidebar-reorder-active .sidebar-group.sb-dragging {
  opacity: 0.45;
  transform: scale(0.97);
  box-shadow: var(--shadow-md);
}

/* Sürüklenen buton */
.sb-dragging {
  opacity: 0.45;
  transform: scale(0.97);
  box-shadow: var(--shadow-md);
}

/* Sürükleme handle ikonu */
.sb-handle {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-right: 4px;
  cursor: grab;
  flex-shrink: 0;
}

/* Drag state */
.sb-dragging {
  opacity: 0.4;
  background: var(--accent-subtle) !important;
}

.sb-drag-over {
  background: var(--accent-light) !important;
  border-radius: var(--radius-sm);
}

/* Reorder modunda active efekti kapat (kafa karıştırır) */
.sidebar-reorder-active .sidebar-btn.active {
  background: var(--card-bg);
  color: var(--text-secondary);
  font-weight: 500;
}

/* Yardım butonu — en altta, ayırıcı çizgi ile birlikte */
.sidebar-help-btn {
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  width: 100%;
  margin-top: 4px;
}

.sidebar-help-btn:hover {
  background: var(--hover-bg) !important;
  color: var(--accent) !important;
}

/* ─── Help Modal Tabs ────────────────────────────────────────────────────── */
.help-tabs {
  display: flex;
  gap: 0;
  padding: 0 22px;
  border-bottom: 1px solid var(--border-color);
}

.help-tab-btn {
  background: none;
  border: none;
  padding: 12px 16px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s,
    border-color 0.2s;
  margin-bottom: -1px;
}

.help-tab-btn:hover {
  color: var(--text-primary);
}

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

.help-tab-content {
  animation: fadeInHelpTab 0.2s ease;
}

@keyframes fadeInHelpTab {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Help Modal ──────────────────────────────────────────────────────────── */
.help-modal-content {
  max-width: 680px;
  max-height: 85vh;
  width: 90vw;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.18));
  overflow: hidden;
}

#helpModal .modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--card-bg);
}

.btn-close-modal {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    color 0.15s;
  flex-shrink: 0;
}

.btn-close-modal:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.help-tabs {
  display: flex;
  padding: 0 22px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--card-bg);
}

.help-body {
  padding: 20px 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  overflow-y: auto;
  flex: 1;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.help-tip {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent);
  font-size: 12px;
  color: var(--text-secondary);
}

.help-tip strong {
  color: var(--text-primary);
}

.help-warning {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent);
  font-size: 12px;
  color: var(--text-secondary);
}

.help-warning strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.help-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
}

.help-card-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.help-card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.help-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-card-list li {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-left: 12px;
  position: relative;
}

.help-card-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.help-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

.help-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.help-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

.help-step-num {
  width: 22px;
  height: 22px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

/* ─── Improved Help Modal ─────────────────────────────────────────────── */
.help-modal-full {
  max-width: 900px;
  max-height: 90vh;
  width: 95vw;
}

.help-modal-full .help-tabs {
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  background: var(--secondary-bg);
}

.help-modal-full .help-tab-btn {
  flex: 1;
  min-width: 100px;
  padding: 10px 12px;
  font-size: 12px;
  text-align: center;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: 0;
}

.help-modal-full .help-tab-btn.active {
  background: var(--card-bg);
  border-bottom-color: var(--accent);
}

.help-body-full {
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.help-portal-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.help-portal-section:last-child {
  border-bottom: none;
}

.help-portal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.help-portal-title .portal-icon {
  font-size: 20px;
}

.help-category {
  margin-bottom: 20px;
}

.help-category:last-child {
  margin-bottom: 0;
}

.help-category-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.help-feature {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}

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

.help-feature-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.help-feature-icon {
  font-size: 16px;
}

.help-feature-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.help-feature-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.help-steps-detailed {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-step-detailed {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 10px;
  background: var(--card-bg);
  border-radius: var(--radius-sm);
}

.help-step-detailed .step-num {
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

.help-tip-box {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(var(--accent-rgb, 59, 130, 246), 0.1);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent);
  font-size: 11px;
  color: var(--text-secondary);
}

.help-tip-box strong {
  color: var(--accent);
}

.help-warning-box {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  border-radius: var(--radius-md);
  border-left: 4px solid #ef4444;
  font-size: 11px;
  color: var(--text-secondary);
}

.help-warning-box strong {
  color: #ef4444;
}

.help-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.help-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 11px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s;
}

.help-quick-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.help-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.help-guide-tabs .help-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.help-tab-icon,
.help-tab-icon svg,
.help-portal-title .portal-icon svg,
.help-feature-icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.help-guide-body {
  background: var(--bg-primary);
}

.help-guide-content {
  min-height: 100%;
}

.help-portal-title {
  align-items: flex-start;
}

.help-portal-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0;
  color: var(--text-primary);
}

.help-portal-title p {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
}

.help-guide-category {
  margin-top: 18px;
}

.help-guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.help-guide-item {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
  background: var(--card-bg);
}

.help-guide-item .help-feature-header {
  align-items: flex-start;
}

.help-guide-item .help-feature-title {
  margin: 0;
  line-height: 1.35;
}

.help-guide-item .help-feature-desc {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

.help-guide-tips {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.help-guide-tips li {
  position: relative;
  padding-left: 14px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.45;
}

.help-guide-tips li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}

@media (max-width: 640px) {
  .help-two-col {
    grid-template-columns: 1fr;
  }

  .help-guide-list {
    grid-template-columns: 1fr;
  }

  .help-modal-full .help-tab-btn {
    min-width: 80px;
    font-size: 11px;
    padding: 8px 6px;
  }
}

/* ─── Focus rings ────────────────────────────────────────────────────────────*/

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--primary, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  outline: none;
}

/* Toplu yoklama alanları için ayrıca (inline stil önceliği ezerek) */
#bulkAttendanceClass:focus,
#bulkAttendanceDateFrom:focus,
#bulkAttendanceDateTo:focus {
  border-color: var(--primary, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN RAPOR PANELİ v2 — İki sütunlu sidebar + içerik düzeni
   rpt2-* prefix: Admin paneline özel, eski rpt-* ile çakışmaz
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ana kabuk: sidebar + içerik yan yana ── */
.rpt2-shell {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 0;
  min-height: 680px;
  background: var(--secondary-bg);
  border-radius: 18px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* ── Sol panel: rapor türü listesi ── */
.rpt2-sidebar {
  width: auto;
  flex-shrink: 0;
  background: var(--card-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.rpt2-sidebar-header {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rpt2-sidebar-kicker {
  display: inline-flex;
  width: fit-content;
  color: var(--accent);
  background: var(--accent-subtle, rgba(44, 62, 140, 0.08));
  border: 1px solid var(--accent-light, rgba(44, 62, 140, 0.16));
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.rpt2-sidebar-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text-primary);
  line-height: 1.15;
}

.rpt2-sidebar-subtitle {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.rpt2-type-grid {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#rptTypePagerWrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.rpt2-type-card {
  --rpt2-type-accent: var(--accent);
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  text-align: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.rpt2-type-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--rpt2-type-accent);
  opacity: 0.8;
}

.rpt2-type-card:hover {
  background: color-mix(in srgb, var(--rpt2-type-accent) 6%, var(--card-bg) 94%);
  border-color: color-mix(in srgb, var(--rpt2-type-accent) 34%, var(--border-color) 66%);
  color: var(--text-primary);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.rpt2-type-card.active {
  background: color-mix(in srgb, var(--rpt2-type-accent) 12%, var(--card-bg) 88%);
  border-color: color-mix(in srgb, var(--rpt2-type-accent) 55%, var(--border-color) 45%);
  color: var(--text-primary);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rpt2-type-accent) 30%, transparent);
}

.rpt2-type-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rpt2-type-accent);
  background: color-mix(in srgb, var(--rpt2-type-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rpt2-type-accent) 18%, transparent);
  border-radius: 9px;
}

.rpt2-type-icon svg {
  width: 18px;
  height: 18px;
}

.rpt2-type-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}

.rpt2-type-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.rpt2-type-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rpt2-type-group {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--rpt2-type-accent);
  background: color-mix(in srgb, var(--rpt2-type-accent) 10%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
}

.rpt2-type-desc {
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.35;
}

.rpt2-type-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--border-color);
}

.rpt2-page-btn {
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.rpt2-page-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.rpt2-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rpt2-page-status,
.rpt2-page-count {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.rpt2-page-count {
  padding: 0 8px 10px;
}

/* ── Sağ panel: filtre + çıktı ── */
.rpt2-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--secondary-bg);
}

.rpt2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 18px;
  padding: 22px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
}

.rpt2-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.rpt2-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  margin-bottom: 7px;
}

.rpt2-hero-copy h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: 0;
}

.rpt2-hero-copy p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
  max-width: 720px;
}

.rpt2-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.rpt2-hero-stat {
  --rpt2-stat-color: var(--accent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--rpt2-stat-color);
  border-radius: 12px;
  background: var(--card-bg);
}

.rpt2-hero-stat-icon {
  color: var(--rpt2-stat-color);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--rpt2-stat-color) 12%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rpt2-hero-stat-value {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 850;
  line-height: 1;
}

.rpt2-hero-stat-label {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ── Filtre çubuğu ── */
.rpt2-filter-bar {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
}

.rpt2-active-report {
  --rpt2-active-color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--rpt2-active-color) 24%, var(--border-color) 76%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--rpt2-active-color) 7%, var(--card-bg) 93%);
}

.rpt2-active-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--rpt2-active-color);
  background: color-mix(in srgb, var(--rpt2-active-color) 12%, transparent);
  border-radius: 9px;
}

.rpt2-active-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rpt2-active-label {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.rpt2-active-copy strong {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rpt2-filter-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.rpt2-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
  flex: 1;
}

.rpt2-field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-tertiary);
  user-select: none;
}

.rpt2-field-ctrl {
  padding: 8px 11px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  width: 100%;
}

.rpt2-field-ctrl:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44, 62, 140, 0.1);
}

/* ── Filtre aksiyonları ── */
.rpt2-filter-actions {
  display: flex;
  gap: 7px;
  align-items: flex-end;
  flex-shrink: 0;
}

.rpt2-btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.rpt2-btn-refresh:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle, rgba(44, 62, 140, 0.07));
}

.rpt2-btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  border: 1px solid transparent;
}

.rpt2-btn-pdf {
  background: var(--danger-bg, #fef2f2);
  color: var(--danger-color, #b91c1c);
  border-color: var(--danger-color, #b91c1c);
}

.rpt2-btn-pdf:hover {
  background: var(--danger-color, #b91c1c);
  color: #fff;
  box-shadow: 0 3px 10px rgba(185, 28, 28, 0.25);
}

.rpt2-btn-excel {
  background: var(--success-bg, #f0fdf4);
  color: var(--success-color, #15803d);
  border-color: var(--success-color, #15803d);
}

.rpt2-btn-excel:hover {
  background: var(--success-color, #15803d);
  color: #fff;
  box-shadow: 0 3px 10px rgba(21, 128, 61, 0.25);
}

.rpt2-btn-ai {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--ai-accent, #2c3e8c), #4f46e5);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.rpt2-btn-ai::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 60%);
  pointer-events: none;
}

.rpt2-btn-ai:hover {
  background: linear-gradient(135deg, var(--ai-accent-hover, #1e2f6b), #4338ca);
  box-shadow: 0 4px 14px rgba(44, 62, 140, 0.35);
  transform: translateY(-1px);
}

/* ── Rapor çıktı alanı ── */
.rpt2-output {
  flex: 1;
  padding: 22px 24px 28px;
  overflow-y: auto;
  min-height: 400px;
}

.rpt2-output .rpt-card,
.rpt2-output .rpt-output-card,
.rpt2-output .table-container {
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.rpt2-output .rpt-section-head {
  background: var(--card-bg);
}

.rpt2-output .rpt-meta-chip {
  min-height: 64px;
}

.rpt2-output .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

/* ── Responsive: dar ekranda sidebar üste geçer ── */
@media (max-width: 700px) {
  .rpt2-shell {
    grid-template-columns: 1fr;
  }

  .rpt2-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .rpt2-type-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
  }

  .rpt2-type-card {
    flex: 1 1 220px;
    min-height: 72px;
  }

  .rpt2-filter-bar {
    padding: 12px 14px;
  }

  .rpt2-output {
    padding: 14px;
  }
}

@media (max-width: 1180px) {
  .rpt2-shell {
    grid-template-columns: 258px minmax(0, 1fr);
  }

  .rpt2-hero {
    grid-template-columns: 1fr;
  }

  .rpt2-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .rpt2-shell {
    grid-template-columns: 1fr;
  }

  .rpt2-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .rpt2-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }

  .rpt2-hero,
  .rpt2-filter-bar,
  .rpt2-output {
    padding-left: 16px;
    padding-right: 16px;
  }

  .rpt2-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rpt2-active-report {
    width: 100%;
  }
}

@media (max-width: 520px) {

  .rpt2-type-grid,
  .rpt2-hero-stats {
    grid-template-columns: 1fr;
  }

  .rpt2-hero-copy h2 {
    font-size: 19px;
  }

  .rpt2-filter-fields,
  .rpt2-filter-actions {
    width: 100%;
  }

  .rpt2-filter-actions>button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ── Karanlık tema uyumu ── */
[data-theme='dark'] .rpt2-sidebar {
  background: var(--card-bg);
}

[data-theme='dark'] .rpt2-main {
  background: var(--background);
}

[data-theme='dark'] .rpt2-field-ctrl {
  background: var(--secondary-bg, #1e2334);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme='dark'] .rpt2-type-card.active {
  background: var(--accent);
  color: #fff;
}

[data-theme='dark'] .rpt2-btn-refresh {
  background: var(--secondary-bg, #1e2334);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

[data-theme='dark'] .rpt2-btn-pdf {
  background: rgba(185, 28, 28, 0.15);
}

[data-theme='dark'] .rpt2-btn-excel {
  background: rgba(21, 128, 61, 0.15);
}

/* ─── Öğrenci Şifre Değiştirme Modalı ─────────────────────────────────── */
#changeStudentPasswordModal .modal-content {
  max-width: 420px;
}

#changeStudentPasswordModal .pw-strength-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border-color);
  margin-top: 6px;
  overflow: hidden;
}

#changeStudentPasswordModal .pw-strength-fill {
  height: 100%;
  border-radius: 2px;
  transition:
    width 0.3s,
    background 0.3s;
  width: 0%;
  background: var(--danger-color, #b91c1c);
}

/* ─── Şifre Gereksinimleri ─────────────────────────────────────────────── */

.password-requirements {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--secondary-bg, #f8fafc);
  border-radius: var(--radius-md);
  font-size: 12px;
  border: 1px solid var(--border-color);
}

.password-requirement {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  color: var(--text-secondary, #64748b);
  transition: color 0.2s;
}

.password-requirement.met {
  color: var(--success-color, #16a34a);
}

.password-requirement .req-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.password-requirement .req-label {
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BİLDİRİMLER + SMS AYARLARI — Sekmeli Panel
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   BİLDİRİMLER & SMS PANELİ — Modern Side-by-Side Layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bildirimler Panel ── */
.notif-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  gap: 16px;
  flex-wrap: wrap;
}

.notif-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notif-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notif-panel-title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.notif-panel-icon {
  font-size: 22px;
}

/* ── Template Dropdown ── */
.template-dropdown {
  position: relative;
}

.template-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-arrow {
  font-size: 10px;
  transition: transform 0.2s;
}

.template-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.template-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: none;
  overflow: hidden;
}

.template-dropdown.open .template-dropdown-menu {
  display: block;
  animation: dropdownIn 0.2s ease;
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.template-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.template-dropdown-item:hover {
  background: var(--hover-bg);
  color: var(--accent);
}

.template-dropdown-item .tpl-icon {
  font-size: 16px;
}

/* ── Template Editor ── */
.template-editor-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.template-editor-item {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.template-editor-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--card-bg);
}

.template-editor-header:hover {
  background: var(--hover-bg);
}

.template-editor-key {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--accent-subtle);
  padding: 3px 8px;
  border-radius: 4px;
}

.template-editor-title-display {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.template-editor-custom-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  padding: 3px 8px;
  border-radius: 4px;
}

.template-editor-fields {
  padding: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.template-editor-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.template-editor-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.template-editor-field input,
.template-editor-field textarea {
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13.5px;
}

.template-editor-field textarea {
  resize: vertical;
  min-height: 80px;
}

.template-editor-field input:focus,
.template-editor-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.template-editor-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.notif-panel-title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.notif-panel-icon {
  font-size: 22px;
}

/* ── Bildirim Sekmeleri ── */
.notif-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  padding: 0 20px;
  flex-shrink: 0;
}

.notif-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
  white-space: nowrap;
}

.notif-tab-btn:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

.notif-tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 600;
}

.notif-tab-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.notif-tab-btn.active {
  color: var(--accent);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

.notif-count-badge {
  background: var(--accent-light);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

/* ── Bildirim İçerik ── */
.notif-tab-content {
  display: none;
  padding: 20px 24px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

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

/* ── Settings Section Grid ── */
.settings-section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}

.settings-section-grid .settings-card {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.settings-section-grid .settings-card-body {
  flex: 1;
}

/* ── Settings Card (Bildirim Kanalları & SMTP) ── */
.settings-section-grid {
  padding: 4px;
}

.settings-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.settings-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(to bottom, var(--secondary-bg), var(--card-bg));
}

.settings-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.settings-card-icon svg {
  stroke: currentColor;
}

.settings-card-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-card-title p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.settings-card-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-card-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  background: var(--secondary-bg);
}

/* ── Channel Option Row ── */
.channel-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  transition: all 0.2s;
}

.channel-option:hover {
  background: var(--hover-bg);
}

.channel-option-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.channel-option-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.channel-option-icon svg {
  stroke: currentColor;
}

.channel-option-info strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.channel-option-info p {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ── Toggle Switch ── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--border-strong);
  border-radius: 24px;
  transition: 0.3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked+.toggle-slider {
  background: var(--primary-color);
}

.toggle-switch input:checked+.toggle-slider::before {
  transform: translateX(20px);
}

.toggle-switch input:disabled+.toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Şablonlar Grid ── */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.template-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.template-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-2px);
}

.tpl-icon {
  font-size: 22px;
}

.tpl-label {
  text-align: center;
  line-height: 1.3;
}

/* ── Bildirim Listesi ── */
.notif-pagination {
  margin-top: 16px;
  text-align: center;
}

/* ── SMS Sağ Panel ── */
.sms-status-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sms-status-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: var(--success-bg);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.sms-status-indicator.inactive {
  background: var(--warning-bg);
}

.sms-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-color);
  animation: pulse-dot 2s ease-in-out infinite;
}

.sms-status-indicator.inactive .sms-status-dot {
  background: var(--warning-color);
  animation: none;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.3);
  }
}

/* ── SMS Card ── */
.sms-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sms-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--accent-subtle), var(--secondary-bg));
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sms-card-icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.sms-card-title {
  flex: 1;
}

.sms-card-title h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.sms-card-title p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.sms-card {
  overflow: visible;
}

/* ── SMS Toggle ── */
.sms-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.sms-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sms-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--border-strong);
  border-radius: 24px;
  transition: 0.3s;
}

.sms-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

.sms-toggle input:checked+.sms-toggle-slider {
  background: var(--success-color);
}

.sms-toggle input:checked+.sms-toggle-slider::before {
  transform: translateX(20px);
}

/* ── SMS Alanları ── */
.sms-fields {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sms-fields.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.sms-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 4px;
}

.sms-field-group:not(:last-child) {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.sms-field-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sms-field-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.sms-input {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--secondary-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13.5px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  box-sizing: border-box;
}

.sms-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.sms-char-count {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: right;
  transition: color 0.2s;
}

.sms-char-count.warning {
  color: var(--warning-color);
  font-weight: 700;
}

.sms-char-count.danger {
  color: var(--danger-color);
  font-weight: 700;
}

/* ── SMS Kaydet Butonu ── */
.sms-save-btn {
  margin: 0 20px 16px;
  width: calc(100% - 40px);
}

.sms-settings-main .sms-card .sms-fields {
  padding-bottom: 8px;
}

/* ── SMS Yardım Kutusu ── */
.sms-help-box {
  margin: 0 20px 20px;
  padding: 14px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.sms-help-box h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

.sms-help-box ol {
  margin: 0;
  padding-left: 18px;
}

.sms-help-box a {
  color: var(--accent);
}

/* ── SMS Settings Layout ── */
.sms-settings-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

.sms-settings-main {
  display: flex;
  flex-direction: column;
}

.sms-settings-main .sms-card {
  display: flex;
  flex-direction: column;
}

.sms-settings-main .sms-save-btn {
  margin: 0 20px 16px;
  width: calc(100% - 40px);
}

.sms-settings-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.sms-settings-side .sms-status-card,
.sms-settings-side .sms-test-card,
.sms-settings-side .sms-logs-card {
  margin-bottom: 0;
}

.sms-logs-card {
  max-height: 320px;
  display: flex;
  flex-direction: column;
}

.sms-logs-list {
  flex: 1;
  overflow-y: auto;
  min-height: 120px;
}

.sms-logs-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0 4px;
  border-top: 1px solid var(--border-color);
  margin-top: 8px;
  flex-wrap: wrap;
}

.sms-logs-pagination .pagination-btn {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 6px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.sms-logs-pagination .pagination-btn:hover:not(:disabled) {
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.sms-logs-pagination .pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sms-logs-pagination .pagination-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.sms-logs-pagination .pagination-info {
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 0 8px;
}

/* ── SMS Sağ Panel Kartları ── */
.sms-status-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 12px;
}

/* ── Test SMS Kartı ── */
.sms-test-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-top: 12px;
}

.sms-test-card h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.sms-test-card p {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.sms-test-row {
  display: flex;
  gap: 8px;
}

.sms-test-row .sms-input {
  flex: 1;
}

/* ── SMS Logları Kartı ── */
.sms-logs-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-top: 12px;
}

.sms-logs-card h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.sms-logs-list {
  max-height: 240px;
  overflow-y: auto;
}

.sms-logs-empty {
  color: var(--text-tertiary);
  font-size: 12px;
  text-align: center;
  padding: 16px;
}

.sms-log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  gap: 8px;
  font-size: 11.5px;
}

.sms-log-item:last-child {
  border-bottom: none;
}

.sms-log-item:hover {
  background: var(--secondary-bg);
  margin: 0 -4px;
  padding: 8px 4px;
  border-radius: 4px;
}

.sms-log-info {
  flex: 1;
  min-width: 0;
}

.sms-log-phone {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.sms-log-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.sms-log-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
}

.sms-log-status.sent {
  background: var(--success-bg);
  color: var(--success-color);
}

.sms-log-status.failed {
  background: var(--danger-bg);
  color: var(--danger-color);
}

/* ── Notifications (mevcut stiller + eklemeler) ── */
.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-item {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  border-left: 3px solid var(--border-strong);
  transition: var(--transition);
}

.notification-item:hover {
  box-shadow: var(--shadow-sm);
}

.notification-item.unread {
  border-left-color: var(--accent);
  background: var(--accent-light);
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.notification-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.notification-date {
  font-size: 11.5px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.notification-message {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-line;
}

.notification-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

#instNotifications {
  max-width: 100%;
  overflow-x: hidden;
}

#instNotifications .notif-header-row {
  padding: clamp(14px, 2vw, 20px) clamp(14px, 2.4vw, 24px);
}

#instNotifications .notif-panel-title,
#instNotifications .notif-header-actions,
#instNotifications .notif-tab-btn,
#instNotifications .sms-card-header,
#notifChannels .settings-card-header,
#notifChannels .channel-option,
#notifChannels .channel-option-info {
  min-width: 0;
}

#instNotifications .notif-panel-title h2,
#instNotifications .notif-tab-btn span,
#notifChannels .settings-card-title,
#notifChannels .channel-option-info>div {
  min-width: 0;
}

#instNotifications .notif-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#instNotifications .notif-header-actions .btn,
#instNotifications .template-dropdown-btn,
#sendNotificationModal .checkbox-label {
  min-height: 40px;
}

#instNotifications .template-dropdown-menu {
  max-width: min(320px, calc(100vw - 32px));
}

#instNotifications .notif-tabs {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

#instNotifications .notif-tabs::-webkit-scrollbar {
  height: 6px;
}

#instNotifications .notif-tab-btn {
  flex: 0 0 auto;
}

#instNotifications .notif-tab-content,
#notifChannels.notif-tab-content {
  max-height: none;
  overflow: visible;
}

#instNotifications .sms-settings-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

#instNotifications .sms-settings-main,
#instNotifications .sms-settings-side,
#instNotifications .sms-card,
#instNotifications .sms-input,
#notifChannels .settings-card,
#notifChannels .form-group input {
  min-width: 0;
}

#notifChannels .settings-section-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}

#notifChannels .settings-card {
  min-height: auto;
}

#notifChannels .settings-card-footer {
  gap: 8px;
  flex-wrap: wrap;
}

#notifChannels .settings-card-footer .btn {
  justify-content: center;
}

#notifChannels .channel-option-info p,
#notifChannels .settings-card-title p,
#instNotifications .sms-card-title p,
#instNotifications .notification-title,
#instNotifications .notification-message {
  overflow-wrap: anywhere;
}

#notifChannels .form-row {
  flex-wrap: wrap;
}

#notifChannels .form-row .form-group {
  min-width: min(180px, 100%);
}

#sendNotificationModal .modal-content {
  width: min(900px, 96vw);
}

#sendNotificationModal .modal-body {
  max-height: min(68vh, 720px);
  overflow-y: auto;
}

#sendNotificationModal .checkbox-group-horizontal {
  flex-wrap: wrap;
}

#sendNotificationModal #notificationStudentSelection {
  max-height: min(52vh, 460px);
  overflow-y: auto;
}

/* ── Responsive — Bildirimler & SMS ── */
@media (max-width: 1024px) {
  .sms-settings-layout {
    grid-template-columns: 1fr;
  }

  .sms-settings-side {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 768px) {
  .notif-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .notif-header-actions {
    flex-direction: column;
    width: 100%;
  }

  .notif-header-actions .btn {
    width: 100%;
  }

  .template-dropdown {
    width: 100%;
  }

  .template-dropdown-btn {
    width: 100%;
    justify-content: center;
  }

  .template-dropdown-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    border: 1px solid var(--border-color);
    margin-top: 4px;
  }

  .notif-tabs {
    padding: 0 12px;
    overflow-x: auto;
  }

  .notif-tab-btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  .notif-tab-content {
    padding: 16px;
  }

  .sms-card-header {
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .notif-tabs {
    padding: 0 8px;
  }

  .notif-tab-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .sms-test-row {
    flex-direction: column;
  }

  .sms-test-row .btn {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  #instNotifications .sms-settings-layout {
    grid-template-columns: 1fr;
  }

  #instNotifications .sms-settings-side {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 768px) {
  #instNotifications .notif-header-actions {
    align-items: stretch;
  }

  #instNotifications .notif-tab-content,
  #notifChannels.notif-tab-content {
    padding: 16px;
  }

  #notifChannels .settings-section-grid {
    grid-template-columns: 1fr;
    padding: 0;
  }

  #sendNotificationModal .modal-body {
    flex-direction: column !important;
    max-height: min(72vh, 760px);
  }

  #sendNotificationModal .modal-body>div {
    width: 100% !important;
    flex-shrink: 1 !important;
  }
}

@media (max-width: 600px) {
  #instNotifications .notif-header-row {
    padding: 12px;
  }

  #instNotifications .notif-panel-title h2 {
    font-size: 16px;
  }

  #instNotifications .notif-tabs {
    padding: 0 8px;
  }

  #instNotifications .notif-tab-btn {
    padding: 9px 10px;
  }

  #instNotifications .notification-item {
    padding: 13px 14px;
  }

  #instNotifications .notification-header {
    flex-direction: column;
    gap: 4px;
  }

  #instNotifications .notification-date {
    width: 100%;
  }

  #instNotifications .notification-meta {
    flex-direction: column;
    gap: 4px;
  }

  #instNotifications .sms-fields,
  #instNotifications .sms-card-header,
  #notifChannels .settings-card-header,
  #notifChannels .settings-card-body,
  #notifChannels .settings-card-footer {
    padding: 14px;
  }

  #notifChannels .channel-option {
    align-items: flex-start;
    gap: 12px;
  }

  #notifChannels .settings-card-footer .btn,
  #sendNotificationModal .modal-footer .btn {
    width: 100%;
  }

  #sendNotificationModal .modal-content {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

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

@media (orientation: landscape) and (max-height: 520px) and (min-width: 700px) and (max-width: 960px) {
  #instNotifications .notif-header-row {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #instNotifications .notif-tab-content,
  #notifChannels.notif-tab-content {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  #instNotifications .sms-settings-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 12px;
  }

  #instNotifications .sms-settings-side {
    position: static;
    max-height: none;
    overflow: visible;
  }

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

/* ── Rapor Paneli (inline) — tam genişlik ── */
#instReports.rpt2-full-section {
  padding: 0;
}

#instReports .rpt-inline-shell {
  min-height: 560px;
}

#instReports .rpt-inline-body {
  min-height: 480px;
}

/* ── Genel Responsive — content-area ── */
@media (max-width: 1024px) {
  .content-area {
    padding: 24px 20px calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .section-header {
    margin-bottom: 20px;
  }

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

@media (max-width: 768px) {
  .content-area {
    padding: 18px 14px calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .student-section.active {
    padding: 0;
  }

  .sidebar {
    width: var(--sidebar-width);
    position: fixed;
    left: -100%;
    top: var(--navbar-height);
    height: calc(100vh - var(--navbar-height));
    z-index: 1000;
    transition: left 0.3s ease;
    box-shadow: var(--shadow-xl);
  }

  .sidebar.open,
  .sidebar.sidebar-drawer-open {
    left: 0;
    transform: translateX(0);
  }

  .main-content {
    flex-direction: column;
  }

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

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

  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

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

@media (max-width: 480px) {
  .content-area {
    padding: 14px 10px calc(104px + env(safe-area-inset-bottom, 0px));
  }

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

/* Uyarı banner — henüz yapılandırılmamış */
.sms-alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

[data-theme='dark'] .sms-alert-banner {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.3);
}

.sms-alert-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.sms-alert-banner strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #92400e;
}

[data-theme='dark'] .sms-alert-banner strong {
  color: #fcd34d;
}

.sms-alert-banner p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Başarılı / aktif banner */
.sms-ok-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: #065f46;
}

[data-theme='dark'] .sms-ok-banner {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
    ÖN MUHASEBE — Tabbed Panel & Dashboard
    ═══════════════════════════════════════════════════════════════ */

/* ── Accounting Section Wrapper ── */
#accounting {
  padding: 0;
}

#accounting .content-area {
  padding: 0;
}

/* ── Accounting Tabs ── */
.accounting-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 20px 0;
  background: var(--card-bg);
  flex-wrap: nowrap;
  border-bottom: 2px solid var(--border-color);
}

.accounting-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-radius: 12px 12px 0 0;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
}

/* Kompakt: orta ekranlar (tablet) */
@media (max-width: 1024px) {
  .accounting-tabs {
    padding: 10px 14px 0;
    gap: 4px;
    flex-wrap: wrap;
  }

  .accounting-tab {
    padding: 10px 12px;
    font-size: 12.5px;
    gap: 6px;
  }

  .accounting-tabs-more {
    flex: 0 0 auto;
    align-self: flex-end;
  }

  .accounting-tabs-more-menu {
    right: 12px;
  }
}

/* Icon-only: küçük ekranlar */
@media (max-width: 640px) {
  .accounting-tabs {
    padding: 8px 12px 0;
    gap: 4px;
    flex-wrap: wrap;
  }

  .accounting-tab {
    padding: 8px;
    min-width: 44px;
    justify-content: center;
  }

  .accounting-tab>span:not(.accounting-tab-icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .accounting-tab-icon {
    display: inline-flex;
  }

  .accounting-tabs-more {
    flex: 0 0 auto;
    align-self: flex-end;
  }

  .accounting-tabs-more-btn {
    padding: 8px 12px;
  }

  .accounting-tabs-more-btn>span:not(.accounting-tab-icon):not(.accounting-tabs-more-badge) {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }

  .accounting-tabs-more-menu {
    right: 12px;
    max-width: calc(100vw - 24px);
  }
}

.accounting-tab::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  border-radius: 3px 3px 0 0;
  transition: all 0.25s ease;
}

.accounting-tab:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

.accounting-tab:hover::after {
  background: var(--border-color);
}

.accounting-tab.active {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-subtle);
}

.accounting-tab.active::after {
  background: var(--accent);
}

.accounting-tab-icon {
  font-size: 16px;
  opacity: 0.8;
}

.accounting-tab.active .accounting-tab-icon {
  opacity: 1;
}

.accounting-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  margin-left: 4px;
}

/* Accounting Tab Panels: display kurallari styles.css:52860 civarinda !important ile tanimli; tek tanim kaynagi orasi. */
/* ── Accounting Dashboard (Ana Özet) ── */
.accounting-dashboard {
  padding: 20px 24px;
}

.acc-dash-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.acc-dash-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--transition);
  box-shadow: var(--shadow-xs);
}

.acc-dash-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.acc-dash-card.success {
  border-left: 4px solid var(--success-color);
}

.acc-dash-card.warning {
  border-left: 4px solid var(--warning-color);
}

.acc-dash-card.danger {
  border-left: 4px solid var(--danger-color);
}

.acc-dash-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.acc-dash-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acc-dash-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.acc-dash-label {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Charts Row ── */
.acc-dash-charts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.acc-chart-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}

.acc-donut-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}

.acc-donut {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: conic-gradient(var(--color) calc(var(--pct) * 1%),
      var(--secondary-bg) calc(var(--pct) * 1%));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.acc-donut::before {
  content: '';
  position: absolute;
  inset: 18px;
  background: var(--card-bg);
  border-radius: 50%;
}

.acc-donut span {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.acc-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

/* ── Dashboard Cards (iç içe kullanılan) ── */
.contracts-dashboard {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  min-width: 120px;
  box-shadow: var(--shadow-xs);
}

.dashboard-card.success {
  border-left: 3px solid var(--success-color);
}

.dashboard-card.warning {
  border-left: 3px solid var(--warning-color);
}

.dashboard-card.danger {
  border-left: 3px solid var(--danger-color);
}

.dashboard-card-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dashboard-card-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.dashboard-card.success .dashboard-card-value {
  color: var(--success-color);
}

.dashboard-card.warning .dashboard-card-value {
  color: var(--warning-color);
}

.dashboard-card.danger .dashboard-card-value {
  color: var(--danger-color);
}

/* ── Upcoming Installments ── */
.upcoming-installments {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}

.upcoming-installments h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Filter Bar ── */
.filter-search {
  padding: 9px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13.5px;
  min-width: 180px;
  transition: border-color 0.15s;
}

.filter-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44, 62, 140, 0.1);
}

.filter-date {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
}

.filter-amount {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  width: 110px;
}

/* ── Late Fee Details ── */


.filter-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  white-space: nowrap;
}

.filter-count-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}

.filter-chips::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
      var(--accent) 0%,
      color-mix(in srgb, var(--accent) 70%, #ffffff 30%) 100%);
}

.filter-chips:empty {
  display: none;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 5px 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg,
      var(--accent-subtle) 0%,
      color-mix(in srgb, var(--accent) 8%, transparent) 100%);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    transform 0.14s ease, box-shadow 0.18s ease, color 0.18s ease;
  max-width: 100%;
  position: relative;
}

.filter-chip>span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.filter-chip:hover {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 18%, transparent) 0%,
      color-mix(in srgb, var(--accent) 12%, transparent) 100%);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateY(-1px);
}

.filter-chip:active {
  transform: translateY(0) scale(0.97);
}

.filter-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: inherit;
  opacity: 0.7;
  transition: background-color 0.18s ease, opacity 0.18s ease,
    color 0.18s ease, transform 0.18s ease;
  flex-shrink: 0;
}

.filter-chip:hover .filter-chip-remove {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  transform: rotate(90deg);
}

.filter-chip-remove:hover {
  background: var(--danger-color);
  color: #fff;
  opacity: 1;
  transform: rotate(90deg) scale(1.1);
}

[data-theme='dark'] .filter-count-badge,
[data-theme='dark'] .filter-chip {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 22%, transparent) 0%,
      color-mix(in srgb, var(--accent) 14%, transparent) 100%);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

[data-theme='dark'] .filter-chip:hover {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 34%, transparent) 0%,
      color-mix(in srgb, var(--accent) 22%, transparent) 100%);
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
}

[data-theme='dark'] .filter-chip:hover .filter-chip-remove {
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}

.late-fee-details {
  background: var(--danger-bg);
  border: 1px solid var(--danger-color);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 12px;
}

.late-fee-details h4 {
  margin: 0 0 10px;
  color: var(--danger-color);
  font-size: 13px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
    ETÜT & TENEFFÜS YÖNETİMİ — Saat Seçici & Slot Yönetimi
    ═══════════════════════════════════════════════════════════════ */

/* ── Time Picker Row ── */
.time-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.time-picker-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.time-picker-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.time-spinner {
  width: 64px;
  padding: 7px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.15s;
}

.time-spinner:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44, 62, 140, 0.1);
}

.time-separator {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-tertiary);
  padding: 0 4px;
}

/* ── Etüt Slot Card ── */
.etut-slot-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition);
}

.etut-slot-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.etut-slot-card.mandatory {
  border-left: 4px solid var(--danger-color);
}

.etut-slot-card.optional {
  border-left: 4px solid var(--text-tertiary);
}

.etut-slot-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.etut-slot-info {
  flex: 1;
  min-width: 0;
}

.etut-slot-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.etut-slot-time {
  font-size: 12px;
  color: var(--text-secondary);
}

.etut-slot-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.etut-day-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--secondary-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.etut-slot-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

.etut-slot-badge.mandatory {
  background: var(--danger-bg);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
}

.etut-slot-badge.optional {
  background: var(--secondary-bg);
  color: var(--text-tertiary);
}

/* ── Teneffüs Slot Card ── */
.teneffus-slot-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition);
}

.teneffus-slot-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.teneffus-slot-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.teneffus-slot-info {
  flex: 1;
}

.teneffus-slot-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.teneffus-slot-time {
  font-size: 12px;
  color: var(--text-secondary);
}

.teneffus-slot-duration {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ── Slot Form Panel ── */
.slot-form-panel {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.slot-form-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.slot-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

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

.slot-form-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.slot-form-input {
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13.5px;
  transition: border-color 0.15s;
}

.slot-form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44, 62, 140, 0.1);
}

/* ── Day Chips Selector ── */
.day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.day-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
}

.day-chip input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.day-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--card-bg);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.day-chip:hover span {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.day-chip input[type='checkbox']:checked+span {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(44, 62, 140, 0.25);
}

/* ── Slot Color Picker ── */
.slot-color-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.slot-color-option {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
}

.slot-color-option:hover {
  transform: scale(1.15);
}

.slot-color-option.selected {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--card-bg);
}

/* ── Responsive Accounting ── */
@media (max-width: 900px) {
  .acc-dash-row {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .acc-dash-charts {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* 601px - 750px: Ä°kon only, horizontal scroll */
@media (max-width: 750px) and (min-width: 601px) {
  .accounting-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px 12px 0;
    gap: 4px;
  }

  .accounting-tabs::-webkit-scrollbar {
    display: none;
  }

  .accounting-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    min-width: 50px;
    flex-shrink: 0;
    border-radius: 8px;
  }

  .accounting-tab-icon {
    display: inline;
    font-size: 18px;
  }

  .accounting-tab span:not(.accounting-tab-icon) {
    display: none;
  }

  .accounting-tab.active {
    background: var(--accent);
    color: white;
  }

  .accounting-tab::after {
    display: none;
  }
}

/* 401px - 600px: İkon + kısa text, horizontal scroll */
@media (max-width: 600px) {
  .accounting-tabs {
    padding: 8px 12px 0;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 4px;
    flex-wrap: nowrap;
  }

  .accounting-tabs::-webkit-scrollbar {
    display: none;
  }

  .accounting-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: 11px;
    border-radius: 8px;
    min-width: 60px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .accounting-tab-icon {
    display: inline;
    font-size: 16px;
    flex-shrink: 0;
  }

  .accounting-tab span:not(.accounting-tab-icon) {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .accounting-tab.active {
    background: var(--accent);
    color: white;
  }

  .accounting-tab.active .accounting-tab-icon {
    opacity: 1;
  }

  .accounting-tab::after {
    display: none;
  }

  .accounting-tab-panel {
    padding: 16px;
  }

  .acc-dash-row {
    grid-template-columns: 1fr 1fr;
  }

  .acc-dash-charts {
    grid-template-columns: 1fr;
  }

  .contracts-dashboard {
    gap: 8px;
  }

  .dashboard-card {
    min-width: 100px;
    padding: 10px 12px;
  }

  .dashboard-card-value {
    font-size: 15px;
  }
}

/* ≤400px: Kompakt ikon only */
@media (max-width: 400px) {
  .accounting-tabs {
    padding: 6px 10px 0;
    gap: 3px;
  }

  .accounting-tab {
    padding: 8px 10px;
    min-width: 44px;
    border-radius: 6px;
  }

  .accounting-tab-icon {
    font-size: 14px;
  }

  .accounting-tab span:not(.accounting-tab-icon) {
    display: none;
  }
}

/* Dar yükseklik: ≤500px */
@media (max-height: 500px) {
  .accounting-tabs {
    padding: 6px 12px 0;
  }

  .accounting-tab {
    padding: 8px 12px;
  }

  .accounting-tab-icon {
    font-size: 14px;
  }

  .accounting-tab span:not(.accounting-tab-icon) {
    display: none;
  }
}

/* Tablet landscape ve dar yükseklik */
@media (max-height: 600px) and (max-width: 900px) {
  .accounting-tabs {
    padding: 6px 12px 0;
    gap: 3px;
  }

  .accounting-tab {
    padding: 8px 12px;
    min-width: 44px;
  }

  .accounting-tab-icon {
    font-size: 15px;
  }

  .accounting-tab span:not(.accounting-tab-icon) {
    display: none;
  }
}

/* ── Ön Muhasebe: Mobile section-header & sticky tabs ── */
@media (max-width: 600px) {
  #accounting>.section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }

  #accounting>.section-header>.accounting-header-top,
  #accounting>.section-header>.accounting-tabs-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
    width: 100%;
  }

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

  #accParasutSettingsBtn {
    align-self: flex-end;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .accounting-tabs {
    border-radius: 10px;
    margin: 0 8px;
    padding: 4px 8px 0 !important;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
  }

  .accounting-tab {
    padding: 10px 8px;
  }

  .accounting-tab-panel {
    padding: 12px !important;
  }

  .renewal-summary,
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .renewal-item,
  .churn-item {
    flex-direction: column;
    align-items: stretch !important;
  }

  .renewal-item>div:last-child,
  .churn-item>div:last-child {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .renewal-toolbar {
    flex-direction: column;
    align-items: stretch !important;
  }

  .renewal-toolbar label,
  .renewal-toolbar button {
    justify-content: center;
  }
}

@media (max-width: 400px) {

  .renewal-summary,
  .stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Sticky tab bar at ≥600px for accounting on scroll ── */
@media (min-width: 601px) {
  #accounting .accounting-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--card-bg);
  }
}

/* ── Status box (used by Paraşüt modal & renewal settings) ── */
.status-box {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid transparent;
  max-width: 100%;
  word-break: break-word;
}

.status-box:empty {
  display: none;
}

.status-box.status-loading {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.status-box.status-success {
  background: rgba(16, 185, 129, 0.12);
  border-color: var(--success-color, #10b981);
  color: var(--success-color, #10b981);
}

.status-box.status-error {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--danger-color, #ef4444);
  color: var(--danger-color, #ef4444);
}

/* ── Renewal & Churn component classes ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.stat-card .stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}

.stat-card .stat-label {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card.danger {
  border-left: 4px solid var(--danger-color, #ef4444);
}

.stat-card.warning {
  border-left: 4px solid var(--warning-color, #f59e0b);
}

.stat-card.success {
  border-left: 4px solid var(--success-color, #10b981);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.btn-ghost:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.btn-small {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
}

/* ── Calendar day-detail modal list ── */
.payment-day-detail-modal {
  max-width: 720px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

.payment-day-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.payment-day-summary .stat-card {
  padding: 10px 12px;
}

.payment-day-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.payment-day-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border-left: 4px solid var(--border-color);
  flex-wrap: wrap;
}

.payment-day-row.paid {
  border-left-color: var(--success-color, #10b981);
}

.payment-day-row.partial {
  border-left-color: var(--warning-color, #f59e0b);
}

.payment-day-row.overdue {
  border-left-color: var(--danger-color, #ef4444);
}

.payment-day-row.pending {
  border-left-color: var(--accent);
}

.payment-day-row .row-main {
  flex: 1;
  min-width: 0;
}

.payment-day-row .row-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-primary);
}

.payment-day-row .row-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.payment-day-row .row-amount {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 14px;
}

.payment-day-row .row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.payment-day-section-title {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin: 14px 0 8px;
}

.payment-day-empty {
  padding: 20px;
  text-align: center;
  background: var(--bg-secondary);
  border-radius: 10px;
  color: var(--text-tertiary);
  font-size: 13px;
}

@media (max-width: 600px) {
  .payment-day-detail-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    max-height: 95vh;
  }

  .payment-day-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .payment-day-row .row-amount {
    align-self: flex-end;
  }
}

/* ── Rapor Paneli (inline) — tam genişlik ── */
#instReports.rpt2-full-section {
  padding: 0;
}

#instReports .rpt-inline-shell {
  min-height: 560px;
}

#instReports .rpt-inline-body {
  min-height: 480px;
}

/* ── Accounting Enhanced Styles ── */


/* ─── Dashboard Top Grid ─── */
.acc-dashboard-top {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-areas:
    'period period'
    'quick kpi';
  gap: 14px 16px;
  margin-bottom: 22px;
  align-items: stretch;
}

.acc-dashboard-top .acc-quick-actions {
  grid-area: quick;
  position: sticky;
  top: 12px;
  align-self: start;
}

.acc-dashboard-top .acc-period-filter {
  grid-area: period;
  align-self: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0;
}

.acc-period-row {
  grid-area: period;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}

.acc-period-row>.acc-period-filter {
  grid-area: auto;
  margin-bottom: 0;
}

.acc-period-layout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent),
    0 1px 2px color-mix(in srgb, var(--shadow-color, rgba(0, 0, 0, 0.06)) 80%, transparent);
}

.acc-period-layout-btn:hover {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
}

.acc-period-layout-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-theme='dark'] .acc-period-layout-btn {
  background: color-mix(in srgb, var(--card-bg) 92%, #000000 8%);
  border-color: color-mix(in srgb, var(--border-color) 50%, transparent);
}

.acc-dashboard-top .acc-kpi-row {
  grid-area: kpi;
  margin-bottom: 0;
}

@media (max-width: 960px) {
  .acc-dashboard-top {
    grid-template-columns: 1fr;
    grid-template-areas:
      'period'
      'quick'
      'kpi';
  }

  .acc-dashboard-top .acc-quick-actions {
    position: static;
  }

  .acc-period-row {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ── Quick Actions Panel ── */
.acc-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 14px 14px;
  background: var(--card-bg);
  border-radius: var(--radius-md);
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.acc-quick-actions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
      var(--accent) 0%,
      color-mix(in srgb, var(--accent) 70%, #ffffff 30%) 100%);
}

.acc-quick-actions h4 {
  color: var(--text-primary);
  margin: 0 0 8px;
  padding: 2px 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 6px;
}

.acc-quick-actions h4 svg {
  color: var(--accent);
  flex-shrink: 0;
}

.acc-quick-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
}

.acc-quick-btn:hover {
  background: var(--hover-bg);
  border-color: var(--border-color);
  color: var(--accent);
  transform: translateX(2px);
}

.acc-quick-btn:active {
  transform: translateX(2px) scale(0.98);
}

.acc-quick-btn-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: 9px;
  flex-shrink: 0;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.acc-quick-btn:hover .acc-quick-btn-icon {
  background: var(--accent);
  color: #fff;
}

.acc-quick-btn-text {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-quick-btn.income {
  background: color-mix(in srgb, var(--success-color, #4caf50) 10%, var(--card-bg));
  border-color: color-mix(in srgb, var(--success-color, #4caf50) 40%, transparent);
  color: var(--success-color, #2c6e2c);
}

.acc-quick-btn.income .acc-quick-btn-icon {
  background: var(--success-color, #4caf50);
  color: #fff;
}

.acc-quick-btn.income:hover {
  background: var(--success-color, #4caf50);
  border-color: var(--success-color, #4caf50);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--success-color, #4caf50) 30%, transparent);
}

.acc-quick-btn.income:hover .acc-quick-btn-icon {
  background: #fff;
  color: var(--success-color, #4caf50);
}

.acc-quick-btn.expense {
  background: color-mix(in srgb, var(--danger-color, #f44336) 10%, var(--card-bg));
  border-color: color-mix(in srgb, var(--danger-color, #f44336) 40%, transparent);
  color: var(--danger-color, #b13b3b);
}

.acc-quick-btn.expense .acc-quick-btn-icon {
  background: var(--danger-color, #f44336);
  color: #fff;
}

.acc-quick-btn.expense:hover {
  background: var(--danger-color, #f44336);
  border-color: var(--danger-color, #f44336);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--danger-color, #f44336) 30%, transparent);
}

.acc-quick-btn.expense:hover .acc-quick-btn-icon {
  background: #fff;
  color: var(--danger-color, #f44336);
}

/* ── KPI Cards ── */
.acc-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.acc-period-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 0;
  padding: 5px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--card-bg) 95%, var(--hover-bg) 5%) 0%,
      var(--card-bg) 100%);
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  border-radius: 999px;
  width: fit-content;
  flex-wrap: wrap;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent),
    0 1px 2px color-mix(in srgb, var(--shadow-color, rgba(0, 0, 0, 0.06)) 80%, transparent),
    0 4px 14px color-mix(in srgb, var(--shadow-color, rgba(0, 0, 0, 0.04)) 60%, transparent);
}

.acc-period-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px 7px 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.14s ease;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: 0.15px;
}

.acc-period-btn::before {
  content: "";
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask: var(--period-icon, none) center / contain no-repeat;
  mask: var(--period-icon, none) center / contain no-repeat;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  opacity: 0.8;
  flex-shrink: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.acc-period-btn[data-period="this_month"] {
  --period-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.acc-period-btn[data-period="last_3_months"] {
  --period-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='14' width='4' height='7' rx='1'/%3E%3Crect x='10' y='9' width='4' height='12' rx='1'/%3E%3Crect x='17' y='4' width='4' height='17' rx='1'/%3E%3C/svg%3E");
}

.acc-period-btn[data-period="last_6_months"] {
  --period-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");
}

.acc-period-btn[data-period="last_year"] {
  --period-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E");
}

.acc-period-btn[data-period="all_time"] {
  --period-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.178 8c5.096 0 5.096 8 0 8-5.095 0-5.095-8 0-8z'/%3E%3Cpath d='M5.822 8c5.095 0 5.095 8 0 8-5.096 0-5.096-8 0-8z'/%3E%3Cpath d='M15 8h-6'/%3E%3C/svg%3E");
}

.acc-period-btn:hover:not(.active) {
  background: var(--accent-subtle);
  color: var(--accent);
}

.acc-period-btn:hover:not(.active)::before {
  opacity: 1;
  transform: scale(1.08);
}

.acc-period-btn:active:not(.active) {
  transform: scale(0.97);
}

.acc-period-btn.active {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 96%, #ffffff 4%) 0%,
      var(--accent) 100%);
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 60%, #000000 40%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

.acc-period-btn.active::before {
  opacity: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.acc-period-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-theme='dark'] .acc-period-filter {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--card-bg) 92%, #000000 8%) 0%,
      var(--card-bg) 100%);
  border-color: color-mix(in srgb, var(--border-color) 80%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 4px 14px rgba(0, 0, 0, 0.18);
}

[data-theme='dark'] .acc-period-btn.active {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 94%, #ffffff 6%) 0%,
      var(--accent) 100%);
  border-color: color-mix(in srgb, var(--accent) 50%, #000000 50%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 4px 16px color-mix(in srgb, var(--accent) 50%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent);
}

.acc-kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-xs);
}

.acc-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--kpi-color, var(--accent));
}

.acc-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--kpi-color, var(--accent));
}

.acc-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
  background: var(--kpi-bg, var(--accent-subtle));
  color: var(--kpi-color, var(--accent));
}

.acc-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.acc-kpi-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1px;
  line-height: 1.1;
}

.acc-kpi-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  margin-top: 8px;
}

.acc-kpi-change.positive {
  background: var(--success-bg);
  color: var(--success-color);
}

.acc-kpi-change.negative {
  background: var(--danger-bg);
  color: var(--danger-color);
}

.acc-kpi-change.neutral {
  background: var(--secondary-bg);
  color: var(--text-secondary);
}

/* ── Status Badges ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-badge.success {
  background: var(--success-bg);
  color: var(--success-color);
}

.status-badge.warning {
  background: #fff3e0;
  color: #f57c00;
}

.status-badge.danger {
  background: var(--danger-bg);
  color: var(--danger-color);
}

.status-badge.info {
  background: var(--accent-subtle);
  color: var(--accent);
}

.status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Cash Flow Forecast ── */
.acc-cashflow {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
}

.acc-cashflow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.acc-cashflow-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.acc-cashflow-tabs {
  display: flex;
  gap: 6px;
}

.acc-cashflow-tab {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.acc-cashflow-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.acc-cashflow-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}

.acc-cashflow-bar:last-child {
  border-bottom: none;
}

.acc-cashflow-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 80px;
}

.acc-cashflow-track {
  flex: 1;
  height: 24px;
  background: var(--secondary-bg);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.acc-cashflow-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: 11px;
  font-weight: 700;
  color: white;
}

.acc-cashflow-fill.income {
  background: linear-gradient(90deg, #4caf50, #66bb6a);
}

.acc-cashflow-fill.expense {
  background: linear-gradient(90deg, #f44336, #ef5350);
}

.acc-cashflow-fill.net {
  background: linear-gradient(90deg, #1976d2, #42a5f5);
}

.acc-cashflow-value {
  font-size: 13px;
  font-weight: 700;
  min-width: 90px;
  text-align: right;
}

.acc-cashflow-value.positive {
  color: var(--success-color);
}

.acc-cashflow-value.negative {
  color: var(--danger-color);
}

/* ── Budget Tracker ── */
.acc-budget {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
}

.acc-budget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.acc-budget-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.acc-budget-progress {
  margin-bottom: 16px;
}

.acc-budget-bar {
  height: 12px;
  background: var(--secondary-bg);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.acc-budget-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
}

.acc-budget-fill.under {
  background: linear-gradient(90deg, #4caf50, #66bb6a);
}

.acc-budget-fill.warning {
  background: linear-gradient(90deg, #ff9800, #ffb74d);
}

.acc-budget-fill.over {
  background: linear-gradient(90deg, #f44336, #ef5350);
}

.acc-budget-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.acc-budget-stat {
  text-align: center;
}

.acc-budget-stat-value {
  font-weight: 700;
  color: var(--text-primary);
}

.acc-budget-stat-label {
  color: var(--text-tertiary);
  font-size: 10px;
  text-transform: uppercase;
}

/* ── Profit/Loss Card ── */
.acc-profit-loss {
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--secondary-bg) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
}

.acc-profit-loss h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.acc-profit-loss-value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 8px;
}

.acc-profit-loss-value.profit {
  color: var(--success-color);
}

.acc-profit-loss-value.loss {
  color: var(--danger-color);
}

.acc-profit-loss-meta {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 12px;
}

.acc-profit-loss-meta span {
  color: var(--text-tertiary);
}

.acc-profit-loss-meta strong {
  color: var(--text-primary);
}

/* ── Tax Tracker ── */
.acc-tax-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
}

.acc-tax-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.acc-tax-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.acc-tax-period {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--secondary-bg);
  padding: 4px 10px;
  border-radius: 12px;
}

.acc-tax-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}

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

.acc-tax-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.acc-tax-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Bank Account Summary ── */
.acc-bank-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
}

.acc-bank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.acc-bank-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.acc-bank-accounts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acc-bank-account {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--secondary-bg);
  border-radius: var(--radius-sm);
}

.acc-bank-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.acc-bank-balance {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.acc-bank-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--accent-subtle);
  border-radius: var(--radius-sm);
  margin-top: 8px;
}

.acc-bank-total-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.acc-bank-total-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
}

/* ── Recent Transactions ── */
.acc-recent {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
}

.acc-recent #accRecentTransactions {
  max-height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.acc-recent #accRecentTransactions::-webkit-scrollbar {
  width: 4px;
}

.acc-recent #accRecentTransactions::-webkit-scrollbar-track {
  background: transparent;
}

.acc-recent #accRecentTransactions::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.acc-recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(10px, 1.5vw, 14px);
  flex-wrap: wrap;
  gap: 8px;
}

.acc-recent-header h4 {
  margin: 0;
  font-size: clamp(13px, 1.5vw, 14px);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.acc-recent-header h4 svg {
  flex-shrink: 0;
}

.acc-recent-link {
  font-size: clamp(11px, 1.3vw, 12px);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.acc-recent-link:hover {
  text-decoration: underline;
}

.acc-recent-item {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 12px);
  padding: clamp(8px, 1.3vw, 10px) 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.15s;
  overflow: hidden;
  min-width: 0;
}

.acc-recent-item:last-child {
  border-bottom: none;
}

.acc-recent-item:hover {
  background: var(--hover-bg);
  padding-left: clamp(6px, 1.2vw, 10px);
  padding-right: clamp(6px, 1.2vw, 10px);
  border-radius: var(--radius-sm);
}

.acc-recent-icon {
  width: clamp(28px, 5vw, 36px);
  height: clamp(28px, 5vw, 36px);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 2.5vw, 16px);
  flex-shrink: 0;
}

.acc-recent-icon.income {
  background: var(--success-bg);
  color: var(--success-color);
}

.acc-recent-icon.expense {
  background: var(--danger-bg);
  color: var(--danger-color);
}

.acc-recent-info {
  flex: 1;
  min-width: 0;
}

.acc-recent-desc {
  font-size: clamp(11px, 1.4vw, 13px);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-recent-meta {
  font-size: clamp(10px, 1.2vw, 11px);
  color: var(--text-tertiary);
}

.acc-recent-amount {
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 13px);
  flex-shrink: 0;
  white-space: nowrap;
}

.acc-recent-amount.income {
  color: var(--success-color);
}

.acc-recent-amount.expense {
  color: var(--danger-color);
}

/* ── Overdue Alerts ── */
.acc-alerts {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: clamp(14px, 2vw, 18px);
  border-left: 4px solid var(--danger-color);
  overflow: hidden;
}

.acc-alerts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(10px, 1.5vw, 14px);
  flex-wrap: wrap;
  gap: 8px;
}

.acc-alerts-header h4 {
  margin: 0;
  font-size: clamp(13px, 1.5vw, 14px);
  font-weight: 700;
  color: var(--danger-color);
  display: flex;
  align-items: center;
  gap: 6px;
}

.acc-alerts-header h4 svg {
  flex-shrink: 0;
}

.acc-alert-badge {
  background: var(--danger-color);
  color: white;
  font-size: clamp(10px, 1.2vw, 11px);
  font-weight: 700;
  padding: clamp(2px, 0.5vw, 3px) clamp(8px, 1.2vw, 10px);
  border-radius: 12px;
  flex-shrink: 0;
}

.acc-alert-item {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 10px);
  padding: clamp(8px, 1.3vw, 10px) 0;
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
  min-width: 0;
}

.acc-alert-item:last-child {
  border-bottom: none;
}

.acc-alert-icon {
  width: clamp(28px, 4vw, 32px);
  height: clamp(28px, 4vw, 32px);
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 1.5vw, 14px);
  flex-shrink: 0;
}

.acc-alert-info {
  flex: 1;
  min-width: 0;
}

.acc-alert-title {
  font-size: clamp(12px, 1.4vw, 13px);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-alert-desc {
  font-size: clamp(10px, 1.2vw, 11px);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-alert-amount {
  font-size: clamp(12px, 1.4vw, 13px);
  font-weight: 700;
  color: var(--danger-color);
  flex-shrink: 0;
  white-space: nowrap;
}

#accOverdueList {
  max-height: clamp(200px, 40vh, 280px);
  overflow-y: auto;
  scrollbar-width: thin;
}

#accOverdueList::-webkit-scrollbar {
  width: 4px;
}

#accOverdueList::-webkit-scrollbar-track {
  background: transparent;
}

#accOverdueList::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

/* ── Enhanced Charts ── */
.acc-chart-enhanced {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  overflow: hidden;
}

.acc-chart-enhanced-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.acc-chart-enhanced-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.acc-chart-enhanced-header h4 svg {
  color: var(--accent);
  flex-shrink: 0;
}

.acc-chart-period {
  display: flex;
  gap: 6px;
}

.acc-chart-period-btn {
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.acc-chart-period-btn:hover:not(.active) {
  background: var(--hover-bg);
  border-color: var(--border-strong);
}

.acc-chart-period-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.acc-chart-enhanced-body {
  position: relative;
  height: 200px;
  width: 100%;
}

#accMonthlyChart {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Legacy bar styles (kept for reference, unused) */
.acc-bar-group {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding-top: 10px;
}

.acc-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.acc-bar-visual {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
  min-height: 4px;
}

.acc-bar-income {
  background: linear-gradient(180deg, var(--success-color), color-mix(in srgb, var(--success-color) 70%, white));
}

.acc-bar-expense {
  background: linear-gradient(180deg, var(--danger-color), color-mix(in srgb, var(--danger-color) 70%, white));
}

.acc-bar-label {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 600;
}

@media (max-width: 640px) {
  .acc-chart-enhanced-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .acc-chart-enhanced-body {
    height: 160px;
  }
}

/* ── Yaklaşan Ödemeler ── */
.acc-upcoming-header {
  margin-bottom: clamp(8px, 1.5vw, 12px);
}

.acc-upcoming-summary {
  display: flex;
  gap: clamp(6px, 1vw, 8px);
  flex-wrap: wrap;
  align-items: center;
}

.acc-upcoming-badge {
  padding: clamp(3px, 0.6vw, 4px) clamp(8px, 1.2vw, 10px);
  border-radius: 12px;
  font-size: clamp(10px, 1.2vw, 11px);
  font-weight: 600;
  background: var(--secondary-bg);
  color: var(--text-secondary);
  white-space: nowrap;
}

.acc-upcoming-badge.urgent {
  background: var(--danger-bg);
  color: var(--danger-color);
}

.acc-upcoming-badge.soon {
  background: var(--warning-bg);
  color: var(--warning-color);
}

.acc-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 8px);
  max-height: clamp(200px, 40vh, 300px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.acc-upcoming-list::-webkit-scrollbar {
  width: 4px;
}

.acc-upcoming-list::-webkit-scrollbar-track {
  background: transparent;
}

.acc-upcoming-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.acc-upcoming-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--secondary-bg);
  border-left: 3px solid var(--border-color);
  transition: background 0.15s ease, transform 0.15s ease;
}

.acc-upcoming-item:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--secondary-bg));
  transform: translateX(2px);
}

.acc-upcoming-item.urgent {
  border-left-color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 5%, var(--secondary-bg));
}

.acc-upcoming-item.soon {
  border-left-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 5%, var(--secondary-bg));
}

.acc-upcoming-item.later {
  border-left-color: var(--text-tertiary);
}

.acc-upcoming-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.acc-upcoming-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.acc-upcoming-student {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-upcoming-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-upcoming-date {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.acc-upcoming-days-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.acc-upcoming-days-badge.urgent {
  background: color-mix(in srgb, var(--danger-color) 14%, transparent);
  color: var(--danger-color);
  border: 1px solid color-mix(in srgb, var(--danger-color) 22%, transparent);
}

.acc-upcoming-days-badge.soon {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #f59e0b;
  border: 1px solid color-mix(in srgb, #f59e0b 22%, transparent);
}

.acc-upcoming-days-badge.later {
  background: var(--secondary-bg);
  color: var(--text-tertiary);
  border: 1px solid var(--border-color);
}

.acc-upcoming-date-val {
  font-size: 10px;
  color: var(--text-tertiary);
}

.acc-upcoming-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Responsive: acc panels ── */
@media (max-width: 768px) {
  .acc-alert-item {
    flex-wrap: wrap;
  }

  .acc-alert-amount {
    width: 100%;
    text-align: left;
    margin-top: 4px;
    padding-left: calc(clamp(28px, 4vw, 32px) + clamp(8px, 1.5vw, 10px));
  }

  .acc-recent-item {
    flex-wrap: wrap;
  }

  .acc-recent-amount {
    width: 100%;
    text-align: left;
    margin-top: 4px;
    padding-left: calc(clamp(28px, 5vw, 36px) + clamp(8px, 1.5vw, 12px));
  }

  .acc-upcoming-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon info amount" "icon date amount";
    row-gap: 2px;
  }

  .acc-upcoming-icon {
    grid-area: icon;
  }

  .acc-upcoming-info {
    grid-area: info;
  }

  .acc-upcoming-date {
    grid-area: date;
    align-items: flex-end;
  }

  .acc-upcoming-amount {
    grid-area: amount;
    align-self: center;
  }
}

@media (max-width: 480px) {
  .acc-upcoming-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .acc-upcoming-badge {
    font-size: 10px;
    padding: 2px 8px;
  }

  .acc-alert-icon,
  .acc-recent-icon {
    width: 28px;
    height: 28px;
  }
}

/* ── Ödeme Takvimi ── */
.acc-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.acc-calendar-nav {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
}

.acc-calendar-nav:hover {
  background: var(--secondary-bg);
}

.acc-calendar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.acc-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 16px;
}

.acc-calendar-day-name {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 4px;
}

.acc-calendar-empty {
  background: var(--secondary-bg);
  border-radius: var(--radius-sm);
  min-height: 40px;
}

.acc-calendar-day {
  background: var(--secondary-bg);
  border-radius: var(--radius-sm);
  padding: 4px;
  min-height: 40px;
  text-align: center;
}

.acc-calendar-day.today {
  background: var(--accent-bg);
  border: 2px solid var(--accent);
}

.acc-calendar-day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.acc-calendar-items {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-top: 2px;
}

.acc-calendar-item {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acc-calendar-item.income {
  background: var(--success-color);
  color: white;
}

.acc-calendar-item.expense {
  background: var(--danger-color);
  color: white;
}

.acc-calendar-summary {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.acc-calendar-sum {
  font-size: 12px;
  font-weight: 600;
}

.acc-calendar-sum.income {
  color: var(--success-color);
}

.acc-calendar-sum.expense {
  color: var(--danger-color);
}

.acc-calendar-sum.net {
  color: var(--primary-color);
}

/* ── Flashcards Module ── */
.flashcards-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.flashcards-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.flashcard-sets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  min-height: 320px;
}

.flashcard-empty-state {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  width: min(520px, 100%);
  margin: 32px auto;
}

.flashcard-set-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all 0.2s;
}

.flashcard-set-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.flashcard-set-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.flashcard-set-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.flashcard-set-count {
  background: var(--secondary-bg);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.flashcard-set-desc {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.flashcard-set-category {
  display: inline-block;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 12px;
}

.flashcard-set-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Study Mode */
.study-mode {
  max-width: 800px;
  margin: 0 auto;
}

.study-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.study-progress {
  flex: 1;
  margin-right: 20px;
}

.study-progress span {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: block;
}

.study-progress-bar {
  height: 8px;
  background: var(--secondary-bg);
  border-radius: 4px;
  overflow: hidden;
}

.study-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--success-color));
  transition: width 0.3s ease;
}

/* Flashcard */
.flashcard-container {
  perspective: 1000px;
  margin-bottom: 32px;
}

.flashcard {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  min-height: 300px;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.flashcard.flipped {
  transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border-radius: var(--radius-xl);
}

.flashcard-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--secondary-bg) 100%);
}

.flashcard-label {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--accent);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.flashcard-content {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  line-height: 1.4;
}

.flashcard-back .flashcard-content {
  font-size: 22px;
}

.flashcard-example {
  margin-top: 20px;
  padding: 16px;
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  max-width: 100%;
  word-break: break-word;
}

.flashcard-hint {
  position: absolute;
  bottom: 20px;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* SM-2 Rating */
.sm2-rating {
  text-align: center;
}

.sm2-label {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.sm2-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.sm2-btn {
  flex: 1;
  min-width: 120px;
  max-width: 160px;
  padding: 20px 16px;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sm2-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.sm2-btn-label {
  font-size: 18px;
  font-weight: 700;
}

.sm2-btn-desc {
  font-size: 11px;
  opacity: 0.8;
}

.sm2-btn.again {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.sm2-btn.hard {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: white;
}

.sm2-btn.good {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.sm2-btn.easy {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

/* Study Complete */
.study-complete {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
}

.study-complete-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.study-complete h2 {
  font-size: 28px;
  margin-bottom: 30px;
  color: var(--text-primary);
}

.study-complete-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 600px) {
  .study-complete-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  background: var(--secondary-bg);
  padding: 20px;
  border-radius: var(--radius-lg);
}

.stat-card .stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-card .stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.stat-card.success {
  background: var(--success-bg);
}

.stat-card.success .stat-value {
  color: var(--success-color);
}

.stat-card.danger {
  background: var(--danger-bg);
}

.stat-card.danger .stat-value {
  color: var(--danger-color);
}

.study-complete-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Flashcard Student Container ── */
.flashcard-student-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.flashcard-header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.flashcard-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.flashcard-settings-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-item label {
  font-size: 13px;
  color: var(--text-secondary);
}

.setting-item select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
}

.setting-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Overview Cards */
.flashcard-overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.overview-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.overview-card.accent {
  background: var(--accent-bg);
  border-color: var(--accent);
}

.overview-card.success {
  background: var(--success-bg);
  border-color: var(--success-color);
}

.overview-card.danger {
  background: var(--danger-bg);
  border-color: var(--danger-color);
}

.overview-icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.overview-card.accent .overview-icon {
  color: var(--accent);
}

.overview-card.success .overview-icon {
  color: var(--success-color);
}

.overview-card.danger .overview-icon {
  color: var(--danger-color);
}

.overview-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
}

.overview-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Sets Section */
.flashcard-sets-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.flashcard-sets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* Set Card */
.flashcard-set-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all 0.2s;
}

.flashcard-set-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.set-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.set-card-header h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.set-card-count {
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--secondary-bg);
  padding: 4px 8px;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.set-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.set-card-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--secondary-bg);
  padding: 6px 10px;
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.set-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--secondary-bg);
  color: var(--text-secondary);
}

.stat-badge.due {
  background: var(--accent-bg);
  color: var(--accent);
}

.stat-badge.new {
  background: var(--success-bg);
  color: var(--success-color);
}

.stat-badge.mastered {
  background: var(--secondary-bg);
  color: var(--text-secondary);
}

.stat-badge.leech {
  background: var(--danger-bg);
  color: var(--danger-color);
}

/* Filter Buttons */
.set-card-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filter-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.filter-btn.leech {
  border-color: var(--danger-color);
  color: var(--danger-color);
}

.filter-btn.leech.active {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: white;
}

.btn-block {
  width: 100%;
}

/* Study Mode Enhancements */
.study-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}

.study-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.study-set-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.study-filter-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--secondary-bg);
  color: var(--text-secondary);
}

.btn-icon {
  padding: 8px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Leech Warning */
.leech-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-color);
  border-radius: var(--radius);
  color: var(--danger-color);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* SM-2 Button Enhancements */
.sm2-btn {
  position: relative;
}

.sm2-btn-next {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
}

.sm2-keyboard-hint {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
}

.sm2-keyboard-hint kbd {
  display: inline-block;
  padding: 2px 8px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: 11px;
  margin: 0 2px;
}

/* Study Complete Enhancements */
.study-complete-details {
  margin: 32px 0;
}

.detail-section {
  background: var(--secondary-bg);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px;
}

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

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.detail-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.time-display {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: monospace;
  text-align: center;
  padding: 8px 0;
}

.study-complete-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .study-complete-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .flashcard-header-section {
    flex-direction: column;
  }

  .flashcard-sets-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Finansal Planlama ── */
.acc-planning-header {
  margin-bottom: 16px;
}

.acc-planning-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.acc-planning-table {
  overflow-x: auto;
}

.acc-planning-alerts {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acc-alert {
  padding: 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.acc-alert.warning {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}

.acc-alert.success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

/* ── Empty State Enhanced ── */
.empty-state-enhanced {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.empty-state-enhanced .empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--secondary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 16px;
}

.empty-state-enhanced h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.empty-state-enhanced p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ── Bulk Actions Bar ── */
.acc-bulk-actions {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--accent-subtle);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  animation: slideDown 0.2s ease;
}

.acc-bulk-actions.visible {
  display: flex;
}

.acc-bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.acc-bulk-btn {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}

.acc-bulk-btn.select-all {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.acc-bulk-btn.select-all:hover {
  background: var(--accent-subtle);
}

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

.acc-bulk-btn.delete:hover {
  opacity: 0.9;
}

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

.acc-bulk-btn.export:hover {
  opacity: 0.9;
}

/* ── Animation Keyframes ── */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* ── Responsive Enhancements ── */
@media (max-width: 900px) {
  .acc-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .acc-quick-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .acc-quick-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 140px;
  }

  .acc-kpi-row {
    grid-template-columns: 1fr;
  }

  .acc-cashflow-tabs {
    display: none;
  }

  .acc-period-filter {
    width: 100%;
    justify-content: center;
  }

  .acc-period-btn {
    flex: 1;
    text-align: center;
  }
}

/* 12+ KPI kartı için 3 sütunlu grid (büyük ekranlar) */
@media (min-width: 1400px) {
  .acc-kpi-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1100px) and (max-width: 1399px) {
  .acc-kpi-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .notif-tabs-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .notif-send-btn {
    width: 100%;
    margin-bottom: 0;
  }

  .notif-tab {
    padding: 9px 14px;
    font-size: 13px;
  }

  .sms-settings-card {
    max-width: 100%;
  }
}

/* ── Student Schedule Styles ── */
.schedule-view-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.schedule-view-tabs .tab-btn {
  padding: 8px 16px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.schedule-view-tabs .tab-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.schedule-view-tabs .tab-btn.active {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.schedule-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.schedule-week-grid {
  font-size: 12px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.schedule-week-grid>div {
  min-height: 50px;
}

.schedule-lesson,
.schedule-etut {
  border-radius: 4px;
  margin-bottom: 2px;
}

.schedule-lesson strong,
.schedule-etut strong {
  font-size: 11px;
}

.schedule-legend {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.schedule-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.schedule-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.schedule-upcoming {
  margin-top: 24px;
}

.schedule-upcoming h3 {
  font-size: 14px;
  margin-bottom: 12px;
}

.schedule-upcoming-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.schedule-calendar-day {
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.schedule-calendar-day-header {
  font-weight: 600;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.schedule-calendar-item {
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  border-left: 3px solid var(--accent);
}

.schedule-empty {
  text-align: center;
  padding: 32px;
  color: var(--text-secondary);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .schedule-week-grid {
    font-size: 10px;
    overflow-x: auto;
  }

  .schedule-view-tabs {
    width: 100%;
  }

  .schedule-view-tabs .tab-btn {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    font-size: 12px;
  }

  .schedule-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .schedule-controls>div {
    justify-content: center;
  }

  #schedulePrevWeek,
  #scheduleNextWeek,
  #scheduleTodayBtn {
    padding: 6px 12px;
    font-size: 12px;
  }

  .schedule-legend {
    gap: 12px;
    padding: 10px;
  }

  .schedule-legend-item {
    font-size: 11px;
  }

  .schedule-calendar-item {
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .schedule-week-grid {
    display: block;
  }

  .schedule-week-grid>div:first-child {
    display: none;
  }

  .schedule-week-grid>div:not(:first-child) {
    min-height: auto;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
  }
}

/* ── Schedule Settings Modal Responsive ── */
#scheduleSettingsModal .modal-content {
  max-height: 90vh;
}

.schedule-settings-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.schedule-settings-tabs .tab-btn {
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.schedule-settings-tabs .tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.schedule-settings-tabs .tab-btn.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
  background: var(--accent-color) 10;
}

.slot-list-container {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 16px;
  padding: 4px;
}

.slot-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.time-picker-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.time-picker-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.time-spinner {
  width: 50px;
  padding: 8px 4px;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 14px;
}

.time-separator {
  font-weight: 700;
  color: var(--text-secondary);
}

.slot-color-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.slot-color-option {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 3px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.slot-color-option:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.slot-color-option.selected {
  border-color: var(--card-bg);
  box-shadow:
    0 0 0 3px var(--accent),
    0 4px 14px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
}

.slot-color-preview {
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
}

.slot-color-preview .color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.slot-color-select-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.slot-color-select {
  flex: 1;
  min-width: 150px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  cursor: pointer;
  appearance: auto;
}

.slot-color-select:focus {
  outline: none;
  border-color: var(--accent);
}

.emoji-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.emoji-option {
  font-size: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all 0.2s;
  border: 2px solid var(--border-color);
  background: var(--card-bg);
}

.emoji-option:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
  transform: scale(1.08);
}

.emoji-option.selected {
  background: var(--accent-light);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* ── Slot Card Responsive ── */
.etut-slot-card,
.teneffus-slot-card {
  flex-wrap: wrap;
}

.etut-slot-card .etut-slot-badge,
.teneffus-slot-card .teneffus-slot-duration {
  margin-left: auto;
}

@media (max-width: 600px) {
  .schedule-settings-tabs {
    gap: 2px;
  }

  .schedule-settings-tabs .tab-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .slot-form-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .slot-form-group {
    margin-bottom: 8px;
  }

  .slot-color-options {
    gap: 6px;
  }

  .slot-color-option {
    width: 24px;
    height: 24px;
  }

  .emoji-options {
    gap: 4px;
  }

  .emoji-option {
    font-size: 18px;
    padding: 3px;
  }

  .etut-slot-card,
  .teneffus-slot-card {
    padding: 12px;
    gap: 8px;
  }

  .etut-slot-icon {
    font-size: 20px;
  }

  .teneffus-slot-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .slot-list-container {
    max-height: 200px;
  }
}

/* ── Bottom Sheet Adjustments for Schedule Modal ── */
@media (max-width: 600px) {
  #scheduleSettingsModal .modal-content {
    max-height: 95dvh;
  }

  #scheduleSettingsModal .modal-body {
    padding: 12px;
  }

  .slot-form-panel {
    padding: 12px;
  }

  .slot-form-title {
    font-size: 12px;
    margin-bottom: 10px;
  }
}

/* ── Modal Section Description ── */
.modal-section-desc {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ── Slot Duration Display ── */
.slot-duration-display {
  padding: 9px 12px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* ── Slot Checkbox Label ── */
.slot-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}

.slot-checkbox-label input[type='checkbox'] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* ── Additional Responsive Helpers ── */
@media (max-width: 480px) {
  .schedule-settings-tabs {
    gap: 2px;
  }

  .schedule-settings-tabs .tab-btn {
    padding: 8px 10px;
    font-size: 11px;
  }

  .schedule-settings-tabs .tab-btn span {
    display: none;
  }

  .schedule-settings-tabs .tab-btn::before {
    font-size: 16px;
  }

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

  .slot-color-options {
    gap: 6px;
  }

  .slot-color-option {
    width: 24px;
    height: 24px;
  }

  .emoji-options {
    gap: 4px;
  }

  .emoji-option {
    font-size: 18px;
    padding: 3px;
  }

  .slot-list-container {
    max-height: 180px;
  }
}

/* ── Print Styles for Schedule ── */
@media print {

  .schedule-controls,
  .navbar,
  .sidebar,
  .schedule-view-tabs {
    display: none !important;
  }

  .schedule-week-grid {
    font-size: 10px;
    border: 1px solid #ccc;
  }

  .schedule-calendar-day {
    break-inside: avoid;
  }
}

/* ── Schedule Settings Modal Centering ── */
#scheduleSettingsModal {
  align-items: flex-start;
  padding-top: 10vh;
}

.schedule-modal-content {
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  margin: 0 auto;
}

@media (min-width: 641px) {
  #scheduleSettingsModal {
    align-items: center;
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  #scheduleSettingsModal {
    padding: 0;
    align-items: stretch;
  }

  #scheduleSettingsModal .modal-content {
    max-height: 100dvh;
    border-radius: 0;
  }
}

/* ── Emoji Selection Styling ── */
.emoji-option-label {
  display: inline-flex;
}

.emoji-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 24px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
}

.emoji-option:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
  transform: scale(1.1);
}

.emoji-option.selected {
  background: var(--accent-light);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

#teneffusEmojiPreview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

#teneffusEmojiPreview .emoji {
  font-size: 20px;
}

/* ─── Button Group ─────────────────────────────────────────────────────── */
.btn-group {
  display: inline-flex;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}

.btn-group .btn {
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
}

.btn-group .btn:hover {
  background: var(--hover-bg);
}

.btn-group .btn.active {
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}

/* ─── Icon Button ──────────────────────────────────────────────────────── */
.btn-icon {
  padding: 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s ease;
  min-width: 32px;
  min-height: 32px;
}

.btn-icon:hover {
  background: var(--bg-tertiary);
  color: var(--primary-color);
}

.btn-icon:active {
  background: var(--accent-subtle);
  transform: scale(0.96);
}

.btn-icon svg {
  display: block;
}

.btn-icon.btn-sm {
  padding: 6px;
  min-width: 32px;
  min-height: 32px;
}

.btn-icon span {
  font-size: 16px;
  line-height: 1;
}

/* ─── Badge Primary ────────────────────────────────────────────────────── */
.badge-primary {
  background: var(--primary-color);
  color: #fff;
}

.badge-success {
  background: var(--success-bg);
  color: var(--success-color);
}

.badge-warning {
  background: var(--warning-bg);
  color: var(--warning-color);
}

.badge-danger {
  background: var(--danger-bg);
  color: var(--danger-color);
}

.badge-muted {
  background: var(--secondary-bg);
  color: var(--text-tertiary);
}

/* ── Leads / CRM Module Styles ────────────────────────────────────────── */

/* View Buttons */
.leads-view-buttons {
  display: flex;
  gap: 8px;
  background: var(--bg-secondary);
  padding: 6px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}

/* Leads Section Header */
.leads-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
}

.leads-section-header>div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.leads-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.leads-view-buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.leads-view-buttons .btn:hover {
  background: var(--card-bg);
  color: var(--text-primary);
}

.leads-view-buttons .btn.active {
  background: var(--primary-color);
  color: white;
  box-shadow: var(--shadow-sm);
}

.leads-view-buttons .btn span {
  display: inline;
}

/* Pagination */
.leads-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: var(--card-bg);
  border-top: 1px solid var(--border-color);
}

.pagination-info {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0 12px;
}

/* Calendar Month Label */
.calendar-month-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0 16px;
}

/* Empty State */
.empty-state-content {
  text-align: center;
  padding: 48px 24px;
}

.empty-state-content p {
  color: var(--text-secondary);
  margin: 16px 0;
  font-size: 15px;
}

.empty-state-content .btn {
  margin-top: 8px;
}

.leads-dashboard-widgets {
  display: flex;
  gap: 16px;
  padding: 16px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.leads-dashboard-widgets .stat-card {
  flex: 0 0 auto;
  min-width: 160px;
  box-shadow: var(--shadow-xs);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
}

.leads-dashboard-widgets .stat-card {
  box-shadow: var(--shadow-xs);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
}

.leads-dashboard-widgets .stat-card .stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.leads-dashboard-widgets .stat-card .stat-value {
  font-size: 22px;
}

.leads-views {
  padding: 0;
}

.leads-view {
  padding: 24px;
}

.leads-dashboard-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-charts-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.chart-container {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  max-height: 500px;
}

.chart-container canvas {
  max-height: 460px;
  width: 100%;
}

.chart-container h4 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.leads-list-container {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-color);
}

.leads-table {
  width: 100%;
  border-collapse: collapse;
}

.leads-table th,
.leads-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.leads-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.leads-table tbody tr {
  transition: var(--transition);
}

.leads-table tbody tr:hover {
  background: var(--hover-bg);
}

.leads-table .checkbox-col {
  width: 40px;
}

.leads-table .actions-col {
  width: 120px;
}

/* Lead Row Cells */
.lead-name-cell {
  display: flex;
  flex-direction: column;
}

.lead-name {
  font-weight: 600;
  color: var(--text-primary);
}

.lead-tc {
  font-size: 12px;
  color: var(--text-secondary);
}

.lead-phone-cell {
  display: flex;
  flex-direction: column;
}

.lead-parent {
  color: var(--text-primary);
}

.lead-phone {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Priority Indicator */
.priority-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.priority-indicator.dusuk {
  background: #95a5a6;
}

.priority-indicator.normal {
  background: #3498db;
}

.priority-indicator.yuksek {
  background: #f39c12;
}

.priority-indicator.kritik {
  background: #e74c3c;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Score Cell */
.score-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-value {
  font-weight: 600;
  min-width: 30px;
}

.score-bar {
  width: 60px;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

/* Source Tag */
.source-tag {
  font-size: 12px;
  padding: 2px 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  color: var(--text-secondary);
}

/* Kanban View */
.leads-kanban-container {
  overflow-x: auto;
  padding-bottom: 16px;
}

.kanban-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  min-width: max-content;
}

.kanban-column {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
}

.kanban-column-header {
  padding: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.kanban-column-header .column-title {
  font-size: 14px;
  color: var(--text-primary);
}

.kanban-column-header .count {
  background: var(--bg-tertiary, rgba(0, 0, 0, 0.1));
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.kanban-column-body {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  min-height: 200px;
  max-height: 60vh;
}

.kanban-card {
  background: var(--card-bg);
  padding: 14px;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  cursor: grab;
  border: 1px solid var(--border-color);
  transition: var(--transition);
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.kanban-card.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.kanban-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.kanban-card-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.kanban-card-phone {
  font-size: 12px;
  color: var(--text-secondary);
}

.kanban-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 8px;
}

/* Calendar View */
.leads-calendar-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.calendar-header span {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

/* =============================================
   PAYMENT CALENDAR RESPONSIVE
   ============================================= */

/* ---- Payment Calendar Controls ---- */
.payment-cal-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}

.payment-cal-controls .filter-search {
  max-width: 200px;
}

@media (max-width: 768px) {
  .payment-cal-controls {
    gap: 6px;
  }

  .payment-cal-controls .filter-search {
    max-width: 160px;
    font-size: 12px;
    padding: 6px 10px;
  }
}

@media (max-width: 480px) {
  .payment-cal-controls {
    gap: 6px;
    margin-bottom: 12px;
  }

  .payment-cal-controls .filter-search {
    width: 100%;
    max-width: none;
    font-size: 12px;
    padding: 7px 12px;
  }

  .payment-cal-controls .btn {
    font-size: 12px;
    padding: 7px 10px;
  }
}

@media (max-width: 360px) {
  .payment-cal-controls {
    gap: 5px;
  }

  .payment-cal-controls .btn {
    font-size: 11px;
    padding: 6px 8px;
  }
}

/* ---- Calendar Grid ---- */
#tabCalendar .calendar-grid {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border-color);
}

@media (max-width: 768px) {
  #tabCalendar .calendar-grid {
    padding: 12px;
    gap: 6px;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  #tabCalendar .calendar-grid {
    padding: 10px 8px;
    gap: 6px;
    border-radius: 8px;
  }
}

@media (max-width: 360px) {
  #tabCalendar .calendar-grid {
    padding: 8px 6px;
    gap: 5px;
  }
}

/* ---- Calendar Days Header ---- */
#tabCalendar .calendar-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

#tabCalendar .calendar-days-header>div {
  padding: 4px;
}

@media (max-width: 768px) {
  #tabCalendar .calendar-days-header {
    font-size: 11px;
    padding-bottom: 6px;
  }
}

@media (max-width: 480px) {
  #tabCalendar .calendar-days-header {
    font-size: 10px;
    padding-bottom: 4px;
  }

  #tabCalendar .calendar-days-header>div {
    padding: 3px 2px;
  }
}

@media (max-width: 360px) {
  #tabCalendar .calendar-days-header {
    font-size: 9px;
  }
}

/* ---- Calendar Days Grid ---- */
#tabCalendar .calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

@media (max-width: 768px) {
  #tabCalendar .calendar-days-grid {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  #tabCalendar .calendar-days-grid {
    gap: 4px;
  }
}

@media (max-width: 360px) {
  #tabCalendar .calendar-days-grid {
    gap: 3px;
  }
}

/* ---- Calendar Day Cells ---- */
#tabCalendar .calendar-day {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  min-height: 100px;
  padding: 8px;
  transition: background 0.2s;
  background: var(--card-bg);
}

@media (max-width: 768px) {
  #tabCalendar .calendar-day {
    min-height: 80px;
    padding: 6px;
    border-radius: 6px;
  }
}

@media (max-width: 640px) {
  #tabCalendar .calendar-day {
    min-height: 70px;
    padding: 5px;
    border-radius: 6px;
  }
}

@media (max-width: 480px) {
  #tabCalendar .calendar-day {
    min-height: 60px;
    padding: 4px;
    border-radius: 5px;
  }
}

@media (max-width: 360px) {
  #tabCalendar .calendar-day {
    min-height: 50px;
    padding: 3px;
    border-radius: 4px;
  }
}

#tabCalendar .calendar-day.today {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

#tabCalendar .calendar-day.empty {
  background: var(--bg-secondary);
  opacity: 0.5;
}

#tabCalendar .calendar-day.has-overdue {
  border-color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 5%, var(--card-bg));
}

#tabCalendar .calendar-day.has-overdue .day-number {
  color: var(--danger-color);
}

#tabCalendar .calendar-day.has-pending {
  border-color: var(--warning-color);
  background: color-mix(in srgb, var(--warning-color) 5%, var(--card-bg));
}

#tabCalendar .calendar-day.has-paid {
  border-color: var(--success-color);
}

#tabCalendar .calendar-day.has-income {
  background: color-mix(in srgb, var(--success-color) 8%, var(--card-bg));
}

#tabCalendar .calendar-day .day-number {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text-primary);
}

#tabCalendar .calendar-day .day-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width: 480px) {
  #tabCalendar .calendar-day .day-number {
    font-size: 12px;
    margin-bottom: 3px;
  }
}

@media (max-width: 360px) {
  #tabCalendar .calendar-day .day-number {
    font-size: 11px;
  }
}

/* ---- Payment Items in Day Cells ---- */
#tabCalendar .day-payment-item {
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

@media (max-width: 480px) {
  #tabCalendar .day-payment-item {
    font-size: 10px;
    padding: 3px 4px;
    border-radius: 3px;
    gap: 2px;
  }
}

@media (max-width: 360px) {
  #tabCalendar .day-payment-item {
    font-size: 9px;
    padding: 2px 3px;
  }
}

#tabCalendar .day-payment-item .payment-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  flex: 1;
}

#tabCalendar .day-payment-item .payment-amount {
  font-weight: 600;
  white-space: nowrap;
}

#tabCalendar .day-payment-item.paid,
#tabCalendar .day-payment-item.income {
  background: color-mix(in srgb, var(--success-color) 15%, transparent);
}

#tabCalendar .day-payment-item.pending {
  background: color-mix(in srgb, var(--warning-color) 15%, transparent);
}

#tabCalendar .day-payment-item.overdue {
  background: color-mix(in srgb, var(--danger-color) 15%, transparent);
}

.day-payment-item.expense {
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border-left: 2px solid #ef4444;
}

.day-payment-item.income {
  border-left: 2px solid var(--success-color);
}

.day-payment-item.tx-pending {
  border-left: 3px solid var(--warning-color);
  background: color-mix(in srgb, var(--warning-color) 18%, transparent);
}

#tabCalendar .day-payment-item:hover {
  background: color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* ---- Yearly Calendar Grid ---- */
#tabCalendar .yearly-calendar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 1024px) {
  #tabCalendar .yearly-calendar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (max-width: 768px) {
  #tabCalendar .yearly-calendar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
  }
}

@media (max-width: 480px) {
  #tabCalendar .yearly-calendar-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
  }
}

@media (max-width: 360px) {
  #tabCalendar .yearly-calendar-grid {
    gap: 6px;
    margin-top: 8px;
  }
}

/* ---- Yearly Month Cards ---- */
#tabCalendar .yearly-month-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

@media (max-width: 768px) {
  #tabCalendar .yearly-month-card {
    padding: 12px;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  #tabCalendar .yearly-month-card {
    padding: 10px;
    border-radius: 8px;
  }
}

@media (max-width: 360px) {
  #tabCalendar .yearly-month-card {
    padding: 8px;
    border-radius: 6px;
  }
}

#tabCalendar .yearly-month-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

#tabCalendar .yearly-month-card.current {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

#tabCalendar .yearly-month-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  #tabCalendar .yearly-month-name {
    font-size: 14px;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  #tabCalendar .yearly-month-name {
    font-size: 13px;
    margin-bottom: 8px;
  }
}

@media (max-width: 360px) {
  #tabCalendar .yearly-month-name {
    font-size: 12px;
    margin-bottom: 6px;
  }
}

#tabCalendar .yearly-month-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 768px) {
  #tabCalendar .yearly-month-stats {
    gap: 5px;
  }
}

@media (max-width: 480px) {
  #tabCalendar .yearly-month-stats {
    gap: 4px;
  }
}

#tabCalendar .yearly-month-stats .stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  #tabCalendar .yearly-month-stats .stat-row {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  #tabCalendar .yearly-month-stats .stat-row {
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  #tabCalendar .yearly-month-stats .stat-row {
    font-size: 10px;
  }
}

#tabCalendar .yearly-month-stats .stat-row .pending {
  color: var(--warning-color);
  font-weight: 600;
}

#tabCalendar .yearly-month-stats .stat-row .paid {
  color: var(--success-color);
  font-weight: 600;
}

#tabCalendar .yearly-month-stats .stat-row .overdue {
  color: var(--danger-color);
  font-weight: 600;
}

#tabCalendar .yearly-month-count {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-tertiary);
}

@media (max-width: 768px) {
  #tabCalendar .yearly-month-count {
    font-size: 11px;
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  #tabCalendar .yearly-month-count {
    font-size: 10px;
    margin-top: 6px;
  }
}

/* ---- Notifications List ---- */
#tabCalendar #paymentNotificationsList {
  margin-top: 20px;
}

@media (max-width: 480px) {
  #tabCalendar #paymentNotificationsList {
    margin-top: 14px;
  }
}

@media (max-width: 360px) {
  #tabCalendar #paymentNotificationsList {
    margin-top: 10px;
  }
}

/* ---- Landscape Orientation Adjustments ---- */
@media (max-height: 500px) and (orientation: landscape) {
  #tabCalendar .calendar-day {
    min-height: 60px;
    padding: 4px;
  }

  #tabCalendar .calendar-days-grid {
    gap: 4px;
  }

  #tabCalendar .calendar-day .day-number {
    font-size: 11px;
  }

  #tabCalendar .yearly-calendar-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
  }
}

@media (max-width: 640px) and (orientation: landscape) {
  #tabCalendar .calendar-grid {
    padding: 10px 12px;
  }

  #tabCalendar .calendar-day {
    min-height: 70px;
    padding: 5px;
  }

  #tabCalendar .calendar-days-header {
    font-size: 10px;
  }

  #tabCalendar .yearly-calendar-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  #tabCalendar .yearly-month-card {
    padding: 10px;
  }
}

@media (max-width: 480px) and (orientation: landscape) {
  #tabCalendar .calendar-days-grid {
    gap: 4px;
  }

  #tabCalendar .calendar-day {
    min-height: 55px;
    padding: 4px;
  }

  #tabCalendar .yearly-calendar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

/* =============================================
   PAYMENT NOTIFICATION CARDS (Modern)
   ============================================= */

#tabCalendar .payment-notif-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  border-left: 4px solid var(--border-color);
  transition: all 0.2s ease;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#tabCalendar .payment-notif-card:last-child {
  margin-bottom: 0;
}

#tabCalendar .payment-notif-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--primary-color);
}

#tabCalendar .payment-notif-card.overdue {
  border-left-color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 3%, var(--card-bg));
}

#tabCalendar .payment-notif-card.overdue:hover {
  background: color-mix(in srgb, var(--danger-color) 5%, var(--card-bg));
}

#tabCalendar .payment-notif-card.pending {
  border-left-color: var(--warning-color);
  background: color-mix(in srgb, var(--warning-color) 3%, var(--card-bg));
}

#tabCalendar .payment-notif-card.paid,
#tabCalendar .payment-notif-card.income {
  border-left-color: var(--success-color);
  background: color-mix(in srgb, var(--success-color) 3%, var(--card-bg));
}

/* Avatar */
#tabCalendar .payment-notif-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  position: relative;
}

/* Status dot */
#tabCalendar .payment-notif-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
}

#tabCalendar .payment-notif-card.overdue .payment-notif-status-dot {
  background: var(--danger-color);
}

#tabCalendar .payment-notif-card.pending .payment-notif-status-dot {
  background: var(--warning-color);
}

#tabCalendar .payment-notif-card.paid .payment-notif-status-dot,
#tabCalendar .payment-notif-card.income .payment-notif-status-dot {
  background: var(--success-color);
}

/* Info block */
#tabCalendar .payment-notif-info {
  flex: 1;
  min-width: 0;
}

#tabCalendar .payment-notif-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

#tabCalendar .payment-notif-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

#tabCalendar .payment-notif-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

#tabCalendar .payment-notif-badge.overdue {
  background: color-mix(in srgb, var(--danger-color) 15%, transparent);
  color: var(--danger-color);
}

#tabCalendar .payment-notif-badge.pending {
  background: color-mix(in srgb, var(--warning-color) 15%, transparent);
  color: var(--warning-color);
}

#tabCalendar .payment-notif-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

#tabCalendar .payment-notif-date {
  font-weight: 500;
}

#tabCalendar .payment-notif-amount {
  font-weight: 700;
  color: var(--text-primary);
}

/* SMS Button */
#tabCalendar .payment-notif-card .btn-danger {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s;
}

#tabCalendar .payment-notif-card .btn-danger:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--danger-color) 30%, transparent);
}

#tabCalendar .payment-notif-card .btn-danger svg {
  width: 14px;
  height: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  #tabCalendar .payment-notif-card {
    padding: 12px 14px;
    gap: 10px;
  }

  #tabCalendar .payment-notif-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 14px;
  }

  #tabCalendar .payment-notif-name {
    font-size: 13px;
  }

  #tabCalendar .payment-notif-meta {
    font-size: 11px;
    gap: 8px;
  }

  #tabCalendar .payment-notif-card .btn-danger {
    font-size: 11px;
    padding: 7px 10px;
  }
}

@media (max-width: 640px) {
  #tabCalendar .payment-notif-card {
    padding: 10px 12px;
    gap: 10px;
  }

  #tabCalendar .payment-notif-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 13px;
  }

  #tabCalendar .payment-notif-status-dot {
    width: 8px;
    height: 8px;
  }

  #tabCalendar .payment-notif-name {
    font-size: 13px;
  }

  #tabCalendar .payment-notif-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  #tabCalendar .payment-notif-meta {
    font-size: 11px;
    gap: 8px;
  }

  #tabCalendar .payment-notif-amount {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  #tabCalendar .payment-notif-card {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  #tabCalendar .payment-notif-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 14px;
  }

  #tabCalendar .payment-notif-info {
    flex: 1;
    min-width: calc(100% - 60px);
  }

  #tabCalendar .payment-notif-title-row {
    margin-bottom: 4px;
  }

  #tabCalendar .payment-notif-name {
    font-size: 13px;
  }

  #tabCalendar .payment-notif-meta {
    font-size: 11px;
    gap: 8px;
  }

  #tabCalendar .payment-notif-card .btn-danger {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  #tabCalendar .payment-notif-card {
    padding: 8px 10px;
    gap: 6px;
  }

  #tabCalendar .payment-notif-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 12px;
  }

  #tabCalendar .payment-notif-name {
    font-size: 12px;
  }

  #tabCalendar .payment-notif-meta {
    font-size: 10px;
    gap: 6px;
  }

  #tabCalendar .payment-notif-amount {
    font-size: 11px;
  }

  #tabCalendar .payment-notif-badge {
    font-size: 9px;
    padding: 2px 5px;
  }

  #tabCalendar .payment-notif-card .btn-danger {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* Landscape */
@media (max-height: 500px) and (orientation: landscape) {
  #tabCalendar .payment-notif-card {
    padding: 8px 12px;
    gap: 10px;
  }

  #tabCalendar .payment-notif-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 12px;
  }

  #tabCalendar .payment-notif-name {
    font-size: 12px;
  }

  #tabCalendar .payment-notif-meta {
    font-size: 10px;
    gap: 6px;
  }
}

/* ── Bildirim Bölümleri (Modern) ─────────────────────────────── */
#tabCalendar .notifications-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#tabCalendar .notifications-section.overdue {
  border-top: 3px solid var(--danger-color);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--danger-color) 4%, transparent) 0%,
      transparent 70%);
}

#tabCalendar .notifications-section.upcoming {
  border-top: 3px solid var(--warning-color);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--warning-color) 4%, transparent) 0%,
      transparent 70%);
}

#tabCalendar .notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

#tabCalendar .notifications-header h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

#tabCalendar .notifications-header h4 svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

#tabCalendar .notifications-section.overdue .notifications-header h4 svg {
  color: var(--danger-color);
}

#tabCalendar .notifications-section.upcoming .notifications-header h4 svg {
  color: var(--warning-color);
}

#tabCalendar .notifications-count {
  display: inline-flex;
  align-items: center;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  min-width: 24px;
  justify-content: center;
}

#tabCalendar .notifications-section.overdue .notifications-count {
  background: var(--danger-color);
  color: #fff;
}

#tabCalendar .notifications-section.upcoming .notifications-count {
  background: var(--warning-color);
  color: #fff;
}

#tabCalendar .notifications-header .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#tabCalendar .notifications-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--text-tertiary);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
}

#tabCalendar .notifications-empty svg {
  color: var(--text-tertiary);
  opacity: 0.6;
}

#tabCalendar .notifications-empty .empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

#tabCalendar .notifications-empty .empty-desc {
  font-size: 12px;
  line-height: 1.5;
  max-width: 360px;
}

#tabCalendar .notifications-section.overdue .notifications-empty svg {
  color: var(--success-color);
  opacity: 0.75;
}

/* ≤768 — bildirim header dikey */
@media (max-width: 768px) {
  #tabCalendar .notifications-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #tabCalendar .notifications-header h4 {
    justify-content: center;
  }

  #tabCalendar .notifications-header .btn {
    width: 100%;
    justify-content: center;
  }

  #tabCalendar .notifications-section {
    padding: 14px;
  }

  #tabCalendar .notifications-empty {
    padding: 24px 12px;
  }
}

.print-only {
  display: none;
}

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

  .print-calendar-header {
    text-align: center;
    margin-bottom: 24px;
  }

  .print-calendar-header h1 {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .print-calendar-header h2 {
    font-size: 16px;
    color: #666;
  }

  .print-calendar-summary {
    display: flex;
    justify-content: space-around;
    margin-bottom: 24px;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 8px;
  }

  .print-stat {
    text-align: center;
  }

  .print-stat .label {
    display: block;
    font-size: 12px;
    color: #666;
  }

  .print-stat .value {
    font-size: 18px;
    font-weight: 700;
  }

  .print-stat .value.success {
    color: #2e7d32;
  }

  .print-stat .value.warning {
    color: #f57c00;
  }

  .print-stat .value.danger {
    color: #c62828;
  }

  .print-installments-list table {
    width: 100%;
    border-collapse: collapse;
  }

  .print-installments-list th,
  .print-installments-list td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    font-size: 12px;
  }

  .print-installments-list th {
    background: #f5f5f5;
    font-weight: 600;
  }

  .print-installments-list tr.paid td {
    background: #e8f5e9;
  }

  .print-installments-list tr.overdue td {
    background: #ffebee;
  }

  .print-installments-list tr.pending td {
    background: #fff3e0;
  }
}

/* Analytics View */
.leads-analytics-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.analytics-filters {
  display: flex;
  gap: 12px;
  background: var(--card-bg);
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.analytics-filters select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 14px;
}

.analytics-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.analytics-charts .chart-container {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
}

/* Funnel Chart */
.funnel-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.funnel-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.funnel-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  background: var(--bg-secondary);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.funnel-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
  min-width: 30px;
}

.funnel-count {
  position: absolute;
  right: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Source Chart */
.source-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.source-item:last-child {
  border-bottom: none;
}

.source-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.source-label {
  flex: 1;
  font-size: 13px;
}

.source-count {
  font-weight: 600;
  font-size: 13px;
}

/* Slide Panel */
.slide-panel {
  position: fixed;
  top: 0;
  right: -500px;
  width: 500px;
  height: 100vh;
  background: var(--card-bg);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  border-radius: 14px 0 0 14px;
}

.slide-panel.open {
  right: 0;
}

.slide-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 2px solid var(--border-color);
  background: var(--bg-secondary);
}

.slide-panel-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.slide-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--background);
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.slide-panel-content::-webkit-scrollbar {
  width: 6px;
}

.slide-panel-content::-webkit-scrollbar-track {
  background: transparent;
}

.slide-panel-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

/* Lead Detail Styles */
.lead-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  background: var(--card-bg);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.lead-detail-name {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.lead-detail-meta {
  color: var(--text-secondary);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.lead-detail-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.lead-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  background: var(--card-bg);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.lead-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-secondary);
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: border-color 0.18s ease;
}

.lead-info-item:hover {
  border-color: var(--border-color);
}

.lead-info-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.lead-info-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 600;
  word-break: break-word;
}

.lead-notes-section {
  background: var(--bg-secondary);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.lead-notes-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.lead-notes-section p {
  margin: 0;
  line-height: 1.6;
}

.lead-followup-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.lead-followup-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.lead-followup-section h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Follow-up Timeline */
.followup-timeline {
  position: relative;
  padding-left: 28px;
}

.followup-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border-strong-color, var(--border-color));
  border-radius: 2px;
}

.followup-item {
  position: relative;
  padding-bottom: 20px;
}

.followup-item:last-child {
  padding-bottom: 0;
}

.followup-item::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid;
  box-shadow: 0 0 0 4px var(--card-bg);
  z-index: 1;
}

.followup-item.aranan::before {
  border-color: #3498db;
  background: #3498db;
}

.followup-item.arayan::before {
  border-color: #27ae60;
  background: #27ae60;
}

.followup-item.sms::before {
  border-color: #9b59b6;
  background: #9b59b6;
}

.followup-item.mail::before {
  border-color: #f39c12;
  background: #f39c12;
}

.followup-item.yuzyuze::before {
  border-color: #00bcd4;
  background: #00bcd4;
}

.followup-item.not::before {
  border-color: #7f8c8d;
  background: #7f8c8d;
}

.followup-date {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.followup-content {
  background: var(--bg-secondary);
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.followup-note {
  margin-bottom: 8px;
  line-height: 1.5;
}

.followup-outcome {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

/* Grade Badge */
.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  letter-spacing: -0.3px;
}

/* Bulk Actions Bar */
.leads-bulk-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--text-primary);
  color: white;
  border-radius: 8px;
}

.leads-bulk-actions .selected-count {
  font-size: 14px;
  font-weight: 500;
}

/* Dropdown Menu */
.dropdown {
  position: relative;
  display: inline-flex;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.dropdown-toggle .dropdown-arrow {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: var(--text-tertiary);
}

.dropdown.open .dropdown-toggle .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  z-index: 1000;
  display: none;
  padding: 6px 0;
  overflow: hidden;
}

.dropdown-menu.open {
  display: block;
  animation: dropdownIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-menu a,
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition:
    background 0.12s ease,
    color 0.12s ease;
  cursor: pointer;
  border-radius: 6px;
  margin: 2px 6px;
  width: calc(100% - 12px);
}

.dropdown-menu a:hover,
.dropdown-item:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}

.dropdown-menu a:active,
.dropdown-item:active {
  background: var(--accent-light);
  color: var(--accent-hover);
}

.dropdown-menu hr {
  margin: 6px 0;
  border: none;
  border-top: 1px solid var(--border-color);
}

.dropdown-menu a.danger,
.dropdown-item.danger {
  color: var(--danger-color);
}

.dropdown-menu a.danger:hover,
.dropdown-item.danger:hover {
  background: var(--danger-bg);
  color: var(--danger-color);
}

/* Lead Form Modal */
.lead-form-modal {
  max-width: 800px !important;
}

.lead-form-modal .modal-body {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.lead-form-modal .form-section {
  background: var(--bg-secondary);
  padding: 20px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
}

.lead-form-modal .form-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.modal-title-icon,
.lead-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex: 0 0 auto;
}

.modal-header h2 .modal-title-icon {
  margin-right: 8px;
}

.lead-section-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.lead-row {
  position: relative;
}

.lead-more-menu {
  position: absolute;
  right: 12px;
  top: calc(100% - 4px);
  display: none;
  min-width: 180px;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}

.lead-more-menu.open {
  display: grid;
  gap: 2px;
}

.lead-more-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.lead-more-menu hr {
  width: 100%;
  margin: 4px 0;
  border: 0;
  border-top: 1px solid var(--border-color);
}

.lead-form-modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.lead-form-modal .form-group {
  margin-bottom: 0;
}

.lead-form-modal .form-group:last-child {
  margin-bottom: 0;
}

/* ── Responsive: Leads Section ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  .leads-dashboard-widgets {
    gap: 12px;
    padding: 12px 16px;
  }
}

@media (max-width: 992px) {
  .leads-dashboard-widgets {
    gap: 10px;
    padding: 12px;
  }

  .leads-dashboard-widgets .stat-card {
    min-width: 140px;
    padding: 12px;
  }

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

  .leads-section-header>div:first-child {
    justify-content: space-between;
  }

  .leads-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .leads-dashboard-widgets {
    gap: 8px;
    padding: 10px;
  }

  .leads-dashboard-widgets .stat-card {
    min-width: 120px;
    padding: 10px;
  }

  .leads-dashboard-widgets .stat-card .stat-value {
    font-size: 20px;
  }

  .leads-dashboard-widgets .stat-card .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .leads-view-buttons {
    flex-wrap: wrap;
    gap: 6px;
  }

  .leads-view-buttons .btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .leads-header-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .search-box,
  .search-box input {
    width: 100%;
  }

  .leads-view {
    padding: 12px;
  }

  .leads-table th,
  .leads-table td {
    padding: 8px 10px;
    font-size: 12px;
  }

  .leads-table th.checkbox-col,
  .leads-table td.checkbox-col {
    width: 30px;
    padding: 4px;
  }

  .leads-table th.actions-col,
  .leads-table td.actions-col {
    width: 100px;
  }

  .kanban-column {
    min-width: 240px;
    max-width: 240px;
  }

  .slide-panel {
    width: 100%;
    right: -100%;
  }

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

  .dashboard-charts-row,
  .analytics-charts {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .leads-views {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .section-header {
    padding: 12px 16px;
  }

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

  .section-header .btn-group {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .leads-dashboard-widgets {
    gap: 8px;
    padding: 10px;
  }

  .leads-dashboard-widgets .stat-card {
    min-width: 100px;
    padding: 8px;
  }

  .leads-dashboard-widgets .stat-card .stat-value {
    font-size: 18px;
  }

  .leads-section-header {
    padding: 12px 16px;
  }

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

  .leads-header-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .leads-view-buttons {
    justify-content: center;
  }

  .search-box,
  .search-box input {
    width: 100%;
  }

  .kanban-column {
    min-width: 200px;
    max-width: 200px;
  }

  .leads-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .section-header>div:last-child {
    width: 100%;
    justify-content: center;
  }
}

/* ── Dark Mode: Leads Section ───────────────────────────────────────────── */
[data-theme='dark'] {
  .leads-dashboard-widgets {
    background: var(--secondary-bg);
    border-bottom-color: var(--border-color);
  }

  .leads-dashboard-widgets .stat-card {
    background: var(--secondary-bg);
    border-color: var(--border-color);
  }

  .leads-dashboard-widgets .stat-card .stat-icon {
    background: var(--sc-bg-dark, rgba(92, 124, 186, 0.15));
  }

  .chart-container,
  .leads-list-container {
    background: var(--secondary-bg);
    border-color: var(--border-color);
  }

  .chart-container h4 {
    color: var(--text-primary);
  }

  .leads-table th {
    background: var(--secondary-bg);
    color: var(--text-secondary);
  }

  .leads-table td {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
  }

  .leads-table tbody tr:hover {
    background: var(--hover-bg);
  }

  .kanban-column {
    background: var(--secondary-bg);
  }

  .kanban-card {
    background: var(--card-bg);
    border-color: var(--border-color);
  }

  .lead-name {
    color: var(--text-primary);
  }

  .lead-phone-cell,
  .lead-phone {
    color: var(--text-primary);
  }

  .lead-phone {
    color: var(--text-secondary);
  }

  .source-tag,
  .score-bar {
    background: var(--secondary-bg);
    color: var(--text-secondary);
  }

  .btn-group,
  .search-box {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
  }

  .btn-group .btn {
    color: var(--text-primary);
  }

  .btn-group .btn:hover {
    background: var(--hover-bg);
  }

  .btn-group .btn.active {
    background: var(--card-bg);
    color: var(--text-primary);
  }

  .search-box input {
    color: var(--text-primary);
    background: transparent;
  }

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

  .calendar-header,
  .calendar-grid,
  .calendar-day {
    background: var(--secondary-bg);
    border-color: var(--border-color);
  }

  .calendar-day.empty {
    background: var(--hover-bg);
  }

  .day-followup-item {
    background: var(--hover-bg);
  }

  .dropdown-menu,
  .lead-more-menu {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
  }

  .dropdown-menu a,
  .lead-more-menu button {
    color: var(--text-primary);
  }

  .dropdown-menu a:hover,
  .lead-more-menu button:hover {
    background: var(--hover-bg);
  }

  .modal-content {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
  }

  .leads-view-buttons {
    background: var(--secondary-bg);
    border-color: var(--border-color);
  }

  .leads-view-buttons .btn {
    color: var(--text-secondary);
  }

  .leads-view-buttons .btn:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
  }

  .leads-view-buttons .btn.active {
    background: var(--primary-color);
    color: white;
  }

  .kanban-card-name {
    color: var(--text-primary);
  }

  .kanban-card-phone {
    color: var(--text-secondary);
  }

  .analytics-filters {
    background: var(--secondary-bg);
    border-color: var(--border-color);
  }

  .analytics-filters select {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
  }

  .leads-pagination {
    background: var(--secondary-bg);
    border-color: var(--border-color);
  }

  .pagination-info,
  .calendar-month-label {
    color: var(--text-secondary);
  }

  .calendar-header .btn {
    background: var(--secondary-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
  }

  .calendar-header .btn:hover {
    background: var(--hover-bg);
  }
}

/* ─── Kazanım Dropdown ─────────────────────────────────────────────── */
.kazanım-dropdown {
  position: relative;
  font-family: inherit;
}

.kazanım-dropdown.multi-select .kazanım-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--radius-md);
  min-height: var(--input-height);
  align-items: center;
  transition: var(--transition);
}

.kazanım-dropdown.multi-select .kazanım-input-wrapper:hover {
  border-color: var(--input-border-hover);
  background: var(--input-bg-hover);
}

.kazanım-dropdown.multi-select .kazanım-input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: var(--input-shadow-focus);
}

.kazanım-dropdown:not(.multi-select) .kazanım-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.kazanım-dropdown:not(.multi-select) .kazanım-input-wrapper:hover {
  border-color: var(--input-border-hover);
}

.kazanım-dropdown:not(.multi-select) .kazanım-input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: var(--input-shadow-focus);
}

.kazanım-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kazanım-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: var(--transition);
}

.kazanım-tag:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.kazanım-tag .tag-remove {
  background: none;
  border: none;
  padding: 0 0 0 2px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.kazanım-tag .tag-remove:hover {
  opacity: 1;
}

.kazanım-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 4px;
  font-size: 14px;
  color: var(--input-text);
  outline: none;
  min-width: 120px;
}

.kazanım-input::placeholder {
  color: var(--input-placeholder);
}

.kazanım-input-wrapper {
  position: relative;
}

.dropdown-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-secondary);
  transition:
    transform 0.2s,
    color 0.15s;
}

.dropdown-toggle:hover {
  color: var(--accent);
}

.kazanım-dropdown.open .dropdown-toggle {
  transform: translateY(-50%) rotate(180deg);
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.kazanım-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-height: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: dropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-search-area {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--secondary-bg);
}

.dropdown-search-input {
  width: 100%;
  padding: 10px 14px;
  border: var(--input-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text-primary);
  outline: none;
  transition: var(--transition);
}

.dropdown-search-input:focus {
  border-color: var(--accent);
  box-shadow: var(--input-shadow-focus);
}

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

.dropdown-options {
  overflow-y: auto;
  flex: 1;
  padding: 6px;
}

.dropdown-options::-webkit-scrollbar {
  width: 6px;
}

.dropdown-options::-webkit-scrollbar-track {
  background: transparent;
}

.dropdown-options::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.dropdown-options::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

.option-group {
  margin-bottom: 4px;
}

.group-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  background: transparent;
  position: sticky;
  top: 0;
  margin-bottom: 4px;
}

.dropdown-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition:
    background 0.15s,
    color 0.15s;
}

.dropdown-option:hover {
  background: var(--hover-bg);
}

.dropdown-option.selected {
  background: var(--accent-light);
  color: var(--accent);
}

.dropdown-option.selected:hover {
  background: var(--accent);
  color: white;
}

.dropdown-option.hidden {
  display: none;
}

.option-checkbox {
  font-size: 16px;
  width: 20px;
  text-align: center;
  transition: transform 0.15s;
}

.dropdown-option.selected .option-checkbox {
  transform: scale(1.1);
}

.option-label {
  flex: 1;
  font-size: 14px;
}

.no-options {
  padding: 24px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
}

/* ─── Kazanım Selector ──────────────────────────────────────────────── */
.kazanım-selector {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

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

.selector-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.selector-actions {
  display: flex;
  gap: 8px;
}

.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.btn-sm:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.ai-icon {
  margin-right: 4px;
}

.selector-grid {
  display: grid;
  gap: 16px;
}

.subject-section {
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid transparent;
  transition: var(--transition);
}

.subject-section:hover {
  border-color: var(--border-color);
}

.subject-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.subject-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.selected-count {
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--card-bg);
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
  border: 1px solid var(--border-color);
}

/* ─── Question Mapping Grid ───────────────────────────────────────── */
.question-mapping-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.question-mapping-grid .exam-subject {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.question-mapping-grid .exam-subject>h4 {
  padding: 14px 16px;
  margin: 0;
  background: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question-mapping-grid .exam-subject>h4 .subject-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-light);
  padding: 2px 8px;
  border-radius: 10px;
}

.question-mapping-grid .subject-questions {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
}

.question-mapping-grid .question-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.question-mapping-grid .question-row:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.question-mapping-grid .question-row.filled {
  background: var(--accent-light);
  border-color: var(--accent);
}

.question-mapping-grid .question-row.filled .question-label {
  color: var(--accent);
}

.question-mapping-grid .question-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary-bg);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.question-mapping-grid .question-row.filled .question-number {
  background: var(--accent);
  color: white;
}

.question-mapping-grid .question-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex-shrink: 0;
}

.question-mapping-grid .kazanim-select-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

.question-mapping-grid .kazanim-select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  appearance: none;
  transition: var(--transition);
}

.question-mapping-grid .kazanim-select:hover {
  border-color: var(--accent);
}

.question-mapping-grid .kazanim-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--input-shadow-focus);
}

.question-mapping-grid .kazanim-select:has(option[value='']:not([value=''])) {
  color: var(--text-tertiary);
}

.question-mapping-grid .kazanim-select-wrapper::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-tertiary);
  pointer-events: none;
}

.question-mapping-grid .kazanim-select option {
  padding: 8px;
  background: var(--card-bg);
  color: var(--text-primary);
}

/* ─── Export Buttons ───────────────────────────────────────────────── */
.export-buttons {
  display: flex;
  gap: 8px;
}

.export-buttons .btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── Kitapçık Panel Grid ─────────────────────────────────────────── */
.ab-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ab-panels .kitapcik-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ab-panels .kitapcik-panel .panel-header {
  padding: 14px 16px;
  background: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
}

.ab-panels .kitapcik-panel .panel-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.ab-panels .kitapcik-panel .panel-content {
  padding: 12px;
}

/* Scrollbar for question grids */
.question-mapping-grid .subject-questions::-webkit-scrollbar,
.ab-panels .panel-content::-webkit-scrollbar {
  width: 6px;
}

.question-mapping-grid .subject-questions::-webkit-scrollbar-track,
.ab-panels .panel-content::-webkit-scrollbar-track {
  background: transparent;
}

.question-mapping-grid .subject-questions::-webkit-scrollbar-thumb,
.ab-panels .panel-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

/* ─── Kitapçık Tabs ────────────────────────────────────────────────── */
.kitapcik-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--secondary-bg);
  padding: 4px;
  border-radius: var(--radius-md);
}

.kitapcik-tab {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.kitapcik-tab:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

.kitapcik-tab.active {
  background: var(--card-bg);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* ─── A+B Kitapçık Panelleri ─────────────────────────────────────── */
.file-upload-area {
  position: relative;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  transition: var(--transition);
  cursor: pointer;
  overflow: hidden;
}

.file-upload-area:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.file-upload-area.dragover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: scale(1.02);
}

.file-upload-area.has-file {
  border-style: solid;
  border-color: var(--success-color);
  background: var(--success-bg);
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-secondary);
}

.upload-placeholder svg {
  margin-bottom: 8px;
  opacity: 0.6;
}

.upload-placeholder span {
  font-size: 14px;
  font-weight: 500;
}

.upload-placeholder small {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.upload-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--card-bg);
}

.upload-preview svg {
  color: var(--accent);
  flex-shrink: 0;
}

.upload-preview .file-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-preview .remove-file {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: var(--transition);
}

.upload-preview .remove-file:hover {
  color: var(--danger-color);
  background: var(--danger-bg);
}

/* ─── OMR Scanner ───────────────────────────────────────────────────── */
.omr-uploader {
  padding: 20px;
}

.upload-area {
  text-align: center;
  padding: 40px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--secondary-bg);
  transition: all 0.2s;
}

.upload-area:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.upload-area h4 {
  margin: 0 0 8px;
  color: var(--text-primary);
}

.upload-area p {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 13px;
}

.camera-video-wrapper {
  position: relative;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: 400px;
}

.camera-video-wrapper video {
  width: 100%;
  display: block;
}

.camera-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scan-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 60%;
}

.guide-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--accent);
  border-style: solid;
}

.guide-corner.top-left {
  top: 0;
  left: 0;
  border-width: 3px 0 0 3px;
}

.guide-corner.top-right {
  top: 0;
  right: 0;
  border-width: 3px 3px 0 0;
}

.guide-corner.bottom-left {
  bottom: 0;
  left: 0;
  border-width: 0 0 3px 3px;
}

.guide-corner.bottom-right {
  bottom: 0;
  right: 0;
  border-width: 0 3px 3px 0;
}

.camera-controls {
  display: flex;
  gap: 12px;
  padding: 16px;
  justify-content: center;
}

.omr-preview {
  margin-top: 20px;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.preview-header h4 {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
}

.detected-count {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}

.preview-canvas-wrapper {
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
  padding: 12px;
  overflow-x: auto;
}

.detected-answers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 12px;
}

.detected-answers-table th,
.detected-answers-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.detected-answers-table th {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  background: var(--secondary-bg);
}

.answer-cell {
  font-weight: 600;
}

.answer-cell.has-answer {
  color: var(--success-color);
}

.answer-cell.no-answer {
  color: var(--text-tertiary);
}

.answer-correct {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

.answer-correct:focus {
  outline: none;
  border-color: var(--accent);
}

/* ─── Exam Type Selector ────────────────────────────────────────────── */
.exam-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.exam-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--card-bg);
  text-align: center;
}

.exam-type-card:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.exam-type-card.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.exam-type-card .exam-icon {
  font-size: 28px;
  margin-bottom: 8px;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.exam-type-card.selected .exam-icon,
.exam-type-card:hover .exam-icon {
  color: var(--accent);
}

.exam-type-card .exam-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.exam-type-card .exam-fullname {
  font-size: 10px;
  color: var(--text-secondary);
}

.exam-type-card .exam-info {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* ─── Kitapçık Selector ────────────────────────────────────────────── */
.kitapcik-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kitapcik-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--card-bg);
}

.kitapcik-option:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.kitapcik-option.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.kitapcik-icon {
  font-size: 24px;
}

.kitapcik-info {
  display: flex;
  flex-direction: column;
}

.kitapcik-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.kitapcik-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ─── AI Fill Button ────────────────────────────────────────────────── */
.btn-ai-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--accent), #7c9ce0);
  color: white;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ai-fill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent);
}

.btn-ai-fill:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-ai-fill .ai-icon {
  font-size: 18px;
}

.btn-ai-fill .btn-text {
  font-size: 14px;
}

.btn-ai-fill .btn-loading {
  font-size: 14px;
}

.btn-ai-fill.loading .btn-text,
.btn-ai-fill.loading .ai-icon {
  display: none;
}

.btn-ai-fill.loading .btn-loading {
  display: inline !important;
}

/* ─── Kazanım Kontrol Butonları ─────────────────────────────────────── */
#selectAllKazanimBtn,
#clearAllKazanimBtn {
  font-size: 12px;
  padding: 6px 12px;
}

/* ─── Optik Result Modal ────────────────────────────────────────────── */
.optik-setup-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.optik-setup-row .form-group {
  margin-bottom: 0;
}

#optikResultContainer {
  min-height: 400px;
}

/* ─── Optik Panel Styles ────────────────────────────────────────────── */
.optik-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.optik-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
}

.optik-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.optik-tab:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

.optik-tab.active {
  background: var(--card-bg);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.optik-tab .tab-icon {
  font-size: 16px;
}

.optik-tab .tab-badge {
  background: var(--accent);
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.optik-content {
  flex: 1;
  overflow-y: auto;
}

.optik-tab-content {
  display: none;
  padding: 20px;
}

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

.upload-section {
  max-width: 600px;
}

.upload-section h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.upload-section .upload-desc {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 16px;
}

.format-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.format-selector label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.format-selector select {
  padding: 8px 36px 8px 12px;
  border: var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a534c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  color: var(--input-text);
  font-size: 13px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.parse-result {
  margin-top: 20px;
  padding: 16px;
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
}

.parse-result h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
}

.result-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.result-stats span {
  font-size: 13px;
  color: var(--text-secondary);
}

.result-errors {
  font-size: 12px;
}

.error-item {
  color: var(--danger-color);
  padding: 4px 0;
}

.warning-item {
  color: var(--warning-color);
  padding: 4px 0;
}

.excel-format-info {
  margin-bottom: 16px;
}

.info-box {
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
  padding: 16px;
}

.info-box h5 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
}

.format-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.format-table th,
.format-table td {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  text-align: left;
}

.format-table th {
  background: var(--card-bg);
  font-weight: 600;
}

.answer-key-section h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.answer-key-desc {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 20px;
}

.answer-key-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-key {
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
  padding: 16px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.section-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.section-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.section-range {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: auto;
}

.section-answers {
  width: 100%;
  padding: 12px;
  border: var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 14px;
  font-family: monospace;
  letter-spacing: 1px;
}

.section-answers:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--input-shadow-focus);
}

.section-preview {
  margin-top: 8px;
  font-size: 12px;
}

.preview-incomplete {
  color: var(--warning-color);
}

.preview-complete {
  color: var(--success-color);
}

.preview-error {
  color: var(--danger-color);
}

.answer-key-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.key-import-export {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.key-import-export h5 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
}

.key-actions {
  display: flex;
  gap: 8px;
}

.preview-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.preview-stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.preview-table-container {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.preview-table th {
  background: var(--secondary-bg);
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.preview-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.preview-table tr:last-child td {
  border-bottom: none;
}

.preview-table .empty-row td {
  text-align: center;
  color: var(--text-tertiary);
  padding: 40px;
}

.preview-table .text-success {
  color: var(--success-color);
}

.preview-table .text-danger {
  color: var(--danger-color);
}

.preview-table .text-warning {
  color: var(--warning-color);
}

.preview-table .text-primary {
  color: var(--accent);
}

.preview-table .fw-bold {
  font-weight: 600;
}

.preview-actions {
  display: flex;
  gap: 12px;
  padding-top: 12px;
}

/* Kitapcik Key Tabs */
.kitapcik-key-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.kitapcik-key-tab {
  padding: 10px 20px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.kitapcik-key-tab:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.kitapcik-key-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.kitapcik-key-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.kitapcik-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
}

.kitapcik-badge.kitapcik-a {
  background: var(--accent);
  color: white;
}

.kitapcik-badge.kitapcik-b {
  background: var(--success-color);
  color: white;
}

/* Key Import Section */
.key-import-section {
  margin-top: 24px;
  padding: 20px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.key-import-section h5 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
}

.key-format-info {
  margin-bottom: 16px;
}

.format-example {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.format-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.format-tab {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.format-tab:hover {
  background: var(--hover-bg);
}

.format-tab.active {
  background: var(--accent);
  color: white;
}

.format-content {
  padding: 16px;
}

.format-preview {
  margin: 0;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  line-height: 1.6;
}

.key-load-options {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.key-load-options select {
  padding: 8px 12px;
  border: var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 13px;
  cursor: pointer;
}

/* Optik Panel Responsive */
@media (max-width: 768px) {
  .optik-tabs {
    flex-wrap: wrap;
  }

  .optik-tab {
    flex: 1 1 45%;
  }

  .optik-tab .tab-label {
    display: none;
  }

  .optik-tab-content {
    padding: 16px;
  }

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

  .preview-stats {
    flex-wrap: wrap;
  }

  .answer-key-actions,
  .preview-actions {
    flex-direction: column;
  }

  .tab-guidance {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .tab-actions {
    flex-direction: column;
  }

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

  .kitapcik-key-tabs {
    flex-direction: column;
  }

  .key-load-options {
    flex-direction: column;
  }
}

/* Optik Panel Responsive */
@media (max-width: 768px) {
  .optik-tabs {
    flex-wrap: wrap;
  }

  .optik-tab {
    flex: 1 1 45%;
  }

  .optik-tab .tab-label {
    display: none;
  }

  .optik-tab-content {
    padding: 16px;
  }

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

  .preview-stats {
    flex-wrap: wrap;
  }

  .answer-key-actions,
  .preview-actions {
    flex-direction: column;
  }
}

/* Optik Wizard Header */
.optik-wizard-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  gap: 4px;
}

.optik-wizard-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  transition: all 0.25s ease;
  opacity: 0.5;
}

.optik-wizard-step.active {
  opacity: 1;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.optik-wizard-step.completed {
  opacity: 0.7;
}

.optik-wizard-step .step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.optik-wizard-step.active .step-number {
  background: var(--accent);
  color: white;
}

.optik-wizard-step.completed .step-number {
  background: var(--success-color);
  color: white;
}

.optik-wizard-step .step-info {
  display: flex;
  flex-direction: column;
}

.optik-wizard-step .step-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.optik-wizard-step .step-desc {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Aktif step: scale + yumuÅŸak pulse animasyonu */
.optik-wizard-step.active {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  transform: scale(1.02);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 12%, transparent);
  animation: wizard-step-active-pulse 2.4s ease-in-out infinite;
}

@keyframes wizard-step-active-pulse {

  0%,
  100% {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  50% {
    box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 22%, transparent);
  }
}

/* Tamamlanan step'lerde sayıya check ikonu yerine gradient */
.optik-wizard-step.completed .step-number::before {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: white;
}

.optik-wizard-step.completed .step-number {
  font-size: 0;
  /* Orijinal "2" rakamını gizle */
  position: relative;
}

.wizard-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  opacity: 0.4;
  flex-shrink: 0;
  margin: 0 2px;
}

.wizard-arrow svg {
  width: 14px;
  height: 14px;
}

/* Tab Guidance */
.tab-guidance {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.tab-guidance .guidance-icon {
  font-size: 28px;
  line-height: 1;
}

.tab-guidance .guidance-text {
  flex: 1;
}

.tab-guidance .guidance-text h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.tab-guidance .guidance-text p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Tab Actions (navigation buttons) */
.tab-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.tab-actions .btn-secondary {
  display: none;
}

/* Format hint */
.format-hint {
  font-size: 11px;
  color: var(--text-secondary);
  margin-left: 8px;
}

/* Excel format info box */
.excel-format-info {
  margin-bottom: 20px;
}

.excel-format-info .info-box {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
}

.excel-format-info .info-box h5 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.excel-format-info .info-box p {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.format-note {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Optik Panel Responsive */
@media (max-width: 768px) {
  .optik-wizard-header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }

  .optik-wizard-step {
    padding: 6px 12px;
  }

  .optik-wizard-step .step-info {
    display: none;
  }

  .wizard-arrow {
    display: none;
  }

  .optik-tabs {
    flex-wrap: wrap;
  }

  .optik-tab {
    flex: 1 1 45%;
  }

  .optik-tab .tab-label {
    display: none;
  }

  .optik-tab-content {
    padding: 16px;
  }

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

  .preview-stats {
    flex-wrap: wrap;
  }

  .answer-key-actions,
  .preview-actions {
    flex-direction: column;
  }

  .tab-guidance {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .tab-actions {
    flex-direction: column;
  }

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

/* Optik Form Template Styles - Modern Theme */
.optic-template-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
  padding: 16px 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.optic-template-toolbar .search-box {
  flex: 1;
  max-width: 360px;
  position: relative;
  display: flex;
  align-items: center;
}

.optic-template-toolbar .search-box svg {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  transition: color 0.2s;
}

.optic-template-toolbar .search-box input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text-primary);
  transition: all 0.2s;
}

.optic-template-toolbar .search-box input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  background: var(--card-bg);
}

.optic-template-toolbar .search-box input:focus+svg,
.optic-template-toolbar .search-box input:focus~svg {
  color: var(--primary-color);
}

.optic-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  min-height: 200px;
}

.optic-template-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.optic-template-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--primary-hover));
  opacity: 0;
  transition: opacity 0.25s;
}

.optic-template-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

.optic-template-card:hover::before {
  opacity: 1;
}

.optic-template-card.selected {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(59, 130, 246, 0.08));
  box-shadow: 0 0 0 2px var(--primary-color), 0 4px 16px rgba(59, 130, 246, 0.15);
}

.optic-template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.optic-template-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

.optic-template-card h3 svg {
  color: var(--primary-color);
}

.optic-template-card-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.optic-template-card-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.optic-template-card-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--secondary-bg);
  border-radius: 6px;
  transition: all 0.2s;
}

.optic-template-card-meta span:hover {
  background: var(--primary-color);
  color: white;
}

.optic-template-card-meta span svg {
  opacity: 0.7;
}

.optic-template-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.optic-template-card-actions .btn {
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s;
}

.optic-template-card-actions .btn:hover {
  transform: scale(1.02);
}

.optic-template-card-actions .btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
}

.optic-template-card-actions .btn-success:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.optic-template-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 32px;
  color: var(--text-muted);
  background: var(--card-bg);
  border: 2px dashed var(--border-color);
  border-radius: 16px;
}

.optic-template-empty svg {
  margin-bottom: 20px;
  opacity: 0.4;
  color: var(--primary-color);
}

.optic-template-empty h3 {
  font-size: 18px;
  margin: 0 0 8px 0;
  color: var(--text-secondary);
}

.optic-template-empty p {
  font-size: 14px;
  margin: 0;
}

.optic-template-pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  gap: 6px;
}

.optic-template-pagination button {
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  color: var(--text-secondary);
}

.optic-template-pagination button:hover:not(:disabled) {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: rgba(59, 130, 246, 0.05);
}

.optic-template-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.optic-template-pagination button.active {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  border-color: var(--primary-color);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.optic-template-preview {
  background: linear-gradient(135deg, var(--secondary-bg), var(--card-bg));
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
  font-family: monospace;
  font-size: 11px;
  overflow-x: auto;
  border: 1px solid var(--border-color);
}

.optic-template-preview-header {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 500;
}

.optic-template-preview-columns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.optic-template-preview-col {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.optic-template-preview-col.answer {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

/* Optik Template Editor */
.modal-extra-large {
  max-width: 1100px;
  width: 95%;
}

.optic-editor-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 28px;
  min-height: 520px;
}

.optic-editor-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.optic-editor-sidebar .form-group {
  margin-bottom: 0;
}

.optic-editor-sidebar textarea {
  resize: vertical;
  min-height: 70px;
  border-radius: 10px;
}

.optic-column-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
  background: linear-gradient(135deg, var(--secondary-bg), var(--card-bg));
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.optic-column-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: move;
  transition: all 0.2s;
}

.optic-column-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.optic-column-item.dragging {
  opacity: 0.6;
  background: var(--secondary-bg);
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.optic-column-item .column-drag-handle {
  color: var(--text-muted);
  cursor: grab;
  padding: 4px;
}

.optic-column-item .column-info {
  flex: 1;
  min-width: 0;
}

.optic-column-item .column-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.optic-column-item .column-type {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.optic-column-item .column-length {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--secondary-bg);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 500;
}

.optic-column-item .column-actions {
  display: flex;
  gap: 4px;
}

.optic-column-item .column-actions button {
  padding: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}

.optic-column-item .column-actions button:hover {
  background: var(--secondary-bg);
  color: var(--primary-color);
}

.optic-column-item .column-actions button.delete:hover {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger-color, #dc3545);
}

.optic-add-column-section {
  padding: 16px;
  background: linear-gradient(135deg, var(--secondary-bg), var(--card-bg));
  border-radius: 12px;
  border: 2px dashed var(--border-color);
  transition: all 0.2s;
}

.optic-add-column-section:hover {
  border-color: var(--primary-color);
  background: rgba(59, 130, 246, 0.03);
}

.optic-add-column-section label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.optic-add-column-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.optic-add-column-buttons .btn {
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s;
}

.optic-add-column-buttons .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.optic-net-ratio {
  display: flex;
  gap: 16px;
  padding: 14px;
  background: var(--secondary-bg);
  border-radius: 10px;
}

.optic-net-ratio .ratio-input {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.optic-net-ratio .ratio-input input {
  width: 64px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  background: var(--card-bg);
  transition: all 0.2s;
}

.optic-net-ratio .ratio-input input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.optic-editor-preview {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--secondary-bg), var(--card-bg));
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--border-color);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.optic-editor-preview .preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.optic-editor-preview .preview-info {
  font-size: 12px;
  font-weight: normal;
  color: var(--text-muted);
  background: var(--secondary-bg);
  padding: 4px 12px;
  border-radius: 20px;
}

.optic-form-preview {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 20px;
  overflow-x: auto;
  min-height: 220px;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.optic-form-preview .preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  text-align: center;
}

.optic-form-preview .preview-empty svg {
  margin-bottom: 16px;
  opacity: 0.25;
  color: var(--primary-color);
}

.optic-form-preview .preview-empty p {
  font-size: 14px;
  margin: 0;
  font-weight: 500;
}

.preview-optik-row {
  display: flex;
  gap: 3px;
  margin-bottom: 3px;
  font-family: monospace;
  font-size: 10px;
}

.preview-optik-cell {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  text-align: center;
  background: var(--card-bg);
  color: var(--text-secondary);
  min-width: 26px;
  border-radius: 6px;
}

.preview-optik-cell.header {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.preview-optik-cell.header.student {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
}

.preview-optik-cell.header.branch {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.preview-optik-cell.header.booklet {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.preview-optik-cell.header.answer {
  background: linear-gradient(135deg, #10b981, #059669);
}

.preview-optik-cell.header.custom {
  background: linear-gradient(135deg, #6b7280, #4b5563);
}

.preview-optik-label {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
}

.preview-legend {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.preview-legend h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preview-legend .legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preview-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--card-bg);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  transition: all 0.2s;
}

.preview-legend .legend-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.preview-legend .legend-item .legend-color {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.preview-legend .legend-item .legend-color.student {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
}

.preview-legend .legend-item .legend-color.branch {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.preview-legend .legend-item .legend-color.booklet {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.preview-legend .legend-item .legend-color.answer {
  background: linear-gradient(135deg, #10b981, #059669);
}

.preview-legend .legend-item .legend-color.custom {
  background: linear-gradient(135deg, #6b7280, #4b5563);
}

/* Optik Template Editor Responsive */
@media (max-width: 768px) {
  .optic-editor-layout {
    grid-template-columns: 1fr;
  }

  .optic-template-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .optic-template-toolbar .search-box {
    max-width: none;
  }

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

/* Cards Grid - Base */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}

/* Scholarship Exam Cards */
.scholarship-exams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.scholarship-exam-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: var(--transition);
}

.scholarship-exam-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.scholarship-exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.scholarship-exam-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.scholarship-exam-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.scholarship-exam-info .info-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.scholarship-exam-info .info-row span:first-child {
  color: var(--text-secondary);
  min-width: 100px;
}

.scholarship-exam-info .info-row span:last-child {
  color: var(--text-primary);
  font-weight: 500;
}

.scholarship-exam-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Burs Rules System (Modern tabbed) */
.burs-rules-system {
  background: var(--card-bg, var(--secondary-bg));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs, none);
}

.burs-rules-tabs {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: linear-gradient(180deg, var(--secondary-bg) 0%, var(--card-bg) 100%);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: thin;
}

.burs-rules-tab {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}

.burs-rules-tab>span {
  white-space: nowrap;
}

.burs-rules-tab:hover {
  color: var(--text-primary);
  background: var(--surface);
}

.burs-rules-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.burs-rules-tab.is-active {
  background: var(--card-bg);
  border-color: var(--border-color);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.burs-rules-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--accent);
  color: var(--card-bg, #fff);
  line-height: 1;
}

.burs-rules-tab-badge:empty {
  display: none;
}

.burs-rules-panels {
  padding: 16px;
  background: var(--card-bg);
}

.burs-rules-panel {
  display: none;
}

.burs-rules-panel.is-active {
  display: block;
  animation: bursRulesFade 160ms ease;
}

@keyframes bursRulesFade {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

.burs-panel-intro {
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px;
  margin-bottom: 14px;
  line-height: 1.45;
}

.burs-panel-intro strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Preset grid (tab 1) */
.burs-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}

.burs-preset-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px 14px 22px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  overflow: hidden;
  min-width: 0;
}

.burs-preset-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--preset-color, var(--accent));
  border-radius: var(--radius-md, 10px) 0 0 var(--radius-md, 10px);
}

.burs-preset-card-marker {
  display: none;
}

.burs-preset-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(0, 0, 0, 0.06));
  border-color: var(--preset-color, var(--accent));
}

.burs-preset-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.burs-preset-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.burs-preset-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.burs-preset-card-apply {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--preset-color, var(--accent));
}

/* Rules table (tab 2) */
.burs-rules-table-wrap {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  background: var(--card-bg);
}

.burs-tier-list {
  display: flex;
  flex-direction: column;
}

.burs-tier-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.1fr) minmax(90px, 0.9fr) minmax(96px, 0.9fr) minmax(140px, 1.4fr) minmax(44px, 0.5fr);
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  transition: background 120ms ease;
  min-width: 0;
}

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

.burs-tier-row.burs-tier-row-head {
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
}

.burs-tier-row.burs-tier-row-head>span {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.burs-tier-row[data-tier='1'] {
  background: rgba(34, 197, 94, 0.06);
}

.burs-tier-row[data-tier='2'] {
  background: rgba(59, 130, 246, 0.06);
}

.burs-tier-row[data-tier='3'] {
  background: rgba(245, 158, 11, 0.06);
}

.burs-tier-row[data-tier='4'] {
  background: rgba(239, 68, 68, 0.06);
}

.burs-tier-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.burs-tier-mobile-label {
  display: none;
}

.burs-tier-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.burs-tier-range-sep {
  color: var(--text-tertiary);
  font-weight: 600;
  flex: 0 0 auto;
}

.burs-tier-input {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 6px);
  background: var(--input-bg, var(--card-bg));
  color: var(--input-text, var(--text-primary));
  font-size: 13px;
  text-align: center;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.burs-tier-input::placeholder {
  color: var(--text-tertiary);
  opacity: 0.8;
}

.burs-tier-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--input-shadow-focus, 0 0 0 3px rgba(99, 102, 241, 0.18));
}

.burs-tier-input-text {
  text-align: left;
}

.burs-tier-percent-wrap {
  position: relative;
}

.burs-tier-percent-wrap .burs-tier-input {
  padding-right: 26px;
}

.burs-tier-percent-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  pointer-events: none;
}

.burs-tier-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.tier-remove-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm, 6px);
  background: var(--danger-bg, rgba(239, 68, 68, 0.08));
  color: var(--danger-color, #ef4444);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.tier-remove-btn:hover {
  background: var(--danger-color, #ef4444);
  color: #fff;
}

.tier-remove-btn:focus-visible {
  outline: 2px solid var(--danger-color, #ef4444);
  outline-offset: 2px;
}

.burs-tier-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--text-tertiary);
  text-align: center;
}

.burs-tier-list-empty svg {
  opacity: 0.6;
}

.burs-tier-list-empty p {
  margin: 0;
  font-size: 13px;
  max-width: 320px;
  line-height: 1.5;
}

.burs-tier-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid transparent;
}

.burs-tier-add .btn {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Preview (tab 3) */
.burs-preview-content {
  font-size: 12px;
  color: var(--text-secondary);
}

.burs-preview-empty {
  color: var(--text-tertiary);
  font-style: italic;
  padding: 16px 4px;
}

.burs-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px;
}

.burs-preview-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 10px);
  background: var(--card-bg);
  position: relative;
  overflow: hidden;
}

.burs-preview-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
  border-radius: 4px 0 0 4px;
}

.burs-preview-card[data-tier='1']::before { background: #22c55e; }
.burs-preview-card[data-tier='2']::before { background: #3b82f6; }
.burs-preview-card[data-tier='3']::before { background: #f59e0b; }
.burs-preview-card[data-tier='4']::before { background: #ef4444; }

.burs-preview-rank {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.burs-preview-rank-num {
  font-size: 16px;
  font-weight: 700;
}

.burs-preview-rank-dash {
  color: var(--text-tertiary);
}

.burs-preview-rank-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.burs-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.burs-preview-desc {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
}

.burs-preview-net {
  font-size: 11px;
  color: var(--text-tertiary);
}

.burs-preview-percent {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 800;
  color: var(--success-color, #22c55e);
  letter-spacing: -0.02em;
}

/* Pagination for scholarship exams */
#scholarshipExamsPagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 24px;
  padding: 16px 0;
}

#scholarshipExamsPagination button {
  min-width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}

#scholarshipExamsPagination button:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--accent);
}

#scholarshipExamsPagination button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

#scholarshipExamsPagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CHAIN MANAGEMENT & WHITE LABEL STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Chain Management */
.chain-management {
  padding: 20px;
}

.chain-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.chain-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.chain-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.hq-select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 14px;
  min-width: 200px;
}

.chain-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}

.stat-icon {
  font-size: 28px;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stat-icon svg {
  width: 28px;
  height: 28px;
}

.stat-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
}

.stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-top: 4px;
}

.chain-branches h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.branch-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.branch-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: var(--transition);
}

.branch-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.branch-info {
  flex: 1;
  min-width: 0;
}

.branch-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.branch-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.branch-stats {
  display: flex;
  gap: 16px;
}

.branch-stat {
  font-size: 13px;
  color: var(--text-secondary);
}

.branch-actions {
  display: flex;
  gap: 8px;
}

.branch-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 1fr));
  gap: 8px;
  flex: 1;
  min-width: 280px;
  padding: 0 12px;
}

.branch-stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 6px;
  background: var(--secondary-bg, #f8fafc);
  border-radius: 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  min-width: 0;
}

.branch-stat-tile .branch-stat-icon {
  color: var(--accent, #2c3e8c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.branch-stat-tile .branch-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.1;
}

.branch-stat-tile .branch-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.branch-extra {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 110px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
}

.branch-last-exam {
  display: flex;
  align-items: center;
  gap: 4px;
}

.branch-last-exam strong {
  color: var(--text-primary, #0f172a);
}

@media (max-width: 900px) {
  .branch-card {
    flex-wrap: wrap;
  }

  .branch-stats-grid {
    grid-template-columns: repeat(3, minmax(70px, 1fr));
    width: 100%;
  }

  .branch-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

.branch-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--card-bg) 92%, var(--secondary-bg) 8%);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: var(--transition);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.branch-action-btn svg {
  flex: 0 0 auto;
}

.branch-action-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--text-primary);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
}

.branch-action-btn-edit {
  background: color-mix(in srgb, var(--accent) 12%, var(--card-bg) 88%);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-color) 72%);
}

.branch-action-btn-secondary {
  background: color-mix(in srgb, var(--warning-color) 10%, var(--card-bg) 90%);
  color: color-mix(in srgb, var(--warning-color) 82%, var(--text-primary) 18%);
  border-color: color-mix(in srgb, var(--warning-color) 24%, var(--border-color) 76%);
}

.branch-action-btn-danger {
  background: color-mix(in srgb, var(--danger-color) 10%, var(--card-bg) 90%);
  color: var(--danger-color);
  border-color: color-mix(in srgb, var(--danger-color) 24%, var(--border-color) 76%);
}

.chain-footer {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.empty-inline {
  padding: 24px;
  text-align: center;
  color: var(--text-tertiary);
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .branch-card {
    flex-wrap: wrap;
    gap: 12px;
  }

  .branch-info {
    width: 100%;
  }

  .branch-stats {
    width: 100%;
  }

  .branch-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .branch-action-btn {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }

  .chain-footer {
    flex-direction: column;
  }

  .inst-grid {
    grid-template-columns: 1fr !important;
  }
}

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

  .chain-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .hq-select {
    width: 100%;
  }

  .stat-icon svg {
    width: 24px;
    height: 24px;
  }

  .branch-action-btn {
    flex-basis: 100%;
  }
}

.badge-archived {
  background: var(--warning-color);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

/* Chain Dashboard */
.chain-dashboard {
  padding: 20px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.dashboard-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 1200px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 480px) {
  .hero-stats {
    grid-template-columns: 1fr;
  }

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

  .comparison-label {
    width: 100px;
    font-size: 12px;
  }
}

.hero-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.hero-card.purple::before {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.hero-card.green::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.hero-card.blue::before {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.hero-card.orange::before {
  background: linear-gradient(90deg, #f97316, #fb923c);
}

.hero-icon-wrap {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.hero-icon-bg {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-icon-bg svg {
  width: 22px;
  height: 22px;
}

.hero-icon-bg.purple {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
}

.hero-icon-bg.green {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.hero-icon-bg.blue {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.hero-icon-bg.orange {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}

.hero-icon-bg.red {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.hero-icon-bg.cyan {
  background: rgba(28, 181, 184, 0.12);
  color: #18a8ad;
}

.hero-label {
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.hero-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.dash-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 0 0 20px;
  min-width: 0;
}

.dashboard-grid .dash-panel,
.dash-triple-grid .dash-panel,
.dash-main-grid .dash-panel,
.dash-stats-grid .dash-panel,
.dash-hero .dash-panel,
.dash-stat-grid .dash-panel {
  margin: 0;
}

.panel-header {
  margin-bottom: 16px;
}

.panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.branch-comparison {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comparison-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.comparison-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  width: 150px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comparison-type {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 400;
}

.comparison-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--secondary-bg);
  border-radius: 4px;
  overflow: hidden;
}

.comparison-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s;
}

.comparison-value {
  font-size: 12px;
  color: var(--text-secondary);
  width: 100px;
  text-align: right;
  flex-shrink: 0;
}

.performance-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.performance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--secondary-bg);
  border-radius: var(--radius-sm);
}

.performance-row.top {
  background: var(--accent-subtle);
  border: 1px solid var(--accent);
}

.performance-rank {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  width: 24px;
}

.performance-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.performance-score {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.attention-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.attention-item.warning {
  background: var(--warning-subtle);
  color: var(--warning-color);
}

.attention-item.success {
  background: var(--success-subtle);
  color: var(--success-color);
}

.attention-icon {
  font-size: 16px;
}

.chain-dashboard {
  max-width: 100%;
  overflow-x: hidden;
  padding: clamp(12px, 2vw, 20px);
}

.chain-dashboard .dashboard-header {
  gap: 12px;
  flex-wrap: wrap;
}

.chain-dashboard .dashboard-header>div {
  min-width: 0;
}

.chain-dashboard .dashboard-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.25;
}

.chain-dashboard .dashboard-header .btn,
.chain-dashboard .dashboard-header .btn-secondary {
  white-space: nowrap;
}

.chain-dashboard-picker {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

#chainDashboardSelect {
  min-width: min(260px, 100%) !important;
  max-width: 100%;
}

.chain-dashboard .hero-stats {
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.chain-dashboard .hero-card,
.chain-dashboard .dash-panel {
  min-width: 0;
}

.chain-dashboard .hero-card {
  padding: clamp(14px, 2vw, 20px);
}

.chain-dashboard .hero-value {
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.chain-dashboard .dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.chain-dashboard .dashboard-grid>.dash-panel[style*='grid-column'] {
  grid-column: span 2 !important;
}

.chain-dashboard .dash-panel {
  padding: clamp(14px, 2vw, 20px);
}

.chain-dashboard .dash-panel>div[style*='grid-template-columns:1fr 1fr'] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#chainDashboardMap {
  min-height: clamp(220px, 42vh, 320px) !important;
}

.chain-mini-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 1.8fr minmax(44px, 56px);
  gap: 10px;
  align-items: center;
  margin: 10px 0;
  min-width: 0;
}

.chain-mini-bar-label {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chain-mini-bar-track {
  min-width: 0;
  height: 8px;
  overflow: hidden;
  background: var(--secondary-bg);
  border-radius: 999px;
}

.chain-mini-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.chain-mini-bar-value {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.chain-dashboard .comparison-row,
.chain-dashboard .performance-row,
.chain-dashboard .attention-item {
  min-width: 0;
}

.chain-dashboard .comparison-label,
.chain-dashboard .performance-name,
.chain-dashboard .attention-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.chain-dashboard .comparison-bar-wrap {
  min-width: 72px;
}

.chain-dashboard .performance-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chain-dashboard .performance-score,
.chain-dashboard .comparison-value {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .chain-dashboard .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .chain-dashboard .dashboard-grid>.dash-panel[style*='grid-column'] {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  .chain-dashboard {
    padding: 12px;
  }

  .chain-dashboard .dashboard-header {
    align-items: stretch;
  }

  .chain-dashboard .dashboard-header .btn,
  .chain-dashboard .dashboard-header .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .chain-dashboard .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .chain-dashboard .hero-card {
    padding: 12px;
  }

  .chain-dashboard .hero-label {
    font-size: 10.5px;
  }

  .chain-dashboard .hero-icon-bg {
    width: 38px;
    height: 38px;
  }

  .chain-dashboard .dash-panel>div[style*='grid-template-columns:1fr 1fr'] {
    grid-template-columns: 1fr !important;
  }

  .chain-dashboard .comparison-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .chain-dashboard .comparison-label,
  .chain-dashboard .comparison-value {
    width: auto;
    text-align: left;
  }

  .chain-dashboard .comparison-bar-wrap {
    width: 100%;
  }

  .chain-mini-bar-row {
    grid-template-columns: 1fr minmax(44px, auto);
  }

  .chain-mini-bar-track {
    grid-column: 1 / -1;
    order: 3;
  }
}

@media (max-width: 420px) {
  .chain-dashboard {
    padding: 10px;
  }

  .chain-dashboard .hero-stats {
    grid-template-columns: 1fr;
  }

  .chain-dashboard .performance-row {
    flex-wrap: wrap;
  }

  .chain-dashboard .performance-name {
    flex-basis: calc(100% - 40px);
  }

  .chain-dashboard .performance-score {
    margin-left: 36px;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  .chain-dashboard {
    padding: 10px 12px;
  }

  .chain-dashboard .dashboard-header {
    margin-bottom: 12px;
  }

  .chain-dashboard .hero-stats,
  .chain-dashboard .dashboard-grid {
    gap: 12px;
  }

  .chain-dashboard .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
  }

  .chain-dashboard .hero-icon-wrap {
    margin-bottom: 6px;
  }

  .chain-dashboard .hero-card {
    padding: 10px;
  }

  #chainDashboardMap {
    min-height: 210px !important;
  }
}

/* Branding Settings */
.branding-settings {
  padding: 20px;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.settings-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.inst-select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 14px;
  min-width: 200px;
}

.branding-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

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

.branding-form {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.form-section {
  margin-bottom: 24px;
}

.form-section:last-of-type {
  margin-bottom: 32px;
}

.form-section h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

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

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

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="number"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text-primary);
}

.form-group input[type="color"] {
  width: 100%;
  height: 40px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.branding-preview {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: 20px;
}

.branding-preview h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.branding-settings {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.branding-settings .settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.branding-settings .header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.branding-settings .header-left h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.branding-settings .header-actions {
  display: flex;
  gap: 8px;
}

.branding-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 4px;
  flex-wrap: wrap;
}

.branding-tab {
  padding: 10px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 8px 8px 0 0;
  transition: all 0.2s ease;
  position: relative;
}

.branding-tab:hover {
  background: var(--secondary-bg);
  color: var(--text-primary);
}

.branding-tab.active {
  color: var(--primary-color);
  background: var(--primary-color-light);
}

.branding-tab.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-color);
}

.branding-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
  align-items: start;
}

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

.branding-form {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.branding-tab-content {
  display: none;
}

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

.form-section {
  margin-bottom: 24px;
}

.form-section:last-child {
  margin-bottom: 0;
}

.form-section h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

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

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.color-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.color-input-group input[type="color"] {
  width: 44px;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 2px;
}

.color-input-group .color-text {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: monospace;
  background: var(--input-bg);
  color: var(--text-primary);
}

.theme-mode-selector {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 24px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.theme-option:hover {
  border-color: var(--primary-color);
  background: var(--primary-color-light);
}

.theme-option.active {
  border-color: var(--primary-color);
  background: var(--primary-color-light);
  color: var(--primary-color);
}

.theme-option input {
  display: none;
}

.theme-option .theme-icon {
  font-size: 24px;
}

.theme-option .theme-label {
  font-size: 12px;
  font-weight: 600;
}

.form-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 8px;
}

.input-with-unit {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-with-unit input {
  width: 80px;
}

.input-with-unit span {
  color: var(--text-secondary);
  font-size: 12px;
}

.branding-preview {
  position: sticky;
  top: 24px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}

.preview-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.preview-header-row h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.preview-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  background: var(--success-color);
  color: white;
  border-radius: 20px;
  text-transform: uppercase;
}

.preview-live-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.preview-theme-label {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: auto;
}

.preview-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.preview-tab {
  padding: 6px 14px;
  border: 1px solid var(--border-color);
  background: var(--secondary-bg);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.preview-tab:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.preview-tab.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.preview-frame {
  background: linear-gradient(135deg, #e8eaed 0%, #d5d7dc 100%);
  border-radius: var(--radius-md);
  padding: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.preview-frame.dark-mode {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.preview-device {
  display: flex;
  flex: 1;
  min-height: 350px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.preview-device.mobile {
  max-width: 280px;
  margin: 0 auto;
  flex-direction: column;
}

.preview-device.mobile .preview-sidebar {
  width: 100%;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;
  gap: 4px;
  align-items: center;
}

.preview-device.mobile .preview-sidebar-brand {
  display: none;
}

.preview-device.mobile .preview-sidebar-item {
  padding: 8px 12px;
  font-size: 11px;
  white-space: nowrap;
  border-left: none;
  border-radius: 4px;
}

.preview-device.mobile .preview-sidebar-item.active {
  background: var(--primary-color);
  color: white;
}

.preview-device.mobile .preview-content {
  padding: 10px;
}

.preview-device.mobile .preview-stats-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.preview-device.mobile .preview-stat-card2 {
  padding: 10px;
}

.preview-device.mobile .preview-stat-card2 .stat-icon {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

.preview-device.mobile .preview-stat-card2 .stat-info .stat-value {
  font-size: 14px;
}

.preview-device.mobile .preview-stat-card2 .stat-info .stat-label {
  font-size: 9px;
}

.preview-device.dark-mode {
  border-color: rgba(255, 255, 255, 0.1);
}

.preview-sidebar {
  width: 160px;
  background: #2c3e8c;
  color: white;
  padding: 16px 0;
  flex-shrink: 0;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.preview-sidebar-brand {
  padding: 8px 14px 14px;
  font-size: 11px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 8px;
}

.preview-sidebar-item {
  padding: 9px 14px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.preview-sidebar-item.active {
  background: rgba(255, 255, 255, 0.2);
  border-left: 3px solid white;
}

.preview-device.dark-mode .preview-sidebar {
  background: #0f0f23;
  color: #e0e6ed;
}

.preview-device.dark-mode .preview-sidebar-brand {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.preview-device.dark-mode .preview-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.preview-device.dark-mode .preview-sidebar-item.active {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: #e94560;
}

.preview-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
  min-width: 0;
}

.preview-topbar {
  height: 42px;
  background: #2c3e8c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.preview-topbar span {
  font-size: 13px;
  font-weight: 700;
  color: white;
}

.preview-topbar-actions {
  display: flex;
  gap: 6px;
}

.preview-topbar-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0.9;
}

.preview-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  background: #f8f9fa;
  min-height: 0;
}

.preview-page-header h1 {
  font-size: 16px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
}

.preview-page-header p {
  font-size: 10px;
  color: #7f8c8d;
  margin: 2px 0 0;
}

.preview-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}

.preview-stat-card2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e0e6ed;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.preview-stat-card2 .stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.preview-stat-card2 .stat-info {
  min-width: 0;
}

.preview-stat-card2 .stat-info .stat-value {
  font-size: 14px;
  font-weight: 800;
  color: #2c3e50;
  line-height: 1.2;
}

.preview-stat-card2 .stat-info .stat-label {
  font-size: 9px;
  text-transform: uppercase;
  color: #7f8c8d;
  line-height: 1.2;
}

.preview-card2 {
  background: white;
  border: 1px solid #e0e6ed;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 10px;
  overflow: hidden;
}

.preview-card-header {
  padding: 10px 14px;
  border-bottom: 1px solid #e0e6ed;
  font-size: 12px;
  font-weight: 600;
  color: #2c3e50;
}

.preview-card-body {
  padding: 8px 14px;
}

.preview-table-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 11px;
}

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

.preview-table-row span:first-child {
  color: #2c3e50;
}

.preview-table-row .success-text {
  color: #27ae60;
  font-weight: 600;
}

.preview-table-row .accent-text {
  color: #3498db;
  font-weight: 600;
}

.preview-table-row .warning-text {
  color: #f39c12;
  font-weight: 600;
}

.preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.preview-btn-primary {
  flex: 1;
  padding: 9px 16px;
  background: #2c3e8c;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(44, 62, 140, 0.25);
  transition: all 0.2s;
}

.preview-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(44, 62, 140, 0.3);
}

.preview-btn-secondary {
  flex: 1;
  padding: 9px 16px;
  background: white;
  color: #2c3e8c;
  border: 2px solid #2c3e8c;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.preview-btn-secondary:hover {
  background: #f0f4ff;
}

.preview-colors-bar {
  display: flex;
  gap: 5px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.preview-color-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.preview-color-chip:hover {
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .branding-preview {
    position: static;
    max-height: none;
    padding: 16px;
  }

  .preview-device {
    min-height: 280px;
  }

  .preview-sidebar {
    width: 120px;
  }

  .preview-sidebar-item {
    font-size: 10px;
    padding: 7px 10px;
  }

  .preview-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .preview-stat-card2 {
    padding: 8px;
  }

  .preview-stat-card2 .stat-icon {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .preview-stat-card2 .stat-info .stat-value {
    font-size: 12px;
  }
}

.branding-preview h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.preview-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  background: var(--success-color);
  color: white;
  border-radius: 20px;
  text-transform: uppercase;
}

.preview-live-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.preview-theme-label {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 8px;
}

.preview-frame {
  background: linear-gradient(135deg, #e8eaed 0%, #d5d7dc 100%);
  border-radius: var(--radius-lg);
  padding: 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  flex: 1;
  min-height: 0;
}

.preview-frame.dark-mode {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.preview-device {
  display: flex;
  height: 100%;
  min-height: 400px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.preview-device.dark-mode {
  border-color: rgba(255, 255, 255, 0.1);
}

.preview-sidebar {
  width: 200px;
  background: #2c3e8c;
  color: white;
  padding: 16px 0;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.preview-sidebar-brand {
  padding: 8px 16px 16px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 8px;
}

.preview-sidebar-item {
  padding: 10px 16px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.preview-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.preview-sidebar-item.active {
  background: rgba(255, 255, 255, 0.2);
  border-left: 3px solid white;
}

.preview-device.dark-mode .preview-sidebar {
  background: #0f0f23;
  color: #e0e6ed;
}

.preview-device.dark-mode .preview-sidebar-brand {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.preview-device.dark-mode .preview-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.preview-device.dark-mode .preview-sidebar-item.active {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: #e94560;
}

.preview-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
}

.preview-topbar {
  height: 48px;
  background: #2c3e8c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.preview-topbar span {
  font-size: 14px;
  font-weight: 700;
}

.preview-topbar-actions {
  display: flex;
  gap: 8px;
}

.preview-topbar-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0.9;
}

.preview-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  min-height: 0;
}

.preview-page-header h1 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.preview-page-header p {
  font-size: 11px;
  margin: 4px 0 0;
}

.preview-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.preview-stat-card2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e0e6ed;
}

.preview-stat-card2 .stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.preview-stat-card2 .stat-info .stat-value {
  font-size: 16px;
  font-weight: 800;
}

.preview-stat-card2 .stat-info .stat-label {
  font-size: 10px;
  text-transform: uppercase;
}

.preview-card2 {
  margin-bottom: 12px;
  overflow: hidden;
}

.preview-card-header h3 {
  font-size: 13px;
  font-weight: 600;
}

.preview-table-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.preview-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.preview-colors-bar {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.preview-color-chip {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.preview-color-chip:hover {
  transform: scale(1.2);
}

.inst-select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
  min-width: 200px;
}

#resetBrandingBtn {
  background: var(--secondary-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

#resetBrandingBtn:hover {
  background: var(--warning-color);
  color: white;
  border-color: var(--warning-color);
}

.preview-card.dark-mode {
  --preview-bg: #1a1a2e;
  --preview-card-bg: #16213e;
  --preview-text: #e0e6ed;
  --preview-text-secondary: #a0a0a0;
  --preview-border: #2a2a4a;
}

.preview-card.dark-mode .preview-body,
.preview-card.dark-mode .preview-buttons {
  background: var(--preview-card-bg);
}

.preview-card.dark-mode .preview-stat-card {
  background: #0f3460;
  color: var(--preview-text);
}

.preview-card.dark-mode .preview-stat-value {
  color: #e94560;
}

.preview-card.dark-mode .preview-stat-label {
  color: var(--preview-text-secondary);
}

.preview-header {
  background: var(--preview-primary);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  transition: background 0.3s ease;
}

.preview-logo {
  font-weight: 700;
  font-size: 14px;
}

.preview-nav {
  display: flex;
  gap: 12px;
  font-size: 11px;
  opacity: 0.8;
}

.preview-body {
  background: white;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.preview-stat-card {
  background: var(--secondary-bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}

.preview-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
}

.preview-stat-label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.preview-buttons {
  background: white;
  padding: 16px;
  display: flex;
  gap: 8px;
}

.preview-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: white;
  cursor: pointer;
}

.preview-btn.primary {
  background: var(--preview-primary);
}

.preview-btn.accent {
  background: var(--preview-accent);
}

/* Buttons */
.btn-primary {
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-secondary {
  padding: 10px 20px;
  background: var(--secondary-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

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

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

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

.modal-content {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

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

.modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state .empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.empty-state .empty-icon svg {
  width: 48px;
  height: 48px;
  opacity: 0.6;
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.empty-state p {
  font-size: 14px;
  color: var(--text-tertiary);
  margin: 0;
}

.institution-empty-state {
  width: min(100%, 560px);
  margin: 20px auto;
  padding: 36px 28px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)),
    var(--card-bg);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.institution-empty-state-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.institution-empty-state-icon svg {
  width: 34px;
  height: 34px;
}

.institution-empty-state h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.institution-empty-state p {
  max-width: 38ch;
  margin: 0 auto;
  line-height: 1.6;
}

.error-state {
  padding: 20px;
  background: var(--danger-subtle);
  border: 1px solid var(--danger-color);
  border-radius: var(--radius-md);
  color: var(--danger-color);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   [M-06] DERS DAĞITIM PROGRAMI - STYLES
   ═══════════════════════════════════════════════════════════════════════ */

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.schedule-toolbar-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.schedule-toolbar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.schedule-toolbar-title {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.schedule-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-actions .btn {
  min-height: 40px;
}

.schedule-actions .btn-icon,
.export-section .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.schedule-actions .btn-icon svg,
.export-section .btn-icon svg {
  width: 16px;
  height: 16px;
}

.schedule-empty-state {
  min-height: 360px;
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--card-bg), var(--surface));
  border: 1px dashed var(--border-color);
  border-radius: 18px;
  max-width: 760px;
  margin: 0 auto;
}

.schedule-empty-state .empty-icon {
  width: 84px;
  height: 84px;
  margin-bottom: 18px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--border-color);
}

.schedule-empty-state .empty-icon svg {
  width: 42px;
  height: 42px;
  stroke-width: 1.75;
}

.schedule-empty-state h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.schedule-empty-state p {
  max-width: 46ch;
  margin: 0 auto 18px;
  line-height: 1.6;
}

.schedule-grid-container {
  padding: 0;
  overflow-x: auto;
}

.schedule-grid-wrapper {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.schedule-grid {
  min-width: 800px;
}

.schedule-grid-header {
  display: grid;
  grid-template-columns: 80px repeat(5, 1fr);
  gap: 1px;
  background: var(--border-color);
  border-bottom: 2px solid var(--accent);
}

.schedule-cell-header {
  padding: 14px 10px;
  text-align: center;
  font-weight: 600;
  background: var(--card-bg);
  color: var(--text-secondary);
}

.schedule-grid-row {
  display: grid;
  grid-template-columns: 80px repeat(5, 1fr);
  gap: 1px;
  background: var(--border-color);
  min-height: 100px;
}

.schedule-cell-time {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  padding: 10px 6px;
  justify-content: center;
}

.time-slot-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  padding: 4px 0;
  font-weight: 600;
}

.schedule-cell {
  padding: 6px;
  background: var(--background);
  min-height: 100px;
  position: relative;
  transition: background 0.2s;
}

.schedule-cell.has-slot {
  background: color-mix(in srgb, var(--surface) 86%, white 14%);
}

.schedule-cell.empty-slot {
  background: var(--background);
  opacity: 0.7;
}

.schedule-cell.drag-over {
  background: var(--accent);
  opacity: 0.3;
}

.slot-assignments {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.assignment-card {
  padding: 10px 10px 12px;
  border-radius: 12px;
  border-left: 4px solid;
  cursor: grab;
  position: relative;
  font-size: 12px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.assignment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.assignment-card.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.assignment-branch {
  font-weight: 600;
  margin-bottom: 4px;
}

.assignment-teacher {
  font-size: 11px;
  color: var(--text-secondary);
}

.assignment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-tertiary);
}

.assignment-class {
  font-weight: 500;
}

.assignment-room {
  opacity: 0.95;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.assignment-room svg {
  width: 12px;
  height: 12px;
}

.assignment-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  gap: 4px;
}

.assignment-card:hover .assignment-actions {
  display: flex;
}

.assignment-btn-edit,
.assignment-btn-delete {
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.assignment-btn-edit:hover,
.assignment-btn-delete:hover {
  opacity: 1;
}

.assignment-btn-edit svg,
.assignment-btn-delete svg {
  width: 14px;
  height: 14px;
}

.add-lesson-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-lesson-btn svg {
  width: 14px;
  height: 14px;
}

.schedule-cell:hover .add-lesson-btn {
  opacity: 1;
}

.add-lesson-btn:hover {
  background: var(--accent-hover);
}

.lesson-palette {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  min-width: 200px;
}

.lesson-palette.hidden {
  display: none;
}

.palette-header {
  padding: 12px 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.palette-close {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.palette-close:hover {
  background: var(--surface);
}

.palette-close svg {
  width: 14px;
  height: 14px;
}

.palette-branches {
  padding: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.palette-branch-item {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.palette-branch-item:hover {
  background: var(--surface);
}

.palette-branch-item:active {
  cursor: grabbing;
}

.branch-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.branch-name {
  font-size: 13px;
}

.schedule-hours-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.schedule-hours-modal {
  max-width: 980px;
}

.schedule-hours-modal-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.schedule-hours-modal-title h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.schedule-hours-modal-title p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.schedule-hours-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.schedule-hours-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--card-bg), var(--surface));
}

.schedule-hours-summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-subtle);
  color: var(--accent);
}

.schedule-hours-summary-card strong,
.schedule-hours-summary-card span {
  display: block;
}

.schedule-hours-summary-card div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.schedule-hours-summary-card div span {
  color: var(--text-secondary);
  font-size: 13px;
}

.day-hours-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.day-hours-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.day-hours-section h4 {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
}

.day-hours-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 4px 8px;
}

.day-hours-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 84px;
}

.hour-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 13px;
}

.hour-item .hour-time {
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.day-hours-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12px;
}

.add-hour-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.add-hour-form input {
  min-width: 92px;
  width: 92px;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
}

.add-hour-separator {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.add-hour-separator svg {
  width: 14px;
  height: 14px;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

.delete-hour {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
}

.delete-hour:hover {
  transform: translateY(-1px);
  background: rgba(239, 68, 68, 0.16);
}

.classroom-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.classroom-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.classroom-info {
  display: flex;
  flex-direction: column;
}

.classroom-name {
  font-weight: 600;
}

.classroom-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

.classroom-actions {
  display: flex;
  gap: 4px;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: 0.7;
}

.btn-icon:hover {
  opacity: 1;
  background: var(--surface);
}

.add-form {
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.add-form h4 {
  margin: 0 0 12px;
}

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

.teacher-availability-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 500px;
  overflow-y: auto;
}

.availability-inline-form {
  align-items: end;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1.4fr) minmax(130px, 1fr) repeat(2, minmax(95px, .7fr)) auto;
  margin-bottom: 14px;
  padding: 12px;
}

.availability-inline-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.availability-inline-form label span {
  color: var(--text-secondary, #64748b);
  font-size: 12px;
  font-weight: 700;
}

.availability-inline-form input,
.availability-inline-form select {
  background: var(--input-bg, #ffffff);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  color: var(--text-primary, #111827);
  min-height: 38px;
  min-width: 0;
  padding: 8px 10px;
  width: 100%;
}

.teacher-avail-section {
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.teacher-avail-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 600;
}

.teacher-branch {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: normal;
}

.teacher-avail-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.day-avail-cell {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  text-align: center;
}

.day-avail-cell .day-label {
  font-weight: 600;
  font-size: 12px;
}

.avail-slots,
.busy-slots {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 40px;
}

.slot-caption {
  color: var(--text-tertiary, #94a3b8);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.no-avail,
.no-busy {
  font-size: 10px;
}

.no-avail {
  color: var(--danger-color);
}

.no-busy {
  color: var(--text-tertiary, #94a3b8);
}

.avail-slot {
  display: inline-block;
  padding: 2px 4px;
  background: var(--success-color);
  color: white;
  border-radius: 4px;
  font-size: 10px;
  margin: 2px 0;
}

.busy-slot {
  background: rgba(37, 99, 235, 0.10);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 5px;
  color: var(--primary-color, #2563eb);
  display: grid;
  gap: 1px;
  max-width: 100%;
  padding: 3px 5px;
}

.busy-slot strong,
.busy-slot small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.busy-slot small {
  font-size: 9px;
  font-weight: 700;
}

.add-avail-btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.add-avail-btn svg {
  height: 14px;
  width: 14px;
}

@media (max-width: 900px) {

  .availability-inline-form,
  .teacher-avail-grid {
    grid-template-columns: 1fr;
  }
}

.export-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.export-section h4 {
  margin: 0 0 12px;
}

.export-section .btn {
  width: 100%;
  margin-bottom: 8px;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-color);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}

.btn-outline:hover {
  background: var(--surface);
  border-color: var(--accent);
}

.conflict-warning {
  padding: 12px;
  background: var(--danger-subtle);
  border: 1px solid var(--danger-color);
  border-radius: var(--radius-sm);
  color: var(--danger-color);
  margin-top: 12px;
}

.conflict-warning.hidden,
.conflict-warning:empty,
.conflict-warning[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.conflict-item {
  font-size: 13px;
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

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

.algorithm-status {
  padding: 12px;
  font-weight: 600;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.algorithm-progress-bar {
  height: 8px;
  background: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.algorithm-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s;
}

.algorithm-log {
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: monospace;
  font-size: 12px;
}

.log-entry {
  margin-bottom: 4px;
  padding: 2px 0;
}

.log-entry.log-success {
  color: var(--success-color);
}

.log-entry.log-warning {
  color: var(--warning-color);
}

.log-entry.log-error {
  color: var(--danger-color);
}

.log-empty {
  color: var(--text-tertiary);
  font-style: italic;
}

#scheduleManagementSection .section-header {
  padding: 16px 20px;
}

#scheduleManagementSection .section-header h2 {
  margin: 0;
}

.schedule-grid-wrapper {
  overflow-x: auto;
  padding: 0 20px 20px;
}

/* ─── Mobile Improvements for Teneffüs/Etüt ─────────────────────────────── */

@media (max-width: 640px) {

  /* Time spinners - larger touch targets */
  .time-spinner {
    width: 72px;
    padding: 10px 8px;
    font-size: 16px;
    min-height: 44px;
  }

  .time-separator {
    font-size: 20px;
    padding: 0 6px;
  }

  /* Slot form inputs - full width on mobile */
  .slot-form-input {
    width: 100%;
    min-height: 44px;
    font-size: 15px;
  }

  /* Time row layout */
  .time-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }

  .time-row .form-group {
    flex: 1;
    min-width: 100px;
  }

  /* Day chips - larger touch targets */
  .day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .day-chip,
  .etut-day-chip {
    padding: 10px 16px;
    font-size: 14px;
    min-width: 44px;
    text-align: center;
    border-radius: 22px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Etut slot cards - stacked layout on mobile */
  .etut-slot-card,
  .teneffus-slot-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
  }

  .etut-slot-card .etut-slot-icon,
  .teneffus-slot-card .teneffus-slot-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .etut-slot-info,
  .teneffus-slot-info {
    width: 100%;
  }

  .etut-slot-days {
    flex-wrap: wrap;
    gap: 6px;
  }

  .etut-day-chip {
    padding: 6px 12px;
    font-size: 13px;
  }

  /* Slot list - scrollable on mobile */
  .slot-list-container {
    max-height: 250px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Color select - larger touch target */
  .slot-color-select {
    min-height: 44px;
    font-size: 15px;
    padding: 8px 12px;
  }

  /* Emoji options - larger touch targets */
  .emoji-option {
    width: 48px;
    height: 48px;
    font-size: 26px;
  }

  /* Tab buttons for Etut/Teneffus switch */
  .tab-btn {
    padding: 12px 20px;
    font-size: 14px;
    min-height: 44px;
  }

  /* Form panel padding */
  .slot-form-panel {
    padding: 16px;
    margin: 0 -8px;
  }

  /* Slot duration display */
  .slot-duration-display {
    padding: 12px 16px;
    font-size: 15px;
    text-align: center;
  }

  /* Checkbox and radio inputs - larger on mobile */
  .slot-form-panel input[type="checkbox"],
  .slot-form-panel input[type="radio"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .slot-form-panel label {
    font-size: 15px;
    line-height: 1.4;
  }
}

/* ─── Very small screens ────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .time-spinner {
    width: 60px;
    padding: 8px 4px;
    font-size: 14px;
  }

  .etut-slot-card,
  .teneffus-slot-card {
    padding: 12px;
  }

  .day-chip {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERN CHECKBOX STYLES
   Modern, theme-compatible checkbox styling with visible checked state
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base checkbox styling */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--border-color, #d1d5db);
  border-radius: 5px;
  background: var(--card-bg, #ffffff);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  vertical-align: middle;
}

/* Checked state */
input[type="checkbox"]:checked {
  background: var(--primary-color, #3b82f6);
  border-color: var(--primary-color, #3b82f6);
}

/* Checkmark indicator using ::after */
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
}

/* Hover state */
input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Focus state */
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Disabled state */
input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Indeterminate state (for partially checked) */
input[type="checkbox"]:indeterminate {
  background: var(--primary-color, #3b82f6);
  border-color: var(--primary-color, #3b82f6);
}

input[type="checkbox"]:indeterminate::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 10px;
  height: 2px;
  background: white;
  border-radius: 1px;
}

/* Base radio styling - square, fixed-ratio selection control */
input[type="radio"]:not([style*="display: none"]):not([style*="display:none"]) {
  --radio-size: 18px;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: var(--radio-size) !important;
  height: var(--radio-size) !important;
  inline-size: var(--radio-size) !important;
  block-size: var(--radio-size) !important;
  min-width: var(--radio-size) !important;
  min-height: var(--radio-size) !important;
  min-inline-size: var(--radio-size) !important;
  min-block-size: var(--radio-size) !important;
  max-width: var(--radio-size) !important;
  max-height: var(--radio-size) !important;
  max-inline-size: var(--radio-size) !important;
  max-block-size: var(--radio-size) !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0;
  border: 2px solid var(--border-color, #d1d5db) !important;
  border-radius: 5px !important;
  background: var(--card-bg, #ffffff) !important;
  cursor: pointer;
  position: relative !important;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  vertical-align: middle !important;
  flex: 0 0 var(--radio-size) !important;
  flex-shrink: 0 !important;
  align-self: center;
  display: inline-block;
  line-height: 0 !important;
}

input[type="radio"]:not([style*="display: none"]):not([style*="display:none"]):checked {
  background: var(--accent, var(--primary-color, #3b82f6)) !important;
  border-color: var(--accent, var(--primary-color, #3b82f6)) !important;
}

input[type="radio"]:not([style*="display: none"]):not([style*="display:none"]):checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

input[type="radio"]:not([style*="display: none"]):not([style*="display:none"]):hover:not(:disabled) {
  border-color: var(--accent, var(--primary-color, #3b82f6));
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

input[type="radio"]:not([style*="display: none"]):not([style*="display:none"]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

input[type="radio"]:not([style*="display: none"]):not([style*="display:none"]):active:not(:disabled) {
  transform: scale(0.94);
}

input[type="radio"]:not([style*="display: none"]):not([style*="display:none"]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Keep custom card/chip radios visually hidden while their labels show the state. */
.exam-target-chip input[type="radio"],
.theme-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  inline-size: 0 !important;
  block-size: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  max-inline-size: 0 !important;
  max-block-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

.theme-option input[type="radio"] {
  display: none !important;
}

/* Larger variant for important selections */
input[type="checkbox"].checkbox-lg,
.checkbox-lg input[type="checkbox"],
input[type="radio"].radio-lg,
.radio-lg input[type="radio"] {
  --radio-size: 22px;
  width: var(--radio-size) !important;
  height: var(--radio-size) !important;
  inline-size: var(--radio-size) !important;
  block-size: var(--radio-size) !important;
  min-width: var(--radio-size) !important;
  min-height: var(--radio-size) !important;
  min-inline-size: var(--radio-size) !important;
  min-block-size: var(--radio-size) !important;
  max-width: var(--radio-size) !important;
  max-height: var(--radio-size) !important;
  max-inline-size: var(--radio-size) !important;
  max-block-size: var(--radio-size) !important;
  flex-basis: var(--radio-size) !important;
  border-radius: 6px !important;
}

input[type="checkbox"].checkbox-lg:checked::after {
  left: 6px;
  top: 3px;
  width: 7px;
  height: 12px;
}

/* Small variant */
input[type="checkbox"].checkbox-sm,
input[type="radio"].radio-sm {
  --radio-size: 14px;
  width: var(--radio-size) !important;
  height: var(--radio-size) !important;
  inline-size: var(--radio-size) !important;
  block-size: var(--radio-size) !important;
  min-width: var(--radio-size) !important;
  min-height: var(--radio-size) !important;
  min-inline-size: var(--radio-size) !important;
  min-block-size: var(--radio-size) !important;
  max-width: var(--radio-size) !important;
  max-height: var(--radio-size) !important;
  max-inline-size: var(--radio-size) !important;
  max-block-size: var(--radio-size) !important;
  flex-basis: var(--radio-size) !important;
  border-radius: 4px !important;
}

input[type="checkbox"].checkbox-sm:checked::after {
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
}

input[type="radio"].radio-sm:checked::after {
  inset: 3px;
}

/* Toggle switch variant */
.toggle-checkbox {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--border-color, #d1d5db);
  border: none;
  padding: 0;
  transition: background 0.25s ease;
}

.toggle-checkbox::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-checkbox:checked {
  background: var(--primary-color, #3b82f6);
}

.toggle-checkbox:checked::after {
  transform: translateX(20px);
}

.toggle-checkbox:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Label styling for checkboxes */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.checkbox-label:hover input[type="checkbox"]:not(:disabled) {
  border-color: var(--primary-color, #3b82f6);
}

/* Modern form checkbox group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkbox-group-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.checkbox-group .checkbox-label {
  padding: 8px 12px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.checkbox-group .checkbox-label:hover {
  border-color: var(--primary-color, #3b82f6);
  background: rgba(59, 130, 246, 0.05);
}

.checkbox-group .checkbox-label:has(input[type="checkbox"]:checked) {
  border-color: var(--primary-color, #3b82f6);
  background: rgba(59, 130, 246, 0.1);
}

/* Responsive checkbox adjustments */
@media (max-width: 640px) {
  .checkbox-group-horizontal {
    flex-direction: column;
    align-items: stretch;
  }

  .checkbox-group .checkbox-label {
    justify-content: flex-start;
  }

  input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  input[type="radio"]:not([style*="display: none"]):not([style*="display:none"]) {
    --radio-size: 20px;
  }

  input[type="checkbox"]:checked::after {
    left: 6px;
    top: 3px;
    width: 6px;
    height: 11px;
  }

  input[type="radio"]:not([style*="display: none"]):not([style*="display:none"]):checked::after {
    inset: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE STYLES — Institution Sections
   ═══════════════════════════════════════════════════════════════════ */

/* Section Header Responsive */
@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

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

  .section-header>div {
    width: 100%;
    flex-wrap: wrap;
  }

  .section-header .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Stat Cards Grid Responsive */
@media (max-width: 1024px) {

  [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))"] {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
}

@media (max-width: 768px) {

  [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stat-card {
    padding: 14px 16px;
  }

  .stat-card .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

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

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

@media (max-width: 480px) {

  [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }

  .stat-card {
    flex-direction: row;
    gap: 12px;
    text-align: left;
  }

  .stat-card .stat-body {
    flex: 1;
  }
}

/* Institution Section Grid Layouts */
.institution-section [style*="display:grid"] {
  gap: 16px;
}

@media (max-width: 768px) {
  .institution-section [style*="display:grid"][style*="gap:16px"] {
    gap: 12px;
  }
}

/* Cards Grid Responsive */
.institution-section [style*="repeat(auto-fill, minmax(300px"] {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}

@media (max-width: 768px) {
  .institution-section [style*="repeat(auto-fill, minmax(300px"] {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  .institution-section [style*="repeat(auto-fill, minmax(300px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Modal Responsive */
.modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .modal-content {
    max-width: 95vw !important;
    margin: 5vh auto;
    max-height: 85vh;
  }

  .modal-header {
    padding: 16px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .modal-header h2,
  .modal-header h3 {
    font-size: 18px;
    width: 100%;
  }

  .modal-body {
    padding: 16px;
  }

  .modal-footer {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-footer .btn {
    flex: 1;
    min-width: 120px;
  }
}

/* Form Elements Responsive */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: 16px;
  }

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

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
}

/* Table Responsive */
.institution-section table {
  font-size: 12px;
}

@media (max-width: 768px) {
  .institution-section table {
    font-size: 11px;
    min-width: 600px;
  }

  .institution-section table th,
  .institution-section table td {
    padding: 8px 6px;
  }
}

@media (max-width: 480px) {
  .institution-section table {
    min-width: 500px;
  }
}

/* Button Responsive */
@media (max-width: 480px) {
  .btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  .btn-small {
    padding: 6px 10px;
    font-size: 12px;
  }

  .btn-sm {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* Pagination Responsive */
.pagination-container {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pagination-btn {
  min-width: 36px;
  height: 36px;
  font-size: 13px;
}

/* Empty State Responsive */
.empty-state {
  padding: 40px 20px;
}

.empty-state-icon {
  font-size: 48px;
}

.empty-state .empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.empty-state .empty-icon svg {
  width: 48px;
  height: 48px;
  opacity: 0.6;
}

.empty-state h3 {
  font-size: 16px;
}

.empty-state p {
  font-size: 13px;
}

/* Schedule Hours Modal Grid */
.schedule-hours-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

@media (max-width: 1100px) {
  .schedule-hours-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .schedule-hours-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .schedule-hours-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .schedule-header {
    padding: 16px;
  }

  .schedule-toolbar-title {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .schedule-hours-grid {
    grid-template-columns: 1fr;
  }

  .schedule-actions {
    width: 100%;
  }

  .schedule-actions .btn {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }

  .add-hour-form {
    flex-wrap: wrap;
  }

  .add-hour-form input,
  .add-hour-form .add-hour-btn {
    width: 100%;
  }

  .add-hour-separator {
    display: none;
  }
}

/* Schedule Grid Table */
.schedule-grid-container {
  overflow-x: auto;
}

@media (max-width: 768px) {
  .schedule-grid-container {
    margin: 0 -16px;
    padding: 0 16px;
  }
}

/* Lesson Cards Grid */
.lesson-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.lesson-cards-grid>.gl-empty-state {
  grid-column: 1 / -1;
  width: min(520px, 100%);
  min-height: 320px;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}

.gl-empty-state-icon {
  width: 72px;
  height: 72px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--accent-subtle);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.gl-empty-state-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.75;
}

@media (max-width: 768px) {
  .lesson-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .lesson-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Lesson Card Responsive */
.lesson-card {
  padding: 16px;
}

.lesson-card-header {
  flex-direction: column;
  gap: 12px;
}

.lesson-card-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.lesson-card-actions .btn {
  flex: 1;
  min-width: 100px;
}

/* Stat Card Component */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sc-accent, var(--accent));
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  background: var(--sc-bg, rgba(59, 130, 246, 0.1));
  color: var(--sc-accent, var(--accent));
}

.stat-card .stat-body {
  flex: 1;
  min-width: 0;
}

.stat-card h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card .stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}

/* Stat Card Color Variants */
.stat-card.stat-blue {
  --sc-bg: rgba(59, 89, 182, 0.1);
  --sc-accent: #3b58e8;
}

.stat-card.stat-green {
  --sc-bg: rgba(52, 160, 54, 0.1);
  --sc-accent: #2e9e3e;
}

.stat-card.stat-orange {
  --sc-bg: rgba(240, 145, 0, 0.1);
  --sc-accent: #e88a00;
}

.stat-card.stat-purple {
  --sc-bg: rgba(152, 67, 198, 0.1);
  --sc-accent: #8b47e0;
}

.stat-card.stat-red {
  --sc-bg: rgba(230, 67, 67, 0.1);
  --sc-accent: #d94444;
}

.stat-card.stat-cyan {
  --sc-bg: rgba(28, 181, 184, 0.1);
  --sc-accent: #18a8ad;
}

.stat-card.stat-yellow {
  --sc-bg: rgba(240, 183, 0, 0.1);
  --sc-accent: #d4a200;
}

@media (max-width: 768px) {
  .stat-card {
    padding: 14px 16px;
    gap: 12px;
  }

  .stat-card .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

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

@media (max-width: 480px) {
  .stat-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .stat-card .stat-body {
    text-align: left;
  }
}

/* Dashboard Hero Cards */
.dash-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .dash-hero {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dash-hero {
    grid-template-columns: 1fr;
  }
}

.dash-hero-card {
  padding: 20px;
}

.dash-hero-icon {
  font-size: 24px;
}

.dash-hero-value {
  font-size: 28px;
}

@media (max-width: 480px) {
  .dash-hero-card {
    padding: 16px;
  }

  .dash-hero-icon {
    font-size: 20px;
  }

  .dash-hero-value {
    font-size: 24px;
  }
}

/* Dashboard Main Grid */
.dash-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
  .dash-main-grid {
    grid-template-columns: 1fr;
  }
}

/* Section Tabs Scroll */
.section-tabs {
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 480px) {
  .section-tabs {
    gap: 0;
  }

  .section-tabs .tab-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* Visitor Cards Grid */
#visitorTabContent [style*="repeat(auto-fill, minmax(320px"] {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}

/* Leads Dashboard Grid */
.leads-dashboard-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .leads-dashboard-widgets {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .leads-dashboard-widgets {
    grid-template-columns: 1fr;
  }
}

/* Chat Widget Responsive */
.chat-widget {
  width: 320px;
  max-width: calc(100vw - 32px);
}

@media (max-width: 480px) {
  .chat-widget {
    width: calc(100vw - 16px);
    max-width: 100%;
  }

  .chat-header {
    padding: 12px;
  }

  .chat-messages {
    height: 300px;
  }
}

/* Command Palette Responsive */
.cp-dialog {
  max-width: 95vw !important;
  width: 95vw !important;
}

@media (max-width: 480px) {
  .cp-dialog {
    max-width: 98vw !important;
    width: 98vw !important;
  }

  .cp-input {
    font-size: 14px;
  }
}

/* Date/Time Inputs */
input[type="time"],
input[type="date"] {
  min-height: 40px;
}

@media (max-width: 480px) {

  input[type="time"],
  input[type="date"] {
    width: 100%;
  }
}

/* Group Lesson Modal Responsive */
#groupLessonModal .modal-content {
  max-width: 680px;
  width: 95vw;
}

@media (max-width: 768px) {
  #groupLessonModal .modal-content {
    max-width: 95vw !important;
    width: 95vw !important;
  }

  #groupLessonModal .schedule-type-selector {
    flex-direction: column;
  }

  #groupLessonModal .form-row {
    flex-direction: column;
    gap: 12px;
  }

  #groupLessonModal .form-row .form-group {
    flex: none;
    width: 100%;
  }
}

/* Schedule Type Selector */
.schedule-type-selector {
  display: flex;
  gap: 12px;
}

.schedule-type-option {
  flex: 1;
  padding: 14px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
}

.schedule-type-option:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.schedule-type-option.selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

/* Form Row */
.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.form-row .form-group {
  flex: 1;
}

@media (max-width: 480px) {
  .form-row {
    flex-direction: column;
    gap: 12px;
  }
}

/* Schedule Radio Labels */
.schedule-radio-label {
  padding: 12px 14px;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
}

.schedule-radio-label:hover {
  border-color: var(--accent);
}

.schedule-radio-label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

@media (max-width: 480px) {
  .schedule-radio-label {
    padding: 10px 12px;
  }

  .schedule-radio-label span:first-of-type {
    font-size: 18px !important;
  }
}

/* Weekly Schedule Slots */
#glWeeklyScheduleSlots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.week-slot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--secondary-bg);
  border-radius: 8px;
  flex-wrap: wrap;
}

.week-slot-row select,
.week-slot-row input[type="time"] {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
}

@media (max-width: 480px) {
  .week-slot-row {
    flex-direction: column;
    align-items: stretch;
  }

  .week-slot-row select,
  .week-slot-row input {
    width: 100%;
  }
}

/* Sessions List */
#glSessionsList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.session-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--secondary-bg);
  border-radius: 8px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .session-row {
    flex-direction: column;
    align-items: stretch;
  }

  .session-row>* {
    width: 100%;
  }
}

/* Lesson Type Selector in Modal */
#groupLessonModal label.schedule-type-option {
  min-height: 80px;
}

/* Schedule Hours Modal Grid Responsive */
.schedule-hours-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

@media (max-width: 1100px) {
  .schedule-hours-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .schedule-hours-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .schedule-hours-grid {
    grid-template-columns: 1fr;
  }
}

/* Color input fix for mobile */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 2px;
}

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

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

/* Touch-friendly form inputs */
@media (max-width: 768px) {

  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px !important;
  }

  select {
    background-position: right 12px center;
    padding-right: 36px;
  }
}

/* Modal scrollbar for mobile */
.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

@media (max-width: 768px) {
  .modal-body::-webkit-scrollbar {
    width: 4px;
  }
}

/* Button icons on mobile */
@media (max-width: 480px) {
  .btn .btn-icon {
    font-size: 16px;
  }
}

/* Close button on modal */
.modal-close,
.close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--secondary-bg);
  color: var(--text-primary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.modal-close:hover,
.close-btn:hover {
  background: var(--danger-subtle);
  color: var(--danger-color);
}

/* Print styles - hide sidebar and unnecessary elements */
@media print {

  .sidebar,
  .section-header .btn,
  .modal-footer,
  .pagination-container {
    display: none !important;
  }

  .content-area {
    padding: 0;
    margin: 0;
  }

  .institution-section {
    display: block !important;
  }
}

/* Filter Row Responsive */
.filter-row {
  flex-wrap: wrap;
  gap: 12px;
}

.filter-row select,
.filter-row input {
  flex: 1;
  min-width: 140px;
}

@media (max-width: 768px) {

  .filter-row select,
  .filter-row input {
    min-width: 120px;
  }
}

@media (max-width: 480px) {

  .filter-row select,
  .filter-row input {
    width: 100%;
    min-width: unset;
  }
}

/* Institution Alerts */
.inst-alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.inst-alert-warning {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.inst-alert-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

.inst-alert-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
}

/* Infirmary Section Improvements */
#instInfirmary .section-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0.02));
  border-bottom: 1px solid var(--border-color);
  margin: -20px -20px 20px -20px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

#instInfirmary .section-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

#instInfirmary .section-tabs {
  margin-bottom: 20px;
}

#instInfirmary .tab-content {
  padding: 0;
}

/* Stat mini cards in infirmary */
#instInfirmary .dash-stat-mini {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

#instInfirmary .dash-stat-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#instInfirmary .dash-stat-mini-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: linear-gradient(135deg, var(--accent), #10b981);
}

#instInfirmary .dash-stat-mini-icon svg {
  color: white;
}

#instInfirmary .dash-stat-mini-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

#instInfirmary .dash-stat-mini-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Admin Institution Detail Mini Stat Cards */
.stat-card-mini {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-card-mini .stat-card-icon-bg {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.stat-card-mini .stat-card-icon-bg svg {
  width: 20px;
  height: 20px;
}

.stat-card-mini .stat-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.stat-card-mini .stat-card-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.stat-card-mini .stat-card-sub {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* Top Students Card */
.top-students-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.top-student-row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  gap: 10px;
}

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

.top-student-rank {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.top-student-name {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-student-meta {
  color: var(--text-secondary);
  font-size: 12px;
  flex-shrink: 0;
}

.top-student-score {
  background: var(--accent-light);
  color: var(--accent);
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

/* Class List Card */
.class-list-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.class-row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  gap: 10px;
}

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

.class-row-icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.class-row-icon svg {
  width: 16px;
  height: 16px;
}

.class-row-name {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-row-meta {
  color: var(--text-secondary);
  font-size: 12px;
  flex-shrink: 0;
}

.class-row-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.badge-active {
  background: var(--success-bg);
  color: var(--success-color);
}

.badge-inactive {
  background: var(--border-color);
  color: var(--text-tertiary);
}

/* Empty state icon SVG sizing */
.empty-state-icon svg {
  width: 32px;
  height: 32px;
}

/* Demo requests CRM */
.demo-empty-state {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.demo-crm-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-crm-hero,
.demo-funnel-wrap,
.demo-pipeline-col {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}

.demo-crm-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.demo-crm-hero h3 {
  margin: 4px 0 6px;
  font-size: 20px;
  color: var(--text-primary);
}

.demo-crm-hero p {
  max-width: 780px;
  margin: 0;
  color: var(--text-secondary);
}

.demo-overline {
  font-size: 11px;
  font-weight: 800;
  color: var(--primary-color, #2c3e8c);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo-insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.demo-insight-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 9px;
}

.demo-insight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--primary-color, #2c3e8c);
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 10%, transparent);
}

.demo-insight-value {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}

.demo-insight-label {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
}

.demo-insight-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-secondary);
}

.demo-funnel-wrap {
  padding: 16px;
}

.demo-block-title,
.demo-pipeline-head,
.demo-funnel-top,
.demo-funnel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.demo-block-title {
  margin-bottom: 14px;
}

.demo-block-title h4 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 15px;
  color: var(--text-primary);
}

.demo-block-title span,
.demo-funnel-foot,
.demo-pipeline-empty {
  font-size: 12px;
  color: var(--text-secondary);
}

.demo-funnel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.demo-funnel-stage {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--secondary-bg);
}

.demo-funnel-top span {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
}

.demo-funnel-top strong {
  font-size: 20px;
  color: var(--text-primary);
}

.demo-funnel-bar {
  height: 8px;
  margin: 10px 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border-color);
}

.demo-funnel-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary-color, #2c3e8c), #10b981);
}

.demo-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(420px, 100%);
  flex: 1;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-secondary);
}

.demo-search-wrap input,
.demo-toolbar select {
  min-height: 38px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-primary);
}

.demo-search-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.demo-toolbar select {
  padding: 0 12px;
}

.demo-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.demo-pipeline-col {
  min-width: 160px;
  padding: 12px;
}

.demo-pipeline-head {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 900;
  color: var(--text-primary);
}

.demo-pipeline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-pipeline-item {
  display: block;
  width: 100%;
  padding: 10px;
  text-align: left;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--secondary-bg);
  color: var(--text-primary);
  cursor: pointer;
}

.demo-pipeline-item:hover {
  border-color: var(--primary-color, #2c3e8c);
  background: var(--hover-bg);
}

.demo-pipeline-item strong,
.demo-pipeline-item span,
.demo-pipeline-item em,
.td-date strong,
.td-name strong,
.demo-email {
  display: block;
}

.demo-pipeline-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.demo-pipeline-item span,
.demo-pipeline-item em {
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-secondary);
}

.demo-pipeline-item em {
  font-style: normal;
  color: var(--primary-color, #2c3e8c);
}

.demo-requests-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}

.demo-requests-table {
  min-width: 1240px;
  border-collapse: separate;
  border-spacing: 0;
}

.demo-requests-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--card-bg) 92%, var(--primary-color, #2c3e8c) 8%);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
}

.demo-requests-table tbody tr {
  transition: background .18s ease, box-shadow .18s ease;
}

.demo-requests-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 4%, var(--card-bg));
}

.demo-requests-table td {
  vertical-align: top;
  padding: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
}

.demo-requests-table tbody tr:last-child td {
  border-bottom: 0;
}

.demo-requests-table th:nth-child(1),
.demo-requests-table td:nth-child(1) {
  width: 94px;
}

.demo-requests-table th:nth-child(2),
.demo-requests-table td:nth-child(2) {
  min-width: 190px;
}

.demo-requests-table th:nth-child(3),
.demo-requests-table td:nth-child(3) {
  min-width: 190px;
}

.demo-requests-table th:nth-child(4),
.demo-requests-table td:nth-child(4) {
  min-width: 150px;
}

.demo-requests-table th:nth-child(5),
.demo-requests-table td:nth-child(5) {
  min-width: 190px;
}

.demo-requests-table th:nth-child(6),
.demo-requests-table td:nth-child(6) {
  min-width: 170px;
}

.demo-requests-table th:nth-child(7),
.demo-requests-table td:nth-child(7) {
  min-width: 120px;
}

.demo-requests-table th:nth-child(8),
.demo-requests-table td:nth-child(8) {
  min-width: 210px;
}

.demo-id-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--secondary-bg);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
}

.demo-primary-cell,
.demo-contact-stack,
.demo-plan-cell,
.demo-account-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.demo-primary-cell strong {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text-primary);
}

.demo-primary-cell span,
.demo-plan-cell span,
.demo-plan-cell em,
.demo-remaining {
  font-size: 12px;
  color: var(--text-secondary);
}

.demo-plan-cell strong {
  font-size: 13px;
  color: var(--text-primary);
}

.demo-plan-cell em,
.demo-remaining,
.demo-contact-stack a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
}

.demo-contact-stack a {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
}

.demo-contact-stack a:hover {
  color: var(--primary-color, #2c3e8c);
}

.demo-contact-stack a.text-secondary {
  color: var(--text-secondary);
  font-weight: 600;
}

.demo-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.demo-chip {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--secondary-bg);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.demo-chip-success {
  background: rgba(16, 185, 129, .12);
  color: #059669;
}

.demo-chip-warning {
  background: rgba(245, 158, 11, .14);
  color: #b45309;
}

.demo-chip-info {
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 12%, transparent);
  color: var(--primary-color, #2c3e8c);
}

.demo-email {
  display: inline-flex;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 8%, transparent);
  color: var(--primary-color, #2c3e8c);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
}

.td-date strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
}

.td-date .text-secondary {
  display: block;
  margin-top: 5px;
  font-size: 12px;
}

.td-status .status-select {
  width: 100%;
  min-height: 34px;
  padding: 0 30px 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}

.td-status .status-new {
  border-color: rgba(59, 130, 246, .36);
  background-color: rgba(59, 130, 246, .08);
  color: #2563eb;
}

.td-status .status-contacted,
.td-status .status-demo {
  border-color: rgba(245, 158, 11, .38);
  background-color: rgba(245, 158, 11, .11);
  color: #b45309;
}

.td-status .status-trial {
  border-color: rgba(99, 102, 241, .34);
  background-color: rgba(99, 102, 241, .1);
  color: #2c3e8c;
}

.td-status .status-converted {
  border-color: rgba(16, 185, 129, .36);
  background-color: rgba(16, 185, 129, .12);
  color: #047857;
}

.td-status .status-lost {
  border-color: rgba(239, 68, 68, .34);
  background-color: rgba(239, 68, 68, .1);
  color: #b91c1c;
}

.td-actions {
  display: grid;
  grid-template-columns: repeat(4, 32px);
  align-items: center;
  gap: 6px;
}

.td-actions .btn.btn-small.btn-ghost {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
}

.td-actions .demo-convert-btn {
  grid-column: span 3;
  min-height: 32px;
  justify-content: center;
  white-space: nowrap;
}

.demo-no-results {
  min-height: 220px;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-secondary);
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
}

.demo-no-results.active {
  display: flex;
}

.demo-detail-modal {
  margin: -6px;
}

.demo-detail-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #2c3e8c) 9%, transparent), transparent 56%),
    var(--secondary-bg);
}

.demo-detail-title {
  min-width: 0;
}

.demo-detail-title h3 {
  margin: 8px 0 6px;
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1.15;
}

.demo-detail-title p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.demo-detail-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(104px, 1fr));
  gap: 8px;
  min-width: 240px;
}

.demo-detail-metrics>div {
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--card-bg);
}

.demo-detail-metrics strong {
  display: block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 20px;
  line-height: 1.1;
}

.demo-detail-metrics span {
  display: block;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.demo-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.demo-detail-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--card-bg);
}

.demo-detail-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 9%, transparent);
  color: var(--primary-color, #2c3e8c);
}

.demo-detail-item dt {
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.demo-detail-item dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 750;
}

.demo-detail-item a {
  color: var(--primary-color, #2c3e8c);
  text-decoration: none;
}

.demo-detail-item a:hover {
  text-decoration: underline;
}

.demo-detail-item code {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  padding: 3px 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 8%, transparent);
  color: var(--primary-color, #2c3e8c);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.demo-detail-notes {
  margin-top: 14px;
}

.demo-detail-notes h4 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 13px;
}

.demo-detail-notes pre {
  max-height: 220px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--secondary-bg);
  color: var(--text-primary);
}

.demo-detail-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.demo-detail-actions .btn {
  min-height: 36px;
}

.demo-quick-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.demo-action-modal label {
  display: block;
  margin: 12px 0 6px;
  font-weight: 800;
  color: var(--text-primary);
}

.demo-action-modal p {
  margin: 0 0 12px;
  color: var(--text-secondary);
}

.demo-action-modal .form-textarea {
  width: 100%;
  min-height: 118px;
  padding: 13px 14px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-color, #2c3e8c) 3%, transparent), transparent 52%),
    var(--card-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.demo-action-modal .form-textarea:hover {
  border-color: var(--border-strong);
  background: var(--input-bg-hover, var(--card-bg));
}

.demo-action-modal .form-textarea:focus {
  outline: none;
  border-color: var(--input-border-focus, var(--primary-color, #2c3e8c));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary-color, #2c3e8c) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  background: var(--input-bg, var(--card-bg));
}

.demo-action-modal .form-textarea::placeholder {
  color: var(--text-tertiary);
}

.demo-current-expiry {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--secondary-bg);
}

.demo-current-expiry strong {
  display: block;
  font-size: 22px;
  color: var(--text-primary);
}

.demo-current-expiry span {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
}

#institutionsList.admin-institutions-panel,
#institutionsList.cards-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

/* Modern payment list */
#paymentsList.contracts-list-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 92%, var(--accent) 8%), var(--card-bg));
  overflow: visible;
}

#paymentsList .payment-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-bg) 86%, var(--surface, #fff) 14%);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 8%, transparent);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

#paymentsList .payment-list-item::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--success-color);
}

#paymentsList .payment-list-item.expense::before {
  background: var(--danger-color);
}

#paymentsList .payment-list-item:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border-color));
  background: color-mix(in srgb, var(--hover-bg) 50%, var(--card-bg));
  box-shadow: 0 8px 18px color-mix(in srgb, #000 10%, transparent);
  transform: translateY(-1px);
}

#paymentsList .payment-list-item.bulk-mode {
  grid-template-columns: 22px 44px minmax(0, 1fr) auto;
}

#paymentsList .payment-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

#paymentsList .payment-list-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--success-color);
  background: color-mix(in srgb, var(--success-color) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--success-color) 22%, transparent);
}

#paymentsList .payment-list-item-icon.expense {
  color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 12%, var(--card-bg));
  border-color: color-mix(in srgb, var(--danger-color) 22%, transparent);
}

#paymentsList .payment-list-item-icon svg {
  width: 18px;
  height: 18px;
}

#paymentsList .payment-list-item-info {
  min-width: 0;
}

#paymentsList .payment-list-item-name {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#paymentsList .payment-list-item-desc {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#paymentsList .payment-list-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
  color: var(--text-tertiary);
  font-size: 12px;
}

#paymentsList .payment-list-item-meta-chip,
#paymentsList .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1;
}

#paymentsList .payment-list-item-meta-chip {
  background: color-mix(in srgb, var(--secondary-bg) 72%, transparent);
  color: var(--text-secondary);
}

#paymentsList .payment-list-item-meta-chip svg {
  width: 13px;
  height: 13px;
}

#paymentsList .payment-list-item-amount {
  justify-self: end;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

#paymentsList .payment-list-item-amount.income {
  color: var(--success-color);
  background: color-mix(in srgb, var(--success-color) 10%, transparent);
}

#paymentsList .payment-list-item-amount.expense {
  color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 10%, transparent);
}

@media (max-width: 640px) {
  #paymentsList.contracts-list-panel {
    padding: 8px;
  }

  #paymentsList .payment-list-item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  #paymentsList .payment-list-item.bulk-mode {
    grid-template-columns: 22px 40px minmax(0, 1fr);
  }

  #paymentsList .payment-list-item-icon {
    width: 38px;
    height: 38px;
  }

  #paymentsList .payment-list-item-amount {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
    margin-top: 2px;
    text-align: left;
  }

  #paymentsList .payment-list-item.bulk-mode .payment-list-item-amount {
    grid-column: 3;
  }
}

/* Responsive leads workspace */
#leadsSection {
  min-width: 0;
}

#leadsSection,
#leadsSection * {
  box-sizing: border-box;
}

#leadsSection .leads-section-header {
  min-width: 0;
}

#leadsSection .leads-section-header>div:first-child {
  min-width: 0;
  flex-wrap: wrap;
}

#leadsSection .leads-section-header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#leadsSearchInput {
  width: min(220px, 100%) !important;
}

#leadsSection .leads-header-actions {
  min-width: 0;
}

#leadsSection .leads-header-actions>.search-box {
  flex: 1 1 190px;
  min-width: min(190px, 100%);
}

#leadsSection .leads-view-buttons {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

#leadsSection .leads-view-buttons .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

#leadsSection .leads-header-actions>.btn,
#leadsSection .leads-header-actions>.dropdown {
  flex: 0 0 auto;
}

#leadsSection .leads-dashboard-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  overflow: visible;
}

#leadsSection .leads-dashboard-widgets .stat-card {
  min-width: 0;
  width: 100%;
}

#leadsSection .leads-list-container {
  min-width: 0;
}

#leadsSection .leads-list-container,
#leadsSection .leads-kanban-container,
#leadsSection .leads-calendar-layout {
  max-width: 100%;
}

#leadsSection .leads-table {
  min-width: 980px;
}

#leadsSection .leads-table td,
#leadsSection .leads-table th {
  vertical-align: middle;
}

#leadsSection .lead-name,
#leadsSection .lead-parent {
  overflow-wrap: anywhere;
}

#leadsSection .lead-phone,
#leadsSection .lead-tc,
#leadsSection .source-tag,
#leadsSection .status-badge {
  white-space: nowrap;
}

#leadsSection .score-cell {
  min-width: 92px;
}

#leadsSection .actions-col {
  white-space: nowrap;
}

#leadsSection .leads-kanban-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#leadsSection .kanban-columns {
  align-items: stretch;
}

#leadsSection .kanban-column {
  min-width: 260px;
}

#leadsSection .leads-calendar-layout {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#leadsSection .calendar-grid {
  min-width: 680px;
}

#leadDetailPanel {
  width: min(500px, 100vw);
}

#leadDetailPanel .lead-detail-header,
#leadDetailPanel .lead-detail-actions {
  min-width: 0;
}

#leadDetailPanel .lead-detail-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Leads Calendar: Modern ─────────────────────────────────────────── */
#leadsCalendarView .leads-calendar-layout {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#leadsCalendarView .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 0;
  border: none;
  background: transparent;
  flex-wrap: wrap;
}

#leadsCalendarView .calendar-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#leadsCalendarView .calendar-month-label {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin: 0;
}

#leadsCalendarView .calendar-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#leadsCalendarView .calendar-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: 500;
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

#leadsCalendarView .calendar-stat-badge strong {
  color: var(--text-primary);
  font-weight: 700;
}

#leadsCalendarView .calendar-stat-badge.today-stat strong {
  color: var(--primary-color);
}

#leadsCalendarView .calendar-stat-badge.overdue-stat strong {
  color: var(--danger-color);
}

#leadsCalendarView .calendar-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#leadsCalendarView .calendar-filter-select {
  padding: 8px 30px 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

#leadsCalendarView .calendar-filter-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

#leadsCalendarView .calendar-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

#leadsCalendarView .calendar-nav-btn:hover {
  background: var(--accent-subtle);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

#leadsCalendarView .calendar-nav-btn:active {
  transform: scale(0.94);
}

#leadsCalendarView .calendar-grid {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none;
}

#leadsCalendarView .calendar-days-header {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

#leadsCalendarView .calendar-days-header>div {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 0;
}

#leadsCalendarView .calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

#leadsCalendarView .calendar-day {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  min-height: 96px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}

#leadsCalendarView .calendar-day:not(.empty):hover {
  background: var(--card-bg);
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

#leadsCalendarView .calendar-day.empty {
  background: transparent;
  border: 1px dashed var(--border-color);
  opacity: 0.4;
  min-height: 96px;
}

#leadsCalendarView .calendar-day.today {
  background: var(--accent-subtle);
  border-color: var(--primary-color);
}

#leadsCalendarView .calendar-day.today .day-number {
  color: var(--primary-color);
  font-weight: 800;
}

#leadsCalendarView .calendar-day.has-followups {
  border-left: 3px solid var(--primary-color);
}

#leadsCalendarView .calendar-day .day-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

#leadsCalendarView .calendar-day .day-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#leadsCalendarView .day-followup-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 6px;
  background: var(--card-bg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 0;
  border-left: 2px solid transparent;
}

#leadsCalendarView .day-followup-item:hover {
  background: var(--accent-subtle);
  border-color: var(--primary-color);
  transform: translateX(2px);
}

#leadsCalendarView .day-followup-item.is-overdue {
  border-left-color: var(--danger-color);
}

#leadsCalendarView .followup-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.3px;
}

#leadsCalendarView .followup-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#leadsCalendarView .followup-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

#leadsCalendarView .followup-time {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.2;
}

#leadsCalendarView .followup-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.3px;
}

#leadsCalendarView .followup-overdue-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--danger-color);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}

#leadsCalendarView .day-more {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 2px 0;
  cursor: pointer;
  font-weight: 600;
}

#leadsCalendarView .day-more:hover {
  color: var(--primary-color);
}

/* ── Leads Calendar: Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  #leadsCalendarView .leads-calendar-layout {
    padding: 14px;
  }

  #leadsCalendarView .calendar-header {
    flex-direction: column;
    align-items: stretch;
  }

  #leadsCalendarView .calendar-header-right {
    justify-content: flex-end;
  }

  #leadsCalendarView .calendar-month-label {
    font-size: 18px;
  }

  #leadsCalendarView .calendar-stat-badge {
    font-size: 11px;
    padding: 3px 8px;
  }

  #leadsCalendarView .calendar-day {
    min-height: 76px;
    padding: 6px;
  }

  #leadsCalendarView .calendar-day .day-number {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  #leadsCalendarView .leads-calendar-layout {
    padding: 12px;
  }

  #leadsCalendarView .calendar-day {
    min-height: 64px;
    padding: 4px;
  }

  #leadsCalendarView .followup-avatar {
    width: 18px;
    height: 18px;
    font-size: 9px;
  }

  #leadsCalendarView .followup-name {
    font-size: 10px;
  }

  #leadsCalendarView .followup-time {
    font-size: 9px;
  }

  #leadsCalendarView .followup-grade-badge {
    min-width: 16px;
    height: 16px;
    font-size: 8px;
  }

  #leadsCalendarView .followup-overdue-dot {
    width: 14px;
    height: 14px;
    font-size: 9px;
  }
}

#leadFormModal .lead-form-modal {
  width: min(800px, calc(100vw - 32px));
}

@media (max-width: 1100px) {
  #leadsSection .leads-section-header {
    align-items: stretch;
  }

  #leadsSection .leads-header-actions {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    align-items: center;
  }

  #leadsSection .leads-view-buttons {
    grid-column: 1 / -1;
    order: 2;
  }

  #leadsSection .leads-header-actions>.search-box {
    grid-column: 1;
  }
}

@media (max-width: 900px) {
  #leadsSection .leads-view {
    padding: 16px;
  }

  #leadsSection .dashboard-charts-row,
  #leadsSection .analytics-charts {
    grid-template-columns: 1fr;
  }

  #leadsSection .kanban-columns {
    display: flex;
    gap: 14px;
    min-width: max-content;
  }

  #leadsSection .kanban-column {
    flex: 0 0 min(300px, calc(100vw - 72px));
    max-width: none;
  }

  #leadFormModal .lead-form-modal .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #leadsSection .leads-section-header {
    padding: 14px;
  }

  #leadsSection .leads-header-actions {
    grid-template-columns: 1fr 1fr;
  }

  #leadsSection .leads-header-actions>.search-box {
    grid-column: 1 / -1;
  }

  #leadsSection .leads-header-actions>.btn,
  #leadsSection .leads-header-actions>.dropdown {
    width: 100%;
  }

  #leadsSection .leads-header-actions>.btn,
  #leadsSection .leads-header-actions>.dropdown>.btn {
    width: 100%;
    justify-content: center;
  }

  #leadsSection .leads-dashboard-widgets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
  }

  #leadsSection .leads-list-container {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  #leadsSection .leads-table {
    display: block;
    min-width: 0;
    width: 100%;
  }

  #leadsSection .leads-table thead {
    display: none;
  }

  #leadsSection .leads-table tbody {
    display: grid;
    gap: 10px;
  }

  #leadsSection .leads-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    box-shadow: var(--shadow-xs);
  }

  #leadsSection .leads-table tr:hover {
    background: var(--card-bg);
  }

  #leadsSection .leads-table td {
    display: grid;
    grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
  }

  #leadsSection .leads-table td:last-child {
    border-bottom: 0;
  }

  #leadsSection .leads-table td::before {
    content: attr(data-label);
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
  }

  #leadsSection .leads-table .checkbox-col {
    width: auto;
  }

  #leadsSection .leads-table .checkbox-col,
  #leadsSection .leads-table .actions-col {
    grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr);
  }

  #leadsSection .actions-col {
    grid-template-columns: minmax(96px, 0.42fr) repeat(4, 36px);
    justify-content: start;
    white-space: normal;
  }

  #leadsSection .actions-col::before {
    grid-column: 1;
  }

  #leadsSection .actions-col>button {
    width: 34px;
    height: 34px;
  }

  #leadsSection .score-cell {
    width: 100%;
  }

  #leadsSection .score-bar {
    flex: 1;
    width: auto;
  }

  #leadsSection .leads-pagination {
    flex-wrap: wrap;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 10px;
  }

  #leadsSection .leads-pagination .btn {
    flex: 1 1 120px;
  }

  #leadsSection .pagination-info {
    order: -1;
    flex: 1 0 100%;
    text-align: center;
  }

  #leadsSection .calendar-header {
    min-width: 560px;
  }

  #leadsSection .calendar-grid {
    min-width: 560px;
  }

  #leadsSection .calendar-day {
    min-height: 86px;
    padding: 6px;
  }

  #leadDetailPanel .lead-detail-header {
    flex-direction: column;
    gap: 12px;
  }

  #leadDetailPanel .lead-detail-actions {
    justify-content: flex-start;
  }

  #leadFormModal .lead-form-modal {
    width: min(100vw - 16px, 800px);
  }

  #leadFormModal .lead-form-modal .modal-body {
    padding: 16px;
  }

  #leadFormModal .lead-form-modal .form-section {
    padding: 14px;
  }
}

.heatmap-overview-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.heatmap-overview-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  min-width: 0;
  padding: 12px;
}

.heatmap-overview-card span,
.heatmap-result-count {
  color: var(--text-secondary);
  display: block;
  font-size: 11px;
  font-weight: 700;
}

.heatmap-overview-card strong {
  color: var(--text-primary);
  display: block;
  font-size: 18px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heatmap-control-bar,
.heatmap-legend-row,
.heatmap-density-legend,
.heatmap-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.heatmap-search {
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  flex: 1 1 240px;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
}

.heatmap-search input {
  background: transparent;
  border: 0;
  color: var(--text-primary);
  min-width: 0;
  outline: 0;
  width: 100%;
}

.heatmap-sort-select {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  min-height: 38px;
  padding: 0 10px;
}

.heatmap-pagination {
  justify-content: space-between;
}

.heatmap-pagination>div {
  align-items: center;
  display: flex;
  gap: 6px;
}

.heatmap-density-legend {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  margin-top: 18px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 24px;
}

.heatmap-legend-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.heatmap-legend-block:first-child {
  flex: 1 1 320px;
}

.heatmap-legend-block:nth-child(2) {
  flex: 1 1 280px;
}

.heatmap-legend-block-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.heatmap-legend-block-title svg {
  color: var(--primary-color);
}

.heatmap-density-bar {
  display: flex;
  gap: 2px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-color);
}

.heatmap-density-step {
  width: 32px;
  height: 24px;
  display: block;
  position: relative;
  cursor: help;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.heatmap-density-step:hover {
  transform: scaleY(1.15);
  box-shadow: 0 0 0 2px var(--primary-color);
  z-index: 1;
}

.heatmap-density-step::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text-primary);
  color: var(--card-bg);
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
  letter-spacing: 0;
  text-transform: none;
}

.heatmap-density-step::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 4px solid transparent;
  border-top-color: var(--text-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

.heatmap-density-step:hover::after,
.heatmap-density-step:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.heatmap-density-range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
}

.heatmap-legend-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.heatmap-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: default;
  transition: all 0.18s ease;
}

.heatmap-type-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.heatmap-type-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3px currentColor;
  flex-shrink: 0;
}

.heatmap-type-label {
  line-height: 1.2;
}

.heatmap-legend-tip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--accent-subtle);
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
  flex-basis: 100%;
  margin-top: 4px;
}

.heatmap-legend-tip svg {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .heatmap-density-legend {
    padding: 14px;
    gap: 18px;
  }

  .heatmap-density-step {
    width: 26px;
    height: 22px;
  }

  .heatmap-type-chip {
    padding: 5px 10px;
    font-size: 12px;
  }
}

.heatmap-mobile-grid {
  display: none;
}

.heatmap-mobile-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
}

.heatmap-mobile-card-head,
.heatmap-mobile-stats {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.heatmap-mobile-card-head span,
.heatmap-mobile-stats span {
  color: var(--text-secondary);
  font-size: 11px;
}

.heatmap-mobile-days {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 10px;
}

.heatmap-mobile-day {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  min-height: 54px;
  padding: 6px 2px;
}

.heatmap-mobile-day span,
.heatmap-mobile-day strong {
  display: block;
  line-height: 1.1;
}

.ehm,
.hm-cal {
  max-width: 100%;
  min-width: 0;
}

.ehm .hm-cal {
  overflow-x: auto;
}

@media (max-width: 860px) {
  .heatmap-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .heatmap-table-wrapper {
    display: none;
  }

  .heatmap-mobile-grid {
    display: grid;
    gap: 10px;
  }

  .heatmap-control-bar,
  .heatmap-density-legend,
  .heatmap-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .heatmap-sort-select,
  .heatmap-result-count {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .heatmap-overview-grid {
    grid-template-columns: 1fr;
  }

  .heatmap-mobile-days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  #leadsSection .leads-section-header>div:first-child {
    align-items: flex-start;
  }

  #leadsSection .leads-section-header h2 {
    font-size: 18px;
    line-height: 1.25;
  }

  #leadsSection .badge {
    margin-top: 2px;
  }

  #leadsSection .leads-header-actions {
    grid-template-columns: 1fr;
  }

  #leadsSection .leads-view-buttons {
    padding: 5px;
  }

  #leadsSection .leads-view-buttons .btn {
    padding: 8px 10px;
  }

  #leadsSection .leads-dashboard-widgets {
    grid-template-columns: 1fr;
  }

  #leadsSection .leads-view {
    padding: 10px;
  }

  #leadsSection .leads-table td,
  #leadsSection .leads-table .checkbox-col,
  #leadsSection .leads-table .actions-col {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  #leadsSection .actions-col {
    grid-template-columns: repeat(4, 36px);
  }

  #leadsSection .actions-col::before {
    grid-column: 1 / -1;
  }

  #leadDetailPanel .slide-panel-content {
    padding: 16px;
  }

  #leadDetailPanel .lead-detail-name {
    font-size: 20px;
  }

  #leadDetailPanel .lead-detail-meta {
    flex-wrap: wrap;
  }
}

.admin-inst-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.admin-inst-summary-grid .stat-card {
  min-width: 0;
  min-height: 92px;
  padding: 14px;
}

.admin-inst-summary-grid .stat-icon {
  width: 42px;
  height: 42px;
}

.admin-inst-summary-grid .stat-value {
  font-size: 24px;
  letter-spacing: 0;
}

.admin-inst-demo-stat {
  background: linear-gradient(135deg, rgba(249, 115, 22, .12), rgba(245, 158, 11, .18));
  border-color: rgba(249, 115, 22, .24);
}

.admin-inst-demo-stat .stat-icon {
  color: #c2410c;
}

.admin-inst-filter-panel {
  margin-bottom: 0;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

.admin-inst-filter-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(4, minmax(132px, .7fr)) auto;
  gap: 10px;
  align-items: center;
}

.admin-inst-search {
  min-width: 0;
}

.admin-inst-filter-input,
.admin-inst-filter-select {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.admin-inst-filter-select {
  min-width: 0;
  background: var(--card-bg);
}

.admin-inst-filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}

.admin-inst-filter-actions .btn {
  min-height: 38px;
  padding: 8px 12px;
}

.admin-inst-icon-btn {
  width: 38px;
  padding-inline: 0 !important;
}

.admin-inst-sort-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-inst-sort-row>span:first-child {
  color: var(--text-secondary);
  font-size: 12px;
}

.admin-inst-result-note {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 12px;
}

.admin-institution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.admin-institution-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 10px;
  min-width: 0;
  overflow: hidden;
}

.admin-institution-card.archived {
  opacity: .7;
  border-style: dashed;
}

.admin-inst-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.admin-inst-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-inst-title h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 15px;
}

.admin-inst-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  color: var(--primary-color, #2c3e8c);
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 10%, transparent);
}

.admin-inst-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-inst-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
}

.admin-inst-badge.demo {
  background: rgba(249, 115, 22, .14);
  color: #c2410c;
}

.admin-inst-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
  color: var(--text-secondary);
  font-size: 12px;
}

.admin-inst-meta div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.admin-inst-meta svg {
  flex: 0 0 auto;
}

.admin-inst-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-inst-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--secondary-bg);
}

.admin-inst-stats div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 11px;
}

.admin-inst-stats svg {
  color: var(--primary-color, #2c3e8c);
}

.admin-inst-stats strong {
  min-width: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-inst-stats span {
  color: var(--text-secondary);
}

.admin-inst-demo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(249, 115, 22, .18);
  border-radius: 9px;
  background: rgba(249, 115, 22, .08);
  font-size: 12px;
}

.admin-inst-demo span {
  color: var(--text-secondary);
}

.admin-inst-demo strong {
  color: #c2410c;
}

.admin-institution-card .card-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: auto;
}

.admin-institution-card .card-actions .btn,
.admin-inst-action-btn {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  justify-content: center;
  padding-inline: 0;
}

.admin-institution-card .card-actions svg {
  flex: 0 0 auto;
}

.admin-inst-table-shell .table-container {
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
}

.admin-inst-table-shell {
  width: 100%;
  min-width: 0;
}

.admin-inst-table-shell table {
  min-width: 980px;
}

.admin-inst-table-shell th {
  padding: 12px 14px;
  font-size: 11px;
}

.admin-inst-table-shell td {
  padding: 12px 14px;
  vertical-align: middle;
}

.admin-inst-row-archived {
  opacity: .68;
}

.admin-inst-cell-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.admin-inst-cell-main>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-inst-cell-main strong {
  max-width: 280px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-inst-cell-main span:last-child {
  max-width: 260px;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-inst-pill-stack {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-inst-status-pill,
.admin-inst-type-pill,
.admin-inst-demo-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.admin-inst-status-pill.active {
  background: color-mix(in srgb, var(--success-color) 13%, transparent);
  color: var(--success-color);
}

.admin-inst-status-pill.archived {
  background: color-mix(in srgb, var(--warning-color) 15%, transparent);
  color: color-mix(in srgb, var(--warning-color) 78%, var(--text-primary) 22%);
}

.admin-inst-type-pill {
  background: var(--secondary-bg);
  color: var(--text-secondary);
}

.admin-inst-demo-pill {
  background: rgba(249, 115, 22, .12);
  color: #c2410c;
}

.admin-inst-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  color: var(--text-secondary);
  font-size: 12px;
}

.admin-inst-contact span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-inst-contact svg {
  flex: 0 0 auto;
  color: var(--text-tertiary);
}

.admin-inst-muted {
  color: var(--text-tertiary);
  font-size: 12px;
  white-space: nowrap;
}

.admin-inst-number-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-inst-number-cell strong,
.admin-inst-table-number {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 850;
}

.admin-inst-number-cell span {
  color: var(--success-color);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-inst-number-cell span.danger {
  color: var(--danger-color);
}

.admin-inst-plan-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.3);
}

.admin-inst-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  min-width: 186px;
}

.admin-inst-row-actions .admin-inst-action-btn {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding-inline: 0;
}

.admin-inst-row-actions svg {
  flex: 0 0 auto;
}

.admin-inst-demo-link {
  border: none;
  cursor: pointer;
  font: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-inst-demo-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(249, 115, 22, .25);
}

.admin-inst-row-focus {
  animation: adminInstRowFocus 2.2s ease;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .35) !important;
  background: color-mix(in srgb, var(--accent) 7%, transparent) !important;
}

@keyframes adminInstRowFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, .55);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
  }

  60% {
    box-shadow: 0 0 0 6px rgba(59, 130, 246, .25);
  }

  100% {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .35);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
  }
}

.demo-request-card-focus {
  animation: demoRequestCardFocus 2.2s ease;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .35) !important;
}

@keyframes demoRequestCardFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, .55);
  }

  60% {
    box-shadow: 0 0 0 6px rgba(59, 130, 246, .25);
  }

  100% {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .35);
  }
}

.instant-question-cost-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.instant-question-cost-panel>div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 4%, var(--card-bg));
}

.instant-question-cost-panel span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--primary-color, #2c3e8c);
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 11%, transparent);
}

.instant-question-cost-panel strong {
  min-width: 0;
  flex: 1;
  color: var(--text-primary);
  font-size: 13px;
}

.instant-question-cost-panel em {
  font-style: normal;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.instant-cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--card-bg);
  font-size: 11px;
  font-weight: 800;
}

.instant-cost-chip.active {
  border-color: color-mix(in srgb, var(--primary-color, #2c3e8c) 34%, transparent);
  color: var(--primary-color, #2c3e8c);
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 9%, transparent);
}

.question-usage-settings {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.question-usage-hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 5%, var(--card-bg));
}

.question-usage-hero>span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  color: var(--primary-color, #2c3e8c);
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 12%, transparent);
}

.question-usage-hero strong {
  display: block;
  color: var(--text-primary);
  font-size: 15px;
}

.question-usage-hero p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.question-usage-settings-intro {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.question-usage-settings-intro strong {
  color: var(--text-primary);
}

.question-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.question-usage-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--secondary-bg);
}

.question-usage-grid label span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 900;
}

.question-usage-grid label span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.question-usage-grid .form-input {
  width: 100%;
  min-height: 38px;
}

.question-usage-grid label em {
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: normal;
}

.question-usage-hint {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary-color, #2c3e8c) 18%, var(--border-color));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary-color, #2c3e8c) 6%, transparent);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.question-usage-hint svg {
  flex: 0 0 auto;
  color: var(--primary-color, #2c3e8c);
  margin-top: 1px;
}

.kazanim-analysis-section {
  margin: 0 0 20px;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  scroll-margin-block: 24px;
}

.kazanim-analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.kazanim-analysis-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--text-primary);
}

.kazanim-analysis-header .kazanim-analysis-title {
  margin: 0;
}

.kazanim-analysis-subtitle {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

#kazanimAnalysisContent {
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.kazanim-analysis-section .kazanim-analysis-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: var(--radius);
}

.kazanim-analysis-section .tab-btn {
  padding: 8px 16px;
  font-size: 13px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}

.kazanim-analysis-section .tab-btn:hover {
  background: var(--card-bg);
  color: var(--text-primary);
}

.kazanim-analysis-section .tab-btn.active {
  background: var(--card-bg);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.kazanim-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.kazanim-kpi-card {
  position: relative;
  min-width: 0;
  padding: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.kazanim-kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}

.kazanim-kpi-card.success::before {
  background: var(--success-color);
}

.kazanim-kpi-card.warning::before {
  background: var(--warning-color);
}

.kazanim-kpi-card.info::before {
  background: #18a8ad;
}

.kazanim-kpi-label,
.kazanim-kpi-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.kazanim-kpi-value {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
}

.kazanim-kpi-sub {
  margin-top: 4px;
}

.kazanim-insight-grid,
.kazanim-trend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.kazanim-insight-card,
.kazanim-trend-card {
  min-width: 0;
  padding: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
}

.kazanim-insight-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.kazanim-insight-head strong {
  color: var(--text-primary);
  font-size: 13px;
}

.kazanim-insight-head span {
  color: var(--text-secondary);
  font-size: 11px;
}

.kazanim-outcome-row,
.kazanim-trend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
}

.kazanim-outcome-row+.kazanim-outcome-row,
.kazanim-trend-row+.kazanim-trend-row {
  margin-top: 8px;
}

.kazanim-outcome-row strong,
.kazanim-outcome-row span,
.kazanim-trend-row strong,
.kazanim-trend-row span {
  display: block;
}

.kazanim-outcome-row strong,
.kazanim-trend-row strong {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.35;
}

.kazanim-outcome-row span,
.kazanim-trend-row span {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.kazanim-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.kazanim-subject-card {
  min-width: 0;
  padding: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
}

.kazanim-subject-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.kazanim-subject-top strong {
  min-width: 0;
  color: var(--text-primary);
  font-size: 13px;
}

.kazanim-subject-meta {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.kazanim-rate {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--card-bg);
}

.kazanim-rate span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #18a8ad);
}

.kazanim-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
}

.kazanim-performance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.kazanim-performance-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 2px solid var(--border-color);
}

.kazanim-performance-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.kazanim-performance-table tr:hover td {
  background: var(--bg-secondary);
}

.kazanim-net-positive {
  color: var(--success-color);
  font-weight: 600;
}

.kazanim-net-negative {
  color: var(--danger-color);
  font-weight: 600;
}

.kazanim-net-neutral {
  color: var(--text-secondary);
}

.kazanim-table-note,
.kazanim-mini-empty {
  color: var(--text-secondary);
  font-size: 12px;
}

.kazanim-table-note {
  margin-top: 10px;
}

.kazanim-empty {
  display: grid;
  gap: 4px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary);
}

.kazanim-empty span {
  color: var(--text-secondary);
  font-size: 12px;
}

.kazanim-trend-list {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .kazanim-analysis-section {
    margin: 0 0 18px;
    padding: 14px;
    border-radius: var(--radius);
  }

  .kazanim-analysis-header {
    align-items: stretch;
    gap: 12px;
  }

  .kazanim-analysis-section .kazanim-analysis-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .kazanim-analysis-section .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .kazanim-kpi-grid,
  .kazanim-insight-grid,
  .kazanim-trend-grid {
    grid-template-columns: 1fr;
  }

  .kazanim-performance-table {
    min-width: 620px;
  }
}

@media (max-width: 900px) {

  .demo-crm-hero,
  .demo-detail-hero {
    flex-direction: column;
  }

  .demo-funnel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-detail-metrics {
    min-width: 0;
  }

  .admin-inst-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-inst-search {
    grid-column: 1 / -1;
  }

  .admin-inst-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .admin-inst-result-note {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .demo-funnel {
    grid-template-columns: 1fr;
  }

  .demo-detail-grid,
  .demo-detail-metrics {
    grid-template-columns: 1fr;
  }

  .demo-detail-actions,
  .demo-detail-actions .btn {
    width: 100%;
  }

  .instant-question-cost-panel {
    grid-template-columns: 1fr;
  }

  .question-usage-grid {
    grid-template-columns: 1fr;
  }

  .admin-inst-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-inst-summary-grid .stat-card {
    min-height: 86px;
  }

  .admin-inst-summary-grid .stat-icon {
    width: 36px;
    height: 36px;
  }

  .admin-inst-summary-grid .stat-value {
    font-size: 22px;
  }

  .admin-inst-filter-row {
    grid-template-columns: 1fr;
  }

  .admin-inst-filter-actions,
  .admin-inst-filter-actions .btn:not(.admin-inst-icon-btn) {
    width: 100%;
  }

  .admin-institution-grid {
    grid-template-columns: 1fr;
  }

  .admin-inst-meta,
  .admin-inst-stats {
    grid-template-columns: 1fr;
  }

  .admin-institution-card .card-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .demo-search-wrap,
  .demo-toolbar select,
  .demo-hero-actions,
  .demo-hero-actions .btn {
    width: 100%;
  }
}

/* Ön muhasebe panel responsive */
#accounting {
  max-width: 100%;
  overflow-x: hidden;
}

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

#accounting .section-header h2 {
  margin-bottom: 8px;
}

#accounting .accounting-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#accounting .accounting-tab {
  flex: 0 0 auto;
  min-height: 42px;
}

#accounting .accounting-tab-icon {
  flex: 0 0 auto;
}

#accounting .accounting-tab-panel,
#accounting .contracts-list-panel,
#accounting .contracts-detail-panel,
#accounting .acc-quick-actions,
#accounting .acc-kpi-card,
#accounting .acc-cashflow,
#accounting .acc-budget,
#accounting .acc-profit-loss,
#accounting .acc-tax-card,
#accounting .acc-bank-card,
#accounting .acc-alerts,
#accounting .acc-recent,
#accounting .acc-chart-enhanced,
#accounting .upcoming-installments,
#accounting .dashboard-card,
#accounting .acc-plan-card,
#accounting .acc-salary-card {
  min-width: 0;
}

#tabDashboard>div[style*='grid-template-columns: 220px 1fr'] {
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) !important;
}

#accounting .acc-kpi-row,
#accounting .acc-dash-row {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

#accounting .acc-dash-charts {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

#accounting .acc-kpi-value,
#accounting .dashboard-card-value,
#accounting .acc-profit-loss-value,
#accounting .acc-bank-balance,
#accounting .acc-bank-total-value,
#accounting .acc-tax-value,
#accounting .acc-cashflow-value,
#accounting .contract-list-item-total,
#accounting .contract-list-item-name,
#accounting .payment-list-item-name,
#accounting .payment-list-item-amount,
#accounting .acc-plan-card,
#accounting .acc-salary-card {
  overflow-wrap: anywhere;
}

#accounting .acc-cashflow-header,
#accounting .acc-budget-header,
#accounting .acc-tax-header,
#accounting .acc-bank-header,
#accounting .acc-chart-enhanced-header,
#accounting .acc-upcoming-header,
#accounting .contract-detail-header,
#accounting .installments-header {
  gap: 10px;
  flex-wrap: wrap;
}

#accounting .acc-cashflow-tabs,
#accounting .acc-chart-period,
#accounting .contracts-dashboard,
#accounting .contracts-pagination,
#paymentsPagination,
#expensesPagination,
#invoicesPagination,
#contractsPagination {
  flex-wrap: wrap;
}

#accounting .accounting-tab-panel>div[style*='display: flex'][style*='margin-bottom: 16px'] {
  align-items: stretch !important;
}

#accounting .filter-search,
#accounting .filter-select,
#accounting .filter-date,
#accounting .filter-amount,
#accounting .accounting-tab-panel>div[style*='display: flex'][style*='margin-bottom: 16px'] .btn {
  min-height: 40px;
}

#accounting .filter-search {
  flex: 1 1 220px;
  min-width: min(220px, 100%);
}

#accounting .filter-select,
#accounting .filter-date {
  flex: 1 1 160px;
  min-width: min(160px, 100%);
}

#accounting .contracts-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
}

#accounting .contracts-list {
  max-height: min(600px, 62vh);
  overscroll-behavior: contain;
}

#accounting .contract-list-item,
#paymentsList .payment-list-item,
#expensesList .payment-list-item,
#invoicesList .payment-list-item {
  min-width: 0;
}

#accounting .contract-list-item-meta,
#paymentsList .payment-list-item-meta,
#expensesList .payment-list-item-meta,
#invoicesList .payment-list-item-meta {
  flex-wrap: wrap;
}

#accounting .contract-list-item-amount,
#paymentsList .payment-list-item-amount,
#expensesList .payment-list-item-amount,
#invoicesList .payment-list-item-amount {
  flex-shrink: 0;
}

#accounting .contract-summary-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

#accounting .contract-summary-card,
#accounting .contract-info-item {
  min-width: 0;
}

#accounting .contract-info-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}

#accounting .ci-value,
#accounting .csc-value,
#accounting .contract-notes-section p {
  overflow-wrap: anywhere;
}

#accounting .installment-item {
  min-width: 0;
  flex-wrap: wrap;
}

#accounting .installment-amount,
#accounting .installment-paid {
  min-width: 110px;
}

#ledgerList {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#ledgerList .ledger-table,
#accountSummaryList .ledger-table {
  min-width: 720px;
}

#accountSummaryList {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#accounting .calendar-grid {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#accounting .calendar-days-header,
#accounting .calendar-days-grid {
  min-width: 720px;
}

#accounting .calendar-day {
  min-width: 0;
}

#accounting .yearly-calendar-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

#accounting .acc-calendar-grid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#accounting .acc-bulk-actions {
  flex-wrap: wrap;
}

#accounting .acc-plan-header,
#accounting .acc-salary-card,
#accounting .acc-overdue-item,
#accounting .acc-recent-item {
  gap: 8px;
}

#accounting .acc-plan-header {
  flex-wrap: wrap;
}

#contractModal .modal-content,
#receiptModal .modal-content {
  width: min(960px, calc(100vw - 32px));
}

#paymentModal .modal-content,
#expenseModal .modal-content,
#invoiceModal .modal-content,
#transactionModal .modal-content,
#installmentModal .modal-content,
#salaryModal .modal-content,
#installmentPaymentModal .modal-content,
#paymentDayDetailModal .modal-content,
#installmentDetailModal .modal-content {
  width: min(560px, calc(100vw - 32px));
}

#contractModal .modal-body,
#receiptModal .modal-body,
#paymentModal .modal-body,
#expenseModal .modal-body,
#invoiceModal .modal-body,
#transactionModal .modal-body,
#installmentModal .modal-body,
#salaryModal .modal-body,
#installmentPaymentModal .modal-body,
#paymentDayDetailModal .modal-body,
#installmentDetailModal .modal-body {
  max-height: calc(90vh - 130px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#contractModal .modal-footer,
#paymentModal .modal-footer,
#expenseModal .modal-footer,
#invoiceModal .modal-footer,
#transactionModal .modal-footer,
#installmentModal .modal-footer,
#salaryModal .modal-footer,
#installmentPaymentModal .modal-footer,
#receiptModal .modal-footer {
  flex-wrap: wrap;
}

@media (max-width: 1180px) {
  #accounting .section-header>div:last-child {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  #accounting .accounting-tabs {
    flex-wrap: nowrap;
    padding: 8px 4px 0;
  }

  #tabDashboard>div[style*='grid-template-columns: 220px 1fr'] {
    grid-template-columns: 1fr !important;
  }

  .acc-dashboard-top {
    grid-template-columns: 184px minmax(0, 1fr);
    gap: 12px 14px;
  }
}

@media (max-width: 900px) {

  #accounting .accounting-tab-panel,
  #accounting .accounting-dashboard {
    padding: 18px;
  }

  #accounting .contracts-layout {
    grid-template-columns: 1fr;
  }

  #accounting .contracts-detail-panel {
    order: 0;
  }

  #accounting .accounting-tab-panel>div[style*='display: flex'][style*='margin-bottom: 16px'] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #accounting .accounting-tab-panel>div[style*='display: flex'][style*='margin-bottom: 16px'] .btn,
  #accounting .filter-search,
  #accounting .filter-select,
  #accounting .filter-date,
  #accounting .filter-amount {
    width: 100%;
    min-width: 0;
  }

  #accounting .calendar-header {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  #accounting .section-header {
    margin-bottom: 14px;
  }

  #accounting .section-header h2 {
    font-size: 21px;
  }

  #accounting .accounting-tabs {
    width: 100%;
    padding: 6px 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
  }

  #accounting .accounting-tab {
    border-radius: var(--radius-sm);
    padding: 9px 12px;
  }

  #accounting .accounting-tab-panel,
  #accounting .accounting-dashboard {
    padding: 14px;
  }

  #accounting .accounting-tab-panel>div[style*='display: flex'][style*='margin-bottom: 16px'] {
    grid-template-columns: 1fr;
  }

  #accounting .contracts-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #accounting .dashboard-card {
    min-width: 0;
  }

  #accounting .acc-kpi-row,
  #accounting .acc-dash-row,
  #accounting .acc-dash-charts {
    grid-template-columns: 1fr;
  }

  #accounting .acc-quick-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #accounting .acc-quick-actions h4 {
    flex: 1 1 100%;
  }

  #accounting .acc-quick-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 140px;
  }

  #accounting .acc-cashflow-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  #accounting .acc-cashflow-track {
    grid-column: 1 / -1;
    order: 3;
  }

  #accounting .acc-profit-loss-value {
    font-size: 28px;
  }

  #accounting .acc-profit-loss-meta,
  #accounting .acc-budget-stats {
    flex-wrap: wrap;
    gap: 10px;
  }

  #accounting .contract-list-item,
  #paymentsList .payment-list-item,
  #expensesList .payment-list-item,
  #invoicesList .payment-list-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #accounting .contract-list-item-info,
  #paymentsList .payment-list-item-info,
  #expensesList .payment-list-item-info,
  #invoicesList .payment-list-item-info {
    flex: 1 1 calc(100% - 56px);
  }

  #accounting .contract-list-item-amount,
  #paymentsList .payment-list-item-amount,
  #expensesList .payment-list-item-amount,
  #invoicesList .payment-list-item-amount,
  #invoicesList .invoice-status-badge {
    margin-left: 54px;
    text-align: left;
  }

  #accounting .installments-header {
    align-items: stretch;
    flex-direction: column;
  }

  #accounting .installments-header .btn {
    width: 100%;
  }

  #accounting .installment-item {
    align-items: flex-start;
    flex-direction: column;
  }

  #accounting .installment-due-date,
  #accounting .installment-amount,
  #accounting .installment-paid,
  #accounting .installment-status-badge,
  #accounting .installment-pay-btn {
    width: 100%;
  }

  #accounting .installment-pay-btn {
    text-align: center;
  }
}

@media (max-width: 520px) {

  #accounting .section-header>div:last-child,
  #accounting .accounting-tabs {
    width: 100%;
  }

  #accounting .accounting-tab span:not(.accounting-tab-icon) {
    display: inline;
  }

  #accounting .contracts-dashboard {
    grid-template-columns: 1fr;
  }

  #accounting .contract-summary-cards,
  #accounting .contract-info-grid {
    grid-template-columns: 1fr;
  }

  #accounting .contract-summary-card,
  #accounting .contract-info-item {
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
  }

  #accounting .contract-detail-header>div:last-child {
    width: 100%;
  }

  #accounting .contract-detail-header .btn {
    width: 100%;
  }

  #contractModal .modal-content,
  #receiptModal .modal-content,
  #paymentModal .modal-content,
  #expenseModal .modal-content,
  #invoiceModal .modal-content,
  #transactionModal .modal-content,
  #installmentModal .modal-content,
  #salaryModal .modal-content,
  #installmentPaymentModal .modal-content,
  #paymentDayDetailModal .modal-content,
  #installmentDetailModal .modal-content {
    width: 100vw;
    max-width: 100vw !important;
    max-height: 100dvh;
    border-radius: 0;
  }

  #contractModal .modal-body,
  #receiptModal .modal-body,
  #paymentModal .modal-body,
  #expenseModal .modal-body,
  #invoiceModal .modal-body,
  #transactionModal .modal-body,
  #installmentModal .modal-body,
  #salaryModal .modal-body,
  #installmentPaymentModal .modal-body,
  #paymentDayDetailModal .modal-body,
  #installmentDetailModal .modal-body {
    max-height: calc(100dvh - 128px);
  }

  #contractModal .modal-footer .btn,
  #paymentModal .modal-footer .btn,
  #expenseModal .modal-footer .btn,
  #invoiceModal .modal-footer .btn,
  #transactionModal .modal-footer .btn,
  #installmentModal .modal-footer .btn,
  #salaryModal .modal-footer .btn,
  #installmentPaymentModal .modal-footer .btn,
  #receiptModal .modal-footer .btn {
    width: 100%;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {

  #accounting .accounting-tab-panel,
  #accounting .accounting-dashboard {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #accounting .acc-kpi-row,
  #accounting .acc-dash-charts {
    gap: 10px;
  }

  #accounting .contracts-list {
    max-height: 58vh;
  }

  #contractModal .modal-content,
  #receiptModal .modal-content,
  #paymentModal .modal-content,
  #expenseModal .modal-content,
  #invoiceModal .modal-content,
  #transactionModal .modal-content,
  #installmentModal .modal-content,
  #salaryModal .modal-content,
  #installmentPaymentModal .modal-content,
  #paymentDayDetailModal .modal-content,
  #installmentDetailModal .modal-content {
    max-height: 96vh;
  }

  #contractModal .modal-body,
  #receiptModal .modal-body,
  #paymentModal .modal-body,
  #expenseModal .modal-body,
  #invoiceModal .modal-body,
  #transactionModal .modal-body,
  #installmentModal .modal-body,
  #salaryModal .modal-body,
  #installmentPaymentModal .modal-body,
  #paymentDayDetailModal .modal-body,
  #installmentDetailModal .modal-body {
    max-height: calc(96vh - 112px);
  }
}

/* Öğrenciler panel responsive */
#instStudents {
  max-width: 100%;
  overflow-x: hidden;
}

#instStudents .section-header {
  align-items: flex-start;
  gap: 12px;
}

#instStudents .section-header h2 {
  min-width: 0;
}

#instStudents .section-header>div:last-child {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px !important;
  flex: 1 1 360px;
  min-width: 0;
}

#instStudents .section-header .btn {
  min-height: 40px;
}

#instStudents .dropdown {
  min-width: 0;
}

#instStudents .dropdown-menu {
  max-width: min(260px, calc(100vw - 32px));
}

#instStudents .search-box {
  max-width: 560px;
  margin-bottom: 12px;
}

#instStudents .search-box input {
  max-width: none;
  min-height: 42px;
}

#instStudents .search-box+div {
  align-items: stretch !important;
}

#instStudents .search-box+div select,
#instStudents .search-box+div .btn {
  min-height: 40px;
}

#instStudents .search-box+div select {
  flex: 1 1 170px;
  min-width: min(170px, 100%);
}

#instStudents .search-box+div .btn {
  flex: 0 1 auto;
}

#studentsList {
  max-width: 100%;
  overflow: visible;
}

#studentsList>.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#studentsList table {
  min-width: 860px;
}

#studentsList th,
#studentsList td {
  vertical-align: middle;
}

#studentsList th:nth-child(2),
#studentsList td:nth-child(2) {
  min-width: 170px;
}

#studentsList th:nth-child(4),
#studentsList td:nth-child(4),
#studentsList th:nth-child(6),
#studentsList td:nth-child(6) {
  min-width: 150px;
  overflow-wrap: anywhere;
}

#studentsList th:last-child,
#studentsList td:last-child {
  min-width: 190px;
}

#studentsList td:last-child {
  white-space: nowrap;
}

#studentsList td:last-child .btn {
  min-height: 34px;
  margin-bottom: 4px;
}

#studentsListPagination .pagination-wrap {
  gap: 10px;
  flex-wrap: wrap;
}

#studentsListPagination .pagination-btns {
  flex-wrap: wrap;
}

#addStudentModal .modal-content,
#editStudentModal .modal-content {
  width: min(920px, calc(100vw - 32px));
  max-height: min(92vh, 860px);
}

#changeStudentPasswordModal .modal-content {
  width: min(460px, calc(100vw - 32px));
}

#addStudentModal .modal-body,
#editStudentModal .modal-body,
#changeStudentPasswordModal .modal-body {
  max-height: calc(92vh - 132px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#addStudentModal .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

#addStudentModal .form-group,
#editStudentModal .form-group {
  min-width: 0;
}

#addStudentModal input,
#addStudentModal select,
#editStudentModal input,
#editStudentModal select,
#changeStudentPasswordModal input {
  max-width: 100%;
}

#newStudentPassword+.btn,
#addStudentModal [data-action='autoPassword'] {
  flex: 0 0 auto;
}

#editStudentModal .modal-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#editStudentModal .modal-tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

#editStudentModal [style*='grid-template-columns: 1fr 1fr'] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#editStudentModal .relation-card {
  min-width: 0;
  flex-wrap: wrap;
}

#editStudentModal .relation-card-info,
#studentRelationsList {
  min-width: 0;
}

#editStudentModal .relation-card-name,
#editStudentModal .relation-card-type {
  overflow-wrap: anywhere;
}

#editStudentModal #editStudentTab_studentRelations>div:last-child>div {
  align-items: stretch !important;
}

#editStudentModal #editStudentTab_studentRelations>div:last-child .form-group {
  flex: 1 1 180px !important;
}

#addStudentModal .modal-footer,
#editStudentModal .modal-footer,
#changeStudentPasswordModal .modal-footer {
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  #instStudents .section-header>div:last-child {
    justify-content: flex-start;
    flex-basis: 100%;
  }

  #instStudents .search-box {
    max-width: none;
  }

  #instStudents .search-box+div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #instStudents .search-box+div select,
  #instStudents .search-box+div .btn {
    width: 100%;
    min-width: 0;
  }

  #studentsListPagination .pagination-wrap {
    align-items: flex-start;
  }
}

@media (max-width: 680px) {

  #studentsList,
  #studentsList>.table-container {
    overflow: visible;
  }

  #studentsList>.table-container {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #studentsList table,
  #studentsList thead,
  #studentsList tbody,
  #studentsList tr,
  #studentsList th,
  #studentsList td {
    display: block;
    min-width: 0;
    width: 100%;
  }

  #studentsList table {
    border-collapse: separate;
    border-spacing: 0;
  }

  #studentsList thead {
    display: none;
  }

  #studentsList tbody {
    display: grid;
    gap: 12px;
  }

  #studentsList tr {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
  }

  #studentsList td {
    display: grid;
    grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-top: 0;
    border-bottom: 1px solid var(--border-color);
    overflow-wrap: anywhere;
  }

  #studentsList td::before {
    color: var(--text-tertiary);
    content: '';
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  #studentsList td:nth-child(1)::before {
    content: 'No';
  }

  #studentsList td:nth-child(2)::before {
    content: 'Ad Soyad';
  }

  #studentsList td:nth-child(3)::before {
    content: 'TC Kimlik';
  }

  #studentsList td:nth-child(4)::before {
    content: 'Veli';
  }

  #studentsList td:nth-child(5)::before {
    content: 'Telefon';
  }

  #studentsList td:nth-child(6)::before {
    content: 'E-posta';
  }

  #studentsList td:nth-child(7) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    border-bottom: 0;
    white-space: normal;
  }

  #studentsList td:nth-child(7)::before {
    content: 'Ä°ÅŸlemler';
    margin-right: auto;
    align-self: center;
  }

  #studentsList td:nth-child(7) .btn {
    margin-right: 0 !important;
  }

  #editStudentModal [style*='grid-template-columns: 1fr 1fr'] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  #instStudents .section-header {
    margin-bottom: 14px;
  }

  #instStudents .section-header h2 {
    font-size: 21px;
  }

  #instStudents .section-header>div:last-child {
    align-items: stretch;
    flex-direction: column;
  }

  #instStudents .section-header .btn,
  #instStudents .dropdown,
  #instStudents .dropdown>.btn,
  #instStudents .search-box+div .btn {
    width: 100%;
  }

  #instStudents .search-box+div {
    grid-template-columns: 1fr;
  }

  #studentsListPagination .pagination-wrap {
    align-items: stretch;
  }

  #studentsListPagination .pagination-btns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #studentsListPagination .pagination-btn {
    width: 100%;
  }

  #addStudentModal .modal-content,
  #editStudentModal .modal-content,
  #changeStudentPasswordModal .modal-content {
    width: 100vw;
    max-width: 100vw !important;
    max-height: 100dvh;
    border-radius: 0;
  }

  #addStudentModal .modal-body,
  #editStudentModal .modal-body,
  #changeStudentPasswordModal .modal-body {
    max-height: calc(100dvh - 132px);
  }

  #newStudentPassword+.btn,
  #addStudentModal [data-action='autoPassword'] {
    width: 100%;
  }

  #addStudentModal .modal-footer .btn,
  #editStudentModal .modal-footer .btn,
  #changeStudentPasswordModal .modal-footer .btn {
    width: 100%;
  }

  #editStudentModal #editStudentTab_studentRelations>div:last-child>div {
    flex-direction: column;
  }

  #editStudentModal #addStudentRelationBtn {
    width: 100%;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  #instStudents .section-header {
    margin-bottom: 12px;
  }

  #addStudentModal .modal-content,
  #editStudentModal .modal-content,
  #changeStudentPasswordModal .modal-content {
    max-height: 96vh;
  }

  #addStudentModal .modal-body,
  #editStudentModal .modal-body,
  #changeStudentPasswordModal .modal-body {
    max-height: calc(96vh - 116px);
  }
}

/* Kurum portali - Ogrenciler panel tam responsive iyilestirmeleri */
#instStudents .section-header {
  flex-wrap: wrap;
}

#instStudents .section-header>div:last-child .btn {
  justify-content: center;
  white-space: nowrap;
}

#instStudents .search-box,
#instStudents .search-box input {
  width: 100%;
}

#instStudents .search-box+div {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  width: 100%;
}

#instStudents .search-box+div select,
#instStudents .search-box+div .btn {
  width: 100%;
  min-width: 0;
}

#studentsList .student-list-row {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#studentsList .student-name-cell,
#studentsList .student-parent-cell,
#studentsList .student-email-cell {
  overflow-wrap: anywhere;
}

#studentsList .student-actions-cell .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#addStudentModal .modal-header,
#editStudentModal .modal-header,
#changeStudentPasswordModal .modal-header {
  gap: 12px;
}

#addStudentModal .modal-header h2,
#editStudentModal .modal-header h2,
#changeStudentPasswordModal .modal-header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#addStudentModal .modal-body h3,
#editStudentModal .modal-body h3,
#editStudentModal .modal-body h4 {
  overflow-wrap: anywhere;
}

#addStudentModal .form-group>div[style*='display: flex'],
#editStudentModal .form-group>div[style*='display: flex'] {
  min-width: 0;
}

@media (max-width: 900px) {
  #instStudents .section-header>div:last-child {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    width: 100%;
  }

  #instStudents .dropdown,
  #instStudents .dropdown>.btn {
    width: 100%;
  }

  #studentsList table {
    min-width: 760px;
  }
}

@media (max-width: 680px) {
  #studentsList table {
    min-width: 0 !important;
  }

  #studentsList tbody {
    gap: 10px;
  }

  #studentsList tr.student-list-row {
    display: grid;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    box-shadow: var(--shadow-xs);
  }

  #studentsList tr.student-list-row:hover {
    background: var(--hover-bg);
    border-color: var(--border-strong);
  }

  #studentsList td {
    grid-template-columns: minmax(86px, 34%) minmax(0, 1fr);
  }

  #studentsList td::before {
    content: attr(data-label) !important;
  }

  #studentsList .student-number-cell {
    background: var(--accent-subtle);
  }

  #studentsList .student-number-cell,
  #studentsList .student-name-cell {
    font-size: 14px;
  }

  #studentsList .student-actions-cell {
    align-items: center;
    justify-content: flex-start;
  }

  #studentsList .student-actions-cell::before {
    flex: 1 0 86px;
    margin-right: 0;
  }

  #studentsList .student-actions-cell .btn {
    flex: 0 1 auto;
    min-width: 40px;
  }

  #addStudentModal .modal-content,
  #editStudentModal .modal-content,
  #changeStudentPasswordModal .modal-content {
    margin: 0;
  }

  #addStudentModal .form-grid {
    gap: 12px;
  }
}

@media (max-width: 520px) {
  #instStudents {
    padding-inline: 0;
  }

  #instStudents .section-header>div:last-child {
    grid-template-columns: 1fr;
  }

  #instStudents .search-box+div {
    gap: 8px !important;
  }

  #studentsList td {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  #studentsList td::before {
    font-size: 11px;
  }

  #studentsList .student-actions-cell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #studentsList .student-actions-cell::before {
    grid-column: 1 / -1;
    margin: 0;
  }

  #studentsList .student-actions-cell .btn {
    width: 100%;
    margin: 0 !important;
  }

  #studentsList .student-actions-cell .btn-danger {
    grid-column: 1 / -1;
  }

  #studentsListPagination .pagination-info {
    text-align: center;
    width: 100%;
  }

  #addStudentModal .modal-header,
  #editStudentModal .modal-header,
  #changeStudentPasswordModal .modal-header,
  #addStudentModal .modal-footer,
  #editStudentModal .modal-footer,
  #changeStudentPasswordModal .modal-footer {
    padding-inline: 16px;
  }

  #addStudentModal .modal-body,
  #editStudentModal .modal-body,
  #changeStudentPasswordModal .modal-body {
    padding-inline: 16px;
  }
}

#instClasses {
  max-width: 100%;
  overflow-x: hidden;
}

#instClasses .section-header {
  align-items: flex-start;
  gap: 14px;
}

#instClasses .section-header>div:last-child {
  flex: 1 1 300px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

#instClasses .section-header .btn,
#instClasses .dropdown>.btn {
  min-height: 38px;
  white-space: nowrap;
}

#instClasses .dropdown-menu {
  max-width: min(280px, calc(100vw - 32px));
}

#instClasses .search-box {
  max-width: 560px;
  margin-bottom: 12px;
}

#instClasses .search-box input {
  max-width: none;
  min-height: 42px;
}

#instClasses .search-box+div {
  align-items: stretch;
  max-width: 100%;
}

#instClasses .search-box+div select {
  flex: 1 1 180px;
  min-height: 40px;
  min-width: 0;
}

#instClasses .search-box+div .btn {
  min-height: 40px;
}

#classesList.cards-grid {
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

#classesList .class-card {
  min-width: 0;
  margin-bottom: 0;
  padding: clamp(14px, 2vw, 20px);
}

#classesList .class-card-head {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

#classesList .class-card-head h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#classesList .class-card .badge {
  max-width: 100%;
  white-space: normal;
}

#classesList .class-card-muted,
#classesList .class-card div {
  min-width: 0;
}

#classesList .class-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#classesList .class-card-actions .btn {
  justify-content: center;
  min-width: 0;
}

#classesPagination {
  max-width: 100%;
}

#classesPagination .pagination-wrap,
#classesPagination .pagination-btns {
  flex-wrap: wrap;
  gap: 8px;
}

#addClassModal .modal-content,
#classDetailModal .modal-content,
#editClassModal .modal-content {
  width: min(920px, calc(100vw - 32px));
  max-height: min(92vh, 860px);
}

#addStudentsToClassModal .modal-content {
  width: min(640px, calc(100vw - 32px));
  max-height: min(92vh, 780px);
}

#addClassModal .modal-body,
#addStudentsToClassModal .modal-body,
#classDetailModal .modal-body,
#editClassModal .modal-body {
  max-height: calc(92vh - 132px);
  overflow-y: auto;
}

#addClassModal .modal-footer,
#addStudentsToClassModal .modal-footer,
#classDetailModal .modal-footer,
#editClassModal .modal-footer {
  flex-wrap: wrap;
}

#addClassModal .form-group,
#editClassModal .form-group {
  min-width: 0;
}

#addClassModal input,
#addClassModal select,
#editClassModal input,
#editClassModal select {
  max-width: 100%;
}

#addClassModal .form-group>div[style*='display: flex'],
#editClassModal .form-group>div[style*='display: flex'] {
  flex-wrap: wrap;
  min-width: 0;
}

#addClassModal .schedule-builder,
#editClassModal .schedule-builder {
  max-height: min(48vh, 450px);
}

#addClassModal .schedule-slot,
#editClassModal .schedule-slot {
  min-width: 0;
}

#addClassModal .schedule-slot-header,
#editClassModal .schedule-slot-header {
  flex-wrap: wrap;
  gap: 8px;
}

#addClassModal .schedule-slot-header .day-select,
#editClassModal .schedule-slot-header .day-select {
  min-width: min(180px, 100%);
}

#studentSelectionList,
#editClassStudents {
  min-width: 0;
}

#studentSelectionList .sp-toolbar,
#studentSelectionList .sp-filters,
#studentSelectionList .sp-quick,
#studentSelectionList .sp-meta,
#editClassStudents .sp-toolbar,
#editClassStudents .sp-filters,
#editClassStudents .sp-quick,
#editClassStudents .sp-meta {
  flex-wrap: wrap;
}

#studentSelectionList .sp-search-wrap,
#editClassStudents .sp-search-wrap {
  flex: 1 1 220px;
  min-width: 0;
}

#studentSelectionList .sp-select,
#studentSelectionList .sp-quick-btn,
#editClassStudents .sp-select,
#editClassStudents .sp-quick-btn {
  min-height: 38px;
}

#studentSelectionList .sp-list,
#editClassStudents .sp-list {
  max-height: min(46vh, 420px);
  overflow-y: auto;
}

#studentSelectionList .sp-item,
#editClassStudents .sp-item {
  min-width: 0;
}

#studentSelectionList .sp-chips,
#editClassStudents .sp-chips {
  flex-wrap: wrap;
}

#classDetailContent {
  min-width: 0;
}

#classDetailContent .info-card {
  padding: clamp(14px, 2vw, 20px);
}

#classDetailContent .info-value {
  overflow-wrap: anywhere;
}

#classDetailContent>div[style*='display:flex'][style*='margin-bottom:24px'] {
  flex-wrap: wrap;
}

#classDetailContent>div[style*='display:flex'][style*='margin-bottom:24px'] .btn {
  justify-content: center;
}

#classDetailContent .table-container {
  max-width: 100%;
  overflow-x: auto;
}

#classDetailContent table {
  min-width: 540px;
}

@media (max-width: 900px) {
  #instClasses .section-header>div:last-child {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  #instClasses .search-box {
    max-width: none;
  }

  #instClasses .search-box+div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #instClasses .search-box+div select,
  #instClasses .search-box+div .btn {
    width: 100%;
  }

  #classesPagination .pagination-wrap {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  #classesList .class-card-actions {
    grid-template-columns: 1fr;
  }

  #addClassModal .schedule-slot,
  #editClassModal .schedule-slot {
    grid-template-columns: 1fr;
  }

  #studentSelectionList .sp-item,
  #editClassStudents .sp-item {
    display: grid;
    grid-template-columns: auto 32px minmax(0, 1fr);
    align-items: start;
  }

  #studentSelectionList .sp-chips,
  #editClassStudents .sp-chips {
    grid-column: 2 / -1;
  }
}

@media (max-width: 520px) {
  #instClasses .section-header {
    margin-bottom: 14px;
  }

  #instClasses .section-header h2 {
    font-size: 21px;
  }

  #instClasses .section-header>div:last-child {
    align-items: stretch;
    flex-direction: column;
  }

  #instClasses .section-header .btn,
  #instClasses .dropdown,
  #instClasses .dropdown>.btn,
  #instClasses .search-box+div .btn {
    width: 100%;
  }

  #instClasses .search-box+div {
    grid-template-columns: 1fr;
  }

  #classesPagination .pagination-wrap {
    align-items: stretch;
  }

  #classesPagination .pagination-btns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #classesPagination .pagination-btn {
    width: 100%;
  }

  #addClassModal .modal-content,
  #addStudentsToClassModal .modal-content,
  #classDetailModal .modal-content,
  #editClassModal .modal-content {
    width: 100vw;
    max-width: 100vw !important;
    max-height: 100dvh;
    border-radius: 0;
  }

  #addClassModal .modal-body,
  #addStudentsToClassModal .modal-body,
  #classDetailModal .modal-body,
  #editClassModal .modal-body {
    max-height: calc(100dvh - 132px);
  }

  #addClassModal .modal-footer .btn,
  #addStudentsToClassModal .modal-footer .btn,
  #classDetailModal .modal-footer .btn,
  #editClassModal .modal-footer .btn,
  #addClassModal #addCustomGradeBtn,
  #editClassModal #editCustomGradeBtn {
    width: 100%;
  }

  #studentSelectionList .sp-toolbar,
  #editClassStudents .sp-toolbar {
    align-items: stretch;
  }

  #studentSelectionList .sp-filters,
  #editClassStudents .sp-filters {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  #studentSelectionList .sp-quick,
  #editClassStudents .sp-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #studentSelectionList .sp-select,
  #editClassStudents .sp-select {
    width: 100%;
  }

  #classDetailContent>div[style*='display:flex'][style*='margin-bottom:24px'],
  #classDetailContent>div[style*='display:flex'][style*='margin-bottom:24px'] .btn {
    width: 100%;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  #instClasses .section-header {
    margin-bottom: 12px;
  }

  #addClassModal .modal-content,
  #addStudentsToClassModal .modal-content,
  #classDetailModal .modal-content,
  #editClassModal .modal-content {
    max-height: 96vh;
  }

  #addClassModal .modal-body,
  #addStudentsToClassModal .modal-body,
  #classDetailModal .modal-body,
  #editClassModal .modal-body {
    max-height: calc(96vh - 116px);
  }

  #addClassModal .schedule-builder,
  #editClassModal .schedule-builder,
  #studentSelectionList .sp-list,
  #editClassStudents .sp-list {
    max-height: 52vh;
  }
}

/* Öğretmenler panel responsive */
#instTeachers {
  max-width: 100%;
  overflow-x: hidden;
}

#instTeachers .section-header {
  align-items: flex-start;
  gap: 14px;
}

#instTeachers .section-header h2 {
  min-width: 0;
}

#instTeachers .section-header>div:last-child {
  flex: 1 1 300px;
  min-width: 0;
  justify-content: flex-end;
}

#instTeachers .section-header .btn,
#instTeachers .dropdown>.btn {
  min-height: 38px;
  white-space: nowrap;
}

#instTeachers .dropdown {
  min-width: 0;
}

#instTeachers .dropdown-menu {
  max-width: min(280px, calc(100vw - 32px));
}

#instTeachers .search-box {
  max-width: 560px;
  margin-bottom: 12px;
}

#instTeachers .search-box input {
  max-width: none;
  min-height: 42px;
}

#instTeachers .search-box+div {
  align-items: stretch !important;
  max-width: 100%;
}

#instTeachers .search-box+div select {
  flex: 1 1 180px;
  min-height: 40px;
  min-width: 0;
}

#instTeachers .search-box+div .btn {
  min-height: 40px;
}

#instTeachersList.cards-grid {
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}

#instTeachersList .teacher-card {
  min-width: 0;
  margin-bottom: 0;
  padding: clamp(14px, 2vw, 20px);
}

#instTeachersList .teacher-card-header {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

#instTeachersList .teacher-card-header>div:last-child,
#instTeachersList .teacher-card-header h3,
#instTeachersList .teacher-card-header p,
#instTeachersList .teacher-card span,
#instTeachersList .teacher-card p {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instTeachersList .teacher-card .card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#instTeachersList .teacher-card .card-actions .btn {
  justify-content: center;
  min-width: 0;
}

#teachersPagination {
  max-width: 100%;
}

#teachersPagination .pagination-wrap,
#teachersPagination .pagination-btns {
  flex-wrap: wrap;
  gap: 8px;
}

#instTeacherDetailModal .modal-content,
#addTeacherModal .modal-content {
  width: min(920px, calc(100vw - 32px));
  max-height: min(92vh, 860px);
}

#instTeacherDetailModal .modal-body,
#addTeacherModal .modal-body {
  max-height: calc(92vh - 132px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#instTeacherDetailModal .modal-footer,
#addTeacherModal .modal-footer {
  flex-wrap: wrap;
}

#addTeacherModal .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

#addTeacherModal .form-group {
  min-width: 0;
}

#addTeacherModal input,
#addTeacherModal select {
  max-width: 100%;
}

#addTeacherModal .form-group>div[style*='display: flex'] {
  flex-wrap: wrap;
  min-width: 0;
}

#addTeacherModal .form-group>div[style*='display: flex'] input {
  flex: 1 1 180px !important;
  min-width: 0;
}

#addTeacherModal .gs-filter-bar,
#addTeacherModal .gs-filter-meta {
  max-width: 100%;
}

#addTeacherModal .gs-filter-search-wrap {
  flex: 1 1 220px;
  min-width: 0;
}

#addTeacherModal .gs-filter-select {
  flex: 1 1 150px;
  min-width: 0;
}

#teacherGuidanceStudents {
  max-height: min(46vh, 420px) !important;
}

#teacherGuidanceStudents .selection-item {
  min-width: 0;
}

#teacherGuidanceStudents .selection-item label {
  min-width: 0;
  flex-wrap: wrap;
}

#teacherGuidanceStudents .selection-item label span {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instTeacherDetailContent {
  min-width: 0;
}

#instTeacherDetailContent .info-card,
#instTeacherDetailContent>div[style*='background:var(--card-bg)'] {
  padding: clamp(14px, 2vw, 24px) !important;
}

#instTeacherDetailContent .info-card>div:first-child {
  flex-wrap: wrap;
}

#instTeacherDetailContent .info-card h2,
#instTeacherDetailContent .info-card p,
#instTeacherDetailContent .info-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instTeacherDetailContent .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

#instTeacherDetailContent .table-container {
  max-width: 100%;
  overflow-x: auto;
}

#instTeacherDetailContent table {
  min-width: 620px;
}

@media (max-width: 900px) {
  #instTeachers .section-header>div:last-child {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  #instTeachers .search-box {
    max-width: none;
  }

  #instTeachers .search-box+div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #instTeachers .search-box+div select,
  #instTeachers .search-box+div .btn {
    width: 100%;
  }

  #teachersPagination .pagination-wrap {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  #instTeachersList .teacher-card .card-actions {
    grid-template-columns: 1fr;
  }

  #teacherGuidanceStudents .selection-item {
    align-items: flex-start;
  }

  #teacherGuidanceStudents .selection-item label {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start !important;
  }

  #teacherGuidanceStudents .gs-exam-badge {
    justify-self: start;
  }
}

@media (max-width: 520px) {
  #instTeachers .section-header {
    margin-bottom: 14px;
  }

  #instTeachers .section-header h2 {
    font-size: 21px;
  }

  #instTeachers .section-header>div:last-child {
    align-items: stretch;
    flex-direction: column;
  }

  #instTeachers .section-header .btn,
  #instTeachers .dropdown,
  #instTeachers .dropdown>.btn,
  #instTeachers .search-box+div .btn {
    width: 100%;
  }

  #instTeachers .search-box+div {
    grid-template-columns: 1fr;
  }

  #teachersPagination .pagination-wrap {
    align-items: stretch;
  }

  #teachersPagination .pagination-btns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #teachersPagination .pagination-btn {
    width: 100%;
  }

  #instTeacherDetailModal .modal-content,
  #addTeacherModal .modal-content {
    width: 100vw;
    max-width: 100vw !important;
    max-height: 100dvh;
    border-radius: 0;
  }

  #instTeacherDetailModal .modal-body,
  #addTeacherModal .modal-body {
    max-height: calc(100dvh - 132px);
  }

  #addTeacherModal .gs-filter-bar,
  #addTeacherModal .gs-filter-meta {
    align-items: stretch;
    flex-direction: column;
  }

  #addTeacherModal .gs-filter-search-wrap,
  #addTeacherModal .gs-filter-select,
  #addTeacherModal .gs-filter-meta .btn,
  #addTeacherModal .modal-footer .btn,
  #instTeacherDetailModal .modal-footer .btn,
  #addTeacherModal [data-action='autoPassword'] {
    width: 100%;
  }

  #teacherGuidanceStudents {
    max-height: min(42vh, 360px) !important;
  }

  #instTeacherDetailContent table {
    min-width: 560px;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  #instTeachers .section-header {
    margin-bottom: 12px;
  }

  #instTeacherDetailModal .modal-content,
  #addTeacherModal .modal-content {
    max-height: 96vh;
  }

  #instTeacherDetailModal .modal-body,
  #addTeacherModal .modal-body {
    max-height: calc(96vh - 116px);
  }

  #teacherGuidanceStudents {
    max-height: 52vh !important;
  }
}

/* Yoklama panel responsive */
#instAttendance {
  max-width: 100%;
  overflow-x: hidden;
}

#instAttendance .section-header {
  align-items: flex-start;
  gap: 14px;
}

#instAttendance .section-header h2 {
  min-width: 0;
}

#instAttendance .section-header>div:last-child {
  flex: 1 1 320px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

#instAttendance .section-header .btn {
  min-height: 38px;
  white-space: nowrap;
}

#instAttendance>.card {
  max-width: 100%;
  min-width: 0;
  padding: clamp(14px, 2vw, 20px);
}

#instAttendance>.card h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instAttendance .attendance-controls {
  align-items: stretch;
  gap: 10px;
}

#instAttendance .attendance-controls select,
#instAttendance .attendance-controls input {
  flex: 1 1 180px;
  min-width: 0;
}

#instAttendance .attendance-controls .btn {
  min-height: 40px;
}

#attendanceContent,
#bulkAttendanceContent {
  max-width: 100%;
  min-width: 0;
}

#attendanceContent .attendance-grid {
  max-width: 100%;
  padding: clamp(12px, 2vw, 20px);
}

#attendanceContent .attendance-grid h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#attendanceContent .attendance-grid h3 span {
  margin-left: 0 !important;
  white-space: normal;
}

#attendanceContent .attendance-item {
  min-width: 0;
}

#attendanceContent .attendance-item>span {
  min-width: 0;
  overflow-wrap: anywhere;
}

#attendanceContent .attendance-status {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#attendanceContent .status-btn {
  min-height: 38px;
}

#attendanceContent .attendance-grid>.btn {
  justify-content: center;
}

#instAttendance .card:has(#bulkAttendanceClass)>div:first-child {
  flex-wrap: wrap;
}

#instAttendance .card:has(#bulkAttendanceClass)>div:first-child>div:last-child {
  min-width: 0;
}

#instAttendance .card:has(#bulkAttendanceClass)>div:first-child h3,
#instAttendance .card:has(#bulkAttendanceClass)>div:first-child p,
#instAttendance .card:has(#bulkAttendanceClass)>div:first-child span {
  overflow-wrap: anywhere;
}

#instAttendance .card:has(#bulkAttendanceClass) div[style*='grid-template-columns'] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
}

#instAttendance .card:has(#bulkAttendanceClass) div[style*='grid-template-columns']>div {
  min-width: 0;
}

#bulkAttendanceClass,
#bulkAttendanceDateFrom,
#bulkAttendanceDateTo {
  min-height: 40px;
}

#loadBulkAttendanceBtn {
  min-height: 40px;
}

#bulkAttendanceContent>div:first-child {
  align-items: flex-start !important;
  gap: 10px !important;
}

#bulkAttendanceContent>div:first-child>div {
  min-width: 0;
}

#bulkAttendanceContent>div:first-child strong,
#bulkAttendanceContent>div:first-child span {
  overflow-wrap: anywhere;
}

#bulkAttendanceContent>div:first-child>div:last-child {
  justify-content: flex-end;
}

#bulkAttendanceContent .btn {
  justify-content: center;
}

#bulkAttendanceContent div[style*='overflow-x:auto'] {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

#bulkAttendanceContent table {
  min-width: max(600px, 100%);
}

#bulkAttendanceContent th,
#bulkAttendanceContent td {
  vertical-align: middle;
}

.bulk-attendance-btn {
  min-width: 36px;
}

#attendanceHistoryModal .attendance-history-modal-content,
#attendanceModal .modal-content {
  width: min(1080px, calc(100vw - 32px));
  max-height: min(92vh, 900px);
}

#attendanceHistoryModal .modal-body,
#attendanceModal .modal-body {
  max-height: calc(92vh - 132px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#attendanceHistoryModal .modal-footer,
#attendanceModal .modal-footer {
  flex-wrap: wrap;
}

#attendanceHistoryModal .attendance-history-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

#attendanceHistoryModal .attendance-history-tabs .tab-btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

#attendanceHistoryModal .tab-content,
#attendanceHistoryContent,
#classHistoryContent {
  max-width: 100%;
  min-width: 0;
}

#attendanceHistoryModal .attendance-summary-cards,
#attendanceHistoryModal .class-summaries-grid,
#attendanceHistoryModal .attendance-history-stats-grid,
#attendanceHistoryModal .class-summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
}

#attendanceHistoryModal .attendance-filter-bar {
  padding: clamp(12px, 2vw, 18px);
}

#attendanceHistoryModal .afb-row {
  align-items: stretch;
}

#attendanceHistoryModal .afb-field,
#attendanceHistoryModal .virtual-student-dropdown,
#attendanceHistoryModal .dropdown-search,
#attendanceHistoryModal .filter-select,
#attendanceHistoryModal .afb-date-input {
  min-width: 0;
}

#attendanceHistoryModal .virtual-student-dropdown,
#attendanceHistoryModal .dropdown-search,
#attendanceHistoryModal .filter-select,
#attendanceHistoryModal .afb-date-input {
  width: 100%;
}

#attendanceHistoryModal .dropdown-results {
  max-height: min(42vh, 360px);
  overflow-y: auto;
}

#attendanceHistoryModal .afb-actions {
  flex-wrap: wrap;
}

#attendanceHistoryPagination {
  max-width: 100%;
}

#attendanceHistoryPagination .pagination-wrap,
#attendanceHistoryPagination .pagination-btns {
  flex-wrap: wrap;
  gap: 8px;
}

#attendanceHistoryModal .attendance-table-wrapper,
#attendanceHistoryModal .matrix-view {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#attendanceHistoryModal .attendance-table,
#attendanceHistoryModal .matrix-table {
  min-width: 680px;
}

#attendanceHistoryModal .matrix-table .sticky-col {
  min-width: 150px;
}

#attendanceHistoryModal .class-history-header,
#attendanceHistoryModal .date-history-header,
#attendanceHistoryModal .date-history-header-card,
#attendanceHistoryModal .class-summary-header,
#attendanceHistoryModal .attendance-history-card-header,
#attendanceHistoryModal .detail-view-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#attendanceHistoryModal .class-history-header {
  align-items: flex-start;
  justify-content: space-between;
}

#attendanceHistoryModal .class-history-header .attendance-filter-bar {
  flex: 1 1 360px;
  min-width: 0;
}

#attendanceHistoryModal .view-switcher,
#attendanceHistoryModal .week-navigator,
#attendanceHistoryModal .date-history-filters-summary,
#attendanceHistoryModal .date-header-stats,
#attendanceHistoryModal .header-badges,
#attendanceHistoryModal .header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#attendanceHistoryModal .view-switcher .view-btn,
#attendanceHistoryModal .week-navigator .btn,
#attendanceHistoryModal .afb-date-btn {
  flex: 0 0 auto;
}

#attendanceHistoryModal .week-label,
#attendanceHistoryModal .class-summary-title,
#attendanceHistoryModal .class-summary-stats-mini,
#attendanceHistoryModal .class-summary-item-name,
#attendanceHistoryModal .class-summary-item-type,
#attendanceHistoryModal .header-name,
#attendanceHistoryModal .header-class,
#attendanceHistoryModal .header-last-date,
#attendanceHistoryModal .date-header-full,
#attendanceHistoryModal .detail-view-title,
#attendanceHistoryModal .detail-view-desc {
  min-width: 0;
  overflow-wrap: anywhere;
}

#attendanceHistoryModal .class-summary-header-left,
#attendanceHistoryModal .class-summary-header-right,
#attendanceHistoryModal .header-content,
#attendanceHistoryModal .date-header-left,
#attendanceHistoryModal .date-header-right,
#attendanceHistoryModal .class-summary-item-header {
  min-width: 0;
}

#attendanceHistoryModal .class-summary-card,
#attendanceHistoryModal .attendance-history-card,
#attendanceHistoryModal .class-summary-card-item,
#attendanceHistoryModal .detail-view {
  min-width: 0;
}

#attendanceHistoryModal .class-summary-card,
#attendanceHistoryModal .attendance-history-card,
#attendanceHistoryModal .date-history-header-card,
#attendanceHistoryModal .class-summary-card-item,
#attendanceHistoryModal .detail-view {
  padding: clamp(12px, 2vw, 18px);
}

#attendanceHistoryModal .class-students-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
}

#attendanceHistoryModal .heatmap-view {
  max-width: 100%;
  min-height: 320px;
  overflow-x: auto;
}

#attendanceHistoryModal .heatmap-view canvas {
  max-width: 100%;
}

#attendanceModal #attParticipantsList {
  max-height: min(54vh, 520px);
  overflow-y: auto;
}

@media (max-width: 900px) {
  #instAttendance .section-header>div:last-child {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  #instAttendance .card:has(#bulkAttendanceClass) div[style*='grid-template-columns'] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #loadBulkAttendanceBtn {
    width: 100%;
  }

  #attendanceHistoryModal .class-history-header {
    flex-direction: column;
  }

  #attendanceHistoryModal .view-switcher {
    width: 100%;
  }
}

@media (max-width: 640px) {
  #attendanceContent .attendance-item {
    align-items: stretch;
    flex-direction: column;
  }

  #attendanceContent .attendance-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #attendanceContent .status-btn,
  #attendanceContent .attendance-grid>.btn {
    width: 100%;
  }

  #bulkAttendanceContent>div:first-child {
    flex-direction: column;
  }

  #bulkAttendanceContent>div:first-child>div:last-child {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }

  #attendanceHistoryModal .attendance-table,
  #attendanceHistoryModal .matrix-table {
    min-width: 620px;
  }

  #attendanceHistoryModal .class-summary-header,
  #attendanceHistoryModal .attendance-history-card-header,
  #attendanceHistoryModal .date-history-header-card {
    align-items: flex-start;
    flex-direction: column;
  }

  #attendanceHistoryModal .class-summary-header-right,
  #attendanceHistoryModal .date-header-right {
    width: 100%;
  }
}

@media (max-width: 520px) {
  #instAttendance .section-header {
    margin-bottom: 14px;
  }

  #instAttendance .section-header h2 {
    font-size: 21px;
  }

  #instAttendance .section-header>div:last-child {
    align-items: stretch;
    flex-direction: column;
  }

  #instAttendance .section-header .btn,
  #instAttendance .attendance-controls .btn,
  #instAttendance .attendance-controls select,
  #instAttendance .attendance-controls input {
    width: 100%;
  }

  #instAttendance .card:has(#bulkAttendanceClass) div[style*='grid-template-columns'] {
    grid-template-columns: 1fr !important;
  }

  #instAttendance .card:has(#bulkAttendanceClass)>div:nth-of-type(2) {
    padding: 12px !important;
  }

  #attendanceHistoryModal .attendance-history-modal-content,
  #attendanceModal .modal-content {
    width: 100vw;
    max-width: 100vw !important;
    max-height: 100dvh;
    border-radius: 0;
  }

  #attendanceHistoryModal .modal-body,
  #attendanceModal .modal-body {
    max-height: calc(100dvh - 132px);
  }

  #attendanceHistoryModal .modal-footer .btn,
  #attendanceModal .modal-footer .btn,
  #attendanceHistoryModal .afb-actions .btn,
  #attendanceHistoryModal .view-switcher .view-btn,
  #attendanceHistoryModal .week-navigator {
    width: 100%;
  }

  #attendanceHistoryModal .afb-row {
    flex-direction: column;
  }

  #attendanceHistoryModal .afb-actions,
  #attendanceHistoryModal .view-switcher {
    display: grid;
    grid-template-columns: 1fr;
  }

  #attendanceHistoryModal .week-navigator {
    justify-content: space-between;
  }

  #attendanceHistoryPagination .pagination-wrap {
    align-items: stretch;
  }

  #attendanceHistoryPagination .pagination-btns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #attendanceHistoryPagination .pagination-btn {
    width: 100%;
  }

  #attendanceHistoryModal .attendance-summary-cards,
  #attendanceHistoryModal .class-summaries-grid,
  #attendanceHistoryModal .attendance-history-stats-grid,
  #attendanceHistoryModal .class-summary-stats,
  #attendanceHistoryModal .class-students-grid {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  #instAttendance .section-header {
    margin-bottom: 12px;
  }

  #instAttendance>.card {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  #attendanceHistoryModal .attendance-history-modal-content,
  #attendanceModal .modal-content {
    max-height: 96vh;
  }

  #attendanceHistoryModal .modal-body,
  #attendanceModal .modal-body {
    max-height: calc(96vh - 116px);
  }

  #attendanceModal #attParticipantsList,
  #attendanceHistoryModal .dropdown-results {
    max-height: 50vh;
  }
}

/* Denemeler panel responsive */
#instExams {
  max-width: 100%;
  overflow-x: hidden;
}

#instExams .section-header {
  align-items: flex-start;
  gap: 14px;
}

#instExams .section-header h2 {
  min-width: 0;
}

#instExams .section-header .btn {
  min-height: 38px;
  white-space: nowrap;
}

#examTemplatesList.cards-grid {
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

#examTemplatesList .card {
  min-width: 0;
  margin-bottom: 0;
  padding: clamp(14px, 2vw, 20px);
}

#examTemplatesList .card h3,
#examTemplatesList .card p,
#examTemplatesList .badge {
  min-width: 0;
  overflow-wrap: anywhere;
}

#examTemplatesList .card h3 {
  flex-wrap: wrap;
}

#examTemplatesList .card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#examTemplatesList .card-actions .btn {
  justify-content: center;
  min-width: 0;
}

#examTemplatesPagination,
#examResultsPagination {
  max-width: 100%;
}

#examTemplatesPagination .pagination-wrap,
#examTemplatesPagination .pagination-btns,
#examResultsPagination .pagination-wrap,
#examResultsPagination .pagination-btns {
  flex-wrap: wrap;
  gap: 8px;
}

#examResultsList {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

#createExamTemplateModal .modal-content,
#enterExamResultModal .modal-content,
#examDetailModal .modal-content {
  width: min(1080px, calc(100vw - 32px));
  max-height: min(92vh, 900px);
}

#createExamTemplateModal .modal-body,
#enterExamResultModal .modal-body,
#examDetailModal .modal-body {
  max-height: calc(92vh - 132px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#createExamTemplateModal .modal-footer,
#enterExamResultModal .modal-footer,
#examDetailModal .modal-footer {
  flex-wrap: wrap;
}

#createExamTemplateModal .form-group,
#createExamTemplateModal input,
#enterExamResultModal .form-group,
#enterExamResultModal select,
#enterExamResultModal input {
  min-width: 0;
  max-width: 100%;
}

#createExamTemplateModal .modal-body>div[style*='grid-template-columns: 1fr 1fr'] {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr) !important;
}

#createExamTemplateModal #templateExamTypeGrid.exam-type-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)) !important;
}

#createExamTemplateModal .exam-type-card,
#createExamTemplateModal .kitapcik-option,
#createExamTemplateModal .file-upload-area,
#createExamTemplateModal .upload-preview,
#createExamTemplateModal .btn-ai-fill {
  min-width: 0;
}

#createExamTemplateModal .exam-type-card span,
#createExamTemplateModal .kitapcik-info,
#createExamTemplateModal .kitapcik-name,
#createExamTemplateModal .kitapcik-desc,
#createExamTemplateModal .upload-preview .file-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

#createExamTemplateModal #kazanımSelectorContainer>div:first-child {
  flex-wrap: wrap;
  gap: 12px;
}

#createExamTemplateModal #kazanımSelectorContainer>div:first-child>div {
  min-width: 0;
}

#createExamTemplateModal #kazanımSelectorContainer>div:first-child>div:first-child {
  flex: 1 1 320px;
}

#createExamTemplateModal #kazanımSelectorContainer>div:first-child>div:last-child,
#createExamTemplateModal .export-buttons,
#createExamTemplateModal .kitapcik-tabs {
  flex-wrap: wrap;
}

#createExamTemplateModal .question-mapping-grid,
#createExamTemplateModal .ab-panels,
#createExamTemplateModal .kitapcik-panel,
#createExamTemplateModal .exam-subject {
  min-width: 0;
}

#createExamTemplateModal .question-mapping-grid .subject-questions,
#createExamTemplateModal .ab-panels .panel-content {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  max-height: min(52vh, 500px);
}

#createExamTemplateModal .question-mapping-grid .question-row {
  min-width: 0;
}

#createExamTemplateModal .question-mapping-grid .exam-subject>h4,
#createExamTemplateModal .ab-panels .kitapcik-panel .panel-header h4 {
  flex-wrap: wrap;
  gap: 8px;
  overflow-wrap: anywhere;
}

#createExamTemplateModal .question-mapping-grid .kazanim-select-wrapper,
#createExamTemplateModal .question-mapping-grid .kazanim-select {
  min-width: 0;
}

#enterExamResultModal .optik-wizard-header {
  max-width: 100%;
  overflow-x: auto;
  justify-content: flex-start;
  scrollbar-width: thin;
}

#enterExamResultModal .optik-wizard-step {
  flex: 0 0 auto;
}

#enterExamResultModal .optik-setup-row {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

#optikResultContainer,
#enterExamResultModal .optik-panel,
#enterExamResultModal .optik-content,
#enterExamResultModal .optik-tab-content {
  max-width: 100%;
  min-width: 0;
}

#enterExamResultModal .optik-tabs,
#enterExamResultModal .result-stats,
#enterExamResultModal .format-selector,
#enterExamResultModal .answer-key-actions,
#enterExamResultModal .preview-actions,
#enterExamResultModal .preview-stats,
#enterExamResultModal .key-actions,
#enterExamResultModal .kitapcik-key-tabs {
  flex-wrap: wrap;
}

#enterExamResultModal .format-table,
#enterExamResultModal .preview-table {
  min-width: 640px;
}

#enterExamResultModal .format-table,
#enterExamResultModal .preview-table-container {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#enterExamResultModal .section-key,
#enterExamResultModal .info-box,
#enterExamResultModal .preview-section,
#enterExamResultModal .tab-guidance {
  min-width: 0;
}

#enterExamResultModal .section-header,
#enterExamResultModal .preview-header,
#enterExamResultModal .tab-actions {
  flex-wrap: wrap;
  gap: 10px;
}

#enterExamResultModal .section-range {
  margin-left: 0;
}

#examDetailContent {
  max-width: 100%;
  min-width: 0;
}

#examDetailContent .performance-summary {
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

#examDetailContent .performance-card,
#examDetailContent .info-card,
#examDetailContent .exam-subject,
#examDetailContent .topic-analysis,
#examDetailContent .topic-group,
#examDetailContent .exam-mapping-details {
  min-width: 0;
}

#examDetailContent .performance-card {
  padding: clamp(14px, 2vw, 18px);
}

#examDetailContent .performance-value {
  font-size: clamp(24px, 4vw, 30px);
}

#examDetailContent .exam-subject h4,
#examDetailContent .topic-group h4,
#examDetailContent .topic-name,
#examDetailContent .topic-tag,
#examDetailContent .info-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

#examDetailContent .result-inputs {
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
}

#examDetailContent .topic-item,
#examDetailContent .topic-stats,
#examDetailContent>div:last-child {
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  #instExams .section-header {
    align-items: stretch;
  }

  #instExams .section-header .btn {
    align-self: flex-start;
  }

  #createExamTemplateModal .modal-body>div[style*='grid-template-columns: 1fr 1fr'] {
    grid-template-columns: 1fr !important;
  }

  #createExamTemplateModal .ab-panels {
    grid-template-columns: 1fr;
  }
}



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

  #createExamTemplateModal .question-mapping-grid .question-row {
    align-items: stretch;
    flex-direction: column;
  }

  #createExamTemplateModal .question-mapping-grid .question-number,
  #createExamTemplateModal .question-mapping-grid .question-label {
    align-self: flex-start;
  }

  #enterExamResultModal .optik-tab {
    flex: 1 1 100%;
  }

  #enterExamResultModal .tab-guidance,
  #enterExamResultModal .tab-actions,
  #enterExamResultModal .preview-header {
    align-items: stretch;
    flex-direction: column;
  }

  #examDetailContent .topic-stats {
    width: 100%;
  }
}

@media (max-width: 520px) {
  #instExams .section-header {
    margin-bottom: 14px;
  }

  #instExams .section-header h2 {
    font-size: 21px;
  }

  #instExams .section-header .btn {
    width: 100%;
  }

  #examTemplatesPagination .pagination-wrap,
  #examResultsPagination .pagination-wrap {
    align-items: stretch;
  }

  #examTemplatesPagination .pagination-btns,
  #examResultsPagination .pagination-btns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #examTemplatesPagination .pagination-btn,
  #examResultsPagination .pagination-btn {
    width: 100%;
  }

  #createExamTemplateModal .modal-content,
  #enterExamResultModal .modal-content,
  #examDetailModal .modal-content {
    width: 100vw;
    max-width: 100vw !important;
    max-height: 100dvh;
    border-radius: 0;
  }

  #createExamTemplateModal .modal-body,
  #enterExamResultModal .modal-body,
  #examDetailModal .modal-body {
    max-height: calc(100dvh - 132px);
  }

  #createExamTemplateModal .modal-footer .btn,
  #createExamTemplateModal .export-buttons,
  #createExamTemplateModal .export-buttons .btn,
  #createExamTemplateModal #kazanımSelectorContainer>div:first-child>div:last-child,
  #createExamTemplateModal #kazanımSelectorContainer>div:first-child>div:last-child .btn,
  #enterExamResultModal .modal-footer .btn,
  #enterExamResultModal .answer-key-actions .btn,
  #enterExamResultModal .preview-actions .btn,
  #enterExamResultModal .tab-actions .btn,
  #enterExamResultModal .key-actions .btn,
  #examDetailContent>div:last-child .btn {
    width: 100%;
  }

  #createExamTemplateModal .kitapcik-tabs,
  #enterExamResultModal .kitapcik-key-tabs,
  #enterExamResultModal .optik-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  #createExamTemplateModal .kitapcik-tab,
  #enterExamResultModal .kitapcik-key-tab,
  #enterExamResultModal .optik-tab {
    width: 100%;
  }

  #enterExamResultModal .optik-wizard-header {
    padding: 12px;
  }

  #enterExamResultModal .optik-wizard-step .step-info,
  #enterExamResultModal .wizard-arrow {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  #instExams .section-header {
    margin-bottom: 12px;
  }

  #createExamTemplateModal .modal-content,
  #enterExamResultModal .modal-content,
  #examDetailModal .modal-content {
    max-height: 96vh;
  }

  #createExamTemplateModal .modal-body,
  #enterExamResultModal .modal-body,
  #examDetailModal .modal-body {
    max-height: calc(96vh - 116px);
  }

  #createExamTemplateModal .question-mapping-grid .subject-questions,
  #createExamTemplateModal .ab-panels .panel-content {
    max-height: 54vh;
  }
}

/* Bursluluk sinavi panel responsive */
#instScholarshipExams,
#instScholarshipResults,
#instScholarshipBursResults {
  max-width: 100%;
  overflow-x: hidden;
}

#instScholarshipExams .section-header,
#instScholarshipResults .section-header,
#instScholarshipBursResults .section-header {
  align-items: flex-start;
  gap: 14px;
}

#instScholarshipExams .section-header h2,
#instScholarshipResults .section-header h2,
#instScholarshipBursResults .section-header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instScholarshipExams .section-header h2 svg,
#instScholarshipResults .section-header h2 svg,
#instScholarshipBursResults .section-header h2 svg {
  flex: 0 0 auto;
}

#instScholarshipExams .section-header>div:last-child,
#instScholarshipResults .section-header>div:last-child,
#instScholarshipBursResults .section-header>div:last-child {
  flex: 1 1 360px;
  justify-content: flex-end;
  min-width: 0;
}

#instScholarshipExams .section-header .search-box {
  flex: 1 1 180px;
  min-width: 0;
}

#scholarshipExamSearch,
#scholarshipExamStatusFilter,
#scholarshipResultExamSelect,
#scholarshipBursExamSelect {
  min-height: 40px;
  min-width: 0;
}

#scholarshipExamSearch {
  width: 100% !important;
}

#scholarshipExamStatusFilter,
#scholarshipResultExamSelect,
#scholarshipBursExamSelect {
  flex: 1 1 190px;
}

#instScholarshipExams .section-header .btn,
#instScholarshipResults .section-header .btn {
  min-height: 40px;
  white-space: nowrap;
}

#scholarshipExamsContent,
#scholarshipResultsContent,
#scholarshipBursContent,
#scholarshipBursConfig {
  max-width: 100%;
  min-width: 0;
}

#scholarshipExamsGrid.scholarship-exams-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(12px, 2vw, 18px);
}

#scholarshipExamsGrid .scholarship-exam-card {
  min-width: 0;
  padding: clamp(14px, 2vw, 20px);
}

#scholarshipExamsGrid .scholarship-exam-header {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

#scholarshipExamsGrid .scholarship-exam-header h3,
#scholarshipExamsGrid .scholarship-exam-info,
#scholarshipExamsGrid .scholarship-exam-info .info-row,
#scholarshipExamsGrid .scholarship-exam-info .info-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

#scholarshipExamsGrid .scholarship-exam-info .info-row {
  align-items: flex-start;
}

#scholarshipExamsGrid .scholarship-exam-info .info-row span:first-child {
  flex: 0 0 92px;
  min-width: 0;
}

#scholarshipExamsGrid .card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#scholarshipExamsGrid .card-actions .btn {
  justify-content: center;
  min-width: 0;
}

#scholarshipExamsPagination {
  flex-wrap: wrap;
  max-width: 100%;
}

#scholarshipResultsSummary,
#scholarshipBursStats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px !important;
}

#scholarshipResultsSummary[style*='display: none'],
#scholarshipBursConfig[style*='display: none'] #scholarshipBursStats {
  display: none !important;
}

#scholarshipResultsSummary .stat-card,
#scholarshipBursStats .stat-card {
  min-width: 0;
}

#scholarshipRankingTableContainer,
#scholarshipBursTable {
  max-width: 100%;
}

.scholarship-ranking-table-container,
#instScholarshipBursResults .card:has(#scholarshipBursTable) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#scholarshipRankingTableContainer table,
#scholarshipBursTable {
  min-width: 640px;
}

#scholarshipRankingTableContainer th,
#scholarshipRankingTableContainer td,
#scholarshipBursTable th,
#scholarshipBursTable td {
  vertical-align: middle;
}

#scholarshipRankingTableContainer td:nth-child(2),
#scholarshipBursTable td:nth-child(2) {
  min-width: 160px;
  overflow-wrap: anywhere;
}

#scholarshipBursConfig>.card {
  max-width: 100%;
  min-width: 0;
  padding: clamp(14px, 2vw, 20px) !important;
}

#scholarshipBursConfig>.card h3 {
  overflow-wrap: anywhere;
}

#bursOranlariList,
#scholarshipExamBursOranlariList {
  min-width: 0;
}

#instScholarshipBursResults .card div[style*='margin-top: 16px'][style*='display: flex'] {
  flex-wrap: wrap;
}

#scholarshipExamModal .modal-content {
  width: min(760px, calc(100vw - 32px));
  max-width: min(760px, calc(100vw - 32px)) !important;
  max-height: min(92vh, 860px);
}

#enterScholarshipResultsModal .modal-content {
  width: min(1080px, calc(100vw - 32px));
  max-height: min(92vh, 900px);
}

#scholarshipExamModal .modal-body,
#enterScholarshipResultsModal .modal-body {
  max-height: calc(92vh - 132px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#scholarshipExamModal .modal-header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#scholarshipExamModal .modal-header h2 svg {
  flex: 0 0 auto;
}

#scholarshipExamModal .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
}

#scholarshipExamModal .form-group,
#scholarshipExamModal input,
#scholarshipExamModal textarea,
#scholarshipExamModal select,
#enterScholarshipResultsModal .form-group,
#enterScholarshipResultsModal select,
#enterScholarshipResultsModal input {
  min-width: 0;
  max-width: 100%;
}

#scholarshipExamModal .modal-footer,
#enterScholarshipResultsModal .modal-footer {
  flex-wrap: wrap;
}

#scholarshipExamModal .burs-rules-system {
  max-width: 100%;
  min-width: 0;
}

#scholarshipExamModal .burs-rules-tabs {
  flex-wrap: nowrap;
  scrollbar-width: thin;
}

#scholarshipExamModal .burs-tier-add {
  flex-wrap: wrap;
}

#scholarshipExamModal .burs-preview-content,
#scholarshipExamModal .burs-preview-empty,
#scholarshipExamModal .burs-preview-card,
#scholarshipExamModal .burs-preview-rank,
#scholarshipExamModal .burs-preview-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

#enterScholarshipResultsModal .optik-wizard-header {
  max-width: 100%;
  overflow-x: auto;
  justify-content: flex-start;
  scrollbar-width: thin;
}

#enterScholarshipResultsModal .optik-wizard-step {
  flex: 0 0 auto;
}

#enterScholarshipResultsModal .optik-setup-row {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

#scholarshipOptikResultContainer,
#enterScholarshipResultsModal .optik-panel,
#enterScholarshipResultsModal .optik-content,
#enterScholarshipResultsModal .optik-tab-content {
  max-width: 100%;
  min-width: 0;
}

#enterScholarshipResultsModal .optik-tabs,
#enterScholarshipResultsModal .result-stats,
#enterScholarshipResultsModal .format-selector,
#enterScholarshipResultsModal .answer-key-actions,
#enterScholarshipResultsModal .preview-actions,
#enterScholarshipResultsModal .preview-stats,
#enterScholarshipResultsModal .key-actions,
#enterScholarshipResultsModal .kitapcik-key-tabs {
  flex-wrap: wrap;
}

#enterScholarshipResultsModal .format-table,
#enterScholarshipResultsModal .preview-table {
  min-width: 640px;
}

#enterScholarshipResultsModal .format-table,
#enterScholarshipResultsModal .preview-table-container {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#enterScholarshipResultsModal .section-header,
#enterScholarshipResultsModal .preview-header,
#enterScholarshipResultsModal .tab-actions {
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 900px) {

  #instScholarshipExams .section-header>div:last-child,
  #instScholarshipResults .section-header>div:last-child,
  #instScholarshipBursResults .section-header>div:last-child {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  #scholarshipRankingTableContainer table,
  #scholarshipBursTable {
    min-width: 600px;
  }
}

@media (max-width: 680px) {

  #scholarshipRankingTableContainer,
  #instScholarshipBursResults .card:has(#scholarshipBursTable) {
    overflow: visible;
  }

  #scholarshipRankingTableContainer table,
  #scholarshipRankingTableContainer thead,
  #scholarshipRankingTableContainer tbody,
  #scholarshipRankingTableContainer tr,
  #scholarshipRankingTableContainer th,
  #scholarshipRankingTableContainer td,
  #scholarshipBursTable,
  #scholarshipBursTable thead,
  #scholarshipBursTable tbody,
  #scholarshipBursTable tr,
  #scholarshipBursTable th,
  #scholarshipBursTable td {
    display: block;
    min-width: 0;
    width: 100%;
  }

  #scholarshipRankingTableContainer table,
  #scholarshipBursTable {
    border-collapse: separate;
    border-spacing: 0;
  }

  #scholarshipRankingTableContainer thead,
  #scholarshipBursTable thead {
    display: none;
  }

  #scholarshipRankingTableContainer tbody,
  #scholarshipBursTable tbody {
    display: grid;
    gap: 12px;
  }

  #scholarshipRankingTableContainer tr,
  #scholarshipBursTable tr {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
  }

  #scholarshipRankingTableContainer td,
  #scholarshipBursTable td {
    display: grid;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    overflow-wrap: anywhere;
  }

  #scholarshipRankingTableContainer td::before,
  #scholarshipBursTable td::before {
    color: var(--text-tertiary);
    content: '';
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  #scholarshipRankingTableContainer td:nth-child(1)::before,
  #scholarshipBursTable td:nth-child(1)::before {
    content: 'Sıra';
  }

  #scholarshipRankingTableContainer td:nth-child(2)::before,
  #scholarshipBursTable td:nth-child(2)::before {
    content: 'Öğrenci';
  }

  #scholarshipRankingTableContainer td:nth-child(3)::before,
  #scholarshipBursTable td:nth-child(3)::before {
    content: 'Net';
  }

  #scholarshipRankingTableContainer td:nth-child(4)::before,
  #scholarshipBursTable td:nth-child(4)::before {
    content: 'Durum';
  }

  #scholarshipBursTable td:nth-child(4)::before {
    content: 'Puan';
  }

  #scholarshipBursTable td:nth-child(5)::before {
    content: 'Burs Oranı';
  }

  #scholarshipBursTable td:nth-child(6) {
    border-bottom: 0;
  }

  #scholarshipBursTable td:nth-child(6)::before {
    content: 'Kazandı';
  }

  #scholarshipRankingTableContainer td:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  .burs-rules-tabs {
    gap: 4px;
    padding: 6px;
  }

  .burs-rules-tab {
    padding: 8px 10px;
    font-size: 12px;
  }

  .burs-rules-tab>span {
    font-size: 12px;
  }

  .burs-rules-panels {
    padding: 12px;
  }
}

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

  .burs-tier-row.burs-tier-row-head {
    display: none;
  }

  .burs-tier-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    padding: 12px;
    align-items: stretch;
  }

  .burs-tier-mobile-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .burs-tier-cell {
    grid-column: span 1;
  }

  .burs-tier-cell.burs-tier-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px dashed var(--border-color);
  }

  .burs-tier-cell.burs-tier-actions .burs-tier-mobile-label {
    display: none;
  }

  #bursOranlariList .burs-tier-row,
  #bursOranlariList .burs-tier-row.burs-tier-row-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .burs-preset-grid {
    grid-template-columns: 1fr;
  }

  #enterScholarshipResultsModal .optik-tab {
    flex: 1 1 100%;
  }

  #enterScholarshipResultsModal .tab-guidance,
  #enterScholarshipResultsModal .tab-actions,
  #enterScholarshipResultsModal .preview-header {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .burs-rules-tab {
    flex: 1 1 100%;
  }

  .burs-rules-tabs {
    flex-direction: column;
  }
}

@media (max-width: 520px) {

  #instScholarshipExams .section-header,
  #instScholarshipResults .section-header,
  #instScholarshipBursResults .section-header {
    margin-bottom: 14px;
  }

  #instScholarshipExams .section-header h2,
  #instScholarshipResults .section-header h2,
  #instScholarshipBursResults .section-header h2 {
    font-size: 21px;
  }

  #instScholarshipExams .section-header>div:last-child,
  #instScholarshipResults .section-header>div:last-child,
  #instScholarshipBursResults .section-header>div:last-child {
    align-items: stretch;
    flex-direction: column;
  }

  #instScholarshipExams .section-header .search-box,
  #scholarshipExamSearch,
  #scholarshipExamStatusFilter,
  #scholarshipResultExamSelect,
  #scholarshipBursExamSelect,
  #instScholarshipExams .section-header .btn,
  #instScholarshipResults .section-header .btn {
    width: 100%;
  }

  #scholarshipExamsPagination {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #scholarshipExamsPagination button {
    width: 100%;
  }

  #scholarshipExamModal .modal-content,
  #enterScholarshipResultsModal .modal-content {
    width: 100vw;
    max-width: 100vw !important;
    max-height: 100dvh;
    border-radius: 0;
  }

  #scholarshipExamModal .modal-body,
  #enterScholarshipResultsModal .modal-body {
    max-height: calc(100dvh - 132px);
  }

  #scholarshipExamModal .modal-footer .btn,
  #scholarshipExamModal .burs-tier-add,
  #scholarshipExamModal .burs-tier-add .btn,
  #instScholarshipBursResults #addBursOraniBtnBurs,
  #instScholarshipBursResults #saveBursOranlariBtn,
  #instScholarshipBursResults #autoCalculateBursBtn,
  #enterScholarshipResultsModal .modal-footer .btn,
  #enterScholarshipResultsModal .answer-key-actions .btn,
  #enterScholarshipResultsModal .preview-actions .btn,
  #enterScholarshipResultsModal .tab-actions .btn,
  #enterScholarshipResultsModal .key-actions .btn {
    width: 100%;
  }

  #enterScholarshipResultsModal .optik-tabs,
  #enterScholarshipResultsModal .kitapcik-key-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  #enterScholarshipResultsModal .optik-tab,
  #enterScholarshipResultsModal .kitapcik-key-tab {
    width: 100%;
  }

  #enterScholarshipResultsModal .optik-wizard-step .step-info,
  #enterScholarshipResultsModal .wizard-arrow {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {

  #instScholarshipExams .section-header,
  #instScholarshipResults .section-header,
  #instScholarshipBursResults .section-header {
    margin-bottom: 12px;
  }

  #scholarshipExamModal .modal-content,
  #enterScholarshipResultsModal .modal-content {
    max-height: 96vh;
  }

  #scholarshipExamModal .modal-body,
  #enterScholarshipResultsModal .modal-body {
    max-height: calc(96vh - 116px);
  }
}

/* Renewal Campaign Modal Styles */
.renewal-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.renewal-modal-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.renewal-modal-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.renewal-modal-form .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.renewal-modal-form .form-value {
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: var(--input-radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.renewal-modal-form .form-value.highlight {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--primary-color);
}

.renewal-modal-form .form-value.highlight.accent {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--success);
  color: var(--success);
  font-weight: 700;
}

.renewal-modal-form .form-slider {
  width: 100%;
  margin-top: 8px;
  cursor: pointer;
}

.renewal-modal-form .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.renewal-modal-form .checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.renewal-modal-form .checkbox-label:hover {
  border-color: var(--primary-color);
}

.renewal-modal-form .checkbox-label:has(input:checked) {
  border-color: var(--primary-color);
  background: rgba(59, 130, 246, 0.1);
}

.renewal-modal-form .checkbox-label input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.renewal-modal-form .radio-group {
  display: flex;
  gap: 16px;
}

.renewal-modal-form .radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
}

.renewal-modal-form .radio-label input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.renewal-modal-form .message-preview {
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: var(--input-radius);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
}

@media (max-width: 480px) {
  .renewal-modal-form .form-row {
    grid-template-columns: 1fr;
  }
}

#adminClassesList.admin-classes-panel,
#adminClassesList.cards-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

#adminClassesList .admin-filter-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

#adminClassesList .admin-stats-row,
#adminClassesList .admin-filter-bar {
  margin-bottom: 0;
}

#adminClassesTableWrap {
  width: 100%;
  min-width: 0;
}

#adminClassesTableWrap .table-container {
  margin-top: 0;
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
}

#adminClassesTableWrap table {
  min-width: 760px;
}

#adminClassesTableWrap td strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-class-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.admin-class-action-btn {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  justify-content: center;
  padding-inline: 0;
}

.admin-class-action-btn svg {
  flex: 0 0 auto;
}

/* Student portal - Hatalarım responsive layout */
#studentMyMistakes {
  width: 100%;
  min-width: 0;
}

#studentMyMistakes .section-header {
  margin-bottom: 18px;
}

.student-mistakes-panel {
  width: min(100%, 1180px);
  min-width: 0;
  margin: 0 auto;
}

.sm-panel,
.sm-tab-content,
.sm-status-stack,
.sm-rec-list,
.sm-exam-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.sm-hero {
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(48, 112, 5, 0.16);
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: var(--shadow-xs);
}

.sm-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.95fr);
  gap: 20px;
  align-items: start;
  min-width: 0;
}

.sm-hero-copy,
.sm-topic-main,
.sm-mistake-main {
  min-width: 0;
}

.sm-kicker,
.sm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border-radius: 999px;
  font-weight: 700;
  white-space: normal;
}

.sm-kicker {
  padding: 8px 12px;
  border: 1px solid rgba(48, 112, 5, 0.14);
  background: rgba(48, 112, 5, 0.08);
  color: var(--accent);
  font-size: 12px;
}

.sm-hero-title {
  margin: 14px 0 8px;
  color: var(--text-primary);
  font-size: 26px;
  line-height: 1.18;
}

.sm-hero-text {
  max-width: 640px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.sm-metrics-grid,
.sm-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.sm-dashboard-metrics {
  margin-bottom: 18px;
}

.sm-metric-card {
  display: flex;
  min-width: 0;
  min-height: 110px;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--shadow-xs);
}

.sm-metric-icon,
.sm-panel-icon,
.sm-mistake-icon,
.sm-topic-index,
.sm-ai-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.sm-metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(48, 112, 5, 0.1);
  color: var(--accent);
}

.sm-metric-value {
  color: var(--text-primary);
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
}

.sm-metric-label {
  color: var(--text-secondary);
  font-size: 12px;
}

.sm-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--secondary-bg);
}

.sm-tab-btn {
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.sm-tab-btn.active {
  border-color: rgba(48, 112, 5, 0.24) !important;
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-xs) !important;
}

.sm-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--shadow-xs);
}

.sm-card-header,
.sm-rec-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.sm-card-title-row,
.sm-rec-head,
.sm-subject-bar-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.sm-subject-bar-top {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sm-panel-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--sm-panel-icon-bg);
  color: var(--sm-panel-icon-color);
}

.sm-card-title,
.sm-rec-title {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.sm-card-desc,
.sm-rec-desc,
.sm-ai-desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.sm-badge {
  padding: 6px 10px;
  background: var(--sm-badge-bg);
  color: var(--sm-badge-color);
  font-size: 11px;
  line-height: 1.2;
}

.sm-insight-strip,
.sm-chip-row,
.sm-action-row,
.sm-heatmap-controls,
.sm-heatmap-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.sm-insight-strip {
  margin-bottom: 18px;
}

.sm-chip-row-center {
  justify-content: center;
}

.sm-two-col-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
}

.sm-subject-bar,
.sm-rec-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: var(--secondary-bg);
}

.sm-subject-name,
.sm-topic-name,
.sm-mistake-title {
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
}

.sm-topic-name,
.sm-mistake-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sm-topic-name {
  white-space: nowrap;
}

.sm-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

.sm-progress-fill {
  height: 100%;
  border-radius: inherit;
}

.sm-progress-fill-accent {
  background: linear-gradient(90deg, rgba(48, 112, 5, 0.92), rgba(48, 112, 5, 0.48));
}

.sm-progress-fill-danger {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.88), rgba(239, 68, 68, 0.34));
}

.sm-topic-row,
.sm-mistake-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.sm-topic-row.is-last,
.sm-mistake-row.is-last {
  border-bottom: 0;
}

.sm-topic-index {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger-color);
  font-size: 12px;
  font-weight: 800;
}

.sm-topic-subject,
.sm-mistake-meta,
.sm-rec-meta {
  color: var(--text-secondary);
  font-size: 12px;
}

.sm-topic-subject {
  margin-top: 4px;
}

.sm-topic-progress {
  height: 6px;
  margin-top: 8px;
}

.sm-topic-count,
.sm-mistake-count {
  text-align: right;
}

.sm-topic-count div {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 800;
}

.sm-topic-count span {
  color: var(--text-tertiary);
  font-size: 11px;
}

.sm-mistake-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(48, 112, 5, 0.1);
  color: var(--accent);
}

.sm-mistake-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.sm-exam-config {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
  min-width: 0;
}

.sm-exam-select {
  margin-bottom: 0;
}

.sm-form-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.sm-form-select {
  width: 100% !important;
  border-radius: 12px !important;
  background: var(--secondary-bg) !important;
}

.sm-help-box,
.sm-analysis-box,
.sm-empty-note {
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: var(--secondary-bg);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}

.sm-analysis-box {
  border-color: rgba(48, 112, 5, 0.14);
  background: rgba(48, 112, 5, 0.08);
}

.sm-action-row {
  gap: 12px;
}

.sm-reset-btn {
  margin-left: auto;
}

.sm-heatmap-controls {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sm-heatmap-filter {
  align-items: center;
}

.sm-heatmap-select {
  flex: 0 0 180px;
}

.sm-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg);
  -webkit-overflow-scrolling: touch;
}

.sm-table-scroll table {
  min-width: 620px;
}

.sm-ai-empty {
  display: grid;
  place-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 8px 8px;
  text-align: center;
}

.sm-ai-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(48, 112, 5, 0.1);
  color: var(--accent);
}

.sm-ai-title {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 800;
}

.sm-ai-desc {
  max-width: 500px;
  margin: 8px auto 0;
}

.sm-rec-card {
  gap: 12px;
  padding: 18px;
}

.sm-rec-head {
  justify-content: space-between;
}

.sm-rec-toolbar {
  align-items: center;
}

@media (max-width: 1100px) {
  .student-mistakes-panel {
    width: 100%;
  }

  .sm-hero-grid,
  .sm-two-col-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  #studentMyMistakes .section-header {
    margin-bottom: 14px;
  }

  .sm-panel,
  .sm-tab-content,
  .sm-exam-panel,
  .sm-rec-list {
    gap: 14px;
  }

  .sm-hero,
  .sm-card {
    padding: 16px;
    border-radius: 12px;
  }

  .sm-hero-title {
    font-size: 22px;
  }

  .sm-metrics-grid,
  .sm-dashboard-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .sm-metric-card {
    min-height: 94px;
    padding: 12px;
  }

  .sm-metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .sm-metric-value {
    font-size: 22px;
  }

  .sm-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm-card-header,
  .sm-rec-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .sm-exam-config {
    grid-template-columns: 1fr;
  }

  .sm-action-row .btn,
  .sm-rec-toolbar .btn {
    width: 100%;
  }

  .sm-reset-btn {
    margin-left: 0;
  }
}

@media (max-width: 520px) {

  .sm-metrics-grid,
  .sm-dashboard-metrics {
    grid-template-columns: 1fr;
  }

  .sm-tabs {
    grid-template-columns: 1fr;
  }

  .sm-topic-row,
  .sm-mistake-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .sm-topic-count,
  .sm-mistake-count {
    grid-column: 2;
    text-align: left;
  }

  .sm-panel-icon {
    width: 36px;
    height: 36px;
  }

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

  .sm-heatmap-select,
  .sm-heatmap-filter,
  .sm-heatmap-controls {
    width: 100%;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 980px) {
  #studentMyMistakes .section-header {
    margin-bottom: 10px;
  }

  .student-mistakes-panel {
    max-width: none;
  }

  .sm-panel,
  .sm-tab-content {
    gap: 12px;
  }

  .sm-hero {
    padding: 14px 16px;
  }

  .sm-hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
    gap: 14px;
  }

  .sm-hero-title {
    margin-top: 10px;
    font-size: 20px;
  }

  .sm-hero-text {
    font-size: 13px;
    line-height: 1.5;
  }

  .sm-metric-card {
    min-height: 84px;
    padding: 10px;
    gap: 7px;
  }

  .sm-metric-icon {
    width: 30px;
    height: 30px;
  }

  .sm-metric-value {
    font-size: 20px;
  }

  .sm-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px;
  }

  .sm-tab-btn {
    min-height: 38px;
    padding: 8px 10px !important;
  }
}

/* Institution attendance history responsive layout */
#attendanceHistoryModal,
#attendanceHistoryModal * {
  box-sizing: border-box;
}

#attendanceHistoryModal .attendance-history-modal-content {
  width: min(1120px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(92dvh, 900px);
}

#attendanceHistoryModal .modal-header {
  align-items: center;
  gap: 12px;
}

#attendanceHistoryModal .modal-header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#attendanceHistoryModal .modal-body {
  max-height: calc(min(92dvh, 900px) - 132px);
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#attendanceHistoryModal .attendance-history-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 4px;
}

#attendanceHistoryModal .attendance-history-tabs .tab-btn {
  flex: 1 1 0;
  justify-content: center;
  min-height: 40px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#attendanceHistoryModal .tab-content,
#attendanceHistoryContent,
#classHistoryContent,
#dateHistoryContent,
#studentSummaryCards,
#classSummaryBar {
  max-width: 100%;
  min-width: 0;
}

#attendanceHistoryModal .attendance-filter-bar {
  max-width: 100%;
  padding: clamp(12px, 1.8vw, 18px);
}

#attendanceHistoryModal .afb-row {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  min-width: 0;
}

#attendanceHistoryModal .afb-field,
#attendanceHistoryModal .afb-date-nav,
#attendanceHistoryModal .afb-actions {
  min-width: 0;
}

#attendanceHistoryModal .afb-student-select {
  grid-column: span 2;
}

#attendanceHistoryModal .afb-field label {
  display: block;
  line-height: 1.25;
}

#attendanceHistoryModal .virtual-student-dropdown,
#attendanceHistoryModal .dropdown-search,
#attendanceHistoryModal .dropdown-selected-chip,
#attendanceHistoryModal .filter-select,
#attendanceHistoryModal .afb-date-input {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

#attendanceHistoryModal .dropdown-results {
  max-height: min(42dvh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 20;
}

#attendanceHistoryModal .afb-date-nav {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
}

#attendanceHistoryModal .afb-date-btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 38px;
  min-width: 0;
  width: 100%;
}

#attendanceHistoryModal .afb-actions {
  align-self: end;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#attendanceHistoryModal .afb-actions .btn,
#attendanceHistoryModal .modal-footer .btn,
#attendanceHistoryModal .view-switcher .view-btn,
#attendanceHistoryModal .week-navigator .btn {
  justify-content: center;
  min-height: 38px;
  min-width: 0;
}

#attendanceHistoryModal .attendance-summary-cards,
#attendanceHistoryModal .attendance-history-stats-grid,
#attendanceHistoryModal .class-summary-stats,
#attendanceHistoryModal .detail-stats-row,
#attendanceHistoryModal .date-header-stats,
#attendanceHistoryModal .class-summary-item-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
}

#attendanceHistoryModal .class-summaries-grid,
#attendanceHistoryModal .class-students-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

#attendanceHistoryModal .attendance-table-wrapper,
#attendanceHistoryModal .matrix-view {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#attendanceHistoryModal .attendance-table,
#attendanceHistoryModal .matrix-table {
  min-width: 680px;
}

#attendanceHistoryModal .matrix-table .sticky-col {
  min-width: 150px;
}

#attendanceHistoryModal .class-history-header {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

#attendanceHistoryModal .class-history-header .attendance-filter-bar {
  min-width: 0;
}

#attendanceHistoryModal .view-switcher {
  align-self: end;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, auto));
  min-width: 0;
}

#attendanceHistoryModal .week-navigator {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  min-width: 0;
}

#attendanceHistoryModal .week-label {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#attendanceHistoryModal .class-summary-card,
#attendanceHistoryModal .attendance-history-card,
#attendanceHistoryModal .date-history-header-card,
#attendanceHistoryModal .class-summary-card-item,
#attendanceHistoryModal .detail-view {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: clamp(12px, 1.8vw, 18px);
}

#attendanceHistoryModal .class-summary-header,
#attendanceHistoryModal .attendance-history-card-header,
#attendanceHistoryModal .date-history-header-card,
#attendanceHistoryModal .detail-view-header,
#attendanceHistoryModal .class-summary-item-header,
#attendanceHistoryModal .header-top,
#attendanceHistoryModal .header-meta,
#attendanceHistoryModal .header-badges,
#attendanceHistoryModal .date-history-filters-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}

#attendanceHistoryModal .class-summary-header,
#attendanceHistoryModal .attendance-history-card-header,
#attendanceHistoryModal .date-history-header-card,
#attendanceHistoryModal .detail-view-header {
  justify-content: space-between;
}

#attendanceHistoryModal .class-summary-header-left,
#attendanceHistoryModal .class-summary-header-right,
#attendanceHistoryModal .header-content,
#attendanceHistoryModal .date-header-left,
#attendanceHistoryModal .date-header-right,
#attendanceHistoryModal .class-summary-item-header,
#attendanceHistoryModal .detail-date-info,
#attendanceHistoryModal .detail-date-summary {
  min-width: 0;
}

#attendanceHistoryModal .header-content,
#attendanceHistoryModal .date-header-left {
  flex: 1 1 260px;
}

#attendanceHistoryModal .class-summary-header-right,
#attendanceHistoryModal .date-header-right {
  justify-content: flex-end;
}

#attendanceHistoryModal .header-gender-icon,
#attendanceHistoryModal .expand-indicator,
#attendanceHistoryModal .expand-indicator-sm {
  flex: 0 0 auto;
}

#attendanceHistoryModal .class-summary-title,
#attendanceHistoryModal .class-summary-stats-mini,
#attendanceHistoryModal .class-summary-item-name,
#attendanceHistoryModal .class-summary-item-type,
#attendanceHistoryModal .header-name,
#attendanceHistoryModal .header-class,
#attendanceHistoryModal .header-total-days,
#attendanceHistoryModal .header-last-date,
#attendanceHistoryModal .date-header-full,
#attendanceHistoryModal .date-header-weekday,
#attendanceHistoryModal .detail-view-title,
#attendanceHistoryModal .detail-view-desc,
#attendanceHistoryModal .detail-weekday,
#attendanceHistoryModal .detail-date-full,
#attendanceHistoryModal .record-status-text,
#attendanceHistoryModal .detail-page-records-info {
  min-width: 0;
  overflow-wrap: anywhere;
}

#attendanceHistoryModal .class-summary-bar,
#attendanceHistoryModal .card-rate-bar,
#attendanceHistoryModal .rate-bar-mini {
  max-width: 100%;
  overflow: hidden;
}

#attendanceHistoryModal .class-stat-box,
#attendanceHistoryModal .stat-box,
#attendanceHistoryModal .detail-stat-box,
#attendanceHistoryModal .mini-stat {
  min-width: 0;
}

#attendanceHistoryModal .detail-filter-tabs {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  min-width: 0;
}

#attendanceHistoryModal .detail-tab {
  justify-content: center;
  min-height: 38px;
  min-width: 0;
  white-space: normal;
}

#attendanceHistoryModal .detail-date-group,
#attendanceHistoryModal .detail-type-section,
#attendanceHistoryModal .detail-records-list {
  max-width: 100%;
  min-width: 0;
}

#attendanceHistoryModal .detail-date-header,
#attendanceHistoryModal .detail-type-label,
#attendanceHistoryModal .detail-record-row,
#attendanceHistoryModal .detail-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}

#attendanceHistoryModal .detail-date-header,
#attendanceHistoryModal .detail-pagination {
  justify-content: space-between;
}

#attendanceHistoryModal .detail-record-row {
  justify-content: space-between;
}

#attendanceHistoryModal .detail-page-btn {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: center;
  min-height: 36px;
}

#attendanceHistoryModal .date-history-view {
  display: grid;
  gap: 12px;
  max-width: 100%;
  min-width: 0;
}

#attendanceHistoryModal .date-header-rate,
#attendanceHistoryModal .class-summary-rate,
#attendanceHistoryModal .class-summary-item-rate,
#attendanceHistoryModal .header-rate,
#attendanceHistoryModal .stat-pill,
#attendanceHistoryModal .filter-badge,
#attendanceHistoryModal .filter-badge-total,
#attendanceHistoryModal .detail-badge,
#attendanceHistoryModal .header-student-no,
#attendanceHistoryModal .stat-mini {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

#attendanceHistoryPagination {
  max-width: 100%;
  min-width: 0;
}

#attendanceHistoryPagination .pagination-wrap,
#attendanceHistoryPagination .pagination-btns {
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#attendanceHistoryPagination .pagination-btn {
  min-height: 36px;
}

#attendanceHistoryModal .heatmap-view {
  max-width: 100%;
  min-height: clamp(260px, 42vh, 420px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#attendanceHistoryModal .heatmap-view canvas {
  display: block;
  max-width: 100%;
}

@media (max-width: 900px) {
  #attendanceHistoryModal .attendance-history-modal-content {
    width: min(100vw - 20px, 960px);
    max-width: calc(100vw - 20px);
  }

  #attendanceHistoryModal .afb-student-select,
  #attendanceHistoryModal .afb-date-nav {
    grid-column: 1 / -1;
  }

  #attendanceHistoryModal .class-history-header {
    grid-template-columns: 1fr;
  }

  #attendanceHistoryModal .view-switcher {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #attendanceHistoryModal .date-header-right,
  #attendanceHistoryModal .class-summary-header-right {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  #attendanceHistoryModal .attendance-history-modal-content {
    width: 100vw;
    max-width: 100vw !important;
    max-height: 100dvh;
    border-radius: 0;
  }

  #attendanceHistoryModal .modal-header,
  #attendanceHistoryModal .modal-body,
  #attendanceHistoryModal .modal-footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  #attendanceHistoryModal .modal-body {
    max-height: calc(100dvh - 126px);
  }

  #attendanceHistoryModal .attendance-history-tabs {
    gap: 6px;
    padding: 3px;
  }

  #attendanceHistoryModal .attendance-history-tabs .tab-btn {
    min-height: 38px;
    padding-left: 8px;
    padding-right: 8px;
  }

  #attendanceHistoryModal .afb-row,
  #attendanceHistoryModal .afb-actions,
  #attendanceHistoryModal .detail-pagination {
    display: grid;
    grid-template-columns: 1fr;
  }

  #attendanceHistoryModal .afb-row {
    display: grid;
  }

  #attendanceHistoryModal .afb-actions,
  #attendanceHistoryModal .modal-footer {
    width: 100%;
  }

  #attendanceHistoryModal .afb-actions .btn,
  #attendanceHistoryModal .modal-footer .btn,
  #attendanceHistoryModal .view-switcher .view-btn,
  #attendanceHistoryModal .detail-page-btn {
    width: 100%;
  }

  #attendanceHistoryModal .attendance-table,
  #attendanceHistoryModal .matrix-table {
    min-width: 600px;
  }

  #attendanceHistoryModal .class-summary-header,
  #attendanceHistoryModal .attendance-history-card-header,
  #attendanceHistoryModal .date-history-header-card,
  #attendanceHistoryModal .detail-view-header,
  #attendanceHistoryModal .detail-date-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #attendanceHistoryModal .header-content,
  #attendanceHistoryModal .date-header-left,
  #attendanceHistoryModal .date-header-right,
  #attendanceHistoryModal .class-summary-header-left,
  #attendanceHistoryModal .class-summary-header-right,
  #attendanceHistoryModal .detail-date-info,
  #attendanceHistoryModal .detail-date-summary {
    flex-basis: auto;
    width: 100%;
  }

  #attendanceHistoryModal .attendance-summary-cards,
  #attendanceHistoryModal .attendance-history-stats-grid,
  #attendanceHistoryModal .class-summary-stats,
  #attendanceHistoryModal .detail-stats-row,
  #attendanceHistoryModal .class-summary-item-stats,
  #attendanceHistoryModal .class-summaries-grid,
  #attendanceHistoryModal .class-students-grid,
  #attendanceHistoryModal .date-header-stats {
    grid-template-columns: 1fr;
  }

  #attendanceHistoryPagination .pagination-wrap {
    align-items: stretch;
    width: 100%;
  }

  #attendanceHistoryPagination .pagination-btns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #attendanceHistoryPagination .pagination-btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  #attendanceHistoryModal .modal-header h2 {
    font-size: 20px;
  }

  #attendanceHistoryModal .attendance-filter-bar,
  #attendanceHistoryModal .class-summary-card,
  #attendanceHistoryModal .attendance-history-card,
  #attendanceHistoryModal .date-history-header-card,
  #attendanceHistoryModal .class-summary-card-item,
  #attendanceHistoryModal .detail-view {
    padding: 10px;
  }

  #attendanceHistoryModal .view-switcher {
    grid-template-columns: 1fr;
  }

  #attendanceHistoryModal .week-navigator,
  #attendanceHistoryModal .afb-date-nav {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
  }

  #attendanceHistoryModal .attendance-table,
  #attendanceHistoryModal .matrix-table {
    min-width: 560px;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 980px) {
  #attendanceHistoryModal .attendance-history-modal-content {
    max-height: 96dvh;
  }

  #attendanceHistoryModal .modal-header,
  #attendanceHistoryModal .modal-body,
  #attendanceHistoryModal .modal-footer {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #attendanceHistoryModal .modal-body {
    max-height: calc(96dvh - 104px);
  }

  #attendanceHistoryModal .attendance-filter-bar,
  #attendanceHistoryModal .class-summary-card,
  #attendanceHistoryModal .attendance-history-card,
  #attendanceHistoryModal .date-history-header-card,
  #attendanceHistoryModal .class-summary-card-item,
  #attendanceHistoryModal .detail-view {
    padding: 10px;
  }

  #attendanceHistoryModal .dropdown-results {
    max-height: 44dvh;
  }
}

/* Institution central dashboard map responsive layout */
#institutionDashboard #adminChainDashboard,
#institutionDashboard .chain-dashboard {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

#institutionDashboard .chain-dashboard .dashboard-grid {
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

#institutionDashboard .chain-map-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

#institutionDashboard .chain-map-panel .panel-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
  margin-bottom: 0;
  min-width: 0;
}

#institutionDashboard .chain-map-panel .panel-title {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

#institutionDashboard .chain-dashboard-map {
  aspect-ratio: 2.1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(220px, 38vw, 360px) !important;
  max-height: min(52vh, 430px);
  min-width: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

#institutionDashboard .chain-dashboard-map svg {
  display: block;
  flex: 0 0 auto;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
}

#institutionDashboard .chain-dashboard-map-stats {
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  margin-top: 0 !important;
  min-width: 0;
  width: 100%;
}

#institutionDashboard .chain-dashboard-map-stats span {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--secondary-bg);
  overflow-wrap: anywhere;
}

#institutionDashboard .chain-dashboard-map-stats strong {
  color: var(--text-primary);
}

.map-tooltip {
  max-width: min(260px, calc(100vw - 24px));
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  #institutionDashboard .chain-dashboard .dashboard-grid>.chain-map-panel[style*='grid-column'] {
    grid-column: 1 / -1 !important;
  }

  #institutionDashboard .chain-dashboard-map {
    min-height: clamp(220px, 52vw, 340px) !important;
    max-height: 46vh;
  }
}

@media (max-width: 640px) {
  #institutionDashboard .chain-map-panel {
    gap: 10px;
    padding: 12px;
  }

  #institutionDashboard .chain-dashboard-map {
    aspect-ratio: 1.55 / 1;
    min-height: 220px !important;
    max-height: none;
  }

  #institutionDashboard .chain-dashboard-map-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  #institutionDashboard .chain-dashboard-map {
    aspect-ratio: 1.28 / 1;
    min-height: 205px !important;
  }

  #institutionDashboard .chain-dashboard-map-stats {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 980px) {
  #institutionDashboard .chain-map-panel {
    gap: 8px;
  }

  #institutionDashboard .chain-dashboard-map {
    aspect-ratio: 2.4 / 1;
    min-height: 190px !important;
    max-height: 54vh;
  }

  #institutionDashboard .chain-dashboard-map-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Institution library responsive layout */
#instLibrary,
#instLibraryContent,
#instLibrary .library-panel {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

#instLibrary .section-header {
  align-items: flex-start;
  gap: 12px;
}

#instLibrary .section-header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instLibrary .section-header>div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

#instLibrary .section-header .btn {
  min-height: 38px;
  justify-content: center;
  white-space: nowrap;
}

#instLibrary .library-panel {
  display: grid;
  gap: 18px;
}

#instLibrary .library-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
  margin-bottom: 0 !important;
}

#instLibrary .dash-stat-mini {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--shadow-xs);
}

#instLibrary .dash-stat-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

#instLibrary .dash-stat-mini-icon svg {
  width: 20px;
  height: 20px;
}

#instLibrary .dash-stat-mini-value {
  min-width: 0;
  color: var(--text-primary);
  font-size: 26px;
  font-weight: 850;
  line-height: 1;
  overflow-wrap: anywhere;
}

#instLibrary .dash-stat-mini-label {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#instLibrary .library-inventory-panel,
#instLibrary .library-loans-panel {
  min-width: 0;
  overflow: hidden;
  padding: clamp(14px, 2vw, 20px);
}

#instLibrary .dash-panel-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: space-between;
  margin-bottom: 14px;
  min-width: 0;
}

#instLibrary .dash-panel-title {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-width: 0;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

#instLibrary .library-filter-bar {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(220px, 1fr) minmax(140px, .45fr) minmax(130px, .4fr);
  margin-bottom: 14px !important;
  min-width: 0;
}

#instLibrary .library-search-field {
  min-width: 0 !important;
}

#instLibrary .form-input,
#instLibrary .library-filter-bar select,
#instLibrary #libraryLoanStatusFilter {
  max-width: 100%;
  min-height: 38px;
  min-width: 0 !important;
  width: 100%;
}

#instLibrary #libraryBooksContent,
#instLibrary #libraryLoansContent,
#instLibrary #libraryBooksPagination {
  max-width: 100%;
  min-width: 0;
}

#instLibrary .table-container {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#instLibrary table {
  min-width: 820px;
}

#instLibrary th,
#instLibrary td {
  vertical-align: middle;
}

#instLibrary td:first-child {
  min-width: 220px;
}

#instLibrary td:first-child strong,
#instLibrary td:nth-child(2),
#instLibrary td:nth-child(3),
#instLibrary .badge {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instLibrary td:first-child strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.35;
}

#instLibrary td:first-child div {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instLibrary td:last-child {
  min-width: 112px;
}

#instLibrary td:last-child,
#instLibrary .library-row-actions {
  white-space: nowrap;
}

#instLibrary .library-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#instLibrary .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
}

#instLibrary .btn-icon svg,
#instLibrary .btn svg {
  flex: 0 0 auto;
}

#instLibrary .pagination-wrap,
#instLibrary .pagination-btns {
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#libraryBookForm,
#libraryLoanForm {
  max-width: 100%;
  min-width: 0;
}

#libraryBookForm .form-grid,
#libraryLoanForm .form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  min-width: 0;
}

#libraryBookForm label,
#libraryLoanForm label {
  min-width: 0;
  overflow-wrap: anywhere;
}

#libraryBookForm .form-input,
#libraryLoanForm .form-input {
  margin-top: 6px;
  width: 100%;
}

@media (max-width: 900px) {
  #instLibrary .library-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #instLibrary .library-search-field {
    grid-column: 1 / -1;
  }

  #instLibrary table {
    min-width: 760px;
  }
}

@media (max-width: 640px) {
  #instLibrary .section-header {
    align-items: stretch;
  }

  #instLibrary .section-header>div:last-child {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }

  #instLibrary .section-header .btn {
    width: 100%;
  }

  #instLibrary .library-panel {
    gap: 14px;
  }

  #instLibrary .library-stats-grid,
  #instLibrary .library-filter-bar {
    grid-template-columns: 1fr !important;
  }

  #instLibrary .dash-stat-mini {
    min-height: 96px;
    padding: 14px;
  }

  #instLibrary .library-inventory-panel,
  #instLibrary .library-loans-panel {
    padding: 12px;
  }

  #instLibrary .dash-panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  #instLibrary table {
    min-width: 700px;
  }

  #instLibrary #libraryLoanStatusFilter {
    width: 100%;
  }

  #instLibrary .pagination-wrap {
    align-items: stretch;
  }

  #instLibrary .pagination-btns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #instLibrary .pagination-btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  #instLibrary .dash-stat-mini {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  #instLibrary .dash-stat-mini-icon {
    grid-row: span 2;
    width: 36px;
    height: 36px;
  }

  #instLibrary .dash-stat-mini-value {
    font-size: 22px;
  }

  #instLibrary table {
    min-width: 640px;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 980px) {
  #instLibrary .section-header {
    margin-bottom: 12px;
  }

  #instLibrary .library-panel {
    gap: 12px;
  }

  #instLibrary .library-stats-grid {
    grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
    gap: 10px !important;
  }

  #instLibrary .dash-stat-mini {
    min-height: 82px;
    padding: 10px;
    gap: 6px;
  }

  #instLibrary .dash-stat-mini-icon {
    width: 32px;
    height: 32px;
  }

  #instLibrary .dash-stat-mini-value {
    font-size: 20px;
  }

  #instLibrary .library-inventory-panel,
  #instLibrary .library-loans-panel {
    padding: 12px;
  }
}

/* Institution optik result entry responsive layout */
#enterExamResultModal,
#enterExamResultModal * {
  box-sizing: border-box;
}

#enterExamResultModal .modal-content {
  display: flex;
  flex-direction: column;
  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: min(92dvh, 900px) !important;
  overflow: hidden;
}

#enterExamResultModal .modal-header,
#enterExamResultModal .modal-footer {
  flex: 0 0 auto;
}

#enterExamResultModal .modal-header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#enterExamResultModal .modal-body {
  flex: 1 1 auto;
  max-height: calc(min(92dvh, 900px) - 148px) !important;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#enterExamResultModal .optik-wizard-header {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  max-width: 100%;
  overflow: visible;
}

#enterExamResultModal .wizard-arrow {
  display: none !important;
}

#enterExamResultModal .optik-wizard-step {
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px;
}

#enterExamResultModal .step-number {
  flex: 0 0 auto;
}

#enterExamResultModal .step-info {
  min-width: 0;
}

#enterExamResultModal .step-title,
#enterExamResultModal .step-desc {
  min-width: 0;
  overflow-wrap: anywhere;
}

#enterExamResultModal .optik-setup-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
  max-width: 100%;
}

#enterExamResultModal .setup-field,
#enterExamResultModal .setup-field label,
#enterExamResultModal .setup-field select,
#enterExamResultModal .setup-field input {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

#enterExamResultModal #optikResultContainer,
#enterExamResultModal .optik-panel,
#enterExamResultModal .optik-content,
#enterExamResultModal .optik-tab-content,
#enterExamResultModal .upload-section,
#enterExamResultModal .answer-key-section,
#enterExamResultModal .preview-section {
  max-width: 100%;
  min-width: 0;
}

#enterExamResultModal .optik-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#enterExamResultModal .optik-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 100%;
}

#enterExamResultModal .optik-tab {
  justify-content: center;
  min-height: 44px;
  min-width: 0 !important;
  padding: 9px 10px;
  text-align: center;
}

#enterExamResultModal .optik-tab span,
#enterExamResultModal .optik-tab {
  overflow-wrap: anywhere;
}

#enterExamResultModal .tab-guidance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#enterExamResultModal .guidance-text,
#enterExamResultModal .guidance-text h4,
#enterExamResultModal .guidance-text p {
  min-width: 0;
  overflow-wrap: anywhere;
}

#enterExamResultModal .file-upload-area {
  min-height: 150px;
  padding: 18px;
}

#enterExamResultModal .upload-placeholder,
#enterExamResultModal .upload-preview {
  max-width: 100%;
  min-width: 0;
}

#enterExamResultModal .upload-placeholder p,
#enterExamResultModal .upload-placeholder span,
#enterExamResultModal .file-name {
  max-width: 100%;
  overflow-wrap: anywhere;
}

#enterExamResultModal .format-selector {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(180px, 280px) minmax(0, 1fr);
  max-width: 100%;
}

#enterExamResultModal .format-selector label,
#enterExamResultModal .format-selector select {
  min-width: 0;
}

#enterExamResultModal .result-stats,
#enterExamResultModal .preview-stats {
  display: grid !important;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

#enterExamResultModal .answer-key-form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  max-width: 100%;
}

#enterExamResultModal .section-key {
  max-width: 100%;
  min-width: 0;
}

#enterExamResultModal .section-header {
  flex-wrap: wrap;
  gap: 8px;
}

#enterExamResultModal .section-name,
#enterExamResultModal .section-range {
  min-width: 0;
  overflow-wrap: anywhere;
}

#enterExamResultModal .section-answers,
#enterExamResultModal .answer-key-form input,
#enterExamResultModal .key-load-options select {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

#enterExamResultModal .key-import-section,
#enterExamResultModal .key-format-info,
#enterExamResultModal .format-example,
#enterExamResultModal .format-preview,
#enterExamResultModal .format-table,
#enterExamResultModal .preview-table-container {
  max-width: 100%;
  min-width: 0;
}

#enterExamResultModal .format-example,
#enterExamResultModal .format-preview,
#enterExamResultModal .format-table,
#enterExamResultModal .preview-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#enterExamResultModal .format-tabs,
#enterExamResultModal .kitapcik-key-tabs,
#enterExamResultModal .answer-key-actions,
#enterExamResultModal .preview-actions,
#enterExamResultModal .tab-actions,
#enterExamResultModal .key-load-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

#enterExamResultModal .key-load-options {
  align-items: flex-end;
}

#enterExamResultModal .preview-header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

#enterExamResultModal .preview-table {
  min-width: 680px;
}

#enterExamResultModal .modal-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  #enterExamResultModal .modal-content {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  #enterExamResultModal .optik-wizard-header,
  #enterExamResultModal .optik-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #enterExamResultModal .optik-setup-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #enterExamResultModal .setup-field:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  #enterExamResultModal .modal-content {
    border-radius: 0;
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }

  #enterExamResultModal .modal-body {
    max-height: none !important;
    padding: 12px;
  }

  #enterExamResultModal .modal-header,
  #enterExamResultModal .modal-footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  #enterExamResultModal .optik-wizard-header {
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    gap: 6px;
  }

  #enterExamResultModal .optik-wizard-step {
    justify-content: center;
    min-height: 44px;
    padding: 8px 6px;
  }

  #enterExamResultModal .optik-wizard-step .step-info {
    display: none;
  }

  #enterExamResultModal .optik-setup-row,
  #enterExamResultModal .optik-tabs,
  #enterExamResultModal .format-selector,
  #enterExamResultModal .answer-key-form {
    grid-template-columns: 1fr !important;
  }

  #enterExamResultModal .tab-guidance {
    grid-template-columns: 1fr;
  }

  #enterExamResultModal .guidance-icon {
    width: 38px;
    height: 38px;
  }

  #enterExamResultModal .file-upload-area {
    min-height: 128px;
    padding: 14px;
  }

  #enterExamResultModal .format-tabs,
  #enterExamResultModal .kitapcik-key-tabs,
  #enterExamResultModal .answer-key-actions,
  #enterExamResultModal .preview-actions,
  #enterExamResultModal .tab-actions,
  #enterExamResultModal .key-load-options,
  #enterExamResultModal .modal-footer {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  #enterExamResultModal .format-tabs button,
  #enterExamResultModal .kitapcik-key-tabs button,
  #enterExamResultModal .answer-key-actions button,
  #enterExamResultModal .preview-actions button,
  #enterExamResultModal .tab-actions button,
  #enterExamResultModal .key-load-options button,
  #enterExamResultModal .modal-footer button {
    justify-content: center;
    width: 100%;
  }

  #enterExamResultModal .preview-header {
    align-items: stretch;
    flex-direction: column;
  }

  #enterExamResultModal .preview-table {
    min-width: 620px;
  }
}

@media (max-width: 420px) {
  #enterExamResultModal .modal-header h2 {
    font-size: 17px;
  }

  #enterExamResultModal .optik-content {
    padding: 10px;
  }

  #enterExamResultModal .result-stats,
  #enterExamResultModal .preview-stats {
    grid-template-columns: 1fr;
  }

  #enterExamResultModal .preview-table {
    min-width: 580px;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 980px) {
  #enterExamResultModal .modal-content {
    max-height: 96dvh !important;
  }

  #enterExamResultModal .modal-body {
    max-height: calc(96dvh - 112px) !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #enterExamResultModal .optik-wizard-header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 10px;
  }

  #enterExamResultModal .optik-wizard-step {
    min-height: 40px;
    padding: 7px;
  }

  #enterExamResultModal .step-desc {
    display: none;
  }

  #enterExamResultModal .optik-setup-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 10px;
  }

  #enterExamResultModal .setup-field:first-child {
    grid-column: auto;
  }

  #enterExamResultModal .optik-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #enterExamResultModal .optik-tab {
    min-height: 38px;
    padding: 7px 8px;
  }

  #enterExamResultModal .file-upload-area {
    min-height: 108px;
  }

  #enterExamResultModal .answer-key-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Institution question pool responsive layout */
#instQuestionPool,
#instQuestionPool * {
  box-sizing: border-box;
}

#instQuestionPool {
  max-width: 100%;
  min-width: 0;
}

#instQuestionPool .section-header {
  align-items: center;
  gap: 12px;
}

#instQuestionPool .section-header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instQuestionPool .section-header h2 svg,
#instQuestionPool svg {
  flex: 0 0 auto;
}

#instQuestionPoolContent,
#instQuestionPool .question-pool-panel,
#instQuestionPool .question-pool-table-shell,
#instQuestionPool .question-pool-table-scroll {
  max-width: 100%;
  min-width: 0;
}

#instQuestionPool .question-pool-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 !important;
}

#instQuestionPool .question-pool-stats-grid {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  margin-bottom: 0 !important;
}

#instQuestionPool .question-pool-stats-grid>div,
#instQuestionPool .question-pool-insights-grid>div,
#instQuestionPool .question-pool-filter-card,
#instQuestionPool .question-pool-table-shell {
  max-width: 100%;
  min-width: 0;
  border-radius: 10px !important;
}

#instQuestionPool .question-pool-stats-grid>div>div {
  min-width: 0;
}

#instQuestionPool .question-pool-stats-grid>div>div>div:last-child,
#instQuestionPool .question-pool-insights-grid span,
#instQuestionPool .question-pool-insights-grid h4 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instQuestionPool .question-pool-insights-grid {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  margin-bottom: 0 !important;
}

#instQuestionPool .question-pool-filter-card {
  margin-bottom: 0 !important;
  padding: 14px !important;
}

#instQuestionPool .question-pool-filter-row {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(128px, .7fr));
  margin-bottom: 12px !important;
}

#instQuestionPool .question-pool-search-field {
  min-width: 0 !important;
}

#instQuestionPool .question-pool-filter-row input,
#instQuestionPool .question-pool-filter-row select,
#instQuestionPool .question-pool-sort-group select {
  min-height: 38px;
  min-width: 0 !important;
  width: 100% !important;
}

#instQuestionPool .question-pool-filter-actions,
#instQuestionPool .question-pool-sort-group,
#instQuestionPool .question-pool-bulk-row,
#instQuestionPool .question-pool-bulk-buttons {
  max-width: 100%;
  min-width: 0;
}

#instQuestionPool .question-pool-filter-actions {
  align-items: center !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: space-between !important;
}

#instQuestionPool .question-pool-sort-group {
  flex: 1 1 auto;
}

#instQuestionPool #qpSelectedCount,
#instQuestionPool #qpResultCount {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instQuestionPool .question-pool-bulk-actions {
  margin-bottom: 0 !important;
  padding: 12px !important;
}

#instQuestionPool .question-pool-bulk-buttons {
  flex-wrap: wrap;
}

#instQuestionPool .question-pool-table-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

#instQuestionPool .question-pool-table {
  min-width: 900px !important;
}

#instQuestionPool .question-pool-table th,
#instQuestionPool .question-pool-table td {
  vertical-align: middle;
}

#instQuestionPool .question-pool-table td:nth-child(2)>div,
#instQuestionPool .question-pool-table td:nth-child(2)>div>div {
  min-width: 0;
}

#instQuestionPool .question-pool-table td:nth-child(2) {
  min-width: 330px;
}

#instQuestionPool .question-pool-table td:nth-child(2) div {
  overflow-wrap: anywhere;
}

#instQuestionPool .question-pool-row-actions {
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

#instQuestionPool .question-pool-row-actions .btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 30px;
  min-width: 32px;
}

#instQuestionPool #qpPagination {
  max-width: 100%;
  overflow-x: auto;
}

#instQuestionPool #qpPagination .pagination-wrap,
#instQuestionPool #qpPagination .pagination-btns {
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#dynamicModal .modal-content:has(.question-pool-form-modal),
#dynamicModal .modal-content:has(.question-pool-preview-modal) {
  display: flex;
  flex-direction: column;
  width: min(900px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: 92dvh !important;
  overflow: hidden;
}

#dynamicModal .modal-content:has(.question-pool-preview-modal) {
  width: min(760px, calc(100vw - 32px)) !important;
}

#dynamicModal .modal-content:has(.question-pool-form-modal) .modal-body,
#dynamicModal .modal-content:has(.question-pool-preview-modal) .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 !important;
  height: 100%;
}

#dynamicModal .question-pool-form-modal,
#dynamicModal .question-pool-preview-modal {
  max-width: 100% !important;
  max-height: none;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 !important;
  width: 100%;
  height: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

#dynamicModal .question-pool-form-hero {
  align-items: center !important;
  gap: 10px;
  min-width: 0;
}

#dynamicModal .question-pool-form-hero h3,
#dynamicModal .question-pool-form-hero span {
  min-width: 0;
  overflow-wrap: anywhere;
}

#dynamicModal .question-pool-form-body {
  max-width: 100%;
  min-width: 0;
}

#dynamicModal .question-pool-form-grid {
  display: grid !important;
  gap: 12px !important;
}

#dynamicModal .question-pool-form-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#dynamicModal .question-pool-form-grid.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#dynamicModal .question-pool-options-grid {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#dynamicModal .question-pool-options-grid .form-group,
#dynamicModal .question-pool-form-grid .form-group {
  min-width: 0;
}

#dynamicModal .question-pool-options-grid .form-group[style*="span 2"] {
  grid-column: 1 / -1 !important;
}

#dynamicModal .question-pool-form-modal input,
#dynamicModal .question-pool-form-modal select,
#dynamicModal .question-pool-form-modal textarea {
  max-width: 100%;
  min-width: 0;
}

#dynamicModal .question-pool-correct-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  max-width: 100%;
}

#dynamicModal .question-pool-correct-grid label {
  flex: 1 1 72px;
  justify-content: center;
  min-width: 0;
}

#dynamicModal .question-pool-form-footer {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px !important;
}

#dynamicModal .question-pool-preview-modal>div {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 1180px) {
  #instQuestionPool .question-pool-filter-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #instQuestionPool .question-pool-search-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #instQuestionPool .section-header {
    align-items: stretch;
    flex-direction: column;
  }

  #instQuestionPool .section-header .btn,
  #instQuestionPool .section-header button {
    justify-content: center;
    width: 100%;
  }

  #instQuestionPool .question-pool-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #instQuestionPool .question-pool-filter-row {
    grid-template-columns: 1fr !important;
  }

  #instQuestionPool .question-pool-filter-actions,
  #instQuestionPool .question-pool-sort-group,
  #instQuestionPool .question-pool-bulk-row,
  #instQuestionPool .question-pool-bulk-buttons {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }

  #instQuestionPool .question-pool-bulk-buttons .btn,
  #instQuestionPool .question-pool-sort-group select {
    justify-content: center;
    width: 100%;
  }

  #instQuestionPool .question-pool-table {
    min-width: 760px !important;
  }

  #instQuestionPool #qpPagination .pagination-wrap {
    align-items: stretch;
    width: 100%;
  }

  #instQuestionPool #qpPagination .pagination-btns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #instQuestionPool #qpPagination .pagination-btn {
    width: 100%;
  }

  #dynamicModal .modal-content:has(.question-pool-form-modal),
  #dynamicModal .modal-content:has(.question-pool-preview-modal) {
    border-radius: 0;
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }

  #dynamicModal .question-pool-form-hero {
    align-items: flex-start !important;
    flex-direction: column;
    padding: 14px !important;
  }

  #dynamicModal .question-pool-form-body {
    padding: 14px !important;
  }

  #dynamicModal .question-pool-form-grid.two-col,
  #dynamicModal .question-pool-form-grid.three-col,
  #dynamicModal .question-pool-options-grid {
    grid-template-columns: 1fr !important;
  }

  #dynamicModal .question-pool-options-grid .form-group[style*="span 2"] {
    grid-column: auto !important;
  }

  #dynamicModal .question-pool-form-footer {
    display: grid !important;
    grid-template-columns: 1fr;
    padding: 12px 14px !important;
  }

  #dynamicModal .question-pool-form-footer .btn {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 420px) {

  #instQuestionPool .question-pool-stats-grid,
  #instQuestionPool .question-pool-insights-grid {
    grid-template-columns: 1fr !important;
  }

  #instQuestionPool .question-pool-filter-card,
  #instQuestionPool .question-pool-stats-grid>div,
  #instQuestionPool .question-pool-insights-grid>div {
    padding: 12px !important;
  }

  #instQuestionPool .question-pool-table {
    min-width: 700px !important;
  }

  #dynamicModal .question-pool-correct-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #dynamicModal .question-pool-correct-grid label {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 980px) {
  #instQuestionPool .section-header {
    margin-bottom: 12px;
  }

  #instQuestionPool .question-pool-panel {
    gap: 12px;
  }

  #instQuestionPool .question-pool-stats-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  }

  #instQuestionPool .question-pool-insights-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  }

  #instQuestionPool .question-pool-filter-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #instQuestionPool .question-pool-search-field {
    grid-column: 1 / -1;
  }

  #dynamicModal .modal-content:has(.question-pool-form-modal),
  #dynamicModal .modal-content:has(.question-pool-preview-modal) {
    max-height: 96dvh !important;
  }

  #dynamicModal .question-pool-form-body {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  #dynamicModal .question-pool-form-grid.three-col {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

#instOnlineExam,
#instOnlineExam * {
  box-sizing: border-box;
}

#instOnlineExam,
#instOnlineExamContent {
  max-width: 100%;
  min-width: 0;
}

#instOnlineExam .section-header {
  align-items: center;
  gap: 12px;
}

#instOnlineExam .section-header h2,
#instOnlineExam .online-exam-toolbar h2,
#instOnlineExam .online-exam-card h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instOnlineExam .online-exam-empty-state {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(480px, 62vh);
  padding: 56px 20px;
  text-align: center;
}

#instOnlineExam .online-exam-empty-icon {
  color: var(--text-tertiary);
  display: inline-flex;
  margin-bottom: 16px;
}

#instOnlineExam .online-exam-empty-state h3 {
  color: var(--text-primary);
  font-size: 18px;
  margin: 0 0 8px;
}

#instOnlineExam .online-exam-empty-state p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
  max-width: 420px;
}

#instOnlineExam .online-exam-empty-cta {
  justify-content: center;
  min-height: 42px;
}

#instOnlineExam .online-exam-toolbar {
  max-width: 100%;
  min-width: 0;
}

#instOnlineExam .online-exam-toolbar-subtitle {
  color: var(--text-tertiary);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

#instOnlineExam .online-exam-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)) !important;
  max-width: 100%;
  min-width: 0;
}

#instOnlineExam .online-exam-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}

#instOnlineExam .online-exam-card-head {
  gap: 10px;
  min-width: 0;
}

#instOnlineExam .online-exam-card-head h3 {
  flex: 1 1 auto;
}

#instOnlineExam .online-exam-card-meta,
#instOnlineExam .online-exam-card-desc {
  min-width: 0;
  overflow-wrap: anywhere;
}

#instOnlineExam .online-exam-card-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#instOnlineExam .online-exam-card-actions {
  margin-top: auto;
}

#instOnlineExam .online-exam-card-actions .btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

#instOnlineExam .online-exam-pagination {
  flex-wrap: wrap;
}

#createOnlineExamModal .modal-content,
#editOnlineExamModal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: 92dvh;
  max-width: min(900px, calc(100vw - 32px));
  overflow: hidden;
  width: min(900px, calc(100vw - 32px));
}

#createOnlineExamModal .modal-body,
#editOnlineExamModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.online-exam-form {
  max-width: 100%;
  min-width: 0;
}

.online-exam-form-hero {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.online-exam-form-hero h4 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.online-exam-form-grid {
  max-width: 100%;
  min-width: 0;
}

.online-exam-form-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.online-exam-form-grid.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.online-exam-form .form-group,
.online-exam-form input,
.online-exam-form select,
.online-exam-form textarea {
  max-width: 100%;
  min-width: 0;
}

.online-exam-toggle-row {
  align-items: flex-start !important;
  flex-wrap: wrap;
}

.online-exam-form-footer {
  align-items: center;
  flex-wrap: wrap;
}

#questionSelectorModal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: 92dvh;
  overflow: hidden;
  width: min(980px, calc(100vw - 32px)) !important;
}

#questionSelectorModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

#questionSelectorModal .qs-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(92dvh - 74px);
  min-height: 0;
  padding: 16px;
}

#questionSelectorModal .qs-tabs,
#questionSelectorModal .qs-filters,
#questionSelectorModal .qs-pagination,
#questionSelectorModal .qs-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

#questionSelectorModal .qs-tab,
#questionSelectorModal .qs-filter-select,
#questionSelectorModal .qs-search-input,
#questionSelectorModal .qs-pagination-btn {
  min-height: 36px;
}

#questionSelectorModal .qs-filter-select,
#questionSelectorModal .qs-search-input {
  flex: 1 1 160px;
  min-width: 0;
}

#questionSelectorModal .qs-question-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
  overflow-y: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}

#questionSelectorModal .qs-question-row {
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  padding: 10px;
  transition: background .15s ease, border-color .15s ease;
}

#questionSelectorModal .qs-question-row.selected {
  background: rgba(59, 130, 246, .08);
  border-color: var(--accent);
}

#questionSelectorModal .qs-question-body,
#questionSelectorModal .qs-question-text,
#questionSelectorModal .qs-question-meta {
  min-width: 0;
}

#questionSelectorModal .qs-question-text {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#questionSelectorModal .qs-question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

#questionSelectorModal .qs-badge {
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
}

#questionSelectorModal .qs-badge-exam {
  background: rgba(59, 130, 246, .12);
  color: var(--accent);
}

#questionSelectorModal .qs-badge-subject {
  background: var(--border-color);
  color: var(--text-secondary);
}

#questionSelectorModal .qs-badge-easy {
  background: rgba(16, 185, 129, .12);
  color: #059669;
}

#questionSelectorModal .qs-badge-medium {
  background: rgba(245, 158, 11, .14);
  color: #d97706;
}

#questionSelectorModal .qs-badge-hard {
  background: rgba(239, 68, 68, .12);
  color: #dc2626;
}

#questionSelectorModal .qs-pagination {
  align-items: center;
  justify-content: space-between;
}

#questionSelectorModal .qs-pagination-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#questionSelectorModal .qs-footer {
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
  padding-top: 12px;
}

#questionSelectorModal .qs-empty {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 180px;
  text-align: center;
}

@media (max-width: 760px) {

  #instOnlineExam .section-header,
  #instOnlineExam .online-exam-toolbar {
    align-items: stretch !important;
    flex-direction: column;
  }

  #instOnlineExam .section-header .btn,
  #instOnlineExam .section-header button,
  #instOnlineExam .online-exam-toolbar .btn {
    justify-content: center;
    width: 100%;
  }

  #createOnlineExamModal .modal-content,
  #editOnlineExamModal .modal-content,
  #questionSelectorModal .modal-content {
    border-radius: 0;
    height: 100dvh;
    max-height: 100dvh;
    max-width: 100vw;
    width: 100vw !important;
  }

  .online-exam-form {
    padding: 14px !important;
  }

  .online-exam-form-grid.two-col,
  .online-exam-form-grid.three-col {
    grid-template-columns: 1fr !important;
  }

  .online-exam-form-footer {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .online-exam-form-footer .btn,
  #questionSelectorModal .qs-footer .btn {
    justify-content: center;
    width: 100%;
  }

  #questionSelectorModal .qs-modal-body {
    max-height: calc(100dvh - 58px);
    padding: 12px;
  }

  #questionSelectorModal .qs-filters,
  #questionSelectorModal .qs-footer,
  #questionSelectorModal .qs-pagination {
    display: grid;
    grid-template-columns: 1fr;
  }

  #questionSelectorModal .qs-pagination-controls {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    width: 100%;
  }
}

@media (max-width: 420px) {
  #instOnlineExam .online-exam-grid {
    grid-template-columns: 1fr !important;
  }

  #questionSelectorModal .qs-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #questionSelectorModal .qs-tab {
    justify-content: center;
    width: 100%;
  }

  #questionSelectorModal .qs-question-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  #questionSelectorModal .qs-question-arrow {
    display: none;
  }
}

@media (max-width: 640px) {
  #paymentsList .payment-list-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
  }

  #paymentsList .payment-list-item.bulk-mode {
    grid-template-columns: 22px 40px minmax(0, 1fr);
  }

  #paymentsList .payment-list-item-info {
    flex: initial;
  }

  #paymentsList .payment-list-item-amount {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
    text-align: left;
  }

  #paymentsList .payment-list-item.bulk-mode .payment-list-item-amount {
    grid-column: 3;
  }
}

/* Modern expense list */
#expensesList.contracts-list-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 92%, var(--danger-color) 8%), var(--card-bg));
  overflow: visible;
}

#expensesList .payment-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-bg) 86%, var(--surface, #fff) 14%);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 8%, transparent);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

#expensesList .payment-list-item::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--expense-category-color, var(--danger-color));
}

#expensesList .payment-list-item:hover {
  border-color: color-mix(in srgb, var(--expense-category-color, var(--danger-color)) 32%, var(--border-color));
  background: color-mix(in srgb, var(--hover-bg) 50%, var(--card-bg));
  box-shadow: 0 8px 18px color-mix(in srgb, #000 10%, transparent);
  transform: translateY(-1px);
}

#expensesList .payment-list-item.bulk-mode {
  grid-template-columns: 22px 44px minmax(0, 1fr) auto;
}

#expensesList .expense-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

#expensesList .payment-list-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--expense-category-color, var(--danger-color));
  background: color-mix(in srgb, var(--expense-category-color, var(--danger-color)) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--expense-category-color, var(--danger-color)) 22%, transparent);
}

#expensesList .payment-list-item-icon svg {
  width: 18px;
  height: 18px;
}

#expensesList .payment-list-item-info {
  min-width: 0;
}

#expensesList .payment-list-item-name {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#expensesList .payment-list-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
  color: var(--text-tertiary);
  font-size: 12px;
}

#expensesList .payment-list-item-meta-chip,
#expensesList .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1;
}

#expensesList .payment-list-item-meta-chip {
  background: color-mix(in srgb, var(--secondary-bg) 72%, transparent);
  color: var(--text-secondary);
}

#expensesList .payment-list-item-meta-chip svg,
#expensesList .expense-cat svg {
  width: 13px;
  height: 13px;
}

#expensesList .expense-cat {
  color: var(--expense-category-color, var(--danger-color));
  background: color-mix(in srgb, var(--expense-category-color, var(--danger-color)) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--expense-category-color, var(--danger-color)) 20%, transparent);
}

#expensesList .payment-list-item-amount {
  justify-self: end;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 10%, transparent);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

@media (max-width: 640px) {
  #expensesList.contracts-list-panel {
    padding: 8px;
  }

  #expensesList .payment-list-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px;
  }

  #expensesList .payment-list-item.bulk-mode {
    grid-template-columns: 22px 40px minmax(0, 1fr);
  }

  #expensesList .payment-list-item-info {
    flex: initial;
  }

  #expensesList .payment-list-item-icon {
    width: 38px;
    height: 38px;
  }

  #expensesList .payment-list-item-amount {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
    margin-top: 2px;
    text-align: left;
  }

  #expensesList .payment-list-item.bulk-mode .payment-list-item-amount {
    grid-column: 3;
  }
}

#expenseDeleteModal .modal-content {
  width: min(520px, calc(100vw - 32px));
}

#expenseDeleteModal .modal-footer {
  gap: 10px;
}

#expenseDeleteModal #dynamicModalConfirm {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: #fff;
}

#expenseDeleteModal #dynamicModalConfirm:hover {
  background: color-mix(in srgb, var(--danger-color) 86%, #000 14%);
  border-color: color-mix(in srgb, var(--danger-color) 86%, #000 14%);
}

.expense-delete-panel {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  color: var(--text-primary);
}

.expense-delete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: var(--expense-category-color, var(--danger-color));
  background: color-mix(in srgb, var(--expense-category-color, var(--danger-color)) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--expense-category-color, var(--danger-color)) 24%, transparent);
}

.expense-delete-icon svg {
  width: 20px;
  height: 20px;
}

.expense-delete-copy {
  min-width: 0;
}

.expense-delete-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.expense-delete-text {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.expense-delete-summary {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--secondary-bg) 62%, transparent);
}

.expense-delete-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.expense-delete-row span {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 700;
}

.expense-delete-row strong {
  min-width: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.expense-delete-row strong.danger {
  color: var(--danger-color);
  font-variant-numeric: tabular-nums;
}

.expense-delete-category {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--expense-category-color, var(--danger-color)) !important;
}

.expense-delete-category svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 520px) {
  .expense-delete-panel {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .expense-delete-icon {
    width: 40px;
    height: 40px;
  }

  .expense-delete-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

#paymentDeleteModal .modal-content,
#paymentBulkDeleteModal .modal-content {
  width: min(520px, calc(100vw - 32px));
}

#paymentDeleteModal .modal-footer,
#paymentBulkDeleteModal .modal-footer {
  gap: 10px;
}

#paymentDeleteModal #dynamicModalConfirm,
#paymentBulkDeleteModal #dynamicModalConfirm {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: #fff;
}

#paymentDeleteModal #dynamicModalConfirm:hover,
#paymentBulkDeleteModal #dynamicModalConfirm:hover {
  background: color-mix(in srgb, var(--danger-color) 86%, #000 14%);
  border-color: color-mix(in srgb, var(--danger-color) 86%, #000 14%);
}

.payment-delete-panel {
  --payment-delete-color: var(--success-color);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  color: var(--text-primary);
}

.payment-delete-panel.expense {
  --payment-delete-color: var(--danger-color);
}

.payment-delete-panel.bulk {
  --payment-delete-color: var(--danger-color);
}

.payment-delete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: var(--payment-delete-color);
  background: color-mix(in srgb, var(--payment-delete-color) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--payment-delete-color) 24%, transparent);
}

.payment-delete-icon svg {
  width: 20px;
  height: 20px;
}

.payment-delete-copy {
  min-width: 0;
}

.payment-delete-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.payment-delete-text {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.payment-delete-summary {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--secondary-bg) 62%, transparent);
}

.payment-delete-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.payment-delete-row span {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 700;
}

.payment-delete-row strong {
  min-width: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.payment-delete-row strong.income {
  color: var(--success-color);
  font-variant-numeric: tabular-nums;
}

.payment-delete-row strong.danger {
  color: var(--danger-color);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .payment-delete-panel {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .payment-delete-icon {
    width: 40px;
    height: 40px;
  }

  .payment-delete-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .payment-delete-row strong {
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════
   ZİYARETÇİ YÖNETİMİ RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── Visitor Stats Grid ──────────────────────────────────────── */
#instVisitor>div:nth-child(2) {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 1200px) {
  #instVisitor>div:nth-child(2) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  #instVisitor>div:nth-child(2) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  #instVisitor>div:nth-child(2) {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (max-width: 380px) {
  #instVisitor>div:nth-child(2) {
    grid-template-columns: 1fr;
  }
}

/* ── Visitor Tab Dropdown (Mobile/Tablet) ─────────────────────── */
.visitor-tab-dropdown {
  display: none;
  width: 100%;
  position: relative;
}

.visitor-tab-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  gap: 10px;
  transition: all 0.2s;
  min-height: 44px;
}

.visitor-tab-dropdown-btn:hover {
  background: var(--secondary-bg);
  border-color: var(--border-strong);
}

.visitor-tab-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  overflow: hidden;
  animation: fadeIn 0.15s ease;
}

.visitor-tab-dropdown-menu.open {
  display: block;
}

.visitor-tab-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  border-bottom: 1px solid var(--border-color);
}

.visitor-tab-dropdown-item:last-child {
  border-bottom: none;
}

.visitor-tab-dropdown-item:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.visitor-tab-dropdown-item.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}

/* Show dropdown on tablet/mobile */
@media (max-width: 768px) {
  #visitorTabs {
    display: none !important;
  }

  .visitor-tab-dropdown {
    display: block;
  }
}

@media (min-width: 769px) {
  .visitor-tab-dropdown {
    display: none !important;
  }

  #visitorTabs {
    display: flex !important;
  }
}

/* ── Visitor Active Cards Grid ────────────────────────────────── */
#visitorTabContent [style*="repeat(auto-fill, minmax(320px"] {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}

@media (max-width: 640px) {
  #visitorTabContent [style*="repeat(auto-fill, minmax(320px"] {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  #visitorTabContent [style*="repeat(auto-fill, minmax(320px"] {
    grid-template-columns: 1fr !important;
  }

  #visitorTabContent .card {
    padding: 14px;
  }

  #visitorTabContent .card h4 {
    font-size: 15px;
  }
}

/* ── Visitor History Table → Cards ──────────────────────────── */
#visitorHistoryContent table {
  display: table;
}

#visitorHistoryContent tbody tr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--card-bg);
  transition: background 0.15s;
}

#visitorHistoryContent tbody tr:hover {
  background: var(--hover-bg);
}

#visitorHistoryContent tbody tr td {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  align-items: center;
  padding: 3px 0;
  border: none;
  font-size: 13px;
}

#visitorHistoryContent tbody tr td::before {
  content: attr(data-label);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

#visitorHistoryContent thead {
  display: none;
}

#visitorHistoryContent table {
  border-collapse: separate;
  border-spacing: 0 4px;
}

@media (min-width: 769px) {
  #visitorHistoryContent table {
    display: table;
  }

  #visitorHistoryContent tbody tr {
    display: table-row;
    flex-direction: unset;
    gap: unset;
    padding: unset;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    margin-bottom: 0;
    background: transparent;
  }

  #visitorHistoryContent tbody tr:hover {
    background: var(--hover-bg);
  }

  #visitorHistoryContent tbody tr td {
    display: table-cell;
    padding: 10px 12px;
    font-size: 13px;
  }

  #visitorHistoryContent tbody tr td::before {
    display: none;
  }

  #visitorHistoryContent thead {
    display: table-header-group;
  }

  #visitorHistoryContent table {
    border-collapse: collapse;
    border-spacing: unset;
  }
}

@media (max-width: 480px) {
  #visitorHistoryContent tbody tr {
    padding: 10px 10px;
    gap: 4px;
  }

  #visitorHistoryContent tbody tr td {
    font-size: 12px;
    gap: 8px;
  }

  #visitorHistoryContent tbody tr td::before {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  #visitorHistoryContent tbody tr {
    padding: 8px 8px;
  }

  #visitorHistoryContent tbody tr td {
    font-size: 11px;
    gap: 6px;
  }
}

/* ── Blacklist Table → Cards ──────────────────────────────────── */
#blacklistContent table tbody tr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--danger-bg);
  border-left: 4px solid var(--danger-color);
}

#blacklistContent table tbody tr td {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  align-items: center;
  padding: 3px 0;
  border: none;
  font-size: 13px;
}

#blacklistContent table tbody tr td::before {
  content: attr(data-label);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

#blacklistContent table thead {
  display: none;
}

@media (min-width: 769px) {
  #blacklistContent table tbody tr {
    display: table-row;
    flex-direction: unset;
    gap: unset;
    padding: unset;
    margin-bottom: 0;
    background: var(--danger-bg);
    border-left: 4px solid var(--danger-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
  }

  #blacklistContent table tbody tr td {
    display: table-cell;
    padding: 10px 12px;
    border: none;
  }

  #blacklistContent table tbody tr td::before {
    display: none;
  }

  #blacklistContent table thead {
    display: table-header-group;
  }
}

@media (max-width: 480px) {
  #blacklistContent table tbody tr {
    padding: 10px 10px;
    gap: 4px;
  }

  #blacklistContent table tbody tr td {
    font-size: 12px;
    gap: 8px;
  }

  #blacklistContent table tbody tr td::before {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  #blacklistContent table tbody tr {
    padding: 8px 8px;
  }

  #blacklistContent table tbody tr td {
    font-size: 11px;
    gap: 6px;
  }
}

/* ── Visitor Stats Panel ──────────────────────────────────────── */
#visitorTabContent [style*="repeat(3,1fr)"] {
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 1024px) {
  #visitorTabContent [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  #visitorTabContent [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Appointments Cards ──────────────────────────────────────── */
#visitorTabContent .dash-panel .dash-panel-header {
  flex-wrap: wrap;
  gap: 10px;
}

#visitorTabContent [style*="display:flex"][style*="flex-direction:column"][style*="gap:8px"] {
  gap: 10px;
}

#visitorTabContent [style*="display:flex"][style*="align-items:center"][style*="gap:12px"][style*="padding:12px"] {
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  #visitorTabContent [style*="display:flex"][style*="align-items:center"][style*="gap:12px"][style*="padding:12px"] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  #visitorTabContent [style*="display:flex"][style*="align-items:center"][style*="gap:12px"][style*="padding:12px"]>div:last-child {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ── Badge Modal Responsive ───────────────────────────────────── */
#visitorBadgesModal .modal-content {
  max-width: 800px;
}

#visitorBadgesModal [style*="grid-template-columns:80px 1fr 120px 120px auto"] {
  grid-template-columns: 60px 1fr 100px 100px auto !important;
  gap: 6px !important;
}

#visitorBadgesModal [style*="grid-template-columns:1fr 1fr 120px 120px auto"] {
  grid-template-columns: 1fr 1fr auto !important;
}

#visitorBadgesModal [style*="grid-template-columns:1fr 1fr auto"] {
  grid-template-columns: 1fr 1fr auto !important;
}

@media (max-width: 640px) {
  #visitorBadgesModal .modal-content {
    max-width: 95vw !important;
    width: 95vw !important;
  }

  #visitorBadgesModal [style*="grid-template-columns:80px 1fr 120px 120px auto"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #visitorBadgesModal [style*="grid-template-columns:1fr 1fr 120px 120px auto"] {
    grid-template-columns: 1fr !important;
  }

  #visitorBadgesModal [style*="grid-template-columns:1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  #visitorBadgesModal [style*="grid-template-columns:80px 1fr 120px 120px auto"]>.form-group:first-child {
    grid-column: span 2;
  }

  #visitorBadgesModal [style*="grid-template-columns:80px 1fr 120px 120px auto"]>button {
    grid-column: span 2;
  }
}

@media (max-width: 480px) {
  #visitorBadgesModal [style*="grid-template-columns:80px 1fr 120px 120px auto"] {
    grid-template-columns: 1fr !important;
  }

  #visitorBadgesModal [style*="grid-template-columns:80px 1fr 120px 120px auto"]>.form-group:first-child,
  #visitorBadgesModal [style*="grid-template-columns:80px 1fr 120px 120px auto"]>button {
    grid-column: span 1;
  }

  #visitorBadgesModal [style*="grid-template-columns:1fr 1fr 120px 120px auto"] {
    grid-template-columns: 1fr !important;
  }

  #visitorBadgesModal [style*="grid-template-columns:1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Add Visitor Modal ────────────────────────────────────────── */
#addVisitorModal .modal-content {
  max-width: 500px;
}

@media (max-width: 640px) {
  #addVisitorModal .modal-content {
    max-width: 95vw !important;
    width: 95vw !important;
  }

  #addVisitorModal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  #addVisitorModal [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] {
    gap: 10px !important;
  }
}

/* ── Visitor Detail Modal ─────────────────────────────────────── */
#visitorDetailModal .modal-content {
  max-width: 500px;
}

#visitorDetailModal [style*="grid-template-columns:1fr 1fr"] {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 480px) {
  #visitorDetailModal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Visitor History Filters ──────────────────────────────────── */
.dash-panel-header>div[style*="flex-wrap:wrap"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dash-panel-header input,
.dash-panel-header select {
  flex: 1;
  min-width: 130px;
}

@media (max-width: 640px) {
  .dash-panel-header {
    flex-direction: column;
    align-items: stretch;
  }

  .dash-panel-header>div {
    flex-direction: column;
    align-items: stretch;
  }

  .dash-panel-header input,
  .dash-panel-header select,
  .dash-panel-header .btn {
    width: 100%;
    min-width: unset !important;
  }
}

/* ── Visitor Section Header Buttons ───────────────────────────── */
#instVisitor .section-header>div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 640px) {
  #instVisitor .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  #instVisitor .section-header>div:last-child {
    width: 100%;
  }

  #instVisitor .section-header>div:last-child .btn {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  #instVisitor .section-header>div:last-child {
    flex-direction: column;
  }

  #instVisitor .section-header>div:last-child .btn {
    width: 100%;
  }
}

/* ── Landscape Phone ─────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  #instVisitor>div:nth-child(2) {
    grid-template-columns: repeat(3, 1fr);
  }

  #visitorTabContent [style*="repeat(auto-fill, minmax(320px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) and (orientation: landscape) {
  #instVisitor>div:nth-child(2) {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Visitor Badge Cards Grid ────────────────────────────────── */
#visitorBadgesModal [style*="repeat(auto-fill,minmax(180px,1fr))"] {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
}

#visitorBadgesModal [style*="repeat(auto-fill,minmax(140px,1fr))"] {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
}

@media (max-width: 640px) {
  #visitorBadgesModal [style*="repeat(auto-fill,minmax(180px,1fr))"] {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }

  #visitorBadgesModal [style*="repeat(auto-fill,minmax(140px,1fr))"] {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  #visitorBadgesModal [style*="repeat(auto-fill,minmax(180px,1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #visitorBadgesModal [style*="repeat(auto-fill,minmax(140px,1fr))"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DOLULUK ISI HARITASI RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── Heatmap Table Wrapper ─────────────────────────────────── */
.heatmap-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
}

.heatmap-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 13px;
}

/* ── Sticky Teacher Column ─────────────────────────────────── */
.heatmap-teacher-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card-bg);
  min-width: 120px;
  max-width: 160px;
}

.heatmap-table thead .heatmap-teacher-cell {
  z-index: 3;
  background: var(--secondary-bg);
}

.heatmap-table tbody tr:hover .heatmap-teacher-cell {
  background: var(--hover-bg);
}

/* ── Header Cells ───────────────────────────────────────────── */
.heatmap-header-cell {
  padding: 12px 8px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
  background: var(--secondary-bg) !important;
}

.heatmap-header-day {
  padding: 12px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  min-width: 50px;
  background: var(--secondary-bg) !important;
}

.heatmap-header-total {
  padding: 12px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  min-width: 50px;
  background: var(--secondary-bg) !important;
}

/* ── Day Cells ─────────────────────────────────────────────── */
.heatmap-day-cell {
  padding: 10px 4px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--border-color);
  border-top: none;
  border-left: none;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  min-width: 50px;
}

.heatmap-day-cell:hover {
  filter: brightness(1.08);
  transform: scale(1.02);
  z-index: 1;
  position: relative;
}

.heatmap-day-cell:active {
  transform: scale(0.98);
}

.heatmap-total-cell {
  padding: 10px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-top: none;
  border-left: none;
  min-width: 50px;
}

/* ── Legend / Stats Chips ──────────────────────────────────── */
.heatmap-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: #dbeafe;
  color: #1e40af;
  white-space: nowrap;
}

.heatmap-legend-chip strong {
  font-weight: 700;
}

/* ── Tablet ≤ 1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .heatmap-table {
    font-size: 12px;
  }

  .heatmap-teacher-cell {
    min-width: 100px;
    max-width: 140px;
  }

  .heatmap-header-day,
  .heatmap-day-cell,
  .heatmap-header-total,
  .heatmap-total-cell {
    padding: 8px 4px;
    min-width: 44px;
  }

  .heatmap-legend-chip {
    font-size: 11px;
    padding: 3px 8px;
  }
}

/* ── Mobile ≤ 768px: Hide Weekend Columns ──────────────────── */
@media (max-width: 768px) {

  .heatmap-header-day[data-day-index="5"],
  .heatmap-header-day[data-day-index="6"],
  .heatmap-day-cell[data-day-index="5"],
  .heatmap-day-cell[data-day-index="6"],
  .heatmap-header-total,
  .heatmap-total-cell {
    display: none !important;
  }

  .heatmap-table {
    min-width: 400px;
  }

  .heatmap-teacher-cell {
    min-width: 90px;
    max-width: 120px;
  }

  .heatmap-header-cell {
    padding: 10px 6px;
    font-size: 10px;
  }

  .heatmap-legend-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  #instHeatmapContent [style*="display: flex"][style*="gap: 16px"] {
    gap: 10px;
  }

  #instHeatmapContent [style*="display: flex"][style*="gap: 12px"] {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── Small Mobile ≤ 480px ─────────────────────────────────── */
@media (max-width: 480px) {
  .heatmap-table {
    font-size: 11px;
  }

  .heatmap-teacher-cell {
    min-width: 80px;
    max-width: 100px;
  }

  .heatmap-teacher-cell span:first-child {
    font-size: 12px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
    display: block;
  }

  .heatmap-teacher-cell span:last-child {
    font-size: 8px !important;
  }

  .heatmap-header-day,
  .heatmap-day-cell {
    padding: 8px 3px;
    min-width: 38px;
  }

  .heatmap-header-cell {
    padding: 8px 4px;
    font-size: 9px;
  }

  .heatmap-legend-chip {
    font-size: 10px;
    padding: 3px 7px;
  }

  /* Compact pagination */
  #instHeatmapContent [style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .heatmap-pagination {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Intensity legend compact */
  #instHeatmapContent [style*="margin-top: 16px"] {
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
  }

  #instHeatmapContent [style*="display: flex"][style*="gap: 3px"] {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Modal compact */
  #heatmapDetailModal .modal-content {
    max-width: 95vw !important;
    width: 95vw !important;
  }

  #heatmapDetailModal [style*="display: flex"][style*="gap: 12px"] {
    flex-direction: column;
    gap: 8px;
  }

  #heatmapDetailModal [style*="gap: 6px"][style*="margin-left: auto"] {
    margin-left: 0 !important;
    flex-wrap: wrap;
  }
}

/* ── Very Small ≤ 380px ──────────────────────────────────── */
@media (max-width: 380px) {
  .heatmap-table {
    font-size: 10px;
  }

  .heatmap-teacher-cell {
    min-width: 70px;
    max-width: 85px;
  }

  .heatmap-header-day,
  .heatmap-day-cell {
    padding: 6px 2px;
    min-width: 32px;
  }

  .heatmap-legend-chip strong {
    font-size: 11px;
  }

  .heatmap-legend-chip svg,
  .heatmap-legend-chip span {
    font-size: 9px;
  }
}

/* ── Landscape Phone ──────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {

  .heatmap-header-day[data-day-index="5"],
  .heatmap-header-day[data-day-index="6"],
  .heatmap-day-cell[data-day-index="5"],
  .heatmap-day-cell[data-day-index="6"],
  .heatmap-header-total,
  .heatmap-total-cell {
    display: none !important;
  }

  .heatmap-table {
    min-width: 360px;
  }

  .heatmap-teacher-cell {
    min-width: 80px;
  }

  .heatmap-header-day,
  .heatmap-day-cell {
    min-width: 42px;
    padding: 8px 4px;
  }

  /* Modal fits better in landscape */
  #heatmapDetailModal .modal-content {
    max-height: 85dvh;
  }
}

/* ── Tablet Landscape 769px - 1024px ───────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .heatmap-table {
    font-size: 12px;
  }

  .heatmap-header-day,
  .heatmap-day-cell {
    min-width: 46px;
    padding: 8px 5px;
  }

  .heatmap-teacher-cell {
    min-width: 100px;
  }
}

/* ── Heatmap Modal Detail ────────────────────────────────── */
#heatmapDetailModal .modal-content {
  max-width: 480px;
}

#heatmapDetailModal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

@media (max-width: 640px) {
  #heatmapDetailModal .modal-content {
    max-width: 95vw !important;
    width: 95vw !important;
  }

  #heatmapDetailModal .modal-body {
    padding: 14px;
  }
}

@media (max-width: 480px) {
  #heatmapDetailModal .modal-content {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }

  #heatmapDetailModal [style*="display: grid"][style*="gap: 12px"] {
    gap: 8px;
  }

  #heatmapDetailModal [style*="background: var(--secondary-bg)"] {
    padding: 10px;
  }

  #heatmapDetailModal [style*="display: flex"][style*="align-items: flex-start"] {
    gap: 8px;
  }
}

/* ── Heatmap row hover highlight ──────────────────────────── */
.heatmap-teacher-row:hover {
  background: var(--hover-bg);
}

.heatmap-teacher-row:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

.heatmap-teacher-row:nth-child(even) .heatmap-teacher-cell {
  background: var(--secondary-bg);
}

@media (max-width: 768px) {
  .heatmap-teacher-row:nth-child(even) .heatmap-teacher-cell {
    background: var(--secondary-bg);
  }
}

/* ═══════════════════════════════════════════════════════════
   MEZUNLAR PANEL RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── Alumni Stats Cards Grid ─────────────────────────────── */
#instAlumniContent>div[style*="repeat(auto-fit,minmax(200px,1fr))"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

@media (max-width: 1024px) {
  #instAlumniContent>div[style*="repeat(auto-fit,minmax(200px,1fr))"] {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  #instAlumniContent>div[style*="repeat(auto-fit,minmax(200px,1fr))"] {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  #instAlumniContent>div[style*="repeat(auto-fit,minmax(200px,1fr))"] {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (max-width: 380px) {
  #instAlumniContent>div[style*="repeat(auto-fit,minmax(200px,1fr))"] {
    grid-template-columns: 1fr;
  }
}

/* ── Alumni Table → Card View ──────────────────────────── */
#instAlumniContent .table-container table tbody tr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--card-bg);
  transition: background 0.15s;
}

#instAlumniContent .table-container table tbody tr:hover {
  background: var(--hover-bg);
}

#instAlumniContent .table-container table tbody tr td {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  align-items: center;
  padding: 3px 0;
  border: none;
  font-size: 13px;
}

#instAlumniContent .table-container table tbody tr td::before {
  content: attr(data-label);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

#instAlumniContent .table-container table tbody tr td:last-child {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

#instAlumniContent .table-container table thead {
  display: none;
}

#instAlumniContent .table-container table {
  border-collapse: separate;
  border-spacing: 0 4px;
}

@media (max-width: 480px) {
  #instAlumniContent .table-container table tbody tr {
    padding: 10px 10px;
    gap: 4px;
  }

  #instAlumniContent .table-container table tbody tr td {
    font-size: 12px;
    gap: 8px;
  }

  #instAlumniContent .table-container table tbody tr td::before {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  #instAlumniContent .table-container table tbody tr {
    padding: 8px 8px;
  }

  #instAlumniContent .table-container table tbody tr td {
    font-size: 11px;
    gap: 6px;
  }
}

/* Show table on larger screens */
@media (min-width: 769px) {
  #instAlumniContent .table-container table {
    display: table;
  }

  #instAlumniContent .table-container table tbody tr {
    display: table-row;
    flex-direction: unset;
    gap: unset;
    padding: unset;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    margin-bottom: 0;
    background: transparent;
  }

  #instAlumniContent .table-container table tbody tr:hover {
    background: var(--hover-bg);
  }

  #instAlumniContent .table-container table tbody tr td {
    display: table-cell;
    padding: 10px 16px;
    border: none;
  }

  #instAlumniContent .table-container table tbody tr td::before {
    display: none;
  }

  #instAlumniContent .table-container table tbody tr td:last-child {
    flex-direction: row;
    align-items: center;
  }

  #instAlumniContent .table-container table thead {
    display: table-header-group;
  }

  #instAlumniContent .table-container table {
    border-collapse: collapse;
    border-spacing: unset;
  }

  #instAlumniContent .table-container {
    overflow-x: auto;
  }
}

/* ── Alumni Tab Buttons ──────────────────────────────────── */
.alumni-tabs-wrapper {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .alumni-tabs-wrapper {
    gap: 6px;
  }

  .alumni-tabs-wrapper .btn {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* ── Alumni YKS Rank Cards ──────────────────────────────── */
#alumniStatsYks [style*="repeat(auto-fit,minmax(160px,1fr))"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  #alumniStatsYks [style*="repeat(auto-fit,minmax(160px,1fr))"] {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 480px) {
  #alumniStatsYks [style*="repeat(auto-fit,minmax(160px,1fr))"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Alumni University Cards ──────────────────────────────── */
#alumniStatsUni [style*="repeat(auto-fit,minmax(200px,1fr))"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  #alumniStatsUni [style*="repeat(auto-fit,minmax(200px,1fr))"] {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 480px) {
  #alumniStatsUni [style*="repeat(auto-fit,minmax(200px,1fr))"] {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

@media (max-width: 380px) {
  #alumniStatsUni [style*="repeat(auto-fit,minmax(200px,1fr))"] {
    grid-template-columns: 1fr;
  }
}

/* ── Alumni University Filter Row ───────────────────────── */
.alumni-uni-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 640px) {
  .alumni-uni-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .alumni-uni-filter-row input,
  .alumni-uni-filter-row select {
    width: 100%;
    max-width: unset !important;
  }

  .alumni-uni-filter-row>div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ── Alumni Section Cards ──────────────────────────────── */
#alumniStatsSection [style*="repeat(auto-fit,minmax(160px,1fr))"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  #alumniStatsSection [style*="repeat(auto-fit,minmax(160px,1fr))"] {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  #alumniStatsSection [style*="repeat(auto-fit,minmax(160px,1fr))"] {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

@media (max-width: 380px) {
  #alumniStatsSection [style*="repeat(auto-fit,minmax(160px,1fr))"] {
    grid-template-columns: 1fr;
  }
}

/* ── Alumni Student Cards ──────────────────────────────── */
#alumniFilteredStudents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  #alumniFilteredStudents {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 480px) {
  #alumniFilteredStudents {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── Alumni Search Input ─────────────────────────────── */
#instAlumniContent input[type="text"][placeholder="Öğrenci ara..."] {
  width: 100%;
  max-width: 300px;
}

@media (max-width: 480px) {
  #instAlumniContent input[type="text"][placeholder="Öğrenci ara..."] {
    max-width: 100%;
    width: 100%;
  }
}

/* ── Alumni Rank Search ─────────────────────────────── */
#alumniRankSearch {
  width: 100%;
  max-width: 220px;
  margin-bottom: 12px;
}

@media (max-width: 480px) {
  #alumniRankSearch {
    max-width: 100%;
  }
}

/* ── Alumni Section Header ───────────────────────────── */
#instAlumni .section-header {
  flex-wrap: wrap;
  gap: 12px;
}

#instAlumni .section-header>div:last-child {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  #instAlumni .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  #instAlumni .section-header>div:last-child {
    width: 100%;
  }

  #instAlumni .section-header>div:last-child .btn {
    flex: 1;
    min-width: 0;
  }
}

/* ── Alumni Export Buttons ───────────────────────────── */
#instAlumni [style*="flex:1"]+div,
.alumni-export-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .alumni-export-btns {
    width: 100%;
  }

  .alumni-export-btns .btn-sm {
    flex: 1;
    min-width: 0;
  }
}

/* ── Alumni Pagination ──────────────────────────────── */
#alumniPagination {
  padding: 12px 0;
}

#alumniPagination .pagination-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  font-size: 13px;
}

/* ── Alumni Modal Responsive ──────────────────────── */
#archiveStudentModal .modal-content,
#editAlumniModal .modal-content {
  max-width: 600px;
}

@media (max-width: 640px) {

  #archiveStudentModal .modal-content,
  #editAlumniModal .modal-content {
    max-width: 95vw !important;
    width: 95vw !important;
  }

  #archiveStudentModal [style*="padding:20px"],
  #editAlumniModal [style*="padding:20px"] {
    padding: 14px;
  }

  #archiveStudentModal [style*="grid-template-columns:1fr 1fr"],
  #editAlumniModal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── Landscape Phone ──────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  #instAlumniContent>div[style*="repeat(auto-fit,minmax(200px,1fr))"] {
    grid-template-columns: repeat(3, 1fr);
  }

  #alumniStatsYks [style*="repeat(auto-fit,minmax(160px,1fr))"] {
    grid-template-columns: repeat(4, 1fr);
  }

  #alumniFilteredStudents {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Tablet Landscape ─────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  #instAlumniContent .table-container {
    overflow-x: auto;
  }
}

/* ═══════════════════════════════════════════════════════════
   ÖĞRENCİ GELİŞİM KARNESİ (PORTFOLIO) RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── Portfolio Stats Grid (3 cards) ─────────────────────── */
.portfolio-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .portfolio-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .portfolio-stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ── Portfolio Two Column Layout ─────────────────────── */
.portfolio-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 1024px) {
  .portfolio-two-col {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ── Portfolio Highlights Grid ─────────────────────────── */
.portfolio-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

@media (max-width: 768px) {
  .portfolio-highlights-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .portfolio-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

@media (max-width: 380px) {
  .portfolio-highlights-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Portfolio Stats Mini Grid (3x3) ─────────────────── */
.portfolio-stats-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  font-size: 12px;
}

@media (max-width: 640px) {
  .portfolio-stats-mini-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
}

@media (max-width: 420px) {
  .portfolio-stats-mini-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Portfolio Badge Row ─────────────────────────────── */
.portfolio-badge-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

@media (max-width: 480px) {
  .portfolio-badge-row {
    gap: 6px;
  }

  .portfolio-badge-row .badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
}

/* ── Portfolio Timeline ─────────────────────────────── */
.portfolio-timeline {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

@media (max-width: 480px) {
  .portfolio-timeline {
    max-height: 300px;
  }
}

/* ── Portfolio Tables ──────────────────────────────── */
.portfolio-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.portfolio-table-wrap table {
  font-size: 12px;
}

.portfolio-table-wrap th {
  padding: 8px;
  font-size: 11px;
}

.portfolio-table-wrap td {
  padding: 6px 8px;
}

@media (max-width: 480px) {
  .portfolio-table-wrap table {
    font-size: 11px;
  }

  .portfolio-table-wrap th {
    padding: 6px;
    font-size: 10px;
  }

  .portfolio-table-wrap td {
    padding: 5px 6px;
  }
}

/* ── Portfolio Modal Responsive ─────────────────────── */
#portfolioModal .modal-content,
#portfolioDetailModal .modal-content,
.portfolio-modal-content {
  max-width: 880px;
  width: 95vw;
}

@media (max-width: 768px) {
  .portfolio-modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 0 !important;
  }

  .portfolio-modal-content>div {
    padding: 14px !important;
  }
}

@media (max-width: 480px) {
  .portfolio-modal-content>div {
    padding: 12px !important;
  }

  .portfolio-modal-content h3 {
    font-size: 15px !important;
  }

  .portfolio-modal-content h4 {
    font-size: 13px !important;
  }
}

/* ── Portfolio Exam Trend Chart ─────────────────────── */
.portfolio-chart-wrap {
  height: 100px;
}

@media (max-width: 480px) {
  .portfolio-chart-wrap {
    height: 80px;
  }
}

/* ── Portfolio Header Controls ──────────────────────── */
#instPortfolio .section-header>div:last-child {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 640px) {
  #instPortfolio .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  #instPortfolio .section-header>div:last-child {
    width: 100%;
  }

  #instPortfolio .section-header>div:last-child input,
  #instPortfolio .section-header>div:last-child select {
    flex: 1;
    min-width: 0;
  }

  #instPortfolio .section-header>div:last-child .btn {
    width: 100%;
  }
}

/* ── Portfolio Student Search Row ───────────────────── */
.portfolio-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.portfolio-search-row input {
  flex: 1;
  min-width: 150px;
  max-width: 300px;
}

.portfolio-search-row select {
  min-width: 150px;
}

@media (max-width: 640px) {
  .portfolio-search-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .portfolio-search-row input,
  .portfolio-search-row select {
    width: 100%;
    max-width: unset !important;
    min-width: unset;
  }
}

/* ── Portfolio Cards ─────────────────────────────────── */
.portfolio-card {
  padding: 14px;
  margin-bottom: 10px;
  background: var(--card-bg);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}

.portfolio-card:hover {
  border-color: var(--accent);
}

@media (max-width: 480px) {
  .portfolio-card {
    padding: 12px;
    margin-bottom: 8px;
  }

  .portfolio-card>div:first-child span:first-child {
    font-size: 13px !important;
  }
}

/* ── Portfolio Growth Comment Box ───────────────────── */
.portfolio-growth-comment {
  padding: 12px;
  background: var(--accent-subtle, rgba(59, 130, 246, 0.06));
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 480px) {
  .portfolio-growth-comment {
    font-size: 12px;
    padding: 10px;
    line-height: 1.5;
  }
}

/* ── Portfolio Header (Modal) ────────────────────────── */
.portfolio-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 16px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  background: var(--modal-bg, var(--bg-primary));
  z-index: 10;
}

@media (max-width: 480px) {
  .portfolio-modal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
  }

  .portfolio-modal-header .btn {
    width: 100%;
  }
}

/* ── Portfolio Progress Bar ──────────────────────────── */
.portfolio-progress-bar {
  height: 10px;
  background: var(--border-color);
  border-radius: 5px;
  overflow: hidden;
}

.portfolio-progress-bar>div {
  height: 100%;
  background: var(--accent);
  border-radius: 5px;
  transition: width 0.3s;
}

/* ── Portfolio Item Cards ────────────────────────────── */
.portfolio-item-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 8px;
}

@media (max-width: 480px) {
  .portfolio-item-card {
    padding: 10px;
    gap: 8px;
    flex-direction: column;
  }

  .portfolio-item-card>div:first-child {
    flex-direction: row;
    gap: 8px;
  }
}

/* ── Landscape Phone ─────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .portfolio-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .portfolio-two-col {
    grid-template-columns: 1fr 1fr;
  }

  .portfolio-timeline {
    max-height: 250px;
  }
}

/* ── Tablet Landscape ────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .portfolio-two-col {
    grid-template-columns: 1fr 1fr;
  }

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

/* ═══════════════════════════════════════════════════════════
   REVÄ°R (Ä°NFÄ°RMARY) PANEL RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── Infirmary Stats Grid (4 cards) ─────────────────────── */
.infirmary-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .infirmary-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .infirmary-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .infirmary-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

@media (max-width: 360px) {
  .infirmary-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Infirmary Overview 2 Columns ─────────────────────── */
.infirmary-overview-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .infirmary-overview-cols {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── Infirmary Stat Mini Cards ─────────────────────────── */
#instInfirmary .dash-stat-mini {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

#instInfirmary .dash-stat-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#instInfirmary .dash-stat-mini-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: linear-gradient(135deg, var(--accent), #10b981);
}

#instInfirmary .dash-stat-mini-icon svg {
  color: white;
}

#instInfirmary .dash-stat-mini-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

#instInfirmary .dash-stat-mini-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

@media (max-width: 640px) {
  #instInfirmary .dash-stat-mini {
    padding: 12px;
  }

  #instInfirmary .dash-stat-mini-icon {
    width: 32px;
    height: 32px;
  }

  #instInfirmary .dash-stat-mini-icon svg {
    width: 16px;
    height: 16px;
  }

  #instInfirmary .dash-stat-mini-value {
    font-size: 20px;
  }

  #instInfirmary .dash-stat-mini-label {
    font-size: 11px;
  }
}

/* ── Infirmary Medication Items ─────────────────────────── */
.infirmary-med-item {
  margin-bottom: 12px;
  padding: 12px;
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
}

@media (max-width: 480px) {
  .infirmary-med-item {
    padding: 10px;
    margin-bottom: 10px;
  }

  .infirmary-med-item>div>div {
    font-size: 12px !important;
  }
}

/* ── Infirmary Visit Items ─────────────────────────────── */
.infirmary-visit-item {
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
}

.infirmary-visit-item:last-child {
  border-bottom: none;
}

/* ── Infirmary Table Responsive ───────────────────────── */
#instInfirmary .table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#instInfirmary table {
  font-size: 13px;
}

#instInfirmary th {
  padding: 12px 14px;
  font-size: 11px;
}

#instInfirmary td {
  padding: 10px 14px;
}

@media (max-width: 640px) {
  #instInfirmary table {
    font-size: 12px;
  }

  #instInfirmary th {
    padding: 10px 12px;
    font-size: 10px;
  }

  #instInfirmary td {
    padding: 8px 12px;
  }
}

@media (max-width: 480px) {
  #instInfirmary table {
    font-size: 11px;
  }

  #instInfirmary th {
    padding: 8px 10px;
    font-size: 10px;
  }

  #instInfirmary td {
    padding: 6px 10px;
  }
}

/* ── Infirmary Alert Boxes ─────────────────────────────── */
#instInfirmary .inst-alert {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

#instInfirmary .inst-alert-warning {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--danger-color);
}

#instInfirmary .inst-alert-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: var(--accent);
}

@media (max-width: 480px) {
  #instInfirmary .inst-alert {
    font-size: 11px;
    padding: 8px 12px;
  }
}

/* ── Infirmary Section Header ──────────────────────────── */
#instInfirmary .section-header {
  flex-wrap: wrap;
  gap: 12px;
}

#instInfirmary .section-header>div:last-child {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  #instInfirmary .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  #instInfirmary .section-header>div:last-child {
    width: 100%;
  }

  #instInfirmary .section-header>div:last-child .btn {
    flex: 1;
    min-width: 0;
  }
}

/* ── Infirmary Tab Buttons ─────────────────────────────── */
#instInfirmary .section-tabs {
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  #instInfirmary .section-tabs .tab-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  #instInfirmary .section-tabs .tab-btn {
    padding: 7px 10px;
    font-size: 11px;
  }
}

/* ── Infirmary Date Filter ─────────────────────────────── */
.infirmary-date-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.infirmary-date-filter input {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
}

@media (max-width: 480px) {
  .infirmary-date-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .infirmary-date-filter input {
    width: 100%;
  }
}

/* ── Academic Year Selector ─────────────────────────────── */
.academic-year-wrapper {
  margin-left: 16px;
  display: flex;
  align-items: center;
}

.academic-year-select {
  padding: 6px 28px 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: all 0.2s ease;
  min-width: 100px;
}

.academic-year-select:hover {
  border-color: var(--primary-color);
}

.academic-year-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.academic-year-select option {
  padding: 8px;
  background-color: var(--card-bg);
  color: var(--text-primary);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .academic-year-select {
    background-color: var(--bg-dark-secondary);
    border-color: var(--border-dark);
    color: var(--text-dark);
  }

  .academic-year-select option {
    background-color: var(--bg-dark-secondary);
    color: var(--text-dark);
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .academic-year-wrapper {
    margin-left: 8px;
    margin-top: 8px;
    width: 100%;
  }

  .academic-year-select {
    width: 100%;
  }
}

/* ── Academic Year Toolbar (v2 - dropdown + add button + active badge) ── */
.academic-year-wrapper {
  margin-left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex-wrap: wrap;
}

.academic-year-wrapper.is-active-year .academic-year-select {
  border-color: var(--success-color, #10b981);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.18);
}

.academic-year-add {
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--card-bg);
  border: 1px dashed var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s ease;
}

.academic-year-add:hover {
  color: var(--primary-color, #2c3e8c);
  border-color: var(--primary-color, #2c3e8c);
  background: rgba(99, 102, 241, 0.06);
}

.academic-year-add:focus-visible {
  outline: none;
  border-color: var(--primary-color, #2c3e8c);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.academic-year-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--success-color, #10b981);
  background: rgba(16, 185, 129, 0.12);
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.academic-year-active-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success-color, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.academic-year-readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.academic-year-readonly-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-secondary, #6b7280);
  opacity: 0.6;
}

.academic-year-warning {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-md);
  color: var(--warning-color, #f59e0b);
  flex-basis: 100%;
}

.academic-year-warning[data-show="true"] {
  display: inline-flex;
}

.academic-year-warning-action {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}

.academic-year-warning-action:hover {
  background: rgba(245, 158, 11, 0.18);
}

/* Read-only variant of the select */
.academic-year-select-readonly {
  cursor: default;
  opacity: 0.85;
  background-color: var(--bg-secondary, rgba(0, 0, 0, 0.03));
}

.academic-year-select-readonly option {
  background-color: var(--card-bg);
}

/* Modal form */
.academic-year-form .form-input,
.academic-year-form input[type="date"] {
  font-variant-numeric: tabular-nums;
}

.academic-year-form .form-group label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: inline-block;
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .academic-year-wrapper {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .academic-year-select {
    width: 100%;
    flex: 1;
    min-width: 0;
  }

  .academic-year-add {
    flex-shrink: 0;
  }

  .academic-year-readonly-badge {
    flex: 1;
    text-align: center;
  }
}

/* ── Infirmary Panel ───────────────────────────────────── */
.dash-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
}

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

.dash-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .dash-panel {
    padding: 12px;
  }

  .dash-panel-title {
    font-size: 13px;
  }
}

/* ── Infirmary Give Medication Button ──────────────────── */
.give-med-btn {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .give-med-btn {
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* ── Infirmary Inventory Actions ────────────────────────── */
.inventory-action {
  padding: 4px 6px;
  font-size: 12px;
}

/* ── Landscape Phone ─────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .infirmary-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .infirmary-overview-cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Tablet Landscape ───────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .infirmary-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════
   REVİR TAM RESPONSIVE — TÜM SEKMELER
   ═══════════════════════════════════════════════════════════ */

/* ── Infirmary Visit Items Responsive ─────────────────── */
.infirmary-visit-item {
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
}

.infirmary-visit-item:last-child {
  border-bottom: none;
}

@media (max-width: 480px) {
  .infirmary-visit-item {
    padding: 8px 10px;
  }

  .infirmary-visit-item>div:first-child {
    font-size: 13px !important;
  }

  .infirmary-visit-item>div:nth-child(2) {
    font-size: 11px !important;
  }

  .infirmary-visit-item>div:last-child {
    font-size: 10px !important;
  }
}

@media (max-width: 360px) {
  .infirmary-visit-item {
    padding: 6px 8px;
  }
}

/* ── Infirmary Alert Boxes Responsive ────────────────── */
#instInfirmary .inst-alert {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

#instInfirmary .inst-alert-warning {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--danger-color);
}

#instInfirmary .inst-alert-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: var(--accent);
}

@media (max-width: 480px) {
  #instInfirmary .inst-alert {
    font-size: 11px;
    padding: 8px 12px;
    margin-bottom: 12px;
    gap: 6px;
  }
}

/* ── Infirmary Table Column Hiding (<400px) ──────────── */
@media (max-width: 400px) {

  /* İlaç Envanteri: Birim ve Son Kullanma kolonlarını gizle */
  #instInfirmary #inventoryListContent table th:nth-child(3),
  #instInfirmary #inventoryListContent table td:nth-child(3),
  #instInfirmary #inventoryListContent table th:nth-child(4),
  #instInfirmary #inventoryListContent table td:nth-child(4) {
    display: none;
  }

  /* İlaç Geçmişi: Doz kolonunu gizle */
  #instInfirmary #medicationLogsContent table th:nth-child(3),
  #instInfirmary #medicationLogsContent table td:nth-child(3) {
    display: none;
  }

  /* Revir Ziyaretleri: Yapılan İşlem ve Sonuç kolonlarını gizle */
  #instInfirmary #infirmaryVisitsContent table th:nth-child(3),
  #instInfirmary #infirmaryVisitsContent table td:nth-child(3),
  #instInfirmary #infirmaryVisitsContent table th:nth-child(4),
  #instInfirmary #infirmaryVisitsContent table td:nth-child(4) {
    display: none;
  }
}

@media (max-width: 360px) {

  /* Daha küçük ekranlarda: Şikayet kolonunu gizle */
  #instInfirmary #infirmaryVisitsContent table th:nth-child(2),
  #instInfirmary #infirmaryVisitsContent table td:nth-child(2) {
    display: none;
  }
}

/* ── Infirmary Inventory Action Buttons ─────────────── */
#instInfirmary .inventory-action {
  padding: 4px 6px;
  font-size: 12px;
}

@media (max-width: 480px) {
  #instInfirmary .inventory-action {
    padding: 3px 5px;
    font-size: 11px;
  }
}

/* ── Infirmary Pagination Responsive ─────────────────── */
#instInfirmary .pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 0 8px;
}

#instInfirmary .pagination-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#instInfirmary .pagination-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

#instInfirmary .pagination-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 700;
}

#instInfirmary .pagination-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  #instInfirmary .pagination-wrap {
    gap: 4px;
    padding: 12px 0 6px;
  }

  #instInfirmary .pagination-btn {
    min-width: 34px;
    height: 34px;
    font-size: 12px;
    padding: 0 8px;
  }
}

@media (max-width: 480px) {
  #instInfirmary .pagination-wrap {
    gap: 4px;
  }

  #instInfirmary .pagination-btn {
    min-width: 32px;
    height: 32px;
    font-size: 11px;
    padding: 0 6px;
  }
}

/* ── Infirmary Date Filter Wrapper ────────────────────── */
.infirmary-visit-date-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.infirmary-visit-date-wrap input {
  max-width: 200px;
}

@media (max-width: 480px) {
  .infirmary-visit-date-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
  }

  .infirmary-visit-date-wrap input {
    max-width: 100% !important;
    width: 100%;
  }
}

/* ── Infirmary Modals Responsive ────────────────────── */
#addInventoryModal .modal-content,
#addStudentMedModal .modal-content,
#addVisitModal .modal-content,
#giveMedicationModal .modal-content,
#editInventoryModal .modal-content {
  max-width: 500px;
  width: 95vw;
}

@media (max-width: 520px) {

  #addInventoryModal .modal-content,
  #addStudentMedModal .modal-content,
  #addVisitModal .modal-content,
  #giveMedicationModal .modal-content,
  #editInventoryModal .modal-content {
    max-width: calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    margin: 16px;
  }
}

@media (max-width: 400px) {

  #addStudentMedModal .modal-content,
  #addVisitModal .modal-content {
    max-width: calc(100% - 24px) !important;
    width: calc(100% - 24px) !important;
    margin: 12px;
  }

  #addInventoryModal .modal-content,
  #giveMedicationModal .modal-content,
  #editInventoryModal .modal-content {
    max-width: calc(100% - 20px) !important;
    width: calc(100% - 20px) !important;
    margin: 10px;
  }
}

/* ── Infirmary Modal Forms ─────────────────────────── */
#addInventoryModal [style*="display:grid"],
#addStudentMedModal [style*="display:grid"],
#addVisitModal [style*="display:grid"],
#giveMedicationModal [style*="display:grid"] {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {

  #addInventoryModal [style*="display:grid"],
  #addStudentMedModal [style*="display:grid"],
  #addVisitModal [style*="display:grid"],
  #giveMedicationModal [style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ── Infirmary Student Meds (placeholder) ────────────── */
#instInfirmary #studentMedsContent {
  padding: 16px;
  color: var(--text-tertiary);
  text-align: center;
}

@media (max-width: 480px) {
  #instInfirmary #studentMedsContent {
    padding: 12px;
    font-size: 12px;
  }
}

/* ── Infirmary Medical Records (placeholder) ────────── */
#instInfirmary #medicalRecordsContent {
  padding: 16px;
  color: var(--text-tertiary);
  text-align: center;
}

@media (max-width: 480px) {
  #instInfirmary #medicalRecordsContent {
    padding: 12px;
    font-size: 12px;
  }
}

/* ── Infirmary Empty State ────────────────────────────── */
#instInfirmary .empty-state {
  text-align: center;
  padding: 48px 20px;
}

#instInfirmary .empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

#instInfirmary .empty-state h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-primary);
}

#instInfirmary .empty-state p {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
}

@media (max-width: 480px) {
  #instInfirmary .empty-state {
    padding: 32px 16px;
  }

  #instInfirmary .empty-state-icon {
    font-size: 40px;
  }

  #instInfirmary .empty-state h3 {
    font-size: 14px;
  }

  #instInfirmary .empty-state p {
    font-size: 12px;
  }
}

/* ── Infirmary Overview Panels (dash-panel) ────────── */
#instInfirmary .dash-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
}

#instInfirmary .dash-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

#instInfirmary .dash-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  #instInfirmary .dash-panel {
    padding: 12px;
  }

  #instInfirmary .dash-panel-title {
    font-size: 13px;
  }

  #instInfirmary .dash-panel-header {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width: 480px) {
  #instInfirmary .dash-panel {
    padding: 10px;
  }

  #instInfirmary .dash-panel-title {
    font-size: 12px;
    gap: 6px;
  }
}

/* ── Infirmary Overview Medication Lines ────────────── */
#instInfirmary .infirmary-med-item>div>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-color);
}

#instInfirmary .infirmary-med-item>div>div:last-child {
  border-bottom: none;
}

@media (max-width: 480px) {
  #instInfirmary .infirmary-med-item>div>div {
    padding: 3px 0;
  }

  #instInfirmary .infirmary-med-item>div>div>div:first-child {
    font-size: 12px;
  }

  #instInfirmary .infirmary-med-item>div>div>div:last-child {
    font-size: 10px;
  }
}

/* ── Infirmary Give Med Button ──────────────────────── */
#instInfirmary .give-med-btn {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  #instInfirmary .give-med-btn {
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* ── Infirmary Section Header Buttons ──────────────── */
#instInfirmary .section-header>div:last-child {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  #instInfirmary .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  #instInfirmary .section-header>div:last-child {
    width: 100%;
  }

  #instInfirmary .section-header>div:last-child .btn {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  #instInfirmary .section-header>div:last-child {
    flex-direction: column;
  }

  #instInfirmary .section-header>div:last-child .btn {
    width: 100%;
  }
}

/* ── Infirmary Tab Scroll ────────────────────────────── */
#instInfirmary .section-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  #instInfirmary .section-tabs .tab-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  #instInfirmary .section-tabs .tab-btn {
    padding: 7px 10px;
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  #instInfirmary .section-tabs .tab-btn {
    padding: 6px 8px;
    font-size: 10px;
  }
}

/* ── Panel Lock Styles ── */
.sidebar-btn.disabled,
.sidebar-btn.sidebar-locked,
.sidebar-subbtn.disabled,
.sidebar-subbtn.sidebar-locked {
  opacity: 0.45;
  cursor: not-allowed !important;
  position: relative;
  color: var(--text-muted, var(--text-secondary)) !important;
  filter: saturate(0.2);
  background: transparent !important;
}

.sidebar-btn.disabled:hover,
.sidebar-btn.sidebar-locked:hover,
.sidebar-subbtn.disabled:hover,
.sidebar-subbtn.sidebar-locked:hover {
  background: transparent !important;
  color: var(--text-muted, var(--text-secondary)) !important;
  cursor: not-allowed !important;
  opacity: 0.45 !important;
}

.sidebar-btn.disabled::after,
.sidebar-btn.sidebar-locked::after,
.sidebar-subbtn.disabled::after,
.sidebar-subbtn.sidebar-locked::after {
  /* Eski pseudo-element red overlay kapatıldı — yeni stiller _layout.css'te */
  content: none !important;
  display: none !important;
}

.sidebar-btn.disabled::before,
.sidebar-btn.sidebar-locked::before,
.sidebar-subbtn.disabled::before,
.sidebar-subbtn.sidebar-locked::before {
  /* Eski pseudo-element SVG kilit kapatıldı — kilit artık _layout.css + inline SVG (renderLockedDecorations) ile geliyor */
  content: none !important;
  display: none !important;
}

.sidebar-section.panel-locked>.sidebar-btn {
  /* Bu class tek başına uygulandığında (_layout.css fallback'i ile beraber) görsel _layout.css'ten gelsin */
  color: var(--text-muted, var(--text-secondary)) !important;
  filter: saturate(0.2);
  position: relative;
  background: transparent !important;
}

.sidebar-section.panel-locked>.sidebar-btn:hover {
  background: transparent !important;
  color: var(--text-muted, var(--text-secondary)) !important;
  cursor: not-allowed !important;
  opacity: 0.45 !important;
}

.sidebar-section.panel-locked>.sidebar-btn::before {
  /* Eski pseudo-element SVG kilit kapatıldı — _layout.css + inline SVG (renderLockedDecorations) ile geliyor */
  content: none !important;
  display: none !important;
}

.sidebar-section.panel-locked>.sidebar-btn::after {
  /* Eski pseudo-element red overlay kapatıldı — _layout.css fallback'i handle ediyor */
  content: none !important;
  display: none !important;
}

/* ── Pricing Admin Page ── */
.pricing-admin-header {
  margin-bottom: 24px;
}

.pricing-admin-title-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pricing-admin-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.pricing-admin-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.pricing-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.pricing-admin-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.pricing-admin-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pricing-admin-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.featured-ribbon {
  position: absolute;
  top: 12px;
  right: -32px;
  background: var(--accent);
  color: white;
  padding: 4px 40px;
  font-size: 11px;
  font-weight: 600;
  transform: rotate(45deg);
  z-index: 10;
}

.pricing-card-visual {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-visual-icon {
  font-size: 48px;
  opacity: 0.8;
}

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

.pricing-card-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.price-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
}

.price-currency {
  font-size: 14px;
  color: var(--text-secondary);
}

.pricing-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.meta-divider {
  color: var(--border-color);
}

.pricing-card-limits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.limit-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--secondary-bg);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.limit-tag.ai {
  background: #f3e8ff;
  color: #7c3aed;
}

.limit-tag.wl {
  background: #fef3c7;
  color: #d97706;
}

.limit-tag.bs {
  background: #dcfce7;
  color: #15803d;
}

.pricing-card-panels-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--secondary-bg);
  border-radius: var(--radius);
}

.panel-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.panel-count {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.panel-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.pricing-card-status {
  margin-bottom: 16px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.active {
  background: #dcfce7;
  color: #15803d;
}

.status-badge.inactive {
  background: var(--secondary-bg);
  color: var(--text-secondary);
}

.pricing-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing-card-actions .btn-block {
  width: 100%;
  justify-content: center;
}

.btn-icon {
  margin-right: 4px;
}

.order-controls {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--secondary-bg);
  color: var(--text-primary);
}

/* ── Plan Editor Modal ── */
.plan-editor-modal-content {
  max-width: 720px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.plan-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.plan-editor-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.plan-editor-icon {
  font-size: 28px;
}

.plan-editor-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.plan-editor-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.plan-editor-close {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
}

.plan-editor-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px;
  background: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.tab-btn:hover {
  background: var(--card-bg);
  color: var(--text-primary);
}

.tab-btn.active {
  background: var(--card-bg);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.tab-badge {
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.tab-badge.open {
  background: #dcfce7;
  color: #15803d;
}

.tab-badge.locked {
  background: #fee2e2;
  color: #dc2626;
}

.plan-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.tab-content {
  display: none;
}

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

.panel-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.panel-count-summary {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
}

.panel-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.panel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.panel-chip:hover {
  border-color: var(--accent);
}

.panel-chip.open {
  background: #dcfce7;
  border-color: #15803d;
}

.panel-chip.locked {
  background: #fee2e2;
  border-color: #dc2626;
  opacity: 0.7;
}

.chip-icon {
  font-size: 14px;
}

.chip-name {
  font-size: 13px;
  font-weight: 500;
}

.chip-status {
  font-size: 12px;
  margin-left: 4px;
}

.limits-section {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  margin-top: 8px;
}

.limits-section-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.limits-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.limit-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.limit-input-group label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

.limit-input-group input {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 13px;
  width: 100px;
}

.limit-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--secondary-bg);
  border-radius: var(--radius);
  cursor: pointer;
}

.limit-toggle input {
  accent-color: var(--accent);
}

.toggle-label {
  font-size: 13px;
  font-weight: 500;
}

.plan-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--secondary-bg);
}

.changes-summary {
  font-size: 12px;
  color: var(--text-secondary);
}

.footer-actions {
  display: flex;
  gap: 8px;
}

/* Pricing admin refresh */
.pricing-feedback {
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 13px;
}

.pricing-feedback.success {
  border-color: color-mix(in srgb, var(--success-color) 42%, var(--border-color));
  background: color-mix(in srgb, var(--success-bg) 76%, var(--card-bg));
  color: var(--success-color);
}

.pricing-feedback.error {
  border-color: color-mix(in srgb, var(--danger-color) 42%, var(--border-color));
  background: color-mix(in srgb, var(--danger-bg) 76%, var(--card-bg));
  color: var(--danger-color);
}

.sidebar-btn.disabled::after,
.sidebar-btn.sidebar-locked::after,
.sidebar-subbtn.disabled::after,
.sidebar-subbtn.sidebar-locked::after {
  /* Eski pseudo-element red overlay kapatıldı — _layout.css handle ediyor */
  content: none !important;
  display: none !important;
}

.sidebar-section.panel-locked>.sidebar-btn:hover,
.sidebar-btn.sidebar-locked:hover,
.sidebar-subbtn.sidebar-locked:hover,
.sidebar-btn.disabled:hover {
  background: transparent;
  color: var(--text-muted, var(--text-secondary));
  cursor: not-allowed;
}

.pricing-admin-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 9%, var(--card-bg)) 0%,
      var(--card-bg) 70%);
  box-shadow: var(--shadow-sm);
}

.pricing-admin-title-row {
  justify-content: center;
  min-width: 220px;
}

.pricing-admin-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  line-height: 1.2;
}

.pricing-admin-title svg {
  color: var(--accent);
  flex: 0 0 auto;
}

.pricing-admin-subtitle {
  max-width: 560px;
  line-height: 1.55;
}

.pricing-admin-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 8px;
  min-width: min(100%, 330px);
}

.pricing-admin-stat {
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--background) 48%, var(--card-bg));
}

.pricing-stat-value {
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.pricing-stat-label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.pricing-admin-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 0;
}

.pricing-admin-card {
  --card-accent: var(--accent);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 8px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--card-accent, var(--accent)) 8%, var(--card-bg)) 0%,
      var(--card-bg) 58%);
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 22%, var(--border-color));
  box-shadow: var(--shadow-xs);
  color: var(--text-primary);
}

.pricing-admin-card[data-plan-key="starter"] {
  --card-accent: color-mix(in srgb, var(--text-secondary) 78%, var(--accent));
}

.pricing-admin-card[data-plan-key="professional"] {
  --card-accent: var(--accent);
}

.pricing-admin-card[data-plan-key="enterprise"] {
  --card-accent: var(--warning-color);
}

.pricing-admin-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--card-accent, var(--accent));
}

.pricing-admin-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 52%, var(--border-color));
  box-shadow: var(--shadow-md);
}

.pricing-admin-card.featured {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border-color));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent), var(--shadow-sm);
}

.featured-ribbon {
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  transform: none;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-xs);
}

.featured-ribbon svg {
  width: 13px;
  height: 13px;
}

.pricing-card-visual {
  justify-content: flex-start;
  min-height: 82px;
  padding: 18px 20px 10px;
  background: transparent !important;
}

.plan-visual-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 14%, var(--card-bg));
  color: var(--card-accent, var(--accent));
  opacity: 1;
}

.plan-visual-icon svg {
  width: 22px;
  height: 22px;
}

.pricing-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 8px 20px 20px;
}

.pricing-card-name {
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.25;
}

.pricing-card-description {
  min-height: 40px;
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.pricing-card-price {
  margin-bottom: 6px;
}

.price-value {
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
}

.price-currency {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.pricing-card-meta {
  flex-wrap: wrap;
  margin-bottom: 14px;
  line-height: 1.4;
}

.pricing-card-limits {
  min-height: 30px;
  margin-bottom: 14px;
}

.limit-tag {
  --limit-tag-color: var(--text-secondary);
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--limit-tag-color) 22%, var(--border-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--limit-tag-color) 8%, var(--card-bg));
  color: var(--limit-tag-color);
  font-weight: 700;
}

.limit-tag.ai {
  --limit-tag-color: var(--accent);
}

.limit-tag.wl {
  --limit-tag-color: var(--warning-color);
}

.limit-tag.bs {
  --limit-tag-color: var(--success-color);
}

.pricing-card-panels-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.panel-summary-item {
  padding: 10px 8px;
  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--background) 48%, var(--card-bg));
}

.panel-count {
  font-size: 19px;
  line-height: 1;
}

.panel-label {
  font-size: 9px;
  font-weight: 800;
}

.pricing-card-status {
  margin-bottom: 14px;
}

.status-badge {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
}

.status-badge.active {
  background: color-mix(in srgb, var(--success-color) 14%, var(--card-bg));
  color: var(--success-color);
}

.status-badge.inactive {
  background: color-mix(in srgb, var(--text-tertiary) 14%, var(--card-bg));
  color: var(--text-secondary);
}

.pricing-card-actions {
  margin-top: auto;
}

.pricing-card-actions .btn-block {
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--accent)) 26%, var(--border-color));
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 10%, var(--card-bg));
  color: var(--text-primary);
  font-weight: 800;
}

.pricing-card-actions .btn-block:hover {
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 16%, var(--card-bg));
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 44%, var(--border-color));
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
}

.order-controls {
  justify-content: stretch;
}

.order-controls .btn {
  flex: 1;
  min-height: 36px;
  background: color-mix(in srgb, var(--background) 52%, var(--card-bg));
  color: var(--text-secondary);
  border-radius: 8px;
}

.order-controls .btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 10%, var(--card-bg));
  color: var(--text-primary);
}

.order-controls .btn:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.pricing-btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pricing-spin .7s linear infinite;
}

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

.plan-editor-modal-content {
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  box-shadow: var(--shadow-xl);
}

.plan-editor-header,
.plan-editor-footer {
  background: color-mix(in srgb, var(--background) 42%, var(--card-bg));
}

.plan-editor-title,
.plan-editor-subtitle,
.plan-editor-body,
.plan-editor-footer {
  color: var(--text-primary);
}

.plan-editor-tabs {
  overflow-x: auto;
  background: color-mix(in srgb, var(--background) 50%, var(--card-bg));
}

.plan-editor-tabs .tab-btn {
  background: transparent;
  color: var(--text-secondary);
}

.plan-editor-tabs .tab-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
  color: var(--text-primary);
}

.plan-editor-tabs .tab-btn.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--card-bg));
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border-color));
  color: var(--accent);
}

.plan-editor-tabs .tab-badge.open {
  background: color-mix(in srgb, var(--success-color) 16%, var(--card-bg));
  color: var(--success-color);
}

.plan-editor-tabs .tab-badge.locked {
  background: color-mix(in srgb, var(--danger-color) 13%, var(--card-bg));
  color: var(--danger-color);
}

.plan-info-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.plan-info-field {
  display: grid;
  gap: 6px;
}

.plan-info-field label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.plan-info-field input,
.plan-info-field textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 12px;
  transition: var(--transition);
}

.plan-info-field textarea {
  resize: vertical;
}

.plan-info-field input:focus,
.plan-info-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--input-shadow-focus);
}

.plan-info-wide {
  grid-column: 1 / -1;
}

.plan-active-toggle {
  width: fit-content;
}

.tab-btn {
  border-radius: 8px;
  white-space: nowrap;
}

.panel-chip,
.limit-toggle,
.limit-input-group input {
  border-radius: 8px;
}

.panel-chip {
  color: var(--text-secondary);
}

.panel-chip:hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--card-bg));
}

.panel-chip.open {
  background: color-mix(in srgb, var(--success-color) 13%, var(--card-bg));
  border-color: color-mix(in srgb, var(--success-color) 48%, var(--border-color));
  color: var(--text-primary);
}

.panel-chip.open .chip-status {
  color: var(--success-color);
}

.panel-chip.locked {
  background: color-mix(in srgb, var(--danger-color) 10%, var(--card-bg));
  border-color: color-mix(in srgb, var(--danger-color) 34%, var(--border-color));
  color: var(--text-secondary);
  opacity: 1;
}

.panel-chip.locked .chip-status {
  color: var(--danger-color);
}

.chip-icon {
  color: currentColor;
}

.limit-toggle {
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--background) 48%, var(--card-bg));
  color: var(--text-primary);
}

.limit-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color));
  background: color-mix(in srgb, var(--accent) 7%, var(--card-bg));
}

.limit-input-group input {
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
}

.changes-summary {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  max-width: min(520px, 100%);
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--background) 42%, var(--card-bg));
  color: var(--text-secondary);
}

@media (max-width: 760px) {
  .pricing-admin-header {
    flex-direction: column;
  }

  .pricing-admin-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }

  .pricing-admin-grid {
    grid-template-columns: 1fr;
  }

  .plan-editor-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .footer-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {

  .pricing-admin-header,
  .pricing-admin-card {
    border-radius: 8px;
  }

  .pricing-admin-overview {
    grid-template-columns: 1fr;
  }

  .pricing-card-panels-summary {
    grid-template-columns: 1fr;
  }

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

/* Modern schedule management */
.schedule-workbench {
  display: grid;
  gap: 16px;
}

.schedule-hero {
  align-items: flex-start;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(16, 185, 129, 0.10)),
    var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 18px;
}

.schedule-kicker {
  color: var(--primary-color, #2563eb);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.schedule-hero h2 {
  color: var(--text-primary, #111827);
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 6px;
}

.schedule-hero p {
  color: var(--text-secondary, #64748b);
  margin: 0;
}

.schedule-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.schedule-hero-actions .btn,
.schedule-filter-panel .btn {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.schedule-stats-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.schedule-stat-card {
  align-items: center;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.schedule-stat-card>span {
  align-items: center;
  background: rgba(37, 99, 235, 0.10);
  border-radius: 8px;
  color: var(--primary-color, #2563eb);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.schedule-stat-card.subtle>span {
  background: rgba(100, 116, 139, 0.12);
  color: var(--text-secondary, #64748b);
}

.schedule-stat-card strong {
  color: var(--text-primary, #111827);
  display: block;
  font-size: 20px;
  line-height: 1;
}

.schedule-stat-card small {
  color: var(--text-secondary, #64748b);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

.schedule-view-tabs {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px;
}

.schedule-view-tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 700;
  gap: 6px;
  min-height: 38px;
  padding: 8px 12px;
}

.schedule-view-tab.active {
  background: var(--primary-color, #2563eb);
  color: #ffffff;
}

.schedule-filter-panel {
  align-items: end;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: 12px;
}

.schedule-filter-panel .schedule-search {
  grid-column: span 2;
}

.schedule-filter-panel label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.schedule-filter-panel label span {
  color: var(--text-secondary, #64748b);
  font-size: 12px;
  font-weight: 700;
}

.schedule-filter-panel input,
.schedule-filter-panel select,
.schedule-export-controls select {
  background: var(--input-bg, #ffffff);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  color: var(--text-primary, #111827);
  min-height: 38px;
  min-width: 0;
  padding: 8px 10px;
  width: 100%;
}

.schedule-search {
  position: relative;
}

.schedule-search svg {
  color: var(--text-secondary, #64748b);
  display: block;
  height: 16px;
  left: 10px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
}

.schedule-search input {
  padding-left: 34px;
}

.schedule-grid-shell {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  overflow: auto;
}

.schedule-source-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.schedule-source-chip {
  align-items: center;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 999px;
  color: var(--text-secondary, #64748b);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
}

.schedule-source-chip svg {
  height: 14px;
  width: 14px;
}

.schedule-source-chip strong {
  color: var(--text-primary, #111827);
  font-size: 13px;
}

.schedule-grid.modern {
  display: grid;
  min-width: 920px;
}

.schedule-time-header,
.schedule-day-header,
.schedule-time-slot,
.schedule-cell {
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  border-right: 1px solid var(--border-color, #e5e7eb);
  min-width: 0;
}

.schedule-time-header,
.schedule-day-header {
  background: var(--surface-muted, #f8fafc);
  color: var(--text-primary, #111827);
  font-size: 13px;
  padding: 12px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.schedule-time-slot {
  background: var(--surface-muted, #f8fafc);
  color: var(--text-primary, #111827);
  display: grid;
  gap: 2px;
  padding: 12px;
}

.schedule-time-slot span {
  color: var(--text-secondary, #64748b);
  font-size: 12px;
}

.schedule-cell {
  align-content: start;
  background: var(--card-bg, #ffffff);
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 8px;
}

.schedule-cell.disabled {
  background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.10), rgba(148, 163, 184, 0.10) 8px, transparent 8px, transparent 16px);
}

.schedule-cell.drag-over {
  box-shadow: inset 0 0 0 2px var(--primary-color, #2563eb);
}

.schedule-workbench .add-lesson-btn {
  align-items: center;
  background: transparent;
  border: 1px dashed var(--border-color, #cbd5e1);
  border-radius: 6px;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 100%;
}

.schedule-workbench .add-lesson-btn:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: var(--primary-color, #2563eb);
  color: var(--primary-color, #2563eb);
}

.schedule-workbench .assignment-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-left: 4px solid var(--primary-color, #2563eb);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
}

.schedule-workbench .assignment-card.wide {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.assignment-title {
  color: var(--text-primary, #111827);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.assignment-meta {
  color: var(--text-secondary, #64748b);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.assignment-meta span {
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  gap: 4px;
}

.assignment-meta svg,
.schedule-view-tab svg,
.schedule-hero-actions svg,
.schedule-filter-panel svg {
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.assignment-source {
  color: var(--primary-color, #2563eb);
  font-weight: 800;
}

.schedule-workbench .assignment-card.readonly {
  background: var(--surface-muted, #f8fafc);
  cursor: default;
}

.assignment-status {
  align-self: start;
  background: rgba(37, 99, 235, 0.10);
  border-radius: 999px;
  color: var(--primary-color, #2563eb);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  width: max-content;
}

.assignment-status.published,
.assignment-status.active {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.assignment-status.cancelled {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.schedule-workbench .assignment-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.schedule-workbench .assignment-actions button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.schedule-workbench .assignment-actions button:hover {
  background: var(--surface-muted, #f8fafc);
  color: var(--text-primary, #111827);
}

.schedule-list,
.schedule-group-list {
  display: grid;
  gap: 10px;
}

.schedule-mobile-grid {
  display: none;
}

.schedule-mobile-day {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
}

.schedule-mobile-day header {
  align-items: center;
  background: var(--surface-muted, #f8fafc);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  display: flex;
  justify-content: space-between;
  padding: 12px;
}

.schedule-mobile-day header span {
  color: var(--text-secondary, #64748b);
  font-size: 12px;
  font-weight: 700;
}

.schedule-mobile-slot {
  display: grid;
  gap: 10px;
  grid-template-columns: 72px minmax(0, 1fr);
  padding: 12px;
}

.schedule-mobile-slot+.schedule-mobile-slot {
  border-top: 1px solid var(--border-color, #e5e7eb);
}

.schedule-mobile-time {
  color: var(--text-primary, #111827);
  display: grid;
  gap: 2px;
}

.schedule-mobile-time span {
  color: var(--text-secondary, #64748b);
  font-size: 12px;
}

.schedule-mobile-items {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.schedule-mobile-empty {
  color: var(--text-secondary, #64748b);
  margin: 0;
  padding: 12px;
}

.schedule-list-row {
  display: block;
}

.schedule-group {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
}

.schedule-group header {
  align-items: center;
  background: var(--surface-muted, #f8fafc);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  display: flex;
  justify-content: space-between;
  padding: 12px;
}

.schedule-group h3 {
  color: var(--text-primary, #111827);
  font-size: 16px;
  margin: 0;
}

.schedule-group header span {
  color: var(--text-secondary, #64748b);
  font-size: 12px;
  font-weight: 700;
}

.schedule-group-items {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.schedule-empty-state {
  background: var(--card-bg, #ffffff);
  border: 1px dashed var(--border-color, #cbd5e1);
  border-radius: 8px;
  color: var(--text-secondary, #64748b);
  display: grid;
  justify-items: center;
  padding: 32px 16px;
  text-align: center;
}

.schedule-empty-state svg {
  color: var(--primary-color, #2563eb);
  height: 32px;
  margin-bottom: 10px;
  width: 32px;
}

.schedule-empty-state h3 {
  color: var(--text-primary, #111827);
  margin: 0 0 6px;
}

.schedule-export-body {
  display: grid;
  gap: 16px;
}

.export-summary {
  align-items: center;
  background: var(--surface-muted, #f8fafc);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  padding: 12px;
}

.export-summary strong {
  color: var(--primary-color, #2563eb);
  font-size: 28px;
  line-height: 1;
}

.export-summary span {
  color: var(--text-secondary, #64748b);
}

.schedule-export-controls {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-export-controls label {
  display: grid;
  gap: 5px;
}

.schedule-export-controls span {
  color: var(--text-secondary, #64748b);
  font-size: 12px;
  font-weight: 700;
}

.export-options.modern {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.export-options.modern .export-option {
  align-items: flex-start;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  color: var(--text-primary, #111827);
  cursor: pointer;
  display: grid;
  gap: 6px;
  min-height: 132px;
  padding: 14px;
  text-align: left;
}

.export-options.modern .export-option:hover {
  border-color: var(--primary-color, #2563eb);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.export-options.modern .export-option svg {
  color: var(--primary-color, #2563eb);
  height: 22px;
  width: 22px;
}

.export-options.modern .export-option span {
  color: var(--text-secondary, #64748b);
  font-size: 12px;
}

@media (max-width: 1200px) {
  .schedule-filter-panel .schedule-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {

  .schedule-hero,
  .schedule-workbench .assignment-card.wide {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .schedule-hero {
    flex-direction: column;
  }

  .schedule-hero-actions {
    justify-content: stretch;
  }

  .schedule-hero-actions .btn {
    justify-content: center;
    width: 100%;
  }

  .schedule-stats-grid,
  .schedule-filter-panel,
  .schedule-export-controls,
  .export-options.modern {
    grid-template-columns: 1fr;
  }

  .schedule-grid-shell {
    display: none;
  }

  .schedule-mobile-grid {
    display: grid;
    gap: 12px;
  }

  .schedule-mobile-slot {
    grid-template-columns: 1fr;
  }

  .schedule-workbench .assignment-card.mobile,
  .schedule-workbench .assignment-card.wide {
    grid-template-columns: 1fr;
  }

  .schedule-workbench .assignment-actions {
    justify-content: flex-start;
  }
}

[data-admin-overview-card][data-card-hidden="true"],
[data-dashboard-widget][data-widget-hidden="true"] {
  display: none !important;
}

.admin-overview-toolbar,
.dashboard-cache-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.admin-overview-toolbar {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 12px 14px;
}

.admin-overview-toolbar span,
.dashboard-cache-copy span {
  color: var(--text-secondary);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.dashboard-cache-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 720px) {

  .admin-overview-toolbar,
  .dashboard-cache-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-cache-actions {
    justify-content: stretch;
  }

  .dashboard-cache-actions .btn,
  .admin-overview-toolbar .btn {
    justify-content: center;
    width: 100%;
  }
}

/* ─── Accounting: Account Type Picker ─────────────────────────────────────── */

.account-type-option:hover {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  transform: translateY(-1px);
}

.account-type-option input:checked+*+* {
  color: var(--accent);
}

.account-type-option input:focus-visible+*+* {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Accounting: Empty state for account list ───────────────────────────── */

.acc-bank-account--empty {
  display: flex;
  border-style: dashed !important;
  border-width: 1.5px !important;
}

/* ─── Accounting: Transaction empty account warning ──────────────────────── */

.tx-account-empty {
  animation: tx-account-pulse 2.4s ease-in-out infinite;
}

@keyframes tx-account-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning-color) 18%, transparent);
  }

  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning-color) 6%, transparent);
  }
}

/* ─── Renewal/Churn loading spinner polish ────────────────────────────────── */

.renewal-loading-placeholder {
  position: relative;
}

.renewal-spinner {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0%, var(--accent) 75%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: renewal-spin 0.8s linear infinite;
}

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

/* ─── Exam Templates: Filter bar + cards ───────────────────────────────── */

.exam-templates-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.exam-templates-filter-bar__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  flex: 1;
  min-width: 180px;
  transition: border-color 0.15s;
}

.exam-templates-filter-bar__search:focus-within {
  border-color: var(--accent);
  background: var(--card-bg);
}

.exam-templates-filter-bar__search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  min-width: 0;
}

.exam-templates-filter-bar select {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 8px;
  cursor: pointer;
  min-width: 120px;
}

.exam-templates-filter-bar select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Reuse styles for the exam results filter bar (identical UI) */
.exam-results-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
}

/* Card variants for exam templates */
.exam-tpl-card {
  position: relative;
  border-left: 3px solid var(--border-color);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.exam-tpl-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.06));
}

.exam-tpl-card.is-global {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--card-bg));
}

.exam-tpl-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.exam-tpl-card__header h3 {
  margin: 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.exam-tpl-card__badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.badge--global {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.badge--local {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.badge--booklet {
  background: color-mix(in srgb, var(--warning-color, #f59e0b) 14%, transparent);
  color: var(--warning-color, #f59e0b);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.exam-tpl-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.exam-tpl-card__desc {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0 0 8px;
  font-style: italic;
}

/* Optik form template picker */
.optik-form-template-picker {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.optik-form-template-picker select {
  flex: 1;
  min-width: 0;
}

/* ─── Renewal & Churn Redesign ──────────────────────────────────────────── */

.renewal-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s;
}

.renewal-filter:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-secondary));
}

.renewal-filter .filter-select {
  padding: 4px 8px;
  font-size: 13px;
  border: none;
  background: var(--card-bg);
  color: var(--text-primary);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.renewal-filter .filter-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.renewal-toolbar__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.renewal-summary-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.03));
}

/* Kurum istatistikleri — özet şerit (üst kısım) */
.renewal-org-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  padding: 4px;
  border-radius: 14px;
  background: transparent;
  border: none;
}

.renewal-org-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--border-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.renewal-org-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.renewal-org-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--text-tertiary) 12%, transparent);
  color: var(--text-secondary);
}

.renewal-org-stat__icon--students {
  background: color-mix(in srgb, #2c3e8c 14%, transparent);
  color: #2c3e8c;
}

.renewal-org-stat__icon--contracts {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.renewal-org-stat__icon--completed {
  background: color-mix(in srgb, var(--success-color) 14%, transparent);
  color: var(--success-color);
}

.renewal-org-stat__icon--recent {
  background: color-mix(in srgb, var(--warning-color) 14%, transparent);
  color: var(--warning-color);
}

.renewal-org-stat:has(.renewal-org-stat__icon--students) {
  border-left-color: #2c3e8c;
}

.renewal-org-stat:has(.renewal-org-stat__icon--contracts) {
  border-left-color: var(--accent);
}

.renewal-org-stat:has(.renewal-org-stat__icon--completed) {
  border-left-color: var(--success-color);
}

.renewal-org-stat:has(.renewal-org-stat__icon--recent) {
  border-left-color: var(--warning-color);
}

.renewal-org-stat__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.renewal-org-stat__label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

.renewal-org-stat__value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.renewal-org-stat__value-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.renewal-org-stat__hint {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modal yardım metni (inline style yerine) */
.renewal-modal-help {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}

/* Boş durum kartı — daha bilgilendirici */
.renewal-empty-state {
  padding: 40px 24px;
  text-align: center;
}

.renewal-summary-bar__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.renewal-summary-bar__label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.renewal-summary-bar__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.renewal-summary-bar__meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Renewal section block */
.renewal-section {
  margin-bottom: 24px;
}

.renewal-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}

.renewal-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}

.renewal-section--danger .renewal-section__icon {
  background: color-mix(in srgb, var(--danger-color, #ef4444) 12%, transparent);
  color: var(--danger-color, #ef4444);
}

.renewal-section--warning .renewal-section__icon {
  background: color-mix(in srgb, var(--warning-color, #f59e0b) 12%, transparent);
  color: var(--warning-color, #f59e0b);
}

.renewal-section--info .renewal-section__icon {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

.renewal-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
}

.renewal-section--danger .renewal-section__count {
  background: color-mix(in srgb, var(--danger-color, #ef4444) 12%, transparent);
  color: var(--danger-color, #ef4444);
}

.renewal-section--warning .renewal-section__count {
  background: color-mix(in srgb, var(--warning-color, #f59e0b) 12%, transparent);
  color: var(--warning-color, #f59e0b);
}

.renewal-empty {
  text-align: center;
  padding: 36px 18px;
  color: var(--text-tertiary);
}

.renewal-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: 50%;
  color: var(--text-secondary);
}

.renewal-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.renewal-empty-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  max-width: 320px;
  margin: 0 auto;
}

.renewal-skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-color) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: renewal-skeleton-shimmer 1.4s infinite;
  border-radius: 8px;
  color: transparent;
}

@keyframes renewal-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.renewal-org-stat__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.renewal-toolbar {
  gap: 12px;
  flex-wrap: wrap;
}

.renewal-summary-bar__cell {
  min-width: 0;
  word-break: break-word;
}

@media (max-width: 720px) {
  .renewal-org-stats {
    grid-template-columns: 1fr 1fr;
  }

  .renewal-summary-bar {
    flex-direction: column;
  }
}

.renewal-list,
.churn-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Renewal item card */
.renewal-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.renewal-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.06));
}

.renewal-item--danger {
  border-left-color: var(--danger-color, #ef4444);
}

.renewal-item--warning {
  border-left-color: var(--warning-color, #f59e0b);
}

.renewal-item--neutral {
  border-left-color: var(--accent);
}

.renewal-item__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.renewal-item__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}

.renewal-item__meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.renewal-item__meta-sep {
  margin: 0 4px;
  color: var(--text-tertiary);
}

.renewal-item__amount {
  text-align: right;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.renewal-item__total {
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
  line-height: 1.2;
}

.renewal-item__remaining {
  font-size: 11px;
  color: var(--danger-color, #ef4444);
  font-weight: 600;
}

.renewal-item__days {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

.renewal-item__days.is-overdue {
  color: var(--danger-color, #ef4444);
}

.renewal-item__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 130px;
}

/* Pill row (used in renewal & churn items) */
.renewal-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

.renewal-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.renewal-pill--success {
  background: color-mix(in srgb, var(--success-color, #10b981) 12%, transparent);
  color: var(--success-color, #10b981);
}

.renewal-pill--warning {
  background: color-mix(in srgb, var(--warning-color, #f59e0b) 12%, transparent);
  color: var(--warning-color, #f59e0b);
}

.renewal-pill--danger {
  background: var(--danger-color, #ef4444);
  color: white;
}

.renewal-pill--neutral {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: 600;
}

.renewal-pill--soft {
  font-weight: 500;
}

/* Churn item card */
.churn-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
  transition: transform 0.15s, box-shadow 0.15s;
}

.churn-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.06));
}

.churn-item--danger {
  border-left-color: var(--danger-color, #ef4444);
}

.churn-item--warning {
  border-left-color: var(--warning-color, #f59e0b);
}

.churn-item--info {
  border-left-color: var(--accent);
}

.churn-item__head {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.churn-item__info {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.churn-item__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}

.churn-item__meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.churn-item__score {
  text-align: right;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.churn-item__score-value {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.churn-item--danger__score {
  color: var(--danger-color, #ef4444);
}

.churn-item--warning__score {
  color: var(--warning-color, #f59e0b);
}

.churn-item--info__score {
  color: var(--accent);
}

.churn-item__score-label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}

.churn-item__debt {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.churn-item__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
}

/* Responsive overrides */
@media (max-width: 720px) {
  .renewal-item {
    grid-template-columns: 1fr;
  }

  .renewal-item__amount {
    text-align: left;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
  }

  .renewal-item__actions {
    flex-direction: row;
    min-width: 0;
  }

  .renewal-item__actions .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 540px) {
  .renewal-summary-bar {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px;
  }

  .renewal-summary-bar__value {
    font-size: 16px;
  }
}

/* ─── Stat card tone variants ──────────────────────────────────────────── */

/* ─── Exam Template Modal: Kazanım grid (single + AB) ─────────────────── */

.kazanim-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kazanim-subject-group {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.kazanim-subject-group[open] {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-color));
}

.kazanim-subject-group>summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.kazanim-subject-group>summary::-webkit-details-marker {
  display: none;
}

.kazanim-subject-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--accent) 4%, var(--card-bg));
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
}

.kazanim-subject-group[open] .kazanim-subject-header {
  border-bottom-color: color-mix(in srgb, var(--accent) 20%, var(--border-color));
}

.kazanim-subject-group>summary:hover .kazanim-subject-header {
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
}

.kazanim-subject-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 600;
}

.kazanim-subject-title svg {
  color: var(--accent);
  transition: transform 0.2s;
}

.kazanim-subject-group[open] .kazanim-subject-title svg {
  transform: rotate(90deg);
}

.kazanim-subject-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: 10px;
}

.btn-mini {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-mini:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.kazanim-subject-rows {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.kazanim-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
  transition: background 0.12s;
}

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

.kazanim-row:hover {
  background: var(--bg-secondary);
}

.kazanim-row.is-filled {
  background: color-mix(in srgb, var(--success-color, #10b981) 6%, transparent);
}

.kazanim-row__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.kazanim-row.is-filled .kazanim-row__number {
  background: var(--success-color, #10b981);
  color: white;
}

.kazanim-row__cells {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.kazanim-row__cells--ab {
  grid-template-columns: 1fr 1fr;
}

.kazanim-row__cells select.kazanim-select {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  min-width: 0;
}

.kazanim-row__cells select.kazanim-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.kazanim-row__cells--ab select.kazanim-select {
  border-left: 3px solid var(--accent);
}

.kazanim-row__cells--ab select.kazanim-select[data-kitapcik="B"] {
  border-left-color: var(--info-color, #0891b2);
}

/* ──────────────────────────────────────────────────────────
 * MODERN: Cevap Anahtarı (Answer Key) editörü
 * ────────────────────────────────────────────────────────── */

.answer-key-row {
  border-radius: 6px;
  transition: background 0.12s ease, box-shadow 0.18s ease;
}

.answer-key-row:hover {
  background: var(--bg-secondary);
  box-shadow: inset 3px 0 0 var(--accent);
}

.answer-key-row.is-filled {
  background: color-mix(in srgb, var(--success-color, #10b981) 7%, transparent);
}

.answer-key-row.is-filled .kazanim-row__number {
  background: var(--success-color, #10b981);
  color: white;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--success-color, #10b981) 35%, transparent);
}

.answer-key-row .kazanim-row__cells select.answer-key-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 28px 8px 12px;
  background: var(--bg-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.answer-key-row .kazanim-row__cells select.answer-key-select:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.answer-key-row .kazanim-row__cells select.answer-key-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.answer-key-row .kazanim-row__cells select.answer-key-select:not([value=""]) {
  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

/* Ders header'ındaki progress göstergesi */
.kazanim-subject-group .kazanim-subject-header {
  padding-right: 14px;
}

.kazanim-subject-group .kazanim-subject-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.answer-subject-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.answer-progress-bar {
  width: 80px;
  height: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px;
  overflow: hidden;
}

.answer-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff));
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.answer-progress-fill[data-complete="1"] {
  background: linear-gradient(90deg, var(--success-color, #10b981), color-mix(in srgb, var(--success-color, #10b981) 70%, #fff));
  animation: progressComplete 0.6s ease;
}

@keyframes progressComplete {

  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(1.4);
  }
}

.kazanim-subject-group.is-complete .answer-subject-progress {
  background: color-mix(in srgb, var(--success-color, #10b981) 12%, transparent);
  border-color: color-mix(in srgb, var(--success-color, #10b981) 35%, transparent);
  color: var(--success-color, #10b981);
}

/* Ders içindeki toplu-gir toolbar */
.answer-bulk-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 16px 6px;
  background: color-mix(in srgb, var(--accent) 3%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 22%, transparent);
}

.answer-bulk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  transition: all 0.18s ease !important;
}

.answer-bulk-toggle:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 15%, transparent);
}

.answer-bulk-toggle svg {
  flex: 0 0 auto;
}

/* Toplu gir paneli (collapsible) */
.answer-bulk-panels {
  display: contents;
}

.answer-bulk-panel {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 6%, transparent),
      color-mix(in srgb, var(--accent) 2%, transparent));
  padding: 14px 16px;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  animation: bulkPanelSlide 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bulkPanelSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
  }

  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 400px;
  }
}

.answer-bulk-panel[hidden] {
  display: none !important;
}

.answer-bulk-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.answer-bulk-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
}

.answer-bulk-panel-title svg {
  flex: 0 0 auto;
}

.answer-bulk-close {
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.answer-bulk-help {
  margin: 0 0 10px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.answer-bulk-help code {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11.5px;
}

.answer-bulk-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}

.answer-bulk-input {
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.answer-bulk-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.answer-bulk-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--bg-secondary);
  font-family: monospace;
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.answer-bulk-counter .counter-valid {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.answer-bulk-counter .counter-sep {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin: 2px 0;
}

.answer-bulk-counter .counter-total {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1;
}

.answer-bulk-counter .counter-label {
  margin-top: 4px;
  font-size: 9.5px;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
}

.answer-bulk-counter.is-overflow {
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
}

.answer-bulk-counter.is-overflow .counter-valid {
  color: #ef4444;
}

.answer-bulk-counter.is-complete {
  background: color-mix(in srgb, var(--success-color, #10b981) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success-color, #10b981) 35%, transparent);
}

.answer-bulk-counter.is-complete .counter-valid {
  color: var(--success-color, #10b981);
}

.answer-bulk-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.answer-bulk-actions .btn {
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.answer-bulk-actions .btn-primary {
  background: var(--accent) !important;
}

.answer-bulk-actions .btn-primary:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.answer-bulk-preview-box {
  margin-top: 12px;
  padding: 12px;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.answer-bulk-preview-box[hidden] {
  display: none !important;
}

.answer-bulk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.answer-bulk-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  border: 1px solid var(--border-color);
  transition: transform 0.15s ease;
}

.answer-bulk-chip.is-match {
  background: color-mix(in srgb, var(--success-color, #10b981) 14%, transparent);
  color: var(--success-color, #10b981);
  border-color: color-mix(in srgb, var(--success-color, #10b981) 40%, transparent);
}

.answer-bulk-chip.is-change {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.answer-bulk-chip.is-empty {
  opacity: 0.5;
}

.answer-bulk-warning,
.answer-bulk-ok {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 0;
}

.answer-bulk-warning {
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: #d97706;
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
}

.answer-bulk-ok {
  background: color-mix(in srgb, var(--success-color, #10b981) 12%, transparent);
  color: var(--success-color, #10b981);
  border: 1px solid color-mix(in srgb, var(--success-color, #10b981) 35%, transparent);
}

@media (max-width: 768px) {
  .answer-bulk-input-row {
    grid-template-columns: 1fr;
  }

  .answer-bulk-counter {
    flex-direction: row;
    gap: 6px;
  }

  .answer-progress-bar {
    width: 60px;
  }
}

@media (max-width: 600px) {
  .kazanim-row__cells--ab {
    grid-template-columns: 1fr;
  }
}

.kazanim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

/* ─── Renewal section (legacy) ──────────────────────────────────────────── */

.stat-card--danger {
  border-color: color-mix(in srgb, var(--danger-color, #ef4444) 40%, var(--border-color));
  background: color-mix(in srgb, var(--danger-color, #ef4444) 4%, var(--card-bg));
}

.stat-card--danger .stat-value {
  color: var(--danger-color, #ef4444);
}

.stat-card--warning {
  border-color: color-mix(in srgb, var(--warning-color, #f59e0b) 40%, var(--border-color));
  background: color-mix(in srgb, var(--warning-color, #f59e0b) 4%, var(--card-bg));
}

.stat-card--warning .stat-value {
  color: var(--warning-color, #f59e0b);
}

.stat-card--success {
  border-color: color-mix(in srgb, var(--success-color, #10b981) 40%, var(--border-color));
  background: color-mix(in srgb, var(--success-color, #10b981) 4%, var(--card-bg));
}

.stat-card--success .stat-value {
  color: var(--success-color, #10b981);
}

/* ─── Accounting Tabs: Responsive wrapper ───────────────────────────────── */

.accounting-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.accounting-tabs-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.accounting-tab.is-hidden-by-mru {
  display: none;
}

.accounting-tabs-more {
  position: relative;
  display: flex;
  align-items: stretch;
}

.accounting-tabs-more-btn {
  gap: 6px;
}

/* Açılır menü (dropdown) olduğunu gösteren aşağı chevron ikonu */
.accounting-tabs-more-btn::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease;
  flex: 0 0 auto;
}

.accounting-tabs-more-btn[aria-expanded="true"]::after,
.accounting-tabs-more-btn.open::after {
  transform: rotate(180deg);
  opacity: 1;
}

.accounting-tabs-more-btn:hover::after {
  opacity: 1;
}

.accounting-tabs-more-btn.has-active {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-subtle);
}

.accounting-tabs-more-btn.has-active::after {
  background: transparent;
  border-top-color: var(--accent);
  opacity: 1;
}

/* Gizlenen sekme sayısını gösteren küçük yuvarlak rozet */
.accounting-tabs-more-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent);
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
  flex: 0 0 auto;
}

.accounting-tabs-more-badge[hidden] {
  display: none;
}

.accounting-tabs-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-width: 320px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 6px;
  z-index: 1000;
  overflow: hidden;
}

.accounting-tabs-more-menu.open {
  display: block;
  animation: dropIn 0.15s ease;
}

/* Dropdown menü içindeki sekme linkleri — .accounting-tabs-more-item sınıfı
   taşımayan <a> öğeleri için de görünür stil */
.accounting-tabs-more-menu>a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: calc(100% - 12px);
  margin: 2px 6px;
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  background: transparent;
  transition: background 0.12s ease, color 0.12s ease;
  cursor: pointer;
}

.accounting-tabs-more-menu>a>span {
  color: var(--text-primary);
}

.accounting-tabs-more-menu>a:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}

.accounting-tabs-more-menu>a:hover>span {
  color: var(--accent);
}

.accounting-tabs-more-menu>a>.accounting-tab-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
}

.accounting-tabs-more-menu>a:hover>.accounting-tab-icon {
  opacity: 1;
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.accounting-tabs-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  transition: all 0.15s;
}

.accounting-tabs-more-item:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.accounting-tabs-more-item.active {
  background: var(--accent-subtle);
  color: var(--accent);
}

.accounting-tabs-more-item .accounting-tab-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.8;
}

.accounting-tabs-more-item.active .accounting-tab-icon {
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────
 * MODERN: "Daha Fazla" butonu + dropdown menü
 * Glassmorphism, pulse badge, yumuÅŸak animasyonlar.
 * ────────────────────────────────────────────────────────── */

/* "Daha Fazla" trigger butonu — özel görünüm */
.accounting-tabs-more-btn {
  position: relative;
  gap: 8px;
  padding: 10px 14px 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 8%, transparent),
      color-mix(in srgb, var(--accent) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.1px;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  isolation: isolate;
}

.accounting-tabs-more-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 0%,
      color-mix(in srgb, var(--accent) 15%, transparent) 0%,
      transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.accounting-tabs-more-btn:hover {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 18%, transparent),
      color-mix(in srgb, var(--accent) 8%, transparent));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateY(-1px);
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

.accounting-tabs-more-btn:hover::before {
  opacity: 1;
}

.accounting-tabs-more-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Üç nokta ikonu — hover'da hafif dans */
.accounting-tabs-more-btn .dots-icon {
  display: inline-flex;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.accounting-tabs-more-btn:hover .dots-icon {
  transform: rotate(90deg) scale(1.1);
}

/* Açılır ok ikonu — açıkken döner (::after chevron yerini alır) */
.accounting-tabs-more-btn .accounting-tabs-more-chevron {
  display: inline-block;
  margin-left: 2px;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  opacity: 0.7;
  flex: 0 0 auto;
}

/* Eski CSS::after chevron'unu gizle (modern ikon kullanıyoruz) */
.accounting-tabs-more-btn::after {
  display: none !important;
}

.accounting-tabs-more-btn[aria-expanded="true"] .accounting-tabs-more-chevron,
.accounting-tabs-more-btn.open .accounting-tabs-more-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.accounting-tabs-more-btn:hover .accounting-tabs-more-chevron {
  opacity: 1;
}

/* "Daha Fazla" etiketinin responsive gizlemesi */
.accounting-tabs-more-btn .accounting-tab-label {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .accounting-tabs-more-btn .accounting-tab-label {
    display: none;
  }

  .accounting-tabs-more-btn {
    padding: 10px 12px;
  }
}

/* Badge — pulse animasyonu + daha dolgun görünüm */
.accounting-tabs-more-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, #000));
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  margin-left: 2px;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: badgePulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes badgePulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 45%, transparent);
  }

  50% {
    transform: scale(1.12);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 65%, transparent);
  }
}

.accounting-tabs-more-badge[hidden] {
  display: none;
}

/* Dropdown menü — glassmorphism + yumuşak giriş animasyonu */
.accounting-tabs-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-width: 320px;
  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
  border-radius: 14px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  padding: 8px;
  z-index: 1000;
  overflow: hidden;
  transform-origin: top right;
}

.accounting-tabs-more-menu.open {
  display: block;
  animation: dropInModern 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropInModern {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Dropdown başlık (ilk item) — "Tüm Sekmeler" gibi */
.accounting-tabs-more-menu>.accounting-tabs-more-header {
  display: block;
  padding: 6px 12px 8px;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

/* Dropdown item — modern kart hissi */
.accounting-tabs-more-menu>a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: calc(100% - 16px);
  margin: 2px 8px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  background: transparent;
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
  cursor: pointer;
  position: relative;
}

.accounting-tabs-more-menu>a>span {
  color: var(--text-primary);
  flex: 1;
}

.accounting-tabs-more-menu>a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.accounting-tabs-more-menu>a:hover {
  background: var(--accent-subtle);
  color: var(--accent);
  transform: translateX(2px);
}

.accounting-tabs-more-menu>a:hover::before {
  height: 60%;
}

.accounting-tabs-more-menu>a:hover>span {
  color: var(--accent);
}

.accounting-tabs-more-menu>a>.accounting-tab-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.accounting-tabs-more-menu>a:hover>.accounting-tab-icon {
  opacity: 1;
  transform: scale(1.1);
}

/* ──────────────────────────────────────────────────────────
 * MODERN: Inline "Kart Düzenle" butonu (sekme barının sağında)
 * ────────────────────────────────────────────────────────── */

.accounting-tab-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  margin-left: 4px;
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 0 0 auto;
}

.accounting-tab-edit-btn:hover {
  background: var(--accent-subtle);
  border-style: solid;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

.accounting-tab-edit-btn:active {
  transform: translateY(0);
}

.accounting-tab-edit-btn svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.accounting-tab-edit-btn:hover svg {
  transform: rotate(-12deg) scale(1.1);
}

/* Küçük ekranlarda inline edit butonu: sadece ikon göster */
@media (max-width: 900px) {
  .accounting-tab-edit-btn>span {
    display: none;
  }

  .accounting-tab-edit-btn {
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  .accounting-tab-edit-btn {
    display: none;
  }
}



/* ════════════════════════════════════════════════════════════════════════
 * Aylık Gelir vs Gider — Modern, interaktif chart kartı
 * ════════════════════════════════════════════════════════════════════════ */

#accMonthlyPeriodBtns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.acc-monthly-chart-card {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--card-bg, #fff) 90%, transparent) 0%,
      color-mix(in srgb, var(--secondary-bg, #f1f5f9) 60%, transparent) 100%);
}

.acc-monthly-chart-card .acc-chart-enhanced-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border-color);
}

.acc-monthly-chart-card .acc-chart-title-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex: 1;
  min-width: 0;
}

.acc-monthly-chart-card .acc-chart-title-wrap h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 0 0 auto;
  white-space: nowrap;
}

#accMonthlyKpiRow,
.acc-monthly-kpi-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

#accMonthlyKpiRow::-webkit-scrollbar,
.acc-monthly-kpi-row::-webkit-scrollbar {
  height: 4px;
}

#accMonthlyKpiRow::-webkit-scrollbar-track,
.acc-monthly-kpi-row::-webkit-scrollbar-track {
  background: transparent;
}

#accMonthlyKpiRow::-webkit-scrollbar-thumb,
.acc-monthly-kpi-row::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 2px;
}

.acc-monthly-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 10px;
  border-left: 3px solid var(--border-color);
  flex: 0 0 auto;
  min-width: 96px;
  max-width: 140px;
}

.acc-monthly-kpi-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.acc-monthly-kpi-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-monthly-kpi-value.income {
  border-left-color: #22c55e;
}

.acc-monthly-kpi-value.expense {
  border-left-color: #ef4444;
}

.acc-monthly-kpi-value.net {
  border-left-color: #3b82f6;
}

.acc-monthly-chart-card .acc-chart-enhanced-body {
  position: relative;
  height: 280px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.acc-monthly-chart-card .acc-chart-enhanced-body canvas {
  max-width: 100% !important;
  max-height: 100% !important;
}

[data-theme="dark"] .acc-monthly-chart-card {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--card-bg, #1e293b) 90%, transparent) 0%,
      color-mix(in srgb, var(--secondary-bg, #0f172a) 60%, transparent) 100%);
}

#accMonthlyPeriodBtns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  flex: 0 0 auto;
  min-width: 130px;
  max-width: 200px;
}

#accMonthlyPeriodBtns .acc-chart-period-btn {
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-align: center;
}

#accMonthlyPeriodBtns .acc-chart-period-btn:hover:not(.active) {
  background: var(--hover-bg, color-mix(in srgb, var(--accent) 8%, transparent));
  border-color: var(--border-strong, var(--accent));
}

#accMonthlyPeriodBtns .acc-chart-period-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.acc-monthly-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-color);
  background: var(--secondary-bg);
}

.acc-monthly-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--card-bg);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  user-select: none;
  transition: all 0.18s ease;
  flex: 0 0 auto;
}

.acc-monthly-toggle-chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.acc-monthly-toggle-chip:has(input:checked) {
  background: var(--card-bg);
  border-color: var(--accent);
  color: var(--text-primary);
  font-weight: 600;
}

.acc-monthly-toggle-chip input {
  display: none;
}

.acc-monthly-toggle-chip .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

[data-theme="dark"] .acc-monthly-toggle {
  background: var(--bg-tertiary, #0f172a);
}

/* ════ Responsive breakpoints — Aylık Gelir vs Gider ════ */

/* Orta ekranlar: başlık + butonlar tek satırda sığabilir */
@media (max-width: 1200px) {
  .acc-monthly-chart-card .acc-chart-enhanced-header {
    padding: 10px 14px 6px;
    gap: 8px;
  }

  .acc-monthly-chart-card .acc-chart-enhanced-body {
    height: 260px;
  }
}

/* Tablet ve altı: butonlar tam genişlikte eşit */
@media (max-width: 768px) {
  .acc-monthly-chart-card .acc-chart-title-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  #accMonthlyPeriodBtns {
    width: 100%;
    max-width: 100%;
  }

  .acc-monthly-chart-card .acc-chart-enhanced-body {
    height: 240px;
  }

  .acc-monthly-toggle {
    justify-content: space-between;
  }

  .acc-monthly-toggle-chip {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* Mobil */
@media (max-width: 480px) {
  .acc-monthly-chart-card .acc-chart-enhanced-header {
    padding: 8px 12px 6px;
  }

  .acc-monthly-chart-card .acc-chart-title-wrap h4 {
    font-size: 13px;
  }

  .acc-monthly-kpi {
    min-width: 88px;
    padding: 4px 8px;
  }

  .acc-monthly-kpi-label {
    font-size: 9px;
  }

  .acc-monthly-kpi-value {
    font-size: 12px;
  }

  .acc-monthly-chart-card .acc-chart-enhanced-body {
    height: 200px;
  }

  .acc-monthly-toggle-chip {
    padding: 3px 6px;
    font-size: 10.5px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Ödeme Takvimi — Modern, interaktif, tıklanabilir
 * ════════════════════════════════════════════════════════════════════════ */

#accPaymentCalendar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acc-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.acc-calendar-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.acc-calendar-nav {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.acc-calendar-nav:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.05);
}

.acc-calendar-nav:active {
  transform: scale(0.95);
}

.acc-calendar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 130px;
  text-align: center;
  text-transform: capitalize;
}

.acc-calendar-today-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.acc-calendar-today-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.acc-calendar-today-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.acc-calendar-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-bg);
}

.acc-calendar-view-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.acc-calendar-view-btn:hover {
  color: var(--text-primary);
}

.acc-calendar-view-btn.active {
  background: var(--accent);
  color: #fff;
}

.acc-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.acc-calendar-day-name {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
}

.acc-calendar-day {
  min-height: 92px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.acc-calendar-day:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.acc-calendar-day.weekend {
  background: color-mix(in srgb, var(--secondary-bg) 40%, var(--card-bg) 60%);
}

.acc-calendar-day.today {
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg) 92%);
  border-color: var(--accent);
  border-width: 2px;
}

.acc-calendar-day.has-overdue {
  border-color: #ef4444;
  background: color-mix(in srgb, #ef4444 6%, var(--card-bg) 94%);
}

.acc-calendar-day.has-pending {
  border-color: #f57c00;
  background: color-mix(in srgb, #f57c00 5%, var(--card-bg) 95%);
}

.acc-calendar-day.has-income {
  border-color: color-mix(in srgb, #22c55e 60%, var(--border-color));
}

.acc-calendar-empty {
  min-height: 92px;
}

.acc-calendar-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.acc-calendar-day.today .acc-calendar-day-num {
  color: var(--accent);
  font-weight: 800;
}

.acc-calendar-day-num {
  font-variant-numeric: tabular-nums;
}

.acc-calendar-day-sum {
  font-size: 10px;
  color: var(--success-color, #22c55e);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.acc-calendar-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.acc-calendar-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--secondary-bg);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.12s ease;
  border-left: 3px solid transparent;
  overflow: hidden;
}

.acc-calendar-item:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--secondary-bg) 88%);
  transform: translateX(1px);
  border-left-color: currentColor;
}

.acc-calendar-item.paid {
  border-left-color: #4caf50;
  color: #2e7d32;
}

.acc-calendar-item.pending,
.acc-calendar-item.transaction,
.acc-calendar-item.free-payment {
  border-left-color: #f57c00;
  color: #e65100;
}

.acc-calendar-item.overdue {
  border-left-color: #ef4444;
  color: #c62828;
  background: color-mix(in srgb, #ef4444 10%, var(--secondary-bg) 90%);
  font-weight: 600;
}

.acc-calendar-item.expense {
  border-left-color: #9ca3af;
  color: #4b5563;
}

.acc-calendar-item-icon {
  font-size: 12px;
  flex-shrink: 0;
  font-weight: 700;
}

.acc-calendar-item-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.acc-calendar-item-name {
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.acc-calendar-item-amount {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.acc-calendar-more {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 2px;
  font-weight: 600;
  cursor: pointer;
}

.acc-calendar-more:hover {
  color: var(--accent);
}

.acc-calendar-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  background: var(--secondary-bg);
  border-radius: 10px;
  align-items: center;
}

.acc-calendar-sum {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 100px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
}

.acc-calendar-sum:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.acc-calendar-sum-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.acc-calendar-sum-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  margin-top: 2px;
}

.acc-calendar-sum.income .acc-calendar-sum-value {
  color: #22c55e;
}

.acc-calendar-sum.expense .acc-calendar-sum-value {
  color: #ef4444;
}

.acc-calendar-sum.net .acc-calendar-sum-value {
  color: var(--accent);
}

.acc-calendar-overdue-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 700;
  animation: pulse-overdue 2s ease-in-out infinite;
}

@keyframes pulse-overdue {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.acc-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-secondary);
  border-top: 1px dashed var(--border-color);
  padding-top: 10px;
}

.acc-calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.acc-calendar-legend-item .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

[data-theme="dark"] .acc-calendar-day.weekend {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .acc-calendar-day.today {
  background: color-mix(in srgb, var(--accent) 15%, var(--card-bg) 85%);
}

[data-theme="dark"] .acc-calendar-day.has-overdue {
  background: color-mix(in srgb, #ef4444 12%, var(--card-bg) 88%);
}

[data-theme="dark"] .acc-calendar-day.has-pending {
  background: color-mix(in srgb, #f57c00 10%, var(--card-bg) 90%);
}

[data-theme="dark"] .acc-calendar-item.overdue {
  background: color-mix(in srgb, #ef4444 18%, var(--secondary-bg) 82%);
}

[data-theme="dark"] .acc-calendar-overdue-badge {
  background: color-mix(in srgb, #ef4444 25%, transparent);
  color: #fca5a5;
}

@media (max-width: 720px) {
  .acc-calendar-grid {
    gap: 2px;
  }

  .acc-calendar-day {
    min-height: 72px;
    padding: 2px;
  }

  .acc-calendar-day-header {
    padding: 1px 2px 2px;
    font-size: 11px;
  }

  .acc-calendar-item {
    padding: 2px 3px;
    font-size: 10px;
  }

  .acc-calendar-item-name {
    font-size: 9px;
  }

  .acc-calendar-item-amount {
    font-size: 9px;
  }

  .acc-calendar-day-sum {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Sprint Faz 9 — Ön Muhasebe Premium Dashboard
   - Glassmorphism, gradient, hover, skeleton, empty state, modern ikonlar
   ════════════════════════════════════════════════════════════════════════ */

/* ── Icon button (kompakt, yarı saydam) ─────────────────────────────── */
.acc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--secondary-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s ease;
}

.acc-icon-btn:hover {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.acc-icon-btn:active {
  transform: translateY(0);
}

/* ── Skeleton loader (shimmer animasyonu) ───────────────────────────── */
@keyframes acc-shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

.acc-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.skeleton-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg,
      var(--secondary-bg) 0%,
      color-mix(in srgb, var(--secondary-bg) 60%, var(--text-tertiary) 40%) 50%,
      var(--secondary-bg) 100%);
  background-size: 800px 100%;
  animation: acc-shimmer 1.4s linear infinite;
}

.skeleton-line.xlarge {
  height: 32px;
  width: 75%;
}

.skeleton-line.large {
  height: 20px;
  width: 60%;
}

.skeleton-line.medium {
  height: 14px;
  width: 45%;
}

.skeleton-line.small {
  height: 10px;
  width: 30%;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-line {
    animation: none;
  }
}

/* ── Empty state (kart içi, kompakt) ─────────────────────────────────── */
.acc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 14px;
  border: 1.5px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  gap: 6px;
}

.acc-empty-state--mini {
  padding: 14px 10px;
  border-style: solid;
  border-width: 1px;
}

.acc-empty-icon {
  font-size: 32px;
  line-height: 1;
}

.acc-empty-state--mini .acc-empty-icon {
  font-size: 24px;
}

.acc-empty-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.acc-empty-state--mini .acc-empty-text {
  font-size: 12px;
}

.acc-empty-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  max-width: 280px;
  line-height: 1.4;
}

/* ── Trend badge (Kar/Zarar) ─────────────────────────────────────────── */
.acc-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
  background: var(--secondary-bg);
  color: var(--text-tertiary);
  border: 1px solid transparent;
}

.acc-trend-badge.trend-up {
  color: var(--success-color);
  background: color-mix(in srgb, var(--success-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--success-color) 25%, transparent);
}

.acc-trend-badge.trend-down {
  color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
}

/* ── Kar/Zarar kartı modern ─────────────────────────────────────────── */
.acc-profit-loss {
  background: linear-gradient(135deg,
      var(--card-bg) 0%,
      color-mix(in srgb, var(--card-bg) 70%, var(--accent) 30%) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.acc-profit-loss::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--success-color), var(--accent));
  opacity: 0.85;
}

.acc-profit-loss h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.acc-profit-loss-value.profit {
  color: var(--success-color);
  background: color-mix(in srgb, var(--success-color) 8%, transparent);
}

.acc-profit-loss-value.loss {
  color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 8%, transparent);
}

.acc-profit-loss-value {
  font-size: 28px;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  letter-spacing: -0.5px;
  text-align: center;
  margin-bottom: 12px;
}

/* ── Banka/Kasa kartı modern (tip bazlı renkler) ───────────────────── */
.acc-bank-account {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--secondary-bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  margin-bottom: 6px;
  transition: all 0.18s ease;
}

.acc-bank-account:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--secondary-bg));
  transform: translateX(2px);
}

.acc-bank-account--cash {
  border-left-color: #22c55e;
}

.acc-bank-account--bank {
  border-left-color: #3b82f6;
}

.acc-bank-account--credit_card {
  border-left-color: #f59e0b;
}

.acc-bank-account--digital {
  border-left-color: #8b5cf6;
}

.acc-bank-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.acc-bank-emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.acc-bank-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.acc-bank-info strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-bank-bank {
  font-size: 11px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-bank-type {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.acc-bank-balance {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}

/* ── Bütçe kartı: kategori kırılımı + edit butonu ─────────────────── */
.acc-budget-categories {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.acc-budget-cat-row {
  display: grid;
  grid-template-columns: minmax(60px, 1fr) 2fr auto;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}

.acc-budget-cat-name {
  color: var(--text-secondary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-budget-cat-bar {
  height: 6px;
  background: var(--secondary-bg);
  border-radius: 3px;
  overflow: hidden;
}

.acc-budget-cat-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--success-color)));
  border-radius: 3px;
  transition: width 0.3s ease;
}

.acc-budget-cat-amount {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ── Gecikmiş/Yaklaşan itemleri: avatar + urgency badge ─────────────── */
.acc-overdue-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  padding: 10px 12px !important;
  transition: background 0.15s ease;
}

.acc-overdue-item:hover {
  background: var(--secondary-bg);
}

.acc-overdue-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--success-color)));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.acc-overdue-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.acc-overdue-student {
  font-size: 12px !important;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-overdue-amount {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.acc-overdue-days-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}

.acc-overdue-days-badge.danger {
  background: color-mix(in srgb, var(--danger-color) 14%, transparent);
  color: var(--danger-color);
  border: 1px solid color-mix(in srgb, var(--danger-color) 22%, transparent);
}

.acc-overdue-days-badge.today {
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #f59e0b;
  border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
}

.acc-overdue-days-badge.tomorrow {
  background: color-mix(in srgb, #3b82f6 14%, transparent);
  color: #3b82f6;
  border: 1px solid color-mix(in srgb, #3b82f6 22%, transparent);
}

.acc-overdue-days-badge.later {
  background: var(--secondary-bg);
  color: var(--text-tertiary);
  border: 1px solid var(--border-color);
}

/* ── Gecikmiş/Yaklaşan liste scroll polish ─────────────────────────── */
#accOverdueList::-webkit-scrollbar,
#accUpcomingList::-webkit-scrollbar {
  width: 4px;
}

#accOverdueList::-webkit-scrollbar-thumb,
#accUpcomingList::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

/* ── Modern h4 (kart başlığı, icon + başlık + opsiyonel badge) ─────── */
.acc-profit-loss h4,
.acc-budget-header h4,
.acc-bank-header h4,
.acc-alerts-header h4 {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ── Responsive (küçük ekran) ───────────────────────────────────────── */
@media (max-width: 720px) {
  .acc-bank-account {
    padding: 10px;
  }

  .acc-bank-emoji {
    font-size: 18px;
  }

  .acc-overdue-item {
    padding: 8px 10px !important;
  }

  .acc-overdue-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .acc-profit-loss-value {
    font-size: 22px;
    padding: 8px 10px;
  }

  .acc-budget-cat-row {
    grid-template-columns: minmax(40px, 1fr) 1fr auto;
    font-size: 10px;
  }

  .acc-monthly-chart-card {
    height: auto !important;
  }

  .acc-chart-enhanced-body {
    height: 280px !important;
  }

  .budget-modal-form {
    padding: 4px 0;
  }

  .budget-modal-presets {
    flex-wrap: wrap;
  }

  .budget-preset-btn {
    flex: 1 1 calc(50% - 4px);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Sprint Faz 9 v2 — Aylık Gelir vs Gider Hero, Tahsilat Oranı Modern,
   Bütçe Belirle Modal
   ════════════════════════════════════════════════════════════════════════ */

/* ── Aylık Gelir vs Gider (büyük hero chart) ──────────────────────── */
.acc-monthly-chart-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.acc-monthly-chart-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #22c55e, #3b82f6, #ef4444);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.acc-chart-enhanced-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}

.acc-chart-title-wrap h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.acc-monthly-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.acc-monthly-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--secondary-bg);
  border: 1px solid transparent;
  transition: all 0.18s ease;
}

.acc-monthly-kpi:hover {
  border-color: var(--border-color);
  background: var(--card-bg);
  transform: translateY(-1px);
}

.acc-monthly-kpi-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.acc-monthly-kpi-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.acc-monthly-kpi-value.income {
  color: #22c55e;
}

.acc-monthly-kpi-value.expense {
  color: #ef4444;
}

.acc-chart-period {
  display: flex;
  gap: 4px;
  background: var(--secondary-bg);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.acc-chart-period-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.acc-chart-period-btn:hover {
  background: var(--card-bg);
  color: var(--text-primary);
}

.acc-chart-period-btn.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.acc-monthly-toggle {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.acc-monthly-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--card-bg);
  transition: all 0.15s ease;
}

.acc-monthly-toggle-chip:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.acc-monthly-toggle-chip .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ── Tahsilat Oranı Modern Container ─────────────────────────────── */
.acc-collection-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.acc-collection-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #22c55e, #3b82f6);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.acc-collection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.acc-collection-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.acc-collection-header h4 svg {
  color: #22c55e;
}

.acc-collection-period {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--secondary-bg);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.acc-donut-wrap {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.acc-collection-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.acc-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--secondary-bg);
  font-size: 12px;
  transition: all 0.15s ease;
}

.acc-legend-item:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--secondary-bg));
}

.acc-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.acc-legend-item.collected .acc-legend-dot {
  background: linear-gradient(135deg, #22c55e, #4ade80);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.acc-legend-item.pending .acc-legend-dot {
  background: linear-gradient(135deg, #fb923c, #fdba74);
  box-shadow: 0 0 8px rgba(251, 146, 60, 0.4);
}

.acc-legend-label {
  flex: 1;
  color: var(--text-secondary);
  font-weight: 500;
}

.acc-legend-value {
  color: var(--text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════
   Bütçe Belirle Modal (uygulama içi)
   ════════════════════════════════════════════════════════════════════════ */
.budget-modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 2px;
}

.budget-modal-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px 14px 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 8%, var(--card-bg)),
      color-mix(in srgb, var(--accent) 18%, var(--card-bg)));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.budget-modal-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent);
}

.budget-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.budget-modal-sub {
  font-size: 12px;
  color: var(--text-secondary);
  max-width: 320px;
  line-height: 1.5;
}

.budget-modal-warn {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 14%, var(--card-bg));
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  padding: 6px 12px;
  border-radius: 8px;
  max-width: 320px;
}

.budget-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.budget-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.budget-modal-field>label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.budget-modal-field>label svg {
  color: var(--accent);
}

.budget-modal-field>small {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.budget-modal-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.budget-modal-currency {
  position: absolute;
  left: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  pointer-events: none;
}

.budget-modal-input-wrap input {
  width: 100%;
  padding: 12px 14px 12px 32px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: all 0.15s ease;
}

.budget-modal-input-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.budget-modal-slider-wrap {
  display: grid;
  grid-template-columns: 1fr 80px auto;
  gap: 8px;
  align-items: center;
}

.budget-modal-slider-wrap input[type="range"] {
  width: 100%;
  height: 6px;
  background: linear-gradient(to right,
      var(--success-color) 0%,
      #f59e0b 70%,
      var(--danger-color) 100%);
  border-radius: 3px;
  appearance: none;
  outline: none;
  cursor: pointer;
}

.budget-modal-slider-wrap input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 2.5px solid var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.budget-modal-slider-wrap input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 2.5px solid var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.budget-modal-slider-wrap input[type="number"] {
  padding: 8px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.budget-modal-slider-wrap input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
}

.budget-modal-threshold-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
}

.budget-modal-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  align-items: center;
}

.budget-modal-preset-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right: 4px;
}

.budget-preset-btn {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-secondary);
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.budget-preset-btn:hover {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.budget-preset-btn:active {
  transform: translateY(0);
}

/* ── Modal butonları polish ───────────────────────────────────────── */
#budgetEditModal .modal-footer button {
  transition: all 0.18s ease;
}

#budgetEditModal .modal-footer .btn-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--success-color)));
  border: none;
}

#budgetEditModal .modal-footer .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

#budgetEditModal .modal-footer .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Grid layout (chart row → 2 col: donut + recent vs) ─────────── */
.acc-dash-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 1100px) {
  .acc-dash-charts {
    grid-template-columns: 1fr;
  }
}

/* ── Gecikmiş / Yaklaşan taksit: daha kompakt liste ──────────────── */
.acc-overdue-item .acc-overdue-days-badge {
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════
   Sprint Faz 9 v4 — Alacaklar/Verecekler sekmesi modern polish
   (özet bar, source filtre, drill-down panel, satır polish)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Özet Bar (5 KPI: alacak, verecek, net, gecikmiş, kaynak dağılımı) ── */
.receivables-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, 1.2fr);
  gap: 10px;
  margin-bottom: 16px;
}

.receivables-summary-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  position: relative;
  overflow: hidden;
}

.receivables-summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.receivables-summary-card.income::before {
  background: linear-gradient(90deg, #4caf50, #22c55e);
}

.receivables-summary-card.expense::before {
  background: linear-gradient(90deg, #f44336, #ef4444);
}

.receivables-summary-card.net::before {
  background: linear-gradient(90deg, #2c3e8c, #8b5cf6);
}

.receivables-summary-card.overdue::before {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.receivables-summary-card.sources::before {
  background: linear-gradient(90deg, #06b6d4, #3b82f6);
}

.rsc-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.rsc-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.receivables-summary-card.income .rsc-value {
  color: #22c55e;
}

.receivables-summary-card.expense .rsc-value {
  color: #ef4444;
}

.receivables-summary-card.overdue .rsc-value {
  color: #f59e0b;
}

.rsc-sources {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.rsc-source {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--secondary-bg);
}

.rsc-source strong {
  color: var(--text-primary);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* ── Filtre butonları (active state) ─────────────────────────────── */
.filter-select.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent);
  transform: translateY(-1px);
}

/* ── Accounting sekmeleri: panel display !important ile override edilemez ── */
.accounting-tab-panel {
  display: none !important;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}

.accounting-tab-panel.active {
  display: block !important;
}

/* Savunma katmani: parent panel .active olmadiginda icindeki #paymentsList,
   #expensesList, #invoicesList ve #contractsList gibi liste konteynerleri de
   explicit olarak gizlenir. Bu, gelecekte inline style veya baska bir CSS
   kuralinin parent gizlemesini atlatma riskine karsi ek bir guvenlik katmanidir. */
.accounting-tab-panel:not(.active) #paymentsList,
.accounting-tab-panel:not(.active) #expensesList,
.accounting-tab-panel:not(.active) #invoicesList,
.accounting-tab-panel:not(.active) #contractsList {
  display: none !important;
}

.receivables-table {
  font-size: 12.5px;
  border-collapse: separate;
  border-spacing: 0;
}

.receivables-table thead th {
  background: var(--secondary-bg);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 12px 10px;
  border-bottom: 2px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1;
}

.receivable-row {
  transition: background 0.15s ease, transform 0.15s ease;
}

.receivable-row>td {
  padding: 12px 10px;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

.receivable-row:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.receivable-row:hover .receivable-action-btn.primary {
  transform: translateX(0);
}

.receivable-row.drillable {
  cursor: pointer;
}

.receivable-row.income {
  border-left: 3px solid transparent;
}

.receivable-row.income:hover {
  border-left-color: #22c55e;
}

.receivable-row.expense {
  border-left: 3px solid transparent;
}

.receivable-row.expense:hover {
  border-left-color: #ef4444;
}

/* ── Checkbox cell (görsel iyileştirme) ─────────────────────────── */
.receivable-checkbox-cell {
  width: 36px;
  text-align: center;
}

.receivable-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.receivable-checkbox-wrap:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.receivable-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ── Counterparty cell (avatar + ad) ───────────────────────────── */
.receivable-counterparty {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 240px;
}

.receivable-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  letter-spacing: 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.receivable-avatar.avatar-blue {
  background: linear-gradient(135deg, #3b82f6, #2c3e8c);
}

.receivable-avatar.avatar-green {
  background: linear-gradient(135deg, #22c55e, #10b981);
}

.receivable-avatar.avatar-orange {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.receivable-avatar.avatar-purple {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.receivable-avatar.avatar-pink {
  background: linear-gradient(135deg, #ec4899, #db2777);
}

.receivable-avatar.avatar-neutral {
  background: linear-gradient(135deg, #94a3b8, #64748b);
}

.receivable-counterparty-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.receivable-student-name {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  font-size: 13px;
}

.receivable-student-name.receivable-empty {
  color: var(--text-tertiary);
  font-weight: 500;
  font-style: italic;
}

.receivable-empty-hint {
  font-size: 10px;
  color: var(--text-tertiary);
  font-style: italic;
}

.receivable-contract-no {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
  background: var(--secondary-bg);
  padding: 1px 6px;
  border-radius: 4px;
  align-self: flex-start;
}

/* ── Type badge (Alacak/Verecek) ────────────────────────────────── */
.receivable-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.receivable-type-badge.income {
  background: color-mix(in srgb, #22c55e 14%, transparent);
  color: #15803d;
  border-color: color-mix(in srgb, #22c55e 28%, transparent);
}

.receivable-type-badge.expense {
  background: color-mix(in srgb, #ef4444 14%, transparent);
  color: #b91c1c;
  border-color: color-mix(in srgb, #ef4444 28%, transparent);
}

.receivable-type-icon {
  font-size: 12px;
}

/* ── Category cell (source badge + label) ─────────────────────── */
.receivable-category {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.acc-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.acc-source-badge svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.acc-source-badge.src-tx {
  background: color-mix(in srgb, #06b6d4 14%, transparent);
  color: #06b6d4;
}

.acc-source-badge.src-contract {
  background: color-mix(in srgb, #8b5cf6 14%, transparent);
  color: #8b5cf6;
}

.acc-source-badge.src-free {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #d97706;
}

.receivable-cat-label {
  font-size: 11.5px;
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Amount cell ─────────────────────────────────────────────── */
.receivable-amount-cell {
  min-width: 110px;
}

.receivable-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.receivable-amount-value {
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

.receivable-amount-value.positive {
  color: #22c55e;
}

.receivable-amount-value.negative {
  color: #ef4444;
}

.receivable-total {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── Due cell (gün badge + tarih) ────────────────────────────────── */
.receivable-due {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.receivable-days-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.receivable-days-badge.normal {
  background: var(--secondary-bg);
  color: var(--text-secondary);
}

.receivable-days-badge.warning {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #b45309;
  border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
}

.receivable-days-badge.danger {
  background: color-mix(in srgb, #ef4444 14%, transparent);
  color: #ef4444;
  border: 1px solid color-mix(in srgb, #ef4444 28%, transparent);
}

.receivable-date {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ── Description cell ─────────────────────────────────────────── */
.receivable-desc-cell {
  min-width: 160px;
  max-width: 240px;
}

.receivable-desc-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.receivable-desc {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  line-height: 1.4;
}

.receivable-desc.receivable-empty {
  color: var(--text-tertiary);
  font-style: italic;
  font-weight: 400;
}

.receivable-receipt-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--secondary-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

/* ── Action buttons (komapkt, 2 buton yan yana) ─────────────────── */
.receivable-actions-cell {
  width: 1%;
  white-space: nowrap;
}

.receivable-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.receivable-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.receivable-action-btn.primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--success-color)));
  color: white;
  border: none;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.receivable-action-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}

.receivable-action-btn.primary:active {
  transform: translateY(0);
}

.receivable-action-btn.ghost {
  background: var(--secondary-bg);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.receivable-action-btn.ghost:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--secondary-bg));
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Boş durum (empty state) ──────────────────────────────────── */
.receivable-empty-row td {
  padding: 40px 16px !important;
  text-align: center;
  color: var(--text-tertiary);
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .receivable-row {
    transition: none;
  }

  .receivable-action-btn {
    transition: none;
  }
}

.receivable-amount.expense strong {
  color: #ef4444;
}

.receivable-total {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.receivable-due {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}

.receivable-days-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.receivable-days-badge.normal {
  background: var(--secondary-bg);
  color: var(--text-secondary);
}

.receivable-days-badge.warning {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #b45309;
  border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
}

.receivable-days-badge.danger {
  background: color-mix(in srgb, #ef4444 14%, transparent);
  color: #ef4444;
  border: 1px solid color-mix(in srgb, #ef4444 28%, transparent);
}

.receivable-date {
  font-size: 10px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.receivable-desc-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 240px;
}

.receivable-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receivable-receipt {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, monospace;
}

.receivable-actions {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}

/* ── Drill-down Modal ─────────────────────────────────────────────── */
.drilldown-detail {
  font-size: 13px;
}

.drilldown-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 14px;
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}

.drilldown-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.drilldown-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.drilldown-stat strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.drilldown-stat strong.success {
  color: #22c55e;
}

.drilldown-stat strong.danger {
  color: #ef4444;
}

.drilldown-stat strong.muted {
  color: var(--text-tertiary);
}

.drilldown-progress {
  width: 100%;
  height: 6px;
  background: var(--border-color, #e2e8f0);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}

.drilldown-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #0ea5e9), #22c55e);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.drilldown-section {
  margin-bottom: 14px;
}

.drilldown-section h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary, #475569);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.drilldown-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 16px;
  padding: 12px 14px;
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
}

.drilldown-meta-grid>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.drilldown-meta-grid>div>span {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.drilldown-meta-grid>div>strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.drilldown-notes {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  font-size: 12px;
  color: var(--text-secondary);
}

.drilldown-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.drilldown-status-badge.drilldown-status-active {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.drilldown-status-badge.drilldown-status-completed {
  background: rgba(99, 102, 241, 0.15);
  color: #4f46e5;
}

.drilldown-status-badge.drilldown-status-cancelled {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}

.drilldown-method-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drilldown-method-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary);
}

.drilldown-footer {
  gap: 8px;
}

.drilldown-content {
  max-height: 90vh;
}

.drilldown-overdue-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
  color: #ef4444;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
}

.drilldown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.drilldown-table thead th {
  background: var(--secondary-bg);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.drilldown-table thead th:nth-child(n+3) {
  text-align: right;
}

.drilldown-row td {
  padding: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
  font-variant-numeric: tabular-nums;
}

.drilldown-row td:nth-child(n+3) {
  text-align: right;
}

.drilldown-row.drilldown-paid td {
  color: var(--text-tertiary);
}

.drilldown-row.drilldown-overdue {
  background: color-mix(in srgb, #ef4444 6%, transparent);
}

.drilldown-row.drilldown-overdue td {
  color: var(--text-primary);
  font-weight: 600;
}

.drilldown-row:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* ── Empty state polish ─────────────────────────────────────────── */
#receivablesEmpty {
  font-size: 14px !important;
}

#receivablesEmpty>div {
  font-size: 56px !important;
  margin-bottom: 12px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .receivables-summary-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .receivables-summary-bar {
    grid-template-columns: 1fr;
  }

  .receivable-actions {
    flex-direction: column;
  }

  .receivable-counterparty strong {
    max-width: 140px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Sprint Faz 9 v5 — Ledger Drawer (yan panel)
   Ödeme takvimi / gelir-gider item tıklama → sağdan açılan detaylı panel
   ════════════════════════════════════════════════════════════════════════ */

.ledger-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.ledger-drawer.active {
  pointer-events: auto;
}

.ledger-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ledger-drawer.active .ledger-drawer-backdrop {
  opacity: 1;
}

.ledger-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: 480px;
  max-width: 100vw;
  background: var(--card-bg);
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ledger-drawer.active .ledger-drawer-panel {
  transform: translateX(0);
}

.ledger-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color);
  background: var(--secondary-bg);
}

.ledger-drawer-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.ledger-drawer-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger-drawer-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  align-self: flex-start;
}

.ledger-drawer-type-tag.transaction {
  background: color-mix(in srgb, #06b6d4 16%, transparent);
  color: #06b6d4;
}

.ledger-drawer-type-tag.installment {
  background: color-mix(in srgb, #8b5cf6 16%, transparent);
  color: #8b5cf6;
}

.ledger-drawer-type-tag.free_payment {
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #d97706;
}

.ledger-drawer-type-tag.expense {
  background: color-mix(in srgb, #ef4444 16%, transparent);
  color: #ef4444;
}

.ledger-drawer-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  color: var(--text-tertiary);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.ledger-drawer-close:hover {
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
  color: var(--danger-color);
}

.ledger-drawer-amount {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  background: linear-gradient(180deg, var(--secondary-bg), var(--card-bg));
  border-bottom: 1px solid var(--border-color);
}

.ledger-drawer-amount small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0;
}

.ledger-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.ledger-drawer-body::-webkit-scrollbar {
  width: 5px;
}

.ledger-drawer-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.ledger-drawer-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--border-color);
  background: var(--secondary-bg);
}

/* Drawer içerik bölümleri */
.drawer-section {
  margin-bottom: 16px;
}

.drawer-section:last-child {
  margin-bottom: 0;
}

.drawer-section h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.drawer-meta {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: 6px 12px;
  background: var(--secondary-bg);
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.drawer-meta dt {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.drawer-meta dd {
  margin: 0;
  font-size: 13px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.drawer-meta dd code {
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  background: var(--card-bg);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.drawer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Drawer taksit tablosu */
.drawer-inst-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.drawer-inst-table thead th {
  background: var(--secondary-bg);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.drawer-inst-table thead th:nth-child(n+3) {
  text-align: right;
}

.drawer-inst-table thead th:last-child {
  text-align: center;
}

.drawer-inst-row td {
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
  font-variant-numeric: tabular-nums;
}

.drawer-inst-row td:nth-child(n+3) {
  text-align: right;
}

.drawer-inst-row td:last-child {
  text-align: center;
  font-size: 14px;
}

.drawer-inst-row:last-child td {
  border-bottom: none;
}

.drawer-inst-row.paid td {
  color: var(--text-tertiary);
}

.drawer-inst-row.overdue td {
  color: var(--danger-color);
  font-weight: 600;
}

.drawer-inst-row.current {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.drawer-inst-row.current td:first-child {
  border-left: 3px solid var(--accent);
  padding-left: 5px;
}

/* Takvim item'ları artık tıklanabilir (cursor) */
.acc-calendar-item {
  cursor: pointer;
  transition: background 0.12s ease;
}

.acc-calendar-item:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ── Drawer responsive ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .ledger-drawer-panel {
    width: 100vw;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ledger-drawer-panel {
    transition: none;
  }

  .ledger-drawer-backdrop {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Sprint Faz 9 v3 — Modern Kart Başlıkları (Yaklaşan Ödemeler,
   Ödeme Takvimi, Finansal Planlama) + Detay Polish
   ════════════════════════════════════════════════════════════════════════ */

/* ── Modern h4 wrapper (ikon rozeti + başlık + opsiyonel badge) ──── */
.acc-card-header-modern {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}

.acc-card-header-modern h4 {
  margin: 0;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.acc-card-header-modern h4 svg {
  display: none;
  /* artık icon rozet kullanılıyor */
}

.acc-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.18s ease;
}

.acc-card-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: inherit;
  opacity: 0.6;
  filter: blur(6px);
  z-index: -1;
}

.acc-card-icon svg {
  display: block !important;
  position: relative;
  z-index: 1;
}

.acc-card-icon--blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(99, 102, 241, 0.18));
  color: #3b82f6;
}

.acc-card-icon--purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(168, 85, 247, 0.18));
  color: #8b5cf6;
}

.acc-card-icon--green {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(16, 185, 129, 0.18));
  color: #22c55e;
}

.acc-card-icon--orange {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(245, 158, 11, 0.18));
  color: #fb923c;
}

.acc-card-icon--red {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(220, 38, 38, 0.18));
  color: #ef4444;
}

.acc-card-period {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--secondary-bg);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ── Yaklaşan Ödemeler (90 gün) ───────────────────────────────────── */
.acc-upcoming-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.acc-upcoming-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #2c3e8c);
}

.acc-upcoming-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.acc-upcoming-summary {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.acc-upcoming-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--secondary-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.acc-upcoming-badge.urgent {
  color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
}

.acc-upcoming-badge.soon {
  color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border-color: color-mix(in srgb, #f59e0b 25%, transparent);
}

.acc-upcoming-badge.later {
  color: var(--text-secondary);
  background: var(--secondary-bg);
}

.acc-upcoming-badge.total {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.acc-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.acc-upcoming-list::-webkit-scrollbar {
  width: 4px;
}

.acc-upcoming-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

/* ── Ödeme Takvimi (modern toolbar + footer) ────────────────────── */

/* ── Ödeme Takvimi (modern toolbar + footer) ────────────────────── */
.acc-calendar-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.acc-calendar-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #a855f7);
}

.acc-calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}

.acc-calendar-nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--secondary-bg);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.acc-calendar-nav-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.acc-calendar-nav-btn:hover {
  background: var(--card-bg);
  color: var(--accent);
  transform: scale(1.05);
}

.acc-calendar-nav-btn:active {
  transform: scale(0.95);
}

.acc-calendar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 0 8px;
  min-width: 120px;
  text-align: center;
  text-transform: capitalize;
}

.acc-calendar-today-btn {
  padding: 6px 12px;
  border: none;
  background: var(--accent);
  color: white;
  border-radius: 7px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
  transition: all 0.15s ease;
}

.acc-calendar-today-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 85%, white);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 25%, transparent);
}

.acc-calendar-today-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.acc-calendar-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.acc-cal-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
}

.acc-cal-stat.paid {
  color: #22c55e;
  background: color-mix(in srgb, #22c55e 10%, transparent);
  border-color: color-mix(in srgb, #22c55e 25%, transparent);
}

.acc-cal-stat.pending {
  color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  border-color: color-mix(in srgb, #f59e0b 25%, transparent);
}

.acc-cal-stat.overdue {
  color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
}

.acc-day-amt {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

.acc-day-amt.inc {
  color: #22c55e;
}

.acc-day-amt.exp {
  color: #ef4444;
}

.acc-calendar-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.acc-cal-footer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 14px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  color: inherit;
}

.acc-cal-footer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.acc-cal-footer-card.income:hover {
  border-color: #22c55e;
  background: color-mix(in srgb, #22c55e 8%, var(--secondary-bg));
}

.acc-cal-footer-card.expense:hover {
  border-color: #ef4444;
  background: color-mix(in srgb, #ef4444 8%, var(--secondary-bg));
}

.acc-cal-footer-icon {
  font-size: 16px;
  font-weight: 800;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card-bg);
  margin-bottom: 4px;
}

.acc-cal-footer-card.income .acc-cal-footer-icon {
  color: #22c55e;
}

.acc-cal-footer-card.expense .acc-cal-footer-icon {
  color: #ef4444;
}

.acc-cal-footer-card.net.positive .acc-cal-footer-icon {
  color: #22c55e;
  background: color-mix(in srgb, #22c55e 14%, var(--card-bg));
}

.acc-cal-footer-card.net.negative .acc-cal-footer-icon {
  color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 14%, var(--card-bg));
}

.acc-cal-footer-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.acc-cal-footer-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.acc-calendar-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  font-size: 11px;
  color: var(--text-tertiary);
}

.acc-cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.acc-cal-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

/* ── Finansal Planlama (modern kart grid + bar chart) ──────────── */
.acc-planning-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.acc-planning-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #22c55e, #10b981);
}

.acc-planning-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}

.acc-planning-trend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  border: 1.5px solid transparent;
}

.acc-planning-trend.positive {
  color: #22c55e;
  background: color-mix(in srgb, #22c55e 10%, var(--card-bg));
  border-color: color-mix(in srgb, #22c55e 25%, transparent);
}

.acc-planning-trend.negative {
  color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 10%, var(--card-bg));
  border-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
}

.acc-planning-trend.neutral {
  color: var(--text-tertiary);
  background: var(--secondary-bg);
}

.acc-planning-trend-icon {
  font-size: 18px;
}

.acc-planning-trend-label {
  font-size: 11px;
  color: inherit;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.acc-planning-trend-value {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.acc-planning-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.acc-planning-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--secondary-bg);
  border-radius: 8px;
  font-size: 11px;
  border: 1px solid var(--border-color);
}

.acc-planning-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.acc-planning-stat-dot.inc {
  background: #22c55e;
}

.acc-planning-stat-dot.exp {
  background: #ef4444;
}

.acc-planning-stat-label {
  color: var(--text-tertiary);
  font-weight: 500;
}

.acc-planning-stat-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.acc-planning-stat-value.inc {
  color: #22c55e;
}

.acc-planning-stat-value.exp {
  color: #ef4444;
}

.acc-planning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.acc-planning-month {
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  transition: all 0.15s ease;
  position: relative;
}

.acc-planning-month:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 10%, transparent);
}

.acc-planning-month.current {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--secondary-bg));
}

.acc-planning-month.current::before {
  content: "Şu an";
  position: absolute;
  top: -7px;
  left: 10px;
  font-size: 9px;
  font-weight: 700;
  color: white;
  background: var(--accent);
  padding: 1px 6px;
  border-radius: 6px;
  letter-spacing: 0.4px;
}

.acc-planning-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 6px;
}

.acc-planning-month-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: capitalize;
}

.acc-planning-month-net {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.acc-planning-month-net.positive {
  color: #22c55e;
  background: color-mix(in srgb, #22c55e 12%, transparent);
}

.acc-planning-month-net.negative {
  color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
}

.acc-planning-month-net.neutral {
  color: var(--text-tertiary);
  background: var(--secondary-bg);
}

.acc-planning-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acc-planning-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 6px;
  align-items: center;
}

.acc-planning-row-icon {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.acc-planning-row-icon.inc {
  color: #22c55e;
}

.acc-planning-row-icon.exp {
  color: #ef4444;
}

.acc-planning-bar-wrap {
  height: 8px;
  background: var(--card-bg);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.acc-planning-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.acc-planning-bar.inc {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.acc-planning-bar.exp {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.acc-planning-row-amount {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 70px;
  text-align: right;
}

.acc-planning-footer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.acc-planning-average {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.acc-planning-average-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.acc-planning-average-row {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.acc-planning-average-row.inc {
  color: #22c55e;
}

.acc-planning-average-row.exp {
  color: #ef4444;
}

.acc-planning-average-row.net {
  color: var(--accent);
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-color);
}

.acc-planning-alerts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acc-planning-alert {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}

.acc-planning-alert.warning {
  background: color-mix(in srgb, #f59e0b 10%, var(--card-bg));
  color: #b45309;
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}

.acc-planning-alert.success {
  background: color-mix(in srgb, #22c55e 10%, var(--card-bg));
  color: #15803d;
  border-color: color-mix(in srgb, #22c55e 30%, transparent);
}

.acc-planning-alert.info {
  background: color-mix(in srgb, var(--accent) 10%, var(--card-bg));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════
   Alacaklar/Verecekler Modern Toolbar (Segmented + Chip + Search)
   ════════════════════════════════════════════════════════════════════════ */

.receivables-toolbar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.receivables-toolbar-row.secondary {
  background: var(--secondary-bg);
  padding: 10px 14px;
}

.rtoolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rtoolbar-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.rtoolbar-spacer {
  flex: 1;
  min-width: 0;
}

/* ── Segmented control (Alacak / Verecek / Tümü) ──────────────── */
.acc-segmented {
  display: inline-flex;
  background: var(--secondary-bg);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  gap: 2px;
}

.acc-segment-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.acc-segment-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
}

.acc-segment-btn.active {
  background: var(--card-bg);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
  font-weight: 700;
}

.acc-segment-icon {
  font-size: 13px;
  font-weight: 400;
}

.acc-segment-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.acc-segment-btn:not(.active) .acc-segment-count {
  background: var(--secondary-bg);
  color: var(--text-tertiary);
}

/* ── Chip group (Kaynak) ──────────────────────────────────────── */
.acc-chip-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.acc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  border: 1px solid var(--border-color);
  background: var(--secondary-bg);
  color: var(--text-secondary);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.acc-chip:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--secondary-bg));
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.acc-chip.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 25%, transparent);
}

.acc-chip.active:hover {
  background: color-mix(in srgb, var(--accent) 90%, white);
}

/* ── Primary action (Toplu Tahsil Et) ─────────────────────────── */
.acc-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--success-color)));
  color: white;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: all 0.15s ease;
}

.acc-primary-action:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}

.acc-primary-action:active:not(:disabled) {
  transform: translateY(0);
}

.acc-primary-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.acc-action-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── Search box ───────────────────────────────────────────────── */
.rtoolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 220px;
}

.rtoolbar-search svg {
  position: absolute;
  left: 12px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.rtoolbar-search input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
  transition: all 0.15s ease;
}

.rtoolbar-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

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

/* ── Date range ──────────────────────────────────────────────── */
.rtoolbar-date {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.rtoolbar-date label {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 4px 10px 4px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.rtoolbar-date label>span {
  white-space: nowrap;
}

.rtoolbar-date input[type="date"] {
  padding: 4px 6px;
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--text-primary);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.rtoolbar-date input[type="date"]:focus {
  outline: none;
}

.rtoolbar-date-sep {
  color: var(--text-tertiary);
  font-weight: 600;
}

/* ── Icon buttons (Yenile / Excel / PDF) ─────────────────────── */
.rtoolbar-icon-actions {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.rtoolbar-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.rtoolbar-icon-btn:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  transform: translateY(-1px);
}

.rtoolbar-icon-btn:active {
  transform: translateY(0);
}

/* ── Empty state ─────────────────────────────────────────────── */
.receivables-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  margin-top: 16px;
}

.receivables-empty-icon {
  font-size: 64px;
  margin-bottom: 12px;
  animation: acc-empty-bounce 2s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, #22c55e 25%, transparent));
}

.receivables-empty-icon svg {
  display: block;
  stroke-width: 1.4;
}

@keyframes acc-empty-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.receivables-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.receivables-empty-hint {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ── Toolbar responsive ────────────────────────────────────── */
@media (max-width: 1100px) {
  .receivables-toolbar-row {
    flex-wrap: wrap;
  }

  .rtoolbar-search {
    flex-basis: 100%;
    order: 10;
  }

  .rtoolbar-date {
    flex: 1;
  }

  .rtoolbar-icon-actions {
    margin-left: auto;
  }

  .acc-primary-action {
    margin-left: auto;
  }
}

@media (max-width: 720px) {
  .rtoolbar-group {
    flex-basis: 100%;
  }

  .acc-segmented {
    width: 100%;
  }

  .acc-segment-btn {
    flex: 1;
    justify-content: center;
  }

  .acc-chip-group {
    width: 100%;
  }

  .acc-chip {
    flex: 1;
    justify-content: center;
  }

  .rtoolbar-search,
  .rtoolbar-date,
  .rtoolbar-icon-actions {
    width: 100%;
  }

  .rtoolbar-date label {
    flex: 1;
  }

  .receivables-empty-icon {
    font-size: 48px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Ödemeler sekmesi — payment source badge (Serbest / Taksit / İşlem)
   ════════════════════════════════════════════════════════════════════════ */

.pm-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pm-source-badge svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.pm-source-badge.pm-src-free {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #d97706;
  border-color: color-mix(in srgb, #f59e0b 28%, transparent);
}

.pm-source-badge.pm-src-installment {
  background: color-mix(in srgb, #8b5cf6 14%, transparent);
  color: #8b5cf6;
  border-color: color-mix(in srgb, #8b5cf6 28%, transparent);
}

.pm-source-badge.pm-src-tx {
  background: color-mix(in srgb, #06b6d4 14%, transparent);
  color: #06b6d4;
  border-color: color-mix(in srgb, #06b6d4 28%, transparent);
}

.pss-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pss-source-badge.pss-source-expense {
  background: color-mix(in srgb, #ef4444 14%, transparent);
  color: #ef4444;
  border-color: color-mix(in srgb, #ef4444 28%, transparent);
}

.pss-source-badge.pss-source-tx {
  background: color-mix(in srgb, #06b6d4 14%, transparent);
  color: #06b6d4;
  border-color: color-mix(in srgb, #06b6d4 28%, transparent);
}

.pss-source-badge.pss-source-free {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #d97706;
  border-color: color-mix(in srgb, #f59e0b 28%, transparent);
}

/* ── Ödemeler source stats (Serbest / Taksit / İşlem breakdown) ── */
.payments-source-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.pss-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--border-color);
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}

.pss-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.pss-card.pss-free {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, var(--card-bg) 0%, color-mix(in srgb, #f59e0b 4%, var(--card-bg)) 100%);
}

.pss-card.pss-installment {
  border-left-color: #8b5cf6;
  background: linear-gradient(135deg, var(--card-bg) 0%, color-mix(in srgb, #8b5cf6 4%, var(--card-bg)) 100%);
}

.pss-card.pss-tx {
  border-left-color: #06b6d4;
  background: linear-gradient(135deg, var(--card-bg) 0%, color-mix(in srgb, #06b6d4 4%, var(--card-bg)) 100%);
}

.pss-icon {
  font-size: 22px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  flex-shrink: 0;
  color: white;
}

.pss-icon svg {
  display: block;
}

.pss-card.pss-free .pss-icon {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.pss-card.pss-installment .pss-icon {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.pss-card.pss-tx .pss-icon {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.pss-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.pss-label {
  font-size: 10.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}

.pss-values {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.pss-values strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}

.pss-amount {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.pss-empty {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

@media (max-width: 720px) {
  .payments-source-stats {
    grid-template-columns: 1fr;
  }

  .pss-card {
    padding: 12px 14px;
  }
}

/* Ödemeler list item — student name vurgusu */
#paymentsList .payment-list-item-name strong {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
}

/* ── Faturalar (Invoices) — modern liste görünümü ── */
#invoicesList.contracts-list-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--card-bg) 92%, var(--accent) 8%),
      var(--card-bg));
}

.invoice-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg);
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}

.invoice-row::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--accent);
}

.invoice-row:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border-color));
  background: color-mix(in srgb, var(--hover-bg) 60%, var(--card-bg));
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.invoice-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}

.invoice-row-icon svg {
  width: 20px;
  height: 20px;
}

.invoice-row-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.invoice-row-title {
  color: var(--text-primary);
  font-size: 14.5px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.invoice-row-invoice-no {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: color-mix(in srgb, var(--secondary-bg) 72%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}

.invoice-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

.invoice-row-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--secondary-bg) 72%, transparent);
  border-radius: 999px;
  font-size: 11.5px;
}

.invoice-row-meta-chip.overdue {
  background: color-mix(in srgb, #ef4444 14%, transparent);
  color: #dc2626;
  font-weight: 600;
}

.invoice-row-meta-chip svg {
  width: 13px;
  height: 13px;
}

.invoice-row-amount {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.invoice-row-amount.paid {
  color: var(--success-color);
  background: color-mix(in srgb, var(--success-color) 12%, transparent);
}

.invoice-row-amount.overdue {
  color: var(--danger-color);
  background: color-mix(in srgb, var(--danger-color) 14%, transparent);
}

.invoice-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.invoice-status-badge.draft {
  background: color-mix(in srgb, #6b7280 14%, transparent);
  color: #4b5563;
  border: 1px solid color-mix(in srgb, #6b7280 24%, transparent);
}

.invoice-status-badge.sent {
  background: color-mix(in srgb, #3b82f6 14%, transparent);
  color: #1d4ed8;
  border: 1px solid color-mix(in srgb, #3b82f6 24%, transparent);
}

.invoice-status-badge.paid {
  background: color-mix(in srgb, #10b981 14%, transparent);
  color: #047857;
  border: 1px solid color-mix(in srgb, #10b981 24%, transparent);
}

.invoice-status-badge.overdue {
  background: color-mix(in srgb, #ef4444 14%, transparent);
  color: #b91c1c;
  border: 1px solid color-mix(in srgb, #ef4444 24%, transparent);
}

/* ── Kasa Defteri (Ledger) — modern data table ── */
.ledger-table-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ledger-table thead {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--secondary-bg) 60%, var(--card-bg)),
      var(--secondary-bg));
}

.ledger-table th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.ledger-table td {
  padding: 11px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
  vertical-align: middle;
}

.ledger-table tbody tr {
  transition: background 0.12s ease;
  cursor: pointer;
}

.ledger-table tbody tr:hover {
  background: color-mix(in srgb, var(--hover-bg) 50%, var(--card-bg));
}

.ledger-table tbody tr:last-child td {
  border-bottom: none;
}

.ledger-cell-date {
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

.ledger-cell-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.ledger-cell-type.income {
  background: color-mix(in srgb, var(--success-color) 14%, transparent);
  color: var(--success-color);
  border: 1px solid color-mix(in srgb, var(--success-color) 26%, transparent);
}

.ledger-cell-type.expense {
  background: color-mix(in srgb, var(--danger-color) 14%, transparent);
  color: var(--danger-color);
  border: 1px solid color-mix(in srgb, var(--danger-color) 26%, transparent);
}

.ledger-cell-type.pending {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #b45309;
  border: 1px solid color-mix(in srgb, #f59e0b 26%, transparent);
}

.ledger-cell-type.overdue {
  background: color-mix(in srgb, #ef4444 14%, transparent);
  color: #b91c1c;
  border: 1px solid color-mix(in srgb, #ef4444 26%, transparent);
}

.ledger-cell-category {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--secondary-bg) 60%, transparent);
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.ledger-cell-desc {
  color: var(--text-primary);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.ledger-cell-amount {
  text-align: right;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ledger-cell-amount.income {
  color: var(--success-color);
}

.ledger-cell-amount.expense {
  color: var(--danger-color);
}

.ledger-cell-amount.pending {
  color: #b45309;
}

.ledger-cell-balance {
  text-align: right;
  font-weight: 700;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--secondary-bg) 30%, transparent);
}

.ledger-cell-balance.negative {
  color: var(--danger-color);
}

.ledger-table th.ledger-th-num,
.ledger-cell-num {
  text-align: right;
}

.ledger-overdue-tag {
  opacity: 0.7;
  font-size: 11px;
  margin-left: 4px;
}

.ledger-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-secondary);
}

.ledger-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.ledger-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.ledger-empty-hint {
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.ledger-empty-state {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-secondary);
}

/* Hızlı filtre butonları */
.ledger-quick-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ledger-quick-filter-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ledger-quick-filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ledger-quick-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ledger-type-filter {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.ledger-empty-row td {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-tertiary);
}

@media (max-width: 720px) {
  .invoice-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .invoice-row-amount,
  .invoice-row .invoice-status-badge {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .ledger-table {
    font-size: 12px;
  }

  .ledger-table th,
  .ledger-table td {
    padding: 9px 8px;
  }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .receivable-row {
    transition: none;
  }

  .receivable-action-btn {
    transition: none;
  }

  .receivables-empty-icon {
    animation: none;
  }

  .acc-chip,
  .acc-segment-btn,
  .rtoolbar-icon-btn,
  .acc-primary-action {
    transition: none;
  }
}

/* ── Öğretmen Yoklama (Kendi Ders Saatleri) ── */
.t-att-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13px;
}

.t-att-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}

.t-att-date input[type="date"] {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
}

.t-att-summary {
  display: inline-flex;
  gap: 14px;
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 12.5px;
}

.t-att-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.t-att-lesson {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.t-att-lesson[open] {
  border-color: var(--accent);
}

.t-att-lesson__header {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  background: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
}

.t-att-lesson__header::-webkit-details-marker {
  display: none;
}

.t-att-lesson__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13.5px;
}

.t-att-lesson__time {
  background: var(--card-bg);
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--border-color);
}

.t-att-lesson__class {
  flex: 1;
  font-weight: 600;
}

.t-att-lesson__count {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

.t-att-lesson__body {
  padding: 12px 16px;
}

.t-att-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.t-att-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.t-att-grid th,
.t-att-grid td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.t-att-grid th {
  background: var(--secondary-bg);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.t-att-grid tr:last-child td {
  border-bottom: none;
}

.t-att-grid td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
}

.t-att-actions {
  display: inline-flex;
  gap: 4px;
}

.t-att-status {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.15s ease;
  padding: 0;
  touch-action: manipulation;
}

.t-att-status:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.t-att-status.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.t-att-status--present.is-active {
  background: var(--success-color, #22c55e);
  border-color: var(--success-color, #22c55e);
}

.t-att-status--absent.is-active {
  background: var(--danger-color, #ef4444);
  border-color: var(--danger-color, #ef4444);
}

.t-att-status--late.is-active {
  background: #f59e0b;
  border-color: #f59e0b;
}

.t-att-status--excused.is-active {
  background: #2c3e8c;
  border-color: #2c3e8c;
}

.t-att-save-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.t-att-empty {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  padding: 24px 8px;
  margin: 0;
}


/* ────────────────────────────────────────────────────────────────────
 * Öğrenci Toplu İşlemler — Bulk Action Bar + Şifre Değiştirme Modalı
 * ──────────────────────────────────────────────────────────────────── */

/* Bulk action bar — öğrenci tablosunun üstünde, seçim olduğunda görünür */
.students-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: 13px;
}

.students-bulk-bar[hidden] {
  display: none;
}

.students-bulk-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-weight: 500;
}

.students-bulk-info strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.students-bulk-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Öğrenci tablosunda seçim checkbox kolonu */
#studentsList .student-bulk-cell {
  width: 40px;
  text-align: center;
  vertical-align: middle;
}

#studentsList .student-bulk-checkbox {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

#studentsList .students-table thead .student-bulk-th {
  width: 40px;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

#studentsList .student-list-row.is-bulk-selected {
  background: rgba(59, 130, 246, 0.06);
}

#studentsList .student-list-row.is-bulk-selected:hover {
  background: rgba(59, 130, 246, 0.12);
}

/* Toplu şifre modalı — özet banner */
.bulk-chg-pw-summary {
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--accent-subtle, rgba(44, 62, 140, 0.07));
  border: 1px solid var(--accent);
  border-radius: var(--radius-md, 8px);
  font-size: 13px;
  color: var(--text-primary);
}

.bulk-chg-pw-summary strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin-right: 4px;
}

.bulk-chg-pw-warning {
  padding: 14px 16px;
  margin-bottom: 18px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning-color, #f59e0b);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}

.bulk-chg-pw-warning strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--warning-color, #f59e0b);
  margin-right: 4px;
}

/* Şifre kaynağı radio pill */
.bulk-chg-pw-source {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--card-bg);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  user-select: none;
}

.radio-pill input[type="radio"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.radio-pill:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.radio-pill:has(input:checked) {
  background: var(--accent-subtle, rgba(59, 130, 246, 0.1));
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.bulk-chg-pw-source-label {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  display: block;
}

.bulk-chg-pw-source-help {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* Password input wrapper (göster/gizle + regenerate butonları için) */
.password-input-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  position: relative;
}

.password-input-wrap .form-input {
  flex: 1;
}

.password-input-wrap .pw-toggle {
  flex-shrink: 0;
  width: 38px;
  font-size: 16px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.password-input-wrap .pw-toggle:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
}

/* Şifre onay hata mesajı */
.bulk-chg-pw-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--danger-color);
}

.bulk-chg-pw-error[hidden] {
  display: none;
}

/* Onay modalı — şifre gösterimi + öğrenci listesi */
.bulk-chg-pw-confirm-display {
  display: block;
  padding: 10px 14px;
  background: var(--secondary-bg, #f1f5f9);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 6px);
  font-family: monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  word-break: break-all;
}

.bulk-chg-pw-students {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 6px);
  background: var(--card-bg);
  padding: 8px;
}

.bulk-chg-pw-students:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.bulk-chg-pw-student-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12.5px;
}

.bulk-chg-pw-student-row:last-child {
  border-bottom: none;
}

.bulk-chg-pw-student-name {
  font-weight: 600;
  color: var(--text-primary);
}

.bulk-chg-pw-student-num {
  font-family: monospace;
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.bulk-chg-pw-student-overflow {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
  border-top: 1px dashed var(--border-color);
}

/* Mobil için bulk action bar'ı stack et */
@media (max-width: 640px) {
  .students-bulk-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .students-bulk-buttons {
    justify-content: stretch;
  }

  .students-bulk-buttons .btn {
    flex: 1;
  }

  .bulk-chg-pw-source {
    flex-direction: column;
  }

  .radio-pill {
    width: 100%;
    justify-content: center;
  }
}

/* Dark theme ayarları */
[data-theme="dark"] .students-bulk-bar {
  background: rgba(59, 130, 246, 0.12);
}

[data-theme="dark"] .bulk-chg-pw-confirm-display {
  background: var(--secondary-bg);
  color: var(--accent);
}

[data-theme="dark"] .bulk-chg-pw-student-row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ────────────────────────────────────────────────────────────────────
 * Inline icon — buton/dropdown/menu öğelerinin içinde küçük SVG ikonlar.
 * Renk geçişi yok (stroke="currentColor"), temadan otomatik alır.
 * ──────────────────────────────────────────────────────────────────── */
.app-inline-icon {
  display: inline-block;
  vertical-align: -2px;
  flex-shrink: 0;
  stroke: currentColor;
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-menu a .app-inline-icon {
  color: var(--accent);
}

.dropdown-menu a.bulk-action-danger .app-inline-icon {
  color: var(--danger-color, #ef4444);
}

.dropdown-menu a:hover .app-inline-icon {
  opacity: 0.85;
}

/* Toplu İşlem — Yeni (sınıf/not/performans/arşiv/sil) ortak stilleri */
.bulk-action-summary {
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--accent-subtle, rgba(44, 62, 140, 0.07));
  border: 1px solid var(--accent);
  border-radius: var(--radius-md, 8px);
  font-size: 13px;
  color: var(--text-primary);
}

.bulk-action-summary strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin-right: 4px;
}

.bulk-action-warning {
  padding: 14px 16px;
  margin-bottom: 18px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning-color, #f59e0b);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}

.bulk-action-danger-block {
  padding: 14px 16px;
  margin-bottom: 18px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--danger-color, #ef4444);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}

.bulk-action-danger-block strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--danger-color, #ef4444);
}

.bulk-action-source {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.bulk-action-source-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
}

.bulk-action-help {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--card-bg);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
}

.checkbox-pill input {
  margin: 0;
  cursor: pointer;
}

.bulk-action-students {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  padding: 8px 10px;
  background: var(--bg-secondary, #f8fafc);
}

.bulk-action-students:focus {
  outline: 2px solid var(--accent);
}

.bulk-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 13px;
}

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

.bulk-confirm-name {
  font-weight: 600;
  color: var(--text-primary);
}

.bulk-confirm-num {
  font-family: monospace;
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.bulk-confirm-overflow {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
  border-top: 1px dashed var(--border-color);
}

.bulk-action-confirm-summary {
  padding: 12px 14px;
  margin-bottom: 14px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md, 8px);
  font-size: 13px;
  color: var(--text-primary);
}

.bulk-action-confirm-details {
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  font-size: 12.5px;
  color: var(--text-secondary);
}

.bulk-action-confirm-details strong {
  color: var(--text-primary);
}

#bulkPerfSettingsLegend {
  margin-top: 12px;
}


/* ────────────────────────────────────────────────────────────────────
 * Öğrenci Dışa Aktar — Alan Seçim Modali
 * ──────────────────────────────────────────────────────────────────── */

/* Sıfırlama: showDynamicModal'in ürettiği modal-body içeriğini sarmalar */
.export-field-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.export-field-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--accent-subtle, rgba(44, 62, 140, 0.07));
  border: 1px solid var(--accent);
  border-radius: var(--radius-md, 8px);
  font-size: 13px;
}

.export-field-summary strong {
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
}

.export-field-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.export-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  background: var(--card-bg);
}

.export-field-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.export-field-row:hover {
  background: var(--secondary-bg, #f1f5f9);
}

.export-field-row.is-checked {
  background: var(--accent-subtle, rgba(59, 130, 246, 0.1));
  border-color: var(--accent);
}

.export-field-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

.export-field-label {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.export-field-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--text-tertiary);
  background: var(--secondary-bg, #f1f5f9);
  padding: 2px 6px;
  border-radius: 4px;
}

.export-field-row.is-checked .export-field-key {
  background: var(--card-bg);
  color: var(--accent);
}

.export-field-bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 6px 0;
  border-top: 1px dashed var(--border-color);
}

.export-field-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 0 0;
  margin-top: 12px;
  border-top: 1px solid var(--border-color);
}

.export-field-footer .btn {
  min-width: 130px;
}

/* Dark theme */
[data-theme="dark"] .export-field-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .export-field-row.is-checked {
  background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .export-field-key {
  background: rgba(255, 255, 255, 0.06);
}

/* Mobil: tek kolon */
@media (max-width: 540px) {
  .export-field-grid {
    grid-template-columns: 1fr;
  }

  .export-field-footer {
    flex-wrap: wrap;
  }

  .export-field-footer .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
}

/* ��� Dashboard Finans Layout Modal ��� */
.dl-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dl-intro {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  padding: 12px 14px;
  background: var(--secondary-bg);
  border-radius: 8px;
}

.dl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}

.dl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: border-color 0.15s ease;
}

.dl-row:hover {
  border-color: var(--accent);
}

.dl-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.dl-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text-primary);
  margin: 0;
}

.dl-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.dl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
}

.dl-label {
  font-weight: 500;
}

.dl-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.dl-actions .btn {
  min-width: 32px;
  padding: 4px 8px;
}

.dl-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

/* Sözleşmeler sekmesi — toplu seçim ve toolbar */
.contracts-select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.contracts-select-all-label:hover {
  background: var(--hover-bg);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
}

.contracts-select-all-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}

.contracts-selected-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

#exportAllContractsPdfBtn[disabled],
#exportAllContractsExcelBtn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/**
 * styles/_questionSolution.css
 *
 * Çözüm Saati (Soru Çözümü Randevu) Modülü — Glassmorphism Tasarım Sistemi
 *
 * 3 portal tarafından paylaşılır: kurum, öğretmen, öğrenci.
 * Tüm renk/efekt değerleri styles/_variables.css'deki
 * --glass-* ve --qs-status-* token'larından gelir.
 */

/* ─── Module entry ─────────────────────────────────────────────── */
.qs-module {
  font-family: var(--font);
}

/* ─── Section header ──────────────────────────────────────────── */
.qs-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.qs-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qs-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-subtle), transparent);
  color: var(--accent);
  flex-shrink: 0;
  box-shadow: var(--glass-shadow-inset);
}

.qs-section-title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.qs-section-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 72ch;
}

/* ─── Tab bar (animated underline) ─────────────────────────────── */
.qs-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-color);
  box-shadow: var(--glass-shadow-inset);
  position: relative;
  overflow-x: auto;
  scrollbar-width: thin;
}

.qs-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.qs-tab-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.qs-tab-btn.active {
  background: var(--card-bg);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.qs-tab-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.qs-tab-pane {
  display: block;
  animation: qs-fade-in 0.25s ease;
}

.qs-tab-pane[hidden] {
  display: none !important;
}

@keyframes qs-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── KPI Cards (glass + trend delta) ──────────────────────────── */
.qs-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0 0 22px;
  padding: 0;
}

.qs-kpi-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 18px 22px;
  min-height: 140px;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.qs-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.qs-kpi-stripe {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
}

.qs-kpi-blue   .qs-kpi-stripe { background: linear-gradient(180deg, var(--qs-kpi-blue-1),   var(--qs-kpi-blue-2)); }
.qs-kpi-green  .qs-kpi-stripe { background: linear-gradient(180deg, var(--qs-kpi-green-1),  var(--qs-kpi-green-2)); }
.qs-kpi-purple .qs-kpi-stripe { background: linear-gradient(180deg, var(--qs-kpi-purple-1), var(--qs-kpi-purple-2)); }
.qs-kpi-orange .qs-kpi-stripe { background: linear-gradient(180deg, var(--qs-kpi-orange-1), var(--qs-kpi-orange-2)); }

.qs-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-subtle);
  color: var(--accent);
  margin-bottom: 4px;
  transition: transform 0.2s ease;
}

.qs-kpi-card:hover .qs-kpi-icon {
  transform: scale(1.05);
}

.qs-kpi-blue   .qs-kpi-icon { background: rgba(59, 130, 246, 0.12);  color: var(--qs-kpi-blue-1); }
.qs-kpi-green  .qs-kpi-icon { background: rgba(16, 185, 129, 0.12);  color: var(--qs-kpi-green-1); }
.qs-kpi-purple .qs-kpi-icon { background: rgba(139, 92, 246, 0.12);  color: var(--qs-kpi-purple-1); }
.qs-kpi-orange .qs-kpi-icon { background: rgba(245, 158, 11, 0.12);  color: var(--qs-kpi-orange-1); }

[data-theme='dark'] .qs-kpi-blue   .qs-kpi-icon { background: rgba(59, 130, 246, 0.20);  color: #93c5fd; }
[data-theme='dark'] .qs-kpi-green  .qs-kpi-icon { background: rgba(16, 185, 129, 0.20);  color: #6ee7b7; }
[data-theme='dark'] .qs-kpi-purple .qs-kpi-icon { background: rgba(139, 92, 246, 0.20);  color: #c4b5fd; }
[data-theme='dark'] .qs-kpi-orange .qs-kpi-icon { background: rgba(245, 158, 11, 0.20);  color: #fdba74; }

.qs-kpi-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-primary);
  word-break: break-word;
}

.qs-kpi-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
  margin-top: auto;
}

.qs-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  align-self: flex-start;
}

.qs-kpi-delta-up      { background: rgba(16, 185, 129, 0.14); color: #047857; }
.qs-kpi-delta-down    { background: rgba(239, 68, 68, 0.14);  color: #b91c1c; }
.qs-kpi-delta-neutral { background: rgba(148, 163, 184, 0.18); color: var(--text-secondary); }

[data-theme='dark'] .qs-kpi-delta-up      { background: rgba(34, 197, 94, 0.18);  color: #4ade80; }
[data-theme='dark'] .qs-kpi-delta-down    { background: rgba(239, 68, 68, 0.18);  color: #f87171; }
[data-theme='dark'] .qs-kpi-delta-neutral { background: rgba(148, 163, 184, 0.20); color: #cbd5e1; }


/* ─── Range banner ────────────────────────────────────────────── */
.qs-range-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.qs-range-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-subtle);
  color: var(--accent);
  flex-shrink: 0;
}

.qs-range-icon svg { width: 16px; height: 16px; }

/* ─── Filter toolbar (modern) ──────────────────────────────────── */
.qs-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-color);
  box-shadow: var(--glass-shadow-inset);
}

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

.qs-filter-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.qs-select,
.qs-input,
.qs-textarea {
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.qs-select:focus,
.qs-input:focus,
.qs-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.qs-textarea {
  resize: vertical;
  min-height: 70px;
}

.qs-textarea-large {
  min-height: 100px;
}

/* ─── Quick filter chips (FAZ 5.1) ─────────────────────────────── */
.qs-quick-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}

.qs-quick-chip {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  backdrop-filter: blur(var(--glass-blur));
}

.qs-quick-chip:hover { background: var(--hover-bg); }

.qs-quick-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px var(--accent-subtle);
}

/* ─── Empty states (modern illustrations) ─────────────────────── */
.qs-empty {
  padding: 40px 20px;
  text-align: center;
  border-radius: 16px;
  background: var(--glass-bg);
  border: 1px dashed var(--glass-border-strong);
  color: var(--text-secondary);
  backdrop-filter: blur(var(--glass-blur));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
}

.qs-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent-subtle), transparent);
  color: var(--accent);
  margin-bottom: 14px;
}

.qs-empty p {
  margin: 6px 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.qs-empty small {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}

.qs-empty .btn {
  margin-top: 8px;
}

.qs-empty-sm {
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* ─── Appointment list ─────────────────────────────────────────── */
.qs-appt-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qs-accordion {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: var(--glass-shadow-inset);
}

.qs-accordion > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  padding: 6px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.qs-accordion > summary::-webkit-details-marker { display: none; }

.qs-accordion > summary::after {
  content: '+';
  margin-left: auto;
  font-size: 18px;
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
}

.qs-accordion[open] > summary::after { content: '−'; }

/* ─── Appointment card (glass) ────────────────────────────────── */
.qs-appt-card {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border-left-width: 3px;
}

.qs-appt-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow);
}

.qs-appt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.qs-appt-date {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.qs-appt-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.qs-appt-teacher,
.qs-appt-student {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.qs-appt-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.qs-appt-time svg { flex-shrink: 0; }

.qs-appt-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}

.qs-appt-meta strong {
  font-weight: 700;
  color: var(--text-secondary);
}

.qs-appt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ─── Status modifier classes (left border + bg tint) ─────────── */
.qs-appt-scheduled { border-left-color: var(--qs-status-scheduled); background: linear-gradient(180deg, var(--qs-status-scheduled-bg), var(--glass-bg-heavy)); }
.qs-appt-completed { border-left-color: var(--qs-status-completed); background: linear-gradient(180deg, var(--qs-status-completed-bg), var(--glass-bg-heavy)); }
.qs-appt-no-show   { border-left-color: var(--qs-status-no-show);   background: linear-gradient(180deg, var(--qs-status-no-show-bg), var(--glass-bg-heavy)); }
.qs-appt-cancelled { border-left-color: var(--qs-status-cancelled); background: linear-gradient(180deg, var(--qs-status-cancelled-bg), var(--glass-bg-heavy)); opacity: 0.78; }

/* Status chips — explicit modifier classes (FAZ 1.4) */
.qs-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  background: var(--qs-status-scheduled);
  text-transform: capitalize;
}

.qs-status-chip.qs-status-scheduled { background: var(--qs-status-scheduled); }
.qs-status-chip.qs-status-completed { background: var(--qs-status-completed); }
.qs-status-chip.qs-status-no-show   { background: var(--qs-status-no-show); }
.qs-status-chip.qs-status-cancelled { background: var(--qs-status-cancelled); }
.qs-status-chip.qs-status-present   { background: var(--qs-attendance-present); }
.qs-status-chip.qs-status-absent    { background: var(--qs-attendance-absent); }

.qs-status-chip svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.qs-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ─── Week grid (student booking) ──────────────────────────────── */
.qs-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 24px;
  min-height: 200px;
}

.qs-day-column {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.qs-day-column:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color));
  box-shadow: var(--shadow-md);
}

.qs-day-header {
  padding: 10px 8px;
  text-align: center;
  background: linear-gradient(180deg, var(--accent-subtle), transparent);
  border-bottom: 1px solid var(--glass-border);
}

.qs-day-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.qs-day-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.qs-day-slots {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100px;
}

.qs-day-empty {
  padding: 14px 8px;
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

.qs-slot-card {
  position: relative;
  width: 100%;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--text-primary);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}

.qs-slot-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.qs-slot-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 12%, transparent);
}

.qs-slot-card:hover::before { transform: scaleY(1); }

.qs-slot-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
}

.qs-slot-time svg { width: 14px; height: 14px; flex-shrink: 0; }

.qs-slot-teacher {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}

.qs-slot-branch {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}

.qs-slot-cta {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
  margin-top: 3px;
}

.qs-slot-cta svg {
  transition: transform 0.2s ease;
}

.qs-slot-card:hover .qs-slot-cta svg {
  transform: translateX(2px);
}

/* ─── Availability grid (teacher) ──────────────────────────────── */
.qs-teacher-avail-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.qs-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.qs-toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--glass-border-strong);
}

.qs-toolbar-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 600;
}

.qs-preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.qs-preset-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.qs-preset-btn svg { width: 12px; height: 12px; flex-shrink: 0; }

.qs-preset-available { border-left: 3px solid var(--success-color); }
.qs-preset-break     { border-left: 3px solid #eab308; }

.qs-avail-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-color);
  font-size: 12px;
}

.qs-legend-item { display: inline-flex; align-items: center; gap: 5px; }

.qs-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.qs-legend-dot-available   { background: var(--success-color); }
.qs-legend-dot-break       { background: #eab308; }
.qs-legend-dot-unavailable { background: var(--danger-color); }

.qs-legend-hint {
  margin-left: auto;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.qs-avail-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  min-height: 240px;
}

.qs-avail-day {
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 6px;
}

.qs-avail-day-label {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--glass-border);
}

.qs-avail-cells {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.qs-avail-cell {
  height: 18px;
  border-radius: 4px;
  background: var(--card-bg);
  border: 1px solid transparent;
  font-size: 9px;
  text-align: center;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qs-avail-cell:hover { transform: scale(1.05); border-color: var(--accent); }

.qs-avail-available {
  background: linear-gradient(135deg, color-mix(in srgb, var(--success-color) 18%, transparent), color-mix(in srgb, var(--success-color) 6%, transparent));
  color: var(--success-color);
  font-weight: 700;
}

.qs-avail-break {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.18), rgba(234, 179, 8, 0.06));
  color: #92400e;
  font-weight: 700;
}

.qs-avail-unavailable {
  background: linear-gradient(135deg, color-mix(in srgb, var(--danger-color) 18%, transparent), color-mix(in srgb, var(--danger-color) 6%, transparent));
  color: var(--danger-color);
  font-weight: 700;
}

.qs-avail-empty {
  background: transparent;
  border: 1px dashed var(--glass-border);
  color: var(--text-tertiary);
}

.qs-avail-hour { font-size: 9px; opacity: 0.7; }

/* ─── Booking summary block (modal) ────────────────────────────── */
.qs-booking-summary {
  padding: 14px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(var(--glass-blur));
}

.qs-booking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.qs-booking-icon {
  width: 24px;
  display: inline-flex;
  justify-content: center;
  color: var(--accent);
}

.qs-booking-value { font-weight: 700; color: var(--text-primary); }

.qs-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.qs-checkbox-row input { width: 16px; height: 16px; accent-color: var(--accent); }

.qs-error {
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--danger-bg);
  color: var(--danger-color);
  font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--danger-color) 25%, transparent);
  margin-bottom: 12px;
}

/* ─── Attendance buttons ───────────────────────────────────────── */
.qs-attendance-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.qs-att-status-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.qs-att-status-btn:hover { transform: translateY(-1px); }

.qs-att-status-btn[data-status="present"] {
  border-color: var(--success-color);
  color: var(--success-color);
}

.qs-att-status-btn[data-status="present"].active {
  background: var(--success-color);
  color: #fff;
  border-color: var(--success-color);
  transform: scale(1.02);
}

.qs-att-status-btn[data-status="absent"] {
  border-color: var(--danger-color);
  color: var(--danger-color);
}

.qs-att-status-btn[data-status="absent"].active {
  background: var(--danger-color);
  color: #fff;
  border-color: var(--danger-color);
  transform: scale(1.02);
}

.qs-att-status-btn svg { flex-shrink: 0; }

/* ─── Skeleton loader ─────────────────────────────────────────── */
.qs-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  border-radius: 8px;
  min-height: 14px;
}

.qs-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 8%, transparent),
    transparent
  );
  animation: qs-shimmer 1.5s infinite;
}

@keyframes qs-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ─── Bar chart (branch distribution) ─────────────────────────── */
.qs-bar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qs-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 90px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.qs-bar-label { font-weight: 600; color: var(--text-primary); }
.qs-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}

.qs-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--qs-kpi-blue-1), var(--qs-kpi-purple-2));
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.qs-bar-value {
  text-align: right;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11px;
}

.qs-meta-line {
  margin: 10px 0 8px;
  padding-bottom: 8px;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  border-bottom: 1px dashed var(--glass-border);
}

/* ─── Table (reports) ─────────────────────────────────────────── */
.qs-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg);
}

.qs-table thead {
  background: var(--accent-subtle);
}

.qs-table th,
.qs-table td {
  padding: 8px 12px;
  text-align: left;
  font-size: 12px;
  border-bottom: 1px solid var(--glass-border);
}

.qs-table th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  color: var(--text-tertiary);
}

.qs-table tbody tr:hover { background: var(--accent-subtle); }

.qs-table tbody tr:last-child td { border-bottom: none; }

/* ─── Heatmap ─────────────────────────────────────────────────── */
.qs-heatmap {
  display: grid;
  grid-template-columns: 48px repeat(24, 1fr);
  gap: 3px;
  font-size: 10px;
}

.qs-heatmap-corner { background: transparent; }

.qs-heatmap-col-label,
.qs-heatmap-row-label {
  text-align: center;
  color: var(--text-tertiary);
  font-weight: 600;
  font-size: 10px;
  padding: 2px 0;
}

.qs-heatmap-row-label {
  text-align: right;
  padding-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.qs-heatmap-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  text-align: center;
  line-height: 1;
  color: var(--text-secondary);
  transition: transform 0.12s ease;
}

.qs-heatmap-cell:hover {
  transform: scale(1.18);
  z-index: 1;
  box-shadow: var(--shadow-sm);
}

/* ─── Report block container ──────────────────────────────────── */
.qs-report-block {
  margin-bottom: 18px;
  padding: 16px;
  border-radius: 14px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(var(--glass-blur));
}

.qs-report-block h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ─── Date range picker ───────────────────────────────────────── */
.qs-date-range {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
}

.qs-date-range label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* ─── Calendar view (FAZ 5.2) ──────────────────────────────────── */
.qs-cal-view {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background: var(--card-bg);
  border-radius: 14px;
  padding: 8px;
  border: 1px solid var(--border-color);
}

.qs-cal-header-cell,
.qs-cal-cell {
  padding: 6px;
  text-align: center;
  font-size: 11px;
  border-radius: 6px;
}

.qs-cal-header-cell {
  background: var(--accent-subtle);
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.qs-cal-cell {
  background: var(--surface);
  min-height: 64px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qs-cal-cell-other { opacity: 0.4; }
.qs-cal-cell-today { box-shadow: inset 0 0 0 2px var(--accent); }

.qs-cal-cell-num {
  font-weight: 700;
  font-size: 11px;
  color: var(--text-secondary);
}

.qs-cal-cell-pill {
  padding: 2px 6px;
  background: var(--qs-status-scheduled-bg);
  color: var(--qs-status-scheduled);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .qs-week-grid,
  .qs-avail-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .qs-heatmap {
    grid-template-columns: 32px repeat(24, 1fr);
    font-size: 8px;
  }
}

@media (max-width: 640px) {
  .qs-kpi-row { grid-template-columns: 1fr; }
  .qs-week-grid,
  .qs-avail-grid,
  .qs-cal-view {
    grid-template-columns: 1fr;
  }

  .qs-filters { flex-direction: column; align-items: stretch; }
  .qs-quick-chips { margin-right: 0; }
}

/* ─── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .qs-skeleton::after { animation: none; }
  .qs-tab-pane { animation: none; }
  .qs-kpi-card, .qs-slot-card, .qs-day-column, .qs-appt-card { transition: none; }
}

/* ─── Print ───────────────────────────────────────────────────── */
@media print {
  .qs-glass-card,
  .qs-glass-panel {
    background: #fff !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  .qs-filters,
  .qs-tabs,
  .qs-tab-btn,
  .qs-appt-actions,
  .qs-report-toolbar,
  .qs-heatmap-controls,
  .qs-active-filters,
  .qs-pagination-controls,
  .qs-table-toolbar {
    display: none !important;
  }
}

/* ─── Reports tablo toolbar & actions ────────────────────────── */
.qs-report-root { display: block; }

.qs-report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-color);
  box-shadow: var(--glass-shadow-inset);
}

.qs-report-toolbar > .qs-filter-group { margin: 0; }
.qs-report-toolbar > .qs-filter-group label { margin-bottom: 4px; }

.qs-report-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

.qs-report-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9px;
}

.qs-report-actions .btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.qs-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--accent-subtle);
  border: 1px dashed var(--border-color);
}

.qs-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.qs-active-chip:hover { background: var(--hover-bg); border-color: var(--accent); }

.qs-active-chip strong { color: var(--accent); }

.qs-active-chip-icon { display: inline-flex; align-items: center; }
.qs-active-chip-x { color: var(--text-tertiary); font-weight: 700; margin-left: 2px; }

.qs-report-root > .qs-section-title {
  margin-top: 18px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
}

.qs-skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qs-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-radius: 8px;
}

.qs-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-100%);
  animation: qs-shimmer 1.5s infinite;
}

.qs-skeleton-bar { height: 18px; width: 100%; }
.qs-skeleton-row { height: 28px; width: 100%; }
.qs-skeleton-heatmap { height: 220px; width: 100%; border-radius: 12px; }

.qs-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.qs-table-search {
  width: 100%;
  max-width: 240px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: inherit;
}

.qs-table-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.qs-sortable-th {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.qs-sortable-th:hover { background: var(--hover-bg); }

.qs-sortable-th-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.qs-sortable-th-arrow {
  font-size: 9px;
  color: var(--accent);
  font-weight: 700;
  width: 10px;
  display: inline-block;
}

.qs-sortable-th[aria-sort="ascending"] .qs-sortable-th-arrow,
.qs-sortable-th[aria-sort="descending"] .qs-sortable-th-arrow { color: var(--accent); }

.qs-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 4px;
  font-size: 11px;
  color: var(--text-secondary);
}

.qs-pagination-info { font-weight: 600; }

.qs-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qs-page-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.qs-page-btn:hover:not(:disabled) { background: var(--hover-bg); }
.qs-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.qs-pagination-current {
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.qs-clickable-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.qs-clickable-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.qs-table-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
}

.qs-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.qs-pill-green { background: rgba(16, 185, 129, 0.15); color: #047857; }
.qs-pill-yellow { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.qs-pill-red { background: rgba(239, 68, 68, 0.15); color: #b91c1c; }

[data-theme='dark'] .qs-pill-green { color: #6ee7b7; }
[data-theme='dark'] .qs-pill-yellow { color: #fbbf24; }
[data-theme='dark'] .qs-pill-red { color: #fca5a5; }

.qs-bar-row { cursor: pointer; transition: background 0.12s ease; }
.qs-bar-row:hover { background: var(--hover-bg); border-radius: 8px; }
.qs-bar-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qs-bar-row.is-active { background: var(--accent-subtle); border-radius: 8px; }

.qs-bar-pct { color: var(--text-tertiary); font-size: 11px; }

.qs-heatmap-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border-color);
}

.qs-heatmap-control-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.qs-meta-inline {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
}

.qs-heatmap-color-btn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid var(--border-color);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.qs-heatmap-color-btn:hover { transform: scale(1.1); }
.qs-heatmap-color-btn.active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--accent-subtle); }
.qs-heatmap-color-blue { background: linear-gradient(135deg, #93c5fd, #3b82f6); }
.qs-heatmap-color-green { background: linear-gradient(135deg, #86efac, #10b981); }
.qs-heatmap-color-purple { background: linear-gradient(135deg, #c4b5fd, #8b5cf6); }
.qs-heatmap-color-orange { background: linear-gradient(135deg, #fdba74, #f59e0b); }
.qs-heatmap-color-red { background: linear-gradient(135deg, #fca5a5, #ef4444); }
.qs-heatmap-color-teal { background: linear-gradient(135deg, #5eead4, #14b8a6); }

.qs-heatmap-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qs-heatmap-zoom input[type="range"] {
  width: 80px;
  accent-color: var(--accent);
}

.qs-zoom-label {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  min-width: 30px;
}

.qs-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 0;
  font-size: 11px;
  color: var(--text-secondary);
}

.qs-heatmap-legend-grad {
  flex: 1;
  max-width: 200px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.95));
}

.qs-heatmap-peak {
  margin-left: auto;
  border: 0;
}

.qs-heatmap-tops {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-subtle);
  border: 1px solid var(--border-color);
}

.qs-heatmap-tops-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.qs-heatmap-tops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.qs-top-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  text-align: left;
}

.qs-top-slot:hover { background: var(--hover-bg); transform: translateY(-1px); }
.qs-top-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.qs-top-slot-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.qs-top-slot-day { flex: 1; }
.qs-top-slot-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
}

.qs-heatmap-cell { cursor: pointer; }
.qs-heatmap-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 640px) {
  .qs-report-toolbar { flex-direction: column; align-items: stretch; }
  .qs-report-actions { margin-left: 0; justify-content: stretch; }
  .qs-report-actions .btn { flex: 1; justify-content: center; }
  .qs-heatmap-controls { flex-direction: column; align-items: stretch; }
  .qs-heatmap-zoom { justify-content: space-between; }
  .qs-pagination-controls { gap: 4px; }
}

/* ==========================================================================
   Exam Results Group & Table Modern Styling
   ========================================================================== */

.exam-results-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.exam-results-group {
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border-color, #c8b393);
  background: var(--card-bg, #f3ede4);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(44, 40, 36, 0.08));
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.exam-results-group:hover {
  box-shadow: var(--shadow-md, 0 4px 6px rgba(44, 40, 36, 0.06));
  border-color: var(--border-strong, #b59a7a);
}

.exam-results-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface, #efe7dc);
  border-bottom: 1px solid var(--border-color, #c8b393);
  cursor: pointer;
  user-select: none;
  gap: 12px;
  flex-wrap: wrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

[data-theme='dark'] .exam-results-group-header {
  background: var(--surface, #0f1a2e);
  border-bottom-color: var(--border-color, #1f2a44);
}

.exam-results-group-header:hover {
  background: var(--hover-bg, #e3d4c1);
}

[data-theme='dark'] .exam-results-group-header:hover {
  background: var(--hover-bg, #1a2a40);
}

.exam-results-group-header.is-collapsed {
  border-bottom: none;
}

.exam-results-group-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.exam-results-group-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-secondary, #5a4f42) 12%, transparent);
  color: var(--text-primary, #2c2520);
  font-size: 11px;
  transition: transform 0.2s ease;
}

.exam-results-group-header.is-collapsed .exam-results-group-toggle-icon {
  transform: rotate(-90deg);
}

.exam-results-group-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary, #2c2520);
  letter-spacing: -0.01em;
}

.exam-results-group-type-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--accent-light, #e9edf5);
  color: var(--accent, #2c3e8c);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.exam-results-group-date {
  font-size: 12px;
  color: var(--text-secondary, #5a4f42);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.exam-results-group-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.exam-results-group-stat {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 16px;
  background: var(--card-bg, #f3ede4);
  border: 1px solid var(--border-color, #c8b393);
  color: var(--text-secondary, #5a4f42);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.exam-results-group-stat strong {
  color: var(--text-primary, #2c2520);
}

.exam-results-group-stat--hi {
  border-color: color-mix(in srgb, var(--success-color, #2c6e2c) 40%, transparent);
  background: var(--success-bg, #eef5e8);
}
.exam-results-group-stat--hi strong {
  color: var(--success-color, #2c6e2c);
}

.exam-results-group-stat--lo {
  border-color: color-mix(in srgb, var(--danger-color, #b13b3b) 30%, transparent);
  background: var(--danger-bg, #fcebea);
}
.exam-results-group-stat--lo strong {
  color: var(--danger-color, #b13b3b);
}

.exam-results-group-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.exam-results-group-body {
  padding: 0;
  transition: all 0.25s ease;
  width: 100%;
}

.exam-results-group-body.is-collapsed {
  display: none;
}

/* ==========================================================================
   Exam Results Toolbar Modern Styling
   ========================================================================== */

.exam-results-group-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface, #efe7dc);
  border-bottom: 1px solid var(--border-color, #c8b393);
  gap: 12px;
  flex-wrap: wrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}

[data-theme='dark'] .exam-results-group-toolbar {
  background: var(--surface, #0f1a2e);
  border-bottom-color: var(--border-color, #1f2a44);
}

.exam-results-search-wrap {
  position: relative;
  min-width: 220px;
  max-width: 320px;
  flex: 1 1 240px;
  display: flex;
  align-items: center;
}

.exam-results-search-input {
  width: 100%;
  height: 38px;
  padding: 8px 12px 8px 34px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-color, #c8b393);
  background: var(--card-bg, #f3ede4);
  color: var(--text-primary, #2c2520);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(44, 40, 36, 0.04));
  transition: all 0.2s ease;
}

.exam-results-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle, rgba(44, 62, 140, 0.12));
  background: var(--card-bg);
}

.exam-results-search-input::placeholder {
  color: var(--text-tertiary, #8a7c6a);
  font-size: 12px;
}

.exam-results-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary, #8a7c6a);
  pointer-events: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.exam-results-search-wrap:focus-within .exam-results-search-icon {
  color: var(--accent);
  transform: translateY(-50%) scale(1.05);
}

.exam-results-toolbar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.exam-results-toolbar-info .info-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--card-bg, #f3ede4);
  border: 1px solid var(--border-color, #c8b393);
  border-radius: var(--radius-md, 10px);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #5a4f42);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(44, 40, 36, 0.04));
  transition: all 0.18s ease;
  user-select: none;
}

.exam-results-toolbar-info .info-item svg {
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.85;
}

.exam-results-toolbar-info .info-item:hover {
  background: var(--hover-bg, #e3d4c1);
  border-color: var(--border-strong, #b59a7a);
  color: var(--text-primary, #2c2520);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(44, 40, 36, 0.06));
}

.exam-results-toolbar-info .info-item strong {
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  margin-left: 2px;
}

/* ==========================================================================
   Exam Results Responsive Table Wrap & Table Styling
   ========================================================================== */

.exam-results-table-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  background: var(--card-bg, #f3ede4);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong, #b59a7a) var(--surface, #efe7dc);
}

.exam-results-table-wrap::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.exam-results-table-wrap::-webkit-scrollbar-track {
  background: var(--surface, #efe7dc);
}

.exam-results-table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-strong, #b59a7a);
  border-radius: 4px;
}

.exam-results-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary, #8a7c6a);
}

[data-theme='dark'] .exam-results-table-wrap::-webkit-scrollbar-track {
  background: var(--surface, #0f1a2e);
}

[data-theme='dark'] .exam-results-table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-strong, #2d4068);
}

.exam-results-table {
  width: 100%;
  min-width: 680px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.exam-results-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface, #efe7dc);
}

.exam-results-table th {
  padding: 6px 3px;
  font-weight: 600;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border-color, #c8b393);
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  color: var(--text-secondary, #5a4f42);
  background: var(--surface, #efe7dc);
}

.exam-results-table td {
  padding: 5px 3px;
  vertical-align: middle;
  font-size: 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color, #c8b393) 40%, transparent);
  text-align: center;
  color: var(--text-primary, #2c2520);
  background: transparent;
}

.exam-results-table tbody tr {
  transition: background 0.12s ease;
}

.exam-results-table tbody tr:hover {
  background: var(--hover-bg, #e3d4c1);
}

[data-theme='dark'] .exam-results-table tbody tr:hover {
  background: var(--hover-bg, #1a2a40);
}

/* Colgroup - Enforce Column Widths */
.exam-results-table .col-rank { width: 38px; min-width: 38px; }
.exam-results-table .col-no { width: 40px; min-width: 40px; }
.exam-results-table .col-name { width: 130px; min-width: 110px; max-width: 140px; }
.exam-results-table .col-class { width: 52px; min-width: 52px; }
.exam-results-table .col-correct { width: 32px; min-width: 32px; }
.exam-results-table .col-wrong { width: 32px; min-width: 32px; }
.exam-results-table .col-net { width: 40px; min-width: 40px; }
.exam-results-table .col-total-correct { width: 36px; min-width: 36px; }
.exam-results-table .col-total-wrong { width: 36px; min-width: 36px; }
.exam-results-table .col-total-blank { width: 36px; min-width: 36px; }
.exam-results-table .col-total-net { width: 50px; min-width: 50px; }
.exam-results-table .col-actions { width: 100px; min-width: 90px; }

/* Table Header Column Widths and Alignments */
.exam-results-table th.th-rank { width: 38px; min-width: 34px; text-align: center; }
.exam-results-table th.th-no { width: 40px; min-width: 36px; text-align: center; }
.exam-results-table th.th-name { min-width: 110px; max-width: 140px; text-align: left; padding-left: 8px; }
.exam-results-table th.th-class { width: 52px; min-width: 48px; text-align: center; }
.exam-results-table th.th-subj { font-weight: 700; font-size: 10.5px; text-align: center; border-left: 1px solid var(--border-color, #c8b393); border-right: 1px solid var(--border-color, #c8b393); }
.exam-results-table th.th-total { font-weight: 700; font-size: 10.5px; text-align: center; border-left: 2px solid var(--border-strong, #b59a7a); }
.exam-results-table th.th-actions { width: 100px; min-width: 90px; text-align: center; white-space: nowrap; border-left: 1px solid var(--border-color, #c8b393); }

/* Sub-headers */
.exam-results-table th.th-correct { color: var(--success-color, #2c6e2c); font-weight: 700; font-size: 9.5px; padding: 4px 2px; }
.exam-results-table th.th-wrong { color: var(--danger-color, #b13b3b); font-weight: 700; font-size: 9.5px; padding: 4px 2px; }
.exam-results-table th.th-net { font-weight: 800; font-size: 10px; color: var(--text-primary, #2c2520); padding: 4px 2px; }
.exam-results-table th.th-blank { color: var(--warning-color, #b1621a); font-weight: 700; font-size: 9.5px; padding: 4px 2px; }

/* Subject Tint Themes (Light) */
.subj-header-turkce { background: rgba(44, 62, 140, 0.08) !important; color: #2c3e8c !important; }
.subj-header-sosyal { background: rgba(177, 98, 26, 0.09) !important; color: #9a4e0f !important; }
.subj-header-matematik { background: rgba(44, 110, 44, 0.09) !important; color: #235c23 !important; }
.subj-header-fen { background: rgba(124, 58, 237, 0.09) !important; color: #6d28d9 !important; }
.subj-header-total { background: var(--accent-light, #e9edf5) !important; color: var(--accent, #2c3e8c) !important; }

/* Subject Tint Themes (Dark) */
[data-theme='dark'] .subj-header-turkce { background: rgba(110, 140, 200, 0.15) !important; color: #93c5fd !important; }
[data-theme='dark'] .subj-header-sosyal { background: rgba(255, 199, 116, 0.14) !important; color: #fcd34d !important; }
[data-theme='dark'] .subj-header-matematik { background: rgba(94, 209, 163, 0.14) !important; color: #6ee7b7 !important; }
[data-theme='dark'] .subj-header-fen { background: rgba(167, 139, 250, 0.15) !important; color: #c4b5fd !important; }
[data-theme='dark'] .subj-header-total { background: rgba(110, 140, 200, 0.22) !important; color: #e8eef7 !important; }

/* Table Data Cells */
.exam-results-table td.td-rank { text-align: center; }
.exam-results-table td.td-no { text-align: center; }
.exam-results-table td.td-name { text-align: left; padding-left: 8px; }
.exam-results-table td.td-class { text-align: center; }
.exam-results-table td.td-correct { color: var(--success-color, #2c6e2c); font-weight: 600; border-left: 1px solid var(--border-color, #c8b393); }
.exam-results-table td.td-wrong { color: var(--danger-color, #b13b3b); font-weight: 600; }
.exam-results-table td.td-net { font-weight: 700; color: var(--text-primary, #2c2520); border-right: 1px solid var(--border-color, #c8b393); }
.exam-results-table td.td-empty { color: var(--text-tertiary, #8a7c6a); font-size: 10px; border-left: 1px solid var(--border-color, #c8b393); }
.exam-results-table td.td-total-correct { color: var(--success-color, #2c6e2c); font-weight: 700; border-left: 2px solid var(--border-strong, #b59a7a); }
.exam-results-table td.td-total-wrong { color: var(--danger-color, #b13b3b); font-weight: 700; }
.exam-results-table td.td-total-blank { color: var(--warning-color, #b1621a); font-weight: 700; }
.exam-results-table td.td-total-net { font-weight: 700; }
.exam-results-table td.td-actions { text-align: center; border-left: 1px solid var(--border-color, #c8b393); white-space: nowrap; padding: 4px 6px; }

/* Student Cell */
.exam-student-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.exam-student-avatar {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover, #1e2f6b) 100%);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.exam-student-name {
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text-primary, #2c2520);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* Rank Badge */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--surface, #efe7dc);
  border: 1px solid var(--border-color, #c8b393);
  color: var(--text-secondary, #5a4f42);
}

.rank-badge.rank-1 {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: #b45309;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.3);
}

.rank-badge.rank-2 {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  border-color: #475569;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(100, 116, 139, 0.3);
}

.rank-badge.rank-3 {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  border-color: #78350f;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(180, 83, 9, 0.3);
}

/* No Badge */
.exam-results-no-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 3px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--surface, #efe7dc);
  color: var(--text-secondary, #5a4f42);
  border: 1px solid var(--border-color, #c8b393);
}

/* Class Badge */
.exam-results-class-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface, #efe7dc);
  color: var(--text-secondary, #5a4f42);
  border: 1px solid var(--border-color, #c8b393);
}

/* Total Net Pill */
.exam-total-net-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover, #1e2f6b) 100%);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(44, 62, 140, 0.25);
}

/* Actions Cell */
.exam-results-actions-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.exam-results-actions-cell .btn-small {
  padding: 3px 6px;
  font-size: 10.5px;
  height: 24px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Footer row */
.exam-results-table tfoot td {
  padding: 6px 3px;
  font-weight: 700;
  font-size: 10.5px;
  background: var(--surface, #efe7dc);
  border-top: 2px solid var(--border-strong, #b59a7a);
  border-bottom: 1px solid var(--border-color, #c8b393);
}

[data-theme='dark'] .exam-results-table tfoot td {
  background: var(--surface, #0f1a2e);
  border-top-color: var(--border-strong, #2d4068);
  border-bottom-color: var(--border-color, #1f2a44);
}

.exam-results-table tfoot td.tf-label {
  text-align: left;
  padding-left: 8px;
  font-weight: 700;
  color: var(--text-primary, #2c2520);
}

.exam-results-table tfoot td.tf-label-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

.exam-results-table tfoot td.tf-total-correct { color: var(--success-color, #2c6e2c); font-weight: 700; border-left: 2px solid var(--border-strong, #b59a7a); }
.exam-results-table tfoot td.tf-total-wrong { color: var(--danger-color, #b13b3b); font-weight: 700; }
.exam-results-table tfoot td.tf-total-blank { color: var(--warning-color, #b1621a); font-weight: 700; }
.exam-results-table tfoot td.tf-total-net { font-weight: 700; }
.exam-results-table tfoot td.tf-empty { color: var(--text-tertiary, #8a7c6a); border-left: 1px solid var(--border-color, #c8b393); }
.exam-results-table tfoot td.tf-actions { border-left: 1px solid var(--border-color, #c8b393); }

/* ==========================================================================
   Exam Results Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1024px) {
  .exam-results-group-toolbar {
    padding: 8px 12px;
    gap: 8px;
  }
  .exam-results-search-wrap {
    min-width: 180px;
    max-width: 260px;
  }
  .exam-results-toolbar-info .info-item {
    padding: 5px 9px;
    font-size: 11.5px;
  }
}

@media (max-width: 768px) {
  .exam-results-group-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    gap: 8px;
  }
  .exam-results-search-wrap {
    min-width: 100%;
    max-width: 100%;
  }
  .exam-results-toolbar-info {
    width: 100%;
    justify-content: space-between;
  }
  .exam-results-toolbar-info .info-item {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    padding: 6px 8px;
    font-size: 11px;
  }
  .exam-results-table-wrap {
    border-radius: 0 0 var(--radius-md, 10px) var(--radius-md, 10px);
  }
  .exam-student-name {
    max-width: 100px;
  }
}

@media (max-width: 480px) {
  .exam-results-toolbar-info {
    flex-direction: column;
    gap: 6px;
  }
  .exam-results-toolbar-info .info-item {
    width: 100%;
  }
  .exam-results-table {
    font-size: 10.5px;
  }
  .exam-results-table th,
  .exam-results-table td {
    padding: 4px 2px;
  }
}




/* === AI Rapor Yorumu Modal === */
.rpt-ai-modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: var(--font);
  position: relative;
  padding-top: 6px;
}

.rpt-ai-modal-accent {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c026d3 0%, #86198f 50%, #f472b6 100%);
  box-shadow: 0 2px 8px rgba(192, 38, 211, 0.25);
}

.rpt-ai-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.rpt-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #2c3e8c);
  background: var(--accent-subtle, rgba(44, 62, 140, 0.08));
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, #2c3e8c) 18%, transparent);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.rpt-ai-pill svg { flex-shrink: 0; opacity: 0.85; }

.rpt-ai-pill-provider {
  color: #86198f;
  background: rgba(192, 38, 211, 0.08);
  border-color: rgba(192, 38, 211, 0.22);
}

.rpt-ai-focus-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rpt-ai-focus-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.rpt-ai-focus-optional {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary, #8a7c6a);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rpt-ai-focus {
  width: 100%;
  min-height: 80px;
  padding: 12px 14px;
  padding-bottom: 24px;
  border: 1px solid var(--border-color, #c8b393);
  border-radius: var(--radius-md, 12px);
  background: var(--card-bg, #fff);
  color: var(--text-primary, #2c2520);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
}

.rpt-ai-focus:hover {
  border-color: var(--border-strong, #b59a7a);
}

.rpt-ai-focus:focus {
  outline: none;
  border-color: var(--accent, #2c3e8c);
  box-shadow: 0 0 0 3px var(--accent-subtle, rgba(44, 62, 140, 0.12));
}

.rpt-ai-focus::placeholder {
  color: var(--text-tertiary, #8a7c6a);
}

.rpt-ai-focus-count {
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-size: 10px;
  color: var(--text-tertiary, #8a7c6a);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.rpt-ai-focus-help {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary, #8a7c6a);
  line-height: 1.45;
  margin-top: 2px;
}

.rpt-ai-focus-help svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.85;
  color: var(--accent, #2c3e8c);
}

.rpt-ai-focus-help span {
  flex: 1;
}

.rpt-ai-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 160px;
  max-height: 64vh;
  overflow-y: auto;
  padding-right: 4px;
}

.rpt-ai-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: var(--card-bg, var(--bg-secondary, #fff));
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--border-color, #c8b393);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.04));
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Collapsible sections via <details> */
details.rpt-ai-section {
  padding: 0;
  overflow: hidden;
}

details.rpt-ai-section[open] {
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
}

details.rpt-ai-section > summary.rpt-ai-section-head {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  margin: 0;
  border-bottom: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.18s ease;
  user-select: none;
}

details.rpt-ai-section > summary.rpt-ai-section-head::-webkit-details-marker {
  display: none;
}

details.rpt-ai-section > summary.rpt-ai-section-head:hover {
  background: color-mix(in srgb, var(--accent, #2c3e8c) 4%, transparent);
}

details.rpt-ai-section[open] > summary.rpt-ai-section-head {
  border-bottom-color: var(--border-color, #c8b393);
}

.rpt-ai-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-subtle, rgba(44, 62, 140, 0.10));
  color: var(--accent, #2c3e8c);
  flex-shrink: 0;
}

.rpt-ai-section-icon svg {
  width: 16px;
  height: 16px;
}

.rpt-ai-chevron {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary, #8a7c6a);
  transition: transform 0.2s ease;
  margin-left: auto;
  flex-shrink: 0;
}

details.rpt-ai-section[open] > summary.rpt-ai-section-head .rpt-ai-chevron {
  transform: rotate(180deg);
}

.rpt-ai-section-body {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

details.rpt-ai-section .rpt-ai-section-body {
  animation: rpt-ai-section-fade 0.2s ease;
}

@keyframes rpt-ai-section-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.rpt-ai-section-yorum {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent, #2c3e8c) 3%, var(--card-bg, #fff)),
      var(--card-bg, #fff));
  border-color: color-mix(in srgb, var(--accent, #2c3e8c) 18%, var(--border-color, #c8b393));
}

.rpt-ai-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color, #c8b393);
  margin-bottom: 2px;
}

.rpt-ai-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #2c2520);
  letter-spacing: -0.2px;
}

.rpt-ai-section-title svg {
  color: var(--accent, #2c3e8c);
  flex-shrink: 0;
}

.rpt-ai-comment {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-primary, #2c2520);
  word-break: break-word;
  padding-right: 4px;
}

.rpt-ai-comment > * + * { margin-top: 12px; }
.rpt-ai-comment > :first-child { margin-top: 0; }
.rpt-ai-comment > :last-child { margin-bottom: 0; }

.rpt-ai-comment p {
  margin: 0;
  color: var(--text-primary, #2c2520);
}

.rpt-ai-comment p + p { margin-top: 10px; }

.rpt-ai-comment h2 {
  font-size: 0;
  font-weight: 700;
  color: transparent;
  margin: 0;
  padding: 0;
  border: 0;
  display: none;
}

.rpt-ai-comment > .rpt-ai-section > summary > h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #2c2520);
  margin: 0;
  letter-spacing: -0.1px;
  flex: 1;
}

.rpt-ai-comment h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, #2c3e8c);
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rpt-ai-comment strong {
  color: var(--accent, #2c3e8c);
  font-weight: 700;
}

.rpt-ai-comment em {
  color: var(--text-secondary, #5a4f42);
  font-style: italic;
}

.rpt-ai-comment ol,
.rpt-ai-comment ul {
  margin: 8px 0;
  padding-left: 24px;
  color: var(--text-primary, #2c2520);
}

.rpt-ai-comment li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.rpt-ai-comment ol > li::marker {
  color: var(--accent, #2c3e8c);
  font-weight: 700;
}

.rpt-ai-comment blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--accent, #2c3e8c);
  background: var(--accent-subtle, rgba(44, 62, 140, 0.05));
  color: var(--text-secondary, #5a4f42);
  font-style: italic;
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
}

.rpt-ai-comment code {
  background: var(--secondary-bg, #d9c8b3);
  color: var(--text-primary, #2c2520);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 13px;
}

.rpt-ai-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, #c026d3 30%, transparent);
  background: rgba(192, 38, 211, 0.08);
  color: #86198f;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.rpt-ai-copy:hover {
  background: rgba(192, 38, 211, 0.16);
  border-color: #c026d3;
  color: #581c87;
}

.rpt-ai-copy:active {
  transform: translateY(1px);
}

.rpt-ai-copy svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.rpt-ai-usage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-tertiary, #8a7c6a);
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  background: var(--bg-tertiary, #ebe2d2);
  border-radius: 999px;
  align-self: flex-start;
}

.rpt-ai-usage svg { flex-shrink: 0; opacity: 0.7; }

.rpt-ai-loading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 48px 24px;
  font-size: 14px;
  color: var(--text-secondary, #5a4f42);
  justify-content: center;
  font-weight: 500;
}

.rpt-ai-loading-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid var(--accent-subtle, rgba(44, 62, 140, 0.12));
  border-top-color: var(--accent, #2c3e8c);
  border-right-color: #c026d3;
  animation: rpt-ai-spin 1s linear infinite;
  flex-shrink: 0;
}

@keyframes rpt-ai-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rpt-ai-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
}

.rpt-ai-skel-line {
  height: 14px;
  background: linear-gradient(90deg,
    var(--secondary-bg, #d9c8b3) 0%,
    var(--card-bg, #fff) 50%,
    var(--secondary-bg, #d9c8b3) 100%);
  background-size: 200% 100%;
  animation: rpt-ai-shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

.rpt-ai-skel-line.w60 { width: 60%; }
.rpt-ai-skel-line.w70 { width: 70%; }
.rpt-ai-skel-line.w80 { width: 80%; }
.rpt-ai-skel-line.w90 { width: 90%; }

@keyframes rpt-ai-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.rpt-ai-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 24px;
  background: var(--danger-bg, rgba(177,59,59,0.06));
  border: 1px solid color-mix(in srgb, var(--danger-color, #b13b3b) 30%, transparent);
  border-radius: var(--radius-lg, 16px);
  color: var(--text-primary, #2c2520);
  text-align: center;
}

.rpt-ai-error svg { color: var(--danger-color, #b13b3b); }

.rpt-ai-error p {
  margin: 0;
  color: var(--text-secondary, #5a4f42);
  font-size: 13px;
  max-width: 480px;
}

.rpt-ai-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 44px 24px;
  text-align: center;
}

.rpt-ai-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(192, 38, 211, 0.10);
  color: #c026d3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rpt-ai-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #2c2520);
}

.rpt-ai-empty-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, #5a4f42);
  max-width: 480px;
}

.rpt-ai-empty-cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rpt-ai-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rpt-ai-actions .rpt-ai-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rpt-ai-copy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === Dark mode === */
[data-theme='dark'] .rpt-ai-modal-accent {
  box-shadow: 0 2px 12px rgba(192, 38, 211, 0.4);
}

[data-theme='dark'] .rpt-ai-pill {
  color: var(--accent, #6e8cc8);
  background: var(--accent-subtle, rgba(110, 140, 200, 0.10));
  border-color: color-mix(in srgb, var(--accent, #6e8cc8) 22%, transparent);
}

[data-theme='dark'] .rpt-ai-pill-provider {
  color: #e9d5ff;
  background: rgba(192, 38, 211, 0.16);
  border-color: rgba(192, 38, 211, 0.32);
}

[data-theme='dark'] .rpt-ai-focus {
  background: var(--card-bg, #0f1a2e);
  border-color: var(--border-color, #1f2a44);
  color: var(--text-primary, #e8eef7);
}

[data-theme='dark'] .rpt-ai-focus:focus {
  border-color: var(--accent, #6e8cc8);
  box-shadow: 0 0 0 3px var(--accent-subtle, rgba(110, 140, 200, 0.14));
}

[data-theme='dark'] .rpt-ai-section {
  background: var(--card-bg, #0f1a2e);
  border-color: var(--border-color, #1f2a44);
}

[data-theme='dark'] .rpt-ai-section-yorum {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent, #6e8cc8) 8%, var(--card-bg, #0f1a2e)),
      var(--card-bg, #0f1a2e));
  border-color: color-mix(in srgb, var(--accent, #6e8cc8) 25%, var(--border-color, #1f2a44));
}

[data-theme='dark'] .rpt-ai-section-head {
  border-color: var(--border-color, #1f2a44);
}

[data-theme='dark'] .rpt-ai-comment {
  color: var(--text-primary, #e8eef7);
}

[data-theme='dark'] .rpt-ai-comment h2 {
  color: var(--text-primary, #e8eef7);
  border-color: var(--border-color, #1f2a44);
}

[data-theme='dark'] .rpt-ai-comment h3 {
  color: var(--accent, #6e8cc8);
}

[data-theme='dark'] .rpt-ai-comment strong {
  color: var(--accent, #6e8cc8);
}

[data-theme='dark'] .rpt-ai-comment em {
  color: var(--text-secondary, #9aa8c4);
}

[data-theme='dark'] .rpt-ai-comment blockquote {
  border-left-color: var(--accent, #6e8cc8);
  background: var(--accent-subtle, rgba(110, 140, 200, 0.10));
  color: var(--text-secondary, #9aa8c4);
}

[data-theme='dark'] .rpt-ai-comment code {
  background: var(--bg-tertiary, #152238);
  color: var(--text-primary, #e8eef7);
}

[data-theme='dark'] .rpt-ai-copy {
  background: rgba(192, 38, 211, 0.16);
  border-color: rgba(192, 38, 211, 0.4);
  color: #f5d0fe;
}

[data-theme='dark'] .rpt-ai-copy:hover {
  background: rgba(192, 38, 211, 0.28);
  color: #fdf4ff;
}

[data-theme='dark'] .rpt-ai-usage {
  background: var(--bg-tertiary, #152238);
  color: var(--text-secondary, #9aa8c4);
}

[data-theme='dark'] .rpt-ai-skel-line {
  background: linear-gradient(90deg,
    var(--bg-tertiary, #152238) 0%,
    var(--card-bg, #0f1a2e) 50%,
    var(--bg-tertiary, #152238) 100%);
}

[data-theme='dark'] .rpt-ai-loading-spinner {
  border-color: var(--accent-subtle, rgba(110, 140, 200, 0.14));
  border-top-color: var(--accent, #6e8cc8);
  border-right-color: #e879f9;
}

[data-theme='dark'] .rpt-ai-empty-icon {
  background: rgba(192, 38, 211, 0.16);
  color: #e879f9;
}

[data-theme='dark'] .rpt-ai-empty-title {
  color: var(--text-primary, #e8eef7);
}

[data-theme='dark'] .rpt-ai-empty-desc {
  color: var(--text-secondary, #9aa8c4);
}