/* Connectivity banner — full width at bottom, centered text */
#connectivity-banner {
  display: none;                  /* hidden by default */
  position: fixed;
  bottom: 0; left: 0; right: 0;   /* span full width */
  text-align: center;
  padding: 0.6rem;
  font-size: 0.9rem;
  color: #fff;
  z-index: 10000;
}
#connectivity-banner.show {
  display: block;                 /* show when `.show` is toggled */
}
#connectivity-banner.offline {
  background: #e74c3c;
}
#connectivity-banner.online {
  background: #27ae60;
}


:root {
  --bg-base:        #1c1d22;
  --bg-card:        #26272d;
  --accent:         #4dabf7;
  --accent-hover:   #71c5ff;
  --border:         #393a40;
  --text-main:      #e9e9ef;
  --text-muted:     #9a9ba1;
  --radius:         8px;
  --space:          1.2rem;
  --shadow:         0 1px 4px rgba(0,0,0,.4);
}

/* light override */
@media (prefers-color-scheme: light) {
  :root, body.light {
    --bg-base:      #ffffff;
    --bg-card:      #f4f6f8;
    --accent:       #006dff;
    --accent-hover: #096bff;
    --border:       #d9dce0;
    --text-main:    #202124;
    --text-muted:   #5f6368;
  }
}

body {
  margin:0; font-family: Inter, Roboto, system-ui,-apple-system,sans-serif;
  background:var(--bg-base); color:var(--text-main);
}

/* header/navigation */
/*
header {
  background:var(--bg-card); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
header .container{display:flex;align-items:center;justify-content:space-between;padding:.8rem var(--space);}
header a{color:var(--text-main);margin-left:1rem;text-decoration:none;font-size:.9rem;}
header a:hover{color:var(--accent);}
*/
/* utility */
.container{width:min(92%,1000px);margin:auto;padding:var(--space) 0;}
.card{
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--space); margin-bottom:var(--space);
  box-shadow:var(--shadow);
}

.btn{
  background:var(--accent);color:#fff;border:0;border-radius:4px;
  padding:.55rem 1.1rem;font-size:.9rem;cursor:pointer;
  transition:background .15s;
}
.btn:hover{background:var(--accent-hover);}
.btn-group .btn.primary{border-radius:4px 0 0 4px;}
.btn-group .btn.split{background:var(--bg-card);color:var(--text-main);
  border:1px solid var(--border);border-left:0;font-weight:bold;}
.btn.split:hover{background:var(--border);}
.split-menu{min-width:200px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}

.btn-group { position: relative; display: inline-block; }
.btn.split { width: 2.4rem; margin:-4px; }
.split-menu {
  display: none; position: absolute; right:0; background:var(--bg-alt);
  border:1px solid var(--border); border-radius:4px; z-index:10;
}
.split-menu button {
  display:block; width:100%; border:0; background:none; padding:.5rem 1rem;
  color:var(--text); text-align:left; cursor:pointer;
}
.split-menu button:hover { background:var(--border); }


input[type=text], textarea{
  width:100%;background:var(--bg-base);color:var(--text-main);
  border:1px solid var(--border);border-radius:4px;padding:.55rem;
}
fieldset{border:1px solid var(--border);border-radius:6px;padding:.6rem;margin-bottom:var(--space);}
legend{padding:0 .4rem;color:var(--accent);font-size:.85rem;}
.repeat{display:flex;gap:.4rem;margin:.3rem 0;}
.repeat input{flex:1;}
.repeat .add{width:2.2rem;background:var(--accent);color:#fff;border:0;border-radius:4px;cursor:pointer;}
.repeat .add:hover{background:var(--accent-hover);}

ul{list-style:none;padding-left:0;margin:0;}
ul li{padding:.2rem 0;}
h1,h2,h3{margin:.4rem 0 .8rem;}
h1{font-size:1.6rem;} h2{font-size:1.2rem;} h3{font-size:1rem;color:var(--accent);}

/* anchor grid */
.anchor-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem;margin-top:1.4rem;}

