:root{
  --bg:#f8f8f8;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#667085;
  --border:rgba(16,24,40,.10);

  /* Vyapar-like accents */
  --primary:#5d9aee;       /* blue */
  --primary-2:#7bb3ff;     /* light blue */
  --danger:#dc3545;        /* red */

  --radius:14px;
  --shadow:0 10px 30px rgba(16,24,40,.08);
  --shadow-hover:0 18px 55px rgba(16,24,40,.12);

  --sidebar-w:260px;
  --topbar-h:56px;

  --sidebar-bg:#101020;
  --sidebar-border:rgba(255,255,255,.10);
  --sidebar-text:rgba(255,255,255,.88);
  --sidebar-muted:rgba(255,255,255,.55);
  --sidebar-hover:rgba(255,255,255,.06);
  --sidebar-active:rgba(93,154,238,.20);
}

html,body{height:100%}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Topbar */
.app-topbar{
  height:var(--topbar-h);
  border-bottom:1px solid rgba(16,24,40,.08);
  background:#ffffff;
  box-shadow:0 6px 20px rgba(16,24,40,.06);
  z-index:1030;
}
.brand-badge{
  width:38px;height:38px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);
  box-shadow:0 10px 24px rgba(93,154,238,.30);
  flex:0 0 auto;
}
.search-pill{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:999px;
  padding:.55rem .75rem;
  box-shadow:var(--shadow);
}
.search-pill .form-control{border:0;box-shadow:none!important;padding:0}

/* Shell */
.app-shell{display:flex;min-height:100%}

/* Sidebar */
.app-sidebar{
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  position:fixed;
  top:var(--topbar-h);
  bottom:0;
  left:0;
  overflow-y:auto;
  padding:14px;
}
.sidebar-section-title{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:var(--sidebar-muted);
  font-weight:800;
  margin:14px 10px 8px;
}
.nav-pill{
  border-radius:12px;
  padding:.65rem .75rem;
  display:flex;
  gap:.75rem;
  align-items:center;
  color:var(--sidebar-text);
  text-decoration:none;
  border:1px solid transparent;
  transition:all .18s ease;
}
.nav-pill i{font-size:1.05rem;color:rgba(255,255,255,.70)}
.nav-pill:hover{
  background:var(--sidebar-hover);
  border-color:rgba(255,255,255,.10);
  color:#ffffff;
}
.nav-pill.active{
  background:var(--sidebar-active);
  border-color:rgba(93,154,238,.25);
  color:#ffffff;
  font-weight:800;
}
.nav-pill.active i{color:#ffffff}
.sidebar-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:none;
  padding:14px;
  margin-top:14px;
}

/* Content */
.app-content{
  margin-left:var(--sidebar-w);
  width:calc(100% - var(--sidebar-w));
  padding:18px;
  padding-top:calc(var(--topbar-h) + 16px);
}
.app-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.app-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.stat-icon{
  width:44px;height:44px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  background:rgba(29,78,216,.08);
  color:var(--primary);
  flex:0 0 auto;
}
.text-muted-2{color:var(--muted)!important}

/* Buttons */
.btn-primary{
  background:var(--primary);
  border:none;
  box-shadow:0 10px 22px rgba(93,154,238,.22);
  font-weight:800;
}
.btn-primary:hover{filter:brightness(.96); box-shadow:0 14px 30px rgba(93,154,238,.28);}
.btn-soft{
  background:rgba(16,24,40,.04);
  border:1px solid rgba(16,24,40,.10);
  color:rgba(16,24,40,.78);
  font-weight:800;
}
.btn-soft:hover{background:rgba(16,24,40,.06); color:rgba(16,24,40,.88);}

/* Tables */
.table thead th{
  font-size:.8rem;
  color:rgba(100,116,139,.95);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.table td{vertical-align:middle;border-color:rgba(15,23,42,.06)}
.badge-soft{
  background:rgba(100,116,139,.12);
  color:rgba(15,23,42,.78);
  border:1px solid rgba(15,23,42,.10);
}

/* Progress */
.progress{height:10px;border-radius:999px;background:rgba(15,23,42,.07)}
.progress-bar{
  border-radius:999px;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);
}

/* Forms */
.form-control,.form-select{
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  padding:.75rem .9rem;
}
.form-control:focus,.form-select:focus{
  border-color:rgba(29,78,216,.55);
  box-shadow:0 0 0 .25rem rgba(29,78,216,.12);
}
.form-label{font-weight:700;color:rgba(15,23,42,.82)}
.divider{height:1px;background:var(--border);width:100%}

