/* ==========================================================
   File: /assets/css/app.css
   Purpose: Page-level layout glue that sits on top of theme.css.
   - Prevents horizontal scroll
   - Safe-area aware side paddings
   - Flex shell so the footer sits flush at the bottom
   - Guardrails for accidental 100vw usage
   ========================================================== */

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

/* ---------- Global guards ---------- */
html, body { overflow-x: hidden; }

/* ---------- Flex shell so footer stays at bottom ---------- */
#app, .app-shell{
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ---------- Default paddings (safe-area aware) ---------- */
.app-header,
.breadcrumbs-bar,
.app-main,
.app-footer{
  padding-left:  max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
}

/* Main grows; footer sits at bottom */
.app-main{ flex: 1 1 auto; }

/* Footer gets extra bottom padding for iOS home-indicator */
.app-footer{
  margin-top: auto;
  padding-bottom: calc(12px + var(--safe-bottom));
}

/* ---------- Content helpers ---------- */
.container{ max-width: 1100px; margin: 0 auto; padding: 16px; }
.cards{ display: grid; gap: 12px; }
.card  {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow);
}

/* ---------- 100vw guardrail ---------- */
[class*="vw"], [style*="100vw"]{
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- Optional: lock scroll when overlays are open ---------- */
body.drawer-open{ overflow: hidden; }

/* ==========================================================
   FarmVista — Global form controls (one-and-done)
   ========================================================== */

:root{
  --fv-field-h:       44px;
  --fv-field-pad-x:   12px;
  --fv-field-radius:  10px;
  --fv-field-font:    500 16px/1.25 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --fv-field-bg:      var(--bg);
  --fv-field-fg:      var(--text);
  --fv-field-border:  1px solid var(--border);
}

/* Reusable inputs */
.fv-input{
  display:block;
  width:100%;
  box-sizing:border-box;
  height:var(--fv-field-h);
  padding:0 var(--fv-field-pad-x);
  border:var(--fv-field-border);
  border-radius:var(--fv-field-radius);
  background:var(--fv-field-bg);
  color:var(--fv-field-fg);
  font:var(--fv-field-font);
  line-height:var(--fv-field-h);           /* center text vertically */
  -webkit-appearance:none;
  appearance:none;
}

.fv-textarea{
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:120px;
  padding:10px var(--fv-field-pad-x);
  border:var(--fv-field-border);
  border-radius:var(--fv-field-radius);
  background:var(--fv-field-bg);
  color:var(--fv-field-fg);
  font:var(--fv-field-font);
  resize:vertical;
}

/* Native date/time pickers automatically get the same baseline */
input[type="date"],
input[type="datetime-local"],
input[type="time"]{
  display:block;
  width:100%;
  box-sizing:border-box;
  height:var(--fv-field-h);
  padding:0 var(--fv-field-pad-x);
  border:var(--fv-field-border);
  border-radius:var(--fv-field-radius);
  background:var(--fv-field-bg);
  color:var(--fv-field-fg);
  font:var(--fv-field-font);
  line-height:var(--fv-field-h);           /* ✅ keeps value vertically centered */
  -webkit-appearance:none;
  appearance:none;
}

/* Normalize editable area on WebKit so text sits centered */
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit{
  padding:0;
}

/* Calendar / clock icon */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.9;
  cursor:pointer;
  margin-right:6px;
}

