/* Hazrat Gul Tractor Work Record System — mobile-first styles (Bootstrap 5.3 base) */

:root {
  color-scheme: light;
  --hg-green: #1b5e20;
  --hg-green-700: #2e7d32;
  --hg-green-900: #123f16;
  --hg-tint: #e8f5e9;
  --hg-tint-2: #c8e6c9;
  --hg-gold: #d6aa32;
  --hg-bg: #f2f6f1;
  --hg-surface: #ffffff;
  --hg-text: #1e2b21;
  --hg-muted: #637267;
  --hg-border: #dde6dc;
  --hg-whatsapp: #1faa53;
  --hg-radius: 16px;
  --hg-shadow: 0 1px 2px rgba(18, 63, 22, .06), 0 4px 14px rgba(18, 63, 22, .06);
  --nav-h: 64px;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --bs-body-color: var(--hg-text);
  --bs-link-color: var(--hg-green-700);
  --bs-link-color-rgb: 46, 125, 50;
  --bs-link-hover-color: var(--hg-green-900);
}

body.app { background: var(--hg-bg); min-height: 100vh; }
a { text-decoration: none; }
.req { color: #c62828; }
.opt { color: var(--hg-muted); font-weight: 400; font-size: .8em; }
.min-w-0 { min-width: 0; }
[hidden] { display: none !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: 12px; font-weight: 600; }
.btn-lg { padding: .75rem 1.1rem; font-size: 1.05rem; }
.btn-brand { --bs-btn-color: #fff; --bs-btn-bg: var(--hg-green); --bs-btn-border-color: var(--hg-green);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--hg-green-900); --bs-btn-hover-border-color: var(--hg-green-900);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--hg-green-900); --bs-btn-active-border-color: var(--hg-green-900);
  --bs-btn-disabled-bg: var(--hg-green); --bs-btn-disabled-border-color: var(--hg-green); --bs-btn-disabled-color: #fff; }
.btn-outline-success { --bs-btn-color: var(--hg-green-700); --bs-btn-border-color: #a5cfa8;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--hg-green-700); --bs-btn-hover-border-color: var(--hg-green-700);
  --bs-btn-active-bg: var(--hg-green); --bs-btn-active-border-color: var(--hg-green); background: #fff; }
.btn-success { --bs-btn-bg: var(--hg-whatsapp); --bs-btn-border-color: var(--hg-whatsapp); }
.btn-whatsapp { --bs-btn-color: #fff; --bs-btn-bg: var(--hg-whatsapp); --bs-btn-border-color: var(--hg-whatsapp);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #178a43; --bs-btn-hover-border-color: #178a43;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #137838; --bs-btn-active-border-color: #137838;
  font-size: 1.1rem; padding: .9rem 1rem; box-shadow: 0 4px 14px rgba(31, 170, 83, .25); }
.btn .bi { margin-right: .15rem; }
.form-control, .form-select { border-radius: 12px; border-color: #cfdccd; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #81c784; box-shadow: 0 0 0 .2rem rgba(46, 125, 50, .18); }
.form-check-input:checked { background-color: var(--hg-green-700); border-color: var(--hg-green-700); }
.form-label { font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }

/* ---------- App bar ---------- */
.app-bar { position: sticky; top: 0; z-index: 20; background: var(--hg-green); color: #fff;
  padding-top: env(safe-area-inset-top); box-shadow: 0 2px 10px rgba(18, 63, 22, .2); }
.app-bar-inner { max-width: 640px; margin: 0 auto; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 12px; }
.app-bar-logo { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; color: var(--hg-green);
  display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.app-bar-logo img { width: 78%; height: 78%; object-fit: contain; }
.app-bar-logo .tractor-icon { width: 24px; height: 24px; }
.app-bar-title { flex: 1; min-width: 0; line-height: 1.15; }
.app-bar-brand { font-size: .74rem; opacity: .8; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.app-bar-title h1 { font-size: 1.08rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-bar-btn { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 1.3rem; }
.app-bar-btn:hover, .app-bar-btn.active { background: rgba(255, 255, 255, .14); color: #fff; }

.app-main { max-width: 640px; margin: 0 auto; padding: 16px 16px calc(var(--nav-h) + 40px + env(safe-area-inset-bottom)); }
.app-alert { border-radius: 12px; }

/* ---------- Bottom navigation ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--hg-border);
  display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(18, 63, 22, .06); }
.bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: #6f7d73; font-size: .7rem; font-weight: 600; }
.bottom-nav-icon { font-size: 1.3rem; line-height: 1; }
.bottom-nav-item.active { color: var(--hg-green); }
.bottom-nav-item.active .bottom-nav-icon { transform: translateY(-1px); }
.bottom-nav-add .bottom-nav-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--hg-green); color: #fff;
  display: grid; place-items: center; font-size: 1.6rem; margin-top: -26px; border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(27, 94, 32, .35); }
.bottom-nav-add.active .bottom-nav-icon { background: var(--hg-green-900); transform: none; }
@media (min-width: 680px) { .bottom-nav { left: 50%; transform: translateX(-50%); width: 640px; border-radius: 18px 18px 0 0; } }

/* ---------- Dashboard ---------- */
.hero-card { background: linear-gradient(135deg, var(--hg-green) 0%, var(--hg-green-700) 100%); color: #fff;
  border-radius: var(--hg-radius); padding: 18px; margin-bottom: 14px; box-shadow: var(--hg-shadow);
  display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.hero-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255, 255, 255, .06); }
.hero-greeting { font-size: 1.3rem; font-weight: 700; }
.hero-date { opacity: .85; font-size: .9rem; }
.hero-add { color: var(--hg-green) !important; font-weight: 700; position: relative; z-index: 1; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.stat-card { background: var(--hg-surface); border-radius: 14px; padding: 12px 14px; box-shadow: var(--hg-shadow); color: inherit; position: relative; }
.stat-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; align-items: center; }
.stat-card-wide .stat-icon { grid-row: span 2; margin: 0; }
.stat-card-wide .stat-go { grid-row: 1 / span 2; grid-column: 3; color: var(--hg-muted); }
.stat-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--hg-tint); color: var(--hg-green-700);
  display: grid; place-items: center; margin-bottom: 8px; font-size: 1.05rem; }
.stat-label { font-size: .78rem; color: var(--hg-muted); font-weight: 600; }
.stat-value { font-size: 1.22rem; font-weight: 800; color: var(--hg-text); line-height: 1.25; word-break: break-word; }
.stat-value small { font-size: .72rem; color: var(--hg-muted); font-weight: 600; }

.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.quick-action { background: var(--hg-surface); border-radius: 14px; padding: 12px 6px; text-align: center; color: var(--hg-green);
  box-shadow: var(--hg-shadow); font-weight: 700; font-size: .8rem; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.quick-action .bi { font-size: 1.4rem; }
.quick-action:active { transform: scale(.98); }

.section-block { margin-bottom: 18px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.section-head h2 { font-size: 1.02rem; font-weight: 800; margin: 0; }
.section-head a { font-weight: 600; font-size: .9rem; }

/* ---------- Work list ---------- */
.work-list { display: flex; flex-direction: column; gap: 10px; }
.work-item { background: var(--hg-surface); border-radius: 14px; box-shadow: var(--hg-shadow); overflow: hidden; }
.work-item-main { display: block; padding: 12px 14px; color: inherit; }
.work-item-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.work-item-title { font-weight: 700; font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-item-amount { font-weight: 800; color: var(--hg-green); white-space: nowrap; }
.work-item-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: .86rem; color: #46554a; }
.chip-type { background: var(--hg-tint); color: var(--hg-green); border-radius: 999px; padding: 1px 9px; font-weight: 700; font-size: .76rem; }
.work-item-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: .78rem; color: var(--hg-muted); }
.work-item-actions { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #edf2ec; }
.work-item-actions a { display: flex; flex-direction: column; align-items: center; padding: 8px 2px; font-size: .7rem; font-weight: 600; color: var(--hg-green-700); }
.work-item-actions a .bi { font-size: 1.1rem; }
.work-item-actions a + a { border-left: 1px solid #edf2ec; }
.work-item-actions a:active { background: var(--hg-tint); }

/* ---------- Empty states ---------- */
.empty-state { background: var(--hg-surface); border: 1.5px dashed #c5d8c3; border-radius: var(--hg-radius); text-align: center; padding: 28px 18px; }
.empty-state h3 { font-size: 1.08rem; font-weight: 800; margin: 10px 0 6px; }
.empty-state p { color: var(--hg-muted); margin-bottom: 14px; }
.empty-state-sm { padding: 16px; }
.empty-state-sm p { margin: 0; }
.empty-icon { width: 72px; height: 58px; color: #a5cfa8; }
.empty-bi { font-size: 2.6rem; color: #a5cfa8; }

/* ---------- Toolbars, search, chips ---------- */
.toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.search-box { position: relative; flex: 1; margin: 0; }
.search-box .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--hg-muted); }
.search-box .form-control { padding-left: 38px; border-radius: 999px; height: 46px; }
.toolbar > .btn { border-radius: 999px; padding-inline: 16px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }

.period-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: none; }
.period-chips::-webkit-scrollbar { display: none; }
.period-chip { flex: none; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--hg-border);
  color: #415045; font-weight: 600; font-size: .85rem; }
.period-chip.active { background: var(--hg-green); border-color: var(--hg-green); color: #fff; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-row-label { font-size: .78rem; color: var(--hg-muted); font-weight: 600; }
.chip { border: 1px solid #cfe3cd; background: var(--hg-tint); color: var(--hg-green); border-radius: 999px;
  padding: 5px 12px; font-size: .85rem; font-weight: 600; line-height: 1.3; }
.chip:active, .chip.active { background: var(--hg-green); color: #fff; border-color: var(--hg-green); }

/* ---------- Forms ---------- */
.form-card { background: var(--hg-surface); border-radius: var(--hg-radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--hg-shadow); }
.form-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.form-card-head h2 { font-size: 1.02rem; font-weight: 800; margin: 0; }
.form-step { width: 26px; height: 26px; border-radius: 50%; background: var(--hg-green); color: #fff; font-weight: 800;
  font-size: .85rem; display: grid; place-items: center; flex: none; }
details.form-card > summary, .filter-card > summary { font-weight: 700; color: var(--hg-green); cursor: pointer; list-style: none; }
details.form-card > summary::-webkit-details-marker, .filter-card > summary::-webkit-details-marker { display: none; }

.seg { display: flex; background: #edf3ec; border-radius: 12px; padding: 4px; gap: 4px; }
.seg > label { flex: 1; text-align: center; padding: 9px 8px; border-radius: 9px; font-weight: 700; color: #5d6c61; cursor: pointer;
  margin: 0; user-select: none; font-size: .95rem; }
.seg > .btn-check:checked + label { background: #fff; color: var(--hg-green); box-shadow: 0 1px 4px rgba(18, 63, 22, .15); }
.seg > .btn-check:focus-visible + label { outline: 2px solid #81c784; }
.seg-lg > label { padding: 13px 8px; font-size: 1.05rem; }
.seg-sm { padding: 3px; }
.seg-sm > label { padding: 5px 10px; font-size: .8rem; }

.total-box { margin-top: 14px; background: var(--hg-green); color: #fff; border-radius: 14px; padding: 14px; text-align: center;
  border-top: 3px solid var(--hg-gold); }
.total-box-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--hg-tint-2); }
.total-box-amount { font-size: 2rem; font-weight: 800; line-height: 1.2; word-break: break-all; }
.total-box-calc { font-size: .85rem; color: var(--hg-tint-2); }

.submit-bar { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 10; padding: 10px 0 8px;
  background: linear-gradient(to bottom, rgba(242, 246, 241, 0), var(--hg-bg) 35%); }
.submit-bar .btn { box-shadow: 0 6px 16px rgba(27, 94, 32, .3); }
.danger-zone { margin-top: 24px; }

/* Farmer picker (enhanced by add-work.js) */
.fp-selected { display: flex; align-items: center; gap: 10px; border: 1.5px solid #a5cfa8; background: #f7fbf6; border-radius: 12px; padding: 10px 12px; }
.fp-selected .farmer-avatar { width: 38px; height: 38px; font-size: 1rem; }
.fp-selected-name { font-weight: 800; }
.fp-selected-sub { font-size: .8rem; color: var(--hg-muted); }
.fp-search { position: relative; }
.fp-search .bi-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--hg-muted); }
.fp-search .form-control { padding-left: 40px; }
.fp-results { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--hg-border); border-radius: 12px;
  max-height: 260px; overflow-y: auto; background: #fff; }
.fp-results li button { width: 100%; text-align: left; border: 0; background: none; padding: 10px 14px; display: block; }
.fp-results li + li { border-top: 1px solid #eef2ed; }
.fp-results li button:active, .fp-results li button:focus { background: var(--hg-tint); outline: none; }
.fp-results .fp-name { font-weight: 700; display: block; }
.fp-results .fp-sub { font-size: .8rem; color: var(--hg-muted); }
.fp-empty { padding: 12px 14px; color: var(--hg-muted); font-size: .9rem; }
.fp-empty button { padding: 0; border: 0; background: none; color: var(--hg-green-700); font-weight: 700; text-decoration: underline; }

/* ---------- Farmers ---------- */
.farmer-list { display: flex; flex-direction: column; gap: 8px; }
.farmer-item { display: flex; align-items: center; gap: 12px; background: var(--hg-surface); border-radius: 14px; padding: 12px 14px;
  box-shadow: var(--hg-shadow); color: inherit; }
.farmer-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--hg-tint); color: var(--hg-green); font-weight: 800;
  display: grid; place-items: center; font-size: 1.15rem; flex: none; }
.farmer-avatar-lg { width: 58px; height: 58px; font-size: 1.5rem; }
.farmer-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.farmer-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.farmer-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .8rem; color: var(--hg-muted); }
.farmer-stats { text-align: right; display: flex; flex-direction: column; flex: none; }
.farmer-amount { font-weight: 800; color: var(--hg-green); font-size: .92rem; }
.farmer-count { font-size: .75rem; color: var(--hg-muted); }

.profile-card { background: var(--hg-surface); border-radius: var(--hg-radius); padding: 16px; box-shadow: var(--hg-shadow); margin-bottom: 16px; }
.profile-top { display: flex; gap: 12px; align-items: center; }
.profile-name { font-size: 1.25rem; font-weight: 800; margin: 0; word-break: break-word; }
.profile-sub { font-size: .8rem; color: var(--hg-muted); }
.profile-details { margin: 14px 0 0; display: grid; gap: 8px; }
.profile-details > div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; font-size: .92rem; }
.profile-details dt { color: var(--hg-muted); font-weight: 600; }
.profile-details dd { margin: 0; word-break: break-word; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.profile-actions .btn { flex: 1 1 auto; }

.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.summary-grid > div { background: var(--hg-surface); border-radius: 12px; padding: 10px; box-shadow: var(--hg-shadow);
  display: flex; flex-direction: column; }
.summary-grid span { font-size: .75rem; color: var(--hg-muted); font-weight: 600; }
.summary-grid strong { font-size: 1.15rem; font-weight: 800; }
.summary-grid .summary-total { grid-column: 1 / -1; background: var(--hg-green); color: #fff; }
.summary-grid .summary-total span { color: var(--hg-tint-2); }
.summary-grid .summary-total strong { font-size: 1.45rem; word-break: break-word; }
.summary-strip { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; background: var(--hg-surface);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; font-size: .88rem; box-shadow: var(--hg-shadow); }
.summary-strip strong { color: var(--hg-green); }

.date-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.date-range label { min-width: 0; font-size: .78rem; font-weight: 600; color: var(--hg-muted); }
.date-range .form-control { min-width: 0; width: 100%; }
.date-range .btn { grid-column: 1 / -1; }
.filter-card { background: var(--hg-surface); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--hg-shadow); }
.filter-form { margin-top: 12px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin: 16px 0; gap: 8px; }
.pager .btn { border-radius: 999px; }
.pager-info { font-size: .85rem; color: var(--hg-muted); }

/* ---------- Receipt page ---------- */
.saved-banner { display: flex; gap: 10px; align-items: center; background: var(--hg-tint); border-left: 4px solid var(--hg-green-700);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; color: var(--hg-green-900); }
.saved-banner .bi { font-size: 1.5rem; color: var(--hg-green-700); }
.receipt-stage { margin: 0 -4px 6px; }
.receipt-image { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; border-radius: 14px;
  box-shadow: 0 6px 22px rgba(18, 63, 22, .14); background: #ecf2ea; }
.action-panel { background: var(--hg-surface); border-radius: var(--hg-radius); padding: 14px; box-shadow: var(--hg-shadow); margin-top: 14px; }
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.btn-action { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--hg-border); background: #fff;
  color: var(--hg-green); font-size: .78rem; padding: 10px 4px; border-radius: 12px; }
.btn-action .bi { font-size: 1.35rem; margin: 0; }
.btn-action:hover, .btn-action:active { background: var(--hg-tint); color: var(--hg-green-900); border-color: #b9d8b6; }
.btn-action.is-busy { opacity: .6; pointer-events: none; }
.pulse-once { animation: pulse-once 1.2s ease-out 2; }
@keyframes pulse-once { 0% { box-shadow: 0 0 0 0 rgba(31, 170, 83, .55); } 100% { box-shadow: 0 0 0 16px rgba(31, 170, 83, 0); } }
.share-status { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #eef6ff; color: #1d4f7a; font-size: .88rem; }
.share-status.ok { background: var(--hg-tint); color: var(--hg-green-900); }
.share-status.warn { background: #fff6e0; color: #7a5300; }
.share-fallback { margin-top: 12px; border: 1.5px dashed #a5cfa8; border-radius: 12px; padding: 12px 14px; background: #fbfdfb; }
.share-fallback h3 { font-size: .98rem; font-weight: 800; color: var(--hg-green); }
.share-fallback ol { padding-left: 1.2rem; margin-bottom: 10px; }
.share-fallback li { margin-bottom: 10px; font-size: .9rem; }
.detail-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.detail-links .btn { font-size: .82rem; padding: .55rem .25rem; }

/* ---------- Reports ---------- */
.report-tabs { display: flex; background: #e4ece3; border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 12px; overflow-x: auto; }
.report-tabs a { flex: 1; text-align: center; padding: 8px 6px; border-radius: 9px; font-weight: 700; color: #4f5e53; font-size: .86rem; white-space: nowrap; }
.report-tabs a.active { background: #fff; color: var(--hg-green); box-shadow: 0 1px 4px rgba(18, 63, 22, .15); }
.report-sheet { background: var(--hg-surface); border-radius: var(--hg-radius); padding: 14px; box-shadow: var(--hg-shadow); }
.report-sheet .summary-grid > div { box-shadow: none; background: #f4f8f3; }
.report-sheet .summary-grid .summary-total { background: var(--hg-green); }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.report-kind { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--hg-muted); font-weight: 700; }
.report-head h2 { font-size: 1.1rem; font-weight: 800; margin: 0; }
.report-farmer { font-size: .9rem; margin-bottom: 10px; color: #3e4c41; }
.report-table { margin-top: 14px; font-size: .82rem; }
.report-table th { font-size: .72rem; text-transform: uppercase; color: var(--hg-muted); }
.report-note { font-size: .78rem; color: var(--hg-muted); margin: 10px 0 0; }

/* ---------- Settings ---------- */
.logo-row { display: flex; gap: 14px; align-items: center; }
.logo-preview { width: 76px; height: 76px; border-radius: 50%; background: var(--hg-tint); color: var(--hg-green); flex: none;
  display: grid; place-items: center; overflow: hidden; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--hg-border); }
.logo-preview img { width: 74%; height: 74%; object-fit: contain; }
.logo-preview .tractor-icon { width: 40px; height: 32px; }
.status-list { list-style: none; padding: 0; font-size: .88rem; }
.status-list li { padding: 3px 0; }
.status-list li.ok .bi { color: var(--hg-green-700); }
.status-list li.bad .bi { color: #c62828; }

/* ---------- Login / install ---------- */
body.login-page { min-height: 100vh; background: radial-gradient(circle at 20% 0%, #2e7d32 0%, #1b5e20 45%, #123f16 100%); }
.login-wrap { max-width: 420px; margin: 0 auto; padding: 36px 16px 24px; }
.login-brand { text-align: center; color: #fff; margin-bottom: 18px; }
.login-logo { width: 88px; height: 88px; border-radius: 50%; background: #fff; color: var(--hg-green); margin: 0 auto 12px;
  display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 6px rgba(255, 255, 255, .15); }
.login-logo img { width: 76%; height: 76%; object-fit: contain; }
.login-logo .tractor-icon { width: 50px; height: 40px; }
.login-brand h1 { font-size: 1.6rem; font-weight: 800; margin: 0; letter-spacing: .02em; }
.login-brand p { margin: 2px 0 0; color: var(--hg-tint-2); letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; font-weight: 700; }
.login-card { background: #fff; border-radius: 20px; padding: 22px 18px; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
.login-card h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 14px; }
.login-credit { text-align: center; color: rgba(255, 255, 255, .78); font-size: .8rem; margin-top: 18px; }

/* ---------- HTML receipt card (fallback for browsers / no GD) ---------- */
.rc { background: #ecf2ea; padding: 14px; max-width: 440px; margin: 0 auto; border-radius: 14px; font-family: "DejaVu Sans", Verdana, Roboto, Arial, sans-serif; }
.rc-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px rgba(60, 90, 60, .12); }
.rc-header { background: var(--hg-green); color: #fff; text-align: center; padding: 22px 18px 16px; border-bottom: 3px solid var(--hg-gold); }
.rc-logo { width: 70px; height: 70px; border-radius: 50%; background: #fff; margin: 0 auto 14px; display: grid; place-items: center;
  overflow: hidden; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
.rc-logo img { width: 72%; height: 72%; object-fit: contain; }
.rc-logo-placeholder { width: 60px; height: 60px; border-radius: 50%; background: var(--hg-tint); color: var(--hg-green); display: grid; place-items: center; }
.rc-logo-placeholder svg { width: 32px; height: 26px; }
.rc-name { font-size: 21px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; word-break: break-word; }
.rc-type { font-size: 9.5px; font-weight: 800; letter-spacing: .23em; text-transform: uppercase; color: var(--hg-tint-2); margin: 4px 0 12px;
  display: flex; align-items: center; justify-content: center; gap: 10px; }
.rc-type::before, .rc-type::after { content: ""; width: 20px; height: 1px; background: var(--hg-gold); }
.rc-contact { font-size: 13px; line-height: 1.55; }
.rc-contact .bi { color: var(--hg-tint-2); margin-right: 4px; }
.rc-body { padding: 20px; }
.rc-pill { display: table; margin: 0 auto 18px; background: var(--hg-tint); color: var(--hg-green); border-radius: 999px; padding: 6px 16px;
  font-weight: 800; font-size: 10.5px; letter-spacing: .15em; }
.rc-meta { display: flex; justify-content: space-between; align-items: flex-end; }
.rc-meta-label { font-size: 8.5px; font-weight: 800; letter-spacing: .12em; color: var(--hg-muted); text-transform: uppercase; }
.rc-meta-number { font-size: 18px; font-weight: 800; color: var(--hg-green); line-height: 1.3; }
.rc-meta-date { font-size: 12.5px; font-weight: 800; line-height: 1.6; }
.rc-perf { border-top: 1.5px dashed #e2eae1; margin: 14px -20px 16px; position: relative; }
.rc-perf::before, .rc-perf::after { content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: #ecf2ea; }
.rc-perf::before { left: -9px; }
.rc-perf::after { right: -9px; }
.rc-section { margin-bottom: 12px; }
.rc-section-title { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hg-green); margin: 0 0 4px; }
.rc-section-title::after { content: ""; flex: 1; height: 1px; background: #e2eae1; }
.rc-section-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--hg-tint); display: grid; place-items: center; font-size: 11px; }
.rc-section-icon svg { width: 13px; height: 11px; }
.rc-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #edf1ec; font-size: 11px; }
.rc-row:last-child { border-bottom: 0; }
.rc-row-wide { display: block; }
.rc-label { color: var(--hg-muted); font-size: 10.5px; flex: none; width: 104px; }
.rc-value { font-weight: 800; text-align: right; word-break: break-word; }
.rc-strong { font-size: 12px; }
.rc-value-wide { margin-top: 2px; line-height: 1.42; word-break: break-word; }
.rc-total { background: var(--hg-green); color: #fff; text-align: center; border-radius: 14px; padding: 16px; border-top: 2.5px solid var(--hg-gold); }
.rc-total-label { font-size: 9.5px; font-weight: 800; letter-spacing: .19em; color: var(--hg-tint-2); }
.rc-total-amount { font-size: 30px; font-weight: 800; line-height: 1.25; word-break: break-word; }
.rc-total-calc { font-size: 10.5px; color: var(--hg-tint-2); }
.rc-footer { text-align: center; }
.rc-thanks { font-size: 15px; font-weight: 800; color: var(--hg-green); }
.rc-small { font-size: 8.5px; color: var(--hg-muted); line-height: 1.45; }
.rc-divider { width: 48px; height: 1px; background: #e2eae1; margin: 12px auto; }
.rc-dev { font-size: 12.5px; font-weight: 800; letter-spacing: .16em; color: var(--hg-green); text-transform: uppercase; }
.rc-dev-phone { font-size: 9.5px; }

/* ---------- Printing app pages (reports) ---------- */
@media print {
  .app-bar, .bottom-nav, .no-print, .app-alert, .submit-bar { display: none !important; }
  body.app { background: #fff; }
  .app-main { padding: 0; max-width: none; }
  .report-sheet, .summary-grid > div { box-shadow: none !important; }
  .summary-grid .summary-total { background: #fff !important; color: #000 !important; border: 1.5px solid #000; }
  .summary-grid .summary-total span { color: #000 !important; }
}