/* =======================================================================
   Precision Film Systems™ — Base Styles (layout + components)
   - Theme-agnostic: colors/surfaces come from CSS variables
   - Pair with ONE theme file: theme-dark.css / theme-medium.css / theme-light.css
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* =========================
   Design Tokens (Theme-agnostic)
   ========================= */
:root{
  /* Brand / semantic */
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --secondary:#7c3aed;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;

  /* Surfaces / text */
  --bg:#ffffff;
  --text:#1e293b;
  --muted:#64748b;

  --surface:#ffffff;     /* cards, header, footer, modals */
  --surface-2:#f8fafc;   /* soft panels */
  --surface-3:#f1f5f9;   /* hover/alt soft panels */

  /* Lines + shadows */
  --border:rgba(148,163,184,.20);
  --shadow:0 4px 6px -1px rgba(0,0,0,.10);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.10);

  /* Inputs */
  --input-bg:var(--surface);
  --input-text:var(--text);
  --input-border:rgba(148,163,184,.35);
  --input-border-focus:rgba(59,130,246,.60);
  --focus-ring:0 0 0 3px rgba(59,130,246,.10);

  /* Tables */
  --row-bg:var(--surface);
  --row-bg-hover:var(--surface-2);

  /* Special blocks */
  --notice-bg:linear-gradient(135deg, #dbeafe, #e0e7ff);
  --notice-left:var(--primary);

  /* Settings header alignment nudges */
  --settings-col-head-offset-x: -10px;
  --settings-col-head-offset-x-mobile: -8px;
}

/* =========================
   Base / Reset
   ========================= */
*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  padding:0 16px 16px;
  -webkit-text-size-adjust:100%;
}

.container{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.hidden{ display:none !important; }

/* =========================
   Mobile Bottom Bar
   (shows only on phones/tablet portrait)
   ========================= */
.mobile-nav{ display:none; } /* legacy (removed from markup) */
.mobile-optimize-bar{ display:none; }
.mnav-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
}
.mnav-item:hover{ background:var(--surface-3); }


/* =========================
   Header
   ========================= */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  padding:14px 16px;
  background:var(--surface);
  /* subtle "app bar" look on gradients */
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius:16px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  position:sticky;
  top:12px;
  z-index:30;
  backdrop-filter: blur(10px);
}

.logo h1{
  font-size:2.5rem;
  font-weight:800;
  color:var(--text);
}

.pro{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.tagline{
  color:var(--muted);
  font-size:1.1rem;
  margin-top:5px;
}

.security-badge{
  background:linear-gradient(135deg,var(--success),color-mix(in srgb, var(--success) 70%, white 30%));
  color:white;
  padding:10px 20px;
  border-radius:50px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
}

.lock{ font-size:1.2rem; }

/* =========================
   Layout / Cards
   ========================= */
.main-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:18px;
}

/* Single-column only on smaller screens (keeps side-by-side on iPad landscape) */


.card{
  background:var(--surface);
  border-radius:16px;
  padding:20px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  height:fit-content;
}

.card h2{
  font-size:1.25rem;
  margin-bottom:14px;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
}

/* Optional grid placement hooks */
.input-section{ grid-column:1; }
.results-section{ grid-column:2; }


/* =========================
   Section Header / Project Buttons
   ========================= */
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px;
}

.project-actions{ display:flex; gap:10px; }

.btn-project{
  background:rgba(100,116,139,.90);
  color:white;
  border:1px solid rgba(100,116,139,.30);
  padding:8px 16px;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s, background .2s, border-color .2s;
  font-size:.9rem;
}

.btn-project:hover{
  background:rgba(71,85,105,.95);
  transform:translateY(-1px);
}

/* Centered header variant (fixed invalid !important syntax) */
.section-header-centered {
  text-align: center !important;
  margin-bottom: 25px;
  padding-bottom: 15px;
}

.section-header-centered h2 {
  text-align: center !important;
  margin: 0 0 15px 0;
}


.project-actions-centered{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}

/* =========================
   Job Details (client info)
   ========================= */
.job-details{
  margin:-8px 0 18px;
  padding:14px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
}

.job-details-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.job-details-header h3{
  margin:0;
  font-size:1rem;
  font-weight:800;
}

.job-draft-hint{
  margin:0 0 10px 0;
  font-size:.78rem;
  color:#111827;
  border:1px solid rgba(31,77,122,.22);
  background:#f4f7ff;
  border-radius:12px;
  padding:10px 12px;
}

.job-details-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
}

.job-field label{
  display:block;
  font-size:.78rem;
  font-weight:700;
  color:var(--muted);
  margin:0 0 6px 0;
}

.job-field input{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--input-border);
  border-radius:8px;
  background:var(--input-bg);
  color:var(--input-text);
  font-size:.95rem;
}

.job-field input:focus{
  outline:none;
  border-color:var(--input-border-focus);
  box-shadow:var(--focus-ring);
}

.btn-new-job{
  background:color-mix(in srgb, var(--warning) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  transition:transform .15s, background .15s;
}

.btn-new-job:hover{
  transform:translateY(-1px);
  background:color-mix(in srgb, var(--warning) 22%, transparent);
}


.job-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn-job{
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  transition:transform .15s, filter .15s, background .15s;
}

.btn-job:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

/* New Job = blue */
.btn-job-new{
  background: color-mix(in srgb, #3b82f6 22%, transparent);
  border-color: color-mix(in srgb, #3b82f6 45%, transparent);
  color:#153a6b;
}

/* Save Job = green */
.btn-job-save{
  background: color-mix(in srgb, #22c55e 22%, transparent);
  border-color: color-mix(in srgb, #22c55e 45%, transparent);
}

/* Load Job = yellow */
.btn-job-load{
  background: color-mix(in srgb, #facc15 22%, transparent);
  border-color: color-mix(in srgb, #facc15 55%, transparent);
}


/* =========================
   Film Configuration
   ========================= */
.film-configuration{
  margin-bottom:25px;
  padding:20px;
  background:var(--surface-2);
  border-radius:10px;
  border:1px solid var(--border);
}

.film-selection,
.film-selection-row{
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.film-select-wrapper{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:250px;
}

.film-selection label,
.film-select-wrapper label{
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  min-width:120px;
}

.select-wrapper{ flex:1; max-width:250px; }


.select-wrapper select{
  width:100%;
  padding:10px 15px;
  border:2px solid var(--input-border);
  border-radius:8px;
  font-size:1rem;
  background:var(--input-bg);
  color:var(--input-text);
  transition:border-color .2s, box-shadow .2s;
}

.select-wrapper select:focus{
  outline:none;
  border-color:var(--input-border-focus);
  box-shadow:var(--focus-ring);
}

/* =========================
   Buttons
   ========================= */
.btn-suggest{
  background:linear-gradient(135deg,var(--secondary),color-mix(in srgb, var(--secondary) 70%, black 30%));
  color:white;
  border:none;
  padding:10px 20px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s;
  white-space:nowrap;
}

.btn-suggest:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}

.film-note,
.film-selection small{
  color:var(--muted);
  font-size:.85rem;
  display:block;
  margin-top:5px;
}

/* =========================
   Windows Header + Actions
   ========================= */
.windows-section{ margin-bottom:30px; }

.windows-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.windows-header h3{
  font-size:1.3rem;
  color:var(--text);
  margin:0;
}

.windows-header-smaller h3{
  font-size:18px;
  margin-bottom:15px;
  color:var(--muted);
}

.window-actions{ display:flex; gap:10px; }

.btn-add,
.btn-duplicate{
  padding:8px 16px;
  border:none;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s, background .2s;
}

.btn-add{
  background:var(--success);
  color:white;
}

.btn-add:hover{
  background:color-mix(in srgb, var(--success) 85%, black 15%);
  transform:translateY(-1px);
}

.btn-duplicate{
  background:var(--surface-2);
  color:var(--muted);
  border:1px solid var(--border);
}

.btn-duplicate:hover{ background:var(--surface-3); }

/* =========================
   Selection Controls (Compact)
   ========================= */
.selection-controls{
  background:var(--surface-2);
  padding:12px 15px;
  border-radius:8px;
  margin-bottom:15px;
  border:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.selection-info{ font-weight:600; color:var(--muted); }
.selection-buttons{ display:flex; gap:10px; }

.btn-select-all,
.btn-deselect,
.btn-group-selected{
  padding:6px 12px;
  border:none;
  border-radius:6px;
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s;
}

.btn-select-all{
  background:color-mix(in srgb, var(--primary) 16%, transparent);
  color:var(--text);
  border:1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}

.btn-select-all:hover{
  background:color-mix(in srgb, var(--primary) 24%, transparent);
}

.btn-deselect{
  background:var(--surface-3);
  color:var(--text);
  border:1px solid var(--border);
}

.btn-deselect:hover{ background:color-mix(in srgb, var(--surface-3) 70%, black 5%); }

.btn-group-selected{
  background:var(--success);
  color:white;
}

.btn-group-selected:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,0,0,.16);
}

.btn-group-selected:disabled{
  background:rgba(148,163,184,.35);
  color:rgba(71,85,105,.85);
  cursor:not-allowed;
  border:1px dashed rgba(148,163,184,.60);
}

/* =========================
   Windows Table (Compact)
   ========================= */
.table-header{
  display:grid;
  /* Final column order/layout: checkbox, qty, width, height, group, remove */
  grid-template-columns: var(--window-cols);
  gap: var(--window-gap);
  padding:12px 15px;
  background:var(--surface-3);
  border-radius:6px 6px 0 0;
  border:1px solid var(--border);
  border-bottom:none;
  font-weight:600;
  color:var(--muted);
  font-size:.85rem;
  text-align:center;
}

.table-header > div{ text-align:center; }

.windows-list{
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 6px 6px;
  max-height:300px;
  overflow-y:auto;
}

.window-row{
  display:grid;
  grid-template-columns: var(--window-cols);
  gap: var(--window-gap);
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  align-items:center;
  background:var(--row-bg);
  transition:background .2s;
}

.window-row:last-child{ border-bottom:none; }
.window-row:hover{ background:var(--row-bg-hover); }

.window-checkbox-cell{
  display:flex;
  justify-content:center;
  align-items:center;
}

.window-checkbox{
  width:18px;
  height:18px;
  cursor:pointer;
}

.window-input,
.window-quantity-input{
  width:100%;
  padding:6px 8px;
  border:1px solid var(--input-border);
  border-radius:4px;
  font-size:.9rem;
  text-align:center;
  color:var(--input-text);
  font-family:monospace;
  background:var(--input-bg);
  transition:border-color .2s, box-shadow .2s;
}

.window-input{ max-width:80px; min-width:0; }
.window-quantity-input{ max-width:60px; }

.window-input:focus,
.window-quantity-input:focus{
  outline:none;
  border-color:var(--input-border-focus);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.window-group-cell{
  text-align:center;
  overflow:hidden;
}

/* Badge uses variables so themes can decide */
.window-group-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:12px;
  font-size:.75rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:90px;
  background:color-mix(in srgb, var(--primary) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  color:var(--text);
}

.btn-remove-window{
  width:32px;
  height:32px;
  background:color-mix(in srgb, var(--danger) 14%, transparent);
  color:var(--danger);
  border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius:4px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  transition:background .2s;
}

.btn-remove-window:hover{
  background:color-mix(in srgb, var(--danger) 22%, transparent);
}

/* =========================
   Bottom Window Controls
   ========================= */
.window-controls-bottom{
  margin-top:20px;
  padding:10px;
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
}


.btn-add-window{
  background:var(--surface-2);
  color:var(--text);
  border:1px solid var(--border);
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  font-size:16px;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
  margin:0 5px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn-add-window:visited{ color:inherit; }

.btn-add-window:hover{
  background:var(--surface-3);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

.btn-add-window:active{ transform:translateY(0); box-shadow:none; }

/* Contextual emphasis: bottom window buttons */
.window-controls-bottom .btn-add-window{
  background:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 55%, var(--border) 45%);
  color:#fff;
}
.window-controls-bottom .btn-add-window:hover{
  background:color-mix(in srgb, var(--primary) 88%, black 12%);
}
.window-controls-bottom .btn-add-window:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Blue outline secondary button */
.window-controls-bottom .btn-group-selected{
  background:transparent;
  color:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 60%, var(--border) 40%);
}
.window-controls-bottom .btn-group-selected:hover{
  background:color-mix(in srgb, var(--primary) 10%, transparent);
}
.window-controls-bottom .btn-group-selected:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Destructive */
.window-controls-bottom .btn-delete-selected{
  background:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 60%, var(--border) 40%);
  color:#fff;
}
.window-controls-bottom .btn-delete-selected:hover{
  background:color-mix(in srgb, var(--danger) 88%, black 12%);
}
.window-controls-bottom .btn-delete-selected:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Select-all checkbox styling */
.select-all-checkbox{
  width:18px;
  height:18px;
  cursor:pointer;
}

/* Inline feedback below the windows list (used for group assignment confirmations) */
.windows-inline-notice{
  margin:12px 10px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--primary) 10%, var(--surface-2) 90%);
  color:var(--text);
  font-weight:700;
  font-size:14px;
  line-height:1.25;
  display:none;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .28s ease, transform .28s ease;
}
.windows-inline-notice.show{
  display:block;
  opacity:1;
  transform:translateY(0);
}
.windows-inline-notice.fade{
  opacity:0;
  transform:translateY(-2px);
}
/* =========================
   Main Action Buttons
   ========================= */
.main-actions{
  display:flex;
  gap:15px;
  margin-top:25px;
  padding-top:20px;
  border-top:1px solid var(--border);
}

/* Mobile: keep primary actions within easy thumb reach */


/* NOTE: original .btn-optimize is intentionally hidden below (behavior kept) */
.btn-optimize,
.btn-clear{
  flex:1;
  padding:14px 20px;
  font-size:1rem;
  font-weight:600;
  border:none;
  border-radius:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .2s, box-shadow .2s, background .2s;
  min-height:50px;
}

.btn-clear{
  background:var(--surface-3);
  color:var(--text);
  border:2px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.btn-clear:hover{ background:color-mix(in srgb, var(--surface-3) 80%, black 5%); }

.btn-error{
  background:var(--danger);
  color:white;
  margin-top:15px;
  padding:15px;
  border:none;
  border-radius:8px;
  font-size:1.1rem;
  font-weight:700;
  cursor:pointer;
}

/* Optimize Roll Size button (active primary action in your current UI) */
.btn-optimize-roll{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:white;
  border:none;
  padding:14px 18px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  justify-content: center;
  font-size:16px;
  transition:transform .2s, box-shadow .2s, background .2s;
  display:flex;
  align-items:center;
  gap:8px;
}

.btn-optimize-roll:hover{
  background:linear-gradient(135deg,var(--primary-dark),color-mix(in srgb, var(--primary-dark) 70%, black 30%));
  transform:translateY(-2px);
  box-shadow:0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* =========================
   Results
   ========================= */
.results-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:15px;
  border-bottom:1px solid var(--border);
}

.results-title{
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
}

.results-title h2{
  margin:0;
  font-size:1.5rem;
  color:var(--text);
}

.btn-print-main{
  background:color-mix(in srgb, var(--muted) 70%, black 30%);
  color:white;
  border:none;
  padding:10px 20px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:transform .2s, background .2s;
  white-space:nowrap;
}

.btn-print-main:hover{
  background:color-mix(in srgb, var(--muted) 60%, black 40%);
  transform:translateY(-1px);
}

.results-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin:20px 0;
}

.result-stat{
  background:var(--surface-2);
  padding:20px;
  border-radius:10px;
  text-align:center;
  border:1px solid var(--border);
  color:var(--text);
}

.stat-highlight{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:white;
  border:none;
}

.stat-label{
  display:block;
  font-size:.85rem;
  font-weight:700;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.stat-value{
  font-size:1.8rem;
  font-weight:900;
  margin-bottom:5px;
}

.result-stat small{ font-size:.8rem; opacity:.9; }

.savings-notice,
.rotation-notice{
  background:var(--notice-bg);
  padding:15px;
  border-radius:8px;
  margin-bottom:20px;
  border-left:4px solid var(--notice-left);
  color:var(--text);
}

/* =========================
   Cut Sheet (collapsible section)
   ========================= */
.cut-sheet-section{
  margin:20px 0;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}

.cut-sheet-toggle{
  background:var(--surface-2);
  padding:15px;
  margin:0;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
  user-select:none;
}

.cut-sheet-toggle:hover{ background:var(--surface-3); }

.toggle-icon{
  font-size:12px;
  color:var(--muted);
  display:inline-block;
  opacity:.85;
}

.cut-sheet{
  padding:20px;
  background:var(--surface);
}

.cut-sheet-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}

.cut-sheet-header h3{ margin:0; cursor:pointer; }

.btn-print-cut-sheet{
  background:color-mix(in srgb, var(--muted) 70%, black 30%);
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:4px;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
}

.btn-print-cut-sheet:hover{ background:color-mix(in srgb, var(--muted) 60%, black 40%); }

.cut-instruction{
  background:var(--surface);
  border:2px solid var(--border);
  padding:15px;
  border-radius:8px;
  margin-bottom:10px;
}

.cut-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.rotated-badge{
  background:var(--warning);
  color:white;
  padding:4px 8px;
  border-radius:4px;
  font-size:.8rem;
  font-weight:700;
}

.cut-details{ color:var(--muted); margin-bottom:5px; }

.cut-position{
  font-family:monospace;
  background:var(--surface-2);
  padding:8px;
  border-radius:4px;
  margin-top:5px;
}

.cut-dimensions{ font-size:.7rem; line-height:1.2; }
.cut-group{
  font-size:.7rem;
  font-weight:800;
  margin-top:2px;
  background:color-mix(in srgb, var(--surface) 85%, transparent);
  padding:1px 4px;
  border-radius:3px;
}
.cut-rotated{ font-size:.8rem; margin-top:2px; }

/* =========================
   Cut Diagram (collapsible section)
   ========================= */
.cut-diagram-section{
  margin:20px 0;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}

.cut-diagram-toggle{
  background:var(--surface-2);
  padding:15px;
  margin:0;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
  user-select:none;
  text-align:left; /* formerly centered toggle */
}

.cut-diagram-toggle:hover{ background:var(--surface-3); }

.diagram-toggle-icon{
  font-size:12px;
  color:var(--muted);
}

.cut-diagram-content{
  padding:20px;
  background:var(--surface);
}

/* Container inside diagram content */
.cut-diagram-container{
  margin:30px 0;
  padding:20px;
  background:var(--surface);
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  border:1px solid var(--border);
}

.cut-diagram-container h3{
  margin-bottom:15px;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
}

.diagram-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
  padding:10px;
  background:var(--surface-2);
  border-radius:6px;
  font-size:.9rem;
  color:var(--text);
}

.diagram-info span{
  display:flex;
  align-items:center;
  gap:5px;
}

@media (max-width: 768px){
  .diagram-info{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}

.diagram-wrapper{
  position:relative;
  margin:20px 0;
  overflow:auto;
  border:2px solid color-mix(in srgb, var(--text) 55%, transparent);
  border-radius:8px;
  background:var(--surface-2);
}

.film-roll-diagram{
  position:relative;
  margin:0 auto;
  background:repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--surface-3) 70%, white 30%),
    color-mix(in srgb, var(--surface-3) 70%, white 30%) 10px,
    color-mix(in srgb, var(--surface-3) 80%, black 5%) 10px,
    color-mix(in srgb, var(--surface-3) 80%, black 5%) 20px
  );
  overflow:visible;
  min-height:200px;
}

.film-outline{
  position:absolute;
  inset:0;
  border:2px dashed color-mix(in srgb, var(--muted) 70%, transparent);
  pointer-events:none;
}

.cut-rectangle{
  position:absolute;
  box-sizing:border-box;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s, box-shadow .2s, opacity .2s;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,0.10);
}

