/* =====================================================================
   DocPostMark theme layer: warm dark "glass" look + motion.
   Light theme = the original style.css. Dark = html[data-theme="dark"].
   Motion uses only opacity/transform (cheap), and stops for reduced-motion users.
   ===================================================================== */

/* ---------- motion tokens ---------- */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--t-fast:140ms;--t-med:220ms}

/* ---------- dark palette ---------- */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#171615;--card:rgba(36,34,31,.72);--card-solid:#242220;--text:#f1ebe1;--muted:#a59e93;--line:rgba(255,244,230,.09);
  --primary:#6f95ff;--primary-2:rgba(111,149,255,.16);--side:#121110;--side-text:#c8c1b6;
  --ok:#46c98a;--warn:#f0b04a;--bad:#ff7a6b;--field:rgba(255,248,240,.045);--hover:rgba(255,248,240,.05);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(900px 520px at 78% -8%,rgba(255,160,80,.10),transparent 60%),
    radial-gradient(700px 480px at 8% 108%,rgba(111,149,255,.08),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
/* glass surfaces */
html[data-theme="dark"] .card,html[data-theme="dark"] .stat,html[data-theme="dark"] .table-wrap,html[data-theme="dark"] .kpi,
html[data-theme="dark"] .mc-card,html[data-theme="dark"] .login-card,html[data-theme="dark"] .topbar{
  background:var(--card);border-color:var(--line);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
html[data-theme="dark"] .topbar{background:rgba(23,22,21,.72)}
html[data-theme="dark"] .modal-box{background:var(--card-solid);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55)}
html[data-theme="dark"] .modal{background:rgba(8,7,6,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* sidebar */
html[data-theme="dark"] .sidebar,html[data-theme="dark"] body.adm-mode .sidebar{background:linear-gradient(180deg,#151413 0%,#100f0e 100%);border-right:1px solid var(--line)}
html[data-theme="dark"] nav a:hover{background:var(--hover)}
html[data-theme="dark"] nav a.active{background:rgba(111,149,255,.14);color:#fff;box-shadow:inset 3px 0 0 var(--primary)}
html[data-theme="dark"] body.adm-mode #nav a.active{background:linear-gradient(90deg,#4f7cff,#6f95ff)}
html[data-theme="dark"] .me{border-top-color:var(--line)}
/* fields & buttons */
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:var(--field);border-color:var(--line);color:var(--text)}
html[data-theme="dark"] select option{background:#242220;color:var(--text)}
html[data-theme="dark"] input::placeholder{color:#7d776e}
html[data-theme="dark"] .btn{background:var(--field);border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .btn:hover{background:rgba(255,248,240,.09)}
html[data-theme="dark"] .btn.primary{background:var(--primary);border-color:var(--primary);color:#0f1220;font-weight:600}
html[data-theme="dark"] .btn.ghost{background:transparent;border-color:transparent}
html[data-theme="dark"] .btn.danger{color:var(--bad)}
/* tables */
html[data-theme="dark"] th{background:#1f1d1b;color:#d8d1c5}
html[data-theme="dark"] tfoot td{background:#1f1d1b}
html[data-theme="dark"] tr.click:hover td,html[data-theme="dark"] tbody tr:hover td{background:var(--hover)}
html[data-theme="dark"] tr.mc-row-ok td{background:rgba(70,201,138,.08)}
html[data-theme="dark"] tr.mc-row-bad td{background:rgba(255,122,107,.08)}
/* badges / chips / states */
html[data-theme="dark"] .badge{background:rgba(255,248,240,.08);color:#d8d1c5}
html[data-theme="dark"] .badge.ok,html[data-theme="dark"] .mc-chip.ok{background:rgba(70,201,138,.14);color:var(--ok);border-color:rgba(70,201,138,.35)}
html[data-theme="dark"] .badge.warn,html[data-theme="dark"] .mc-chip.warn{background:rgba(240,176,74,.14);color:var(--warn);border-color:rgba(240,176,74,.35)}
html[data-theme="dark"] .badge.bad,html[data-theme="dark"] .mc-chip.bad{background:rgba(255,122,107,.14);color:var(--bad);border-color:rgba(255,122,107,.35)}
html[data-theme="dark"] .badge.blue{background:var(--primary-2);color:var(--primary)}
html[data-theme="dark"] .mc-last.ok,html[data-theme="dark"] .stat.mc-ok{background:rgba(70,201,138,.12);border-color:rgba(70,201,138,.35)}
html[data-theme="dark"] .mc-last.warn{background:rgba(240,176,74,.12);border-color:rgba(240,176,74,.35)}
html[data-theme="dark"] .mc-last.bad{background:rgba(255,122,107,.12);border-color:rgba(255,122,107,.35)}
html[data-theme="dark"] .mc-scanbox{background:var(--field);border-color:var(--line)}
html[data-theme="dark"] .mc-dot{background:#4a463f}html[data-theme="dark"] .mc-dot.on{box-shadow:0 0 0 4px rgba(70,201,138,.2)}
html[data-theme="dark"] .mc-card.done{border-color:rgba(70,201,138,.45)}html[data-theme="dark"] .mc-card.partial{border-color:rgba(240,176,74,.45)}
html[data-theme="dark"] .firm-item{background:var(--field);border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .firm-item:hover{background:var(--primary-2);border-color:var(--primary)}
html[data-theme="dark"] .firm-item.adminp{background:linear-gradient(135deg,rgba(111,149,255,.16),rgba(31,169,143,.12));border-color:rgba(111,149,255,.4)}
html[data-theme="dark"] .keybox,html[data-theme="dark"] pre{background:rgba(255,248,240,.05);color:var(--text)}
html[data-theme="dark"] .toast{background:#2a2724;border:1px solid var(--line);color:var(--text)}
html[data-theme="dark"] .toast.bad{background:#5a221d;border-color:rgba(255,122,107,.5)}
html[data-theme="dark"] .pbar,html[data-theme="dark"] .ht{background:rgba(255,248,240,.08)}
html[data-theme="dark"] .alertc.bad,html[data-theme="dark"] .dangerz{background:rgba(255,122,107,.08);border-color:rgba(255,122,107,.35)}
html[data-theme="dark"] .alertc.warn{background:rgba(240,176,74,.08);border-color:rgba(240,176,74,.35)}
html[data-theme="dark"] #subBanner{background:rgba(240,176,74,.08)!important;border-color:rgba(240,176,74,.35)!important}
html[data-theme="dark"] .kic{background:rgba(255,248,240,.06)!important}
html[data-theme="dark"] .cgrid{stroke:rgba(255,248,240,.08)}html[data-theme="dark"] .cbase{stroke:rgba(255,248,240,.2)}
html[data-theme="dark"] .caxis{fill:#8f887d}
html[data-theme="dark"] .langsw{background:var(--field);border-color:var(--line)}
html[data-theme="dark"] .langsw a.on{background:var(--primary);color:#0f1220}
html[data-theme="dark"] .atabs a.on{background:var(--card-solid);border-color:var(--line)}
html[data-theme="dark"] .brand.big{color:var(--text)}
html[data-theme="dark"] .brandName b{color:#fff}
html[data-theme="dark"] a{color:#9db5ff}
html[data-theme="dark"] nav a,html[data-theme="dark"] .atabs a,html[data-theme="dark"] .langsw a{color:var(--side-text)}
html[data-theme="dark"] .login{background:transparent}
html[data-theme="dark"] [style*="background:#fff"]:not(.cam-res){background:var(--card)!important}
html[data-theme="dark"] .ctip{background:#f1ebe1;color:#171615}

/* ---------- small UPPERCASE labels (style note) ---------- */
nav .sec,.kpi span,.dleg span{letter-spacing:.05em}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  /* page change: content eases in */
  #page.pg-in{animation:pgIn var(--t-med) var(--ease-out) both}
  #page.pg-in > *{animation:pgIn 280ms var(--ease-out) both}
  #page.pg-in > *:nth-child(2){animation-delay:40ms}#page.pg-in > *:nth-child(3){animation-delay:80ms}
  #page.pg-in > *:nth-child(4){animation-delay:120ms}#page.pg-in > *:nth-child(n+5){animation-delay:150ms}
  @keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  /* buttons: press feedback */
  .btn,.firm-item,nav a,.langsw a{transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast)}
  .btn:active:not(:disabled),.firm-item:active{transform:scale(.97)}
  .btn.primary:hover:not(:disabled){box-shadow:0 6px 18px rgba(79,124,255,.28)}
  nav a:hover{transform:translateX(2px)}

  /* modal: rises in, backdrop fades */
  .modal:not(.hidden){animation:fade var(--t-med) var(--ease-out) both}
  .modal:not(.hidden) .modal-box{animation:popIn 260ms var(--ease-out) both}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

  /* toast slides up */
  .toast:not(.hidden){animation:toastIn 260ms var(--ease-out) both}
  @keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  /* login / firm picker card */
  .login:not(.hidden) .login-card{animation:popIn 420ms var(--ease-out) both}
  .firm-list .firm-item{animation:pgIn 300ms var(--ease-out) both}
  .firm-list .firm-item:nth-child(2){animation-delay:30ms}.firm-list .firm-item:nth-child(3){animation-delay:60ms}
  .firm-list .firm-item:nth-child(4){animation-delay:90ms}.firm-list .firm-item:nth-child(n+5){animation-delay:120ms}

  /* scan result flashes in */
  .mc-last{animation:scanIn 240ms var(--ease-out) both}
  .mc-last.bad{animation:shake 320ms var(--ease-in-out) both}
  @keyframes scanIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
  @keyframes shake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

  /* mobile menu */
  .backdrop.show{animation:fade var(--t-med) var(--ease-out) both}
}

/* theme & sound toggles */
.tbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:32px;padding:0;font-size:15px;flex:none}
@media (max-width:700px){.tbtn{width:36px;height:36px}}
html[data-theme="dark"] a.btn{color:var(--text);text-decoration:none}
html[data-theme="dark"] a.btn.primary{color:#0f1220}
html[data-theme="dark"] .mc-scanbox input{background:transparent}
html[data-theme="dark"] .mc-scanbox:focus-within{border-color:var(--ok);box-shadow:0 0 0 4px rgba(70,201,138,.12)}

/* =====================================================================
   LIGHT (default): warm ivory base, soft colour glows, white glass cards
   ===================================================================== */
html[data-theme="light"]{
  --bg:#f5f3ef;--card:rgba(255,255,255,.78);--card-solid:#fff;--text:#1d2230;--muted:#6b7080;--line:rgba(30,35,55,.08);
  --primary:#3157d5;--primary-2:#e9eefd;--hover:rgba(49,87,213,.045);
}
html[data-theme="light"] body{
  background:
    radial-gradient(820px 520px at 100% -6%,rgba(255,176,120,.28),transparent 62%),
    radial-gradient(760px 520px at -6% 104%,rgba(79,124,255,.17),transparent 60%),
    radial-gradient(600px 420px at 55% 112%,rgba(34,195,166,.14),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
html[data-theme="light"] .card,html[data-theme="light"] .stat,html[data-theme="light"] .table-wrap,
html[data-theme="light"] .kpi,html[data-theme="light"] .mc-card,html[data-theme="light"] .login-card{
  background:var(--card);border-color:rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(25,30,50,.04),0 8px 24px -12px rgba(25,30,50,.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
html[data-theme="light"] .login-card{box-shadow:0 2px 4px rgba(25,30,50,.04),0 30px 70px -20px rgba(40,60,140,.28)}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.66);border-bottom-color:rgba(30,35,55,.06);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);position:sticky;top:0;z-index:30}
html[data-theme="light"] .sidebar{background:linear-gradient(180deg,#1d2440 0%,#161b30 100%)}
html[data-theme="light"] nav a.active{background:rgba(111,149,255,.18);color:#fff;box-shadow:inset 3px 0 0 #7d9cff}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:rgba(255,255,255,.9);border-color:rgba(30,35,55,.12)}
html[data-theme="light"] input:focus,html[data-theme="light"] select:focus,html[data-theme="light"] textarea:focus{outline:3px solid rgba(49,87,213,.14);border-color:var(--primary)}
html[data-theme="light"] .btn{background:rgba(255,255,255,.9);border-color:rgba(30,35,55,.12)}
html[data-theme="light"] .btn:hover{background:#fff;border-color:rgba(49,87,213,.35)}
html[data-theme="light"] .btn.primary{background:linear-gradient(180deg,#3d63e0,#2f52cc);border-color:#2f52cc;color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset}
html[data-theme="light"] .btn.ghost{background:transparent;border-color:transparent}
html[data-theme="light"] th{background:rgba(247,246,243,.96);color:#4a5063}
html[data-theme="light"] tfoot td{background:rgba(247,246,243,.96)}
html[data-theme="light"] tbody tr:hover td{background:var(--hover)}
html[data-theme="light"] .modal{background:rgba(20,24,40,.32);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html[data-theme="light"] .modal-box{background:#fff;box-shadow:0 30px 80px -20px rgba(20,30,70,.35)}
html[data-theme="light"] .firm-item{background:rgba(255,255,255,.85);border-color:rgba(30,35,55,.1)}
html[data-theme="light"] .firm-item:hover{background:#fff;border-color:var(--primary);box-shadow:0 6px 18px -8px rgba(49,87,213,.35)}
html[data-theme="light"] .toast{background:#1d2230;box-shadow:0 12px 30px -10px rgba(0,0,0,.35)}
html[data-theme="light"] .mc-scanbox{background:#fff}
html[data-theme="light"] .langsw{background:rgba(255,255,255,.85)}
html[data-theme="light"] .atabs a.on{background:#fff}
html[data-theme="light"] .kpi:hover,html[data-theme="light"] .mc-card:hover{box-shadow:0 1px 2px rgba(25,30,50,.04),0 14px 30px -14px rgba(40,60,140,.25)}
@media (prefers-reduced-motion:no-preference){
  html[data-theme="light"] .kpi,html[data-theme="light"] .mc-card,html[data-theme="light"] .stat{transition:box-shadow var(--t-med),transform var(--t-med) var(--ease-out)}
  html[data-theme="light"] .kpi:hover,html[data-theme="light"] .mc-card:hover{transform:translateY(-2px)}
}

/* ===== close button always reachable: it sticks to the top of the scrolling modal ===== */
.modal-box > .modal-x,html .modal-box > .modal-x{position:sticky;top:max(8px,env(safe-area-inset-top));float:right;margin:-10px -8px 0 8px;z-index:5;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--card-solid,#fff);border:1px solid var(--line);box-shadow:0 4px 14px rgba(20,25,45,.14);color:var(--muted);font-size:22px;line-height:1}
.modal-box > .modal-x:hover{color:var(--text)}
@media (max-width:900px){
  .modal-box > .modal-x{top:max(8px,env(safe-area-inset-top));right:auto}
  .modal-box{padding-top:max(14px,env(safe-area-inset-top))}
}
/* mobile sidebar: its own close button */
.side-x{display:none}
@media (max-width:900px){
  .side-x{display:flex;position:absolute;top:max(10px,env(safe-area-inset-top));right:10px;width:36px;height:36px;align-items:center;justify-content:center;
    border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:20px;cursor:pointer;z-index:2}
}
@media (max-width:900px){
  .modal{align-items:flex-start}
  .modal-box{align-self:flex-start;height:auto;min-height:100%}
}
/* unit -> faktura line picker (shown above the camera too) */
.upick{position:fixed;inset:0;z-index:90;background:rgba(10,12,22,.55);display:flex;align-items:flex-end;justify-content:center;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.upick-card{background:var(--card-solid,#fff);color:var(--text);border-radius:16px;padding:16px;width:min(560px,100%);max-height:80vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.upick-card h3{margin:0 0 6px}
.upick-list{display:flex;flex-direction:column;gap:8px}
.upick-item{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;font:inherit;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card-solid,#fff);color:var(--text);cursor:pointer}
.upick-item:hover{border-color:var(--primary);background:var(--primary-2)}
.upick-item b{white-space:nowrap;font-size:13px}
@media (prefers-reduced-motion:no-preference){.upick-card{animation:popIn 240ms var(--ease-out) both}}

.upick-item.hint{border-color:var(--primary);background:var(--primary-2)}

/* scan result flash */
.scan-flash{position:fixed;inset:0;z-index:200;pointer-events:none;animation:scanFlash .65s ease-out forwards;
  box-shadow:inset 0 0 0 14px currentColor}
.scan-flash.ok{color:#16a34a;background:rgba(22,163,74,.28)}
.scan-flash.warn{color:#f59e0b;background:rgba(245,158,11,.28)}
.scan-flash.bad{color:#dc2626;background:rgba(220,38,38,.38)}
@keyframes scanFlash{0%{opacity:1}70%{opacity:.85}100%{opacity:0}}