/* -----------------------------------------------------------------------------
   0. TYPEFACES
   -----------------------------------------------------------------------------
   Served from this app rather than fonts.googleapis.com. Three reasons it is
   worth the 100KB in the repo:

     - the estimate PDF is rendered by Chromium on the server, and when the
       font CDN was unreachable it silently fell back to a generic sans — a
       valid PDF in the wrong typeface;
     - one fewer third-party connection before any text can paint;
     - no request leaves a customer's browser for a company that is not us,
       which also removes the exception a Content-Security-Policy would have
       had to carry.

   DM Sans is a variable font, so one file per subset covers every weight.
   Both families are OFL; the licence sits beside them.
   ----------------------------------------------------------------------------- */

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
   RADIANT TOOLKIT — SHARED STYLES
   styles.css
   Used by: every page
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. RESET & ROOT VARIABLES
   ----------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Backgrounds */
  --bg:        #f4f1eb;
  --surface:   #faf8f4;
  --surface2:  #ede9e0;

  /* Borders */
  --border:    #d6d0c4;
  --border2:   #c8c1b0;

  /* Text */
  --text:      #1a1814;
  --text2:     #6b6559;
  --text3:     #9e9487;

  /* Accent (green) */
  --accent:        #2d5a3d;
  --accent-light:  #e8f0ea;
  --accent-mid:    #4a8a5e;
  --accent-border: #b8d4bf;
  --accent-label:  #3d7050;

  /* Danger (red) */
  --danger:        #8b2e1a;
  --danger-light:  #f5e8e4;
  --danger-border: #e8b8aa;

  /* Warning (amber) */
  --amber:        #7a4f10;
  --amber-light:  #faf0e0;
  --amber-border: #e8d0a0;
  --amber-label:  #8a6020;

  /* Warning aliases used by the settings/login notices */
  --warn:        var(--amber);
  --warn-light:  var(--amber-light);

  /* Info (blue) — invite banners */
  --info:        #1a4a6b;
  --info-light:  #e4eff8;
  --info-border: rgba(26, 74, 107, 0.2);

  /* Typography */
  --mono: 'DM Mono', monospace;
  --sans: 'DM Sans', sans-serif;

  /* Radii */
  --radius:    6px;
  --radius-lg: 10px;
}

