/* base.css — shared styles for every page (public + admin).
   Linked from base.html.tmpl and admin-base.html.tmpl. Tokens
   come from tokens.css (loaded first). */

/* ─── reset & base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-base);
  color: var(--pf-ink-900);
  background: var(--pf-cream-50);
  line-height: var(--pf-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4 {
  font-family: var(--pf-font-display);
  font-weight: 460;
  letter-spacing: var(--pf-tracking-display);
  line-height: var(--pf-leading-tight);
  margin: 0;
  color: var(--pf-ink-900);
}
p, ul, ol { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

.pf-shell { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.pf-eyebrow {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pf-ink-500); font-weight: 500;
}

/* ─── glass surfaces ────────────────────────────────────── */
.pf-glass, .pf-glass-strong, .pf-glass-modal {
  border-radius: var(--pf-r-lg);
  border: 1px solid var(--pf-glass-border);
  box-shadow: var(--pf-glass-shadow);
}
.pf-glass {
  background: var(--pf-glass-1);
  backdrop-filter: blur(var(--pf-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--pf-blur)) saturate(140%);
}
.pf-glass-strong {
  background: var(--pf-glass-2);
  backdrop-filter: blur(var(--pf-blur-strong)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--pf-blur-strong)) saturate(150%);
}
.pf-glass-modal {
  background: var(--pf-glass-3);
  border-radius: var(--pf-r-xl);
  backdrop-filter: blur(var(--pf-blur-strong)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--pf-blur-strong)) saturate(160%);
}

/* ─── buttons ───────────────────────────────────────────── */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border: 0; cursor: pointer;
  font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  transition: transform var(--pf-dur-fast) var(--pf-ease),
              background var(--pf-dur-fast) var(--pf-ease),
              box-shadow var(--pf-dur-fast) var(--pf-ease);
  padding: 10px 18px; font-size: 14px; border-radius: 999px; height: 42px;
}
.pf-btn-lg { padding: 14px 26px; font-size: 16px; height: 52px; }
.pf-btn-sm { padding: 8px 14px; font-size: 13px; height: 34px; }
.pf-btn-primary {
  background: linear-gradient(135deg, var(--pf-rust-500) 0%, var(--pf-rust-600) 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 -1px 0 rgba(0,0,0,0.15) inset,
    0 6px 18px -4px rgba(184,90,54,0.45);
}
.pf-btn-primary:hover { transform: translateY(-1px); }
.pf-btn-secondary {
  background: var(--pf-glass-2);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--pf-glass-border);
  color: var(--pf-ink-900);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 4px 12px -2px rgba(58,32,18,0.10);
}
.pf-btn-ghost { background: transparent; color: var(--pf-ink-900); }
.pf-btn-on-photo {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(12px);
}