.anchor-block-view {
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1rem 1rem .8rem;box-shadow:var(--shadow);
}
.anchor-block-view h3 {display:flex;align-items:center;margin:.1rem 0 .7rem;font-size:1rem;}
.anchor-block-view h3 svg {width:18px;height:18px;margin-right:.5rem;fill:var(--accent);}

.chip {
  display:inline-block;margin:.15rem .25rem .25rem 0;padding:.25rem .55rem;
  background:var(--border);border-radius:16px;font-size:.78rem;
  color:var(--text-main);line-height:1;
}


/* tighten trix toolbar in dark mode */
.trix-button-group { background:var(--bg-card); border-color:var(--border); }
.trix-button--icon { color:var(--text-main); }
.trix-button--icon:hover { background:var(--border); }
.trix-content { color:var(--text-main); }

/* Custom Trix toolbar background & borders */
.custom-trix-toolbar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow);
  margin-bottom: 0;
}

/* Button colors */
.custom-trix-toolbar .trix-button {
  color: var(--text-main);
  background: var(--bg-card);
  border: none;
  padding: .5rem;
  font-size: .9rem;
}
.custom-trix-toolbar .trix-button:hover {
  background: var(--border);
  color: var(--accent);
}

/* Icon buttons */
.custom-trix-toolbar .trix-button--icon {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Editor area */
trix-editor.trix-content {
  border: 1px solid var(--border);
  border-top: none; /* join neatly with toolbar */
  border-radius: 0 0 var(--radius) var(--radius);
  min-height: 10rem;
  padding: var(--space);
  background: var(--bg-base);
  color: var(--text-main);
}
.custom-trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem; /* space between groups */
}
/* 1. Default (inactive) state: light “card” background + thin border */
.custom-trix-toolbar .trix-button {
  background: var(--bg-alt);        /* lighter than the page bg */
  border: 1px solid var(--border);  /* subtle outline */
  color: var(--text-main);          /* full-contrast text */
  transition: background .1s, color .1s;
}

