/* ============================================================
   Doctor web admin — shown inside a browser frame
   ============================================================ */

body.adminlab {
  min-height: 100dvh; display: flex; flex-direction: column;
  background:
    radial-gradient(56vw 38vw at 84% -8%, rgba(var(--brand-rgb), .12), transparent 60%),
    linear-gradient(180deg, var(--c-sand-50), #fff 40%);
  background-attachment: fixed;
}
[data-theme="dark"] body.adminlab { background: var(--c-sand-950); }

/* browser frame — sized to the viewport so the admin is always fully
   visible. Only the content column scrolls; the page itself never does. */
body.adminlab { height: 100dvh; overflow: hidden; }

.bframe {
  width: min(100% - 32px, 1420px);
  margin: var(--s-4) auto;
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 80px rgba(24,18,10,.20), 0 10px 24px rgba(24,18,10,.10),
              0 0 0 1px rgba(24,18,10,.08);
}
.bframe__bar {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--c-sand-100); padding: 10px var(--s-4);
  border-block-end: 1px solid var(--border-subtle);
  /* Browser chrome is the OS, not the page — it doesn't mirror with content. */
  direction: ltr; flex: none;
}
.bframe__dots { display: flex; gap: 7px; flex: none; }
.bframe__dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.bframe__url {
  flex: 1; background: #fff; border-radius: 8px; padding: 6px 12px;
  font-size: 12px; color: var(--text-muted); direction: ltr; text-align: center;
  border: 1px solid var(--border-subtle); max-width: 460px; margin-inline: auto;
}
[data-theme="dark"] .bframe { background: var(--c-sand-900); }
[data-theme="dark"] .bframe__bar { background: #241E17; }
[data-theme="dark"] .bframe__url { background: #17130E; }

/* ------------------------------------------------------- shell */
.adm {
  display: grid; grid-template-columns: 250px 1fr;
  flex: 1; min-height: 0; background: var(--c-sand-50);
}
[data-theme="dark"] .adm { background: #17130E; }
@media (max-width: 1080px) { .adm { grid-template-columns: 74px 1fr; } }

.adm-side {
  background: #1C1710; color: rgba(255,255,255,.72);
  padding: var(--s-4) var(--s-3); display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; scrollbar-width: thin;
}
.adm-side__brand {
  display: flex; align-items: center; gap: 10px; padding: 6px var(--s-2) var(--s-4);
}
.adm-side__brand img { width: 36px; height: 36px; flex: none; background: #fff; border-radius: 50%; }
.adm-side__brand b { color: #fff; font-size: 13.5px; display: block; line-height: 1.25; }
.adm-side__brand span { font-size: 11px; opacity: .6; }
.adm-side h4 {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .42; padding: var(--s-4) var(--s-3) 6px;
}
html[lang="ar"] .adm-side h4 { letter-spacing: 0; text-transform: none; font-size: 11px; }
.adm-nav {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px var(--s-3); border-radius: 10px; text-align: start;
  font-size: 13.5px; font-weight: 500; color: inherit; min-height: 42px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.adm-nav:hover { background: rgba(255,255,255,.08); color: #fff; }
.adm-nav.on { background: var(--c-blue-600); color: #fff; font-weight: 600; }
.adm-nav svg { flex: none; }
.adm-nav__badge {
  margin-inline-start: auto; background: var(--c-red-600); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
}
@media (max-width: 1080px) {
  .adm-side__brand span, .adm-side__brand b, .adm-side h4, .adm-nav span, .adm-nav__badge { display: none; }
  .adm-nav { justify-content: center; padding-inline: 0; }
}

/* -------------------------------------------------------- main */
.adm-main { display: flex; flex-direction: column; min-width: 0; }
.adm-top {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); background: #fff;
  border-block-end: 1px solid var(--border-subtle); flex-wrap: wrap;
}
[data-theme="dark"] .adm-top { background: var(--c-sand-900); }
.adm-top h1 { font-size: 20px; font-weight: 700; font-family: var(--font-display); }
.adm-top__sub { font-size: 12.5px; color: var(--text-muted); }
.adm-top__r { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); }
.adm-search {
  display: flex; align-items: center; gap: 8px;
  /* semantic, not the fixed sand-50 primitive — otherwise the field stays
     light in dark mode while its text goes light too */
  background: var(--surface-sunken);
  border: 1px solid var(--border-default); border-radius: var(--r-full);
  padding: 0 var(--s-4); height: 40px; min-width: 220px; color: var(--text-secondary);
  font-size: 13px;
}
.adm-who { display: flex; align-items: center; gap: 9px; padding-inline-start: var(--s-3); border-inline-start: 1px solid var(--border-subtle); }
.adm-who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.adm-who b { font-size: 13px; display: block; line-height: 1.25; }
.adm-who span { font-size: 11px; color: var(--text-muted); }

.adm-body { flex: 1; min-height: 0; padding: var(--s-5); overflow-y: auto; }

/* ------------------------------------------------------ pieces */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); }
.kpi {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  padding: var(--s-4);
}
[data-theme="dark"] .kpi, [data-theme="dark"] .panel { background: var(--c-sand-900); }
.kpi__t { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 7px; }
.kpi__v { font-size: 27px; font-weight: 700; font-family: var(--font-display); line-height: 1.2; margin-block: 6px 3px; }
.kpi__d { font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.kpi__d.up { color: var(--status-success); }
.kpi__d.dn { color: var(--status-error); }

.panel {
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); overflow: hidden;
}
.panel__h {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
}
.panel__h h3 { font-size: 15px; font-weight: 700; }
.panel__h .r { margin-inline-start: auto; display: flex; gap: var(--s-2); align-items: center; }
.panel__b { padding: 0 var(--s-4) var(--s-4); }
.grid2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s-4); }
@media (max-width: 1100px) { .grid2 { grid-template-columns: 1fr; } }

/* table */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: start; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 700; padding: 8px var(--s-3);
  border-block-end: 1px solid var(--border-subtle); white-space: nowrap;
}
html[lang="ar"] .tbl th { text-transform: none; letter-spacing: 0; font-size: 12px; }
.tbl td { padding: 11px var(--s-3); border-block-end: 1px solid var(--border-subtle); vertical-align: middle; }
.tbl tbody tr:last-child td { border-block-end: 0; }
.tbl tbody tr { cursor: pointer; transition: background .13s var(--ease); }
.tbl tbody tr:hover { background: var(--c-sand-50); }
[data-theme="dark"] .tbl tbody tr:hover { background: #241E17; }
.tbl .num { font-variant-numeric: tabular-nums; }

.who2 { display: flex; align-items: center; gap: 9px; }
.who2__av {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--c-sand-100); font-size: 15px;
}
.who2 b { font-size: 13.5px; font-weight: 600; display: block; }
.who2 span { font-size: 11.5px; color: var(--text-muted); }

/* schedule strip */
.sched { display: grid; gap: 7px; }
.slot {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--s-3); border-radius: 11px; background: var(--c-sand-50);
  border-inline-start: 3px solid var(--c-blue-600);
}
.slot.free { border-inline-start-color: var(--border-default); opacity: .62; }
.slot.done { border-inline-start-color: var(--c-teal-600); }
.slot__t { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 62px; }
.slot__n { flex: 1; font-size: 13px; font-weight: 600; }
[data-theme="dark"] .slot { background: #241E17; }

/* bar chart */
/* Charts do not mirror under RTL (W3C/Material guidance, and it keeps this
   consistent with the SVG growth charts in the patient app). Time still runs
   left to right; only the labels are translated. */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 168px; padding-block-start: var(--s-3); direction: ltr; }