.cut-rectangle:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,0.20);
  z-index:10;
}

.cut-label{
  text-align:center;
  padding:5px;
  font-size:.8rem;
  color:var(--text);
  background:rgba(255,255,255,0.90);
  border-radius:3px;
  line-height:1.2;
  max-width:90%;
}

.waste-area{
  position:absolute;
  background:repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--danger) 10%, transparent),
    color-mix(in srgb, var(--danger) 10%, transparent) 5px,
    color-mix(in srgb, var(--danger) 18%, transparent) 5px,
    color-mix(in srgb, var(--danger) 18%, transparent) 10px
  );
  border:1px dashed color-mix(in srgb, var(--danger) 55%, transparent);
  opacity:.7;
  display:flex;
  align-items:center;
  justify-content:center;
}

.waste-label{
  background:color-mix(in srgb, var(--danger) 85%, black 15%);
  color:white;
  padding:2px 6px;
  border-radius:3px;
  font-size:.7rem;
  font-weight:700;
}

/* Tooltip */
.cut-rectangle::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  background:color-mix(in srgb, var(--text) 85%, black 15%);
  color:white;
  padding:5px 10px;
  border-radius:4px;
  font-size:.8rem;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index:100;
}

.cut-rectangle:hover::after{ opacity:1; }

.diagram-controls{
  display:flex;
  gap:10px;
  margin-top:15px;
  justify-content:center;
  flex-wrap:wrap;
}

.btn-zoom,
.btn-reset{
  padding:8px 15px;
  border:none;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s;
}

.btn-zoom{
  background:var(--primary);
  color:white;
}
.btn-zoom:hover{ background:var(--primary-dark); }

.btn-reset{
  background:var(--muted);
  color:white;
}
.btn-reset:hover{ background:color-mix(in srgb, var(--muted) 70%, black 30%); }

.btn-print-diagram{
  padding:8px 15px;
  border:none;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s;
  background:var(--primary-dark);
  color:white;
}
.btn-print-diagram:hover{
  background:color-mix(in srgb, var(--primary-dark) 75%, black 25%);
}

@media (max-width: 768px){
  .cut-diagram-container{
    padding:12px;
    margin:16px 0;
  }
  .diagram-controls{
    justify-content:stretch;
  }
  .diagram-controls .btn-zoom,
  .diagram-controls .btn-reset,
  .diagram-controls .btn-print-diagram{
    flex:1 1 calc(50% - 10px);
    min-width:140px;
  }
  .cut-label{
    font-size:.72rem;
    padding:4px;
  }
}

.cut-legend{
  margin-top:20px;
  padding:15px;
  background:var(--surface-2);
  border-radius:8px;
  color:var(--text);
}

.cut-legend h4{ margin-bottom:10px; color:var(--text); }

.legend-items{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
}

.legend-item{ display:flex; align-items:center; gap:10px; }

.legend-color{
  width:20px;
  height:20px;
  border-radius:4px;
  border:2px solid rgba(0,0,0,0.10);
}

.waste-color{
  background:repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--danger) 18%, white 82%),
    color-mix(in srgb, var(--danger) 18%, white 82%) 5px,
    color-mix(in srgb, var(--danger) 30%, white 70%) 5px,
    color-mix(in srgb, var(--danger) 30%, white 70%) 10px
  );
}

/* Legacy diagram toggle button (intentionally removed) */
.cut-diagram-toggle-btn{ display:none; }

/* =========================
   Modal
   ========================= */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:20px;
}

.modal-content{
  background:var(--surface);
  border-radius:12px;
  padding:30px;
  max-width:500px;
  width:100%;
  max-height:80vh;
  overflow:auto;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
}
.pfs-modal-title{
  font-weight:900;
  font-size:18px;
  margin-bottom:8px;
}
.pfs-modal-body{
  color:var(--text);
  opacity:0.85;
  line-height:1.45;
  margin-bottom:12px;
}
.pfs-modal-input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--input-border);
  background:#ffffff;
  color:#111827;
  margin-bottom:12px;
}
.pfs-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* Wider modals (viewers / settings) */
.modal-content.modal-content-wide{
  max-width: 980px;
}

/* =========================
   Job Outputs (Results)
   ========================= */
.job-outputs{
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px;
}

.job-outputs h3{
  margin: 0 0 12px;
  color: var(--text);
}

.job-output-buttons{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}


.btn-output{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}

.btn-output:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
}

.btn-output-primary{
  background: color-mix(in srgb, var(--primary) 16%, var(--surface) 84%);
  border-color: color-mix(in srgb, var(--border) 65%, var(--primary) 35%);
}

.job-output-note{ margin-top: 10px; color: var(--muted); }

/* =========================
   Modal buttons + layout
   ========================= */
.btn-primary,
.btn-secondary{
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--border);
}

.btn-primary{
  background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
  color: var(--text);
}

.btn-secondary{
  background: var(--surface);
  color: var(--text);
}

.fy-muted{ color: var(--muted); }

/* =========================
   Viewer modal
   ========================= */
.fy-viewer{ display: flex; flex-direction: column; gap: 12px; }
.fy-viewer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.fy-viewer-header h3{ margin:0; color: var(--text); }
.fy-viewer-actions{ display:flex; gap:8px; flex-wrap: wrap; justify-content:flex-end; }
.fy-viewer-body{ min-height: 80px; }
.fy-viewer-body .cut-diagram-container{ margin-top: 0; }

/* =========================
   Settings modal
   ========================= */
.fy-settings{ display:flex; flex-direction: column; gap: 12px; }
.fy-settings-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.fy-settings-header h3{ margin:0; }
.fy-settings-close{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.fy-tabs{ display:flex; gap: 8px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--border); border-radius: 12px; }
.fy-tabbtn{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
}
.fy-tabbtn.active{
  border-color: color-mix(in srgb, var(--border) 60%, var(--primary) 40%);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface) 88%);
}
.fy-tab{ display:none; }
.fy-tab.active{ display:block; }