/* Dark mode */
[data-theme="dark"] {
  --bg:        #1c1a16;
  --surface:   #232018;
  --surface2:  #2c2820;

  --border:    #38332a;
  --border2:   #4a4438;

  --text:      #f0ece3;
  --text2:     #b0a898;
  --text3:     #7a7268;

  --accent:        #4a8a5e;
  --accent-light:  #1a2e22;
  --accent-mid:    #5fa876;
  --accent-border: #2e5040;
  --accent-label:  #6ab884;

  --danger:        #e05a48;
  --danger-light:  #2e1812;
  --danger-border: #5a2820;

  --amber:        #d4904a;
  --amber-light:  #2a1e0e;
  --amber-border: #4a3418;
  --amber-label:  #c8883a;

  --info:        #8ec5e8;
  --info-light:  #142430;
  --info-border: #2a4256;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}


/* -----------------------------------------------------------------------------
   2. HEADER & NAV
   ----------------------------------------------------------------------------- */

header {
  background: var(--accent);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 20px;
  min-height: 52px;
  border-bottom: 1px solid #1e3d28;
  /* Positioned and layered so nav dropdowns paint above the page panes
     (the app shells below are grids whose later children would win otherwise) */
  position: relative;
  z-index: 100;
}

.header-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.header-sep { flex: 1; }

.logo {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: #c8e6d0;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.logo span { color: #fff; }
a.logo { text-decoration: none; }

.nav-link {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: var(--radius);
  transition: all 0.15s;
  white-space: nowrap;
}
.nav-link:hover  { color: #fff; background: rgba(255, 255, 255, 0.12); }
.nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.18); }

/* Nav dropdown groups (e.g. Estimator → Estimates, Fixtures).
   The label and the caret are separate controls — clicking the label goes to
   the page, the caret opens the menu — but they share one pill so the pair
   reads as a single tab. */
.nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.nav-group:hover,
.nav-group.menu-open { background: rgba(255, 255, 255, 0.12); }
.nav-group.active    { background: rgba(255, 255, 255, 0.18); }

/* The shared pill does the highlighting, so the children stay transparent */
.nav-group .nav-link,
.nav-group .nav-link:hover { background: none; }
.nav-group:hover .nav-link,
.nav-group.menu-open .nav-link,
.nav-group.active .nav-link { color: #fff; }

.nav-group-link { padding-right: 4px; }

/* The caret is a <button>, so it needs the font reset a link doesn't */
.nav-group-toggle {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px 5px 2px;
  background: none;
  border: none;
  font-family: var(--sans);
  cursor: pointer;
}
.nav-caret { font-size: 9px; opacity: 0.75; }

.nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  z-index: 200;
}
.nav-menu.open { display: block; }

/* Invisible bridge spanning the gap up to the toggle. Without it, moving the
   pointer down toward the menu crosses dead space, fires mouseleave on the
   group, and the menu vanishes mid-reach. Hit-tests as part of .nav-menu, so
   the pointer never actually leaves the group. */
.nav-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.nav-menu-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.nav-menu-item:hover  { background: var(--surface2); }
.nav-menu-item.active { background: var(--accent-light); }
.nav-menu-item.active .nav-menu-label { color: var(--accent); font-weight: 500; }
.nav-menu-label { font-size: 13px; }
.nav-menu-hint  { font-size: 11px; color: var(--text3); }


/* -----------------------------------------------------------------------------
   3. HEADER BUTTONS
   ----------------------------------------------------------------------------- */

.hdr-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  color: #fff;
  font-size: 12px;
  font-family: var(--sans);
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.hdr-btn:hover        { background: rgba(255, 255, 255, 0.22); }
.hdr-btn.save         { background: rgba(255, 255, 255, 0.9); color: var(--accent); font-weight: 500; }
.hdr-btn.save:hover   { background: #fff; }
.hdr-btn.danger-text  { color: #ffa0a0; }
.hdr-btn.theme-toggle { font-size: 15px; padding: 4px 8px; }

/* Library page uses a slightly different hdr-btn base */
.hdr-btn.solid {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  color: var(--accent);
  font-weight: 500;
}
.hdr-btn.solid:hover { background: #fff; }


/* Action buttons that sit on a page surface rather than the dark header bar.
   .hdr-btn is white-on-translucent-white by design, which is invisible on a
   light background (1.1:1) — these theme against the surface instead. */
.act-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
  font-family: var(--sans);
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.act-btn:hover { background: var(--surface2); border-color: var(--border2); }
.act-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.act-btn.primary:hover { background: var(--accent-mid); border-color: var(--accent-mid); }
.act-btn.danger { color: var(--danger); }
.act-btn.danger:hover { background: var(--danger-light); border-color: var(--danger-border); }


/* -----------------------------------------------------------------------------
   4. CARDS
   ----------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text2);
}


/* -----------------------------------------------------------------------------
   5. TABLES (estimator)
   ----------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th {
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 10px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td      { background: var(--surface2); }

/* Below this the columns squeeze past the point of being readable, so the
   table keeps its width and scrolls inside the card instead. */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.table-scroll > table {
  min-width: 820px;
  /* Auto, so a column can grow past its floor when a value needs the room.
     The floors below are minimums now, not fixed widths. */
  table-layout: auto;
}

/* Slim scrollbar so it reads as part of the card, not a browser chrome bar */
/* Firefox has no always-on option, so it gets the overlay bar */
@supports not selector(::-webkit-scrollbar) {
  .table-scroll { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }
}

.table-scroll::-webkit-scrollbar        { height: 8px; }
.table-scroll::-webkit-scrollbar-track  { background: var(--bg); }
.table-scroll::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 4px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* Shared column floors — all estimator tables. Text columns grow past these
   when a value is longer; fitTextColumns() in estimator.html sets the cell
   minimums that drive the growth. */
.col-name  { min-width: 164px; }   /* fixture/item name */
.col-brand { min-width: 148px; }   /* brand + model # */
.col-type  { min-width: 98px;  }
.col-qty   { min-width: 66px;  }
.col-watts { min-width: 66px;  }
.col-unit  { min-width: 90px;  }   /* unit cost */
.col-total { min-width: 90px;  }   /* line total */
.col-va    { min-width: 98px;  }   /* VA rating (transformers) */
.col-blank { min-width: 40px;  }   /* spacer column */
.col-rolls { min-width: 98px;  }   /* qty rolls (wire) */
.col-qty,
.col-watts,
.col-unit,
.col-total,
.col-va,
.col-rolls { text-align: right; }
.col-lib   { width: 40px; min-width: 40px; text-align: center; padding: 4px 4px; }
.col-del   { width: 40px; min-width: 40px; text-align: center; padding: 4px 4px; }

/* Inline table inputs */
.tbl-input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 13px;
  font-family: var(--sans);
  color: var(--text);
  outline: none;
}
.tbl-input:focus          { border-color: var(--border2); background: var(--surface); }
.tbl-input.mono           { font-family: var(--mono); font-size: 12px; text-align: right; }
input[type="number"].tbl-input { padding-right: 0; }
select.tbl-input          { cursor: pointer; }

.row-total {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text2);
  text-align: right;
}


/* -----------------------------------------------------------------------------
   6. TABLE ROW BUTTONS
   ----------------------------------------------------------------------------- */

.del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text3);
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.1s;
  line-height: 1;
}
.del-btn:hover { background: var(--danger-light); color: var(--danger); }

