/* NeoClinique panel — design tokens (sage/cream, dérivé des wireframes V2). */

:root {
  --sk-bg:           #ffffff;
  --sk-paper:        #f7f5f2;
  --sk-paper-hover:  #e8e4de;
  --sk-ink:          #1a1a1a;
  --sk-muted:        #6b6560;
  --sk-line:         rgba(0,0,0,.07);
  --sk-line-strong:  rgba(0,0,0,.14);
  --sk-accent:       #8b9a7e;
  --sk-accent-dark:  #728568;
  --sk-accent-light: #a3b096;
  --sk-accent-soft:  rgba(139,154,126,.12);
  --sk-accent-border:rgba(139,154,126,.28);
  --sk-stripe-a:     #f0ede8;
  --sk-stripe-b:     #f7f5f2;
  --sk-danger:       #b94a3d;
  --sk-danger-soft:  rgba(185,74,61,.10);
  --sk-warn:         #92590e;
  --sk-warn-soft:    #fdf2e2;
  --sk-warn-border:  #e9c79b;
  --sk-success:      #4a7c59;

  --sk-r:    20px;
  --sk-r-sm: 12px;
  --sk-r-lg: 32px;
  --sk-r-pill: 999px;

  --sk-font-hand: 'League Spartan', system-ui, sans-serif;
  --sk-font-ui:   'DM Sans', system-ui, sans-serif;
  --sk-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --sk-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --sk-shadow-md: 0 6px 24px rgba(0,0,0,.06);

  --sidebar-w: 260px;
  --topbar-h:  60px;
}

[data-theme="dark"] {
  --sk-bg:           #16181a;
  --sk-paper:        #1d2022;
  --sk-paper-hover:  #252a2c;
  --sk-ink:          #f3f1ec;
  --sk-muted:        #9b938b;
  --sk-line:         rgba(255,255,255,.08);
  --sk-line-strong:  rgba(255,255,255,.18);
  --sk-accent:       #a3b096;
  --sk-accent-dark:  #8b9a7e;
  --sk-accent-light: #bcc6b0;
  --sk-accent-soft:  rgba(163,176,150,.16);
  --sk-accent-border:rgba(163,176,150,.32);
  --sk-stripe-a:     #1d2022;
  --sk-stripe-b:     #22262a;
}

*, *::before, *::after { box-sizing: border-box; }

html, body, #app {
  margin: 0; padding: 0;
  height: 100%;
  font-family: var(--sk-font-ui);
  font-weight: 300;
  color: var(--sk-ink);
  background: var(--sk-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sk-accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

input, select, textarea, button { font-family: inherit; color: inherit; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--sk-line-strong); border-radius: 6px; }

/* --- Primitives -------------------------------------------------------- */

.h-hand { font-family: var(--sk-font-hand); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.h-mono { font-family: var(--sk-font-mono); }
.muted  { color: var(--sk-muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--sk-r-pill);
  font-family: var(--sk-font-hand); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--sk-line); background: transparent; color: var(--sk-ink);
  cursor: pointer; white-space: nowrap; transition: all .12s ease;
}
.btn:hover { background: var(--sk-paper); }
.btn.primary {
  background: var(--sk-accent); color: white; border-color: var(--sk-accent);
}
.btn.primary:hover { background: var(--sk-accent-dark); border-color: var(--sk-accent-dark); }
.btn.ghost { color: var(--sk-accent-dark); border-color: var(--sk-accent-border); }
.btn.ghost:hover { background: var(--sk-accent-soft); }
.btn.danger { color: var(--sk-danger); border-color: rgba(185,74,61,.4); }
.btn.danger:hover { background: var(--sk-danger-soft); }
.btn.success { color: var(--sk-success); border-color: rgba(74,124,89,.4); }
.btn.success:hover { background: rgba(74,124,89,.10); }
.btn.success.primary { background: var(--sk-success); color: white; border-color: var(--sk-success); }
.btn.success.primary:hover { filter: brightness(.92); }
.btn.sm { padding: 6px 12px; font-size: 10.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sk-font-hand); font-weight: 700; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--sk-r-pill);
  border: 1px solid var(--sk-line); color: var(--sk-ink);
}
.pill.accent { background: var(--sk-accent-soft); color: var(--sk-accent-dark); border-color: var(--sk-accent-border); }
.pill.warn   { background: var(--sk-warn-soft); color: var(--sk-warn); border-color: var(--sk-warn-border); }
.pill.danger { background: var(--sk-danger-soft); color: var(--sk-danger); border-color: rgba(185,74,61,.3); }
.pill.success{ background: rgba(74,124,89,.10); color: var(--sk-success); border-color: rgba(74,124,89,.3); }

