@import url('fonts.css');
@import url('main.css');

/* ===========================================================================
   Al Hayat Medical Center — staff portal
   Sidebar shell, tables, stat cards and form chrome for /admin.
   ======================================================================== */

body.admin { display: block; background: var(--bg-tint); }

.shell { display: grid; grid-template-columns: 260px 1fr; min-block-size: 100vh; }

/* ------------------------------------------------------------------ sidebar */
.sidebar {
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; inset-block-start: 0; block-size: 100vh; overflow-y: auto;
  z-index: 60;
}
.sidebar__brand { display: flex; align-items: center; gap: .65rem; padding: 1.25rem 1.25rem 1rem; }
.sidebar__nav { flex: 1; padding: .5rem .85rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sidebar__group { display: flex; flex-direction: column; gap: .15rem; }
.sidebar__label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .5rem .6rem .35rem; }
[dir='rtl'] .sidebar__label { letter-spacing: 0; }
.sidebar__link {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .7rem; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 500; color: var(--ink-2);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidebar__link svg { inline-size: 18px; block-size: 18px; flex-shrink: 0; }
.sidebar__link:hover { background: var(--surface-alt); color: var(--ink); }
.sidebar__link.is-active { background: var(--accent-soft); color: var(--brand); font-weight: 600; }
.sidebar__badge { margin-inline-start: auto; min-inline-size: 20px; padding-inline: 5px; block-size: 20px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--brand); color: var(--brand-fg); font-size: .68rem; font-weight: 700; }
.sidebar__foot { padding: .85rem; border-block-start: 1px solid var(--line); display: flex; flex-direction: column; gap: .2rem; }
.sidebar__user { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem .8rem; }
.sidebar__avatar { inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--brand); color: var(--brand-fg); display: grid; place-items: center; font-weight: 700; font-size: .82rem; flex-shrink: 0; }
.sidebar__user-name { font-size: .87rem; font-weight: 600; }
.sidebar__user-role { font-size: .76rem; color: var(--muted); }
.sidebar__scrim { display: none; }

/* ---------------------------------------------------------------- topbar */
.main { display: flex; flex-direction: column; min-inline-size: 0; }
.topbar {
  position: sticky; inset-block-start: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem;
  padding-inline: clamp(1rem, 2.5vw, 1.75rem); block-size: 64px;
  background: color-mix(in srgb, var(--bg-tint) 92%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}
.topbar__burger { display: none; }
.topbar__title { font-size: 1.1rem; font-weight: 700; }
.topbar__actions { margin-inline-start: auto; display: flex; align-items: center; gap: .4rem; }

.content { flex: 1; padding: clamp(1.1rem, 2.5vw, 1.75rem); }

.page-title { font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 700; font-family: var(--font-display); }
.page-sub { color: var(--muted); font-size: .92rem; margin-block-start: .3rem; margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem); }

/* -------------------------------------------------------------- stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; margin-block-end: clamp(1.25rem, 2.5vw, 1.75rem); }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem 1.4rem; }
.stat-card__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: .8rem; }
.stat-card__label { font-size: .8rem; color: var(--muted); font-weight: 600; }
.stat-card__icon { inline-size: 36px; block-size: 36px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--brand); display: grid; place-items: center; }
.stat-card__icon svg { inline-size: 18px; block-size: 18px; }
.stat-card__value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-card__foot { margin-block-start: .55rem; font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.trend { display: inline-flex; align-items: center; gap: .15rem; font-weight: 700; }
.trend svg { inline-size: 13px; block-size: 13px; }
.trend--up { color: var(--ok); }
.trend--down { color: var(--bad); }
.trend--down svg { transform: rotate(180deg); }

/* ------------------------------------------------------------------ boxes */
.panel-grid { display: grid; gap: 1rem; }
.panel-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.box__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-block-end: 1px solid var(--line); }
.box__title { font-weight: 700; font-size: .96rem; }
.box__link { font-size: .85rem; color: var(--brand); font-weight: 600; }
.box__link:hover { text-decoration: underline; }
.box__body { padding: 1.1rem 1.25rem; }
.box__body--flush { padding: 0; }

/* ------------------------------------------------------------------ table */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .89rem; }
.table th, .table td { padding: .8rem 1rem; text-align: start; border-block-end: 1px solid var(--line); white-space: nowrap; }
.table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; background: var(--surface-alt); }
[dir='rtl'] .table th { letter-spacing: 0; }
.table td { vertical-align: middle; }
.table tbody tr:hover { background: var(--surface-alt); }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }
.th-sort { display: inline-flex; align-items: center; gap: .3rem; color: inherit; }
.th-sort svg { opacity: .4; }
.th-sort.is-sorted svg { opacity: 1; color: var(--brand); }
.th-sort.is-desc svg { transform: rotate(180deg); }
.cell-title { font-weight: 600; }
.cell-sub { font-size: .8rem; color: var(--muted); white-space: normal; }

.empty { text-align: center; padding: 4rem 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
.empty__icon { inline-size: 52px; block-size: 52px; margin-inline: auto 1rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface-alt); color: var(--muted); }
.empty h3 { font-size: 1.05rem; margin-block-end: .4rem; }
.empty p { color: var(--muted); font-size: .9rem; }

