:root{
  --bg: #0b1020;
  --panel: #111833;
  --panel-2: #0d1530;
  --text: #e6e8ef;
  --muted: #9aa4c3;
  --primary: #5b8cfa;
  --primary-600: #3f76f7;
  --accent: #42e4c6;
  --danger: #ff6b6b;
  --warning: #ffd166;
  --success: #4cd38a;
  --border: #1e2650;
  --ring: rgba(66, 228, 198, .35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; */
  line-height:1.45;
  color:var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(100vw 450px at 10% -10%, #171b20 0, transparent 70%),
    radial-gradient(100vw 450px at 110% 10%, #12161b 0, transparent 70%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100vw 450px, 100vw 450px;   /* match the gradient sizes */
  background-position: 10% -10%, 110% 10%;     /* same anchor points */
}
.container{max-width:1100px; margin:0 auto; padding:20px}

.site-header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(150%) blur(6px); background:rgba(11,16,32,.6); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:56px}
.brand{font-weight:700; letter-spacing:.3px; text-decoration:none; color:var(--text)}
.nav{display:flex; align-items:center; gap:.5rem}
.nav-link{color:var(--muted); text-decoration:none; padding:.4rem .6rem; border-radius:.5rem}
/*.nav-active{}  #TODO */
.nav-link:hover{color:var(--text); background:rgba(255,255,255,.05)}
.nav-divider{width:1px; height:20px; background:var(--border); margin:0 .25rem}
.user-pill{color:var(--muted); font-size:.9rem}



.page{padding:20px 0 48px}

.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:1rem; padding:1rem 1.25rem; box-shadow:var(--shadow)}
.card-narrow{max-width:560px; margin:0 auto}
.card-header{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem}
.card-title{margin:0; font-size:1.25rem}
.card.warning{border-color:rgba(255, 209, 102,.35); background:rgba(255, 209, 102,.08)}
.card.success{border-color:rgba(76, 211, 138,.35); background:rgba(76, 211, 138,.08)}

.divider{height:1px; background:var(--border); margin:1rem 0}
.spacer{height:1px; margin:1rem 0}

.table-wrap{overflow:auto; border-radius:.75rem; border:1px solid var(--border)}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table th, .table td{padding:.6rem .75rem; border-bottom:1px solid var(--border)}
.table thead th{background:rgba(255,255,255,.04); text-align:left; font-weight:600}
.table tr:hover td{background:rgba(255,255,255,.03)}
.table.meta th{width:220px}

.btn{appearance:none; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); padding:.45rem .8rem; border-radius:.6rem; cursor:pointer; text-decoration:none; font-size:.95rem; text-align: center;}
/* .btn:hover{background:rgba(255,255,255,.08)} */
.btn:focus{outline:3px solid var(--ring)}
.btn-primary{background:linear-gradient(180deg, var(--primary), var(--primary-600)); border-color:transparent; color: black;}
.btn-primary:hover{filter:brightness(1.2); background: linear-gradient(180deg, var(--primary));}
.btn-secondary{background:linear-gradient(180deg, #6dd5c7, #49bfae); border-color:transparent; color: black}
.btn-secondary:hover{filter:brightness(1.2); background: linear-gradient(180deg, #6dd5c7, #49bfae);}
.btn-ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn.disabled{opacity:.4; pointer-events:none}

.btn-success{
  background: linear-gradient(180deg, var(--success), #35be74); /* slightly darker tail */
  border-color: transparent;
  color: #0b0d10;                  /* dark text for good contrast on light green */
  --ring: rgba(76, 211, 138, .35); /* optional: green focus ring */
}
.btn-success:hover{
  filter: brightness(1.1);
  background: linear-gradient(180deg, var(--success));
}

.btn-danger{
  background: linear-gradient(180deg, var(--danger), #e65b5b);
  border-color: transparent;
  color: #fff;                 /* good contrast on red */
  --ring: rgba(255, 107, 107, .35); /* optional: red focus ring */
}
.btn-danger:hover{
  filter: brightness(1.1);
  background: linear-gradient(180deg, var(--danger));
}

.input{width:100%; padding:.55rem .7rem; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text); border-radius:.6rem}
.input:focus{outline:3px solid var(--ring); border-color:transparent}
.checkbox-row{display:flex; align-items:center; gap:.5rem}

.checkbox-row ul {list-style-type: none; padding: 0px;}
ul {list-style-type: none; padding: 0px;}

.form-grid{display:grid; gap:.75rem}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem}
@media (max-width: 800px){ .grid-2, .grid-3{grid-template-columns:1fr} }

.flashes{list-style:none; padding:0; margin:1rem 0; display:grid; gap:.5rem}
.flash{display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; border-radius:.6rem; border:1px solid var(--border); background:rgba(255,255,255,.03)}
.flash .flash-cap{font-size:.8rem; opacity:.8}
.flash.success{border-color:rgba(76, 211, 138,.35); background:rgba(76, 211, 138,.08)}
.flash.warning{border-color:rgba(255, 209, 102,.35); background:rgba(255, 209, 102,.08)}
.flash.danger{border-color:rgba(255, 107, 107,.35); background:rgba(255, 107, 107,.08)}
.muted{color:var(--muted)}
.toolbar{display:flex; gap:.75rem; align-items:end; justify-content:space-between; flex-wrap:wrap; margin-bottom:1rem}
.toolbar .inline{display:flex; gap:.5rem; align-items:end}
.pagination{display:flex; gap:.75rem; align-items:center; justify-content:flex-end; margin-top:1rem}
.page-info{color:var(--muted)}

.text-emphasize{ font-style: italic;}

.site-footer{border-top:1px solid var(--border); padding:16px 0; color:var(--muted); background:rgba(0,0,0,.2)}
.site-footer { text-align: center; }
.site-footer .container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;          /* space between build info bits */
  flex-wrap: wrap;     /* wrap nicely on small screens */
}

:root{
  /* Dark CarBahn-ish base with gold accent */
  --bg: #0b0d10;
  --panel: #111418;
  --panel-2: #0f1216;
  --text: #a7b0ba;
  --muted: #a7b0ba;

  /* Gold as primary; slight darker hover tone */
  --primary: #f4c542;
  --primary-600: #e6b521;

  --accent: #f4c542;     /* keep accent aligned to primary */
  --danger: #ff6b6b;
  --warning: #ffd166;
  --success: #4cd38a;
  --border: #1d242c;
  --ring: rgba(244, 197, 66, .35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Montserrat", ui-sans-serif; 
  line-height:1.45;
  color:var(--text);
  /* subtle vignette, darker overall */

}
.container{max-width:1180px; margin:0 auto; padding:20px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(10,12,16,.65);
  border-bottom:1px solid var(--border)
}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px}

/* Brand */
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.3px; text-decoration:none; color:var(--text)}
.brand-logo{height:100px; width:auto}
.brand-text{display:inline-flex; gap:.5rem; align-items:baseline; font-family:"Montserrat", ui-sans-serif; text-transform:uppercase; letter-spacing:.06em}
.brand-sub{font-weight:600; opacity:.75; text-transform:none; letter-spacing:0}


/* Nav */
.nav{display:flex; align-items:center; gap:.5rem}
.nav-link{
  color:var(--muted); text-decoration:none; padding:.5rem .7rem; border-radius:.5rem;
  font-family:"Montserrat", ui-sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:.86rem;
}
.nav-link:hover{color:var(--text); background:rgba(255,255,255,.06)}
.nav-divider{width:1px; height:22px; background:var(--border); margin:0 .25rem}
.user-pill{color:var(--muted); font-size:.9rem}

/* --- Robust dropdown behavior --- */
.nav-dropdown { position: relative; }
.nav-dropdown .dropdown{
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;                 /* small visual gap */
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .35rem;
  min-width: 200px;
  box-shadow: var(--shadow);
  z-index: 50;
}
.nav-dropdown.open .dropdown,
.nav-dropdown:focus-within .dropdown{
  display: block;
}

/* Optional: make menu items a little larger click targets */
.nav-dropdown .dropdown a{
  display:block; padding:.55rem .8rem; color:var(--text);
  text-decoration:none; border-radius:.5rem; font-weight:600;
}
.nav-dropdown .dropdown a:hover{ background:rgba(255,255,255,.06); }

/* Page area */
.page{padding:20px 0 56px}

/* Cards */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:1rem; padding:1rem 1.25rem; box-shadow:var(--shadow)
}
.card-narrow{max-width:560px; margin:0 auto}
.card-header{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem}
.card-title{margin:0; font-size:1.1rem; font-family:"Montserrat", ui-sans-serif; letter-spacing:.02em; text-transform:uppercase}
.divider{height:1px; background:var(--border); margin:1rem 0}

/* Tables */
.table-wrap{overflow:auto; border-radius:.75rem; border:1px solid var(--border)}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table th, .table td{padding:.6rem .75rem; border-bottom:1px solid var(--border)}
.table thead th{
  background:rgba(255,255,255,.04); text-align:left; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; font-family:"Montserrat", ui-sans-serif; font-size:.78rem;
}
.table tr:hover td{background:rgba(255,255,255,.03)}
.table.meta th{width:220px}

/* Buttons */
.btn-ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn.disabled{opacity:.4; pointer-events:none}

/* Inputs */
.input{width:100%; padding:.55rem .7rem; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text); border-radius:.6rem}
.input:focus{outline:3px solid var(--ring); border-color:transparent}
.checkbox-row{display:flex; align-items:center; gap:.5rem}

