/* =========================================================
   MOTO LUSHI — style.css
========================================================= */

:root {
  --bg:       #eef0f4;
  --surface:  #ffffff;
  --surface2: #f7f8fb;
  --surface3: #f0f2f6;
  --line:     #e3e6ec;
  --line2:    #d3d8e0;
  --text:     #161a20;
  --muted:    #667085;
  --muted2:   #98a2b3;
  --red:      #e4262b;
  --red2:     #bf161b;
  --redsoft:  #fde9ea;
  --green:    #0f9d58;
  --greensoft:#e3f5ea;
  --amber:    #cf8307;
  --ambersoft:#fbf0db;
  --blue:     #2563d6;
  --bluesoft: #e6effd;
  --shadow:   0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --shadow2:  0 18px 50px rgba(16,24,40,.16);
  --r:        10px;
}

/* ── LOGIN PAGE ────────────────────────────────────────────── */
body.auth{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;background:var(--bg);
}
.login-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:38px 36px;width:100%;max-width:420px;
  box-shadow:var(--shadow2);
}
.login-card .sub{color:var(--muted);font-size:13.5px;margin:14px 0 24px;line-height:1.5}
.field{margin-bottom:16px}
.err{
  background:var(--redsoft);border:1px solid #f5c6c7;color:var(--red2);
  border-radius:var(--r);padding:10px 14px;font-size:13px;margin-bottom:16px;display:none;
}
.err.show{display:block}
.hint{font-size:12.5px;color:var(--muted);margin-top:16px;text-align:center}
.hint b{color:var(--text);font-family:'IBM Plex Mono'}

/* ── RESET & BASE ──────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:14px;-webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.3px}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--text)}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#c6ccd6;border-radius:7px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ── INPUTS & BUTTONS ──────────────────────────────────────── */
.inp{
  width:100%;background:var(--surface);border:1px solid var(--line2);
  color:var(--text);padding:11px 13px;border-radius:var(--r);outline:none;transition:.15s;
}
.inp:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--redsoft)}
select.inp{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;
}
.ml{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:7px;font-weight:600}

.btn{
  background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-weight:600;
  padding:11px 18px;border-radius:var(--r);transition:.15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;box-shadow:0 3px 10px rgba(228,38,43,.25);
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--surface);border:1px solid var(--line2);color:var(--text);box-shadow:none}
.btn.ghost:hover{background:var(--surface2);filter:none}
.btn.sm{padding:8px 13px;font-size:12.5px}

/* ── BRAND (sidebar logo) ──────────────────────────────────── */
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,var(--red),var(--red2));
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald';font-weight:700;font-size:23px;color:#fff;
  box-shadow:0 6px 18px rgba(228,38,43,.35);
}
.brand .tt{font-family:'Oswald';font-weight:700;font-size:22px;line-height:1}
.brand .tt small{
  display:block;font-family:'IBM Plex Mono';font-size:9.5px;
  letter-spacing:2.5px;color:var(--muted);font-weight:500;margin-top:4px;
}

/* ── APP SHELL ─────────────────────────────────────────────── */
body.app{
  display:grid;grid-template-columns:240px 1fr;grid-template-rows:64px 1fr;
  grid-template-areas:"side top" "side main";height:100vh;
}
.sidebar{
  grid-area:side;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 14px;
}
.sidebar .brand{margin:6px 8px 22px}
.sidebar .brand .logo{width:40px;height:40px;font-size:20px;border-radius:10px}
.sidebar .brand .tt{font-size:19px}

.nav{display:flex;flex-direction:column;gap:3px;flex:1}
.nav a{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;
  color:var(--muted);font-weight:500;font-size:13.5px;transition:.13s;position:relative;
}
.nav a svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9}
.nav a:hover{background:var(--surface2);color:var(--text)}
.nav a.active{background:var(--redsoft);color:var(--red2)}
.nav a.active::before{
  content:"";position:absolute;left:-14px;top:9px;bottom:9px;
  width:3px;background:var(--red);border-radius:0 3px 3px 0;
}
.nav a .badge{
  margin-left:auto;background:var(--red);color:#fff;
  font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;
  font-family:'IBM Plex Mono';
}
.nav .new{
  background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;
  justify-content:center;font-weight:600;margin:4px 4px 8px;
  box-shadow:0 4px 12px rgba(228,38,43,.28);
}
.nav .new:hover{filter:brightness(1.06);color:#fff}
.nav .new svg{stroke:#fff}
.nav-sep{height:1px;background:var(--line);margin:8px 10px}

.topbar{
  grid-area:top;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;background:var(--surface);border-bottom:1px solid var(--line);
}
.topbar .ttl{font-family:'Oswald';font-size:20px;font-weight:600}
.topbar .right{display:flex;align-items:center;gap:14px}

.menu-toggle{
  display:none;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface2);color:var(--text);cursor:pointer;margin-right:10px;flex:none;
}
.menu-toggle:hover{background:var(--surface3)}

.nav-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:998;
}

