/* Patient portal styles — components only.

   Layout chrome (header logo + practice address + footer) comes from
   _shared/portal_base.css. This file should only define what's
   project-specific: cards, big-cards, the code-entry form, status
   pills, the booking slot grid, etc. Anything that overrides shared
   sizing has been intentionally removed so the shared base wins.
*/

:root {
  --p-bg:        #f4f6fa;
  --p-text:      #0f172a;
  --p-muted:     #64748b;
  --p-border:    #e2e8f0;
  --p-accent:    #0d9488;
  --p-accent-d:  #0f766e;
  --p-card:      #ffffff;
  --p-radius:    12px;
}

a:hover { text-decoration: underline; }

/* .card / h2 / h3 / code definitions removed 2026-05-25 — all shipped
   from /static/_shared/portal_components.css now. The big-card chrome
   below stays; it's mein.*-homepage-specific and has no shared analog. */

.card-grid {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.big-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border-radius: var(--p-radius);
  border: 1px solid var(--p-border);
  background: var(--p-card);
  text-decoration: none; color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.big-card.primary {
  border-color: var(--p-accent);
  background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
}
.big-card.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(13,148,136,.18); text-decoration: none; }
.big-card.muted-card { background: #f8fafc; color: var(--p-muted); cursor: default; }
.big-card-icon { font-size: 26px; }
.big-card-title { font-weight: 600; font-size: 16px; color: var(--p-text); }
.big-card-desc  { font-size: 13px; color: var(--p-muted); }

.notes ul { margin: 6px 0 0; padding-inline-start: 18px; }
.notes li { margin: 4px 0; color: var(--p-muted); }

/* Booking demo — day columns with time-slot buttons */
.slot-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.slot-day h4 {
  margin: 0 0 8px; font-size: 13px; font-weight: 600;
  color: var(--p-muted); text-transform: uppercase; letter-spacing: .04em;
}
.slot-times { display: flex; flex-direction: column; gap: 6px; }
.slot-btn {
  padding: 8px 10px; border: 1px solid var(--p-border);
  background: #fff; border-radius: 8px; cursor: not-allowed;
  font-size: 14px; color: var(--p-text); font-variant-numeric: tabular-nums;
  text-align: center;
}
.slot-btn:disabled { opacity: .65; }

/* Code-entry form (Rechnungen / Röntgenbilder landing) */
.code-form { display: flex; flex-direction: column; gap: 10px; }
.code-form label { font-size: 13px; font-weight: 500; color: var(--p-muted); }
.code-form input[type="text"] {
  padding: 12px 14px; border: 1px solid var(--p-border);
  border-radius: 8px; font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #fff; color: var(--p-text); width: 100%;
}
.code-form input[type="text"]:focus {
  outline: none; border-color: var(--p-accent);
  box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}

/* .primary-btn / .form-error / .form-hint / .muted / code removed
   2026-05-25 — templates migrated to the shared class names from
   portal_components.css (.btn.primary, .err, .meta, .meta, code). */

.demo-note {
  margin: 10px 0 0; padding: 8px 10px;
  background: #fef3c7; border-inline-start: 3px solid #f59e0b;
  border-radius: 4px; font-size: 13px; color: #92400e;
}

.invoice-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.invoice-table th, .invoice-table td {
  text-align: start; padding: 10px 8px;
  border-bottom: 1px solid var(--p-border);
}
.invoice-table th { font-weight: 500; color: var(--p-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.invoice-table td.num, .invoice-table th.num { text-align: end; font-variant-numeric: tabular-nums; }
.invoice-table tbody tr:hover { background: #f8fafc; }
.invoice-link { font-weight: 500; text-decoration: none; }
.invoice-link:hover { text-decoration: underline; }

.status {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
}
.status-offen     { background: #fee2e2; color: #991b1b; }
.status-ratenplan { background: #fef3c7; color: #92400e; }
.status-bezahlt   { background: #d1fae5; color: #065f46; }