/* Bia shell glue — the thin layer between the Claude Design shell
   (styles-shell.css / styles-rail.css, copied as-is per ADR-0003) and the app.
   Holds ONLY app-specific wiring the package never had. Package CSS stays
   pristine; new classes/integration live here (ADR-0003 §"Consequências"). */

/* === Anchor-based controls: never underline ============================
   Several chrome controls are <a> (sidebar items, menu items, the login
   button). The browser default underlines anchors, and the legacy app.css
   adds `a:hover { underline }` — neither should touch the shell. Loaded after
   both, so these win (the :hover rules tie app.css on specificity, order breaks it). */
.btn, .sb__item, .sb__toggle, .clinic-menu__item, .clinic-menu__action,
.usermenu__item, .rail__line, .iconbtn, .pac-name__link, .pac-row__btn,
.btn:hover, .sb__item:hover, .clinic-menu__item:hover, .clinic-menu__action:hover,
.usermenu__item:hover, .rail__line:hover, .iconbtn:hover,
.pac-name__link:hover, .pac-row__btn:hover { text-decoration: none; }
/* The patient-name anchor inherits the row's font color so the visual matches
   the package (the design had a plain `<span>`; we promoted it to `<a>` for
   keyboard/AT navigation — see ADR-0004 §a11y). */
.pac-name__link { color: inherit; }

/* === Content region ======================================================
   base.html drops page content into `.content`. Un-ported module pages
   (still styled by the legacy app.css) render inside `.content--legacy`,
   which scrolls and centres them in a readable column — the same look they
   had before the shell wrapped them. Ported modules override {% block main %}
   and provide their own `.content` layout (and may opt into the rail). */
.content--legacy { overflow-y: auto; }
.content--legacy-inner { max-width: 1040px; margin: 0 auto; padding: 24px 28px; }

/* === Right rail slot =====================================================
   The 360px detail rail (styles-rail.css) is contextual: a page that needs it
   sets main_class="has-rail" and fills {% block main %} with `.content` +
   `.rail`. Wired here so the slot is ready for the per-module ports. */
.app__main.has-rail {
  grid-template-columns: 1fr var(--rail-w);
  grid-template-areas: "content rail";
}
.app__main.has-rail > .rail {
  grid-area: rail;
  border-left: 1px solid var(--border-subtle);
}
/* styles-rail.css (loaded globally) animates .rail__live-pulse with `pulse`,
   but the package defines that keyframe only in styles-agenda.css. The rail can
   appear on any page, so the keyframe lives here (global). Verbatim from the package. */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(1 0 0 / 0.7); }
  50%      { box-shadow: 0 0 0 4px oklch(1 0 0 / 0); }
}

/* === Modal host (ADR-0004) ==============================================
   HTMX injects modal markup into #modal-host; empty means closed. */
#modal-host:empty { display: none; }

/* === Alpine =============================================================
   Hide x-cloak nodes until Alpine initialises (avoids a flash of open menus
   on slow loads). */
[x-cloak] { display: none !important; }

/* === Login (standalone, outside the shell) ============================== */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-app);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px 32px;
  text-align: center;
}
.login-wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 30px;
  line-height: 1;
  color: var(--text-primary);
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.login-wordmark .login-wordmark-i { color: var(--sage-600); }
.login-wordmark .login-wordmark-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sage-500);
  box-shadow: 0 0 0 3px var(--sage-50);
  margin-left: 5px;
  align-self: center;
}
.login-sub {
  color: var(--text-tertiary);
  font-size: var(--t-sm);
  margin: 10px 0 28px;
}
.login-error {
  background: var(--clay-50);
  border: 1px solid var(--clay-200);
  color: var(--clay-700);
  font-size: var(--t-sm);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 18px;
  text-align: left;
}
.login-card .btn { height: 40px; }

/* === Topbar user menu ===================================================
   Extends the package: shell.jsx drew only a bare `.tb__avatar`. The dropdown
   reuses the popover language of `.clinic-menu`. The account widget cluster
   (#account-clinic / #account-user) is lazy-loaded; lay its children inline. */
#account-user { display: inline-flex; align-items: center; gap: 10px; }
.usermenu { position: relative; display: inline-flex; }
.usermenu__menu {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  z-index: 50;
  min-width: 212px;
  padding: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 1px;
}
.usermenu__head { padding: 8px 10px 7px; }
.usermenu__name { font-size: var(--t-sm); font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.usermenu__email {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
  word-break: break-all;
}
.usermenu__divider { height: 1px; background: var(--border-subtle); margin: 4px 2px; }
.usermenu__logout { margin: 0; }
.usermenu__item {
  display: inline-flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 5px;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 100ms, color 100ms;
}
.usermenu__item:hover { background: var(--bg-hover); color: var(--text-primary); }
.usermenu__item svg { color: var(--text-tertiary); flex-shrink: 0; }

/* === Patient shell · contextual tweaks ==================================
   Replace the inline `style="..."` attributes the donor JSX used in
   Resumo/Dados/stub cards — the app's CSP is `style-src 'self'` with no
   `'unsafe-inline'` so attribute-level inline styles are blocked. These
   selectors recreate the same look from a class context (ADR-0009 §Lições). */

/* Lab tab head actions wrapper. Design used `style={{ display: 'flex', gap: 6 }}`
   on a bare <div>; we promote it to a named class so CSP `style-src 'self'`
   stays clean. Same pattern as `.an-head__actions`. */
.pl-tab__head-actions { display: inline-flex; gap: 6px; align-items: center; }

/* Faturação KPI grid. The donor JSX laid out 4 stat tiles via an inline
   `style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}` — bring it under a
   class so CSP doesn't drop it. `.kstats` is the package container. */
.kstats--patient { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card__body .empty {
  border: none;
  padding: 12px 0 4px;
}
.card__body .empty__sub {
  font-size: var(--t-xs);
}
.card__body .nm-banner {
  margin: 0;
}
/* `Direito ao esquecimento` strip spans the patient grid in the Dados tab. */
.pr-grid > .danger-foot {
  grid-column: 1 / -1;
}