.lib-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text2);
  font-size: 11px;
  font-family: var(--sans);
  padding: 3px 7px;
  transition: all 0.12s;
  white-space: nowrap;
}
.lib-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent-border); }

.card-header-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.card-add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text2);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.card-add-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent-border); }

.add-row-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  background: none;
  border: none;
  color: var(--accent-mid);
  font-size: 12px;
  font-family: var(--sans);
  cursor: pointer;
  width: 100%;
  transition: background 0.1s;
}
.add-row-btn:hover { background: var(--accent-light); }


/* -----------------------------------------------------------------------------
   7. NOTES TEXTAREA
   ----------------------------------------------------------------------------- */

.notes-area {
  width: 100%;
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  resize: vertical;
  min-height: 80px;
  padding: 14px 18px;
  outline: none;
  line-height: 1.6;
}
.notes-area::placeholder { color: var(--text3); }


/* -----------------------------------------------------------------------------
   8. SUMMARY PANEL (estimator right panel)
   ----------------------------------------------------------------------------- */

.panel-right {
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  min-height: 0;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.summary-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summary-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.setting-row label {
  font-size: 12px;
  color: var(--text2);
}

/* Subcontractors: a repeatable name + cost pair in the settings panel */
.sub-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text2);
}
.sub-add-btn {
  background: none;
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  color: var(--text2);
  font-family: var(--sans);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.sub-add-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

.sub-list { display: flex; flex-direction: column; gap: 6px; }
.sub-list:empty { display: none; }
.sub-row { display: flex; align-items: center; gap: 6px; }
.sub-row .sub-name { flex: 1; min-width: 0; }
.sub-row .sub-cost { width: 78px; flex-shrink: 0; text-align: right; }
.sub-del-btn {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.sub-del-btn:hover { color: var(--danger); }
.sub-empty { font-size: 11px; color: var(--text3); font-style: italic; }

.setting-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  width: 90px;
  text-align: right;
  outline: none;
}
.setting-input:focus { border-color: var(--accent); }

/* Stat blocks */
.stat-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.stat-block-label { font-size: 11px; color: var(--text3); }
.stat-block-val   { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--text); margin-top: 2px; }
.stat-block-sub   { font-size: 11px; color: var(--text2); margin-top: 2px; }

.stat-block.accent               { background: var(--accent-light); border-color: var(--accent-border); }
.stat-block.accent .stat-block-label { color: var(--accent-label); }
.stat-block.accent .stat-block-val   { color: var(--accent); }

.stat-block.warn               { background: var(--amber-light); border-color: var(--amber-border); }
.stat-block.warn .stat-block-label { color: var(--amber-label); }
.stat-block.warn .stat-block-val   { color: var(--amber); }

