/* ─── Clinic portal (sidebar layout) ─────────────────────────── */

.portal-layout {
  display: flex;
  min-height: 100vh;
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.portal-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--grey-200);
  color: var(--grey-700);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 20px 14px;
  transition: width .15s;
}

/* Fixed (viewport) positioning, not absolute within .portal-sidebar — two reasons. First, the
   sidebar has overflow-y: auto, and per the CSS overflow spec, once one axis isn't visible the
   other computes to auto too, so anything bleeding past the sidebar's own edge would get clipped
   the same way the timeline's hover-date bubble was earlier — fixed positioning escapes that
   clipping since its containing block is the viewport, not the sidebar. Second, it
   keeps the button pinned to the same spot on screen as the sticky sidebar itself while the main
   content scrolls, rather than scrolling away with page content the way an absolutely-positioned
   descendant would. left is set per state below since it must sit on the sidebar's actual right
   edge, which moves between expanded and collapsed widths. */
.portal-sidebar__toggle {
  position: fixed;
  top: 96px;
  left: 247px; /* expanded sidebar is 260px wide — 260 - (26 / 2) */
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--grey-200);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--grey-500);
  cursor: pointer;
  z-index: 2;
  transition: left .15s, color .15s, border-color .15s;
}

.portal-sidebar__toggle:hover { color: var(--blue-mid); }

.portal-sidebar__toggle svg { transition: transform .2s; }

.portal-sidebar--collapsed .portal-sidebar__toggle {
  left: 55px; /* collapsed sidebar is 68px wide — 68 - (26 / 2) */
}

.portal-sidebar--collapsed .portal-sidebar__toggle svg { transform: rotate(180deg); }

.portal-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--grey-900);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 4px 10px 20px;
}

.portal-sidebar__logo:hover { text-decoration: none; }

.portal-sidebar__logo span { display: flex; flex-direction: column; line-height: 1.3; }

.portal-sidebar__logo small {
  font-weight: 400;
  font-size: 12px;
  color: var(--grey-500);
}

/* Gold "admin preview" box shown while a super admin is impersonating */
.portal-impersonation {
  background: var(--yellow-light);
  border: 1px solid #e5c76b;
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 18px;
  font-size: 12px;
  color: #8a6d1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portal-impersonation button {
  background: none;
  border: none;
  color: #8a6d1a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
}

.portal-impersonation button:hover { text-decoration: underline; }

/* ─── Sidebar nav ────────────────────────────────────────────── */
.portal-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }

.portal-nav__section {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-500);
  padding: 18px 10px 6px;
}

.portal-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
  color: var(--grey-700);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.portal-nav__item:hover { background: var(--grey-100); color: var(--grey-900); text-decoration: none; }

.portal-nav__item--active {
  background: var(--blue-light);
  color: var(--blue-mid);
}

.portal-nav__item--active:hover { background: var(--blue-light); color: var(--blue-mid); }

.portal-nav__item--disabled {
  color: var(--grey-500);
  opacity: .55;
  cursor: default;
}

.portal-nav__item--disabled:hover { background: none; color: var(--grey-500); }

.portal-nav__item em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--grey-100);
  color: var(--grey-500);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: auto;
}

.portal-sidebar__footer {
  padding-top: 14px;
  border-top: 1px solid var(--grey-100);
}

.portal-sidebar__user {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-500);
  padding: 0 10px 6px;
}

.portal-locale {
  font-size: 12px;
  color: var(--grey-500);
  padding: 0 10px 6px;
}

.portal-locale a { color: var(--grey-500); }
.portal-locale a.portal-locale--active { color: var(--blue-mid); font-weight: 700; }

.portal-login__locale {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--grey-500);
}

.portal-sidebar__footer button {
  width: 100%;
  background: none;
  border: none;
  color: var(--grey-700);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
}

.portal-sidebar__footer button:hover { background: var(--grey-100); color: var(--grey-900); }

/* ─── Collapsed (rail) state ─────────────────────────────────── */
.portal-sidebar--collapsed {
  width: 68px;
  padding-left: 10px;
  padding-right: 10px;
}

/* One label class covers everything text-y that doesn't fit a narrow icon rail: the logo's
   wordmark, the impersonation banner, the nav section heading, every nav item's own label, and
   the whole footer (account name, locale switcher, logout) — each of those elements already
   carries this class directly in the layout, so hiding it here is the single point of control. */
.portal-sidebar--collapsed .portal-sidebar__label,
.portal-sidebar--collapsed .portal-nav__item em {
  display: none;
}

.portal-sidebar--collapsed .portal-sidebar__logo {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.portal-sidebar--collapsed .portal-nav__item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* ─── Main area ──────────────────────────────────────────────── */
.portal-main {
  flex: 1;
  min-width: 0;
  padding: 36px 40px 64px;
  background: var(--grey-50);
}

.portal-page-header { margin-bottom: 24px; }

.portal-page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--grey-900);
}

.portal-page-header p { color: var(--grey-500); font-size: 14px; }

.portal-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-500);
  margin: 32px 0 12px;
}

/* ─── Stat cards ─────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.stat-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.stat-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stat-card__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--grey-500);
}

.stat-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card__icon--blue   { background: var(--blue-light); color: var(--blue-mid); }
.stat-card__icon--green  { background: var(--green-light); color: var(--green); }
.stat-card__icon--purple { background: #f1ecfd; color: #6b46c1; }

.stat-card__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--grey-900);
  line-height: 1.2;
}

.stat-card__hint { font-size: 13px; color: var(--grey-500); margin-top: 4px; }

/* ─── Content cards ──────────────────────────────────────────── */
.portal-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.portal-card h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.portal-card p { color: var(--grey-700); font-size: 14px; }

