/* ═══════════════════════════════════════════════════════
   SQUADMIN DESIGN SYSTEM v0.1
   Terminal-engineering aesthetic
   ═══════════════════════════════════════════════════════ */

/* ── Font Faces ──────────────────────────────────────── */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Design Tokens ───────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-deepest:    #0a0a0b;
  --bg-deep:       #0f1012;
  --bg-base:       #141517;
  --bg-raised:     #1a1b1e;
  --bg-elevated:   #212225;
  --bg-overlay:    #2a2b2e;

  /* Text */
  --text-primary:   #e9e9e9;
  --text-secondary: #a7a7ac;
  --text-tertiary:  #6d6d71;
  --text-ghost:     #46464b;

  /* Borders */
  --border-subtle:  #1e1f22;
  --border-default: #2a2b2f;
  --border-strong:  #3a3b3f;
  --border-accent:  #4a4b4f;

  /* Accents */
  --accent-olive:   #869863;
  --accent-olive-h: #98a975;
  --accent-amber:   #caa963;
  --accent-amber-h: #dcbb75;
  --accent-red:     #b96363;
  --accent-red-h:   #ca7575;
  --accent-blue:    #6386a9;
  --accent-blue-h:  #7598bb;
  --accent-teal:    #639886;
  --accent-teal-h:  #75a998;
  --accent-violet:  #8675a9;
  --accent-violet-h:#9886bb;

  /* Typography */
  --font-mono: 'JetBrains Mono', 'Consolas', 'DejaVu Sans Mono', monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --sidebar-width: 260px;
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { height: 100%; }
body {
  height: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-deepest);
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent-blue); text-decoration: none; }
a:hover { color: var(--accent-blue-h); }
a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* ── Typography ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}
h1 { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
h5 { font-size: var(--text-sm); }
p { margin-bottom: var(--space-2); }
p:last-child { margin-bottom: 0; }
code {
  background: var(--bg-base);
  padding: 1px 4px;
  border: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
pre {
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  padding: var(--space-3);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.6;
}
pre code { background: none; border: none; padding: 0; }
hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-4) 0;
}
ul:not(.pagination-list), ol { padding-left: var(--space-6); margin-bottom: var(--space-2); }
li { margin-bottom: var(--space-1); }

