/* Daye Bensa Field Monitoring — mobile-first styles */
:root {
  --green: #00462E;
  --green-hover: #2D8B5E;
  --cream: #FFF8EE;
  --gold: #C8A96E;
  --gold-soft: #E8D5B7;
  --parch: #F5E6D0;
  --text: #1A1A1A;
  --muted: #6B5A45;
  --success: #A8C5A0;
  --fail: #B42318;
  --fail-bg: #FDECEA;
  --na: #8A8A8A;
  --card: #FFFCF6;
  --radius: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--text);
  font-family: 'Host Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px; line-height: 1.45;
}
a { color: var(--green); }
h1 { font-size: 1.45rem; margin: 0; color: var(--green); line-height: 1.2; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; color: var(--green); }
h3 { font-size: 1rem; margin: .4rem 0; color: var(--green); }
.ic { width: 18px; height: 18px; flex: none; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.center { text-align: center; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.main { padding-top: 18px; padding-bottom: 40px; min-height: 70vh; }

/* Header */
.topbar { background: var(--green); color: var(--cream); position: sticky; top: 0; z-index: 30; }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; padding-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; min-width: 0; }
.brand-mark svg { width: 30px; height: 30px; display: block; }
.brand-name { display: block; font-weight: 700; letter-spacing: .08em; font-size: 1rem; }
.brand-sub { display: block; color: var(--gold); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who { display: flex; align-items: center; gap: 4px; }
.who-text { text-align: right; font-size: .85rem; margin-right: 6px; display: none; }
.icon-btn { color: var(--cream); padding: 8px; border-radius: 8px; display: inline-flex; }
.icon-btn:hover { background: var(--green-hover); }
.nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 8px; color: rgba(255,248,238,.88); text-decoration: none; font-size: .88rem; white-space: nowrap; }
.nav a:hover { background: var(--green-hover); }
.nav a.on { background: var(--cream); color: var(--green); font-weight: 600; }
.goldline { height: 2px; background: var(--gold); }
.foot { text-align: center; color: var(--muted); font-size: .78rem; padding: 18px 16px 28px; border-top: 1px solid var(--gold-soft); }
@media (min-width: 640px) { .who-text { display: block; } }

/* Cards, layout */
.card { background: var(--card); border: 1px solid var(--gold-soft); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,70,46,.05); }
.pad { padding: 16px; }
.narrow { max-width: 520px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-head .sub { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stack > * + * { margin-top: 12px; }
.grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .grid-6 { grid-template-columns: repeat(3, 1fr); } }

/* Forms */
.fld { display: block; }
.fld > span:first-child { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text); background: #fff; border: 1px solid var(--gold-soft); border-radius: 8px; padding: 10px 12px; min-height: 44px;
}
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px rgba(0,70,46,.15); }
input[readonly] { background: var(--parch); }
.hint { font-size: .78rem; margin-top: 4px; display: block; }
.hint.bad, .bad-text { color: var(--fail); font-weight: 600; }
.hint.ok { color: var(--green); }
input.is-bad { border-color: var(--fail); background: var(--fail-bg); color: var(--fail); font-weight: 600; }
input.is-ok { border-color: var(--success); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-weight: 600; font-size: .92rem; padding: 10px 16px; min-height: 44px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s; }
.btn-primary { background: var(--green); color: var(--cream); }
.btn-primary:hover { background: var(--green-hover); }
.btn-outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn-outline:hover { background: var(--parch); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--parch); }
.btn-danger { background: var(--fail); color: #fff; }
.btn-sm { padding: 6px 10px; min-height: 34px; font-size: .82rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Flash */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: .92rem; }
.flash-ok { background: rgba(168,197,160,.35); color: var(--green); border: 1px solid var(--success); }
.flash-err { background: var(--fail-bg); color: var(--fail); border: 1px solid #F3B8B2; }
.flash ul { margin: 6px 0 0; padding-left: 18px; }

/* Badges */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.badge.ok { background: rgba(168,197,160,.55); color: var(--green); }
.badge.bad { background: var(--fail-bg); color: var(--fail); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; text-transform: capitalize; }
.pill-draft { background: var(--parch); color: var(--muted); }
.pill-submitted { background: var(--green); color: var(--cream); }
.pill-off { background: #eee; color: #777; }

/* Auth */
.auth-body { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 16px; background: var(--cream); }
.auth-card { width: 100%; max-width: 400px; padding: 26px 22px; border-top: 4px solid var(--green); }
.auth-brand { text-align: center; margin-bottom: 18px; }
.auth-brand .brand-name { color: var(--green); font-size: 1.3rem; margin-top: 8px; }
.auth-title { font-weight: 600; margin-top: 2px; }
.tagline { color: var(--gold); font-style: italic; font-size: .88rem; margin-top: 2px; }

/* Tables */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th { text-align: left; background: var(--green); color: var(--cream); font-weight: 600; padding: 9px 10px; white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--gold-soft); vertical-align: top; }
.tbl tr:hover td { background: rgba(245,230,208,.4); }
.tbl .num { text-align: right; }

/* Mobile list cards */
.alist { display: grid; gap: 10px; }
.acard { display: block; padding: 12px 14px; text-decoration: none; color: inherit; }
.acard:hover { border-color: var(--gold); }
.acard-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.acard-title { font-weight: 700; color: var(--green); }
.acard-meta { font-size: .82rem; color: var(--muted); margin-top: 4px; }
@media (min-width: 900px) { .only-mobile { display: none !important; } }
@media (max-width: 899px) { .only-desktop { display: none !important; } }

.filters { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.filters .full { grid-column: 1 / -1; }
@media (min-width: 900px) { .filters { grid-template-columns: 2fr 1.3fr 1fr 1fr 1fr auto; align-items: end; } .filters .full { grid-column: auto; } }

/* ---------- Audit form ---------- */
.form-title { background: var(--green); color: var(--cream); border-radius: var(--radius) var(--radius) 0 0; padding: 12px 16px; font-weight: 700; letter-spacing: .03em; font-size: .95rem; }
.form-head { border-radius: 0 0 var(--radius) var(--radius); border-top: 0; }
.sec { margin-top: 18px; }
.sec-title { background: var(--gold-soft); color: var(--text); font-weight: 700; padding: 10px 14px; border-radius: 8px; font-size: .9rem; }
.grp-title { font-style: italic; font-weight: 700; color: var(--muted); padding: 8px 4px 0; font-size: .9rem; }
.item { margin-top: 10px; padding: 14px; }
.item.st-fail { border-left: 4px solid var(--fail); }
.item.st-pass { border-left: 4px solid var(--success); }
.item.st-na { border-left: 4px solid #ccc; }
.item-name { font-weight: 700; color: var(--green); }
.item-std { font-size: .86rem; color: var(--muted); margin-top: 2px; }
.item-ctrl { display: grid; grid-template-columns: 1fr 96px; gap: 10px; margin-top: 10px; align-items: end; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--gold-soft); border-radius: 8px; overflow: hidden; background: #fff; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }

.seg label { position: relative; text-align: center; padding: 10px 4px; min-height: 44px; font-weight: 600; font-size: .88rem; cursor: pointer; color: var(--muted); border-right: 1px solid var(--gold-soft); user-select: none; }
.seg label:last-child { border-right: 0; }
.seg label.on-pass { background: var(--green); color: var(--cream); }
.seg label.on-fail { background: var(--fail); color: #fff; }
.seg label.on-na { background: var(--na); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--gold); }
.item textarea { margin-top: 10px; }
.photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.ph { position: relative; width: 64px; height: 64px; }
.ph img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gold-soft); display: block; }
.ph .rm { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ph .rm .ic { width: 13px; height: 13px; }
.ph.loading::after { content: ''; position: absolute; inset: 0; border-radius: 8px; background: rgba(255,248,238,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%2300462E' stroke-width='3' stroke-dasharray='40 20'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center/26px no-repeat; }
.add-photo { width: 64px; height: 64px; border: 1.5px dashed var(--gold); border-radius: 8px; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .68rem; cursor: pointer; gap: 2px; }
.add-photo:hover { background: var(--parch); }

/* Score footer */
.scorebar { position: sticky; bottom: 0; z-index: 20; background: var(--green); color: var(--cream); margin: 18px -16px -40px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(0,0,0,.12); }
.scorebar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; max-width: 1148px; margin: 0 auto; }
.score-big { font-size: 1.6rem; font-weight: 700; padding: 2px 12px; border-radius: 8px; background: rgba(255,255,255,.12); }
.score-big.ok { background: var(--success); color: var(--green); }
.score-big.bad { background: var(--fail); color: #fff; }
.score-label { font-size: .72rem; color: var(--gold); text-transform: uppercase; letter-spacing: .05em; }
.scorebar .btn-outline { color: var(--cream); border-color: var(--cream); }
.scorebar .btn-outline:hover { background: var(--green-hover); }
.scorebar .btn-primary { background: var(--gold); color: var(--text); }
.scorebar .btn-primary:hover { background: #d8bd86; }

/* Signature */
.sig-box { border: 1.5px dashed var(--gold); border-radius: 8px; background: #fff; }
.sig-box canvas { display: block; width: 100%; height: 150px; touch-action: none; cursor: crosshair; }
.sig-tools { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--gold-soft); padding: 4px 8px; font-size: .78rem; color: var(--muted); }
.sig-img { border: 1px solid var(--gold); border-radius: 8px; background: #fff; padding: 6px; }
.sig-img img { display: block; width: 100%; height: 110px; object-fit: contain; }

/* Dashboard */
.kpi { padding: 14px; }
.kpi .v { font-size: 1.7rem; font-weight: 700; color: var(--green); line-height: 1.1; }
.kpi .l { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.kpi.alert .v { color: var(--fail); }
.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 48px; gap: 8px; align-items: center; font-size: .86rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { position: relative; height: 16px; background: var(--parch); border-radius: 4px; }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--green); }
.bar-fill.bad { background: var(--fail); }
.bar-target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--gold); }
.bar-val { text-align: right; font-weight: 600; }
.chart-svg { width: 100%; height: auto; display: block; }
.legend { font-size: .76rem; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.legend i { display: inline-block; width: 12px; height: 3px; background: var(--gold); vertical-align: middle; margin-right: 5px; }

/* ---------- Audit view (Excel layout) ---------- */
.sheet { background: #fff; border: 1px solid var(--gold-soft); border-radius: var(--radius); overflow: hidden; }
.sheet table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.sheet td, .sheet th { border: 1px solid #b9ad99; padding: 6px 8px; vertical-align: top; }
.sheet .t-title { background: var(--green); color: var(--cream); font-weight: 700; text-align: center; font-size: 1.02rem; padding: 10px; }
.sheet .t-head th { background: var(--green); color: var(--cream); text-align: left; font-weight: 700; }
.sheet .t-sec td { background: var(--gold-soft); font-weight: 700; }
.sheet .t-grp td { background: var(--parch); font-weight: 700; font-style: italic; }
.sheet .lbl { font-weight: 700; }
.sheet .noborder td { border: 0; }
.sheet .c { text-align: center; }
.sheet .st-pass { color: var(--green); font-weight: 700; }
.sheet .st-fail { color: var(--fail); font-weight: 700; }
.sheet .st-na { color: var(--na); }
.sheet .avg-l { background: var(--green); color: var(--cream); font-weight: 700; }
.sheet .avg-v { font-weight: 700; font-size: 1.05rem; text-align: center; }
.sheet .avg-v.ok { background: var(--success); color: var(--green); }
.sheet .avg-v.bad { background: var(--fail-bg); color: var(--fail); }
.sheet .thumbs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.sheet .thumbs img { width: 54px; height: 54px; object-fit: cover; border-radius: 4px; border: 1px solid var(--gold-soft); }
.sheet .sig img { height: 70px; max-width: 260px; object-fit: contain; display: block; }
.sheet-scroll { overflow-x: auto; }
.sheet-scroll table { min-width: 860px; }
.meta-strip { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--muted); margin-bottom: 12px; }

/* Risk matrix */
.risk td:first-child { font-weight: 700; color: var(--green); background: var(--parch); }

/* ---------- Print / PDF: A4 landscape ---------- */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; font-size: 9.5pt; }
  .no-print, .topbar, .foot, .flash { display: none !important; }
  .wrap, .main { max-width: none; padding: 0; margin: 0; }
  .sheet { border: 0; border-radius: 0; }
  .sheet-scroll { overflow: visible; }
  .sheet-scroll table { min-width: 0; }
  .sheet td, .sheet th { padding: 3px 5px; }
  .sheet tr { page-break-inside: avoid; }
  .sheet .thumbs img { width: 42px; height: 42px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-break { page-break-before: always; }
}
.print-only { display: none; }
@media print { .print-only { display: block; } }
@media (min-width: 900px) { .filters.filters-dash { grid-template-columns: 2fr 1fr 1fr auto; } }