/* ═══════════════════════════════════════════════════════════════
   Material Design 3 — appNa Smlouvy
   Design tokens + komponenty (bez Tailwind)
   ═══════════════════════════════════════════════════════════════ */

/* ── MD3 Light Tokens ─────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Primary — modrá (finance) */
  --md-primary: #1a6ef5;
  --md-on-primary: #ffffff;
  --md-primary-container: #dde4ff;
  --md-on-primary-container: #001257;

  /* Secondary */
  --md-secondary: #585e71;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #dce2f9;
  --md-on-secondary-container: #141b2c;

  /* Tertiary — zelená (OK stav) */
  --md-tertiary: #006e1c;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #adf5ae;
  --md-on-tertiary-container: #002104;

  /* Error — červená */
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;

  /* Warning — oranžová */
  --md-warning: #7d5700;
  --md-on-warning: #ffffff;
  --md-warning-container: #ffddb0;
  --md-on-warning-container: #271900;

  /* Surface */
  --md-surface: #f9f9ff;
  --md-on-surface: #191c20;
  --md-surface-variant: #e1e2ec;
  --md-on-surface-variant: #44474f;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f3f3fa;
  --md-surface-container: #eceef6;
  --md-surface-container-high: #e6e8f0;
  --md-surface-container-highest: #e0e2ea;

  /* Outline */
  --md-outline: #74777f;
  --md-outline-variant: #c4c6d0;

  /* Inverse */
  --md-inverse-surface: #2e3036;
  --md-inverse-on-surface: #eff0f7;
  --md-inverse-primary: #b4c5ff;

  /* Scrim */
  --md-scrim: rgba(0, 0, 0, 0.32);

  /* Shadow */
  --md-elevation-0: none;
  --md-elevation-1: 0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
  --md-elevation-2: 0px 1px 2px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
  --md-elevation-3: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.3);
  --md-elevation-4: 0px 6px 10px 4px rgba(0,0,0,0.15), 0px 2px 3px rgba(0,0,0,0.3);

  /* Shape */
  --md-corner-none: 0px;
  --md-corner-xs: 4px;
  --md-corner-sm: 8px;
  --md-corner-md: 12px;
  --md-corner-lg: 16px;
  --md-corner-xl: 28px;
  --md-corner-full: 9999px;

  /* Typography */
  --md-font: 'Google Sans', 'Roboto', 'Segoe UI', system-ui, sans-serif;
  --md-font-mono: 'Roboto Mono', 'Consolas', monospace;

  /* Motion */
  --md-motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-motion-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-motion-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-duration-short: 200ms;
  --md-duration-medium: 300ms;
  --md-duration-long: 500ms;
}

/* ── MD3 Dark Tokens ──────────────────────────────────────────── */
body.theme-dark {
  color-scheme: dark;

  --md-primary: #b4c5ff;
  --md-on-primary: #002286;
  --md-primary-container: #003cbf;
  --md-on-primary-container: #dde4ff;

  --md-secondary: #bfc6dc;
  --md-on-secondary: #293041;
  --md-secondary-container: #3f4759;
  --md-on-secondary-container: #dce2f9;

  --md-tertiary: #91d890;
  --md-on-tertiary: #003a0b;
  --md-tertiary-container: #005314;
  --md-on-tertiary-container: #adf5ae;

  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;

  --md-warning: #ffb951;
  --md-on-warning: #422c00;
  --md-warning-container: #5f4200;
  --md-on-warning-container: #ffddb0;

  --md-surface: #111318;
  --md-on-surface: #e2e2e9;
  --md-surface-variant: #44474f;
  --md-on-surface-variant: #c4c6d0;
  --md-surface-container-lowest: #0c0e13;
  --md-surface-container-low: #191c20;
  --md-surface-container: #1d2024;
  --md-surface-container-high: #272a2f;
  --md-surface-container-highest: #32353a;

  --md-outline: #8e9099;
  --md-outline-variant: #44474f;

  --md-inverse-surface: #e2e2e9;
  --md-inverse-on-surface: #2e3036;
  --md-inverse-primary: #1a6ef5;
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--md-font);
  font-size: 14px;
  line-height: 1.5;
  background-color: var(--md-surface);
  color: var(--md-on-surface);
  min-height: 100vh;
  transition: background-color var(--md-duration-medium) var(--md-motion-standard),
              color var(--md-duration-medium) var(--md-motion-standard);
}

