/* Amazon / A-to-Z inspired theme: dark #131921 header, #232F3E sub-nav,
 * yellow CTA (#FFD814), orange accents (#FF9900), teal links (#007185). */
:root{
  --ink-900:#131921; --ink-800:#1A2530; --ink-700:#232F3E;
  --surface-0:#FFFFFF; --surface-100:#EAEDED; --surface-200:#E3E6E6;
  --line:#D5D9D9; --line-strong:#C7CDCD;
  --text-900:#0F1111; --text-600:#565959; --text-500:#767676;
  --accent-500:#FF9900; --accent-600:#F08804; --accent-700:#B45C00;
  --cta-bg:#FFD814; --cta-hover:#F7CA00; --cta-border:#FCD200;
  --link:#007185; --link-hover:#C7511F;
  --success-bg:#E6F4EA; --success-text:#067D62; --success-line:#B7E1CD;
  --danger-bg:#FDECEA; --danger-text:#B12704; --danger-line:#F5C6C0;
  --night-bg:#E8EAF6; --night-text:#2E3A80; --night-line:#C4CAEF;
  --day-bg:#FFF4E0; --day-text:#8A5300; --day-line:#F3D9A5;
  --off-bg:#EDEFEF; --off-text:#6B6E6E; --off-line:#D5D9D9;
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --shadow-card: 0 1px 2px rgba(15,17,17,.1), 0 1px 0 rgba(15,17,17,.04);
  --shadow-pop: 0 8px 24px rgba(15,17,17,.18);
  --font: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html{color-scheme:light;}
html[data-theme="dark"]{color-scheme:dark;}

/* Dark theme — same variables, night-shifted surfaces. Accent/CTA colors stay
   Amazon (yellow CTA, orange brand) for brand consistency. */
html[data-theme="dark"]{
  --ink-900:#0B0F14; --ink-800:#131A22; --ink-700:#1C2733;
  --surface-0:#1F2833; --surface-100:#0F141A; --surface-200:#2A3644;
  --line:#3A4756; --line-strong:#4A5A68;
  --text-900:#E8E6E3; --text-600:#B8C4CE; --text-500:#8A99A8;
  --accent-500:#FF9900; --accent-600:#F08804; --accent-700:#FFB84D;
  --cta-bg:#FFD814; --cta-hover:#F7CA00; --cta-border:#FCD200;
  --link:#45AEBC; --link-hover:#FA8900;
  --success-bg:rgba(6,125,98,.20); --success-text:#5EEAD4; --success-line:rgba(94,234,212,.28);
  --danger-bg:rgba(248,113,113,.12); --danger-text:#FCA5A5; --danger-line:rgba(252,165,165,.28);
  --night-bg:rgba(99,102,241,.15); --night-text:#A5B4FC; --night-line:rgba(165,180,252,.28);
  --day-bg:rgba(255,153,0,.11); --day-text:#FFC46B; --day-line:rgba(255,196,107,.28);
  --off-bg:rgba(255,255,255,.05); --off-text:#9AA5B1; --off-line:rgba(255,255,255,.12);
}
/* ink-900 turns near-black in dark — the totals divider must flip to the (now light) text color */
html[data-theme="dark"] table.breakdown tr.total-row td{border-top-color:var(--text-900);}

.theme-toggle{
  background:var(--ink-800); color:#fff; border:1px solid #3A4756; border-radius:var(--radius-sm);
  padding:8px 11px; font-size:15px; line-height:1;
}
.theme-toggle:hover{border-color:#6c7a89;}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font); color:var(--text-900); background:var(--surface-100);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font); margin:0; font-weight:800; letter-spacing:-.01em;}
button,select,input{font-family:inherit; font-size:inherit; color:inherit;}
button{cursor:pointer;}
a{color:var(--link); text-decoration:none;}
a:hover{color:var(--link-hover); text-decoration:underline;}
.tabular{font-variant-numeric:tabular-nums;}
:focus-visible{outline:3px solid var(--accent-500); outline-offset:2px; border-radius:var(--radius-sm);}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }

/* ---------- Top bar ---------- */
.topbar{
  background:var(--ink-900); color:#fff; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.topbar .brand{display:flex; align-items:center; gap:10px; min-width:0;}
.topbar .brand .mark{
  width:38px; height:38px; border-radius:8px; background:var(--accent-500);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
}
.topbar .brand h1{font-size:18px; color:#fff;}
.topbar .brand .sub{font-size:12px; color:#B8C4CE; margin-top:1px;}
.topbar .period{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.topbar select, .topbar input[type=number]{
  background:var(--ink-800); color:#fff; border:1px solid #3A4756; border-radius:var(--radius-sm);
  padding:8px 10px; min-width:0;
}
.topbar select:hover{border-color:#6c7a89;}
.topbar .period select{max-width:150px;}

.subbar{
  background:var(--ink-700); color:#D9E0E6; padding:9px 20px; font-size:13px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.subbar .save-indicator{display:flex; align-items:center; gap:6px; color:#9AD8C4; min-height:18px;}
.subbar .save-indicator.idle{opacity:.55; color:#9FB0BC;}
.subbar a.settings-link{color:#D9E0E6; font-weight:600;}
.subbar a.settings-link:hover{color:#fff;}

.container{max-width:980px; margin:0 auto; padding:20px 16px 60px;}

/* ---------- My rates (quick personal rates) ---------- */
.rates-panel .rates-body{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:12px 18px;
}
.rates-title{
  font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--accent-700);
}
.rates-field{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-600); font-weight:600;}
.rates-field input{
  width:96px; text-align:right; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:7px 8px; background:var(--surface-0); font-weight:700;
}
.rates-field input:focus{border-color:var(--accent-500); outline:none; box-shadow:0 0 0 3px rgba(255,153,0,.25);}
.rates-field .unit{font-size:12px; color:var(--text-500);}
.rates-hint{font-size:12px; color:var(--text-500); margin-left:auto;}

/* ---------- Summary cards ---------- */
.summary{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px;}
.stat-card{
  background:var(--surface-0); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px 18px; box-shadow:var(--shadow-card); position:relative; overflow:hidden;
}
.stat-card.primary{border-left:4px solid var(--accent-500);}
.stat-card.net{border-left:4px solid var(--link);}
.stat-card.hours{border-left:4px solid var(--success-text);}
.stat-card .label{font-size:12.5px; color:var(--text-600); font-weight:600;}
.stat-card .value{font-size:26px; font-weight:800; margin-top:4px; letter-spacing:-.02em;}
.stat-card .hint{font-size:12px; color:var(--text-500); margin-top:2px;}
@media (max-width:680px){ .summary{grid-template-columns:1fr;} .stat-card .value{font-size:22px;} }

/* ---------- Sections ---------- */
.panel{
  background:var(--surface-0); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card); margin-bottom:14px; overflow:hidden;
}
.panel > .panel-head{
  padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center;
  justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.panel > .panel-head h2{font-size:15.5px;}
.panel-body{padding:16px 18px;}
.hint-line{font-size:12.5px; color:var(--text-600); margin-top:2px;}

/* ---------- Brush toolbar ---------- */
.brush-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 18px; background:var(--surface-100); border-bottom:1px solid var(--line);
}
.brush-toggle{
  border:1px solid var(--line-strong); background:var(--surface-0); border-radius:999px;
  padding:7px 14px; font-size:13px; font-weight:700; color:var(--text-900);
}
.brush-toggle:hover{background:var(--surface-200);}
.brush-toggle.active{background:var(--ink-700); border-color:var(--ink-700); color:#fff;}
.brush-chip{
  border:1px solid var(--line-strong); border-radius:999px; padding:6px 12px;
  font-size:12.5px; font-weight:700;
}
.brush-chip.t-volno{background:var(--off-bg); color:var(--off-text); border-color:var(--off-line);}
.brush-chip.t-den{background:var(--day-bg); color:var(--day-text); border-color:var(--day-line);}
.brush-chip.t-noc{background:var(--night-bg); color:var(--night-text); border-color:var(--night-line);}
.brush-chip.t-dovolena{background:var(--success-bg); color:var(--success-text); border-color:var(--success-line);}
.brush-chip:hover{filter:brightness(.97);}
.brush-chip.sel{outline:2px solid var(--ink-900); outline-offset:1px;}
.brush-ot{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-900);}
.brush-ot input{width:16px; height:16px; accent-color:var(--accent-600);}
.brush-ot.disabled{opacity:.4; pointer-events:none;}
.brush-hint{font-size:12px; color:var(--text-500); flex-basis:100%;}

/* ---------- Calendar view ---------- */
.calendar-wrap{position:relative; padding:14px 18px 18px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cal-wd{
  text-align:center; font-size:11.5px; font-weight:700; color:var(--text-500);
  text-transform:uppercase; letter-spacing:.04em; padding:4px 0;
}
.cal-day{
  position:relative; min-height:76px; border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--surface-0); padding:6px 7px; text-align:left;
  display:flex; flex-direction:column; gap:2px;
  transition:box-shadow .12s, transform .12s;
}
.cal-day:hover{box-shadow:var(--shadow-pop); transform:translateY(-1px); z-index:2;}
.cal-grid.brushing .cal-day{cursor:crosshair;}
.cal-grid.brushing{touch-action:none; user-select:none; -webkit-user-select:none;}
.cal-grid.brushing .cal-day:hover{transform:none;}
.cal-day.pad{border:none; background:transparent; pointer-events:none; box-shadow:none;}
.cal-day .num{font-size:13px; font-weight:700; color:var(--text-900); line-height:1.1;}
.cal-day.pad .num{visibility:hidden;}
.cal-day .chip{
  align-self:flex-start; font-size:10.5px; font-weight:700; border-radius:999px;
  padding:1px 7px; line-height:1.5; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.cal-day .amt{font-size:11.5px; color:var(--text-600); font-weight:600; margin-top:auto;}
.cal-day .hol{
  font-size:9.5px; color:var(--danger-text); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cal-day.t-volno{background:var(--off-bg); border-color:var(--off-line);}
.cal-day.t-volno .chip{background:var(--surface-0); color:var(--off-text); border:1px solid var(--off-line);}
.cal-day.t-den{background:var(--day-bg); border-color:var(--day-line);}
.cal-day.t-den .chip{background:var(--surface-0); color:var(--day-text); border:1px solid var(--day-line);}
.cal-day.t-noc{background:var(--night-bg); border-color:var(--night-line);}
.cal-day.t-noc .chip{background:var(--surface-0); color:var(--night-text); border:1px solid var(--night-line);}
.cal-day.t-dovolena{background:var(--success-bg); border-color:var(--success-line);}
.cal-day.t-dovolena .chip{background:var(--surface-0); color:var(--success-text); border:1px solid var(--success-line);}
.cal-day.t-svatek{background:var(--danger-bg); border-color:var(--danger-line);}
.cal-day.t-svatek .chip{background:var(--surface-0); color:var(--danger-text); border:1px solid var(--danger-line);}
/* náhrada mzdy — holiday fell on the shift but the day was not worked */
.cal-day.nahrada{border-style:dashed; border-width:2px;}
.cal-day.nahrada .chip{background:var(--surface-0); color:var(--danger-text); border:1px dashed var(--danger-line);}
.cal-day.is-today{outline:2px solid var(--accent-500); outline-offset:-2px;}
.cal-day.is-today .num::after{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent-500); margin-left:5px; vertical-align:1px;
}
.cal-day .ot-mark{
  position:absolute; top:5px; right:6px; font-size:11px; font-weight:800; color:var(--accent-700);
}
.cal-day.is-weekend .num{color:var(--accent-700);}
@media (max-width:680px){
  .calendar-wrap{padding:10px 10px 14px;}
  .cal-grid{gap:4px;}
  .cal-day{min-height:52px; padding:4px 5px; border-radius:6px;}
  .cal-day .amt, .cal-day .hol{display:none;}
  .cal-day .chip{font-size:9px; padding:0 5px;}
  .cal-wd{font-size:10px;}
}

/* ---------- Day dropdown (mini select popover) ---------- */
.day-popover{
  position:absolute; z-index:60; background:var(--surface-0); border:1px solid var(--line-strong);
  border-radius:var(--radius-md); box-shadow:var(--shadow-pop); padding:8px; width:248px; display:none;
}
.day-popover.open{display:block;}
.day-popover .pop-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12.5px; font-weight:700; color:var(--text-600); margin:0 2px 6px;
}
.day-popover .pop-head .pop-close{
  border:none; background:transparent; color:var(--text-500); font-size:15px; line-height:1; padding:2px 4px;
}
.pop-list{display:flex; flex-direction:column; gap:2px;}
.pop-opt{
  display:flex; align-items:center; gap:8px; width:100%;
  border:1px solid transparent; border-radius:var(--radius-sm); padding:7px 8px;
  font-size:13px; font-weight:600; text-align:left; background:transparent; color:var(--text-900);
}
.pop-opt:hover{background:var(--surface-100);}
.pop-opt.sel{background:var(--surface-100); border-color:var(--line);}
.pop-opt .dot{width:10px; height:10px; border-radius:3px; flex:none; border:1px solid rgba(0,0,0,.08);}
.pop-opt .dot.t-volno{background:var(--off-bg); border-color:var(--off-line);}
.pop-opt .dot.t-den{background:var(--day-bg); border-color:var(--day-line);}
.pop-opt .dot.t-noc{background:var(--night-bg); border-color:var(--night-line);}
.pop-opt .dot.t-dovolena{background:var(--success-bg); border-color:var(--success-line);}
.pop-opt .opt-label{flex:1;}
.pop-opt .check{color:var(--accent-600); font-weight:800;}
.pop-sep{height:1px; background:var(--surface-200); margin:7px 2px;}
.day-popover .pop-ot{
  display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--text-900);
  padding:2px 4px 2px;
}
.day-popover .pop-ot input{width:16px; height:16px; accent-color:var(--accent-600);}
.day-popover .pop-ot.disabled{opacity:.4; pointer-events:none;}
.pop-hol-title{font-size:11.5px; font-weight:700; color:var(--danger-text); padding:2px 6px 5px;}
/* mobile: bottom sheet instead of an anchored popup */
@media (max-width:680px){
  .day-popover{
    position:fixed; left:8px; right:8px; bottom:8px; top:auto; width:auto;
    padding:12px; border-radius:var(--radius-lg);
  }
}

/* legend */
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text-600); padding:0 18px 14px; align-items:center;}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{width:10px; height:10px; border-radius:3px; display:inline-block;}
.legend i.lg-nahr{width:9px; height:9px;}

/* settings form */
details.panel{padding:0;}
details.panel > summary{list-style:none; cursor:pointer; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:15.5px;}
details.panel > summary::-webkit-details-marker{display:none;}
details.panel > summary .chev{transition:transform .15s; color:var(--text-500); font-size:13px;}
details.panel[open] > summary .chev{transform:rotate(90deg);}
details.panel > summary{border-bottom:1px solid var(--line);}
.settings-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 24px;}
@media (max-width:680px){.settings-grid{grid-template-columns:1fr;}}
.settings-group h3{font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-500); margin-bottom:10px; font-weight:700;}
.field-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--surface-200);}
.field-row label{font-size:13.5px; color:var(--text-900); flex:1;}
.field-row input{
  width:104px; text-align:right; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:6px 8px;
}
.field-row .unit{font-size:12px; color:var(--text-500); width:40px; text-align:left;}
.settings-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.btn{
  border-radius:var(--radius-sm); padding:9px 16px; font-weight:700; font-size:13.5px; border:1px solid transparent;
}
.btn.primary{background:var(--cta-bg); color:var(--text-900); border-color:var(--cta-border);}
.btn.primary:hover{background:var(--cta-hover);}
.btn.ghost{background:var(--surface-0); border-color:var(--line-strong); color:var(--text-900);}
.btn.ghost:hover{background:var(--surface-100);}

