/* -------------------------------------------------------
   BIGGBOSS DASHBOARD — layout.css (UPDATED)
------------------------------------------------------- */

/* THEME VARIABLES (dark default) */
:root{
  --bg: #0d1117;
  --bg-card: #0f1418;
  --card-contrast: #16191d;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --border-subtle: rgba(255,255,255,0.04);
  --primary: #2f81f7;
  --success: #05c46b;
  --danger: #c0392b;
  --radius: 10px;
  --transition: 0.15s ease;
  --muted-bg: rgba(255,255,255,0.02);
}

/* LIGHT THEME OVERRIDES */
:root[data-theme="light"]{
  --bg: #f6f7f9;
  --bg-card: #ffffff;
  --card-contrast: #f8fafc;
  --text: #1e293b;
  --text-muted: #64748b;
  --border-subtle: rgba(0,0,0,0.06);
  --primary: #2563eb;
  --muted-bg: rgba(0,0,0,0.05);
}

/* RESET + BASE */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  transition: background var(--transition), color var(--transition);
}

/* SIDEBAR */
.sidebar{
  width:240px;
  height:100vh;
  position:fixed;
  left:0;top:0;
  background:linear-gradient(180deg,var(--bg-card),var(--card-contrast));
  border-right:1px solid var(--border-subtle);
  padding:14px;
  overflow:auto;
  z-index:40;
  transition: width var(--transition);
}
.sidebar.collapsed{ width:64px; }
.sidebar .sidebar-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.sidebar-title{font-weight:700;font-size:16px;color:var(--text)}
.sidebar-toggle-btn{padding:6px 10px;border-radius:8px;background:transparent;border:1px solid var(--border-subtle);color:var(--text);cursor:pointer}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;color:var(--text-muted);text-decoration:none}
.nav-item:hover, .nav-item.active{background:var(--muted-bg);color:var(--text);border-left:3px solid var(--primary)}

/* TOPBAR */
.topbar{
  position:fixed;
  left:240px;
  right:0;
  top:0;
  height:64px;
  background:var(--bg-card);
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  z-index:50;
  transition:left var(--transition), width var(--transition);
}
.sidebar.collapsed ~ .topbar{ left:64px; }

.top-search{ position:relative; }
.top-search input{ padding:8px 12px 8px 36px;border-radius:8px;border:1px solid var(--border-subtle);background:transparent;color:var(--text) }

