:root{
  --sd-orange:#ff7a18;
  --sd-red:#d72638;
  --sd-gold:#ffc857;
  --sd-dark:#24130b;
  --sd-light:#fff8ef;
}
*{box-sizing:border-box}
body{
  font-family:'Segoe UI',system-ui,Arial,sans-serif;
  background:linear-gradient(135deg,#fff8ef,#fffdf8);
  color:#2b2118;
}
a{text-decoration:none}
.sd-bg{
  background:radial-gradient(circle at top left,rgba(255,200,87,.35),transparent 35%),
             linear-gradient(135deg,#ff7a18,#d72638);
}
.sd-card{
  border:0;border-radius:22px;box-shadow:0 18px 45px rgba(36,19,11,.10);
  overflow:hidden;background:#fff;
}
.sd-btn{
  background:linear-gradient(135deg,var(--sd-orange),var(--sd-red));
  color:#fff;border:0;border-radius:14px;padding:10px 16px;font-weight:700;
}
.sd-btn:hover{color:#fff;filter:brightness(.96)}
.sd-outline{border:1px solid rgba(215,38,56,.25);color:var(--sd-red);border-radius:14px;font-weight:700}
.brand-mark{
  width:45px;height:45px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(135deg,#ffefba,#ffc857);color:#8a2905;font-weight:900;
  box-shadow:0 8px 20px rgba(0,0,0,.15)
}
.sidebar{
  min-height:100vh;background:#24130b;color:#fff;position:sticky;top:0;
}
.sidebar a{display:flex;gap:10px;align-items:center;padding:13px 15px;color:#ffe9c7;border-radius:14px;margin:5px 8px}
.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.12);color:#fff}
.stat-card{
  border-radius:22px;padding:20px;background:#fff;box-shadow:0 12px 35px rgba(36,19,11,.08);
  border:1px solid rgba(255,122,24,.08);
}
.stat-icon{width:45px;height:45px;border-radius:15px;display:grid;place-items:center;background:#fff4df;color:#d72638;font-size:22px}
.table-card{background:#fff;border-radius:22px;box-shadow:0 12px 35px rgba(36,19,11,.08);padding:18px}
.form-control,.form-select{border-radius:12px;padding:11px;border-color:#ead8c3}
.form-control:focus,.form-select:focus{box-shadow:0 0 0 .2rem rgba(255,122,24,.15);border-color:#ff9b3d}
.badge-soft{background:#fff0dc;color:#b93a00;border-radius:999px;padding:7px 10px}
.mobile-frame{
  max-width:430px;margin:auto;min-height:100vh;background:#fff;border-radius:30px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);overflow:hidden;position:relative;
}
.app-header{padding:22px;color:#fff;background:linear-gradient(135deg,#ff7a18,#d72638)}
.bottom-nav{
  position:sticky;bottom:0;background:#fff;display:flex;justify-content:space-around;
  border-top:1px solid #f0dfcf;padding:8px 0;z-index:5;
}
.bottom-nav a{font-size:12px;color:#7b6b5f;text-align:center}
.bottom-nav i{display:block;font-size:20px;margin-bottom:3px}
.bottom-nav a.active{color:#d72638;font-weight:700}
.qr-box{
  height:220px;border:2px dashed #ff9b3d;border-radius:24px;display:grid;place-items:center;
  background:#fff8ef;text-align:center;
}
.receipt{
  max-width:760px;margin:auto;background:#fff;border:2px solid #d72638;border-radius:18px;padding:25px;
}
.receipt-head{border-bottom:2px dashed #d72638;margin-bottom:15px;padding-bottom:15px}
.print-only{display:none}
@media print{
  .no-print{display:none!important}
  body{background:#fff}
  .receipt{border:2px solid #000;box-shadow:none}
}
@media(max-width:991px){
  .sidebar{min-height:auto;position:relative}
}


/* ===== Mobile Special Layout ===== */
.mobile-topbar{
  display:none;
  position:sticky;
  top:0;
  z-index:1030;
  background:linear-gradient(135deg,#ff7a18,#d72638);
  color:#fff;
  padding:12px 14px;
  box-shadow:0 8px 25px rgba(36,19,11,.16);
}
.mobile-menu-btn{
  border:0;
  background:rgba(255,255,255,.18);
  color:#fff;
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:24px;
}
.mobile-footer-tabs{
  display:none;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1040;
  background:#fff;
  border-top:1px solid #f0dfcf;
  box-shadow:0 -8px 30px rgba(36,19,11,.12);
  padding:7px 4px 6px;
}
.mobile-footer-tabs a{
  width:20%;
  text-align:center;
  color:#76685c;
  font-size:11px;
  font-weight:600;
}
.mobile-footer-tabs i{
  display:block;
  font-size:20px;
  line-height:20px;
  margin-bottom:3px;
}
.mobile-footer-tabs a.active{
  color:#d72638;
}
.mobile-drawer-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:1045;
  background:rgba(0,0,0,.45);
}
.mobile-close{
  display:none;
  border:0;
  background:rgba(255,255,255,.14);
  color:#fff;
  border-radius:12px;
  width:38px;
  height:38px;
  margin-left:auto;
}
.mobile-section-title{
  display:none;
}
@media(max-width:991px){
  body{
    padding-bottom:76px;
    background:#fff8ef;
  }
  .mobile-topbar,
  .mobile-footer-tabs,
  .mobile-section-title{
    display:flex;
  }
  .mobile-section-title{
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
  }
  .container-fluid{
    padding:0;
  }
  .row{
    margin-left:0;
    margin-right:0;
  }
  .sidebar{
    position:fixed;
    left:-290px;
    top:0;
    bottom:0;
    width:280px;
    min-height:100vh;
    z-index:1050;
    transition:.28s ease;
    overflow-y:auto;
    border-radius:0 28px 28px 0;
    box-shadow:20px 0 45px rgba(0,0,0,.25);
  }
  body.drawer-open .sidebar{
    left:0;
  }
  body.drawer-open .mobile-drawer-backdrop{
    display:block;
  }
  .mobile-close{
    display:block;
  }
  .sidebar .p-3{
    position:sticky;
    top:0;
    background:#24130b;
    z-index:2;
  }
  .col-lg-10{
    padding:14px !important;
    width:100%;
  }
  .sd-bg{
    border-radius:0 0 28px 28px !important;
    margin-left:-14px;
    margin-right:-14px;
    margin-top:-14px;
    padding:22px 16px !important;
  }
  .sd-bg h2{
    font-size:22px;
  }
  .stat-card{
    border-radius:18px;
    padding:16px;
  }
  .stat-card h3{
    font-size:22px;
  }
  .sd-card,.table-card{
    border-radius:18px;
  }
  .table-card{
    overflow:auto;
  }
  .table{
    min-width:680px;
  }
  .form-control,.form-select,.sd-btn{
    min-height:46px;
  }
  h3.fw-bold{
    font-size:22px;
  }
  .receipt{
    border-radius:12px;
    padding:16px;
  }
}
@media(min-width:992px){
  .mobile-drawer-backdrop,.mobile-footer-tabs,.mobile-topbar{
    display:none!important;
  }
}