/* ============================================================
   Cultiva CRM — v3 design system (faithful port of the designer's
   "Workbench" UI kit: CRM webapp UI design / standalone source).
   Theme values, component classes, and tokens are lifted verbatim
   from the designer's files. Light + dark.
   ============================================================ */

/* ---- Brand typeface: Mont (licensed) · Montserrat fallback ---- */
@font-face { font-family:'Mont'; src:url('../fonts/Mont-Light.ttf')   format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Mont'; src:url('../fonts/Mont-Book.ttf')    format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Mont'; src:url('../fonts/Mont-Regular.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Mont'; src:url('../fonts/Mont-Bold.ttf')    format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* Type + brand tokens (design-system) */
  --font-sans: 'Mont', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --shadow-xs: 0 1px 2px rgba(0,40,24,0.06);
  --shadow-sm: 0 1px 3px rgba(0,40,24,0.08), 0 1px 2px rgba(0,40,24,0.04);
  --shadow-md: 0 4px 12px rgba(0,40,24,0.08);
  --shadow-lg: 0 12px 32px rgba(0,40,24,0.10);

  /* ---- Light theme (designer themeVars.light) ---- */
  --pg:#EDF1EE; --sidebar:#FFFFFF; --card:#FFFFFF; --section:#F3F6F4; --wash:#EAF3EE; --tint-strong:#DCEBE3;
  --border:#E5E9E6; --border2:#CFD7D1; --border-brand-soft:#BEDDCC; --alert-border:#E7C4BB; --warn-border:#E7D8B4;
  --strong:#0C2A1D; --body:#3F4E47; --muted:#6D6E71; --gray-mid:#A7ABA8;
  --brand:#00643C; --brand-dark:#00512F; --bright:#008453;
  --alert:#B23A28; --alertbg:#F7E8E4; --warn:#8A5410; --warnbg:#F5EEDF;
  --focus-ring: rgba(0,132,83,0.25);
}

body.dark-mode {
  /* ---- Dark theme (designer themeVars.dark) ---- */
  --pg:#0B100E; --sidebar:#111A15; --card:#151F19; --section:#101A15; --wash:#16281F; --tint-strong:#1B3327;
  --border:#25332B; --border2:#35473C; --border-brand-soft:#2C4C3B; --alert-border:#5A342C; --warn-border:#544527;
  --strong:#EAF3EE; --body:#B7C4BD; --muted:#889089; --gray-mid:#6C766F;
  --brand:#13A869; --brand-dark:#0E8E59; --bright:#2DB37B;
  --alert:#E9836F; --alertbg:#2A1613; --warn:#E0AB55; --warnbg:#241C0D;
  --focus-ring: rgba(45,179,123,0.3);
}

/* ---- Reset + base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); background: var(--pg); color: var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--bright); text-decoration: none; }
img, svg, video, canvas { max-width: 100%; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }

/* ---- Skip link (a11y) ---- */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 9px 0; font-weight: 700; z-index: 999; }
.skip-link:focus { left: 0; }

/* ---- Sidebar nav links ---- */
.navlink { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer; color:var(--body); text-decoration:none; border:1px solid transparent; transition:background .12s,color .12s; }
.navlink:hover { background:var(--section); color:var(--strong); }
.navlink.active { background:var(--wash); color:var(--brand); border-color:var(--border-brand-soft); }
.navlink.active svg { color:var(--brand); }

/* ---- Tables ---- */
.th { font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; text-align:left; padding:0 16px 11px; white-space:nowrap; }
.td { font-size:13px; color:var(--body); padding:13px 16px; border-top:1px solid var(--border); vertical-align:middle; }
.row-hover:hover { background:var(--section); }

