/*
 * SUN NUTRA VISUAL HARMONIZATION
 * Reference: Order Board (focus_dashboard.js)
 * Loaded through web_include_css for Frappe website/portal pages only.
 * Native ERPNext Desk/form/list chrome must stay on ERPNext/Frappe-native CSS;
 * do not put this file back into app_include_css during G4-B3 polish.
 *
 * Purpose: Override per-page inline <style> blocks that diverge from the
 *          Order Board visual standard (font, bg, header, buttons, cards).
 *
 * Loaded before page <style> blocks in the Frappe web template cascade,
 * so !important is required to win specificity where pages override us.
 *
 * Complements sunnutra-theme.css — never duplicate its rules.
 * Desk chrome selectors (.navbar, .page-head, .layout-main, .desk-page)
 * are explicitly excluded or reverted to avoid breaking the desk.
 *
 * Revised: 2026-04-14
 */

/* ══════════════════════════════════════════════════════════════════════════
   CSS VARIABLES (harmonization tokens — complement :root in sunnutra-theme.css)
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Page canvas */
  --sn-page-bg:         #f4f5f7;

  /* Primary brand button (Order Board reference) */
  --sn-btn-primary:     #2490EF;
  --sn-btn-primary-hov: #1a79d3;

  /* Card standard */
  --sn-card-radius:     12px;
  --sn-card-border:     1px solid #e0e0e0;
  --sn-card-shadow:     0 1px 3px rgba(0, 0, 0, 0.08);

  /* Header — all custom pages → white bar + dark text */
  --sn-hdr-bg:          #ffffff;
  --sn-hdr-text:        #1c2126;
  --sn-hdr-border:      1px solid #e5e7eb;

  /* Page/section title sizing */
  --sn-title-size:      18px;
  --sn-title-weight:    600;
}


/* ══════════════════════════════════════════════════════════════════════════
   1. FONT
   Pages using system-ui: qc_dashboard, production_dashboard,
                          customer_portal, personnel_schedule, others.
   Frappe desk font is already Inter — this reinforces on www pages.
   ══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: InterVariable, Inter, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   2. PAGE BACKGROUND
   Standardize to #f4f5f7 across all custom www pages.
   Affected: qc_dashboard (#f0f4f8), production_dashboard (#f0f4f8),
             customer_portal (#f8fafc), supervisor (#f8fafc),
             and any new pages defaulting to white or near-white.
   Note: personnel_schedule uses a warm brown (#f5f2ed) — this overrides
         it to the standard gray. Adjust if the warm theme must be kept.

   Desk guard: Frappe desk body is #f4f5f6 (one step off from #f4f5f7),
   so the visible change to desk chrome is negligible.
   ══════════════════════════════════════════════════════════════════════════ */

body {
  background-color: var(--sn-page-bg) !important;
}