.card {
  background: var(--sk-paper);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r);
  padding: 20px;
}
.card.hover:hover { background: var(--sk-paper-hover); }

.input, .select, .textarea {
  width: 100%; padding: 10px 14px;
  background: var(--sk-bg); color: var(--sk-ink);
  border: 1px solid var(--sk-line); border-radius: var(--sk-r-sm);
  font-size: 14px; font-family: var(--sk-font-ui);
  transition: border-color .12s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--sk-accent);
}
.label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sk-muted); margin-bottom: 6px; font-weight: 500; }

.table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.table th {
  text-align: left; padding: 10px 12px;
  font-family: var(--sk-font-hand); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-muted);
  border-bottom: 1px solid var(--sk-line); background: transparent;
}
.table td {
  padding: 12px; border-bottom: 1px solid var(--sk-line);
}
.table tbody tr:hover { background: var(--sk-paper); }
/* Sticky header pour le catalog Commander : la barre de noms de colonnes
   reste visible quand on scrolle dans la liste. Background opaque pour que
   les lignes en dessous ne transparaissent pas, et bordure inférieure
   conservée. z-index supérieur aux pills/badges des cellules. */
/* Header sticky propre :
   - Fond opaque paper-hover pour masquer les lignes qui glissent en dessous.
   - Pseudo-element ::after qui dépasse sous le th et fait un gradient
     paper-hover → transparent. Comme le ::after est positionné par rapport
     au th sticky, il SUIT le sticky au scroll : les lignes du tbody qui
     remontent au niveau du sticky disparaissent progressivement dans le
     gradient au lieu d'apparaître brutalement.
   - Bordure inférieure conservée pour la lisibilité.
   - Padding vertical augmenté pour la respiration.
   - Coins arrondis alignés avec la card. */
.commander-catalog { border-collapse: separate; border-spacing: 0; }
/* Sticky simple : la barre du haut reste fixée en haut du scroll port du
   main, juste sous la topbar. Pas d'ombre, pas de gradient — juste un fond
   opaque (paper-hover) qui masque les lignes qui passent derrière au défilement.
   top: -24px compense le padding-top du .main pour que le sticky touche la topbar. */
.commander-catalog thead th {
  position: sticky;
  top: -24px;
  background: var(--sk-paper-hover);
  color: var(--sk-ink);
  z-index: 5;
  padding: 14px 12px;
  font-family: var(--sk-font-hand);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sk-line);
}
@media (max-width: 1180px) {
  .commander-catalog thead th { top: -22px; }
}
@media (max-width: 860px) {
  .commander-catalog thead th { top: -18px; }
}
.commander-catalog thead th:first-child {
  border-top-left-radius: var(--sk-r);
}
.commander-catalog thead th:last-child {
  border-top-right-radius: var(--sk-r);
}
.commander-catalog tbody tr:first-child td { border-top: none; }
/* La card commander n'a PAS son propre scroll. La page entière défile
   (scroll du .main), et le thead sticky reste collé en haut du scroll
   port. Override de la media query qui mettrait overflow-x: auto. */
.commander-card { overflow: visible !important; }

/* Drag & drop des lignes catalog : curseur grab/grabbing, opacity pour
   l'élément en cours de drag, ligne de séparation marquée sur la cible. */
.commander-row[draggable="true"] { cursor: grab; }
.commander-row[draggable="true"]:active { cursor: grabbing; }
.commander-row.dragging { opacity: 0.4; }
.commander-row.drag-over > td {
  box-shadow: inset 0 2px 0 var(--sk-accent);
}
/* Le cursor grab ne doit pas être visible sur les éléments interactifs
   de la ligne (inputs, boutons, selects) — on remet le cursor par défaut. */
