/* ═══════════════════════════════════════════════════════
   Farm App v7.0 — Components: Cards, Buttons, Forms, Tables
   ═══════════════════════════════════════════════════════ */

/* ── Cards ─────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:18px;
  margin-bottom:16px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
}

.card-title{
  font-family:'DM Sans',sans-serif;
  font-weight:700;margin-bottom:12px;
  color:var(--primary);font-size:15px;
}

.card-muted{background:var(--surface-2)}
.card-info{background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border-left:4px solid var(--info)}
.card-warning{background:#fef3c7;border-left:4px solid var(--warning)}
.card-danger{background:#fef2f2;border-left:4px solid var(--danger)}
.card-success{background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);border-left:4px solid var(--primary)}

/* Paddock card */
.paddock-card{
  background:var(--surface-2);border-radius:var(--radius-md);
  padding:12px;border-left:4px solid var(--primary);
  margin-bottom:10px;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  padding:10px 20px;border-radius:var(--radius-sm);border:none;
  cursor:pointer;font-weight:600;font-size:14px;
  font-family:'DM Sans',sans-serif;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s,opacity .15s;
}

.btn:active{transform:scale(0.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--primary-dark)}

.btn-secondary{background:#fff;color:var(--text);border:1px solid var(--border-strong)}
.btn-secondary:hover:not(:disabled){background:var(--surface-2)}

.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover:not(:disabled){background:#dc2626}

.btn-success{background:#16a34a;color:#fff}
.btn-success:hover:not(:disabled){background:#15803d}

.btn-ghost{background:transparent;color:var(--text-muted);border:none;box-shadow:none}
.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--text)}

.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn-outline:hover:not(:disabled){background:var(--primary-light)}

.btn-sm{padding:6px 14px;font-size:12px;min-height:32px}

.btn-icon{
  background:none;border:none;cursor:pointer;
  padding:6px 8px;border-radius:var(--radius-sm);
  font-size:15px;color:var(--text-muted);min-height:36px;
}
.btn-icon:hover{background:var(--surface-2);color:var(--text)}

/* ── Form Inputs ────────────────────────────────────────── */
.input,
input[type="text"]:not(.ns-input),
input[type="number"]:not(.ns-input),
input[type="date"],
input[type="password"],
input[type="email"],
select,
textarea{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  font-size:14px;
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:var(--surface);
  appearance:none;-webkit-appearance:none;
}

.input:focus,
input[type="text"]:not(.ns-input):focus,
input[type="number"]:not(.ns-input):focus,
input[type="date"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(22,163,74,0.12);
}

select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}

label{font-size:12px;font-weight:600;color:var(--text-muted);display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.4px}

.form-group{margin-bottom:12px}

/* ── Badges / Sale badges ───────────────────────────────── */
.sale-badge{
  display:inline-block;padding:3px 10px;border-radius:9999px;
  font-size:11px;font-weight:700;letter-spacing:0.3px;
}
.badge-store{background:#dbeafe;color:#1d4ed8}
.badge-prime{background:#fef3c7;color:#92400e}
.badge-heifers{background:#ede9fe;color:#6d28d9}
.badge-pending{background:var(--surface-3);color:var(--text-muted)}

/* ── Tables ─────────────────────────────────────────────── */
.table-container{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--border)}

table.data-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface)}
table.data-table th{
  background:var(--surface-2);padding:10px 12px;
  font-weight:700;font-size:11px;color:var(--text-muted);
  border-bottom:2px solid var(--border);text-align:left;
  text-transform:uppercase;letter-spacing:0.4px;
  white-space:nowrap;
}
table.data-table td{
  padding:10px 12px;border-bottom:1px solid var(--border);
  vertical-align:middle;
}
table.data-table tbody tr:hover td{background:var(--surface-2)}
table.data-table tbody tr:last-child td{border-bottom:none}

/* Sales table rows */
.sale-row{border-bottom:1px solid var(--border);font-size:13px}
.sale-row:hover{background:#f8fbff}
.sale-row td{padding:10px 8px;vertical-align:middle}
.sale-action-btn{
  background:none;border:none;cursor:pointer;
  padding:4px 6px;border-radius:var(--radius-sm);font-size:14px;
}
.sale-action-btn:hover{background:var(--surface-2)}

/* Numbers spreadsheet */
.num-spreadsheet{
  width:100%;border-collapse:collapse;font-size:13px;
  background:var(--surface);border-radius:0 var(--radius-md) var(--radius-md) var(--radius-md);
  overflow:hidden;
}
.num-spreadsheet th{
  background:var(--surface-2);padding:10px 8px;
  font-weight:700;font-size:11px;color:var(--text-muted);
  border-bottom:2px solid var(--border);text-align:center;
  text-transform:uppercase;letter-spacing:0.3px;
}
.num-spreadsheet th:first-child{text-align:left;padding-left:16px;min-width:100px}
.num-spreadsheet td{padding:2px;border-bottom:1px solid #f3f4f6;text-align:center}
.num-spreadsheet td:first-child{
  text-align:left;padding:8px 16px;font-weight:600;
  background:#fafbfc;border-right:1px solid #f1f5f9;
}
.ns-input{
  width:100%;padding:8px 4px;border:none;text-align:center;
  font-size:14px;font-weight:500;background:transparent;
  font-family:'JetBrains Mono',monospace;
}
.ns-input:focus{outline:none;background:#ecfdf5}
.ns-input:hover{background:var(--surface-2)}
.num-spreadsheet tr:hover td{background:var(--surface-2)}
.num-spreadsheet tr:hover td:first-child{background:var(--surface-3)}
.num-spreadsheet .ns-total-row td{
  font-weight:700;background:var(--surface-3);
  border-top:2px solid var(--border);padding:10px 8px;
  color:var(--primary-dark);font-family:'JetBrains Mono',monospace;
}
.num-spreadsheet .ns-total-row td:first-child{background:#e8f5e9}

/* Numbers summary bar */
.numbers-summary{
  display:flex;gap:16px;flex-wrap:wrap;padding:12px 16px;
  background:linear-gradient(135deg,#f0fdf4,#e8f5e9);
  border-radius:var(--radius-md);margin-bottom:16px;
}
.numbers-summary .ns-item{display:flex;flex-direction:column;align-items:center}
.numbers-summary .ns-val{
  font-size:20px;font-weight:700;color:var(--primary-dark);
  font-family:'JetBrains Mono',monospace;
}
.numbers-summary .ns-lbl{
  font-size:10px;text-transform:uppercase;
  letter-spacing:0.5px;color:var(--text-muted);
}

/* ── Chart containers ───────────────────────────────────── */
.chart-container{position:relative;height:300px;margin-top:8px}
.chart-container-lg{position:relative;height:350px;margin-top:8px}

/* ── Photo grid ─────────────────────────────────────────── */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}

/* ── Modals ─────────────────────────────────────────────── */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.55);z-index:2000;
  overflow-y:auto;align-items:flex-start;justify-content:center;
  padding:20px;
}

.modal-overlay.active{display:flex}

.modal-box{
  background:var(--surface);margin:auto;max-width:520px;width:100%;
  border-radius:var(--radius-xl);padding:28px;position:relative;
  box-shadow:var(--shadow-lg);
}

.modal-close{
  position:absolute;top:16px;right:16px;
  background:none;border:none;font-size:22px;
  cursor:pointer;color:var(--text-muted);width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
}
.modal-close:hover{background:var(--surface-2)}

.modal-title{
  font-family:'DM Sans',sans-serif;
  font-size:18px;font-weight:700;
  color:var(--primary-dark);margin:0 0 20px;
}

/* ── Alerts ─────────────────────────────────────────────── */
.alert{
  padding:12px 16px;border-radius:var(--radius-md);
  margin-bottom:12px;border-left:4px solid transparent;
  font-size:14px;
}
.alert-info{background:#eff6ff;border-color:var(--info);color:#1e40af}
.alert-warning{background:#fffbeb;border-color:var(--warning);color:#92400e}
.alert-danger{background:#fef2f2;border-color:var(--danger);color:#991b1b}
.alert-success{background:#f0fdf4;border-color:var(--primary);color:#166534}

/* ── Progress bar ───────────────────────────────────────── */
.progress-bar-wrap{width:100%;height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),#22c55e);border-radius:4px;transition:width .3s}

/* ── Sync dot (status indicator) ───────────────────────── */
#sync-dot{
  position:fixed;top:16px;right:16px;
  width:10px;height:10px;border-radius:50%;z-index:1100;
  transition:background .5s;
}

/* ── Offline toast ──────────────────────────────────────── */
#offline-toast{
  display:none;position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%);
  background:#1e293b;color:#fff;
  padding:10px 20px;border-radius:9999px;
  font-size:13px;font-weight:600;z-index:5000;
  box-shadow:var(--shadow-lg);white-space:nowrap;
  transition:opacity .4s;
}

/* ── Tag colour display ─────────────────────────────────── */
#tag-colour-display{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;background:var(--surface-2);
  border-radius:var(--radius-sm);font-size:13px;
  margin-top:6px;
}

/* ── Mobile specific ────────────────────────────────────── */
@media(max-width:720px){
  .stat-value{font-size:20px}
  .modal-box{padding:20px}
  .card{padding:14px}
}

/* ── Responsive table scroll ────────────────────────────── */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll-x table{min-width:700px}

/* ── Setup Accordion ────────────────────────────────────── */
.acc-item{margin-bottom:6px}
.acc-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;cursor:pointer;border-radius:var(--radius-md);
  background:var(--surface-2);
  font-weight:700;font-size:14px;
  user-select:none;transition:background .15s;border:1px solid var(--border);
}
.acc-header:hover{background:var(--border)}
.acc-chevron{
  font-size:11px;transition:transform .25s;display:inline-block;
  color:var(--text-muted);flex-shrink:0;margin-left:8px;
}
.acc-header.acc-open .acc-chevron{transform:rotate(90deg)}
.acc-body{overflow:hidden;max-height:0;transition:max-height .3s ease}
.acc-body.open{max-height:4000px}
.acc-body-inner{padding:16px 2px 8px}

/* ── Weather source badges ──────────────────────────────── */
.source-badge{display:inline-block;padding:3px 8px;border-radius:10px;font-size:10px;font-weight:700}
.source-bom{background:#ede9fe;color:#7c3aed}
.source-wu{background:#fef3c7;color:#d97706}
.source-openmeteo{background:#cffafe;color:#0891b2}
.source-gauge{background:#d1fae5;color:#059669}
.source-blend{background:#fef3c7;color:#d97706}

/* ── Weather sub-tabs ────────────────────────────────────── */
.weather-subtabs{
  display:flex;gap:4px;border-bottom:2px solid var(--border);
  margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.weather-subtabs::-webkit-scrollbar{display:none}
.weather-subtab{
  padding:10px 14px;cursor:pointer;border:none;background:none;
  font-size:13px;font-weight:600;color:var(--text-muted);
  border-bottom:3px solid transparent;white-space:nowrap;margin-bottom:-2px;
}
.weather-subtab.active{color:var(--primary);border-bottom-color:var(--primary)}
.weather-subcontent{display:none}
.weather-subcontent.active{display:block}

/* ── Forecast strip ─────────────────────────────────────── */
.forecast-strip{
  display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:4px 2px 8px;scrollbar-width:none;
}
.forecast-strip::-webkit-scrollbar{display:none}
.forecast-day{
  flex:0 0 calc(20% - 8px);min-width:130px;
  background:var(--surface);border-radius:14px;padding:14px 10px;
  text-align:center;border:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.forecast-day.today{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-color:var(--primary)}
.fc-day-name{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
.fc-date{font-size:12px;color:var(--text-muted);margin-bottom:8px}
.fc-icon{font-size:34px;line-height:1;margin-bottom:8px}
.fc-temp{font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px}
.fc-rain{font-size:13px;color:#2563eb;font-weight:700;margin-bottom:3px}
.fc-prob{font-size:11px;color:var(--text-muted);margin-bottom:6px}
.rain-bar{height:4px;background:#e2e8f0;border-radius:2px;margin:4px 6px 8px}
.rain-bar-fill{height:100%;background:#3b82f6;border-radius:2px}
.fc-grass{font-size:11px;font-weight:600;padding:3px 8px;border-radius:10px;display:inline-block;margin-top:2px}
@media(max-width:600px){.forecast-day{flex:0 0 140px;min-width:140px}}

/* ── Onboarding checklist ────────────────────────────────── */
.onboarding-checklist{border-left:4px solid var(--primary) !important}
.onboarding-checklist .card-title{color:var(--primary)}

/* ── Farm map wrapper ────────────────────────────────────── */
.farm-map-wrapper{
  position:relative;width:100%;border-radius:12px;
  overflow:hidden;background:#111;user-select:none;
}

/* ── Mob cards on map ────────────────────────────────────── */
.mob-card{
  position:absolute;border-radius:10px;padding:6px 10px;
  font-size:12px;font-weight:700;cursor:grab;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
  white-space:nowrap;z-index:10;touch-action:none;
  transform:translate(-50%,-50%);
  line-height:1.4;transition:box-shadow .15s;
}
.mob-card:active{cursor:grabbing}
.mob-card.selected{
  outline:3px solid #fff;
  box-shadow:0 0 0 3px rgba(255,255,255,0.45),0 4px 14px rgba(0,0,0,0.45);
}
.mob-card.dragging{
  opacity:.92;transform:translate(-50%,-50%) scale(1.06);
  z-index:100;cursor:grabbing;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}

/* ── Mob list cards ──────────────────────────────────────── */
.mob-list-card{
  background:var(--surface);border-radius:var(--radius-lg);
  padding:14px 16px;margin-bottom:10px;
  border:1px solid var(--border);border-left:4px solid;
  box-shadow:var(--shadow-sm);display:flex;
  align-items:flex-start;gap:12px;
}

/* ── Split panel ─────────────────────────────────────────── */
.split-panel{
  background:var(--surface);border-radius:var(--radius-lg);
  padding:20px;border:1px solid var(--border);
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
}
.split-slider-row{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.split-slider-row label{min-width:130px;font-size:13px;font-weight:600}
.split-slider-row input[type=range]{flex:1;accent-color:var(--primary)}
.split-slider-row .split-count{
  min-width:60px;text-align:right;font-size:13px;
  font-weight:700;color:var(--primary);
}

/* ── History timeline ────────────────────────────────────── */
.mob-history-day{
  font-size:11px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.5px;margin:16px 0 8px;
}
.mob-history-entry{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;
}
.mob-history-dot{
  width:12px;height:12px;border-radius:50%;
  flex-shrink:0;margin-top:2px;
}

/* ── Tab pill bar ────────────────────────────────────────── */
/* Used by Mobs, DSE, Weed Control and any section with pill-style sub-tabs */
.tab-pill-bar{
  display:flex;gap:4px;background:var(--surface-3);
  border-radius:12px;padding:4px;margin-bottom:16px;
}
.tab-pill-btn{
  flex:1;padding:8px 4px;border:none;border-radius:9px;
  font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;
  background:transparent;color:var(--text-muted);white-space:nowrap;
  font-family:'DM Sans',sans-serif;
}
.tab-pill-btn.active{
  background:var(--surface);color:var(--primary);
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}

/* ── Section label ───────────────────────────────────────── */
/* Upper-case group header — Events tab, etc. */
.section-label{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-muted);
  margin-bottom:6px;padding-left:2px;display:block;
}

/* ── General badges ──────────────────────────────────────── */
.badge{
  display:inline-block;padding:3px 10px;border-radius:9999px;
  font-size:11px;font-weight:700;letter-spacing:0.3px;
}
.badge-success{background:var(--primary-light);color:#166534}
.badge-warning{background:#fef3c7;color:#92400e}
.badge-danger {background:#fef2f2;color:#991b1b}
.badge-info   {background:#dbeafe;color:#1e40af}
.badge-muted  {background:var(--surface-3);color:var(--text-muted)}
.badge-purple {background:#ede9fe;color:#6d28d9}

/* ── Card gradient variants ─────────────────────────────── */
.card-blue  {background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-left:4px solid var(--info)}
.card-amber {background:linear-gradient(135deg,#fffbeb,#fef3c7);border-left:4px solid var(--warning)}
.card-slate {background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-left:4px solid var(--border-strong)}
.card-purple{background:linear-gradient(135deg,#faf5ff,#ede9fe);border-left:4px solid #8b5cf6}

/* ── Auth screen ─────────────────────────────────────────── */
.auth-screen{
  display:none;position:fixed;inset:0;
  background:linear-gradient(135deg,#1e3a5f 0%,var(--primary-dark) 100%);
  z-index:9999;align-items:center;justify-content:center;
}
.auth-card{
  background:var(--surface);border-radius:var(--radius-xl);
  padding:36px 32px;max-width:380px;width:90%;
  text-align:center;box-shadow:0 25px 60px rgba(0,0,0,0.4);
}
.auth-input{
  width:100%;padding:12px 14px;
  border:2px solid var(--border);border-radius:var(--radius-md);
  font-size:15px;font-family:inherit;background:var(--surface);
  margin-bottom:10px;box-sizing:border-box;color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
.auth-input:focus{
  border-color:var(--primary);outline:none;
  box-shadow:0 0 0 3px rgba(22,163,74,0.12);
}
.auth-btn{
  width:100%;border:none;border-radius:var(--radius-md);
  padding:14px;font-size:16px;font-weight:700;cursor:pointer;
  font-family:'DM Sans',sans-serif;margin-bottom:12px;
  transition:opacity .15s,transform .1s;
}
.auth-btn:hover:not(:disabled){opacity:.92}
.auth-btn:active:not(:disabled){transform:scale(0.98)}
.auth-btn:disabled{opacity:.6;cursor:not-allowed}
.auth-btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;
}
.auth-btn-navy{
  background:linear-gradient(135deg,#1e3a5f,#1e40af);
  color:#fff;
}
.auth-btn-link{
  background:none;border:none;color:var(--text-muted);
  font-size:13px;cursor:pointer;text-decoration:underline;
  padding:4px;
}

/* ── Map editor ──────────────────────────────────────────── */
.map-editor-wrapper{
  position:relative;cursor:crosshair;
  border-radius:8px;overflow:hidden;
}
.map-editor-label-pin{
  position:absolute;font-size:20px;cursor:move;
  transform:translate(-50%,-100%);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.45));
  touch-action:none;z-index:20;
}