:root{
  --bg:#f3f6f9;
  --panel:#ffffff;
  --panel-2:#f8fafc;
  --ink:#1f2937;
  --ink-2:#374151;
  --muted:#6b7280;
  --line:#d7dee8;
  --line-soft:#e9eef5;
  --brand:#0078a8;
  --brand-dark:#005f86;
  --brand-soft:#e6f4f9;
  --accent:#2d9cdb;
  --success:#2e7d32;
  --warning:#b26a00;
  --danger:#b00020;
  --sidebar:252px;
  --topbar:58px;
  --radius:4px;
  --shadow:0 2px 8px rgba(31,41,55,.08);
}

*{letter-spacing:0}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  font-size:13px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark);text-decoration:underline}

.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar);
  background:#f8fafc;
  color:var(--ink-2);
  position:fixed;
  inset:var(--topbar) auto 0 0;
  z-index:20;
  overflow:auto;
  border-right:1px solid var(--line);
}
.sidebar-backdrop{display:none}
.brand{
  position:fixed;
  left:0;
  top:0;
  width:var(--sidebar);
  height:var(--topbar);
  z-index:25;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:0 1rem;
  color:#fff;
  background:#243746;
  border-right:1px solid rgba(255,255,255,.12);
  font-size:1rem;
  font-weight:700;
}
.brand i{
  width:31px;
  height:31px;
  border-radius:var(--radius);
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--brand);
  font-size:1.15rem;
}
.sidebar nav{padding:.55rem}
.sidebar a{
  display:flex;
  align-items:center;
  gap:.65rem;
  min-height:34px;
  padding:.42rem .62rem;
  margin:.08rem 0;
  border-radius:var(--radius);
  color:#344054;
  font-weight:600;
  text-decoration:none;
}
.sidebar a i{
  width:20px;
  color:#667085;
  text-align:center;
  font-size:.98rem;
}
.sidebar a:hover{
  background:#edf3f8;
  color:var(--brand-dark);
  text-decoration:none;
}
.sidebar a.active{
  background:#dff0f7;
  color:#073b4c;
  box-shadow:inset 3px 0 0 var(--brand);
}
.sidebar a.active i{color:var(--brand)}

