/* ==========================================================
   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;
  }
}