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

    :root {
      --bg:             #0b0f1a;
      --surface:        #111827;
      --surface2:       #182033;
      --border:         #1e2d45;
      --teal:           #1cd4c6;
      --teal-lt:        #5de8de;
      --teal-dim:       rgba(28,212,198,.12);
      --teal-dim2:      rgba(28,212,198,.07);
      --text:           #eef0f8;
      --muted:          #6b7fa0;
      --danger:         #e05c5c;
      --radius:         10px;
      --table-head-bg:  #0d1526;
    }

    /* ── LIGHT THEME ────────────────────────────────── */
    html[data-theme="light"] {
      --bg:             #eef2f7;
      --surface:        #ffffff;
      --surface2:       #f4f7fc;
      --border:         #cfd8e8;
      --teal:           #1cd4c6;
      --teal-lt:        #0a7a74;
      --teal-dim:       rgba(28,212,198,.15);
      --teal-dim2:      rgba(28,212,198,.09);
      --text:           #111827;
      --muted:          #64748b;
      --danger:         #dc2626;
      --table-head-bg:  #e4eaf5;
    }

    html[data-theme="light"] body {
      background: var(--bg);
      color: var(--text);
    }

    html[data-theme="light"] .sidebar-tool-btn:hover {
      background: rgba(0,0,0,.04);
    }

    html[data-theme="light"] select option {
      background: var(--surface2);
      color: var(--text);
    }

    html[data-theme="light"] .master-table thead tr {
      background: var(--table-head-bg);
    }

    html[data-theme="light"] .dept-bar {
      background: var(--surface);
    }

    html[data-theme="light"] header {
      background: linear-gradient(135deg, #0a101e 0%, #0f1a30 100%);
      border-bottom-color: #1e2d45;
    }

    html[data-theme="light"] .card {
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }

    html[data-theme="light"] input[type="text"],
    html[data-theme="light"] input[type="number"],
    html[data-theme="light"] select {
      background: var(--surface2);
      color: var(--text);
    }

    html[data-theme="light"] textarea {
      background: var(--surface2);
      color: var(--text);
    }

    html[data-theme="light"] .result-box .result-value {
      color: var(--teal-lt);
    }

    /* Theme toggle button */
    .theme-toggle {
      background: none;
      border: 1.5px solid rgba(255,255,255,.18);
      border-radius: 20px;
      color: rgba(255,255,255,.7);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: .75rem;
      font-weight: 600;
      padding: 6px 12px;
      transition: border-color .2s, color .2s, background .2s;
      white-space: nowrap;
      letter-spacing: .04em;
    }

    .theme-toggle:hover {
      border-color: rgba(255,255,255,.4);
      color: #fff;
      background: rgba(255,255,255,.07);
    }

    .theme-toggle svg { flex-shrink: 0; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      min-height: 100vh;
    }

    /* ── HEADER ─────────────────────────────────────── */
    header {
      background: linear-gradient(135deg, #0a101e 0%, #0f1a30 100%);
      border-bottom: 1px solid var(--border);
      padding: 14px 32px;
      display: flex;
      align-items: center;
      gap: 0;
    }

    .logo-svg-wrap {
      height: 52px;
      display: flex;
      align-items: center;
      user-select: none;
      -webkit-user-select: none;
    }

    .logo-svg-wrap svg {
      height: 52px;
      width: auto;
    }

    /* ── DEPT BAR (top) ─────────────────────────────── */
    .dept-bar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex;
      padding: 0 32px;
    }

    .dept-btn {
      background: none;
      border: none;
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 14px 22px;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      transition: color .2s, border-color .2s;
      white-space: normal;
      line-height: 1.3;
    }

    .dept-btn:hover { color: var(--text); }
    .dept-btn.active { color: var(--teal-lt); border-bottom-color: var(--teal); }

    /* ── APP BODY ────────────────────────────────────── */
    .app-body {
      display: flex;
      min-height: calc(100vh - 128px);
    }

    /* ── SIDEBAR ─────────────────────────────────────── */
    .sidebar {
      width: 235px;
      flex-shrink: 0;
      background: var(--surface);
      border-right: 1px solid var(--border);
      padding: 16px 0;
    }

    .sidebar-tool-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      background: none;
      border: none;
      border-left: 3px solid transparent;
      color: var(--muted);
      font-size: .86rem;
      font-weight: 600;
      padding: 13px 20px;
      cursor: pointer;
      text-align: left;
      transition: color .15s, background .15s, border-color .15s;
      white-space: nowrap;
    }

    .sidebar-tool-btn:hover {
      color: var(--text);
      background: rgba(255,255,255,.03);
    }

    #fl-stops-filter .btn-ghost.active {
      color: var(--teal-lt);
      border-color: var(--teal);
      background: var(--teal-dim);
    }
    .sidebar-tool-btn.active {
      color: var(--teal-lt);
      border-left-color: var(--teal);
      background: var(--teal-dim2);
    }

    /* ── CONTENT ─────────────────────────────────────── */
    .content { flex: 1; min-width: 0; overflow-y: auto; }

    /* ── PANELS ──────────────────────────────────────── */
    .panel { display: none; padding: 32px; max-width: 960px; }
    .panel.active { display: block; }
    /* Hospitality Calendar — fullbleed iframe, no padding/max-width */


    /* ══════════════════════════════════════════════════════
       WHC WAREHOUSE CALENDAR — extra classes
    ════════════════════════════════════════════════════════ */
    .iel-wrap .whc-day-grid { display: grid; grid-template-columns: repeat(7,1fr); background: var(--bg); }
    .iel-wrap .whc-day-col { border-right: 1px solid var(--border); min-height: 80px; padding: 3px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
    .iel-wrap .whc-day-col:last-child { border-right: none; }
    .iel-wrap .whc-day-col.today { background: rgba(28,212,198,0.04); }
    .iel-wrap .whc-event-chip { border-radius: 4px; padding: 3px 6px; font-size: 11px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s; display: block; line-height: 1.35; }
    .iel-wrap .whc-event-chip:hover { opacity: 0.82; }
    .iel-wrap .whc-month-grid { display: grid; grid-template-columns: repeat(7,1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
    .iel-wrap .whc-month-cell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 96px; padding: 4px; overflow: hidden; }
    .iel-wrap .whc-month-cell.empty { background: var(--surface-2); opacity: 0.45; }
    .iel-wrap .whc-month-cell.today { background: rgba(28,212,198,0.04); }
    .iel-wrap .whc-month-date { font-size: 12px; font-weight: 700; color: var(--text-muted); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 3px; }
    .iel-wrap .whc-month-cell.today .whc-month-date { background: var(--accent); color: #0b0f1a; }
    .iel-wrap .whc-event-pill { border-radius: 3px; padding: 2px 5px; font-size: 10px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; margin-bottom: 2px; transition: opacity .15s; }
    .iel-wrap .whc-event-pill:hover { opacity: 0.82; }
    .iel-wrap .whc-more { font-size: 10px; color: var(--accent); text-align: center; padding: 2px 4px; cursor: pointer; font-weight: 700; border-radius: 3px; transition: background .15s; }
    .iel-wrap .whc-more:hover { background: var(--teal-dim); }
    .iel-wrap .month-more { font-size: 10px; color: var(--accent); text-align: right; padding: 2px 5px; cursor: pointer; font-weight: 700; border-radius: 3px; transition: background .15s; }
    .iel-wrap .month-more:hover { background: var(--teal-dim); }
    .iel-wrap .whc-month-date { cursor: pointer; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; transition: background .15s, color .15s; }
    .iel-wrap .whc-month-date:hover { background: var(--accent); color: #000; }
    .iel-wrap .month-date-num { cursor: pointer; transition: color .15s; }
    .iel-wrap .month-date-num:hover { color: var(--accent); }
    #dayOverflowPopup { display: none; position: fixed; z-index: 9999; background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.5); padding: 10px 12px; min-width: 210px; max-width: 320px; max-height: 340px; overflow-y: auto; }
    #dayOverflowPopup.open { display: block; }
    .pop-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
    .pop-item { display: block; border-radius: 4px; padding: 4px 8px; margin-bottom: 3px; font-size: 11px; font-weight: 600; cursor: pointer; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s; }
    .pop-item:hover { opacity: .82; }

    /* ════════════════════════════════════════════════════════
       IEL HOSPITALITY CALENDAR  (inlined — no iframe)
       All selectors scoped under .iel-wrap
    ════════════════════════════════════════════════════════ */
    #panel-hosp-calendar { padding: 0; max-width: none; overflow: hidden; }
    #panel-wh-calendar   { padding: 0; max-width: none; overflow: hidden; }

    /* Base vars — dark mode inherits AV Calculators root palette.
       IEL-specific vars that don't exist in AV Calc are defined here. */
    .iel-wrap {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      font-size: 14px;
      color: var(--text);
      background: var(--bg);
      /* map IEL accent → AV Calc teal */
      --accent:       var(--teal);
      --accent-dark:  var(--teal-lt);
      /* IEL primary (header/settings bg) */
      --iel-hdr:      linear-gradient(135deg,#0a101e 0%,#0f1a30 100%);
      --iel-settings: #0f1a30;
      /* surface-2 and border-strong (not in AV Calc root) */
      --surface-2:    #0d1424;
      --border-strong:#2a3e5a;
      /* text shades */
      --text-muted:   var(--muted);
      --text-xmuted:  #4a5e78;
      /* ── Job status colors ── */
      --s-active:     #15803d; --s-active-bg:     #dcfce7;
      --s-confirmed:  #16a34a; --s-confirmed-bg:  #dcfce7;
      --s-tentative:  #b8a200; --s-tentative-bg:  #fefce8;
      --s-quoteonly:  #0369a1; --s-quoteonly-bg:  #dbeafe;
      --s-accounting: #7c3aed; --s-accounting-bg: #ede9fe;
      --s-credit:     #0f766e; --s-credit-bg:     #ccfbf1;
      --s-invoiced:   #1d4ed8; --s-invoiced-bg:   #dbeafe;
      --s-posted:     #475569; --s-posted-bg:     #e2e8f0;
      --s-cancelled:  #dc2626; --s-cancelled-bg:  #fee2e2;
      --s-inprogress: #0891b2; --s-inprogress-bg: #cffafe;
      --s-pending:    #0ea5e9; --s-pending-bg:    #e0f2fe;
      --s-completed:  #64748b; --s-completed-bg:  #f1f5f9;
      /* ── Transfer colors (fixed) ── */
      --transfer-out: #f59e0b; --transfer-in: #8b5cf6;
      --radius: 8px;
      --shadow: 0 1px 3px rgba(0,0,0,0.2);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    }
    /* Light theme overrides for IEL-specific vars */
    html[data-theme="light"] .iel-wrap {
      --iel-settings: #243d61;
      --surface-2:    #f8fafc;
      --border-strong:#cbd5e1;
      --text-xmuted:  #94a3b8;
      --s-posted-bg:  #e2e8f0;
      --s-completed-bg: #f1f5f9;
      --s-pending-bg: #e0f2fe;
    }

    /* ── Header ── */
    .iel-wrap .app-header { background: var(--iel-hdr); color: white; padding: 0 20px; height: 50px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(28,212,198,0.15); }
    .iel-wrap .app-logo { display: flex; align-items: center; }
    .iel-wrap .app-logo svg { height: 32px; width: auto; }
    .iel-wrap .header-right { display: flex; align-items: center; gap: 10px; }
    .iel-wrap .btn-icon { background: rgba(255,255,255,0.12); border: none; color: white; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; }
    .iel-wrap .btn-icon:hover { background: rgba(255,255,255,0.22); }
    .iel-wrap .btn-refresh { background: var(--accent); border: none; color: #0b0f1a; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
    .iel-wrap .btn-refresh:hover { background: var(--accent-dark); }
    .iel-wrap .btn-refresh:disabled { opacity: 0.6; cursor: not-allowed; }

    /* ── Settings ── */
    .iel-wrap .settings-panel { background: var(--iel-settings); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 10px 20px; display: none; align-items: center; gap: 12px; flex-wrap: wrap; }
    .iel-wrap .settings-panel.open { display: flex; }
    .iel-wrap .settings-label { color: #94a3b8; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
    .iel-wrap .token-input { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-family: monospace; width: 360px; max-width: 100%; }
    .iel-wrap .token-input::placeholder { color: rgba(255,255,255,0.4); }
    .iel-wrap .token-input:focus { outline: none; border-color: var(--accent); }
    .iel-wrap .btn-save-token { background: var(--accent); border: none; color: #0b0f1a; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 700; }
    .iel-wrap .token-status { font-size: 12px; }
    .iel-wrap .token-status.ok { color: #4ade80; }
    .iel-wrap .token-status.missing { color: #fca5a5; }

    /* ── Toolbar ── */
    .iel-wrap .toolbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .iel-wrap .toolbar-left { display: flex; align-items: center; gap: 8px; }
    .iel-wrap .toolbar-right { display: flex; align-items: center; gap: 8px; }
    .iel-wrap .btn-today { background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text); padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
    .iel-wrap .btn-today:hover { border-color: var(--accent); color: var(--accent); }
    .iel-wrap .nav-btn { background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text-muted); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; }
    .iel-wrap .nav-btn:hover { border-color: var(--accent); color: var(--accent); }
    .iel-wrap .period-label { font-size: 16px; font-weight: 700; min-width: 200px; text-align: center; }
    .iel-wrap .view-tabs { display: flex; background: var(--bg); border-radius: 7px; padding: 2px; gap: 2px; }
    .iel-wrap .view-tab { padding: 5px 14px; border: none; background: transparent; border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); }
    .iel-wrap .view-tab.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
    .iel-wrap .btn-transfer-toggle { border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-muted); padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
    .iel-wrap .btn-transfer-toggle.active { border-color: var(--transfer-out); color: var(--transfer-out); background: rgba(245,158,11,0.12); }
    .iel-wrap .btn-transfer-toggle:hover { border-color: var(--transfer-out); color: var(--transfer-out); }

    /* ── Filter Bar ── */
    .iel-wrap .filter-bar { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 8px 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .iel-wrap .filter-bar label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); white-space: nowrap; }
    .iel-wrap .filter-input { background: var(--surface); border: 1.5px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 5px; font-size: 12px; height: 28px; width: 190px; }
    .iel-wrap .filter-input:focus { outline: none; border-color: var(--accent); }
    .iel-wrap .filter-input.active { border-color: var(--accent); background: rgba(28,212,198,0.10); }
    .iel-wrap .filter-date { width: 120px; }
    .iel-wrap .filter-divider { width: 1px; height: 20px; background: var(--border-strong); margin: 0 2px; }
    .iel-wrap .btn-clear-filters { background: none; border: 1.5px solid var(--border-strong); color: var(--text-muted); padding: 3px 10px; border-radius: 5px; font-size: 12px; cursor: pointer; height: 28px; white-space: nowrap; }
    .iel-wrap .btn-clear-filters:hover { border-color: var(--s-cancelled); color: var(--s-cancelled); }
    .iel-wrap .btn-quick { background: var(--accent); border: none; color: #0b0f1a; padding: 3px 11px; border-radius: 5px; font-size: 12px; font-weight: 700; cursor: pointer; height: 28px; white-space: nowrap; }
    .iel-wrap .btn-quick:hover { background: var(--accent-dark); }
    .iel-wrap .jump-date-wrap { display: flex; align-items: center; gap: 5px; }
    .iel-wrap .jump-date-label { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
    .iel-wrap .jump-date-input { background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text); padding: 4px 7px; border-radius: 6px; font-size: 12px; height: 28px; cursor: pointer; }
    .iel-wrap .jump-date-input:focus { outline: none; border-color: var(--accent); }
    .iel-wrap .toolbar-divider { width: 1px; height: 20px; background: var(--border-strong); margin: 0 2px; }
    .iel-wrap .filter-count { font-size: 11px; font-weight: 700; color: var(--text-xmuted); white-space: nowrap; }

    /* ── Multi-Select ── */
    .iel-wrap .ms { position: relative; display: inline-block; }
    .iel-wrap .ms-btn { background: var(--surface); border: 1.5px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: 5px; font-size: 12px; height: 28px; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 120px; max-width: 180px; }
    .iel-wrap .ms-btn:hover { border-color: var(--border-strong); }
    .iel-wrap .ms.active .ms-btn { border-color: var(--accent); background: rgba(28,212,198,0.12); color: var(--accent); }
    .iel-wrap .ms-label { flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 500; }
    .iel-wrap .ms-arrow { flex-shrink: 0; font-size: 10px; color: var(--text-muted); }
    .iel-wrap .ms.open .ms-arrow { transform: rotate(180deg); }
    .iel-wrap .ms-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-md); z-index: 200; min-width: 170px; max-height: 220px; overflow-y: auto; padding: 4px 0; }
    .iel-wrap .ms.open .ms-dropdown { display: block; }
    .iel-wrap .ms-opt { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; color: var(--text); user-select: none; }
    .iel-wrap .ms-opt:hover { background: var(--bg); }
    .iel-wrap .ms-opt input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
    .iel-wrap .ms-select-all-row { font-weight: 700; border-bottom: 1px solid var(--border); margin-bottom: 2px; padding-bottom: 6px; }
    .iel-wrap .ms-divider { border: none; border-top: 1px solid var(--border); margin: 3px 0; }

    /* ── Status Bar ── */
    .iel-wrap .status-bar { padding: 8px 20px; font-size: 13px; display: none; align-items: center; gap: 8px; }
    .iel-wrap .status-bar.loading { display: flex; background: rgba(28,212,198,0.12); color: var(--accent); border-bottom: 1px solid rgba(28,212,198,0.25); }
    .iel-wrap .status-bar.error   { display: flex; background: rgba(220,38,38,0.15); color: #f87171; border-bottom: 1px solid rgba(220,38,38,0.3); }
    .iel-wrap .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: iel-spin 0.7s linear infinite; flex-shrink: 0; }
    @keyframes iel-spin { to { transform: rotate(360deg); } }

    /* ── Main ── */
    .iel-wrap .main-content { padding: 16px 20px; }
    .iel-wrap .summary-bar { display: flex; align-items: center; gap: 16px; padding: 0 0 12px; flex-wrap: wrap; }
    .iel-wrap .summary-stat { font-size: 12px; color: var(--text-muted); }
    .iel-wrap .summary-stat strong { color: var(--text); font-weight: 700; font-size: 14px; }
    .iel-wrap .calendar-legend { display: flex; align-items: center; gap: 12px; padding: 0 0 10px; flex-wrap: wrap; }
    .iel-wrap .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }
    .iel-wrap .legend-dot { width: 10px; height: 10px; border-radius: 2px; }

    /* ── Day View ── */
    .iel-wrap .day-header { font-size: 20px; font-weight: 700; margin-bottom: 14px; color: var(--accent); display: flex; align-items: baseline; gap: 8px; }
    .iel-wrap .day-sub { font-size: 13px; font-weight: 400; color: var(--text-muted); }
    .iel-wrap .day-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin: 14px 0 6px; }
    .iel-wrap .day-jobs { display: flex; flex-direction: column; gap: 10px; }
    .iel-wrap .no-jobs { background: var(--surface); border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 40px 20px; text-align: center; color: var(--text-muted); }
    .iel-wrap .no-jobs-icon { font-size: 32px; margin-bottom: 8px; }
    .iel-wrap .no-jobs-msg { font-size: 15px; font-weight: 600; margin-bottom: 4px; }

    /* ── Job Card ── */
    .iel-wrap .job-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow); cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
    .iel-wrap .job-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
    .iel-wrap .job-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
    .iel-wrap .job-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
    .iel-wrap .job-number { font-size: 11px; font-weight: 600; color: var(--text-xmuted); margin-top: 2px; }
    .iel-wrap .job-meta { display: flex; flex-wrap: wrap; gap: 10px; }
    .iel-wrap .job-meta-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
    .iel-wrap .status-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
    .iel-wrap .open-link { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; text-decoration: none; border: 1.5px solid; border-radius: 4px; padding: 2px 7px; white-space: nowrap; }

    /* ── Transfer Card ── */
    .iel-wrap .transfer-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--transfer-out); border-radius: var(--radius); padding: 10px 16px; box-shadow: var(--shadow); cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; display: flex; align-items: center; gap: 12px; }
    .iel-wrap .transfer-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
    .iel-wrap .transfer-card.inbound { border-left-color: var(--transfer-in); }
    .iel-wrap .transfer-icon { font-size: 20px; flex-shrink: 0; }
    .iel-wrap .transfer-info { flex: 1; min-width: 0; }
    .iel-wrap .transfer-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
    .iel-wrap .transfer-name { font-size: 14px; font-weight: 700; }
    .iel-wrap .transfer-meta { display: flex; flex-wrap: wrap; gap: 10px; }
    .iel-wrap .xfer-badge { padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; }
    .iel-wrap .xfer-badge.confirmed   { background: var(--s-confirmed-bg);  color: var(--s-confirmed); }
    .iel-wrap .xfer-badge.unconfirmed { background: var(--s-tentative-bg);  color: var(--s-tentative); }
    .iel-wrap .xfer-badge.dir         { background: var(--surface-2); color: var(--text-muted); }

    /* ── Week View ── */
    .iel-wrap .week-container { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
    .iel-wrap .week-header-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 2px solid var(--border); }
    .iel-wrap .week-day-header { padding: 8px; text-align: center; background: var(--surface-2); border-right: 1px solid var(--border); }
    .iel-wrap .week-day-header:last-child { border-right: none; }
    .iel-wrap .week-day-header.today { background: rgba(28,212,198,0.08); }
    .iel-wrap .week-day-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
    .iel-wrap .week-day-header.today .week-day-name { color: var(--accent); }
    .iel-wrap .week-day-num { font-size: 20px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
    .iel-wrap .week-day-header.today .week-day-num { color: var(--accent); }
    .iel-wrap .week-body { position: relative; }
    .iel-wrap .week-bg-grid { display: grid; grid-template-columns: repeat(7, 1fr); position: absolute; inset: 0; pointer-events: none; z-index: 0; }
    .iel-wrap .week-bg-col { border-right: 1px solid var(--border); }
    .iel-wrap .week-bg-col:last-child { border-right: none; }
    .iel-wrap .week-bg-col.today { background: rgba(28,212,198,0.04); }
    .iel-wrap .week-lanes { position: relative; z-index: 1; padding: 4px 0 2px; min-height: 30px; }
    .iel-wrap .week-lane { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 28px; }
    .iel-wrap .event-bar { border-radius: 4px; padding: 4px 8px; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; margin: 2px 3px; color: white; transition: opacity 0.15s; line-height: 1.4; }
    .iel-wrap .event-bar:hover { opacity: 0.85; }
    .iel-wrap .week-transfer-row { border-top: 1px dashed var(--border-strong); display: grid; grid-template-columns: repeat(7, 1fr); position: relative; z-index: 1; }
    .iel-wrap .week-transfer-col { overflow: hidden; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 3px 3px; }
    .iel-wrap .transfer-chip { border-radius: 4px; padding: 3px 6px; font-size: 11px; font-weight: 700; cursor: pointer; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.15s; display: flex; align-items: center; gap: 3px; width: 100%; }
    .iel-wrap .transfer-chip:hover { opacity: 0.82; }
    .iel-wrap .week-empty { padding: 16px; text-align: center; font-size: 12px; color: var(--text-xmuted); }

    /* ── Month View ── */
    .iel-wrap .month-container { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
    .iel-wrap .month-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 2px solid var(--border); }
    .iel-wrap .month-dow-label { padding: 6px 8px; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); background: var(--surface-2); border-right: 1px solid var(--border); }
    .iel-wrap .month-dow-label:last-child { border-right: none; }
    .iel-wrap .month-week-row { border-bottom: 1px solid var(--border); }
    .iel-wrap .month-week-row:last-child { border-bottom: none; }
    .iel-wrap .month-date-row { display: grid; grid-template-columns: repeat(7, 1fr); }
    .iel-wrap .month-date-cell { padding: 4px 6px; border-right: 1px solid var(--border); min-height: 28px; }
    .iel-wrap .month-date-cell:last-child { border-right: none; }
    .iel-wrap .month-date-cell.other-month .month-date-num { color: var(--text-xmuted); }
    .iel-wrap .month-date-num { font-size: 12px; font-weight: 700; color: var(--text-muted); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
    .iel-wrap .month-date-cell.today .month-date-num { background: var(--accent); color: #0b0f1a; }
    .iel-wrap .month-lanes { padding: 2px 0 2px; }
    .iel-wrap .month-lane { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 22px; }
    .iel-wrap .month-event-bar { border-radius: 3px; padding: 2px 6px; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; margin: 1px 2px; color: white; transition: opacity 0.15s; }
    .iel-wrap .month-event-bar:hover { opacity: 0.85; }
    .iel-wrap .month-transfer-row { display: grid; grid-template-columns: repeat(7, 1fr); padding-bottom: 3px; }
    .iel-wrap .month-transfer-col { overflow: hidden; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 0 2px 1px; }
    .iel-wrap .month-transfer-chip { border-radius: 3px; padding: 2px 5px; font-size: 10px; font-weight: 700; cursor: pointer; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.15s; display: flex; align-items: center; gap: 2px; width: 100%; }
    .iel-wrap .month-transfer-chip:hover { opacity: 0.82; }

    /* ── Modal ── */
    .iel-wrap .iel-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9000; display: none; align-items: center; justify-content: center; padding: 20px; }
    .iel-wrap .iel-modal-backdrop.open { display: flex; }
    .iel-wrap .iel-modal { background: var(--surface); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); width: 100%; max-width: 520px; max-height: 80vh; overflow-y: auto; }
    .iel-wrap .modal-header { padding: 20px 20px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
    .iel-wrap .modal-title { font-size: 18px; font-weight: 700; line-height: 1.3; }
    .iel-wrap .modal-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .iel-wrap .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 18px; flex-shrink: 0; }
    .iel-wrap .modal-body { padding: 16px 20px; }
    .iel-wrap .modal-field { margin-bottom: 14px; }
    .iel-wrap .modal-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 4px; }
    .iel-wrap .modal-field-value { font-size: 14px; font-weight: 500; }
    .iel-wrap .modal-raw { margin-top: 16px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
    .iel-wrap .modal-raw-toggle { background: var(--surface-2); border: none; width: 100%; padding: 8px 12px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; display: flex; justify-content: space-between; }
    .iel-wrap .modal-raw-content { display: none; padding: 10px 12px; font-size: 11px; font-family: monospace; background: #0d1526; color: #94a3b8; overflow-x: auto; max-height: 220px; white-space: pre-wrap; word-break: break-all; }
    .iel-wrap .modal-raw-content.open { display: block; }

    /* ── CARDS ───────────────────────────────────────── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px;
      margin-bottom: 24px;
    }

    .card-title {
      font-size: .88rem;
      font-weight: 700;
      color: var(--teal-lt);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* ── FORM ELEMENTS ───────────────────────────────── */
    .form-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
    .form-group { flex: 1; min-width: 200px; }

    label {
      display: block;
      font-size: .72rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 8px;
    }

    input[type="text"],
    input[type="number"],
    select {
      width: 100%;
      background: var(--surface2);
      border: 1.5px solid var(--border);
      border-radius: 7px;
      color: var(--text);
      font-size: .95rem;
      padding: 11px 14px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      appearance: none;
      -webkit-appearance: none;
      min-height: 44px; /* touch target */
    }

    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7fa0' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px;
      cursor: pointer;
    }

    select option { background: var(--surface2); color: var(--text); }

    input[type="text"]:focus,
    input[type="number"]:focus,
    select:focus {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px var(--teal-dim);
    }

    input::placeholder { color: var(--muted); opacity: .65; }
    textarea { width: 100%; background: var(--surface2); border: 1.5px solid var(--border);
      border-radius: 7px; color: var(--text); font-size: .95rem; padding: 11px 14px;
      outline: none; transition: border-color .2s, box-shadow .2s; line-height: 1.5;
      min-height: 44px; }
    textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
    textarea::placeholder { color: var(--muted); opacity: .65; }

    .hint {
      font-size: .73rem;
      color: var(--muted);
      margin-top: 6px;
      line-height: 1.5;
    }

    .btn {
      background: linear-gradient(135deg, var(--teal) 0%, #0fa89c 100%);
      color: #031a18;
      border: none;
      border-radius: 7px;
      font-size: .88rem;
      font-weight: 800;
      padding: 12px 28px;
      cursor: pointer;
      letter-spacing: .05em;
      text-transform: uppercase;
      transition: opacity .2s, transform .1s;
      min-height: 44px;
      touch-action: manipulation;
    }

    .btn:hover { opacity: .88; }
    .btn:active { transform: scale(.98); }

    .btn-ghost {
      background: transparent;
      border: 1.5px solid var(--border);
      color: var(--muted);
      border-radius: 7px;
      font-size: .82rem;
      font-weight: 600;
      padding: 10px 20px;
      cursor: pointer;
      transition: border-color .2s, color .2s;
    }

    .btn-ghost:hover { border-color: var(--teal); color: var(--teal-lt); }

    /* ── RESULT BOX ──────────────────────────────────── */
    .result-box {
      background: var(--teal-dim);
      border: 1.5px solid var(--teal);
      border-radius: var(--radius);
      padding: 22px 24px;
      margin-top: 20px;
      display: none;
    }

    .result-box.visible { display: block; }

    .result-box .result-label {
      font-size: .72rem;
      font-weight: 700;
      color: var(--teal);
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: 6px;
    }

    .result-box .result-value {
      font-size: 2.8rem;
      font-weight: 800;
      color: var(--teal-lt);
      line-height: 1;
    }

    .result-box .result-sub {
      font-size: .82rem;
      color: var(--muted);
      margin-top: 8px;
    }

    .error-box {
      background: rgba(224,92,92,.1);
      border: 1.5px solid var(--danger);
      border-radius: var(--radius);
      padding: 12px 16px;
      margin-top: 16px;
      color: #f08080;
      font-size: .85rem;
      display: none;
    }

    .error-box.visible { display: block; }

    /* ── AMP/WEIGHT MASTER TABLE ─────────────────────── */
    /*
     * One unified table — category rows act as dividers.
     * Fixed layout ensures all columns align perfectly.
     */
    .master-table-wrap {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 24px;
    }

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

    /* Column widths */
    .master-table col.col-item  { width: auto; }
    .master-table col.col-amp   { width: 90px; }
    .master-table col.col-wt    { width: 100px; }
    .master-table col.col-qty   { width: 90px; }

    /* Header row */
    .master-table thead tr {
      background: var(--table-head-bg);
    }

    .master-table thead th {
      font-size: .68rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .1em;
      padding: 11px 16px;
      text-align: left;
      border-bottom: 1px solid var(--border);
    }

    .master-table thead th:not(:first-child) { text-align: center; }

    /* Category header rows */
    .master-table tr.cat-row td {
      padding: 10px 16px;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      border-top: 2px solid var(--border);
    }

    .master-table tr.cat-row:first-of-type td { border-top: none; }

    .cat-audio    td { color: #4e9de0; background: rgba(78,157,224,.07); }
    .cat-video    td { color: #9b6ee8; background: rgba(155,110,232,.07); }
    .cat-led      td { color: #1cd4c6; background: rgba(28,212,198,.07); }
    .cat-lighting td { color: #e8a84e; background: rgba(232,168,78,.07); }

    .master-table tr.cat-row .cat-dot {
      display: inline-block;
      width: 8px; height: 8px;
      border-radius: 50%;
      margin-right: 9px;
      vertical-align: middle;
    }

    .audio-dot    { background: #4e9de0; }
    .video-dot    { background: #9b6ee8; }
    .led-dot      { background: #1cd4c6; }
    .lighting-dot { background: #e8a84e; }

    /* Data rows */
    .master-table tbody tr.data-row {
      border-top: 1px solid rgba(30,45,69,.6);
      transition: background .15s;
    }

    .master-table tbody tr.data-row:hover { background: rgba(255,255,255,.025); }

    .master-table td.col-name {
      padding: 10px 16px;
      font-size: .86rem;
      color: var(--text);
    }

    .master-table td.col-amp-val {
      text-align: center;
      font-size: .86rem;
      font-weight: 600;
      color: #6bb8f0;
    }

    .master-table td.col-wt-val {
      text-align: center;
      font-size: .86rem;
      font-weight: 600;
      color: #4ec98a;
    }

    .master-table td.col-na {
      text-align: center;
      font-size: .82rem;
      color: var(--muted);
    }

    .master-table td.col-qty-cell {
      text-align: center;
      padding: 6px 8px;
    }

    /* Subtotal rows */
    .master-table tr.subtotal-row td {
      padding: 9px 16px;
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--muted);
      border-top: 1px solid var(--border);
      background: rgba(13,21,38,.5);
      text-align: right;
    }

    .master-table tr.subtotal-row td:first-child { text-align: center; padding-right: 8px; }
    .master-table tr.subtotal-row td:nth-child(2) { text-align: right; padding-right: 8px; }
    .master-table tr.subtotal-row td.sub-amp  { text-align: center; color: #6bb8f0; }
    .master-table tr.subtotal-row td.sub-wt   { text-align: center; color: #4ec98a; }
    .master-table tr.subtotal-row td.sub-qty  { text-align: center; }

    /* QTY input inside table */
    .qty-input {
      width: 68px !important;
      padding: 7px 6px !important;
      text-align: center !important;
      font-weight: 700;
      font-size: .86rem !important;
    }

    /* ── GRAND TOTALS ────────────────────────────────── */
    .grand-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }

    .grand-card {
      background: var(--teal-dim);
      border: 1.5px solid var(--teal);
      border-radius: 9px;
      padding: 18px 20px;
    }

    .grand-card .gc-label {
      font-size: .68rem;
      font-weight: 800;
      color: var(--teal);
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: 4px;
    }

    .grand-card .gc-val {
      font-size: 2.2rem;
      font-weight: 800;
      color: var(--teal-lt);
      line-height: 1.1;
    }

    .grand-card .gc-unit {
      font-size: .72rem;
      color: var(--muted);
      margin-top: 2px;
    }

    .gc-breakdown { margin-top: 12px; border-top: 1px solid rgba(28,212,198,.2); padding-top: 10px; }
    .gc-row { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); padding: 2px 0; }
    .gc-row span:last-child { color: var(--text); font-weight: 600; }

    /* ── INFO CARD ───────────────────────────────────── */
    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 16px;
    }

    .info-block {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 14px 16px;
    }

    .info-block .ib-label {
      font-size: .68rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 5px;
    }

    /* ── RESPONSIVE ──────────────────────────────────── */
    @media (max-width: 700px) {

      /* Layout */
      .app-body { flex-direction: column; }
      .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 6px 0;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
      }
      .sidebar-tool-btn {
        flex: 1 1 auto;
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 10px 12px;
        font-size: .78rem;
        white-space: nowrap;
        min-width: 0;
      }
      .sidebar-tool-btn.active {
        border-left-color: transparent;
        border-bottom-color: var(--teal);
      }
      .dept-bar { padding: 0 10px; }
      .dept-btn { padding: 11px 12px; font-size: .72rem; }
      .panel { padding: 16px 12px; }
      .card { padding: 16px 14px; }

      /* Form rows stack vertically */
      .form-row { flex-direction: column; gap: 14px; }
      .form-group { min-width: 0; }

      /* Grand totals grid */
      .grand-grid { grid-template-columns: 1fr; }
      .info-grid  { grid-template-columns: 1fr; }

      /* Amp & Weight table — horizontal scroll */
      .master-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .master-table { min-width: 480px; }

      /* Trucking address textarea */
      textarea { font-size: .9rem; }

      /* Flowsheet preview table — horizontal scroll */
      #fsPreview .tbl-wrap,
      #fsPreview > div { overflow-x: auto; -webkit-overflow-scrolling: touch; }

      /* Freight Info — time row wraps nicely */
      #panel-freight .form-row > .form-group > div[style*="display:flex"] {
        flex-wrap: wrap;
        gap: 6px;
      }
      #panel-freight select { font-size: .85rem; }

      /* Result boxes */
      .result-value { font-size: 2.2rem; }
      .grand-card .gc-val { font-size: 1.8rem; }

      /* Camera lens calc result grid */
      #cl-result > div:first-child { grid-template-columns: 1fr; }

      /* Buttons full width on mobile */
      .btn, .btn-ghost { padding: 12px 20px; }

      /* Mirror buttons in Freight stack vertically */
      #panel-freight [style*="teal-dim2"] { flex-direction: column; align-items: flex-start; }
      #panel-freight [style*="teal-dim2"] .btn-ghost { width: 100%; text-align: left; }

      /* API key input full width */
      #fsApiKeySection > div { flex-wrap: wrap; }
      #fsApiKeyInput { min-width: 0; }

      /* Header logo smaller */
      .logo-svg-wrap { height: 38px; }
      .logo-svg-wrap svg { height: 38px; }

      /* How It Works info grid full width */
      .info-block { padding: 12px; }
    }

    /* Extra small phones */
    @media (max-width: 400px) {
      .sidebar-tool-btn { font-size: .72rem; padding: 8px 10px; }
      .dept-btn { font-size: .68rem; padding: 10px 10px; }
      .panel { padding: 12px 10px; }
      .result-value { font-size: 1.8rem; }
    }
    /* ── LENS MODE TOGGLE ────────────────────────────────────── */
    .lens-mode-btn {
      background: var(--surface2);
      border: 1.5px solid var(--border);
      border-radius: 7px;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 600;
      padding: 9px 18px;
      cursor: pointer;
      transition: all .2s;
    }
    .lens-mode-btn:hover { border-color: var(--teal); color: var(--text); }
    .lens-mode-btn.active { background: var(--teal-dim); border-color: var(--teal); color: var(--teal-lt); }

/* ═══ CEP_Split additions (not in v2.75) ═══════════════════════ */
/* label shrinks + ellipsizes so the star never bleeds past the sidebar edge */
.sidebar-tool-btn .tool-label { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pin-star { flex-shrink: 0; margin-left: 4px; opacity: .45; font-size: .95rem; }
.pin-star:hover { opacity: 1; color: var(--teal); }

/* ═══ Mobile Phase 1 (V2.1) — gaps in the existing ≤700px handling ═══
   Sidebar already wraps into tabs at 700px (v2.75 behavior, kept).
   These rules stop wide content from blowing out the layout. */
@media (max-width: 700px) {
  /* Wide tables scroll in place instead of stretching the page.
     .master-table excluded: display:block would void its table-layout:fixed
     column widths — it fits the screen via the compressed cols below. */
  .panel table:not(.master-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Catch-all: fixed-width content (canvas wiring diagrams, min-width tables)
     scrolls inside its panel — never squashed, never breaking the layout */
  .panel { overflow-x: auto; }
  /* Inline multi-column form grids stack to one column */
  .panel [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Inputs and media never overflow the screen */
  .panel input, .panel select, .panel textarea { max-width: 100%; }
  .panel img, .panel svg { max-width: 100%; height: auto; }
  /* Pin stars are desktop furniture — pinning happens at a desk */
  .pin-star { display: none; }
  /* Dashboard breathing room on phones */
  .dash-wrap { margin: 18px auto; padding: 0 14px; }
  .dash-card { padding: 10px 12px; }
}

/* Mobile: sidebar tabs size to content so 2-3 fit per row (base rule's
   width:100% + label flex:1 otherwise force one tool per row) */
@media (max-width: 700px) {
  .sidebar-tool-btn { width: auto; }
  .sidebar-tool-btn .tool-label { flex: 0 0 auto; }
}

/* Mobile Phase 3 (V2.2): calendars — phones default to Day view (set in
   calendars.html init); header wraps instead of clipping at 50px */
@media (max-width: 700px) {
  .iel-wrap .app-header { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .iel-wrap .toolbar-left { flex-wrap: wrap; }
  .iel-wrap .toolbar-right { flex-wrap: wrap; justify-content: flex-end; }
}

/* Mobile: calendar view tabs get finger-sized targets */
@media (max-width: 700px) {
  .iel-wrap .view-tab { padding: 9px 13px; }
}

/* Mobile: Amp & Weight table — compress fixed columns so QTY/ITEM/AMPS/WEIGHT
   all fit on a phone (table-layout:fixed honors these; item column wraps) */
@media (max-width: 700px) {
  .master-table { min-width: 0; }   /* void v2.75's 480px scroll floor — it fits now */
  .master-table col.col-qty { width: 54px; }
  .master-table col.col-amp { width: 52px; }
  .master-table col.col-wt  { width: 62px; }
  .master-table th, .master-table td { padding-left: 6px; padding-right: 6px; font-size: .78rem; }
  .qty-input { width: 44px !important; padding: 8px 2px !important; }
}

/* Mobile: hide the signed-in email in the header chip (keeps the Sign out button).
   The email crowds the header on phones and isn't needed. */
@media (max-width: 700px) {
  #cep-user-chip span { display: none; }
}