/* -------------------------------------------------------------- toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin-block-end: 1.1rem; }
.toolbar .input, .toolbar .select { inline-size: auto; }
.toolbar__search { position: relative; flex: 1 1 14rem; min-inline-size: 0; }
.toolbar__search input { padding-inline-start: 2.6rem; }
[dir='rtl'] .toolbar__search input { padding-inline-start: 1rem; padding-inline-end: 2.6rem; }
.toolbar__search svg { position: absolute; inset-block-start: 50%; inset-inline-start: .9rem; transform: translateY(-50%); inline-size: 17px; block-size: 17px; color: var(--muted); }
[dir='rtl'] .toolbar__search svg { inset-inline-start: auto; inset-inline-end: .9rem; }
.toolbar__spacer { margin-inline-start: auto; }

.status-form { display: inline-block; }
.status-form .select { font-size: .82rem; padding: .4rem .65rem; padding-inline-end: 2.2rem; border-radius: var(--r-full); }

.icon-action { inline-size: 34px; block-size: 34px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-2); border: 1px solid var(--line); transition: all var(--t-fast) var(--ease); }
.icon-action:hover { background: var(--surface-alt); color: var(--ink); }
.icon-action--danger:hover { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-bg); }
.row-actions { display: flex; gap: .4rem; }

/* --------------------------------------------------------------- pagination */
.pagination { display: flex; align-items: center; gap: .3rem; margin-block-start: 1.25rem; flex-wrap: wrap; }
.pagination a, .pagination span { min-inline-size: 34px; block-size: 34px; padding-inline: .4rem; display: grid; place-items: center; border-radius: var(--r-sm); font-size: .86rem; color: var(--ink-2); }
.pagination a:hover { background: var(--surface-alt); }
.pagination .is-current { background: var(--brand); color: var(--brand-fg); font-weight: 700; }
.pagination .is-disabled { opacity: .35; pointer-events: none; }
.pagination .gap { color: var(--muted); }

/* -------------------------------------------------------------- form page */
.form-page { max-inline-size: 46rem; }
.form-page--wide { max-inline-size: 62rem; }
.fieldset { display: grid; gap: 1.1rem; margin-block-end: 1.5rem; }
.fieldset legend, .fieldset__legend { font-weight: 700; font-size: .95rem; margin-block-end: .3rem; }
.form-actions { display: flex; gap: .75rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); margin-block-start: .5rem; }

.days-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.day-chip { position: relative; }
.day-chip input { position: absolute; opacity: 0; pointer-events: none; }
.day-chip label {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 3.4rem; padding: .5rem .7rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  font-size: .84rem; font-weight: 600; cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.day-chip input:checked + label { background: var(--brand); border-color: var(--brand); color: var(--brand-fg); }

.avatar-upload { display: flex; align-items: center; gap: 1.1rem; }
.avatar-upload__preview { inline-size: 80px; block-size: 80px; border-radius: 50%; overflow: hidden; background: var(--surface-alt); flex-shrink: 0; border: 1px solid var(--line); }
.avatar-upload__preview img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ----------------------------------------------------------------- auth */
.auth-page { min-block-size: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .auth-page { grid-template-columns: 1fr; } .auth-aside { display: none; } }
.auth-aside { position: relative; background: var(--brand); color: var(--brand-fg); padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.auth-aside__bg { position: absolute; inset: 0; opacity: .18; }
.auth-aside__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.auth-aside__quote { position: relative; font-size: 1.3rem; line-height: 1.5; max-inline-size: 26rem; }
.auth-aside__by { position: relative; margin-block-start: 1rem; opacity: .8; font-size: .9rem; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--bg); }
.auth-box { inline-size: 100%; max-inline-size: 24rem; }
.auth-box h1 { font-size: 1.6rem; margin-block: 1.5rem .4rem; }
.auth-demo { margin-block-start: 1.75rem; padding: 1rem 1.2rem; background: var(--accent-soft); border-radius: var(--r); font-size: .85rem; }
.auth-demo code { font-family: ui-monospace, monospace; background: var(--surface); padding: .1rem .4rem; border-radius: 4px; }

.pw-field { position: relative; }
.pw-field .input { padding-inline-end: 2.8rem; }
[dir='rtl'] .pw-field .input { padding-inline-end: 1rem; padding-inline-start: 2.8rem; }
.pw-toggle { position: absolute; inset-inline-end: .8rem; inset-block-start: 50%; transform: translateY(-50%); color: var(--muted); }
[dir='rtl'] .pw-toggle { inset-inline-end: auto; inset-inline-start: .8rem; }
.pw-toggle.is-on { color: var(--brand); }

/* ------------------------------------------------------------- detail view */
.detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.timeline { display: grid; gap: 1rem; }
.timeline-item { display: flex; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.timeline-item__icon { inline-size: 38px; block-size: 38px; flex-shrink: 0; border-radius: 50%; background: var(--accent-soft); color: var(--brand); display: grid; place-items: center; }
.timeline-item__body { flex: 1; }
.timeline-item__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: .3rem; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: 270px; transform: translateX(-100%); transition: transform var(--t) var(--ease-out); z-index: 200; }
  [dir='rtl'] .sidebar { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(100%); }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar__scrim { display: block; position: fixed; inset: 0; background: rgba(10,16,15,.5); opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease); z-index: 190; }
  .sidebar__scrim.is-open { opacity: 1; pointer-events: auto; }
  .topbar__burger { display: grid; }
}