/* ── Mobile stability — prevent layout shift / address bar bounce ─── */
html {
  height: -webkit-fill-available;
  height: fill-available;
  scroll-behavior: auto;
}
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: fill-available;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#mainApp {
  overscroll-behavior: none;
}
/* Prevent iOS Safari address bar bounce */
.acc-main, .stg-body, .master-table-wrap, .master-form-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* ═══════════════════════════════════════════════════════════════════
   SSR MTM ACCOUNTS — pms.css  v15
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --blue:   #1e40af;
  --grad:   linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  --sb-w:   150px;
  --sb-c:   52px;
  --border: #e2e8f0;
  --bg:     #f1f5f9;
  --card:   #ffffff;
  --txt:    #0f172a;
  --txt2:   #475569;
  --txt3:   #94a3b8;
  --r:      6px;
  --sh:     0 1px 4px rgba(0,0,0,.08);
  --font:   'Inter', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font); background: var(--bg); color: var(--txt); margin: 0; }
#mainApp { display: none !important; }
#mainApp.authenticated { display: flex !important; min-height: 100vh; }
@keyframes fadeIn { from { opacity:0; transform:translateY(3px) } to { opacity:1; transform:none } }

/* ══ SIDEBAR ══════════════════════════════════════════════════════════ */
#leftSidebar {
  width: var(--sb-w); min-height: 100vh;
  background: linear-gradient(180deg, #1e3a5f 0%, #1e40af 50%, #1d4ed8 100%);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
  transition: width .2s ease; overflow: hidden;
  box-shadow: 2px 0 12px rgba(0,0,0,.18);
}
#leftSidebar.lsb--collapsed { width: var(--sb-c); }
#leftSidebar.lsb--collapsed .lsb-brand-name,
#leftSidebar.lsb--collapsed .lsb-label,
#leftSidebar.lsb--collapsed .lsb-clock-text,
#leftSidebar.lsb--collapsed .lsb-nav-section-label { display: none !important; }

.lsb-brand { display:flex; align-items:center; justify-content:space-between; padding:14px 12px 12px; border-bottom:1px solid rgba(255,255,255,.15); flex-shrink:0; }
.lsb-brand-inner { display:flex; align-items:center; gap:8px; }
.lsb-logo { color:#fbbf24; font-size:1.1rem; }
.lsb-brand-name { color:#fff; font-weight:800; font-size:.88rem; white-space:nowrap; }
.lsb-toggle { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); color:#fff; width:22px; height:22px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lsb-toggle:hover { background:rgba(255,255,255,.25); }

.lsb-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:6px 0; scrollbar-width:none; }
.lsb-nav::-webkit-scrollbar { display:none; }
.lsb-nav-section-label { padding:8px 12px 2px; font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); white-space:nowrap; display:block; }
.lsb-item { display:flex; align-items:center; gap:9px; padding:7px 10px; margin:1px 6px; border-radius:var(--r); color:rgba(255,255,255,.6); cursor:pointer; font-size:.79rem; font-weight:500; transition:background .12s,color .12s; white-space:nowrap; border:none; background:none; width:calc(100% - 12px); text-decoration:none; }
.lsb-item:hover { background:rgba(255,255,255,.1); color:#fff; }
.active-lsb { background:rgba(255,255,255,.2) !important; color:#fff !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.lsb-icon { display:flex; align-items:center; flex-shrink:0; }
/* Sidebar voucher buttons */
.lsb-vch-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 2px 6px;
  border-radius: var(--r);
  cursor: pointer;
  border: none;
  background: rgba(255,255,255,.06);
  width: calc(100% - 12px);
  text-decoration: none;
  transition: background .12s;
}
.lsb-vch-btn:hover { background: rgba(255,255,255,.14); }
.lsb-vch-dot {
  width: 8px; height: 8px;
  border-radius: 50%;

}

.lsb-vch-name {
  flex: 1;
  font-size: .79rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}
.lsb-vch-key {
  font-size: .62rem;
  font-weight: 700;
  color: rgba(255,255,255,.35);
  letter-spacing: .04em;
  font-family: monospace;
}
.lsb-bottom { padding:8px 0 10px; border-top:1px solid rgba(255,255,255,.15); flex-shrink:0; }
.lsb-clock { padding:5px 10px; font-size:.68rem; color:rgba(255,255,255,.45); display:flex; align-items:flex-start; gap:8px; }
.lsb-clock-text { line-height:1.5; }
.lsb-user { cursor:default !important; font-size:.78rem !important; }
.lsb-logout { color:rgba(239,68,68,.75) !important; }
.lsb-logout:hover { background:rgba(239,68,68,.12) !important; color:#f87171 !important; }

/* ══ MAIN CONTENT ════════════════════════════════════════════════════ */
.main-content, #mainContent {
  margin-left: var(--sb-w);
  width: calc(100% - var(--sb-w));
  min-height: 100vh;
  transition: margin-left .2s ease, width .2s ease;
  display: block;
}

#leftSidebar.lsb--collapsed ~ #mainContent,
#leftSidebar.lsb--collapsed ~ .main-content {
  margin-left: var(--sb-c);
  width: calc(100% - var(--sb-c));
}
.container-fluid.px-2 {
  width: 100% !important; max-width: 100% !important;
  padding: 14px 16px 0 16px !important;
  margin: 0 !important; box-sizing: border-box !important;
}
.nav-scroll-wrapper, #navUserBadge { display: none !important; }
.module { display: none !important; width: 100%; }
.active-module { display: block !important; animation: fadeIn .13s ease; }


/* ══ UNIFIED PAGE CARD — all 3 pages same height & border ══════════ */
.acc-layout, #masterMod, #settingsMod {
  width: 100% !important; max-width: 1200px !important;
  margin-left: auto !important; margin-right: auto !important;
  height: calc(100vh - 28px - 14px); /* viewport minus container top padding */
  border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--sh);
  background: var(--card); box-sizing: border-box;
  display: flex; flex-direction: column;
  overflow: hidden; /* children handle their own scroll */
}
/* Only apply flex layout when the module is active — avoids ID specificity overriding display:none */
/* Active modules need flex-col since layout is flex-col */
#masterMod.active-module,
#settingsMod.active-module {
  display: flex !important;
  flex-direction: column;
}


/* ══ UNIFIED PAGE HEADER — identical gradient bar ═══════════════════ */
.acc-top-bar, .page-hdr, .stg-header {
  background: var(--grad); color: #fff; padding: 0; width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
}

.acc-title-row, .page-hdr-inner, .stg-header-title {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; flex-wrap: wrap; min-height: 44px;
}
.acc-title-text, .page-hdr-title, .stg-header h5 {
  font-weight: 700 !important; font-size: .9rem !important;
  color: #fff !important; margin: 0 !important; line-height: 1.3;
}
.page-hdr-sub, .stg-header-sub { font-size: .68rem; color: rgba(255,255,255,.65); display:block; margin-top:1px; }
.page-hdr-right { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:auto; }
.acc-title-icon, .stg-header-icon { display:flex; align-items:center; opacity:.9; }
.hdr-stat { font-size:.75rem; color:rgba(255,255,255,.7); }
.hdr-stat b { color:#fff; }
.hdr-btn, .acc-vch-btn {
  padding:5px 12px; border-radius:var(--r); font-size:.73rem; font-weight:600;
  cursor:pointer; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.13);
  color:#fff; transition:background .12s; white-space:nowrap; font-family:var(--font);
}
.hdr-btn:hover, .acc-vch-btn:hover { background:rgba(255,255,255,.24); }
.acc-vch-receipt { background:rgba(16,185,129,.2) !important; }
.acc-vch-payment { background:rgba(59,130,246,.2) !important; }
.acc-vch-contra  { background:rgba(245,158,11,.2) !important; }
.acc-vch-journal { background:rgba(100,116,139,.2) !important; }
.acc-vch-divider { width:1px; height:18px; background:rgba(255,255,255,.2); margin:0 2px; flex-shrink:0; }
.acc-title-btns { display:flex; align-items:center; gap:4px; }

/* ══ DATE BAR — white theme ═════════════════════════════════════════ */
.acc-date-bar {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; flex-wrap: wrap;
  position: -webkit-sticky;
  position: sticky;
  top: 44px;
  z-index: 99;
}