/* ── Layout ───────────────────────────────────────────────────── */
.app-body {
  padding-bottom: 5rem;
}

.app-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 600px) {
  .app-container { padding: 0 24px; }
}

@media (min-width: 1240px) {
  .app-container { padding: 0 32px; }
}

/* ── App Header ───────────────────────────────────────────────── */
.app-header {
  padding: 24px 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.app-header-text {}

.app-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--md-on-surface);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.app-subtitle {
  font-size: 12px;
  color: var(--md-on-surface-variant);
  margin-top: 2px;
}

/* ── MD3 Navigation Bar (bottom) ──────────────────────────────── */
.md-nav-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--md-surface-container);
  border-radius: var(--md-corner-xl);
  padding: 4px;
}

.md-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: none;
  border-radius: var(--md-corner-lg);
  background: transparent;
  color: var(--md-on-surface-variant);
  font-family: var(--md-font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--md-duration-short) var(--md-motion-standard),
              color var(--md-duration-short) var(--md-motion-standard);
  -webkit-tap-highlight-color: transparent;
}

.md-nav-item:hover {
  background: color-mix(in srgb, var(--md-on-surface-variant) 8%, transparent);
}

.md-nav-item.is-active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-weight: 700;
}

.md-nav-item .material-symbols-rounded {
  font-size: 24px;
  transition: font-variation-settings var(--md-duration-short) var(--md-motion-standard);
}

.md-nav-item.is-active .material-symbols-rounded {
  font-variation-settings: 'FILL' 1;
}

/* ── Status Chip ──────────────────────────────────────────────── */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-corner-full);
  background: var(--md-surface-container-low);
  color: var(--md-on-surface-variant);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.status-chip .material-symbols-rounded {
  font-size: 16px;
  color: var(--md-tertiary);
}

/* ── MD3 Surface / Panel ──────────────────────────────────────── */
.panel {
  background: var(--md-surface-container-low);
  border-radius: var(--md-corner-xl);
  padding: 20px;
  box-shadow: var(--md-elevation-1);
}

.panel-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--md-on-surface);
  margin-bottom: 4px;
}

.panel-subtitle {
  font-size: 12px;
  color: var(--md-on-surface-variant);
  margin-bottom: 16px;
}

/* ── MD3 Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--md-corner-full);
  font-family: var(--md-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  padding: 10px 20px;
  min-height: 40px;
  white-space: nowrap;
  transition: box-shadow var(--md-duration-short) var(--md-motion-standard),
              background var(--md-duration-short) var(--md-motion-standard);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.btn .material-symbols-rounded {
  font-size: 18px;
}

/* Filled Button (primary action) */
.btn-primary {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.btn-primary:hover {
  box-shadow: var(--md-elevation-1);
  background: color-mix(in srgb, var(--md-primary) 92%, var(--md-on-primary) 8%);
}

.btn-primary:active {
  box-shadow: none;
  background: color-mix(in srgb, var(--md-primary) 88%, var(--md-on-primary) 12%);
}

/* Outlined Button (secondary action) */
.btn-secondary {
  background: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

.btn-secondary:active {
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
}

/* Tonal danger Button */
.btn-danger {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  border: none;
}

.btn-danger:hover {
  box-shadow: var(--md-elevation-1);
}

/* Loading state */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
  position: relative;
}

.btn.is-loading::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: md-spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

/* ── MD3 Text Field ───────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.field > span,
.field > label {
  font-size: 12px;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  padding: 0 4px;
  margin-bottom: 4px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--md-font);
  font-size: 14px;
  color: var(--md-on-surface);
  background: var(--md-surface-container-highest);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-corner-sm);
  padding: 14px 16px;
  outline: none;
  transition: border-color var(--md-duration-short) var(--md-motion-standard),
              box-shadow var(--md-duration-short) var(--md-motion-standard);
  -webkit-appearance: none;
  appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2374777f'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 36px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-primary) 20%, transparent);
}

.field input[readonly],
.field input[disabled] {
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  border-color: var(--md-outline-variant);
  cursor: default;
}

.field textarea {
  resize: vertical;
  min-height: 80px;
}

/* ── File picker ──────────────────────────────────────────────── */
.file-pick {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.file-pick span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-radius: var(--md-corner-full);
  border: 1px solid var(--md-outline);
  padding: 8px 20px;
  color: var(--md-primary);
  font-family: var(--md-font);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  transition: background var(--md-duration-short);
}

.file-pick span:hover {
  background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

.file-pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ── MD3 Cards ────────────────────────────────────────────────── */
.card {
  background: var(--md-surface-container-low);
  border-radius: var(--md-corner-xl);
  overflow: hidden;
  box-shadow: var(--md-elevation-1);
  transition: box-shadow var(--md-duration-short) var(--md-motion-standard);
}

.card:hover {
  box-shadow: var(--md-elevation-2);
}

.card header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--md-outline-variant);
}