.fy-section{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface);
}
.fy-section h4{ margin: 0 0 10px; }
.fy-form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fy-field label{ display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 800; }
.fy-field input,
.fy-field textarea,
.fy-field select{
  width:100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.fy-field textarea{ min-height: 90px; resize: vertical; }

.fy-list{ display:flex; flex-direction:column; gap: 10px; }
.fy-row{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.fy-row > *{ flex: 1 1 auto; }
.fy-row .fy-tight{ flex: 0 0 auto; }
.fy-mini{ font-size: 12px; color: var(--muted); }
.fy-error{ color: #ef4444; }

.fy-film{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
}
.fy-film-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.fy-film-title{ font-weight: 900; }
.fy-icon-btn{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.fy-settings-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-top: 6px;
}
.fy-settings-status{ color: var(--muted); font-weight: 800; }

/* =========================
   Quote modal
   ========================= */
.fy-quote{ display:flex; flex-direction: column; gap: 12px; }
.fy-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.fy-sub{ color: var(--muted); font-weight: 800; font-size: 12px; }
.fy-close{
  /* Make the close X pop (it was blending into the modal background) */
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(148,163,184,.10);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.fy-close:hover{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
  transform: translateY(-1px);
}
.fy-close:active{ transform: translateY(0); }
.fy-close:focus-visible{ outline: 2px solid rgba(37,99,235,.55); outline-offset: 2px; }
.fy-card{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface);
  margin-bottom: 12px;
}
.fy-card-title{ font-weight: 900; margin-bottom: 10px; color: var(--text); }
.fy-form-row{ display:flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.fy-form-row label{ font-size: 12px; font-weight: 900; color: var(--muted); }
.fy-form-row input,
.fy-form-row select{
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.fy-inline{ flex-direction: row; align-items:center; justify-content:space-between; }
.fy-check{ display:flex; align-items:center; gap: 10px; color: var(--text); font-weight: 900; }
.fy-hint{ color: var(--muted); font-size: 12px; font-weight: 700; }
.fy-actions{ display:flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.fy-addons{ display:flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.fy-addon-row{ display:flex; gap: 10px; align-items:center; }
.fy-addon-row input{ flex: 1 1 auto; }
.fy-addon-row .fy-icon-btn{ flex: 0 0 auto; }
.fy-summary{ position: sticky; top: 10px; }
.fy-quote-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}
/* Force single-column stacking when requested */
.fy-quote-grid.fy-quote-stack{ grid-template-columns: 1fr; }

.fy-quote-card{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface);
}
.fy-quote-card h4{ margin: 0 0 10px; }
.fy-btn{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}
.fy-btn:hover{ border-color: color-mix(in srgb, var(--border) 65%, var(--primary) 35%); }
.fy-btn-secondary{ background: var(--surface); }
.fy-kv{ display:flex; justify-content:space-between; gap: 10px; margin: 6px 0; }
.fy-kv strong{ color: var(--text); }
.fy-kv span{ color: var(--muted); }
.fy-divider{ height:1px; background: var(--border); margin: 10px 0; }


.suggestion-modal{ text-align:center; }
.suggestion-modal h3{ color:var(--text); margin-bottom:20px; }

.width-comparison{
  display:flex;
  flex-direction:column;
  gap:15px;
  margin:20px 0;
}

.width-option{
  border:2px solid var(--border);
  border-radius:10px;
  padding:15px;
  text-align:left;
  position:relative;
  transition:transform .2s, border-color .2s;
  background:var(--surface);
}

.width-option:hover{
  border-color:color-mix(in srgb, var(--border) 75%, black 10%);
  transform:translateY(-2px);
}

.best-choice{
  border-color:var(--success);
  background:color-mix(in srgb, var(--success) 8%, transparent);
}

.current-choice{ border-color:var(--primary); }

.width-size{
  font-size:1.5rem;
  font-weight:900;
  color:var(--text);
  margin-bottom:10px;
}

.width-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.width-stats .stat{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.width-stats .label{ font-size:.85rem; color:var(--muted); }
.width-stats .value{ font-weight:700; color:var(--text); }
.best-value{ color:var(--success); font-weight:900; }

.best-badge,
.current-badge{
  position:absolute;
  top:-10px;
  right:15px;
  padding:4px 12px;
  border-radius:20px;
  font-size:.75rem;
  font-weight:900;
  text-transform:uppercase;
  color:white;
}

.best-badge{ background:var(--success); }
.current-badge{ background:var(--primary); }

.suggestion-action{
  margin-top:25px;
  padding-top:20px;
  border-top:1px solid var(--border);
}

.suggestion-action p{ margin-bottom:15px; color:var(--muted); }

.btn-apply{
  background:linear-gradient(135deg,var(--success),color-mix(in srgb, var(--success) 75%, black 25%));
  color:white;
  border:none;
  padding:12px 30px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  font-size:1rem;
  transition:transform .2s, box-shadow .2s;
}

.btn-apply:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px color-mix(in srgb, var(--success) 30%, transparent);
}

.btn-close-suggestion{
  background:var(--muted);
  color:white;
  border:none;
  padding:10px 25px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  margin-top:20px;
  transition:background .2s;
}

.btn-close-suggestion:hover{
  background:color-mix(in srgb, var(--muted) 70%, black 30%);
}

/* =========================
   Footer
   ========================= */
footer{
  background:var(--surface);
  border-radius:16px;
  padding:24px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}

.footer-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-bottom:20px;
}


.footer-left h3{ color:var(--text); margin-bottom:10px; }
.footer-right p{ margin-bottom:10px; color:var(--muted); }

.footer-bottom{
  text-align:center;
  padding-top:20px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.9rem;
}

/* =========================
   Loading / Placeholder / Error
   ========================= */
#loading{ text-align:center; padding:40px; }

.loader{
  border:4px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-top:4px solid var(--primary);
  border-radius:50%;
  width:50px;
  height:50px;
  animation:spin 1s linear infinite;
  margin:0 auto 20px;
}

@keyframes spin{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

.placeholder{
  text-align:center;
  padding:34px 16px;
  color:var(--muted);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--surface-2) 85%, white 15%),
    var(--surface-2)
  );
  border:1px solid var(--border);
  border-radius:16px;
}

.placeholder-icon{
  font-size:4rem;
  margin-bottom:20px;
  opacity:.5;
}

.error-message{
  background:linear-gradient(135deg, rgba(254,226,226,.9), rgba(254,202,202,.9));
  border-left:4px solid var(--danger);
  padding:20px;
  border-radius:16px;
}

.error-message h3{ color:var(--danger); margin-bottom:10px; }

/* =========================
   Responsive
   ========================= */


/* Mobile number input styling */
input[type="number"]{ -webkit-appearance:none; -moz-appearance:textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }

/* =========================
   Intentional Deactivation / Behavior Overrides
   (kept from your working CSS)
   ========================= */

/* Hide old group management section (intentionally disabled) */
.group-management{ display:none !important; }

/* Hide film note + duplicate button (intentional) */
.film-note{ display:none !important; }
.btn-duplicate{ display:none !important; }

/* Fix duplicate header issue (keep) */
.results-section h2{ display:none; }
.results-section .results-header h2{ display:block; }

/* Hide print button from results header (you moved it to cut sheet header) */
.results-title .btn-print-main{ display:none; }

/* Hide rotation notice in diagram */
.rotation-notice{ display:none !important; }

/* Ensure groups summary starts collapsed */
#groupsSummaryContainer .groups-content{ display:none; }
#groupsSummaryContainer.active .groups-content{ display:block; }
#groupsSummaryContainer .groups-toggle-icon{ transform:rotate(0deg); }
#groupsSummaryContainer.active .groups-toggle-icon{ transform:rotate(90deg); }

/* Hide old optimize button (your UI uses .btn-optimize-roll now) */
.btn-optimize{ display:none; }

/* Keep toggle arrows visible (your earlier CSS accidentally hid them) */
.icon,
h2::before, h3::before,
.btn::before{
  display:none !important;
}
.toggle-icon,
.groups-toggle-icon{
  display:inline-block !important;
  opacity:.85;
  font-size:.85rem;
}

/* Header menu (gear dropdown) */
.header-menu{ position:relative; z-index: 2000; }
.header-menu{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.gear-btn,
.menu-btn{
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid var(--border);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  color:inherit;
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .12s ease, transform .12s ease, box-shadow .12s ease;
}
.gear-btn:hover,
.menu-btn:hover{ background:var(--surface-3); box-shadow:0 10px 24px rgba(0,0,0,.10); transform:translateY(-1px); }
.gear-btn:active,
.menu-btn:active{ transform:translateY(0); box-shadow:none; }

.bug-btn{
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 40%, var(--border) 60%);
  color:color-mix(in srgb, var(--danger) 88%, #ffffff 12%);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .12s ease, transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.menu-btn .btn-icon,
.bug-btn .btn-icon{
  font-size:18px;
  line-height:1;
  display:none;
}
.menu-btn .btn-label,
.bug-btn .btn-label{
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.bug-btn:hover{
  background:color-mix(in srgb, var(--danger) 18%, var(--surface));
  border-color:color-mix(in srgb, var(--danger) 58%, var(--border));
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  transform:translateY(-1px);
}
.bug-btn:active{ transform:translateY(0); box-shadow:none; }

.pfs-bug-modal{
  position:fixed;
  inset:0;
  background:rgba(10,14,22,.55);
  backdrop-filter: blur(3px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:2300;
}
.pfs-bug-modal.open{ display:flex; }
.pfs-bug-modal-card{
  width:min(680px, 100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
  padding:18px 18px 16px;
  position:relative;
}
.pfs-bug-modal-card h3{
  margin:0 0 14px;
  font-size:1.05rem;
}
.pfs-bug-close{
  position:absolute;
  right:10px;
  top:8px;
  border:none;
  background:transparent;
  color:inherit;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  opacity:.8;
}
.pfs-bug-close:hover{ opacity:1; }
.pfs-bug-form{
  display:grid;
  gap:8px;
}
.pfs-bug-form label{
  font-size:.86rem;
  font-weight:600;
}
.pfs-bug-form input[type="text"],
.pfs-bug-form input[type="file"],
.pfs-bug-form select,
.pfs-bug-form textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text);
  padding:9px 10px;
}
.pfs-bug-form textarea{
  resize:vertical;
  min-height:76px;
}
.pfs-bug-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:500 !important;
}
.pfs-bug-checkbox input{ margin:0; }
.pfs-bug-form .req{ color:var(--danger); }
.pfs-bug-help{
  font-size:.78rem;
  color:var(--text-muted);
  margin-top:-2px;
}
.pfs-bug-status{
  min-height:20px;
  font-size:.86rem;
  color:var(--text-muted);
}
.pfs-bug-status.error{ color:var(--danger); }
.pfs-bug-status.ok{ color:#16a34a; }
.pfs-bug-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:2px;
}
.menu-dropdown{
  position:absolute;
  right:0;
  top:100%;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
  min-width:190px;
  box-shadow:var(--shadow);
  z-index: 2001;
  backdrop-filter: blur(10px);
}

@media (max-width: 640px){
  header{ padding:10px 12px; }
  .app-title-wrap{ align-items:center; justify-content:space-between; gap:10px; }
  .app-title-text h1{ font-size:1.15rem; white-space:nowrap; }
  .app-title-text p{ font-size:.75rem; white-space:nowrap; }
  .app-logo{ display:none; }
  .header-menu{ margin-left:auto; }
  .menu-dropdown{ right:0; top:44px; }
  .pfs-plan-badge{ display:none !important; }
}
.menu-dropdown button{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 10px;
  border:none;
  background:none;
  cursor:pointer;
  color:var(--text);
}
.menu-dropdown button:hover{ background:var(--surface-3); border-radius:10px; }

.menu-dropdown .menu-link{
  display:block;
  width:100%;
  text-align:left;
  padding:8px;
  border:none;
  background:none;
  cursor:pointer;
  color:var(--text);
  text-decoration:none;
 }

.menu-dropdown .menu-link:hover{
  background:rgba(255,255,255,.06);
  border-radius:6px;
 }

.menu-divider {
  height: 1px;
  margin: 10px 0;
  background: rgba(148, 163, 184, 0.25);
}

.menu-theme-row {
  display: grid;
  gap: 6px;
  padding: 6px 8px;
}

.menu-theme-label {
  font-size: 0.85rem;
  opacity: 0.9;
  font-weight: 600;
}

.menu-theme-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: transparent;
  color: inherit;
}

/* ---------------------------
   MOBILE-FIRST: prevent overflow
   - We control the window table layout via CSS vars
   - Group column removed (rows are color-coded)
--------------------------- */

/* Desktop / default */
:root {
  --window-cols: 40px 60px minmax(0, 1fr) minmax(0, 1fr) 56px;
  --window-gap: 8px;
}


/* Force the "Window Dimensions" header to truly center */
.section-header-centered {
  text-align: center;
}

.section-header-centered h2 {
  display: block !important;      /* overrides .card h2 { display:flex } */
  width: 100%;
  text-align: center !important;
  margin: 0 auto 5px auto;
}

/* ---------------------------------------
   Mobile input focus zoom fix (iOS Safari)
   Prevents auto-zoom by using >= 16px font
--------------------------------------- */


html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ---------------------------------------
   Mobile framing / centering fix
--------------------------------------- */


/* =========================
   Summary (Groups -> Windows)
   ========================= */

.groups-summary-container.active {
  margin-top: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 14px;
  overflow: hidden;
}

.summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.summary-header h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.2px;
}

.summary-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.summary-groups {
  padding: 8px;
  display: grid;
  gap: 8px;
}

.summary-group {
  border: 1px solid var(--border);
  border-left: 4px solid transparent;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
}

.summary-group[open] {
  box-shadow: var(--shadow);
}

/* Hide default <details> marker */
.summary-group > summary {
  list-style: none;
}
.summary-group > summary::-webkit-details-marker {
  display: none;
}

.summary-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}

.summary-group-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.summary-group-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
  flex: 0 0 auto;
}

