/* ============================================================
   fert-recommender-saas-codex-test-hybrid - Agro Command Sheet theme
   UI layer only. Engine contracts and agronomic data stay intact.
   ============================================================ */

   :root {
    color-scheme: light;

    /* Brand tokens */
    --color-brand-green: #176b3a;
    --color-brand-green-dark: #044521;
    --color-brand-green-hover: #0f4d2a;
    --color-brand-green-soft: #e4f3e6;
    --color-brand-green-card-start: #0d4e2a;
    --color-brand-green-card-end: #095f30;
    --color-brand-red: #960909;
    --color-brand-red-dark: #8a1212;
    --color-brand-red-rgb: 150, 9, 9;
    --color-brand-red-dark-rgb: 138, 18, 18;

    /* Action tokens */
    --color-action-orange: #f2a900;
    --color-action-orange-hover: #d89500;
    --color-action-orange-soft: #fff3c4;
    --color-text-action-on-orange: #151100;

    /* Surface tokens */
    --color-surface-page: #f3f5ed;
    --color-surface-page-top: #f4f6ef;
    --color-surface-page-bottom: #eef2e7;
    --color-surface-band: #e7ecdd;
    --color-surface-card: #ffffff;
    --color-surface-panel: #044521;
    --color-surface-input: #fbfcf7;
    --color-surface-form-side: #b2cb80;
    --color-surface-success-tint: #f7fbf4;
    --color-surface-inverse-subtle: rgba(255, 255, 255, 0.08);
    --color-surface-print: #ffffff;
    --color-surface-mobile-overlay-rgb: 16, 24, 32;

    /* Status tokens */
    --color-status-success: #1f7a3f;
    --color-status-success-soft: #e4f5e8;
    --color-status-success-border: #b7dbc0;
    --color-status-success-border-strong: #b9dfc2;
    --color-status-warning: #b66a00;
    --color-status-warning-soft: #fff0d7;
    --color-status-warning-border: #f0c36a;
    --color-status-warning-border-strong: #f0cf88;
    --color-status-danger: #c24135;
    --color-status-danger-soft: #fae4df;
    --color-status-danger-border: #efb3aa;
    --color-status-danger-border-strong: #efb5ad;
    --color-status-info: #2364aa;
    --color-status-info-soft: #e8f0fb;
    --color-status-info-border: #b8cfeb;
    --color-status-organic: #6c8f3d;

    /* Semantic status tokens */
    --status-success-bg: var(--color-status-success-soft);
    --status-success-border: var(--color-status-success-border);
    --status-success-border-strong: var(--color-status-success-border-strong);
    --status-success-text: var(--color-status-success);
    --status-success-strong: var(--color-status-success);
    --status-success-subtle: var(--color-surface-success-tint);
    --status-warning-bg: var(--color-status-warning-soft);
    --status-warning-border: var(--color-status-warning-border);
    --status-warning-border-strong: var(--color-status-warning-border-strong);
    --status-warning-text: var(--color-status-warning);
    --status-warning-strong: var(--color-status-warning);
    --status-warning-subtle: var(--color-status-warning-soft);
    --status-danger-bg: var(--color-status-danger-soft);
    --status-danger-border: var(--color-status-danger-border);
    --status-danger-border-strong: var(--color-status-danger-border-strong);
    --status-danger-text: var(--color-status-danger);
    --status-danger-strong: var(--color-status-danger);
    --status-danger-subtle: var(--color-status-danger-soft);
    --status-info-bg: var(--color-status-info-soft);
    --status-info-border: var(--color-status-info-border);
    --status-info-border-strong: var(--color-status-info-border);
    --status-info-text: var(--color-status-info);
    --status-info-strong: var(--color-status-info);
    --status-info-subtle: var(--color-status-info-soft);
    --status-neutral-bg: var(--color-surface-input);
    --status-neutral-border: var(--color-border-soft);
    --status-neutral-border-strong: var(--color-border-strong);
    --status-neutral-text: var(--color-text-muted-strong);
    --status-neutral-strong: var(--color-text-strong);
    --status-neutral-subtle: var(--color-surface-band);
    --status-semaphore-low: var(--status-danger-strong);
    --status-semaphore-optimal: var(--status-success-strong);
    --status-semaphore-high: var(--status-warning-strong);
    --status-semaphore-missing: var(--status-neutral-strong);

    /* Result hierarchy tokens */
    --result-primary-surface: var(--color-surface-card);
    --result-primary-border: var(--color-border-success-tint);
    --result-primary-shadow: var(--shadow-panel);
    --result-secondary-surface: var(--status-neutral-bg);
    --result-secondary-border: var(--status-neutral-border);
    --result-ledger-surface: var(--color-surface-card);
    --result-ledger-border: var(--status-neutral-border);
    --result-chip-surface: var(--status-neutral-bg);
    --result-chip-border: var(--status-neutral-border);
    --result-inline-divider: var(--color-border-overlay-soft);

    /* Quick mode tokens */
    --quick-mode-gap: var(--compact-gap);
    --quick-mode-section-gap: var(--layout-gap-card);
    --quick-mode-card-padding: var(--card-padding-sm);
    --quick-mode-hero-padding: var(--card-padding-sm);
    --quick-mode-toggle-padding-y: var(--space-sm);
    --quick-mode-toggle-padding-x: var(--space-md);
    --quick-mode-toggle-bg: var(--status-neutral-bg);
    --quick-mode-toggle-border: var(--status-neutral-border);
    --quick-mode-toggle-text: var(--text);
    --quick-mode-toggle-active-bg: var(--status-info-bg);
    --quick-mode-toggle-active-border: var(--status-info-border);
    --quick-mode-toggle-active-text: var(--status-info-strong);

    /* Text tokens */
    --color-text-main: #172019;
    --color-text-strong: #0b1110;
    --color-text-ink: #111820;
    --color-text-muted: #66705f;
    --color-text-muted-strong: #3f493d;
    --color-text-inverse: #ffffff;
    --color-text-inverse-muted: rgba(255, 255, 255, 0.78);
    --color-text-inverse-subtle: rgba(255, 255, 255, 0.62);
    --color-text-print: #000000;
    --color-text-print-muted: #333333;

    /* Border tokens */
    --color-border-soft: #d9dfcc;
    --color-border-strong: #a9b497;
    --color-border-inverse-soft: rgba(255, 255, 255, 0.12);
    --color-border-inverse-medium: rgba(255, 255, 255, 0.13);
    --color-border-accent-translucent: rgba(242, 169, 0, 0.35);
    --color-border-brand-green-card: rgba(64, 108, 48, 0.24);
    --color-border-overlay-soft: rgba(17, 24, 32, 0.08);
    --color-border-success-tint: #bfd8b2;

    /* Shadow tokens */
    --color-shadow-rgb: 17, 24, 32;
    --shadow-card: 0 18px 45px rgba(var(--color-shadow-rgb), 0.09);
    --shadow-panel: 0 10px 25px rgba(var(--color-shadow-rgb), 0.07);
    --shadow-card-layered: 0 2px 4px rgba(var(--color-shadow-rgb), 0.04), 0 8px 16px rgba(var(--color-shadow-rgb), 0.06), 0 16px 32px rgba(var(--color-shadow-rgb), 0.08);
    --shadow-card-hover: 0 4px 8px rgba(var(--color-shadow-rgb), 0.06), 0 12px 24px rgba(var(--color-shadow-rgb), 0.08), 0 24px 48px rgba(var(--color-shadow-rgb), 0.10);
    --shadow-button-hover: 0 2px 6px rgba(var(--color-shadow-rgb), 0.08), 0 6px 16px rgba(var(--color-shadow-rgb), 0.10);

    /* Focus tokens */
    --color-focus-ring: rgba(242, 169, 0, 0.22);

    /* Spacing scale */
    --space-2xs: 3px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 10px;
    --space-lg: 12px;
    --space-xl: 14px;
    --space-2xl: 16px;
    --space-3xl: 18px;
    --space-4xl: 20px;
    --space-5xl: 22px;
    --space-6xl: 24px;
    --space-7xl: 28px;
    --space-8xl: 30px;
    --space-9xl: 32px;

    /* Layout and section spacing */
    --layout-gap-main: 18px;
    --layout-gap-section: 18px;
    --layout-gap-card: 14px;
    --layout-gap-grid: 20px;
    --layout-gap-compact: 8px;
    --main-side-gap: var(--layout-gap-main);
    --compact-gap: 8px;
    --mobile-gap: 12px;

    /* Sizing and proportions */
    --shell-max-width: 1280px;
    --content-max-width: 1120px;
    --auth-max-width: 440px;
    --report-max-width: 980px;
    --shell-page-gutter: 32px;
    --shell-page-gutter-tablet: 24px;
    --shell-page-gutter-mobile: 16px;
    --page-padding-y: 24px;
    --page-padding-bottom: 56px;
    --mobile-page-padding-bottom: 40px;
    --auth-padding-y: 48px;
    --workbench-layout-columns: 1.25fr 0.75fr;
    --form-layout-columns: 0.8fr 1.2fr;
    --command-layout-columns: minmax(260px, 0.8fr) minmax(0, 1.45fr) minmax(280px, 0.9fr);
    --command-meta-columns: repeat(5, minmax(120px, 1fr));
    --field-height: 48px;
    --field-height-compact: 46px;
    --field-gap: 7px;
    --field-icon-space: 48px;
    --checkbox-size: 18px;
    --textarea-height: 108px;
    --button-height: 44px;
    --button-height-small: 36px;
    --touch-target-height: 48px;
    --action-card-height: 325px;

    /* Padding tokens */
    --card-padding-sm: 14px;
    --card-padding-md: 18px;
    --card-padding-lg: 22px;
    --hero-padding: 28px;
    --auth-card-padding: 30px;
    --report-sheet-padding: 28px;
    --mobile-card-padding: 16px;
    --button-padding-y: 11px;
    --button-padding-x: 18px;
    --button-padding-y-small: 8px;
    --button-padding-x-small: 12px;
    --field-padding-y: 12px;
    --field-padding-x: 13px;
    --field-padding-y-compact: 11px;
    --field-padding-x-compact: 12px;

    /* Radius tokens */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --radius-card: var(--radius-md);
    --radius-panel: var(--radius-md);
    --radius-pill: 999px;

    /* Legacy aliases used by existing screens */
    --bg: var(--color-surface-page);
    --bg-strong: var(--color-text-ink);
    --bg-band: var(--color-surface-band);
    --card: var(--color-surface-card);
    --card-strong: var(--color-surface-panel);
    --input-bg: var(--color-surface-input);
    --border: var(--color-border-soft);
    --border-strong: var(--color-border-strong);
    --text: var(--color-text-main);
    --text-strong: var(--color-text-strong);
    --muted: var(--color-text-muted);
    --muted-strong: var(--color-text-muted-strong);
    --primary: var(--color-brand-green);
    --primary-hover: var(--color-brand-green-hover);
    --primary-soft: var(--color-brand-green-soft);
    --accent: var(--color-action-orange);
    --accent-hover: var(--color-action-orange-hover);
    --accent-soft: var(--color-action-orange-soft);
    --info: var(--color-status-info);
    --info-soft: var(--color-status-info-soft);
    --danger: var(--color-status-danger);
    --danger-soft: var(--color-status-danger-soft);
    --warning: var(--color-status-warning);
    --warning-soft: var(--color-status-warning-soft);
    --success: var(--color-status-success);
    --success-soft: var(--color-status-success-soft);
    --shadow: var(--shadow-card);
    --shadow-soft: var(--shadow-panel);
    --radius: var(--radius-card);
    --focus: 0 0 0 3px var(--color-focus-ring);
    --success-bg: var(--status-success-bg);
    --success-border: var(--status-success-border);
    --success-text: var(--status-success-text);
    --warning-bg: var(--status-warning-bg);
    --warning-border: var(--status-warning-border);
    --warning-text: var(--status-warning-text);
    --danger-bg: var(--status-danger-bg);
    --danger-border: var(--status-danger-border);
    --danger-text: var(--status-danger-text);
    --info-bg: var(--status-info-bg);
    --info-border: var(--status-info-border);
    --info-text: var(--status-info-text);
  }
  
  * {
    box-sizing: border-box;
  }
  
  html {
    min-height: 100%;
  }
  
  body {
    min-height: 100vh;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text);
    background:
      linear-gradient(180deg, rgba(var(--color-shadow-rgb), 0.06), rgba(var(--color-shadow-rgb), 0) 240px),
      var(--bg);
  }
  
  body.agro-app {
    background:
      linear-gradient(135deg, rgba(var(--color-brand-red-rgb), 0.98) 0, rgba(var(--color-brand-red-dark-rgb), 0.98) 280px, transparent 280px),
      linear-gradient(180deg, var(--color-surface-page-top) 0, var(--color-surface-page-bottom) 100%);
  }
  
  a {
    color: inherit;
  }
  
  button,
  input,
  select,
  textarea {
    font: inherit;
  }
  
  ::selection {
    background: var(--accent-soft);
  }
  
  .page,
  .command-page {
    width: min(var(--shell-max-width), calc(100% - var(--shell-page-gutter)));
    margin: 0 auto;
    padding: var(--page-padding-y) 0 var(--page-padding-bottom);
  }
  
  .screen-shell {
    width: min(var(--content-max-width), calc(100% - var(--shell-page-gutter)));
    margin: 0 auto;
    padding: var(--page-padding-y) 0 var(--page-padding-bottom);
  }
  
  .auth-shell {
    width: min(var(--auth-max-width), calc(100% - var(--shell-page-gutter)));
    margin: 0 auto;
    padding: var(--auth-padding-y) 0;
  }
  
  .eyebrow {
    margin: 0 0 var(--space-sm);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  
  .muted {
    color: var(--muted);
  }
  
  .mono-number {
    font-variant-numeric: tabular-nums;
  }
  
  /* ============================================================
     ITALIAN-SERBIAN DESIGN REFINEMENTS
     Filiganski fini italijanski stil prilagođen srpskom tržištu
     ============================================================ */
  
  /* Enhanced shadows (layered, not flat) */
  .card-shadow {
    box-shadow: var(--shadow-card-layered);
  }
  
  .card-shadow-hover {
    box-shadow: var(--shadow-card-hover);
  }
  
  /* Smooth transitions (200-300ms ease) */
  .transition-smooth {
    transition: all 0.25s ease;
  }
  
  /* ============================================================
     MOBILE RESPONSIVENESS (3 breakpoints)
     ============================================================ */
  
  /* Tablet breakpoint (< 900px) */
  @media (max-width: 900px) {
    .form-side {
      display: none; /* Hide sidebar on tablet/mobile */
    }
  
    .form-main {
      width: 100%;
      max-width: 100%;
    }
  
    .form-layout {
      display: block;
    }
  
    /* Grid collapses to 2 columns */
    .grid-3-col {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* Small tablet breakpoint (< 760px) */
  @media (max-width: 760px) {
    body.agro-app {
      background:
        linear-gradient(180deg, rgba(var(--color-surface-mobile-overlay-rgb), 0.98) 0, rgba(var(--color-surface-mobile-overlay-rgb), 0.98) 180px, transparent 180px),
        var(--bg);
    }
  
    .page,
    .command-page,
    .screen-shell {
      width: calc(100% - var(--shell-page-gutter-tablet));
      padding-top: var(--mobile-card-padding);
    }
  
    /* Grid collapses to single column */
    .grid-2-col,
    .grid-3-col {
      grid-template-columns: 1fr;
    }
  }
  
  /* Mobile breakpoint (< 640px) */
  @media (max-width: 640px) {
    body.agro-app {
      background:
        linear-gradient(180deg, rgba(var(--color-surface-mobile-overlay-rgb), 0.98) 0, rgba(var(--color-surface-mobile-overlay-rgb), 0.98) 140px, transparent 140px),
        var(--bg);
    }
  
    .page,
    .command-page,
    .screen-shell {
      width: calc(100% - var(--shell-page-gutter-mobile));
      padding: var(--mobile-gap) 0 var(--mobile-page-padding-bottom);
    }
  
    /* Full-width buttons on mobile */
    .actions {
      flex-direction: column;
      gap: var(--mobile-gap);
    }
  
    .actions .btn {
      width: 100%;
    }
  
    /* Larger touch targets (min 48px) */
    .btn,
    button,
    select,
    input[type="checkbox"],
    input[type="radio"] {
      min-height: var(--touch-target-height);
    }
  
    /* Adjust eyebrow for mobile */
    .eyebrow {
      font-size: 11px;
      letter-spacing: 0.06em;
    }
  
    /* Reduce spacing on mobile */
    .form-hero {
      margin-bottom: 20px;
    }
  }
  
  /* ============================================================
     PRINT MODE (professional PDF output)
     ============================================================ */
  
  @media print {
    /* Hide interactive elements */
    .form-side,
    .actions,
    nav,
    header,
    .eyebrow,
    .quick-mode-toggle,
    button,
    .btn,
    .save-notice {
      display: none !important;
    }
  
    /* Clean background */
    body,
    body.agro-app {
      background: var(--color-surface-print) !important;
      color: var(--color-text-print) !important;
    }
  
    /* Page breaks */
    .result-section,
    .command-section {
      page-break-inside: avoid;
      page-break-after: auto;
    }
  
    /* Optimize text for print */
    body {
      font-size: 11pt;
      line-height: 1.5;
    }
  
    h1 { font-size: 18pt; }
    h2 { font-size: 14pt; }
    h3 { font-size: 12pt; }
  
    /* Remove shadows for print */
    * {
      box-shadow: none !important;
    }
  
    /* Ensure cards print with borders */
    .card,
    .result-card,
    .command-card {
      border: 1px solid var(--border) !important;
      margin-bottom: var(--space-2xl);
    }
  }
  
  /* ============================================================
     QUICK MODE (optional - hide sidebar when enabled)
     ============================================================ */
  
  body.quick-mode .form-side {
    display: none;
  }
  
  body.quick-mode .form-main {
    width: 100%;
    max-width: 100%;
  }
  
  body.quick-mode .form-layout {
    display: block;
  }

  body.quick-mode .command-layout > .decision-stack:first-child .command-card:nth-of-type(n+2),
  body.quick-mode .command-layout > .decision-stack:last-child .command-card:nth-of-type(n+2) {
    display: none;
  }