/* ─────────────────────────────────────────────────────────────────────────────
   app.css — All visual styling for RTG Field Tools
   Edit this file to change colors, fonts, layout, spacing, etc.
   ─────────────────────────────────────────────────────────────────────────────

   TABLE OF CONTENTS
   1.  CSS Variables (colors, fonts — change theme here)
   2.  Reset & Base
   3.  Scrollbars
   4.  Login Screen
   5.  App Header
   6.  Hub Screen
   7.  Tool Cards
   8.  Settings Modal
   9.  Work Order Screen Layout
   10. Calendar Panel (left)
   11. Event Cards
   12. Form Panel (right)
   13. Tab Bar
   14. Form Fields
   15. Rich Text Editor
   16. Labor Table
   17. Parts Entry
   18. Output Tab
   19. Toast Notifications
   20. Animations
   ──────────────────────────────────────────────────────────────────────────── */

/* ── 1. CSS Variables ──────────────────────────────────────────────────────── */
:root {
  /* Brand colors */
  --deep:       #0b1520;
  --slate:      #131f2e;
  --panel:      #1a2d40;
  --panel2:     #203448;
  --border:     #1e3347;
  --border2:    #254560;
  --cyan:       #00b8d9;
  --cyan-dim:   #006d82;
  --cyan-bg:    rgba(0,184,217,0.07);
  --cyan-glow:  rgba(0,184,217,0.12);
  --orange:     #f26522;
  --teal:       #00c49a;

  /* Text */
  --text:       #ccdde8;
  --text-dim:   #4d6b82;
  --text-mid:   #7a9db5;
  --white:      #ffffff;

  /* Status */
  --danger:     #e53e3e;
  --success:    #38a169;
  --warning:    #d97706;

  /* Form fields (white background for easy reading) */
  --field-bg:   #f7fafc;
  --field-fg:   #0b1520;
  --field-bdr:  #cbd5e0;

  /* Fonts */
  --font-ui:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;
  --font-head:  'Rajdhani', 'Segoe UI', sans-serif;

  /* Misc */
  --radius:     6px;
  --shadow:     0 4px 24px rgba(0,0,0,0.4);
}

/* ── 2. Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--deep);
  color:       var(--text);
  font-family: var(--font-ui);
  font-size:   14px;
  min-height:  100vh;
  overflow-x:  hidden;
}

/* Subtle grid texture on background */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0,184,217,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,184,217,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ── 3. Scrollbars ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-track    { background: var(--deep); }
::-webkit-scrollbar-thumb    { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-dim); }

/* ── 4. Screens ────────────────────────────────────────────────────────────── */
.screen { display: none; position: relative; z-index: 1; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; }

/* ── 5. Login Screen ───────────────────────────────────────────────────────── */
#screen-login {
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(0,184,217,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 20%, rgba(242,101,34,0.04) 0%, transparent 50%),
    var(--deep);
}

.login-card {
  width: 420px;
  background: var(--slate);
  border: 1px solid var(--border2);
  border-top: 3px solid var(--cyan);
  border-radius: 12px;
  padding: 48px 40px;
  box-shadow: var(--shadow), 0 0 60px rgba(0,184,217,0.05);
  animation: fadeUp 0.5s ease;
}

