/* Evidență SPP — stil aplicație */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  --navy: #1b2a4a; --navy-2: #24365e; --accent: #2f6fed; --accent-2: #eaf1ff;
  --ok: #1e7e34; --ok-bg: #e6f4ea; --warn: #9a6700; --warn-bg: #fff8e1;
  --err: #b3261e; --err-bg: #fdecea; --ink: #1d222b; --muted: #667085;
  --line: #e4e7ee; --bg: #f4f6fa; --card: #ffffff; --radius: 10px;
}
html, body { margin: 0; padding: 0; }
body {
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink); background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--navy); color: #fff; padding: 10px 20px; position: sticky; top: 0; z-index: 50;
}
.brand { font-weight: 700; font-size: 15px; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.brand-badge { background: var(--accent); border-radius: 6px; padding: 2px 7px; font-size: 12px; letter-spacing: 1px; }
.topbar nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.topbar nav a { color: #cfd8ec; padding: 7px 11px; border-radius: 7px; font-size: 14px; }
.topbar nav a:hover { background: var(--navy-2); text-decoration: none; color: #fff; }
.topbar nav a.active { background: var(--accent); color: #fff; }
.userbox { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #cfd8ec; }
button.link { background: none; border: 0; color: #9fb4dd; cursor: pointer; font-size: 13px; padding: 0; }
button.link:hover { color: #fff; text-decoration: underline; }

main { max-width: 1240px; margin: 22px auto 40px; padding: 0 20px; }
.foot { text-align: center; color: var(--muted); font-size: 12.5px; padding: 18px; }

h1 { font-size: 22px; margin: 4px 0 16px; }
h2 { font-size: 17px; margin: 22px 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.flash { max-width: 1240px; margin: 12px auto 0; padding: 10px 16px; border-radius: 8px; font-size: 14px; }
.flash.info { background: var(--accent-2); color: #1c3d8f; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.err { background: var(--err-bg); color: var(--err); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.card .num { font-size: 26px; font-weight: 700; }
.card .lbl { color: var(--muted); font-size: 13px; }
.card.accent { border-left: 4px solid var(--accent); }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; }
.panel h2:first-child { margin-top: 0; }

table.data { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.data th, table.data td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
table.data th { background: #f0f3f9; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: #3c4a63; white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: #f8fafd; }
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
.right { text-align: right; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; background: #fff; color: var(--ink); border: 1px solid #c9d2e0;
  padding: 0 14px; border-radius: 8px; font-size: 14px; cursor: pointer; text-decoration: none;
}
.btn:hover { background: #f2f5fa; text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #2559c6; }
.btn.danger { background: #fff; color: var(--err); border-color: #e6b0ad; }
.btn.danger:hover { background: var(--err-bg); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.info { background: var(--accent-2); color: #1c3d8f; }
.badge.gray { background: #eef0f4; color: #4a5568; }

form.inline { display: inline; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filters label { display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); gap: 3px; }
input, select, textarea {
  font: inherit; padding: 7px 10px; border: 1px solid #c9d2e0; border-radius: 8px; background: #fff; color: var(--ink);
}
input:not([type="file"]), select { height: 38px; padding-top: 0; padding-bottom: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid #bcd2ff; border-color: var(--accent); }
label { font-size: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.form-grid label, .stack label { display: flex; flex-direction: column; gap: 4px; }
.stack { display: flex; flex-direction: column; gap: 12px; }

.pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 16px 0; color: var(--muted); font-size: 14px; }

.progress { background: #e8ecf3; border-radius: 999px; height: 10px; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); border-radius: 999px; }
.progress.ok > div { background: var(--ok); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

.review-row.auto { background: #f4fbf6; }
.review-row.sugestie { background: #fffdf2; }
.review-row.neidentificat { background: #fdf5f5; }

.thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.thumbs a { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.thumbs img { width: 130px; height: 170px; object-fit: cover; display: block; }
.thumbs .cap { font-size: 11.5px; text-align: center; padding: 3px; color: var(--muted); }

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(160deg, var(--navy), #33477a); }
.login-card { background: #fff; border-radius: 14px; padding: 34px 36px; width: 360px; box-shadow: 0 18px 50px rgba(10, 20, 50, .45); }
.login-card h1 { font-size: 20px; margin: 8px 0 2px; }
.login-logo { font-size: 40px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: #3c4a63; }

.autocomplete { position: relative; }
.autocomplete .ac-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  background: #fff; border: 1px solid #c9d2e0; border-radius: 8px; margin-top: 3px;
  max-height: 260px; overflow-y: auto; box-shadow: 0 10px 24px rgba(20, 30, 60, .14);
}
.ac-item { padding: 7px 10px; cursor: pointer; font-size: 13.5px; }
.ac-item:hover, .ac-item.sel { background: var(--accent-2); }
.ac-item .sub { color: var(--muted); font-size: 12px; }

.chart-bars { display: flex; flex-direction: column; gap: 8px; }
.chart-bars .row { display: grid; grid-template-columns: 210px 1fr 90px; align-items: center; gap: 10px; font-size: 13.5px; }
.chart-bars .bar { background: #e8ecf3; border-radius: 6px; height: 18px; overflow: hidden; }
.chart-bars .bar > div { height: 100%; background: var(--accent); }

@media (max-width: 900px) {
  .topbar { position: static; padding: 8px 12px; gap: 8px; }
  .topbar nav a { padding: 5px 8px; font-size: 13px; }
  .brand { font-size: 13px; }
}

/* ===== Tema întunecată — paleta Elite Drivers (navy + auriu) ===== */
html[data-theme="dark"] {
  --navy: #0a0e1a; --navy-2: #111827; --accent: #c9a84c; --accent-2: #2a2a1f;
  --ok: #4fd1a1; --ok-bg: #0f2a22; --warn: #e0c976; --warn-bg: #2a2412;
  --err: #e05252; --err-bg: #2c1414; --ink: #edeae4; --muted: #a7a9ae;
  --line: #232c44; --bg: #0a0e1a; --card: #111827;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .topbar { background: #070a12; border-bottom: 1px solid #1a2235; }
html[data-theme="dark"] .brand-badge { background: var(--accent); color: #0a0e1a; }
html[data-theme="dark"] .topbar nav a { color: #d4d1cb; }
html[data-theme="dark"] .topbar nav a:hover { background: #1a2235; color: #fff; }
html[data-theme="dark"] .topbar nav a.active { background: var(--accent); color: #0a0e1a; }
html[data-theme="dark"] .userbox { color: #d4d1cb; }
html[data-theme="dark"] button.link { color: #c9a84c; }
html[data-theme="dark"] a { color: #e0c976; }
html[data-theme="dark"] table.data th { background: #1a2235; color: #d4d1cb; }
html[data-theme="dark"] table.data tr:hover td { background: #161e31; }
html[data-theme="dark"] .btn { background: #1a2235; color: #edeae4; border-color: #2d3752; }
html[data-theme="dark"] .btn:hover { background: #232c44; }
html[data-theme="dark"] .btn.primary { background: var(--accent); border-color: var(--accent); color: #0a0e1a; }
html[data-theme="dark"] .btn.primary:hover { background: #e0c976; }
html[data-theme="dark"] .btn.danger { background: #1a2235; color: #e05252; border-color: #5a2a2a; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: #0f1525; color: #edeae4; border-color: #2d3752;
}
html[data-theme="dark"] input::placeholder { color: #6f7380; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus { outline-color: #5a4d22; border-color: var(--accent); }
html[data-theme="dark"] .flash.info { background: #1a2235; color: #e0c976; }
html[data-theme="dark"] .badge.info { background: #1a2235; color: #e0c976; }
html[data-theme="dark"] .badge.gray { background: #1a2235; color: #a7a9ae; }
html[data-theme="dark"] .progress { background: #1a2235; }
html[data-theme="dark"] .progress > div { background: var(--accent); }
html[data-theme="dark"] .chart-bars .bar { background: #1a2235; }
html[data-theme="dark"] .chart-bars .bar > div { background: var(--accent); }
html[data-theme="dark"] .ac-list { background: #111827; border-color: #2d3752; }
html[data-theme="dark"] .ac-item:hover, html[data-theme="dark"] .ac-item.sel { background: #1a2235; }
html[data-theme="dark"] .review-row.auto { background: #0f2a22; }
html[data-theme="dark"] .review-row.sugestie { background: #2a2412; }
html[data-theme="dark"] .review-row.neidentificat { background: #2c1414; }
html[data-theme="dark"] .login-body { background: linear-gradient(160deg, #0a0e1a, #1a2235); }
html[data-theme="dark"] .login-card { background: #111827; color: #edeae4; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
html[data-theme="dark"] .login-card label { color: #d4d1cb; }
html[data-theme="dark"] .card.accent { border-left-color: var(--accent); }
html[data-theme="dark"] .thumbs a { border-color: #2d3752; }
html[data-theme="dark"] .foot { color: #7a7d85; }

/* butonul de temă: pe deschis arată luna, pe întunecat arată soarele */
.theme-toggle { font-size: 16px; line-height: 1; padding: 2px 6px !important; }
.theme-toggle .ico-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: inline; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

/* ===== Pagini pentru telefon: Cod QR și Scanare prezență ===== */
.center { text-align: center; }
.mobile-wrap { max-width: 520px; margin: 0 auto; }
.big-input { height: 50px !important; font-size: 18px !important; width: 100%; }
.btn.big { height: 50px; font-size: 16px; width: 100%; }
.qr-form { padding: 18px; }
.qr-card { text-align: center; padding: 22px 18px; }
.qr-card .qr-name { font-size: 17px; margin-bottom: 10px; }
.qr-card .qr-img { display: flex; justify-content: center; margin: 8px 0 12px; }
.qr-card .qr-img svg, .qr-card .qr-img img { width: min(78vw, 320px); height: auto; background: #fff; padding: 10px; border-radius: 12px; }
.qr-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

.scan-page { max-width: 560px; margin: 0 auto; }
.scan-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
.scan-count { text-align: center; background: var(--accent); color: #fff; border-radius: 10px; padding: 6px 14px; min-width: 70px; }
.scan-count span { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; }
.scan-count small { font-size: 11px; }
html[data-theme="dark"] .scan-count { color: #0a0e1a; }
.scan-cam { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1; max-height: 58vh; min-height: 240px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.scan-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.scan-page.scanning .scan-cam video { display: block; }
.scan-page.scanning #scan-start { display: none; }
.scan-cam .scan-frame { display: none; position: absolute; inset: 14% 16%; border: 3px solid rgba(255,255,255,.85); border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 999px rgba(0,0,0,.25); transition: border-color .15s, box-shadow .15s; }
.scan-page.scanning .scan-frame { display: block; }
.scan-page.res-ok .scan-frame { border-color: #2ecc71; box-shadow: 0 0 0 999px rgba(46,204,113,.35); }
.scan-page.res-warn .scan-frame { border-color: #f1c40f; box-shadow: 0 0 0 999px rgba(241,196,15,.35); }
.scan-page.res-err .scan-frame { border-color: #e05252; box-shadow: 0 0 0 999px rgba(224,82,82,.35); }
.scan-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; text-align: center; color: #fff; font-size: 19px; font-weight: 700; line-height: 1.25; background: rgba(0,0,0,.62); z-index: 2; }
.scan-overlay .sub { display: block; font-size: 14px; font-weight: 500; opacity: .92; }
.scan-cam #scan-start { width: auto; padding: 0 26px; position: relative; z-index: 3; }
.scan-result { padding: 12px 14px; border-radius: var(--radius); margin-bottom: 10px; font-size: 15px; line-height: 1.4; }
.scan-result.ok { background: var(--ok-bg); color: var(--ok); }
.scan-result.warn { background: var(--warn-bg); color: var(--warn); }
.scan-result.err { background: var(--err-bg); color: var(--err); }
.scan-result-title { font-weight: 700; }
.scan-result-name { font-size: 17px; font-weight: 600; margin-top: 2px; }
.scan-list { list-style: none; padding: 0; margin: 0; max-height: 40vh; overflow: auto; }
.scan-list li { padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.scan-list li.deja { opacity: .7; }
@media (max-width: 600px) {
  main { padding: 0 10px; margin-top: 12px; }
  h1 { font-size: 19px; }
  .scan-page .panel { padding: 12px; }
  input, select, textarea { font-size: 16px; }               /* fără auto-zoom iOS la focus */
  .userbox { gap: 4px; }
  .userbox button.link, .theme-toggle { min-height: 44px; min-width: 44px; padding: 0 10px !important; }
  .topbar nav a { min-height: 40px; display: inline-flex; align-items: center; }
  .scan-page .btn, .mobile-wrap .btn { min-height: 44px; }
  .ac-item { padding: 12px 10px; font-size: 15px; }
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] .scan-result.err, html[data-theme="dark"] .flash.err { color: #ff7b7b; }
@media print {
  html[data-theme="dark"] { --ink: #000; --muted: #444; --card: #fff; --bg: #fff; --line: #bbb; --accent: #000; }
  html[data-theme="dark"] body, html[data-theme="dark"] .panel, html[data-theme="dark"] .qr-card { background: #fff !important; color: #000 !important; }
  .qr-card { break-inside: avoid; border: 0; }
  .qr-card .qr-img img { width: 70mm; height: auto; }
  .qr-actions, .scan-cam { display: none !important; }
  @page { margin: 15mm; }
}

@media print {
  .topbar, .foot, .filters, .btn, .pager, form { display: none !important; }
  main { max-width: none; margin: 0; }
  body { background: #fff; }
  table.data th { background: #eee; }
}