/* Remove spin buttons */
input[type="time"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button{
  display:none;
}

/* Focus ring */
.fv-input:focus,
.fv-textarea:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus{
  outline:2px solid color-mix(in srgb, var(--brand-gold, #D0C542) 65%, transparent);
  outline-offset:2px;
}

/* Dark theme bridge */
:root.dark .fv-input,
:root.dark .fv-textarea,
:root.dark input[type="date"],
:root.dark input[type="datetime-local"],
:root.dark input[type="time"]{
  --fv-field-bg:     var(--surface);
  --fv-field-fg:     var(--text);
  --fv-field-border: 1px solid var(--border);
}

/* ==========================================================
   FarmVista — Global page header pattern (shared title + summary)
   Use on every page:
     <div class="page container">
       <h1 class="page-title">Page Title</h1>
       <p class="page-sub">Short summary of what’s here…</p>
     </div>
   ========================================================== */

.page{ padding-block:10px 24px; }
.page-title{
  margin:12px 0 4px;
  line-height:1.15;
  color:var(--text);
  /* No font-size here so h1/h2 sizes keep coming from theme.css */
}
.page-sub{
  margin:0 0 16px;
  color:var(--muted, #8a928c);
}

/* Optional small variant for sub-sections (avoids inline styles) */
.page-title-sm{
  font-size:18px;
  line-height:1.2;
  margin:0 0 10px;
  color:var(--text);
}

/* ==========================================================
   FarmVista — Fix link color inheritance (dark + light)
   ========================================================== */

.section a,
.card a,
.tile a,
.panel a,
.section a:link,
.card a:link,
.tile a:link,
.panel a:link,
.section a:visited,
.card a:visited,
.tile a:visited,
.panel a:visited {
  color: inherit !important;      /* use surrounding text color (respects dark theme) */
  text-decoration: none;          /* remove underline */
}

.section a .label,
.card a .label,
.tile a .label,
.panel a .label {
  color: inherit !important;
}

/* ==========================================================
   FarmVista — Permission-based visibility
   Elements hidden by the permission engine should fully collapse.
   ========================================================== */

[data-perm][hidden],
.fv-perm-hidden{
  display: none !important;
}

/* ==========================================================
   FarmVista — Permission-based disabled UI (greyed out)
   Used by /js/perm-ui.js
   ========================================================== */

.fv-perm-disabled{
  opacity: .45;
  filter: grayscale(.25);
  cursor: not-allowed !important;
}

.fv-perm-disabled *{
  cursor: not-allowed !important;
}

/* Make disabled links/buttons not look "active" */
a.fv-perm-disabled,
button.fv-perm-disabled{
  pointer-events: none;
}

/* Covers web components like <fv-form-button> (host can be dimmed) */
fv-form-button.fv-perm-disabled{
  opacity: .45;
  filter: grayscale(.25);
}

/* ==========================================================
   Shop Equipment — Service Sheet footer buttons (mobile stack)
   Stacks the 4 lower buttons (Add WO / Service Records / Edit / Close)
   ========================================================== */

@media (max-width: 620px){
  #svcSheet footer{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #svcSheet footer .fv-svc-footer-left{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }

  #svcSheet footer .fv-svc-footer-spacer{
    display: none !important;
  }

  #svcSheet footer .fv-svc-footer-left .btn{
    width: 100%;
    justify-content: center;
  }

  #svcSheet footer > .btn{
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================
   FarmVista — Shared secondary surfaces + hidden controls
   Sept. 4, 2026

   Several older pages use var(--surface-2, light-fallback). Defining the
   token in dark mode prevents white cards/headers on Grain Contracts,
   Add Grain Contract pricing, and Grain Contract Report without changing
   their light-theme appearance.
   ========================================================== */

html.dark,
html[data-theme="dark"]{
  --surface-2:#1b271e;
  --surface-3:#223128;
}

/* The HTML hidden attribute must always beat component display rules such
   as .btn{display:inline-flex}. This keeps edit-only actions (for example
   Void Hauling Job) out of create/new forms. */
[hidden]{
  display:none !important;
}

/* Extra safety for the remaining grain/report secondary surfaces. */
html.dark .pricing-box,
html[data-theme="dark"] .pricing-box,
html.dark .edit-pricing-box,
html[data-theme="dark"] .edit-pricing-box,
html.dark .summary-row,
html[data-theme="dark"] .summary-row,
html.dark .info-box,
html[data-theme="dark"] .info-box,
html.dark .modal-summary-item,
html[data-theme="dark"] .modal-summary-item,
html.dark .ticket-detail-item,
html[data-theme="dark"] .ticket-detail-item,
html.dark .btn-secondary,
html[data-theme="dark"] .btn-secondary{
  background:var(--surface-2) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

/* Grain Contracts — keep hauling-job and contract delivery date ranges side by side. */
.contracts-page #hauling-jobs-table-body td:last-child,
.contracts-page #contracts-table-body td:last-child{
  white-space:nowrap;
}

/* Grain Index — remaining-bushel cues are FONT ONLY.
   grain-index-table-ui.js supplies the green/orange/red text class and tooltip. */
.inventory-table td.fv-grain-remaining-green,
.inventory-table td.fv-grain-remaining-orange,
.inventory-table td.fv-grain-remaining-red,
.fv-ahj-table td.fv-grain-remaining-green,
.fv-ahj-table td.fv-grain-remaining-orange,
.fv-ahj-table td.fv-grain-remaining-red{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Higher-specificity Grain Index override. The table UI helper injects its
   own !important background rules after app.css, so this selector must beat
   that later rule by specificity. Keep ONLY the font color from the helper. */
html body .inventory-page .inventory-table td.fv-grain-remaining-green,
html body .inventory-page .inventory-table td.fv-grain-remaining-orange,
html body .inventory-page .inventory-table td.fv-grain-remaining-red,
html body .inventory-page .fv-ahj-table td.fv-grain-remaining-green,
html body .inventory-page .fv-ahj-table td.fv-grain-remaining-orange,
html body .inventory-page .fv-ahj-table td.fv-grain-remaining-red{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}