:root {
    --clinic-ink: #10263f;
    --clinic-teal: #0a6c6c;
    --clinic-teal-dark: #084f4f;
    --clinic-mist: #f4f7f9;
    --clinic-line: #dde5ec;
    --clinic-danger: #b3261e;
    --clinic-danger-soft: #fdecea;
}

body {
    background: var(--clinic-mist);
    color: var(--clinic-ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header { position: sticky; top: 0; z-index: 1030; }

.app-navbar {
    background: var(--clinic-teal-dark);
    color: #fff;
    padding-block: .55rem;
}

.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .signed-in { color: #eef7f7; }

.app-navbar .navbar-brand { font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.app-navbar .navbar-brand small { font-weight: 400; opacity: .75; font-size: .78rem; }
.app-navbar .nav-link:hover { color: #fff; text-decoration: underline; }
.app-navbar .navbar-toggler { border-color: rgba(255,255,255,.4); }
.app-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .55rem;
    background: #fff;
    color: var(--clinic-teal-dark);
    font-weight: 700;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
}
.lang-switch:hover { background: rgba(255,255,255,.15); color: #fff; }
.lang-other { opacity: .75; font-weight: 400; }

.app-main {
    flex: 1 0 auto;
    padding: 1.25rem clamp(0.75rem, 2vw, 2rem) 2rem;
    max-width: 1400px;
}

.app-footer {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    padding: .85rem 1.5rem;
    font-size: .8rem;
    color: #5b6b7c;
    border-top: 1px solid var(--clinic-line);
    background: #fff;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.page-head h1 { font-size: 1.45rem; margin: 0; font-weight: 700; }
.page-head .sub { color: #5b6b7c; font-size: .9rem; margin: .2rem 0 0; }

.card { border: 1px solid var(--clinic-line); border-radius: .75rem; }
.card-header { background: #fff; border-bottom: 1px solid var(--clinic-line); font-weight: 600; }

.filter-bar { background: #fff; border: 1px solid var(--clinic-line); border-radius: .75rem; padding: .9rem 1rem; }

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    border: 1px solid var(--clinic-line);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .85rem;
    color: #44566a;
}

/* --- red flag banner: always visible, never behind a click --- */
.redflag-banner {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    background: var(--clinic-danger-soft);
    border: 2px solid var(--clinic-danger);
    border-inline-start: .55rem solid var(--clinic-danger);
    border-radius: .6rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    color: #7a1a15;
}
.redflag-icon { font-size: 1.5rem; line-height: 1; color: var(--clinic-danger); }
.redflag-body strong { display: block; font-size: 1rem; letter-spacing: .01em; }
.redflag-read { display: block; font-size: .82rem; opacity: .85; }
.redflag-list { margin: .4rem 0 0; padding-inline-start: 1.2rem; }
.redflag-item { font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; }

.redflag-clear {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: #2f6b4f;
    background: #eaf6ee;
    border: 1px solid #bfe2ca;
    border-radius: .5rem;
    padding: .35rem .75rem;
    margin-bottom: 1rem;
}

.flag-chip {
    display: inline-block;
    background: var(--clinic-danger-soft);
    color: var(--clinic-danger);
    border: 1px solid var(--clinic-danger);
    border-radius: 999px;
    padding: .05rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-inline-end: .2rem;
}

.table thead th {
    background: #f7fafc;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #52657a;
    border-bottom: 2px solid var(--clinic-line);
    white-space: nowrap;
}
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { background: #f2f8f8; }
.code-cell { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: var(--clinic-teal-dark); }
.muted-dash { color: #9aa8b6; }

.def-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .85rem 1.5rem; }
.def-grid dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7c8e; margin-bottom: .1rem; }
.def-grid dd { margin: 0 0 .35rem; font-weight: 500; }

.section-title {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7c8e;
    margin: 1.4rem 0 .6rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--clinic-line);
}

.login-wrap { display: flex; justify-content: center; padding-top: 4vh; }
.login-card { width: 100%; max-width: 430px; }

.version-badge {
    display: inline-block;
    background: var(--clinic-teal);
    color: #fff;
    border-radius: .4rem;
    padding: .05rem .45rem;
    font-size: .75rem;
    font-weight: 700;
}

.timeline-item { border-inline-start: 3px solid var(--clinic-line); padding: .5rem 0 .5rem .9rem; }
.timeline-item.is-current { border-inline-start-color: var(--clinic-teal); }

/* RTL polish: Bootstrap RTL handles the grid, these are the app-specific bits. */
body.is-rtl { text-align: right; }
body.is-rtl .table thead th { text-align: right; }
body.is-rtl .lang-switch { flex-direction: row-reverse; }
body.is-rtl .redflag-list { padding-inline-start: 1.2rem; }

@media (max-width: 575.98px) {
    .app-main { padding-inline: .6rem; }
    .page-head h1 { font-size: 1.2rem; }
    .def-grid { grid-template-columns: 1fr; }
}

/* ---------- module 2: appointment board ---------- */
.board-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: .6rem .8rem; margin-bottom: .9rem; }
.board-nav { display: flex; align-items: center; gap: .35rem; }
.board-date { display: flex; flex-direction: column; margin-inline-start: .4rem; min-width: 12rem; }
.board-date .hijri { font-size: .74rem; color: #6b7c8e; }
.board-filters { display: flex; align-items: center; gap: .4rem; }
.board-filters .form-control, .board-filters .form-select { width: auto; }
.board-viewswitch { display: flex; gap: .25rem; }

.kpi-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.4fr); gap: .5rem; margin-bottom: .9rem; }
.kpi { background: #fff; border: 1px solid var(--clinic-line); border-radius: .5rem; padding: .45rem .6rem; display: flex; flex-direction: column; border-inline-start: 4px solid var(--clinic-line); }
.kpi-value { font-size: 1.3rem; font-weight: 700; line-height: 1.1; }
.kpi-label { font-size: .72rem; color: #6b7c8e; }
.kpi-total { background: var(--clinic-mist); }
.kpi.st-booked { border-inline-start-color: #1f6feb; }
.kpi.st-arrived { border-inline-start-color: #b06f00; }
.kpi.st-inchair { border-inline-start-color: #6f42c1; }
.kpi.st-done { border-inline-start-color: #1a7f37; }
.kpi.st-noshow { border-inline-start-color: var(--clinic-danger); background: var(--clinic-danger-soft); }
.kpi.st-cancelled { border-inline-start-color: #8a94a6; }

.board-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: .9rem; align-items: start; }
.board-scroll { overflow-x: auto; }
table.board { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
table.board th, table.board td { border-bottom: 1px solid var(--clinic-line); vertical-align: top; }
.board-time-col { width: 62px; }
.board-col { text-align: center; padding: .45rem .35rem; background: var(--clinic-mist); font-weight: 600; min-width: 180px; position: sticky; top: 0; }
.board-col small { display: block; font-weight: 400; font-size: .68rem; color: #6b7c8e; }
.board-time { text-align: center; font-size: .72rem; color: #6b7c8e; font-weight: 600; padding-top: .45rem; white-space: nowrap; }
.board-cell { padding: .2rem; height: 56px; min-width: 180px; position: relative; transition: background .12s ease; }
.board-cell.is-drop { cursor: copy; }
.board-cell.is-over { background: #dff3f3; outline: 2px dashed var(--clinic-teal); outline-offset: -2px; }
.board-add { position: absolute; inset-inline-end: .25rem; inset-block-start: .25rem; width: 1.35rem; height: 1.35rem; line-height: 1; border: 1px dashed var(--clinic-line); background: #fff; color: #6b7c8e; border-radius: .35rem; font-size: .8rem; opacity: 0; transition: opacity .12s ease; }
.board-cell:hover .board-add, .board-add:focus-visible { opacity: 1; }

.appt-card { background: #fff; border: 1px solid var(--clinic-line); border-inline-start: 4px solid #1f6feb; border-radius: .45rem; padding: .3rem .4rem; margin-bottom: .25rem; cursor: pointer; box-shadow: 0 1px 2px rgba(16,38,63,.06); }
.appt-card.is-dragging { opacity: .45; }
.appt-card.st-booked { border-inline-start-color: #1f6feb; }
.appt-card.st-arrived { border-inline-start-color: #b06f00; }
.appt-card.st-inchair { border-inline-start-color: #6f42c1; }
.appt-card.st-done { border-inline-start-color: #1a7f37; opacity: .85; }
.appt-card.st-noshow { border-inline-start-color: var(--clinic-danger); background: var(--clinic-danger-soft); }
.appt-card.st-cancelled { border-inline-start-color: #8a94a6; opacity: .7; text-decoration: line-through; text-decoration-color: rgba(16,38,63,.3); }
.appt-head { display: flex; justify-content: space-between; gap: .3rem; align-items: baseline; }
.appt-time { font-weight: 700; font-size: .76rem; }
.appt-status { font-size: .66rem; color: #6b7c8e; text-transform: uppercase; letter-spacing: .03em; }
.appt-patient { font-weight: 600; font-size: .84rem; }
.appt-meta { font-size: .7rem; color: #6b7c8e; }
.appt-flags { display: flex; flex-wrap: wrap; gap: .15rem; margin-top: .15rem; }
.appt-reminder { display: flex; gap: .2rem; margin-top: .15rem; }
.rem-chip { font-size: .6rem; border: 1px solid var(--clinic-line); border-radius: .25rem; padding: 0 .2rem; color: #6b7c8e; }
.rem-chip.is-sent { color: #1a7f37; border-color: #1a7f37; }
.appt-actions { display: flex; flex-wrap: wrap; gap: .15rem; margin-top: .2rem; }
.appt-act { font-size: .62rem; padding: .05rem .25rem; border: 1px solid var(--clinic-line); background: #fff; border-radius: .25rem; color: var(--clinic-ink); }
.appt-act:hover { background: var(--clinic-teal); color: #fff; border-color: var(--clinic-teal); }
.appt-act.is-danger:hover { background: var(--clinic-danger); border-color: var(--clinic-danger); }

.board-side { display: flex; flex-direction: column; gap: .8rem; }
.side-card { padding: .7rem .8rem; }
.side-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7c8e; margin-bottom: .4rem; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; font-size: .82rem; }
.waitlist-row { display: flex; justify-content: space-between; gap: .4rem; align-items: center; }
.waitlist-add { display: grid; gap: .3rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--clinic-line); }
.legend { display: flex; flex-wrap: wrap; gap: .3rem; }
.legend-chip { font-size: .68rem; padding: .1rem .4rem; border-radius: .3rem; border: 1px solid var(--clinic-line); background: #fff; border-inline-start-width: 3px; }
.legend-chip.st-booked { border-inline-start-color: #1f6feb; }
.legend-chip.st-arrived { border-inline-start-color: #b06f00; }
.legend-chip.st-inchair { border-inline-start-color: #6f42c1; }
.legend-chip.st-done { border-inline-start-color: #1a7f37; }
.legend-chip.st-noshow { border-inline-start-color: var(--clinic-danger); }
.legend-chip.st-cancelled { border-inline-start-color: #8a94a6; }

.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.week-day { overflow: hidden; }
.week-day-head { padding: .45rem .55rem; background: var(--clinic-mist); border-bottom: 1px solid var(--clinic-line); position: relative; }
.week-day-head a { color: var(--clinic-ink); text-decoration: none; }
.week-day.is-today .week-day-head { background: #dff3f3; }
.week-count { position: absolute; inset-inline-end: .5rem; inset-block-start: .45rem; font-size: .7rem; background: #fff; border: 1px solid var(--clinic-line); border-radius: 999px; padding: 0 .35rem; }
.week-day-body { padding: .3rem; display: flex; flex-direction: column; gap: .25rem; min-height: 90px; }
.appt-history { margin-top: 1rem; border-top: 1px solid var(--clinic-line); padding-top: .6rem; }
.reminder-set { border: 0; padding: 0; margin: 0; }
.reminder-set legend { float: none; width: auto; font-size: .85rem; }

body.is-rtl table.board .board-add { inset-inline-end: .25rem; }
body.is-rtl .appt-card { text-align: right; }
body.is-rtl .appt-time { direction: ltr; display: inline-block; }

@media (max-width: 1199.98px) {
    .board-layout { grid-template-columns: minmax(0, 1fr); }
    .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .week-grid { grid-template-columns: minmax(0, 1fr); }
    .board-filters { flex-wrap: wrap; }
    .board-cell, .board-col { min-width: 150px; }
}

/* ---------- module 3: visit chart ---------- */
.visit-timeline .list-group-item { border-inline-start: 3px solid var(--clinic-teal); }
.appt-chart {
    display: inline-block; font-size: .7rem; font-weight: 600; text-decoration: none;
    padding: .05rem .4rem; border-radius: .25rem; border: 1px solid currentColor;
    color: inherit; opacity: .85;
}
.appt-chart:hover { opacity: 1; background: rgba(255, 255, 255, .55); }
#proc-table td { vertical-align: middle; }
#proc-table .proc-remove { line-height: 1; padding: .1rem .4rem; }
#procedures .card-header .badge { font-weight: 600; }
.def-grid dd[dir="rtl"] { text-align: start; }

/* ---------- module 4: recalls + messages ---------- */
.kpi-link { display: block; text-decoration: none; color: inherit; }
.kpi-link:hover { border-color: #0d6efd; }
.kpi-danger .kpi-value { color: #b02a37; }
.recall-tabs .nav-link { border-radius: 999px; padding: .3rem .9rem; }
.row-overdue { background: #fff5f5; }
.rl-type { background: #eef4ff; color: #0b3a82; font-weight: 600; }
.badge.msg-queued { background: #fff3cd; color: #664d03; }
.badge.msg-sent { background: #d1e7dd; color: #0f5132; }
.badge.msg-failed { background: #f8d7da; color: #842029; }

/* ---------- module 5: stock and consumables ---------- */
.badge.exp-expired { background: #842029; color: #fff; }
.badge.exp-30 { background: #dc3545; color: #fff; }
.badge.exp-60 { background: #fd7e14; color: #fff; }
.badge.exp-90 { background: #ffc107; color: #1f1f1f; }
.badge.exp-later { background: #d1e7dd; color: #0f5132; }
.badge.exp-none { background: #e9ecef; color: #495057; }
.badge.stock-drug { background: #cfe2ff; color: #084298; }
.badge.stock-implant { background: #e2d9f3; color: #432874; }
.badge.mv-in { background: #d1e7dd; color: #0f5132; }
.badge.mv-out { background: #cfe2ff; color: #084298; }
.badge.mv-adjust { background: #fff3cd; color: #664d03; }
.stock-table td, .stock-table th { white-space: nowrap; }
.stock-table td:first-child { white-space: normal; }
tr.row-low { background: #fff5f5; }
tr.plan-hit td { background: #eef6ff; }
#fefoTable .plan-cell { font-weight: 600; }
.text-muted small { color: inherit; }
.msg-body {
    white-space: pre-wrap;
    word-break: break-word;
    background: #f6f8fa;
    border: 1px solid #e2e6ea;
    border-radius: .5rem;
    padding: .85rem 1rem;
    font-family: inherit;
    font-size: .95rem;
    margin: 0 0 1rem;
}
.msg-cell { display: block; white-space: pre-wrap; word-break: break-word; max-height: 4.5em; overflow: hidden; }
.btn.copied { background: #198754 !important; border-color: #198754 !important; color: #fff !important; }
.is-rtl .row-overdue { background: #fff5f5; }