:root {
  --ink: #102a43;
  --muted: #66788a;
  --line: #dce5ee;
  --paper: #ffffff;
  --canvas: #f4f7fb;
  --nav: #0b2748;
  --nav-soft: #143b66;
  --accent: #f47c2c;
  --primary: #c9510e;
  --primary-dark: #a83e05;
  --primary-soft: #fff0e5;
  --gold: #f5a03a;
  --gold-soft: #fff4e7;
  --success: #16856b;
  --success-dark: #106652;
  --success-soft: #e6f5f1;
  --danger: #b63c44;
  --danger-soft: #fbe9ea;
  --warning: #985819;
  --warning-soft: #fff4e4;
  --blue: #1d5b8f;
  --shadow: 0 12px 32px rgba(11, 39, 72, 0.08);
  --radius: 16px;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-size: 14px;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

[hidden] { display: none !important; }

.loading-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  color: var(--nav);
}

.loading-logo {
  width: 116px;
  height: 168px;
  display: block;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(11, 39, 72, .12);
}

.loading-mark, .brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #ff8a3d, var(--accent));
  color: #fff;
  box-shadow: 0 8px 24px rgba(244, 124, 44, .24);
  font-weight: 900;
  font-size: 24px;
}

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 0 0 auto;
  width: 250px;
  background:
    radial-gradient(circle at 18% 4%, rgba(244,124,44,.22), transparent 30%),
    linear-gradient(180deg, #0d2e54 0%, var(--nav) 54%, #071d36 100%),
    var(--nav);
  color: #fff;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 6px 20px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.brand-logo-shell {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.brand-logo {
  width: 62px;
  height: 62px;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.brand-copy { min-width: 0; }
.brand strong { display: block; font-size: 20px; color: #fff; }
.brand span { display: block; margin-top: 4px; color: #d7e3ef; font-size: 10px; line-height: 1.5; }
.brand small { display: block; margin-top: 3px; color: #ffb27f; font-size: 11px; font-weight: 700; }

#main-nav { display: grid; gap: 4px; padding: 18px 0; overflow-y: auto; }

.nav-item {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #d6e2ed;
  padding: 11px 12px;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-item > span {
  width: 25px;
  font-size: 18px;
  text-align: center;
  color: #94afc9;
}

.nav-item:hover, .nav-item.active { color: #fff; background: var(--nav-soft); }
.nav-item.active {
  box-shadow: inset -3px 0 var(--accent);
  background: linear-gradient(90deg, rgba(244,124,44,.06), var(--nav-soft));
}
.nav-item.active > span { color: #ff9b59; }

.nav-badge {
  margin-right: auto;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 99px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  text-align: center;
}

.sidebar-footer {
  margin-top: auto;
  padding: 14px 10px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  gap: 10px;
  align-items: center;
}

.sidebar-footer strong, .sidebar-footer small { display: block; }
.sidebar-footer small { color: #a8bdd1; margin-top: 3px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ad1a8; box-shadow: 0 0 0 4px rgba(74,209,168,.13); }

.main-content {
  margin-right: 250px;
  min-height: 100vh;
  padding: 0 28px 40px;
}

.topbar {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(244,247,251,.72));
}

.topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px auto;
  width: 86px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #ffad74);
}

.topbar h1 { margin: 1px 0 0; font-size: 23px; }
.eyebrow, .panel-kicker { margin: 0; color: var(--primary); font-weight: 700; font-size: 11px; letter-spacing: .03em; }
.topbar-actions { margin-right: auto; display: flex; gap: 10px; align-items: center; }
.data-status { padding: 7px 11px; border-radius: 99px; background: var(--primary-soft); color: var(--primary-dark); font-size: 12px; font-weight: 700; }

.icon-button {
  border: 1px solid var(--line);
  background: var(--paper);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--ink);
}

#menu-toggle { display: none; }

.filter-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 18px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: end;
  gap: 9px;
  overflow-x: auto;
  box-shadow: 0 8px 24px rgba(11,39,72,.05);
}

label { display: grid; gap: 6px; color: #4c5864; font-size: 12px; font-weight: 700; }

input, select, textarea {
  min-height: 38px;
  border: 1px solid #cfd8d8;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
  outline: none;
}

textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(244,124,44,.14); }

.filter-bar label { min-width: 126px; white-space: nowrap; }
.filter-bar input, .filter-bar select { width: 100%; }

.view { display: none; }
.view.active { display: block; }

.warning-banner {
  border: 1px solid #ead39d;
  background: linear-gradient(90deg, var(--warning-soft), #fffaf0);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}

.warning-banner.compact { padding: 11px 15px; }
.warning-banner p { margin: 4px 0 0; color: #6d5735; line-height: 1.6; }
.warning-banner .button { margin-right: auto; }
.warning-icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #f1d18a; color: #664817; font-weight: 900; }
.warning-banner.success { border-color: #a8dec9; background: linear-gradient(90deg, #eaf8f2, #f8fffc); }
.warning-banner.success p { color: #356756; }
.warning-banner.success .warning-icon { background: #c9eddf; color: #176747; }

.monthly-chart-scroll {
  direction: ltr;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 8px;
  scrollbar-color: #b8c6d4 #eef3f7;
}
.monthly-chart-scroll canvas { min-width: 1120px; display: block; }
.monthly-summary {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding: 12px 0 2px;
  border-top: 1px solid var(--line);
}
.month-detail-card {
  min-width: 180px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f9fbfd;
}
.month-detail-card header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; color: var(--ink); }
.month-detail-card header strong { font-size: 14px; }
.month-detail-card header span { color: var(--muted); font-size: 11px; }
.month-detail-card > div { display: grid; grid-template-columns: 9px 1fr auto; gap: 6px; align-items: center; padding: 4px 0; }
.month-detail-card small { color: var(--muted); }
.month-detail-card b { direction: ltr; color: #334e68; font-size: 12px; }
.metric-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.metric-dot.revenue { background: #1d5b8f; }
.metric-dot.expense { background: #f47c2c; }
.metric-dot.net { background: #0b2748; }
.month-net.profit b { color: #16856b; }
.month-net.loss b { color: #b63c44; }
.journal-account { min-width: 210px; white-space: normal; line-height: 1.65; font-weight: 700; }
.journal-account.debit-account { color: #126a58; background: #f1faf7; }
.journal-account.credit-account { color: #9a4b17; background: #fff7f1; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.kpi-card {
  min-height: 118px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(11,39,72,.07);
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
}

.kpi-card.warn::before { background: var(--gold); }
.kpi-card.danger::before { background: var(--danger); }
.kpi-label { color: var(--muted); font-size: 12px; min-height: 30px; }
.kpi-value { margin-top: 8px; font-size: 22px; font-weight: 800; direction: ltr; text-align: right; }
.kpi-note { margin-top: 6px; color: var(--muted); font-size: 11px; }

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chart-panel.wide { grid-column: 1 / -1; }
.chart-panel canvas { width: 100%; max-width: 100%; }
.chart-panel {
  position: relative;
  overflow: hidden;
  border-color: #cfdae5;
  box-shadow: 0 14px 34px rgba(11,39,72,.09);
}
.chart-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #ffb27f 45%, var(--blue));
}
.chart-panel .panel-heading {
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf1f5;
}
.chart-panel .panel-heading h2 { font-size: 19px; }

.panel-heading, .section-toolbar, .section-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.panel-heading h2, .section-toolbar h2, .section-intro h2 { margin: 4px 0 0; font-size: 18px; }
.section-intro > p { max-width: 500px; color: var(--muted); line-height: 1.7; }
.section-toolbar { padding-top: 4px; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar-actions input, .toolbar-actions select { min-width: 160px; }

.button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 8px 14px;
  font-weight: 700;
}

.button.primary { background: var(--primary); color: #fff; }
.button.primary:hover { background: var(--primary-dark); }
.button.secondary { background: var(--nav); color: #fff; }
.button.ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.button.danger { background: var(--danger); color: #fff; }
.button.danger-outline { background: #fff; border-color: var(--danger); color: var(--danger); }

.entry-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.entry-tab { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 9px; padding: 9px 14px; }
.entry-tab.active { background: var(--nav); color: #fff; border-color: var(--nav); }
.entry-form { display: none; }
.entry-form.active { display: block; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.form-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px; }
.manual-lines-heading { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.manual-lines-heading h3 { margin: 0; }
.balance-strip { margin-top: 10px; padding: 10px 13px; background: var(--canvas); border-radius: 9px; font-weight: 700; }
.balance-strip.error { color: var(--danger); background: var(--danger-soft); }
.balance-strip.ok { color: var(--success-dark); background: var(--success-soft); }

.table-wrap { width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 850px; }
.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 9px;
  background: #edf3f8;
  color: #344e68;
  border-bottom: 1px solid #ccd9e5;
  text-align: right;
  font-size: 11px;
  white-space: nowrap;
}

.data-table td { padding: 10px 9px; border-bottom: 1px solid #edf1f5; vertical-align: top; }
.data-table.dense td { padding: 8px; font-size: 12px; }
.data-table tr:hover td { background: #fbfcfc; }
.data-table .amount { direction: ltr; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .muted { color: var(--muted); }
.data-table select, .data-table input { min-height: 32px; padding: 5px 7px; min-width: 120px; font-size: 12px; }
.table-summary { margin-bottom: 12px; color: var(--muted); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.badge.ok { background: var(--success-soft); color: var(--success-dark); }
.badge.warn { background: var(--warning-soft); color: var(--warning); }
.badge.error { background: var(--danger-soft); color: var(--danger); }
.badge.imported { background: #e9f0f7; color: var(--blue); }

.pagination { display: flex; justify-content: center; gap: 6px; padding-top: 14px; }
.pagination button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pagination button.active { background: var(--nav); color: #fff; }

.ledger-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.ledger-summary > div, .mini-kpis > div {
  padding: 12px;
  border-radius: 10px;
  background: var(--canvas);
}

.ledger-summary strong, .mini-kpis strong { display: block; margin-top: 5px; font-size: 17px; }

.report-sheet { max-width: 900px; margin: 0 auto 18px; }
.report-header { padding-bottom: 15px; border-bottom: 2px solid var(--nav); display: flex; justify-content: space-between; gap: 20px; }
.report-header h2 { margin: 0; }
.report-meta { color: var(--muted); text-align: left; }
.report-rows { margin-top: 15px; }
.report-row { display: flex; justify-content: space-between; gap: 20px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.report-row.subtotal { font-weight: 700; border-top: 1px solid #aebdca; }
.report-row.total { font-size: 17px; font-weight: 900; background: var(--primary-soft); padding: 13px; margin-top: 8px; border-radius: 9px; }
.report-row.loss { background: var(--danger-soft); color: #8e2d2d; }

.mini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }

.action-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.action-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.action-card h3 { margin: 8px 0; }
.action-card p { color: var(--muted); min-height: 42px; line-height: 1.6; }
.action-icon { font-size: 28px; color: var(--primary); }
.featured-card {
  border-color: #f1c4a6;
  background: linear-gradient(180deg, #fffaf6, #fff);
}
.import-guide {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  border-color: #cbdbe9;
  box-shadow: none;
}
.import-guide strong {
  flex: 0 0 auto;
  color: var(--nav);
}
.import-guide span {
  color: var(--muted);
  line-height: 1.7;
}
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.import-result {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  line-height: 1.6;
}
.import-result:empty { display: none; }
.import-result.success,
.import-result.error {
  padding: 10px 12px;
  border-radius: 9px;
}
.import-result.success {
  color: var(--success-dark);
  background: var(--success-soft);
}
.import-result.error {
  color: #8e2d2d;
  background: var(--danger-soft);
}
.import-result ul {
  margin: 4px 0 0;
  padding-right: 20px;
}
.danger-card .action-icon { color: var(--danger); }
.file-button { display: inline-flex; align-items: center; }
.file-button input { display: none; }

.settings-form { max-width: 900px; }
.branch-form { margin-bottom: 16px; }
.branch-form .panel-heading > p { max-width: 480px; margin: 0; color: var(--muted); line-height: 1.7; }
.branch-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.branch-pill { display: grid; gap: 5px; min-width: 240px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); }
.branch-pill-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.branch-pill strong { color: var(--nav); }
.branch-pill span { color: var(--muted); font-size: 12px; }
.branch-pill small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.button.compact { min-height: 30px; padding: 5px 9px; font-size: 11px; }
.provenance-panel { margin-top: 16px; }
.provenance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.provenance-grid > div { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; }
.provenance-grid small { grid-column: 2; color: var(--muted); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.legend-dot.normalized { background: var(--primary); }
.legend-dot.corrected { background: var(--gold); }
.legend-dot.calculated { background: #7d5aa6; }

.toast-region { position: fixed; top: 18px; left: 18px; z-index: 100; display: grid; gap: 8px; }
.toast { min-width: 260px; max-width: 420px; padding: 12px 14px; border-radius: 10px; background: var(--nav); color: #fff; box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
.toast.error { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

dialog {
  width: min(700px, calc(100% - 28px));
  border: 0;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 28px 80px rgba(11,39,72,.28);
}
dialog::backdrop { background: rgba(5,24,44,.58); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dialog-heading h2 { margin: 0; }

.empty-state { padding: 34px 12px; text-align: center; color: var(--muted); }

@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .provenance-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-right: 0; padding-inline: 16px; }
  #menu-toggle { display: inline-grid; place-items: center; }
  .chart-grid { grid-template-columns: 1fr; }
  .chart-panel.wide { grid-column: auto; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid, .form-grid.compact { grid-template-columns: 1fr 1fr; }
  .action-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .sidebar { width: min(86vw, 300px); padding: 18px 14px; }
  .main-content { padding: 0 10px 28px; }
  .topbar { min-height: 68px; gap: 9px; }
  .topbar h1 { font-size: 19px; }
  .topbar-actions { gap: 6px; }
  .data-status { display: none; }
  .filter-bar {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    margin: 12px 0;
    padding: 10px;
    overflow: visible;
  }
  .filter-bar label {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
  .filter-bar input,
  .filter-bar select { min-width: 0; width: 100%; }
  #filter-person-wrap,
  #clear-filters { grid-column: 1 / -1; }
  input, select, textarea, .button { min-height: 44px; }
  .panel { padding: 14px; border-radius: 12px; }
  .chart-panel { padding: 12px; }
  .chart-panel canvas { min-height: 260px; }
  .monthly-chart-scroll canvas { min-width: 980px; }
  .monthly-summary { grid-auto-columns: 170px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-card { min-height: 104px; padding: 12px; }
  .kpi-label { min-height: 34px; font-size: 11px; }
  .kpi-value { font-size: 18px; overflow-wrap: anywhere; }
  .kpi-note { font-size: 10px; }
  .form-grid, .form-grid.compact { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .section-toolbar, .section-intro, .panel-heading { align-items: flex-start; flex-direction: column; }
  .toolbar-actions { width: 100%; }
  .toolbar-actions > * { flex: 1 1 140px; }
  .toolbar-actions input,
  .toolbar-actions select { min-width: 0; width: 100%; }
  .warning-banner { align-items: flex-start; flex-wrap: wrap; }
  .warning-banner .button { margin-right: 0; }
  .ledger-summary { grid-template-columns: 1fr; }
  .mini-kpis { grid-template-columns: repeat(2, 1fr); }
  .provenance-grid { grid-template-columns: 1fr; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 720px; }
  .action-card { padding: 17px; }
  .action-card p { min-height: 0; }
  .action-buttons > .button { flex: 1 1 100%; }
  .file-button { justify-content: center; width: 100%; }
  .import-guide { align-items: flex-start; flex-direction: column; }
  .report-row { gap: 10px; }
  .report-row > :last-child { white-space: nowrap; }
  .toast-region { top: 10px; left: 10px; right: 10px; }
  .toast { min-width: 0; max-width: none; }
}

@media print {
  body { background: #fff; }
  .sidebar, .topbar, .filter-bar, .section-toolbar, .warning-banner, .toast-region, .pagination { display: none !important; }
  .main-content { margin: 0; padding: 0; }
  .view { display: none !important; }
  .view.print-target, .view.active { display: block !important; }
  .panel { box-shadow: none; border-color: #bbb; }
}

/* Approved chart of accounts: header accounts are visible but never selectable for posting. */
.header-account-row { background: rgba(31, 78, 121, 0.08); }
.header-account-row td { font-weight: 600; }

/* Excel-like searchable drop-downs and English financial digits */
.excel-filter-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.excel-filter-input {
  width: 100%;
  min-height: 39px;
  padding: 8px 38px 8px 10px;
  border: 1px solid #b9c7d5;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.excel-filter-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(244,124,44,.14);
}

.excel-filter-arrow {
  position: absolute;
  inset: 1px 1px auto auto;
  width: 36px;
  height: 37px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 8px 8px 0;
  background: #f7f9fc;
  color: var(--nav);
  z-index: 2;
}

.excel-filter-menu {
  display: none;
  position: fixed;
  top: auto;
  right: auto;
  left: auto;
  z-index: 10000;
  max-height: 260px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #b9c7d5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(11,39,72,.18);
}

.excel-filter-menu.open { display: grid; gap: 2px; }

.excel-filter-option {
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  text-align: right;
  line-height: 1.45;
}

.excel-filter-option:hover,
.excel-filter-option.keyboard-active { background: var(--primary-soft); }
.excel-filter-option.selected { background: #e9eef5; font-weight: 700; }
.excel-filter-option:disabled { color: #a0aeba; cursor: not-allowed; }
.excel-filter-empty { padding: 12px; color: var(--muted); text-align: center; }

.ledger-side {
  min-width: 220px;
  white-space: normal;
  line-height: 1.55;
  font-weight: 700;
}
.ledger-side.debit-side { color: #126a58; background: #f1faf7; }
.ledger-side.credit-side { color: #9a4b17; background: #fff7f1; }
.account-create-form { margin-bottom: 16px; }
.account-tree-name.child-account-name { display: inline-block; padding-right: 20px; position: relative; }
.account-tree-name.child-account-name::before { content: "↳"; position: absolute; right: 2px; color: var(--accent); font-weight: 900; }

.excel-filter-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  inset: auto 0 0 auto;
}

.amount,
.kpi-value,
.ledger-summary strong,
.report-sheet strong,
.month-detail-card b,
input[type="number"],
input[type="date"] {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

input[type="number"], input[type="date"] { text-align: left; }


.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(244,124,44,.2), transparent 34%),
    linear-gradient(145deg, #eef3f8, #fff7f1);
}

.login-card {
  width: min(420px, 100%);
  display: grid;
  gap: 16px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(11,39,72,.14);
  text-align: center;
}
.login-card label { display: grid; gap: 7px; text-align: right; font-weight: 700; }
.login-card input { min-height: 42px; padding: 9px 11px; border: 1px solid #b9c7d5; border-radius: 9px; }
.login-logo { width: 110px; height: 110px; object-fit: contain; border-radius: 18px; margin: 0 auto; background: #fff; padding: 5px; }
.login-error { min-height: 20px; margin: 0; color: var(--danger); font-weight: 700; }

.current-user { display: grid; line-height: 1.25; text-align: right; }
.current-user small { color: var(--muted); }
.button.compact { min-height: 34px; padding: 6px 10px; }

.user-branch-section { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.branch-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.branch-checkbox { display: flex; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.branch-checkbox input { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .current-user { display: none; }
  .topbar-actions .data-status { display: none; }
}


@media (max-width: 620px) {
  .topbar { position: sticky; top: 0; z-index: 15; padding-inline: 4px; }
  .topbar-actions { margin-right: auto; }
  .chart-grid { gap: 10px; }
  .chart-panel .panel-heading h2 { font-size: 16px; }
  .warning-banner { padding: 12px; }
  .brand-logo-shell { width: 66px; height: 66px; flex-basis: 66px; }
  .brand-logo { width: 58px; height: 58px; }
  #view-dashboard .panel { overflow: hidden; }
}
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
  #filter-person-wrap, #clear-filters { grid-column: auto; }
}


/* Accounting v7 approved responsive and report styles */
.sidebar-footer{display:none!important}.checkbox-label{display:flex!important;align-items:center;gap:.55rem}.checkbox-label input{width:auto!important}.balance-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.balance-check{margin-top:1rem;padding:1rem;border-radius:12px;background:#f6f8fb}.total-row{font-weight:700;background:#f7f8fa}.kpi-card strong{font-variant-numeric:tabular-nums}.data-table .compact{padding:.35rem .55rem;font-size:.78rem}#journal-edit-dialog{width:min(720px,94vw);border:0;border-radius:16px;padding:1.25rem;box-shadow:0 20px 70px #0004}#journal-edit-dialog::backdrop{background:#0b274899}@media(max-width:800px){.balance-sheet-grid{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-grid{display:block}.chart-panel{margin-bottom:1rem}}@media(max-width:520px){.kpi-grid{grid-template-columns:1fr}.topbar-actions{flex-wrap:wrap}.filter-bar{grid-template-columns:1fr}.data-table{min-width:900px}}

/* Ibdaa Accounting v8 final core UI */
/* Ibdaa Accounting v8 final UI fixes */
.sidebar-footer { display: none !important; }

.chart-grid { align-items: stretch; }
.chart-panel {
  min-width: 0;
  overflow: hidden;
  contain: layout paint;
}
.chart-panel canvas {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  object-fit: contain;
}
#chart-monthly { height: 340px !important; max-height: 340px !important; }
#chart-branch-performance { height: 300px !important; max-height: 300px !important; }
.chart-panel canvas:not(#chart-monthly):not(#chart-branch-performance) {
  height: 260px !important;
  max-height: 260px !important;
}
.monthly-chart-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.monthly-chart-scroll canvas { min-width: 620px !important; }

.data-table th,
.data-table td {
  vertical-align: middle;
}
#view-journal .table-wrap,
#view-accounts .table-wrap {
  overflow: auto;
  max-width: 100%;
}
#view-journal .data-table {
  min-width: 1280px;
  table-layout: auto;
}
#view-journal .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}
#view-journal .journal-account {
  min-width: 180px;
  max-width: 260px;
  white-space: normal;
  line-height: 1.65;
}
#view-journal .journal-description {
  min-width: 170px;
  max-width: 260px;
  white-space: normal;
}
.user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef4fa;
  color: #0b2748;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.review-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  cursor: pointer;
}
.review-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #16856b;
}

#view-accounts .data-table {
  min-width: 1040px;
}
#view-accounts .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}
#view-accounts .account-name-cell {
  min-width: 220px;
  white-space: normal;
  line-height: 1.6;
}
#view-accounts .table-actions {
  display: flex;
  gap: 6px;
  min-width: 145px;
}
#view-accounts .header-account-row {
  background: #fff8f2;
}
#view-accounts .child-account-name {
  display: inline-block;
  padding-inline-start: 18px;
  position: relative;
}
#view-accounts .child-account-name::before {
  content: "↳";
  position: absolute;
  inset-inline-start: 0;
  color: #f47c2c;
}
.v8-header-account-check {
  align-self: end;
  min-height: 44px;
}

.v8-dialog {
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(11, 39, 72, .28);
  overflow: hidden;
}
.v8-dialog::backdrop {
  background: rgba(11, 39, 72, .58);
  backdrop-filter: blur(2px);
}
.v8-dialog form {
  padding: 22px;
  max-height: calc(100vh - 28px);
  overflow: auto;
}
.v8-dialog .dialog-heading {
  position: sticky;
  top: -22px;
  z-index: 6;
  background: #fff;
  padding: 18px 0 14px;
  margin-top: -18px;
  border-bottom: 1px solid #e3ebf2;
}
.v8-editor-meta {
  margin-top: 18px;
}
.v8-editor-table-wrap {
  margin-top: 16px;
  overflow: auto;
  border: 1px solid #dbe5ee;
  border-radius: 14px;
}
.v8-editor-table {
  min-width: 720px;
}
.v8-editor-table select,
.v8-editor-table input {
  min-width: 120px;
}
.v8-editor-table select {
  min-width: 360px;
}
.v8-editor-balance {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 800;
  direction: rtl;
}
.v8-editor-balance.ok {
  color: #116653;
  background: #e9f7f2;
  border: 1px solid #bfe6d8;
}
.v8-editor-balance.error {
  color: #9e2932;
  background: #fff0f1;
  border: 1px solid #f0c3c7;
}

.financial-report {
  padding: 0;
  overflow: hidden;
}
.financial-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #0b2748, #173f6b);
  color: #fff;
}
.financial-header > div {
  display: grid;
  gap: 4px;
}
.financial-header strong {
  font-size: 20px;
}
.financial-header span,
.financial-header small {
  opacity: .9;
}
.financial-equation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 22px;
  background: #f6f9fc;
  border-bottom: 1px solid #dfe8f0;
}
.financial-equation > div {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: #fff;
  border: 1px solid #dfe8f0;
  border-radius: 13px;
}
.financial-equation span {
  color: #63758a;
  font-size: 12px;
}
.financial-equation strong {
  color: #0b2748;
  font-size: 19px;
}
.financial-equation .balanced {
  background: #eaf8f3;
  border-color: #bfe6d8;
}
.financial-equation .unbalanced {
  background: #fff0f1;
  border-color: #f0c3c7;
}
.financial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 22px;
  align-items: start;
}
.financial-column {
  min-width: 0;
  border: 1px solid #dfe8f0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.financial-column > h3 {
  margin: 0;
  padding: 16px 18px;
  color: #0b2748;
  background: #f2f6fa;
  border-bottom: 1px solid #dfe8f0;
}
.financial-group {
  border-bottom: 1px solid #edf2f6;
}
.financial-group header,
.financial-row,
.financial-total {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}
.financial-group header {
  padding: 13px 17px;
  background: #fbfcfe;
  color: #0b2748;
}
.financial-row {
  padding: 10px 17px;
}
.financial-row:nth-child(odd) {
  background: #fcfdff;
}
.financial-row > span {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
}
.financial-row small {
  color: #7b8c9d;
  direction: ltr;
  min-width: 62px;
}
.financial-row strong,
.financial-group header strong,
.financial-total strong {
  direction: ltr;
  white-space: nowrap;
}
.financial-total {
  padding: 15px 17px;
  color: #0b2748;
  background: #edf3f8;
  font-weight: 800;
}
.financial-total.grand {
  background: #0b2748;
  color: #fff;
}
.period-result header {
  background: #fff7ef;
  color: #9a480f;
}

@media (max-width: 900px) {
  .financial-equation,
  .financial-grid {
    grid-template-columns: 1fr;
  }
  .financial-header {
    flex-direction: column;
  }
  .chart-grid {
    grid-template-columns: 1fr !important;
  }
  .chart-panel {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .v8-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 14px;
  }
  .v8-dialog form {
    padding: 14px;
    max-height: calc(100vh - 12px);
  }
  .v8-dialog .dialog-heading {
    top: -14px;
    padding-top: 14px;
  }
  .financial-equation,
  .financial-grid {
    padding: 12px;
    gap: 12px;
  }
  .financial-header {
    padding: 18px;
  }
  #view-journal .data-table {
    min-width: 1120px;
  }
  #view-accounts .data-table {
    min-width: 920px;
  }
}

@media print {
  .sidebar,
  .topbar,
  #global-filters,
  .section-toolbar button,
  .toast-region {
    display: none !important;
  }
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }
  .view {
    display: none !important;
  }
  #view-financial-position.active {
    display: block !important;
  }
  .financial-report {
    box-shadow: none !important;
    border: 0 !important;
  }
  .financial-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* CRM */
.crm-toolbar{align-items:center}.crm-filters{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:12px;margin-bottom:16px}.crm-summary{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px;margin-bottom:16px}.crm-summary>div{background:#fff;border:1px solid var(--border,#dbe3eb);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:5px}.crm-summary strong{font-size:1.35rem}.crm-summary span{color:var(--muted,#667085);font-size:.85rem}.crm-stage{display:inline-flex;padding:5px 10px;border-radius:999px;background:#eef2f6;font-weight:700;font-size:.78rem}.stage-won{background:#dcfce7;color:#166534}.stage-lost{background:#fee2e2;color:#991b1b}.crm-kanban{display:grid;grid-template-columns:repeat(6,minmax(245px,1fr));gap:14px;overflow-x:auto;align-items:start;padding-bottom:12px;direction:ltr}.kanban-column{background:#f5f7fa;border:1px solid #dde3ea;border-radius:14px;min-height:480px;direction:rtl}.kanban-column header{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid #dde3ea}.kanban-column header h3{margin:0}.kanban-column header span{background:#fff;border-radius:999px;padding:3px 9px}.kanban-dropzone{padding:10px;min-height:410px}.lead-card{background:#fff;border:1px solid #d9e1e8;border-right:4px solid #7b486d;border-radius:10px;padding:12px;margin-bottom:10px;display:flex;flex-direction:column;gap:7px;cursor:grab;box-shadow:0 2px 8px rgba(11,39,72,.05)}.lead-card:active{cursor:grabbing}.lead-card a{text-decoration:none}.lead-card small,.lead-card time{color:#667085}.lead-card b{font-variant-numeric:tabular-nums}.crm-dialog{width:min(850px,94vw)}@media(max-width:900px){.crm-filters,.crm-summary{grid-template-columns:1fr 1fr}}@media(max-width:600px){.crm-filters,.crm-summary{grid-template-columns:1fr}}

/* CRM v4 refinements */
.kanban-column header{gap:10px;align-items:flex-start}
.kanban-column-total{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.kanban-column-total strong{font-size:.82rem;color:#0b2748;font-variant-numeric:tabular-nums}
.kanban-column-total small{color:#667085;font-size:.72rem}
.lead-card{cursor:pointer}
.lead-card[draggable="true"]{cursor:grab}
.lead-card[draggable="true"]:active{cursor:grabbing}
.lead-phone{color:#3f5871;direction:ltr;text-align:right}
.lead-lost-reason{padding-top:7px;border-top:1px dashed #e1e7ed;color:#991b1b!important}
.lost-reason-dialog{width:min(560px,94vw)}

/* Schools */
.school-filters{display:grid;grid-template-columns:minmax(260px,2fr) minmax(220px,1fr);gap:12px;margin-bottom:16px}
.school-dialog{width:min(720px,94vw)}
.row-actions{display:flex;gap:8px;align-items:center;white-space:nowrap}
@media(max-width:700px){.school-filters{grid-template-columns:1fr}}

/* Universities and students */
.optional-label{font-size:.75rem;color:#667085;font-weight:500}.students-toolbar{margin-bottom:10px}.student-type-picker{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:18px;margin:0 0 18px}.student-type-card{appearance:none;border:1px solid #d7e0e8;background:#fff;border-radius:18px;padding:24px;text-align:right;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon title" "icon note";column-gap:16px;row-gap:6px;cursor:pointer;box-shadow:0 5px 18px rgba(11,39,72,.06);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;color:inherit}.student-type-card:hover{transform:translateY(-2px);border-color:#b9c8d6;box-shadow:0 10px 24px rgba(11,39,72,.09)}.student-type-card.school{border-right:5px solid #7b486d}.student-type-card.university{border-right:5px solid #0c7180}.student-type-icon{grid-area:icon;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:#f3edf2;color:#7b486d;font-size:1.7rem}.student-type-card.university .student-type-icon{background:#e5f4f6;color:#0c7180}.student-type-card strong{grid-area:title;font-size:1.25rem;align-self:end}.student-type-card small{grid-area:note;color:#667085;line-height:1.65}.student-filters{display:grid;grid-template-columns:minmax(320px,2fr) minmax(220px,1fr);gap:12px;margin-bottom:16px}.students-table{min-width:1180px}.students-table td:first-child{min-width:190px}.students-table td small,.family-members-table td small{display:block;color:#667085;margin-top:4px}.student-name-en{direction:ltr;text-align:right}.student-type-badge,.profile-status,.family-role,.family-count{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 10px;font-size:.76rem;font-weight:700;white-space:nowrap}.student-type-badge.school{background:#f3edf2;color:#6b345f}.student-type-badge.university{background:#e5f4f6;color:#075e69}.profile-status.complete{background:#dcfce7;color:#166534}.profile-status.basic{background:#fff3cd;color:#805b00}.family-count{background:#eef2f6;color:#344054}.student-dialog{width:min(1120px,96vw);max-height:94vh;padding:0;border:0;border-radius:18px;overflow:hidden}.student-dialog::backdrop{background:rgba(10,26,43,.58)}.student-dialog-shell,.student-dialog>form{max-height:94vh;overflow:auto;padding:22px}.student-dialog-heading{position:sticky;top:-22px;z-index:3;background:#fff;padding-top:22px;padding-bottom:14px;border-bottom:1px solid #e4e9ef;margin-bottom:18px}.student-dialog-heading p{margin:5px 0 0;color:#667085}.student-form-section{border:1px solid #dce4eb;border-radius:14px;padding:18px;margin:0 0 18px;background:#fbfcfd}.student-form-section legend{padding:0 10px;font-weight:800;color:#0b2748}.student-form-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}.form-section-note{margin:-4px 0 15px;color:#667085;font-size:.88rem}.family-data-section{background:#fffaf4;border-color:#eadbc8}.student-main-actions{position:sticky;bottom:-22px;background:#fff;padding:15px 0 2px;border-top:1px solid #e4e9ef;z-index:2}.siblings-section{border-top:8px solid #f3f5f7;margin:24px -22px -22px;padding:22px}.siblings-heading h3{margin:4px 0}.siblings-heading p{color:#667085;margin:5px 0 16px}.sibling-add-form{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr)) auto;gap:10px;align-items:end;background:#f8fafc;border:1px solid #dce4eb;border-radius:14px;padding:14px;margin-bottom:16px}.sibling-add-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.84rem}.sibling-add-form button{height:43px;white-space:nowrap}.family-table-wrap{border:1px solid #e1e7ed;border-radius:12px}.family-members-table{min-width:760px}.family-role{background:#eef2f6;color:#344054}.family-role.primary{background:#e8edf8;color:#294880}.family-role.current{background:#dcfce7;color:#166534}.university-student-dialog{width:min(820px,95vw)}
@media(max-width:900px){.student-type-picker{grid-template-columns:1fr}.student-form-grid{grid-template-columns:1fr}.sibling-add-form{grid-template-columns:1fr 1fr}.sibling-add-form button{grid-column:1/-1}.student-dialog{width:calc(100vw - 12px);max-height:calc(100vh - 12px)}}
@media(max-width:650px){.student-filters{grid-template-columns:1fr}.student-type-card{padding:18px}.sibling-add-form{grid-template-columns:1fr}.student-dialog-shell,.student-dialog>form{padding:14px}.student-dialog-heading{top:-14px;padding-top:14px}.siblings-section{margin:20px -14px -14px;padding:14px}.student-main-actions{bottom:-14px}}

/* Student profile Road Map */
.student-profile-tabs{display:flex;gap:8px;margin:0 0 18px;padding:5px;background:#f3f6f9;border:1px solid #dde5ec;border-radius:12px;position:sticky;top:78px;z-index:2}.student-profile-tab{border:0;background:transparent;color:#5b6b7c;border-radius:9px;padding:10px 18px;font:inherit;font-weight:800;cursor:pointer}.student-profile-tab:hover:not(:disabled){background:#fff;color:#0b2748}.student-profile-tab.active{background:#fff;color:#7b486d;box-shadow:0 2px 8px rgba(11,39,72,.08)}.student-profile-tab:disabled{opacity:.45;cursor:not-allowed}.student-profile-panel[hidden]{display:none!important}.student-profile-panel.active{display:block}.student-roadmap-root{min-height:420px}.roadmap-page-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.roadmap-page-heading h3{font-size:1.7rem;margin:3px 0}.roadmap-page-heading p{margin:0;color:#667085}.roadmap-total{min-width:130px;background:#f3edf2;border:1px solid #e3d4df;border-radius:15px;padding:14px;text-align:center;display:flex;flex-direction:column}.roadmap-total strong{font-size:1.7rem;color:#6b345f}.roadmap-total span{font-size:.8rem;color:#667085}.roadmap-section{border:1px solid #dce4eb;background:#fff;border-radius:16px;padding:18px;margin-bottom:18px}.roadmap-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.roadmap-section-heading h4{margin:0 0 4px;font-size:1.08rem}.roadmap-section-heading p{margin:0;color:#667085;font-size:.88rem}.roadmap-section-heading>span{display:inline-grid;place-items:center;min-width:34px;height:28px;border-radius:999px;background:#eef2f6;color:#344054;font-weight:800}.roadmap-empty{display:flex;align-items:center;gap:13px;border:1px dashed #cdd8e1;background:#f8fafc;border-radius:13px;padding:17px;color:#344054}.roadmap-empty>span{width:40px;height:40px;border-radius:12px;background:#eef2f6;display:grid;place-items:center;font-size:1.15rem}.roadmap-empty strong{display:block;margin-bottom:3px}.roadmap-empty p{margin:0;color:#667085;font-size:.86rem}.completed-empty{background:#f7fbf8;border-color:#cfe2d4}.roadmap-completed-table{min-width:760px}.roadmap-ai-box{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#f7f2f6,#f1f7fa);border:1px solid #ddd3df;border-radius:14px;padding:16px}.roadmap-ai-box strong{display:block;margin-bottom:4px}.roadmap-ai-box p{margin:0;color:#667085;font-size:.86rem}.roadmap-ai-box button{white-space:nowrap}.roadmap-add-form{display:grid;grid-template-columns:minmax(260px,1fr) auto;align-items:end;gap:12px;background:#f8fafc;border:1px solid #dce4eb;border-radius:14px;padding:14px;margin-bottom:16px}.roadmap-add-form label{display:flex;flex-direction:column;gap:7px;font-size:.86rem;font-weight:800}.roadmap-add-form select{width:100%}.student-roadmap-kanban{display:grid;grid-template-columns:repeat(4,minmax(235px,1fr));gap:13px;overflow-x:auto;align-items:start;padding:2px 2px 10px;direction:ltr}.roadmap-column{direction:rtl;background:#f4f7f9;border:1px solid #dce4eb;border-radius:14px;min-height:390px}.roadmap-column>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px;border-bottom:1px solid #dce4eb}.roadmap-column>header h4{margin:0 0 3px;font-size:.96rem}.roadmap-column>header small{color:#667085;font-size:.73rem}.roadmap-column>header>span{display:grid;place-items:center;min-width:29px;height:25px;padding:0 7px;border-radius:999px;background:#fff;font-size:.78rem;font-weight:800}.roadmap-dropzone{min-height:325px;padding:10px;transition:background .15s ease,outline .15s ease}.roadmap-dropzone.drag-over{background:#eee6ec;outline:2px dashed #7b486d;outline-offset:-5px}.roadmap-column-empty{border:1px dashed #c9d4de;border-radius:11px;padding:16px 10px;text-align:center;color:#8793a0;font-size:.8rem}.roadmap-course-card{background:#fff;border:1px solid #d8e1e9;border-right:4px solid #7b486d;border-radius:11px;padding:10px 11px;margin-bottom:9px;box-shadow:0 3px 10px rgba(11,39,72,.05);cursor:grab}.roadmap-course-card.dragging{opacity:.45}.roadmap-course-card strong{display:block;line-height:1.5;margin:1px 0 5px}.roadmap-course-card>small{display:block;color:#667085;font-size:.74rem}.roadmap-card-top{display:flex;align-items:center;justify-content:space-between;min-height:21px}.roadmap-drag-handle{color:#98a2b3;letter-spacing:-3px}.roadmap-delete-course{border:0;background:#fff0f0;color:#b42318;width:24px;height:24px;border-radius:7px;cursor:pointer;font-size:1rem;line-height:1}.roadmap-delete-course:hover{background:#fee4e2}.roadmap-course-card footer{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px dashed #e2e8ee;margin-top:9px;padding-top:7px;color:#667085;font-size:.68rem}.roadmap-course-card footer time{white-space:nowrap}
@media(max-width:900px){.student-profile-tabs{top:70px}.roadmap-page-heading,.roadmap-ai-box{align-items:stretch;flex-direction:column}.roadmap-total{min-width:0;flex-direction:row;align-items:center;justify-content:center;gap:8px}.roadmap-add-form{grid-template-columns:1fr}.student-roadmap-kanban{grid-template-columns:repeat(4,minmax(220px,1fr))}}
@media(max-width:650px){.student-profile-tabs{top:66px;overflow-x:auto}.student-profile-tab{padding:9px 14px;white-space:nowrap}.roadmap-section{padding:13px}.roadmap-page-heading h3{font-size:1.4rem}}

/* Trainer user profile */
.trainer-user-section { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd; }
.trainer-user-section legend { padding: 0 10px; font-weight: 800; color: var(--ink); }
.trainer-user-section textarea { resize: vertical; min-height: 86px; }
.user-table-note { display: block; margin-top: 5px; color: var(--muted); font-size: .76rem; }
#view-users .data-table { min-width: 1050px; }

/* Training courses, rooms calendar, enrollment and attendance */
.training-toolbar p{margin:6px 0 0;color:var(--muted,#667085)}
.training-calendar-controls{display:grid;grid-template-columns:minmax(220px,1fr) minmax(190px,.65fr) auto;gap:14px;align-items:end;margin-bottom:16px}
.training-calendar-controls label{display:flex;flex-direction:column;gap:7px;font-weight:800;font-size:.84rem}
.training-month-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.training-summary{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.training-summary>div{background:#fff;border:1px solid var(--line,#dbe3eb);border-radius:14px;padding:15px;display:flex;flex-direction:column;gap:4px;box-shadow:0 3px 12px rgba(11,39,72,.04)}
.training-summary strong{font-size:1.35rem;color:#0b2748;font-variant-numeric:tabular-nums}
.training-summary span{color:#667085;font-size:.8rem}
.training-calendar-root{background:#fff;border:1px solid var(--line,#dbe3eb);border-radius:16px;overflow:hidden}
.training-calendar-scroll{overflow:auto;max-height:calc(100vh - 300px)}
.training-calendar-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.training-calendar-table th,.training-calendar-table td{border-left:1px solid #e4e9ef;border-bottom:1px solid #e4e9ef;vertical-align:top;background:#fff}
.training-calendar-table thead th{position:sticky;top:0;z-index:5;background:#f5f7fa;padding:13px;min-width:260px;text-align:center;color:#0b2748}
.training-calendar-table .training-date-column{position:sticky;right:0;z-index:6;min-width:145px;width:145px;background:#f8fafc;text-align:right;padding:12px}
.training-calendar-table thead .training-date-column{z-index:8;background:#eef2f6}
.training-calendar-table tbody .training-date-column strong,.training-calendar-table tbody .training-date-column span{display:block}
.training-calendar-table tbody .training-date-column span{margin-top:4px;color:#667085;font-size:.8rem}
.training-calendar-table tr.today th,.training-calendar-table tr.today td{background:#fffdf6}
.training-calendar-table tr.today .training-date-column{box-shadow:inset -4px 0 #d49a27}
.training-cell-stack{min-height:88px;padding:8px;display:flex;flex-direction:column;gap:8px}
.training-session-card{position:relative;background:#fff;border:1px solid #d8e1e9;border-right:4px solid #7b486d;border-radius:11px;padding:10px 10px 9px;box-shadow:0 3px 10px rgba(11,39,72,.06);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;min-width:220px}
.training-session-card:hover,.training-session-card:focus{transform:translateY(-1px);box-shadow:0 8px 18px rgba(11,39,72,.1);outline:0;border-color:#c7b3c1}
.training-session-card strong{display:block;margin:4px 0 5px;line-height:1.45;padding-left:62px}
.training-session-card small{display:block;color:#667085;margin-bottom:7px}
.training-card-time{font-size:.76rem;font-weight:800;color:#6b345f;background:#f5edf3;border-radius:7px;padding:4px 7px;display:inline-block}
.training-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px dashed #e1e7ed;padding-top:7px;color:#667085;font-size:.68rem}
.training-card-actions{position:absolute;left:8px;top:8px;display:flex;gap:5px}
.training-card-icon{width:28px;height:28px;border:1px solid #dde5ec;background:#fff;border-radius:8px;display:grid;place-items:center;cursor:pointer;font-size:.85rem;padding:0}
.training-card-icon:hover{background:#f3f6f9}.training-card-icon.recorded{background:#dcfce7;color:#166534;border-color:#b7e4c2}
.training-mobile-calendar{display:none}
.training-mobile-day{background:#fff;border:1px solid #dbe3eb;border-radius:15px;overflow:hidden;margin-bottom:12px}
.training-mobile-day>header{display:flex;justify-content:space-between;padding:12px 14px;background:#f5f7fa;border-bottom:1px solid #e1e7ed}
.training-mobile-day.today>header{box-shadow:inset -4px 0 #d49a27;background:#fffaf0}
.training-mobile-room{padding:12px;border-bottom:1px solid #edf1f4}.training-mobile-room:last-child{border-bottom:0}
.training-mobile-room h4{margin:0 0 9px;font-size:.9rem;color:#344054}.training-mobile-empty{padding:14px;color:#98a2b3;text-align:center}
.training-course-dialog{width:min(900px,96vw);max-height:94vh;overflow:auto}
.training-course-dialog .dialog-heading p,.course-students-dialog .dialog-heading p,.session-attendance-dialog .dialog-heading p{margin:5px 0 0;color:#667085}
.training-course-form-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}
.training-days-fieldset{border:1px solid #dce4eb;border-radius:14px;padding:14px;margin:16px 0;background:#fbfcfd}
.training-days-fieldset legend{padding:0 9px;font-weight:800;color:#0b2748}
.training-days-checkboxes{display:grid;grid-template-columns:repeat(7,minmax(86px,1fr));gap:8px}
.training-days-checkboxes label{cursor:pointer}
.training-days-checkboxes input{position:absolute;opacity:0;pointer-events:none}
.training-days-checkboxes span{display:block;text-align:center;border:1px solid #d8e1e9;background:#fff;border-radius:9px;padding:9px 6px;font-weight:700;font-size:.82rem}
.training-days-checkboxes input:checked+span{background:#7b486d;color:#fff;border-color:#7b486d}
.course-day-times{display:grid;gap:10px;margin-bottom:14px}
.course-day-time-row{display:grid;grid-template-columns:140px 1fr 1fr;gap:12px;align-items:end;border:1px solid #dce4eb;border-radius:12px;padding:12px;background:#fff}
.course-day-time-row>strong{align-self:center;color:#0b2748}
.course-day-time-row label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;font-weight:700}
.course-days-empty{padding:14px;border:1px dashed #cfd9e2;border-radius:12px;color:#667085;text-align:center;background:#f8fafc}
.training-form-note{background:#fff7e6;border:1px solid #f1d7a6;border-radius:11px;padding:11px 13px;color:#7a5510;font-size:.82rem;line-height:1.7;margin-bottom:14px}
.training-detail-toolbar{justify-content:flex-start;margin-bottom:10px}
.training-detail-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:15px}
.training-detail-hero h2{font-size:1.65rem;margin:4px 0 8px}.training-detail-actions{display:flex;gap:9px;flex-wrap:wrap}
.training-detail-status-line{display:flex;align-items:center;gap:10px;color:#667085}
.training-status{display:inline-flex;padding:5px 10px;border-radius:999px;font-weight:800;font-size:.76rem;background:#eef2f6;color:#344054}
.training-status.ongoing{background:#dcfce7;color:#166534}.training-status.upcoming{background:#dbeafe;color:#1d4ed8}.training-status.completed{background:#f3f4f6;color:#4b5563}.training-status.stopped{background:#fff3cd;color:#805b00}.training-status.cancelled{background:#fee2e2;color:#991b1b}
.training-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin-bottom:15px}
.training-info-card{display:flex;flex-direction:column;gap:6px}.training-info-card span{font-size:.78rem;color:#667085}.training-info-card strong{font-size:1.05rem;color:#0b2748}
.training-detail-section{margin-bottom:15px}.training-detail-section .panel-heading{padding:0;margin-bottom:12px}.training-detail-section h3{margin:3px 0}
.training-schedule-text{margin:0;line-height:1.9;color:#344054}
.training-student-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px}
.training-student-chips>span{border:1px solid #dce4eb;background:#f8fafc;border-radius:11px;padding:10px;display:flex;flex-direction:column;gap:4px}.training-student-chips small{color:#667085}
.training-sessions-table{min-width:920px}.training-sessions-table td,.attendance-table td{vertical-align:middle}
.course-students-dialog{width:min(760px,95vw);max-height:92vh;overflow:auto}
.course-student-search-label{display:flex;flex-direction:column;gap:7px;font-weight:800;margin-bottom:12px}
.course-students-list{border:1px solid #dce4eb;border-radius:13px;max-height:55vh;overflow:auto;background:#f8fafc;padding:8px}
.course-student-option{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;background:#fff;border:1px solid #e1e7ed;border-radius:10px;padding:10px;margin-bottom:7px;cursor:pointer}
.course-student-option:last-child{margin-bottom:0}.course-student-option input{width:18px;height:18px}.course-student-option span{display:flex;flex-direction:column;gap:3px}.course-student-option small{color:#667085}
.session-attendance-dialog{width:min(1000px,96vw);max-height:94vh;overflow:auto}
.attendance-session-fields{grid-template-columns:1fr}.attendance-table{min-width:780px}.attendance-table td:first-child strong,.attendance-table td:first-child small{display:block}.attendance-table td:first-child small{color:#667085;margin-top:3px}.attendance-status{min-width:130px}.attendance-note{min-width:280px}
@media(max-width:1050px){.training-summary,.training-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.training-days-checkboxes{grid-template-columns:repeat(4,minmax(80px,1fr))}}
@media(max-width:800px){.training-calendar-controls{grid-template-columns:1fr 1fr}.training-month-actions{grid-column:1/-1;justify-content:flex-start}.training-calendar-root{display:none}.training-mobile-calendar{display:block}.training-course-form-grid{grid-template-columns:1fr}.training-detail-hero{flex-direction:column}.course-day-time-row{grid-template-columns:100px 1fr 1fr}}
@media(max-width:560px){.training-summary,.training-detail-grid{grid-template-columns:1fr}.training-calendar-controls{grid-template-columns:1fr}.training-month-actions{display:grid;grid-template-columns:1fr 1fr}.training-month-actions button:nth-child(2){grid-column:1/-1;grid-row:2}.training-days-checkboxes{grid-template-columns:repeat(2,minmax(0,1fr))}.course-day-time-row{grid-template-columns:1fr 1fr}.course-day-time-row>strong{grid-column:1/-1}.training-detail-actions{width:100%}.training-detail-actions .button{flex:1}.training-session-card{min-width:0}.training-session-card strong{padding-left:58px}}

/* Ibdaa Academy v12 student table, modal notifications and payments */
.toast-region { z-index: 2147483646; pointer-events: none; }
.toast-region .toast { pointer-events: auto; }
.toast-region.inside-dialog { position: fixed; top: 18px; left: 18px; right: auto; width: min(420px, calc(100vw - 36px)); z-index: 2147483646; }

.advanced-student-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) repeat(3, minmax(175px, 1fr));
  gap: 12px;
  align-items: end;
}
.advanced-student-filters > label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .82rem; color: #344054; }
.advanced-student-filters > label input,
.advanced-student-filters > label select { width: 100%; }
.student-search-field { grid-column: span 2; }
.student-column-chooser { position: relative; align-self: end; }
.student-column-chooser > summary { list-style: none; cursor: pointer; min-height: 43px; display: inline-flex; align-items: center; justify-content: center; width: 100%; }
.student-column-chooser > summary::-webkit-details-marker { display: none; }
.student-column-options {
  position: absolute;
  inset: calc(100% + 8px) 0 auto auto;
  z-index: 40;
  width: min(330px, 86vw);
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  border: 1px solid #d7e0e8;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(11,39,72,.18);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.student-column-options label { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 9px; cursor: pointer; font-size: .82rem; font-weight: 700; }
.student-column-options label:hover { background: #f5f8fb; }
.student-column-options input { width: 17px; height: 17px; }
.students-table { min-width: 980px; }
.students-table th, .students-table td { white-space: nowrap; }
.students-table td[data-column-id="name_ar"], .students-table td[data-column-id="name_en"] { min-width: 180px; }
.student-name-link { appearance: none; border: 0; background: none; padding: 0; color: #0b5ea8; font: inherit; font-weight: 800; cursor: pointer; text-align: right; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.student-name-link:hover, .student-name-link:focus-visible { color: #7b486d; text-decoration-color: currentColor; }
.student-name-en-cell { direction: ltr; display: inline-block; text-align: left; font-weight: 700; color: #344054; }
.completed-course-count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: #e8f5ec; color: #166534; font-weight: 800; }
.student-dialog-heading-actions { display: flex; align-items: center; gap: 9px; }
.student-form-readonly input:disabled,
.student-form-readonly select:disabled,
.student-form-readonly textarea:disabled { opacity: 1; color: #25364a; background: #f5f7fa; border-color: #e1e6eb; -webkit-text-fill-color: #25364a; cursor: default; }
.student-form-readonly label { color: #59697a; }

.course-student-option { grid-template-columns: 1fr auto; cursor: default; }
.course-student-option > label { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; min-width: 0; cursor: pointer; }
.course-student-option > label span { min-width: 0; }
.course-student-payment { width: 39px; height: 39px; border: 1px solid #b9d9c2; border-radius: 11px; background: #ecf9f0; color: #166534; display: grid; place-items: center; font-size: 1.05rem; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.course-student-payment:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(22,101,52,.15); }

input[type="date"] { cursor: pointer; }

@media (max-width: 1050px) {
  .advanced-student-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-search-field { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  .advanced-student-filters { grid-template-columns: 1fr; }
  .student-search-field { grid-column: auto; }
  .student-column-options { grid-template-columns: 1fr; right: auto; left: 0; }
  .toast-region.inside-dialog { top: 10px; left: 10px; right: 10px; width: auto; }
  .student-dialog-heading { align-items: flex-start; }
  .student-dialog-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* Ibdaa Academy v15 navigation groups, inventory, notifications and To-Do */
.nav-group-toggle {
  width: 100%; border: 0; background: transparent; color: #c8d6e4; display: grid;
  grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 11px 13px;
  border-radius: 10px; font: inherit; text-align: right; cursor: pointer; margin-top: 4px;
}
.nav-group-toggle:hover, .nav-group-toggle.open { color: #fff; background: rgba(255,255,255,.08); }
.nav-group-toggle > span { color: #ff9b59; text-align: center; }
.nav-group-arrow { transition: transform .18s ease; font-size: .85rem; }
.nav-group-toggle.open .nav-group-arrow { transform: rotate(180deg); }
.nav-submenu { display: grid; gap: 3px; padding: 4px 17px 6px 0; }
.nav-submenu[hidden] { display: none !important; }
.nav-subitem { font-size: .9rem; padding-top: 9px; padding-bottom: 9px; }
.nav-subitem > span { opacity: .78; }

.notification-center { position: relative; order: 2; }
.current-user { order: 1; }
.notification-button {
  position: relative; width: 42px; height: 42px; border: 1px solid #d7e0e8; border-radius: 12px;
  background: #fff; display: grid; place-items: center; cursor: pointer; font-size: 1.05rem;
}
.notification-button:hover { border-color: #aabccc; background: #f7f9fb; }
.notification-count { position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #d92d20; color: #fff; font-size: .68rem; display: grid; place-items: center; border: 2px solid #fff; }
.notification-panel { position: absolute; left: 0; top: calc(100% + 10px); z-index: 1500; width: min(430px, calc(100vw - 24px)); max-height: min(650px, calc(100vh - 90px)); overflow: hidden; background: #fff; border: 1px solid #d8e1e9; border-radius: 16px; box-shadow: 0 22px 60px rgba(11,39,72,.24); }
.notification-panel[hidden] { display: none !important; }
.notification-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px; border-bottom: 1px solid #e6ebef; }
.notification-panel-head div { display: grid; gap: 4px; }
.notification-panel-head small { color: #667085; }
.notification-panel-actions { padding: 8px 14px; border-bottom: 1px solid #eef1f4; }
.notification-list { max-height: 490px; overflow: auto; padding: 8px; }
.notification-item { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 12px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; }
.notification-item + .notification-item { margin-top: 5px; }
.notification-item.unread { background: #eef7ff; border-color: #cfe5f8; }
.notification-item.read:hover { background: #f6f8fa; }
.notification-item-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #f0e9ef; color: #7b486d; font-weight: 900; }
.notification-item-body { min-width: 0; }
.notification-item-title { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.notification-item-title span { background: #0b6fb8; color: #fff; border-radius: 999px; padding: 2px 7px; font-size: .68rem; }
.notification-item p { margin: 5px 0; color: #344054; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.notification-item small { color: #667085; }
.notification-empty { padding: 32px 16px; text-align: center; color: #667085; }
.notification-compose-dialog { width: min(720px, 95vw); }
.notification-recipient-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.notification-recipient-fieldset { border: 1px solid #dce4eb; border-radius: 13px; padding: 12px; margin-bottom: 14px; }
.notification-recipient-fieldset legend { padding: 0 8px; font-weight: 800; }
.notification-recipient-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; max-height: 280px; overflow: auto; }
.notification-recipient-list label { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; border: 1px solid #e0e7ed; border-radius: 10px; padding: 9px; cursor: pointer; }
.notification-recipient-list label:hover { background: #f7f9fb; }
.notification-recipient-list input { width: 18px; height: 18px; }
.notification-recipient-list span { display: grid; gap: 2px; }
.notification-recipient-list small { color: #667085; }

.inventory-filters { display: grid; grid-template-columns: minmax(220px,1fr) minmax(280px,2fr) auto; gap: 12px; align-items: end; margin-bottom: 15px; }
.inventory-filters label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 800; }
.inventory-summary, .todo-summary { display: grid; grid-template-columns: repeat(3,minmax(150px,1fr)); gap: 12px; margin-bottom: 15px; }
.inventory-summary > div, .todo-summary > div { background: #fff; border: 1px solid #dbe3eb; border-radius: 14px; padding: 15px; display: grid; gap: 5px; }
.inventory-summary span, .todo-summary span { color: #667085; font-size: .82rem; }
.inventory-summary strong, .todo-summary strong { font-size: 1.35rem; color: #0b2748; }
.inventory-table { min-width: 1080px; }
.inventory-transfer-history { margin-top: 16px; }
.inventory-dialog { width: min(760px,95vw); }

.todo-filters { display: grid; grid-template-columns: repeat(2,minmax(190px,1fr)) minmax(280px,2fr); gap: 12px; margin-bottom: 15px; }
.todo-filters label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 800; }
.todo-list { display: grid; gap: 11px; }
.todo-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 13px; align-items: start; background: #fff; border: 1px solid #dce4eb; border-right: 5px solid #0b6fb8; border-radius: 15px; padding: 15px; box-shadow: 0 3px 12px rgba(11,39,72,.04); }
.todo-card.overdue { border-right-color: #d92d20; background: #fffafa; }
.todo-card.completed { border-right-color: #6b7280; background: #f7f8fa; opacity: .82; }
.todo-check { padding-top: 3px; }
.todo-check input { width: 21px; height: 21px; accent-color: #16794b; cursor: pointer; }
.todo-content h3 { margin: 0; font-size: 1.02rem; }
.todo-content p { margin: 7px 0 10px; color: #475467; line-height: 1.65; white-space: pre-wrap; }
.todo-title-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.todo-status { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.todo-status.open { background: #dbeafe; color: #1d4ed8; }
.todo-status.late { background: #fee2e2; color: #991b1b; }
.todo-status.done { background: #dcfce7; color: #166534; }
.todo-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: #667085; font-size: .78rem; }
.todo-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.todo-dialog { width: min(720px,95vw); }
.button.danger { background: #fff1f0; color: #b42318; border-color: #f6c9c5; }
.button.danger:hover { background: #fee4e2; }
.student-io-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 850px) {
  .notification-panel { position: fixed; top: 72px; left: 12px; right: 12px; width: auto; }
  .notification-recipient-list { grid-template-columns: 1fr; }
  .inventory-filters, .todo-filters { grid-template-columns: 1fr; }
  .inventory-summary, .todo-summary { grid-template-columns: 1fr; }
  .todo-card { grid-template-columns: auto minmax(0,1fr); }
  .todo-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* v16: compact training calendar, assignments, CRM/student linking */
#view-training-courses .training-toolbar{margin-bottom:8px;padding-block:4px}
#view-training-courses .training-toolbar h2{margin:2px 0;font-size:1.35rem}
#view-training-courses .training-toolbar p{margin-top:2px;font-size:.8rem}
#view-training-courses .training-calendar-controls{grid-template-columns:minmax(180px,1fr) minmax(155px,.7fr) minmax(155px,.7fr) auto;gap:8px;padding:10px 12px;margin-bottom:8px}
#view-training-courses .training-calendar-controls label{gap:4px;font-size:.76rem}
#view-training-courses .training-calendar-controls select,#view-training-courses .training-calendar-controls input{min-height:36px;padding-block:6px}
#view-training-courses .training-month-actions{gap:5px}
#view-training-courses .training-month-actions .button{padding:7px 10px;font-size:.76rem}
#view-training-courses .training-summary{gap:7px;margin-bottom:8px}
#view-training-courses .training-summary>div{border-radius:10px;padding:8px 10px;gap:1px}
#view-training-courses .training-summary strong{font-size:1.05rem}
#view-training-courses .training-summary span{font-size:.7rem}
#view-training-courses .training-calendar-root{min-height:58vh}
#view-training-courses .training-calendar-table th,#view-training-courses .training-calendar-table td{padding:6px}
#view-training-courses .training-date-column{min-width:105px;width:105px}
#view-training-courses .training-session-card{padding:7px 8px;border-radius:9px;gap:3px;min-height:84px}
#view-training-courses .training-session-card>strong{font-size:.78rem;line-height:1.3}
#view-training-courses .training-session-card>small,#view-training-courses .training-card-meta{font-size:.66rem}
#view-training-courses .training-card-time{font-size:.68rem}
#view-training-courses .training-card-icon{width:27px;height:27px;font-size:.72rem}
.collection-course-context{margin:0 0 12px;padding:10px 12px;border:1px solid #9dc7eb;background:#eff8ff;color:#0b4f82;border-radius:10px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:.82rem}
.collection-course-context[hidden]{display:none}
.attendance-departure-check{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:.76rem;font-weight:700}
.attendance-departure-check input{width:17px;height:17px;accent-color:#0b6fb8}
.attendance-assignment-note{min-width:210px}
.training-chip-payment{border:0;background:#eaf7ef;color:#126b3d;border-radius:8px;padding:5px 8px;font-weight:800;cursor:pointer;margin-inline-start:6px}
.training-chip-payment:hover{background:#d8f1e2}
.crm-row-actions{display:flex;gap:6px;flex-wrap:wrap;min-width:160px}
.lead-card-actions{margin-top:6px;border-top:1px solid rgba(11,39,72,.09);padding-top:6px}
.lead-card-actions button{width:100%;border:0;border-radius:7px;padding:6px 8px;background:#edf6ff;color:#0b5b96;font-weight:800;cursor:pointer}
.crm-student-lead-dialog{width:min(760px,95vw);max-height:92vh;overflow:auto}
.crm-student-lead-list{display:grid;gap:7px;max-height:48vh;overflow:auto;margin-top:12px;padding:3px}
.crm-student-lead-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #dbe3eb;border-radius:10px;padding:10px;background:#fff;cursor:pointer}
.crm-student-lead-option:hover{border-color:#80b7df;background:#f8fcff}
.crm-student-lead-option input{width:18px;height:18px;accent-color:#0b6fb8}
.crm-student-lead-option strong,.crm-student-lead-option small{display:block}
.crm-student-lead-option small{color:#667085;margin-top:2px}
.crm-student-lead-option em{font-style:normal;color:#9b2c2c;font-size:.72rem}
.crm-student-lead-option.disabled{opacity:.62;cursor:not-allowed;background:#f6f7f9}
.student-lead-context{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #91c6ea;background:linear-gradient(135deg,#eef8ff,#f7fbff);border-radius:13px;padding:12px 14px;margin-bottom:12px}
.student-lead-context>div{display:grid;gap:3px}
.student-lead-context span{color:#475467;font-size:.82rem}
.student-lead-context[hidden]{display:none}
@media(max-width:1050px){#view-training-courses .training-calendar-controls{grid-template-columns:1fr 1fr}.training-month-actions{grid-column:1/-1}}
@media(max-width:700px){.student-lead-context{align-items:flex-start;flex-direction:column}.student-lead-context .button{width:100%}.crm-student-lead-option{grid-template-columns:auto minmax(0,1fr)}.crm-student-lead-option em{grid-column:2}}