/* Cost breakdown lines */
.divider { height: 1px; background: var(--border); }

.total-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--text2);
}
.total-line.bold { font-weight: 500; color: var(--text); font-size: 13px; }
.total-line .val { font-family: var(--mono); }

/* Transformer load warning */
.xfmr-warning         { display: none; font-size: 11px; color: var(--danger); margin-top: 4px; }
.xfmr-warning.visible { display: block; }

.markup-note {
  font-size: 11px;
  color: var(--text3);
  padding: 8px 10px;
  background: var(--surface2);
  border-radius: var(--radius);
  line-height: 1.5;
}


/* -----------------------------------------------------------------------------
   9. LEFT PANEL — saved estimates (estimator)
   ----------------------------------------------------------------------------- */

.panel-left {
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding-top: 0;
  min-height: 0;
  padding: 16px 0;
}

.panel-section-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0 16px 8px;
}

.estimate-list { list-style: none; }

/* Sidebar groups: estimates gathered under their client */
.estimate-group { list-style: none; }
.estimate-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 16px 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  text-align: left;
  color: var(--text2);
}
.estimate-group-header:hover { background: var(--surface2); }
.group-caret { font-size: 9px; color: var(--text3); width: 9px; flex-shrink: 0; }
.group-name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-count {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text3);
  background: var(--surface2);
  border-radius: 9px;
  padding: 1px 6px;
  flex-shrink: 0;
}
.group-current-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.estimate-group-items { list-style: none; }
.estimate-group-items[hidden] { display: none; }

.estimate-item {
  padding: 10px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}
.estimate-item:hover  { background: var(--surface2); }
.estimate-item.active { background: var(--accent-light); border-left-color: var(--accent); }

.estimate-item-name { font-size: 13px; font-weight: 500; }
.estimate-item-meta { font-size: 11px; color: var(--text3); font-family: var(--mono); margin-top: 2px; }


/* -----------------------------------------------------------------------------
   10. ESTIMATOR APP SHELL
   ----------------------------------------------------------------------------- */

.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
}

/* Estimator header spans full width */
.app-shell > header { grid-column: 1 / -1; }

.main {
  overflow-y: auto;
  min-height: 0;
  /* Without this the 1fr track floors at the content's min-content width and a
     wide table pushes the whole page sideways instead of scrolling in place. */
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Client info card */
.client-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.client-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 18px;
}

.client-col + .client-col {
  border-left: 1px solid var(--border);
}

.client-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}

.client-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
}

.client-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 13px;
  font-family: var(--sans);
  color: var(--text);
  outline: none;
  width: 100%;
}
.client-input:focus        { border-color: var(--border2); background: var(--surface2); }
.client-input::placeholder { color: var(--text3); }

.client-address {
  resize: none;
  min-height: 62px;
  line-height: 1.5;
}


/* Estimate name input (in header) */
/* The name box in the header — estimator and proposals share it */
#estimate-name,
#proposal-name {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  padding: 5px 10px;
  width: 200px;
  outline: none;
}
#estimate-name::placeholder,
#proposal-name::placeholder { color: rgba(255, 255, 255, 0.4); }
#estimate-name:focus,
#proposal-name:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.18);
}
/* Nothing loaded yet — the box has nothing to name */
#proposal-name:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* -----------------------------------------------------------------------------
   11. MODALS (shared base — used by both pages)
   ----------------------------------------------------------------------------- */

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
}

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

.modal-title { font-size: 15px; font-weight: 500; }

.modal-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--surface2); color: var(--text); }

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Modal action buttons */
.btn-cancel {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 16px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.12s;
}
.btn-cancel:hover { background: var(--surface2); }

.btn-save {
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  padding: 7px 20px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-save:hover { background: var(--accent-mid); }

.btn-danger {
  background: #c0392b;
  border: none;
  border-radius: var(--radius);
  padding: 7px 20px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: #a93226; }


/* -----------------------------------------------------------------------------
   12. FORM ELEMENTS (library add/edit modal)
   ----------------------------------------------------------------------------- */

.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.form-group.full { grid-column: 1 / -1; }

.form-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}

.form-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  outline: none;
  width: 100%;
}
.form-input:focus          { border-color: var(--accent); background: var(--surface); }
.form-input.mono           { font-family: var(--mono); }
select.form-input          { cursor: pointer; }
textarea.form-input        { resize: vertical; min-height: 72px; line-height: 1.5; }