/* 2. Active state: full accent background, white text */
.custom-trix-toolbar .trix-button[aria-pressed="true"] {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* 3. Hover/focus for both states */
.custom-trix-toolbar .trix-button:hover,
.custom-trix-toolbar .trix-button:focus {
  background: var(--border);
  color: var(--accent);
  outline: none;
}

/* 4. History tools (undo/redo) – same defaults */
.custom-trix-toolbar .trix-button-group--history-tools .trix-button {
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.custom-trix-toolbar .trix-button-group--history-tools .trix-button[aria-pressed="true"] {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.dashboard-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .15s, box-shadow .15s;
}
.dashboard-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.card-excerpt {
  color: var(--text-main);
  font-size: .95rem;
  line-height: 1.3;
  max-height: 3.9em; /* ~3 lines */
  overflow: hidden;
  position: relative;
}
.card-excerpt:after {
  content: '…';
  position: absolute;
  bottom: 0; right: 0;
  background: var(--bg-card);
  padding: 0 .4rem;
}
.card-chips { margin: .8rem 0; }

/* ─── Dashboard excerpt preview ───────────────────────────────── */
.card-excerpt {
  /* strip any HTML tags from the content */
  /* limit to 3 lines with an ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: .5rem 0 1rem;
  color: var(--text-main);
  font-size: .95rem;
  line-height: 1.4;
}

/* Tabs */
.dashboard-tabs {
  display: flex; gap: 1rem; margin-bottom:1.2rem;
}
.dashboard-tabs a {
  padding:.4rem .8rem; border-radius:4px;
  background:var(--bg-card); color:var(--text-main); text-decoration:none;
}
.dashboard-tabs a.active {
  background: var(--accent); color:#fff;
}

/* Empty-state */
.empty-state { text-align:center; padding:2rem; color:var(--text-muted); }

/* Grid & cards */
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.dashboard-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; display:flex; flex-direction:column;
}
.card-excerpt {
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; margin:.5rem 0; color:var(--text-main); line-height:1.4;
}
.card-chips { margin:.5rem 0; }
.card-actions { margin-top:auto; display:flex; gap:.4rem; }
.btn.mini {
  padding:.3rem .6rem; font-size:.8rem; border-radius:4px;
}
.btn.danger { background:#e74c3c; }
.btn.danger:hover { background:#c0392b; }

/* ─── Ellipsis Menu on Cards ───────────────────────────────── */
.dashboard-card {
  position: relative; /* for the menu positioning */
}

/* Container for the menu */
.card-menu {
  position: absolute;
  top: 0.8rem;    /* adjust to align under your card padding */
  right: 0.8rem;
}

/* The toggle button */
.menu-toggle {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
  right: 0.8rem;
  position: absolute;
}
.menu-toggle:hover {
  color: var(--text-main);
}

/* The dropdown menu (hidden by default) */
.card-menu .menu {
  display: block;
  position: absolute;
  top: 1.8rem;    /* just below the toggle */
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow);
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
  z-index: 10;
}

/* Show when .open is set */
.card-menu.open .menu {
  display: block;
}

/* Menu items */
.card-menu .menu li {
  margin: 0;
  padding: 0;
}
.card-menu .menu button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: var(--text-main);
  cursor: pointer;
}
.card-menu .menu button:hover {
  background: var(--border);
  color: var(--accent);
}

/* FAB (mobile only) */
.fab {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 2rem;
  border: none; box-shadow: var(--shadow); z-index: 1000;
}
@media (min-width: 600px) {
  .fab { display: none; }  /* hide on larger screens */
}

/* Dream modal overlay */
#dreamModal.modal-hidden { display: none; }
#dreamModal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}
.modal-content {
  background: var(--bg-card);
  width: 100%; height: 100%;
  padding: 1rem; box-sizing: border-box;
  overflow: auto;
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none;
  font-size: 1.6rem; color: var(--text-muted);
}
.modal-close:hover { color: var(--text-main); }

/* Form inside modal */
#dreamForm input,
#dreamForm textarea {
  width: 100%; margin-bottom: 1rem;
  font-size: 1.1rem; padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* Offline modal anchors */
.anchors-mobile {
  margin: 1rem 0;
}
.anchor-group {
  margin-bottom: 1rem;
}
.anchor-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0;
}
.anchor-list input {
  flex: 1 1 auto;
  padding: .5rem .6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.add-anchor {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: .4rem .8rem;
  max-width: 110px;
  cursor: pointer;
}
.add-anchor:hover { background: var(--accent-hover); }

/* ───  Base container & typography ───────────────────────────────── */
body {
  font-size: 1rem;
  line-height: 1.5;
}
.container {
  padding: 1rem;
  max-width: 100%;
  margin: 0 auto;
}
h1, h2, h3 {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

/* ─── Forms, inputs & buttons ──────────────────────────────── */
input, textarea, select, button {
  font-size: 1rem;
  border-radius: 4px;
}
input, textarea, select {
  width: 95%;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
}

/* ─── Dashboard grid (1-column on mobile) ─────────────────── */
.dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dashboard-card {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* ─── Header & FAB ───────────────────────────────────────── 
header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  justify-content: space-between;
}
/* on mobile, show minimal nav */
header nav { display: none; }
.fab { /* already mobile-only */ }

/* ─── Full-screen modals ──────────────────────────────────── */
.modal-content {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

@media (min-width: 600px) {
  /* Dashboard: switch to multi-column grid */
  .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  /* Show header nav instead of FAB */
  header nav {
    display: block;
  }
  .fab {
    display: none;
  }

  /* Constrain modals to centered dialog */
  .modal-content {
    width: 90%;
    max-width: 480px;
    height: auto;
    max-height: 90vh;
    border-radius: var(--radius);
  }
}

.home-hero {
  padding: 2rem 1rem;
  text-align: center;
}
@media (min-width: 600px) {
  .home-hero {
    padding: 4rem 2rem;
    max-width: 600px;
    margin: 2rem auto;
  }
}

.dream-form {
  padding: 1rem;
}
@media (min-width: 600px) {
  .dream-form {
    width: 100%;
    max-width: 500px;
    margin: 1.5rem auto;
  }
}

.dream-show {
  padding: 1rem;
}
.dream-show .anchors {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 600px) {
  .dream-show {
    max-width: 700px;
    margin: 1.5rem auto;
  }
  .dream-show .anchors {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
}

/* ─── Offline/Online footer bars ───────────────────────────── */
#connectivity-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  text-align: center; padding: .6rem;
  font-size: 0.9rem; color: #fff;
  z-index: 10000;
  transform: translateY(100%);
  transition: transform .3s ease;
}
#connectivity-banner.show {
  transform: translateY(0);
}
#connectivity-banner.offline {
  background: #e74c3c; /* red */
}
#connectivity-banner.online {
  background: #27ae60; /* green */
}

/* ─── Snackbar for small toasts ────────────────────────────── */
.snackbar {
  position: fixed; bottom: 1.2rem; left: 50%;
  transform: translateX(-50%) translateY(100%);
  background: rgba(0,0,0,0.85); color: #fff;
  padding: .6rem 1rem; border-radius: 4px;
  font-size: 0.9rem; opacity: 0; transition: all .4s ease;
  z-index: 10001;
}
.snackbar.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ─── Offline Dream Cards ─────────────────────────────────── */
.dashboard-grid .offline-card {
  opacity: 0.7;
  border: 2px dashed var(--accent);
  position: relative;
}
.offline-label {
  position: absolute; top: .6rem; right: .6rem;
  background: var(--accent); color: #fff;
  padding: .2rem .6rem; border-radius: 3px;
  font-size: .75rem;
}
.offline-card .card-actions {
  margin-top: .5rem;
}

/* connectivity banner: always pinned to bottom */
#connectivity-banner {
  top: auto !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
  display: none;
}
#connectivity-banner.show {
  display: block;
}
#connectivity-banner.offline {
  background: #e74c3c;
}
#connectivity-banner.online {
  background: #27ae60;
}