.commander-row[draggable="true"] input,
.commander-row[draggable="true"] select,
.commander-row[draggable="true"] button {
  cursor: default;
}
.commander-row[draggable="true"] button { cursor: pointer; }

.kbd {
  display: inline-block; padding: 2px 6px; border: 1px solid var(--sk-line);
  border-radius: 4px; font-family: var(--sk-font-mono); font-size: 11px;
  background: var(--sk-paper); color: var(--sk-muted);
}

/* --- App layout ------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh; overflow: hidden;
}

.app .sidebar { grid-row: 1 / span 2; }
.app .topbar { grid-column: 2; }
.app .main { grid-column: 2; overflow-y: auto; }

.sidebar {
  background: var(--sk-paper);
  border-right: 1px solid var(--sk-line);
  display: flex; flex-direction: column;
  padding: 20px 16px;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Scrollbar discrète sage/cream, visible au survol. */
  scrollbar-width: thin;
  scrollbar-color: var(--sk-line-strong) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--sk-line-strong);
  border-radius: 4px;
  border: 2px solid var(--sk-paper);
  background-clip: padding-box;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--sk-muted); border: 2px solid var(--sk-paper); background-clip: padding-box; }
.sidebar .brand {
  display: flex; align-items: center;
  padding: 6px 8px 18px; border-bottom: 1px solid var(--sk-line); margin-bottom: 12px;
  text-decoration: none; color: var(--sk-ink);
}
.sidebar .brand-logo {
  display: block;
  width: 100%;
  max-width: 188px;
  height: auto;
  color: var(--sk-ink);
}

.nav-section {
  font-family: var(--sk-font-hand); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sk-muted);
  padding: 14px 12px 4px;
}
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--sk-r-sm);
  font-size: 13.5px; font-weight: 400; color: var(--sk-ink);
  cursor: pointer; user-select: none;
}
.nav-link:hover { background: var(--sk-paper-hover); text-decoration: none; }
.nav-link.active { background: var(--sk-accent-soft); color: var(--sk-accent-dark); font-weight: 500; }
.nav-link .ic { width: 16px; height: 16px; opacity: .7; }
.nav-link.active .ic { opacity: 1; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; border-bottom: 1px solid var(--sk-line);
  background: var(--sk-bg);
}
.topbar .crumbs {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sk-font-hand); font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-muted);
}
.topbar .crumbs strong { color: var(--sk-ink); }

.topbar .search {
  flex: 1; max-width: 420px; margin: 0 24px;
  position: relative;
}
.topbar .search input {
  width: 100%; padding: 8px 12px 8px 36px; border-radius: var(--sk-r-pill);
  border: 1px solid var(--sk-line); background: var(--sk-paper);
  font-size: 13px;
}
.topbar .search > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; opacity: .5; pointer-events: none;
}

.topbar .user {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 12px 4px 4px; border-radius: var(--sk-r-pill);
  border: 1px solid var(--sk-line); cursor: pointer;
}
.topbar .user:hover { background: var(--sk-paper); }
/* Avatar générique (topbar, modale compte, etc.) : initiales par défaut,
   photo si présente (object-fit cover, rognée en cercle). */
.avatar {
  border-radius: 50%;
  background: var(--sk-accent); color: white;
  display: grid; place-items: center;
  font-family: var(--sk-font-hand); font-weight: 800;
  overflow: hidden; flex-shrink: 0;
}
.avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topbar .avatar {
  width: 30px; height: 30px; font-size: 12px;
}

