/* ===== CSS RESET (lightweight) ===== */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
img { max-width:100%; display:block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ===== THEME TOKENS ===== */
:root{
  --bg: #f6f7fb;          /* app background */
  --panel: #ffffff;       /* cards/panels */
  --muted: #6b7280;       /* secondary text */
  --text: #111827;        /* primary text */
  --border: #e5e7eb;      /* borders */
  --brand: #2563eb;       /* primary brand */
  --brand-600:#1d4ed8;
  --danger:#dc2626;
  --danger-600:#b91c1c;
  --ok:#10b981;
  --warn:#f59e0b;
  --radius: 12px;
  --shadow: 0 6px 18px rgba(17,24,39,.06);
  --focus: 0 0 0 3px rgba(37,99,235,.25);
}

html,body{
  height:100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

/* ===== LAYOUT WRAPPERS ===== */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* ===== HEADER / NAV (desktop base) ===== */
.app-header{
  position: sticky; top:0; z-index: 50;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.app-header .nav{
  display:flex; align-items:center; gap:14px;
  max-width:1200px; margin:0 auto; padding:10px 16px;
}
.app-header .brand{
  font-weight:700; letter-spacing:.2px;
}
.nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px; text-decoration:none; color:var(--text);
}
.nav a:hover{ background:#f3f4f6; }
.nav a.active{ color:var(--brand); background:#eef2ff; }

/* desktop menu container */
.nav .nav-menu{ display:flex; flex-wrap:nowrap; gap:8px; margin-left:8px; }
.nav .nav-toggle{ display:none; }  /* shown on small screens by media query */
.nav .nav-logout{ margin-left:auto; }

/* ===== CARDS ===== */
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin: 14px 0;
}

/* ===== FORMS ===== */
.form-row{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
  margin: 8px 0;
}
.field{ grid-column: span 4; min-width: 160px; }
.field.w-6{ grid-column: span 6; }
.field.w-12{ grid-column: span 12; }

label{ display:block; font-weight:600; margin-bottom:6px; }
input[type="text"], input[type="email"], input[type="number"], input[type="password"],
select, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  outline:none;
  transition: box-shadow .15s, border-color .15s;
}
textarea{ min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus{ border-color: var(--brand); box-shadow: var(--focus); }
input[disabled], select[disabled], textarea[disabled]{ background:#f9fafb; color:#9ca3af; }

.actions{ display:flex; gap:10px; flex-wrap: wrap; }

/* inline helper */
.help{ color:var(--muted); font-size:12px; margin-top:4px; }

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  transition: transform .02s, background .15s, border-color .15s, color .15s;
}
.btn:hover{ background:#f9fafb; }
.btn:active{ transform: translateY(1px); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

.btn.primary{
  background: var(--brand);
  color:#fff;
  border-color: transparent;
}
.btn.primary:hover{ background: var(--brand-600); }

.btn.danger{
  background: var(--danger); color:#fff; border-color:transparent;
}
.btn.danger:hover{ background: var(--danger-600); }

.btn.ghost{
  background:transparent; border-color: var(--border);
}
.btn.icon{ padding:8px; width:36px; height:36px; }

/* ===== TABLES ===== */
.table{
  width:100%; border-collapse: collapse; overflow:hidden;
  border-radius: 10px; border:1px solid var(--border);
  background:#fff;
}
.table th, .table td{
  padding:10px 12px; text-align:left; border-bottom:1px solid var(--border);
  vertical-align: top;
}
.table thead th{
  background:#f9fafb; font-size:12px; letter-spacing:.2px; color:#374151;
}
.table tbody tr:hover{ background:#fafafa; }

/* ===== FLASH / ALERTS ===== */
.flash{
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
}
.flash.ok{ background:#ecfdf5; border-color:#d1fae5; color:#065f46; }
.flash.err{ background:#fef2f2; border-color:#fee2e2; color:#991b1b; }
.flash.warn{ background:#fffbeb; border-color:#fef3c7; color:#92400e; }

/* ===== UTILITIES ===== */
.m-0{ margin:0 !important; }
.mt-0{ margin-top:0 !important; }
.mt-1{ margin-top:6px !important; }
.mt-2{ margin-top:10px !important; }
.mt-3{ margin-top:14px !important; }
.text-muted{ color: var(--muted); }
.text-right{ text-align:right; }
.badge{
  display:inline-block; padding:2px 8px; font-size:12px;
  background:#eef2ff; color:#3730a3; border-radius:999px;
}

/* ===== FORMS: switches, radios, checkboxes ===== */
input[type="checkbox"], input[type="radio"]{
  width:16px; height:16px; vertical-align: text-bottom;
}

/* ===== RESPONSIVE (forms/layout) ===== */
@media (max-width: 980px){
  .field{ grid-column: span 6; }
}
@media (max-width: 640px){
  .form-row{ grid-template-columns: repeat(6, 1fr); }
  .field{ grid-column: span 6; }
}

/* ===== RESPONSIVE NAV BEHAVIORS ===== */
/* Medium screens: allow wrapping to multiple lines */
@media (max-width: 1100px){
  .nav .nav-menu{ flex-wrap: wrap; }
}

/* Small screens: collapse into hamburger */
@media (max-width: 820px){
  .nav{ gap:10px; }
  .nav .nav-toggle{ display:inline-flex; }
  .nav .nav-logout { display:none; }  /* keep header compact */

  /* Hide the menu; shown when .is-open is set on .app-header by JS */
  .nav .nav-menu{ display:none; }
  .app-header.is-open .nav .nav-menu{ display:block; }

  /* --- Drawer mode (default) --- */
  .app-header.nav--drawer .nav .nav-menu{
    position: fixed; z-index: 60;
    top: 56px; right: 12px; left: 12px;
    max-height: calc(100vh - 72px);
    overflow: auto;
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 10px;
  }
  .app-header.nav--drawer .nav .nav-menu a{
    display:block; padding:10px 8px; border-radius:8px;
  }
  .app-header.nav--drawer .nav .nav-menu a:hover{ background:#f3f4f6; }

  /* --- Sidebar mode (enable by $NAV_COLLAPSE_MODE='sidebar') --- */
  .app-header.nav--sidebar .nav .nav-menu{
    position: fixed; z-index: 60;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    padding: 12px;
    background: var(--panel);
    border-right:1px solid var(--border);
    transform: translateX(-100%);
    transition: transform .2s ease;
    overflow:auto;
  }
  .app-header.nav--sidebar.is-open .nav .nav-menu{
    transform: translateX(0);
  }
  .app-header.nav--sidebar .nav .nav-menu a{
    display:block; padding:10px 10px; border-radius:8px;
  }
  .app-header.nav--sidebar .nav .nav-menu a:hover{ background:#f3f4f6; }

  /* Backdrop when menu open (drawer or sidebar) */
  .app-header.is-open::after{
    content:""; position: fixed; inset:0;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(1px);
  }

  /* Push content when sidebar open (optional) */
  .app-header.nav--sidebar.is-open ~ .container{
    margin-left: 260px;
    transition: margin-left .2s ease;
  }
}

/* ===== OPTIONAL DARK MODE ===== */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1020;
    --panel: #11172a;
    --text: #e5e7eb;
    --border: #1f2937;
    --muted: #9ca3af;
    --shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  .nav a:hover{ background:#1f2937; }
  .table, .card{ background: var(--panel); }
  input, select, textarea{ background:#0f1424; color:var(--text); border-color: var(--border); }
  .btn{ background:#0f1424; color:#e5e7eb; border-color: var(--border); }
  .btn:hover{ background:#0b1020; }
}

.collapse-toggle {
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  margin-right: 8px;
}
.card.head-open .collapse-toggle { font-weight: bold; }

/* brand checkbox alignment */
.options-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px; /* row / column gap */
}
.options-inline .chk-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;            /* space between checkbox and text */
  line-height: 1.2;
  white-space: nowrap; /* keep checkbox + label on one line */
}
.options-inline .chk-inline input[type="checkbox"] {
  margin: 0;           /* remove default offset */
}