:root{
  --muted: #6b7280;
  --border: rgba(15, 23, 42, .08);
  --shadow: 0 10px 24px rgba(0,0,0,.10);
}

body{ background:#f4f6fb; }

.topbar{
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(90deg, #0b1220, #0f1a2e);
  color:#fff; padding:.75rem 1rem;
  display:flex; justify-content:space-between; align-items:center;
  box-shadow: var(--shadow);
}

.brand{ display:flex; align-items:center; gap:.75rem; }
.brand-badge{
  width: 42px; height: 42px; border-radius: 14px;
  background: rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
}
.brand-title{ font-weight: 900; line-height: 1.1; }
.brand-sub{ font-size:.78rem; opacity:.8; }

.app{ display:flex; min-height: calc(100vh - 64px); }

.sidebar{
  width: 280px;
  background:#fff;
  border-right: 1px solid var(--border);
  padding: 1rem;
  display:flex; flex-direction:column; gap: 1rem;
}

.sidebar-title{
  font-size:.78rem; color:var(--muted);
  text-transform: uppercase; letter-spacing:.08em;
  margin-bottom:.5rem;
}

.navbtn{
  width:100%;
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .75rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  color:#111827;
  text-align:left;
  cursor:pointer;
  transition: all .12s ease;
}
.navbtn:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0,0,0,.06); }
.navbtn.is-active{
  border-color: rgba(59,130,246,.45);
  background: rgba(59,130,246,.06);
}

.chiprow{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{
  font-size:.78rem; border:1px solid var(--border);
  border-radius:999px; padding:.22rem .55rem; background:#fff;
}
.chip.is-on{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.08);
}

.main{ flex:1; padding: 1rem; }

.device-frame{ background: transparent; }

.device-topbar{
  display:none;
  padding:.5rem .75rem;
  border:1px solid var(--border);
  border-bottom:none;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  background:#fff;
  align-items:center;
  gap:.4rem;
}
.device-dot{ width:10px; height:10px; border-radius:50%; background: rgba(0,0,0,.15); }

.content{ background: transparent; }

.screen{ display:none; }
.screen.is-active{ display:block; }

.screen-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; margin-bottom:1rem; flex-wrap:wrap;
}
.screen-title{ margin:0; font-weight: 900; color:#0f172a; }
.screen-sub{ color:var(--muted); font-size:.92rem; }

.kpi-label{
  color: var(--muted);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.kpi-value{
  font-size: 2rem;
  font-weight: 950;
  color:#0f172a;
  line-height: 1.1;
}
.kpi-sub{ color:var(--muted); font-size:.9rem; margin-top:.25rem; }

.mini-title{
  font-size:.9rem;
  font-weight: 900;
  margin-bottom:.5rem;
  color:#0f172a;
}

.mini-kpi{
  border:1px solid var(--border);
  border-radius:16px;
  padding:.85rem;
  background:#fff;
}
.mini-kpi-label{
  font-size:.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing:.06em;
}
.mini-kpi-value{ font-weight: 950; font-size: 1.05rem; margin-top:.25rem; }
.mini-kpi-sub{ color: var(--muted); font-size:.85rem; }

/* Staff mobile headers */
.mobile-head{
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  margin-bottom: .75rem;
}
.mobile-title{
  font-weight: 950;
  font-size: 1.25rem;
  color:#0f172a;
}
.mobile-sub{
  font-size:.85rem;
  color: var(--muted);
}
.mobile-big{
  font-weight: 950;
  font-size: 1.05rem;
  color:#0f172a;
}

/* Mobile preview mode */
.mobile-preview .sidebar{ display:none; }
.mobile-preview .main{ display:flex; justify-content:center; }
.mobile-preview .device-frame{ width: 420px; max-width: 100%; }
.mobile-preview .device-topbar{ display:flex; }
.mobile-preview .content{
  background:#fff;
  border:1px solid var(--border);
  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;
  padding:.75rem;
  box-shadow: var(--shadow);
}

/* Sidebar toggle for small screens */
@media (max-width: 991px){
  .sidebar{
    position: fixed;
    left: 0; top: 64px;
    height: calc(100vh - 64px);
    transform: translateX(-110%);
    transition: transform .15s ease;
    z-index: 60;
    box-shadow: var(--shadow);
  }
  .sidebar.is-open{ transform: translateX(0%); }
}

/* ===== Staff Hamburger ===== */
.mobile-appbar{
  display:none;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border: 1px solid var(--border);
  border-bottom: none;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: .5rem .6rem;
  align-items:center;
  justify-content: space-between;
  gap:.5rem;
}
.mobile-appbar-title{
  flex:1;
  text-align:left;
  line-height: 1.1;
  padding-left: .25rem;
}

.mobile-drawer-backdrop{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 2000;
}
.mobile-drawer{
  display:none;
  position: fixed;
  top: 0;
  left: 0;
  width: 86%;
  max-width: 340px;
  height: 100vh;
  background: #fff;
  z-index: 2001;
  box-shadow: var(--shadow);
  border-right: 1px solid var(--border);
}
.mobile-drawer-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  padding: .75rem .75rem;
  border-bottom: 1px solid var(--border);
}
.mobile-drawer-body{
  padding: .5rem .75rem 1rem;
}

.drawerbtn{
  width: 100%;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color:#111827;
  text-align:left;
  cursor:pointer;
  transition: all .12s ease;
  margin-bottom: .5rem;
}
.drawerbtn.is-active{
  border-color: rgba(59,130,246,.45);
  background: rgba(59,130,246,.06);
}

.mobile-preview.is-staff .mobile-appbar{
  display:flex;
}
body.mobile-drawer-open .mobile-drawer-backdrop{ display:block; }
body.mobile-drawer-open .mobile-drawer{ display:block; }

/* Break buttons */
#btnStartBreak, #btnEndBreak{
  border-radius: 999px;
  font-weight: 800;
}