/* Switch thème clair / sombre — bouton rond (soleil / lune). */
.theme-toggle {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--sk-line); background: var(--sk-paper);
  display: grid; place-items: center; cursor: pointer; color: var(--sk-ink);
  flex-shrink: 0; padding: 0; transition: background .12s, border-color .12s, color .12s;
}
.theme-toggle:hover { background: var(--sk-paper-hover); border-color: var(--sk-line-strong); }
.theme-toggle svg { width: 17px; height: 17px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.topbar .user-info { display: flex; flex-direction: column; line-height: 1.15; }
.topbar .user-name { font-size: 13px; font-weight: 500; }
.topbar .user-role { font-size: 10.5px; color: var(--sk-muted); letter-spacing: .08em; text-transform: uppercase; }

.main { padding: 24px 32px 80px; }

.page-title { font-family: var(--sk-font-hand); font-weight: 800; font-size: 28px; letter-spacing: -0.01em; margin: 0; }
.page-sub { color: var(--sk-muted); margin-top: 4px; font-size: 14px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.patient-layout {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1.75fr);
  gap: 16px;
  margin-top: 20px;
  align-items: start;
}
.patient-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}
.patient-sticky {
  position: sticky;
  top: 24px;
}
.patient-timeline-card {
  padding: 0;
  overflow: hidden;
}
.patient-timeline {
  display: grid;
  gap: 0;
}
.patient-timeline-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--sk-line);
}
.patient-timeline-item:last-child {
  border-bottom: 0;
}
.patient-timeline-date {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--sk-muted);
  font-size: 12px;
}
.patient-timeline-date small {
  font-family: var(--sk-font-mono);
  font-size: 11px;
}
.patient-timeline-body {
  min-width: 0;
}
.patient-stack {
  display: grid;
  gap: 4px;
  font-size: 12.5px;
}
.patient-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.patient-media-card {
  display: grid;
  gap: 8px;
  color: var(--sk-ink);
}
.patient-media-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sk-r-sm);
  border: 1px solid var(--sk-line);
  background: var(--sk-bg);
}
.patient-media-card span {
  font-size: 12px;
  color: var(--sk-muted);
}

.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }

.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi .v { font-family: var(--sk-font-hand); font-weight: 800; font-size: 28px; letter-spacing: -0.01em; }
.kpi .l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sk-muted); }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.spark .bar { flex: 1; background: var(--sk-accent); border-radius: 1px 1px 0 0; min-width: 4px; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: grid; place-items: center; z-index: 50; padding: 24px;
}
.modal {
  background: var(--sk-bg); border-radius: var(--sk-r-lg);
  border: 1px solid var(--sk-line); box-shadow: var(--sk-shadow-md);
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
}
.modal.modal-lg { max-width: 820px; }
.modal.modal-xl { max-width: 1100px; }
.modal .modal-head { padding: 20px 24px; border-bottom: 1px solid var(--sk-line); display: flex; justify-content: space-between; align-items: center; }
.modal .modal-body { padding: 20px 24px; }
.modal .modal-foot { padding: 16px 24px; border-top: 1px solid var(--sk-line); display: flex; gap: 8px; justify-content: flex-end; }
.modal h2 { margin: 0; font-family: var(--sk-font-hand); font-weight: 800; font-size: 22px; }

/* Toast */
/* Toasts : décalés à gauche de la bulle de l'agent IA (right:22, width:52)
   pour ne pas être recouverts. Espace de 12px entre les toasts et la bulle.
   Alignés à droite (vers la bulle) pour un rendu visuel cohérent.
   Quand le panneau IA est ouvert (.ai-panel, width 380px), on décale les
   toasts plus à gauche pour rester visibles. */
.toast-stack {
  position: fixed;
  bottom: 22px;
  right: 86px; /* 22 (right IA) + 52 (largeur IA) + 12 (gap) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
  transition: right .2s ease;
}
body:has(#ai-widget-root .ai-panel) .toast-stack {
  right: 414px; /* 22 (right panneau) + 380 (largeur panneau) + 12 (gap) */
}
.toast-stack .toast { pointer-events: auto; }
.toast {
  background: var(--sk-ink); color: var(--sk-bg);
  padding: 12px 16px; border-radius: var(--sk-r-sm);
  font-size: 13px; min-width: 240px; max-width: 360px;
  box-shadow: var(--sk-shadow-md);
}
.toast.err { background: var(--sk-danger); }
.toast.ok  { background: var(--sk-success); }