.card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--md-on-surface);
}

.card details {
  padding: 16px 20px 20px;
}

.card details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--md-primary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  user-select: none;
}

.card details summary::-webkit-details-marker { display: none; }

.card details[open] summary .md-icon-chevron {
  transform: rotate(180deg);
}

.card details summary .md-icon-chevron {
  transition: transform var(--md-duration-short) var(--md-motion-standard);
  font-size: 18px;
}

/* ── Card grid (detail lines) ─────────────────────────────────── */
.card-grid {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.card-grid .line {
  font-size: 13px;
  color: var(--md-on-surface);
}

.card-grid .line strong {
  color: var(--md-on-surface-variant);
  font-weight: 500;
  margin-right: 4px;
}

.card-grid code {
  font-family: var(--md-font-mono);
  font-size: 12px;
  color: var(--md-on-surface);
  background: var(--md-surface-container);
  border-radius: var(--md-corner-xs);
  padding: 2px 6px;
  word-break: break-all;
}

/* ── Card actions ─────────────────────────────────────────────── */
.card-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-actions .btn {
  padding: 8px 16px;
  font-size: 13px;
  min-height: 36px;
}

/* ── MD3 Badges / Status chips ────────────────────────────────── */
.meta {
  font-size: 12px;
  color: var(--md-on-surface-variant);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--md-corner-full);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

.badge .material-symbols-rounded {
  font-size: 14px;
}

.badge-critical {
  color: var(--md-on-error-container);
  background: var(--md-error-container);
}

.badge-warning {
  color: var(--md-on-warning-container);
  background: var(--md-warning-container);
}

.badge-ok {
  color: var(--md-on-tertiary-container);
  background: var(--md-tertiary-container);
}

/* ── MD3 Filter Chips (category quick pick) ───────────────────── */
.category-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-corner-full);
  padding: 6px 16px;
  background: transparent;
  color: var(--md-on-surface-variant);
  font-family: var(--md-font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--md-duration-short), border-color var(--md-duration-short);
  -webkit-tap-highlight-color: transparent;
}

.category-chip:hover {
  background: color-mix(in srgb, var(--md-on-surface-variant) 8%, transparent);
}

.category-chip.is-active {
  background: var(--md-secondary-container);
  border-color: transparent;
  color: var(--md-on-secondary-container);
  font-weight: 700;
}

/* ── Dashboard toolbar ────────────────────────────────────────── */
.dashboard-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dashboard-toolbar .field {
  flex: 1;
  min-width: 180px;
}

.dashboard-toolbar .field input {
  padding: 10px 16px;
}

.view-toggle {
  display: inline-flex;
  gap: 4px;
}

/* ── Attention feed (horizontal scroll) ───────────────────────── */
.attention-feed {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--md-outline-variant) transparent;
}

