/* theme on top of Bootstrap 5 (the RTL build is loaded for Arabic) */
:root {
  --brand: #12355b;
  --brand-2: #1d5fa8;
  --accent: #19a7ce;
  --ok: #198754;
  --warn: #e0a100;
  --danger: #d63939;
  --bg: #f3f6fa;
  --card-border: #e3e8ef;
  --muted: #6b7785;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}
html[dir="rtl"] { --bs-body-font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; }
body { background: var(--bg); font-family: var(--bs-body-font-family); color: #1d2733; }

/* ---------- top bar and tabs ---------- */
.app-bar { background: linear-gradient(120deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 2px 10px rgba(18, 53, 91, .25);
           position: relative; z-index: 1030; }
.app-bar .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; color: #fff; text-decoration: none; display: flex; align-items: center; gap: .55rem; }
.app-bar .brand img { width: 30px; height: 30px; }
.app-bar .btn-outline-light { --bs-btn-border-color: rgba(255,255,255,.45); }
.tabs-bar { background: #fff; border-bottom: 1px solid var(--card-border); position: sticky; top: 0; z-index: 1020; }
.tabs-bar .nav-link { color: #44515f; font-weight: 500; border-radius: .6rem; padding: .45rem .8rem; white-space: nowrap; }
.tabs-bar .nav-link:hover { background: #eef3f9; }
.tabs-bar .nav-link.active { background: var(--brand-2); color: #fff; }
.tabs-bar .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.tabs-bar .badge { font-size: .7rem; }

/* ---------- cards ---------- */
.card { border: 1px solid var(--card-border); border-radius: .9rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card > .card-header { background: transparent; border-bottom: 1px solid var(--card-border); font-weight: 600; display: flex;
  align-items: center; gap: .5rem; padding: .8rem 1rem; }
.card > .card-header .bi { color: var(--brand-2); font-size: 1.1rem; }
.card > .card-header .sub { font-weight: 400; color: var(--muted); font-size: .85rem; }
.card-body { padding: 1rem; }
.section-gap > * + * { margin-top: 1rem; }
.note-text { font-size: .875rem; color: var(--muted); margin-bottom: .5rem; }
.empty { color: #8a95a3; font-size: .9rem; display: flex; align-items: center; gap: .45rem; }
.empty::before { content: "\F431"; font-family: "bootstrap-icons"; opacity: .7; }
.muted { color: var(--muted); font-size: .8rem; }
.table { --bs-table-hover-bg: #f2f6fb; font-size: .875rem; margin-bottom: 0; }
.table thead th { background: #f5f8fc; color: #4a5866; font-weight: 600; white-space: nowrap; }
.table td.notes { min-width: 220px; }
.table-wrap { overflow-x: auto; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .5px; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.tile { background: #fff; border: 1px solid var(--card-border); border-radius: .8rem; padding: .75rem .9rem; position: relative; overflow: hidden; }
.tile::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--brand-2); }
.tile.warn::before { background: var(--warn); } .tile.danger::before { background: var(--danger); } .tile.ok::before { background: var(--ok); }
.tile-v { font-size: 1.35rem; font-weight: 700; color: var(--brand); line-height: 1.2; }
.tile-v bdi { font-size: 1rem; }
.tile-k { font-size: .78rem; color: var(--muted); margin-top: .15rem; }

/* ---------- labels and risk ---------- */
.lab { font-weight: 600; }
.lab-seizure { color: var(--danger); } .lab-false-alarm { color: #b07d00; } .lab-non-seizure { color: var(--ok); }
.risk { display: inline-block; padding: .2rem .65rem; border-radius: 1rem; color: #fff; font-weight: 600; font-size: .78rem; }
.risk-none { background: var(--ok); } .risk-medium { background: var(--warn); } .risk-high { background: var(--danger); }
.verdict-big { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: .8rem; margin-bottom: .75rem; }
.verdict-big .bi { font-size: 2rem; }
.verdict-big.v-seizure { background: #fdecec; color: #9e1c1c; }
.verdict-big.v-false-alarm { background: #fff6dd; color: #7a5700; }
.verdict-big.v-non-seizure { background: #e8f6ee; color: #11683d; }
.verdict-big .v-title { font-size: 1.15rem; font-weight: 700; }

/* ---------- window chips ---------- */
.windows { display: flex; flex-wrap: wrap; gap: .3rem; direction: ltr; }
.win { width: 46px; padding: .25rem 0; text-align: center; font-size: .7rem; border-radius: .4rem; color: #fff; line-height: 1.25; }
.win.s { background: var(--danger); } .win.n { background: var(--ok); } .win.x { background: #9aa5b1; }

/* ---------- agent steps (timeline) ---------- */
#steps { max-height: 560px; overflow-y: auto; padding-inline-end: .25rem; }
.step { position: relative; padding: .45rem .7rem .45rem 2.1rem; margin-bottom: .35rem; font-size: .84rem; border-radius: .6rem;
  background: #f7f9fc; overflow-wrap: anywhere; animation: fadein .25s ease-out; }
html[dir="rtl"] .step { padding: .45rem 2.1rem .45rem .7rem; }
.step > .bi { position: absolute; inset-inline-start: .65rem; top: .5rem; color: var(--brand-2); }
.step b { color: var(--brand); }
.step.display { background: #eef8f2; } .step.display > .bi { color: var(--ok); }
.step.note { background: #fdf0f0; color: #a12a2a; } .step.note > .bi { color: var(--danger); }
.step.done { background: #e9f1fb; }
.step .ms { color: #8a95a3; float: inline-end; margin-inline-start: .5rem; font-size: .75rem; }
.step .args { color: #5a6774; font-size: .78rem; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- run origin banner ---------- */
.run-banner { display: flex; align-items: center; gap: .6rem; border-radius: .75rem; padding: .6rem .9rem; font-size: .9rem; }
.run-banner.api { background: #fff4e5; border: 1px solid #ffd59a; color: #7a4a00; }
.run-banner.web { background: #eaf2fd; border: 1px solid #c8dcf7; color: #1d4f8f; }
.run-banner .spinner-grow { width: .8rem; height: .8rem; }

/* ---------- alerts ---------- */
.alert-card { border: 1px solid #f3c2c2; background: #fff7f7; border-radius: .8rem; padding: .75rem .9rem; margin-bottom: .6rem; }
.alert-card h3 { margin: 0 0 .35rem; font-size: .95rem; color: #9e1c1c; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.alert-card p { margin: .2rem 0; font-size: .85rem; }
.alert-card.done { border-color: var(--card-border); background: #fafbfc; }
.alert-card.done h3 { color: #4a5866; }
.danger-text { color: var(--danger); font-weight: 600; }
.ok { color: var(--ok); font-size: .875rem; }
.err { color: var(--danger); font-size: .875rem; min-height: 1.1rem; }
.msg-box { border: 1px solid #c8dcf7; background: #f3f8ff; border-radius: .8rem; padding: .7rem .9rem; margin-bottom: .6rem; }

/* ---------- patient bar and cards ---------- */
.patient-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.patient-bar .form-select { min-width: 260px; max-width: 100%; }
.pchip { display: inline-flex; align-items: center; gap: .3rem; background: #eef3f9; color: #34495e; border-radius: 1rem; padding: .2rem .65rem; font-size: .8rem; }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }
.pcard { border: 1px solid var(--card-border); border-radius: .8rem; padding: .8rem .9rem; font-size: .875rem; line-height: 1.7; cursor: pointer;
  background: #fff; transition: box-shadow .15s, border-color .15s; }
.pcard:hover { box-shadow: 0 4px 14px rgba(16, 24, 40, .08); }
.pcard.sel { border-color: var(--brand-2); box-shadow: 0 0 0 .2rem rgba(29, 95, 168, .12); }
.pcard.danger { border-color: #f0a3a3; background: #fffafa; }
.avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
  background: #dce9f8; color: var(--brand); flex: none; }
tr.sel td { background: #eef5fd !important; }

/* ---------- profile tables and forms ---------- */
.profile td:first-child { width: 210px; color: var(--muted); }
.profile .form-control, .profile .form-select { font-size: .875rem; }
.actions { display: flex; gap: .5rem; margin-top: .75rem; align-items: center; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem .9rem; }
.source-picker .btn { display: flex; align-items: center; gap: .4rem; }

/* ---------- maps and charts ---------- */
.map { height: 380px; border-radius: .7rem; border: 1px solid var(--card-border); z-index: 0; }
.map.small { height: 230px; }
.chart-box { position: relative; height: 260px; }
.chart-box.eeg { height: 240px; }

/* ---------- notifications and toasts ---------- */
.notif { border: 1px solid var(--card-border); border-radius: .75rem; padding: .6rem .85rem; margin-bottom: .5rem; font-size: .875rem; background: #fff; }
.notif.unread { border-inline-start: 4px solid var(--brand-2); background: #f7faff; }
.notif.danger { border-inline-start: 4px solid var(--danger); }
#toasts { position: fixed; top: 7rem; inset-inline-end: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem;
  max-width: min(380px, calc(100vw - 2rem)); }
#toasts .toast { cursor: pointer; border-inline-start: 5px solid var(--brand-2); }
#toasts .toast.danger { border-inline-start-color: var(--danger); }
#toasts .toast.remote { border-inline-start-color: #f59f00; }

/* ---------- technical details for patients ---------- */
body.hide-tech .tech { display: none !important; }
.hidden { display: none !important; }
.ltr { direction: ltr; }

/* ---------- login page ---------- */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.login-hero { background: linear-gradient(150deg, #0e2a49, #1d5fa8 60%, #19a7ce); color: #fff; padding: 3rem; display: flex;
  flex-direction: column; justify-content: center; gap: 1.25rem; position: relative; overflow: hidden; }
.login-hero h1 { font-weight: 800; font-size: 2.1rem; }
.login-hero .wave { position: absolute; inset-inline: 0; bottom: 0; opacity: .18; }
.login-hero .feat { display: flex; gap: .75rem; align-items: flex-start; }
.login-hero .feat .bi { font-size: 1.4rem; background: rgba(255,255,255,.15); border-radius: .6rem; padding: .35rem .55rem; }
.login-side { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.login-box { max-width: 480px; width: 100%; margin: 0 auto; }
.role-switch .btn { flex: 1; }
@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }
  .login-hero { padding: 1.5rem; }
  .login-hero .feats { display: none !important; }
}
@media (max-width: 600px) {
  .profile td:first-child { width: 120px; }
  .map { height: 300px; }
  .chart-box { height: 210px; }
}