.portal-checklist {
  margin-top: 12px;
  padding-left: 20px;
  color: var(--grey-700);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ─── Page header with action ────────────────────────────────── */
.portal-page-header--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* ─── Status pills ───────────────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.pill--active   { background: var(--green-light); color: var(--green); }
.pill--inactive { background: var(--grey-100); color: var(--grey-500); }
.pill--step     { background: var(--blue-light); color: var(--blue-mid); }

/* ─── Table row actions ──────────────────────────────────────── */
.admin-table__actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.admin-table__actions-row form { margin: 0; }

.link-button--danger  { color: var(--red); }
.link-button--success { color: var(--green); }

/* ─── Modal (native <dialog>) ────────────────────────────────── */
.portal-modal {
  /* the global `* { margin: 0 }` reset kills the UA's `margin: auto`
     that centers <dialog>, so restore it */
  margin: auto;
  border: none;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 0;
  width: 100%;
  max-width: 560px;
  color: var(--grey-900);
}

.portal-modal::backdrop {
  background: rgba(10,16,30,.55);
  backdrop-filter: blur(2px);
}

.portal-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.portal-modal__header h2 {
  font-size: 17px;
  font-weight: 700;
}

.portal-modal__close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--grey-500);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius);
}

.portal-modal__close:hover { background: var(--grey-100); color: var(--grey-900); }

.portal-modal__form { padding: 16px 24px 24px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ─── Add-document choice dialog ────────────────────────────── */
.document-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 24px 24px;
}

.document-choice__option {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.document-choice__option:hover {
  border-color: var(--blue-accent);
  background: var(--blue-light);
  text-decoration: none;
}

.document-choice__option strong {
  display: block;
  color: var(--grey-900);
  font-size: 14px;
}

.document-choice__option span {
  display: block;
  color: var(--grey-500);
  font-size: 13px;
  margin-top: 2px;
}

/* ─── Dashboard charts ───────────────────────────────────────── */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}

.chart-total {
  font-size: 13px;
  color: var(--grey-500);
  margin-bottom: 16px;
}

.chart-total strong { color: var(--grey-900); font-size: 15px; }

/* Column chart (one bar per day) */
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
}

.chart-bars__col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.chart-bars__bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  background: var(--blue-accent);
  transition: background .15s;
}

.chart-bars__col:hover .chart-bars__bar { background: var(--blue-dark); }
.chart-bars__bar--empty { background: var(--grey-200); }
.chart-bars__col:hover .chart-bars__bar--empty { background: var(--grey-500); }

.chart-bars__axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--grey-500);
  margin-top: 6px;
}

/* Horizontal bar chart (per doctor) */
.chart-rows { display: flex; flex-direction: column; gap: 10px; }

.chart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.chart-row__label {
  flex: 0 0 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--grey-700);
}

.chart-row__track {
  flex: 1;
  height: 10px;
  background: var(--grey-100);
  border-radius: 999px;
  overflow: hidden;
}

.chart-row__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--blue-accent);
}

.chart-row__value {
  flex: 0 0 32px;
  text-align: right;
  font-weight: 600;
  color: var(--grey-900);
}

.chart-empty { font-size: 13px; color: var(--grey-500); }

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.pagination__info {
  font-size: 13px;
  color: var(--grey-500);
}

/* ─── Login page ─────────────────────────────────────────────── */
.portal-auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.portal-login {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 32px;
}

.portal-login__brand {
  text-align: center;
  margin-bottom: 24px;
}

.portal-login__brand h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--blue-mid);
  margin-top: 10px;
}

.portal-login__brand p { font-size: 13px; color: var(--grey-500); }

.btn--block { display: block; width: 100%; }

/* ─── Activity log (audit) ───────────────────────────────────── */
/* application.css styles every `form` as a stacked 640px column — this is an
   inline filter bar, so undo that (row direction, no max-width) explicitly */
.audit-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  max-width: none;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.audit-filters__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.audit-filters__field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
}

.audit-filters__field select,
.audit-filters__field input {
  width: auto;
  min-width: 170px;
  padding: 8px 10px;
  font-size: 14px;
}

.audit-filters__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.audit-changes summary {
  cursor: pointer;
  color: var(--blue-mid);
  font-size: 13px;
}

.audit-changes ul {
  margin: 8px 0 0;
  padding-left: 16px;
  font-size: 13px;
  color: var(--grey-900);
}

.audit-changes li { margin-bottom: 2px; }

/* ─── Data export ────────────────────────────────────────────── */
/* Override the global 640px column form: use the full main-column width,
   with the two cards side by side and the button underneath */
.export-form {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  align-items: start;
  max-width: none;
}

.export-form fieldset { margin: 0; }

.export-form input[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 11px 32px;
}

@media (max-width: 1100px) {
  .export-form { grid-template-columns: 1fr; }
}

.export-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
}

.export-option + .export-option { border-top: 1px solid var(--grey-100); }

.export-option input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--blue-accent);
}

.export-option span { display: flex; flex-direction: column; gap: 2px; }
.export-option strong { font-size: 14px; color: var(--grey-900); }
.export-option small { font-size: 12.5px; color: var(--grey-500); }