/* ============================================================
   Infy Press Print Shop Manager — Design System
   Signature: printer's registration marks (crosshair-in-circle)
   used as corner ticks on panels + the CMYK dot lockup in the logo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* --- Palette --- */
  --paper:        #EEF1F4;
  --paper-raised: #FFFFFF;
  --ink:          #101B2D;
  --ink-2:        #16253D;
  --ink-soft:     #4C5A70;
  --line:         #DBE1E8;
  --line-soft:    #E9ECF1;

  --teal:         #3E9C8F;
  --teal-dark:    #2C7A70;
  --cyan:         #00AEEF;
  --magenta:      #E31C79;
  --yellow:       #F6B400;
  --key:          #16171A;

  --ok:           #2C8A5B;
  --ok-bg:        #E4F4EB;
  --warn:         #B9791A;
  --warn-bg:      #FCEFD9;
  --danger:       #C43B3B;
  --danger-bg:    #FBE7E7;
  --info:         #2170B8;
  --info-bg:      #E4EFFA;

  /* --- Type --- */
  --font-display: 'Sora', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* --- Layout --- */
  --sidebar-w: 232px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(16,27,45,0.06);
  --shadow-md: 0 6px 20px rgba(16,27,45,0.10);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0 0 4px;letter-spacing:-0.01em;}
a{color:inherit;}
button{font-family:var(--font-body);}
::selection{background:var(--teal);color:#fff;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
}

/* ============ Registration mark signature ============ */
.regmark{
  display:inline-block; width:14px; height:14px; position:relative; flex-shrink:0;
}
.regmark::before,.regmark::after{
  content:""; position:absolute; background:currentColor;
}
.regmark::before{ top:6px; left:0; width:14px; height:1.6px; }
.regmark::after{ left:6px; top:0; width:1.6px; height:14px; }
.regmark-ring{
  position:absolute; inset:1px; border:1.6px solid currentColor; border-radius:50%;
}