.acc-date-left { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.acc-date-input {
  background:#f8fafc; border:1px solid var(--border); color:var(--txt);
  border-radius:var(--r); padding:5px 9px; font-size:.77rem; width:100px; font-family:var(--font);
}
.acc-date-input:focus { outline:none; border-color:#93c5fd; background:#fff; }
.acc-date-btn {
  padding:5px 12px; border-radius:var(--r); font-size:.73rem; font-weight:600;
  border:1px solid var(--border); background:#f1f5f9; color:var(--txt2);
  cursor:pointer; font-family:var(--font); transition:background .12s;
}
.acc-date-btn:hover { background:#e2e8f0; color:var(--txt); }
.acc-date-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.acc-date-right-search { flex:1; min-width:160px; }

/* The original search input — white theme */
.acc-date-search-input {
  font-size: .85rem; font-weight: 500;
  width:100%; padding:6px 12px;
  background:#f8fafc; border:1px solid var(--border);
  color:var(--txt); border-radius:var(--r);
  font-size:.79rem; font-family:var(--font);
}
.acc-date-search-input:focus { outline:none; border-color:#3b82f6; background:#fff; box-shadow:0 0 0 2px rgba(59,130,246,.1); }
.acc-date-search-input::placeholder { color:var(--txt3); }

/* ══ MASTER FILTER BAR ══════════════════════════════════════════════ */
.page-bar {
  background:#fff; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px; padding:8px 16px; flex-wrap:wrap;
}
.bar-search { flex:1; min-width:150px; max-width:260px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--r); font-size:.8rem; color:var(--txt); background:#f8fafc; outline:none; font-family:var(--font); }
.bar-search:focus { border-color:#93c5fd; background:#fff; }
.bar-select { padding:6px 10px; border:1px solid var(--border); border-radius:var(--r); font-size:.78rem; color:var(--txt); background:#f8fafc; cursor:pointer; font-family:var(--font); }

/* ══ SETTINGS TABS ══════════════════════════════════════════════════ */
.stg-tabs { display:flex; background:#fff; border-bottom:2px solid var(--border); overflow-x:auto; scrollbar-width:none; padding:0 8px; gap:2px; flex-shrink:0; position:sticky; top:52px; z-index:99; }
.stg-header { flex-shrink:0; }
.stg-tabs::-webkit-scrollbar { display:none; }
.stg-tab { display:flex; align-items:center; gap:5px; padding:10px 14px; font-size:.78rem; font-weight:600; color:var(--txt2); background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; white-space:nowrap; font-family:var(--font); transition:color .12s; }
.stg-tab:hover { color:var(--blue); }
.stg-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.stg-tab-icon { font-size:.9rem; }
.settings-section { display:none; }

/* ══ PAGE BODY AREAS ════════════════════════════════════════════════ */
.stg-body { background:#f8fafc; padding:10px 14px 40px; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  flex: 1;
}
.fin-dash  { padding:14px 16px; background:#fff; }
.acc-main  { min-width:0; flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:40px; }
.stg-section { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:10px 12px; margin-bottom:10px; }
.stg-section-hdr { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.stg-section-hdr-icon { font-size:.95rem; }
.stg-section-title { font-weight:700; font-size:.83rem; color:var(--txt); margin:0; }

/* ══ MASTERS ════════════════════════════════════════════════════════ */
.master-body { display:grid; grid-template-columns:1fr 290px; min-height:calc(100vh - 130px); }
.master-table-wrap { border-right:1px solid var(--border); overflow:auto; max-height:calc(100vh - 130px); }
.master-form-wrap { background:#f8fafc; padding:14px 16px; overflow-y:auto; max-height:calc(100vh - 130px); display:flex; flex-direction:column; gap:12px; }
.form-card { background:#fff; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.form-card-hdr { background:var(--grad); color:#fff; padding:10px 14px; font-weight:700; font-size:.83rem; }
.form-card-body { padding:14px; }
.fld { margin-bottom:10px; }
.fld-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.fld-lbl { display:block; font-size:.68rem; font-weight:700; color:var(--txt2); margin-bottom:3px; text-transform:uppercase; letter-spacing:.04em; }
.opt { font-weight:400; text-transform:none; opacity:.6; }
.fld-inp { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:var(--r); font-size:.81rem; color:var(--txt); background:#fff; outline:none; font-family:var(--font); }
.fld-inp:focus { border-color:#93c5fd; box-shadow:0 0 0 2px rgba(59,130,246,.12); }
.fld-err { color:#dc2626; font-size:.7rem; margin-top:2px; }
.btn-primary-full { width:100%; padding:9px; background:var(--grad); color:#fff; border:none; border-radius:var(--r); font-weight:700; font-size:.84rem; cursor:pointer; font-family:var(--font); }
.quick-guide { margin-top:12px; padding:10px 12px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:var(--r); font-size:.72rem; color:#1e40af; line-height:1.7; }
.danger-zone { background:#fff; border:1px solid #fca5a5; border-radius:var(--r); padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.danger-lbl { color:#dc2626; font-size:.78rem; font-weight:700; }
.danger-sub { font-size:.7rem; color:var(--txt3); margin:2px 0 0; }
.btn-danger-sm { padding:5px 14px; background:#dc2626; color:#fff; border:none; border-radius:var(--r); font-weight:700; font-size:.76rem; cursor:pointer; font-family:var(--font); }
.audit-panel { background:#f0fdf4; border-bottom:1px solid #86efac; padding:10px 14px; font-size:.8rem; }
.audit-panel-hdr { display:flex; justify-content:space-between; align-items:center; font-weight:700; color:#166534; margin-bottom:6px; }
.audit-panel-hdr button { background:none; border:none; cursor:pointer; color:#64748b; font-size:1rem; }
.tbl-empty { padding:36px !important; text-align:center !important; color:var(--txt3); font-size:.84rem; }

/* ══ QUICK REPORTS PANEL (inside #accDashboard) ═════════════════════ */
.qr-panel { background:#fff; padding-bottom:16px; }
.qr-panel-hdr {
  display:flex; align-items:center; gap:7px;
  padding:14px 16px 10px;
  font-size:.72rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--txt2);
  border-bottom:1px solid #f1f5f9; margin-bottom:12px;
}
.qr-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:10px; padding:0 16px;
}
.qr-btn {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:14px 14px 12px; border:1px solid transparent;
  border-radius:var(--r); cursor:pointer; text-align:left;
  font-family:var(--font); transition:box-shadow .13s,transform .1s;
  background:none;
}
.qr-btn:hover  { box-shadow:0 4px 14px rgba(0,0,0,.1); transform:translateY(-2px); }
.qr-btn:active { transform:translateY(0); box-shadow:none; }
.qr-icon { font-size:1.5rem; margin-bottom:6px; line-height:1; }
.qr-name { font-size:.82rem; font-weight:700; color:var(--txt); line-height:1.2; }
.qr-desc { font-size:.68rem; color:var(--txt3); font-weight:500; margin-top:2px; }
.qr-blue    { background:#eff6ff; border-color:#bfdbfe; } .qr-blue:hover    { border-color:#93c5fd; }
.qr-indigo  { background:#eef2ff; border-color:#c7d2fe; } .qr-indigo:hover  { border-color:#a5b4fc; }
.qr-green   { background:#f0fdf4; border-color:#bbf7d0; } .qr-green:hover   { border-color:#86efac; }
.qr-purple  { background:#faf5ff; border-color:#e9d5ff; } .qr-purple:hover  { border-color:#c4b5fd; }
.qr-sky     { background:#f0f9ff; border-color:#bae6fd; } .qr-sky:hover     { border-color:#7dd3fc; }
.qr-emerald { background:#ecfdf5; border-color:#a7f3d0; } .qr-emerald:hover { border-color:#6ee7b7; }
.qr-red     { background:#fff1f2; border-color:#fecdd3; } .qr-red:hover     { border-color:#fda4af; }
.qr-amber   { background:#fffbeb; border-color:#fde68a; } .qr-amber:hover   { border-color:#fcd34d; }

/* acc-section no margin */
.acc-section { margin-bottom:0; }

/* ══ REPORTS / TABLES ═══════════════════════════════════════════════ */
.acc-rpt { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.acc-rpt-hdr { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; background:#f0f4ff; border-bottom:2px solid #c7d2fe; }
.acc-rpt-hdr-title { font-weight:700; font-size:.82rem; color:#3730a3; }
.acc-rpt-hdr-tools { display:flex; align-items:center; gap:6px; }
.acc-rpt-period { font-size:.67rem; color:#6366f1; font-weight:600; }
.acc-tbl { width:100%; border-collapse:collapse; font-size:.84rem; font-weight:500; color:#111; }
.acc-tbl thead tr { background:#f8fafc; }
.acc-tbl th { padding:8px 12px; text-align:left; font-weight:700; font-size:.70rem; letter-spacing:.04em; text-transform:uppercase; color:#374151; border-bottom:2px solid #d1d5db; }
.acc-tbl td { padding:8px 12px; border-bottom:1px solid #ebebeb; color:#111; vertical-align:middle; font-weight:500; }
.acc-tbl tr:hover td { background:#f8fafc; }
.acc-tbl .row-grp td { background:#f0f2f5; font-weight:700; cursor:pointer; color:#111; }
.acc-tbl .row-sub td { padding-left:24px !important; font-size:.78rem; cursor:pointer; }
.acc-tbl .row-total td { background:#f5f5f5; font-weight:700; border-top:1px solid #9ca3af; }
.acc-tbl .row-grand td { background:#f5f5f5; font-weight:800; border-top:2px solid #000; }
.acc-tbl .amt { text-align:right !important; font-weight:600; } .text-c { text-align:center; }
.acc-tbl .cr { color:#111; font-weight:600; }
.acc-tbl .dr { color:#111; font-weight:600; }
.w100 { width:100%; }
.acc-sec { margin-bottom:14px; border:1px solid var(--border); border-radius:var(--r); overflow:auto; }
.acc-sec-title { padding:6px 12px; background:#f8fafc; font-size:.67rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txt2); border-bottom:1px solid var(--border); }
.t-wrap { display:grid; grid-template-columns:1fr 1fr; }
.t-col + .t-col { border-left:1px solid var(--border); }
.t-col-hdr { padding:8px 14px; background:#f8fafc; font-weight:700; font-size:.77rem; color:var(--txt2); border-bottom:1px solid var(--border); }
.t-row { display:flex; justify-content:space-between; align-items:center; padding:5px 14px; border-bottom:1px solid #f1f5f9; font-size:.81rem; }
.t-row:hover { background:#f8fafc; }
.t-row-grp { background:#f0f0f0; font-weight:700; cursor:pointer; border-bottom:1px solid #ddd; }
.t-row-sub { padding-left:24px; font-size:.78rem; cursor:pointer; }
.t-row-total { background:#f4f4f5; font-weight:700; border-top:1px solid #9ca3af; border-bottom:1px solid #9ca3af; padding:7px 14px; }
.t-row-grand { background:#f5f5f5; font-weight:800; border-top:2px solid #000; font-size:.84rem; }
.t-sep { padding:4px 14px; background:#f4f4f5; font-size:.65rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--txt2); border-bottom:1px solid var(--border); }
.rpt-footer { text-align:center; padding:8px; font-size:.79rem; font-weight:600; border-top:1px solid var(--border); }
.rpt-footer.ok { color:#16a34a; background:#f0fdf4; }
.rpt-footer.err { color:#dc2626; background:#fff5f5; }
.site-btn-csv   { padding:3px 10px; border:none; border-radius:5px; font-size:.69rem; font-weight:700; cursor:pointer; background:var(--blue); color:#fff; font-family:var(--font); }
.site-btn-print { padding:3px 10px; border:1px solid var(--border); border-radius:5px; font-size:.69rem; font-weight:700; cursor:pointer; background:#fff; color:var(--txt2); font-family:var(--font); }
.rpt-detail-chk { font-size:.74rem; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.rpt-pill, .log-badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:.69rem; font-weight:700; }

/* ══ SETTINGS LOGO ══════════════════════════════════════════════════ */
.stg-logo-wrap { display:flex; align-items:flex-start; gap:12px; }
.stg-logo-preview { max-height:60px; max-width:160px; border-radius:4px; border:1px solid var(--border); }
.stg-logo-placeholder { width:100px; height:50px; background:#f1f5f9; border:1px dashed var(--border); border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--txt3); font-size:.71rem; }
.stg-logo-btn { padding:5px 12px; background:#fbbf24; color:#000; border:none; border-radius:var(--r); font-weight:700; font-size:.75rem; cursor:pointer; }

/* ══ GLOBAL FORM CONTROLS ═══════════════════════════════════════════ */
.form-control, .form-select { border-radius:var(--r) !important; border-color:var(--border) !important; font-size:.81rem !important; }
.form-control:focus, .form-select:focus { border-color:#93c5fd !important; box-shadow:0 0 0 3px rgba(59,130,246,.15) !important; }
.form-control-sm, .form-select-sm { padding:.34rem .55rem !important; font-size:.77rem !important; }
.ledger-required { border-color:#dc2626 !important; }
.gst-on-txt { color:#16a34a; font-weight:700; }
.gst-off-txt { color:#dc2626; font-weight:700; }
.modal-content { border-radius:10px; border:none; box-shadow:0 8px 32px rgba(0,0,0,.18); }
.modal-header { border-bottom:1px solid var(--border); padding:13px 18px; }
.modal-body { padding:15px 18px; }
.modal-footer { border-top:1px solid var(--border); padding:11px 18px; }

/* ══ AUTOCOMPLETE ═══════════════════════════════════════════════════ */
.acc-drop { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:var(--r); box-shadow:0 4px 20px rgba(0,0,0,.12); max-height:300px; overflow-y:auto; z-index:1200; }
.acc-drop-item { padding:9px 14px; cursor:pointer; font-size:.84rem; font-weight:500; color:var(--txt); }
.acc-drop-item:hover, .acc-drop-active, .acc-drop-focus { background:#eff6ff; color:var(--blue); }
.acc-drop-cat { padding:5px 14px 2px; font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--txt3); background:#f8fafc; border-top:1px solid var(--border); pointer-events:none; }
.acc-drop-empty { padding:14px; text-align:center; color:var(--txt3); }
.acc-filter-wrap { position:relative; }
.acc-dp-btn { padding:5px 10px; border:1px solid var(--border); border-radius:var(--r); background:#f8fafc; cursor:pointer; font-size:.78rem; font-family:var(--font); }
.acc-date-pill { display:flex; align-items:center; gap:5px; padding:5px 10px; border:1px solid rgba(255,255,255,.25); border-radius:var(--r); background:rgba(255,255,255,.12); color:#fff; cursor:pointer; font-size:.75rem; font-family:var(--font); }
.acc-mob-fab { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); border-radius:var(--r); padding:6px 10px; color:#fff; cursor:pointer; transition:background .12s; }
.acc-mob-fab:hover { background:rgba(255,255,255,.25); }
.bg-hover:hover { background:#f8fafc !important; }
.hide-mobile { display:table-cell; }
.show-mobile-only { display:none; }
#invArea { visibility:hidden; position:absolute; left:0; top:0; }
.pm-bank-sel { font-size:.79rem; }

/* ══ MOBILE BOTTOM NAV — gradient ═══════════════════════════════════ */
#mobileBottomNav {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:linear-gradient(135deg,#1e3a5f 0%,#1e40af 60%,#1d4ed8 100%);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -2px 16px rgba(0,0,0,.22);
  z-index:900; padding:0 0 env(safe-area-inset-bottom,0);
}
.mob-nav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 4px 7px; background:none; border:none;
  color:rgba(255,255,255,.45); font-size:.6rem; font-weight:700; letter-spacing:.02em;
  cursor:pointer; font-family:var(--font); position:relative;
  transition:color .12s,background .12s;
}
.mob-nav-btn:hover { color:rgba(255,255,255,.75); background:rgba(255,255,255,.06); }
.mob-nav-btn.active { color:#fff; }
.mob-nav-btn.active::before {
  content:''; position:absolute; top:0; left:20%; right:20%;
  height:2px; border-radius:0 0 3px 3px; background:#fbbf24;
}
#mobileBottomNav .mob-nav-btn[onclick*="logout"] { color:rgba(252,165,165,.6); }
#mobileBottomNav .mob-nav-btn[onclick*="logout"]:hover { color:#fca5a5; }
.mob-icon { display:flex; }

/* ══ MOBILE VOUCHER DRAWER ══════════════════════════════════════════ */
#accMobMenu {
  border-top:1px solid rgba(255,255,255,.1);
  background:linear-gradient(135deg,#0f2544 0%,#1a3a6e 100%);
  animation:fadeIn .15s ease;
}
.acc-mob-vch-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}
.acc-mob-vch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: var(--font);
  transition: filter .12s;
}
.acc-mob-vch-btn:hover { filter: brightness(.94); }
.acc-mob-rcpt { background:#d1fae5; color:#059669; border:1.5px solid #6ee7b7; border-radius:10px; }
.acc-mob-pay  { background:#dbeafe; color:#2563eb; border:1.5px solid #93c5fd; border-radius:10px; }
.acc-mob-ctr  { background:#fef3c7; color:#d97706; border:1.5px solid #fcd34d; border-radius:10px; }
.acc-mob-jnl  { background:#f1f5f9; color:#1e293b; border:1.5px solid #cbd5e1; border-radius:10px; }
.acc-mob-pur  { background:#fee2e2; color:#EF4444; border:1.5px solid #fca5a5; border-radius:10px; }
.acc-mob-sal  { background:#ede9fe; color:#8B5CF6; border:1.5px solid #c4b5fd; border-radius:10px; }

/* mob-more-btn removed — menu now uses inline styles */

/* ══ RESPONSIVE ══════════════════════════════════════════════════════ */
@media (min-width:768px) and (max-width:900px) {
  #leftSidebar { width:var(--sb-w) !important; }
  .main-content,#mainContent { margin-left:var(--sb-w) !important; width:calc(100% - var(--sb-w)) !important; }
  .container-fluid.px-2 { padding-left:10px !important; padding-right:10px !important; }
  .master-body { grid-template-columns:1fr !important; }
  .master-table-wrap { border-right:none; border-bottom:1px solid var(--border); max-height:50vh; }
  .t-wrap { grid-template-columns:1fr !important; }
  .t-col+.t-col { border-left:none; border-top:2px solid var(--border); }
}
@media (max-width:767px) {
  #leftSidebar { display:none !important; }
  .main-content,#mainContent { margin-left:0 !important; width:100% !important; padding:0 !important; }
  .container-fluid.px-2 { padding:0 !important; }
  #mobileBottomNav { display:flex !important; }
  .module { padding-bottom:0; }
  .active-module { display:block !important; }
  .acc-main, .stg-body, .mst-layout { padding-bottom:80px !important; }
  .hide-mobile { display:none !important; }
  .show-mobile-only { display:table-cell !important; }
  .acc-tbl td { padding:6px 8px !important; font-size:.76rem !important; }
  .acc-tbl th { padding:5px 7px !important; font-size:.61rem !important; letter-spacing:.03em; }
  .master-body { grid-template-columns:1fr !important; }
  .master-table-wrap { border-right:none; border-bottom:1px solid var(--border); max-height:50vh; }
  .t-wrap { grid-template-columns:1fr !important; }
  .t-col+.t-col { border-left:none; border-top:2px solid var(--border); }
  .acc-layout,#masterMod,#settingsMod {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: calc(100vh - 56px); /* full screen minus bottom nav */
  }
  .qr-grid { grid-template-columns:repeat(3,1fr) !important; gap:6px; padding:0 10px 12px; }
  .qr-btn  { padding:12px; }
  .qr-icon { font-size:1.3rem; }
}
@media (max-width:480px) {
  .stg-tab-label { display:none; }
  .acc-title-row,.page-hdr-inner,.stg-header-title { padding:8px 10px; gap:6px; }
  .hdr-btn,.acc-vch-btn { padding:4px 8px; font-size:.7rem; }
}
@media (min-width:768px) {
  #mobileBottomNav { display:none !important; }
  #accMobMenu { display:none !important; }
}
@media print {
  #leftSidebar,#mobileBottomNav,.no-print,.page-hdr,.page-bar,
  .acc-top-bar,.acc-date-bar,.stg-header,.stg-tabs,button { display:none !important; }
  .main-content,#mainContent { margin-left:0 !important; width:100% !important; padding:0 !important; }
  .acc-layout,#masterMod,#settingsMod { border:none !important; box-shadow:none !important; min-height:auto !important; }
  body { background:#fff; }
}
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:99px; }

/* ═══════════════════════════════════════════════════════════════════
   v16 — Mobile Search Modal (accSearchModal) + Search bar white theme
   ═══════════════════════════════════════════════════════════════════ */

/* Full-screen overlay — hidden until JS adds class 'open' */
#accSearchModal {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 56px;
  z-index: 1050;
  flex-direction: column;
  background: #fff;
}
@media (min-width: 768px) {
  #accSearchModal { bottom: 0; }
}
#accSearchModal.open { display: flex !important; }

/* Header strip — gradient matches sidebar/header theme */
.asm-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--grad);

}

.asm-close {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  color: #fff; padding: 7px 13px; border-radius: var(--r);
  font-size: .82rem; font-weight: 700; cursor: pointer; font-family: var(--font);
  white-space: nowrap;
}
.asm-close:hover { background: rgba(255,255,255,.25); }

/* Search input inside modal */
.asm-input {
  flex: 1; padding: 9px 14px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r); color: #fff;
  font-size: 1rem; font-family: var(--font);
  outline: none;
}
.asm-input:focus { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
.asm-input::placeholder { color: rgba(255,255,255,.55); }

/* Scrollable results list */
.asm-list {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Category header rows */
.asm-cat {
  position: sticky; top: 0;
  padding: 7px 16px 5px;
  font-size: .64rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt3);
  background: #f8fafc; border-bottom: 1px solid var(--border);
  z-index: 1;
}

/* Individual result rows — large touch targets for mobile */
.asm-item {
  display: flex; align-items: center;
  padding: 13px 16px;
  font-size: .88rem; color: var(--txt);
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.asm-item:hover, .asm-item:active { background: #eff6ff; color: var(--blue); }
.asm-item strong { color: var(--blue); font-weight: 700; }

/* No results state */
.asm-empty {
  padding: 32px 16px; text-align: center;
  color: var(--txt3); font-size: .9rem; line-height: 1.6;
}

/* On mobile — make the date bar search input clearly tappable */
@media (max-width: 767px) {
  .acc-date-search-input {
  font-size: .85rem; font-weight: 500;
    cursor: pointer !important;
    background: #f0f4ff !important;
    border-color: #c7d2fe !important;
    color: var(--blue) !important;
    font-weight: 600 !important;
  }
  .acc-date-search-input::placeholder { color: var(--blue) !important; opacity: .75; }
  /* Add a search icon hint via padding-left */
  .acc-date-right-search { position: relative; }
}

/* ═══════════════════════════════════════════════════════════════════
   v17 — Masters Page Redesign: inline add-form + full-width table
   ═══════════════════════════════════════════════════════════════════ */

/* ── Inline Add-Ledger Form bar ──────────────────────────────────── */
.mst-add-bar {
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
  padding: 12px 16px 10px;
}
.mst-add-form { margin: 0; }

/* Single row of fields */
.mst-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Each field: label stacked above control */
.mst-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mst-lbl {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--txt2);
  white-space: nowrap;
}

/* All inputs/selects share same height */
.mst-inp {
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: .8rem;
  color: var(--txt);
  background: #fff;
  font-family: var(--font);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.mst-inp:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.1); }

/* Submit button */
.mst-submit-btn {
  height: 34px;
  padding: 0 16px;
  background: var(--grad);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: opacity .12s;
}
.mst-submit-btn:hover { opacity: .88; }

/* Quick guide hint strip */
.mst-guide-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.mst-guide-item { font-size: .7rem; color: var(--txt2); }
.mst-guide-dot  { font-size: .5rem; margin-right: 3px; }
.mst-guide-item b { color: var(--txt); }

/* ── Full-width table (replaces two-column grid) ─────────────────── */
.mst-table-full {
  padding-bottom: 60px;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 260px);  /* header + add-bar + filter-bar + danger */
  -webkit-overflow-scrolling: touch;
}
/* Sticky header while scrolling */
.mst-table-full .acc-tbl thead tr {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  box-shadow: 0 1px 0 var(--border);
}

/* ── Danger Zone — bottom strip ──────────────────────────────────── */
.mst-danger-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid #fecaca;
  background: #fff5f5;
  flex-wrap: wrap;
}
.mst-danger-strip .danger-sub { flex: 1; }

/* Remove old master-body two-column layout (keep classes for safety) */
.master-body { display: block; }
.master-table-wrap, .master-form-wrap { display: none; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mst-field:not(.mst-field-grow):not(.mst-field-sm):not(.mst-field-xs):not(.mst-field-btn) {
    flex: 1 1 140px;
  }
  .mst-field-sm { flex: 0 0 84px; }
  .mst-table-full {
  padding-bottom: 60px; max-height: calc(100vh - 300px); }
}

@media (max-width: 600px) {
  .mst-add-form { gap: 8px; }
  /* On mobile stack to 2 columns */
  .mst-field,
  .mst-field-grow { flex: 1 1 calc(50% - 8px); }
  .mst-field-sm   { flex: 0 0 calc(50% - 8px); }
  .mst-field-xs   { flex: 0 0 calc(50% - 8px); }
  .mst-field-btn  { flex: 1 1 100%; }
  .mst-submit-btn { width: 100%; justify-content: center; }
  .mst-guide-strip { display: none; }   /* hide guide on tiny screens */
  .mst-table-full {
  padding-bottom: 60px; max-height: calc(100vh - 340px); }
}

/* ═══════════════════════════════════════════════════════════════════
   v18 — Masters drill-down tree view
   ═══════════════════════════════════════════════════════════════════ */

/* ── Group header row ────────────────────────────────────────────── */
.mst-grp-hdr {
  cursor: pointer;
  user-select: none;
  border-top: 2px solid var(--border);
  background: #f8fafc;
  transition: background .1s;
}
.mst-grp-hdr:hover { background: #f1f5f9; }

.mst-grp-cell {
  padding: 9px 14px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Caret — rotates when collapsed */
.mst-caret {
  font-size: .7rem;
  color: var(--txt3);
  width: 14px;
  flex-shrink: 0;
  transition: transform .15s;
}

/* Coloured left border matches the group colour via CSS var */
.mst-grp-hdr td {
  border-left: 4px solid var(--gc, #94a3b8) !important;
}

.mst-grp-icon { font-size: 1rem; flex-shrink: 0; }

.mst-grp-name {
  font-weight: 700;
  font-size: .82rem;
  color: var(--gc, var(--txt));
  flex: 1;
}

.mst-grp-cnt {
  font-size: .68rem;
  font-weight: 600;
  color: var(--txt3);
  background: #e2e8f0;
  padding: 1px 7px;
  border-radius: 10px;
}

/* ── Sub-group header row ─────────────────────────────────────────── */
.mst-sgrp-hdr { background: #fff; }
.mst-sgrp-cell {
  padding: 5px 14px 5px 32px !important;
  font-size: .72rem;
  font-weight: 700;
  color: var(--txt3);
  letter-spacing: .03em;
  text-transform: uppercase;
  border-bottom: 1px solid #f1f5f9;
}
.mst-sgrp-indent {
  margin-right: 6px;
  color: var(--border);
  font-size: .85rem;
}

/* ── Ledger rows ─────────────────────────────────────────────────── */
.mst-led-row {
  border-bottom: 1px solid #f8fafc;
  transition: background .1s;
}
.mst-led-row:hover { background: #f8fafc !important; }

/* Direct under group (no sub-group) — slightly indented */
.mst-led-nosub .mst-led-cell { padding-left: 28px !important; }

/* Under a sub-group — more indented */
.mst-led-sub .mst-led-cell { padding-left: 42px !important; }

.mst-led-cell {
  padding: 8px 10px 8px 28px !important;
  vertical-align: middle;
}
.mst-led-action {
  padding: 6px 10px !important;
  text-align: center;
  vertical-align: middle;
  width: 52px;
}

.mst-led-name {
  font-size: .83rem;
  font-weight: 600;
  color: var(--txt);
  display: inline;
}
.mst-led-meta {
  display: block;
  font-size: .68rem;
  color: var(--txt3);
  margin-top: 1px;
  font-weight: 400;
}
.mst-ob-text { color: var(--txt3); }

/* System ledger badge */
.mst-sys-badge {
  display: inline-block;
  font-size: .58rem;
  font-weight: 700;
  background: #fee2e2;
  color: #dc2626;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
  letter-spacing: .03em;
}

/* Edit / lock buttons */
.mst-btn-edit, .mst-btn-lock {
  padding: 4px 9px;
  border-radius: var(--r);
  font-size: .75rem;
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--txt2);
  transition: background .1s;
}
.mst-btn-edit:hover  { background: #eff6ff; border-color: #93c5fd; }
.mst-btn-lock { background: #f8fafc; color: var(--txt3); cursor: not-allowed; }

/* ── Keep table display block for drill-down (no thead/tbody gap) ── */
.mst-table-full table { border-collapse: collapse; }
.mst-table-full .acc-tbl th { font-size: .7rem; }
/* Hide Txns column if still rendered anywhere */
.mst-table-full th:nth-child(3),
.mst-table-full td:nth-child(3),
.mst-table-full th:nth-child(4),
.mst-table-full td:nth-child(4) { display: none; }

/* Mobile: tighten indents */
@media (max-width: 600px) {
  .mst-led-nosub .mst-led-cell { padding-left: 20px !important; }
  .mst-led-sub .mst-led-cell   { padding-left: 30px !important; }
  .mst-grp-name { font-size: .78rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   v18 — Masters drill-down tree styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tree container ──────────────────────────────────────────────── */
.mst-tree-wrap {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 260px);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

/* ── Group block ─────────────────────────────────────────────────── */
.mst-grp {
  border-bottom: 1px solid var(--border);
}
.mst-grp-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
  transition: background .1s;
  border-bottom: 1px solid var(--border);
}
.mst-grp-hdr:hover { background: #f1f5f9; }

.mst-arrow {
  font-size: .65rem;
  color: var(--txt3);
  flex-shrink: 0;
  width: 12px;
  display: inline-block;
  transition: transform .15s;
}
.mst-arrow-sm { font-size: .58rem; }

.mst-grp-icon { font-size: 1rem; flex-shrink: 0; }

.mst-grp-name {
  font-size: .8rem;
  font-weight: 700;
  flex: 1;
}
.mst-grp-count {
  font-size: .68rem;
  background: #e2e8f0;
  color: var(--txt2);
  padding: 1px 7px;
  border-radius: 20px;
  font-weight: 700;

}


/* ── Sub-group block ─────────────────────────────────────────────── */
.mst-sg {}
.mst-sg-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px 7px 32px;
  background: #fafafa;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid #f1f5f9;
  transition: background .1s;
}
.mst-sg-hdr:hover { background: #f1f5f9; }
.mst-sg-name {
  font-size: .77rem;
  font-weight: 600;
  color: var(--txt2);
  flex: 1;
}
.mst-sg-count { background: #f1f5f9; }

/* ── Individual ledger row ───────────────────────────────────────── */
.mst-led {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 8px 44px;
  border-bottom: 1px solid #f8fafc;
  transition: background .1s;
}
.mst-led:hover { background: #f8fafc; }

/* Ledger inside sub-group: deeper indent */
.mst-sg-body .mst-led { padding-left: 56px; }

.mst-led-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.mst-led-name {
  font-size: .83rem;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges */
.mst-sys {
  font-size: .62rem;
  background: #fee2e2;
  color: #dc2626;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;

}

.mst-ob {
  font-size: .68rem;
  color: var(--txt3);
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;

}


/* Edit / lock buttons */
.mst-led-edit, .mst-led-lock {
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: .72rem;
  cursor: pointer;
  background: #fff;
  color: var(--txt2);
  transition: background .1s, border-color .1s;
}
.mst-led-edit:hover { background: #eff6ff; border-color: #93c5fd; }
.mst-led-lock { color: var(--txt3); cursor: not-allowed; }

/* Empty state */
.mst-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--txt3);
  font-size: .9rem;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mst-tree-wrap { max-height: calc(100vh - 310px); }
  .mst-led       { padding: 9px 12px 9px 36px; }
  .mst-sg-body .mst-led { padding-left: 46px; }
  .mst-sg-hdr   { padding-left: 28px; }
  .mst-grp-hdr  { padding: 10px 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   Company Info Form — clean grid layout
   ══════════════════════════════════════════════════════════════════ */
/* ── Company Info form ──────────────────────────────────────────────── */
/* ══ SETTINGS PAGE — Compact & Consistent ══════════════════════════════ */

/* Body area — reduce outer padding on mobile */
.stg-body { padding: 8px 10px 40px; }
@media (min-width: 768px) { .stg-body { padding: 12px 16px 40px; } }

/* Remove double-border: settings-section inside stg-body already has card */
.settings-section > .stg-section { margin-bottom: 0; }
.settings-section { margin-bottom: 10px; }

/* ── Company Info grid ───────────────────────────── */
.ci-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
.ci-col { display: flex; flex-direction: column; gap: 0; }

.ci-group-lbl {
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt3);
  margin: 10px 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}
.ci-group-lbl:first-child { margin-top: 0; }

.ci-pair { display: flex; gap: 8px; }
.ci-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; min-width: 0; margin-bottom: 6px; }
.ci-lbl { font-size: .69rem; font-weight: 700; color: var(--txt2); }
.ci-hint { font-weight: 400; color: var(--txt3); font-size: .66rem; }
.ci-req  { color: #ef4444; }

/* Unified input — same as vch-inp */
.ci-inp {
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: .81rem;
  color: var(--txt);
  background: var(--card);
  font-family: var(--font);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.ci-inp:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.12); }
textarea.ci-inp { height: auto; padding: 7px 9px; }

/* Logo card — compact */
.ci-logo-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 8px;
}
.ci-logo-hint { font-size: .65rem; color: var(--txt3); }

/* ── Unified settings button ─────────────────────── */
/* All action buttons in settings share one style */
.stg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--r);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  border: 1px solid var(--border);
  background: #f8fafc;
  color: var(--txt);
  transition: background .12s;
  white-space: nowrap;
}
.stg-btn:hover { background: #e2e8f0; }
.stg-btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.stg-btn-primary:hover { background: #1d4ed8; }
.stg-btn-danger  { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.stg-btn-danger:hover  { background: #fecaca; }

/* Upload / remove logo — use stg-btn style */
.ci-upload-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; background: #f1f5f9; border: 1px solid var(--border);
  border-radius: var(--r); font-size: .74rem; font-weight: 600;
  color: var(--txt); cursor: pointer;
}
.ci-upload-btn:hover { background: #e2e8f0; }
.ci-remove-btn {
  padding: 6px 12px; background: #fee2e2; border: 1px solid #fca5a5;
  border-radius: var(--r); font-size: .74rem; font-weight: 600;
  color: #dc2626; cursor: pointer;
}

/* Save button = primary */
.ci-save-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 20px; background: #2563eb; color: #fff;
  border: none; border-radius: var(--r); font-size: .82rem; font-weight: 700;
  cursor: pointer; font-family: var(--font); transition: background .12s;
}
.ci-save-btn:hover { background: #1d4ed8; }

/* Mobile: stack columns */
@media (max-width: 768px) {
  .ci-grid { grid-template-columns: 1fr; gap: 12px; }
  .ci-pair { gap: 6px; }
}

/* ── Log quick-filter buttons ──────────────────────────────────────────── */

.lg-qf {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: .74rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s;
}
.lg-qf:hover { background: #e2e8f0; color: #1e293b; }
.lg-qf.active { background: #1e40af; color: #fff; border-color: #1e40af; }

/* Log user dropdown — prevent arrow overlapping text */
#lg_user { padding-right: 28px; min-width: 110px; max-width: 160px; }

/* Dashboard button in accounts header */
.acc-dash-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  margin-left: 8px;
  transition: background .15s;
  white-space: nowrap;
}
.acc-dash-btn:hover { background: rgba(255,255,255,.25); }

/* ── Masters two-panel layout ───────────────────────────────────────────── */
.mst-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: start;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mst-create-panel {
  border-right: 2px solid var(--border);
  background: var(--bg);
  padding: 12px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Sticky within the grid — stays fixed while ledger list scrolls */
  position: sticky;
  top: 0;
  align-self: start;
  max-height: calc(100vh - 100px); /* header(50px) + some buffer */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mst-list-panel {
  display: flex;
  flex-direction: column;
  background: var(--card);
}

/* Create section card */
.mst-create-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.mst-create-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg,#1e3a5f,#1e40af);
  color: #fff;
}
.mst-create-hdr-icon {
  width: 30px; height: 30px;
  background: rgba(255,255,255,.2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; flex-shrink: 0;
}

.mst-create-title { font-weight: 700; font-size: .88rem; }
.mst-create-sub   { font-size: .68rem; opacity: .75; }
.mst-mode-toggle {
  margin-left: auto;
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  color: #fff;
  font-size: .72rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  font-family: var(--font);
  transition: background .15s;
}
.mst-mode-toggle:hover { background: rgba(255,255,255,.28); }

/* Form fields inside create panel */
.mst-single-form { padding: 10px 12px 0; display: flex; flex-direction: column; gap: 8px; }
#mst-bulk-section > *:not(.mst-create-hdr) { padding: 0 14px; }
#mst-bulk-section > .mst-fld { padding: 6px 14px 0; }
#mst-bulk-section > #bulk_rows { padding: 6px 14px; }
#mst-bulk-section .mst-create-btn { margin: 10px 14px 0; width: calc(100% - 28px); }
.mst-fld { display: flex; flex-direction: column; gap: 3px; }
.mst-fld-row { display: flex; gap: 8px; }
.mst-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--txt2); }
.mst-opt { font-weight: 400; opacity: .6; font-size: .62rem; }
.mst-req { color: #ef4444; }
.mst-inp {
  height: 34px; padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: .81rem; color: var(--txt);
  background: var(--card); font-family: var(--font);
  outline: none; width: 100%; box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.mst-inp:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.1); }
.mst-create-btn {
  display: block;
  width: 100%; margin: 10px 0 0;
  padding: 11px 16px; border: none; border-radius: 8px;
  background: #1e40af;
  color: #fff; font-size: .84rem; font-weight: 700;
  text-align: center; letter-spacing: .01em;
  cursor: pointer; font-family: var(--font);
  transition: background .15s, box-shadow .15s;
}
.mst-create-btn:hover { background: #1d3fa5; box-shadow: 0 4px 14px rgba(30,64,175,.35); }
.mst-create-btn:active { background: #1e3a8a; }
.mst-create-btn:disabled { opacity: .55; cursor: not-allowed; }
.mst-add-row-btn {
  display: flex; align-items: center; gap: 4px;
  margin: 8px 14px 0;
  padding: 8px 12px;
  background: #f0fdf4; border: 1px dashed #86efac;
  border-radius: var(--r); color: #16a34a;
  font-size: .75rem; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: background .12s;
}
.mst-add-row-btn:hover { background: #dcfce7; }

/* Bulk rows */
.bulk-row {
  display: grid;
  grid-template-columns: 1fr 74px 56px 26px;
  gap: 5px; align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.bulk-del-btn {
  width: 26px; height: 26px; flex-shrink: 0;
  background: #fee2e2; border: none; border-radius: 4px;
  color: #dc2626; font-size: .8rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.bulk-del-btn:hover { background: #fecaca; }

/* Guide strip in create panel */
.mst-guide-strip {
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.mst-guide-strip-title {
  font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt3);
  margin-bottom: 8px; display: block;
}
.mst-guide-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  font-size: .7rem; color: var(--txt2);
  padding: 3px 0;
  border-bottom: 1px solid #f1f5f9;
}
.mst-guide-item:last-child { border-bottom: none; }
.mst-guide-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 4px; flex-shrink: 0;
  display: inline-block;
}
.mst-guide-item b { color: var(--txt); font-size: .68rem; display: block; }

/* List panel header */
.mst-list-hdr {
  padding: 10px 14px;
  border-bottom: 2px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); flex-shrink: 0;
}

.mst-list-title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .85rem; color: var(--txt);
}
.mst-list-filters { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }

/* Table wrapper fills remaining space */
.mst-table-wrap {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0; /* flex child must have this for overflow to work */
}

/* Mobile: stack panels */
@media (max-width: 768px) {
  .mst-layout { grid-template-columns: 1fr; height: auto; }
  .mst-create-panel {
    border-right: none;
    border-bottom: 2px solid var(--border);
    padding: 0;
    gap: 0;
    position: static !important; /* no sticky on mobile — push content down */
    max-height: none !important;
    overflow-y: visible !important;
  }
  .mst-list-panel {
  display: flex;
  flex-direction: column;
  background: var(--card);
}
  .mst-table-wrap { overflow-y: visible; }
  .mst-list-filters { margin-left: 0; }
}

/* Sub-group Add New button */
.mst-addsg-btn {
  height: 34px; padding: 0 10px;
  background: #f0fdf4; border: 1px dashed #86efac;
  border-radius: var(--r); color: #16a34a;
  font-size: .75rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  font-family: var(--font);
  transition: background .12s;

}

.mst-addsg-btn:hover { background: #dcfce7; }
.mst-sg-confirm {
  flex: 1; padding: 5px 8px;
  background: #1e40af; border: none; border-radius: var(--r);
  color: #fff; font-size: .72rem; font-weight: 700;
  cursor: pointer; font-family: var(--font);
}
.mst-sg-cancel {
  padding: 5px 10px;
  background: #f1f5f9; border: 1px solid var(--border);
  border-radius: var(--r); color: var(--txt2);
  font-size: .72rem; cursor: pointer; font-family: var(--font);
}

/* Inline clock below settings */
.lsb-inline-clock {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 18px 6px 0;
  padding: 10px 10px;
  border-top: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}
.lsb-clock-icon {
  color: rgba(255,255,255,.6);
  flex-shrink: 0;
  margin-top: 2px;
}
.lsb-clock-texts {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
#navClockDate {
  font-size: .74rem;
  font-weight: 400;
  color: rgba(255,255,255,.9);
}
#navClockTime {
  font-size: .74rem;
  font-weight: 400;
  color: rgba(255,255,255,.9);
}
.lsb--collapsed .lsb-inline-clock { display: none !important; }

/* ── Financial Dashboard ─────────────────────────────────────────────── */
.fd-wrap { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.fd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fd-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  cursor: pointer;
  transition: box-shadow .15s, transform .12s;
}
.fd-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); transform: translateY(-1px); }
.fd-card-lbl {
  font-size: .88rem; font-weight: 700;
  color: var(--txt); margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
.fd-period-tag {
  font-size: .72rem; font-weight: 400;
  color: var(--txt3); text-transform: none;
  margin-left: 4px;
}
.fd-pnl-rows { display: flex; flex-direction: column; gap: 9px; }
.fd-pnl-row { display: flex; justify-content: space-between; align-items: center; }
.fd-pnl-key { font-size: .88rem; color: var(--txt2); }
.fd-pnl-val { font-size: .95rem; font-weight: 700; }
.fd-pnl-divider { border-top: 1px solid var(--border); margin: 6px 0; }
.fd-pnl-net-row .fd-pnl-key { font-weight: 700; color: var(--txt); font-size: .92rem; }
.fd-pnl-net-row .fd-pnl-val { font-size: 1.1rem; }
.fd-green  { color: #16a34a; }
.fd-red    { color: #dc2626; }
.fd-blue   { color: #2563eb; }
.fd-orange { color: #d97706; }
.fd-net    { } /* set dynamically */
.fd-big-amt {
  font-size: 1.8rem; font-weight: 800; color: var(--txt);
  line-height: 1; margin: 8px 0 10px;
}
.fd-breakdown { display: flex; flex-direction: column; gap: 5px; }
.fd-bl-row {
  display: flex; justify-content: space-between;
  font-size: .82rem; color: var(--txt2);
}
.fd-quick-links {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
}
.fd-ql-lbl {
  font-size: .88rem; font-weight: 700;
  color: var(--txt); margin-bottom: 10px;
}
.fd-ql-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.fd-ql-btn {
  padding: 9px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: .85rem; font-weight: 600; color: var(--txt);
  cursor: pointer; font-family: var(--font);
  transition: background .12s, box-shadow .12s;
}
.fd-ql-btn:hover { background: #f0f4ff; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
@media (max-width: 767px) {
  .fd-row { grid-template-columns: 1fr; gap: 10px; }
}

/* Sidebar divider */
.lsb-divider {
  margin: 8px 12px;
  border-top: 1px solid rgba(255,255,255,.12);
}
/* Section label refinement */
.lsb-nav-section-label {
  padding: 10px 12px 3px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
  display: block;
}
/* Clock in bottom — compact */
.lsb-bottom .lsb-inline-clock { display: none; } /* clock moved to nav */

/* ── Voucher Modal Shared Styles ─────────────────────────────────────── */
.vch-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #fff;
  border-radius: 14px 14px 0 0;
}
.vch-hdr-left { display: flex; align-items: center; gap: 10px; }
.vch-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.vch-title { font-size: .92rem; font-weight: 600; line-height: 1.2; }
.vch-sub { font-size: .68rem; color: #94a3b8; font-weight: 500; margin-top: 1px; }
.vch-close {
  background: none; border: none; cursor: pointer;
  color: #94a3b8; font-size: 1rem; padding: 4px 8px;
  border-radius: 6px; line-height: 1;
  transition: background .12s, color .12s;
}
.vch-close:hover { background: #f1f5f9; color: #374151; }

.vch-body { padding: 16px 18px 10px; }
.vch-fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.vch-lbl { font-size: .72rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .04em; }
.vch-req { color: #dc2626; }
.vch-inp {
  width: 100%; height: 38px; padding: 0 10px;
  border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: .88rem; color: #1e293b; font-family: var(--font);
  background: #fff; outline: none; box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.vch-inp:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
textarea.vch-inp { height: auto; padding: 8px 10px; resize: none; }
select.vch-inp { cursor: pointer; }
.vch-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.vch-bal { font-size: .72rem; color: #64748b; margin-top: 3px; }

.vch-submit {
  width: 100%; padding: 11px; border: none; border-radius: 8px;
  color: #fff; font-size: .9rem; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  margin-top: 4px;
  transition: opacity .12s, box-shadow .12s;
}
.vch-submit:hover { opacity: .9; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.vch-submit:disabled { opacity: .5; cursor: not-allowed; }

.vch-footer {
  display: flex; gap: 10px; padding: 12px 18px;
  border-top: 1px solid #f1f5f9; background: #fff;
}
.vch-cancel {
  flex: 0 0 auto; padding: 9px 18px;
  background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 8px;
  color: #475569; font-size: .84rem; font-weight: 600;
  cursor: pointer; font-family: var(--font);
}
.vch-cancel:hover { background: #f1f5f9; }

@media (max-width: 480px) {
  .vch-row2 { grid-template-columns: 1fr; }
  .vch-body { padding: 12px 14px 8px; }
  .vch-hdr { padding: 12px 14px; }
}

.vch-hint { font-size: .68rem; font-weight: 400; color: #94a3b8; }
.vch-arrow { text-align: center; padding: 6px 0; font-size: 1.1rem; }

/* Voucher table row inputs (Payment, Journal) */
.vch-tbl-inp {
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  font-size: .84rem;
  color: #1e293b;
  font-family: var(--font);
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s;
}
.vch-tbl-inp:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.1); }
.vch-row-del {
  width: 26px; height: 26px;
  background: #fee2e2; border: none; border-radius: 5px;
  color: #dc2626; font-size: .75rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin: auto;
  transition: background .12s;
}
.vch-row-del:hover { background: #fecaca; }
/* table inside modal */
#pm_rows_table, #je_rows_table {
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid #e2e8f0;
  border-collapse: separate;
  border-spacing: 0;
}
#pm_rows_table th, #je_rows_table th {
  background: #f8fafc;
  padding: 8px 10px;
  border-bottom: 1.5px solid #e2e8f0;
  font-weight: 600;
}

.vch-add-row-btn {
  width: 100%;
  padding: 7px 12px;
  background: #fff;
  border: 1.5px dashed #cbd5e1;
  border-radius: 6px;
  color: #64748b;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  text-align: center;
  transition: background .12s, border-color .12s, color .12s;
}
.vch-add-row-btn:hover {
  background: #f0f9ff;
  border-color: #3b82f6;
  color: #2563eb;
}

/* ── iOS safe area (notch / home indicator) ─────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  #mobileBottomNav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(56px + env(safe-area-inset-bottom));
  }
  @media (max-width: 767px) {
    .acc-layout, #masterMod, #settingsMod {
      height: calc(100vh - 56px - env(safe-area-inset-bottom)) !important;
  display: flex; flex-direction: column;
    }
  }
}

/* ── Masters mobile create panel toggle ──────────────────────────── */
.mst-mob-toggle {
  display: none;
}
@media (max-width: 767px) {
  .mst-mob-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .mst-mob-toggle:active { background: #f1f5f9; }
  #mstToggleArrow { transition: transform .2s ease; }
  .mst-create-body {
    padding: 12px 12px 20px;
  }
  /* Desktop: create-body always visible */
}
@media (min-width: 768px) {
  .mst-mob-toggle { display: none !important; }
  .mst-create-body { display: block !important; }
}

/* Mobile masters: toggle bar is sticky, body pushes list down */
@media (max-width: 768px) {
  .mst-mob-toggle {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #f8fafc;
  }
  .mst-create-panel {
    position: static !important;
  }
}

/* ── Mobile Font Sizes — optimised for small screens ─────────────────── */
@media (max-width: 767px) {

  /* Base body */
  body { font-size: 14px; }

  /* Page headers */
  .acc-title-text, .page-hdr-title, .stg-header h5 { font-size: .84rem !important; }
  .page-hdr-sub, .stg-header-sub { font-size: .65rem; }
  .acc-title-row, .page-hdr-inner, .stg-header-title { padding: 10px 12px; }

  /* Date bar */
  .acc-date-input { font-size: .74rem; width: 88px; padding: 4px 6px; }
  .acc-date-btn { font-size: .7rem; padding: 4px 8px; }

  /* Dashboard cards */
  .fd-card { padding: 14px 14px; }
  .fd-card-lbl { font-size: .75rem; }
  .fd-pnl-key { font-size: .8rem; }
  .fd-pnl-val { font-size: .86rem; }
  .fd-pnl-net-row .fd-pnl-val { font-size: .95rem; }
  .fd-big-amt { font-size: 1.4rem; }
  .fd-bl-row { font-size: .74rem; }
  .fd-ql-btn { font-size: .76rem; padding: 8px 12px; }

  /* Reports — tables */
  .acc-tbl { font-size: .81rem; }
  .acc-tbl td, .acc-tbl th { padding: 7px 10px !important; font-size: .76rem !important; }
  .acc-rpt-hdr-title { font-size: .84rem; }
  .acc-rpt-period { font-size: .68rem; }

  /* P&L / BS two-col layout */
  .t-row { font-size: .78rem; padding: 7px 10px; }
  .t-col-hdr { font-size: .76rem; padding: 8px 10px; }
  .t-row-total, .t-row-grand { font-size: .8rem; padding: 8px 10px; }

  /* Ledger statement rows */
  .acc-sec-title { font-size: .66rem; }

  /* Masters */
  .mst-create-title { font-size: .84rem; }
  .mst-lbl { font-size: .7rem; }
  .mst-inp, .mst-sel { font-size: .84rem; height: 36px; }
  .mst-group-hdr { font-size: .7rem; }
  .mst-led-name { font-size: .82rem; }

  /* Settings */
  .stg-tab { font-size: .74rem; padding: 8px 10px; }
  .stg-section-title { font-size: .8rem; }
  .ci-lbl { font-size: .72rem; }
  .ci-inp { font-size: .84rem; }
  .ci-group-lbl { font-size: .64rem; }

  /* Logs */
  .lg-qf { font-size: .7rem; padding: 5px 8px; }

  /* Voucher modals */
  .vch-title { font-size: .88rem; }
  .vch-lbl { font-size: .68rem; }
  .vch-inp { font-size: .84rem; height: 40px; }
  .vch-submit { font-size: .86rem; padding: 12px; }

  /* Mobile bottom nav */
  .mob-nav-btn span:not(.mob-icon) { font-size: .6rem; }
}

@media (max-width: 375px) {
  /* Very small screens (iPhone SE etc) */
  .acc-tbl td, .acc-tbl th { font-size: .71rem !important; padding: 5px 7px !important; }
  .t-row { font-size: .72rem; padding: 6px 8px; }
  .fd-big-amt { font-size: 1.2rem; }
  .vch-inp { font-size: .8rem; }
  .acc-date-input { font-size: .7rem; width: 80px; }
}

@media (max-width: 767px) {
  
  .stg-section { padding: 12px !important; margin-bottom: 8px !important; }
  .ci-group-lbl { margin-top: 8px !important; margin-bottom: 4px !important; padding-bottom: 2px !important; }
  .ci-field { margin-bottom: 6px !important; gap: 2px !important; }
  .ci-pair { gap: 6px !important; }
  .ci-inp { height: 36px !important; font-size: .84rem !important; padding: 0 9px !important; }
  .ci-lbl { font-size: .7rem !important; margin-bottom: 1px !important; }
}

@media (max-width: 767px) {
  .ci-pair { flex-direction: column; gap: 6px; }
  .ci-field { margin-bottom: 6px; gap: 2px; }
  .ci-field[style*="flex:0 0"] { flex: 1 1 auto !important; }
  .ci-group-lbl { margin-top: 10px !important; margin-bottom: 4px; }
  .ci-inp { height: 38px; font-size: .85rem; }
  .ci-lbl { font-size: .71rem; }
}

/* ══ LOGIN PAGE ══════════════════════════════════════════════════════ */
#loginScreen {
  position: fixed;
  inset: 0;
  background: var(--bg); /* same light grey as app body */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
  z-index: 9999;
}
.lgn-wrap {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}
.lgn-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.lgn-brand {
  text-align: center;
  margin-bottom: 28px;
}
.lgn-star {
  font-size: 2.2rem;
  color: #fbbf24;
  display: block;
  line-height: 1;
}
.lgn-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--txt);
  margin-top: 8px;
  letter-spacing: -.3px;
}
.lgn-sub {
  font-size: .78rem;
  color: var(--txt3);
  margin-top: 3px;
}
.lgn-fld {
  margin-bottom: 16px;
}
.lgn-lbl {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--txt2);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lgn-inp {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .9rem;
  font-family: var(--font);
  color: var(--txt);
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.lgn-inp:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.lgn-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt3);
  font-size: .9rem;
  padding: 4px;
}
.lgn-btn {
  width: 100%;
  height: 44px;
  background: var(--grad);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  margin-top: 4px;
  transition: opacity .15s;
}
.lgn-btn:hover { opacity: .9; }
.lgn-forgot {
  background: none;
  border: none;
  color: var(--txt3);
  font-size: .76rem;
  cursor: pointer;
  font-family: var(--font);
}
.lgn-forgot-msg {
  margin-top: 8px;
  padding: 8px 12px;
  background: #eff6ff;
  border-radius: 6px;
  font-size: .76rem;
  color: #2563eb;
  text-align: left;
}
.lgn-msg {
  margin-top: 10px;
  text-align: center;
  font-size: .8rem;
  min-height: 20px;
}
.lgn-install {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: .78rem;
  color: var(--txt2);
  cursor: pointer;
  font-family: var(--font);
}

/* Voucher input focus highlight */
.vch-inp:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1); outline: none; }
.vch-tbl-inp:focus { border-color: #6366f1; outline: none; }

/* Voucher date row — date left, bill fields right */
.vch-date-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.vch-date-main {
  flex: 0 0 150px;
}
.vch-bill-fields {
  display: flex;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}
.vch-bill-fields > div {
  flex: 0 0 150px;
}
@media (max-width: 600px) {
  .vch-date-row {
    flex-wrap: wrap;
  }
  .vch-date-main {
    flex: 0 0 150px;
  }
  .vch-bill-fields {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .vch-bill-fields > div {
    flex: 1 1 140px;
  }
}

/* ── Mobile Floating Voucher Button ─────────────────────────────── */
#mobVchFab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 74px; /* above bottom nav */
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg,#2563eb,#1d4ed8);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  box-shadow: 0 4px 16px rgba(37,99,235,.4);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
}
#mobVchFab:active { transform: scale(.92); }
@media (max-width: 767px) {
  #mobVchFab { display: flex; }
}
/* FAB voucher menu */
#mobVchMenu {
  display: none;
  position: fixed;
  right: 12px;
  bottom: 130px;
  z-index: 201;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  min-width: 180px;
}
#mobVchMenu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  font-size: .85rem;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-family: inherit;
  text-align: left;
}
#mobVchMenu button:last-child { border-bottom: none; }
#mobVchMenu button:active { background: #f8fafc; }