/* Supervisor app root */
#supervisor-root {
  background: var(--sn-page-bg) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. HEADERS
   Replace dark navy/dark-blue .header backgrounds with white + dark text.
   Affected pages / colours overridden:
     • qc_dashboard         → .header { background: #1e40af }
     • production_dashboard → .header { background: #1e40af }
     • customer_portal      → .header { background: #1e3a5f }
     • personnel_schedule   → .header { background: #1e3a5f }

   NOT touched: .navbar, header.navbar, .page-head (Frappe desk chrome).
   ══════════════════════════════════════════════════════════════════════════ */

.header {
  background: var(--sn-hdr-bg)   !important;
  color:      var(--sn-hdr-text) !important;
  border-bottom: var(--sn-hdr-border) !important;
}

/* Page title inside the header bar */
.header h1,
.header h2,
.header h3 {
  color:       var(--sn-hdr-text) !important;
  font-size:   var(--sn-title-size);
  font-weight: var(--sn-title-weight);
}

/* Customer portal subtitle (.sub had opacity:.7 on dark bg) */
.header .sub {
  color:   #6b7280 !important;
  opacity: 1      !important;
}

/* Badge inside header (was rgba(255,255,255,0.2) readable on dark; fix for white bg) */
.header .badge {
  background: #f1f5f9 !important;
  color:      #374151 !important;
}

/* Personnel schedule: table header rows were also dark navy */
.grid-table th {
  background: #f1f5f9 !important;
  color:      #374151 !important;
}

/* Production dashboard: progress bar fill was #1e40af → brand blue */
.progress-fill {
  background: var(--sn-btn-primary) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   4. PRIMARY BUTTONS
   Standardize all non-semantic action buttons to #2490EF.

   Targeted selectors (www-specific, won't match .btn.btn-primary in desk):
     • .sched-btn          → production_dashboard (was #1e40af / #6d28d9 hover)
     • button:not(.btn)    → customer_portal bare <button> elements (was #1e3a5f)
     • .btn-primary (www)  → personnel_schedule (was gold #d4a24e)

   Intentionally excluded (keep semantic colour):
     • .btn-approve        → green (QC approve)
     • .btn-reject         → red   (QC reject)
     • .sched-btn.gen      → green (generate schedule)
     • .btn-danger         → red
     • .week-nav button    → personnel week nav (keep distinctive gold)
   ══════════════════════════════════════════════════════════════════════════ */

/* Production dashboard — schedule view/run buttons */
.sched-btn:not(.gen) {
  background:   var(--sn-btn-primary) !important;
  border-color: var(--sn-btn-primary) !important;
  color:        #fff !important;
}

.sched-btn:not(.gen):hover {
  background:   var(--sn-btn-primary-hov) !important;
  border-color: var(--sn-btn-primary-hov) !important;
}

/*
 * Customer portal bare <button> elements.
 * We target button:not(.btn) to avoid touching Frappe desk .btn elements.
 * The portal uses raw <button> tags without framework classes.
 */
button:not(.btn):not(.btn-reset):not(.drop-icon):not(.sidebar-toggle-btn):not(.nav-link):not([role="tab"]):not(.action-btn):not(.btn-approve):not(.btn-reject):not(.btn-danger) {
  background:   var(--sn-btn-primary) !important;
  border-color: var(--sn-btn-primary) !important;
  color:        #fff !important;
}

button:not(.btn):not(.btn-reset):not(.drop-icon):not(.sidebar-toggle-btn):not(.nav-link):not([role="tab"]):not(.action-btn):not(.btn-approve):not(.btn-reject):not(.btn-danger):hover {
  background:   var(--sn-btn-primary-hov) !important;
  border-color: var(--sn-btn-primary-hov) !important;
}

/*
 * Personnel schedule .btn-primary (gold → brand blue).
 * Scoped to avoid colliding with Frappe desk .btn-primary.
 * The www page does not also add .btn, so specificity is fine.
 */
.add-form .btn-primary,
.schedule-form .btn-primary,
form .btn-primary:not([data-fieldname]) {
  background:   var(--sn-btn-primary) !important;
  border-color: var(--sn-btn-primary) !important;
  color:        #fff !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. CARDS
   Standardize border-radius (→ 12px), add border + shadow.
   Affected selectors (www-page class names only):
     • .card      — qc_dashboard (8px), customer_portal
     • .stat-card — production_dashboard (10px)
     • .kpi-card  — customer_portal (10px)
     • .section   — customer_portal (10px)
     • .wo-card   — production_dashboard (8px)
     • .env-card  — qc_dashboard, production_dashboard (8px)
     • .sched-run — production_dashboard (8px)
     • .add-form  — personnel_schedule (10px)
     • .dt-alert  — production_dashboard alert rows
   ══════════════════════════════════════════════════════════════════════════ */

.card,
.stat-card,
.kpi-card,
.section,
.wo-card,
.env-card,
.sched-run,
.add-form {
  border-radius: var(--sn-card-radius) !important;
  border:        var(--sn-card-border);
  box-shadow:    var(--sn-card-shadow) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   6. PAGE / SECTION TITLES
   Consistent 18px 600-weight heading for section labels.
   ══════════════════════════════════════════════════════════════════════════ */

.section-title {
  font-size:   var(--sn-title-size);
  font-weight: var(--sn-title-weight);
  color:       var(--sn-hdr-text);
}


/* ══════════════════════════════════════════════════════════════════════════
   7. FRAPPE DESK CHROME GUARD
   Explicitly revert our broad rules inside known Frappe desk containers
   so the desk navbar, sidebar, form headers, and modals stay untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* Desk body background — let Frappe's own CSS win */
.frappe-desk body,
.desk-page body {
  background-color: revert !important;
}

/* Navbar / page-head — never touched by .header rule above (different class),
   but guard explicitly in case a future template uses .header on a desk element */
.navbar,
header.navbar,
.page-head,
.layout-main-section-wrapper {
  background: revert !important;
  color:      revert !important;
  border-bottom: revert !important;
}

/* Frappe desk cards (widget-box, etc.) — keep their own border-radius */
.widget-box,
.number-widget-box,
.shortcut-widget-box,
.onboarding-step,
.link-item {
  border-radius: revert !important;
  border:        revert !important;
  box-shadow:    revert !important;
}

/* Frappe desk sidebar controls — revert our broad button rule */
.btn-reset,
.drop-icon,
.sidebar-toggle-btn {
  background: revert !important;
  color:      revert !important;
}

/* Frappe desk standard buttons — keep them untouched */
.btn,
.btn-primary,
.btn-default,
.btn-secondary,
.btn-danger {
  background:   revert !important;
  border-color: revert !important;
  color:        revert !important;
}

/* Re-apply sunnutra-theme.css desk btn-primary hover (complement, not replace) */
.btn-primary:hover,
.btn-primary:focus {
  box-shadow: 0 1px 4px rgba(36, 144, 239, 0.25);
}