:root{--brand:#0f766e;--brand-dark:#115e59;--bg:#f1f5f9}
*{-webkit-tap-highlight-color:transparent}
body{background:var(--bg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.94rem}
.app-topbar{background:linear-gradient(90deg,var(--brand-dark),var(--brand));box-shadow:0 2px 10px rgba(15,23,42,.18)}
.app-wrap{display:flex;min-height:calc(100vh - 56px)}
.app-sidebar{background:#0f172a;width:250px;flex:0 0 250px}
.app-sidebar .offcanvas-body{overflow-y:auto;background:#0f172a}
@media (max-width:991.98px){.app-sidebar{width:270px}}
.app-menu .nav-link{color:#cbd5e1;padding:.6rem 1rem;border-left:3px solid transparent;font-size:.9rem;border-radius:0}
.app-menu .nav-link i{width:1.4rem;display:inline-block;color:#94a3b8}
.app-menu .nav-link:hover{background:#1e293b;color:#fff}
.app-menu .nav-link:hover i{color:#5eead4}
.app-menu .nav-link.active{background:#1e293b;color:#5eead4;border-left-color:#5eead4;font-weight:600}
.app-menu .nav-link.active i{color:#5eead4}
.menu-group-title{color:#64748b;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.8rem 1rem .2rem}
.app-main{flex:1 1 auto;min-width:0}
.card{border:0;border-radius:.8rem;box-shadow:0 1px 4px rgba(15,23,42,.08)}
.card-header{background:#fff;border-bottom:1px solid #eef2f7;font-weight:600;border-radius:.8rem .8rem 0 0!important}
.stat-card{border-radius:.9rem;color:#fff;padding:1rem;position:relative;overflow:hidden}
.stat-card .val{font-size:1.5rem;font-weight:700;line-height:1.1}
.stat-card .lbl{font-size:.78rem;opacity:.9;text-transform:uppercase;letter-spacing:.05em}
.stat-card i.bg-ico{position:absolute;right:.5rem;bottom:-.4rem;font-size:3.4rem;opacity:.18}
.sc-1{background:linear-gradient(135deg,#0ea5e9,#0369a1)}
.sc-2{background:linear-gradient(135deg,#10b981,#047857)}
.sc-3{background:linear-gradient(135deg,#f59e0b,#b45309)}
.sc-4{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.menu-card{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:.9rem;padding:1rem;box-shadow:0 1px 4px rgba(15,23,42,.08);transition:.15s;height:100%}
.menu-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(15,23,42,.12);color:inherit}
.menu-card .mi{width:48px;height:48px;border-radius:.8rem;background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:.6rem}
.menu-card h6{margin:0;font-weight:700;font-size:.95rem}
.menu-card small{color:#64748b;font-size:.78rem}
.table thead th{background:#f8fafc;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b;white-space:nowrap;cursor:pointer}
.table td{vertical-align:middle}
.table-responsive{border-radius:.6rem}
.table-hover tbody tr:hover{background:#f0fdfa}
tr.row-locked{background:#fef3c7!important}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover,.btn-brand:focus{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn-xs{padding:.2rem .45rem;font-size:.78rem}
.page-title{font-size:1.15rem;font-weight:700;margin:0}
.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.form-label{font-size:.82rem;font-weight:600;color:#475569;margin-bottom:.2rem}
.form-control,.form-select{font-size:.9rem}
.thumb{width:42px;height:42px;object-fit:cover;border-radius:.4rem;border:1px solid #e2e8f0}
@media (max-width:575.98px){.table-responsive{font-size:.82rem}.stat-card .val{font-size:1.2rem}.page-title{font-size:1rem}.hide-xs{display:none!important}}
.receipt-box{background:#fff;max-width:760px;margin:auto;border-radius:.8rem;padding:1.2rem}
.receipt-head{border-bottom:2px dashed #cbd5e1}
@media print{.no-print{display:none!important}body{background:#fff}.receipt-box{box-shadow:none;max-width:100%}}

 /* ================= THIN FOOTER — light colour band ================= */
.app-footer-thin{
  margin-top:auto;
  padding:.55rem 1rem;
  font-size:.78rem;
  color:#475569;
  border-top:1px solid #cbd5e1;
  /* light colour band (teal-tinted gradient) */
  background:linear-gradient(90deg,#ecfdf5 0%,#f0fdfa 40%,#eef2ff 100%);
  box-shadow:0 -1px 3px rgba(15,23,42,.04);
}
.app-main{display:flex;flex-direction:column}

/* Brand cluster */
.footer-brand{display:flex;align-items:center;gap:.4rem;font-size:.82rem}
.footer-brand strong{color:#0f172a;font-weight:700}
.footer-badge{
  width:22px;height:22px;border-radius:6px;
  background:linear-gradient(135deg,#0f766e,#14b8a6);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;
}
.footer-ver{
  background:#fff;border:1px solid #cbd5e1;
  color:#0f766e;font-weight:600;font-size:.68rem;
  padding:.05rem .4rem;border-radius:999px;
}

/* Mid cluster */
.footer-mid{color:#64748b}
.footer-dot{font-size:.4rem;color:#14b8a6;margin-right:.35rem;vertical-align:middle}

/* Timestamp */
.footer-time{
  color:#0f766e;background:#fff;border:1px solid #cbd5e1;
  padding:.1rem .55rem;border-radius:999px;font-weight:500;
}
.footer-time i{margin-right:.15rem}

/* Hide in print */
@media print{
  .app-footer-thin{display:none!important}
}