/* Theme variables */
:root { --bg:#0f172a; --panel:#111827; --text:#f9fafb; --accent:#38bdf8; --border:#374151; --card:#ffffff; }

body { font-family: Inter, system-ui, Arial, sans-serif; margin: 0; }
.page { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; column-gap: 12px; }
.sidebar { background: var(--bg); color: var(--text); position: relative; z-index: 1; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav li { padding: 10px; }
nav a { color: var(--text); text-decoration: none; display:block; padding:8px 10px; border-radius:6px; }
nav a.active { background: rgba(56,189,248,.15); color: var(--accent); }

.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th, .table td { border: 1px solid #e5e7eb; padding: 6px 10px; line-height: 1.6; }
.table tr:hover { background: #f9fafb; }

.btn { margin: 2px; padding: 6px 10px; background: var(--accent); color:#0b1220; border:none; border-radius:8px; cursor:pointer; }
.btn:hover { filter: brightness(1.05); }

/* Gap between buttons/toolbars and tables */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar + .table { margin-top: 12px; }
.btn + .table { margin-top: 12px; }

/* compact table auto-fit and centered text */
.compact-table { table-layout: auto; }
.text-center th, .text-center td { text-align: center; }

/* Layout main above bg */
main { background: transparent; padding-left: 12px; }

/* Cards */
.card { background: var(--card); border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.08); padding: 16px; }

/* Optional submenu styles */
.menu-heading { font-weight: bold; display: block; margin-top: 8px; opacity:.8; letter-spacing:.02em; }
.submenu { list-style: none; margin: 4px 0 0 12px; padding: 0; }
.submenu li { padding: 2px 0; }

/* Optional heading button style */
.btn-link { background: none; border: none; color: var(--text); padding: 0; cursor: pointer; }

/* Sticky table header */
thead th { position: sticky; top: 0; background: #fff; z-index: 2; }

/* Inputs */
input[type=text], input[type=number], select { border:1px solid #d1d5db; border-radius:6px; padding:6px 8px; }

/* Home background */
.home-bg { 
  position: fixed; 
  inset: 0; 
  z-index: -1;
  pointer-events: none;
  background: url('/assets/wizard.jpg') center center / cover no-repeat fixed;
}

/* Dark mode (optional) */
[data-theme="dark"] :root { --card:#0b1220; --text:#f9fafb; }
[data-theme="dark"] .card { background: var(--card); color: var(--text); }