.userchip{
  display:flex;align-items:center;gap:10px;background:var(--surface2);
  padding:6px 8px 6px 12px;border-radius:30px;border:1px solid var(--line);
  cursor: pointer;
}
.userchip .av{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red2));
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;color:#fff;
}
.userchip .nm{font-size:13px;font-weight:600;line-height:1.1}
.userchip .rl{font-size:10.5px;color:var(--muted)}

.main{grid-area:main;overflow:auto;padding:26px 30px}

/* ── PANEL (table wrapper card) ────────────────────────────── */
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
}

/* ── TABLE ─────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);font-weight:700;padding:11px 18px;
  border-bottom:1px solid var(--line);background:var(--surface2);
}
.tbl td{
  padding:12px 18px;border-bottom:1px solid var(--surface3);
  font-size:13.5px;vertical-align:middle;
}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--surface2)}
.tbl .num{text-align:right;font-family:'IBM Plex Mono';font-variant-numeric:tabular-nums}
.tbl .center{text-align:center}
.tbl th.asc::after{content:" ↑";opacity:.5;font-size:10px}
.tbl th.desc::after{content:" ↓";opacity:.5;font-size:10px}

/* ── SEARCH BOX ────────────────────────────────────────────── */
.search{position:relative;flex:1;min-width:200px;max-width:400px}
.search svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:2;
}
.search input{
  width:100%;padding:10px 14px 10px 38px;
  background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r);outline:none;
}
.search input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--redsoft)}

/* ── STATUS PILLS ──────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;font-family:'IBM Plex Mono'}
.pill.ok {background:var(--greensoft);color:var(--green)}
.pill.low{background:var(--ambersoft);color:var(--amber)}
.pill.out{background:var(--redsoft);color:var(--red2)}

/* ── ROW ACTIONS ───────────────────────────────────────────── */
.row-acts{display:flex;gap:6px;justify-content:flex-end}
.icobtn{
  width:31px;height:31px;border-radius:8px;background:var(--surface2);
  display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);
}
.icobtn svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2}
.icobtn:hover{background:var(--surface3)}
.icobtn:hover svg{stroke:var(--text)}
.icobtn.del:hover svg{stroke:var(--red)}

/* ── EMPTY STATE ───────────────────────────────────────────── */
.empty{text-align:center;padding:48px 20px;color:var(--muted2)}
.empty svg{width:44px;height:44px;stroke:var(--line2);fill:none;stroke-width:1.5;margin-bottom:12px}

/* ── FILTER CARD ───────────────────────────────────────────── */
.filter-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--shadow);margin-bottom:18px;
  display:flex;flex-direction:column;gap:10px;
}
.filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── PAGE LAYOUT (content + right sidebar) ─────────────────── */
.pg-layout{display:flex;gap:20px;align-items:flex-start}
.pg-content{flex:1;min-width:0}
.pg-sidebar{
  width:268px;flex:none;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);position:sticky;top:0;overflow:hidden;
}
.ps-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.ps-head span{font-family:'Oswald';font-size:15px;font-weight:600;letter-spacing:.4px}

/* ── SIDEBAR Q&A ROWS ──────────────────────────────────────── */
.si-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;border-bottom:1px solid var(--line);
}
.si-row:last-child{border-bottom:none}
.si-q{font-size:12.5px;color:var(--muted);font-weight:500}
.si-a{font-family:'IBM Plex Mono';font-size:13px;font-weight:600;color:var(--text)}
.si-divider{height:1px;background:var(--line);margin:4px 0}