.login-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }
.login-logo-mark {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-dim));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.login-logo-title {
  font-family: var(--font-head);
  font-size: 1.4rem; font-weight: 700;
  color: var(--white); letter-spacing: 0.03em;
}
.login-logo-sub {
  font-size: 0.73rem; color: var(--text-dim);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.login-heading {
  font-family: var(--font-head);
  font-size: 1.6rem; font-weight: 700; color: var(--white); margin-bottom: 8px;
}
.login-sub { font-size: 0.88rem; color: var(--text-mid); margin-bottom: 32px; line-height: 1.6; }

.btn-ms-login {
  width: 100%; padding: 14px 20px;
  background: var(--cyan); color: var(--deep);
  border: none; border-radius: 8px; cursor: pointer;
  font-family: var(--font-head); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(0,184,217,0.25);
}
.btn-ms-login:hover  { background: #1dcfef; box-shadow: 0 6px 24px rgba(0,184,217,0.35); }
.btn-ms-login:active { transform: scale(0.98); }

.login-note {
  margin-top: 20px; text-align: center;
  font-size: 0.75rem; color: var(--text-dim); line-height: 1.6;
}

/* ── 6. App Header ─────────────────────────────────────────────────────────── */
.app-header {
  display: flex; align-items: stretch;
  background: var(--slate); border-bottom: 2px solid var(--cyan);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hdr-stripe { width: 5px; background: var(--cyan); flex-shrink: 0; }
.hdr-inner  {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 24px;
}
.hdr-left  { display: flex; align-items: center; gap: 20px; }
.hdr-right { display: flex; align-items: center; gap: 10px; }

.hdr-title {
  font-family: var(--font-head);
  font-size: 1.25rem; font-weight: 700; color: var(--white); letter-spacing: 0.03em;
}
.hdr-title span { color: var(--cyan); }

.hdr-user {
  font-size: 0.78rem; color: var(--text-dim);
  background: var(--panel); border: 1px solid var(--border2);
  padding: 4px 12px; border-radius: 20px;
  display: flex; align-items: center; gap: 6px;
}
.hdr-user-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

.hdr-btn {
  background: var(--panel); border: 1px solid var(--border2);
  color: var(--text-mid); padding: 6px 14px; border-radius: 5px;
  cursor: pointer; font-family: inherit; font-size: 0.8rem;
  transition: all 0.15s; display: flex; align-items: center; gap: 6px;
}
.hdr-btn:hover { border-color: var(--cyan); color: var(--cyan); }

.brand-badge {
  font-family: var(--font-head);
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.15em; color: var(--cyan); opacity: 0.6;
  text-align: right; line-height: 1.4; padding-right: 4px;
}

/* ── 7. Hub Screen ─────────────────────────────────────────────────────────── */
#screen-hub {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0,184,217,0.05) 0%, transparent 50%),
    var(--deep);
}

.hub-main {
  flex: 1; max-width: 1100px; margin: 0 auto;
  padding: 52px 32px 80px; width: 100%;
}

.hub-hero { text-align: center; margin-bottom: 56px; }
.hub-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700;
  color: var(--white); letter-spacing: 0.02em; line-height: 1.1; margin-bottom: 14px;
}
.hub-hero h1 em { font-style: normal; color: var(--cyan); }
.hub-hero p     { font-size: 1rem; color: var(--text-mid); max-width: 480px; margin: 0 auto; line-height: 1.7; }

.section-rule {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 28px;
}
.section-rule::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── 8. Tool Cards ─────────────────────────────────────────────────────────── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px; margin-bottom: 48px;
}

.tool-card {
  background: var(--slate); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: fadeUp 0.4s ease both;
  display: flex; flex-direction: column;
}
.tool-card:nth-child(1) { animation-delay: 0.05s; }
.tool-card:nth-child(2) { animation-delay: 0.10s; }
.tool-card:nth-child(3) { animation-delay: 0.15s; }
.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px var(--cyan-dim);
  border-color: var(--cyan-dim);
}
.tool-card.disabled { opacity: 0.45; cursor: default; pointer-events: none; }

.card-bar            { height: 3px; background: var(--cyan); }
.card-bar.orange     { background: var(--orange); }
.card-bar.teal       { background: var(--teal); }
.card-body           { padding: 24px; flex: 1; }
.card-icon           { font-size: 2rem; margin-bottom: 12px; display: block; }
.card-title {
  font-family: var(--font-head);
  font-size: 1.25rem; font-weight: 700;
  color: var(--white); margin-bottom: 6px; letter-spacing: 0.02em;
}
.card-desc  { font-size: 0.85rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 16px; }
.card-tags  { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.card-tag {
  font-size: 0.72rem; padding: 2px 9px; border-radius: 20px;
  background: var(--panel); color: var(--text-dim);
  border: 1px solid var(--border2);
  font-family: var(--font-mono);
}
.card-cta {
  font-family: var(--font-head);
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cyan); display: flex; align-items: center; gap: 6px;
  transition: gap 0.15s;
}
.tool-card:hover .card-cta { gap: 10px; }
.card-badge {
  display: inline-block; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 3px; margin-bottom: 10px;
  background: rgba(0,184,217,0.1); color: var(--cyan);
  border: 1px solid var(--cyan-dim);
  font-family: var(--font-mono);
}

/* ── 9. Settings Modal ─────────────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--slate); border: 1px solid var(--border2);
  border-top: 3px solid var(--cyan); border-radius: 10px;
  width: 460px; padding: 32px; box-shadow: var(--shadow);
  animation: fadeUp 0.2s ease;
}
.modal-title {
  font-family: var(--font-head);
  font-size: 1.2rem; font-weight: 700; color: var(--white); margin-bottom: 6px;
}
.modal-sub { font-size: 0.83rem; color: var(--text-mid); margin-bottom: 24px; line-height: 1.6; }

.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.setting-row:last-of-type { border-bottom: none; }
.setting-label { font-size: 0.9rem; color: var(--text); font-weight: 500; }
.setting-desc  { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }

/* Toggle switch */
.toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border2); border-radius: 24px; cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: var(--text-dim); border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle input:checked + .toggle-slider              { background: var(--cyan-dim); }
.toggle input:checked + .toggle-slider::before      { transform: translateX(20px); background: var(--cyan); }