.form-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  user-select: none;
}
.form-check:hover { border-color: var(--border2); }
.form-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.form-check-hint { color: var(--text3); font-size: 12px; }

#integrated-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
}


/* -----------------------------------------------------------------------------
   13. FIXTURE LIBRARY PAGE
   ----------------------------------------------------------------------------- */

/* Page wrapper */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px;
}

/* Toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.search-wrap input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px 8px 34px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.search-wrap input:focus { border-color: var(--accent); }
.search-wrap::before {
  content: '⌕';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  font-size: 16px;
  pointer-events: none;
}

.filter-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  outline: none;
  cursor: pointer;
}
.filter-select:focus { border-color: var(--accent); }

.add-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 8px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.add-btn:hover { background: var(--accent-mid); }

.lib-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
}

.lib-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-family: var(--sans);
  color: var(--text2);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.lib-tab:hover  { background: var(--surface2); border-color: var(--border2); }
.lib-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.count-label {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 16px;
}

/* Fixture card grid */
.fixture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.fixture-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s;
}
.fixture-card:hover { border-color: var(--border2); }

.fc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.fc-name  { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3; }
.fc-model { font-size: 11px; font-family: var(--mono); color: var(--text3); margin-top: 2px; }

.fc-type-badge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
}

.fc-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.fc-stat { background: var(--bg); border-radius: var(--radius); padding: 7px 10px; }
.fc-stat-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; }
.fc-stat-val   { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--text); margin-top: 1px; }

.fc-notes {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.fc-actions {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.fc-btn {
  flex: 1;
  padding: 6px;
  font-size: 12px;
  font-family: var(--sans);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: none;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.12s;
}
.fc-btn:hover              { background: var(--surface2); border-color: var(--border2); }
.fc-btn.danger:hover       { background: var(--danger-light); color: var(--danger); border-color: var(--danger-border); }


/* -----------------------------------------------------------------------------
   14. LIBRARY PICKER MODAL (estimator)
   ----------------------------------------------------------------------------- */

/* Override modal positioning for the picker — top-aligned */
#picker-modal {
  align-items: flex-start;
  padding: 60px 20px 20px;
}

#picker-modal .modal {
  max-width: 680px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Qty step overlays the picker without touching the flex layout.
   It inherits the modal's height, which is sized by the picker list behind
   it — so with a short or filtered list the modal can be shorter than this
   step's own content. The header and footer are pinned and the body scrolls,
   so the action buttons can never be clipped. */
.picker-qty-overlay {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  flex-direction: column;
  z-index: 1;
}
.picker-qty-overlay .modal-header,
.picker-qty-overlay .modal-footer { flex-shrink: 0; }

/* While the quantity step is open, give the modal room for it regardless of
   how tall the list behind it was. Capped so it still fits small viewports. */
#picker-modal .modal.qty-step { min-height: min(330px, 80vh); }

/* Picker header has a search input inline */
.modal-search {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.modal-search:focus { border-color: var(--accent); }

/* Filter chips row */
.modal-filter-bar {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.filter-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.12s;
}
.filter-chip:hover,
.filter-chip.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent-border); }

/* Scrollable fixture list */
.picker-list {
  overflow-y: auto;
  flex: 1;
}

.picker-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  gap: 12px;
  transition: background 0.1s;
}
.picker-item:last-child { border-bottom: none; }
.picker-item:hover      { background: var(--accent-light); }

.pi-info   { flex: 1; min-width: 0; }
.pi-name   { font-size: 13px; font-weight: 500; }
.pi-sub    { font-size: 11px; color: var(--text3); font-family: var(--mono); margin-top: 2px; }

.pi-right  { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.pi-cost   { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--text); }
.pi-type   { font-size: 10px; background: var(--surface2); color: var(--text2); border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px; }

.picker-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text3);
  font-size: 13px;
  line-height: 1.8;
}