/* ── CLIENT AUTOCOMPLETE ───────────────────────────────────── */
.client-wrap{position:relative;min-width:190px;flex:1;max-width:270px}
.client-drop{
  position:absolute;top:calc(100% + 5px);left:0;right:0;
  background:var(--surface);border:1px solid var(--line2);border-radius:10px;
  box-shadow:var(--shadow2);z-index:50;display:none;max-height:220px;overflow-y:auto;
}
.client-wrap{
    position:relative;
    min-width:220px;
    flex:1;
}

.client-drop{
    position:absolute;
    top:100%;
    left:0;
    right:0;

    margin-top:6px;

    background:#fff;
    border:1px solid #d3d8e0;
    border-radius:12px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08),
        0 2px 8px rgba(0,0,0,.05);

    z-index:9999;

    display:none;
    overflow:hidden;
    max-height:250px;
    overflow-y:auto;
}

.client-item{
    display:flex;
    align-items:center;
    gap:10px;

    padding:11px 14px;
    cursor:pointer;

    border-bottom:1px solid #f0f2f6;
    transition:.15s;
}

.client-item:last-child{
    border-bottom:none;
}

.client-item:hover{
    background:#fde9ea;
}

.client-item b{
    min-width:40px;
    color:#667085;
    font-family:'IBM Plex Mono';
    font-size:12px;
}

.client-item span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.client-drop.show{display:block}
.cd-item{
  padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--surface3);
  font-size:13px;display:flex;align-items:center;gap:8px;
}
.cd-item:last-child{border-bottom:none}
.cd-item:hover{background:var(--redsoft)}
.cd-id{font-family:'IBM Plex Mono';font-size:11px;color:var(--muted);flex:none}
.client-wrap{
    position:relative;
    min-width:220px;
    flex:1;
}

.client-drop{
    position:absolute;
    top:100%;
    left:0;
    right:0;

    margin-top:6px;

    background:#fff;
    border:1px solid #d3d8e0;
    border-radius:12px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08),
        0 2px 8px rgba(0,0,0,.05);

    z-index:9999;

    display:none;
    overflow:hidden;
    max-height:250px;
    overflow-y:auto;
}

.client-item{
    display:flex;
    align-items:center;
    gap:10px;

    padding:11px 14px;
    cursor:pointer;

    border-bottom:1px solid #f0f2f6;
    transition:.15s;
}

.client-item:last-child{
    border-bottom:none;
}

.client-item:hover{
    background:#fde9ea;
}

.client-item b{
    min-width:40px;
    color:#667085;
    font-family:'IBM Plex Mono';
    font-size:12px;
}

.client-item span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
/* ── DOCUMENT TYPE BADGES ──────────────────────────────────── */
.doc-badge{
  display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.4px;font-family:'IBM Plex Mono';
}
.doc-badge.fat{background:var(--redsoft);color:var(--red2)}
.doc-badge.pro{background:var(--bluesoft);color:var(--blue)}
.doc-badge.ofe{background:var(--ambersoft);color:var(--amber)}
.doc-badge.fis{background:var(--greensoft);color:var(--green)}
.doc-badge.dra{background:var(--surface3);color:var(--muted)}

/* ── ACTION DROPDOWN (3-dot menu) ──────────────────────────── */
.act-wrap{position:relative}
.act-drop{
  position:fixed;background:var(--surface);
  border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow2);
  z-index:400;display:none;min-width:188px;overflow:hidden;padding:4px 0;
}
.act-drop.show{display:block;animation:fade .12s}
.act-item{
  display:flex;align-items:center;gap:10px;padding:9px 15px;
  font-size:13px;cursor:pointer;color:var(--text);white-space:nowrap;
}
.act-item:hover{background:var(--surface2)}
.act-item svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;flex:none}
.act-item:hover svg{stroke:var(--text)}
.act-item.danger{color:var(--red2)}
.act-item.danger svg{stroke:var(--red2)}
.act-sep{height:1px;background:var(--line);margin:3px 0}

/* ── PAGINATION ────────────────────────────────────────────── */
.pg-bar{
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding:13px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);
}
.pg-bar button{
  background:var(--surface2);border:1px solid var(--line2);border-radius:8px;
  padding:6px 16px;font-size:12.5px;font-weight:500;color:var(--text);cursor:pointer;
}
.pg-bar button:hover{background:var(--surface3)}

