/* ==========================================================
   File: /assets/css/theme.css
   Brand-first color system + dual-mode (light/dark)
   ========================================================== */

/* ---------- Reset & layout ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bg); }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
}

/* ============================================================
   NO BLUE TEXT (Global link + action color normalization)
   ============================================================ */

/* Prevent browser default blue/purple link colors */
a,
a:visited,
a:hover,
a:active,
a:focus {
  color: var(--text) !important;
  text-decoration: none;
}

/* If you want a subtle affordance without blue */
a:hover {
  text-decoration: underline;
}

/* ============================================================
   BUTTON COLOR NORMALIZATION (GLOBAL)
   - Default: buttons follow theme text
   - ONLY if background is green => force white text
   ============================================================ */

/* Default: buttons should never inherit link blue */
button,
.btn {
  color: var(--text) !important;
}

/* ✅ ONLY GREEN-BACKGROUND BUTTONS => WHITE TEXT
   Covers:
   - inline styles using var(--brand-green)
   - inline styles using #3B7E46 or rgb(59,126,70)
   - common “primary/submit/save” class patterns you use around the app
*/
button[style*="background" i][style*="--brand-green" i],
.btn[style*="background" i][style*="--brand-green" i],
button[style*="background-color" i][style*="--brand-green" i],
.btn[style*="background-color" i][style*="--brand-green" i],

button[style*="background" i][style*="#3b7e46" i],
.btn[style*="background" i][style*="#3b7e46" i],
button[style*="background-color" i][style*="#3b7e46" i],
.btn[style*="background-color" i][style*="#3b7e46" i],

button[style*="background" i][style*="rgb(59, 126, 70)" i],
.btn[style*="background" i][style*="rgb(59, 126, 70)" i],
button[style*="background-color" i][style*="rgb(59, 126, 70)" i],
.btn[style*="background-color" i][style*="rgb(59, 126, 70)" i],

/* Common app button classes that are intended to be green */
button.btn-primary,
.btn.btn-primary,
button.primary,
.btn.primary,
button.btn-save,
.btn.btn-save,
button.btn-submit,
.btn.btn-submit,
button.btn-add,
.btn.btn-add,
button.btn-create,
.btn.btn-create,
button.btn-confirm,
.btn.btn-confirm,
button.fv-primary,
.btn.fv-primary,
button.fv-green,
.btn.fv-green,
button.green,
.btn.green {
  color: #FFFFFF !important;
}

/* Theme-safe focus ring (no default blue outline) */
:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}


