*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f5f7fb;color:#172033}
.layout{display:flex;min-height:100vh}.sidebar{width:250px;background:#102a43;color:#fff;padding:24px 18px;position:fixed;inset:0 auto 0 0}
.brand{font-size:28px;font-weight:800;margin-bottom:28px}.brand span{font-size:15px;font-weight:600;display:block;color:#9fd6ff}
.sidebar nav a{display:block;color:#dbeafe;text-decoration:none;padding:11px 12px;border-radius:9px;margin:5px 0}
.sidebar nav a:hover{background:#1f5f8b;color:#fff}.main{margin-left:250px;width:calc(100% - 250px)}
.topbar{height:68px;background:#fff;border-bottom:1px solid #e6eaf0;padding:0 26px;display:flex;align-items:center;justify-content:space-between}
.content{padding:26px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:#fff;border:1px solid #e6eaf0;border-radius:14px;padding:20px;box-shadow:0 3px 12px rgba(16,42,67,.05)}
.card h3{margin:0 0 8px;font-size:14px;color:#617089}.metric{font-size:28px;font-weight:800}.panel{background:#fff;border:1px solid #e6eaf0;border-radius:14px;padding:20px;margin-top:20px}
table{width:100%;border-collapse:collapse}th,td{padding:11px 10px;border-bottom:1px solid #edf0f5;text-align:left}th{background:#f7f9fc;font-size:13px}
input,select,textarea{width:100%;padding:10px 11px;border:1px solid #cfd7e3;border-radius:8px;background:#fff}label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}.btn{display:inline-block;border:0;border-radius:9px;padding:10px 16px;background:#1677b8;color:#fff;font-weight:700;text-decoration:none;cursor:pointer}
.btn.secondary{background:#52657a}.btn.danger{background:#b42318}.notice{padding:12px 14px;border-radius:9px;margin-bottom:15px;background:#e8f5ff;border:1px solid #b9def7}
.error{background:#fff0f0;border-color:#ffc7c7}.right{text-align:right}.muted{color:#6b778c}.status{font-weight:700;text-transform:capitalize}
@media(max-width:900px){.sidebar{position:static;width:100%}.layout{display:block}.main{margin:0;width:100%}.grid{grid-template-columns:1fr 1fr}.row{grid-template-columns:1fr}}

.brand small{display:block;margin-top:6px;font-size:11px;color:#75c3f0;letter-spacing:1.3px}
.actions{display:flex;gap:8px;flex-wrap:wrap}.btn.success{background:#15803d}.btn.warning{background:#b7791f}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#e6eef7;font-size:12px;font-weight:700}
.badge.approved{background:#dcfce7}.badge.rejected{background:#fee2e2}.badge.submitted{background:#fef3c7}
.voucher-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #172033;padding-bottom:14px;margin-bottom:15px}
.print-only{display:none}
@media print{.sidebar,.topbar,.no-print{display:none!important}.main{margin:0;width:100%}.content{padding:0}.panel{border:0;box-shadow:none}.print-only{display:block}}


/* EP Accounting ERP Pro v1.0.5 — fixed light sidebar + independently scrollable menu */
.layout{
  min-height:100vh;
}

.sidebar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  bottom:auto !important;
  width:270px !important;
  height:100vh !important;
  max-height:100vh !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  background:#f8fbff !important;
  color:#172033 !important;
  border-right:1px solid #dbe5f0 !important;
  box-shadow:4px 0 18px rgba(16,42,67,.06);
  z-index:1000;
}

.sidebar .brand{
  flex:0 0 auto;
  margin:0 !important;
  padding:22px 20px 18px !important;
  background:#ffffff !important;
  color:#102a43 !important;
  border-bottom:1px solid #dbe5f0;
  position:relative !important;
  top:auto !important;
  z-index:2;
}

.sidebar .brand span{
  color:#2673b8 !important;
}

.sidebar .brand small{
  color:#65758b !important;
}

/* The NAV element is the actual scrolling region. */
.sidebar nav{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  padding:12px 12px 28px !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  scrollbar-color:#9db3c8 #eef4fa;
}

.sidebar nav::-webkit-scrollbar{
  width:11px;
}

.sidebar nav::-webkit-scrollbar-track{
  background:#eef4fa;
  border-radius:10px;
}

.sidebar nav::-webkit-scrollbar-thumb{
  background:#9db3c8;
  border:2px solid #eef4fa;
  border-radius:10px;
}

.sidebar nav::-webkit-scrollbar-thumb:hover{
  background:#7797b5;
}

.sidebar nav a{
  display:block !important;
  color:#31465d !important;
  background:transparent !important;
  padding:10px 12px !important;
  border-radius:9px !important;
  margin:3px 0 !important;
  font-weight:600;
  border:1px solid transparent;
}

.sidebar nav a:hover,
.sidebar nav a:focus{
  background:#e8f2fb !important;
  color:#0f5f9c !important;
  border-color:#d1e5f6;
}

.sidebar nav a:active{
  background:#dcecf9 !important;
}

.main{
  margin-left:270px !important;
  width:calc(100% - 270px) !important;
  min-height:100vh;
}

/* Compact/mobile mode: sidebar returns to normal document flow. */
@media(max-width:900px){
  .sidebar{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    border-right:0 !important;
    box-shadow:none !important;
  }

  .sidebar nav{
    max-height:420px !important;
    overflow-y:auto !important;
  }

  .main{
    margin-left:0 !important;
    width:100% !important;
  }
}

@media print{
  .sidebar{display:none !important}
  .main{margin-left:0 !important;width:100% !important}
}