/* ── MODALS ────────────────────────────────────────────────── */
@keyframes fade{from{opacity:0}to{opacity:1}}
.overlay{
  position:fixed;inset:0;background:rgba(20,24,32,.45);backdrop-filter:blur(2px);
  z-index:200;display:none;align-items:center;justify-content:center;padding:20px;
}
.overlay.show{display:flex;animation:fade .18s}
.modal{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  width:480px;max-width:95vw;max-height:90vh;overflow:auto;box-shadow:var(--shadow2);
}
.modal .mh{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.modal .mh h3{font-size:18px}
.modal .mh .x{cursor:pointer;color:var(--muted);font-size:24px;line-height:1}
.modal .mh .x:hover{color:var(--text)}
.modal .mb{padding:22px}
.modal .mf{
  padding:16px 22px;border-top:1px solid var(--line);
  display:flex;justify-content:flex-end;gap:10px;
  position:sticky;bottom:0;background:var(--surface);
}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}

/* ── TOAST ─────────────────────────────────────────────────── */
#toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(120px);
  background:var(--text);color:#fff;padding:13px 20px;border-radius:12px;
  font-weight:500;z-index:400;box-shadow:var(--shadow2);transition:.3s;
  display:flex;align-items:center;gap:10px;
}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast .dot{width:8px;height:8px;border-radius:50%;background:#4ade80}

/* ── INVOICE BUILDER: FORMCARD ─────────────────────────────── */
.formcard{
  background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);
}


/* ── INVOICE BUILDER: TABS ─────────────────────────────────── */
.ftab-bar{
  display:flex;border-bottom:1px solid var(--line);
  padding:0 20px;background:var(--surface2);
}
.ftab-btn{
  padding:13px 20px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  display:flex;align-items:center;gap:8px;transition:.13s;user-select:none;white-space:nowrap;
}
.ftab-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.ftab-btn:hover{color:var(--text)}
.ftab-btn.active{color:var(--red2);border-bottom-color:var(--red);font-weight:600}
.ftab-cnt{
  font-family:'IBM Plex Mono';font-size:10.5px;background:var(--red);color:#fff;
  padding:1px 7px;border-radius:20px;min-width:20px;text-align:center;display:none;
}
.ftab-cnt.has{display:inline-block}
.ftab-panel{display:none}
.ftab-panel.show{display:block}

/* ── INVOICE BUILDER: SECTIONS ─────────────────────────────── */
.fc-section{padding:20px 24px}
.fc-sec-title{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--muted2);font-weight:700;margin-bottom:14px;
}
.fc-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fc-divider{height:1px;background:var(--line)}
.fc-sub-lbl{
  font-size:10px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--muted2);font-weight:700;margin:14px 0 8px;
}
.fc-sub-lbl:first-child{margin-top:0}

/* ── TOP ACTION BAR ────────────────────────────────────────── */
.page-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.page-actions .sep{width:1px;height:24px;background:var(--line2);margin:0 4px}

/* ── LINE ITEMS TABLE ──────────────────────────────────────── */
table.lines{width:100%;border-collapse:collapse}
table.lines th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);font-weight:700;padding:12px 8px;
}
table.lines th.r{text-align:right}
table.lines td{padding:7px 8px;border-top:1px solid var(--surface3);vertical-align:middle}
table.lines .colNo{width:34px;color:var(--muted);font-family:'IBM Plex Mono';font-size:12px}
table.lines .colQty{width:96px}
table.lines .colPrice{width:140px}
table.lines .colSum{width:140px;text-align:right;font-family:'IBM Plex Mono'}
table.lines .colX{width:40px;text-align:center}
table.lines input.inp{padding:9px 11px}
table.lines input.qty{text-align:center}
.stockhint{font-size:11px;color:var(--muted);margin-top:4px;padding-left:2px}
.stockhint.bad{color:var(--red2);font-weight:600}

