/* ============================================================
   BREAK POINT BILLIARDS — Admin / backend styles
   ============================================================ */
:root {
  --black: #050605; --deep-green: #07150F; --pool-green: #123D2A;
  --billiard: #1D6B45; --gold: #C9A227; --white: #F5F5F5; --muted: #B7B7B7;
  --panel: #0e1a14; --panel-2: #0b1510; --line: rgba(255,255,255,0.08);
  --input-bg: rgba(255,255,255,0.04); --row-hover: rgba(255,255,255,0.02);
  --font-head: 'Oswald', sans-serif; --font-body: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(0.22,1,0.36,1);
}

/* ---------------- LIGHT MODE ----------------
   Remaps the semantic color variables. Toggled via [data-theme="light"]
   on <html> (set by assets/js/theme.js, persisted in localStorage). */
html[data-theme="light"] {
  --black: #f4f6f4;        /* page background */
  --deep-green: #eef1ee;
  --pool-green: #e4ece7;
  --panel: #ffffff;        /* cards */
  --panel-2: #f7f9f8;      /* sidebar / bars */
  --white: #16211b;        /* primary text */
  --muted: #5c6b63;        /* secondary text */
  --line: rgba(16,33,27,0.12);
  --input-bg: #ffffff;
  --row-hover: rgba(16,33,27,0.035);
  --billiard: #1D6B45;
  --gold: #a9861a;         /* slightly deeper gold for contrast on white */
}
html[data-theme="light"] body { background: #eef1ee; }
html[data-theme="light"] .auth-body { background: radial-gradient(ellipse at top, #e4ece7, #eef1ee); }
html[data-theme="light"] .table-tile, html[data-theme="light"] .stat-card { box-shadow: 0 1px 2px rgba(16,33,27,0.06); }
html[data-theme="light"] .bar-chart__bar { background: linear-gradient(var(--billiard), #2f8a5c); }

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font-body); background: var(--black); color: var(--white); font-size: 15px; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
a { color: inherit; text-decoration: none; }
img { max-width:100%; display:block; }
.muted { color: var(--muted); }

/* ---- Auth (login) ---- */
.auth-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background: radial-gradient(ellipse at top, #0d2a1c, #050605); padding:2rem; }
.auth-card { width:100%; max-width:400px; background: var(--panel); border:1px solid var(--line); border-radius:10px; padding:2.5rem; }
.auth-brand { font-family: var(--font-head); font-size:1.5rem; letter-spacing:0.12em; margin-bottom:0.3rem; }
.auth-brand .dot { color: var(--gold); }
.auth-title { font-family: var(--font-head); letter-spacing:0.1em; font-size:1.1rem; color: var(--muted); margin-bottom:1.6rem; }
.auth-error { background: rgba(255,80,80,0.12); border:1px solid rgba(255,80,80,0.3); color:#ff9b9b; padding:0.7rem 1rem; border-radius:6px; margin-bottom:1rem; font-size:0.9rem; }
.auth-note { background: rgba(201,162,39,0.1); border:1px solid rgba(201,162,39,0.3); color: var(--gold); padding:0.7rem 1rem; border-radius:6px; margin-bottom:1rem; font-size:0.9rem; }
.auth-hint { margin-top:1.2rem; color: var(--muted); font-size:0.85rem; text-align:center; }

/* ---- Fields / buttons ---- */
.field { margin-bottom:1rem; }
.field label { display:block; font-family: var(--font-head); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--muted); margin-bottom:0.4rem; }
.field input, .field select, .field textarea {
  width:100%; background: var(--input-bg); border:1px solid var(--line); color: var(--white);
  padding:0.7rem 0.9rem; border-radius:6px; font-family: var(--font-body); font-size:0.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--gold); }
.field select option { background: var(--panel); color: var(--white); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-family: var(--font-head); letter-spacing:0.12em; text-transform:uppercase; font-size:0.82rem; padding:0.7rem 1.4rem; border-radius:6px; border:1px solid transparent; cursor:pointer; transition: all 0.3s var(--ease); }
.btn--gold { background: var(--gold); color: #111; }
.btn--gold:hover { background:#e0b530; }
.btn--ghost { background:transparent; color: var(--white); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--danger { background: transparent; color:#ff8b8b; border-color: rgba(255,80,80,0.4); }
.btn--danger:hover { background: rgba(255,80,80,0.15); }
.btn--sm { padding:0.4rem 0.8rem; font-size:0.72rem; }

/* ---- Layout ---- */
.admin { display:flex; min-height:100vh; }
.admin-sidebar {
  width:250px; background: var(--panel-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:100; transition: transform 0.4s var(--ease);
}
.admin-brand { font-family: var(--font-head); font-size:1.4rem; letter-spacing:0.12em; padding:1.5rem 1.5rem 1.2rem; display:flex; align-items:center; gap:0.5rem; }
.admin-brand .dot { color: var(--gold); }
.admin-brand small { font-size:0.6rem; letter-spacing:0.3em; color: var(--muted); margin-left:auto; }
.admin-nav { flex:1; padding:0.5rem 0.6rem; overflow-y:auto; }
.admin-nav__item { display:flex; align-items:center; gap:0.8rem; padding:0.75rem 0.9rem; border-radius:8px; color: var(--muted); font-size:0.92rem; margin-bottom:2px; transition: all 0.2s; }
.admin-nav__item .ico { width:22px; text-align:center; opacity:0.9; }
.admin-nav__item:hover { background: var(--row-hover); color: var(--white); }
.admin-nav__item.is-active { background: linear-gradient(90deg, rgba(29,107,69,0.3), transparent); color: var(--white); border-left:2px solid var(--gold); }
.admin-nav__logout { margin:0.6rem; color:#ff9b9b; }
.admin-nav__logout:hover { background: rgba(255,80,80,0.12); }

.admin-main { flex:1; margin-left:250px; min-width:0; }
.admin-top { display:flex; align-items:center; gap:1rem; padding:1.1rem 2rem; border-bottom:1px solid var(--line); background: var(--panel-2); position:sticky; top:0; z-index:50; }
.admin-top__title { font-family: var(--font-head); font-weight:500; letter-spacing:0.06em; font-size:1.3rem; }
.theme-toggle { margin-left:auto; display:inline-flex; align-items:center; gap:0.4rem; background:var(--input-bg); border:1px solid var(--line); color:var(--white); padding:0.45rem 0.8rem; border-radius:20px; font-family:var(--font-head); letter-spacing:0.08em; font-size:0.72rem; text-transform:uppercase; cursor:pointer; transition:all 0.2s; }
.theme-toggle:hover { border-color:var(--gold); color:var(--gold); }
.theme-toggle .theme-ico { font-size:0.95rem; line-height:1; }
.admin-top__user { text-align:right; line-height:1.2; }
.admin-top__user small { display:block; color: var(--muted); font-size:0.75rem; }
.admin-burger { display:none; background:none; border:none; color: var(--white); font-size:1.4rem; cursor:pointer; }
.admin-content { padding:2rem; }

/* ---- Stat cards ---- */
.stat-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background: var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.3rem 1.4rem; }
.stat-card--gold { background: linear-gradient(135deg, rgba(201,162,39,0.18), var(--panel)); border-color: rgba(201,162,39,0.3); }
.stat-card__label { font-family: var(--font-head); letter-spacing:0.12em; text-transform:uppercase; font-size:0.72rem; color: var(--muted); margin-bottom:0.6rem; }
.stat-card__value { font-family: var(--font-head); font-size:2rem; letter-spacing:0.02em; }

/* ---- Panels / dashboard ---- */
.dash-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.panel { background: var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.4rem; margin-bottom:1.5rem; }
.panel__title { font-family: var(--font-head); font-weight:500; letter-spacing:0.06em; font-size:1.1rem; margin-bottom:1.1rem; }

/* ---- Bar chart ---- */
.bar-chart { display:flex; align-items:flex-end; gap:1rem; height:200px; padding-top:1rem; }
.bar-chart__col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:0.5rem; }
.bar-chart__bar { width:70%; max-width:48px; background: linear-gradient(var(--billiard), var(--pool-green)); border-radius:4px 4px 0 0; transition: height 0.6s var(--ease); }
.bar-chart__label { font-size:0.75rem; color: var(--muted); }

/* ---- Table board (visual tiles) ---- */
.table-board { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:0.8rem; }
.table-tile { border-radius:10px; padding:1.1rem; text-align:center; border:1px solid var(--line); background: var(--panel-2); transition: transform 0.2s; }
.table-tile:hover { transform: translateY(-2px); }
.table-tile__name { font-family: var(--font-head); letter-spacing:0.06em; font-size:1.05rem; }
.table-tile__status { font-size:0.68rem; letter-spacing:0.14em; margin-top:0.3rem; font-weight:600; }
.table-tile--available { border-color: rgba(29,107,69,0.5); } .table-tile--available .table-tile__status { color:#74d79b; }
.table-tile--occupied { border-color: rgba(255,80,80,0.4); background: rgba(255,80,80,0.08); } .table-tile--occupied .table-tile__status { color:#ff9b9b; }
.table-tile--reserved { border-color: rgba(201,162,39,0.5); background: rgba(201,162,39,0.08); } .table-tile--reserved .table-tile__status { color: var(--gold); }
.table-tile--maintenance { border-color: rgba(150,150,150,0.4); background: rgba(150,150,150,0.07); } .table-tile--maintenance .table-tile__status { color: var(--muted); }

/* ---- Data tables ---- */
.data-table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.data-table th { text-align:left; font-family: var(--font-head); letter-spacing:0.08em; text-transform:uppercase; font-size:0.72rem; color: var(--muted); padding:0.6rem 0.8rem; border-bottom:1px solid var(--line); }
.data-table td { padding:0.75rem 0.8rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.data-table tr:hover td { background: var(--row-hover); }
.table-actions { display:flex; gap:0.4rem; flex-wrap:wrap; }

/* ---- Badges ---- */
.badge { display:inline-block; font-size:0.7rem; letter-spacing:0.06em; padding:0.25rem 0.6rem; border-radius:20px; font-weight:600; text-transform:uppercase; }
.badge--pending, .badge--open { background: rgba(201,162,39,0.15); color: var(--gold); }
.badge--confirmed, .badge--paid, .badge--active, .badge--available { background: rgba(29,107,69,0.2); color:#74d79b; }
.badge--cancelled, .badge--disabled, .badge--inactive { background: rgba(255,80,80,0.15); color:#ff9b9b; }
.badge--completed { background: rgba(90,125,224,0.15); color:#9bb3ff; }
.badge--warning { background: rgba(255,160,60,0.15); color:#ffb46b; }
.badge--occupied { background: rgba(255,80,80,0.15); color:#ff9b9b; }
.badge--reserved { background: rgba(201,162,39,0.15); color: var(--gold); }
.badge--maintenance { background: rgba(150,150,150,0.15); color: var(--muted); }

/* ---- Page header / toolbar ---- */
.page-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.page-head .btn { margin-left:auto; }
.flash { padding:0.8rem 1.1rem; border-radius:8px; margin-bottom:1.2rem; font-size:0.9rem; }
.flash--success { background: rgba(29,107,69,0.18); border:1px solid rgba(29,107,69,0.4); color:#9fe6bb; }
.flash--error { background: rgba(255,80,80,0.12); border:1px solid rgba(255,80,80,0.3); color:#ff9b9b; }

/* ---- Modal ---- */
.modal-overlay { position:fixed; inset:0; background: rgba(5,6,5,0.8); z-index:500; display:none; align-items:flex-start; justify-content:center; padding:4vh 1rem; overflow-y:auto; }
.modal-overlay.open { display:flex; }
.modal { background: var(--panel); border:1px solid var(--line); border-radius:12px; width:100%; max-width:560px; padding:1.8rem; }
.modal__title { font-family: var(--font-head); letter-spacing:0.05em; font-size:1.3rem; margin-bottom:1.2rem; }
.modal__actions { display:flex; gap:0.6rem; justify-content:flex-end; margin-top:1.2rem; }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:0 1rem; }
.form-grid .field.full { grid-column: 1 / -1; }

/* ---- Employee card preview ---- */
.emp-card-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:1.2rem; }
.emp-card-prev { background: var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.4rem; text-align:center; }
.emp-card-prev img, .emp-card-prev .noimg { width:84px; height:84px; border-radius:50%; object-fit:cover; margin:0 auto 0.8rem; border:2px solid var(--gold); }
.emp-card-prev .noimg { display:flex; align-items:center; justify-content:center; background: var(--pool-green); font-family: var(--font-head); font-size:1.6rem; }
.emp-card-prev h3 { font-family: var(--font-head); letter-spacing:0.05em; font-size:1.2rem; }
.emp-card-prev .pos { color: var(--gold); font-size:0.85rem; }
.emp-card-prev .code { color: var(--muted); font-size:0.8rem; margin:0.3rem 0 0.9rem; letter-spacing:0.1em; }
.emp-card-prev .qr { width:120px; height:120px; margin:0.6rem auto; background:#fff; padding:6px; border-radius:8px; }
.emp-card-prev .qr img { width:100%; height:100%; border:none; border-radius:0; }

/* Make every data table horizontally scrollable inside its panel on small screens */
.panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { min-width: 520px; }

/* ---- Responsive ---- */
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2,1fr); } .dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .admin-sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,0.6); width: 260px; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left:0; }
  .admin-burger { display:block; }
  .form-grid { grid-template-columns: 1fr; }
  .admin-content { padding:1.2rem; }
  .admin-top { padding: 0.9rem 1.1rem; }
  .admin-top__title { font-size: 1.1rem; }
  .modal { max-width: 100%; margin: 0 0.5rem; }
}
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .stat-card { padding: 1rem; }
  .stat-card__value { font-size: 1.5rem; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .btn { margin-left: 0; }
  .page-head form.table-actions { flex-wrap: wrap; }
  .admin-content { padding: 1rem 0.8rem; }
  .table-board { grid-template-columns: 1fr 1fr; }
  .admin-top__user span { display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
}

/* Add a subtle scrim behind the open sidebar on mobile */
@media (max-width: 820px) {
  .admin-sidebar.open::after {
    content: ''; position: fixed; inset: 0 0 0 260px; background: rgba(0,0,0,0.5); z-index: -1;
  }
}