@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  :root { font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
  html, body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    background-color: var(--bg, #f2f2f7);
    background-image: var(--app-bg-image, url("./srcs/backgroundgray.png"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  @supports (overflow: clip) {
    html,
    body {
      overflow-x: clip;
    }
  }

  body {
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    background-color: var(--bg, #f2f2f7);
    background-image: var(--app-bg-image, url("./srcs/backgroundgray.png"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  body.is-loading {
    overflow: hidden;
    touch-action: none;
  }

  .app-bg {
    position: fixed;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: 0;
    pointer-events: none;
    background-image: var(--app-bg-image, url("./srcs/backgroundgray.png"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .app-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: 0;
    padding-left: env(safe-area-inset-left);
  }

@media (max-width: 768px) {
  .content { background: transparent !important; }
}

@media (hover: none) and (pointer: coarse) {
  html,
  body {
    overscroll-behavior: none;
    touch-action: pan-y pinch-zoom;
  }
  button,
  a,
  input,
  select,
  textarea,
  [role="button"] {
    touch-action: manipulation;
  }

  .app-bg {
    transform: translate3d(0, 0, 0);
  }
}
}

@layer base {
  :root {
    --bg: #f2f2f7;
    --app-bg-image: url("./srcs/backgroundgray.png");
    --surface: #ffffff;
    --card: #ffffff;
    --block-surface: rgba(255, 255, 255, 0.9);
    --border: #d9dae2;
    --line-strong: #cfd2db;
    --text: #1b1c22;
    --muted: #7c7f87;
    --accent: #0a84ff;
    --accent-2: #63b3ff;
    --calendar-highlight: #22c55e;
    --shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    --radius: 16px;
    --glass-bg: var(--block-surface);
    --glass-strong-bg: var(--block-surface);
    --glass-border: var(--border);
    --glass-blur: none;
    --glass-shadow: none;
    --mobile-safe-bottom: 0px;
    --mobile-nav-height: 62px;
    --mobile-nav-offset: calc(var(--mobile-nav-height) + 12px + var(--mobile-safe-bottom));
    --mobile-nav-indicator-x: 0px;
    --mobile-nav-indicator-y: 6px;
    --mobile-nav-indicator-w: 0px;
    --mobile-nav-indicator-h: 44px;
  }
  body.is-standalone { --mobile-safe-bottom: env(safe-area-inset-bottom); }
  body.light {
    --bg: #f2f2f7;
    --surface: #ffffff;
    --card: #ffffff;
    --block-surface: rgba(255, 255, 255, 0.9);
    --border: #d9dae2;
    --line-strong: #cfd2db;
    --text: #1b1c22;
    --muted: #7c7f87;
    --accent: #0a84ff;
    --accent-2: #0a84ff;
    --shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  }
  body.dark {
    --bg: #0c0f16;
    --app-bg-image: url("./srcs/backgrounddark.png?v=20260220-23");
    --surface: #111827;
    --card: #0f1726;
    --block-surface: rgba(17, 24, 39, 0.9);
    --border: #1f2937;
    --line-strong: #2b3547;
    --text: #e5eaf5;
    --muted: #9ca3af;
    --accent: #0a84ff;
    --accent-2: #63b3ff;
    --shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  }
  body.dark .app-bg {
    background-image: url("./srcs/backgrounddark.png?v=20260220-23");
  }

  body.forest {
    --bg: #07150f;
    --app-bg-image: url("./srcs/backgroundgreen.png?v=20260220-23");
    --surface: #0f2419;
    --card: #11281c;
    --block-surface: rgba(15, 36, 25, 0.9);
    --border: #214735;
    --line-strong: #2c5a45;
    --text: #e6f3eb;
    --muted: #95b1a3;
    --accent: #2fa66e;
    --accent-2: #66d49f;
    --calendar-highlight: #38c785;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
  }
  body.forest .app-bg {
    background-image: url("./srcs/backgroundgreen.png?v=20260220-23");
  }

  body.forest .brand-mark {
    background: linear-gradient(135deg, #2a8a60, #62c998);
    color: #eafff1;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  }

  body.forest .card,
  body.forest .page-surface .card,
  body.forest .shifts-toolbar,
  body.forest .app-control-card,
  body.forest .settings-list-group,
  body.forest .control-row,
  body.forest .list-item,
  body.forest .info-box,
  body.forest .calendar-summary-card,
  body.forest .calendar-card,
  body.forest .shift-entry,
  body.forest .shift-form-card,
  body.forest .shift-inline-meta,
  body.forest .donut-legend,
  body.forest .kpi-rail,
  body.forest .kpi-grid,
  body.forest .month-summary-card,
  body.forest .mono-value,
  body.forest .calendar-popup-window,
  body.forest .loading-box,
  body.forest .chart-tooltip,
  body.forest .toast {
    background: var(--block-surface) !important;
    border-color: color-mix(in srgb, var(--border) 88%, transparent);
  }

  body {
    color: var(--text);
    transition: background 0.25s ease, color 0.25s ease;
  }

  h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: -0.01em; }
  h1 { font-size: 30px; line-height: 1.18; font-weight: 700; }
  h2 { font-size: 24px; line-height: 1.22; font-weight: 700; }
  p { margin: 0; }
  input, select, button, textarea { font: inherit; }
}

@layer layout {
  .app-shell {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow-x: hidden;
  }

  .app-header {
    position: sticky;
    top: 0;
    z-index: 9;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--border);
    gap: 12px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent-2) 45%, var(--accent)));
    color: #0b1320;
    font-weight: 800;
    letter-spacing: 0.05em;
  }

  .brand-text { display: flex; flex-direction: column; gap: 2px; }
  .brand-sub { font-size: 12px; color: var(--muted); }

  .header-actions { display: flex; align-items: center; gap: 8px; }

  .shell {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: none;
    box-sizing: border-box;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: 1px solid var(--border);
    padding: 24px 16px 18px 18px;
    box-shadow: 10px 0 30px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100vh;
    min-height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
    flex-shrink: 0;
    z-index: 2;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .sidebar-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px 10px 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    margin-bottom: 4px;
  }
  .sidebar-profile .brand-mark { width: 42px; height: 42px; }
  .sidebar-profile .brand-title { font-size: 15px; }
  .sidebar-profile .brand-sub { font-size: 12px; color: var(--muted); }

  .nav-group { display: flex; flex-direction: column; gap: 8px; }

.content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 32px 60px 32px;
    position: relative;
    width: calc(100% - 260px);
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    margin: 0;
    margin-left: 260px;
    max-width: none;
    min-width: 0;
    z-index: 1;
}
.content > * { position: relative; z-index: 1; }
.screen { display: none; flex-direction: column; gap: 16px; }
.screen.active { display: flex; animation: fadeSlide 180ms ease; }

  .hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.9fr); gap: 20px; align-items: stretch; }
  .hero-meta { display: grid; gap: 6px; }
  .hero h1 { font-size: 30px; line-height: 1.15; }
  .hero .muted { max-width: 58ch; }
  .filters-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 0 10px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  }
  .filters-row > * { min-width: 0; }
  .filter-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .filter-actions .ghost-btn {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--text);
    transform: translateY(0) scale(1);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.3s ease;
  }
  .filter-actions .ghost-btn:hover { transform: translateY(0) scale(1); }
  .filter-actions .ghost-btn.active,
  .filter-actions .ghost-btn.is-active,
  .ghost-btn[data-qfilter].is-active,
  .ghost-btn[data-qfilter].active {
    background: #0a84ff;
    border-color: #0a84ff;
    color: #ffffff;
    font-weight: 800;
    transform: translateY(0) scale(1);
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.3s ease;
    box-shadow: 0 16px 28px rgba(10, 132, 255, 0.36);
  }
  .filter-actions .ghost-btn.is-active:hover,
  .filter-actions .ghost-btn.is-active:active,
  .ghost-btn[data-qfilter].is-active:hover,
  .ghost-btn[data-qfilter].is-active:active {
    transform: translateY(0) scale(1);
  }
  /* keep lift persistent even with global hover/active rules */
  .ghost-btn[data-qfilter].is-active,
  .ghost-btn[data-qfilter].active {
    transform: translateY(0) scale(1) !important;
  }
  .month-switcher {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }
  .month-label { font-weight: 800; letter-spacing: -0.01em; }
  .month-switcher .ghost-btn.small { min-width: 38px; }
  .kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 0; }
  .data-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  .grid { display: grid; gap: 16px; }
  .grid.two { grid-template-columns: minmax(420px, 1.8fr) minmax(320px, 1.1fr); }

  @media (min-width: 881px) {
    #screen-dashboard .filters-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 8px 10px;
      border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
      border-radius: 14px;
      border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
      background: color-mix(in srgb, var(--surface) 97%, transparent);
    }

    #screen-dashboard .filters-row > * {
      min-height: 52px;
      display: flex;
      align-items: center;
      min-width: 0;
      position: relative;
      padding-inline: 10px;
    }

    #screen-dashboard .filters-row > *:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 18%;
      right: -6px;
      width: 1px;
      height: 64%;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--border) 70%, transparent) 20%,
        color-mix(in srgb, var(--border) 70%, transparent) 80%,
        transparent 100%
      );
      pointer-events: none;
    }

    #screen-dashboard .month-switcher {
      min-height: 52px;
      display: grid;
      grid-template-columns: 44px minmax(160px, 1fr) 44px;
      align-items: center;
      gap: 6px;
      padding: 0 2px;
      border-radius: 0;
      border: none;
      background: transparent;
      min-width: 280px;
    }

    #screen-dashboard .month-label {
      min-width: 0;
      text-align: center;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.01em;
    }

    #screen-dashboard .month-switcher .ghost-btn.small {
      min-width: 44px;
      min-height: 44px;
      padding: 0;
      border-radius: 10px;
      background: color-mix(in srgb, var(--surface) 96%, transparent);
      border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    }

    #screen-dashboard .filter-actions {
      justify-self: center;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(92px, 1fr);
      align-items: center;
      gap: 0;
      padding: 0;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
      background: color-mix(in srgb, var(--surface) 98%, transparent);
      width: 100%;
      max-width: 500px;
      overflow: hidden;
    }

    #screen-dashboard .filter-actions .ghost-btn.small {
      min-height: 50px;
      padding: 10px 12px;
      border-radius: 0;
      border: none;
      background: transparent;
      font-weight: 600;
      font-size: 15px;
      position: relative;
    }

    #screen-dashboard .filter-actions .ghost-btn.small:not(:last-of-type)::after {
      content: "";
      position: absolute;
      top: 16%;
      right: 0;
      width: 1px;
      height: 68%;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--border) 72%, transparent) 20%,
        color-mix(in srgb, var(--border) 72%, transparent) 80%,
        transparent 100%
      );
      pointer-events: none;
    }

    #screen-dashboard .filter-actions .ghost-btn[data-qfilter].is-active,
    #screen-dashboard .filter-actions .ghost-btn[data-qfilter].active {
      background: color-mix(in srgb, var(--accent) 10%, transparent);
      color: var(--text);
      font-weight: 700;
      box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 50%, transparent);
    }

    #screen-dashboard .filter-actions .ghost-btn.small:hover {
      background: color-mix(in srgb, var(--surface) 95%, transparent);
    }

    #screen-dashboard .filters-row > .inline {
      justify-self: end;
      display: grid;
      grid-auto-flow: column;
      gap: 0;
      padding: 0;
      border-radius: 0;
      border: none;
      background: transparent;
    }

    #screen-dashboard .filters-row > .inline .ghost-btn.small {
      min-height: 42px;
      padding: 8px 14px;
      border-radius: 8px;
      border: none;
      background: transparent;
      font-weight: 600;
      font-size: 15px;
      position: relative;
    }

    #screen-dashboard .filters-row > .inline .ghost-btn.small:not(:last-of-type)::after {
      content: "";
      position: absolute;
      top: 24%;
      right: 0;
      width: 1px;
      height: 52%;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--border) 68%, transparent) 20%,
        color-mix(in srgb, var(--border) 68%, transparent) 80%,
        transparent 100%
      );
      pointer-events: none;
    }

    #screen-dashboard #month-today {
      background: color-mix(in srgb, var(--accent) 8%, transparent);
      box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 48%, transparent);
    }

    #screen-dashboard #dashboard-refresh {
      color: var(--muted);
    }

    #screen-dashboard .filter-actions .ghost-btn.small:hover,
    #screen-dashboard .month-switcher .ghost-btn.small:hover,
    #screen-dashboard .filters-row > .inline .ghost-btn.small:hover {
      background: color-mix(in srgb, var(--surface) 94%, transparent);
    }
  }
}