.summary-group-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.group-rename-btn {  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  opacity: 0.75;
  border-radius: 10px;
  padding: 4px 8px;
  line-height: 1;
  cursor: pointer;
}

.group-rename-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  opacity: 1;
}

.group-rename-btn:active {
  transform: translateY(1px);
}


.summary-group-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.summary-pill {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}

.summary-chevron {
  font-size: 14px;
  color: var(--muted);
  transition: transform 160ms ease;
}

.summary-group[open] .summary-chevron {
  transform: rotate(180deg);
}

.summary-group-body {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.summary-table {
  display: grid;
  gap: 6px;
}

.summary-row {
  display: grid;
  grid-template-columns: 60px 1fr 110px 110px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 13px;
}

.summary-row.summary-head {
  background: var(--surface-3);
  font-weight: 700;
  color: var(--text);
}

.summary-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 6px 2px;
}


/* styling for load job modal */
.job-pick{ min-width: min(560px, 92vw); }
.job-pick-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.job-pick-header h3{ margin:0; font-weight:900; }
.job-pick-close{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}

.job-pick-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: min(55vh, 520px);
  overflow:auto;
  padding-right:6px;
}

.job-pick-item{
  text-align:left;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  transition:transform .12s, filter .12s;
}
.job-pick-item:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.job-pick-title{ font-weight:900; }
.job-pick-meta{ color:var(--muted); font-size:.85rem; margin-top:2px; }

.job-pick-footer{ display:flex; justify-content:flex-end; margin-top:12px; }
.job-pick-cancel{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}

/* Prevent horizontal scrolling in modal content */
.modal-content{
  max-width: min(640px, 94vw);
  width: min(640px, 94vw);
  overflow-x: hidden;
}

/* Load Job picker */
.job-pick{
  width: 100%;
  max-width: 640px;
}

.job-pick-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.job-pick-header h3{
  margin:0;
  font-weight:900;
}

.job-pick-close{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}

/* Search */
.job-pick-search{
  margin-bottom:10px;
}

.job-pick-search input{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid var(--input-border);
  border-radius:10px;
  background:var(--input-bg);
  color:var(--input-text);
}

.job-pick-search input:focus{
  outline:none;
  border-color:var(--input-border-focus);
  box-shadow:var(--focus-ring);
}

/* List */
.job-pick-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: min(55vh, 520px);
  overflow-y:auto;
  overflow-x:hidden;     /* <-- key */
  padding-right:6px;
}

.job-pick-item{
  text-align:left;
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  transition:transform .12s, filter .12s;
}

.job-pick-item:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

.job-pick-title{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;   /* <-- prevents long names forcing width */
}

.job-pick-meta{
  color:var(--muted);
  font-size:.85rem;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;   /* <-- prevents sideways scrolling */
}

.job-pick-empty{
  color:var(--muted);
  padding:10px 2px;
}

.job-pick-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}

.job-pick-cancel{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}


/* Job manager additions (tabs + row actions) */
.job-pick-tabs{
  display:flex;
  gap:8px;
  margin: 4px 0 12px 0;
}

.job-pick-tab{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
}

.job-pick-tab.is-active{
  background: color-mix(in srgb, var(--primary) 14%, var(--surface) 86%);
}

.job-pick-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
}

.job-pick-main{ min-width:0; }
.job-pick-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.btn-mini{
  padding:6px 10px;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.btn-mini.btn-danger{
  background: color-mix(in srgb, var(--danger) 16%, var(--surface) 84%);
}


.app-title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.app-logo{
  height:44px;
  width:auto;
  flex:0 0 auto;
}

.app-title-text h1{
  margin:0;
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.1;
}
.app-title-text p{
  margin:2px 0 0 0;
  opacity:.85;
  font-size:.92rem;
}

.job-actions-centered{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

/* ================================
   BUTTON ROWS: MOBILE-FIRST TOOLBARS (no overflow / no tiny buttons)
   - Desktop/tablet: wraps naturally
   - Phones: becomes a scrollable "chip" row
   ================================ */

.job-actions.job-actions-centered,
.window-controls-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
}

/* Primary emphasis: first job action (New Job) */
.job-actions.job-actions-centered button:first-child{
  background: var(--primary);
  color:#fff;
  border:1px solid color-mix(in srgb, var(--primary) 55%, var(--border) 45%);
}

/* Phone toolbar: horizontal scrolling chips (fast to tap, no wrap chaos) */

/* =========================================
   WINDOWS LIST: GROW DOWN (NO INTERNAL SCROLLBARS)
   ========================================= */

/* The list itself should never scroll; let the page scroll */
#windowsList,
.windows-list{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* If the wrapper is forcing scrollbars, disable them too */
.windows-section,
.windows-card,
.job-details.windows-card{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Prevent horizontal scrollbar caused by grid/table widths */
.window-row,
.table-header{
  width: 100%;
  box-sizing: border-box;
}

/* If any cell content causes overflow, allow wrapping or shrink */
.window-row input{
  max-width: 100%;
  box-sizing: border-box;
}

/* Safety: kill any accidental horizontal scroll */
.windows-section,
.windows-card,
#windowsList,
.windows-list{
  overflow-x: hidden !important;
}

/* =========================
   Collapsible Cards (Job Details / Windows / Summary)
   ========================= */
details.collapsible-card > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
details.collapsible-card > summary::-webkit-details-marker {
  display: none;
}

details.collapsible-card .collapse-indicator {
  font-size: 0.95rem;
  color: var(--muted);
  transition: transform .15s ease;
}

/* Closed: chevron points right-ish */
details.collapsible-card:not([open]) .collapse-indicator {
  transform: rotate(-90deg);
}

/* Small spacing polish so collapsed headers look clean */
details.collapsible-card > summary.job-details-header {
  margin-bottom: 10px;
}
details.collapsible-card:not([open]) > summary.job-details-header {
  margin-bottom: 0;
}

/* =========================
   Customer Grid Layout
   Desktop: Name (full)
            Street | City | State | Zip
            Phone (left) | Email (right)
   Mobile:  Name
            Street
            City | State
            Zip
            Phone
            Email
   ========================= */
.job-details-grid.customer-grid{
  display:grid;
  gap:12px 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.job-details-grid.customer-grid .field-customer{ grid-column: 1 / span 3; }
.job-details-grid.customer-grid .field-phone{ grid-column: 4 / span 3; }

.job-details-grid.customer-grid .field-street{ grid-column: 1 / span 3; }
.job-details-grid.customer-grid .field-email{ grid-column: 4 / span 3; }

.job-details-grid.customer-grid .field-city{ grid-column: 1 / span 3; }
.job-details-grid.customer-grid .field-state{ grid-column: 4 / span 1; }
.job-details-grid.customer-grid .field-zip{ grid-column: 5 / span 2; }

/* tiny UX improvements for State */
#jobState {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* Summary header inline meta */
.summary-header-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.summary-meta-inline{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.2;
}


/* Header right-side meta (Job Details / Windows / Summary) */
.header-right{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

.meta-inline{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 46ch;
}


/* Roll size selected (shown above result stats) */
.roll-size-selected{
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
}

.roll-size-label{
  color: var(--muted);
  font-weight: 600;
}

.roll-size-value{
  font-size: 1rem;
}


.cut-rectangle .cut-label{
  font-size: 14px;
  line-height: 1.15;
}

.cut-rectangle .cut-label strong{
  font-size: 16px;
}

/* =========================
   Settings (in-page)
   ========================= */
.settings-page{ margin-top: 12px; }
.settings-card{ padding: 16px; }
.settings-header-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.settings-title{ margin: 0; }
.settings-subtitle{ margin: 4px 0 0; color: var(--muted); font-weight: 800; font-size: 12px; }
.btn-secondary{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.fy-tabbar{ display:flex; gap: 8px; flex-wrap:wrap; margin: 8px 0 14px; }
.fy-tabbar-nowrap{ flex-wrap: nowrap; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.fy-tabbar-nowrap::-webkit-scrollbar{ height: 6px; }
.fy-tabbar-nowrap::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--border) 60%, transparent); border-radius: 999px; }
.fy-tabbar-nowrap .fy-tab-btn{ white-space: nowrap; }

.fy-tab-btn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}
.fy-tab-btn.active{
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border) 45%);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface) 84%);
}
.fy-tab-panel{ display:none; }
.fy-tab-panel.active{ display:block; }

.fy-wysiwyg-toolbar{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--surface);
}
.fy-wysiwyg-btn{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}
.fy-wysiwyg{
  min-height: 120px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.fy-wysiwyg:empty:before{ content: attr(data-placeholder); color: var(--muted); }


/* ==================== JOB MANAGER (PIPELINE) ==================== */
.jobmgr{ width:min(1100px, 94vw); }
.jobmgr-top{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
.jobmgr-title{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.jobmgr-title-text{ font-weight:900; font-size:1.05rem; }
.jobmgr-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.jobmgr-tab{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
}
.jobmgr-tab.active{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.jobmgr-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text);
  font-size:.8rem;
  padding:0 6px;
}
.jobmgr-controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.jobmgr-search{
  flex:1 1 420px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.jobmgr-sort{
  flex:0 0 auto;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.jobmgr-footer{ display:flex; justify-content:flex-end; margin-top:12px; }

.job-board{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:12px;
}


.job-col{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:260px;
}
.job-col-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.job-col-title{ font-weight:900; }
.job-col-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text);
  font-size:.85rem;
  padding:0 8px;
}
.job-col-list{ padding:10px; display:flex; flex-direction:column; gap:10px; }
.job-col-empty{ color:var(--muted); font-size:.9rem; padding:8px; border:1px dashed var(--border); border-radius:12px; }

.job-card{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  padding:10px 10px 8px 10px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.job-card-name{ font-weight:900; }
.job-card-meta{ display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; }
.job-card-when{ color:var(--muted); font-size:.85rem; }
.job-card-sub{ color:var(--muted); font-size:.85rem; margin-top:6px; }

.job-status-pill{
  display:inline-flex; align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 8px;
  font-size:.78rem;
  color:var(--text);
  background:color-mix(in srgb, var(--surface-2) 75%, transparent);
}

.job-card-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

.job-status-select{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:10px;
  padding:6px 8px;
  outline:none;
}

/* Archived list */
.job-arch-list{ display:flex; flex-direction:column; gap:10px; }
.job-arch-row{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.job-arch-title{ font-weight:900; }
.job-arch-meta{ color:var(--muted); font-size:.85rem; margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.job-arch-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }


/* ==================== JOB MANAGER PAGE (LIST VIEW) ==================== */
.jobmgr-controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.jobmgr-viewtoggle{ display:flex; gap:6px; }
.jobmgr-viewbtn{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
  line-height:1;
}
.jobmgr-viewbtn.active{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
}
.job-list{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  overflow:hidden;
}
.job-list-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-weight:800;
}
.job-list-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.job-list-row:last-child{ border-bottom:none; }
.job-list-main{ min-width:240px; }
.job-list-name{ font-weight:900; }
.job-list-meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:6px; opacity:.95; }
.job-list-sub{ opacity:.9; }
.job-list-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.job-arch{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  overflow:hidden;
}
.job-arch-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-weight:800;
}
.job-arch-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.job-arch-row:last-child{ border-bottom:none; }
.job-arch-name{ font-weight:900; }
.job-arch-meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:6px; opacity:.95; }
.job-arch-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }


/* ==================== JOB PICKER (Load Job modal) ==================== */
.jobpick{ width:100%; max-width:900px; }
.jobpick-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.jobpick-title{ font-weight:900; font-size:1.05rem; }
.jobpick-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.jobpick-tab{
  display:flex; align-items:center; gap:8px;
  border:1px solid transparent;
  background:rgba(255,255,255,.02);
  color:var(--muted);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:800;
}
.jobpick-tab.active{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:var(--text);
}
.jobpick-count{ opacity:.85; font-weight:800; }
.jobpick-controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.jobpick-search, .jobpick-status, .jobpick-sort{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
}
.jobpick-search{ flex:1 1 260px; min-width:240px; }
.jobpick-list{ display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow:auto; padding-right:4px; }
.jobpick-row{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.jobpick-row-name{ font-weight:900; }
.jobpick-row-meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:6px; opacity:.95; }
.jobpick-row-when{ opacity:.85; }
.jobpick-row-sub{ opacity:.9; }
.jobpick-row-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.jobpick-footer{ display:flex; justify-content:flex-end; margin-top:12px; }


/* Embedded Job Manager header (index.html #jobs view) */
.jobmgr-embed-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.jobmgr-embed-title{
  font-weight:900;
  font-size:1.05rem;
}


/* ==================== Quote + Job Details (Inline) ==================== */
.fy-panel-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(2,6,23,0.10);
  padding: 14px;
}

.fy-panel-header{
  display:flex;
  flex-direction:column;
  gap: 4px;
  margin-bottom: 10px;
}

.fy-panel-subtitle{
  color: var(--muted);
  font-size: 13px;
}

.fy-form-grid{
  display: grid;
  gap: 10px;
}


.fy-field label{
  display:block;
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
  margin-bottom: 6px;
}

.fy-field input, .fy-field select{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  color: var(--text);
  padding: 12px 12px;
  outline: none;
}

.fy-readonly{
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--muted));
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  padding: 12px 12px;
  color: var(--text);
  font-weight: 750;
}

.fy-help{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.fy-small{ font-size: 12px; }

.fy-check{
  display:flex;
  align-items:center;
  gap: 10px;
  user-select: none;
}

.fy-check input{ transform: scale(1.1); }

/* Quote layout */
.fy-quote-grid{
  display:grid;
  gap: 12px;
}


.fy-quote-card{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}

.fy-subtitle{
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 850;
}

.fy-addons{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-bottom: 8px;
}

.fy-addon-row{
  display:grid;
  grid-template-columns: 1fr 120px 34px auto;
  gap: 8px;
  align-items:center;
}
.fy-settings-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fy-settings-col{
  border: 1px solid rgba(42, 55, 80, 0.72);
  border-radius: 10px;
  padding: 10px;
  background: rgba(17, 26, 42, 0.28);
}
.fy-form-grid-tight{
  gap: 8px;
}
.fy-settings-row-head{
  display: grid;
  gap: 8px;
  align-items: end;
  margin: 4px 0 2px;
  color: #b4bfd1;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}
.fy-tax-row-head,
.fy-tax-rate-row{
  grid-template-columns: minmax(140px, 1fr) 64px 84px;
}
.fy-addon-preset-head,
.fy-addon-preset-row{
  grid-template-columns: minmax(140px, 1fr) 76px 96px 84px;
}
.fy-tax-row-head,
.fy-addon-preset-head{
  margin-left: 0;
  width: 100%;
}
.fy-tax-row-head > div,
.fy-addon-preset-head > div{
  position: relative;
  left: var(--settings-col-head-offset-x);
}
.fy-btn-remove-text{
  min-width: 76px;
  justify-content: center;
  white-space: nowrap;
  padding: 8px 10px;
}
.fy-saved-row{
  border: 1px solid rgba(42, 55, 80, 0.88);
  border-radius: 9px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.01)),
    #142136;
}
.fy-saved-cell{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.fy-addon-row input{
  margin: 0;
  width: 100%;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  color: var(--text);
  padding: 12px 12px;
  outline: none;
}
.fy-addon-row input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(63, 167, 255, 0.18);
}

@media (max-width: 820px){
  .fy-settings-split{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .fy-tax-row-head,
  .fy-tax-rate-row{
    grid-template-columns: minmax(120px, 1fr) 62px 74px;
  }
  .fy-addon-preset-head,
  .fy-addon-preset-row{
    grid-template-columns: minmax(120px, 1fr) 72px 86px 74px;
  }
  .fy-tax-row-head,
  .fy-addon-preset-head{
    margin-left: 0;
    width: 100%;
  }
  .fy-tax-row-head > div,
  .fy-addon-preset-head > div{
    left: var(--settings-col-head-offset-x-mobile);
  }
  .fy-btn-remove-text{
    min-width: 70px;
  }
}

.fy-summary-lines{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.fy-line{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  font-size: 13px;
}

.fy-line strong{ font-weight: 850; }

.fy-muted{ color: var(--muted); }

.fy-quote-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}

/* Buttons (Quote) */
.fy-btn{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
}

.fy-btn:hover{ filter: brightness(1.02); }

.fy-btn-primary{
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff;
  border:none;
}


.fy-btn-secondary{
  background: color-mix(in srgb, var(--surface) 90%, var(--bg));
}

.fy-btn-ghost{ background: transparent; }


/* ---- Results spacing fixes (prevents overlap with Quote panel) ---- */
.window-count-summary{
  margin: 10px 0 16px;
}
#quoteInlineMount{
  margin-top: 6px;
}
#quoteInlineMount > details{
  margin-top: 6px;
}


.fy-radio-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.fy-radio{display:inline-flex;gap:8px;align-items:center;font-weight:800;color:var(--text);}

/* ---- Optimization modal helpers ---- */
.fy-opt-modal .fy-tabbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.fy-opt-modal .fy-tab-btn{white-space:nowrap;flex:0 0 auto;}

.fy-opt-grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;}
@media (max-width: 720px){ .fy-opt-grid-2{grid-template-columns:1fr;} }

.fy-unit-toggle{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-2);}
.fy-unit-btn{appearance:none;border:0;background:transparent;color:var(--muted);font-weight:900;padding:8px 10px;cursor:pointer;}
.fy-unit-btn.active{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--text);} 

.fy-inv-item{padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);}
.fy-inv-grid{display:grid;grid-template-columns:1.1fr 1fr auto;gap:10px;align-items:end;}
@media (max-width: 720px){ .fy-inv-grid{grid-template-columns:1fr;} }


/* Force a single-column grid for specific panels */
.fy-form-grid.fy-form-stack{ grid-template-columns: 1fr !important; }


/* ===== In-page views: force single-column layout ===== */
#settingsPage .main-content,
#jobManagerPage .main-content{
  grid-template-columns: 1fr !important;
}

/* Settings should not inherit the two-column app spacing */
#settingsPage .card,
#jobManagerPage .card{
  width: 100%;
}


/* ===== Settings UI extras ===== */
.fy-toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: auto;
  margin-top: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(241, 245, 249, 0.95);
  color: #0f172a;
  font-weight: 800;
  width: fit-content;
  box-shadow: 0 8px 22px rgba(2,6,23,.12);
  z-index: 9999;
  pointer-events: none;
}

.fy-logo-preview-wrap.hidden{ display:none; }
.fy-logo-preview-wrap{ margin-top: 10px; }
.fy-logo-preview{
  max-width: 160px;
  max-height: 100px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  padding: 6px;
}

.fy-films-list{
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.fy-film-row{
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.7);
}

.fy-film-row-top{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.fy-film-namewrap{ flex: 1 1 240px; min-width: 220px; }

.fy-film-prices{
  display:grid;
  grid-template-columns: repeat(6, minmax(90px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.fy-field-compact label{
  font-size: 12px;
  opacity: 0.9;
}
.fy-field-compact input{
  padding: 10px 10px;
}


/* Settings: manual save controls */
.fy-settings-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.fy-settings-actions-right{
  display: flex;
  align-items: center;
  gap: 8px;
}
.fy-unsaved-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  font-weight: 800;
  font-size: 12px;
}

/* ------------------------------
   Settings > Films Catalog (v2)
------------------------------ */
.fy-films-catalog{
  display: block;
}
.fy-films-stack{
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.fy-films-toolbar{
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}
.fy-films-toolbar .fy-field{ min-width: 0; }

.fy-films-film-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 40vh;
  overflow: auto;
  padding-right: 2px;
  margin-bottom: 12px;
}
.fy-film-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fy-film-group-title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #b4bfd1;
  text-transform: uppercase;
  padding: 0 2px;
}
.fy-film-group-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fy-film-item{
  display:inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid rgba(42, 55, 80, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #152338;
  cursor: pointer;
  max-width: 100%;
  min-width: 220px;
}
.fy-film-item.active{
  border-color: #4a6ca5;
  box-shadow: inset 0 0 0 1px rgba(74, 108, 165, 0.45);
}

.fy-film-item-main{ min-width: 0; display:flex; flex-direction: column; gap: 2px; }
.fy-film-item-name{
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fy-film-item-meta{
  color: #b4bfd1;
  font-size: 11px;
  font-weight: 700;
  display:flex;
  align-items:baseline;
  gap: 8px;
  flex-wrap:wrap;
}
.fy-film-item-mfr{ font-weight: 900; color: var(--text); }
.fy-film-item-meta .fy-dot{ color: var(--muted); margin: 0 6px; }

.fy-film-item-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}
.fy-film-item-actions .fy-btn{
  padding: 5px 8px;
  min-height: 30px;
  font-size: 11px;
}

.fy-badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  font-weight: 800;
  font-size: 12px;
  color: var(--text);
  background: rgba(255,255,255,0.7);
}

.fy-film-editor{
  border: 1px solid rgba(42, 55, 80, 0.88);
  border-radius: 10px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #121c2d;
}
.fy-film-editor.hidden{ display:none; }

.fy-film-editor-head{ display:flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fy-film-editor-title{ font-weight: 1000; }
.fy-film-editor-actions{ display:flex; align-items: center; gap: 10px; }

.fy-film-editor-footer{ display:flex; justify-content: flex-end; margin-top: 12px; }


/* Films editor internal layout */
.fy-film-editor-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
.fy-film-meta-stack{ display:flex; flex-direction: column; gap: 10px; }

.fy-section-title{
  font-weight: 1000;
  font-size: 13px;
  letter-spacing: 0.2px;
  margin-bottom: 8px;
}

.fy-warranty-inline{
  display:flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.fy-warranty-label{
  font-weight: 900;
  color: var(--muted);
  font-size: 12px;
}
.fy-warranty-inline input[type="number"]{
  width: 92px;
  max-width: 110px;
}
.fy-warranty-lifetime{ margin-right: 8px; }
.fy-warranty-lifetime span{ font-size: 13px; }

/* Warranty sits below the 2-column film editor grid to avoid overlapping the roll sizes card */
.fy-warranty-span{ grid-column: 1 / -1; }

.fy-roll-card{
  border: 1px solid rgba(42, 55, 80, 0.88);
  border-radius: 10px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012)),
    #0f1828;
  overflow-x: auto;
}
/* In Films editor, roll sizes should feel like part of one unified container (no nested card look). */
.fy-film-editor .fy-roll-card{
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: visible;
}
/* Roll size inputs should match the app's main field styling */
.fy-roll-cell input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  outline: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.fy-roll-cell input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(63, 167, 255, 0.18);
}

.fy-check{ display:inline-flex; align-items:center; gap: 8px; font-weight: 800; }
.fy-check input{ width: 18px; height: 18px; }

/* Rolls grid */
.fy-roll-grid-header,
.fy-roll-row{ display:grid; grid-template-columns: 70px 140px 140px auto; gap: 10px; align-items: center; }

.fy-roll-grid-header{ margin-top: 10px; padding: 0 2px; color: var(--muted); font-weight: 900; font-size: 12px; }
.fy-roll-grid{ display:flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.fy-roll-row.locked input[data-field="rollWidth"]{ opacity: 0.85; }

.fy-roll-actions{ display:flex; justify-content: flex-end; }



/* =========================
   Collapsible UI polish
   ========================= */
.main-actions.main-actions-right{
  margin-top: 12px;
  padding-top: 0;
  border-top: none;
}

.main-actions.main-actions-right .btn-optimize-roll{ flex: 2; }
.main-actions.main-actions-right .btn-clear{ flex: 1; }

/* Window controls: uniform buttons, no icons */
.window-controls-bottom{
  display:flex;
  gap:10px;
}
.window-controls-bottom button{
  flex: 1;
  min-height: 44px;
}

/* Group rename icon outside the title container */
.summary-group{
  position: relative;
}
.group-rename-outside{
  position:absolute;
  left:-18px;
  top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  cursor:pointer;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 10%, transparent);
}
.group-rename-outside:hover{
  transform: translateY(-1px);
}


/* =========================
   Quote layout (main page)
   ========================= */
.fy-quote-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fy-quote-wide{
  grid-column: 1 / -1;
}


/* --- v2 polish: Results action bar + heading spacing --- */
.results-section .main-actions-right{
  margin-bottom: 10px;
}
.results-section .results-heading{
  margin-top: 10px;
}

/* --- v2 polish: Job Outputs buttons in 2-row grid like mobile --- */
.job-output-buttons{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px){
  .job-output-buttons{
    grid-template-columns: 1fr;
  }
}

/* --- v2 polish: Groups rename icon visible when collapsed + larger chevrons --- */
.summary-groups{
  padding-left: 38px; /* room for outside rename icon */
}
.summary-group-summary{
  position: relative;
  overflow: visible;
}
.summary-group-summary .group-rename-btn{
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.summary-chevron{
  font-size: 18px;
  opacity: 0.95;
}

/* =========================
   Optimization modal roll cards
   ========================= */
.roll-options{ display:flex; flex-direction:column; gap:14px; }

/* New single-roll cards (matches the screenshot style) */
.fy-rollcard{
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 18px;
  padding: 14px 14px;
  cursor:pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.fy-rollcard:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
}
.fy-rollcard.is-best{
  /* Highlight recommended choice with a subtle green tint (field-friendly) */
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border) 30%);
  background: color-mix(in srgb, var(--success) 10%, var(--surface) 90%);
}
.fy-rollcard-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.fy-rollcard-width{ font-size: 2.4rem; line-height: 1; font-weight: 1000; letter-spacing: -0.02em; }
.fy-rollcard-badge{
  position:absolute;
  right: 14px;
  top: -12px;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: .95rem;
  color:#fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow);
}
.fy-rollcard-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 26px;
}
.fy-rollstat{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.fy-rollstat-label{ color: var(--muted); font-weight: 900; }
.fy-rollstat-value{ font-weight: 1000; font-size: 1.7rem; text-align:right; line-height: 1.05; }
.fy-rollstat-unit{ margin-top: 2px; font-size: 1.05rem; font-weight: 1000; color: var(--muted); }

@media (max-width: 560px){
  .fy-rollcard{ padding: 14px; }
  .fy-rollcard-width{ font-size: 2.2rem; }
  .fy-rollstat-value{ font-size: 1.55rem; }
  .fy-rollcard-grid{ gap: 14px 18px; }
}
/* Tighten typography inside the optimization modal (Single Roll tab)
   (matches the older, smaller “choose a roll width” cards) */
.fy-opt-modal .fy-card-title{ font-size: 0.95rem; }
.fy-opt-modal .fy-rollcard-width{ font-size: 1.55rem; }
.fy-opt-modal .fy-rollstat-label{ font-size: 0.82rem; }
.fy-opt-modal .fy-rollstat-value{ font-size: 1.05rem; }
.fy-opt-modal .fy-rollstat-unit{ font-size: 0.80rem; }
.fy-opt-modal .fy-rollcard-badge{ font-size: 0.70rem; padding: 6px 10px; top: -10px; }
.fy-opt-modal .fy-rollcard-grid{ gap: 14px 18px; }

/* Keep the Build Cut Plan modal a consistent height across tabs (especially Multi-Roll). */
.fy-opt-modal .fy-opt-section{
  min-height: 520px;
}

/* Inventory tab: neater "Add a roll" inputs */
.fy-opt-modal .fy-inv-add-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.fy-opt-modal .fy-inv-field{flex:1;min-width:140px;}
.fy-opt-modal .fy-inv-field-width{flex:1.2;min-width:200px;}
.fy-opt-modal .fy-inv-field-unit{flex:0 0 auto;min-width:160px;}
.fy-opt-modal .fy-inv-label{font-size:0.78rem;color:#64748b;font-weight:900;margin-bottom:6px;}
.fy-opt-modal .fy-inv-widthwrap{display:flex;gap:8px;align-items:center;}
.fy-opt-modal .fy-inv-widthwrap select,
.fy-opt-modal .fy-inv-widthwrap input,
.fy-opt-modal #fyInvDraftLength{width:100%;}
.fy-opt-modal .fy-inv-custom{max-width:120px;}
.fy-opt-modal .fy-inv-add-actions{display:flex;justify-content:flex-end;}

/* Inventory modal inputs: match Customer card fields */
.fy-opt-modal .fy-inv-widthwrap select,
.fy-opt-modal .fy-inv-widthwrap input,
.fy-opt-modal #fyInvDraftLength{
  padding:8px 10px;
  border:1px solid var(--input-border);
  border-radius:8px;
  background:var(--input-bg);
  color:var(--input-text);
  font-size:.95rem;
}
.fy-opt-modal .fy-inv-widthwrap select:focus,
.fy-opt-modal .fy-inv-widthwrap input:focus,
.fy-opt-modal #fyInvDraftLength:focus{
  outline:none;
  border-color:var(--input-border-focus);
  box-shadow:var(--focus-ring);
}

