/* ===================================================================
   Setlist Designer — Clean, Commented Stylesheet (visual parity)
   Source: consolidated from your current working CSS
   Notes (confirmed values you asked to keep):
     - Button font-size: 14px
     - Band “×” center: translateY(-10%)
     - Apply button offset: top: 2px
     - New/Save/Add offset: top: -3px
     - Card shadows + spacing enabled
     - Header gradient intact
   =================================================================== */

/* ────────────────────────────────────────────────
   DESIGN REFERENCE CONSTANTS — SetlistDesigner.com
   ──────────────────────────────────────────────── */

:root {
  /* === Core colors === */
  --accent-blue: #13204a;
  --accent-blue-hover: #0a142e;
  --accent-blue-light: #243671;
  --neutral-light: #f7f7f8;
  --neutral-border: #d2d6df;
  --shadow-soft: 0 2px 6px rgba(0,0,0,0.2);

  /* === Fonts === */
  --font-main: 'Inter', 'Segoe UI', sans-serif;
  --font-size-body: 16px;
  --font-size-label: 13px;
  --font-size-button: 14px;
  --font-weight-bold: 600;

  /* === Buttons === */
  --btn-bg: var(--accent-blue);
  --btn-bg-hover: var(--accent-blue-hover);
  --btn-color: #fff;
  --btn-radius: 8px;
  --btn-shadow: var(--shadow-soft);

  /* === X buttons (clear/remove) === */
  --x-bg: var(--accent-blue);
  --x-bg-hover: var(--accent-blue-hover);
  --x-color: #fff;
  --x-size: 26px;
  --x-font-size: 14px;
  --x-shadow: var(--shadow-soft);
  --x-offset-band: -10%;
  --x-offset-apply: 2px;

  /* === Layout === */
  --header-padding: 10px 20px 14px;
  --encore-line-height-factor: 1.25;
}

/* Buttons */
button.btn {
  font-family: var(--font-main);
  font-size: var(--font-size-button);
  background: var(--btn-bg);
  color: var(--btn-color);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  transition: background 0.2s ease;
}

button.btn:hover {
  background: var(--btn-bg-hover);
}

/* Clear / X buttons (Band, Library, Setlist) */
button.field__clear,
button.rmBtn {
  background: var(--x-bg);
  color: var(--x-color);
  width: var(--x-size);
  height: var(--x-size);
  font-size: var(--x-font-size);
  box-shadow: var(--x-shadow);
}



/* ==========================================================
   VARIABLE HOOKUP PATCH (non-destructive, overrides only)
   Tie existing UI to the tokens defined in :root
   ========================================================== */

/* Buttons */
.btn,
button,
a.btn,
input[type="button"].btn,
input[type="submit"].btn{
  font-family: var(--font-main);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-bold);
  color: var(--btn-color);
  background: var(--btn-bg);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  transition: background .2s ease, transform .05s ease;
}
.btn:hover,
button:hover,
a.btn:hover,
input[type="button"].btn:hover,
input[type="submit"].btn:hover{
  background: var(--btn-bg-hover);
}

