/* hive-chrome.css — shared app chrome for the hive internal apps.
   Extracted 2026-06-11 (structure audit): these blocks were byte-identical
   across orders/accounting/cash-flow. Load AFTER colors_and_type.css and
   BEFORE the app's own stylesheet (app css keeps overrides + app-specific
   blocks: .app-shell sizing, .panel geometry, tables, view-specific styles).
   Pairs with /design-system/hive-ui.js (window.hiveUI.makeApp). */

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--n-200);
}
.app-header__brand { display: flex; align-items: center; gap: var(--space-3); }
.app-header__home { display: inline-flex; align-items: center; }
.app-header__wordmark { height: 22px; width: auto; }
.app-header__divider { width: 1px; height: 18px; background: var(--n-300); }
.app-header__label { color: var(--n-600); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
.app-header__nav { display: flex; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.app-header__nav a { color: var(--n-500); text-decoration: none; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); }
.app-header__nav a:hover { color: var(--n-900); background: var(--n-100); }
.app-header__nav a[aria-current="page"] { color: var(--n-0); background: var(--n-900); }
.app-header__user { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: 12px; color: var(--n-600); }
.app-header__user button { background: transparent; border: 0; color: var(--n-500); cursor: pointer; font-family: inherit; font-size: 11px; text-decoration: underline; }
.auth-card { max-width: 380px; margin: 12vh auto 0; background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--radius-lg); padding: var(--space-8); }
.auth-card h1 { margin: 0 0 var(--space-2); font-size: 22px; }
.auth-card p  { margin: 0 0 var(--space-6); color: var(--n-600); font-size: 14px; }
.auth-card label { display: block; font-size: 12px; color: var(--n-700); margin-bottom: var(--space-1); }
.auth-card input { width: 100%; padding: var(--space-3); border: 1px solid var(--n-300); border-radius: var(--radius-md); font: inherit; background: var(--n-0); }
.auth-card button { margin-top: var(--space-4); width: 100%; background: var(--kiss-red); color: var(--kiss-red-contrast); border: 0; padding: var(--space-3); border-radius: var(--radius-md); font: inherit; font-weight: 600; cursor: pointer; }
.auth-card button:hover { background: var(--kiss-red-hover); }
.auth-card .auth-card__msg { margin-top: var(--space-4); font-size: 13px; min-height: 1em; }
.auth-card .auth-card__msg.error   { color: var(--error); }
.auth-card .auth-card__msg.success { color: var(--success); }
.toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.toolbar input[type="search"], .toolbar select {
  font: inherit; font-size: 13px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--n-300); border-radius: var(--radius-md); background: var(--n-0); color: var(--fg-1);
}
.toolbar .spacer { flex: 1; }
.toolbar .count { font-family: var(--font-mono); font-size: 11px; color: var(--n-500); letter-spacing: 0.04em; }
.scrim { position: fixed; inset: 0; background: rgba(15,23,42,0.35); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-standard); z-index: 40; }
.scrim.open { opacity: 1; pointer-events: auto; }
.panel.open { transform: translateX(0); }
.panel__close { background: transparent; border: 0; font-size: 20px; line-height: 1; color: var(--n-500); cursor: pointer; }
.panel__body { padding: var(--space-5); }
.panel section { margin-bottom: var(--space-6); }
.kv dt { color: var(--n-500); }
.kv dd { margin: 0; color: var(--fg-1); }
.empty { color: var(--n-500); font-style: italic; padding: var(--space-8); text-align: center; border: 1px dashed var(--n-200); border-radius: var(--radius-lg); }
.muted { color: var(--n-500); }
.btn:hover { background: var(--n-700); }