/* breakdown table */
.bt-wrap{overflow-x:auto;}
table.breakdown{border-collapse:collapse; width:100%; font-size:12.5px; min-width:920px;}
table.breakdown th, table.breakdown td{padding:7px 8px; text-align:right; border-bottom:1px solid var(--surface-200); white-space:nowrap;}
table.breakdown th{color:var(--text-600); font-weight:600; text-align:right; position:sticky; top:0; background:var(--surface-0);}
table.breakdown td:first-child, table.breakdown th:first-child{text-align:left;}
table.breakdown tr.total-row td{font-weight:800; border-top:2px solid var(--ink-900); border-bottom:none;}
table.breakdown tr.wknd td:first-child{color:var(--accent-700);}
table.breakdown tr.nahr td:first-child{color:var(--danger-text);}

/* name field */
.name-field{display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.name-field input{
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:8px 10px; flex:1; max-width:280px;
  background:var(--surface-0);
}
.name-field label{font-size:13px; color:var(--text-600); font-weight:600;}

footer{
  background:var(--ink-900); color:#B8C4CE; padding:22px 20px 30px; margin-top:24px; text-align:center; font-size:12.5px;
}
footer a{color:#D9E0E6; font-weight:600;}
footer a:hover{color:#fff;}
footer .sep{margin:0 8px; color:#4A5A68;}

.toast{
  position:fixed; bottom:18px; right:18px; background:var(--ink-900); color:#fff; padding:10px 16px;
  border-radius:var(--radius-md); box-shadow:var(--shadow-pop); font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:8px; transform:translateY(12px); opacity:0; transition:opacity .18s, transform .18s;
  pointer-events:none; z-index:70;
}
.toast.show{opacity:1; transform:translateY(0);}

/* ---------- Motion & polish ---------- */
/* smooth dark/light switch everywhere it matters */
body, .panel, .stat-card, .topbar, .subbar, footer,
.cal-day, .day-popover, .brush-bar, .name-field input{
  transition:background-color .25s, color .25s, border-color .25s, box-shadow .12s;
}
/* month grid fades in on every (re)render */
@keyframes calFade{from{opacity:.35; transform:translateY(4px);} to{opacity:1; transform:none;}}
.cal-grid{animation:calFade .18s ease-out;}
/* pop feedback when a cell gets painted by the brush */
@keyframes cellPop{0%{transform:scale(.92);} 60%{transform:scale(1.05);} 100%{transform:scale(1);}}
.cal-day.painted{animation:cellPop .18s ease-out; z-index:2;}
/* dropdown open */
@keyframes popIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.day-popover.open{animation:popIn .15s ease-out;}
@media (max-width:680px){
  @keyframes sheetUp{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;}}
  .day-popover.open{animation:sheetUp .2s ease-out;}
}
/* hover states */
.stat-card{transition:box-shadow .15s, transform .15s, background-color .25s, border-color .25s;}
.stat-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-pop);}
.brush-chip{transition:filter .12s;}

/* ---------- mobile tightening (nothing should ever overflow) ---------- */
body{overflow-x:hidden;}
@media (max-width:680px){
  .container{padding:14px 10px 48px;}
  .topbar{padding:12px 12px; gap:10px;}
  .topbar .brand h1{font-size:16px;}
  .topbar .brand .sub{display:none;}
  .topbar .period{gap:6px;}
  .topbar select{padding:7px 8px;}
  .topbar .period select{max-width:112px;}
  .theme-toggle{padding:7px 9px;}
  .subbar{padding:8px 12px;}
  .calendar-wrap{padding:8px 6px 12px;}
  .cal-grid{gap:3px;}
  .cal-day{min-height:48px; padding:3px 4px;}
  .brush-bar{padding:8px 12px; gap:6px;}
  .legend{padding:0 12px 10px; gap:10px; font-size:11px;}
  .rates-panel .rates-body{gap:12px;}
  .rates-hint{flex-basis:100%; margin-left:0;}
}

/* privacy modal */
.privacy-modal{
  position:fixed; inset:0; z-index:80; background:rgba(15,17,17,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.privacy-modal[hidden]{display:none;}
@keyframes privacyIn{from{opacity:0; transform:scale(.96) translateY(8px);} to{opacity:1; transform:none;}}
.privacy-box{
  background:var(--surface-0); border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop); width:min(560px, 100%); max-height:82vh; overflow:auto;
  padding:18px 20px; animation:privacyIn .18s ease-out;
}
.privacy-head{display:flex; align-items:center; justify-content:space-between; font-size:16px; margin-bottom:8px;}
.privacy-head .pop-close{border:none; background:transparent; color:var(--text-500); font-size:16px; padding:4px 6px;}
.privacy-body p{font-size:13.5px; color:var(--text-600); margin:0 0 10px; line-height:1.55;}
.privacy-body p strong{color:var(--text-900);}

@media print{
  .topbar select, .topbar input,
  .settings-actions, .toast, .subbar a, .calendar-wrap, .day-popover,
  .brush-bar{display:none !important;}
  body{background:#fff;}
  .panel{box-shadow:none; border:1px solid #ccc;}
}