@media (max-width: 640px){
  .fy-opt-modal .fy-opt-section{
    min-height: 420px;
  }
  .fy-opt-modal .fy-inv-field{min-width: 120px;}
  .fy-opt-modal .fy-inv-field-width{min-width: 180px;}
}

@media (max-width: 560px){
  .fy-opt-modal .fy-rollcard-width{ font-size: 1.45rem; }
  .fy-opt-modal .fy-rollstat-label{ font-size: 0.80rem; }
  .fy-opt-modal .fy-rollstat-value{ font-size: 0.98rem; }
  .fy-opt-modal .fy-rollstat-unit{ font-size: 0.78rem; }
}

.rollfit-warning{
  margin-top: 8px;
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .85rem;
  color: color-mix(in srgb, var(--danger) 85%, #000 15%);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border) 70%);
}
.rollfit-warning[data-tooltip]{ position:relative; }
.rollfit-warning[data-tooltip]:hover::after{
  content: attr(data-tooltip);
  position:absolute;
  left: 0;
  top: calc(100% + 8px);
  white-space: pre;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 3000;
  min-width: 220px;
  max-width: 320px;
}

.fy-btn-blue{ background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; border:none; padding: 12px 14px; border-radius: 12px; font-weight: 900; cursor:pointer; }
.fy-btn-blue:disabled{ opacity:.55; cursor:not-allowed; }

 .fy-inv-add-row{
  display:grid;
  /* Width / Length / Unit toggle / Add button */
  grid-template-columns: minmax(170px, 1.4fr) minmax(140px, 1fr) minmax(120px, 140px) minmax(120px, 160px);
  gap: 10px;
  align-items: end;
}
.fy-inv-add-row .fy-field{ margin-bottom: 0 !important; min-width: 0; }
.fy-inv-add-row .fy-unit-toggle{ margin-top: 0 !important; }
@media (max-width: 560px){
  .fy-inv-add-row{
    grid-template-columns: 1fr 1fr;
  }
  .fy-inv-add-row .fy-field:nth-child(3),
  .fy-inv-add-row .fy-field:nth-child(4){
    grid-column: span 2;
  }
}

/* Width dropdown + inline custom width (stays inside the same grid cell) */
.fy-inv-widthstack{ display:flex; flex-direction:column; gap: 8px; }
.fy-inv-customwrap input{ width: 100%; }/* Inventory: compact "Add a roll" table (keeps both cards on one row on desktop) */
.fy-inv-add-table{ width: 100%; border-collapse: collapse; table-layout: fixed; }
.fy-inv-add-table th{
  text-align: left;
  padding: 0 0 6px;
  font-size: 12px;
  font-weight: 1000;
  color: var(--muted);
}
.fy-inv-add-table td{ padding: 0; vertical-align: bottom; }
.fy-inv-add-table td:last-child{ text-align: right; }
.fy-inv-add-table select{ width: 88px; }
.fy-inv-add-table input{ width: 110px; }
.fy-inv-add-table .fy-inv-customwrap input{ width: 88px; }
.fy-inv-add-table .fy-unit-toggle{ width: 108px; }
.fy-inv-add-table .fy-btn-blue{ width: 120px; padding: 10px 12px; }

/* If the modal gets narrow, allow the table to wrap naturally. */
@media (max-width: 720px){
  .fy-inv-add-table{ table-layout: auto; }
  .fy-inv-add-table select,
  .fy-inv-add-table input,
  .fy-inv-add-table .fy-unit-toggle,
  .fy-inv-add-table .fy-btn-blue{ width: 100%; }
  .fy-inv-add-table td:last-child{ text-align: left; }
}


/* =========================
   Inventory compact list
   ========================= */
.fy-inv-item-compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.2);
}
.fy-inv-item-left{ display:flex; align-items:center; gap: 10px; }
.fy-inv-pill{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 80%, var(--surface) 20%);
  border: 1px solid var(--border);
  font-weight: 900;
}
.fy-inv-meta{
  color: var(--muted);
  font-weight: 800;
}
.fy-btn-ghost-danger{
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border) 60%);
  color: color-mix(in srgb, var(--danger) 85%, black 15%);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
}
.fy-btn-ghost-danger:hover{
  background: color-mix(in srgb, var(--danger) 10%, transparent 90%);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border) 45%);
}


/* ==================== CUT PLAN RESULT HEADER META ==================== */
.results-inner-header{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.results-submeta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:baseline;
  color:var(--muted);
  font-weight:800;
}
.results-submeta strong{ color:var(--text); }
.results-mode{
  display:inline-flex;
  gap:6px;
  align-items:baseline;
}

/* ==================== LEFT COLUMN CUT PLAN BUTTON ==================== */
.main-actions.main-actions-left{
  margin-top:12px;
}
.main-actions.main-actions-left .btn-optimize-roll{
  width:100%;
  justify-content:center;
}

/* ==================== QUICK OUTPUT BUTTONS (SINGLE-ROLL) ==================== */
.fy-cut-actions{ margin-top:10px; }
.fy-cut-actions-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.fy-jobpacket-btn{
  width:100%;
  margin-top:10px;
}
.fy-jobpacket-tip{
  margin-top:6px;
  color:var(--muted);
  font-weight:700;
  text-align:center;
}

/* Compact grid for quote tools (keeps spacing tight when fewer buttons exist) */
.job-output-buttons-compact{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

/* ==================== PLAN RESULTS (MULTI-ROLL / INVENTORY) ==================== */
.fy-plan-rolls-flat{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.fy-plan-rollcard{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow);
}

.fy-plan-rollcard-single{ margin-top:12px; }

.fy-plan-rollhead{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}

.fy-plan-rollhead-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}

.fy-plan-rolltitle{
  font-weight:900;
  color:var(--text);
  font-size:1.05rem;
}

.fy-plan-rollwindows{
  color:var(--muted);
  font-weight:900;
  font-size:0.95rem;
  white-space:nowrap;
}

.fy-plan-rollcard-notonhand{
  border-style:dashed;
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
  background: color-mix(in srgb, var(--primary) 3%, var(--surface) 97%);
}

.fy-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-weight:1000;
  font-size:0.78rem;
  line-height:1;
}
.fy-pill-order{
  background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
  border:1px solid color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
  color: color-mix(in srgb, var(--primary) 65%, var(--text) 35%);
}

/* Finish Remaining (plan modes) */
.fy-finish-remaining{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow);
  margin-top:14px;
}
.fy-finish-title{
  font-weight:1000;
  margin-bottom:6px;
}
.fy-finish-note{
  color:var(--muted);
  font-weight:900;
  margin-left:6px;
}
.fy-finish-sub{
  color:var(--muted);
  font-weight:700;
  margin-bottom:10px;
}
.fy-finish-selector .fy-finish-label{
  color:var(--muted);
  font-weight:900;
  margin-bottom:10px;
}
.fy-finish-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.fy-finish-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.fy-finish-toggle{
  border:1px solid var(--border);
  background:transparent;
  border-radius:10px;
  padding:8px 10px;
  font-weight:900;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
}
.fy-finish-toggle:hover{
  background:color-mix(in srgb, var(--surface) 75%, var(--border) 25%);
}
.fy-finish-collapsed-meta{
  margin-top:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-weight:800;
}
.fy-finish-change{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:10px;
  padding:6px 10px;
  font-weight:900;
  cursor:pointer;
}
.fy-finish-change:hover{
  background:color-mix(in srgb, var(--surface) 70%, var(--border) 30%);
}
.fy-finish-collapsed-warn{
  color:#991b1b;
  font-weight:1000;
  margin-left:6px;
}
.fy-finish-remaining.is-collapsed .fy-finish-expandable{
  display:none;
}
@media (max-width: 640px){
  .fy-finish-grid{ grid-template-columns:1fr; }
}

.fy-rollcard.is-selected{
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border) 30%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent 82%), var(--shadow);
}

.fy-rollcard-compact{
  padding:12px 12px;
}
.fy-rollcard-compact .fy-rollcard-width{
  font-size:1.55rem;
}
.fy-rollcard-compact .fy-rollcard-grid{
  gap:10px 12px;
  margin-top:10px;
}
.fy-rollcard-compact .fy-rollstat-label{ font-size:0.80rem; }
.fy-rollcard-compact .fy-rollstat-value{ font-size:1.05rem; }
.fy-rollcard-sub{
  color:var(--muted);
  font-weight:800;
  margin-top:4px;
}
.fy-mini-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(239,68,68,.30);
  background:rgba(239,68,68,.08);
  color:#991b1b;
  font-weight:1000;
  font-size:0.72rem;
  white-space:nowrap;
  margin-top:4px;
}

