:root{
    --ground:#F2F4F3; --surface:#FFFFFF; --surface-2:#E9EDEB; --surface-3:#DFE4E1;
    --ink:#11161A; --ink-2:#3C4750; --muted:#6A757F;
    --rule:#D8DEDA; --rule-strong:#BFC7C2;
    --accent:#17506F; --accent-soft:#E1EBF1;
    --ok:#2A6A4E; --ok-soft:#E0EEE7;
    --warn:#8A5B10; --warn-soft:#F6EAD5;
    --alert:#98372B;
    --weekend:#EDF0EE;
    --shadow:0 1px 2px rgba(17,22,26,.05), 0 10px 26px -20px rgba(17,22,26,.4);
    --serif:"Source Serif 4",Georgia,serif;
    --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0E1216; --surface:#151A1F; --surface-2:#1B2127; --surface-3:#232A31;
      --ink:#E6EAED; --ink-2:#B8C1C9; --muted:#8A959F;
      --rule:#252C33; --rule-strong:#353E46;
      --accent:#79B2D6; --accent-soft:#16232C;
      --ok:#6CBD93; --ok-soft:#15251E;
      --warn:#D2A046; --warn-soft:#282013;
      --alert:#DF8779;
      --weekend:#191F25;
      --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 30px -22px #000;
    }
  }
  :root[data-theme="dark"]{
    --ground:#0E1216; --surface:#151A1F; --surface-2:#1B2127; --surface-3:#232A31;
    --ink:#E6EAED; --ink-2:#B8C1C9; --muted:#8A959F;
    --rule:#252C33; --rule-strong:#353E46;
    --accent:#79B2D6; --accent-soft:#16232C;
    --ok:#6CBD93; --ok-soft:#15251E;
    --warn:#D2A046; --warn-soft:#282013;
    --alert:#DF8779;
    --weekend:#191F25;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 30px -22px #000;
  }

  *{box-sizing:border-box}
  body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:14.5px; line-height:1.5;
       -webkit-font-smoothing:antialiased}
  .wrap{max-width:1180px; margin:0 auto; padding:28px 20px 80px; display:flex; flex-direction:column; gap:22px}
  .mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
  .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

  header.top{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 24px; border-bottom:2px solid var(--rule-strong); padding-bottom:14px}
  h1{font-family:var(--serif); font-weight:600; font-size:26px; margin:0; letter-spacing:-.01em}
  header.top p{margin:2px 0 0; color:var(--muted); font-size:13px; max-width:56ch}
  .savestate{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap}
  .savestate b{color:var(--ok); font-weight:500}
  .savestate.warn b{color:var(--warn)}

  .periodbar{display:flex; flex-wrap:wrap; gap:6px}
  .pbtn{font-family:var(--mono); font-size:12px; padding:6px 12px; border-radius:3px; border:1px solid var(--rule-strong);
        background:var(--surface); color:var(--ink-2); cursor:pointer; letter-spacing:.02em}
  .pbtn:hover{border-color:var(--accent); color:var(--ink)}
  .pbtn[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--surface); font-weight:500}
  .pbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .pbtn .wk{opacity:.6; margin-left:6px}

  .dates{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); background:var(--surface);
         border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow); overflow:hidden}
  .dates div{padding:11px 15px; border-right:1px solid var(--rule)}
  .dates div:last-child{border-right:0}
  .dates dt{margin:0 0 4px}
  .dates dd{margin:0; font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums}
  .dates .hot dd{color:var(--accent); font-weight:600}

  .cols{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:22px; align-items:start}
  @media (max-width:940px){ .cols{grid-template-columns:minmax(0,1fr)} .sheet, aside, .card{min-width:0} }

  /* --- grid --- */
  .sheet{background:var(--surface); border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow); overflow:hidden}
  .dow{display:grid; grid-template-columns:52px repeat(7,1fr) 74px 124px; background:var(--surface-2); border-bottom:1px solid var(--rule)}
  .dow span{padding:8px 6px; text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
            text-transform:uppercase; color:var(--muted)}
  .dow span:first-child, .dow span:last-child{text-align:right; padding-right:10px}
  .wkrow{display:grid; grid-template-columns:52px repeat(7,1fr) 74px 124px; border-bottom:1px solid var(--rule)}
  .wkrow:last-child{border-bottom:0}
  .wkno{display:flex; align-items:center; justify-content:flex-end; padding:0 10px 0 6px; font-family:var(--mono);
        font-size:11px; color:var(--muted); background:var(--surface-2); border-right:1px solid var(--rule)}
  .wktot{display:flex; align-items:center; justify-content:flex-end; padding:0 10px; font-family:var(--mono);
         font-size:13px; font-variant-numeric:tabular-nums; background:var(--surface-2); border-left:1px solid var(--rule); color:var(--ink-2)}
  .cell{border-right:1px solid var(--rule); padding:6px 5px 7px; min-height:62px; display:flex; flex-direction:column; gap:3px}
  .cell.we{background:var(--weekend)}
  .cell.today{box-shadow:inset 0 0 0 2px var(--accent)}
  .cell .d{font-family:var(--mono); font-size:10.5px; color:var(--muted); display:flex; justify-content:space-between; align-items:center}
  .cell.today .d{color:var(--accent); font-weight:600}
  .cell input{width:100%; border:1px solid transparent; background:transparent; border-radius:3px; padding:3px 5px;
      font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums; color:var(--ink); text-align:center}
  .cell input::placeholder{color:var(--rule-strong)}
  .cell input:hover{border-color:var(--rule-strong)}
  .cell input:focus{outline:none; border-color:var(--accent); background:var(--surface)}
  .cell .flag{font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; text-align:center; color:var(--warn)}

  .wkstat{display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:3px;
          padding:6px 9px; background:var(--surface-2); border-left:1px solid var(--rule)}
  .chip{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:5px 8px;
        border-radius:3px; border:1px solid var(--rule-strong); background:var(--surface); color:var(--muted);
        cursor:pointer; text-align:center; white-space:nowrap}
  .chip:hover{border-color:var(--accent)}
  .chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .chip[data-s="sent"]{background:var(--warn-soft); border-color:var(--warn); color:var(--warn); font-weight:500}
  .chip[data-s="approved"]{background:var(--ok-soft); border-color:var(--ok); color:var(--ok); font-weight:500}
  .chip[data-due="1"]{border-style:dashed; border-color:var(--warn); color:var(--warn)}
  .wkstat .sub{font-family:var(--mono); font-size:9.5px; text-align:center; color:var(--muted); letter-spacing:.02em}

  /* --- side --- */
  aside{display:flex; flex-direction:column; gap:14px; position:sticky; top:16px}
  @media (max-width:940px){ aside{position:static} }
  .card{background:var(--surface); border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow); padding:15px 16px}
  .card h2{font-family:var(--serif); font-size:16px; margin:0 0 12px; font-weight:600}
  .kv{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:5px 0; border-bottom:1px dotted var(--rule)}
  .kv:last-child{border-bottom:0}
  .kv span{font-size:12.5px; color:var(--muted)}
  .kv b{font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums; font-weight:500}
  .kv.big b{font-size:20px; color:var(--accent)}
  .kv.sum{border-top:1px solid var(--rule-strong); margin-top:5px; padding-top:9px}
  .inrow{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0}
  .inrow label{font-size:12.5px; color:var(--muted)}
  .inrow input, .inrow select{width:104px; font-family:var(--mono); font-size:13px; text-align:right; padding:4px 7px;
      border:1px solid var(--rule-strong); border-radius:3px; background:var(--ground); color:var(--ink); font-variant-numeric:tabular-nums}
  .inrow input:focus, .inrow select:focus{outline:none; border-color:var(--accent)}
  button.act{width:100%; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
     padding:9px; border-radius:3px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; margin-top:10px}
  button.act.ghost{background:transparent; color:var(--accent)}
  button.act:hover{filter:brightness(1.08)}
  button.act:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  pre.payload{margin:10px 0 0; background:var(--surface-2); border:1px solid var(--rule); border-radius:3px; padding:10px;
     font-family:var(--mono); font-size:11px; line-height:1.45; overflow-x:auto; max-height:290px; color:var(--ink-2)}
  .note{font-size:12px; color:var(--muted); margin:9px 0 0; line-height:1.45}
  .note b{color:var(--ink-2); font-weight:500}
  .rulebox{background:var(--warn-soft); border:1px solid var(--rule); border-left:3px solid var(--warn); border-radius:3px;
     padding:9px 11px; font-size:12.2px; color:var(--ink-2)}
  .rulebox b{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--warn); display:block; margin-bottom:3px}
  footer{border-top:1px solid var(--rule); padding-top:14px; font-size:12px; color:var(--muted)}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- topbar (self-hosted) ---------- */