/* ── Layout: Top Bar ─────────────────────────────────── */
.layout-topbar {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  height: 44px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.layout-topbar-brand {
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-right: var(--space-6);
}
.layout-topbar-brand a { color: var(--text-primary); }
.layout-topbar-brand a:hover { color: var(--text-primary); }
.layout-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.layout-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
.layout-topbar-link {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.layout-topbar-link:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.layout-topbar-sep {
  color: var(--text-ghost);
  font-size: var(--text-xs);
  user-select: none;
}
.layout-topbar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: var(--space-4);
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-default);
  font-size: var(--text-sm);
}
.layout-topbar-user-name {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.layout-topbar-user a {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.layout-topbar-user a:hover { color: var(--text-primary); }
.layout-topbar-user .sq-badge { font-size: 0.625rem; }

/* ── Top Bar Dropdowns ───────────────────────────────── */
.topbar-dropdown {
  position: relative;
}
.topbar-dropdown-trigger {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}
.topbar-dropdown-trigger:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.topbar-dropdown-trigger::after {
  content: ' \25BE';
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.topbar-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  min-width: 280px;
  white-space: nowrap;
  z-index: 50;
  padding: var(--space-2) 0;
}
.topbar-dropdown:hover .topbar-dropdown-menu {
  display: block;
}
.topbar-dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.topbar-dropdown-item:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.topbar-dropdown-divider {
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-1) 0;
}

/* ── Layout: Shell (sidebar + main) ──────────────────── */
.layout-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: calc(100vh - 44px);
}
.layout-sidebar {
  background: var(--bg-raised);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 44px;
  height: calc(100vh - 44px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Layout: Main Content ────────────────────────────── */
.layout-main {
  background: var(--bg-deep);
  min-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
}
.layout-main-content {
  flex: 1;
  padding: var(--space-6);
}
.layout-page {
  background: var(--bg-deep);
  min-height: calc(100vh - 44px);
  padding: var(--space-6);
}
.container { max-width: 1100px; margin: 0 auto; }
.layout-centered {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  min-height: 100vh;
}

/* ── Layout: Footer ──────────────────────────────────── */
.layout-footer {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

/* ── Flash Message ───────────────────────────────────── */
.flash-message {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--accent-blue);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ── Sidebar Navigation ──────────────────────────────── */
.sidebar-section {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.sidebar-section:last-child { border-bottom: none; }
.sidebar-section-header {
  padding: 0 var(--space-4) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.sidebar-nav-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.sidebar-nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.sidebar-nav-item--active {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-left-color: var(--accent-teal);
}
.sidebar-nav-item--nested {
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-8);
  font-size: var(--text-xs);
}

/* ── Mobile ──────────────────────────────────────────── */
.sidebar-toggle {
  display: none;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
  margin-right: var(--space-2);
}
.sidebar-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 49;
}

/* ── Buttons ─────────────────────────────────────────── */
.sq-btn {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  border-radius: 2px;
  text-align: center;
  line-height: 1.5;
}
.sq-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.sq-btn:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.sq-btn--primary { border-color: var(--accent-olive); color: var(--accent-olive); }
.sq-btn--primary:hover { border-color: var(--accent-olive-h); color: var(--accent-olive-h); background: var(--bg-elevated); }
.sq-btn--danger { border-color: var(--accent-red); color: var(--accent-red); }
.sq-btn--danger:hover { border-color: var(--accent-red-h); color: var(--accent-red-h); background: var(--bg-elevated); }
.sq-btn--info { border-color: var(--accent-blue); color: var(--accent-blue); }
.sq-btn--info:hover { border-color: var(--accent-blue-h); color: var(--accent-blue-h); background: var(--bg-elevated); }
.sq-btn--warning { border-color: var(--accent-amber); color: var(--accent-amber); }
.sq-btn--warning:hover { border-color: var(--accent-amber-h); color: var(--accent-amber-h); background: var(--bg-elevated); }
.sq-btn--sm { padding: 1px var(--space-2); font-size: var(--text-xs); }
.sq-btn-group { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }

/* Mirrors .topbar-dropdown-item hover so in-table ACTIONS dropdowns
   (server/player/squad) get the same affordance as the top nav. */
.sq-dropdown-item {
  color: var(--text-secondary);
  cursor: pointer;
}
.sq-dropdown-item:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* ── Tables ──────────────────────────────────────────── */
.sq-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sq-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  background: var(--bg-base);
  border-bottom: 2px solid var(--border-default);
  white-space: nowrap;
}
.sq-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: top;
}
.sq-table tbody tr:hover { background: var(--bg-elevated); }
.sq-table--fixed { table-layout: fixed; }

/* Dropdown items should hover with the same lift as table rows. */
.sq-dropdown-item:hover { background: var(--bg-elevated); }

/* ── Cards / Panels ──────────────────────────────────── */
.sq-card {
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}
.sq-card-header {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

/* ── Inputs ──────────────────────────────────────────── */
.sq-input, .sq-select, .sq-textarea {
  background: var(--bg-deep);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  border-radius: 2px;
  width: 100%;
}
.sq-input:focus, .sq-select:focus, .sq-textarea:focus { outline: none; border-color: var(--accent-blue); }
.sq-select { cursor: pointer; }
.sq-textarea { resize: vertical; min-height: 80px; }
.sq-field { margin-bottom: var(--space-4); }
.sq-field-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.sq-field-help { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); }

/* ── Badges / Tags ───────────────────────────────────── */
.sq-badge {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--border-default);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  border-radius: 2px;
}
.sq-badge--olive  { border-color: var(--accent-olive);  color: var(--accent-olive); }
.sq-badge--amber  { border-color: var(--accent-amber);  color: var(--accent-amber); }
.sq-badge--red    { border-color: var(--accent-red);    color: var(--accent-red); }
.sq-badge--blue   { border-color: var(--accent-blue);   color: var(--accent-blue); }
.sq-badge--teal   { border-color: var(--accent-teal);   color: var(--accent-teal); }
.sq-badge--violet { border-color: var(--accent-violet); color: var(--accent-violet); }