.modal-close {
  margin-top: 20px; width: 100%; padding: 10px;
  background: var(--panel); border: 1px solid var(--border2);
  color: var(--text); border-radius: var(--radius); cursor: pointer;
  font-family: var(--font-head); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.05em; transition: border-color 0.15s, color 0.15s;
}
.modal-close:hover { border-color: var(--cyan); color: var(--cyan); }

/* ── 10. Work Order Screen Layout ──────────────────────────────────────────── */
.wo-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: calc(100vh - 58px);
  overflow: hidden;
}

/* ── 11. Calendar Panel (left) ─────────────────────────────────────────────── */
.cal-panel {
  background: var(--slate); border-right: 1px solid var(--border2);
  display: flex; flex-direction: column;
  height: calc(100vh - 58px);
  overflow: hidden;
  position: relative;
}
.cal-section      { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cal-section-title {
  font-family: var(--font-mono);
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 10px;
}
.cal-select {
  width: 100%; background: var(--panel); border: 1px solid var(--border2);
  color: var(--text); padding: 7px 10px; border-radius: 5px;
  font-family: inherit; font-size: 0.83rem; margin-bottom: 10px; cursor: pointer;
}
.cal-select:focus { outline: none; border-color: var(--cyan); }

.date-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.date-field  { display: flex; flex-direction: column; gap: 3px; }
.date-label  { font-size: 0.72rem; color: var(--text-dim); font-weight: 500; }
.date-input  {
  background: var(--panel); border: 1px solid var(--border2);
  color: var(--text); padding: 6px 8px; border-radius: 4px;
  font-family: inherit; font-size: 0.82rem; width: 100%;
}
.date-input:focus { outline: none; border-color: var(--cyan); }

.preset-row  { display: flex; gap: 5px; flex-wrap: wrap; }
.preset-btn  {
  font-size: 0.72rem; padding: 4px 9px; border-radius: 4px;
  border: 1px solid var(--border2); background: transparent;
  color: var(--text-dim); cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.preset-btn:hover         { border-color: var(--cyan); color: var(--cyan); }

/* ── 12. Event Cards ───────────────────────────────────────────────────────── */
.events-scroll  { flex: 1; overflow-y: auto; padding: 8px; min-height: 0; }
.events-empty   { text-align: center; padding: 40px 16px; color: var(--text-dim); font-size: 0.84rem; line-height: 1.7; }
.events-loading { text-align: center; padding: 20px; color: var(--text-dim); font-size: 0.84rem; }

.event-card {
  padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--panel);
  margin-bottom: 5px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.event-card:hover    { border-color: var(--border2); background: var(--panel2); }
.event-card.selected { border-color: var(--cyan); background: var(--cyan-bg); }

.event-subj { font-weight: 600; font-size: 0.86rem; color: var(--text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-when { font-size: 0.74rem; color: var(--text-dim); font-family: var(--font-mono); }
.event-loc  { font-size: 0.74rem; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.use-btn {
  margin: 8px; padding: 10px; border-radius: var(--radius);
  background: var(--cyan); color: var(--deep);
  border: none; cursor: pointer; width: calc(100% - 16px);
  font-family: var(--font-head); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 0.15s;
}
.use-btn:hover { background: #1dcfef; }

/* ── 13. Form Panel (right) ────────────────────────────────────────────────── */
.form-panel { overflow-y: auto; background: var(--deep); }

/* ── 14. Tab Bar ───────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex; background: var(--slate);
  border-bottom: 1px solid var(--border2);
  padding: 0 20px; gap: 2px;
  position: sticky; top: 0; z-index: 50;
}
.tab-btn {
  font-family: var(--font-head); font-size: 0.88rem; font-weight: 600;
  letter-spacing: 0.05em; padding: 12px 18px;
  border: none; background: transparent; color: var(--text-dim);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  position: relative; top: 1px;
}
.tab-btn:hover        { color: var(--text); }
.tab-btn.active       { color: var(--cyan); border-bottom-color: var(--cyan); }

.tab-pane             { display: none; padding: 24px 28px; }
.tab-pane.active      { display: block; }

/* Report tab — flex column so editors fill available space */
#tab-report {
  display: none;
  flex-direction: column;
  min-height: calc(100vh - 160px);
}
#tab-report.active {
  display: flex;
  flex-direction: column;
}
/* Each RTE section grows to fill available space */
#tab-report .rte-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#tab-report .rte-wrap:last-of-type {
  flex: 0 0 auto;
}

/* ── 15. Form Fields ───────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-bottom: 20px; }
.span2     { grid-column: span 2; }

.f-group   { display: flex; flex-direction: column; gap: 5px; }
.f-label   {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim);
  font-family: var(--font-mono);
}
.f-input, .f-textarea, .f-select {
  background: var(--field-bg); color: var(--field-fg);
  border: 1.5px solid var(--field-bdr); border-radius: 5px;
  padding: 8px 10px; font-family: var(--font-ui); font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.f-input:focus, .f-textarea:focus, .f-select:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,184,217,0.1);
}
.f-textarea { resize: vertical; min-height: 80px; }

.sec-head {
  font-family: var(--font-head);
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.05em; color: var(--cyan);
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border2);
}

/* ── 16. Rich Text Editor ──────────────────────────────────────────────────── */
.rte-wrap    { border: 1.5px solid var(--border2); border-radius: var(--radius); overflow: hidden; }
.rte-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px;
  background: var(--panel); border-bottom: 1px solid var(--border2);
}
.rte-btn {
  background: transparent; border: 1px solid transparent;
  color: var(--text-mid); padding: 4px 7px; border-radius: 3px;
  cursor: pointer; font-size: 0.82rem; font-family: inherit;
  transition: all 0.12s; line-height: 1;
}
.rte-btn:hover  { background: var(--panel2); color: var(--text); border-color: var(--border2); }
.rte-btn.active { background: var(--cyan-bg); color: var(--cyan); border-color: var(--cyan-dim); }
.rte-sep    { width: 1px; background: var(--border2); margin: 2px 4px; align-self: stretch; }
.rte-select {
  background: var(--panel2); border: 1px solid var(--border2);
  color: var(--text-mid); padding: 3px 5px; border-radius: 3px;
  font-size: 0.8rem; cursor: pointer; font-family: inherit;
}
.rte-editor {
  background: var(--field-bg); color: var(--field-fg);
  padding: 12px 14px; outline: none;
  font-family: var(--font-ui); font-size: 0.92rem; line-height: 1.6;
  /* Default min-height fallback */
  min-height: 180px;
}

/* Summary — takes ~2/3 of available vertical space */
#rte-summary  { min-height: clamp(180px, 38vh, 600px); }

/* Follow-up — takes ~1/3 (half of summary) */
#rte-followup { min-height: clamp(100px, 18vh, 300px); }
.rte-editor img             { max-width: 100%; cursor: move; border: 2px solid transparent; border-radius: 3px; transition: border-color 0.15s; display: inline-block; margin: 2px; }
.rte-editor img.selected    { border-color: var(--cyan); }
.rte-hint { font-size: 0.73rem; color: var(--text-dim); margin-top: 5px; text-align: right; }

/* ── 17. Labor Table ───────────────────────────────────────────────────────── */
.labor-tbl { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 0.83rem; }
.labor-tbl th {
  background: var(--panel); color: var(--text-dim);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px; text-align: left; border-bottom: 1px solid var(--border2);
  font-family: var(--font-mono); white-space: nowrap;
}
.labor-tbl td              { padding: 4px 5px; border-bottom: 1px solid var(--border); background: var(--slate); }
.labor-tbl tr:hover td     { background: var(--panel); }
.tbl-input {
  width: 100%; background: var(--field-bg); color: var(--field-fg);
  border: 1px solid var(--field-bdr); border-radius: 3px;
  padding: 4px 6px; font-family: inherit; font-size: 0.82rem;
}
.tbl-input:focus            { outline: none; border-color: var(--cyan); }
.td-static                  { font-size: 0.83rem; color: var(--text); padding: 0 6px; white-space: nowrap; }
.td-dow                     { font-size: 0.75rem; color: var(--text-dim); font-family: var(--font-mono); font-weight: 600; }

.btn-rm {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 0.9rem; padding: 3px 6px; border-radius: 3px;
  transition: all 0.12s;
}
.btn-rm:hover { color: var(--danger); background: rgba(229,62,62,0.1); }

.btn-ghost {
  font-size: 0.8rem; padding: 7px 14px; border-radius: 5px;
  border: 1px dashed var(--border2); background: transparent;
  color: var(--text-dim); cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* ── 18. Parts Entry ───────────────────────────────────────────────────────── */
.parts-add-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 70px auto;
  gap: 8px; align-items: end; margin-bottom: 14px;
}

/* ── 19. Output Tab ────────────────────────────────────────────────────────── */
.output-card {
  background: var(--slate); border: 1px solid var(--border2);
  border-left: 3px solid var(--cyan); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 20px;
}
.gen-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.gen-lbl { font-size: 0.78rem; color: var(--text-dim); font-weight: 500; white-space: nowrap; }

.btn-generate {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 32px; border-radius: var(--radius);
  background: var(--cyan); color: var(--deep);
  border: none; cursor: pointer;
  font-family: var(--font-head); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 4px 16px rgba(0,184,217,0.2);
}
.btn-generate:hover    { background: #1dcfef; }
.btn-generate:active   { transform: scale(0.98); }
.btn-generate:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.summary-grid { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 0.85rem; }
.sum-key      { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.78rem; }
.sum-val      { color: var(--text); }

/* Spinner */
.spin {
  display: inline-block; width: 15px; height: 15px;
  border: 2px solid var(--deep); border-top-color: transparent;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}

/* ── 20. Toast Notifications ───────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  padding: 12px 20px; border-radius: var(--radius);
  font-size: 0.88rem; font-weight: 500;
  background: var(--success); color: var(--white);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  animation: slideIn 0.25s ease;
  display: none; max-width: 340px;
}
.toast.err  { background: var(--danger); }
.toast.warn { background: var(--warning); }

/* ── 21. Animations ────────────────────────────────────────────────────────── */
@keyframes fadeUp  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideIn { from { opacity:0; transform:translateY(10px);  } to { opacity:1; transform:translateY(0); } }
@keyframes spin    { to   { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE LAYOUT
   Below 768px the side-by-side layout stacks vertically.
   Below 480px further simplifications for phone screens.
════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Stack work order layout vertically */
  .wo-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: 100vh;
  }

  /* Calendar panel takes natural height, no fixed constraint */
  .cal-panel {
    height: auto;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--border2);
  }

  /* Events list scrolls within its container */
  .events-scroll {
    max-height: 240px;
    overflow-y: auto;
  }

  /* Use button full width */
  .use-btn { width: 100%; margin: 6px 0 0; border-radius: 0; }

  /* Form panel takes remaining space */
  .form-panel { min-height: 60vh; }

  /* Tab bar scrolls horizontally on small screens */
  .tab-bar { overflow-x: auto; padding: 0 8px; }
  .tab-btn  { padding: 10px 12px; font-size: 0.8rem; white-space: nowrap; }

  /* Form grid goes single column */
  .form-grid { grid-template-columns: 1fr; }
  .span2     { grid-column: span 1; }

  /* Parts add row stacks */
  .parts-add-row { grid-template-columns: 1fr 1fr; }

  /* Hub cards stack */
  .tools-grid { grid-template-columns: 1fr; }

  /* Header compact */
  .hdr-inner  { padding: 10px 14px; }
  .hdr-title  { font-size: 1rem; }
  .brand-badge { display: none; }
  .hdr-user   { display: none; }

  /* Login card full width */
  .login-card { width: 100%; margin: 16px; padding: 32px 24px; }

  /* Hub hero smaller */
  .hub-hero h1 { font-size: 1.8rem; }
  .hub-main    { padding: 32px 16px 60px; }
}

/* RTE on tablet */
@media (max-width: 768px) {
  #rte-summary  { min-height: clamp(150px, 30vh, 400px); }
  #rte-followup { min-height: clamp(80px,  12vh, 180px); }
}

@media (max-width: 480px) {

  .wo-layout { grid-template-rows: auto 1fr; }

  .cal-section { padding: 10px 12px; }
  .cal-select  { margin-bottom: 8px; }

  .date-grid   { grid-template-columns: 1fr 1fr; gap: 6px; }
  .preset-row  { gap: 4px; }
  .preset-btn  { font-size: 0.68rem; padding: 3px 7px; }

  .tab-pane    { padding: 16px; }

  /* Labor table scrolls horizontally */
  .labor-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .parts-add-row { grid-template-columns: 1fr; }

  .btn-generate { width: 100%; justify-content: center; }

  .hdr-btn { padding: 5px 10px; font-size: 0.75rem; }

  /* RTE toolbar wraps */
  .rte-toolbar { gap: 1px; }
  .rte-btn     { padding: 3px 5px; font-size: 0.78rem; }
}