/* -------------------------------------------------
   Premium dark theme with glass‑morphism
   ------------------------------------------------- */
:root {
  --primary: hsl(210, 60%, 55%);
  --primary-hover: hsl(210, 60%, 45%);
  --bg: hsl(210, 10%, 12%);
  --card-bg: hsla(210, 10%, 20%, 0.4);
  --text: #f0f0f0;
  --border-radius: 12px;
  --font-family: 'Inter', sans-serif;
  --danger: #ff4d4f;
  --success: #52c41a;
  --warning: #faad14;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family: var(--font-family); background: var(--bg); color: var(--text); min-height:100vh; }
body.login-page { display:flex; align-items:center; justify-content:center; }

.login-card {
  backdrop-filter: blur(12px); background: var(--card-bg); padding: 2rem; border-radius: var(--border-radius);
  width: 320px; text-align:center; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.login-card h1 { margin-bottom:1.5rem; font-weight:600; }
input, select { width:100%; padding:0.75rem; margin:0.5rem 0; border:none; border-radius:6px; background: rgba(255,255,255,0.1); color: var(--text); font-size:1rem; }
button { padding:0.75rem 1rem; background: var(--primary); border:none; border-radius:6px; color:#fff; font-weight:600; cursor:pointer; transition: all .2s; }
button:hover { background: var(--primary-hover); }
button.danger { background: var(--danger); }

.dashboard-header { padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; background: var(--card-bg); backdrop-filter: blur(12px); box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.dashboard-header h2 { margin: 0; }
.dashboard-header nav a { color: var(--text); text-decoration: none; margin-right: 1rem; font-weight: 500; }
.dashboard-header nav a:hover { color: var(--primary); }

main.dashboard { display:flex; gap:1.5rem; padding:1.5rem; height: calc(100vh - 72px); }
.section-panel { background:var(--card-bg); padding:1.5rem; border-radius:var(--border-radius); overflow-y:auto; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }

.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.menu-card { background: rgba(255,255,255,0.05); padding: 1rem; border-radius: 8px; cursor: pointer; transition: transform 0.2s, background 0.2s; text-align: center; }
.menu-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); }
.menu-card h4 { margin: 0 0 0.5rem 0; font-size: 1.1rem; }
.menu-card p { margin: 0; color: #aaa; }

.order-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.order-controls button { background: rgba(255,255,255,0.1); padding: 0.2rem 0.5rem; margin: 0 0.2rem; }

.table-layout { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.table-layout th, .table-layout td { padding: 0.75rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.1); }

/* Table Cards */
.table-card { padding: 1rem; border-radius: 8px; cursor: pointer; text-align: center; transition: 0.2s; border: 2px solid transparent;}
.table-empty { background: rgba(82, 196, 26, 0.2); border-color: rgba(82, 196, 26, 0.5); color: #fff;}
.table-empty:hover { background: rgba(82, 196, 26, 0.4); }
.table-seated { background: rgba(250, 173, 20, 0.2); border-color: rgba(250, 173, 20, 0.5); color: #fff; }
.table-ordered { background: rgba(250, 173, 20, 0.4); border-color: rgba(250, 173, 20, 0.8); color: #fff; }