.bars__c { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.bars__b {
  width: 100%; max-width: 40px; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--c-blue-500), var(--c-blue-600));
  position: relative; transition: filter .15s var(--ease);
}
.bars__c:hover .bars__b { filter: brightness(1.12); }
.bars__b span {
  position: absolute; inset-block-start: -19px; inset-inline: 0; text-align: center;
  font-size: 10.5px; font-weight: 700; color: var(--text-secondary);
}
.bars__l { font-size: 11px; color: var(--text-muted); }

/* toggles / form bits */
.sw {
  width: 44px; height: 25px; border-radius: 13px; background: var(--c-sand-300);
  position: relative; flex: none; transition: background .18s var(--ease);
}
.sw::after {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  width: 19px; height: 19px; border-radius: 50%; background: #fff;
  transition: inset-inline-start .18s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sw.on { background: var(--c-teal-600); }
.sw.on::after { inset-inline-start: 22px; }

.frow {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; border-block-end: 1px solid var(--border-subtle);
}
.frow:last-child { border-block-end: 0; }
.frow__tx { flex: 1; }
.frow__tx b { display: block; font-size: 13.5px; font-weight: 600; }
.frow__tx span { font-size: 12px; color: var(--text-muted); }

.inp {
  width: 100%; min-height: 42px; border-radius: 10px; padding: 0 var(--s-3);
  border: 1px solid var(--border-default); background: #fff; font-size: 13.5px;
}
textarea.inp { padding: 10px var(--s-3); min-height: 110px; resize: vertical; line-height: 1.65; }
.inp:focus { outline: none; border-color: var(--c-blue-600); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14); }
[data-theme="dark"] .inp { background: #241E17; }
.lbl { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-block-end: 6px; }

/* note kinds */
.notebox { border-radius: 12px; padding: var(--s-3) var(--s-4); font-size: 13.5px; line-height: 1.7; }
.notebox--pub { background: var(--c-blue-50); border: 1px solid var(--c-blue-100); }
.notebox--priv { background: #FBEEDF; border: 1px solid #F0DDBE; }
.notebox__h { font-size: 11.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-block-end: 6px; }
.notebox--pub .notebox__h { color: var(--c-blue-700); }
.notebox--priv .notebox__h { color: #7A4400; }

/* perms matrix */
.perms { width: 100%; border-collapse: collapse; font-size: 13px; }
.perms th, .perms td { padding: 9px var(--s-2); border-block-end: 1px solid var(--border-subtle); text-align: center; }
.perms th:first-child, .perms td:first-child { text-align: start; }
.perms th { font-size: 11.5px; color: var(--text-muted); font-weight: 700; }
.dot { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; }
.dot.y { background: var(--status-success-soft); color: var(--status-success); }
.dot.n { background: var(--c-sand-100); color: var(--c-sand-400); }

/* content cards */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-3); }
.ccard { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: var(--s-3); }
[data-theme="dark"] .ccard { background: var(--c-sand-900); }
.ccard__top { display: flex; align-items: center; gap: 9px; margin-block-end: 9px; }
.ccard__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--c-blue-50); display: grid; place-items: center; font-size: 17px; }
.ccard b { font-size: 13.5px; font-weight: 600; display: block; line-height: 1.4; }
.ccard span { font-size: 11.5px; color: var(--text-muted); }