/* ── ARTICLE SEARCH / ADD-ROW ──────────────────────────────── */
.art-search-wrap{position:relative;margin:14px 0 6px;max-width:560px}
.art-search-wrap .as-ico{
  position:absolute;left:13px;top:13px;
  width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none;
}
.art-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--surface);border:1px solid var(--line2);border-radius:12px;
  box-shadow:var(--shadow2);z-index:30;overflow:hidden;display:none;
  max-height:300px;overflow-y:auto;
}
.art-results.show{display:block}
.art-results.open-up{top:auto;bottom:calc(100% + 6px)}
.art-search-wrap input.inp{padding-left:40px}
.art-result{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--surface3);
}
.art-result:last-child{border-bottom:none}
.art-result:hover{background:var(--redsoft)}
.art-result .ar-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.art-result .ar-main b{font-size:13.5px}
.art-result .ar-code{font-size:11px;color:var(--muted)}
.art-result .ar-side{display:flex;align-items:center;gap:12px;flex:none}
.art-result .ar-price{font-size:13.5px;font-weight:600}
/* add-row bar sitting below the lines table */
.art-add-bar{border-top:1px dashed var(--line2);padding:8px 0 0;position:relative}
.art-add-bar .art-search-wrap{margin:0;max-width:100%}
.art-add-bar .as-ico{left:10px;top:13px}

/* ── SIDEBAR BIG TOTAL BLOCK ───────────────────────────────── */
.si-big{padding:14px 18px;text-align:center}
.si-big .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;margin-bottom:6px}
.si-big .val{font-family:'Oswald';font-size:26px;font-weight:700;color:var(--text)}
.si-big .sub{font-family:'IBM Plex Mono';font-size:11.5px;color:var(--muted);margin-top:3px}

/* ── KLIENTET PAGE ──────────────────────────────────────────── */
.cl-name{font-weight:600;font-size:13.5px}
.cl-city{font-size:11.5px;color:var(--muted);margin-top:2px}
.cl-nipt{font-family:'IBM Plex Mono';font-size:12px;color:var(--muted)}
.bal-ok {font-family:'IBM Plex Mono';font-size:12.5px;font-weight:600;color:var(--green)}
.bal-due{font-family:'IBM Plex Mono';font-size:12.5px;font-weight:600;color:var(--red2)}
.inv-cnt{font-family:'IBM Plex Mono';font-size:12.5px;color:var(--muted)}
/* client type badges */
.type-fizik{background:var(--bluesoft);color:var(--blue);padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700;font-family:'IBM Plex Mono';white-space:nowrap}
.type-jur  {background:var(--ambersoft);color:var(--amber);padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700;font-family:'IBM Plex Mono';white-space:nowrap}
/* discount badge */
.disc-badge{background:var(--greensoft);color:var(--green);padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700;font-family:'IBM Plex Mono';white-space:nowrap}
/* type selector in modal */
.type-sel-wrap{display:flex;gap:10px;margin-bottom:22px}
.type-sel{flex:1;padding:14px 10px;border:2px solid var(--line2);border-radius:12px;cursor:pointer;text-align:center;transition:.13s;background:var(--surface2);user-select:none}
.type-sel:hover{border-color:var(--muted2);background:var(--surface)}
.type-sel.active{border-color:var(--red);background:var(--redsoft)}
.type-sel svg{margin:0 auto 7px;display:block;stroke:var(--muted);fill:none;stroke-width:1.8;width:24px;height:24px}
.type-sel.active svg{stroke:var(--red2)}
.ts-lbl{font-weight:700;font-size:13.5px;color:var(--text);line-height:1}
.ts-sub{font-size:11px;color:var(--muted);margin-top:4px}
.type-sel.active .ts-lbl{color:var(--red2)}
.type-sel.active .ts-sub{color:var(--red)}
.tab-nav {
    display:flex; gap:3px;
    background:var(--surface2); border:1px solid var(--border);
    padding:4px; border-radius:10px;
    margin-bottom:20px; width:fit-content;
}
.tab-btn {
    background:none; border:none;
    padding:6px 18px; border-radius:7px;
    font-size:12.5px; font-weight:500; color:var(--muted);
    cursor:pointer; transition:all .15s; white-space:nowrap;
}
.tab-btn:hover { color:var(--text); background:var(--surface); }
.tab-btn.active {
    background:var(--surface); color:var(--text); font-weight:600;
    box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.tab-panel { display:none; }
.tab-panel.active { display:block; }
/* ── ARTIKUJT PAGE ──────────────────────────────────────────── */
.art-thumb{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1px solid var(--line);display:block}
.art-thumb-ph{width:36px;height:36px;border-radius:8px;background:var(--surface2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none}
.art-thumb-ph img{width:20px;height:20px;opacity:.35}
.art-name{font-weight:600;font-size:13.5px}
.art-cat{font-size:11.5px;color:var(--muted);margin-top:2px}
.art-code{font-family:'IBM Plex Mono';font-size:12px;color:var(--muted)}
.price-mkd{font-family:'IBM Plex Mono';font-size:13px;font-weight:600}
.unit-lbl{font-size:12px;color:var(--muted);font-family:'IBM Plex Mono'}
.stock-num{font-family:'IBM Plex Mono';font-size:13px;font-weight:600;margin-right:6px}


.ui-datepicker{font-family:'IBM Plex Sans',sans-serif;font-size:13px;border:1px solid var(--line2);border-radius:12px;box-shadow:0 18px 50px rgba(16,24,40,.16);padding:10px;background:var(--surface)}
.ui-datepicker-header{background:none;border:none;border-radius:0;padding:4px 0 8px}
.ui-datepicker-title{font-family:'Oswald';font-size:15px;font-weight:600}
.ui-datepicker td a,.ui-datepicker td span{border-radius:7px;text-align:center}
.ui-datepicker td .ui-state-active{background:var(--red);border-color:var(--red);color:#fff}
.ui-datepicker td .ui-state-highlight{background:var(--redsoft);border-color:var(--redsoft);color:var(--red2)}
.ui-widget-content{color:var(--text)}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{border-radius:8px;background:var(--surface2);border:1px solid var(--line);top:6px}
.ui-datepicker .ui-datepicker-prev:hover,.ui-datepicker .ui-datepicker-next:hover{background:var(--surface3)}

/* ── DASHBOARD / PANELI ─────────────────────────────────────── */
.kpi-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:16px; margin-bottom:22px;
}
.kpi-card {
    background:var(--surface); border:1px solid var(--line);
    border-radius:14px; padding:20px 22px; box-shadow:var(--shadow);
    display:flex; flex-direction:column; gap:10px;
}
.kpi-card .kpi-head { display:flex; align-items:center; justify-content:space-between; }
.kpi-card .kpi-ico {
    width:38px; height:38px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
}
.kpi-card .kpi-ico svg { width:19px; height:19px; fill:none; stroke-width:2; }
.kpi-card .kpi-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; }
.kpi-card .kpi-val { font-family:'Oswald'; font-size:30px; font-weight:700; line-height:1; }
.kpi-card .kpi-sub { font-size:12px; color:var(--muted); }

.dash-row { display:grid; grid-template-columns:1fr 340px; gap:20px; }
.dash-card {
    background:var(--surface); border:1px solid var(--line);
    border-radius:14px; box-shadow:var(--shadow); overflow:hidden;
}
.dash-card-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px; border-bottom:1px solid var(--line); background:var(--surface2);
}
.dash-card-head h3 { font-family:'Oswald'; font-size:15px; font-weight:600; }
.dash-card-head a  { font-size:12px; color:var(--muted); }
.dash-card-head a:hover { color:var(--red2); }