.btn, button { cursor:pointer; border-radius:8px; padding:8px 12px; background:transparent; border:1px solid var(--border-subtle); color:var(--text); transition:all .12s; }
.btn.primary{ background: linear-gradient(180deg,var(--primary), #0a63d6); color:#fff; border:0; box-shadow:0 10px 20px rgba(15,35,80,0.12); }
.btn.success{ background: linear-gradient(180deg,var(--success),#03a75a); color:#fff; border:0; box-shadow:0 8px 18px rgba(3,167,90,0.12); }
.btn.danger{ background:var(--danger); color:#fff; border:0; }

/* CONTENT */
.content{ margin-left:240px; padding:84px 40px 40px; transition: margin-left var(--transition) }
.sidebar.collapsed ~ .content{ margin-left:64px; }

/* CARDS */
.card{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  padding:18px;
  border-radius:var(--radius);
  margin-bottom:16px;
}

/* TABLE */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:14px 12px; border-bottom:1px solid var(--border-subtle); vertical-align:middle; color:var(--text) }
.table th{ color:var(--text-muted); font-weight:700; text-align:left; }

/* ACTION BUTTONS ALIGN */
.actions-flex{ display:flex; gap:10px; align-items:center; justify-content:flex-end; }
.actions-flex .btn{ padding:8px 10px; border-radius:8px; }

/* FORM STYLES */
.form-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
input[type="text"], textarea, select, .input{
  padding:10px;border-radius:8px;border:1px solid var(--border-subtle);background:transparent;color:var(--text);
}
input[type="file"]{ background:transparent; color:var(--text) }

/* MODAL */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); z-index:200; }
.modal.open{ display:flex; }
.modal-card{ width:100%; max-width:560px; padding:22px; border-radius:12px; background:var(--bg-card); border:1px solid var(--border-subtle) }

/* LANGUAGE DROPDOWN FIX (z-index + colors) */
select{ background:transparent; color:var(--text) }
select option{ background:var(--bg-card); color:var(--text); }

/* tiny responsive */
@media(max-width:900px){ .content{ padding:84px 18px } .top-search input{ width:160px } }
@media(max-width:600px){ .sidebar{ display:none } .content{ margin-left:0 } }
/* -------- BBG fixes appended -------- */

/* Ensure modals and select dropdowns display above the overlay and topbar */
.modal { z-index: 10050 !important; }
.modal .modal-card { z-index: 10060 !important; }

/* Select dropdown / option overlay (browser native) */
select { position: relative; z-index: 10010; background: transparent; color: var(--text); }

/* For custom select dropdown panels (if using a styled panel) */
.custom-select-dropdown { z-index: 10080 !important; }

/* Ensure header action buttons don't overlay table content */
.page-actions .btn, .page-actions button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:8px;
}

/* Put refresh/add buttons inside a header-actions container and float right */
.header-actions {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}

/* Table action buttons column layout */
.table .row-actions {
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}

/* Make preview / edit / delete buttons consistent */
.btn-ghost, .btn-outline {
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
}
.btn-danger {
  background:linear-gradient(180deg,#9b2c2c,#6e1515);
  color:white;
  padding:8px 10px;
  border-radius:8px;
  border:none;
}

/* Make sure topbar toggle (fallback) is visible */
.topbar button[aria-label="Toggle sidebar"] {
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  padding:6px 8px;
  border-radius:6px;
  margin-right:10px;
}

/* Prevent pointer-events being blocked on topbar items */
.topbar, .topbar * { pointer-events: auto !important; }

/* fix for language dropdown contrast (native-like) */
select::-ms-expand { display: block; }

/* small improvements for the Add/Refresh button group position */
.card .header-actions {
  position:relative;
  top:-6px;
  right:0;
}

/* allow sidebar to follow theme (light/dark) but keep sensible contrast */
:root[data-theme="light"] .sidebar {
  background: #f4f6f8; /* light surface */
  color: var(--text);
  border-right:1px solid rgba(14,20,25,0.06);
}
:root[data-theme="light"] .sidebar .nav-item {
  color:var(--text-muted);
}
:root[data-theme="light"] .sidebar .nav-item:hover,
:root[data-theme="light"] .sidebar .nav-item.active {
  background: rgba(0,0,0,0.03);
}


/* small responsive safe-guard */
@media(max-width:1100px){
  .header-actions { position:static; margin-top:12px; }
}

/* ---------------------------------------------
   FIX SIDEBAR COLLAPSE / EXPAND BEHAVIOR
   This MUST be last in layout.css
--------------------------------------------- */

/* DEFAULT SIDEBAR WIDTH */
.sidebar {
  width: 240px !important;
  transition: width 0.2s ease-in-out !important;
  overflow: hidden;
  white-space: nowrap;
}

/* COLLAPSED SIDEBAR */
.sidebar.collapsed {
  width: 64px !important;
}

/* FIX TOPBAR POSITION WHEN SIDEBAR COLLAPSES */
.topbar {
  left: 240px !important;
  width: calc(100% - 240px) !important;
  transition: left 0.2s ease-in-out, width 0.2s ease-in-out !important;
}

.sidebar.collapsed ~ .topbar {
  left: 64px !important;
  width: calc(100% - 64px) !important;
}

/* FIX CONTENT POSITION WHEN SIDEBAR COLLAPSES */
.content {
  margin-left: 240px !important;
  transition: margin-left 0.2s ease-in-out !important;
}

.sidebar.collapsed ~ .content {
  margin-left: 64px !important;
}

/* FIX NAV TEXT HIDING */
.sidebar.collapsed .nav-text {
  display: none !important;
}

/* ICONS ALWAYS VISIBLE */
.sidebar .nav-icon {
  min-width: 32px !important;
  text-align: center;
}