.board-tag {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 0.3rem;
  display: inline-block;
}
.board-tag-dream { color: #aaa; }
.board-tag-vision { color: #36f; }
.board-tag-mood { color: #f39; }
.board-tag-trip { color: #4fa; }

.layout {
    display: flex;
    min-height: calc(100vh - 64px);
}

/* Sidebar overlay modifications */
.sidebar {
  /* take the bar out of the normal flow and overlay it over content */
  position: fixed !important;
  left: 0;
  top: 64px;              /* matches the height of the top navigation bar */
  height: calc(100vh - 64px);
  transform: translateX(0);
  transition: transform 0.18s ease;
  z-index: 200;           /* ensure it sits above content */
}
.sidebar.collapsed {
  /* slide the bar left so only ~4px remains visible as a peek/hit area */
  transform: translateX(calc(-100% + 4px));
}

/* style the toggle button as a bold arrow in a circle */
.sidebar-collapse {
  position: fixed !important;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 300;
  font-size: 20px;
}


.brand {
    font-weight: 700;
    margin-bottom: 12px;
}

.nav a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: #b7c2d0;
    text-decoration: none;
    margin-bottom: 6px;
}

.nav a.active,
.nav a:hover {
    background: #122033;
    color: #fff;
}

.content {
    flex: 1;
    padding: 24px;
}

.content--full {
    padding: 24px;
    max-width: 960px;
    margin: 0 auto;
}

@media (max-width: 960px) {
    .sidebar {
        position: fixed;
        top: 64px;
        left: 0;
        width: 100%;
        height: auto;
        z-index: 20;
    }
    .content {
        padding-top: 140px;
    }
}

/* Sidebar base */
.layout {
  display: flex;
  min-height: calc(100vh - 64px); /* adjust if your top bar is taller */
}
.sidebar {
  width: 260px;
  background: #0f1621;
  border-right: 1px solid #1c2740;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  padding: 16px;
}
.sidebar .brand {
  font-weight: 700;
  margin-bottom: 12px;
}
.nav .new-board {
  margin-bottom: 8px;
}
.card-menu {
  display: none;
  flex-direction: column;
  background: #0f1621;
  border: 1px solid #1c2740;
  border-radius: 8px;
  padding: 8px;
}
.card-menu.open {
  display: flex;
}
.board-nav {
  margin-top: 20px;
}
.board-nav a {
  display: block;
  padding: 6px 0;
  color: #b7c2d0;
  text-decoration: none;
}
.board-nav a:hover {
  color: #fff;
}
.content {
  flex: 1;
  padding: 24px;
}

/* Mood overlay example */
#mood-settings-overlay.overlay-hidden {
  display: none;
}
#mood-settings-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: #0b1220;
  color: #e6edf3;
  border-left: 1px solid #1c2740;
  z-index: 100;
}
#mood-settings-overlay .overlay-content {
  padding: 24px;
  overflow-y: auto;
}