.stock-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 20px; border-bottom:1px solid var(--surface3);
}
.stock-row:last-child { border-bottom:none; }
.stock-row .s-name { font-size:13px; font-weight:600; }
.stock-row .s-code { font-size:11px; color:var(--muted); font-family:'IBM Plex Mono'; }

@media(max-width:1100px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:960px) { .dash-row{ grid-template-columns:1fr; } }


/* ── SHPENZIMET PAGE ────────────────────────────────────────── */
.doc-upload {
    display:flex; align-items:center; gap:10px;
    border:1.5px dashed var(--border); border-radius:10px;
    padding:11px 14px; cursor:pointer; font-size:12.5px;
    color:var(--muted); transition:.15s; background:var(--surface2);
}
.doc-upload:hover { border-color:var(--accent); color:var(--text); background:var(--surface); }
.kat-row {
    display:flex; align-items:center; gap:10px;
    padding:9px 6px; border-bottom:1px solid var(--surface3);
}
.kat-row:last-child { border-bottom:none; }
.kat-dot {
    width:12px; height:12px; border-radius:50%; flex:none;
}
.kat-name { font-size:13px; font-weight:500; flex:1; }
.sh-upl-item {
    display:flex; align-items:center; gap:8px;
    padding:6px 10px; border-radius:8px; margin-bottom:4px;
    background:var(--surface2); border:1px solid var(--border);
    font-size:12px;
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:960px){
  body.app{
    grid-template-columns:1fr;grid-template-rows:64px 1fr;
    grid-template-areas:"top" "main";
  }
  .menu-toggle{display:flex}
  .sidebar{
    display:flex;position:fixed;top:0;left:0;bottom:0;z-index:999;
    width:250px;max-width:82vw;box-shadow:0 0 30px rgba(0,0,0,.25);
    transform:translateX(-100%);transition:transform .22s ease;
  }
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .nav-backdrop{display:block}
  .pg-layout{flex-direction:column}
  .pg-sidebar{width:100%;position:static}
  .fc-grid-4{grid-template-columns:1fr 1fr}
}
@media(max-width:580px){
  .fc-grid-4{grid-template-columns:1fr}
  .page-actions{gap:4px}
}

