/* =====================================================================
   homey.css — warm-paper / notebook overlay
   Lives on top of app.css. Removing this file (and its <link>) reverts
   every effect in here. Tokens drive most of the warmth; this file adds
   texture, hover micro-interactions, and serif page titles.
   ===================================================================== */

/* Page canvas — diagonal blueprint gradient with two soft aurora blobs
   and a paper-grain dot pattern layered on top. Drifts very slowly so
   the page feels alive without ever being distracting. */
html[data-theme="light"] body {
  background-color: var(--a3-canvas);
  background-image:
    /* fine paper-grain dots, top of stack */
    radial-gradient(rgba(40, 70, 110, 0.055) 1px, transparent 1px),
    radial-gradient(rgba(40, 70, 110, 0.035) 1px, transparent 1px),
    /* top-left aurora — cooler, brighter */
    radial-gradient(60% 45% at 12% 8%, rgba(110, 150, 215, 0.32), transparent 70%),
    /* bottom-right aurora — deeper indigo */
    radial-gradient(55% 50% at 92% 96%, rgba(70, 100, 175, 0.30), transparent 72%),
    /* diagonal base gradient — light upper-left to deeper lower-right */
    linear-gradient(140deg, #E5EEF9 0%, #CEDDF0 50%, #B5C8E5 100%);
  background-size: 22px 22px, 17px 17px, auto, auto, auto;
  background-position: 0 0, 9px 11px, 0 0, 100% 100%, 0 0;
  background-attachment: fixed;
  animation: a3-aurora-drift 38s ease-in-out infinite alternate;
}

@keyframes a3-aurora-drift {
  0%   { background-position: 0 0, 9px 11px,  0%   0%,  100% 100%, 0 0; }
  50%  { background-position: 0 0, 9px 11px,  8%   5%,   92%  95%, 0 0; }
  100% { background-position: 0 0, 9px 11px,  3%   2%,   97%  98%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] body { animation: none; }
}

/* The shell itself stays clear so panels float over the grain. */
.shell { background: transparent; }

/* Light-mode: blue → white gradient on the main content area, plus a
   cursor-following spotlight. --mx / --my are written by App.jsx on each
   mousemove (using requestAnimationFrame to stay smooth). When the cursor
   is outside .main the vars fall back to 50% / 50% so a soft centred
   highlight remains. */
.shell[data-theme="light"] .main {
  background:
    radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%),
      rgba(214, 232, 255, 0.85) 0%,
      rgba(214, 232, 255, 0.55) 25%,
      rgba(214, 232, 255, 0.15) 55%,
      transparent 75%),
    linear-gradient(135deg,
      #A4BCDE 0%,
      #C3D3EA 35%,
      #DFE9F5 65%,
      #F2F6FC 100%);
}

/* Major page titles get the serif. Targeting specific selectors so we
   don't hit every h1 in dense panels. */
.clients-hero .h1,
.bh-header__title,
.topbar-popover__title {
  font-family: var(--a3-font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--a3-text-primary);
}

.clients-hero .h1 {
  font-size: 30px;
  line-height: 1.2;
}

.bh-header__title {
  font-size: 26px;
  line-height: 1.22;
}

/* Friendly greeting line in the topbar */
.topbar__greeting {
  font-family: var(--a3-font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--a3-text-secondary);
  letter-spacing: 0.005em;
  padding: 0 6px;
  white-space: nowrap;
}

/* Card hover lift — interactivity, gentle and homey. */
.client-card,
.bh-area-card,
.bh-kpi,
.bh-panel {
  transition:
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.shell .client-card:hover,
.shell .bh-area-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 10px rgba(40, 60, 95, 0.10),
    0 14px 32px rgba(40, 60, 95, 0.14),
    0 0 0 1px rgba(30, 64, 175, 0.30),
    0 0 36px rgba(30, 64, 175, 0.28);
  border-color: var(--a3-cobalt);
}

.shell .bh-kpi:hover,
.shell .bh-panel:hover {
  border-color: var(--a3-cobalt);
  box-shadow:
    0 1px 3px rgba(40, 60, 95, 0.08),
    0 0 22px rgba(30, 64, 175, 0.16);
}