/* ---------- Safe-area variables ---------- */
:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);

  /* ---------- Brand palette ---------- */
  --brand-green:       #3B7E46;
  --brand-green-700:   #0a4c29;
  --brand-gold:        #D0C542;
  --brand-gunmetal:    #CBCDCB;

  /* NEW: FarmVista blue accent (for “form hero” buttons & future use) */
  --accent-blue-50:    #eef3ff;
  --accent-blue-100:   #d8e3ff;
  --accent-blue-200:   #b6ccff;
  --accent-blue-400:   #5f8cff;
  --accent-blue-600:   #2a55cf;
  --accent-blue-700:   #1e4db7;   /* primary accent */
  --accent-blue-800:   #133b90;
  --accent-blue:       var(--accent-blue-700);
  --accent-blue-ink:   #0f2f74;   /* dark blue text/outline on light */

  /* ---------- Utility / icon tokens ---------- */
  --close-x-color: var(--text);   /* light mode default */
  --danger-red: #D93A3A;

  /* Trash (always red + circle ring, light + dark) */
  --trash-color: var(--danger-red);
  --trash-ring: color-mix(in srgb, var(--danger-red) 65%, transparent);
  --trash-bg:   color-mix(in srgb, var(--danger-red) 10%, transparent);

  /* ---------- Light theme (defaults) ---------- */
  --bg:       #F6F7F6;
  --surface:  #FFFFFF;
  --text:     #142016;
  --muted:    #677a6e;
  --border:   #E3E6E2;

  --header-bg: var(--brand-green);
  --header-fg: #FFFFFF;

  --footer-bg: #0B1A10;
  --footer-fg: #CFD7D1;

  --shadow: 0 12px 24px rgba(0,0,0,.14);

  /* ---------- Component tokens (light defaults) ---------- */

  /* Cards / hero cards */
  --card-surface: var(--surface);
  --card-border:  var(--border);

  /* Sidebar (drawer) */
  --sidebar-surface: #ffffff;
  --sidebar-border:  #eeeeee;
  --sidebar-text:    #222222;

  /* NEW: Form Hero Button (fv-form-button) */
  --formbtn-surface:         #ffffff;
  --formbtn-text:            var(--accent-blue-ink);
  --formbtn-icon:            var(--accent-blue);
  --formbtn-border:          color-mix(in srgb, var(--accent-blue) 22%, #0000);
  --formbtn-shadow:
      0 6px 18px rgba(13, 35, 89, .12),
      0 1px 0 rgba(13, 35, 89, .12) inset;
  --formbtn-hover-surface:   color-mix(in srgb, #fff 92%, var(--accent-blue));
  --formbtn-pressed-surface: color-mix(in srgb, #fff 88%, var(--accent-blue));
  --formbtn-focus-ring:      color-mix(in srgb, var(--accent-blue) 55%, #ffffff);
}

/* ---------- Dark theme (manual toggle) ---------- */
html.dark {
  --bg:       #0d1210;
  --surface:  #151b17;
  --text:     #E8EEE9;
  --muted:    #9FB2A7;
  --border:   #253228;

  --header-bg: #0a2617;
  --header-fg: #E8EEE9;

  --footer-bg: #070b08;
  --footer-fg: #9FB2A7;

  --shadow: 0 12px 24px rgba(0,0,0,.5);

  /* Component tokens (dark overrides) */
  --card-surface: #1a1f1c;   /* slight lift over bg */
  --card-border:  #2a342c;

  --sidebar-surface: #171a18;
  --sidebar-border:  #2a2e2b;
  --sidebar-text:    #f1f3ef;

  /* NEW: Form Hero Button (dark) */
  --formbtn-surface:         #0f1420; /* navy-ish box */
  --formbtn-text:            #dbe6ff; /* light text */
  --formbtn-icon:            #9db8ff;
  --formbtn-border:          color-mix(in srgb, var(--accent-blue) 38%, #0000);
  --formbtn-shadow:
      0 10px 30px rgba(10, 25, 64, .35),
      0 1px 0 rgba(160, 180, 255, .08) inset;
  --formbtn-hover-surface:   color-mix(in srgb, #0f1420 85%, var(--accent-blue));
  --formbtn-pressed-surface: color-mix(in srgb, #0f1420 78%, var(--accent-blue));
  --formbtn-focus-ring:      color-mix(in srgb, var(--accent-blue) 65%, #ffffff);

  /* Close “X” should be white in dark mode */
  --close-x-color: #FFFFFF;
}

/* ---------- First-paint dark (no JS yet, OS prefers dark) ---------- */
@media (prefers-color-scheme: dark) {
  html:not(.dark):not([data-theme]) {
    --bg:       #0d1210;
    --surface:  #151b17;
    --text:     #E8EEE9;
    --muted:    #9FB2A7;
    --border:   #253228;

    --header-bg: #0a2617;
    --header-fg: #E8EEE9;

    --footer-bg: #070b08;
    --footer-fg: #9FB2A7;

    --shadow: 0 12px 24px rgba(0,0,0,.5);

    /* Components */
    --card-surface: #1a1f1c;
    --card-border:  #2a342c;

    --sidebar-surface: #171a18;
    --sidebar-border:  #2a2e2b;
    --sidebar-text:    #f1f3ef;

    /* NEW: Form Hero Button */
    --formbtn-surface:         #0f1420;
    --formbtn-text:            #dbe6ff;
    --formbtn-icon:            #9db8ff;
    --formbtn-border:          color-mix(in srgb, var(--accent-blue) 38%, #0000);
    --formbtn-shadow:
        0 10px 30px rgba(10, 25, 64, .35),
        0 1px 0 rgba(160, 180, 255, .08) inset;
    --formbtn-hover-surface:   color-mix(in srgb, #0f1420 85%, var(--accent-blue));
    --formbtn-pressed-surface: color-mix(in srgb, #0f1420 78%, var(--accent-blue));
    --formbtn-focus-ring:      color-mix(in srgb, var(--accent-blue) 65%, #ffffff);

    /* Close “X” should be white in OS-dark first paint too */
    --close-x-color: #FFFFFF;
  }
}

/* ---------- Auto-dark for system preference (when data-theme="auto") ---------- */
@media (prefers-color-scheme: dark) {
  html:not(.dark)[data-theme="auto"] {
    --bg:       #0d1210;
    --surface:  #151b17;
    --text:     #E8EEE9;
    --muted:    #9FB2A7;
    --border:   #253228;

    --header-bg: #0a2617;
    --header-fg: #E8EEE9;

    --footer-bg: #070b08;
    --footer-fg: #9FB2A7;

    --shadow: 0 12px 24px rgba(0,0,0,.5);

    /* Components */
    --card-surface: #1a1f1c;
    --card-border:  #2a342c;

    --sidebar-surface: #171a18;
    --sidebar-border:  #2a2e2b;
    --sidebar-text:    #f1f3ef;

    /* NEW: Form Hero Button */
    --formbtn-surface:         #0f1420;
    --formbtn-text:            #dbe6ff;
    --formbtn-icon:            #9db8ff;
    --formbtn-border:          color-mix(in srgb, var(--accent-blue) 38%, #0000);
    --formbtn-shadow:
        0 10px 30px rgba(10, 25, 64, .35),
        0 1px 0 rgba(160, 180, 255, .08) inset;
    --formbtn-hover-surface:   color-mix(in srgb, #0f1420 85%, var(--accent-blue));
    --formbtn-pressed-surface: color-mix(in srgb, #0f1420 78%, var(--accent-blue));
    --formbtn-focus-ring:      color-mix(in srgb, var(--accent-blue) 65%, #ffffff);

    /* Close “X” should be white in auto-dark too */
    --close-x-color: #FFFFFF;
  }
}

/* ---------- Global shell ---------- */
.app-shell, #app {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ---------- Header ---------- */
.app-header {
  position: sticky; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center;
  height: 56px;
  padding: 0 max(12px,var(--safe-right)) 0 max(12px,var(--safe-left));
  background: var(--header-bg);
  color: var(--header-fg);
  z-index: 1000;
  width: 100%;
}
.header-left{display:flex;align-items:center;gap:10px;}
.brand-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.header-right{display:flex;align-items:center;gap:8px;justify-self:end;}
.icon-btn{
  background:transparent;border:0;width:40px;height:40px;
  display:grid;place-items:center;border-radius:10px;color:inherit;
}
.icon-btn:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px;}

/* ==========================================================
   GLOBAL ICON NORMALIZATION
   ========================================================== */

/* ---------- Close “X” (white in dark mode) ---------- */
/* Supports common patterns: aria-label, data-close, and typical close classes */
.icon-btn[data-close],
.icon-btn.close,
button[data-close],
button.close-btn,
button.modal-close,
button[aria-label="Close"],
button[aria-label="Close dialog"],
button[aria-label="Dismiss"],
a[aria-label="Close"]{
  color: var(--close-x-color) !important;
}
/* ==========================================================
   DATE INPUT CALENDAR ICON (dark mode should be white)
   ========================================================== */

/* Default (light): keep normal */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: none;
  opacity: .85;
}

/* Manual dark toggle (html.dark) */
html.dark input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.15);
  opacity: .9;
}

/* If you ever use data-theme="dark" */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.15);
  opacity: .9;
}

/* OS-dark first paint + auto-dark (when your JS hasn’t applied html.dark yet) */
@media (prefers-color-scheme: dark) {
  html:not(.dark):not([data-theme]) input[type="date"]::-webkit-calendar-picker-indicator,
  html:not(.dark)[data-theme="auto"] input[type="date"]::-webkit-calendar-picker-indicator{
    filter: invert(1) brightness(1.15);
    opacity: .9;
  }
}


/* Make common SVG “X” styles follow currentColor */
.icon-btn[data-close] svg,
.icon-btn.close svg,
button[data-close] svg,
button.close-btn svg,
button.modal-close svg,
button[aria-label="Close"] svg,
button[aria-label="Close dialog"] svg,
button[aria-label="Dismiss"] svg,
a[aria-label="Close"] svg{
  stroke: currentColor !important;
  fill: none !important;
}

/* If your X is a filled icon */
.icon-btn[data-close] svg [fill],
.icon-btn.close svg [fill],
button[data-close] svg [fill],
button.close-btn svg [fill],
button.modal-close svg [fill]{
  fill: currentColor !important;
}

/* ---------- Trash icons (always red + red circle, all modes) ---------- */
/* Supports: .trash / .btn-trash / data-action="delete" / aria-label contains delete */
.icon-btn.trash,
button.trash,
.btn-trash,
button.btn-trash,
button[data-action="delete"],
button[aria-label*="delete" i],
button[title*="delete" i],
a[aria-label*="delete" i]{
  color: var(--trash-color) !important;
  border: 2px solid var(--trash-ring) !important;
  background: var(--trash-bg) !important;
  border-radius: 999px !important;
}

/* Ensure the SVG inherits the red */
.icon-btn.trash svg,
button.trash svg,
.btn-trash svg,
button.btn-trash svg,
button[data-action="delete"] svg,
button[aria-label*="delete" i] svg,
button[title*="delete" i] svg,
a[aria-label*="delete" i] svg{
  stroke: currentColor !important;
  fill: none !important;
}

/* If the trash SVG uses fills */
.icon-btn.trash svg [fill],
button.trash svg [fill],
.btn-trash svg [fill],
button[data-action="delete"] svg [fill],
button[aria-label*="delete" i] svg [fill]{
  fill: currentColor !important;
}

/* ---------- Card & content helpers ---------- */
.container{max-width:1100px;margin:0 auto;padding:16px;}
.card{
  background:var(--card-surface);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:14px;
  box-shadow:var(--shadow);
}
.card h3{margin:0 0 8px;}
.cards{display:grid;gap:12px;}
.row{display:flex;gap:16px;flex-wrap:wrap;}
.stat-label{font-size:.85rem;color:var(--muted);}
.stat-value{font-weight:700;font-size:1.2rem;}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:collapse;table-layout:fixed;}
.table th,.table td{padding:14px;border-bottom:1px solid var(--border);text-align:left;}
.table td{word-break:break-word;}

/* ---------- Footer ---------- */
.app-footer{
  margin-top:auto;
  display:grid;
  place-items:center;
  color:var(--footer-fg);
  background:var(--footer-bg);
  border-top:3px solid var(--brand-gold);
  padding:10px max(16px,var(--safe-right))
           calc(10px + var(--safe-bottom))
           max(16px,var(--safe-left));
  text-align:center;
  white-space:nowrap; /* keep date + tagline in one line */
}

/* === Neutralize iOS/Safari Autofill Yellow (Face ID / Keychain) === */
input:-webkit-autofill,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text, #111) !important;
  box-shadow: 0 0 0 1000px var(--card-surface, var(--surface, #fff)) inset !important;
  caret-color: var(--text, #111);
  transition: background-color 9999s ease-in-out 0s;
}
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] textarea:-webkit-autofill,
:root[data-theme="dark"] select:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--card-surface, #111) inset !important;
  -webkit-text-fill-color: var(--text, #f5f5f5) !important;
}

/* ==========================================================
   DROPDOWN PANEL UNDER FOOTER FIX
   ========================================================== */
.fv-panel {
  z-index: 899 !important; /* Always below the green footer (.ftr has 900) */
}
#fv-portal-root {
  z-index: auto !important; /* Prevent portal root from lifting panels too high */
}