.modal-footer-bar {
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.go-library-link { font-size: 11px; color: var(--accent); text-decoration: none; }
.go-library-link:hover { text-decoration: underline; }

/* Picker quantity step */
.picker-back-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  font-family: var(--sans);
}
.picker-back-btn:hover { text-decoration: underline; }

.picker-qty-body {
  padding: 32px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;   /* lets a flex child actually scroll instead of overflowing */
}

.picker-qty-item {
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.picker-qty-name  { font-size: 15px; font-weight: 500; color: var(--text); }
.picker-qty-model { font-size: 12px; color: var(--text3); margin-top: 3px; font-family: var(--mono); }

.picker-qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.picker-qty-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  min-width: 70px;
}
.picker-qty-input {
  width: 100px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 18px;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text);
  text-align: center;
  outline: none;
}
.picker-qty-input:focus { border-color: var(--accent); }

/* Library add/edit modal sizing */
#modal .modal {
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}


/* -----------------------------------------------------------------------------
   14b. AUTOSAVE STATUS PILL
   ----------------------------------------------------------------------------- */

.autosave-pill {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 300;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.autosave-pill.show { opacity: 1; transform: translateY(0); }

.autosave-pill.saving  { color: var(--text2); }
.autosave-pill.pending { color: var(--amber);  border-color: var(--amber-border);  background: var(--amber-light); }
.autosave-pill.saved   { color: var(--accent); border-color: var(--accent-border); background: var(--accent-light); }
.autosave-pill.error   { color: var(--danger); border-color: var(--danger-border); background: var(--danger-light); }


/* -----------------------------------------------------------------------------
   15. EMPTY STATES
   ----------------------------------------------------------------------------- */

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text3);
  font-size: 13px;
  grid-column: 1 / -1;
}
.empty-icon  { font-size: 36px; margin-bottom: 12px; color: var(--border2); }
.empty-title { font-size: 15px; font-weight: 500; color: var(--text2); margin-bottom: 6px; }


/* -----------------------------------------------------------------------------
   TOAST NOTIFICATION
   ----------------------------------------------------------------------------- */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 9999;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}


/* -----------------------------------------------------------------------------
   16. PRINT STYLES
   ----------------------------------------------------------------------------- */

@media print {
  /* Hide interactive chrome */
  .panel-left,
  header,
  .add-row-btn,
  .card-header-actions,
  .card-add-btn,
  .add-row-area,
  .estimate-actions,
  .autosave-pill,
  .sub-add-btn,
  .hdr-btn,
  .toast,
  .lib-btn,
  .del-btn { display: none !important; }

  /* Show summary panel inline after the cards */
  .panel-right {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-top: 16px;
    padding: 16px !important;
    min-height: 0 !important;
  }

  /* Tear down the fixed viewport layout so content flows freely */
  html, body { height: auto !important; overflow: visible !important; }

  .app-shell {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .main {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .card {
    break-inside: avoid;
    margin-bottom: 16px;
    border: 1px solid #ccc;
  }

  /* A scrolled-off column must still print. The floors and the per-cell
     minimums that fitTextColumns() sets are what make a table wider than the
     page, so both have to go — the inline ones need !important to win. */
  .table-scroll { overflow: visible !important; }
  /* Auto, not fixed: fixed splits the width evenly and squeezes the name
     column until words break mid-word, while auto gives each column what its
     content needs within the page. */
  .table-scroll > table { min-width: 0 !important; width: 100% !important; table-layout: auto !important; }
  .table-scroll th,
  .table-scroll td { min-width: 0 !important; }

  /* An <input> clips its text at its own width no matter how much room the
     column has, so printing swaps in the plain text — see printEstimate(). */
  .print-value { display: block; white-space: pre-wrap; overflow-wrap: break-word; font-size: 12px; }
  .has-print-value > input,
  .has-print-value > select,
  .has-print-value > textarea { display: none !important; }
  .print-hide { display: none !important; }

  /* Remove row-hover styles that don't print well */
  .tbl-input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }
}


/* -----------------------------------------------------------------------------
   17. ESTIMATES PAGE
   ----------------------------------------------------------------------------- */

/* Card grid */
.est-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
  padding: 24px;
}