/* Buttons feel a touch more tactile on press. */
button.btn,
button.topbar__action,
button.btn-retry {
  transition:
    transform 120ms cubic-bezier(0.4, 0, 0.2, 1),
    background 160ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
button.btn:active,
button.topbar__action:active,
button.btn-retry:active {
  transform: translateY(1px);
}

/* The "Offline-Daten" banner — friendlier wording sits better in blueprint. */
.mock-banner {
  background: #DCE6F7 !important;
  border-color: #93AED9 !important;
  color: #1E3A6D !important;
}

/* Soften the dot grid wherever it shows. */
[style*="dot-grid"] { opacity: 0.85; }

/* Icon-only return button in the topbar — square, tidy. */
.topbar__return--icon {
  gap: 0;
  padding: 6px;
  width: 28px;
  height: 28px;
  justify-content: center;
}
.topbar__return--icon:hover { transform: translateX(-1px); }

/* Ghost return — back button used throughout the app (filled subnav strips
   + empty-state pages). Border + surface make it readable as a button even
   when it carries a text label ("Prüfbereiche"); icon-only usages collapse
   to a near-circle via min-width. The default 18px bottom margin works for
   standalone use in empty states; inside .cr-subnav strips it collapses to
   0 so the strip's own padding controls spacing. */
.cr-return--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 32px;
  height: 32px;
  margin: 0 0 18px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--a3-border, #D4D9E5);
  background: var(--a3-surface, #FFFFFF);
  color: var(--a3-text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 160ms cubic-bezier(0.4, 0, 0.2, 1),
    color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cr-return--ghost:hover {
  background: rgba(30, 64, 175, 0.12);
  border-color: var(--a3-cobalt);
  color: var(--a3-cobalt);
  transform: translateX(-3px);
}
.cr-return--ghost:focus-visible {
  outline: 2px solid var(--a3-cobalt);
  outline-offset: 2px;
}
.cr-subnav .cr-return--ghost,
.topbar .cr-return--ghost {
  margin: 0;
}
.shell[data-theme="dark"] .cr-return--ghost {
  border-color: var(--a3-chrome-border, #2A3140);
  background: rgba(255, 255, 255, 0.04);
  color: var(--a3-chrome-text, #E6E9F0);
}
.shell[data-theme="dark"] .cr-return--ghost:hover {
  background: rgba(49, 85, 255, 0.16);
  border-color: rgba(96, 165, 250, 0.45);
  color: #BFD0FF;
}

/* Row variant of the subnav: return button on the left, action cluster on
   the right. Used on the Mandant DAG view so the toolbar buttons share a
   row with the back arrow and free vertical space for the StatStrip. */
.cr-subnav--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cr-subnav--row .mn-toolbar__actions {
  padding: 0;
}

/* "Kennzahlen" toolbar button on the Mandant DAG view — navigates to the
   KPI/charts landing. Visual treatment matches the existing view-toggle
   pills so the toolbar feels balanced. */
.mn-toolbar__kpis-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--a3-border);
  border-radius: var(--a3-radius-input);
  background: var(--a3-canvas);
  color: var(--a3-text-secondary);
  font-family: var(--a3-font-sans);
  font-size: var(--a3-fs-meta);
  font-weight: var(--a3-fw-medium);
  cursor: pointer;
  transition:
    background 160ms cubic-bezier(0.4, 0, 0.2, 1),
    color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mn-toolbar__kpis-btn:hover {
  background: rgba(30, 64, 175, 0.10);
  color: var(--a3-cobalt);
  border-color: var(--a3-cobalt);
  transform: translateY(-1px);
}
.mn-toolbar__kpis-btn:focus-visible {
  outline: 2px solid var(--a3-cobalt);
  outline-offset: 2px;
}

/* Collapse toggles — when both sidebars are minimised, the left has
   padding-top:8px (from .lsidebar--collapsed) but the right's earlier
   padding-top:8px rule is overridden by a later `.inspector { padding: 0 }`,
   so the right toggle sits 8px higher than the left. Restore the 8px top
   padding here. Also match button sizes (both 40×40, 9px radius) so the
   icons sit on the same horizontal line. */
.inspector--collapsed {
  padding-top: 8px;
}

.inspector--collapsed .inspector__collapse-toggle {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 9px;
  margin: 0 auto 8px;
}

/* Tile palette retunes — keep the categorical hues but cool them so they
   sit naturally on the blueprint surface. Light tweaks only. */
:root {
  --tile-blue-bg: #DCE6F7;
  --tile-green-bg: #DDEBE4;
  --tile-amber-bg: #F2E5C7;
  --tile-purple-bg: #E4E2EF;
  --tile-coral-bg: #F0DBD6;
  --tile-teal-bg: #D5E6E6;
  --tile-indigo-bg: #D8DCEF;
  --tile-pink-bg: #ECD9E0;
  --tile-gray-bg: #DDE3EE;
}