*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto}a{text-decoration:none;color:#111}input,textarea,button{width:100%;padding:.6rem .7rem;margin:.3rem 0;border:1px solid #d1d5db;border-radius:6px}button.btn{background:var(--primary);color:#111;border:1px solid #f5d565;cursor:pointer}button.btn[disabled]{opacity:.5;cursor:not-allowed}button.btn.secondary{background:#6b7280;color:#fff}.alert{background:#fee2e2;color:#991b1b;padding:.5rem;border-radius:6px;margin:.5rem 0}
.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
/* override old dark sidebar to match theme */
.sidebar{color:var(--text);padding:1rem;display:flex;flex-direction:column;background:#fff;border:1px solid #e5e7eb}
/* nav links styled like theme buttons */
.nav a.btn-ghost, .nav a.btn{display:block;width:100%;text-align:left}
.content{background:#fff;padding:0;margin:8px}
.topbar{height:56px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;position:sticky;top:0;z-index:40}
.topbar .mobile-nav{display:none;gap:.6rem}
.page{padding:1rem;background:transparent;border:none;border-radius:24px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:1rem}
.grid-2{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width: 900px){.grid-2{grid-template-columns:1fr 1.2fr}}
.grid-2-compact{display:grid;grid-template-columns:1fr;gap:.8rem}
@media (min-width: 700px){.grid-2-compact{grid-template-columns:1fr 1fr}}
.table{width:100%;border-collapse:collapse;background:#fff}
.table-responsive{width:100%;overflow-x:auto}
.table th,.table td{padding:.6rem;border:1px solid #e5e7eb;text-align:left}
.tabs{display:flex;gap:.5rem;margin:.5rem 0;flex-wrap:wrap}
.tab{display:inline-block;padding:.5rem .8rem;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:#111}
.tab.active{background:#111;color:#fff;border-color:#111}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:8px;max-width:520px;width:92%;border:1px solid #e5e7eb;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.modal header{padding:1rem;border-bottom:1px solid #e5e7eb;font-weight:600}
.modal .body{padding:1rem}
.modal .actions{padding:1rem;border-top:1px solid #e5e7eb;display:flex;gap:.5rem;justify-content:flex-end}

/* Toast */
.toast-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:.5rem;z-index:60}
*.toast{background:#111827;color:#fff;padding:.6rem .8rem;border-radius:6px;box-shadow:0 10px 20px rgba(0,0,0,.2)}

/* Table refinements */
.table thead th{position:sticky;top:0;background:#fff;z-index:1}
.table tbody tr:hover{background:#fafafa}
.table .num{width:56px}

/* Icon button (kept for future, not used now) */
.btn-icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;padding:0}
.btn-icon:hover{background:#111;color:#fff;border-color:#111}

/* Responsive tweaks */
@media (max-width: 1024px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .topbar .mobile-nav{display:flex}
  .page{padding:.75rem}
  .table th,.table td{padding:.5rem}
}
@media (max-width: 768px){
  .cards{grid-template-columns:1fr 1fr}
  .brand-name{display:none}
  .topbar{padding:0 .75rem}
  input,textarea,button{font-size:14px}
}
@media (max-width: 480px){
  .cards{grid-template-columns:1fr}
  .tabs{gap:.3rem}
  .tab{padding:.4rem .6rem}
  .table th,.table td{padding:.45rem}
}

/* enforce black hover */
button.btn:hover{background:#000 !important;color:#fff !important;border-color:#000 !important}

/* Desktop default: hide mobile-only UI elements */
.mobile-nav{display:none}
.m-overlay,.m-sidebar{display:none}

/* Mobile-only topbar & sidebar */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat-box{display:flex;align-items:center;justify-content:space-between}
.stat-num{font-size:20px;font-weight:700}
@media (max-width: 768px){
  /* hide desktop header links and original brand row on mobile */
  .topbar-nav{display:none !important}
  /* show existing brand logo on mobile and position it to the right */
  .topbar .brand-row{display:flex !important; position:absolute; right:12px; top:50%; transform:translateY(-50%); margin:0}
  .topbar .brand-row .brand-name{display:none !important}
  .topbar .brand-row img{height:24px; width:auto; display:block}

  /* fix header to viewport width and top, with side margins and radius (no touching walls) */
  .topbar{position:fixed;top:0;left:8px;right:8px;width:auto;height:48px;z-index:100;border-radius:3px;overflow:hidden;padding:0;min-width:auto !important;overflow-x:visible !important;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;backdrop-filter:saturate(180%) blur(8px);}

  /* create 10px space below header and offset content */
  .layout{margin-top:58px; position:relative}
  .user-info{display:none !important}

  /* mobile controls: hamburger left, logo right */
  .topbar .mobile-nav{display:flex; align-items:center; justify-content:flex-start; width:100%; height:48px; gap:12px; padding:0 10px}
  /* We rely on .brand-row on the right; mobile-logo kept for fallback but hidden to avoid duplicates */
  .topbar .mobile-logo{display:none}

  .topbar .hamburger{width:36px;height:36px;border:none;background:transparent;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0;cursor:pointer}
  .topbar .hamburger span{display:block;width:22px;height:2px;background:#222;transition:transform .22s ease,opacity .22s ease}
  .topbar .hamburger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .topbar .hamburger.is-open span:nth-child(2){opacity:0}
  .topbar .hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* overlay above header */
  .m-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:200;display:block; height:100dvh}
  .m-overlay.active{opacity:1;pointer-events:auto}

  /* sidebar covering from top (above header) */
  .m-sidebar{position:fixed;top:0;left:0;height:100dvh;width:80%;max-width:300px;background:#fff;box-shadow:2px 0 12px rgba(0,0,0,.12);transform:translateX(-100%);transition:transform .28s ease;z-index:201;display:flex;flex-direction:column; overflow-y:auto}
  .m-sidebar.open{transform:translateX(0)}
  .m-sidebar .close-btn{align-self:flex-end;font-size:28px;line-height:1;width:44px;height:44px;border:none;background:transparent;color:#333;cursor:pointer}

  /* account name above links */
  .m-sidebar .m-account{font-size:12px;color:#6b7280;padding:4px 16px 0 16px}

  .m-sidebar .m-menu{display:flex;flex-direction:column;padding:12px 16px 32px 16px;gap:8px}
  .m-sidebar .m-menu a{color:#111;text-decoration:none;padding:12px 8px;border-radius:6px;transition:background-color .18s ease;font-weight:500}
  .m-sidebar .m-menu a:hover{background:#f5f5f5}
  .m-sidebar .logout-form button{width:100%}

  /* Admin dashboard: center status tabs inline on mobile */
  .filters-row{flex-direction:column; align-items:center !important; gap:.5rem}
  .filters-row .tabs{margin:0 !important; justify-content:center; flex-wrap:nowrap}
  .filters-row .tabs .tab{white-space:nowrap}
  .filters-row form{width:100%; display:flex; justify-content:center}
}