/* ── Status Indicators ───────────────────────────────── */
.sq-status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.sq-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); }
.sq-status--active  .sq-status-dot { background: var(--accent-olive); }
.sq-status--active                 { color: var(--accent-olive); }
.sq-status--warning .sq-status-dot { background: var(--accent-amber); }
.sq-status--warning                { color: var(--accent-amber); }
.sq-status--error   .sq-status-dot { background: var(--accent-red); }
.sq-status--error                  { color: var(--accent-red); }
.sq-status--info    .sq-status-dot { background: var(--accent-blue); }
.sq-status--info                   { color: var(--accent-blue); }

/* ── Tabs ────────────────────────────────────────────── */
.sq-tabs { display: flex; border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-4); }
.sq-tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  background: none; border-top: none; border-left: none; border-right: none;
}
.sq-tab:hover { color: var(--text-primary); background: var(--bg-elevated); }
.sq-tab--active { color: var(--text-primary); border-bottom-color: var(--accent-teal); }
.sq-tab-panel { display: none; }
.sq-tab-panel--active { display: block; }

/* ── Pagination ──────────────────────────────────────── */
.sq-pagination { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); margin-top: var(--space-4); margin-bottom: var(--space-4); }
.sq-pagination [data-role="pages"] { display: flex; align-items: center; gap: var(--space-1); }
.sq-pagination-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default); background: transparent;
  color: var(--text-secondary); cursor: pointer; font-family: inherit;
  font-size: var(--text-xs); text-transform: uppercase; border-radius: 2px;
  line-height: 1; text-decoration: none;
}
.sq-pagination-btn:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-elevated); }
.sq-pagination-btn--active { border-color: var(--accent-teal); color: var(--accent-teal); }
.sq-pagination-btn:disabled { color: var(--text-tertiary); cursor: default; border-color: var(--border-subtle); }
.sq-pagination-ellipsis { color: var(--text-tertiary); padding: 0 var(--space-1); }

/* ── Modals ──────────────────────────────────────────── */
.sq-modal { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; }
.sq-modal--active { display: flex; }
.sq-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
.sq-modal-content { position: relative; background: var(--bg-base); border: 1px solid var(--border-strong); max-width: 560px; width: 90%; max-height: 80vh; overflow-y: auto; }
.sq-modal-content--wide { max-width: 800px; }
.sq-modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); }
.sq-modal-close { background: none; border: none; color: var(--text-secondary); font-size: var(--text-lg); cursor: pointer; padding: 0 var(--space-1); }
.sq-modal-close:hover { color: var(--text-primary); }
.sq-modal-body { padding: var(--space-4); }
.sq-modal-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-default); display: flex; gap: var(--space-2); justify-content: flex-end; }

/* ── Section Headers ─────────────────────────────────── */
.sq-section-header {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-6);
}
.sq-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.sq-page-header > .sq-section-header {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.sq-page-header > .sq-btn-group { margin-bottom: 0; }

/* ── Utility: Text ───────────────────────────────────── */
.text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); } .text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-error { color: var(--accent-red); } .text-info { color: var(--accent-blue); }
.text-success { color: var(--accent-olive); } .text-warning { color: var(--accent-amber); }
.text-upper { text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.text-center { text-align: center; }

/* ── Utility: Spacing ────────────────────────────────── */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); }

/* ── Utility: Layout ─────────────────────────────────── */
.flex { display: flex; } .flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.w-full { width: 100%; }
.sq-hidden { display: none; }
.cursor-pointer { cursor: pointer; }
.sq-separator { color: var(--text-tertiary); margin: 0 var(--space-2); }