/* review toolbar — collapsed by default so it never covers the design */
.admbar {
  /* end side, not start — the nav sidebar occupies the start edge */
  position: fixed; inset-block-end: var(--s-4); inset-inline-end: var(--s-4); z-index: 90;
  display: flex; align-items: center; gap: var(--s-1); padding: 5px;
  background: rgba(24,20,14,.88); backdrop-filter: blur(14px);
  border-radius: var(--r-full); box-shadow: var(--shadow-lg);
  transition: background .2s var(--ease);
}
.admbar:not(.open) { background: rgba(24,20,14,.62); }
.admbar:not(.open):hover { background: rgba(24,20,14,.88); }

.admbar__toggle {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: rgba(255,255,255,.82);
  transition: background .16s var(--ease), transform .28s var(--ease);
}
.admbar__toggle:hover { background: rgba(255,255,255,.13); color: #fff; }
.admbar.open .admbar__toggle { transform: rotate(90deg); background: rgba(255,255,255,.13); }

.admbar__panel {
  display: flex; gap: var(--s-1); align-items: center;
  max-inline-size: 0; opacity: 0; pointer-events: none; overflow: hidden;
  transition: max-inline-size .34s var(--ease-out), opacity .22s var(--ease);
}
.admbar.open .admbar__panel { max-inline-size: 560px; opacity: 1; pointer-events: auto; }

.admbar button, .admbar a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; min-width: 40px;
  padding-inline: var(--s-3); border-radius: var(--r-full);
  color: rgba(255,255,255,.78); font-size: 12px; font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.admbar__panel button:hover, .admbar__panel a:hover { background: rgba(255,255,255,.13); color: #fff; }
.admbar__panel button.on { background: var(--c-amber-600); color: #fff; }