/* Clear/X buttons — Band Name + Library/Setlist */
.field__clear,
.item .row .rmBtn{
  background: var(--x-bg) !important;
  color: var(--x-color) !important;
  width: var(--x-size) !important;
  height: var(--x-size) !important;
  font-size: var(--x-font-size) !important;
  box-shadow: var(--x-shadow) !important;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.field__clear:hover,
.item .row .rmBtn:hover{
  background: var(--x-bg-hover) !important;
}

/* Keep your approved vertical offsets */
#applyGapBtn{ position:relative; top: var(--x-offset-apply); }
.field--withClear .field__clear{ top:50%; transform: translateY(var(--x-offset-band)); }

/* Chips (checkboxes / radios) color */
.chip input[type="checkbox"],
.chip input[type="radio"]{
  accent-color: var(--accent-blue);
}

/* Cards & stats elevation (use shared shadow/color) */
.card{
  background:#fff;
  border: 1px solid var(--neutral-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.stat{
  background:#fff;
  border: 1px solid var(--neutral-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

/* Header padding & gradient remain as-is; ensure spacing uses token */
.topbar__inner{ padding: var(--header-padding); }

/* Encore line respects print inversion; no visual change here */

/* Inputs: keep family consistent with tokens */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"]{
  font-family: var(--font-main);
}

/* Keep the “Time Between Songs” row intact */
.gap-setting .gap-label{ font-size: var(--font-size-label); font-weight: var(--font-weight-bold); }

/* Utility: ensure links match brand */
a{ color: var(--accent-blue); }
a:hover{ color: var(--accent-blue-hover); }







/* ========== Design Tokens ========== */
:root{
  /* Brand gradient */
  --brand-left:  #0E2F5A;
  --brand-mid:   #0C2546;
  --brand-right: #0A1520;

  /* Palette */
  --ink: #0F1115;
  --ink-80: rgba(15,17,21,.8);
  --ink-60: rgba(15,17,21,.6);
  --bg: #F6F8FA;
  --bg-top: #EAF2FC;
  --card: #fff;
  --border: #E6E9EE;
  --hair: #DFE5EE;

  /* Radii, shadow */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 12px 40px rgba(16,24,40,.08);
}

/* ========== Base ========== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font: 16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg,var(--bg-top) 0,var(--bg) 260px,var(--bg) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ========== Header (Topbar) ========== */
.topbar{
  position: sticky; top:0; z-index:100;
  background: linear-gradient(90deg,var(--brand-left) 0%,var(--brand-mid) 52%,var(--brand-right) 100%);
  color:#fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 16px 48px rgba(0,0,0,.28);
}
.topbar__inner{
  max-width:1200px; margin:0 auto; padding:10px 20px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand__logo{ height:64px; width:auto; display:block; margin:6px 0 14px }
.user-email{ font-size:14px; color:rgba(255,255,255,.85) }

/* ========== Auth Gating (prevents stats flash) ========== */
#appSection{ display:none }
body.auth #appSection{ display:block }
#authSection{ display:none }
body:not(.auth) #authSection{ display:grid }
/* Extra safety: never show mast unless authed */
.mast{ display:none }
body.auth .mast{ display:block }

/* ========== Frame / Mast / Stats ========== */
.frame{ max-width:1200px; margin:20px auto 40px; padding:0 20px }
.hairline{ height:1px; background:var(--hair); margin:10px 0 18px }
.mast{ padding:6px 4px; margin-top:10px }
.mast__stats{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px; max-width:1200px; margin:0 auto;
}
.stat{
  background:var(--card); border:1px solid #E9EEF6; border-radius:12px;
  padding:10px 14px; text-align:center;
  box-shadow: 0 12px 32px rgba(16,24,40,.06);
}
.stat__label{ font:600 13px/1.4 ui-sans-serif,system-ui; color:var(--ink-60); margin-bottom:4px }
.stat__num{ font:800 15px/1.2 ui-sans-serif,system-ui; color:#0C1420 }
.stat__num--lg{ font:900 22px/1.2 ui-sans-serif,system-ui }
.stat--actions .stat__buttons{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap }
@media (max-width:980px){ .mast__stats{ grid-template-columns: 1fr; } }

/* ========== Layout Grids ========== */
.grid{ display:grid; gap:28px }              /* column gap and row rhythm */
.grid--2{ grid-template-columns: 1fr 1fr }
.col{ min-width:0 }
@media (max-width:980px){ .grid--2{ grid-template-columns: 1fr } }

/* Ensure card shadows are visible */
.frame, .grid, .col { overflow: visible; }

/* ========== Cards ========== */
.card{
  background:#fff; border:1px solid #E9EEF6;
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(16,24,40,.08);
  overflow:hidden;
}
.card__hd{ padding:12px 16px 10px; border-bottom:1px solid var(--border) }
.card__hd h2{ margin:0; font:800 20px/1.25 ui-sans-serif,system-ui; color:#0D1724; letter-spacing:.2px }
.card__sub{
  margin:6px 0 0; color: rgba(15,17,21,.65);
  font-weight:600; font-size:13px;
}
.card__bd{ padding:14px 16px 16px }
.col .card + .card{ margin-top:18px }        /* stacked card spacing in a column */
.mb-4 { margin-bottom:22px }                 /* utility used on Settings card */

/* ========== Buttons (blue + 14px everywhere) ========== */
.btn,
button,
a.btn,
input[type="button"].btn,
input[type="submit"].btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;

  font-size:14px; line-height:1.25; font-weight:600;
  color:#fff; background: var(--brand-left);
  padding:6px 14px; border:0; border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  cursor:pointer; text-decoration:none;
  transition: background .15s ease, transform .05s ease;
}
.btn:hover,
button:hover,
a.btn:hover,
input[type="button"].btn:hover,
input[type="submit"].btn:hover{ background: var(--brand-mid); }
.btn:active,
button:active,
a.btn:active,
input[type="button"].btn:active,
input[type="submit"].btn:active{ background: var(--brand-right); transform: translateY(1px); }
.btn--muted{ background: var(--brand-left); color:#fff }
.btn--sm{ font-size:13px; padding:4px 10px }

/* Pixel offsets to visually center buttons with inputs (confirmed) */
#newSetBtn, #saveSetBtn, #addSongForm .btn{ position:relative; top:-3px; transform:none }
#applyGapBtn{ position:relative; top:2px; transform:none }

/* ========== Forms & Fields ========== */
.field{ display:grid; gap:8px; position:relative }
.field__label{ font:700 13px/1 ui-sans-serif,system-ui; color:var(--ink-80) }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"]{
  width:100%; background:#fff; color:var(--ink);
  border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  outline:none; transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
input::placeholder{ color:#777; font-style: normal } /* non-italic */
input:focus{
  border-color: var(--brand-left);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-left) 18%, transparent);
  background:#fff;
}

/* Band Name clear “×” (your -10% center) */
.field--withClear{ position:relative }
.field--withClear input{ padding-right:48px }
.field--withClear .field__clear{
  position:absolute; right:10px; top:50%; transform: translateY(-10%);
  width:26px; height:26px; border:0; border-radius:50%;
  background:var(--brand-left); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; line-height:1; cursor:pointer; z-index:1;
}

/* Band Name clear "×": keep desktop sweet spot, perfectly center on small screens */
@media (max-width: 640px){
  .field--withClear .field__clear{
    top: 50% !important;
    transform: translateY(-50%) !important; /* precise center on small screens */
  }
}


.field--withClear .field__clear:hover{ background: var(--brand-mid) }



/* ========== Settings Rows ========== */
.grid--settings-top{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr 0.7fr 0.9fr auto;
  gap:12px 14px; align-items:end;
}
.grid--settings-bottom{
  display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; margin-top:12px;
}
.w-260 input{ max-width:260px }

/* Chips (All Caps / Song Numbers / Position) */
.inline-chips{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.chip__label{ font:600 13px/1.4 ui-sans-serif,system-ui; color:var(--ink-60) }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px; border:1px solid var(--border); border-radius:999px;
  background:#fff; font-weight:700
}
.chip input[type="checkbox"], .chip input[type="radio"]{ width:16px; height:16px; accent-color: var(--brand-left) }
.chip span{ font-size:14px }

/* Time Between Songs: label → input → Apply (one line) */
.gap-setting{
  display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:nowrap;
}
.gap-setting .gap-label{ font-weight:600; font-size:13px; color:#333; white-space:nowrap }
.gap-setting input[type="text"]{
  width:92px; flex:0 0 auto; text-align:center;
  height:36px; line-height:36px; padding:0 10px;
}

/* ========== Add Song row ========== */
#addSongForm.grid--addsong{
  display:grid;
  grid-template-columns: minmax(240px,1fr) 120px auto;
  column-gap:12px; row-gap:8px; align-items:end;
}

/* ========== Lists / Items (Library & Setlist) ========== */
.list{ display:grid; gap:14px }
.item{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
  padding:12px 14px; background:#fff; border:1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .06s ease;
}
.item:hover{
  border-color: color-mix(in srgb, var(--brand-left) 45%, transparent);
  box-shadow: 0 10px 26px rgba(31,109,224,.10);
  background:#fbfdff; transform: translateY(-1px);
}
.item strong{ font-weight:800; letter-spacing:.1px }
.item .meta{ color: var(--ink-60); font-size:13px }
.dragHandle{ cursor:grab; user-select:none; color:rgba(15,17,21,.4); padding:0 6px; font-size:18px; line-height:1 }
.item .row{ display:flex; align-items:center; gap:6px }

/* Gap inputs (song + encore) — fits “Time?” / “mm:ss” */
#setList .row input.gap,
#setList .row input.sepTime{
  width:9ch; text-align:center; font-family:monospace; padding:2px 6px;
}
#setList .row input.gap::placeholder,
#setList .row input.sepTime::placeholder{ font-style:normal; color:#888 }



/* ========== Preview / Print ========== */
.preview{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px }
#printSurface{ max-width:800px; margin:0 auto }
.preview__meta{ text-align:center; font-weight:800; margin-bottom:10px; letter-spacing:.3px }
.preview__list{ margin:0; padding-left:1.2em; text-align:center }
.preview__list li{ list-style-position: inside } /* keep numbers visually centered */

/* Encore line (screen + print invert) */
.encore-line{
  text-align:center; background:#eef1f6; color:#0E1420;
  font-weight:900; margin:10px 0; padding:7px 0 8px;
  border-radius:10px; letter-spacing:.6px; display:block;
}
@media print{
  .encore-line{
    background:#000 !important; color:#fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ========== Auth Welcome Hero (login) ========== */
.auth-hero { margin-bottom:16px }
.auth-hero__inner{
  display:grid; grid-template-columns:1.2fr 0.8fr;
  gap:16px; align-items:center;
}
.auth-hero__copy h1{
  margin:0 0 6px; font:800 22px/1.25 ui-sans-serif,system-ui; color:#0D1724;
}
.auth-hero__copy p{ margin:0; color:rgba(15,17,21,.8); font-size:14px }
.auth-hero__art img{
  display:block; width:100%; height:auto; border-radius:10px;
  border:1px solid #E6E9EE; box-shadow:0 10px 26px rgba(0,0,0,.06);
}
@media (max-width:920px){ .auth-hero__inner{ grid-template-columns:1fr } }

/* Keep buttons from touching inputs on auth forms */
.form-gap{ height:10px }

/* ========== Links ========== */
a{ color: var(--brand-left); text-decoration:none }
a:hover{ text-decoration:underline }


/* Settings row responsiveness: let Set Name + Actions take their own line */
@media (max-width: 1100px){
  .grid--settings-top{
    grid-template-columns: 1fr 1fr;    /* go to two columns */
  }
  /* Force Set Name (w-260) to full row */
  .grid--settings-top .w-260{
    grid-column: 1 / -1;
  }
  /* Force Actions row to full row; align buttons left */
  .grid--settings-top .actions-wrap{
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 10px;
  }
}

@media (max-width: 640px){
  .grid--settings-top{
    grid-template-columns: 1fr;       /* single column on very small screens */
  }
  .grid--settings-top .w-260,
  .grid--settings-top .actions-wrap,
  .grid--settings-top .field{
    grid-column: 1 / -1;              /* each takes full width */
  }
}




/* Settings: input widths (more precise & responsive) */
#bandName,
#venueName,
#setName {
  width: 100%;
  max-width: 30ch;     /* about 30 characters */
  flex: 1 1 auto;
}

#eventDate {
  width: 100%;
  max-width: 17ch;     /* slightly wider now */
  flex: 0 0 auto;
}

/* Keep layout graceful on smaller screens */
@media (max-width: 1100px) {
  #bandName,
  #venueName,
  #setName,
  #eventDate {
    max-width: 100%;   /* allow full width when wrapping */
  }
}


/* --- Band Name inline X cleanup --- */
.input-with-clear {
  display: flex;
  align-items: center;
  gap: 6px;
}

.input-with-clear input {
  flex: 1;
  border: 1px solid #e2e4e8;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
}

.input-with-clear button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
}



/* --- Fix inline clear X color --- */
.input-with-clear button {
  background: #13204a; /* same dark blue as other buttons */
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.input-with-clear button:hover {
  background: #0a142e; /* hover blue */
}

/* --- Fix inline clear X color --- */
.input-with-clear button {
  background: #13204a; /* same dark blue as other buttons */
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.input-with-clear button:hover {
  background: #0a142e; /* hover blue */
}





/* Make rmBtn identical to Band Name clear button */
.item .row .rmBtn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #13204a;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background .2s ease;
}

.item .row .rmBtn:hover {
  background: #0a142e;
}




/* ============= HEADER POLISH (safe, minimal) ============= */

/* Allow header content to wrap to a second line when needed */
.topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;              /* lets the nav drop under the logo on smaller widths */
  row-gap: 8px;                 /* tighter vertical spacing when wrapped */
}

/* Optional nav container if you add links */
.topnav{
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;               /* don’t stretch; keep links compact */
}

/* Link look-and-feel */
.topnav a{
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.topnav a:hover{
  background: rgba(255,255,255,.08);
  color: #fff;
}


/* When space gets tighter, place nav on its own row and center it */
@media (max-width: 900px){
  .topbar__inner{
    justify-content: center;    /* logo + user email + nav centered as a block */
  }
  .topnav{
    order: 3;                   /* force nav below logo/email if wrapping */
    flex-basis: 100%;
    justify-content: center;
    gap: 12px;
  }
}

/* Very narrow phones: tighten link spacing slightly */
@media (max-width: 480px){
  .topnav{ gap: 10px; }
  .topnav a{ font-size: 13px; padding: 5px 7px; }
}


/* Keep X buttons perfectly circular (no stretching) */
.field__clear,
.item .row .rmBtn{
  box-sizing: content-box !important;
  width: 26px !important;
  height: 26px !important;
  aspect-ratio: 1 / 1;         /* belt-and-suspenders */
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}


/* Uniform placeholder styling across browsers */
input::placeholder { font-size: 14px; color: #777; opacity: 1; }
input::-webkit-input-placeholder { font-size: 14px; color: #777; opacity: 1; }
input::-moz-placeholder { font-size: 14px; color: #777; opacity: 1; }
input:-ms-input-placeholder { font-size: 14px; color: #777; opacity: 1; }
input:-moz-placeholder { font-size: 14px; color: #777; opacity: 1; }

/* Ensure inputs themselves have consistent font size */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"]{
  font-size: 14px;
  line-height: 1.25;
}
/* --- Header layout: logo left, nav/email right --- */
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;   /* restore left/right */
  gap: 16px;
  flex-wrap: wrap;
}

/* Push nav+email to the right as a group */
.topnav{ display:flex; align-items:center; gap:16px; margin-left:auto; }
.user-email{ display:inline-flex; align-items:center; }

/* White text in header (links + email) */
.topbar a,
.topbar a:visited,
.topbar a:active,
.topbar .user-email{
  color:#fff !important;
  text-decoration:none;
  font-weight:500;
  font-size:15px;
  line-height:1.3;
}
.topbar a:hover{
  color:#dbe4ff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Dot separator before the email */
.topbar .user-email::before{
  content:"•";
  color:rgba(255,255,255,.4);
  margin:0 12px 0 6px;
  font-size:18px;
  line-height:1;
  vertical-align:middle;
}

/* Keep logo anchored left and visible */
.topbar__logo{ display:flex; align-items:center; gap:12px; }
.brand__logo{ display:block; height:64px; width:auto; }