@layer components {
.page-surface {
    background: transparent;
    border: none;
    border-radius: 20px;
    padding: 22px 24px;
    display: grid;
    gap: 18px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    width: 100%;
    box-sizing: border-box;
}

  .card {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 180ms ease, background 160ms ease, border-color 160ms ease;
  }

  .page-surface .card { background: var(--surface); border-color: color-mix(in srgb, var(--border) 90%, transparent); }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card,
    .page-surface,
    .hero-highlight,
    .kpi-rail,
    .month-summary-card {
      background: color-mix(in srgb, var(--surface) 96%, transparent);
      border-color: color-mix(in srgb, var(--border) 86%, transparent);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .calendar-desktop-root,
    .calendar-desktop-header {
      background: color-mix(in srgb, var(--surface) 96%, transparent);
      border-color: color-mix(in srgb, var(--border) 86%, transparent);
      box-shadow: var(--glass-shadow);
    }
  }

  .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  .ghost-btn,
  button {
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    color: var(--text);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border 0.16s ease, background 0.16s ease;
    transform: none;
  }

  button:hover { border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); box-shadow: none; transform: none; }
  button:active { box-shadow: none; background: color-mix(in srgb, var(--surface) 92%, transparent); transform: none; }
  button:disabled { opacity: 0.65; cursor: not-allowed; }

  .primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, #ffffff 6%), color-mix(in srgb, var(--accent) 86%, #ffffff 14%));
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: #ffffff;
    font-weight: 700;
    box-shadow: none;
  }

  .danger { border-color: rgba(240, 113, 120, 0.4); color: #f28b94; }
  button.small { padding: 8px 10px; font-size: 13px; }

  input, select, textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--surface) 98%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 12px;
    padding: 11px 12px;
    color: var(--text);
    transition: border 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }
  input:focus, select:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); background: color-mix(in srgb, var(--surface) 100%, transparent); }
  label { font-size: 13px; color: var(--muted); letter-spacing: 0.01em; }

  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  .form-grid.compact { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .actions { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; }
  .actions.split { justify-content: space-between; align-items: center; flex-wrap: wrap; }

  .nav-btn {
    border: 1px solid transparent;
    background: transparent;
    padding: 11px 12px;
    border-radius: 12px;
    text-align: left;
    font-weight: 700;
    color: color-mix(in srgb, var(--text) 78%, #000000 6%);
    letter-spacing: 0.01em;
    transition: border 0.14s ease, background 0.14s ease, color 0.14s ease;
  }
  .nav-btn:hover { background: color-mix(in srgb, var(--accent) 10%, #ffffff 10%); color: var(--text); }
  .nav-btn.active {
    background: color-mix(in srgb, var(--accent) 16%, #ffffff 6%);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    color: #0b121f;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
  }

  .hero {
    padding: 20px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
  .hero-highlight {
    justify-self: end;
    align-self: stretch;
    min-width: 260px;
    max-width: 320px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .month-summary-card {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    border-radius: 14px;
    padding: 14px;
    display: grid;
    gap: 10px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .stat-chip { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
  .trend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  #hero-month-earn { font-size: 28px; }
  #kpi-diff { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; }

  .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { padding: 6px 12px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); font-size: 12px; color: var(--muted); }
  .active-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    font-size: 12px;
    color: var(--text);
  }
  .active-chip .remove {
    border: none;
    background: transparent;
    color: var(--muted);
    padding: 0;
    width: 16px;
    height: 16px;
    min-height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: none;
  }

  .kpi-rail {
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .kpi-rail::-webkit-scrollbar {
    display: none;
  }
  .kpi-grid {
    background: color-mix(in srgb, var(--surface) 98%, transparent);
    border-radius: inherit;
    overflow: hidden;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    gap: 0;
    min-width: 780px;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
  }
  .kpi-card {
    position: relative;
    padding: 14px 16px;
    border-radius: 0;
    border: none;
    background: transparent;
    min-height: 104px;
    display: grid;
    gap: 6px;
    align-content: center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .kpi-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 16%;
    right: 0;
    width: 1px;
    height: 68%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in srgb, var(--border) 70%, transparent) 20%,
      color-mix(in srgb, var(--border) 70%, transparent) 80%,
      transparent 100%
    );
  }
  .kpi-label { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
  .kpi-value { font-size: 26px; font-weight: 800; }
  .kpi-sub { color: var(--muted); font-size: 12px; }
  .kpi-button {
    text-align: left;
    border-radius: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  .kpi-button:hover {
    transform: none;
    box-shadow: none;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
  .kpi-button:active {
    transform: none;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .kpi-card:nth-child(5) .kpi-sub { display: none; }
  .kpi-card:nth-child(6) .kpi-sub { display: none; }

  .goals-card {
    display: grid;
    gap: 12px;
  }
  .goal-row {
    display: grid;
    gap: 8px;
  }
  .goal-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .goal-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    overflow: hidden;
  }
  .goal-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width 220ms ease;
  }

  .chart-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    border-radius: 14px;
    padding: 14px;
    grid-column: span 6;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .chart-card.span-6 { grid-column: span 6; }
  .chart-card.span-12 { grid-column: span 12; }
  .stat-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 220px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    background: color-mix(in srgb, var(--surface) 98%, transparent);
  }
  .stat-canvas.donut { min-height: 280px; aspect-ratio: 1 / 1; }
  .chart-empty {
    position: absolute;
    inset: 60px 12px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    color: var(--muted);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    pointer-events: none;
  }
  .chart-foot { margin-top: 4px; font-size: 12px; color: var(--muted); }

  .list { display: flex; flex-direction: column; gap: 8px; }
  .list-item {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: color-mix(in srgb, var(--surface) 98%, transparent);
    transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
  }
  .list-item:hover { background: color-mix(in srgb, var(--surface) 96%, transparent); transform: none; border-color: color-mix(in srgb, var(--border) 90%, transparent); }
  .list-item .meta { display: flex; flex-direction: column; gap: 4px; }
  .list-item .value-right { text-align: right; min-width: 120px; }
  .entry-list .list-item { align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; }
  .entry-list .value-right { display: grid; gap: 6px; min-width: 160px; }
  .entry-list .value-right button { width: 100%; }
  .entry-list .muted.small { font-size: 12px; color: var(--muted); }
  .empty { padding: 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--border) 75%, transparent); color: var(--muted); text-align: center; background: color-mix(in srgb, var(--surface) 96%, transparent); }

  .inline-form { display: flex; align-items: center; gap: 8px; }
  .inline-form { flex-wrap: wrap; }
  .inline { display: inline-flex; align-items: center; gap: 8px; }
  .pill { padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); font-size: 12px; }
  .pill-up { color: #0f5132; background: rgba(52, 168, 83, 0.18); border: 1px solid rgba(52, 168, 83, 0.35); }
  .pill-down { color: #8a1c1c; background: rgba(242, 92, 84, 0.14); border: 1px solid rgba(242, 92, 84, 0.3); }
  .animate-in { opacity: 0; animation: riseFade 260ms ease forwards; animation-delay: var(--anim-delay, 0ms); }
  .tap-anim { animation: tapPress 140ms ease; }
  .badge { padding: 4px 8px; border-radius: 8px; border: 1px dashed var(--border); color: var(--muted); font-size: 12px; }
  .info-box { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 97%, transparent); border: 1px solid color-mix(in srgb, var(--border) 86%, transparent); font-size: 13px; color: var(--muted); }
  .divider { border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent); margin: 12px 0; }

  .time-row { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 12px; align-items: end; margin-top: 6px; }
  .time-label { font-size: 12px; color: var(--muted); }

  .donut-wrap { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: 16px; align-items: flex-start; }
  .donut-legend {
    display: grid;
    gap: 10px;
    align-self: flex-start;
    padding: 12px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 12px;
    box-shadow: none;
  }
  .legend-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 94%, transparent); }
  .legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

/* Calendar */
.calendar-surface { gap: 12px; }

.calendar-desktop-root {
  --calendar-header-height: 84px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
}

.calendar-desktop-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.calendar-header-actions {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}
.calendar-desktop-header .ghost-btn.circle {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
}

.calendar-desktop-header .calendar-month {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
}

.calendar-summary-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.calendar-summary-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  display: grid;
  gap: 4px;
}
.calendar-summary-card strong {
  font-size: 17px;
}

.calendar-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}
.calendar-filter-actions {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
}
.calendar-filter-actions .ghost-btn {
  min-height: 40px;
}