/* Mobile : la bulle IA passe à right:12 / bottom:12 (cf. ai-widget.css).
   On suit en gardant l'espacement, et on autorise les toasts à se réduire
   pour ne pas déborder hors-écran. Quand le panneau IA est ouvert sur
   mobile, il prend toute la largeur → on bascule les toasts en haut. */
@media (max-width: 720px) {
  .toast-stack {
    right: 76px; /* 12 + 52 + 12 */
    bottom: 12px;
    max-width: calc(100vw - 90px);
  }
  body:has(#ai-widget-root .ai-panel) .toast-stack {
    right: 12px;
    bottom: auto;
    top: 12px;
    max-width: calc(100vw - 24px);
  }
  .toast { min-width: 0; max-width: 100%; }
}

/* Animation "pulse" pour signaler un évènement positif (ex. fin de scrape
   sur la carte fournisseur). Joué 2 fois sur ~2.4s, puis le badge reste
   statique jusqu'à expiration (~15s). */
@keyframes pulse-success {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(33, 150, 83, 0); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(33, 150, 83, 0.10); }
}

/* Barre de progression indéterminée : balayage gauche-droite quand le
   nombre d'étapes total est inconnu (toutes premières millisecondes du
   check, avant le premier setProgress côté backend). */
@keyframes progress-indeterminate {
  0%   { transform: translateX(-110%); }
  50%  { transform: translateX(80%); }
  100% { transform: translateX(250%); }
}

/* Empty/loader */
.center-block { display: grid; place-items: center; padding: 60px 20px; color: var(--sk-muted); }
.spinner {
  width: 24px; height: 24px; border: 2.5px solid var(--sk-line);
  border-top-color: var(--sk-accent); border-radius: 50%;
  animation: spin .8s linear infinite;
}
.spinner-inline {
  vertical-align: middle;
  flex-shrink: 0;
  border-color: rgba(255,255,255,.35);
  border-top-color: currentColor;
}
.btn .spinner-inline { border-color: rgba(0,0,0,.18); border-top-color: currentColor; }
.btn.primary .spinner-inline { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .main { padding: 22px 22px 72px; }
  .card { overflow-x: auto; }
}

@media (max-width: 860px) {
  html, body, #app { height: auto; min-height: 100%; }
  .app {
    min-height: 100vh;
    height: auto;
    overflow: visible;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }
  .app .sidebar {
    grid-column: 1;
    grid-row: 1;
  }
  .app .topbar {
    grid-column: 1;
    grid-row: 2;
  }
  .app .main {
    grid-column: 1;
    grid-row: 3;
    overflow: visible;
  }
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-right: 0;
    border-bottom: 1px solid var(--sk-line);
    padding: 12px;
    gap: 8px;
    overflow-x: auto;
    flex-direction: row;
    align-items: center;
  }
  .sidebar .brand {
    flex: 0 0 auto;
    margin: 0 8px 0 0;
    padding: 0 12px 0 0;
    border-bottom: 0;
    border-right: 1px solid var(--sk-line);
  }
  .sidebar .brand-logo { max-width: 130px; }
  .nav-section { display: none; }
  .nav-link {
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 12px;
  }
  .topbar {
    padding: 10px 14px;
    min-height: var(--topbar-h);
    gap: 10px;
  }
  .topbar .search { display: none; }
  .topbar .user-info { display: none; }
  .main { padding: 18px 14px 64px; }
  .row.between {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .patient-layout {
    grid-template-columns: 1fr;
  }
  .patient-sticky {
    position: static;
  }
  .patient-timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .table {
    min-width: 720px;
  }
  .modal-backdrop {
    align-items: end;
    padding: 10px;
  }
  .modal {
    max-height: 92vh;
    border-radius: var(--sk-r);
  }
  .modal .modal-foot {
    flex-wrap: wrap;
  }
  .modal .modal-foot .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 520px) {
  .btn {
    padding: 8px 12px;
    font-size: 10.5px;
  }
  .page-title { font-size: 24px; }
  .page-sub { font-size: 12.5px; }
  .topbar .crumbs { max-width: 65vw; }
  .topbar .crumbs strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}