/* Form grids */
.form-grid{display:grid; gap:.75rem}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem}
@media (max-width: 800px){ .grid-2, .grid-3{grid-template-columns:1fr} }

/* Flashes */
.flashes{list-style:none; padding:0; margin:1rem 0; display:grid; gap:.5rem}
.flash{display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; border-radius:.6rem; border:1px solid var(--border); background:rgba(255,255,255,.03)}
.flash .flash-cap{font-size:.8rem; opacity:.8; text-transform:uppercase; letter-spacing:.06em; font-family:"Montserrat", ui-sans-serif}
.flash.success{border-color:rgba(76, 211, 138,.35); background:rgba(76, 211, 138,.08)}
.flash.warning{border-color:rgba(255, 209, 102,.35); background:rgba(255, 209, 102,.08)}
.flash.danger{border-color:rgba(255, 107, 107,.35); background:rgba(255, 107, 107,.08)}
.muted{color:var(--muted)}
.toolbar{display:flex; gap:.75rem; align-items:end; justify-content:space-between; flex-wrap:wrap; margin-bottom:1rem}
.toolbar .inline{display:flex; gap:.5rem; align-items:end}
.pagination{display:flex; gap:.75rem; align-items:center; justify-content:flex-end; margin-top:1rem}
.page-info{color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:16px 0; color:var(--muted); background:rgba(0,0,0,.25)}