.calendar-board {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
  min-height: 0;
}

.calendar-card {
  background: var(--glass-strong-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  height: 100%;
  min-height: 0;
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  align-items: stretch;
  padding: 0 2px;
}
.weekday {
  text-align: center;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  font-weight: 700;
  color: var(--muted);
}
.weekday.weekend { color: color-mix(in srgb, var(--accent) 60%, var(--muted)); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.calendar-desktop-grid { height: 100%; grid-auto-rows: 1fr; min-height: 0; }

.day-cell {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 98%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border 0.12s ease, transform 0.12s ease, background 0.12s ease;
  position: relative;
  min-height: 0;
}
.day-cell:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
.day-cell.muted { opacity: 0.45; cursor: default; }
.day-cell.weekend { background: color-mix(in srgb, var(--surface) 96%, #ffffff 2%); }
.day-cell.today {
  border-color: color-mix(in srgb, var(--calendar-highlight) 70%, var(--border));
  background: color-mix(in srgb, var(--calendar-highlight) 12%, var(--surface));
}
.day-cell.active {
  outline: 2px solid color-mix(in srgb, var(--calendar-highlight) 72%, transparent);
  background: color-mix(in srgb, var(--calendar-highlight) 18%, var(--surface));
}

.calendar-day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.calendar-day-number { font-weight: 800; font-size: 20px; line-height: 1; }
.calendar-day-amount {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.calendar-day-weekday { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }

.calendar-day-markers {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  min-height: 16px;
}
.calendar-marker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.calendar-marker-bar {
  height: 4px;
  border-radius: 999px;
  flex: 1;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
}
.calendar-marker-more { font-size: 12px; color: var(--muted); }

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  font-size: 12px;
  color: var(--muted);
}
.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.day-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.day-detail-head h3 { margin: 2px 0; font-size: 22px; }
.day-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.day-meta-box {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}
.day-meta-box strong { font-size: 16px; display: block; }
.day-meta-box .muted { font-size: 12px; }
.day-entry-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.calendar-tooltip {
  position: fixed;
  z-index: 30;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  min-width: 180px;
  pointer-events: none;
}
.calendar-tooltip .tt-head { font-size: 13px; color: var(--muted); }
.calendar-tooltip .tt-value { font-weight: 800; font-size: 16px; margin: 4px 0; }
.calendar-tooltip .tt-sub { font-size: 12px; color: var(--muted); }

.calendar-sheet {
  position: fixed;
  inset: 0;
  display: grid;
  align-items: end;
  z-index: 40;
  pointer-events: none;
}
.calendar-sheet.open { pointer-events: auto; }
.calendar-sheet.hidden { display: none !important; }
.calendar-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.calendar-sheet.open .calendar-sheet-backdrop { cursor: pointer; }
.calendar-sheet-body {
  position: relative;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border-radius: 18px 18px 0 0;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  padding: 12px 12px 12px;
  box-shadow: 0 -14px 26px rgba(15, 23, 42, 0.18);
  transform: translateY(100%);
  transition: transform 0.22s ease;
  width: min(760px, 100%);
  height: 93vh;
  max-height: 93vh;
  overflow-y: auto;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 8px;
  margin: 0 auto;
  pointer-events: auto;
  align-content: start;
  backdrop-filter: blur(14px) saturate(1.05);
}
.calendar-sheet.open .calendar-sheet-body { transform: translateY(0); }
.calendar-sheet.open .calendar-sheet-backdrop { opacity: 1; }
.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--border) 90%, transparent);
  margin: 2px auto 6px;
}
.sheet-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 8px;
  padding: 0 4px;
}
.sheet-head .inline { display: inline-flex; align-items: center; gap: 8px; }
.sheet-date { font-weight: 800; font-size: 19px; line-height: 1.1; }
.calendar-sheet-body .eyebrow { margin-bottom: 2px; letter-spacing: 0.08em; }
.sheet-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
}
.sheet-close:active { transform: scale(0.96); }
.sheet-head .ghost-btn.icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 18px;
  display: grid;
  place-items: center;
}
.calendar-sheet-body .day-detail-meta {
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: color-mix(in srgb, var(--surface) 98%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 14px;
  padding: 8px 8px;
}
.calendar-sheet-body .list {
  display: grid;
  gap: 6px;
  padding: 0;
  align-content: start;
}
.calendar-sheet-body .list-item {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 14px;
  padding: 8px 10px;
  align-items: flex-start;
  gap: 8px;
  box-shadow: none;
  width: 100%;
}
.calendar-sheet-body .list-item .pill {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  display: grid;
  place-items: center;
  min-height: 32px;
}
.calendar-sheet-body .day-entry-actions {
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}
.calendar-sheet-body .day-meta-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 72px;
  padding: 6px 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  position: relative;
}
.calendar-sheet-body .day-meta-box strong {
  font-size: 16px;
  margin-bottom: 2px;
}
.calendar-sheet-body .day-meta-box .muted {
  font-size: 12px;
}
.calendar-sheet-body .day-meta-box:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 4%;
  bottom: 4%;
  right: -0.5px;
  width: 1px;
  background: color-mix(in srgb, var(--border) 82%, transparent);
}
	.calendar-sheet-body .day-detail-meta + .list { margin-top: 2px; }
	
