/* ============================================
   BookIT CMS — Admin Panel Stylesheet
   Dark sidebar, clean tables, BookIT palette
   ============================================ */
:root {
  --emerald: #118075;
  --teal: #4d8496;
  --black: #0a0a0a;
  --sidebar-bg: #0f1419;
  --sidebar-hover: rgba(255,255,255,0.06);
  --sidebar-active: rgba(17,128,117,0.15);
  --white: #f8f9fa;
  --pure-white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f1f3f5;
  --gray-200: #e2e6ea;
  --gray-300: #c9cfd5;
  --gray-500: #6c757d;
  --gray-700: #3d4551;
  --danger: #c0392b;
  --warning: #f59e0b;
  --success: #059669;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; background:var(--gray-100); color:var(--black); font-size:0.9rem; }
a { color:inherit; }

/* ========== LAYOUT ========== */
.cms-layout { display:flex; min-height:100vh; }
.sidebar { width:250px; background:var(--sidebar-bg); color:rgba(255,255,255,0.6); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:50; transition:transform 0.3s; }
.cms-main { flex:1; margin-left:250px; display:flex; flex-direction:column; min-height:100vh; }
.sidebar-collapsed .sidebar { transform:translateX(-250px); }
.sidebar-collapsed .cms-main { margin-left:0; }

/* ========== SIDEBAR ========== */
.sidebar-header { padding:1.5rem 1.2rem 1rem; border-bottom:1px solid rgba(255,255,255,0.06); }
.sidebar-logo { font-family:'Playfair Display',serif; font-weight:800; font-size:1.4rem; display:flex; align-items:baseline; gap:0.3rem; }
.sidebar-logo .book { color:rgba(255,255,255,0.85); }
.sidebar-logo .it { color:var(--emerald); font-size:1.5rem; }
.cms-label { font-family:'DM Sans',sans-serif; font-size:0.6rem; font-weight:700; background:var(--emerald); color:white; padding:0.15rem 0.4rem; border-radius:4px; margin-left:0.4rem; text-transform:uppercase; letter-spacing:0.5px; }

.sidebar-nav { flex:1; padding:0.8rem 0; overflow-y:auto; }
.nav-group-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,0.25); padding:1.2rem 1.2rem 0.4rem; font-weight:600; }
.nav-item { display:flex; align-items:center; gap:0.7rem; padding:0.6rem 1.2rem; text-decoration:none; color:rgba(255,255,255,0.5); transition:all 0.2s; border-left:3px solid transparent; font-size:0.85rem; font-weight:500; }
.nav-item:hover { background:var(--sidebar-hover); color:rgba(255,255,255,0.85); }
.nav-item.active { background:var(--sidebar-active); color:var(--emerald); border-left-color:var(--emerald); }
.ni-icon { font-size:1rem; width:20px; text-align:center; flex-shrink:0; }
.nav-badge { margin-left:auto; background:rgba(255,255,255,0.1); padding:0.1rem 0.5rem; border-radius:10px; font-size:0.7rem; font-weight:600; }

.sidebar-footer { padding:1rem 1.2rem; border-top:1px solid rgba(255,255,255,0.06); }
.sidebar-user { display:flex; align-items:center; gap:0.7rem; margin-bottom:0.8rem; }
.su-avatar { width:36px; height:36px; border-radius:10px; background:var(--emerald); color:white; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; flex-shrink:0; }
.su-info strong { display:block; font-size:0.82rem; color:rgba(255,255,255,0.85); }
.su-info span { font-size:0.7rem; color:rgba(255,255,255,0.35); }
.logout-item { font-size:0.82rem; padding:0.5rem 1.2rem; border-left:none !important; }
.logout-item:hover { color:#e74c3c !important; }

/* ========== TOPBAR ========== */
.cms-topbar { background:var(--pure-white); border-bottom:1px solid var(--gray-200); padding:0 2rem; height:60px; display:flex; align-items:center; gap:1rem; position:sticky; top:0; z-index:40; }
.topbar-toggle { background:none; border:none; font-size:1.3rem; cursor:pointer; padding:0.3rem; color:var(--gray-500); }
.topbar-title { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:700; flex:1; }
.topbar-right { display:flex; align-items:center; gap:1rem; }
.topbar-link { text-decoration:none; font-size:0.82rem; color:var(--emerald); font-weight:600; padding:0.4rem 0.8rem; border:1px solid var(--emerald); border-radius:8px; transition:all 0.2s; }
.topbar-link:hover { background:var(--emerald); color:white; }

/* ========== CONTENT ========== */
.cms-content { padding:1.5rem 2rem 3rem; flex:1; }

/* ========== STAT CARDS ========== */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:var(--pure-white); border-radius:14px; padding:1.2rem 1.5rem; border:1px solid var(--gray-200); display:flex; align-items:center; gap:1rem; position:relative; overflow:hidden; transition:all 0.25s; }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--card-shadow); }
.stat-card.accent { background:var(--sidebar-bg); border-color:var(--sidebar-bg); }
.stat-card.accent .sc-value,.stat-card.accent .sc-label { color:var(--pure-white); }
.stat-card.accent .sc-sub { color:rgba(255,255,255,0.4); }
.sc-icon { font-size:2rem; flex-shrink:0; }
.sc-value { font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:800; color:var(--emerald); display:block; line-height:1; }
.sc-label { font-size:0.78rem; color:var(--gray-500); font-weight:500; }
.sc-sub { position:absolute; bottom:0.6rem; right:1rem; font-size:0.7rem; color:var(--gray-500); }