.attention-item {
  border-radius: var(--md-corner-lg);
  padding: 14px 16px;
  background: var(--md-surface-container);
  font-size: 13px;
  color: var(--md-on-surface-variant);
  box-shadow: var(--md-elevation-1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.attention-item strong {
  display: block;
  color: var(--md-on-surface);
  font-size: 14px;
  font-weight: 600;
}

.attention-item.is-critical {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}

.attention-item.is-critical strong {
  color: var(--md-on-error-container);
}

.attention-item.is-warning {
  background: var(--md-warning-container);
  color: var(--md-on-warning-container);
}

.attention-item.is-warning strong {
  color: var(--md-on-warning-container);
}

.attention-item.is-ok {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}

.attention-item.is-ok strong {
  color: var(--md-on-tertiary-container);
}

/* ── Policy Table ─────────────────────────────────────────────── */
.policy-table-wrap {
  overflow: auto;
  border-radius: var(--md-corner-lg);
  border: 1px solid var(--md-outline-variant);
  -webkit-overflow-scrolling: touch;
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
  background: var(--md-surface-container-lowest);
}

.policy-table th,
.policy-table td {
  border-bottom: 1px solid var(--md-outline-variant);
  padding: 12px 14px;
  text-align: left;
  font-size: 13px;
  color: var(--md-on-surface-variant);
  vertical-align: middle;
}

.policy-table th {
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.policy-table tr:last-child td {
  border-bottom: 0;
}

.policy-table tbody tr:hover td {
  background: color-mix(in srgb, var(--md-primary) 4%, transparent);
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.table-actions .btn {
  padding: 6px 12px;
  font-size: 12px;
  min-height: 32px;
}

/* ── Summary grid ─────────────────────────────────────────────── */
.summary-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.summary-card {
  background: var(--md-primary-container);
  border-radius: var(--md-corner-lg);
  padding: 16px;
}

.summary-card p {
  font-size: 12px;
  color: var(--md-on-primary-container);
  opacity: 0.8;
}

.summary-card strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  font-weight: 700;
  color: var(--md-on-primary-container);
}

/* ── Charts ───────────────────────────────────────────────────── */
.charts-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.chart-card {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-corner-lg);
  background: var(--md-surface-container-lowest);
  padding: 16px;
}

.chart-card h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  margin-bottom: 12px;
}

/* ── Upcoming list ────────────────────────────────────────────── */
.upcoming-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.upcoming-list li {
  background: var(--md-surface-container);
  border-radius: var(--md-corner-md);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--md-on-surface);
  display: flex;
  align-items: center;
  gap: 8px;
}

.upcoming-empty {
  background: transparent !important;
  border: 1px dashed var(--md-outline-variant) !important;
  color: var(--md-on-surface-variant) !important;
  justify-content: center;
}

/* ── Settings ─────────────────────────────────────────────────── */
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.settings-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

/* ── Future cards ─────────────────────────────────────────────── */
.future-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.future-card {
  background: var(--md-surface-container);
  border-radius: var(--md-corner-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.future-card .material-symbols-rounded {
  font-size: 24px;
  color: var(--md-secondary);
  margin-bottom: 4px;
}

.future-card p {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-on-surface);
}

.future-card small {
  font-size: 12px;
  color: var(--md-on-surface-variant);
}

/* ── Empty state ──────────────────────────────────────────────── */
.empty-card {
  border-radius: var(--md-corner-lg);
  border: 1px dashed var(--md-outline-variant);
  background: var(--md-surface-container-low);
  color: var(--md-on-surface-variant);
  text-align: center;
  padding: 32px 16px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.empty-card .material-symbols-rounded {
  font-size: 48px;
  color: var(--md-outline);
}

/* ── MD3 FAB ──────────────────────────────────────────────────── */
.quick-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: var(--md-corner-xl);
  padding: 16px 20px;
  font-family: var(--md-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-on-primary);
  background: var(--md-primary);
  box-shadow: var(--md-elevation-3);
  cursor: pointer;
  transition: box-shadow var(--md-duration-short) var(--md-motion-standard),
              background var(--md-duration-short) var(--md-motion-standard);
  -webkit-tap-highlight-color: transparent;
}

.quick-fab:hover {
  box-shadow: var(--md-elevation-4);
}

.quick-fab .material-symbols-rounded {
  font-size: 24px;
}

/* ── MD3 Dialog ───────────────────────────────────────────────── */
.qr-dialog {
  width: min(92vw, 440px);
  background: var(--md-surface-container-high);
  border: none;
  border-radius: var(--md-corner-xl);
  padding: 24px;
  box-shadow: var(--md-elevation-4);
  color: var(--md-on-surface);
}

.qr-dialog::backdrop {
  background: var(--md-scrim);
}

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

.qr-head h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--md-on-surface);
}