@media (min-width: 881px) {
  .calendar-desktop-root {
    grid-template-rows: var(--calendar-header-height) 1fr;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-height: 70vh;
  }
  .calendar-desktop-header {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    background: var(--surface);
    height: var(--calendar-header-height);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.calendar-desktop-mode .content { padding: 16px 20px 16px 20px; }
  body.calendar-desktop-mode .page-surface.calendar-surface {
    padding: 0;
    border: none;
    background: transparent;
	    box-shadow: none;
	  }
	  body.calendar-desktop-mode .calendar-desktop-root {
	    height: calc(100vh - 32px);
	    min-height: calc(100vh - 32px);
	    height: calc(100dvh - 32px);
	    min-height: calc(100dvh - 32px);
	  }
	}

	.calendar-popup {
	  position: fixed;
	  inset: 0;
	  z-index: 50;
	  pointer-events: none;
	}
	.calendar-popup.hidden { display: none !important; }
	.calendar-popup.open { pointer-events: auto; }
	.calendar-popup-backdrop {
	  position: absolute;
	  inset: 0;
	  background: rgba(0, 0, 0, 0.18);
	  opacity: 0;
	  transition: opacity 0.18s ease;
	}
	.calendar-popup.open .calendar-popup-backdrop { opacity: 1; cursor: pointer; }
	.calendar-popup-window {
	  position: fixed;
	  width: min(520px, 90vw);
	  max-height: min(78vh, 760px);
	  left: 0;
	  top: 0;
	  background: color-mix(in srgb, var(--surface) 98%, transparent);
	  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
	  border-radius: 16px;
	  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.18);
	  padding: 14px;
	  display: grid;
	  grid-template-rows: auto auto 1fr;
	  gap: 12px;
	  opacity: 0;
	  transform: translateY(8px);
	  transition: opacity 0.2s ease, transform 0.2s ease;
	  pointer-events: auto;
	  backdrop-filter: blur(10px) saturate(1.02);
	  min-height: 260px;
	  min-width: 0;
	  overflow: hidden;
	}
	.kpi-detail-window {
	  width: min(640px, 92vw);
	  max-height: min(74vh, 700px);
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, calc(-50% + 8px));
	  grid-template-rows: auto auto 1fr;
	}
	.kpi-detail-window #kpi-detail-chart {
	  width: min(100%, 540px);
	  justify-self: center;
	  aspect-ratio: 16 / 7;
	  min-height: 150px;
	  max-height: 190px;
	}
	.kpi-detail-window #kpi-detail-list {
	  max-height: min(36vh, 300px);
	  overflow-y: auto;
	}
	.calendar-popup.open .calendar-popup-window { opacity: 1; transform: translateY(0); }
	.calendar-popup.open .kpi-detail-window { transform: translate(-50%, -50%); }
	.calendar-popup-header {
	  display: grid;
	  grid-template-columns: auto 1fr auto;
	  align-items: center;
	  gap: 12px;
	  cursor: grab;
	  user-select: none;
	}
	.calendar-popup-window.dragging .calendar-popup-header { cursor: grabbing; }
	.calendar-popup-title { display: grid; gap: 4px; }
	.calendar-popup-date { font-weight: 800; font-size: 18px; line-height: 1.1; }
	.calendar-popup-close {
	  width: 14px;
	  height: 14px;
	  border-radius: 50%;
	  border: 1px solid rgba(0, 0, 0, 0.08);
	  background: #ff5f56;
	  padding: 0;
	  display: grid;
	  place-items: center;
	  cursor: pointer;
	  transition: filter 0.12s ease, transform 0.12s ease;
	}
	.calendar-popup-close .close-icon {
	  opacity: 0;
	  line-height: 1;
	  font-size: 11px;
	  color: #450a0a;
	}
	.calendar-popup-close:hover .close-icon { opacity: 1; }
	.calendar-popup-close:hover { filter: brightness(0.95); }
	.calendar-popup-close:active { transform: scale(0.95); }
	.calendar-popup-window .day-detail-meta { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
	.calendar-popup-window .list { gap: 8px; overflow-y: auto; padding-right: 2px; }
	.calendar-popup-window .list-item { box-shadow: none; }
	.calendar-popup-window .popup-actions { gap: 8px; }

	@media (max-width: 880px) {
	  .calendar-popup:not(#kpi-detail-modal) { display: none !important; }
	}

.calendar-fab {
	  position: fixed;
	  right: 16px;
	  bottom: var(--mobile-nav-offset);
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b1220;
  border: none;
  font-size: 26px;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
  z-index: 45;
}
.calendar-fab.hidden { display: none !important; }

  .loading {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 58%, rgba(8, 12, 24, 0.46));
    display: grid;
    place-items: center;
    z-index: 420;
    backdrop-filter: blur(10px) saturate(1.06);
    -webkit-backdrop-filter: blur(10px) saturate(1.06);
  }
  .loading-box {
    display: grid;
    gap: 12px;
    justify-items: center;
    padding: 22px 20px 18px;
    min-width: 170px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    box-shadow: 0 16px 34px rgba(8, 12, 24, 0.22);
  }
  .loading-mark {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: block;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
  }
  .loading-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--border) 60%, transparent);
    border-top-color: var(--accent);
    animation: spin 0.8s linear infinite;
  }
  .loading-text {
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--text) 78%, var(--muted));
    letter-spacing: 0.01em;
    text-align: center;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  #toast-container { position: fixed; bottom: 16px; right: 16px; display: grid; gap: 8px; z-index: 130; }
  .toast { background: var(--card); border: 1px solid var(--border); padding: 10px 12px; border-radius: 10px; min-width: 180px; box-shadow: var(--shadow); animation: fadeIn 0.2s ease; }
  .toast.success { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
  .toast.error { border-color: rgba(240, 113, 120, 0.5); }
  @keyframes fadeIn { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

  .chart-tooltip {
    position: fixed;
    z-index: 50;
    background: color-mix(in srgb, var(--card) 96%, transparent);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: var(--shadow);
    pointer-events: none;
    min-width: 160px;
  }
  .chart-tooltip .tt-head { font-size: 13px; color: var(--muted); }
  .chart-tooltip .tt-value { font-weight: 800; font-size: 16px; margin: 4px 0; }
  .chart-tooltip .tt-sub { font-size: 12px; color: var(--muted); }

  @keyframes fadeSlide {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes riseFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes tapPress {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(0) scale(0.985); }
    100% { transform: translateY(0) scale(1); }
  }
}

@layer utilities {
  .hidden { display: none !important; }
  .mobile-only { display: none; }
  #mobile-nav { display: none; }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .filter-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.18); backdrop-filter: blur(2px); z-index: 1; }
  .filter-backdrop.hidden { display: none; }
  .eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
  .muted { color: var(--muted); }
  .muted.small { font-size: 12px; }
  .subtle-label { color: var(--muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

  /* Keep period filter buttons stable while the active one lifts smoothly */
  .filter-actions .ghost-btn[data-qfilter] {
    transform: translateY(0) scale(1);
    transform-origin: center bottom;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
  }
  .filter-actions .ghost-btn[data-qfilter]:hover,
  .filter-actions .ghost-btn[data-qfilter]:active {
    transform: translateY(0) scale(1) !important;
    box-shadow: none;
  }
  .filter-actions .ghost-btn[data-qfilter].is-active,
  .filter-actions .ghost-btn[data-qfilter].active {
    transform: translateY(0) scale(1) !important;
    box-shadow: none;
  }
  .filter-actions .ghost-btn[data-qfilter].is-active:hover,
  .filter-actions .ghost-btn[data-qfilter].is-active:active {
    transform: translateY(0) scale(1) !important;
    box-shadow: none;
  }
  .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
  }
  .switch input { opacity: 0; width: 0; height: 0; }
  .switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: color-mix(in srgb, var(--border) 85%, transparent);
    transition: 0.2s;
    border-radius: 28px;
  }
  .switch .slider::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    top: 3px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  .switch input:checked + .slider {
    background: color-mix(in srgb, var(--accent) 45%, var(--border));
  }
  .switch input:checked + .slider::before {
    transform: translateX(22px);
  }
}

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .data-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .calendar-board { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) and (min-width: 769px) {
  #screen-dashboard .filters-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    padding: 4px 0 10px 0;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 0;
    background: transparent;
  }
  #screen-dashboard .filters-row > * {
    min-height: 0;
    min-width: 0;
    padding-inline: 0;
  }
  #screen-dashboard .filters-row > *::after {
    display: none !important;
  }
  #screen-dashboard .month-switcher {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }
  #screen-dashboard .month-label {
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #screen-dashboard .filter-actions {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 0;
  }
  #screen-dashboard .filter-actions .ghost-btn.small {
    width: 100%;
    min-width: 0;
    padding: 10px 8px;
    font-size: 14px;
  }
  #screen-dashboard .filters-row > .inline {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
  }
  #screen-dashboard .filters-row > .inline .ghost-btn.small {
    width: 100%;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }
  #screen-dashboard .filters-row > .inline .ghost-btn.small:not(:last-of-type)::after {
    display: none;
  }
}