.brand{
  display:flex; align-items:center; gap:10px; padding:20px 18px 16px;
  font-family:var(--font-display); font-weight:700; font-size:16px; color:#fff;
  letter-spacing:0.01em;
}
.brand .dots{display:flex; gap:3px;}
.brand .dots span{width:6px;height:6px;border-radius:50%;display:inline-block;}
.brand .dots .c{background:var(--cyan);}
.brand .dots .m{background:var(--magenta);}
.brand .dots .y{background:var(--yellow);}
.brand .dots .k{background:#fff;}
.brand small{display:block;font-family:var(--font-body);font-weight:400;font-size:10.5px;color:#9FB0C6;letter-spacing:0.06em;text-transform:uppercase;margin-top:2px;}
.brand-text{display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; line-height:1.2;}
.brand-logo{
  width:190px; height:58px; display:flex; align-items:center; justify-content:flex-start;
}
.brand-logo img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;
}

/* ============ App shell ============ */
.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--ink);
  position:fixed; top:0; left:0; bottom:0; display:flex; flex-direction:column;
  z-index:40;
}
.sidebar nav{flex:1; padding:8px 10px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.18) transparent;}
.sidebar nav::-webkit-scrollbar{width:5px;}
.sidebar nav::-webkit-scrollbar-track{background:transparent;}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18); border-radius:10px;}
.sidebar nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.32);}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:8px 12px; margin:2px 0;
  border-radius:var(--radius-sm); color:#B7C3D6; text-decoration:none;
  font-size:13.5px; font-weight:500; cursor:pointer; transition:background .15s, color .15s;
}
.nav-item:hover{background:rgba(255,255,255,0.06); color:#fff;}
.nav-item.active{background:var(--teal); color:#fff;}
.nav-item svg{width:17px; height:17px; flex-shrink:0;}
.nav-section-label{
  font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:#5A6C86;
  padding:14px 12px 6px; font-weight:600;
}
.sidebar-footer{
  padding:14px 16px; border-top:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; gap:10px;
}
.avatar{
  width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;
}
.sidebar-footer .who{flex:1; min-width:0;}
.sidebar-footer .who .name{color:#fff; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sidebar-footer .who .role{color:#8FA0B8; font-size:11px; text-transform:capitalize;}
.logout-btn{
  background:none; border:none; color:#8FA0B8; cursor:pointer; padding:6px; border-radius:6px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.logout-btn svg{width:17px; height:17px;}
.logout-btn:hover{background:rgba(255,255,255,0.08); color:#fff;}

.main{
  margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column;
}

.topbar{
  height:60px; background:var(--paper-raised); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px;
  position:sticky; top:0; z-index:30;
}
.topbar h1{font-size:18px;}
.topbar .sub{font-size:12px;color:var(--ink-soft);}
.topbar-actions{display:flex; gap:10px; align-items:center;}

/* ============ Global search (topbar) ============ */
.global-search-wrap{position:relative;}
.global-search-box{
  display:flex; align-items:center; gap:8px; width:340px; padding:5px 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper);
  color:var(--ink-soft); transition:border-color .15s, background .15s;
}
.global-search-box:focus-within{border-color:var(--teal); background:#fff;}
.global-search-box svg{width:15px; height:15px; flex-shrink:0;}
.global-search-box input{border:none; background:none; outline:none; font-size:12.5px; color:var(--ink); width:100%; padding:2px 0;}
.global-search-box input::placeholder{color:var(--ink-soft);}
.global-search-results{
  position:absolute; top:calc(100% + 6px); left:0; width:320px; max-height:420px; overflow-y:auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md);
  z-index:60; padding:6px;
}
.global-search-group{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft);
  padding:8px 10px 4px;
}
.global-search-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:var(--radius-sm); text-decoration:none; color:var(--ink);
}
.global-search-item:hover{background:var(--paper);}
.global-search-item .gsi-label{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.global-search-item .gsi-sub{font-size:11.5px; color:var(--ink-soft); white-space:nowrap; flex-shrink:0;}
.global-search-empty{padding:16px 10px; text-align:center; font-size:12.5px; color:var(--ink-soft);}
@media (max-width:900px){ .global-search-box{width:220px;} .global-search-results{width:260px;} }
.today-chip{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line); padding:6px 10px; border-radius:20px;
}

.content{padding:24px; flex:1;}

.app-footer{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:14px 24px; border-top:1px solid var(--line); background:var(--paper-raised);
}
.app-footer-left{font-size:11.5px; color:var(--ink-soft);}
.app-footer-right{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-soft); white-space:nowrap;}
.app-footer-right a{display:inline-flex; align-items:center;}
.app-footer-logo{height:25px; max-width:140px; width:auto; object-fit:contain; display:block;}
@media (max-width:700px){
  .app-footer{flex-direction:column; align-items:flex-start; text-align:left; padding:8px 16px;}
}

/* ============ Cards / panels ============ */
.card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; position:relative;
}
.card-reg{ position:relative; }
.card-reg::before{
  content:""; position:absolute; top:12px; left:12px; width:10px; height:10px;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.4px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.4px 100% no-repeat;
  color:var(--line);
  opacity:0.9;
}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.card-head h3{font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft);}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px;}
@media (max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.stat-grid{grid-template-columns:1fr;}}
.stat-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; display:flex; flex-direction:column; gap:6px;
}
.stat-card .label{font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); font-weight:600;}
.stat-card .value{font-family:var(--font-mono); font-size:24px; font-weight:600; color:var(--ink);}
.stat-card .delta{font-size:11.5px;}
.stat-card .delta.up{color:var(--ok);}
.stat-card .delta.down{color:var(--danger);}
.stat-card .bar{height:4px;border-radius:2px;margin-top:2px;}

.grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:18px;}
@media (max-width:1000px){.grid-2{grid-template-columns:1fr;}}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; border-radius:var(--radius-sm); padding:9px 16px;
  font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; white-space:nowrap;
  font-family:var(--font-body); text-decoration:none;
}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:var(--ink-2);}
.btn-accent{background:var(--teal); color:#fff;}
.btn-accent:hover{background:var(--teal-dark);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{background:var(--paper);}
.btn-danger{background:var(--danger-bg); color:var(--danger); border-color:transparent;}
.btn-danger:hover{background:#f5d3d3;}
.btn-sm{padding:6px 11px; font-size:12px;}
.btn:disabled{opacity:0.5; cursor:not-allowed;}
.icon-btn{
  background:transparent; border:1px solid var(--line); border-radius:var(--radius-sm);
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  text-decoration:none; color:inherit;
}
.icon-btn:hover{background:var(--paper);}
.icon-btn svg{width:15px;height:15px;}

/* ============ Forms ============ */
label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px;}
.req{color:var(--danger); margin-left:2px;}
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:13.5px; font-family:var(--font-body); background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--teal); outline:none; box-shadow:0 0 0 3px rgba(62,156,143,0.15);}
.field{margin-bottom:14px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
.hint{font-size:11.5px; color:var(--ink-soft); margin-top:4px;}
.search-box{position:relative;}
.search-box input{padding-left:34px;}
.search-box svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px;height:15px; color:var(--ink-soft);}
.add-cust-btn{
  flex-shrink:0; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--teal-dark); cursor:pointer;
}
.add-cust-btn svg{width:16px; height:16px;}
.add-cust-btn:hover{background:var(--teal); border-color:var(--teal); color:#fff;}

/* ============ Tables ============ */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{
  text-align:left; padding:10px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--ink-soft); border-bottom:1px solid var(--line); font-weight:600; white-space:nowrap;
}
tbody td{padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
.clickable-row{cursor:pointer;}
.clickable-row:hover{background:var(--paper);}
tbody tr:hover{background:var(--paper);}
tbody tr:last-child td{border-bottom:none;}
td.mono, .mono{font-family:var(--font-mono);}
td.num{text-align:right; font-family:var(--font-mono);}
th.num{text-align:right;}

.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em;
}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge-ok{background:var(--ok-bg); color:var(--ok);}
.badge-warn{background:var(--warn-bg); color:var(--warn);}
.badge-danger{background:var(--danger-bg); color:var(--danger);}
.badge-info{background:var(--info-bg); color:var(--info);}
.badge-accent{background:rgba(62,156,143,0.12); color:var(--teal-dark);}
.badge-magenta{background:rgba(227,28,121,0.10); color:var(--magenta);}
.badge-muted{background:var(--line-soft); color:var(--ink-soft);}

.toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.toolbar-left{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.finance-search input{width:260px;}
.finance-export-scope select{width:108px; height:40px; padding-top:0; padding-bottom:0; background:#fff;}
.finance-export-actions{gap:8px;}
.finance-export-actions .icon-btn{width:40px; height:40px; background:#fff; border-color:var(--line);}
.finance-export-actions .icon-btn:hover{background:#fff; border-color:#cbd5e1;}
.finance-export-actions .icon-btn svg{width:22px; height:22px;}
.finance-export-actions .icon-btn img{width:22px; height:22px; object-fit:contain; display:block;}
.filter-tabs{display:flex; gap:4px; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:3px;}
.filter-tabs button{
  border:none; background:transparent; padding:6px 13px; border-radius:16px; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); cursor:pointer;
}
.filter-tabs button.active{background:var(--ink); color:#fff;}

.empty-state{
  text-align:center; padding:50px 20px; color:var(--ink-soft);
}
.empty-state .regmark{margin:0 auto 12px; width:26px; height:26px; color:var(--line);}
.empty-state .regmark::before,.empty-state .regmark::after{background:var(--ink-soft);}
.empty-state h4{color:var(--ink-soft); font-size:14px;}
.empty-state p{font-size:12.5px; margin:4px 0 14px;}

/* ============ Pagination ============ */
.pagination{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:14px 4px 4px; border-top:1px solid var(--line); margin-top:10px;
}
.pagination .page-info{font-size:12px; color:var(--ink-soft);}
.pagination .page-btns{display:flex; align-items:center; gap:10px;}
.pagination .page-current{font-size:12.5px; color:var(--ink-soft); white-space:nowrap;}
.pagination .page-btn{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer; text-decoration:none;
}
.pagination .page-btn:hover:not(:disabled){background:var(--paper);}
.pagination .page-btn:disabled{opacity:0.4; cursor:not-allowed;}

/* ============ Invoice / bill print-style layout (used inside view modals) ============ */
.inv-print-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px;}
.inv-print-logo{
  width:112px; height:58px; padding:6px; border:1.5px solid var(--ink); border-radius:6px;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex-shrink:0; position:relative;
}
.inv-print-logo img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.inv-print-logo .regmark{color:var(--ink-soft);}
.inv-print-logo .regmark-ring{border-color:var(--line);}
.inv-print-company{text-align:right;}
.inv-print-company .name{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--doc-accent, var(--ink));}
.inv-print-company .tagline{font-size:11px; color:var(--ink-soft); margin-top:2px;}
.inv-print-title{display:flex; align-items:center; gap:14px; margin:16px 0 20px;}

/* The Template Settings top/bottom margin only matters when physically printing
   (browser Print or the PDF snapshot) — on screen it just wastes space above the
   title, so it's applied here only inside @media print. */
.doc-margin-wrap{padding-top:0 !important; padding-bottom:0 !important;}
@media print{
  .doc-margin-wrap{padding-top:var(--tpl-top, 0) !important; padding-bottom:var(--tpl-bottom, 0) !important;}
}
.inv-print-title hr{flex:1; border:none; border-top:1px solid var(--line); margin:0;}
.inv-print-title span{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:0.04em; color:var(--doc-accent, var(--ink));}
.inv-print-meta{display:flex; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap;}
.inv-print-meta .bill-to{flex:1; min-width:160px;}
.inv-print-meta .bill-to .label{font-size:11px; color:var(--ink-soft); margin-bottom:4px;}
.inv-print-meta .bill-to .name{font-weight:700; font-size:13px; color:var(--ink);}
.inv-print-meta .bill-to .sub{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
.inv-print-meta-table{border:1px solid var(--line); border-radius:6px; overflow:hidden; min-width:250px;}
.inv-print-meta-table .row{display:flex; border-bottom:1px solid var(--line);}
.inv-print-meta-table .row:last-child{border-bottom:none;}
.inv-print-meta-table .row .lbl{background:var(--paper); width:100px; flex-shrink:0; padding:7px 10px; font-size:10.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.02em;}
.inv-print-meta-table .row .val{padding:7px 10px; font-size:11.5px; color:var(--ink); flex:1;}
.inv-item-name{font-weight:600;}
.inv-item-description{font-size:7pt !important; font-style:italic !important; font-synthesis-style:auto; margin-top:2px;}
.inv-print-footer{display:flex; justify-content:space-between; gap:24px; margin-top:20px; flex-wrap:wrap;}
.inv-print-footer .thanks{flex:1; min-width:160px; font-size:12px; color:var(--ink);}
.inv-print-totals{min-width:230px;}
.inv-print-totals .row{display:flex; justify-content:space-between; padding:7px 0; border-top:1px solid var(--line); font-size:12.5px;}
.inv-print-totals .row.grand{font-weight:700; font-size:14px; color:var(--doc-accent, var(--ink));}
.inv-print-footer-note{text-align:center; font-size:11px; font-style:italic; color:var(--ink-soft); margin-top:24px; border-top:1px solid var(--line-soft); padding-top:14px;}
.inv-print-accent-bar{height:4px; margin:-20px -20px 18px; border-radius:8px 8px 0 0;}
.inv-print-terms{font-size:11px; color:var(--ink-soft); border-top:1px solid var(--line-soft); padding-top:14px;}
.inv-print-terms .label{font-weight:700; color:var(--ink); margin-bottom:4px; font-size:12px;}

/* ============ Receipt Voucher body ============ */
.rv-sheet .inv-print-title{margin:0 0 14px;}
.rv-top-row{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 16px; flex-wrap:wrap;}
.rv-amount-box{display:flex; align-items:center; gap:8px;}
.rv-amount-box label{font-weight:600; font-size:12.5px; color:var(--ink); white-space:nowrap;}
.rv-box{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:6px 14px; font-weight:700; font-size:12.5px; color:var(--ink); min-width:130px; text-align:center;}
.rv-no{font-size:12.5px; color:var(--ink); white-space:nowrap;}
.rv-no .rv-no-value{color:var(--danger); font-weight:700; font-family:var(--font-mono);}
.rv-line{display:flex; align-items:baseline; gap:8px; margin-bottom:12px;}
.rv-line .rv-label{font-size:12px; color:var(--ink); white-space:nowrap; flex-shrink:0;}
.rv-line .rv-value{flex:1; border-bottom:1px solid var(--ink); padding-bottom:2px; font-weight:600; font-size:12px; color:var(--ink); min-height:15px;}
.rv-line-row{display:flex; gap:30px; flex-wrap:wrap;}
.rv-line-row .rv-line{flex:1; min-width:200px;}
.rv-signatures{display:flex; justify-content:space-between; gap:40px; margin-top:56px;}
.rv-sig{flex:1; text-align:center;}
.rv-sig .rv-sig-line{border-top:1px solid var(--ink); margin-bottom:4px; padding-top:4px;}
.rv-sig span{font-size:11px; color:var(--ink-soft);}

/* ============ Modal ============ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(16,27,45,0.5); display:none;
  align-items:flex-start; justify-content:center; z-index:100; padding:40px 20px; overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal{
  background:#fff; border-radius:var(--radius); width:100%; max-width:560px;
  box-shadow:var(--shadow-md); animation:modalIn .16s ease-out;
}
.modal.modal-lg{max-width:760px;}
@keyframes modalIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line);}
.modal-head h3{font-size:16px;}
.modal-body{padding:20px; max-height:70vh; overflow-y:auto;}
.modal-foot{padding:16px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px;}
.document-edit-open{overflow:hidden;}
.document-edit-overlay{padding:0; align-items:center;}
.document-edit-modal{
  max-width:min(1300px, 100vw); height:auto; max-height:calc(100vh - 10px);
  display:flex; flex-direction:column; overflow:hidden;
}
.document-edit-modal .modal-head{display:none;}
.document-edit-frame-wrap{position:relative; flex:1; min-height:0; background:var(--paper); overflow:auto;}
.document-edit-content{min-height:100%; background:var(--paper);}
.document-edit-content .inv-sheet{max-width:none; margin:0;}
.document-edit-content .inv-band{border-radius:var(--radius) var(--radius) 0 0;}
.document-edit-content #bottomHint{display:none;}
.document-edit-content .bottom-bar{position:sticky; bottom:0; z-index:5;}
.document-edit-loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:13px;}
.document-edit-loading[hidden],.document-edit-content[hidden]{display:none;}
body.embedded-document-form{background:var(--paper);}
body.embedded-document-form .sidebar,
body.embedded-document-form .topbar,
body.embedded-document-form .app-footer{display:none !important;}
body.embedded-document-form .main{margin-left:0 !important; min-height:100vh;}
body.embedded-document-form .content{padding:16px;}
body.embedded-document-form .inv-sheet{max-width:none; margin:0;}
@media (max-width:700px){
  .document-edit-overlay{padding:0;}
  .document-edit-modal{max-width:100%; height:100vh; border-radius:0;}
  body.embedded-document-form .content{padding:10px;}
}
.resource-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:76px;}
.resource-actions .icon-btn{width:34px;height:34px;}
.resource-actions .resource-delete-icon{color:var(--danger);}
.resource-modal-error{padding:10px 12px;margin-bottom:14px;border:1px solid #efb9b9;background:var(--danger-bg);color:var(--danger);border-radius:var(--radius-sm);}
.resource-delete-modal{max-width:440px;}
.resource-check-field{display:flex;align-items:center;gap:8px;margin:0;}
.resource-check-field input{width:auto;}

/* ============ Toast ============ */
.toast-wrap{position:fixed; top:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:8px;}
.toast{
  background:var(--ink); color:#fff; padding:12px 16px; border-radius:var(--radius-sm);
  font-size:13px; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:10px;
  animation:toastIn .18s ease-out; min-width:220px;
}
.toast.ok{background:#1D4A38;}
.toast.err{background:#5A1F1F;}
@keyframes toastIn{from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);}}

/* ============ Misc ============ */
.text-soft{color:var(--ink-soft);}
.text-danger{color:var(--danger);}
.text-ok{color:var(--ok);}
.flex{display:flex;}
.gap-8{gap:8px;}
.gap-12{gap:12px;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.w-full{width:100%;}
.mt-0{margin-top:0;}
.mt-8{margin-top:8px;}
.mb-0{margin-bottom:0;}
.divider{height:1px; background:var(--line); margin:16px 0;}
.kanban{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:900px){.kanban{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.kanban{grid-template-columns:1fr;}}
@media (max-width:640px){.kanban{grid-template-columns:1fr;}}
.kanban-col{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:12px; min-height:120px;}
.kanban-col h4{font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:10px; display:flex; justify-content:space-between;}
.wo-card{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:8px;
  padding:10px 12px; margin-bottom:8px; cursor:pointer; transition:box-shadow .15s;
}
.wo-card:hover{box-shadow:var(--shadow-sm);}
.wo-card .card-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px;}
.wo-card .code-badge{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:2px 9px; flex-shrink:0;
}
.wo-card .urgent-badge{
  font-size:9.5px; font-weight:700; letter-spacing:0.03em; color:var(--magenta);
  background:rgba(227,28,121,0.10); border-radius:20px; padding:2px 8px; margin-left:6px;
}
.wo-card .cust{font-size:11px; color:var(--ink-soft); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wo-card .desc{font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wo-card .wo-note{
  font-size:11.5px; color:var(--ink-soft); margin-top:3px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.wo-card .meta{display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.wo-card.urgent{border-left-color:var(--magenta);}

/* ============ Reusable transactional components (POS, manual invoices) ============ */
.totals-row{display:flex; justify-content:space-between; font-size:13px; padding:4px 0;}
.totals-row.grand{font-size:16px; font-weight:700; font-family:var(--font-mono); border-top:1px solid var(--line); margin-top:6px; padding-top:10px;}
.discount-row{display:flex; gap:8px; align-items:stretch;}
.discount-row input{flex:1; min-width:0;}
.discount-row select{width:auto; flex-shrink:0; padding:10px 8px; text-align:center;}
.pay-methods{display:flex; gap:8px;}
.pay-methods label{
  flex:1; text-align:center; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:9px 6px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink-soft);
}
.pay-methods input{display:none;}
.pay-methods input:checked + span{color:var(--teal-dark);}
.pay-methods label:has(input:checked){border-color:var(--teal); background:rgba(62,156,143,0.08); color:var(--teal-dark);}
.cust-suggestions{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-sm); margin-top:4px;
  max-height:160px; overflow-y:auto; background:#fff; display:none;
}
.cust-suggestions.open{display:block;}
.cust-suggestion-item{padding:8px 10px; cursor:pointer; font-size:12.5px; border-bottom:1px solid var(--line-soft);}
.cust-suggestion-item:last-child{border-bottom:none;}
.cust-suggestion-item:hover{background:var(--paper);}
.cust-suggestion-item .n{font-weight:600;}
.cust-suggestion-item .p{color:var(--ink-soft); font-family:var(--font-mono); font-size:11px;}
.selected-cust{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px;
}
.selected-cust .info .n{font-weight:600; font-size:13px;}
.selected-cust .info .p{color:var(--ink-soft); font-family:var(--font-mono); font-size:11px;}
.selected-cust button{background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:12px; font-weight:600;}
.selected-cust button:hover{color:var(--danger);}
.link-btn{background:none; border:none; color:var(--teal-dark); font-size:11.5px; font-weight:600; cursor:pointer; padding:0;}
.line-item-row input{font-size:12.5px; padding:7px 9px;}

/* ============ Item table (manual invoices, work orders) ============ */
.items-table-wrap{border:1px solid var(--line); border-radius:var(--radius-sm); overflow-x:auto;}
.items-table-wrap table{margin:0; border-collapse:collapse;}
.items-table-wrap thead th{background:var(--paper); font-size:10.5px; padding:14px 16px;}
.items-table-wrap thead th.num{text-align:right;}
.items-table-wrap td{vertical-align:middle; padding:0;}
.items-table-wrap th:nth-child(2), .items-table-wrap th:nth-child(3), .items-table-wrap th:nth-child(4),
.items-table-wrap td:nth-child(2), .items-table-wrap td:nth-child(3), .items-table-wrap td:nth-child(4){
  border-left:1.5px solid rgba(16,27,45,0.28);
}
.items-table-wrap tbody tr:hover{background:transparent;}
.items-table-wrap input, .items-table-wrap select{
  font-size:13.5px; padding:14px 16px; border:none; border-radius:0; background:transparent; width:100%;
}
.items-table-wrap input:focus, .items-table-wrap select:focus{
  border:none; box-shadow:none; outline:none; background:var(--paper);
}
.items-table-wrap input:disabled, .items-table-wrap select:disabled{color:var(--ink-soft); background:transparent;}
.item-desc-cell{position:relative; min-width:240px;}
.item-desc-cell .item-note-input{
  font-size:11.5px; padding:0 16px 10px; color:var(--ink-soft); font-style:italic;
  resize:none; overflow:hidden; line-height:1.5; min-height:20px; display:block; font-family:var(--font-body);
}
.item-desc-cell .item-note-input:focus{background:var(--paper); font-style:normal;}
.item-desc-cell .item-note-input:placeholder-shown{min-height:20px;}
.qty-cell input{text-align:right; color:var(--teal-dark); font-family:var(--font-mono); font-weight:600;}
.rate-cell input{text-align:right; font-family:var(--font-mono);}
.items-table-wrap td.num{padding:14px 16px;}
.row-actions-bar{display:flex; gap:10px; margin-top:10px;}
.wo-card .item-note{
  font-size:11px; color:var(--ink-soft); white-space:pre-line; margin-top:3px; line-height:1.4;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* Floating combobox panel — appended to <body>, positioned via JS, so it can never
   be clipped by a scrolling ancestor or force a container to grow a scrollbar. */
.floating-combo-panel{
  position:fixed; z-index:9999; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); max-height:260px; overflow-y:auto; display:none;
}
.floating-combo-panel.open{display:block;}
.combo-item{padding:8px 10px; cursor:pointer; font-size:12.5px; border-bottom:1px solid var(--line-soft);}
.combo-item:last-child{border-bottom:none;}
.combo-item:hover{background:var(--paper);}
.combo-item .n{font-weight:600;}
.combo-item .p{color:var(--ink-soft); font-family:var(--font-mono); font-size:11px;}

/* Totals summary panel (manual invoices, vendor bills) */
.totals-summary{max-width:340px; margin-left:auto;}
.totals-summary .field{margin-bottom:0;}
.totals-summary .field-inline{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 0;}
.totals-summary .field-inline:not(:last-child){border-bottom:1px solid var(--line-soft);}
.totals-summary .field-inline label{margin:0; white-space:nowrap;}
.totals-summary .field-inline .inputs{display:flex; gap:6px; width:170px;}
.totals-summary .field-inline input{text-align:right;}

/* Login page */
.login-wrap{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--ink);
  position:relative; overflow:hidden;
}
.login-wrap::before{
  content:""; position:absolute; inset:0; opacity:0.5;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(0,174,239,0.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(227,28,121,0.10), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(246,180,0,0.08), transparent 35%);
}
.login-card{
  position:relative; background:var(--paper-raised); border-radius:14px; padding:36px 34px;
  width:100%; max-width:380px; box-shadow:var(--shadow-md);
}
.login-brand{display:flex; align-items:center; justify-content:center; gap:10px; min-height:24px; margin-bottom:10px; color:var(--ink); text-align:center;}
.login-brand.has-logo{min-height:58px;}
.login-brand img{max-width:210px; max-height:58px; width:auto; height:auto; object-fit:contain; display:block;}
.login-wordmark{font-family:'Sora',sans-serif; font-size:15px; line-height:1; color:var(--ink);}
.login-card h2{font-size:20px; margin-bottom:2px;}
.login-card p.hint{margin-bottom:22px;}
.password-field{position:relative;}
.password-field input{padding-right:46px;}
.password-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:var(--radius-sm); background:transparent; color:var(--ink-soft);
  cursor:pointer; padding:0;
}
.password-toggle:hover{background:rgba(16,27,45,0.06); color:var(--ink);}
.password-toggle:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(62,156,143,0.15);}
.password-toggle svg{width:17px; height:17px;}
.password-toggle .password-eye-off{display:none;}
.password-toggle.is-visible .password-eye{display:none;}
.password-toggle.is-visible .password-eye-off{display:block;}
.login-error{
  background:var(--danger-bg); color:var(--danger); font-size:12.5px; padding:9px 12px;
  border-radius:var(--radius-sm); margin-bottom:14px; display:none;
}
.demo-creds{display:none;}
.demo-creds b{font-family:var(--font-mono); color:var(--ink);}
.login-powered-by{
  position:relative; display:flex; align-items:center; gap:8px;
  font-size:11.5px; color:rgba(255,255,255,0.55);
}
.login-powered-by a{display:inline-flex; align-items:center;}
.login-powered-by img{height:24px; width:auto; display:block;}
.login-powered-by span{color:rgba(255,255,255,0.72);}

/* print */
@media print{
  /* When printing from an open modal (invoice, bill, receipt, statement), hide the
     entire app shell behind it — otherwise the list/table on the page underneath
     prints alongside the modal instead of just the modal's own content. */
  body:has(.modal-overlay.open) .app-shell{display:none !important;}

  .sidebar,.topbar,.toolbar,.app-footer,.no-print{display:none !important;}
  .main{margin-left:0 !important;}
  .content{padding:0 !important;}
  body{background:#fff;}

  .modal-overlay.open{
    position:static !important; inset:auto !important; background:none !important;
    padding:0 !important; display:block !important; overflow:visible !important;
  }
  .modal-overlay.open .modal{
    box-shadow:none !important; border:none !important; max-width:100% !important;
    width:100% !important; margin:0 !important; border-radius:0 !important;
    animation:none !important;
  }
  .modal-overlay.open .modal-head{display:none !important;}
  .modal-overlay.open .modal-body{max-height:none !important; overflow:visible !important; padding:0 20px !important;}
  .modal-overlay.open .modal-foot{display:none !important;}
  .modal-overlay.open .statement-layout{display:block !important;}
  .modal-overlay.open .statement-preview-sheet{max-height:none !important; overflow:visible !important; border:none !important; box-shadow:none !important; padding:0 !important;}
}