/* ── AIR QUALITY ──────────────────────────────────────────── */

:root {
    --c-good: #0fa854;
    --c-mod:  #e7c208;
    --c-sens: #f97316;
    --c-bad:  #d81c22;
    --c-very: #1e1e2e;
    --c-off:  #98a2b3;
}

header { background: #075985 !important; }

/* ── Header4 (sticky city/device summary) ─────────────────── */
.header4 {
    background: linear-gradient(160deg, #075985 0%, #0369a1 55%, #0284c7 100%);
    padding: 12px 20px 20px; color: #fff; text-align: center;
    position: sticky; top: 40px; z-index: 9;
}
.h4-top { margin-bottom: 8px; }
.h4-lbl { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); letter-spacing: .2px; line-height: 1.4; }

/* Big value row (air.aspx) */
.h4-bigrow  { display: inline-flex; align-items: stretch; gap: 6px; }
.h4-bigval  { font-family: 'Oswald', sans-serif; font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -2px; color: #fff; border-radius: 11px; padding: 2px 10px; }
.h4-bigunit { display: flex; flex-direction: column; justify-content: space-between; padding: 13px 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.45); }
.aqi-good .h4-bigval { background: var(--c-good); }
.aqi-mod  .h4-bigval { background: var(--c-mod); }
.aqi-sens .h4-bigval { background: var(--c-sens); }
.aqi-bad  .h4-bigval { background: var(--c-bad); }
.aqi-very .h4-bigval { background: var(--c-very); }
.aqi-off  .h4-bigval { background: var(--c-off); }

/* Status dot + label */
.h4-status { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.88); white-space: nowrap; }
.h4-sdot   { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.aqi-good .h4-sdot { background: var(--c-good); }
.aqi-mod  .h4-sdot { background: var(--c-mod); }
.aqi-sens .h4-sdot { background: var(--c-sens); }
.aqi-bad  .h4-sdot { background: var(--c-bad); }
.aqi-very .h4-sdot { background: #8080a0; }
.aqi-off  .h4-sdot { background: rgba(255,255,255,.35); }

/* Stats pill */
.h4-stats   { display: inline-flex; align-items: center; background: rgba(0,0,0,.2); border-radius: 24px; overflow: hidden; }
.h4-stat    { padding: 6px 12px; text-align: center; }
.h4-stat + .h4-stat { border-left: 1px solid rgba(255,255,255,.1); }
.h4-stat-v  { font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 700; color: #fff; line-height: 1; }
.h4-stat-l  { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: rgba(255,255,255,.42); margin-top: 3px; }

/* Icon helpers */
.mi    { width: 12px; height: 12px; vertical-align: middle; margin-right: 3px; }
.h4-si { width: 14px; height: 14px; vertical-align: middle; opacity: .7; }

/* ── Section label ────────────────────────────────────────── */
.section-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #898989; padding: 17px 14px 10px; }

/* ── air.aspx — Station grid & cards ─────────────────────── */
.air-grid { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 14px calc(36px + env(safe-area-inset-bottom, 0px)); }
.air-card { background: #fff; border-radius: 16px; border-left: 5px solid #ccc; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 8px 22px rgba(0,0,0,.09); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .11s, box-shadow .11s; }
.air-card:active { transform: scale(.975); box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 10px rgba(0,0,0,.07); }
.aqi-good.air-card { border-left-color: var(--c-good); }
.aqi-mod.air-card  { border-left-color: var(--c-mod); }
.aqi-sens.air-card { border-left-color: var(--c-sens); }
.aqi-bad.air-card  { border-left-color: var(--c-bad); }
.aqi-very.air-card { border-left-color: var(--c-very); }
.aqi-off.air-card  { border-left-color: var(--c-off); opacity: .72; }
.ac-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 13px 6px 12px; }
.ac-name { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 700; line-height: 1; }
.ac-dots-row { display: flex; gap: 5px; align-items: center; }
.hdot { width: 9px; height: 9px; border-radius: 50%; }
.ac-body { display: flex; align-items: center; gap: 10px; padding: 2px 13px 10px 12px; }
.ac-val { font-family: 'Oswald', sans-serif; font-size: 42px; font-weight: 700; line-height: 1; flex: none; }
.ac-val.good { color: var(--c-good); }
.ac-val.mod  { color: var(--c-mod); }
.ac-val.sens { color: var(--c-sens); }
.ac-val.bad  { color: var(--c-bad); }
.ac-val.very { color: var(--c-very); }
.ac-val.off  { color: var(--c-off); }
.ac-mid  { flex: 1; min-width: 0; }
.ac-unit { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.ac-desc { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.ac-meta { display: flex; align-items: center; gap: 7px; padding: 8px 13px 8px 12px; border-top: 1px solid var(--surface3); font-size: 11px; font-family: 'IBM Plex Mono', monospace; color: var(--muted); overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ac-meta::-webkit-scrollbar { display: none; }
.ac-sep   { color: #dddddd; }
.ac-arrow { margin-left: auto; color: var(--muted2); font-size: 13px; flex: none; }
.mdot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; vertical-align: middle; margin-right: 3px; flex: none; }

/* ── air.aspx — Info modal ────────────────────────────────── */
#modalInfo { display: none; position: fixed; inset: 0; background: rgba(8,12,20,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 999; align-items: center; justify-content: center; padding: 24px 20px; }
#modalInfo.show { display: flex; }
.modal-dialog { background: #fff; border-radius: 20px; width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.md-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 1; }
.md-head h3 { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 700; }
.md-close { width: 28px; height: 28px; border-radius: 50%; background: var(--surface2); border: none; font-size: 17px; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.md-close:active { background: var(--surface3); }
.md-body { padding: 20px; }
.info-section { margin-bottom: 22px; }
.info-section:last-child { margin-bottom: 0; }
.info-section h4 { font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.info-section p  { font-size: 13px; color: var(--muted); line-height: 1.65; }
.aq-dot-scale { display: flex; gap: 8px; align-items: flex-start; }
.aq-dot-item  { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; }
.aq-dot-item .hdot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.aq-dot-label { font-size: 8px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; text-align: center; line-height: 1.3; }
.aq-dot-label small { font-size: 7.5px; color: var(--muted); font-weight: 400; display: block; }

/* ── air_details.aspx — Date nav bar ─────────────────────── */
.date-bar  { background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 9px 14px; gap: 8px; }
.dnav-btn  { width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--surface2); color: var(--text); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.dnav-btn:active   { background: var(--surface3); }
.dnav-btn:disabled { opacity: .3; pointer-events: none; }
.dnav-date { flex: 1; height: 34px; border: 1.5px solid var(--line2); border-radius: 10px; padding: 0 12px; font-size: 14px; font-weight: 700; color: var(--text); background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dnav-date:active { background: var(--surface2); }

/* ── air_details.aspx — Reading rows ─────────────────────── */
.rd-group { margin: 0 14px calc(36px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.08); }
.rd-row   { display: flex; align-items: center; padding: 9px 12px 9px 11px; gap: 10px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.rd-row:last-child { border-bottom: none; }
.rd-time  { flex: none; background: var(--surface2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; color: var(--text); text-align: center; letter-spacing: -.2px; line-height: 1; }
.rd-metric     { flex: 1; min-width: 0; text-align: center; }
.rd-metric-val { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rd-metric-lbl { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted2); margin-top: 3px; }
.rd-env   { flex: none; text-align: right; margin-left: auto; font-size: 10.5px; font-family: 'IBM Plex Mono', monospace; color: var(--muted2); line-height: 1.7; }
.rd-empty { text-align: center; padding: 52px 20px 60px; color: var(--muted); font-size: 14px; line-height: 1.5; }