@media (max-width: 880px) {
  .shell { padding: 0; }
  .content { gap: 14px; margin-left: 0; width: 100%; padding: 16px 14px var(--mobile-nav-offset) 14px; max-width: 100%; }
  #toast-container {
    left: 12px;
    right: 12px;
    bottom: var(--mobile-nav-offset);
    gap: 10px;
  }
  .toast {
    min-width: 0;
    width: 100%;
  }
  .page-surface {
    border-radius: 0;
    padding: 16px;
    box-shadow: none;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .card {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 14px;
  }
  .chart-card {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--border) 90%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .shifts-toolbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
    gap: 12px;
  }
  .shifts-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .shift-inline-meta { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .form-row.two,
  .form-row.three { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .mobile-only { display: block; }
  #mobile-nav { display: grid; }
  .app-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-left: 0;
    width: 100%;
    padding: 14px 16px;
    position: sticky;
  }
  .sidebar { display: none; }
  .settings-page-header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "back"
      "title";
    justify-items: stretch;
    text-align: center;
    row-gap: 10px;
  }
  #settings-back-btn {
    grid-area: back;
    justify-self: start;
    align-self: start;
    width: 44px;
    min-width: 44px;
    height: 44px;
    font-size: 26px;
    border-radius: 14px;
    position: relative;
    z-index: 1;
  }
  .settings-page-head-main {
    grid-area: title;
    justify-items: center;
    text-align: center;
    min-width: 0;
  }
  .settings-page-head-main h3 { font-size: 22px; }
  .settings-page-header .inline {
    grid-column: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    justify-self: stretch;
  }
  .settings-page-header .inline button { width: 100%; }
  .settings-home { gap: 10px; }
  .settings-nav-row { padding: 11px 12px; }
  .session-item {
    flex-direction: column;
    gap: 8px;
  }
  .session-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .session-actions button {
    width: 100%;
  }
  .filters-row { align-items: flex-start; }
  .filters-row .filter-actions { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  #stats-filter-body {
    position: fixed;
    inset: 82px 12px auto 12px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 12;
    box-shadow: var(--shadow);
  }
  .calendar-board { grid-template-columns: 1fr; border-radius: 14px; }
  .calendar-desktop-header {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: color-mix(in srgb, var(--surface) 97%, transparent);
  }
  .calendar-desktop-header .calendar-month {
    font-size: clamp(20px, 6vw, 26px);
    text-align: left;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .calendar-header-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 44px repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }
  .calendar-header-actions .ghost-btn,
  .calendar-header-actions .primary {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding-inline: 10px;
  }
  #calendar-add-entry {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .calendar-summary-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .calendar-summary-card { padding: 8px 10px; }
  .calendar-summary-card .muted.small { font-size: 11px; line-height: 1.2; }
  .calendar-summary-card strong { font-size: 15px; }
  .calendar-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
    gap: 8px;
  }
  .calendar-filter-actions { grid-column: 1 / -1; }
  .day-detail-card { display: none; }
  .calendar-weekdays { grid-template-columns: repeat(7, minmax(0, 1fr)); --kw-col: 0; }
  .calendar-weekdays .kw-head { display: none; }
  .calendar-grid { grid-template-columns: repeat(7, minmax(96px, 1fr)); --kw-col: 0; }
  .kw-cell { display: none; }
  .calendar-surface { padding: 0; gap: 10px; }
  .calendar-header-bar { padding: 0 6px; }
  .calendar-month-row { justify-content: center; gap: 10px; }
  .calendar-month-wrap { align-items: center; text-align: center; }
  .calendar-nav { flex: 1; justify-content: center; }
  .calendar-nav .today-btn { order: 3; }
  .calendar-actions,
  .calendar-filter-row,
  #calendar-active-filters { display: none !important; }
  .calendar-board {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    grid-template-columns: 1fr;
  }
  .calendar-card {
    padding: 0 6px 6px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(9px) saturate(1.08);
    -webkit-backdrop-filter: blur(9px) saturate(1.08);
  }
  .calendar-legend { display: none; }
  .calendar-weekdays { gap: 6px; margin: 0 0 8px; }
  .weekday {
    border: none;
    background: transparent;
    padding: 8px 0;
    font-weight: 700;
    color: color-mix(in srgb, var(--text) 65%, var(--muted));
  }
  .calendar-grid {
    gap: 6px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .day-cell {
    border: none;
    min-height: 82px;
    padding: 10px 8px;
    background: color-mix(in srgb, var(--surface) 98%, transparent);
    box-shadow: none;
    border-radius: 12px;
  }
  .day-cell.weekend { background: color-mix(in srgb, var(--surface) 96%, transparent); }
  .day-cell.today { border: 1px solid color-mix(in srgb, var(--calendar-highlight) 70%, var(--border)); }
  .day-cell.active { outline: 2px solid color-mix(in srgb, var(--calendar-highlight) 65%, transparent); }
  .calendar-day-head { gap: 4px; align-items: flex-start; }
  .calendar-day-number { font-size: 18px; line-height: 1; }
  .calendar-day-amount {
    font-size: 10px;
    line-height: 1.1;
    max-width: 68%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }
  .calendar-day-markers { gap: 4px; min-height: 12px; }
  .calendar-marker-dot { width: 7px; height: 7px; }
  .calendar-marker-more { font-size: 10px; }
  .day-head { align-items: center; }
  .day-number { font-size: 18px; }
  .day-weekday { font-size: 11px; }
  .day-amount,
  .day-sum-pill { display: none; }
  .day-body {
    margin-top: auto;
    justify-content: flex-start;
    gap: 4px;
  }
  .day-chips { gap: 4px; }
  .day-chip { width: 8px; height: 8px; box-shadow: none; }
}