/* ========== CARDS ========== */
.card { background:var(--pure-white); border-radius:14px; border:1px solid var(--gray-200); margin-bottom:1.5rem; overflow:hidden; }
.card-header { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.5rem; border-bottom:1px solid var(--gray-200); }
.card-header h3 { font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:700; }
.card-link { font-size:0.82rem; color:var(--emerald); text-decoration:none; font-weight:600; }
.card-link:hover { text-decoration:underline; }

.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }

/* ========== DATA TABLE ========== */
.data-table { width:100%; border-collapse:collapse; }
.data-table thead th { background:var(--gray-50); padding:0.8rem 1rem; text-align:left; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--gray-500); font-weight:600; border-bottom:1px solid var(--gray-200); }
.data-table tbody td { padding:0.8rem 1rem; border-bottom:1px solid var(--gray-100); font-size:0.85rem; vertical-align:middle; }
.data-table tbody tr:hover { background:var(--gray-50); }
.data-table tbody tr.row-inactive { opacity:0.5; }
.data-table tfoot td { padding:0.8rem 1rem; font-size:0.85rem; background:var(--gray-50); }
.text-right { text-align:right; }
.text-muted { color:var(--gray-500); font-size:0.82rem; }
.empty-cell { text-align:center; color:var(--gray-300); padding:2rem !important; }

/* Status badge */
.status-badge { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.78rem; font-weight:600; padding:0.2rem 0.6rem; border-radius:6px; color:var(--sc); background:color-mix(in srgb, var(--sc) 12%, transparent); }
.cat-tag { font-size:0.72rem; padding:0.2rem 0.5rem; border-radius:5px; background:var(--gray-100); color:var(--gray-700); font-weight:500; }
.badge-mini { font-size:0.65rem; padding:0.1rem 0.4rem; border-radius:4px; background:var(--emerald); color:white; font-weight:600; margin-left:0.3rem; vertical-align:middle; }

/* ========== TOGGLE / ACTION BUTTONS ========== */
.toggle-btn { border:none; padding:0.3rem 0.7rem; border-radius:6px; font-size:0.78rem; font-weight:600; cursor:pointer; transition:all 0.2s; font-family:'DM Sans',sans-serif; }
.toggle-btn.on { background:rgba(17,128,117,0.1); color:var(--emerald); }
.toggle-btn.off { background:rgba(192,57,43,0.08); color:var(--danger); }
.toggle-btn:hover { transform:scale(1.05); }

.actions-cell { display:flex; gap:0.3rem; align-items:center; }
.action-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; border:none; background:var(--gray-100); cursor:pointer; font-size:0.9rem; text-decoration:none; transition:all 0.2s; }
.action-btn:hover { background:var(--gray-200); transform:scale(1.1); }
.action-btn.delete:hover { background:rgba(192,57,43,0.1); }

.level-input { width:55px; padding:0.3rem 0.4rem; border:1px solid var(--gray-200); border-radius:6px; text-align:center; font-family:'DM Sans',sans-serif; font-size:0.85rem; }

/* ========== TOOLBAR ========== */
.page-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:0.8rem; }
.toolbar-left { display:flex; align-items:center; gap:0.8rem; }
.filter-chips { display:flex; gap:0.4rem; flex-wrap:wrap; }
.chip { display:inline-block; padding:0.4rem 0.9rem; border-radius:50px; font-size:0.82rem; font-weight:500; text-decoration:none; color:var(--gray-500); background:var(--pure-white); border:1px solid var(--gray-200); transition:all 0.2s; }
.chip:hover { border-color:var(--emerald); color:var(--emerald); }
.chip.active { background:var(--emerald); color:white; border-color:var(--emerald); }