/* Make table rows act like links without <a> tags */
.table .row-link { cursor: pointer; }

/* Tabs container */
.tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

/* The tablist row */
.tabs [role="tablist"] {
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: 0 .5rem;
}

/* Individual tabs (anchors) */
.tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  margin-bottom: -1px; /* pull the bottom border over the container border */
  font: 500 0.95rem/1.25 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #6b7280;              /* gray-500 */
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
  outline: none;
}

/* Hover state for inactive tabs */
.tabs [role="tab"]:hover {
  color: #111827;              /* gray-900 */
  border-bottom-color: #d1d5db;/* gray-300 */
}

/* Focus ring */
.tabs [role="tab"]:focus-visible {
  box-shadow: 0 0 0 2px rgba(0,0,0,.4);
  border-radius: 4px;
}

/* Active tab (aria-selected="true") */
.tabs [role="tab"][aria-selected="true"] {
  color: #111827;              /* gray-900/blackish */
  border-bottom-color: #000;   /* active underline */
}

/* Tab panels */
[role="tabpanel"][hidden] {
  display: none !important;
}

/* Optional: dark mode tweaks */
@media (prefers-color-scheme: dark) {
  .tabs { background: #0b0b0b; border-bottom-color: #1f2937; }
  .tabs [role="tab"] { color: #9ca3af; }
  .tabs [role="tab"]:hover { color: #f9fafb; border-bottom-color: #374151; }
  .tabs [role="tab"][aria-selected="true"] { color: #f9fafb; border-bottom-color: #fff; }
  .tabs [role="tab"]:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
}