@media (max-width: 720px) {
  .grid.two { grid-template-columns: 1fr; }
  .data-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

  .mobile-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(6px, calc(4px + var(--mobile-safe-bottom)));
    width: min(560px, calc(100% - 12px));
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    min-height: var(--mobile-nav-height);
    background: color-mix(in srgb, var(--surface) 68%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
    border-radius: 16px;
    backdrop-filter: blur(4px) saturate(1.01);
    -webkit-backdrop-filter: blur(4px) saturate(1.01);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
    z-index: 100;
    height: auto;
    isolation: isolate;
    overflow: hidden;
  }
  .mobile-nav::before { display: none; }
  .mobile-nav-indicator {
    position: absolute;
    top: var(--mobile-nav-indicator-y);
    left: 0;
    width: var(--mobile-nav-indicator-w);
    height: var(--mobile-nav-indicator-h);
    transform: translate3d(var(--mobile-nav-indicator-x), 0, 0);
    border-radius: 12px;
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 28%, var(--surface)),
      color-mix(in srgb, var(--accent-2) 26%, var(--surface))
    );
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 16%, transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: transform 0.22s cubic-bezier(0.24, 0.94, 0.22, 1), width 0.22s cubic-bezier(0.24, 0.94, 0.22, 1), height 0.22s cubic-bezier(0.24, 0.94, 0.22, 1), opacity 0.16s ease;
  }
  .mobile-nav.indicator-ready .mobile-nav-indicator { opacity: 1; }
  .mobile-nav.no-indicator-anim .mobile-nav-indicator { transition: none; }
  .mobile-nav-btn {
    position: relative;
    z-index: 1;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--surface) 18%, transparent);
    color: color-mix(in srgb, var(--text) 78%, var(--muted));
    font-weight: 700;
    box-shadow: none;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    padding: 5px 4px;
    touch-action: manipulation;
    transition: transform 0.12s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  }
  .mobile-nav-icon {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    line-height: 1;
    transition: transform 0.14s ease, opacity 0.14s ease;
  }
  .mobile-nav-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-nav-label {
    font-size: 9px;
    line-height: 1.1;
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
    transition: opacity 0.14s ease, transform 0.14s ease;
  }
  .mobile-nav-btn.active,
  .mobile-nav-btn[aria-current="page"] {
    background: transparent;
    border-color: transparent;
    color: var(--text);
  }
  .mobile-nav-btn.active .mobile-nav-icon,
  .mobile-nav-btn[aria-current="page"] .mobile-nav-icon {
    transform: translateY(-0.5px);
    opacity: 1;
  }
  .mobile-nav-btn.active .mobile-nav-label,
  .mobile-nav-btn[aria-current="page"] .mobile-nav-label {
    opacity: 1;
    transform: translateY(-0.5px);
  }
  .mobile-nav-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
    outline-offset: 2px;
  }
  .mobile-nav-btn:active { transform: translateY(1px); }

  @media (hover: hover) and (pointer: fine) {
    .mobile-nav-btn:hover {
      background: color-mix(in srgb, var(--accent) 14%, var(--surface) 66%);
      border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-nav-btn,
    .mobile-nav-icon,
    .mobile-nav-label,
    .mobile-nav-indicator {
      transition: none;
    }
  }

/* Calendar extras */
.day-detail-card { position: relative; border-left: 1px solid var(--border); box-shadow: none; }

/* Auth */
.auth-panel {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.auth-bg {
  position: absolute;
  inset: 0;
  background: url("./srcs/backroundquer.png") center/cover no-repeat;
  z-index: 0;
}
.auth-overlay {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 1;
}
.auth-shell {
  position: relative;
  z-index: 2;
  width: min(520px, 92vw);
}
.auth-card {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(18px);
  color: #0e172a;
}
.auth-header { margin-bottom: 18px; display: grid; gap: 6px; }
.auth-header h1 { font-size: 30px; }
.auth-card .muted { color: rgba(14, 23, 42, 0.72); }
.auth-card label { color: #0e172a; }
.auth-switch { display: flex; align-items: center; gap: 8px; margin-top: 18px; justify-content: center; }
.link-btn {
  background: none;
  border: none;
  color: #0b1220;
  cursor: pointer;
  padding: 0;
  font-weight: 700;
}
.password-field { position: relative; }
.password-field input { padding-right: 46px; }
  .password-toggle {
    position: absolute;
    right: 6px;
    top: 30px;
    width: 28px;
    min-width: 28px;
    padding: 4px;
    text-align: center;
    display: grid;
    place-items: center;
    background: none;
    border: none;
  }
  .password-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.auth-form { display: grid; gap: 14px; }
.auth-form .field label { font-size: 14px; }
.auth-form input { padding: 14px 14px; font-size: 16px; }
.auth-form .actions { width: 100%; }
.auth-form .primary.wide { width: 100%; padding: 14px; font-size: 16px; border-radius: 14px; }
.auth-error { color: #b42318; background: rgba(244, 68, 68, 0.1); border: 1px solid rgba(244, 68, 68, 0.25); padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.auth-error.hidden { display: none; }
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.auth-brand img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
}
.auth-brand .brand-title { font-size: 16px; font-weight: 800; color: #0b1220; }
.auth-panel .auth-card input {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

/* App Controls */
.settings-surface {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}
.settings-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 4px 2px;
}
.settings-page-head-main {
  display: grid;
  gap: 3px;
  grid-column: 2;
  justify-self: center;
  justify-items: center;
  text-align: center;
}
.settings-page-head-main .eyebrow { margin-bottom: 0; }
.settings-page-head-main h3 { font-size: 24px; line-height: 1.2; }
.settings-page-header .inline {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#settings-back-btn {
  grid-column: 1;
  justify-self: start;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  border-color: transparent;
  background: transparent;
  color: color-mix(in srgb, var(--text) 84%, var(--muted));
  box-shadow: none;
}
#settings-back-btn:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
#settings-back-btn:active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
#settings-back-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 52%, transparent);
  outline-offset: 2px;
}
.settings-pages { display: grid; gap: 14px; }
.settings-page { display: none; gap: 14px; }
.settings-page.active { display: grid; }
.settings-home {
  display: grid;
  gap: 12px;
}
.settings-group {
  display: grid;
  gap: 6px;
}
.settings-group-title {
  margin: 0 2px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.settings-list-group {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--surface) 98%, transparent);
  overflow: hidden;
  box-shadow: none;
}
.settings-nav-row {
  width: 100%;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease;
}
.settings-nav-row + .settings-nav-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}
.settings-nav-row:hover {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.settings-nav-row.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: none !important;
}
.settings-nav-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.settings-row-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  line-height: 1;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}
.settings-row-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.settings-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  align-content: center;
}
.settings-row-title {
  font-size: 15px;
  font-weight: 600;
}
.settings-row-sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-row-chevron {
  color: var(--muted);
  font-size: 21px;
  line-height: 1;
}
.control-stack { display: grid; gap: 10px; }
.control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  flex-wrap: wrap;
}
.control-row button {
  min-width: 140px;
}
.control-row p { margin-top: 4px; }
.appearance-picker {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 260px;
}
.appearance-picker select {
  min-width: 0;
  width: 100%;
}
.account-id-actions {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 260px;
}
.account-security-stack {
  gap: 12px;
}
.account-update-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: center;
  gap: 8px;
}
.account-update-inline > button {
  justify-self: start;
  min-width: 168px;
}
.mono-value {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-stack { display: grid; gap: 10px; }
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.session-list {
  margin-top: 10px;
}
.session-item {
  align-items: flex-start;
  gap: 12px;
}
.session-meta {
  display: grid;
  gap: 4px;
}
.session-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.session-current {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  font-size: 11px;
  font-weight: 700;
}
.session-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.session-actions .muted.small {
  white-space: nowrap;
}

.shifts-surface { display: grid; gap: 16px; width: 100%; max-width: 1200px; margin: 0 auto; }
.shifts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.shifts-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shift-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 4px;
}
.shift-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.shift-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.shift-tab-switch { display: flex; justify-content: center; }
.shift-tabs { width: 100%; max-width: 480px; }
.shift-tab-switch { margin-top: -4px; }
.shift-tab-panel { width: 100%; }
.shift-tab-panel.hidden { display: none !important; }
.shift-kpi-card { display: grid; gap: 6px; }
.shift-kpi-value { font-size: 24px; font-weight: 800; }
.shifts-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.shifts-body.single { grid-template-columns: 1fr; max-width: 1200px; }
.shift-form-shell { max-width: 820px; width: 100%; margin: 0 auto; }
.shift-list-card { display: flex; flex-direction: column; gap: 12px; }
.shift-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 0;
  max-height: none;
  overflow: visible;
  padding-bottom: 8px;
}
.entry-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.entry-filter-actions { display: flex; align-items: end; }
.shift-month { display: grid; gap: 10px; }
.shift-month-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 2px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.shift-month-head .month-label { font-weight: 800; font-size: 16px; }
.shift-month-head .muted { font-size: 12px; }
.shift-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow: var(--shadow);
  align-items: start;
}
.shift-entry.active { border-color: color-mix(in srgb, var(--accent) 46%, transparent); box-shadow: 0 10px 26px rgba(16, 185, 129, 0.16); }
.shift-col { display: grid; gap: 6px; }
.shift-left .date-main { font-size: 18px; font-weight: 800; }
.shift-left .date-sub { font-size: 12px; color: var(--muted); }
.shift-time { font-weight: 800; font-size: 16px; }
.shift-meta-line { font-size: 13px; color: var(--muted); }
.shift-note-line { font-size: 12px; white-space: normal; }
.shift-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.shift-tag {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  font-size: 13px;
}
.shift-tag.subtle { background: color-mix(in srgb, var(--surface) 96%, transparent); }
.shift-actions {
  display: grid;
  gap: 10px;
  align-self: stretch;
  align-content: start;
}
.shift-amount { text-align: left; margin-top: 2px; }
.earn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.shift-actions button { width: 100%; }
.shift-action-buttons {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.shift-action-buttons button { min-height: 44px; }
.shift-actions .danger { color: #b42318; border-color: color-mix(in srgb, #b42318 50%, transparent); }
.shift-form-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.shift-form { display: grid; gap: 12px; min-width: 0; }
.entry-form-section { display: grid; gap: 12px; min-width: 0; }
.entry-duration-field { display: grid; gap: 8px; }
.entry-duration-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.entry-duration-chip {
  min-height: 44px;
  min-width: 68px;
  font-weight: 700;
}
.entry-duration-chip.active {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
}
.entry-advanced { display: grid; gap: 8px; }
.entry-advanced-toggle {
  width: 100%;
  text-align: left;
  min-height: 44px;
  font-weight: 700;
}
.entry-advanced-body {
  display: grid;
  gap: 12px;
}
.field-pair { display: grid; gap: 12px; grid-template-columns: 1fr; min-width: 0; }
.form-row.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-row.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.earn-field { display: grid; gap: 8px; }
.field-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
}
.segmented-control .seg-btn {
  border: none;
  border-radius: 10px;
  background: transparent;
  padding: 10px 12px;
  min-height: 44px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.segmented-control .seg-btn.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.16);
}
.time-input-row { display: flex; align-items: center; gap: 8px; }
.time-input input { width: 100%; max-width: 100%; min-width: 0; min-height: 46px; }
.shift-form input[type="date"],
.shift-form input[type="time"] {
  inline-size: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 12px;
  padding-left: 12px;
}
.shift-form input[type="date"]::-webkit-date-and-time-value,
.shift-form input[type="time"]::-webkit-date-and-time-value {
  display: block;
  min-width: 0;
  width: 100%;
  text-align: center;
}
.shift-form input[type="date"]::-webkit-calendar-picker-indicator,
.shift-form input[type="time"]::-webkit-calendar-picker-indicator {
  margin: 0;
  padding: 0;
  opacity: 1;
}
.time-quick { display: flex; gap: 6px; }
.ghost-btn.xsmall {
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
}
.shift-inline-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  box-shadow: none;
}
.shift-inline-meta strong { font-size: 16px; }
.shift-live-summary { margin-top: 4px; }
.shift-surcharge-summary { margin-top: -2px; }
.form-error {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: #7f1d1d;
  font-weight: 700;
}