/* ========== FORMS ========== */
.form-card { padding:0 1.5rem 1.5rem; }
.form-card .card-header { padding:1.2rem 0; margin-bottom:0; }
.admin-form .form-group { margin-bottom:1rem; }
.admin-form label { display:block; font-size:0.78rem; font-weight:600; color:var(--gray-500); margin-bottom:0.3rem; text-transform:uppercase; letter-spacing:0.3px; }
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="date"],
.admin-form input[type="tel"],
.admin-form select,
.admin-form textarea { width:100%; padding:0.65rem 0.9rem; border:1.5px solid var(--gray-200); border-radius:8px; font-family:'DM Sans',sans-serif; font-size:0.88rem; color:var(--black); outline:none; transition:border-color 0.2s; background:var(--pure-white); }
.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus { border-color:var(--emerald); }
.admin-form textarea { resize:vertical; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
.form-actions { padding-top:0.5rem; }
.checkbox-group { display:flex; align-items:center; padding-top:1.5rem; }
.checkbox-group label { display:flex; align-items:center; gap:0.5rem; text-transform:none; font-size:0.88rem; color:var(--black); cursor:pointer; }
.checkbox-group input[type="checkbox"] { width:18px; height:18px; accent-color:var(--emerald); }
.hidden { display:none !important; }

.inline-form { display:inline-flex; align-items:center; gap:0.5rem; }
.btn-small { padding:0.35rem 0.7rem; border-radius:6px; border:none; background:var(--emerald); color:white; font-size:0.78rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; }
.btn-small:hover { background:var(--teal); }
.status-select { padding:0.35rem 0.5rem; border-radius:6px; border:1px solid var(--gray-200); font-size:0.82rem; font-family:'DM Sans',sans-serif; }
.mt-1 { margin-top:0.8rem; }
.mt-2 { margin-top:1.5rem; }

/* ========== DETAIL ========== */
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding:1.5rem; }
.detail-section h4 { font-size:0.85rem; font-weight:700; margin-bottom:0.6rem; color:var(--gray-700); }
.detail-section p { font-size:0.88rem; color:var(--gray-500); line-height:1.6; margin-bottom:0.3rem; }

/* ========== BUTTONS ========== */
.btn-primary { background:var(--emerald); color:white; border:none; padding:0.7rem 1.5rem; border-radius:8px; font-size:0.88rem; font-weight:600; cursor:pointer; transition:all 0.25s; font-family:'DM Sans',sans-serif; }
.btn-primary:hover { background:var(--teal); transform:translateY(-1px); box-shadow:0 4px 15px rgba(17,128,117,0.25); }

/* ========== ALERTS ========== */
.alert { padding:0.8rem 1.2rem; border-radius:10px; margin-bottom:1.2rem; font-size:0.88rem; font-weight:500; }
.alert-success { background:rgba(5,150,105,0.08); border:1px solid rgba(5,150,105,0.15); color:var(--success); }
.alert-error { background:rgba(192,57,43,0.08); border:1px solid rgba(192,57,43,0.15); color:var(--danger); }

/* ========== LOGIN PAGE ========== */
.login-page { background:var(--sidebar-bg); display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-wrapper { width:100%; max-width:400px; padding:2rem; }
.login-card { background:var(--pure-white); border-radius:20px; padding:2.5rem; box-shadow:0 25px 80px rgba(0,0,0,0.3); }
.login-header { text-align:center; margin-bottom:2rem; }
.login-header .sidebar-logo { justify-content:center; font-size:1.8rem; margin-bottom:0.8rem; }
.login-header .sidebar-logo .book { color:var(--black); }
.login-sub { color:var(--gray-500); font-size:0.9rem; }
.login-form .form-group { margin-bottom:1.2rem; }
.login-form label { display:block; font-size:0.82rem; font-weight:600; color:var(--gray-500); margin-bottom:0.4rem; }
.login-form input { width:100%; padding:0.85rem 1rem; border:1.5px solid var(--gray-200); border-radius:10px; font-size:0.9rem; font-family:'DM Sans',sans-serif; outline:none; transition:border-color 0.2s; }
.login-form input:focus { border-color:var(--emerald); }
.btn-login { width:100%; padding:0.9rem; border:none; border-radius:10px; background:var(--emerald); color:white; font-size:1rem; font-weight:700; cursor:pointer; transition:all 0.3s; font-family:'DM Sans',sans-serif; }
.btn-login:hover { background:var(--teal); transform:translateY(-2px); box-shadow:0 8px 25px rgba(17,128,117,0.3); }
.login-hint { text-align:center; margin-top:1.5rem; font-size:0.82rem; color:var(--gray-500); }
.login-hint a { color:var(--emerald); text-decoration:none; }
.login-hint a:hover { text-decoration:underline; }

/* ========== RESPONSIVE ========== */
@media (max-width:1024px) {
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid { grid-template-columns:1fr; }
  .form-row-3 { grid-template-columns:1fr 1fr; }
  .detail-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .sidebar { transform:translateX(-250px); }
  .sidebar-open .sidebar { transform:translateX(0); }
  .cms-main { margin-left:0; }
  .stat-grid { grid-template-columns:1fr; }
  .form-row-3 { grid-template-columns:1fr; }
  .data-table { font-size:0.8rem; }
  .data-table thead th,.data-table tbody td { padding:0.6rem 0.6rem; }
}