:root{
  --bg:#0e111a; --panel:#151a26; --ink:#e9edf5; --muted:#a8b3c7; --accent:#7aa2ff;
  --border:#263045; --warn:#ff6b6b; --sel:#00e0c6; --rect:#ffd34d;

  --page-dark-bg:#0c1122; --page-dark-bord:#1e2a46;
  --page-light-bg:#22335f; --page-light-bord:#4b66a8;

  /* easy knobs */
  --header-pad-top:14px;
  --header-pad-side:16px;
  --header-gap:12px;
  --btn-height:42px;
  --btn-width:200px;     /* Load button width (bubbles auto-size) */
  --main-top-pad:230px;  /* push content below header */
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* ===== Header ===== */
header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  background:#0b0f18; border-bottom:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  padding:var(--header-pad-top) var(--header-pad-side);
  display:grid; grid-template-columns:1fr; grid-auto-rows:min-content; row-gap:var(--header-gap);
}
header h1{ margin:0; font-size:18px; line-height:1.2; }

.header-label{ font-size:13px; color:var(--muted); }

/* Generic rows base (folder row still uses grid) */
.header-row{ align-items:center; column-gap:12px; }

/* Row 1: Load button + Selected bubble + Status bubble (single line, no wrap) */
.header-row--load{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;    /* keep everything on one line */
  overflow-x:auto;     /* sideways scroll if ever too long */
  padding-bottom:2px;  /* avoid scrollbar overlap */
}