.qr-canvas {
  min-height: 260px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--md-outline-variant);
  border-radius: var(--md-corner-lg);
  background: var(--md-surface-container-lowest);
  margin-bottom: 12px;
}

.qr-canvas img,
.qr-canvas canvas {
  width: 240px;
  height: 240px;
}

.qr-text {
  display: block;
  font-family: var(--md-font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--md-on-surface);
  background: var(--md-surface-container);
  border-radius: var(--md-corner-md);
  padding: 10px 12px;
  word-break: break-all;
  margin-top: 8px;
}

/* ── Help text ────────────────────────────────────────────────── */
.help-text {
  font-size: 12px;
  color: var(--md-on-surface-variant);
  line-height: 1.4;
}

/* ── Utility ──────────────────────────────────────────────────── */
.hidden { display: none !important; }

.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }

.space-y-4 > * + * { margin-top: 16px; }
.space-y-6 > * + * { margin-top: 24px; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.w-full { width: 100%; }
.text-sm { font-size: 12px; }

/* 2-column grid for policies/warranties view */
.view-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .view-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }
}

/* ── Material Icon base ───────────────────────────────────────── */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ── Responsive: Tablet ───────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 641px) {
  .charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Responsive: Mobile ───────────────────────────────────────── */
@media (max-width: 640px) {
  .app-body { padding-bottom: 6rem; }

  .panel { padding: 16px; border-radius: var(--md-corner-lg); }

  /* MD3 Navigation Bar — native bottom tab bar */
  .md-nav-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    border-radius: var(--md-corner-xl) var(--md-corner-xl) 0 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--md-surface-container-high);
    box-shadow: 0 -1px 0 var(--md-outline-variant), var(--md-elevation-2);
    margin-bottom: 0;
  }

  .md-nav-item {
    min-height: 52px;
    font-size: 11px;
    border-radius: var(--md-corner-md);
  }

  /* FAB above nav */
  .quick-fab {
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
    right: 16px;
    border-radius: var(--md-corner-full);
    width: 56px;
    height: 56px;
    padding: 0;
    font-size: 0;
  }

  .quick-fab .material-symbols-rounded {
    font-size: 24px;
  }

  /* Touch targets */
  .btn { min-height: 44px; }

  .field input,
  .field select,
  .field textarea {
    font-size: 16px; /* prevent iOS auto-zoom */
    min-height: 48px;
  }

  /* Cards */
  .card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .card-actions .btn-danger {
    grid-column: 1 / -1;
  }

  /* Settings */
  .settings-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .settings-grid { grid-template-columns: 1fr; }
  .future-grid { grid-template-columns: 1fr; }
  .charts-grid { grid-template-columns: 1fr; }

  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .attention-feed {
    grid-auto-columns: minmax(88%, 1fr);
  }

  /* Dashboard toolbar */
  .dashboard-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #saveCloudSettingsButton { width: 100%; }
}

/* ── Landscape phone — side nav ───────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .md-nav-bar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    flex-direction: column;
    width: calc(72px + env(safe-area-inset-left));
    border-radius: 0 var(--md-corner-xl) var(--md-corner-xl) 0;
    padding: 8px calc(4px + env(safe-area-inset-left)) 8px 4px;
    justify-content: flex-start;
    margin-bottom: 0;
    box-shadow: 1px 0 0 var(--md-outline-variant);
  }

  .app-body { padding-bottom: 0; padding-left: calc(72px + env(safe-area-inset-left)); }

  .quick-fab {
    bottom: 16px;
    right: 16px;
    width: 56px;
    height: 56px;
    padding: 0;
    font-size: 0;
    border-radius: var(--md-corner-full);
  }
}

/* ── Animations ───────────────────────────────────────────────── */
@keyframes md-spin {
  to { transform: rotate(360deg); }
}