@media (min-width: 881px) {
  .field-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shift-entry.shift-card {
    grid-template-columns: minmax(180px, 0.9fr) minmax(320px, 1.1fr) minmax(220px, 0.9fr);
    align-items: center;
  }
  .shift-actions { justify-items: end; }
  .shift-amount { text-align: right; }
  .shift-action-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .app-header { display: none !important; }
  body { font-size: 15px; }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  .content { padding: 12px 10px var(--mobile-nav-offset) 10px; gap: 10px; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; margin-left: 0; width: 100%; max-width: 100%; }
  .page-surface {
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    margin: 0;
  }
  #screen-dashboard .page-surface { gap: 10px; }
  .card,
  .chart-card,
  .recent-card,
  .hero { padding: 14px; border-radius: 12px; box-shadow: none; }
  .hero { gap: 8px; }
  .hero h1 { font-size: 22px; }
  .hero .muted { font-size: 13px; line-height: 1.4; }
  .hero-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hero-actions .ghost-btn,
  .hero-actions .primary { min-height: 42px; border-radius: 10px; width: 100%; padding: 10px; }
  /* Monats-Textblock mobil */
  .hero-highlight {
    display: block;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 12px;
    min-height: auto;
    width: 100%;
    align-self: stretch;
    flex: 1 1 auto;
    margin: 0;
    box-sizing: border-box;
    max-width: none;
    justify-self: stretch;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .month-summary-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    align-items: stretch;
    align-self: stretch;
    flex: 1 1 auto;
    margin: 0;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(9px) saturate(1.08);
    -webkit-backdrop-filter: blur(9px) saturate(1.08);
  }
  .hero-month-text {
    display: grid;
    gap: 4px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
  }
  .hero-month-text #hero-month-text-main strong {
    font-weight: 800;
  }
  .hero-month-compare {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.2;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  }
  .hero-month-compare .muted.small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hero-month-chip {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  }
  .hero-month-chip.pill-up {
    background: rgba(52, 168, 83, 0.16);
    border-color: rgba(52, 168, 83, 0.4);
    color: #0f5132;
  }
  .hero-month-chip.pill-down {
    background: rgba(242, 92, 84, 0.16);
    border-color: rgba(242, 92, 84, 0.4);
    color: #8a1c1c;
  }
  .hero-month-chip.pill-neutral {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-color: color-mix(in srgb, var(--border) 82%, transparent);
    color: var(--muted);
  }

  /* Schichten */
  .shifts-surface { gap: 12px; }
  .shifts-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
  }
  .entry-filter-grid { grid-template-columns: 1fr; margin-bottom: 8px; }
  .entry-filter-actions { align-items: stretch; }
  .entry-filter-actions .ghost-btn { width: 100%; }
  .shifts-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .shift-entry.shift-card { gap: 10px; }
  .shift-left .date-main { font-size: 17px; }
  .shift-meta-line { font-size: 12px; }
  .shift-tags { gap: 6px; }
  .shift-list { max-height: none; overflow: visible; }
  .shift-entry {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .shift-entry.shift-card { padding: 12px 12px; gap: 8px; }
  .shift-left { order: 1; }
  .shift-meta-col { order: 2; }
  .shift-meta-line,
  .shift-tags { display: none; }
  .shift-actions {
    justify-items: stretch;
    gap: 8px;
    order: 4;
  }
  .shift-actions button { min-width: 0; }
  .shift-action-buttons { grid-template-columns: 1fr; }
  .shift-amount { text-align: left; order: 3; }
  .shift-time { font-size: 15px; }
  .earn-badge { margin-top: 4px; }
  .shifts-body.single { max-width: 100%; }
  .shift-form-card {
    border-radius: 14px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  }
  #entry-form {
    gap: 14px;
  }
  .entry-duration-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .entry-duration-chip {
    flex: 0 0 auto;
    min-width: 72px;
  }
  .entry-advanced {
    border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    padding-top: 8px;
  }
  .entry-advanced-body { padding-top: 2px; }
  .template-field .inline-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .template-field .inline-form .ghost-btn {
    width: 100%;
  }
  .session-item {
    flex-direction: column;
    gap: 8px;
  }
  .session-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .session-actions button {
    width: 100%;
  }
  .form-row.two,
  .form-row.three { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .shift-inline-meta { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .calendar-filter-bar { grid-template-columns: 1fr; }
  .calendar-filter-actions { justify-content: stretch; }
  .calendar-filter-actions .ghost-btn { flex: 1 1 auto; }
  /* Filter bar compact */
  .filters-row { padding: 2px 0 6px 0; gap: 8px; flex-direction: column; align-items: stretch; }
  .month-switcher {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border-radius: 12px;
    padding: 6px 10px;
  }
  .month-label { text-align: center; font-size: 15px; font-weight: 700; }
  .month-switcher .ghost-btn.small { min-width: 44px; min-height: 44px; border-radius: 10px; padding: 0; }
  .filter-actions {
    width: 100%;
    position: relative;
    --qfilter-columns: 2;
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }
  .filter-actions .ghost-btn {
    flex: 1;
    border-radius: 0;
    border: none;
    min-height: 46px;
    background: transparent;
    color: var(--muted);
    font-weight: 600;
    z-index: 1;
    box-shadow: none;
    transform: translateY(0) scale(1) !important;
    transition: color 140ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
  }
  .filter-actions .ghost-btn + .ghost-btn { border-left: 1px solid color-mix(in srgb, var(--border) 88%, transparent); }
  .filter-actions .ghost-btn[data-qfilter="week"],
  .filter-actions .ghost-btn[data-qfilter="quarter"] { display: none; }
  .filter-actions .ghost-btn.is-active,
  .filter-actions .ghost-btn.active {
    transform: translateY(0) scale(1) !important;
    color: var(--text);
    font-weight: 700;
    box-shadow: none;
    background: transparent;
  }
  .filter-actions .ghost-btn:active { transform: translateY(0) scale(1) !important; }
  .segmented-indicator {
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 50%;
    background: #0a84ff;
    border-radius: 99px;
    box-shadow: 0 6px 16px rgba(10, 132, 255, 0.24);
    transition: transform 260ms ease, width 260ms ease;
    pointer-events: none;
    z-index: 0;
  }
  .chip-row { gap: 6px; }
  .kpi-rail {
    padding: 0;
    border-radius: 12px;
  }
  .kpi-grid {
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    min-width: 700px;
    gap: 0;
    background: color-mix(in srgb, var(--surface) 98%, transparent);
    border: none;
  }
  .kpi-card { padding: 12px; min-height: 92px; }
  .kpi-label { font-size: 11px; letter-spacing: 0; }
  .kpi-value { font-size: 20px; line-height: 1.2; }
  .kpi-sub { font-size: 11px; }
  .data-grid { grid-template-columns: 1fr; gap: 12px; }
  .chart-card { padding: 12px; }
  .chart-card .card-head h3 { font-size: 16px; }
  .chart-card .muted.small { font-size: 12px; }
  .stat-canvas { aspect-ratio: 4 / 3; min-height: 200px; }
  .donut-legend { width: 100%; }
  .recent-card { padding: 14px; }
}

@media (max-width: 420px) {
  .calendar-desktop-header .calendar-month { font-size: 18px; }
  .calendar-header-actions {
    grid-template-columns: 40px repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .calendar-header-actions .ghost-btn,
  .calendar-header-actions .primary {
    min-height: 40px;
    padding-inline: 8px;
    font-size: 12px;
  }
  .calendar-card { padding: 0 4px 4px; }
  .calendar-weekdays { gap: 4px; margin: 0 0 6px; }
  .weekday { font-size: 11px; padding: 6px 0; }
  .calendar-grid { gap: 4px; }
  .day-cell { min-height: 72px; padding: 8px 6px; border-radius: 10px; }
  .calendar-day-number { font-size: 15px; }
  .calendar-day-amount { display: none; }
}

@media (max-width: 640px) {
  .hero-actions { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(6, minmax(108px, 1fr)); min-width: 660px; }
  .data-grid { grid-template-columns: 1fr; }
  .calendar-summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-summary-row .calendar-summary-card:last-child { grid-column: 1 / -1; }
  .chart-card, .chart-card.span-6, .chart-card.span-12 { grid-column: span 1; }
  .donut-wrap { grid-template-columns: 1fr; }
  .form-grid.compact, .form-grid { grid-template-columns: 1fr; }
  .time-row { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
  .control-row { align-items: flex-start; }
  .control-row button { width: 100%; }
  .appearance-picker { grid-template-columns: 1fr; min-width: 0; width: 100%; }
  .account-id-actions { grid-template-columns: 1fr; min-width: 0; width: 100%; }
  .account-update-inline { grid-template-columns: 1fr; width: 100%; }
  .account-update-inline > button { min-width: 0; width: 100%; }
  .mono-value { width: 100%; }
  .settings-page-header .inline { grid-template-columns: 1fr; }
  .shift-inline-meta { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .shift-meta-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .shifts-toolbar { padding: 12px; }
  .kpi-detail-window {
    width: min(96vw, 520px);
    max-height: min(80vh, 640px);
  }
  .kpi-detail-window #kpi-detail-chart {
    aspect-ratio: 16 / 8;
    min-height: 130px;
    max-height: 170px;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }
  .kpi-button[data-kpi="break"],
  .kpi-button[data-kpi="strongest"],
  .kpi-button[data-kpi="count"] {
    display: none;
  }
  .kpi-button[data-kpi="perShift"]::after {
    display: none;
  }
}

/* Consistent subtle transparency for block-style surfaces across the app */
.card,
.page-surface .card,
.chart-card,
.month-summary-card,
.kpi-rail,
.kpi-grid,
.settings-list-group,
.control-row,
.list-item,
.info-box,
.calendar-summary-card,
.calendar-card,
.shift-entry,
.shift-form-card,
.shift-inline-meta,
.donut-legend {
  background: var(--block-surface);
}

@media (min-width: 1200px) {
  /* Final desktop override: unified qfilter rail like KPI strip */
  #screen-dashboard .filter-actions {
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 98%, transparent);
    overflow: hidden;
  }

  #screen-dashboard .filter-actions .ghost-btn.small {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #screen-dashboard .filter-actions .ghost-btn.small:hover {
    background: color-mix(in srgb, var(--surface) 95%, transparent);
  }

  #screen-dashboard .filter-actions .ghost-btn[data-qfilter].is-active,
  #screen-dashboard .filter-actions .ghost-btn[data-qfilter].active {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--text);
    font-weight: 700;
    box-shadow: none;
  }

  /* Today should look neutral like a regular action button */
  #screen-dashboard #month-today {
    background: transparent;
    box-shadow: none;
    color: var(--text);
  }
}

