:root {
  --bg: #f1f5f9;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --ok: #16a34a;
  --warn: #ea580c;
  --danger: #dc2626;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--ink); font-size: 14px; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
.neg { color: var(--danger); font-weight: 600; }
.ok { color: var(--ok); }
.link { color: var(--brand); cursor: pointer; }
.link:hover { text-decoration: underline; }
.link.strong { font-weight: 700; }

/* ---------- Logowanie ---------- */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e3a8a, #2563eb 60%, #38bdf8); }
.login-box { background: var(--panel); padding: 36px 32px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); width: 340px; display: flex; flex-direction: column; }
.login-logo { font-size: 30px; font-weight: 800; color: var(--brand); display: flex; align-items: center; justify-content: center; gap: 10px; }
.logo-ico { width: 40px; height: 40px; }
.login-brand { text-align: center; margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.login-brand strong { color: var(--brand); }
.login-sub { text-align: center; color: var(--muted); margin: 10px 0 22px; }
.login-box label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; font-weight: 600; font-size: 13px; }
.login-box input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.login-box button { margin-top: 6px; padding: 11px; background: var(--brand); color: #fff; border: none; border-radius: 8px; font-weight: 700; font-size: 15px; }
.login-box button:hover { background: var(--brand-dark); }
.login-error { color: var(--danger); text-align: center; margin-top: 12px; min-height: 18px; }

/* ---------- Układ ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 230px; background: #0f172a; color: #cbd5e1; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { font-size: 22px; font-weight: 800; color: #fff; padding: 22px 22px 18px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.brand-ico { width: 28px; height: 28px; }
.brand-by { width: 100%; font-size: 10px; font-weight: 600; color: #64748b; letter-spacing: .5px; margin-top: -8px; padding-left: 37px; }
.sidebar nav { display: flex; flex-direction: column; padding: 8px; gap: 2px; flex: 1; }
.sidebar nav a { padding: 11px 14px; border-radius: 8px; cursor: pointer; color: #cbd5e1; text-decoration: none; font-weight: 600; transition: background .15s; }
.sidebar nav a:hover { background: #1e293b; color: #fff; }
.sidebar nav a.active { background: var(--brand); color: #fff; }
.sidebar-foot { padding: 16px 22px; border-top: 1px solid #1e293b; display: flex; flex-direction: column; gap: 6px; }
.sidebar-foot #user-name { font-size: 13px; color: #94a3b8; }
.session-timer { font-size: 12px; color: #94a3b8; }
.session-timer.warn { color: #fbbf24; font-weight: 600; }
.session-timer.expired { color: #f87171; font-weight: 600; }
.link-btn { background: none; border: none; color: #93c5fd; text-align: left; padding: 0; font-size: 13px; }
.link-btn:hover { text-decoration: underline; }
.link-btn.back { color: var(--brand); margin-bottom: 6px; }
.content { flex: 1; padding: 28px 32px; max-width: 1240px; }

/* Pasek mobilny + menu wysuwane (ukryte na desktopie) */
.topbar { display: none; }
.nav-backdrop { display: none; }
.hamburger { background: none; border: none; color: #fff; font-size: 24px; line-height: 1; padding: 4px 8px; cursor: pointer; }

/* ---------- Wspólne ---------- */
h1 { font-size: 24px; margin: 0 0 4px; }
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.subtitle { color: var(--muted); margin: 0; }
.btn { padding: 9px 16px; border: none; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; }
.btn:hover { background: var(--brand-dark); }
.btn.secondary { background: #e2e8f0; color: var(--ink); }
.btn.secondary:hover { background: #cbd5e1; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #b91c1c; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 18px; }
.alert { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow); }
.stat .num { font-size: 28px; font-weight: 800; }
.stat .label { color: var(--muted); font-size: 13px; margin-top: 4px; }
.stat .ic { font-size: 22px; }

table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); }
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }
.muted { color: var(--muted); }
.right { text-align: right; }
.center { text-align: center; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.planned { background: #dbeafe; color: #1d4ed8; }
.badge.done { background: #dcfce7; color: #15803d; }
.badge.cancelled { background: #fee2e2; color: #b91c1c; }
.badge.pending { background: #fef9c3; color: #854d0e; }
.search { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; width: 260px; font-size: 14px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.tooth-tag { display: inline-block; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 6px; padding: 1px 7px; font-weight: 700; font-size: 12px; }

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .spacer, .schedule-bar .spacer { flex: 1; }
.totals { display: flex; gap: 18px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }

/* ---------- Zakładki karty pacjenta ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.tab { background: none; border: none; padding: 10px 16px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: 14px; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }

.detail-row { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.detail-row .k { width: 150px; color: var(--muted); font-weight: 600; flex-shrink: 0; }
.section-title { font-weight: 700; margin: 22px 0 10px; font-size: 15px; }

.mini-select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 600; }
.mini-select.st-proposed { color: #92400e; background: #fef3c7; }
.mini-select.st-accepted { color: #1d4ed8; background: #dbeafe; }
.mini-select.st-done { color: #15803d; background: #dcfce7; }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow-y: auto; }
.modal { background: var(--panel); border-radius: 14px; width: 520px; max-width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal.wide { width: 640px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-body { padding: 22px; }
.icon-btn { background: none; border: none; font-size: 16px; color: var(--muted); padding: 4px; }
.icon-btn:hover { color: var(--ink); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-weight: 600; font-size: 13px; }
.field input, .field select, .field textarea { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; }
.field textarea { resize: vertical; min-height: 60px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; align-items: center; }

/* ---------- Terminarz ---------- */
.schedule-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented button { background: var(--panel); border: none; padding: 8px 16px; font-weight: 600; color: var(--muted); }
.segmented button.active { background: var(--brand); color: #fff; }
.schedule-grid { overflow-x: auto; }
.cal { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 560px; background: var(--panel); }
.cal-row { display: grid; grid-template-columns: 70px 1fr; border-bottom: 1px solid var(--line); }
.cal-row:last-child { border-bottom: none; }
.cal-time { padding: 8px; font-size: 12px; color: var(--muted); border-right: 1px solid var(--line); background: #f8fafc; }
.cal-slot { padding: 5px 8px; min-height: 38px; display: flex; gap: 6px; flex-wrap: wrap; }
.appt-chip { color: #fff; border-radius: 6px; padding: 4px 9px; font-size: 12px; cursor: pointer; font-weight: 600; }
.appt-chip small { display: block; font-weight: 400; opacity: .9; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.legend span { font-size: 13px; }

/* widok tygodniowy */
.week { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 800px; background: var(--panel); }
.week-head, .week-row { display: grid; grid-template-columns: 64px repeat(7, 1fr); }
.week-head { background: #f8fafc; border-bottom: 1px solid var(--line); }
.week-day { padding: 8px; text-align: center; font-weight: 700; font-size: 13px; border-left: 1px solid var(--line); }
.week-day small { display: block; font-weight: 400; color: var(--muted); }
.week-day.is-today { background: #eff6ff; color: var(--brand); }
.week-row { border-bottom: 1px solid var(--line); }
.week-row:last-child { border-bottom: none; }
.week-cell { border-left: 1px solid var(--line); padding: 4px; min-height: 42px; display: flex; flex-direction: column; gap: 3px; }
.week .cal-time { border-right: none; border-bottom: none; }

/* ---------- Dentogram ---------- */
.dentogram { padding: 22px; }
.arch-label { text-align: center; color: var(--muted); font-size: 12px; font-weight: 600; margin: 4px 0; }
.arch { display: flex; justify-content: center; gap: 3px; flex-wrap: nowrap; }
.arch-mid { height: 2px; background: var(--line); margin: 10px 10%; }
.tooth { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 3px 2px; border-radius: 6px; transition: background .12s; }
.tooth:hover { background: #eff6ff; }
.tooth.selected { background: #dbeafe; outline: 2px solid var(--brand); }
.tooth.missing { opacity: .55; }
.tooth .tnum { font-size: 11px; color: var(--muted); margin-top: 2px; font-weight: 600; }
.dg-legend { justify-content: center; margin-top: 18px; gap: 16px; }
.tooth-panel { margin-top: 16px; }
.state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.state-btn { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-weight: 600; font-size: 13px; text-align: left; }
.state-btn:hover { border-color: var(--brand); }
.state-btn.active { border-color: var(--brand); background: #eff6ff; box-shadow: inset 0 0 0 1px var(--brand); }
.switch { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; cursor: pointer; }

/* ---------- Raporty ---------- */
.report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 90px; align-items: center; gap: 12px; margin: 9px 0; }
.bar-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { background: #f1f5f9; border-radius: 6px; height: 16px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--brand); border-radius: 6px; min-width: 2px; }
.bar-val { text-align: right; font-size: 13px; font-weight: 700; }

/* ---------- Dynamiczne listy (alergie / choroby) ---------- */
.dyn-list { margin-bottom: 6px; }
.dyn-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.dyn-in { flex: 1; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; }
.chip-alg { display: inline-block; background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: 600; margin: 2px 2px 2px 0; }
.chip-chr { display: inline-block; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: 600; margin: 2px 2px 2px 0; }

/* ---------- Faktury ---------- */
.inv-row { display: grid; grid-template-columns: 1fr 70px 100px 32px; gap: 8px; margin-bottom: 8px; align-items: center; }
.inv-row input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 13px; }

/* ---------- Periodontogram ---------- */
.perio-table td { padding: 6px 10px; }
.perio-table input, .perio-table select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-family: inherit; }
.perio-table input.pd-in { width: 100%; }
.perio-table .num-in { width: 70px; }
.perio-missing { opacity: .5; }

/* ---------- Galeria zdjęć / RTG ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.shot { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.shot img { width: 100%; height: 150px; object-fit: cover; display: block; background: #0f172a; cursor: pointer; }
.shot figcaption { padding: 8px 10px; font-size: 12px; line-height: 1.6; }
.dcm-thumb { height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0f172a; color: #cbd5e1; font-size: 42px; }
.dcm-thumb span { font-size: 12px; letter-spacing: 3px; margin-top: 4px; }
.dcm-thumb[data-dcmview] { cursor: pointer; }
.dcm-thumb[data-dcmview]:hover { background: #1e293b; }
.dcm-viewer #cs-el { border-radius: 8px; overflow: hidden; }
.dcm-tools { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
tr.low-stock { background: #fff7ed; }

/* ---------- Akordeon (Ustawienia) ---------- */
.acc { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden; }
.acc-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; font-weight: 700; font-size: 15px; user-select: none; }
.acc-head:hover { background: #f8fafc; }
.acc-chev { color: var(--muted); transition: transform .15s; display: inline-block; }
.acc.open .acc-chev { transform: rotate(90deg); }
.acc-body { display: none; padding: 4px 18px 18px; }
.acc.open .acc-body { display: block; }
.acc-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px; box-shadow: var(--shadow); z-index: 100; font-weight: 600; }
.toast.err { background: var(--danger); }

/* ============================ WIDOK MOBILNY ============================ */
@media (max-width: 860px) {
  .app { display: block; }

  /* Pasek górny z hamburgerem */
  .topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40; background: #0f172a; color: #fff; padding: 10px 14px; box-shadow: var(--shadow); }
  .topbar-title { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; }
  .topbar-ico { width: 26px; height: 26px; }

  /* Menu boczne jako wysuwana szuflada */
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; width: 250px; flex-direction: column; transform: translateX(-100%); transition: transform .22s ease; z-index: 60; }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: 0 0 50px rgba(0,0,0,.55); }
  .sidebar nav { flex-direction: column; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; }
  body.nav-open .nav-backdrop { display: block; }

  /* Treść */
  .content { padding: 16px 14px; max-width: 100%; }
  h1 { font-size: 20px; }
  .page-head { gap: 10px; align-items: stretch; }
  .page-head > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }

  /* Tabele — przewijanie poziome zamiast obcinania */
  .card, .panel, .acc-body { overflow-x: auto; }
  table { min-width: 540px; }
  thead th, tbody td { padding: 10px 12px; }

  /* Statystyki, formularze, raporty */
  .stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
  .stat .num { font-size: 24px; }
  .form-grid, .report-cols { grid-template-columns: 1fr; }
  .search { width: 100%; }
  .toolbar, .schedule-bar { gap: 8px; }

  /* Zakładki karty pacjenta — przewijane poziomo */
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tab { white-space: nowrap; padding: 10px 12px; }

  /* Dentogram i kalendarz — przewijanie poziome */
  .dentogram { overflow-x: auto; }
  .arch { justify-content: flex-start; }

  /* Modale na pełną szerokość */
  .modal-backdrop { padding: 10px; align-items: flex-start; }
  .modal, .modal.wide { width: 100%; }

  /* Logowanie */
  .login-screen { padding: 16px; }
  .login-box { width: 100%; max-width: 360px; }

  /* Galeria zdjęć */
  .gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}