@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #edf0f5;
  --surface:   #ffffff;
  --s2:        #f6f7fb;
  --s3:        #eceef4;
  --sidebar:   #0f1117;
  --accent:    #1a56db;
  --accent-h:  #1648bf;
  --accent-l:  #dce8ff;
  --accent-t:  #173db5;
  --t1:        #0f1117;
  --t2:        #363948;
  --t3:        #525769;
  --t4:        #848da0;
  --bdr:       #e2e5ed;
  --bdr2:      #c8ccd8;
  --ok:        #0c7a59;
  --ok-bg:     #e7f5f1;
  --warn:      #a35c08;
  --warn-bg:   #fef4e6;
  --err:       #bf3928;
  --err-bg:    #fdeceb;
  --inv-dark:  #111318;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --font:      'DM Sans', sans-serif;
  --font-head: 'DM Serif Display', serif;
}

html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t1);
  font-size: 15px;
  line-height: 1.65;
}

/* ── Layout ──────────────────────────────────────────────────── */
.app-shell   { display: flex; min-height: 100vh; }
.sidebar     { width: 210px; background: var(--sidebar); display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; transition: width .22s ease; }
.main        { flex: 1; min-width: 0; overflow-y: auto; height: 100vh; }
.page        { padding: 32px; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar-logo          { padding: 16px 14px 14px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-brand         { min-width: 0; flex: 1; overflow: hidden; }
.sidebar-logo .brand   { font-family: var(--font-head); font-size: 20px; color: #fff; letter-spacing: .2px; white-space: nowrap; }
.sidebar-logo .tagline { font-size: 11px; color: rgba(255,255,255,.3); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; white-space: nowrap; }
.sidebar-toggle        {
  flex-shrink: 0; width: 30px; height: 30px; border: none; background: none;
  color: rgba(255,255,255,.4); cursor: pointer; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.sidebar-toggle:hover  { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); }
.sidebar-new-btn       { margin: 14px 12px; overflow: hidden; }
.sidebar-new-btn a     {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 14px; background: var(--accent); color: #fff;
  border-radius: var(--radius); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: background .15s; white-space: nowrap;
}
.sidebar-new-btn a:hover { background: var(--accent-h); }
.nav-section { font-size: 11px; color: rgba(255,255,255,.28); text-transform: uppercase; letter-spacing: 1.2px; padding: 16px 20px 6px; white-space: nowrap; overflow: hidden; }
.nav-item    {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; font-size: 14px; color: rgba(255,255,255,.5);
  text-decoration: none; transition: all .12s;
  border-left: 2px solid transparent; white-space: nowrap;
}
.nav-item:hover  { color: rgba(255,255,255,.88); background: rgba(255,255,255,.05); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.09); border-left-color: var(--accent); }
.nav-item svg    { width: 15px; height: 15px; opacity: .7; flex-shrink: 0; }
.nav-item.active svg { opacity: 1; }

/* ── Sidebar collapsed ───────────────────────────────────────── */
.app-shell.sidebar-collapsed .sidebar       { width: 52px; }
.app-shell.sidebar-collapsed .sidebar-logo  { padding: 14px 10px; justify-content: center; }
.app-shell.sidebar-collapsed .sidebar-brand { display: none; }
.app-shell.sidebar-collapsed .sidebar-new-btn { display: none; }
.app-shell.sidebar-collapsed .nav-section   { display: none; }
.app-shell.sidebar-collapsed .nav-item      { justify-content: center; padding: 10px 0; border-left-color: transparent; }
.app-shell.sidebar-collapsed .nav-item.active { background: rgba(255,255,255,.09); }
.app-shell.sidebar-collapsed .nav-item .nav-label { display: none; }
.app-shell.sidebar-collapsed .user-panel    { justify-content: center; padding: 8px 6px; }
.app-shell.sidebar-collapsed .user-info     { display: none; }
.app-shell.sidebar-collapsed .logout-btn    { justify-content: center; padding: 9px 4px; }
.app-shell.sidebar-collapsed .logout-label  { display: none; }

/* ── Sidebar tooltip ─────────────────────────────────────────── */
#sidebar-tip {
  position: fixed;
  z-index: 9999;
  background: #1a1f2e;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  padding: 5px 11px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .12s ease;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
#sidebar-tip.visible { opacity: 1; }

/* ── Page heading ────────────────────────────────────────────── */
.page-head     { margin-bottom: 28px; }
.page-title    { font-family: var(--font-head); font-size: 26px; color: var(--t1); margin-bottom: 5px; }
.page-subtitle { font-size: 15px; color: var(--t3); }

/* ── Flash messages ──────────────────────────────────────────── */
.flash { padding: 12px 18px; border-radius: var(--radius); font-size: 14px; font-weight: 500; margin-bottom: 20px; }
.flash-success { background: var(--ok-bg); color: var(--ok); border: 1px solid #9fd9c9; }
.flash-error   { background: var(--err-bg); color: var(--err); border: 1px solid #f5c6c2; }
.flash-warning { background: var(--warn-bg); color: var(--warn); border: 1px solid #f5d89c; }

/* ── Card ────────────────────────────────────────────────────── */
.card          { background: var(--surface); border: 1px solid var(--bdr); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.card-header   { padding: 18px 24px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; }
.card-title    { font-size: 15px; font-weight: 600; color: var(--t1); }
.card-body     { padding: 24px; }

/* ── Stat cards ──────────────────────────────────────────────── */
.stat-grid    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.stat-card    { background: var(--surface); border: 1px solid var(--bdr); border-radius: var(--radius-lg); padding: 22px 24px; }
.stat-label   { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--t4); margin-bottom: 10px; }
.stat-value   { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--t1); }
.stat-card.ok   .stat-value { color: var(--ok); }
.stat-card.acc  .stat-value { color: var(--accent); }
.stat-card.err  .stat-value { color: var(--err); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--radius); font-size: 14px; font-weight: 500;
  font-family: var(--font); cursor: pointer; border: 1px solid var(--bdr);
  background: var(--surface); color: var(--t2); text-decoration: none;
  transition: all .15s; white-space: nowrap;
}
.btn:hover           { background: var(--s2); border-color: var(--bdr2); }
.btn-primary         { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover   { background: var(--accent-h); border-color: var(--accent-h); }
.btn-sm              { padding: 6px 13px; font-size: 13px; }
.btn-xs              { padding: 4px 10px; font-size: 12px; border-radius: 5px; }
.btn-ghost           { background: transparent; border-color: transparent; color: var(--t3); }
.btn-ghost:hover     { background: var(--s2); border-color: var(--bdr); }
.btn-success         { background: var(--ok-bg); color: var(--ok); border-color: #9fd9c9; }
.btn-danger          { background: var(--err-bg); color: var(--err); border-color: #f5c6c2; }

/* ── Form elements ───────────────────────────────────────────── */
.form-group    { margin-bottom: 20px; }
.form-label    { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; color: var(--t4); margin-bottom: 6px; }
.form-label .req { color: var(--err); }
.form-control  {
  width: 100%; padding: 10px 13px; border: 1px solid var(--bdr); border-radius: var(--radius);
  font-size: 15px; font-family: var(--font); color: var(--t1); background: var(--s2);
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.form-control:focus  { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-l); }
.form-control.error  { border-color: var(--err); }
.form-hint     { font-size: 13px; color: var(--t4); margin-top: 4px; }
.form-row      { display: grid; gap: 16px; }
.form-row-2    { grid-template-columns: 1fr 1fr; }
.form-row-3    { grid-template-columns: 1fr 1fr 1fr; }
.form-row-4    { grid-template-columns: 1fr 1fr 1fr 1fr; }
textarea.form-control { resize: vertical; }
select.form-control   { cursor: pointer; }
.error-msg     { font-size: 13px; color: var(--err); margin-top: 4px; }

/* ── Table ───────────────────────────────────────────────────── */
.table-wrap    { overflow-x: auto; }
table.tbl      { width: 100%; border-collapse: collapse; }
table.tbl th   { padding: 12px 18px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--t4); text-align: left; background: var(--s2); border-bottom: 1px solid var(--bdr); white-space: nowrap; }
table.tbl td   { padding: 14px 18px; font-size: 14px; color: var(--t2); border-bottom: 1px solid var(--s3); }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover td { background: var(--s2); }
table.tbl .r   { text-align: right; }
table.tbl .c   { text-align: center; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge         { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.badge-gray    { background: var(--s3);      color: var(--t3); }
.badge-blue    { background: var(--accent-l); color: var(--accent-t); }
.badge-green   { background: var(--ok-bg);   color: var(--ok); }
.badge-orange  { background: var(--warn-bg); color: var(--warn); }
.badge-red     { background: var(--err-bg);  color: var(--err); }

/* ── Filters / toolbar ───────────────────────────────────────── */
.toolbar       { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-pills  { display: flex; gap: 6px; }
.filter-pill   { padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--bdr); background: var(--surface); color: var(--t3); text-decoration: none; transition: all .12s; }
.filter-pill:hover  { border-color: var(--bdr2); color: var(--t1); }
.filter-pill.active { background: var(--accent-l); color: var(--accent-t); border-color: var(--accent); }

/* ── Invoice paper ───────────────────────────────────────────── */
.inv-paper     { background: var(--surface); border: 1px solid var(--bdr); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

.inv-band      {
  background: linear-gradient(135deg, #111318 0%, #1a2035 100%);
  padding: 30px 36px 26px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.inv-band .co-name    { font-family: var(--font-head); font-size: 26px; color: #fff; margin-bottom: 8px; }
.inv-band .co-detail  { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.9; }
.inv-band .co-gstin   { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 7px; letter-spacing: .5px; }
.inv-meta             { text-align: right; }
.inv-num-label        { font-size: 11px; color: rgba(255,255,255,.32); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 5px; }
.inv-num-input        {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-family: var(--font-head); font-size: 22px;
  padding: 5px 12px; border-radius: 6px; text-align: right; width: 230px; outline: none;
}
.inv-num-input:focus  { border-color: rgba(255,255,255,.35); }
.inv-status-sel       {
  margin-top: 10px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.78); font-size: 13px; padding: 5px 12px; border-radius: 20px;
  font-family: var(--font); outline: none; cursor: pointer;
}
.inv-date-row         { display: flex; gap: 16px; margin-top: 14px; justify-content: flex-end; }
.inv-date-block .dl   { font-size: 11px; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; text-align: right; }
.inv-date-input       {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: 13px; padding: 5px 10px; border-radius: 5px;
  font-family: var(--font); outline: none; color-scheme: dark;
}
.inv-date-input:focus { border-color: rgba(255,255,255,.3); }

.inv-parties   { padding: 24px 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; border-bottom: 1px solid var(--bdr); }
.party-label   { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.1px; color: var(--t4); margin-bottom: 10px; }
.customer-filled { background: var(--s2); border: 1px solid var(--bdr); border-radius: var(--radius); padding: 12px 14px; }
.customer-filled .cf-name    { font-size: 15px; font-weight: 600; color: var(--t1); display: flex; justify-content: space-between; align-items: flex-start; }
.customer-filled .cf-detail  { font-size: 13px; color: var(--t3); margin-top: 4px; line-height: 1.8; }
.customer-filled .cf-gstin   { font-size: 12px; color: var(--accent); margin-top: 5px; font-weight: 500; }
.supply-row    { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.supply-tag    { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 10px; }
.supply-intra  { background: var(--ok-bg); color: var(--ok); }
.supply-inter  { background: var(--accent-l); color: var(--accent-t); }

/* Line items table */
.inv-items     { padding: 0 36px; }
.items-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 12px; }
.items-toolbar .it-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--t4); }
.col-chips     { display: flex; gap: 6px; align-items: center; }
.col-chips span { font-size: 12px; color: var(--t4); margin-right: 2px; }
.col-chip      { font-size: 12px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--bdr); color: var(--t4); cursor: pointer; background: var(--surface); transition: all .12s; user-select: none; }
.col-chip.on   { background: var(--accent-l); color: var(--accent-t); border-color: var(--accent); }

table.items-tbl             { width: 100%; border-collapse: collapse; }
table.items-tbl th          { padding: 10px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--t4); border-bottom: 1px solid var(--bdr); background: var(--s2); white-space: nowrap; }
table.items-tbl td          { padding: 4px 5px; border-bottom: 1px solid var(--s3); vertical-align: middle; }
table.items-tbl tr:hover td { background: var(--s2); }
table.items-tbl .r          { text-align: right; }
table.items-tbl .c          { text-align: center; }
.td-num        { color: var(--t4); font-size: 13px; text-align: center; padding-top: 12px !important; width: 30px; }
.td-calc       { font-size: 14px; font-variant-numeric: tabular-nums; padding: 11px 7px !important; }
.td-bold       { font-weight: 700; color: var(--t1); }

.td-inp        {
  width: 100%; border: 1px solid transparent; border-radius: 5px;
  padding: 7px 8px; font-size: 14px; font-family: var(--font); color: var(--t1);
  background: transparent; outline: none; transition: all .12s;
}
.td-inp:hover  { background: var(--s3); border-color: var(--bdr); }
.td-inp:focus  { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-l); }
.td-inp.r      { text-align: right; }
.td-sel        {
  width: 100%; border: 1px solid transparent; border-radius: 5px;
  padding: 7px 5px; font-size: 13px; font-family: var(--font); color: var(--t1);
  background: transparent; outline: none; cursor: pointer;
}
.td-sel:focus  { border-color: var(--accent); background: var(--surface); }
.gst-pill      { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--accent-l); color: var(--accent-t); }
.del-row-btn   {
  width: 24px; height: 24px; border-radius: 4px; border: none;
  background: none; color: var(--t4); cursor: pointer; font-size: 17px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: all .12s;
}
.del-row-btn:hover { background: var(--err-bg); color: var(--err); }
.add-row-btn   { display: flex; align-items: center; gap: 8px; padding: 13px 0; color: var(--accent); font-size: 14px; font-weight: 500; cursor: pointer; border: none; background: none; font-family: var(--font); transition: opacity .15s; }
.add-row-btn:hover { opacity: .65; }

/* Auto-suggest dropdown */
.item-dd       { position: fixed; width: 320px; background: var(--surface); border: 1px solid var(--bdr); border-radius: var(--radius); box-shadow: var(--shadow-md); z-index: 9999; overflow: hidden; }
.item-opt      { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--s3); transition: background .1s; }
.item-opt:last-child { border-bottom: none; }
.item-opt:hover      { background: var(--s2); }
.item-opt .io-name   { font-size: 14px; font-weight: 500; color: var(--t1); }
.item-opt .io-meta   { font-size: 12px; color: var(--t4); margin-top: 2px; }
.item-opt.io-create  { color: var(--accent); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 7px; background: var(--s2); }

/* Customer dropdown */
.cust-dd       { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--bdr); border-radius: var(--radius); box-shadow: var(--shadow-md); z-index: 200; margin-top: 4px; overflow: hidden; }
.cust-opt      { padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--s3); transition: background .1s; }
.cust-opt:hover      { background: var(--s2); }
.cust-opt .co-name   { font-size: 14px; font-weight: 500; color: var(--t1); }
.cust-opt .co-detail { font-size: 13px; color: var(--t4); margin-top: 2px; }
.cust-opt.co-create  { color: var(--accent); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 7px; background: var(--s2); }

/* Invoice footer totals */
.inv-footer    { padding: 22px 36px 32px; display: grid; grid-template-columns: 1fr 320px; gap: 28px; border-top: 1px solid var(--bdr); }
.totals-block  {}
.total-row     { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.total-row .tl { font-size: 14px; color: var(--t3); }
.total-row .tv { font-size: 14px; font-weight: 400; color: var(--t2); font-variant-numeric: tabular-nums; }
.total-row.separator { border-top: 1px solid var(--bdr); margin-top: 10px; padding-top: 10px; }
.total-row.grand .tl { font-size: 17px; font-weight: 700; color: var(--t1); }
.total-row.grand .tv { font-size: 20px; font-weight: 700; color: var(--t1); }
.gst-breakdown { background: var(--s2); border: 1px solid var(--bdr); border-radius: var(--radius); padding: 12px 14px; margin: 10px 0; }
.gst-row       { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.gst-row .gl   { color: var(--t3); }
.gst-row .gv   { font-weight: 400; font-variant-numeric: tabular-nums; }
.gst-row.total { border-top: 1px solid var(--bdr); margin-top: 5px; padding-top: 6px; }
.gst-row.total .gl { font-weight: 600; color: var(--t2); }
.amount-words  { padding: 8px 12px; background: var(--warn-bg); border-radius: 6px; font-size: 12px; color: var(--warn); font-style: italic; line-height: 1.6; margin-top: 10px; }
.disc-inline   { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }
.disc-inline input  { width: 60px; padding: 3px 6px; border: 1px solid var(--bdr); border-radius: 4px; font-size: 13px; font-family: var(--font); text-align: right; outline: none; }
.disc-inline select { padding: 3px 5px; border: 1px solid var(--bdr); border-radius: 4px; font-size: 13px; font-family: var(--font); background: var(--s2); outline: none; }

/* Invoice action sidebar */
.inv-actions   { width: 210px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; align-self: flex-start; }
.act-card      { background: var(--surface); border: 1px solid var(--bdr); border-radius: var(--radius-lg); padding: 18px; }
.act-card-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .9px; color: var(--t4); margin-bottom: 14px; }
.act-list      { display: flex; flex-direction: column; gap: 8px; }
.act-btn       { width: 100%; padding: 9px 13px; border-radius: var(--radius); font-size: 14px; font-weight: 500; font-family: var(--font); cursor: pointer; text-align: left; transition: all .15s; display: flex; align-items: center; gap: 8px; text-decoration: none; border: 1px solid; }
.act-btn.primary   { background: var(--accent); color: #fff; border-color: var(--accent); }
.act-btn.primary:hover { background: var(--accent-h); }
.act-btn.secondary { background: var(--surface); color: var(--t2); border-color: var(--bdr); }
.act-btn.secondary:hover { background: var(--s2); }
.act-btn.success   { background: var(--ok-bg); color: var(--ok); border-color: #9fd9c9; }
.act-btn.danger    { background: var(--err-bg); color: var(--err); border-color: #f5c6c2; }
.act-btn.ghost     { background: transparent; color: var(--t3); border-color: transparent; }
.act-btn.ghost:hover { background: var(--s2); border-color: var(--bdr); }

.summary-row   { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--s3); font-size: 14px; }
.summary-row:last-child { border-bottom: none; }
.summary-row .sl { color: var(--t3); }
.summary-row .sv { font-weight: 400; color: var(--t2); font-variant-numeric: tabular-nums; }
.summary-row.grand { padding: 9px 0; font-size: 16px; font-weight: 700; }
.summary-row.grand .sl { color: var(--t1); }
.summary-row.grand .sv { color: var(--accent); }

/* Modal overlay */
.modal-overlay { position: fixed; inset: 0; background: rgba(10,12,20,.55); display: flex; align-items: center; justify-content: center; z-index: 900; padding: 16px; }
.modal-box     { background: var(--surface);
                border-radius: var(--radius-lg);
                width: 500px;
                max-width: 100%;
                max-height: 92vh;
                display: flex; flex-direction: column;
                box-shadow: 0 24px 80px rgba(0,0,0,.22); border: 1px solid var(--bdr); }
.modal-box.modal-sm { width: 400px; }
.modal-head    { padding: 18px 22px; border-bottom: 1px solid var(--bdr); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.modal-title   { font-size: 16px; font-weight: 600; color: var(--t1); }
.modal-close   { background: none; border: none; cursor: pointer; font-size: 22px; color: var(--t4); line-height: 1; padding: 0 4px; }
.modal-body    { padding: 20px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-foot    { padding: 14px 22px; border-top: 1px solid var(--bdr); display: flex; gap: 10px; flex-shrink: 0; }
/* form wraps modal-body+modal-foot in several modals — it must join the flex chain */
.modal-box > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal-foot .btn { flex: 1; justify-content: center; }

/* Pagination */
.pagination    { display: flex; align-items: center; gap: 5px; padding: 18px 0 4px; }
.pagination a, .pagination span { padding: 6px 13px; border-radius: 6px; font-size: 14px; border: 1px solid var(--bdr); color: var(--t2); text-decoration: none; background: var(--surface); }
.pagination a:hover { background: var(--s2); }
.pagination .active span { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination .disabled span { color: var(--t4); cursor: not-allowed; }

/* ── Utilities ───────────────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8         { gap: 8px; }
.gap-12        { gap: 12px; }
.gap-16        { gap: 16px; }
.mt-4          { margin-top: 4px; }
.mt-8          { margin-top: 8px; }
.mt-12         { margin-top: 12px; }
.mt-16         { margin-top: 16px; }
.text-sm       { font-size: 14px; }
.text-xs       { font-size: 13px; }
.text-muted    { color: var(--t4); }
.font-mono     { font-family: monospace; }
.w-full        { width: 100%; }

/* ── GST Report tabs ─────────────────────────────────────────── */
.rpt-tabs       { display:flex; gap:2px; background:var(--surface); border:1px solid var(--bdr); border-radius:var(--radius-lg); padding:4px; width:fit-content; margin-bottom:20px; flex-wrap:wrap; }
.rpt-tab        { padding:8px 18px; border-radius:10px; font-size:14px; font-weight:500; color:var(--t3); text-decoration:none; transition:all .15s; white-space:nowrap; }
.rpt-tab:hover  { color:var(--t1); background:var(--s2); }
.rpt-tab.active { background:var(--accent); color:#fff; font-weight:600; }

/* ── Print styles ────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  body      { background: #fff; }
  .inv-paper { border: none; box-shadow: none; }
}

/* ── Mobile item cards + drawer ──────────────────────────────── */
.mob-items-list  { display: none; margin-bottom: 6px; }
.mob-item-card   { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--bdr); border-radius: var(--radius); margin-bottom: 8px; cursor: pointer; transition: background .12s; }
.mob-item-card:hover,
.mob-item-card:active { background: var(--s2); }
.mob-item-info   { flex: 1; min-width: 0; }
.mob-item-name   { font-size: 14px; font-weight: 500; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-item-meta   { font-size: 12px; color: var(--t3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mob-item-total  { font-size: 14px; font-weight: 700; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mob-item-del    { width: 28px; height: 28px; border: none; background: none; color: var(--t4); cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all .12s; flex-shrink: 0; line-height: 1; }
.mob-item-del:hover { background: var(--err-bg); color: var(--err); }

.item-drawer     { position: fixed; inset: 0; background: var(--surface); z-index: 700; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.item-drawer.open { transform: translateX(0); pointer-events: auto; }
.drawer-head     { padding: 14px 18px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.drawer-title    { font-size: 16px; font-weight: 600; color: var(--t1); }
.drawer-close    { background: none; border: none; font-size: 24px; color: var(--t4); cursor: pointer; padding: 0 4px; line-height: 1; transition: color .12s; }
.drawer-close:hover { color: var(--t2); }
.drawer-body     { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px; }
.drawer-foot     { flex-shrink: 0; padding: 14px 18px; border-top: 1px solid var(--bdr); display: flex; gap: 10px; }
.drawer-preview  { background: var(--s2); border: 1px solid var(--bdr); border-radius: var(--radius); padding: 14px 16px; margin-top: 4px; }
.drawer-preview .dp-row  { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.drawer-preview .dp-row span:first-child { color: var(--t3); }
.drawer-preview .dp-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; border-top: 1px solid var(--bdr); margin-top: 8px; padding-top: 8px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   Breakpoints: tablet ≤1024px  |  mobile ≤768px  |  small ≤480px
═══════════════════════════════════════════════════════════════ */

/* ── Mobile top bar — hidden on desktop ─────────────────────── */
.mob-bar        { display: none; }
.mob-placeholder{ width: 64px; }     /* balances the layout when no New btn */

/* ── Sidebar backdrop — hidden by default ───────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,12,20,.58);
  z-index: 590;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-backdrop.visible { display: block; }

/* ══ TABLET  ≤1024px ════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Stat grid: 4 → 2 columns */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* 4-col form rows → 2 columns */
  .form-row-4 { grid-template-columns: 1fr 1fr; }
}

/* ══ MOBILE  ≤768px ════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Base layout ─────────────────────────────────────────── */
  body          { overflow-x: hidden; }
  .app-shell    { flex-direction: column; }
  .main         { height: auto; min-height: 0; overflow: visible; }

  /* ── Sidebar → fixed overlay ────────────────────────────── */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 600;
    width: 240px !important;           /* override collapsed 52px on mobile */
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    box-shadow: none;
  }
  .sidebar.mob-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.35);
  }

  /* Restore all sidebar inner elements regardless of collapsed state */
  .app-shell.sidebar-collapsed .sidebar-brand,
  .app-shell.sidebar-collapsed .sidebar-new-btn,
  .app-shell.sidebar-collapsed .nav-section,
  .app-shell.sidebar-collapsed .user-info,
  .app-shell.sidebar-collapsed .logout-label { display: revert !important; }
  .app-shell.sidebar-collapsed .nav-label    { display: inline !important; }
  .app-shell.sidebar-collapsed .sidebar-logo { padding: 16px 14px 14px !important; justify-content: space-between !important; }
  .app-shell.sidebar-collapsed .nav-item     { justify-content: flex-start !important; padding: 10px 20px !important; }
  .app-shell.sidebar-collapsed .user-panel   { justify-content: flex-start !important; padding: 8px 10px !important; }
  .app-shell.sidebar-collapsed .logout-btn   { justify-content: flex-start !important; padding: 9px 10px !important; }

  /* Hide the desktop sidebar toggle inside the sidebar on mobile */
  .sidebar-toggle { display: none; }

  /* ── Mobile top bar ─────────────────────────────────────── */
  .mob-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 54px;
    background: var(--sidebar);
    position: sticky;
    top: 0;
    z-index: 500;
    flex-shrink: 0;
  }
  .mob-hamburger {
    width: 36px; height: 36px;
    background: none; border: none;
    color: rgba(255,255,255,.72);
    cursor: pointer;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
  }
  .mob-hamburger:hover,
  .mob-hamburger:active { background: rgba(255,255,255,.12); color: #fff; }
  .mob-brand {
    font-family: var(--font-head);
    font-size: 19px;
    color: #fff;
    letter-spacing: .2px;
  }
  .mob-new-btn {
    padding: 7px 13px;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .mob-new-btn:hover { background: var(--accent-h); }

  /* ── Page ───────────────────────────────────────────────── */
  .page         { padding: 16px; }
  .page-head    { margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
  .page-title   { font-size: 21px; }
  .page-subtitle{ font-size: 13px; }

  /* Flash messages — override inline padding */
  .flash-wrap   { padding: 12px 16px 0 !important; }

  /* ── Stat grid: 2×2 (override any inline grid-template-columns) ── */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    margin-bottom: 16px;
  }
  .stat-card    { padding: 16px 14px; }
  .stat-value   { font-size: 20px; }

  /* Dashboard quick-info row (3-col inline grid → 1-col) */
  .quick-info-grid { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ── Form grids → single column ─────────────────────────── */
  .form-row-2,
  .form-row-3,
  .form-row-4   { grid-template-columns: 1fr; }

  /* ── Cards ───────────────────────────────────────────────── */
  .card-header  { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
  .card-body    { padding: 16px; }

  /* ── Toolbar / filters ───────────────────────────────────── */
  .toolbar      { gap: 8px; }
  .filter-pills {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .filter-pills::-webkit-scrollbar { display: none; }

  /* ── Tables: horizontal scroll + first-col sticky ───────── */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
  }
  /* Sticky first column in list tables */
  table.tbl th:first-child,
  table.tbl td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 1;
  }
  table.tbl th:first-child { background: var(--s2); }

  /* Reduce cell padding on mobile */
  table.tbl th  { padding: 10px 14px; font-size: 11px; }
  table.tbl td  { padding: 12px 14px; font-size: 13px; }

  /* ── Pagination ───────────────────────────────────────────── */
  .pagination   { flex-wrap: wrap; gap: 4px; padding: 14px 0 2px; }
  .pagination a,
  .pagination span { padding: 5px 10px; font-size: 13px; }

  /* ── Report tabs: horizontal scroll ─────────────────────── */
  .rpt-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    width: 100%;
    scrollbar-width: none;
  }
  .rpt-tabs::-webkit-scrollbar { display: none; }
  .rpt-tab { flex-shrink: 0; padding: 8px 14px; }

  /* ── Modals: full-screen below mob-bar ───────────────────── */
  .modal-overlay {
    align-items: stretch;
    padding: 0;
    padding-top: 54px;        /* clear the sticky mob-bar */
  }
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  /* form sits between modal-box and modal-body — must fill remaining height */
  .modal-box > form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .modal-head { flex-shrink: 0; }
  .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-foot {
    flex-shrink: 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  /* ── Buttons ─────────────────────────────────────────────── */
  .btn    { font-size: 13px; }
  .btn-sm { padding: 6px 11px; font-size: 12px; }

  /* ── Invoice builder ─────────────────────────────────────── */
  .inv-builder-wrap { flex-direction: column !important; padding: 12px !important; gap: 0 !important; }

  /* inv-band: stack company info + invoice meta */
  .inv-band { grid-template-columns: 1fr !important; padding: 20px 18px 16px !important; }
  .inv-meta { text-align: left !important; margin-top: 14px !important; }
  .inv-num-input { width: 100% !important; text-align: left !important; font-size: 18px !important; }
  .inv-date-row { justify-content: flex-start !important; flex-wrap: wrap !important; gap: 10px !important; }
  .inv-date-block .dl { text-align: left !important; }

  /* inv-parties: single column */
  .inv-parties { grid-template-columns: 1fr !important; padding: 16px 18px !important; gap: 14px !important; }

  /* inv-items: swap table for card list */
  .inv-items { padding: 0 14px !important; }
  .col-chips { display: none !important; }
  .inv-items .table-wrap { display: none !important; }
  .mob-items-list { display: block !important; }

  /* inv-footer: single column, totals on top */
  .inv-footer { grid-template-columns: 1fr !important; padding: 14px 18px !important; gap: 14px !important; }
  .inv-footer > .totals-block { order: -1 !important; }

  /* inv-actions: fixed bottom action bar */
  .inv-actions {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
    width: auto !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--bdr) !important;
    border-radius: 0 !important;
    z-index: 400 !important;
    flex-direction: row !important;
    padding: 0 !important;
    gap: 0 !important;
    align-self: auto !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08) !important;
  }
  .inv-actions > .act-card:nth-child(1),
  .inv-actions > .act-card:nth-child(3) { display: none !important; }
  .inv-actions > .act-card:nth-child(2) {
    padding: 8px 12px !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  .inv-actions > .act-card:nth-child(2) .act-card-title { display: none !important; }
  .inv-actions .act-list {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
  }
  .inv-actions .act-list::-webkit-scrollbar { display: none !important; }
  .inv-actions .act-btn {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    flex-shrink: 0 !important;
    width: auto !important;      /* override desktop width:100% */
  }
  .inv-actions .act-list > form { flex-shrink: 0 !important; }
  .inv-actions .act-list > form .act-btn { width: auto !important; }

  /* Left column: bottom padding to clear fixed action bar */
  .inv-left-col { padding-bottom: 72px !important; }

  /* Item drawer offset below mob-bar */
  .item-drawer { top: 54px !important; }
  .drawer-body .form-row { grid-template-columns: 1fr 1fr !important; }
  .drawer-foot { padding-bottom: max(14px, env(safe-area-inset-bottom)) !important; }
}

/* ══ SMALL PHONE  ≤480px ════════════════════════════════════════ */
@media (max-width: 480px) {

  .page         { padding: 12px; }
  .stat-card    { padding: 14px 12px; }
  .stat-value   { font-size: 18px; }
  .stat-label   { font-size: 11px; }
  .page-title   { font-size: 19px; }

  /* 4-col form rows stay 2-col even on small phones */
  .form-row-4   { grid-template-columns: 1fr 1fr; }

  table.tbl th  { padding: 9px 12px; }
  table.tbl td  { padding: 10px 12px; }

  .mob-brand    { font-size: 17px; }
}