/* Page header */
.page-head{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:.75rem;
}
.page-title{margin:0}
.page-sub{color:var(--muted)}

/* Mobile */
@media (max-width: 991.98px){
  .app-sidebar{display:none}
  .app-content{
    margin-left:0;
    width:100%;
    padding-top:calc(var(--topbar-h) + 14px);
  }
}

/* Dark mode */
.theme-dark{
  --bg:#0b1220;
  --surface:#0f1a2d;
  --text:#e5e7eb;
  --muted:rgba(229,231,235,.68);
  --border:rgba(229,231,235,.10);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-hover:0 18px 55px rgba(0,0,0,.45);
}
a,button,.app-card,.nav-pill{transition:all .18s ease}


/* =========================
   Auth (Login / Signup / Reset)
   ========================= */
.auth-shell{
  background: radial-gradient(1200px 420px at 10% 0%, rgba(59,130,246,.18), transparent 55%),
              radial-gradient(900px 380px at 90% 10%, rgba(29,78,216,.16), transparent 55%),
              var(--bg);
  min-height: 100%;
}

.auth-wrap{ min-height: 100%; display:flex; align-items:center; }

.auth-hero{
  background: radial-gradient(1200px 420px at 10% 0%, rgba(59,130,246,.18), transparent 55%),
              linear-gradient(135deg, rgba(29,78,216,.08) 0%, rgba(59,130,246,.06) 100%),
              var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.auth-hero:before{
  content:"";
  position:absolute;
  inset:-120px -160px auto auto;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.28), transparent 60%);
  filter: blur(0px);
  pointer-events: none;
}
.auth-shell *::before, .auth-shell *::after { pointer-events: none; }

.auth-hero-footer{
  padding-top: 14px;
  border-top: 1px dashed rgba(15,23,42,.12);
}

.auth-feature{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
}

.auth-feature i{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(29,78,216,.10);
  color: var(--primary);
  border: 1px solid rgba(29,78,216,.16);
  flex: 0 0 auto;
  font-size: 1.15rem;
}

.auth-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  padding: 22px;
}

.auth-tabs{
  display:flex;
  gap: 8px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 999px;
  padding: 6px;
}

.auth-tab{
  flex: 1;
  text-align:center;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: rgba(15,23,42,.75);
  font-weight: 800;
  border: 1px solid transparent;
  background: transparent;
}

.auth-tab:hover{
  background: rgba(29,78,216,.06);
  color: var(--primary);
}

.auth-tab.active{
  background: linear-gradient(135deg, rgba(29,78,216,.14) 0%, rgba(59,130,246,.12) 100%);
  border-color: rgba(29,78,216,.18);
  color: var(--primary);
}

/* Responsive auth */
@media (max-width: 991.98px){
  .auth-wrap{ align-items: stretch; }
  .auth-hero{ display:none; }
  .auth-card{ padding: 18px; }
}



/* =========================================================
   Vyapar-style Add Item Modal
   ========================================================= */
.vy-modal .modal-dialog{ max-width: 1180px; }
.vy-modal-card{
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(15,23,42,.18);
}
.vy-modal-header{
  background: #ffffff;
  border-bottom: 1px solid rgba(15,23,42,.08);
  padding: 14px 18px;
}
.vy-modal-body{
  background: #fff;
  overflow-y: auto !important;
  max-height: calc(100vh - 220px) !important;
}
#addItemModal .modal-body {
  overflow-y: auto !important;
  max-height: calc(100vh - 220px) !important;
}
.vy-modal-footer{
  background:#fff;
  border-top: 1px solid rgba(15,23,42,.08);
  padding: 12px 18px;
}

.vy-title-main{
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.vy-icon-btn{
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.10);
}

.vy-toggle{
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  padding: 4px;
  display: inline-flex;
  gap: 4px;
}
.vy-toggle-btn{
  border: 0;
  background: transparent;
  color: rgba(15,23,42,.70);
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: .9rem;
}
.vy-toggle-btn.active{
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
}

.vy-unit-btn{
  border-radius: 14px;
  border: 1px dashed rgba(15,23,42,.18);
  background: rgba(15,23,42,.02);
  font-weight: 800;
  color: rgba(15,23,42,.78);
  padding: .75rem .9rem;
}
.vy-unit-mini{
  font-size: .75rem;
  font-weight: 900;
  color: rgba(15,23,42,.55);
}

.vy-link-btn{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.02);
  font-weight: 800;
  color: rgba(15,23,42,.72);
  padding: .75rem .9rem;
}
.vy-link-btn:hover{background: rgba(29,78,216,.06); border-color: rgba(29,78,216,.16); color: var(--primary);}