.main{margin-left:var(--sidebar);min-width:0;flex:1}
.topbar{
  height:var(--topbar);
  background:#243746;
  color:#fff;
  border-bottom:1px solid #1b2b37;
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:0 1rem;
  position:sticky;
  top:0;
  z-index:15;
}
.topbar::before{
  content:"";
  width:var(--sidebar);
  position:fixed;
  left:0;
  top:0;
}
.topbar h1{font-size:1rem;margin:0;font-weight:650;color:#fff}
.title-wrap{min-width:0}
.title-wrap h1,.title-wrap .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title-wrap .small{color:#cbd5e1!important;font-size:.72rem}
.user-menu{
  margin-left:auto;
  min-width:132px;
  color:#fff;
  padding-left:.85rem;
  border-left:1px solid rgba(255,255,255,.16);
}
.user-menu .text-muted{color:#cbd5e1!important}
.user-menu a{color:#e0f2fe}
.quick-entry-btn{
  white-space:nowrap;
  background:#1683b2!important;
  border-color:#1683b2!important;
  min-height:34px;
}
.quick-entry-btn:hover{background:#0f6f98!important;border-color:#0f6f98!important}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;padding:0}
.content{padding:1rem;max-width:1680px}

.erp-card,.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none;
}
.erp-card{overflow:hidden}
.card-header{
  background:#f7f9fb;
  border-bottom:1px solid var(--line);
  padding:.62rem .8rem;
  color:#334155;
  font-size:.86rem;
  font-weight:700;
}
.card-body{padding:.85rem}

.metric-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  min-height:90px;
  padding:.75rem .8rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.65rem;
  box-shadow:0 1px 2px rgba(31,41,55,.04);
}
.metric-card span,.metric-card small{display:block;color:var(--muted)}
.metric-card span{
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
}
.metric-card strong{
  display:block;
  margin:.18rem 0;
  color:#0f172a;
  font-size:1.45rem;
  line-height:1.1;
  font-weight:750;
}
.metric-card i{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:var(--radius);
  color:var(--brand-dark);
  background:var(--brand-soft);
  font-size:1.12rem;
  flex:0 0 auto;
}

.sticky-actions{
  position:sticky;
  top:calc(var(--topbar) + .65rem);
  z-index:8;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  gap:.45rem;
  margin-bottom:.75rem;
}
.btn{
  border-radius:var(--radius);
  min-height:33px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  font-size:.82rem;
  font-weight:650;
  box-shadow:none!important;
}
.btn-primary{
  background:var(--brand);
  border-color:var(--brand);
}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-outline-primary{border-color:#88c7de;color:var(--brand-dark)}
.btn-outline-primary:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-light{background:#f8fafc;border-color:var(--line);color:#334155}
.btn-sm{min-height:28px;padding:.24rem .5rem}

.form-label{
  color:#344054;
  font-size:.74rem;
  font-weight:650;
  margin-bottom:.28rem;
}
.form-control,.form-select{
  border-radius:var(--radius);
  border-color:#c9d3df;
  min-height:34px;
  padding:.36rem .55rem;
  font-size:.84rem;
  color:var(--ink);
  box-shadow:none!important;
}
.form-control:focus,.form-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 .12rem rgba(0,120,168,.14)!important;
}
.form-text{color:var(--muted);font-size:.72rem}
textarea.form-control{min-height:78px}

.alert{
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:.6rem .75rem;
  font-size:.84rem;
}
.alert-success{background:#edf7ed;border-color:#c8e6c9;color:#1b5e20}
.alert-danger{background:#fdecec;border-color:#f5c2c7;color:#842029}
.alert-warning{background:#fff8e1;border-color:#ffecb3;color:#7a4f01}
.badge{border-radius:2px;padding:.28rem .45rem;font-weight:650;font-size:.7rem}
.text-bg-secondary{background:#e6ebf1!important;color:#334155!important}
.text-bg-success{background:#e4f4e6!important;color:#1b5e20!important}
.text-bg-warning{background:#fff4d6!important;color:#7a4f01!important}
.text-bg-danger{background:#fde2e2!important;color:#842029!important}

.modal-content{
  border:1px solid #b9c6d3;
  border-radius:var(--radius);
  box-shadow:0 18px 54px rgba(31,41,55,.24);
}
.modal-header{
  background:#f7f9fb;
  border-bottom:1px solid var(--line);
  padding:.65rem .85rem;
}
.modal-footer{
  background:#f7f9fb;
  border-top:1px solid var(--line);
  padding:.6rem .85rem;
}
.modal-title{font-size:.95rem;font-weight:700;color:#243746}
.modal-body{background:#fff;padding:.85rem}
.modal-dialog-scrollable .modal-body{max-height:calc(100vh - 180px)}

.table-responsive{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
}
.table{margin-bottom:0}
.table th{
  background:#edf2f7;
  color:#475467;
  border-bottom:1px solid #cbd5e1;
  white-space:nowrap;
  padding:.5rem .55rem;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
}
.table td{
  vertical-align:middle;
  padding:.48rem .55rem;
  border-color:#e5eaf0;
}
.table-hover tbody tr:hover{background:#f6fbfe}
.table-search{
  max-width:380px;
  min-height:34px;
  background:#fff;
}

.nav-tabs{
  border-bottom:1px solid var(--line);
  gap:.15rem;
}
.nav-tabs .nav-link{
  border:1px solid transparent;
  border-radius:var(--radius) var(--radius) 0 0;
  color:#475467;
  font-weight:650;
  padding:.45rem .7rem;
}
.nav-tabs .nav-link.active{
  color:#243746;
  background:#fff;
  border-color:var(--line) var(--line) #fff;
}
.list-group-item{border-color:var(--line-soft);padding:.56rem .72rem}
.list-group-item.active{background:var(--brand);border-color:var(--brand)}

.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.quick-tile{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.7rem;
  color:#344054;
  background:#fff;
  display:flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
  font-weight:650;
}
.quick-tile:hover{
  background:#eaf6fb;
  border-color:#a9d8e9;
  color:var(--brand-dark);
  text-decoration:none;
}
.quick-tile i{
  width:30px;
  height:30px;
  border-radius:var(--radius);
  display:grid;
  place-items:center;
  color:var(--brand-dark);
  background:var(--brand-soft);
}

.stack-chart{
  height:34px;
  display:flex;
  overflow:hidden;
  border-radius:var(--radius);
  background:#e5e7eb;
  border:1px solid var(--line);
}
.stack-chart div{
  background:var(--success);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  min-width:46px;
  font-size:.76rem;
}
.stack-chart .reject{background:var(--danger)}

.login-body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:1rem;
  background:#e8eef4;
}
.login-card{
  width:min(424px,94vw);
  background:#fff;
  border:1px solid #cbd5e1;
  border-top:4px solid var(--brand);
  border-radius:var(--radius);
  padding:1.65rem;
  box-shadow:0 12px 36px rgba(31,41,55,.16);
}
.login-card h1{font-size:1.28rem;font-weight:700;color:#243746}
.login-logo{
  width:50px;
  height:50px;
  border-radius:var(--radius);
  display:grid;
  place-items:center;
  margin:0 auto .85rem;
  background:#243746;
  color:#fff;
  font-size:1.55rem;
}
.login-card .btn-lg{min-height:42px;font-size:.92rem}
.print-note{background:#fff;color:#111}

@media (max-width:991px){
  :root{--sidebar:252px}
  .brand{width:100%;position:sticky}
  .topbar{padding-left:.75rem}
  .sidebar{
    inset:0 auto 0 0;
    transform:translateX(-100%);
    transition:.18s ease;
    box-shadow:12px 0 30px rgba(31,41,55,.22);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop.show{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(31,41,55,.38);
    z-index:19;
  }
  .main{margin-left:0}
  .content{padding:.85rem}
  .user-menu{display:none}
  .quick-entry-btn span{display:none}
  .quick-entry-btn{width:34px;height:34px;padding:0}
}
@media (max-width:767px){
  body{font-size:12.5px}
  .topbar{height:54px}
  .topbar h1{font-size:.92rem}
  .content{padding:.72rem .65rem 4.8rem}
  .sticky-actions{
    position:fixed;
    left:.65rem;
    right:.65rem;
    bottom:.65rem;
    top:auto;
    z-index:18;
    justify-content:stretch;
    background:rgba(255,255,255,.94);
    padding:.45rem;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 10px 30px rgba(31,41,55,.16);
  }
  .sticky-actions .btn{flex:1;min-height:36px}
  .metric-card{min-height:82px;padding:.65rem}
  .metric-card strong{font-size:1.2rem}
  .metric-card i{width:32px;height:32px;font-size:1rem}
  .modal-dialog{margin:.45rem}
  .quick-grid{grid-template-columns:1fr}
  .table-responsive{overflow:visible;border:0}
  table.searchable, .content .table{border:0}
  table.searchable thead, .content .table thead{display:none}
  table.searchable tbody tr, .content .table tbody tr{
    display:block;
    border:1px solid var(--line);
    border-radius:var(--radius);
    margin-bottom:.6rem;
    background:#fff;
    padding:.18rem .65rem;
  }
  table.searchable tbody td, .content .table tbody td{
    display:flex;
    justify-content:space-between;
    gap:.8rem;
    border-bottom:1px solid var(--line-soft);
    padding:.52rem 0;
    white-space:normal;
    text-align:right;
  }
  table.searchable tbody td:last-child, .content .table tbody td:last-child{border-bottom:0}
  table.searchable tbody td::before, .content .table tbody td::before{
    content:attr(data-label);
    font-weight:700;
    color:#667085;
    text-align:left;
  }
}
@media print{
  .sidebar,.topbar,.sticky-actions,.btn,.no-print{display:none!important}
  .main{margin:0}
  .content{padding:0;max-width:none}
  body{background:#fff}
  .card,.erp-card{box-shadow:none;border-color:#bbb}
}