/* BubbaTools Clean UI (no custom theme editor)
   Light: white background, black text, light-blue accent
   Dark: deep navy background, white text, soft-blue accent
*/

:root{
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 14px 40px rgba(0,0,0,.08);
  --shadow-sm: 0 10px 26px rgba(0,0,0,.08);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


/* Base */
html,body{margin:0;padding:0;font-family:var(--font);background:var(--bg);color:var(--text)}
a{color:inherit}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto}


/* Light/Dark tokens */
html[data-theme="light"]{
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f9fbff;
  --text: #0b1220;
  --muted: #475569;
  --border: #e6eaf2;
  --accent: #3b82f6;
  --accent-2: #2563eb;
  --danger: #b91c1c;
  --chip: rgba(59,130,246,.12);
  --chip-text: #1d4ed8;
  --input: #ffffff;
  --input-2: #f5f7ff;
  --nav: rgba(255,255,255,.88);
}

html[data-theme="dark"]{
  --bg: #070b14;
  --surface: #0b1220;
  --surface-2: #0c162c;
  --text: #eef2ff;
  --muted: #a7b3c5;
  --border: rgba(148,163,184,.22);
  --accent: #60a5fa;
  --accent-2: #93c5fd;
  --danger: #f87171;
  --chip: rgba(96,165,250,.14);
  --chip-text: #dbeafe;
  --input: #0b1326;
  --input-2: #0c162c;
  --nav: rgba(11,18,32,.82);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
}

a{color:var(--accent);text-decoration:none}

a:hover{text-decoration:underline}

/* Layout */
.container{max-width:1200px;width:100%;margin:0 auto;padding:18px}
.page{display:grid;grid-template-columns:1fr;gap:16px}

/* Navbar (clean, non-button links) */
.navbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: var(--nav);
  border-bottom:1px solid var(--border);
}
.navbar .inner{
  max-width:1200px;
  margin:0 auto;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:1000;
  letter-spacing:.2px;
  color:var(--text);
  text-decoration:none;
}
.brand:hover{text-decoration:none}
.brand .dot{width:10px;height:10px;border-radius:999px;background:var(--accent)}

.navlinks{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.navlinks a{
  display:inline-flex;
  align-items:center;
  padding:6px 0;
  border:none;
  background:transparent;
  color:var(--muted);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.1px;
}
.navlinks a:hover{color:var(--text);text-decoration:none}
.navlinks a.active{color:var(--accent);box-shadow: inset 0 -2px 0 var(--accent)}

.userchip{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-weight:900;
}
.userchip .role{font-weight:900;color:var(--muted);font-size:12px}
.userchip a{color:var(--accent);text-decoration:none;font-weight:1000}
.userchip a:hover{text-decoration:underline}

/* Common components */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}
.card.tight{padding:12px}
.card h1, .card h2, .card h3{margin:0 0 10px 0}

.muted{color:var(--muted)}
.tiny{font-size:12px}
.small{font-size:13px}
.mono{font-family:var(--mono)}
.hr{height:1px;background:var(--border);margin:14px 0}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.grid > *{grid-column:span 12}

.col6{grid-column:span 6}
.col12{grid-column:span 12}
@media (max-width:900px){ .col6{grid-column:span 12} }

/* Lists of tools / items */
.row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:900px){ .row{grid-template-columns:1fr} }

.toolbtn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background: var(--surface-2);
}
.toolmeta{font-size:12px;color:var(--muted);font-weight:900;margin-top:3px}

/* Buttons */
.btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn, button{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  font-weight:1000;
  text-decoration:none;
}
.btn:hover, button:hover{transform:translateY(-1px)}
.btn.primary, button.primary{background:var(--accent);border-color:transparent;color:#fff}
.btn.primary:hover, button.primary:hover{background:var(--accent-2)}
.btn.secondary, button.secondary{background:var(--surface-2)}
.btn.danger, button.danger{
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  color: var(--text);
}

/* Alerts */
.alert{padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2)}
.alert.err{border-color: color-mix(in srgb, var(--danger) 35%, var(--border));}
.alert.ok{border-color: color-mix(in srgb, var(--accent) 35%, var(--border));}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.lbl{font-weight:1000}
input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--input);
  color:var(--text);
}
textarea{min-height:110px}

/* Tables */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
}
.table th, .table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
.table th{background:var(--surface-2);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.table tr:last-child td{border-bottom:none}

.kbd{
  font-family:var(--mono);
  font-size:12px;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface-2);
}

/* Legacy helpers (keep old markup working) */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  font-weight:900;
}
.pill:hover{background:var(--surface-2);text-decoration:none}
.pill.accent{background:var(--accent);border-color:transparent;color:#fff}
.pill.accent:hover{background:var(--accent-2)}

/* Switch (used in Settings) */
.switch{display:flex;align-items:center;gap:10px}
.switch input{width:44px;height:24px;appearance:none;background:var(--border);border-radius:999px;position:relative;outline:none;cursor:pointer;border:1px solid var(--border)}
.switch input:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .15s ease}
.switch input:checked{background:color-mix(in srgb, var(--accent) 35%, var(--border));border-color:color-mix(in srgb, var(--accent) 30%, var(--border))}
.switch input:checked:before{transform:translateX(20px)}