.vy-image-preview{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.vy-image-preview img{
  width: 64px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.08);
}

.vy-tabs{
  display:flex;
  gap: 20px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  padding-bottom: 10px;
}
.vy-tab{
  border:0;
  background:transparent;
  font-weight: 900;
  color: rgba(15,23,42,.55);
  padding: 6px 0;
  position: relative;
}
.vy-tab.active{color: var(--danger);}
.vy-tab.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-11px;
  height: 3px;
  border-radius: 6px;
  background: var(--danger);
}
.vy-dot{
  display:inline-block;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--danger);
  margin-right: 6px;
  transform: translateY(-1px);
}

.vy-pane{display:none;}
.vy-pane.active{display:block;}

.vy-section{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 14px;
  background: rgba(15,23,42,.01);
}
.vy-section-title{
  font-weight: 900;
  color: rgba(15,23,42,.78);
  margin-bottom: 10px;
}
.vy-link-inline{
  border:0;
  background:transparent;
  color:#2563eb;
  font-weight: 800;
  padding: 0;
}
.vy-help{
  display:flex;
  align-items:center;
  color: rgba(15,23,42,.62);
  font-weight: 700;
  padding: 10px 12px;
  border: 1px dashed rgba(15,23,42,.14);
  border-radius: 12px;
  background: #fff;
}
.vy-help a{color:#2563eb; text-decoration:none; font-weight:900;}
.vy-help a:hover{text-decoration:underline;}

/* Vyapar-like action buttons */
.btn-sale{
  background:var(--danger);
  border:none;
  color:#fff;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,88,92,.22);
}
.btn-sale:hover{filter:brightness(.96); box-shadow:0 14px 30px rgba(239,88,92,.28); color:#fff;}
.btn-purchase{
  background:var(--primary);
  border:none;
  color:#fff;
  font-weight:900;
  box-shadow:0 10px 22px rgba(93,154,238,.22);
}
.btn-purchase:hover{filter:brightness(.96); box-shadow:0 14px 30px rgba(93,154,238,.28); color:#fff;}

/* =========================
   AJG Accent Override
   ========================= */
:root{
  --ajg-accent:#dc3545;
  --ajg-accent-hover:#bb2d3b; /* bootstrap danger hover */
  --ajg-accent-soft: rgba(220,53,69,.12);
}
.btn-primary, .btn-accent{
  background: var(--ajg-accent) !important;
  border-color: var(--ajg-accent) !important;
  color:#fff !important;
  box-shadow: 0 10px 22px rgba(220,53,69,.18);
}
.btn-primary:hover, .btn-accent:hover{
  background: var(--ajg-accent-hover) !important;
  border-color: var(--ajg-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(220,53,69,.26);
}
.btn-soft{
  background: var(--ajg-accent-soft) !important;
  border-color: rgba(220,53,69,.22) !important;
  color: var(--ajg-accent) !important;
}
.btn-soft:hover{
  background: rgba(220,53,69,.18) !important;
  border-color: rgba(220,53,69,.28) !important;
  color: var(--ajg-accent-hover) !important;
}
.nav-link.active, .tab-active, .active-underline{
  color: var(--ajg-accent) !important;
}

/* =========================
   Mobile Sidebar (Offcanvas)
   ========================= */
.offcanvas{
  background:#101020;
  color:#fff;
}
.offcanvas .nav-pill{
  color: rgba(255,255,255,.88);
}
.offcanvas .nav-pill i{ color: rgba(255,255,255,.78); }
.offcanvas .nav-pill:hover{
  background: rgba(220,53,69,.16);
  border-color: rgba(220,53,69,.22);
  color:#fff;
}
.offcanvas .divider{ background: rgba(255,255,255,.14); }
@media (max-width: 991.98px){
  .app-content{ padding: 14px; padding-top: 78px; }
  .table-responsive{ border-radius: 16px; }
}

/* =========================
   AJG Modal Mobile Fix
   ========================= */
.modal-content{
  max-height: calc(100vh - 24px);
  overflow: hidden;
}
.modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-footer{
  position: sticky;
  bottom: 0;
  background: var(--surface, #fff);
  border-top: 1px solid rgba(0,0,0,.06);
  z-index: 2;
}
.modal-header{
  position: sticky;
  top: 0;
  background: var(--surface, #fff);
  z-index: 2;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Mobile: full height modal and better padding */
@media (max-width: 575.98px){
  .modal-dialog{
    margin: 8px;
  }
  .modal-content{
    border-radius: 16px !important;
    max-height: calc(100vh - 16px);
  }
  .modal-body{
    padding: 14px !important;
  }
  .modal-footer{
    padding: 12px 14px !important;
  }
}

/* tabs row safe on mobile */
.ajg-tabs-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.ajg-tabs-scroll .nav{
  flex-wrap: nowrap;
  gap: 18px;
}
.ajg-tabs-scroll .nav-link{
  white-space: nowrap;
}

/* =========================
   Parties — Vyapar-style 3-pane (list | detail)
   ========================= */
.parties-shell{
  display:flex;
  gap:14px;
  align-items:stretch;
  min-height: calc(100vh - var(--topbar-h) - 80px);
}
.parties-list{
  width:380px;
  flex:0 0 380px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
}
.parties-list-head{
  padding:12px;
  border-bottom:1px solid var(--border);
}
.parties-search-icon{
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  color:var(--muted);
  pointer-events:none;
  font-size:.95rem;
}
.parties-search-input{
  padding-left:34px;
  border-radius:999px;
}
.parties-list-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:6px;
}
.party-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border-left:3px solid transparent;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.party-row:hover{ background:rgba(15,23,42,.04); }
.party-row.selected{
  background:rgba(220,53,69,.06);
  border-left-color:var(--ajg-accent);
}
.party-row .party-row-main{ flex:1 1 auto; min-width:0; }
.party-row .party-row-name{ font-size:.95rem; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.party-row .party-row-phone{ font-size:.8rem; font-weight:400; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.party-row .party-row-balance{ font-size:.95rem; font-weight:600; text-align:right; flex:0 0 auto; }
.party-row .party-row-balance.recv{ color:var(--ajg-accent); }
.party-row .party-row-balance.pay{  color:#198754; }
.party-row .party-row-balance.zero{ color:var(--muted); }

.parties-detail{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
}
.parties-detail-head{
  padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.parties-detail-body{
  padding:14px 18px;
  flex:1 1 auto;
  overflow:auto;
}
.parties-empty i{ display:block; }

@media (max-width: 991.98px){
  .parties-shell{ display:block; min-height:0; }
  .parties-list{ width:100%; flex:1 1 auto; }
  .parties-detail{ width:100%; margin-top:12px; display:none; }
  .parties-shell.detail-shown .parties-list{ display:none; }
  .parties-shell.detail-shown .parties-detail{ display:flex; }
}

/* Parties — Vyapar typography scale (per task) */
.parties-list-head h1.page-title          { font-size:1.05rem; line-height:1.3; font-weight:600 !important; }
.parties-detail-body > .d-flex > .fw-bold { font-size:1.05rem; line-height:1.3; font-weight:600 !important; }
.parties-detail-head h2#partyDetailName   { font-size:1.15rem; line-height:1.3; font-weight:600 !important; }
#partyTxTable thead th{
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
}
#partyTxTable tbody td{ font-size:.9rem; font-weight:400; }
.parties-detail-head .ms-auto > .small.text-muted-2 { font-size:.8rem; }
.parties-detail-head #partyDetailBalance            { font-size:1.1rem; font-weight:600 !important; }

/* =========================
   Items — Vyapar 3-pane with top tabs
   ========================= */
.items-tabs{
  display:flex;
  gap:18px;
  border-bottom:1px solid var(--border);
  margin-bottom:14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.items-tab{
  padding:10px 4px;
  border:0;
  background:transparent;
  text-decoration:none;
  color:rgba(15,23,42,.65);
  font-weight:500;
  font-size:.95rem;
  white-space:nowrap;
  position:relative;
  cursor:pointer;
}
.items-tab:hover{ color:var(--text); }
.items-tab.active{ color:var(--text); font-weight:600; }
.items-tab.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--ajg-accent);
}

.items-shell{
  display:flex;
  gap:14px;
  align-items:stretch;
  min-height: calc(100vh - var(--topbar-h) - 130px);
}
.items-list{
  width:380px;
  flex:0 0 380px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
}
.items-list-head{
  padding:12px;
  border-bottom:1px solid var(--border);
}
.items-list-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:6px;
}

.items-search-icon{
  position:absolute;
  top:50%; left:12px;
  transform:translateY(-50%);
  color:var(--muted);
  pointer-events:none;
  font-size:.95rem;
}
.items-search-input{
  padding-left:34px;
  border-radius:999px;
}

.items-list-cols{
  display:flex;
  padding:8px 14px 6px;
  border-bottom:1px solid var(--border);
  font-size:.75rem; font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
}
.items-list-cols .ilc-name{ flex:1 1 auto; }
.items-list-cols .ilc-qty{ flex:0 0 auto; }

.item-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border-left:3px solid transparent;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.item-row:hover{ background:rgba(15,23,42,.04); }
.item-row.selected{
  background:rgba(220,53,69,.06);
  border-left-color:var(--ajg-accent);
}
.item-row .item-row-name{
  flex:1 1 auto; min-width:0;
  font-size:.95rem; font-weight:500;
  color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.item-row .item-row-qty{
  font-size:.95rem; font-weight:600;
  flex:0 0 auto;
}
.item-row .item-row-qty.qty-ok{ color:#198754; }
.item-row .item-row-qty.qty-low{ color:var(--muted); }
.item-row .item-row-qty.qty-zero{ color:var(--ajg-accent); }
.item-row .item-row-menu{
  flex:0 0 auto;
  color:var(--muted);
  padding:4px;
  cursor:pointer;
  opacity:.4;
}
.item-row .item-row-menu:hover{ opacity:1; }

.bulk-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  margin-bottom:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(93,154,238,.06);
  cursor:pointer;
}
.bulk-card .bulk-icon{
  flex:0 0 auto;
  width:36px; height:36px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(93,154,238,.15);
  color:var(--primary);
}
.bulk-card .bulk-text{ flex:1 1 auto; min-width:0; }
.bulk-card .bulk-title{ font-size:.95rem; font-weight:600; color:var(--text); }
.bulk-card .bulk-sub{ font-size:.78rem; color:var(--muted); }
.bulk-card .bulk-close{
  flex:0 0 auto;
  color:var(--muted);
  padding:0 4px;
  cursor:pointer;
  border:0; background:transparent;
}

.items-detail{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  overflow:hidden;
  padding:0;
}
.items-detail-head{
  padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.items-detail-head h2#itemDetailName{
  font-size:1.15rem; line-height:1.3;
  font-weight:600 !important;
}
.items-detail-body{
  padding:14px 18px;
  flex:1 1 auto;
  overflow:auto;
}

.items-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
  padding:12px 18px;
  border-bottom:1px solid var(--border);
}
.items-stat{ display:flex; flex-direction:column; gap:2px; }
.items-stat .label{
  font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted);
}
.items-stat .value{ font-size:1rem; font-weight:600; color:var(--text); }
.items-stat .value.success{ color:#198754; }

#itemTxTable thead th{
  font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted);
}
#itemTxTable tbody td{ font-size:.9rem; font-weight:400; }

.tx-type-dot{
  display:inline-block;
  width:8px; height:8px;
  border-radius:99px;
  margin-right:6px;
  vertical-align:middle;
}
.tx-type-dot.tx-sale{ background:#198754; }
.tx-type-dot.tx-purchase{ background:var(--primary); }
.tx-type-dot.tx-adjustment{ background:#fd7e14; }
.tx-type-dot.tx-return{ background:var(--ajg-accent); }

@media (max-width: 991.98px){
  .items-shell{ display:block; min-height:0; }
  .items-list{ width:100%; flex:1 1 auto; }
  .items-detail{ width:100%; margin-top:12px; display:none; }
  .items-shell.detail-shown .items-list{ display:none; }
  .items-shell.detail-shown .items-detail{ display:flex; }
}

/* Sidebar collapsible groups (Vyapar-style) */
.nav-group[aria-expanded="true"] .nav-chev{ transform: rotate(180deg); }
.nav-chev{ transition: transform .2s ease; }
.nav-submenu .nav-sub{
  display:block; padding:8px 14px 8px 42px;
  color: rgba(255,255,255,.72); font-weight:600;
  border-radius:10px; text-decoration:none; margin: 2px 0;
}
.nav-submenu .nav-sub:hover{ background: rgba(255,255,255,.06); color:#fff; }
.nav-submenu .nav-sub.active{ background: var(--ajg-accent); color:#fff; }

/* New Invoice / Edit Invoice modal — restore Bootstrap's scrollable-modal
   flex chain when modal-content wraps body+footer inside a <form>. The form
   intercepts the flex pipeline between .modal-content and .modal-body, so
   .modal-body's built-in overflow-y: auto never engages and Amount Paid /
   Balance Due render behind the footer at short viewports (1366x768 worst
   case). Re-declaring the form as a flex column with min-height: 0 lets
   the body shrink and scroll on its own. */
#saleModal .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#saleModal .modal-body { min-height: 0; }