/* Sidebar collapse controls */
.sidebar { transition: width .18s ease; }
.sidebar-collapse {
  position: absolute;
  top: 8px;
  right: -12px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  border: 1px solid #1c2740;
  background: #0f1621;
  color: var(--text-main);
  cursor: pointer;
}
.sidebar.collapsed { width: 60px !important; }
.sidebar.collapsed .brand,
.sidebar.collapsed .nav a,
.sidebar.collapsed .board-nav a { overflow: hidden; white-space: nowrap; text-indent:-9999px; }
.sidebar.collapsed .nav .new-board .btn { text-indent:-9999px; }

/* Two-column grid for dates */
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Anchors row */
.anchors-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.anchors-row .anchor-key { width: 180px; }
.btn.btn-icon { width: 36px; height: 36px; margin-top: -23px; display: inline-flex; align-items: center; justify-content: center; }

/* Trix editor height for visions */
.trix-vision { min-height: 160px; }

/* Sidebar collapse & swipe */
.sidebar { transition: width .18s ease; }
.sidebar-collapse {
  position: absolute;
  top: 8px;
  right: -12px;
  width: 24px; height: 24px;
  border-radius: 12px;
  border: 1px solid #1c2740;
  background: #0f1621;
  color: var(--text-main);
  cursor: pointer;
}
.sidebar.collapsed {
  width: 4px !important; /* 2px visible + hit-area */
}
.sidebar.collapsed .brand,
.sidebar.collapsed .nav a,
.sidebar.collapsed .board-nav a {
  overflow: hidden;
  white-space: nowrap;
  text-indent: -9999px;
}
/* Collapse nav buttons too */
.sidebar.collapsed .nav .new-board .btn {
  text-indent: -9999px;
}
/* Anchors & form tweaks */
.anchors-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.anchor-key { width: 140px; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trix-vision { min-height: 160px; }

/* Overlay drawer */
/* Hide overlays unless opened */
.overlay-hidden {
    display: none;
}
#overlay-basics.overlay-hidden {
    display: none;
}
#overlay-basics {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: #0b1220;
    border-left: 1px solid #1c2740;
    z-index: 100;
    color: #e6edf3;
    box-shadow: -4px 0 12px rgba(0,0,0,0.4);
}
#overlay-basics .overlay-content {
    padding: 24px;
    height: 100%;
    overflow-y: auto;
}
#overlay-basics .overlay-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}
#overlay-basics h3 {
    margin-bottom: 16px;
}
.show-flag {
    display: block;
    margin: 8px 0;
    font-weight: normal;
}
.close-overlay {
    position: absolute;
    top: 16px;
    right: 16px;
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
    color: inherit;
}