.fy-plan-rollmeta-line{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-weight:800;
}

.fy-roll-results-grid{
  margin:0 0 12px 0;
}

.fy-cut-actions-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}

.fy-plan-jobpacket{ margin-top:14px; }

/* ==================== ROLLFIT BANNERS (WARN / OK) ==================== */
.rollfit-banner{
  border:1px solid rgba(239,68,68,.25);
  background:rgba(239,68,68,.06);
  border-radius:14px;
  padding:12px 14px;
  margin:12px 0;
}
.rollfit-banner-title{
  font-weight:900;
  color:#991b1b;
}
.rollfit-banner-details summary{
  cursor:pointer;
  color:#991b1b;
  font-weight:800;
  margin-top:6px;
}
.rollfit-banner-ok{
  border-color:rgba(16,185,129,.25);
  background:rgba(16,185,129,.08);
}
.rollfit-banner-ok .rollfit-banner-title{
  color:#166534;
}
.rollfit-banner-plan{}

/* Smaller spacing on narrow screens */
@media (max-width: 540px){
  .fy-cut-actions-row{ grid-template-columns:1fr; }
  .results-submeta{ gap:8px; }
}

/* ==================== AUTH GATE (Login required) ==================== */
html.pfs-auth-pending .container {
  opacity: 1;
  pointer-events: auto;
}

.pfs-auth-gate {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
  background: rgba(12, 18, 28, 0.55);
}

.pfs-auth-card {
  width: min(520px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  overflow: hidden;
}

.pfs-auth-head {
  padding: 18px 18px 14px 18px;
  border-bottom: 1px solid #e8eef6;
  display: flex;
  gap: 12px;
  align-items: center;
}

.pfs-auth-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
  background: #f6f9ff;
  border: 1px solid #e3ebf8;
  padding: 6px;
}

.pfs-auth-title {
  font-weight: 900;
  font-size: 18px;
  margin: 0;
}

.pfs-auth-sub {
  font-size: 12px;
  color: #5b6b7c;
  margin-top: 2px;
}

.pfs-auth-body {
  padding: 18px;
}

.pfs-auth-error {
  display: none;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 12px;
  background: #fff3f3;
  color: #9b1c1c;
  border: 1px solid #ffd2d2;
  font-size: 13px;
}

.pfs-auth-note {
  display: none;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 12px;
  background: #eef8ff;
  color: #0c4a6e;
  border: 1px solid #cfe9ff;
  font-size: 13px;
}

.pfs-auth-label {
  display: block;
  font-size: 12px;
  color: #5b6b7c;
  margin-bottom: 6px;
}

.pfs-auth-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d7e3f4;
  border-radius: 12px;
  outline: none;
  margin-bottom: 12px;
}

.pfs-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pfs-auth-link {
  font-size: 12px;
  font-weight: 800;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #2f6fed;
}

.pfs-auth-hint {
  font-size: 12px;
  color: #5b6b7c;
}

.pfs-auth-toggle {
  font-size: 12px;
  text-decoration: none;
  font-weight: 800;
}

.pfs-auth-actions {
  display: flex;
  gap: 10px;
}

.pfs-auth-btn {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #d7e3f4;
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}

.pfs-auth-btn-primary {
  border: 0;
  background: #2f6fed;
  color: #fff;
}

.pfs-auth-footer{
  padding: 10px 16px 16px;
  border-top: 1px solid #e8eef6;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  background: #fbfdff;
}
.pfs-auth-footer a{
  font-size: 12px;
  font-weight: 800;
  color: #2f6fed;
  text-decoration: none;
}
.pfs-auth-footer a:hover{
  text-decoration: underline;
}

.pfs-status-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#e2f2ff;
  color:#0c4a6e;
  font-size:12px;
  font-weight:800;
}
.pfs-status-badge.suspended{
  background:#fff7ed;
  color:#9a3412;
}
.pfs-status-badge.deleted{
  background:#fee2e2;
  color:#991b1b;
}

/* ==================== Impersonation Banner ==================== */
.pfs-impersonate-banner{
  position: sticky;
  top: 0;
  z-index: 9998;
  background: #1e293b;
  color: #e2e8f0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}
.pfs-impersonate-banner .title{
  font-weight: 800;
}
.pfs-impersonate-banner .btn-stop{
  background: #ef4444;
  color: #fff;
  border: 0;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

/* ==================== Saved Optimization Status Strip ==================== */
#pfsOptStatusStrip {
  margin: 10px 0 12px;
}

.pfs-opt-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.55);
}

.pfs-opt-badge {
  font-size: 16px;
  line-height: 1;
}

.pfs-opt-title {
  font-weight: 900;
}

.pfs-opt-when {
  font-weight: 800;
  opacity: 0.9;
}

.pfs-opt-warning {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  opacity: 0.95;
}


/* ===== Launch-tier branding ===== */
.brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-top {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 26px;
}
.brand-line {
  height: 2px;
  width: 170px;
  background: rgba(255,255,255,0.55);
  margin: 6px 0 6px 0;
  border-radius: 999px;
}
.brand-bottom {
  font-weight: 600;
  font-size: 15px;
  opacity: 0.92;
}

/* ===== Launch-tier footer ===== */
#appFooter {
  padding: 14px 16px;
}
#appFooter .footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
#appFooter .footer-brand {
  font-weight: 700;
}
#appFooter .footer-version {
  opacity: 0.75;
  font-weight: 600;
  margin-left: 6px;
}
#appFooter .footer-usage {
  opacity: 0.9;
  font-weight: 600;
}

/* --- Build button + usage note (desktop) --- */

/* =========================
   Premium UI Polish Overrides
   ========================= */
:root{
  --font-body:"Sora", "Segoe UI", sans-serif;
  --font-heading:"Newsreader", "Times New Roman", serif;
  --primary:#1f4d7a;
  --primary-dark:#173b5c;
  --secondary:#d1a648;
  --success:#16a34a;
  --warning:#d97706;
  --danger:#dc2626;
  --bg:#f6f3ee;
  --text:#101828;
  --muted:#5b6775;
  --surface:#ffffff;
  --surface-2:#f2efe9;
  --surface-3:#ebe7df;
  --border:rgba(15,23,42,.12);
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --shadow-lg:0 18px 50px rgba(15,23,42,.16);
  --input-bg:#ffffff;
  --input-border:rgba(15,23,42,.20);
  --input-border-focus:rgba(31,77,122,.55);
  --focus-ring:0 0 0 4px rgba(31,77,122,.12);
}

body{
  font-family:var(--font-body);
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(209,166,72,.16), transparent 60%),
    radial-gradient(900px 500px at 110% -20%, rgba(31,77,122,.18), transparent 60%),
    linear-gradient(180deg, #f8f4ee 0%, #f4f1eb 55%, #f6f3ee 100%);
  color:var(--text);
}

h1,h2,h3,h4,.results-heading,.jobpick-title,.jobmgr-title-text{
  font-family:var(--font-heading);
  letter-spacing:.2px;
}

header{
  border-radius:20px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 60px rgba(15,23,42,.10);
  backdrop-filter: blur(14px);
}

.app-title-wrap{ gap:14px; }
.app-logo{ width:56px; height:56px; object-fit:contain; border-radius:14px; box-shadow:0 6px 18px rgba(15,23,42,.12); }
.app-title-text h1{ font-weight:700; font-size:1.8rem; }
.app-title-text p{ color:var(--muted); font-weight:500; }

.card, details.job-details{
  border-radius:20px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:var(--shadow);
}
.card{ padding:14px; }

/* tighten vertical rhythm so Create/View Cut Plan stays above fold */
.main-content{ gap:16px; }
.job-details{ margin:-6px 0 12px; }
.job-details{ padding:10px; }
.job-details-header{ padding:8px 10px; }
.main-actions{ padding-top:12px; margin-top:14px; }
.main-actions.main-actions-left{ margin-top:8px; }
.job-details-grid{ gap:8px 10px; }
.job-field input{ padding:6px 8px; font-size:.92rem; }

.job-details-header h3{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:1.1rem;
}

.meta-inline{
  color:var(--muted);
  font-weight:600;
}

input, select, textarea{
  border-radius:12px;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  color:var(--input-text);
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--input-border-focus);
  box-shadow:var(--focus-ring);
}
input::placeholder, textarea::placeholder{
  color:color-mix(in srgb, var(--input-text) 55%, transparent);
}
select{
  color:var(--input-text);
}

.btn-primary,.btn-secondary,.btn-mini,button{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:.2px;
  border-radius:12px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary, .fy-btn-primary, .btn-optimize-roll{
  background:linear-gradient(135deg, var(--primary), #2c6aa3);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 24px rgba(31,77,122,.24);
}
.btn-primary:hover, .fy-btn-primary:hover, .btn-optimize-roll:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(31,77,122,.30);
}
.btn-secondary, .fy-btn-secondary{
  background:var(--surface);
  border:1px solid rgba(15,23,42,.16);
}
.btn-secondary:hover, .fy-btn-secondary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(15,23,42,.10);
}
.btn-mini{
  border-radius:10px;
}

.results-section{ min-height:520px; }
.placeholder{
  border:1px dashed rgba(15,23,42,.16);
  background:linear-gradient(135deg, rgba(31,77,122,.04), rgba(209,166,72,.06));
  border-radius:18px;
  padding:26px;
  color:var(--muted);
}
.placeholder h3{
  font-family:var(--font-heading);
  color:var(--text);
  margin-bottom:6px;
}

.job-draft-hint{
  border:1px solid rgba(31,77,122,.22);
  background:#f4f7ff;
  color:#111827;
  border-radius:12px;
}

.window-controls-bottom{
  display:flex;
  gap:10px;
}
.window-controls-bottom button{
  flex:1;
  min-width:0;
  font-size:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.16) !important;
  background:var(--surface) !important;
  color:var(--text) !important;
  font-weight:700;
  text-transform:none;
}
.window-controls-bottom .btn-add-window,
.window-controls-bottom .btn-group-selected,
.window-controls-bottom .btn-delete-selected{
  background:var(--surface) !important;
  border:1px solid rgba(15,23,42,.16) !important;
  color:var(--text) !important;
}
.window-controls-bottom button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(15,23,42,.10);
}
.window-controls-bottom button:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

.pfs-pro-toast{
  position:fixed;
  left:50%;
  top:90px;
  transform:translateX(-50%);
  background:rgba(15,23,42,.96);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px 16px;
  box-shadow:0 16px 40px rgba(15,23,42,.35);
  z-index:9999;
  font-size:13px;
  line-height:1.4;
  max-width:320px;
  text-align:center;
}
.pfs-pro-toast b{ font-weight:800; }

.menu-dropdown{
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 20px 40px rgba(15,23,42,.18);
}

@keyframes pfsFadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.card, .collapsible-card{ animation:pfsFadeUp .45s ease both; }

@media (prefers-reduced-motion: reduce){
  .card, .collapsible-card{ animation:none; }
  *{ transition:none !important; }
}
.build-cutplan-wrap { width: 100%; display:flex; flex-direction:column; align-items:center; }
.build-cutplan-wrap .btn-optimize-roll { width: 100%; }
#optUsageInline { width: 100%; text-align: center; margin-top: 6px; }

/* --- Mobile optimize bar usage note --- */
.opt-usage-note-mobile { text-align: center; opacity: 0.9; margin-top: 6px; font-size: 12.5px; }


/* --- Footer links --- */
/* PFS footer layout (responsive) */
.footer-content{
  display:flex !important;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.footer-left{min-width: 220px;}
.footer-right{margin-left:auto;}

.footer-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.footer-links a{ color: var(--muted); text-decoration:none; font-weight:600; font-size:13px; }
.footer-links a:hover{ color: var(--text); text-decoration:underline; }

.footer-bottom{ display:block !important; }

@media (max-width: 640px){
  .footer-content{ flex-direction:column; align-items:flex-start; }
  .footer-right{ width:100%; margin-left:0; }
  .footer-links{ justify-content:flex-start; }
}

/* --- Single-roll metrics actions (inside metrics grid) --- */
.result-actions-row{ display:flex; gap:10px; width:100%; }
.result-actions-row .btn-output{ flex:1; width:100%; }
.result-actions .fy-jobpacket-btn{ width:100%; margin-top:10px; }
.job-outputs-locked .job-outputs-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.job-outputs-locked .job-outputs-title{ display:flex; align-items:center; gap:10px; margin:0; }
.job-outputs-locked .job-outputs-title h3{ margin:0; }
.job-outputs-locked .job-outputs-teaser{ color:var(--muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* ==================== Optimization History (Previous cut plans) ==================== */
.pfs-history-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 6px;
}
.pfs-history-row{
  display:flex;
  align-items:stretch;
  gap:10px;
}
.pfs-history-restore{
  flex:1;
  text-align:left;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.03);
  color: inherit;
}
.pfs-history-restore:hover{
  border-color: rgba(99,102,241,.55);
}
.pfs-history-row.stale .pfs-history-restore{
  opacity:.85;
}
.pfs-history-label{
  font-weight:800;
  font-size: 0.98rem;
  line-height:1.1;
}
.pfs-history-meta{
  margin-top:6px;
  font-size:0.85rem;
  opacity:.75;
}
.pfs-history-remove{
  width:44px;
  min-width:44px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.02);
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
}
.pfs-history-remove:hover{
  border-color: rgba(239,68,68,.55);
}
.pfs-history-actions{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
}