/* ── Bulma Compatibility ─────────────────────────────── */
/* Maps common Bulma classes so unconverted templates remain functional */
.section { padding: var(--space-6); }
/* .container defined above in layout section */
.content h1 { margin-bottom: var(--space-6); }
.content h2 { margin-top: var(--space-8); margin-bottom: var(--space-4); }
.content h2:first-child { margin-top: 0; }
.content h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.content h4 { margin-top: var(--space-5); margin-bottom: var(--space-2); }
.content h5 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.content p { margin-bottom: var(--space-3); }
.content ul:not(.pagination-list), .content ol { margin-bottom: var(--space-4); }
.content li { margin-bottom: var(--space-2); }
.content table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-bottom: var(--space-4);
}
.content table th {
  text-align: left; padding: var(--space-2) var(--space-3); font-size: var(--text-xs);
  font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-secondary); background: var(--bg-base); border-bottom: 2px solid var(--border-default);
}
.content table td {
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); color: var(--text-primary);
}
.content table tbody tr:hover { background: var(--bg-elevated); }
.columns { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.column { flex: 1; min-width: 0; }
.box {
  background: var(--bg-base); border: 1px solid var(--border-default);
  padding: var(--space-6); margin-bottom: var(--space-6);
}
.button, .buttons .button {
  display: inline-block; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default); background: transparent;
  color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer;
  border-radius: 2px; text-decoration: none; font-family: inherit;
}
.button:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-elevated); }
.button.is-link, .button.is-info { border-color: var(--accent-blue); color: var(--accent-blue); }
.button.is-primary, .button.is-success { border-color: var(--accent-olive); color: var(--accent-olive); }
.button.is-danger { border-color: var(--accent-red); color: var(--accent-red); }
.button.is-warning { border-color: var(--accent-amber); color: var(--accent-amber); }
.button.is-small { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
.buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.field { margin-bottom: var(--space-4); }
.field.is-grouped { display: flex; gap: var(--space-2); align-items: flex-end; }
.control { }
.control.is-expanded { flex: 1; }
.label {
  display: block; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-secondary); margin-bottom: var(--space-1);
}
.input, .textarea, .select select {
  background: var(--bg-deep); border: 1px solid var(--border-default);
  color: var(--text-primary); padding: var(--space-2) var(--space-3);
  font-family: inherit; font-size: var(--text-sm); border-radius: 2px; width: 100%;
}
.input:focus, .textarea:focus, .select select:focus { outline: none; border-color: var(--accent-blue); }
.select { display: inline-block; }
.select select { cursor: pointer; }
.checkbox { color: var(--text-primary); font-size: var(--text-sm); }
.help { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); }
.help.is-danger { color: var(--accent-red); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  text-align: left; padding: var(--space-2) var(--space-3); font-size: var(--text-xs);
  font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-secondary); background: var(--bg-base); border-bottom: 2px solid var(--border-default);
}
.table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); }
.table tbody tr:hover { background: var(--bg-elevated); }
.table.is-fullwidth { width: 100%; }
.tag {
  display: inline-block; padding: 2px 6px; border: 1px solid var(--border-default);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); border-radius: 2px;
}
.tag.is-info { border-color: var(--accent-blue); color: var(--accent-blue); }
.tag.is-success { border-color: var(--accent-olive); color: var(--accent-olive); }
.tag.is-warning { border-color: var(--accent-amber); color: var(--accent-amber); }
.tag.is-danger { border-color: var(--accent-red); color: var(--accent-red); }
/* sq-tag: project-namespaced tag class (terminal-engineering aesthetic).
   First sq-tag classes in the codebase; the broader `tag is-*` migration
   sweep is tracked separately. New code should reach for sq-tag rather
   than re-using the Bulma-named .tag.is-* rules above. */