.topbar{display:flex; align-items:center; gap:10px; margin-left:auto}
.topbar a, .topbar button{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  background:none; border:1px solid var(--rule-strong); border-radius:3px; padding:5px 9px; cursor:pointer; text-decoration:none}
.topbar a:hover, .topbar button:hover{color:var(--ink); border-color:var(--accent)}
.topbar .savestate{margin-left:0}

/* ---------- login / setup / keys ---------- */
.auth{max-width:440px; margin:10vh auto 0; padding:0 20px; display:flex; flex-direction:column; gap:18px}
.auth .card{padding:22px 24px}
.auth h1{font-size:24px; margin-bottom:6px}
.auth p{margin:0 0 12px; color:var(--ink-2); font-size:14px}
.auth .inrow input{width:100%; text-align:left}
.auth .inrow{flex-direction:column; align-items:stretch; gap:5px}
.auth .err{color:var(--alert); font-family:var(--mono); font-size:12px; margin-top:8px; min-height:1.2em}
.auth .keys{display:flex; flex-direction:column; gap:8px; margin:6px 0 12px}
.auth .key{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border:1px solid var(--rule); border-radius:3px; background:var(--surface-2)}
.auth .key b{font-weight:500; font-size:14px}
.auth .key span{font-family:var(--mono); font-size:11px; color:var(--muted)}
.auth .key button{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--alert);
  background:none; border:1px solid var(--rule-strong); border-radius:3px; padding:4px 8px; cursor:pointer}
