/* ============================================================
   SuperBakery ERP — Global Stylesheet
   Techage Innovations | Navy Blue · Orange · White
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800;900&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --navy:        #000080;
  --navy-dark:   #00005a;
  --navy-light:  #0000b0;
  --orange:      #FFA500;
  --orange-dark: #e09000;
  --orange-light:#ffb733;
  --white:       #FFFFFF;
  --gray-50:     #f8f9ff;
  --gray-100:    #f0f1f8;
  --gray-200:    #e2e4f0;
  --gray-400:    #9094b8;
  --gray-600:    #5a5f8a;
  --gray-800:    #2d3060;
  --success:     #22c55e;
  --danger:      #ef4444;
  --warning:     #eab308;
  --info:        #3b82f6;
  --sidebar-w:   260px;
  --topbar-h:    64px;
  --radius:      12px;
  --radius-lg:   18px;
  --shadow:      0 2px 16px rgba(0,0,128,.08);
  --shadow-lg:   0 8px 40px rgba(0,0,128,.14);
  --transition:  all .22s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans', sans-serif;
  background:var(--gray-50);
  color:var(--gray-800);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.sora { font-family:'Sora', sans-serif; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }

/* ── OVERLAY ─────────────────────────────────────────── */
#sb-overlay {
  display:none;
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,128,.55);
  backdrop-filter:blur(4px);
  align-items:center; justify-content:center; flex-direction:column; gap:16px;
}
#sb-overlay.show { display:flex; }
.overlay-spinner {
  width:56px; height:56px;
  border:4px solid rgba(255,165,0,.3);
  border-top-color:var(--orange);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.overlay-text {
  color:#fff;
  font-family:'Sora', sans-serif;
  font-size:14px; font-weight:500; letter-spacing:.5px;
}

/* ── SIDEBAR ─────────────────────────────────────────── */
.sb-sidebar {
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:linear-gradient(175deg, var(--navy-dark) 0%, var(--navy) 60%, #0a0090 100%);
  z-index:1040;
  display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:4px 0 32px rgba(0,0,128,.25);
  overflow:hidden;
}
.sb-sidebar.sb-collapsed { transform:translateX(calc(-1 * var(--sidebar-w))); }

.sb-logo {
  padding:20px 24px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:12px;
  flex-shrink:0;
}
.sb-logo-icon {
  width:40px; height:40px;
  background:var(--orange); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora', sans-serif; font-weight:800; color:#fff; font-size:18px;
  flex-shrink:0; box-shadow:0 4px 14px rgba(255,165,0,.4);
  overflow:hidden;
}
.sb-logo-icon img {
  width:100%; height:100%; object-fit:cover; border-radius:8px;
  background:transparent;
}
.sb-logo-brand { font-family:'Sora', sans-serif; font-weight:800; font-size:18px; color:#fff; line-height:1; }
.sb-logo-sub   { font-size:9px; color:rgba(255,165,0,.8); letter-spacing:1.8px; text-transform:uppercase; margin-top:3px; }

.sb-role-badge {
  margin:12px 14px;
  background:rgba(255,165,0,.1);
  border:1px solid rgba(255,165,0,.22);
  border-radius:10px; padding:10px 12px;
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
}
.sb-avatar {
  width:32px; height:32px;
  background:var(--orange); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora', sans-serif; font-weight:700; color:#fff; font-size:12px;
  flex-shrink:0;
}
.sb-user-name  { font-size:12.5px; font-weight:600; color:#fff; line-height:1.2; }
.sb-user-role  { font-size:10px; color:rgba(255,165,0,.85); margin-top:2px; }
.sb-user-branch { font-size:10px; color:rgba(255,255,255,.7); margin-top:2px; }

.sb-nav { flex:1; overflow-y:auto; padding:6px 0 12px; }
.sb-nav::-webkit-scrollbar { width:3px; }
.sb-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:2px; }

.sb-section-label {
  font-size:9px; font-weight:700; color:rgba(255,165,0,.55);
  letter-spacing:2px; text-transform:uppercase;
  padding:14px 20px 5px;
  font-family:'Sora', sans-serif;
}
.sb-item {
  display:flex; align-items:center; gap:11px;
  padding:10px 20px; margin:1px 10px; border-radius:9px;
  color:rgba(255,255,255,.68); font-size:13.5px; font-weight:500;
  cursor:pointer; transition:var(--transition);
  position:relative; white-space:nowrap;
}
.sb-item:hover  { background:rgba(255,255,255,.09); color:#fff; }
.sb-item.active {
  background:linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
  color:#fff; box-shadow:0 4px 16px rgba(255,165,0,.32);
}
.sb-item .sb-icon { width:17px; text-align:center; font-size:13.5px; flex-shrink:0; }
.sb-badge-dot {
  width:7px; height:7px; background:var(--orange);
  border-radius:50%; position:absolute; right:14px;
  top:50%; transform:translateY(-50%);
  box-shadow:0 0 6px rgba(255,165,0,.6);
}
.sb-item.active .sb-badge-dot { background:#fff; }

.sb-bottom { padding:12px 14px; border-top:1px solid rgba(255,255,255,.08); flex-shrink:0; }
.sb-bottom .sb-item { margin:0; }

/* ── TOPBAR ──────────────────────────────────────────── */
.sb-topbar {
  position:fixed; top:0; left:var(--sidebar-w); right:0; height:var(--topbar-h);
  background:#fff;
  border-bottom:1px solid var(--gray-200);
  display:flex; align-items:center; padding:0 22px; z-index:1030;
  gap:14px;
  transition:left .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 2px 12px rgba(0,0,128,.06);
}
.sb-topbar.sb-topbar-full { left:0; }

.tb-toggle {
  width:36px; height:36px;
  border:1.5px solid var(--gray-200); border-radius:8px;
  background:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-600); cursor:pointer; transition:var(--transition); flex-shrink:0;
}
.tb-toggle:hover { background:var(--gray-100); border-color:var(--navy); color:var(--navy); }

.tb-title { font-family:'Sora', sans-serif; font-weight:700; font-size:16px; color:var(--navy); }
.tb-title-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tb-branch-badge { font-size:10px; background:rgba(255,165,0,0.15); color:var(--orange); padding:3px 8px; border-radius:12px; font-weight:600; }
.tb-subtitle { font-size:11px; color:var(--gray-400); font-weight:400; margin-top:2px; }
.tb-header-info { display:flex; flex-direction:column; }
.tb-user-info { display:flex; align-items:center; gap:8px; }
.tb-user-name { font-size:12px; font-weight:600; color:var(--navy); }
.tb-spacer { flex:1; }

.tb-branch-pill {
  display:flex; align-items:center; gap:7px;
  background:var(--gray-50); border:1.5px solid var(--gray-200);
  border-radius:9px; padding:6px 12px;
  font-size:12.5px; color:var(--gray-800); font-weight:500;
  white-space:nowrap;
}
.tb-branch-pill .dot-green { width:7px; height:7px; background:var(--success); border-radius:50%; }

.tb-btn {
  width:36px; height:36px;
  border:1.5px solid var(--gray-200); border-radius:8px;
  background:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-600); cursor:pointer; transition:var(--transition);
  position:relative; text-decoration:none;
}
.tb-btn:hover { background:var(--gray-100); border-color:var(--navy); color:var(--navy); }
.tb-notif-badge {
  position:absolute; top:-3px; right:-3px;
  width:16px; height:16px; background:var(--orange);
  border-radius:50%; font-size:9px; font-weight:700; color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}

/* ── MAIN LAYOUT ─────────────────────────────────────── */
.sb-main {
  margin-left:var(--sidebar-w);
  padding-top:var(--topbar-h);
  transition:margin-left .3s cubic-bezier(.4,0,.2,1);
  min-height:100vh;
}
.sb-main.sb-main-full { margin-left:0; }
.sb-content { padding:24px; }

/* ── SIDEBAR BACKDROP (mobile) ───────────────────────── */
.sb-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.48); z-index:1039;
}
.sb-backdrop.show { display:block; }

/* ── PAGE HEADER ─────────────────────────────────────── */
.page-header { margin-bottom:22px; }
.page-header h2 { font-family:'Sora', sans-serif; font-weight:800; font-size:21px; color:var(--navy); }
.page-header p  { font-size:12.5px; color:var(--gray-400); margin-top:4px; }

/* ── STAT CARDS ──────────────────────────────────────── */
.card-stat {
  background:#fff; border-radius:var(--radius-lg); padding:20px 22px;
  border:1px solid var(--gray-200); box-shadow:var(--shadow);
  transition:var(--transition); position:relative; overflow:hidden; height:100%;
}
.card-stat:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.cs-accent { position:absolute; top:0; right:0; width:76px; height:76px; border-radius:0 var(--radius-lg) 0 76px; }
.cs-icon {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; margin-bottom:13px;
}
.cs-val   { font-family:'Sora', sans-serif; font-size:25px; font-weight:800; color:var(--navy); line-height:1; }
.cs-label { font-size:12px; color:var(--gray-400); font-weight:500; margin-top:4px; }
.cs-change{ font-size:11px; font-weight:600; margin-top:8px; display:flex; align-items:center; gap:4px; }
.cs-up    { color:var(--success); }
.cs-down  { color:var(--danger); }

/* ── PANEL CARDS ─────────────────────────────────────── */
.card-panel {
  background:#fff; border-radius:var(--radius-lg);
  border:1px solid var(--gray-200); box-shadow:var(--shadow); overflow:hidden;
}
.panel-header {
  padding:15px 20px; border-bottom:1px solid var(--gray-100);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.panel-header h6 { font-family:'Sora', sans-serif; font-weight:700; font-size:14px; color:var(--navy); margin:0; }
.panel-body { padding:20px; }

/* ── TABLE ───────────────────────────────────────────── */
.sb-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.sb-table thead th {
  background:var(--gray-50); color:var(--gray-600);
  font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
  padding:10px 16px; border-bottom:1px solid var(--gray-200); white-space:nowrap;
}
.sb-table thead th:first-child { border-radius:0; }
.sb-table tbody td { padding:12px 16px; border-bottom:1px solid var(--gray-100); vertical-align:middle; }
.sb-table tbody tr:hover td { background:var(--gray-50); }
.sb-table tbody tr:last-child td { border-bottom:none; }

/* ── STATUS BADGES ───────────────────────────────────── */
.badge-sb {
  padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:600;
  display:inline-flex; align-items:center; gap:5px;
}
.badge-sb::before { content:''; width:5px; height:5px; border-radius:50%; }
.bs-success { background:#dcfce7; color:#16a34a; }   .bs-success::before { background:var(--success); }
.bs-warning { background:#fef9c3; color:#ca8a04; }   .bs-warning::before { background:var(--warning); }
.bs-danger  { background:#fee2e2; color:#dc2626; }   .bs-danger::before  { background:var(--danger); }
.bs-info    { background:#dbeafe; color:#2563eb; }   .bs-info::before    { background:var(--info); }
.bs-navy    { background:#e8eaff; color:var(--navy); } .bs-navy::before  { background:var(--navy); }

/* ── FORMS ───────────────────────────────────────────── */
.form-label-sb {
  font-size:11.5px; font-weight:700; color:var(--gray-600);
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; display:block;
}
.form-control-sb {
  width:100%; padding:10px 14px;
  border:1.5px solid var(--gray-200); border-radius:9px;
  font-size:13.5px; color:var(--gray-800);
  background:#fff; transition:var(--transition);
  font-family:'DM Sans', sans-serif; outline:none;
  -webkit-appearance:none; appearance:none;
}
.form-control-sb:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,0,128,.08); }
.form-control-sb::placeholder { color:var(--gray-400); }
select.form-control-sb { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239094b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
textarea.form-control-sb { resize:vertical; min-height:80px; }

.input-icon-wrap { position:relative; }
.input-icon-wrap .form-control-sb { padding-left:40px; }
.input-icon-wrap .ii { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:13px; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-sb {
  border:none; border-radius:9px;
  padding:10px 20px; font-family:'Sora', sans-serif; font-weight:600; font-size:13px;
  cursor:pointer; transition:var(--transition);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap; text-decoration:none;
}
.btn-sb:disabled { opacity:.55; cursor:not-allowed; transform:none !important; }
.btn-navy   { background:var(--navy); color:#fff; }
.btn-navy:hover   { background:var(--navy-dark); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,128,.25); color:#fff; }
.btn-orange { background:var(--orange); color:#fff; }
.btn-orange:hover { background:var(--orange-dark); transform:translateY(-1px); box-shadow:0 4px 16px rgba(255,165,0,.35); color:#fff; }
.btn-outline-navy { background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.btn-outline-navy:hover { background:var(--navy); color:#fff; }
.btn-outline-gray { background:transparent; color:var(--gray-600); border:1.5px solid var(--gray-200); }
.btn-outline-gray:hover { background:var(--gray-100); border-color:var(--gray-400); color:var(--gray-800); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#dc2626; transform:translateY(-1px); }
.btn-sm  { padding:6px 14px; font-size:12px; }
.btn-lg  { padding:13px 28px; font-size:15px; }
.btn-w100{ width:100%; }
.btn-icon-sm {
  width:32px; height:32px; border-radius:7px;
  border:1.5px solid var(--gray-200); background:none;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--transition); color:var(--gray-600); font-size:12px;
}
.btn-icon-sm:hover { border-color:var(--navy); color:var(--navy); background:var(--gray-50); }
.btn-icon-sm.danger:hover { border-color:var(--danger); color:var(--danger); }

/* ── PROGRESS BAR ────────────────────────────────────── */
.sb-progress { height:6px; background:var(--gray-200); border-radius:10px; overflow:hidden; }
.sb-progress .sb-bar { height:100%; border-radius:10px; background:linear-gradient(90deg, var(--orange), #ffcc66); }
.sb-progress .sb-bar.danger { background:linear-gradient(90deg, var(--danger), #fca5a5); }
.sb-progress .sb-bar.success { background:linear-gradient(90deg, var(--success), #86efac); }

/* ── DIVIDER ─────────────────────────────────────────── */
.sb-divider { height:1px; background:var(--gray-200); margin:18px 0; }
.sb-section-divide {
  display:flex; align-items:center; gap:12px; margin:18px 0 14px;
}
.sb-section-divide span {
  font-family:'Sora', sans-serif; font-size:10.5px; font-weight:700;
  color:var(--gray-400); text-transform:uppercase; letter-spacing:1.5px; white-space:nowrap;
}
.sb-section-divide::before, .sb-section-divide::after { content:''; flex:1; height:1px; background:var(--gray-200); }

/* ── MINI STATS BOX ──────────────────────────────────── */
.mini-stat {
  background:var(--gray-50); border-radius:10px; padding:13px;
  border:1px solid var(--gray-100);
}
.mini-stat .ms-val { font-family:'Sora', sans-serif; font-weight:800; font-size:20px; color:var(--navy); line-height:1; }
.mini-stat .ms-lbl { font-size:10.5px; color:var(--gray-400); margin-top:3px; font-weight:500; }

/* ── BRANCH CARDS ────────────────────────────────────── */
.branch-card {
  background:#fff; border-radius:var(--radius-lg);
  border:1px solid var(--gray-200); box-shadow:var(--shadow);
  padding:18px; transition:var(--transition); height:100%;
}
.branch-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:rgba(255,165,0,.4); }
.bc-icon {
  width:42px; height:42px;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px;
}
.bc-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }

/* ── POS GRID ────────────────────────────────────────── */
.pos-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px; }
.pos-item {
  background:#fff; border:1.5px solid var(--gray-200); border-radius:var(--radius);
  padding:15px 10px; text-align:center; cursor:pointer; transition:var(--transition);
  user-select:none;
}
.pos-item:hover,.pos-item.selected {
  border-color:var(--orange); background:linear-gradient(135deg,#fff9f0,#fff);
  box-shadow:0 4px 16px rgba(255,165,0,.18);
}
.pos-item .pi-emoji { font-size:26px; margin-bottom:7px; }
.pos-item .pi-name  { font-family:'Sora', sans-serif; font-weight:700; font-size:11.5px; color:var(--navy); }
.pos-item .pi-size  { font-size:10px; color:var(--gray-400); margin-top:1px; }
.pos-item .pi-price { font-size:13px; color:var(--orange); font-weight:700; margin-top:4px; }

/* ── POS CART ────────────────────────────────────────── */
.pos-cart { background:#fff; border-radius:var(--radius-lg); border:1px solid var(--gray-200); box-shadow:var(--shadow-lg); }
.cart-head {
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color:#fff; padding:15px 18px; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  font-family:'Sora', sans-serif; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:space-between;
}
.cart-count {
  background:var(--orange); border-radius:50%;
  width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}
.cart-items { padding:12px; max-height:280px; overflow-y:auto; }
.cart-item { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--gray-100); }
.cart-item:last-child { border-bottom:none; }
.ci-name { flex:1; font-size:12.5px; font-weight:600; color:var(--navy); }
.ci-qty-ctrl { display:flex; align-items:center; gap:5px; }
.qty-btn {
  width:23px; height:23px; border-radius:6px; background:var(--gray-100); border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:13px; font-weight:700; color:var(--navy); transition:var(--transition);
}
.qty-btn:hover { background:var(--orange); color:#fff; }
.qty-num { font-family:'Sora', sans-serif; font-weight:700; font-size:13px; min-width:22px; text-align:center; }
.ci-total { font-family:'Sora', sans-serif; font-weight:700; font-size:12.5px; color:var(--orange); min-width:58px; text-align:right; }
.cart-summary { padding:14px; border-top:1px solid var(--gray-200); }
.cart-total-row { display:flex; justify-content:space-between; font-size:12.5px; color:var(--gray-600); padding:5px 0; }
.cart-grand-total { font-family:'Sora', sans-serif; font-weight:800; font-size:17px; color:var(--navy); border-top:2px dashed var(--gray-200); margin-top:6px; padding-top:10px; }
.pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:12px 0; }
.pay-opt {
  padding:9px 8px; border:1.5px solid var(--gray-200); border-radius:9px;
  text-align:center; cursor:pointer; transition:var(--transition);
  font-size:11.5px; font-weight:600; color:var(--gray-600);
}
.pay-opt:hover,.pay-opt.active { border-color:var(--orange); background:#fff9f0; color:var(--orange); }

/* ── MODAL ───────────────────────────────────────────── */
.sb-modal-wrap {
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,128,.52); backdrop-filter:blur(5px);
  align-items:center; justify-content:center; padding:16px;
}
.sb-modal-wrap.show { display:flex; }
.sb-modal {
  background:#fff; border-radius:20px;
  max-width:500px; width:100%; padding:28px;
  box-shadow:0 32px 80px rgba(0,0,0,.22);
  max-height:90vh; overflow-y:auto;
  animation:modalIn .25s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn { from { transform:translateY(20px); opacity:0; } to { transform:none; opacity:1; } }
.modal-title { font-family:'Sora', sans-serif; font-weight:800; font-size:16px; color:var(--navy); }
.modal-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }

/* ── MATERIAL ROWS ───────────────────────────────────── */
.mat-row { display:flex; align-items:flex-start; gap:8px; margin-bottom:10px; }
.mat-row .mat-name { flex:3; }
.mat-row .mat-qty  { flex:1.2; }
.mat-row .mat-unit { flex:1.5; }

/* ── ALERT BOXES ─────────────────────────────────────── */
.sb-alert {
  padding:12px 16px; border-radius:10px; font-size:13px;
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.sb-alert-warning { background:#fef9c3; border:1px solid #fde047; color:#78350f; }
.sb-alert-info    { background:#dbeafe; border:1px solid #93c5fd; color:#1e3a8a; }
.sb-alert-danger  { background:#fee2e2; border:1px solid #fca5a5; color:#7f1d1d; }
.sb-alert-success { background:#dcfce7; border:1px solid #86efac; color:#14532d; }

/* ── UTILITY ─────────────────────────────────────────── */
.text-orange { color:var(--orange) !important; }
.text-navy   { color:var(--navy) !important; }
.text-muted-sb { color:var(--gray-400) !important; font-size:12px; }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.fw-800 { font-weight:800; }
.font-sora { font-family:'Sora', sans-serif; }
.gap-8 { gap:8px; }
.mt-auto { margin-top:auto; }
.overflow-x-auto { overflow-x:auto; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width:991.98px) {
  .sb-sidebar { transform:translateX(calc(-1 * var(--sidebar-w))); }
  .sb-sidebar.sb-open { transform:translateX(0); }
  .sb-topbar { left:0 !important; }
  .sb-main   { margin-left:0 !important; }
}
@media (max-width:767.98px) {
  .sb-content { padding:14px; }
  .sb-topbar  { padding:0 14px; gap:10px; }
  .tb-branch-pill { display:none; }
  .cs-val { font-size:21px; }
}
@media (max-width:575.98px) {
  .pos-grid { grid-template-columns:repeat(3,1fr); }
  .panel-header { flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   SuperBakery Pro — Enterprise Edition Extension Styles
   ============================================================ */

/* ── ROLE BADGE COLORS ───────────────────────────────────── */
.role-owner    { background:linear-gradient(90deg,#7c3aed,#a855f7); color:#fff; }
.role-central  { background:linear-gradient(90deg,var(--navy),var(--navy-light)); color:#fff; }
.role-procure  { background:linear-gradient(90deg,#0891b2,#22d3ee); color:#fff; }
.role-bmanager { background:linear-gradient(90deg,var(--orange-dark),var(--orange)); color:#fff; }
.role-prodmgr  { background:linear-gradient(90deg,#16a34a,#22c55e); color:#fff; }
.role-sales    { background:linear-gradient(90deg,#dc2626,#f87171); color:#fff; }
.role-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 11px; border-radius:20px; font-size:10.5px;
  font-family:'Sora',sans-serif; font-weight:700; letter-spacing:.5px;
}

/* ── TRANSFER STATUS PIPELINE ────────────────────────────── */
.pipeline {
  display:flex; align-items:center; gap:0; width:100%;
  margin:18px 0; overflow-x:auto; padding-bottom:4px;
}
.pipe-step {
  display:flex; flex-direction:column; align-items:center;
  flex:1; min-width:90px; position:relative;
}
.pipe-step::before {
  content:''; position:absolute; top:18px; left:50%;
  width:100%; height:3px; background:var(--gray-200); z-index:0;
}
.pipe-step:last-child::before { display:none; }
.pipe-step.done::before   { background:var(--success); }
.pipe-step.active::before { background:var(--orange); }
.pipe-dot {
  width:36px; height:36px; border-radius:50%; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; border:3px solid var(--gray-200); background:#fff;
  color:var(--gray-400); transition:var(--transition);
}
.pipe-step.done   .pipe-dot { background:var(--success); border-color:var(--success); color:#fff; }
.pipe-step.active .pipe-dot { background:var(--orange);  border-color:var(--orange);  color:#fff; box-shadow:0 0 0 4px rgba(255,165,0,.2); }
.pipe-label { font-size:10px; color:var(--gray-400); margin-top:6px; font-weight:600; text-align:center; }
.pipe-step.done   .pipe-label { color:var(--success); }
.pipe-step.active .pipe-label { color:var(--orange); }

/* ── BATCH PRODUCTION METER ──────────────────────────────── */
.batch-meter { background:var(--gray-100); border-radius:var(--radius); padding:16px; border:1.5px solid var(--gray-200); }
.batch-scale {
  height:22px; background:var(--gray-200); border-radius:30px; position:relative; overflow:hidden; margin:10px 0;
}
.batch-fill {
  height:100%; border-radius:30px; transition:width .4s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg, var(--success) 0%, var(--orange) 75%, var(--danger) 100%);
}
.batch-marker {
  position:absolute; top:0; bottom:0; width:3px; background:var(--navy); border-radius:2px;
}
.batch-marker::after { content:'20kg'; position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:9px; color:var(--navy); font-weight:700; white-space:nowrap; }
.batch-row {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:#fff; border-radius:10px; border:1.5px solid var(--gray-200); margin-bottom:8px; transition:var(--transition);
}
.batch-row:hover { border-color:var(--orange); box-shadow:0 2px 12px rgba(255,165,0,.12); }
.batch-num {
  width:28px; height:28px; border-radius:50%; background:var(--navy);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:12px; flex-shrink:0;
}
.batch-row.over-limit { border-color:var(--danger); background:#fff8f8; }
.batch-row.over-limit .batch-num { background:var(--danger); }

/* ── FINANCIAL GRID ──────────────────────────────────────── */
.fin-card {
  border-radius:var(--radius-lg); padding:20px 22px; position:relative; overflow:hidden; height:100%;
}
.fin-cash     { background:linear-gradient(135deg,#166534,#16a34a); color:#fff; }
.fin-transfer { background:linear-gradient(135deg,#1e40af,#3b82f6); color:#fff; }
.fin-pos      { background:linear-gradient(135deg,#92400e,var(--orange)); color:#fff; }
.fin-expense  { background:linear-gradient(135deg,#991b1b,var(--danger)); color:#fff; }
.fin-profit   { background:linear-gradient(135deg,var(--navy-dark),var(--navy-light)); color:#fff; }
.fin-card .fc-icon { font-size:32px; opacity:.22; position:absolute; right:18px; top:16px; }
.fin-card .fc-val  { font-family:'Sora',sans-serif; font-weight:900; font-size:26px; line-height:1; }
.fin-card .fc-lbl  { font-size:12px; opacity:.85; margin-top:4px; font-weight:500; }
.fin-card .fc-sub  { font-size:11px; opacity:.7; margin-top:8px; }

/* ── EOD CLOSE PANEL ─────────────────────────────────────── */
.eod-step {
  display:flex; align-items:flex-start; gap:14px; padding:14px;
  border:1.5px solid var(--gray-200); border-radius:12px; margin-bottom:10px;
  transition:var(--transition);
}
.eod-step.completed { border-color:var(--success); background:#f0fdf4; }
.eod-step.current   { border-color:var(--orange);  background:#fffbf0; box-shadow:0 4px 16px rgba(255,165,0,.12); }
.eod-num {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:13px;
  background:var(--gray-200); color:var(--gray-600);
}
.eod-step.completed .eod-num { background:var(--success); color:#fff; }
.eod-step.current   .eod-num { background:var(--orange);  color:#fff; }
.eod-title { font-family:'Sora',sans-serif; font-weight:700; font-size:13px; color:var(--navy); }
.eod-desc  { font-size:11.5px; color:var(--gray-400); margin-top:2px; }

/* ── ATTENDANCE TABLE ────────────────────────────────────── */
.att-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--gray-100); }
.att-row:last-child { border-bottom:none; }
.att-avatar { width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:700; font-size:12px; flex-shrink:0; }
.att-name   { flex:1; font-weight:600; font-size:13px; color:var(--navy); }
.att-check  { display:flex; align-items:center; gap:5px; }
.att-toggle { width:42px; height:24px; border-radius:12px; background:var(--gray-200); border:none; cursor:pointer; position:relative; transition:var(--transition); }
.att-toggle.on { background:var(--success); }
.att-toggle::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .2s; }
.att-toggle.on::after { left:21px; }

/* ── POS ENTERPRISE UPGRADES ─────────────────────────────── */
.pos-search-bar {
  display:flex; align-items:center; gap:10px;
  background:#fff; border:2px solid var(--gray-200); border-radius:12px; padding:8px 14px;
  margin-bottom:14px; transition:var(--transition);
}
.pos-search-bar:focus-within { border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,165,0,.12); }
.pos-search-bar input { border:none; outline:none; flex:1; font-size:14px; font-family:'DM Sans',sans-serif; background:none; }
.pos-cat-tabs { display:flex; gap:6px; margin-bottom:12px; overflow-x:auto; padding-bottom:4px; }
.pos-cat-tab  { padding:5px 14px; border-radius:20px; border:1.5px solid var(--gray-200); background:none; font-size:12px; font-weight:600; color:var(--gray-600); cursor:pointer; white-space:nowrap; transition:var(--transition); }
.pos-cat-tab.active { background:var(--navy); color:#fff; border-color:var(--navy); }

/* ── RECEIPT PRINT STYLES ────────────────────────────────── */
@media print {
  .sb-sidebar, .sb-topbar, .no-print { display:none !important; }
  .sb-main { margin-left:0 !important; padding-top:0 !important; }
  .receipt-box { box-shadow:none !important; border:1px solid #ccc; }
}
.receipt-box { max-width:320px; margin:0 auto; background:#fff; border-radius:12px; padding:24px 20px; border:1px solid var(--gray-200); font-size:13px; }
.receipt-box .r-header { text-align:center; margin-bottom:14px; border-bottom:2px dashed var(--gray-200); padding-bottom:14px; }
.receipt-box .r-logo   { font-family:'Sora',sans-serif; font-weight:900; font-size:20px; color:var(--navy); }
.receipt-box .r-row    { display:flex; justify-content:space-between; padding:4px 0; }
.receipt-box .r-divider{ border-top:1px dashed var(--gray-200); margin:8px 0; }
.receipt-box .r-total  { font-family:'Sora',sans-serif; font-weight:800; font-size:16px; color:var(--navy); }
.receipt-box .r-footer { text-align:center; margin-top:14px; font-size:11px; color:var(--gray-400); border-top:2px dashed var(--gray-200); padding-top:12px; }

/* ── PERSONAL PERFORMANCE SPARKLINE ─────────────────────── */
.perf-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--gray-100); }
.perf-day { font-size:11.5px; color:var(--gray-400); min-width:68px; }
.perf-bar-wrap { flex:1; height:7px; background:var(--gray-200); border-radius:10px; overflow:hidden; }
.perf-bar  { height:100%; border-radius:10px; background:linear-gradient(90deg,var(--orange),var(--orange-light)); }
.perf-val  { font-family:'Sora',sans-serif; font-weight:700; font-size:12.5px; min-width:72px; text-align:right; color:var(--navy); }

/* ── PROCUREMENT STATUS CARD ─────────────────────────────── */
.proc-card {
  background:#fff; border-radius:var(--radius-lg); padding:16px 18px;
  border:1.5px solid var(--gray-200); box-shadow:var(--shadow); transition:var(--transition);
}
.proc-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.proc-card.status-approved  { border-left:4px solid var(--orange); }
.proc-card.status-intransit { border-left:4px solid var(--info); }
.proc-card.status-delivered { border-left:4px solid var(--success); }
.proc-card.status-pending   { border-left:4px solid var(--warning); }

/* ── OWNER FINANCIAL BREAKDOWN ───────────────────────────── */
.branch-fin-row {
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-radius:10px; background:var(--gray-50); margin-bottom:8px;
  border:1px solid var(--gray-100); transition:var(--transition);
}
.branch-fin-row:hover { background:#fff; box-shadow:var(--shadow); }
.bfr-name { flex:1; font-weight:600; font-size:13px; color:var(--navy); }
.bfr-cash, .bfr-transfer, .bfr-pos { min-width:80px; text-align:right; font-size:12.5px; font-weight:700; }
.bfr-cash     { color:#16a34a; }
.bfr-transfer { color:#2563eb; }
.bfr-pos      { color:var(--orange-dark); }
.bfr-total    { min-width:90px; text-align:right; font-family:'Sora',sans-serif; font-weight:800; font-size:13.5px; color:var(--navy); }

/* ── Enterprise Extension: Missing utility classes ─────────────── */
.mat-row  { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.mat-name { flex:1.8; }
.mat-qty  { flex:1; }
.fw-900   { font-weight:900 !important; }
.ms-val   { font-family:'Sora',sans-serif; font-weight:900; font-size:26px; color:var(--navy); }
.ms-lbl   { font-size:12px; color:var(--gray-400); font-weight:500; margin-top:4px; }
.mini-stat { background:#fff; border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow); }