/* ==================== Allow Window Rotation toggle ==================== */
.pfs-rot-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 10px 12px;
  margin: 10px 0 8px;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
}
.pfs-rot-left{min-width:0;}
.pfs-rot-label{font-weight: 900; letter-spacing: .2px;}
.pfs-rot-help{margin-top:3px; font-size: 12px; opacity: .78; line-height: 1.3;}
.pfs-rot-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.pfs-rot-status{
  font-weight: 900;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.30);
  min-width: 44px;
  text-align:center;
}
.pfs-rot-status.on{color: #22c55e; border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.10);} 
.pfs-rot-status.off{color: #ef4444; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10);} 

/* Switch */
.pfs-switch{position:relative; display:inline-block; width: 52px; height: 30px;}
.pfs-switch input{opacity:0; width:0; height:0;}
.pfs-slider{
  position:absolute; inset:0;
  cursor:pointer;
  background: rgba(148,163,184,.25);
  border: 1px solid rgba(148,163,184,.38);
  border-radius: 999px;
  transition: .18s ease;
}
.pfs-slider:before{
  content:"";
  position:absolute;
  height: 24px;
  width: 24px;
  left: 3px;
  top: 2.5px;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  transition: .18s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transform: translateX(22px);
}
.pfs-switch input:checked + .pfs-slider{background: rgba(34,197,94,.25); border-color: rgba(34,197,94,.55);} 
.pfs-switch input:checked + .pfs-slider:before{transform: translateX(0);} 
.pfs-switch input:focus-visible + .pfs-slider{outline: 2px solid rgba(99,102,241,.75); outline-offset: 2px;}

@media (max-width: 520px){
  .pfs-rot-toggle{padding: 10px 10px;}
  .pfs-rot-help{display:none;}
}

/* =========================
   Site-Style Header + Footer
   ========================= */
.navbar{
  position: sticky;
  top: 0;
  z-index: 50;
  margin-left: -16px;
  margin-right: -16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: none;
  padding: 0;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: 72px;
  padding: 0;
  gap:16px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:.1px;
  color: var(--text);
  text-decoration:none;
}
.logo img{
  width:48px;
  height:48px;
  object-fit: contain;
  border-radius:0;
}
.logo .brand{display:flex; flex-direction:column; gap:2px; line-height:1.2;}
.logo .brand-name{font-weight:700; font-size:15px; letter-spacing:.1px;}
.logo .brand-tagline{font-size:12px; color:var(--muted); font-weight:400; margin-top:0;}
@media (max-width: 860px){
  .logo .brand-tagline{font-size:11px; margin-top:1px; opacity:.9;}
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
#appFooter{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.footer{
  border-top: 0;
  margin-top: 18px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: 13px;
}
.footer a{ color: var(--muted); text-decoration: none; }
.footer a:hover{ color: var(--text); text-decoration: underline; }
.footer .footer-inner{display:flex; min-height:70px; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;}
#appFooter .footer-inner.container{
  width: min(1080px, calc(100% - 32px));
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}
.footer .footer-left{display:flex; flex-direction:column; gap:4px;}
.footer .footer-left.footer-brand-stack{
  align-items: flex-start;
  text-align: left;
}
.footer .footer-brand{
  color: var(--text);
  font-weight: 700;
}
.footer .footer-tagline{color:var(--muted); font-weight:700; font-size:13px;}
.footer .footer-copyright{
  color: var(--muted);
  font-size: 13px;
}
.footer .footer-links{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; text-align:right;}
.footer .footer-links a{
  display:inline-flex;
  align-items:center;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
}
.footer .footer-links a:hover{ color: var(--text); text-decoration: underline; }
.footer .footer-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.footer .footer-help{
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}
.footer .footer-links a:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--primary) 45%, white);
  outline-offset: 2px;
}
@media (min-width: 769px){
  .navbar{
    margin-bottom: 6px !important;
    border-bottom: 1px solid #2a3750 !important;
    background: rgba(12, 17, 27, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    padding: 0 !important;
  }
  .navbar .nav-inner{
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    gap: 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: min(1080px, calc(100% - 32px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
  .navbar .logo{
    gap: 12px !important;
    color: #eaf0f8 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    letter-spacing: .1px !important;
  }
  .navbar .logo img{
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
  }
  .navbar .logo .brand{
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1.2 !important;
  }
  .navbar .logo .brand-name{
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: .1px !important;
  }
  .navbar .logo .brand-tagline{
    color: #b4bfd1 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    margin-top: 0 !important;
  }

  #appFooter{
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  #appFooter .footer{
    border-top: 1px solid #2a3750 !important;
    margin-top: 18px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #b4bfd1 !important;
  }
  #appFooter .footer-inner.container{
    min-height: 70px !important;
    width: min(1080px, calc(100% - 32px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    text-align: left !important;
  }
  #appFooter .footer .footer-brand{
    color: #eaf0f8 !important;
  }
  #appFooter .footer .footer-tagline,
  #appFooter .footer .footer-copyright,
  #appFooter .footer a,
  #appFooter .footer .footer-help{
    color: #b4bfd1 !important;
  }
  #appFooter .footer .footer-links{
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }
  #appFooter .footer .footer-links a{
    margin-left: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }
}
@media (max-width: 720px){
  .footer{
    padding: 16px 0 48px;
  }
  .footer .footer-inner{
    justify-content: center;
    text-align: center;
    gap: 8px;
  }
  .footer .footer-left{
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .footer .footer-links{
    width: 100%;
    justify-content: center;
    text-align: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 8px;
  }
  .footer .footer-links a{
    font-size: 11px;
    letter-spacing: 0;
  }
}

/* =========================
   Legal Modal
   ========================= */
.pfs-legal-modal{position:fixed; inset:0; display:none; z-index:9999; font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
.pfs-legal-modal[aria-hidden="false"]{display:block;}
.pfs-legal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.65);}
.pfs-legal-dialog{
  position:relative;
  max-width: 1100px;
  margin: 5vh auto;
  width: calc(100% - 24px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
}
.pfs-legal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.pfs-legal-title{font-weight:800; color: var(--text); font-size: 16px;}
.pfs-legal-close{
  appearance:none;
  border:1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 38px;
}
.pfs-legal-close:hover{ background: var(--surface-3); }
.pfs-legal-frame{
  width:100%;
  height: min(72vh, 820px);
  border:0;
  background: var(--surface);
}
.pfs-no-scroll{ overflow: hidden !important; }

/* Chrome autofill trap (offscreen) */
.pfs-autofill-trap{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.pfs-autofill-trap input{
  width:1px;
  height:1px;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
}

/* Match app page background to checkout-success pages */
body{
  background:
    radial-gradient(900px 360px at 8% -8%, rgba(79, 144, 255, 0.22), transparent 72%),
    radial-gradient(700px 300px at 100% 0%, rgba(180, 132, 84, 0.17), transparent 72%),
    #0c111b !important;
}

/* Sharper UI + surface gradients (app-wide visual tuning) */
:root{
  --pfs-radius-panel: 10px;
  --pfs-radius-control: 8px;
}

header,
.card,
.job-details,
.modal-content,
.pfs-bug-modal-card,
.menu-dropdown,
.pfs-legal-dialog{
  border-radius: var(--pfs-radius-panel) !important;
}

.btn,
[class^="btn-"],
[class*=" btn-"],
.menu-btn,
.bug-btn,
.menu-dropdown button,
.menu-dropdown .menu-link{
  border-radius: var(--pfs-radius-control) !important;
}

.card,
.job-details,
.modal-content,
.pfs-bug-modal-card,
.menu-dropdown{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    #121a29 !important;
  border-color: #2a3750 !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.26) !important;
}

/* Optimization results surfaces: match left-column card style (cosmetic only) */
.results-section .result-stat,
.results-section .savings-notice,
.results-section .rotation-notice,
.results-section .cut-sheet-section,
.results-section .cut-sheet-toggle,
.results-section .cut-sheet,
.results-section .fy-plan-rollcard,
.results-section .fy-quote-card,
.results-section .job-outputs{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    #121a29 !important;
  border-color: #2a3750 !important;
  border-radius: var(--pfs-radius-panel) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.26) !important;
}

.results-section .cut-sheet-toggle:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    #121a29 !important;
}

.results-section .savings-notice,
.results-section .rotation-notice{
  border-left: 3px solid color-mix(in srgb, var(--primary) 70%, #ffffff 30%);
}

/* Keep the highlighted efficiency stat visibly accented */
.results-section .result-stat.stat-highlight{
  background:
    linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Optimization quick-action buttons: keep distinct from cards, match app theme */
.results-section [data-opt-action="open-cut-diagram"].btn-output,
.results-section [data-opt-action="open-window-list"].btn-output,
.results-section [data-opt-action="view-plan-roll"][data-view="diagram"].btn-output,
.results-section [data-opt-action="view-plan-roll"][data-view="windows"].btn-output{
  background:
    linear-gradient(180deg, rgba(79, 144, 255, 0.22), rgba(79, 144, 255, 0.10)),
    #15233a !important;
  border-color: #3a5686 !important;
  color: #eaf0f8 !important;
}

.results-section [data-opt-action="open-cut-diagram"].btn-output:hover,
.results-section [data-opt-action="open-window-list"].btn-output:hover,
.results-section [data-opt-action="view-plan-roll"][data-view="diagram"].btn-output:hover,
.results-section [data-opt-action="view-plan-roll"][data-view="windows"].btn-output:hover{
  background:
    linear-gradient(180deg, rgba(79, 144, 255, 0.28), rgba(79, 144, 255, 0.14)),
    #1a2a44 !important;
  border-color: #4a6ca5 !important;
}

/* ==================== Settings page visual parity (cosmetic only) ==================== */
.settings-page .settings-card,
#settingsRoot .fy-panel-card,
#settingsRoot .fy-section,
#settingsRoot .fy-film,
#settingsRoot .fy-card,
#settingsRoot .fy-quote-card,
#settingsRoot .fy-tabs{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    #121a29 !important;
  border-color: #2a3750 !important;
  border-radius: var(--pfs-radius-panel) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.26) !important;
}

.settings-page .settings-title,
.settings-page .settings-subtitle,
#settingsRoot .fy-panel-title,
#settingsRoot .fy-panel-subtitle,
#settingsRoot .fy-mini,
#settingsRoot .fy-hint{
  color: #b4bfd1 !important;
}

#settingsRoot .fy-panel-title,
.settings-page .settings-title{
  color: #eaf0f8 !important;
}

#settingsRoot .fy-btn,
#settingsRoot .fy-btn-primary,
#settingsRoot .fy-btn-secondary,
#settingsRoot .fy-tabbtn,
#settingsRoot .fy-icon-btn,
#settingsRoot .fy-wysiwyg-btn,
.settings-page .btn-secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    #15233a !important;
  border-color: #3a5686 !important;
  color: #eaf0f8 !important;
  border-radius: var(--pfs-radius-control) !important;
}

#settingsRoot .fy-btn:hover,
#settingsRoot .fy-btn-primary:hover,
#settingsRoot .fy-btn-secondary:hover,
#settingsRoot .fy-tabbtn:hover,
#settingsRoot .fy-icon-btn:hover,
#settingsRoot .fy-wysiwyg-btn:hover,
.settings-page .btn-secondary:hover{
  border-color: #4a6ca5 !important;
  transform: translateY(-1px);
}

#settingsRoot .fy-tabbtn.active{
  background:
    linear-gradient(180deg, rgba(79, 144, 255, 0.28), rgba(79, 144, 255, 0.14)),
    #1a2a44 !important;
  border-color: #4a6ca5 !important;
}

#settingsRoot input,
#settingsRoot select,
#settingsRoot textarea,
#settingsRoot .fy-wysiwyg{
  background: #0f1828 !important;
  border-color: #2a3750 !important;
  color: #eaf0f8 !important;
  border-radius: var(--pfs-radius-control) !important;
}

#settingsRoot .fy-field label,
#settingsRoot .fy-form-row label{
  color: #b4bfd1 !important;
}