.auth .key button:disabled{opacity:.4; cursor:default}

/* ---------- invoice actions ---------- */
.emitrow{display:flex; gap:8px; margin-top:10px}
.emitrow button{margin-top:0}
.invlist{margin:10px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px}
.invlist li{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); display:flex; justify-content:space-between; gap:8px}
.invlist li b{font-weight:500}
.invlist li .st-sent{color:var(--ok)} .invlist li .st-failed{color:var(--alert)} .invlist li .st-prepared{color:var(--muted)}

/* ---------- mobile: listă verticală pe zile ---------- */
@media (max-width:700px){
  .wrap{padding:16px 12px 60px; gap:16px}
  h1{font-size:22px}
  header.top p{display:none}
  .dow{display:none}
  .wkrow{grid-template-columns:auto 1fr auto; grid-template-areas:
      "no tot stat" "d1 d1 d1" "d2 d2 d2" "d3 d3 d3" "d4 d4 d4" "d5 d5 d5" "d6 d6 d6" "d7 d7 d7";
      border-bottom:6px solid var(--ground)}
  .wkno{grid-area:no; justify-content:flex-start; padding:10px 12px; font-size:12px; border-right:0; font-weight:600; color:var(--ink)}
  .wktot{grid-area:tot; justify-content:flex-end; padding:10px 12px; font-size:14px; border-left:0; font-weight:500}
  .wkstat{grid-area:stat; padding:6px 10px; border-left:0; flex-direction:row; align-items:center; gap:8px}
  .wkstat .sub{display:none}
  .cell:nth-child(2){grid-area:d1} .cell:nth-child(3){grid-area:d2} .cell:nth-child(4){grid-area:d3}
  .cell:nth-child(5){grid-area:d4} .cell:nth-child(6){grid-area:d5} .cell:nth-child(7){grid-area:d6} .cell:nth-child(8){grid-area:d7}
  .cell{flex-direction:row; align-items:center; justify-content:space-between; min-height:0; padding:7px 12px; border-right:0; border-top:1px solid var(--rule); gap:10px}
  .cell .d{font-size:12.5px; min-width:92px; color:var(--ink-2)}
  .cell .d::after{content:attr(data-dow); color:var(--muted); margin-left:6px; font-size:11px}
  .cell input{width:104px; font-size:17px; padding:6px 8px; border-color:var(--rule); background:var(--surface)}
  .cell .flag{margin-left:auto}
  .cell.we{background:var(--weekend)}
  .cell.we input{opacity:.7}
  .cell.today{box-shadow:inset 3px 0 0 var(--accent)}
  .dates{grid-template-columns:1fr 1fr}
  .dates div:nth-child(2n){border-right:0}
  .dates div{border-bottom:1px solid var(--rule)}
  .cols{gap:16px}
  pre.payload{max-height:180px}
}