.est-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.est-card:hover {
  border-color: var(--border2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.est-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.est-folder-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.est-folder-badge:hover { opacity: 0.8; }

.est-folder-empty {
  font-size: 11px;
  color: var(--text3);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.est-folder-empty:hover { color: var(--accent); }

.est-card-date {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--mono);
  white-space: nowrap;
  flex-shrink: 0;
}

.est-card-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

.est-card-client {
  font-size: 12px;
  color: var(--text2);
}

.est-card-total {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
  margin-top: 4px;
}

.est-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Inline folder edit input inside card */
.inline-folder-input {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--accent-border);
  outline: none;
  width: 140px;
}
.inline-folder-input:focus { border-color: var(--accent); }

/* Sidebar search + folder row */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
}
.sidebar-header-actions { display: flex; align-items: center; gap: 10px; }
.sidebar-manage-link {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.sidebar-manage-link:hover { text-decoration: underline; }

.sidebar-search-wrap {
  padding: 0 12px 10px;
}
.sidebar-search {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--sans);
  color: var(--text);
  outline: none;
}
.sidebar-search:focus { border-color: var(--border2); }

.sidebar-folder-row {
  padding: 8px 12px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--border);
}
.sidebar-folder-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  flex-shrink: 0;
}
.sidebar-folder-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 3px 4px;
  font-size: 12px;
  font-family: var(--sans);
  color: var(--text);
  outline: none;
  min-width: 0;
}
.sidebar-folder-input:focus { border-bottom-color: var(--accent); }

/* Folder badge in sidebar list items */
.item-folder-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1.4;
}

.estimate-item-empty {
  list-style: none;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text3);
}

/* Override panel-left to not add duplicate title padding (sidebar-header handles it) */
.panel-left .panel-section-title {
  padding: 0;
}

/* Empty state sub-text */
.empty-sub {
  font-size: 13px;
  color: var(--text3);
}

/* Folder picker dropdown (inline on card) */
.folder-picker-drop {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 180px;
  max-width: 240px;
  z-index: 1000;
  overflow: hidden;
}
.folder-pick-item {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.folder-pick-item:hover { background: var(--surface2); }
.folder-pick-remove { color: var(--text3); font-size: 12px; }
.folder-pick-remove:hover { background: var(--danger-light); color: var(--danger); }
.folder-pick-new {
  border-top: 1px solid var(--border);
  padding: 8px 10px;
}
.folder-pick-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: 12px;
  font-family: var(--sans);
  color: var(--text);
  outline: none;
}
.folder-pick-input:focus { border-color: var(--accent); }

/* Rename button inside folder filter chips */
.chip-rename-btn {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.15s;
  vertical-align: middle;
  line-height: 1;
}
.filter-chip:hover .chip-rename-btn,
.filter-chip.active .chip-rename-btn { opacity: 0.7; }
.chip-rename-btn:hover { opacity: 1 !important; }

/* Cost breakdown modal — expandable category rows */
details[open] > summary .breakdown-chevron { transform: rotate(90deg); }
details > summary::-webkit-details-marker { display: none; }
details > summary { outline: none; }
details > summary:hover span:first-child { opacity: .8; }

/* =============================================================================
   RADIANT TOOLKIT — ADDITIONAL STYLES (Step 2)
   ============================================================================= */

/* User badge + logout in header */
.user-badge {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* Proposal / job manager styles */
.proposal-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
}
.proposal-shell > header { grid-column: 1 / -1; }

.proposal-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.proposal-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.proposal-sidebar-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
}
.proposal-list { list-style: none; flex: 1; overflow-y: auto; }
.proposal-item {
  padding: 11px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}
.proposal-item:hover  { background: var(--surface2); }
.proposal-item.active { background: var(--accent-light); border-left-color: var(--accent); }
.proposal-item-name   { font-size: 13px; font-weight: 500; color: var(--text); }
.proposal-item-meta   { font-size: 11px; color: var(--text3); font-family: var(--mono); margin-top: 2px; }

.proposal-main {
  overflow-y: auto;
  background: var(--bg);
}
.proposal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  color: var(--text3);
}
.proposal-empty-icon { font-size: 36px; }
.proposal-empty-title { font-size: 16px; font-weight: 500; color: var(--text2); }
.proposal-empty-sub { font-size: 13px; }