.sq-tag {
  display: inline-block; padding: 2px 6px; border: 1px solid var(--border-default);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); border-radius: 2px;
}
.sq-tag--info { border-color: var(--accent-blue); color: var(--accent-blue); }
.sq-tag--success { border-color: var(--accent-olive); color: var(--accent-olive); }
.sq-tag--warning { border-color: var(--accent-amber); color: var(--accent-amber); }
.sq-tag--danger { border-color: var(--accent-red); color: var(--accent-red); }
.sq-tag--sm { padding: 1px 4px; font-size: 10px; }
.tabs ul { display: flex; border-bottom: 1px solid var(--border-default); list-style: none; padding: 0; margin-bottom: var(--space-4); }
.tabs li { margin: 0; }
.tabs a { display: block; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); border-bottom: 2px solid transparent; cursor: pointer; }
.tabs a:hover { color: var(--text-primary); background: var(--bg-elevated); }
.tabs li.is-active a, .tabs li.sq-tab--active a { color: var(--text-primary); border-bottom-color: var(--accent-teal); }
.tabs.is-toggle ul { border-bottom: none; gap: var(--space-2); }
.tabs.is-toggle a {
  border: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default);
  border-radius: 2px; color: var(--text-secondary);
}
.tabs.is-toggle a:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-elevated); }
.tabs.is-toggle li.is-active a, .tabs.is-toggle li.sq-tab--active a {
  border-color: var(--accent-teal); color: var(--accent-teal); background: var(--bg-elevated);
}
.pagination { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); margin-bottom: var(--space-4); }
.pagination-previous, .pagination-next, .pagination-link,
.pagination-list a, .pagination-list .sq-pagination-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-1) var(--space-2); border: 1px solid var(--border-default);
  color: var(--text-secondary); border-radius: 2px; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400;
  line-height: 1; height: 24px; box-sizing: border-box;
}
.pagination-previous:hover, .pagination-next:hover, .pagination-link:hover,
.pagination-list a:hover, .pagination-list .sq-pagination-btn:hover {
  border-color: var(--border-strong); color: var(--text-primary);
}
.pagination-list .sq-pagination-btn--active { border-color: var(--accent-teal); color: var(--accent-teal); }
.pagination-list { display: flex; align-items: center; gap: var(--space-1); list-style: none; padding: 0; margin: 0; }
.pagination-list li { margin: 0; padding: 0; display: flex; align-items: center; }
.pagination-ellipsis { color: var(--text-tertiary); }
.has-text-danger { color: var(--accent-red); }
.has-text-success { color: var(--accent-olive); }
.has-text-warning { color: var(--accent-amber); }
.has-text-info { color: var(--accent-blue); }
.has-text-centered { text-align: center; }
.has-text-monospace, .is-family-monospace { font-family: var(--font-mono); }
.has-background-black, .has-background-grey-darker { background: var(--bg-base); }
.is-vcentered { vertical-align: middle; }
.mt-1 { margin-top: var(--space-1); } .mt-3 { margin-top: var(--space-3); } .mt-5 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-1); } .mb-3 { margin-bottom: var(--space-3); } .mb-5 { margin-bottom: var(--space-5); }
.m-0 { margin: 0; }
.title { font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-4); }
.title.is-5 { font-size: var(--text-md); }
.level { display: flex; gap: var(--space-6); margin-bottom: var(--space-4); }
.level-item { text-align: center; }
.heading { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); }
.cell { padding: var(--space-2); }
.column.is-one-third { flex: 0 0 33.33%; max-width: 33.33%; }
.column.is-half { flex: 0 0 50%; max-width: 50%; }
.columns.is-multiline { flex-wrap: wrap; gap: var(--space-1); }
.table.is-narrow td, .table.is-narrow th { padding: var(--space-1) var(--space-3); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1023px) {
  .layout-shell { grid-template-columns: 1fr; }
  .layout-sidebar {
    position: fixed; left: 0; top: 44px; bottom: 0;
    width: var(--sidebar-width); z-index: 50;
    transform: translateX(-100%); transition: transform 0.2s ease;
  }
  .layout-sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-toggle { display: block; }
  .sidebar-overlay.sidebar-open { display: block; z-index: 49; }
  .grid-cols-2, .grid-cols-3 { grid-template-columns: 1fr; }
}