:root{
  --teal-900:#123B37; --teal-700:#1B5F56; --teal-600:#227667; --teal-100:#E4EFE9;
  --marigold:#F2A65A; --marigold-dark:#D98A3D;
  --coral:#E1685C; --coral-100:#FBE7E4;
  --cream:#FBF7EF; --sand:#F1E7D6; --sand-line:#E3D6BE;
  --ink:#26302E; --ink-soft:#5C6864;
  --sage:#7FA88C; --sage-100:#E8F1EA;
  --radius:14px;
  --shadow: 0 2px 10px rgba(18,59,55,0.08), 0 1px 2px rgba(18,59,55,0.06);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Work Sans',sans-serif;font-size:14.5px;line-height:1.5;}
h1,h2,h3,.display{font-family:'Fredoka',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
button{font-family:inherit;cursor:pointer;}
a{color:var(--teal-700);}
:focus-visible{outline:2.5px solid var(--marigold-dark);outline-offset:2px;}

#shell{display:flex;min-height:100vh;}
#sidebar{
  width:230px;flex-shrink:0;background:linear-gradient(180deg,var(--teal-900),var(--teal-700));
  color:#F2F7F5;padding:22px 14px;display:flex;flex-direction:column;gap:4px;
}
#brand{display:flex;align-items:center;gap:10px;padding:2px 10px 20px 10px;}
#brand .mark{width:34px;height:34px;border-radius:10px;background:var(--marigold);display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:700;color:var(--teal-900);font-size:17px;flex-shrink:0;}
#brand .name{font-family:'Fredoka';font-weight:600;font-size:16.5px;line-height:1.15;}
#brand .name span{display:block;font-family:'Work Sans';font-weight:400;font-size:11px;color:#BFD8CE;}
.tab-btn{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:none;
  background:transparent;color:#D9EBE4;font-size:14px;font-weight:500;text-align:left;width:100%;
  transition:background .15s;
}
.tab-btn:hover{background:rgba(255,255,255,0.08);}
.tab-btn.active{background:var(--marigold);color:var(--teal-900);font-weight:600;}
.tab-btn .ic{font-size:16px;width:20px;text-align:center;}
#sidefoot{margin-top:auto;padding:10px;font-size:11px;color:#9FC0B5;}
#userbox{padding:10px;font-size:12px;color:#D9EBE4;border-top:1px solid rgba(255,255,255,0.12);margin-top:6px;}
#userbox .who{font-weight:600;color:#fff;}
#userbox button{background:none;border:none;color:#BFD8CE;text-decoration:underline;padding:0;font-size:11.5px;margin-top:3px;}

#main{flex:1;padding:26px 34px 60px;max-width:1180px;}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.pagehead h1{font-size:24px;margin:0 0 4px;color:var(--teal-900);}
.pagehead p{margin:0;color:var(--ink-soft);font-size:13.5px;}

.btn{border-radius:10px;padding:9px 16px;font-size:13.5px;font-weight:600;border:1.5px solid transparent;display:inline-flex;align-items:center;gap:7px;}
.btn-primary{background:var(--marigold);color:var(--teal-900);}
.btn-primary:hover{background:var(--marigold-dark);}
.btn-outline{background:#fff;border-color:var(--sand-line);color:var(--teal-900);}
.btn-outline:hover{border-color:var(--teal-600);}
.btn-ghost{background:transparent;color:var(--teal-700);padding:6px 8px;font-weight:600;font-size:13px;}
.btn-danger{background:#fff;border-color:var(--coral);color:var(--coral);}
.btn-danger:hover{background:var(--coral-100);}
.btn-sm{padding:6px 11px;font-size:12.5px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

.card{background:#fff;border:1px solid var(--sand-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;}
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:22px;}
.stat{background:#fff;border:1px solid var(--sand-line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);}
.stat .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:600;margin-bottom:6px;}
.stat .val{font-family:'Fredoka';font-size:24px;color:var(--teal-900);}
.stat .sub{font-size:12px;color:var(--ink-soft);margin-top:3px;}
.stat.warn .val{color:var(--coral);}

table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:8px 12px;border-bottom:2px solid var(--sand-line);font-weight:600;}
td{padding:11px 12px;border-bottom:1px solid var(--sand);font-size:13.5px;vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--teal-100);}
.tbl-wrap{overflow-x:auto;border-radius:var(--radius);}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:600;}
.pill-active{background:var(--sage-100);color:#3E6B4E;}
.pill-wait{background:#FBF2DC;color:#9A6A0E;}
.pill-left{background:#EFEAE0;color:#8A8377;}
.pill-draft{background:#EFEAE0;color:#8A8377;}
.pill-sent{background:#E4EEFB;color:#2C5FA3;}
.pill-paid{background:var(--sage-100);color:#3E6B4E;}
.pill-overdue{background:var(--coral-100);color:#B3392E;}

.empty{padding:40px 20px;text-align:center;color:var(--ink-soft);}
.empty .ic{font-size:30px;margin-bottom:8px;}
.empty h3{margin:0 0 6px;color:var(--teal-900);font-size:16px;}
.empty p{margin:0 0 16px;font-size:13.5px;}

.modal-bg{position:fixed;inset:0;background:rgba(18,40,36,0.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;z-index:50;}
.modal{background:#fff;border-radius:16px;max-width:560px;width:100%;padding:26px 26px 22px;box-shadow:0 12px 40px rgba(0,0,0,0.2);}
.modal h2{margin:0 0 3px;font-size:19px;color:var(--teal-900);}
.modal .sub{color:var(--ink-soft);font-size:12.5px;margin-bottom:18px;}
.modal-close{float:right;background:none;border:none;font-size:20px;color:var(--ink-soft);line-height:1;}
.frow{display:flex;gap:12px;margin-bottom:13px;}
.frow > div{flex:1;min-width:0;}
label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:4px;}
input[type=text],input[type=number],input[type=email],input[type=tel],input[type=date],input[type=password],input[type=file],input[type=color],select,textarea{
  width:100%;padding:9px 11px;border:1.5px solid var(--sand-line);border-radius:9px;font-size:13.5px;font-family:inherit;background:#FFFDFA;color:var(--ink);
}
textarea{resize:vertical;min-height:56px;}
input:focus,select:focus,textarea:focus{border-color:var(--teal-600);outline:none;}
.helptext{font-size:11.5px;color:var(--ink-soft);margin-top:4px;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--sand);}
.checkline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);}
.checkline input{width:auto;}

.tabbar{display:flex;gap:6px;margin-bottom:20px;border-bottom:2px solid var(--sand-line);flex-wrap:wrap;}
.subtab{padding:8px 4px;border:none;background:none;font-weight:600;font-size:13.5px;color:var(--ink-soft);border-bottom:3px solid transparent;margin-bottom:-2px;}
.subtab.active{color:var(--teal-900);border-bottom-color:var(--marigold);}

.line-items{margin:14px 0;}
.li-row{display:grid;grid-template-columns:1fr 90px 90px 30px;gap:8px;margin-bottom:8px;align-items:center;}
.li-row-vat{display:grid;grid-template-columns:1fr 130px 90px 90px 30px;gap:8px;margin-bottom:8px;align-items:center;}
.li-total{text-align:right;font-family:'IBM Plex Mono';font-size:13px;padding:6px 4px;}
.rm-btn{background:none;border:none;color:var(--coral);font-size:16px;padding:4px;}
.totals-box{background:var(--teal-100);border-radius:10px;padding:12px 16px;margin-top:6px;}
.totals-box .trow{display:flex;justify-content:space-between;font-size:13px;padding:2px 0;}
.totals-box .trow.grand{font-weight:700;font-size:15.5px;color:var(--teal-900);border-top:1px solid var(--sand-line);margin-top:6px;padding-top:8px;}

.blocks-wrap{display:flex;flex-wrap:wrap;gap:5px;max-width:420px;}
.block{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:'Fredoka';}
.block.filled{background:var(--teal-600);color:#fff;}
.block.empty{border:1.5px dashed var(--sand-line);color:var(--sand-line);}

.action-row{display:flex;gap:6px;flex-wrap:wrap;}
.banner{background:#fff;border:1.5px solid var(--marigold);border-radius:12px;padding:14px 18px;margin-bottom:20px;display:flex;gap:12px;align-items:flex-start;}
.banner .ic{font-size:18px;}
.banner b{color:var(--teal-900);}
.banner p{margin:3px 0 0;font-size:12.5px;color:var(--ink-soft);}

.invoice-detail{background:#fff;border:1px solid var(--sand-line);border-radius:14px;padding:22px;}
.idet-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;}
.idet-items td{font-size:13px;}

.auth-card{max-width:400px;margin:9vh auto;background:#fff;border:1px solid var(--sand-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 30px;}
.auth-card h1{color:var(--teal-900);font-size:22px;margin:0 0 4px;}

#toast{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:0.5rem;z-index:100;}
.toast-item{padding:0.7rem 1rem;border-radius:8px;color:#fff;font-size:0.9rem;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.toast-ok{background:var(--teal-600);}
.toast-error{background:var(--coral);}

@media(max-width:840px){
  #shell{flex-direction:column;}
  #sidebar{width:100%;flex-direction:row;align-items:center;padding:12px;overflow-x:auto;gap:6px;}
  #brand{display:none;}
  #userbox{display:none;}
  .tab-btn{white-space:nowrap;padding:8px 12px;}
  #sidefoot{display:none;}
  #main{padding:18px 14px 50px;}
  .frow{flex-direction:column;gap:8px;}
  .li-row{grid-template-columns:1fr 70px 70px 26px;}
  .li-row-vat{grid-template-columns:1fr 1fr;}
}