/* --- Switch --- */
.switch {
  display:flex; align-items:center; gap:.6rem;
  margin:8px 0;
}
.switch input[type="checkbox"] { display:none; }
.switch .knob {
  width:34px; height:20px; border-radius:999px;
  background:#2a3448; position:relative; transition:background .15s ease;
  border:1px solid #24314a;
}
.switch .knob::after {
  content:""; position:absolute; top:50%; left:2px; width:14px; height:14px;
  border-radius:50%; transform:translateY(-50%); background:#cdd6e3; transition:left .15s ease;
}
.switch input:checked + .knob { background:#3478f6; }
.switch input:checked + .knob::after { left:18px; }

/* Align label + control nicely in overlay */
#overlay-basics .switch label { margin:0; }
#overlay-basics h4 { margin:16px 0 8px; }

/* Hide Trix buttons we don't want */
.trix-button-group--file-tools,
.trix-button--icon-attach,
.trix-button--icon-code,
.trix-button--icon-strike,
.trix-button--icon-decrease-nesting-level,
.trix-button--icon-increase-nesting-level { display:none !important; }

/* Switch styling */
.switch {
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:8px 0;
}
.switch input[type="checkbox"] {
  display:none;
}
.switch .knob {
  width:34px; height:20px;
  border-radius:999px;
  background:#2a3448;
  border:1px solid #24314a;
  position:relative;
  transition:background .15s ease;
}
.switch .knob::after {
  content:"";
  position:absolute;
  top:50%; left:2px;
  width:14px; height:14px;
  border-radius:50%;
  background:#cdd6e3;
  transform:translateY(-50%);
  transition:left .15s ease;
}
.switch input:checked + .knob {
  background:#3478f6;
}
.switch input:checked + .knob::after {
  left:18px;
}

/* Overlay sidebar (slides over content, not pushing it) */
.sidebar{
  position:fixed !important;
  top:0; left:0;
  height:100vh;
  transform:translateX(0);
  transition:transform .2s ease;
  z-index:200;
}
.sidebar.collapsed{
  transform:translateX(calc(-100% + 4px)); /* keep a 4px “peek” */
}

/* External toggle button: bold arrow in a circle */
.sidebar-toggle{
  position:fixed;
  top:5rem;
  transform:translateY(-50%);
  left:8px;                      /* JS will shift this when sidebar is open */
  width:40px;height:40px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary,#2f6bff);
  color:#fff;border:none;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  z-index:300;
  font-size:20px; line-height:1;
}
.sidebar-toggle:focus{outline:0; box-shadow:0 0 0 3px rgba(47,107,255,.35)}

/* minimal switch styling used in overlays */
.switch-row{display:flex;align-items:center;gap:10px}
.switch-row .switch-text{opacity:.9}
.ui-switch{
  appearance:none; -webkit-appearance:none; position:relative; width:42px; height:24px;
  background:rgba(255,255,255,.2); border-radius:999px; outline:none; cursor:pointer;
  transition:background .15s ease;
}
.ui-switch::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:left .15s ease;
}
.ui-switch:checked{ background:var(--primary, #2f6bff); }
.ui-switch:checked::after{ left:21px; }

.contact-list{border:1px red solid}
.contact-list { margin-bottom:12px; display:flex; flex-direction:column; gap:8px; }
.contact-item { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:rgba(255,255,255,.05); border-radius:8px; }
.field-row { display:flex; gap:8px; align-items:center; }
.field-row select.field-key { width:110px; }
.field-row input.field-value { flex:1; }
.btn-remove-field { padding:4px; }

/* ── Sidebar: stack split-button menus on top ───────────────────────── */
.sidebar .nav-top {           /* optional wrapper (see PHP below) */
  margin-bottom: 12px;
  padding-bottom: 24px;
  border-bottom: 0px solid #1c2740;
}

/* Each split button group becomes one full-width row */
.sidebar .btn-group {
  display: flex !important;   /* override earlier inline-block */
  width: 100%;
  margin: 0 0 8px 0;
}

/* Main button (text) expands, chevron stays compact */
.sidebar .btn-group .btn.primary {
  flex: 1 1 auto;
  min-width: 0;                         /* allow truncation */
  border-radius: 10px 0 0 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar .btn-group .btn.split {
  flex: 0 0 42px;
  width: 42px;
  border-radius: 0 10px 10px 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding-left: 0; padding-right: 0;
}

/* Ensure their dropdown stays aligned and above other content */
.sidebar .btn-group { position: relative; }
.sidebar .btn-group .split-menu {
  right: 0; left: auto;
  z-index: 500;
}

/* Space before the dynamic/secondary nav below */
.sidebar .board-nav { margin-top: 12px; }

/* ───────────────── Sidebar: stack the two top menus ───────────────── */
.sidebar .nav-top .nav{
  /* whatever it was before, make it a column list */
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
}

.sidebar .nav-top .new-board{
  width: 100%;
}

/* Make the toggle button span the full width and align label + chevron */
.sidebar .nav-top .new-board .menu-toggle.btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* text on left, ▾ on right */
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
}

/* Drop-down menu styling/behavior */
.sidebar .nav-top .new-board .card-menu{
  display: none;             /* hidden by default */
  position: relative;        /* sits under its toggle */
  margin-top: 6px;
  background: #0f141b;
  border: 1px solid #222a36;
  border-radius: 10px;
  overflow: hidden;
}
.sidebar .nav-top .new-board .card-menu a{
  display: block;
  padding: 9px 12px;
  color: #c7d2df;
  text-decoration: none;
}
.sidebar .nav-top .new-board .card-menu a:hover{
  background: #1a2231;
  color: #e8edf4;
}

/* JS toggles .open; show it when open */
.sidebar .nav-top .new-board .card-menu.open{
  display: block;
}

/* Clear separation before the dynamic sidebar below */
.sidebar .board-nav{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #1c2740;
}

/* ── Sidebar: top menus (Boards / + New board) ─────────────────────── */

/* Stack them with a gap */
.sidebar .nav-top .nav{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;                       /* <— the space between the two toggles */
}

/* Each toggle group is the anchor for an absolute menu */
.sidebar .nav-top .new-board{
  position: relative;              /* <— so the dropdown positions from here */
  padding-bottom: 15px;
}

/* Remove the blue button look on these two only */
.sidebar .nav-top .new-board .menu-toggle.btn{
  background: transparent !important;   /* kill blue bg */
  color: #c7d2df !important;
  border-radius: 10px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;                              /* space before the ▾ */
  box-shadow: none !important;
}
.sidebar .nav-top .new-board .menu-toggle.btn:hover{
  background: #1a2231;                  /* gentle hover (optional) */
}

/* Dropdown is an overlay: does NOT push layout */
.sidebar .nav-top .new-board .card-menu{
  display: none;                        /* default hidden */
  position: absolute;                   /* <— overlay */
  top: calc(100% + 22px);                /* sit below the toggle with a gap */
  left: 0;
  min-width: 240px;
  background: #0f141b;
  border: 1px solid #222a36;
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  z-index: 1000;                        /* above the rest of sidebar */
}
.sidebar .nav-top .new-board .card-menu.open{
  display: block;                       /* JS toggles .open */
}

/* Items inside the overlay */
.sidebar .nav-top .new-board .card-menu a{
  display: block;
  padding: 9px 14px;
  color: #c7d2df;
  text-decoration: none;
}
.sidebar .nav-top .new-board .card-menu a:hover{
  background: #1a2231;
  color: #e8edf4;
}

/* Small separator before the dynamic sidebar below */
.sidebar .board-nav{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #1c2740;
}