/* ─── pills ─────────────────────────────────────────────── */
.pf-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 12px; font-weight: 500;
  border-radius: 999px; letter-spacing: -0.005em;
}
.pf-pill-rust    { background: rgba(184,90,54,0.12); color: var(--pf-rust-700); }
.pf-pill-forest  { background: rgba(74,88,60,0.14);  color: var(--pf-forest-700); }
.pf-pill-ok      { background: rgba(107,142,90,0.18);color: #3e5a30; }
.pf-pill-warn    { background: rgba(212,166,74,0.22);color: #7a5c1c; }
.pf-pill-danger  { background: rgba(181,69,69,0.14); color: #7a2222; }
.pf-pill-neutral { background: rgba(58,32,18,0.06);  color: var(--pf-ink-700); }
.pf-pill-on-photo {
  background: rgba(255,255,255,0.18); color: #fff;
  border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(12px);
}

/* ─── public top nav ───────────────────────────────────── */
.pf-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; padding: 20px 56px; color: #fff;
}
.pf-nav img { height: 36px; filter: brightness(0) invert(1); }
.pf-nav-links { margin-left: 32px; display: flex; gap: 24px; font-size: 13px; opacity: 0.92; }
.pf-nav-links a { padding-bottom: 2px; }
.pf-nav-links a.active { font-weight: 500; border-bottom: 1.5px solid #fff; }
.pf-nav-spacer { flex: 1; }

@media (max-width: 720px) {
  .pf-nav { padding: 16px 20px; }
  .pf-nav-links { display: none; }
}

/* ─── mobile-block (retired) ─────────────────────────────
   The portal is now responsive (see the portal responsive block
   below), so the old "open on desktop" gate is fully suppressed.
   The markup was removed from the base shells; this rule is a
   belt-and-braces guard in case any cached page still ships it.
   ─────────────────────────────────────────────────────── */
.pf-mobile-block { display: none !important; }

/* ─── portal responsive ─────────────────────────────────
   The admin + client shells (admin-base / client-base) share the
   `adm-*` class names: a fixed 240px sidebar next to a viewport-
   locked main column. On desktop that stays untouched. Below the
   880 px breakpoint (matching pawfect-landing) the shell unlocks
   to natural page scroll, the sidebar becomes a CSS-only slide-in
   drawer toggled by a burger button (.adm-burger / #adm-nav-toggle
   checkbox in the base shells), and the main column goes full
   width. A second 540 px step tightens the gutters and KPI grid.

   Data tables (.adm-table-head / .adm-table-row) keep their grid
   columns but scroll horizontally inside their card wrapper so the
   rows never get crushed; card grids reflow to fewer columns.
   ─────────────────────────────────────────────────────── */

/* Burger toggle + drawer scrim are hidden on desktop. */
.adm-burger,
.adm-drawer-scrim,
#adm-nav-toggle { display: none; }

@media (max-width: 880px) {
  /* Unlock the viewport-locked dashboard: page scrolls naturally,
     the sidebar leaves the flow as a fixed drawer. */
  .adm-stage { height: auto !important; min-height: 100vh; overflow: visible !important; }
  .adm-shell {
    grid-template-columns: 1fr !important;
    height: auto !important;
    padding: clamp(12px, 4vw, 20px);
    gap: clamp(12px, 3vw, 18px);
  }
  .adm-main {
    height: auto !important; min-height: 0 !important;
    overflow: visible !important; width: 100%; min-width: 0;
  }

  /* Burger button: floats top-left, sits above the drawer. */
  .adm-burger {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: 14px; left: 14px; z-index: 60;
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--pf-glass-2); color: var(--pf-ink-900);
    border: 1px solid var(--pf-glass-border);
    box-shadow: var(--pf-glass-shadow);
    backdrop-filter: blur(var(--pf-blur-strong)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--pf-blur-strong)) saturate(150%);
  }

  /* Sidebar becomes an off-canvas drawer, slid out by default. */
  .adm-sidebar {
    position: fixed !important; top: 0; left: 0; bottom: 0;
    width: min(82vw, 300px) !important; height: 100vh !important;
    z-index: 70; margin: 0; border-radius: 0 var(--pf-r-xl) var(--pf-r-xl) 0;
    flex-direction: column !important; flex-wrap: nowrap !important;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 280ms var(--pf-ease-out, ease);
  }
  .adm-nav { flex-direction: column !important; flex-wrap: nowrap !important; }

  /* Scrim behind the open drawer. */
  .adm-drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(46,20,8,0.35); opacity: 0; pointer-events: none;
    transition: opacity 280ms var(--pf-ease, ease);
  }

  /* The checkbox lives just before the shell; when checked it opens
     the drawer and lights the scrim (general-sibling selectors). */
  #adm-nav-toggle:checked ~ .adm-stage .adm-sidebar { transform: translateX(0); }
  #adm-nav-toggle:checked ~ .adm-drawer-scrim { opacity: 1; pointer-events: auto; }

  /* Give the main column top room so content clears the burger. */
  .adm-greeting { padding-left: 52px; }

  /* KPI strip drops to two columns. */
  .adm-kpis { grid-template-columns: 1fr 1fr !important; }

  /* Data tables: keep the column grid but let the card scroll
     sideways so rows aren't crushed. Page-level table cards set
     overflow:hidden, override to auto-x and give the grid rows a
     sensible min-width so the columns keep their shape. The card is
     a flex column, so a min-width head/row forces the whole card
     (head + body together) to scroll horizontally. */
  .adm-table-head,
  .adm-table-row { min-width: 640px; }
  .ku-table, .ar-table { overflow: auto !important; }

  /* Page-level two/three-column wrappers stack to a single column.
     These selectors live in the per-page <style> blocks we can't
     edit, so base.css overrides them here. Each one is a content
     grid like "main column + side panel" that doesn't fit a phone.
     The calendar month grid itself stays at 7 fluid columns (1fr),
     so the day cells just shrink — no rule needed for those. */
  .ak-grid, .ck-grid,        /* admin/client kalender: month + side panel */
  .ad-grid,                  /* admin dashboard */
  .hu-grid, .hu-stats,       /* client hunde: card grid + stat tiles */
  .akd-cols, .hd-cols,       /* kunden-detail / hund-detail two-col */
  .pr-grid {                 /* client profil */
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 540px) {
  .adm-shell { padding: clamp(10px, 4vw, 14px); }
  .adm-greeting h1 { font-size: clamp(22px, 7vw, 28px); }
  .adm-kpis { grid-template-columns: 1fr !important; }
}