/* -----------------------------------------------
   Sales Plan Portal — Bayview Flowers
   Brand: Playfair Display (serif) + Jost (sans)
   ----------------------------------------------- */

:root {
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Jost', 'Futura', 'Century Gothic', sans-serif;
  --bv-green:      #45A74B;
  --bv-green-soft: #5CC264;
  --bv-orange:     #F17C21;
}

/* Light mode */
:root {
  --bg:                 #F4FAF4;
  --bg-elev:            #FFFFFF;
  --bg-tile:            #FFFFFF;
  --bg-tile-hover:      #F0F7F1;
  --border:             #D7E2D8;
  --border-hover:       #9BB8A2;
  --text:               #15221A;
  --text-muted:         #8A9691;
  --text-dim:           #7E8C87;
  --btn-contrast:       #FFFFFF;
  --tile-hover-overlay: rgba(69, 167, 75, 0.08);
  --green-deep:  #2d7a33;
  --green-mid:   var(--bv-green);
  --green-light: var(--bv-green-soft);
  --green-pale:  #d8f3dc;
  --gold:        var(--bv-orange);
  --white:       var(--bg-elev);
  --error:       #c0392b;
  --warning:     #d68910;
  --success:     #1e8449;
  --radius:      6px;
  --shadow:      0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:   0 6px 32px rgba(0,0,0,0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1411; --bg-elev: #151C18; --bg-tile: #1A2320; --bg-tile-hover: #1F2B26;
    --border: #243029; --border-hover: #3A5248; --text: #E8EDE9;
    --text-muted: #536760; --text-dim: #5E6A65; --btn-contrast: #0E1411;
    --tile-hover-overlay: rgba(69,167,75,0.12); --green-pale: #1d3a22;
    --shadow: 0 2px 12px rgba(0,0,0,0.3); --shadow-lg: 0 6px 32px rgba(0,0,0,0.5);
    --white: var(--bg-elev);
  }
}

[data-theme="dark"] {
  --bg: #0E1411; --bg-elev: #151C18; --bg-tile: #1A2320; --bg-tile-hover: #1F2B26;
  --border: #243029; --border-hover: #3A5248; --text: #E8EDE9;
  --text-muted: #536760; --text-dim: #5E6A65; --btn-contrast: #0E1411;
  --tile-hover-overlay: rgba(69,167,75,0.12); --green-pale: #1d3a22;
  --shadow: 0 2px 12px rgba(0,0,0,0.3); --shadow-lg: 0 6px 32px rgba(0,0,0,0.5);
  --white: var(--bg-elev);
}

