/*==============================================================================
  BRIDGE SYSTEM THEME — Clean Set (No overlaps)
==============================================================================*/

/* 0) BRAND + LIGHT DEFAULTS */
:root {
  /* Brand hues */
  --bridge-cyan:   #1EC8D9;
  --bridge-mint:   #A4F4C4;
  --bridge-chrome: #C5C6C7;
  --bridge-navy:   #001F33;
  --bridge-amber:  #FFD98E;

  /* Effects & gradients */
  --bridge-glow-cyan: 0 0 12px rgba(30, 200, 217, 0.55);
  --bridge-glow-mint: 0 0 10px rgba(164, 244, 196, 0.45);
  --bridge-gradient-flow:       linear-gradient(90deg, var(--bridge-cyan), var(--bridge-mint));
  --bridge-gradient-chrome-vert:linear-gradient(180deg, #EEE, var(--bridge-chrome));
  --bridge-gradient-chrome-dark:linear-gradient(180deg, #2B2F35, #1B1F25);

  /* Typography */
  --bridge-font: 'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;

  /* Light tokens (defaults) */
  --bg:          #F9FAFB;
  --surface:     #FFFFFF;
  --text:        #222831;
  --muted-text:  #4B5563;
  --line:        #D9DBDF;
  --chrome-grad: var(--bridge-gradient-chrome-vert);

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:   0 6px 20px rgba(0,0,0,0.07);

  --link:            var(--bridge-cyan);
  --link-hover:      var(--bridge-mint);
  --btn-primary-fg:  #FFFFFF;
  --btn-primary-bg:  var(--bridge-gradient-flow);
  --btn-success-fg:  #FFFFFF;
  --btn-success-bg:  var(--bridge-navy);
  --btn-warn-fg:     #2A2A2A;
  --btn-warn-bg:     var(--bridge-amber);
  --focus-ring:      0 0 0 3px rgba(30,200,217,0.25);

  /* Layout tunables */
  --sidebar-w: 200px;
  --header-h: 64px;

  /* Canvas */
  --canvas-cyan: color-mix(in srgb, #ffffff 92%, var(--bridge-cyan) 8%);
}

/* 1) DARK MODE (auto via OS) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0C1218;
    --surface:     #121922;
    --text:        #E6EEF3;
    --muted-text:  #A7B3BD;
    --line:        #2D3540;
    --chrome-grad: var(--bridge-gradient-chrome-dark);

    --shadow-sm:   0 1px 2px rgba(0,0,0,0.55);
    --shadow-md:   0 10px 30px rgba(0,0,0,0.45);

    --btn-primary-fg:#081016;
    --btn-success-fg:#DBE7EE;
    --btn-success-bg:#043049;
    --focus-ring:    0 0 0 3px rgba(30,200,217,0.35);
  }
}

/* 2) MANUAL THEME OVERRIDES (optional) */
.theme-light {
  --bg:#F9FAFB; --surface:#FFFFFF; --text:#222831; --muted-text:#4B5563; --line:#D9DBDF;
  --chrome-grad: var(--bridge-gradient-chrome-vert);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06); --shadow-md:0 6px 20px rgba(0,0,0,0.07);
  --btn-primary-fg:#FFFFFF; --btn-success-fg:#FFFFFF; --btn-success-bg:var(--bridge-navy);
  --focus-ring:0 0 0 3px rgba(30,200,217,0.25);
}
.theme-dark {
  --bg:#0C1218; --surface:#121922; --text:#E6EEF3; --muted-text:#A7B3BD; --line:#2D3540;
  --chrome-grad: var(--bridge-gradient-chrome-dark);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.55); --shadow-md:0 10px 30px rgba(0,0,0,0.45);
  --btn-primary-fg:#081016; --btn-success-fg:#DBE7EE; --btn-success-bg:#043049;
  --focus-ring:0 0 0 3px rgba(30,200,217,0.35);
}

/* 3) BASE / TYPE / LINKS */
html, body {
  height: 100%;
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--bridge-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--link); text-decoration: none; transition: color .18s ease, text-shadow .18s ease; }
a:hover { color: var(--link-hover); text-shadow: var(--bridge-glow-cyan); }
small, .muted { color: var(--muted-text); }
hr { border: 0; height: 2px; background: var(--chrome-grad); margin: 24px 0; }

/* 4) SURFACES / CARDS */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 1.1rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--bridge-cyan); box-shadow: 0 0 14px rgba(30,200,217,0.25); }

/* 5) FORMS */
input, select, textarea {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .65rem .8rem; outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted-text); }
input:focus, select:focus, textarea:focus { border-color: var(--bridge-cyan); box-shadow: var(--focus-ring); }