/* iPhone/iPad landscape and medium widths: keep dashboard filters compact and non-overflowing */
@media (min-width: 769px) and (max-width: 1199px) {
  #screen-dashboard .filters-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    padding: 4px 0 10px 0;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 0;
    background: transparent;
  }
  #screen-dashboard .filters-row > * {
    min-width: 0;
    min-height: 0;
    padding-inline: 0;
  }
  #screen-dashboard .filters-row > *::after {
    display: none !important;
  }
  #screen-dashboard .month-switcher {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }
  #screen-dashboard .month-label {
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #screen-dashboard .filter-actions {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 98%, transparent);
  }
  #screen-dashboard .filter-actions .ghost-btn.small {
    width: 100%;
    min-width: 0;
    border: none;
    border-radius: 0;
    padding: 10px 8px;
    font-size: 14px;
    background: transparent;
    box-shadow: none;
  }
  #screen-dashboard .filters-row > .inline {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
  }
  #screen-dashboard .filters-row > .inline .ghost-btn.small {
    width: 100%;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }
  #screen-dashboard .filters-row > .inline .ghost-btn.small:not(:last-of-type)::after {
    display: none;
  }
}

/* Safety net for touch devices in landscape PWAs (short viewport height) */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  #screen-dashboard .filters-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
  }
  #screen-dashboard .month-switcher,
  #screen-dashboard .filter-actions,
  #screen-dashboard .filters-row > .inline {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  #screen-dashboard .month-switcher {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }
  #screen-dashboard .filter-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
  }
  #screen-dashboard .filter-actions .ghost-btn.small {
    min-width: 0;
    width: 100%;
  }
  #screen-dashboard .filters-row > .inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #screen-dashboard .filters-row > .inline .ghost-btn.small {
    width: 100%;
    min-width: 0;
  }
}

/* Final touch-device override: keep dashboard filter bars compact on iOS/Android PWAs at any width */
@media (hover: none) and (pointer: coarse) {
  #screen-dashboard .filters-row,
  #screen-dashboard .filters-row > *,
  #screen-dashboard .filters-row > *::before,
  #screen-dashboard .filters-row > *::after {
    box-sizing: border-box !important;
  }
  #screen-dashboard .filters-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: min(100%, 760px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding: 4px 0 10px 0 !important;
  }
  #screen-dashboard .filters-row > * {
    min-width: 0 !important;
    min-height: 0 !important;
    padding-inline: 0 !important;
  }
  #screen-dashboard .filters-row > *::after {
    display: none !important;
  }
  #screen-dashboard .month-switcher {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 10px !important;
  }
  #screen-dashboard .month-label {
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #screen-dashboard .filter-actions {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(var(--qfilter-columns, 4), minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  #screen-dashboard .filter-actions .ghost-btn.small {
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 8px !important;
    font-size: 14px !important;
  }
  #screen-dashboard .filters-row > .inline {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #screen-dashboard .filters-row > .inline .ghost-btn.small {
    width: 100% !important;
    min-width: 0 !important;
  }
}