[data-theme="light"] {
  --bg: #F4FAF4; --bg-elev: #FFFFFF; --bg-tile: #FFFFFF; --bg-tile-hover: #F0F7F1;
  --border: #D7E2D8; --border-hover: #9BB8A2; --text: #15221A;
  --text-muted: #8A9691; --text-dim: #7E8C87; --btn-contrast: #FFFFFF;
  --tile-hover-overlay: rgba(69,167,75,0.08); --green-pale: #d8f3dc;
  --shadow: 0 2px 12px rgba(0,0,0,0.08); --shadow-lg: 0 6px 32px rgba(0,0,0,0.12);
  --white: var(--bg-elev);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Nav ── */
.nav {
  background: var(--green-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.nav-brand { display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff; }
.nav-logo  { height:34px;width:auto;display:block; }
.nav-sep   { opacity:.35;margin:0 2px; }
.nav-product { font-size:13px;font-weight:300;opacity:.75;letter-spacing:.03em; }
.nav-right { display:flex;align-items:center;gap:4px; }
.nav-user  { font-size:13px;opacity:.65;padding-right:12px;border-right:1px solid rgba(255,255,255,.2);margin-right:8px; }
.nav-link  { color:rgba(255,255,255,.75);text-decoration:none;font-size:13px;font-weight:500;padding:6px 12px;border-radius:var(--radius);transition:background .15s,color .15s; }
.nav-link:hover,.nav-link.active { background:rgba(255,255,255,.12);color:#fff; }
.nav-logout { color:rgba(255,255,255,.5);margin-left:8px; }
.theme-toggle { background:transparent;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.75);cursor:pointer;border-radius:var(--radius);width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:15px;transition:background .15s;margin-left:4px; }
.theme-toggle:hover { background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff; }

/* ── Layout ── */
.main { flex:1;padding:40px 32px;max-width:1200px;margin:0 auto;width:100%; }
.footer { text-align:center;padding:16px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--border);background:var(--bg-tile); }

/* ── Flash ── */
.flash-container { margin-bottom:24px; }
.flash { padding:12px 18px;border-radius:var(--radius);margin-bottom:8px;font-size:14px;font-weight:500; }
.flash-success { background:#d5f5e3;color:var(--success);border:1px solid #a9dfbf; }
.flash-error   { background:#fadbd8;color:var(--error);border:1px solid #f1948a; }
.flash-warning { background:#fef9e7;color:var(--warning);border:1px solid #f9e79f; }
.flash-info    { background:var(--green-pale);color:var(--green-deep);border:1px solid #95d5b2; }

/* ── Page header ── */
.page-header { margin-bottom:36px; }
.page-header h1 { font-family:var(--serif);font-size:32px;color:var(--bv-green);font-weight:400;line-height:1.15; }
.page-header p  { margin-top:8px;color:var(--text-muted);font-size:15px; }

/* ── Cards ── */
.card { background:var(--bg-tile);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 32px;margin-bottom:20px; }
.card-title    { font-family:var(--serif);font-size:20px;color:var(--bv-green);margin-bottom:4px;font-weight:400; }
.card-subtitle { font-size:13px;color:var(--text-muted);margin-bottom:20px; }

/* ── Buttons ── */
.btn { display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:var(--radius);font-size:14px;font-weight:600;font-family:var(--sans);cursor:pointer;border:none;text-decoration:none;transition:background .15s,opacity .15s,transform .1s; }
.btn:hover  { opacity:.9;transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary   { background:var(--bv-green);color:var(--btn-contrast); }
.btn-secondary { background:var(--bg-tile);color:var(--text);border:1px solid var(--border); }
.btn-danger    { background:var(--error);color:#fff; }
.btn-gold      { background:var(--bv-orange);color:#fff; }
.btn-sm        { padding:7px 16px;font-size:13px; }
.btn-lg        { padding:14px 32px;font-size:16px; }

/* ── Tables ── */
.table-wrap { overflow-x:auto; }
table { width:100%;border-collapse:collapse;font-size:14px; }
th { text-align:left;padding:10px 14px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:2px solid var(--border);background:var(--bg-tile); }
td { padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;background:var(--bg-tile); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--bg-tile-hover); }

/* ── Status badges ── */
.badge { display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase; }
.badge-draft     { background:#f2f3f4;color:#626567; }
.badge-assigned  { background:#e8d5f5;color:#6c3483; }
.badge-submitted { background:#d6eaf8;color:#1a5276; }
.badge-returned  { background:#fdebd0;color:#a04000; }
.badge-approved  { background:#d5f5e3;color:#1e8449; }

/* ── Stat boxes ── */
.stat-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:20px; }
.stat-box  { background:var(--bg-tile);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;text-align:center; }
.stat-number { font-family:var(--serif);font-size:36px;color:var(--bv-green);line-height:1; }
.stat-label  { font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-top:4px; }

/* ── Form elements ── */
.form-group { margin-bottom:20px; }
.form-group label { display:block;font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px; }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);
  font-family:var(--sans);font-size:14px;color:var(--text);background:var(--bg-elev);transition:border-color .15s;
}
.form-group textarea { min-height:100px;resize:vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline:none;border-color:var(--bv-green); }
.form-group input[readonly],
.form-group textarea[readonly] { background:var(--bg);color:var(--text-muted);cursor:default; }
.form-hint { font-size:12px;color:var(--text-muted);margin-top:4px; }

/* ── Plan form sections ── */
.form-layout { display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start; }
.form-nav { position:sticky;top:72px; }
.form-nav-list { list-style:none; }
.form-nav-item a {
  display:block;padding:8px 12px;font-size:13px;color:var(--text-muted);text-decoration:none;
  border-left:3px solid transparent;border-radius:0 var(--radius) var(--radius) 0;transition:all .15s;
}
.form-nav-item a:hover,
.form-nav-item a.active { color:var(--bv-green);border-left-color:var(--bv-green);background:var(--green-pale); }
.form-section { margin-bottom:48px;scroll-margin-top:80px; }
.form-section-header {
  font-family:var(--serif);font-size:22px;color:var(--bv-green);font-weight:400;
  padding-bottom:12px;border-bottom:2px solid var(--border);margin-bottom:24px;
}
.form-section-header .section-num { font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);display:block;margin-bottom:4px; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.form-row-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px; }
.form-row-4 { display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px; }

/* ── Score table ── */
.score-table { width:100%;border-collapse:collapse;font-size:13px;margin-bottom:20px; }
.score-table th { text-align:center;padding:8px 6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:2px solid var(--border);background:var(--bg-tile); }
.score-table th:first-child { text-align:left;width:40%; }
.score-table td { padding:10px 6px;border-bottom:1px solid var(--border);text-align:center;background:var(--bg-tile); }
.score-table td:first-child { text-align:left;font-size:13px; }
.score-table td small { display:block;font-size:11px;color:var(--text-muted);font-style:italic;line-height:1.3; }
.score-table tr.overall-row td { font-weight:700;background:var(--green-pale); }
.score-table input[type=radio] { accent-color:var(--bv-green);width:16px;height:16px;cursor:pointer; }

/* ── Floral program table ── */
.floral-table { width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px; }
.floral-table th { text-align:center;padding:8px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:2px solid var(--border);background:var(--bg-tile); }
.floral-table th:first-child { text-align:left; }
.floral-table td { padding:9px 10px;border-bottom:1px solid var(--border);text-align:center;background:var(--bg-tile); }
.floral-table td:first-child { text-align:left; }
.floral-table tr:hover td { background:var(--bg-tile-hover); }
.floral-table input[type=checkbox] { accent-color:var(--bv-green);width:16px;height:16px;cursor:pointer; }

/* ── Greenhouse table ── */
.gh-table { width:100%;border-collapse:collapse;font-size:12px; }
.gh-table th { padding:8px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);border-bottom:2px solid var(--border);background:var(--bg-tile);text-align:center; }
.gh-table th:first-child { text-align:left;min-width:180px; }
.gh-table td { padding:7px 8px;border-bottom:1px solid var(--border);text-align:center;background:var(--bg-tile); }
.gh-table td:first-child { text-align:left; }
.gh-table tr:hover td { background:var(--bg-tile-hover); }
.gh-table input[type=checkbox] { accent-color:var(--bv-green);width:15px;height:15px;cursor:pointer; }
.gh-table input[type=text] { width:90px;padding:4px 6px;border:1px solid var(--border);border-radius:4px;font-size:12px;background:var(--bg-elev);color:var(--text); }
.gh-table input[type=text]:focus { outline:none;border-color:var(--bv-green); }
.gh-section-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:10px 8px 6px;background:var(--bg);border-bottom:1px solid var(--border); }

/* ── Segmentation cards ── */
.seg-options { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px; }
.seg-option { border:2px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:all .15s;position:relative; }
.seg-option:hover { border-color:var(--bv-green);background:var(--green-pale); }
.seg-option input[type=radio] { position:absolute;top:16px;right:14px;accent-color:var(--bv-green);width:16px;height:16px; }
.seg-option.checked { border-color:var(--bv-green);background:var(--green-pale); }
.seg-option-label { font-weight:700;font-size:14px;margin-bottom:4px;padding-right:56px; }
.seg-option-grade { font-size:22px;font-family:var(--serif);color:var(--bv-green);position:absolute;top:10px;right:36px;line-height:1; }
.seg-option-desc  { font-size:12px;color:var(--text-muted);line-height:1.5; }

/* ── Tag / pill input ── */
.tag-input-wrap {
  border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elev);
  padding:6px 8px;min-height:44px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  position:relative;transition:border-color .15s;
}
.tag-input-wrap:focus-within { border-color:var(--bv-green); }
.tag-chip { display:inline-flex;align-items:center;gap:5px;background:rgba(69,167,75,.15);color:var(--green-deep);border-radius:20px;padding:3px 10px 3px 12px;font-size:13px;font-weight:500;white-space:nowrap; }
.tag-chip-remove { background:none;border:none;cursor:pointer;color:var(--green-deep);font-size:15px;line-height:1;padding:0;opacity:.6;transition:opacity .1s; }
.tag-chip-remove:hover { opacity:1; }
.tag-search-input { border:none;outline:none;background:transparent;font-family:var(--sans);font-size:14px;color:var(--text);flex:1;min-width:140px;padding:2px 4px; }
.tag-dropdown { position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:200;max-height:220px;overflow-y:auto;display:none; }
.tag-dropdown.open { display:block; }
.tag-dropdown-item { padding:9px 14px;cursor:pointer;font-size:13px;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid var(--border); }
.tag-dropdown-item:last-child { border-bottom:none; }
.tag-dropdown-item:hover,.tag-dropdown-item.focused { background:var(--bg-tile-hover); }
.tag-dropdown-item span { font-size:11px;color:var(--text-muted); }
.tag-dropdown-empty { padding:12px 14px;font-size:13px;color:var(--text-muted);text-align:center; }

/* ── Plan list / task items ── */
.plan-item {
  display:flex;align-items:center;gap:16px;padding:18px 22px;background:var(--bg-tile);
  border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;box-shadow:var(--shadow);
  text-decoration:none;color:var(--text);transition:box-shadow .15s,border-color .15s,transform .1s;
}
.plan-item:hover { box-shadow:var(--shadow-lg);border-color:var(--border-hover);transform:translateY(-1px);background:var(--bg-tile-hover); }
.plan-item-icon  { width:38px;height:38px;border-radius:50%;background:rgba(241,124,33,.1);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0; }
.plan-item-name  { font-weight:600;font-size:15px; }
.plan-item-meta  { font-size:12px;color:var(--text-muted);margin-top:2px; }
.plan-item-right { margin-left:auto;display:flex;align-items:center;gap:10px; }

/* ── Review returned banner ── */
.returned-banner { background:#fdebd0;border:1px solid #f0a500;border-radius:var(--radius);padding:16px 20px;margin-bottom:24px; }
.returned-banner h3 { font-size:14px;font-weight:700;color:#7d4a00;margin-bottom:6px; }
.returned-banner p  { font-size:14px;color:#7d4a00;white-space:pre-wrap; }

/* ── Sales story (section 8) ── */
.sales-story { background:var(--green-pale);border:1px solid #95d5b2;border-radius:var(--radius);padding:24px 28px;margin-bottom:20px; }
.sales-story p { font-size:14px;line-height:1.7;color:var(--green-deep); }
.sales-story img { max-width:100%;border-radius:var(--radius);margin-top:16px; }

/* ── Login ── */
.login-wrap { display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 56px);padding:32px; }
.login-card { background:var(--bg-tile);border:1px solid var(--border);border-radius:10px;padding:48px 52px;width:100%;max-width:420px;box-shadow:var(--shadow-lg);text-align:center; }
.login-card h1 { font-family:var(--serif);font-size:26px;color:var(--bv-green);font-weight:400;margin-bottom:4px; }
.login-card p  { color:var(--text-muted);font-size:14px;margin-bottom:32px; }

/* ── Reusable grid utilities (responsive collapse below) ── */
.split-2-col       { display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start; }
.review-2-col      { display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start; }
.review-action-panel { position:sticky;top:72px; }

/* ── Hamburger / drawer ── */
.nav-hamburger {
  display:none; background:none; border:none; color:#fff;
  font-size:22px; line-height:1; cursor:pointer; padding:6px 10px;
  border-radius:var(--radius); margin-left:auto;
}
.nav-hamburger:hover { background:rgba(255,255,255,.12); }
.nav-drawer-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:998; opacity:0; transition:opacity .25s;
}
.nav-drawer-overlay.open { display:block; opacity:1; }
.mobile-readonly-banner {
  background:#fff3cd; border:1px solid #f0d97c; color:#5b4400;
  border-radius:var(--radius); padding:14px 18px; margin-bottom:20px;
  font-size:13.5px; line-height:1.55;
}
.plan-mobile-readonly { display:none; }

/* ── Mobile plan cards (parallel rendering to dashboard tables) ── */
.plan-cards-list { display:none; }
.plan-card {
  display:block; text-decoration:none; color:var(--text);
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px;
  box-shadow:var(--shadow);
  transition:border-color .15s, box-shadow .15s;
}
.plan-card:active { border-color:var(--bv-green); }
.plan-card-row    { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.plan-card-customer { font-weight:700; font-size:15px; line-height:1.25; color:var(--text); }
.plan-card-meta   {
  display:flex;flex-wrap:wrap;gap:4px 10px;
  font-size:12.5px;color:var(--text-muted);margin-top:4px;
}
.plan-card-meta span:not(:first-child)::before { content:"·"; margin-right:8px; opacity:.5; }
.plan-card-divider { height:1px; background:var(--border); margin:10px 0; }
.plan-card-meta-bottom { margin-top:0; }

/* ── Responsive ── */
@media (max-width:1024px) {
  /* Hamburger nav for tablet + phone */
  .nav-hamburger { display:block; }
  .nav-right {
    position:fixed; top:0; right:-320px; bottom:0;
    width:288px; max-width:80vw;
    background:linear-gradient(180deg, var(--bv-green) 0%, #2b6e30 100%);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:64px 18px 24px; gap:4px;
    transition:right .25s ease;
    z-index:999; overflow-y:auto;
    box-shadow:-4px 0 24px rgba(0,0,0,.25);
  }
  .nav-right.open { right:0; }
  .nav-user {
    border-right:none; border-bottom:1px solid rgba(255,255,255,.2);
    padding:0 0 12px; margin:0 0 12px;
    font-size:14px; opacity:.95;
  }
  .nav-link {
    padding:12px 14px; font-size:14px; border-radius:var(--radius);
  }
  .nav-logout { margin-left:0; margin-top:12px;
    border-top:1px solid rgba(255,255,255,.2); padding-top:18px;
  }
  .theme-toggle { align-self:flex-start; margin-top:8px; }
  /* Stack two-column layouts */
  .split-2-col   { grid-template-columns:1fr; }
  .review-2-col  { grid-template-columns:1fr; }
  .review-action-panel { position:static; }
}
@media (max-width:900px) {
  .form-layout { grid-template-columns:1fr; }
  .form-nav { display:none; }
  .form-row,.form-row-3,.form-row-4 { grid-template-columns:1fr; }
  .seg-options { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .main { padding:24px 16px; }
  .nav  { padding:0 16px; }
}
@media (max-width:767px) {
  /* Phone: force read-only view on plan editor */
  .plan-edit-form     { display:none !important; }
  .plan-mobile-readonly { display:block; }
  /* Phone: swap dashboard tables for stacked cards */
  .desktop-only       { display:none !important; }
  .plan-cards-list    { display:flex; flex-direction:column; gap:10px; }
}