.proposal-form { max-width: 820px; margin: 0 auto; padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; }
.proposal-form-header,
.estimate-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.proposal-form-title,
.estimate-title { font-size: 18px; font-weight: 500; }
.proposal-form-actions,
.estimate-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.form-section-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-section-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text2);
}
.form-section-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 5px;
}
.form-grid input,
.form-grid textarea,
.form-grid select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus { border-color: var(--accent); }
.form-grid textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

/* Row tables (scope, fixtures, price, payments in proposals) */
.row-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.row-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.row-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.row-table tr:last-child td { border-bottom: none; }
.row-table input, .row-table select {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 13px;
  font-family: var(--sans);
  color: var(--text);
  outline: none;
}
.row-table input:focus, .row-table select:focus { border-color: var(--border2); background: var(--surface); }
.row-table .del-cell { width: 40px; text-align: center; }
.add-row-area { padding: 10px 14px; }

/* Total badge in proposal price section */
.section-total {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}

/* Pricing options — the pair of Price / Payment Schedule sections a proposal
   repeats when it puts more than one price in front of the client. */
/* The form is a flex column with a 20px gap; options sit at that rhythm while
   the Price and Payment pair inside one option is drawn closer, so the pairing
   is visible at a glance. */
#price-options { display: flex; flex-direction: column; gap: 20px; }
.price-option  { display: flex; flex-direction: column; gap: 10px; }

/* The header packs title, name, total and remove into one row, so the name
   takes the slack and the rest stay their natural size. */
.form-section-header .option-label {
  /* Sized to a name, not to the header — the slack belongs between the name
     and the total, not inside the field. */
  flex: 0 1 220px;
  min-width: 0;
  margin: 0 auto 0 12px;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text);
  outline: none;
}
.form-section-header .option-label:focus { border-color: var(--accent); }

.form-section-header .option-remove {
  margin-left: 12px;
  flex: none;
}

/* Photo grid in proposals */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.photo-item { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-remove { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* Export / generate button */
.btn-export {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-export:hover    { background: var(--accent-mid); }
.btn-export:disabled { opacity: 0.6; cursor: not-allowed; }

/* A button that opens a short menu of actions — see public/menu-button.js */
.menu-btn { position: relative; display: inline-block; }

.menu-btn > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.menu-btn-caret { font-size: 10px; opacity: 0.75; line-height: 1; }

.menu-btn-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  z-index: 200;
}
.menu-btn.open .menu-btn-list { display: block; }

.menu-btn-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius);
  background: none;
  text-align: left;
  font-family: var(--sans);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.menu-btn-item:hover,
.menu-btn-item:focus-visible { background: var(--surface2); outline: none; }
.menu-btn-item-label { font-size: 13px; }
.menu-btn-item-hint  { font-size: 11px; color: var(--text3); }

/* The menu is a screen control, never part of a printout */
@media print { .menu-btn { display: none !important; } }

/* Status badge on proposals */
.status-badge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
}
.status-draft    { background: var(--surface2); color: var(--text2); }
.status-sent     { background: var(--accent-light); color: var(--accent); }
.status-accepted { background: #e8f4e8; color: #2a6e2a; }

/* =============================================================================
   PHOTO CARDS (proposals)
   ============================================================================= */

.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.photo-card {
  position: relative;
  width: calc(50% - 8px);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.photo-preview {
  width: 100%;
  min-height: 160px;
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.15s;
}
.photo-preview:hover { border-color: var(--accent); }

.photo-thumb {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.photo-placeholder {
  text-align: center;
  color: var(--text3);
  font-size: 22px;
  line-height: 1.8;
  pointer-events: none;
}
.photo-placeholder span {
  display: block;
  font-size: 11px;
  color: var(--text3);
}

.photo-label-input {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  font-family: var(--sans);
  outline: none;
}
.photo-label-input:focus { border-color: var(--accent); }

.photo-del-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: color 0.15s;
  padding: 2px 4px;
  border-radius: 3px;
}
.photo-del-btn:hover { color: var(--danger); background: var(--danger-light); }