/* 6) BUTTONS */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 0; border-radius: 10px; padding: .7rem 1.05rem; font-weight: 600; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; box-shadow: var(--shadow-md);
}
.btn-primary { color: var(--btn-primary-fg); background: var(--btn-primary-bg); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--bridge-glow-cyan); }
.btn-success { color: var(--btn-success-fg); background: var(--btn-success-bg); }
.btn-success:hover { opacity:.95; box-shadow: 0 0 10px rgba(0,31,51,.35); }
.btn-warning { color: var(--btn-warn-fg); background: var(--btn-warn-bg); }
.btn-warning:hover { opacity:.96; box-shadow: 0 0 10px rgba(255,217,142,.45); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-outline:hover { border-color: var(--bridge-cyan); box-shadow: var(--bridge-glow-cyan); }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 10px; }
.btn-ghost:hover { border-color: var(--bridge-cyan); box-shadow: var(--bridge-glow-cyan); }

/* 7) ALERTS */
.alert {
  border-left: 4px solid var(--line);
  padding: 1rem; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm);
}
.alert-success {
  border-left-color: var(--bridge-navy); color: var(--bridge-navy);
  background: color-mix(in srgb, var(--bridge-navy) 6%, var(--surface));
}
.alert-warning {
  border-left-color: var(--bridge-amber);
  color: color-mix(in srgb, var(--bridge-amber) 40%, #5a4a2a);
  background: color-mix(in srgb, var(--bridge-amber) 20%, var(--surface));
}

/* 8) TABLES */
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.table th, .table td { padding: .75rem .9rem; border-bottom: 1px solid var(--line); }
.table tr:hover td { background: color-mix(in srgb, var(--bridge-cyan) 7%, var(--surface)); }

/* 9) UTILITIES */
.text-cyan { color: var(--bridge-cyan) !important; }
.text-mint { color: var(--bridge-mint) !important; }
.text-navy { color: var(--bridge-navy) !important; }
.text-amber{ color: var(--bridge-amber)!important; }
.badge { display: inline-block; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; background: var(--surface); }
.badge.live { border-color: var(--bridge-cyan); color: var(--bridge-cyan); }
.connector { height: 2px; background: var(--bridge-gradient-flow); box-shadow: var(--bridge-glow-cyan); border-radius: 2px; }
:where(button, [href], input, select, textarea):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 10) LAYOUT — Fixed sidebar + fixed topbar; ONLY .main scrolls */
body { overflow: hidden; position: relative; }
.layout { display: block; } /* simple wrapper; not a grid */
#sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w); height: 100vh; overflow: auto; z-index: 200;
  background: var(--chrome-grad); border-right: 1px solid var(--line); padding: 12px;
}
.topbar {
  position: fixed; top: 0; left: var(--sidebar-w); right: 0;
  height: var(--header-h); z-index: 150;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  background: var(--chrome-grad); border-bottom: 2px solid var(--line); box-shadow: var(--shadow-sm);
}
.main {
  margin-left: var(--sidebar-w);
  padding-top: var(--header-h);
  height: 100vh;
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--canvas-cyan);
}
.content { max-width: 1280px; width: 100%; margin: 16px auto 24px; padding: 0 16px 24px; }

/* Collapsed sidebar support */
#sidebar.collapsed, body.sidebar-collapsed #sidebar { width: 64px; }
body.sidebar-collapsed .topbar { left: 64px; }
body.sidebar-collapsed .main { margin-left: 64px; }

/* 11) MOBILE — slide-over sidebar beneath fixed header */
@media (max-width: 980px) {
  .topbar { left: 0; right: 0; }
  .main   { margin-left: 0; padding-top: var(--header-h); }

  #sidebar {
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    width: 82%; max-width: 320px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    border-right: 1px solid var(--line);
    border-radius: 0 12px 12px 0;
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  body.sidebar-open::after {
    content: ""; position: fixed; inset: var(--header-h) 0 0 0;
    background: rgba(0,0,0,.35); z-index: 140;
  }
}
/* --- Bridge: micro-alignment + header cleanup --- */

/* 1) Nudge header + body content ~4px to the right */
.topbar { padding-left: 20px; }         /* was 16px */
.main   { padding-left: 4px; }          /* keep scroll area; subtle shift */
.content{ padding-left: 20px; }         /* align cards/text with header */

/* 2) Kill the rogue select in the header */
.topbar select,
.topbar .form-select {
  display: none !important;
}

/* 3) Title inside the bar, never clipped */
.topbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title{
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* leave breathing room for right-side buttons */
  max-width: calc(100vw - var(--sidebar-w) - 260px);
}

/* If the toggle icon hugs the edge, give it a touch of air */
#toggleSidebar { margin-left: 2px; }