/* Default order: [Load] [Selected] [Status] */
.header-row--load .btn--load{ order:1; }
.header-row--load #fileInfoBubble{ order:2; }              /* selected bubble */
.header-row--load .bubble:not(#fileInfoBubble){ order:3; } /* status bubble */

/* To swap back to [Load] [Status] [Selected], add "swap-bubbles" to .header-row--load */
.header-row--load.swap-bubbles #fileInfoBubble{ order:3; }
.header-row--load.swap-bubbles .bubble:not(#fileInfoBubble){ order:2; }

/* Row 3: input (flex) + will-save bubble (flex) + actions (auto, one line) */
.header-row--folder{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  column-gap:12px;
}

/* Actions (same line, natural-width buttons) */
.header-actions{
  display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px;
}

/* Push content down */
main{ width:100%; margin:0; padding:var(--main-top-pad) 20px 40px; }

/* ===== Buttons / Inputs / Bubbles ===== */
.btn{
  appearance:none; border:1px solid var(--border); background:#0f1830; color:#e9edf5;
  padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--btn-height); width:auto;      /* natural width (text-sized) */
}
.btn:hover{ background:#0d1427; border-color:#3340a0; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn.accent{ background:#15265f; border-color:#3a56c4; }
.btn.danger{ background:#3a1620; border-color:#7a2a3a; }

/* Fixed width only for the Load button, if desired */
.btn--load{ width:var(--btn-width); }
.button-like{ width:auto; }

.input-like{
  width:100%; background:#0e1424; border:1px solid var(--border); color:#e9edf5;
  border-radius:10px; padding:10px 12px; min-height:var(--btn-height);
}

/* Bubbles: auto-size to content, never wrap text */
.bubble{
  border:1px solid var(--border); background:#0e1424; color:#cfe7ff;
  border-radius:10px; padding:10px 12px; display:flex; align-items:center; gap:10px;
  min-height:var(--btn-height);
  white-space:nowrap;  /* keep text on one line */
  flex:0 0 auto;       /* size to content, do not stretch */
}

/* Legacy class kept for clarity; bubbles auto-size now */
.bubble--btn-size{ width:auto; }
.bubble--input-size{ width:100%; }  /* the "will save to" bubble matches input width */

.ok{ color:#16a34a; }
.err{ color:#dc2626; white-space:pre-wrap; }

/* ===== Pages / Drawing ===== */
.page{ background:var(--page-dark-bg); border:1px solid var(--page-dark-bord);
  border-radius:12px; padding:12px; margin:12px 0; overflow:hidden; }
#pages>.page:nth-child(even){ background:var(--page-light-bg); border-color:var(--page-light-bord); }
.page h3{ margin:0 0 8px 0; font-size:14px; color:#cdd8ff; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.wrap{ position:relative; display:inline-block; max-width:100%; line-height:0; }
img.page-img{ display:block; max-width:100%; height:auto; }
.overlay{ position:absolute; inset:0; z-index:20; cursor:crosshair; }
.rect{ position:absolute; border:2px solid var(--rect); background:rgba(255,211,77,0.08); z-index:10; }
.rect.selected{ border-color:var(--sel); box-shadow:0 0 0 2px rgba(0,224,198,.25); }

.rect-label{
  position:absolute; padding:2px 6px; font-size:12px; line-height:1.2; border-radius:6px;
  background:#0e1424cc; color:#e9edf5; border:1px solid #1f2a44; z-index:14;
  pointer-events:none; white-space:nowrap; max-width:240px; text-overflow:ellipsis; overflow:hidden;
}
.handle{ position:absolute; width:10px; height:10px; background:var(--sel); border-radius:2px; border:1px solid #003f3a; z-index:15; pointer-events:auto; }
.handle:hover{ transform:scale(1.05); }
.handle[data-handle="nw"],.handle[data-handle="se"]{ cursor:nwse-resize; }
.handle[data-handle="ne"],.handle[data-handle="sw"]{ cursor:nesw-resize; }
.handle[data-handle="n"],.handle[data-handle="s"]{ cursor:ns-resize; }
.handle[data-handle="e"],.handle[data-handle="w"]{ cursor:ew-resize; }

/* Chips */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:#0e1424; color:#cfe7ff; font-size:12px; margin:2px; cursor:pointer; }
.chip.active{ outline:2px solid #00bfa5; }
.chip .x{ display:inline-flex; align-items:center; justify-content:center; padding:0; margin-left:4px; background:transparent; border:0; color:var(--warn); cursor:pointer; line-height:0; }
.chip .x:hover{ filter:brightness(1.1); }
.chip .x svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  /* Load row remains a single flex line with sideways scroll if needed */
}
@media (max-width: 720px){
  /* Folder row stacks; give a bit more room below header */
  .header-row--folder{ grid-template-columns: 1fr; row-gap:8px; }
  :root{ --main-top-pad:280px; }
}

/* Email input text color */
.email-input {
  color: #fff;             /* white text */
  background-color: #0e1424; /* dark background to match theme */
  border: 1px solid var(--border);
}
/* Make user email inputs white on dark background */
.email-input {
  color: #fff;
  background-color: #0e1424; /* matches dark theme */
  border: 1px solid var(--border);
}

/* Make matched email column text white */
#usersTable td.mono {
  color: #fff;
}

/* Force all links in the users table to be white */
#usersTable a,
#usersTable a:visited {
  color: #fff !important;      /* override browser default blue */
  text-decoration: none;
}

#usersTable a:hover {
  color: #00e0c6 !important;   /* your accent color */
  text-decoration: underline;
}

/* ===== Navigation Page ===== */
.nav-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 250px;
  margin: 40px auto;
}

.nav-button {
  padding: 20px;
  font-size: 20px;
  text-align: center;
  background-color: #007BFF;
  color: #fff;
  border: 2px solid #00e0c6;     /* Add a bright accent border */
  border-radius: 12px;           /* Smooth rounded corners */
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
  box-shadow: 0 0 12px rgba(0, 224, 198, 0.2);  /* Soft glow */
}

.nav-button:hover {
  background-color: #0056b3;
  border-color: #00fff0;         /* Brighter on hover */
  box-shadow: 0 0 18px rgba(0, 255, 240, 0.5);
  transform: translateY(-2px);
}


/* Optional: slightly stronger hover scale for buttons */
.btn:hover { transform: translateY(-1px); transition: transform 120ms ease; }

/* FINAL OVERRIDE: menu buttons */
.nav-button {
  border: 2px solid #00e0c6 !important;
  border-radius: 12px !important;
  box-shadow: 0 0 12px rgba(0, 224, 198, 0.25) !important;
  transition: all 0.3s ease !important;
}
.nav-button:hover {
  background-color: #0056b3 !important;
  border-color: #00fff0 !important;
  box-shadow: 0 0 18px rgba(0, 255, 240, 0.5) !important;
  transform: translateY(-2px);
}
/* Enclosing border around all menu buttons */
.nav-container {
  border: 2px solid #00e0c6;           /* Same accent color as buttons */
  border-radius: 16px;                 /* Smooth rounded corners */
  padding: 30px 20px;                  /* Space between border and buttons */
  background: #0f1830;                 /* Matches dark theme */
  box-shadow: 0 0 20px rgba(0, 224, 198, 0.15); /* Subtle glow */
  width: fit-content;
  margin: 40px auto;                   /* Center it on the page */
}
.nav-container h1 {
  text-align: center;
  color: #00e0c6;
  margin-top: 0;
  margin-bottom: 20px;
}

.nav-logo {
  display: block;
  width: 1000px;              /* adjust to taste */
  margin: 0 auto 20px auto;  /* center + space below */
  border-radius: 12px;       /* optional: soften edges */
}

/* Logo styling */
.nav-logo {
  display: block;
  width: 110px;              /* half of 220px = half size */
  margin: 40px auto 20px auto; /* center horizontally + spacing */
  opacity: 0.95;             /* optional soft appearance */
}