/* ---------- v1.1: mobile pass ---------- */
.msum{display:none}
.emitmsg{margin-top:10px; padding:9px 11px; border-radius:3px; font-size:12.5px; line-height:1.45; border:1px solid var(--rule); word-break:break-word}
.emitmsg.ok{background:var(--ok-soft); border-left:3px solid var(--ok); color:var(--ink-2)}
.emitmsg.err{background:var(--warn-soft); border-left:3px solid var(--alert); color:var(--ink-2); font-family:var(--mono); font-size:11.5px}
@media (max-width:700px){
  .wrap{padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right));
        padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  header.top{gap:10px 14px; padding-bottom:10px}
  .topbar{width:100%}
  .topbar .savestate{margin-left:auto}
  /* sticky summary strip */
  .msum{display:grid; grid-template-columns:1fr 1fr 1fr; position:sticky; top:0; z-index:5; margin:0 calc(-1*max(12px, env(safe-area-inset-left)));
        padding:8px 16px; background:var(--surface); border-bottom:1px solid var(--rule); box-shadow:var(--shadow)}
  .msum div{display:flex; flex-direction:column; gap:1px}
  .msum b{font-family:var(--mono); font-size:17px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--accent)}
  .msum b.ok{color:var(--ok)} .msum b.pend{color:var(--muted)} .msum.pend b.pend{color:var(--warn)}
  /* period strip scrolls horizontally instead of wrapping */
  .periodbar{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
        margin:0 calc(-1*max(12px, env(safe-area-inset-left))); padding:2px max(12px, env(safe-area-inset-left))}
  .periodbar::-webkit-scrollbar{display:none}
  .pbtn{flex:0 0 auto; padding:9px 13px; font-size:13px}
  /* bigger touch targets */
  .chip{min-height:38px; padding:8px 12px; font-size:11.5px; display:flex; align-items:center; justify-content:center}
  .wkstat{padding:6px 8px}
  .cell{min-height:50px}
  .cell input{width:112px; font-size:18px; padding:8px 10px}
  /* empty weekends collapse */
  .cell.we:not(.has){min-height:0; padding:3px 12px; opacity:.55}
  .cell.we:not(.has) input{font-size:14px; padding:3px 8px; width:88px}
  .cell.we:not(.has) .d{font-size:11.5px}
  /* prevent iOS focus-zoom: every input at least 16px */
  .inrow input, .inrow select{font-size:16px; width:120px; padding:6px 8px}
  .auth .inrow input{font-size:16px}
  button.act{padding:12px; font-size:13px}
  .topbar a, .topbar button{padding:8px 11px; font-size:12px}
  .auth .key button{padding:8px 10px}
  footer{font-size:12.5px}
  pre.payload{white-space:pre-wrap; word-break:break-all}
  .wkrow{scroll-margin-top:64px}
  /* input on the right edge, flag in the middle */
  .cell input{order:3; margin-left:auto}
  .cell .flag{order:2; margin-left:0; text-align:right}
  .cell .d{flex:0 0 auto}
}