*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background:#f3f6fa;color:#172033;font-size:14px}a{text-decoration:none;color:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:235px;background:#10182b;color:#dce4f5;position:fixed;inset:0 auto 0 0;padding:16px 10px;overflow-y:auto}.brand{height:52px;display:flex;align-items:center;gap:10px;padding:0 8px 16px;border-bottom:1px solid #2a3347;margin-bottom:18px}.brand-mark{width:34px;height:34px;border-radius:9px;background:#f7931e;color:#fff;display:grid;place-items:center;font-weight:800}.brand strong{display:block;font-size:16px;color:#fff}.brand span{display:block;color:#f7931e;font-weight:700}.nav-section{font-size:10px;letter-spacing:1px;color:#74809a;margin:20px 8px 8px}.nav-link{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:8px;margin:4px 0;font-weight:600;color:#dbe3f3}.nav-link:hover{background:#1c2942}.nav-link.active{background:linear-gradient(90deg,#f7931e,#ffb347);color:#fff;box-shadow:0 5px 16px #f7931e44}.main-content{margin-left:235px;width:calc(100% - 235px);min-width:0}.topbar{height:64px;background:#fff;border-bottom:1px solid #dce2eb;padding:0 28px;display:flex;align-items:center;justify-content:space-between}.topbar h1{font-size:20px;margin:0 0 2px;color:#121a2a}.topbar small{color:#6b7890}.user-chip{display:flex;align-items:center;gap:10px}.user-chip small{display:block;font-size:10px}.avatar{width:36px;height:36px;border-radius:50%;background:#fff0dc;color:#ed7d00;display:grid;place-items:center;font-weight:800}.flash{margin:18px 28px 0;padding:12px 16px;border-radius:8px}.flash.success{background:#dcfce7;color:#166534}.flash.error{background:#fee2e2;color:#991b1b}.page{padding:28px}.hero{border-radius:15px;padding:25px 28px;color:#fff;background:linear-gradient(110deg,#f7931e,#ffb347);box-shadow:0 10px 25px #f7931e33;margin-bottom:18px}.hero h2{margin:0 0 8px;font-size:25px}.hero p{margin:0;opacity:.92}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:18px}.card{background:#fff;border:1px solid #e0e6ee;border-radius:12px;padding:20px;box-shadow:0 3px 12px #1720330b}.stat-label{font-size:12px;color:#60708a;margin-bottom:8px}.stat-value{font-size:22px;font-weight:800;color:#121a2a}.stat-icon{float:right;width:38px;height:38px;border-radius:10px;background:#fff0d8;color:#f7931e;display:grid;place-items:center}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.section{background:#fff;border:1px solid #e0e6ee;border-radius:12px;padding:20px;box-shadow:0 3px 12px #1720330b;margin-bottom:18px}.section h3{margin:0 0 5px;font-size:18px}.muted{color:#708099;font-size:12px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}.quick{border:1px solid #e0e6ee;border-radius:10px;padding:16px;display:flex;gap:12px;align-items:center}.quick:hover{border-color:#f7931e}.quick .qicon{width:36px;height:36px;border-radius:9px;background:#fff2df;display:grid;place-items:center}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.btn{border:0;border-radius:7px;padding:10px 15px;background:#f7931e;color:#fff;font-weight:700;cursor:pointer;display:inline-block}.btn:hover{background:#df7600}.btn.secondary{background:#eef2f7;color:#28344a}.btn.danger{background:#dc3545}.btn.small{padding:7px 10px;font-size:12px}.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:18px}.form-group{margin-bottom:15px}.form-group label{display:block;font-weight:600;font-size:12px;margin-bottom:6px}.input,.select,.textarea{width:100%;border:1px solid #d8e0ea;border-radius:7px;padding:10px 11px;background:#fff;outline:none}.input:focus,.select:focus,.textarea:focus{border-color:#f7931e;box-shadow:0 0 0 3px #f7931e18}.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse;min-width:680px}.table th{background:#11192c;color:#fff;text-align:left;font-size:11px;padding:11px}.table td{padding:12px;border-bottom:1px solid #e5e9ef;font-size:12px}.table tr:hover td{background:#fffaf4}.badge{display:inline-block;padding:5px 9px;border-radius:20px;font-size:10px;font-weight:700}.badge.active,.badge.paid{background:#dcfce7;color:#166534}.badge.inactive{background:#fee2e2;color:#991b1b}.badge.pending{background:#fef3c7;color:#92400e}.actions{display:flex;gap:5px;flex-wrap:wrap}.form-card{max-width:900px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.summary-line{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #e4e8ef}.summary-line:last-child{border-bottom:0}.total{font-size:18px;font-weight:800;color:#f07800}.item-table{width:100%;border-collapse:collapse;margin:8px 0 12px}.item-table th,.item-table td{padding:8px;border:1px solid #e0e6ee}.item-table th{background:#fff5e8;font-size:12px;text-align:left}.item-table input{width:100%;border:1px solid #d8e0ea;border-radius:6px;padding:9px}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#10182b,#253657)}.login-card{width:min(430px,92vw);background:#fff;border-radius:16px;padding:30px;box-shadow:0 20px 50px #0005}.login-card .logo{margin:0 auto 15px;width:54px;height:54px;border-radius:14px;background:#f7931e;color:#fff;display:grid;place-items:center;font-size:24px;font-weight:800}.login-card h1{text-align:center;margin:0 0 6px}.login-card p{text-align:center;color:#718099;margin:0 0 22px}.login-card .btn{width:100%;font-size:15px}.login-links{display:flex;justify-content:center;gap:18px;margin-top:16px;font-size:12px}.empty{text-align:center;padding:28px;color:#718099}.notice{background:#fff8e9;border:1px solid #ffd89a;padding:12px;border-radius:8px;font-size:12px}.stat-green{color:#16834b}.stat-red{color:#c62828}@media(max-width:1050px){.cards{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}@media(max-width:720px){.sidebar{width:68px;padding:10px 6px}.brand{justify-content:center;padding-bottom:10px}.brand>div:not(.brand-mark),.nav-section,.nav-link span{display:none}.nav-link{justify-content:center;padding:12px 8px}.main-content{margin-left:68px;width:calc(100% - 68px)}.topbar{padding:0 14px}.topbar h1{font-size:16px}.user-chip>div:last-child{display:none}.page{padding:15px}.hero{padding:20px}.hero h2{font-size:20px}.cards{grid-template-columns:1fr 1fr;gap:10px}.card{padding:14px}.stat-value{font-size:18px}.quick-grid{grid-template-columns:1fr}.form-row,.filters{grid-template-columns:1fr}.section{padding:14px}.toolbar{align-items:flex-start;flex-direction:column}.btn{width:auto}.table{min-width:620px}}@media(max-width:430px){.cards{grid-template-columns:1fr}.page{padding:10px}}
.menu-toggle{
  display:none;
  border:0;
  background:#f7931e;
  color:#fff;
  border-radius:8px;
  width:40px;
  height:38px;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  margin-right:10px;
  align-items:center;
  justify-content:center;
}
.sidebar-overlay{display:none}
.hero-sub{font-size:12px;margin-top:5px;opacity:.95}
.report-header{background:#fff;border:1px solid #e0e6ee;border-radius:12px;padding:22px;margin-bottom:18px;display:flex;justify-content:space-between;gap:20px}
.report-header h2{margin:0;color:#f07800}
.report-header h3{margin:12px 0 4px;font-size:20px}
.report-date{font-size:11px;color:#708099;white-space:nowrap}
.report-cards{margin-bottom:18px}

/* Print */
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff!important;font-size:11px}
  .sidebar,.topbar,.no-print,.sidebar-overlay,.flash{display:none!important}
  .main-content{margin:0!important;width:100%!important}
  .page{padding:0!important}
  .section,.card,.report-header{box-shadow:none!important;border:1px solid #ddd!important}
  .report-header{display:flex!important}
  .report-cards{grid-template-columns:repeat(4,1fr)!important}
  .table{min-width:0!important}
  .table th,.table td{padding:7px!important;font-size:10px!important}
}

/* =========================================================
   FAMoUS / Ankuram-style responsive sidebar
   Desktop: normal fixed sidebar, NO hamburger.
   Mobile: sidebar is off-canvas, hamburger opens it.
   ========================================================= */
@media (min-width: 768px){
  .sidebar{
    width:235px;
    position:fixed;
    left:0;top:0;bottom:0;
    transform:translateX(0)!important;
    z-index:1000;
  }
  .main-content{
    margin-left:235px;
    width:calc(100% - 235px);
  }
  .menu-toggle{display:none!important}
  .sidebar-overlay{display:none!important}
}

@media (max-width: 767px){
  body{overflow-x:hidden}
  .sidebar{
    width:250px;
    max-width:86vw;
    position:fixed;
    left:0;top:0;bottom:0;
    transform:translateX(-105%);
    transition:transform .25s ease;
    z-index:1100;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:10px 0 30px rgba(0,0,0,.28);
  }
  .sidebar.open{transform:translateX(0)}
  .main-content{
    margin-left:0;
    width:100%;
  }
  .menu-toggle{
    display:flex!important;
    align-items:center;
    justify-content:center;
    flex:0 0 40px;
    width:40px;
    height:38px;
  }
  .topbar{
    padding:0 12px;
    justify-content:flex-start;
    gap:0;
  }
  .topbar > div:first-of-type{flex:1}
  .user-chip{margin-left:auto}
  .sidebar-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:1090;
  }
  .sidebar-overlay.open{display:block}
  .brand{
    justify-content:flex-start;
    padding-left:8px;
  }
  .brand>div:not(.brand-mark),
  .nav-section,
  .nav-link span{display:block}
  .nav-link{justify-content:flex-start}
  .page{padding:15px}
  .hero{padding:20px}
  .hero h2{font-size:20px}
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:14px}
  .stat-value{font-size:18px}
  .quick-grid{grid-template-columns:1fr}
  .form-row,.filters{grid-template-columns:1fr}
  .section{padding:14px}
  .toolbar{align-items:flex-start;flex-direction:column}
  .table{min-width:620px}
}

@media (max-width:430px){
  .cards{grid-template-columns:1fr}
  .page{padding:10px}
}

@media (max-width:560px){
  .report-header{flex-direction:column}
  .report-date{white-space:normal}
  .report-cards{grid-template-columns:1fr 1fr!important}
}

/* QR/payment panel was removed from the sidebar */
.qr-section,.qr-payment,.payment-sidebar,.sidebar-payment,.payment-sidebar-panel,
.qr-code,.qr-details,.payment-qr-panel{display:none!important}