/* ==========================================================
   KING FAMILY RESTAURANT V2 - Base Styles
   Shared design tokens, sidebar, topbar, buttons, modal, tables.
   Loaded by every page alongside its page-specific CSS.
   ========================================================== */

:root{
  --bg: #f4f7f9;
  --panel: #ffffff;
  --border: #e3e9ed;
  --text: #17212b;
  --muted: #71808d;
  --primary: #0f766e;
  --primary-dark: #0b5f59;
  --primary-light: #e8f6f4;
  --danger: #dc3545;
  --sidebar-bg: #12252a;
  --sidebar-hover: #1a353b;
  --sidebar-active: #0f766e;

  --radius: 8px;
  --shadow: 0 2px 10px rgba(18, 37, 42, 0.08);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:14px;
}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* ---------- Layout shell ---------- */
.app-shell{
  display:flex;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
.sidebar{
  width:230px;
  flex-shrink:0;
  background:var(--sidebar-bg);
  color:#c9d4d6;
  display:flex;
  flex-direction:column;
  padding:0 0 16px;
}
.sidebar .brand{
  padding:20px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  margin-bottom:8px;
}
.sidebar .brand .b1{
  font-size:15px;
  font-weight:700;
  color:#ffffff;
  letter-spacing:0.5px;
}
.sidebar .brand .b2{
  font-size:11px;
  color:var(--primary);
  letter-spacing:1.5px;
  font-weight:600;
  margin-top:2px;
}
.sidebar .nav-section{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:#4d6367;
  padding:14px 18px 6px;
}
.sidebar nav a, .sidebar nav .nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  font-size:13.5px;
  color:#c9d4d6;
  cursor:pointer;
  border-left:3px solid transparent;
  transition:background .12s ease;
}
.sidebar nav a:hover, .sidebar nav .nav-item:hover{
  background:var(--sidebar-hover);
  color:#ffffff;
}
.sidebar nav a.active{
  background:var(--sidebar-hover);
  border-left-color:var(--sidebar-active);
  color:#ffffff;
  font-weight:600;
}
.sidebar .icon{width:16px;text-align:center;opacity:0.85;}

/* ---------- Main area ---------- */
.main-area{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.topbar{
  height:56px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  flex-shrink:0;
}
.topbar h1{
  font-size:16px;
  font-weight:700;
  margin:0;
  color:var(--text);
}
.topbar .user-chip{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--muted);
}
.topbar .user-chip strong{color:var(--text);}

.content{
  flex:1;
  padding:20px 24px;
  overflow-y:auto;
}

/* ---------- Panels / cards ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 16px;
  border-radius:6px;
  border:1px solid transparent;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-primary:disabled{opacity:0.45;cursor:not-allowed;}
.btn-outline{background:#fff;border-color:var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.btn-danger{background:#fff;border-color:var(--danger);color:var(--danger);}
.btn-danger:hover{background:var(--danger);color:#fff;}
.btn-sm{padding:6px 11px;font-size:12px;}
.btn-block{width:100%;}

/* ---------- Form inputs ---------- */
input[type="text"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], select{
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:13px;
  font-family:inherit;
  background:#fff;
  color:var(--text);
  width:100%;
}
input:focus, select:focus{outline:none;border-color:var(--primary);}
label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:4px;}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{
  text-align:left;
  padding:10px 12px;
  background:var(--primary-light);
  color:var(--primary-dark);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  font-weight:700;
  border-bottom:1px solid var(--border);
}
tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  color:var(--text);
}
tbody tr:hover{background:#fafcfc;}

/* ---------- Badges/tags ---------- */
.tag{
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.3px;
}
.tag-food{background:var(--primary-light);color:var(--primary-dark);}
.tag-alcohol{background:#fdeee9;color:#b8461f;}
.tag-active{background:#e8f6f4;color:var(--primary-dark);}
.tag-inactive{background:#f1f1f1;color:var(--muted);}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(18,37,42,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
}
.modal-overlay.show{display:flex;}
.modal-box{
  background:#fff;
  border-radius:var(--radius);
  width:420px;
  max-width:92vw;
  max-height:88vh;
  overflow-y:auto;
  box-shadow:0 12px 40px rgba(18,37,42,0.25);
}
.modal-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.modal-header h2{font-size:15px;margin:0;}
.modal-header .close-x{cursor:pointer;color:var(--muted);font-size:18px;line-height:1;}
.modal-body{padding:18px 20px;}
.modal-footer{
  padding:14px 20px;
  border-top:1px solid var(--border);
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  bottom:22px;
  left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--sidebar-bg);
  color:#fff;
  padding:11px 20px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:all .2s ease;
  z-index:200;
  box-shadow:var(--shadow);
}
.toast.error{background:var(--danger);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Empty state ---------- */
.empty-state{
  text-align:center;
  color:var(--muted);
  padding:36px 16px;
  font-size:13px;
}

/* ---------- Scrollbar (subtle) ---------- */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#d5dde0;border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .sidebar{width:64px;}
  .sidebar .brand .b1, .sidebar .brand .b2, .sidebar .nav-section, .sidebar nav a span.label{
    display:none;
  }
  .sidebar nav a{justify-content:center;padding:12px 0;}
}
@media (max-width: 700px){
  .app-shell{flex-direction:column;}
  .sidebar{width:100%;flex-direction:row;overflow-x:auto;padding:0;}
  .sidebar .brand{display:none;}
  .sidebar .nav-section{display:none;}
  .sidebar nav{display:flex;}
  .sidebar nav a{border-left:none;border-bottom:3px solid transparent;white-space:nowrap;}
  .sidebar nav a.active{border-left-color:transparent;border-bottom-color:var(--sidebar-active);}
}