/* ---- Buttons ---- */
.btn { font-family:inherit; border:none; cursor:pointer; border-radius:9px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:filter .12s,background .12s,transform .06s; white-space:nowrap; text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn-pri { background:var(--brand); color:#fff; }
.btn-pri:hover { background:var(--bright); }
.btn-out { background:var(--card); color:var(--strong); border:1px solid var(--border2); }
.btn-out:hover { border-color:var(--brand); color:var(--brand); }
.btn-ghost { background:transparent; color:var(--body); }
.btn-ghost:hover { background:var(--section); color:var(--strong); }
.btn-danger { background:var(--card); color:var(--alert); border:1px solid var(--alert-border); }
.btn-danger:hover { background:var(--alertbg); }

/* ---- Fields ---- */
.field { width:100%; height:40px; padding:0 12px; border-radius:9px; border:1px solid var(--border2); background:var(--card); color:var(--strong); font-family:inherit; font-size:13.5px; outline:none; }
.field:focus { border-color:var(--bright); box-shadow:0 0 0 3px var(--focus-ring); }
textarea.field { height:auto; padding:10px 12px; resize:vertical; line-height:1.5; }
select.field { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236D6E71' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
label { display:block; }

/* ---- Chips (pipeline strip) ---- */
.chip { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:10px; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--card); color:var(--body); transition:border-color .12s,background .12s; text-decoration:none; }
.chip:hover { border-color:var(--brand); }
.chip.on { background:var(--wash); border-color:var(--brand); color:var(--brand); }

/* ---- Card ---- */
.card { background:var(--card); border:1px solid var(--border); border-radius:13px; }

/* ---- Segmented control (tabs) ---- */
.seg { display:inline-flex; background:var(--section); border:1px solid var(--border); border-radius:9px; padding:3px; gap:2px; }
.seg button, .seg a { font-family:inherit; border:none; background:transparent; cursor:pointer; font-size:12px; font-weight:700; color:var(--muted); padding:5px 11px; border-radius:6px; text-decoration:none; display:inline-flex; align-items:center; }
.seg button.on, .seg a.on { background:var(--card); color:var(--brand); box-shadow:var(--shadow-xs); }

/* ---- Focus visible ---- */
a:focus-visible, .btn:focus-visible, button:focus-visible, .navlink:focus-visible, .field:focus-visible { outline:2px solid var(--bright); outline-offset:2px; }

/* ---- Confirmation dialog (kept from v3.0.0, retinted to the theme) ---- */
.confirm-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,20,12,0.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.confirm-overlay[hidden] { display:none; }
.confirm-dialog { background:var(--card); color:var(--body); border:1px solid var(--border); border-radius:13px; box-shadow:var(--shadow-lg); max-width:420px; width:100%; padding:20px; }
.confirm-msg { margin:0 0 18px; font-size:14px; color:var(--strong); }
.confirm-actions { display:flex; justify-content:flex-end; gap:8px; }

/* ---- App shell ---- */
.shell-row { display:flex; height:100vh; overflow:hidden; background:var(--pg); color:var(--body); }
.app-sidebar { width:236px; flex:none; background:var(--sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:16px 13px; }
.nav-count { margin-left:auto; font-size:10.5px; font-weight:700; color:#fff; background:var(--bright); border-radius:999px; padding:1px 7px; min-width:20px; text-align:center; }
.nav-section-label { margin:16px 8px 8px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.sidebar-user { margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px 8px 4px; border-top:1px solid var(--border); }
.avatar { border-radius:999px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.topbar { height:60px; flex:none; background:var(--card); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:16px; padding:0 22px; }
.topbar-search { display:flex; align-items:center; gap:8px; height:38px; width:230px; padding:0 12px; background:var(--section); border:1px solid var(--border); border-radius:9px; color:var(--muted); font-size:13px; }
.topbar-search:focus-within { border-color:var(--brand); }
.topbar-search-input { flex:1; min-width:0; height:100%; border:none; background:transparent; color:var(--strong); font-family:inherit; font-size:13px; outline:none; padding:0; }
.topbar-search-input::placeholder { color:var(--muted); }
.topbar-find { display:none; }  /* compact mobile search entry; revealed <861px */
.icon-btn { width:38px; height:38px; padding:0; }
.nav-toggle { display:none; }
#darkToggle .icon-sun { display:none; }
body.dark-mode #darkToggle .icon-moon { display:none; }
body.dark-mode #darkToggle .icon-sun { display:inline; }

/* Flash strip */
.flashbar { flex:none; display:flex; align-items:center; gap:11px; padding:11px 22px; border-bottom:1px solid var(--border); background:var(--section); }
.flashbar.success { background:var(--wash); border-bottom-color:var(--border-brand-soft); }
.flashbar.danger, .flashbar.error { background:var(--alertbg); border-bottom-color:var(--alert-border); }
.flashbar .txt { font-size:13px; font-weight:600; color:var(--strong); }

/* ============================================================
   WP2 responsive layer. ONE mobile breakpoint: 860px.
   Below it the shell becomes a drawer + single-column content,
   data tables become stacked cards, and controls grow to 44px
   touch targets. Desktop (>=861px, incl. 1280) is untouched.
   ============================================================ */

/* Layout utilities (desktop behaviour; collapse on mobile below) */
.content-wrap { max-width:1180px; margin:0 auto; padding:24px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.detail-cols { display:grid; grid-template-columns:1fr 1.3fr; gap:16px; align-items:start; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.mobile-only { display:none; }
/* Off-canvas drawer backdrop — hidden on desktop, shown+toggled on mobile */
.nav-backdrop { position:fixed; inset:0; z-index:1100; background:rgba(0,20,12,0.45); border:none; display:none; }

@media (max-width: 860px) {
  /* Shell: stop the fixed-height/overflow-hidden desktop frame; page scrolls */
  .shell-row { flex-direction:column; height:auto; min-height:100vh; overflow:visible; }
  main#main-content { overflow:visible; }

  /* Sidebar -> off-canvas drawer, slid in when .open */
  .app-sidebar {
    position:fixed; top:0; left:0; bottom:0; z-index:1200;
    width:270px; max-width:82vw; padding:16px 13px;
    transform:translateX(-100%); transition:transform .22s ease;
    border-right:1px solid var(--border); border-bottom:none;
    overflow-y:auto; box-shadow:var(--shadow-lg);
  }
  .app-sidebar.open { transform:translateX(0); }
  body.nav-open { overflow:hidden; }
  .nav-backdrop { display:block; }
  .nav-backdrop[hidden] { display:none; }
  .nav-toggle { display:inline-flex; }

  /* Topbar: tighten and drop decorative bits */
  .topbar { padding:0 12px; gap:8px; }
  .topbar-avatar, .topbar-divider { display:none; }
  /* Search stays reachable on a phone: swap the inline input chip for a 44px
     icon that opens the search page (which carries its own input), so the
     topbar never overflows. */
  .topbar-search { display:none; }
  .topbar-find { display:inline-flex; align-items:center; justify-content:center; }

  /* Content + layout */
  .content-wrap { padding:16px 13px; }
  .grid2, .grid3, .detail-cols { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:1fr 1fr; gap:10px; }

  /* Touch targets: min-height beats inline height when larger, so this bumps
     every button/field to 44px without editing per-element inline heights. */
  .btn { min-height:44px; }
  .field { min-height:44px; }
  .icon-btn { min-width:44px; }
  input[type="checkbox"] { width:20px; height:20px; }

  .mobile-only { display:block; }
  .desktop-only { display:none; }

  /* Data table -> stacked cards. Add class="rtable" to the <table> and
     data-label="Header" to each <td>; the wrapper gets class="table-card". */
  .table-card { border:none; background:transparent; border-radius:0; }
  .rtable { display:block; }
  .rtable thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .rtable tbody, .rtable tr, .rtable td { display:block; }
  .rtable tr { border:1px solid var(--border); border-radius:12px; background:var(--card); margin-bottom:10px; padding:4px 2px; box-shadow:var(--shadow-xs); }
  .rtable tr[onclick] { cursor:pointer; }
  .rtable td { border:none; padding:9px 14px; display:flex; gap:14px; align-items:center; justify-content:space-between; text-align:right; font-size:13.5px; }
  .rtable td::before { content:attr(data-label); font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; text-align:left; flex:none; }
  .rtable td:not([data-label])::before, .rtable td[data-label=""]::before { content:""; }
  .rtable td:empty { display:none; }

  /* Modal/confirm dialog -> bottom sheet */
  .confirm-overlay { align-items:flex-end; padding:0; }
  .confirm-dialog { max-width:100%; border-radius:16px 16px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Transitional legacy compatibility — keeps not-yet-rebuilt
   screens legible in the new theme. Removed screen-by-screen
   as each template is ported to the design-system components.
   ============================================================ */
.page-header { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.page-header h1 { font-size:22px; font-weight:700; color:var(--strong); margin:0; }
.btn-primary { background:var(--brand); color:#fff; border-radius:9px; padding:9px 14px; font-weight:700; border:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer; text-decoration:none; }
.btn-primary:hover { background:var(--bright); }
.btn-outline { background:var(--card); color:var(--strong); border:1px solid var(--border2); border-radius:9px; padding:9px 14px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.btn-outline:hover { border-color:var(--brand); color:var(--brand); }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-success { background:var(--brand); color:#fff; border:none; border-radius:9px; padding:6px 11px; font-weight:700; cursor:pointer; }
.form-control { width:100%; height:40px; padding:0 12px; border-radius:9px; border:1px solid var(--border2); background:var(--card); color:var(--strong); font-family:inherit; font-size:13.5px; }
textarea.form-control { height:auto; padding:10px 12px; }
.form-group { margin-bottom:14px; }
.form-group > label { display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:4px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.form-actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.form-narrow { max-width:760px; }
.table-wrapper { overflow-x:auto; }
.card table, .table-wrapper table { width:100%; border-collapse:collapse; }
.table-wrapper thead th { font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; text-align:left; padding:0 16px 11px; }
.table-wrapper tbody td { font-size:13px; color:var(--body); padding:13px 16px; border-top:1px solid var(--border); }
.empty-state { padding:28px; text-align:center; color:var(--muted); font-size:13px; }
.alert { padding:11px 14px; border-radius:9px; margin-bottom:12px; font-size:13px; border:1px solid var(--border); background:var(--section); color:var(--strong); }
.alert-success { background:var(--wash); border-color:var(--border-brand-soft); }
.alert-danger { background:var(--alertbg); border-color:var(--alert-border); color:var(--alert); }
.muted { color:var(--muted); }
.status-badge, .pill, .marker, .stage-badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; background:var(--section); color:var(--muted); }
.role-badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; background:var(--wash); color:var(--brand); }

/* ---- Pagination ---- */
.pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; font-size:12.5px; }
.pagination-info { color:var(--muted); }
.pagination-links { display:flex; gap:5px; flex-wrap:wrap; }
.page-link { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 9px; border-radius:8px; border:1px solid var(--border2); background:var(--card); color:var(--body); text-decoration:none; font-weight:600; }
.page-link:hover { border-color:var(--brand); color:var(--brand); }
.page-link.current { background:var(--brand); color:#fff; border-color:var(--brand); }
.page-link.disabled, .page-link.ellipsis { color:var(--muted); border-color:var(--border); background:transparent; cursor:default; }