/* herdai-theme-map.css



   Goal: make herdai.html visually match fleet.html (light page + green header),



   without touching app logic/layout JS.



*/







/* ---------- Fleet-like palette ---------- */



:root{



  --bg: #eef3f8;



  --card: rgba(255,255,255,.92);



  --text: #0f172a;



  --muted: #475569;



  --line: rgba(15,23,42,.12);



  --shadow: 0 10px 24px rgba(0,0,0,.12);



  --radius: 18px;







  /* “Wildlife green” */



  --greenA: rgba(10,61,46,0.95);



  --greenB: rgba(10,61,46,0.78);







  --ok:#34d399;



  --warn:#fbbf24;



  --bad:#fb7185;



}







/* ---------- Page base (removes the white strip + aligns with fleet spacing) ---------- */



html, body{



  margin: 0 !important;



  padding: 0 !important;



  background: var(--bg) !important;



  color: var(--text) !important;



}



body{



  /* Fleet-ish soft vignette */



  background:



    radial-gradient(circle at 10% 0%, rgba(10,61,46,.10), rgba(10,61,46,0) 55%),



    radial-gradient(circle at 0% 60%, rgba(2,6,23,.06), rgba(2,6,23,0) 55%),



    var(--bg) !important;



}







/* Keep herdai centered like fleet content */



.app-shell{



  max-width: 1400px;



  margin: 0 auto;



  padding: 18px;              /* this is what gives fleet the “inset” look */



  background: transparent !important;



}







/* ---------- Header (make it match fleet banner) ---------- */



.app-header{



  width: 100%;



  margin: 0;



  padding: 14px 18px;



  border-radius: var(--radius);



  background: linear-gradient(180deg, var(--greenA), var(--greenB)) !important;



  border: 1px solid rgba(255,255,255,.12) !important;



  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;



}







/* Prevent left-edge clipping (your “W” issue) */



.app-title{



  gap: 10px;



  min-width: 0;



}



.app-title h1{



  margin: 0;



  color: #fff !important;



  font-weight: 900;



  letter-spacing: .2px;



}







/* If you have a slogan element/text next to Warden, keep it readable */



.app-title, .app-title *{



  color: #fff !important;



}



.app-title .muted, .app-title .sub, .app-title small{



  color: rgba(255,255,255,.85) !important;



}







/* Pills/tags in the header bar should look like fleet buttons */



.status-bar .tag,



.status-bar .pill{



  background: rgba(255,255,255,.10) !important;



  border: 1px solid rgba(255,255,255,.14) !important;



  color: #fff !important;



  box-shadow: none !important;



}



.tag-live{ color: var(--ok) !important; }



.tag-warn{ color: var(--warn) !important; }



.tag-offline{



  color: rgba(255,255,255,.85) !important;



  border-color: rgba(255,255,255,.18) !important;



}







/* ---------- Cards (fleet light surfaces) ---------- */



.card, .modal-card{



  background: var(--card) !important;



  border: 1px solid var(--line) !important;



  border-radius: var(--radius) !important;



  box-shadow: var(--shadow) !important;



  color: var(--text) !important;



}







/* Inputs/buttons: light theme */



input, select, textarea{



  background: rgba(15,23,42,.04) !important;



  border: 1px solid rgba(15,23,42,.12) !important;



  color: var(--text) !important;



  border-radius: 12px !important;



}



button{



  background: rgba(15,23,42,.04) !important;



  border: 1px solid rgba(15,23,42,.12) !important;



  color: var(--text) !important;



  border-radius: 12px !important;



}



button:hover, .icon-btn:hover{



  background: rgba(15,23,42,.08) !important;



}







/* Footer */



.footer-note{ color: var(--muted) !important; }







/* Remove deer/logo pill on herdai.html */



.logo-pill{ display:none !important; }









/* ===== Restore status-pill colors (ok/warn/bad) + readability ===== */



.status-bar .pill,



.status-bar .tag{



  color:#fff !important;



}







/* Top bar pills (Telemetry/Push/Battery/Solar) */



.status-bar .pill.info{ background:rgba(255,255,255,.10) !important; border-color:rgba(255,255,255,.18) !important; }



.status-bar .pill.ok  { background:rgba(34,197,94,.22) !important;  border-color:rgba(34,197,94,.40) !important; }



.status-bar .pill.warn{ background:rgba(251,191,36,.24) !important; border-color:rgba(251,191,36,.42) !important; }



.status-bar .pill.bad { background:rgba(251,113,133,.24) !important; border-color:rgba(251,113,133,.45) !important; }







/* General pills elsewhere (ensure contrast on light cards) */



.pill.warn{ color:#111827 !important; font-weight:800 !important; }



.pill.bad { color:#111827 !important; font-weight:800 !important; }



.pill.ok  { font-weight:800 !important; }







/* Gate ARMED readability */



#gateStatus.pill.warn{ background:rgba(251,191,36,.28) !important; border-color:rgba(251,191,36,.55) !important; color:#111827 !important; }



#gateStatus.pill.bad { background:rgba(251,113,133,.22) !important; border-color:rgba(251,113,133,.55) !important; color:#111827 !important; }









/* ===== Gate UX polish (visual only) ===== */







/* Make ARMED readable */



#gateStatus{



  color:#fff !important;



}







/* If gateStatus uses a class or inline styles, this still forces readable text */



#gateStatus.pill,



#gateStatus.tag{



  color:#fff !important;



  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;



}







/* Disabled buttons look disabled */



button:disabled{



  opacity:.45 !important;



  cursor:not-allowed !important;



  filter:saturate(.7) !important;



}







/* If confirm/cancel are created dynamically, this still applies when they are disabled */









/* ===== Gate buttons: enabled colors + disabled look ===== */







/* Disabled (global) */



button:disabled{



  opacity:.45 !important;



  cursor:not-allowed !important;



  filter:saturate(.7) !important;



}







/* CONFIRM (enabled) — try common IDs/classes first, then fallbacks */



#gateConfirm:not(:disabled),



#gateYes:not(:disabled),



button.gate-confirm:not(:disabled),



.gate-actions .confirm:not(:disabled),



.gate-actions button.confirm:not(:disabled){



  background: linear-gradient(180deg, rgba(34,197,94,.90), rgba(22,163,74,.90)) !important;



  border: 1px solid rgba(255,255,255,.22) !important;



  color: #fff !important;



  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;



}







/* Cancel (enabled) */



#gateCancel:not(:disabled),



#gateNo:not(:disabled),



button.gate-cancel:not(:disabled),



.gate-actions .cancel:not(:disabled),



.gate-actions button.cancel:not(:disabled){



  background: rgba(255,255,255,.12) !important;



  border: 1px solid rgba(255,255,255,.18) !important;



  color: rgba(255,255,255,.92) !important;



}







/* Hover polish (only when enabled) */



#gateConfirm:not(:disabled):hover,



#gateYes:not(:disabled):hover,



button.gate-confirm:not(:disabled):hover{



  filter: brightness(1.05) !important;



}



#gateCancel:not(:disabled):hover,



#gateNo:not(:disabled):hover,



button.gate-cancel:not(:disabled):hover{



  background: rgba(255,255,255,.16) !important;



}













/* ===== Gate confirm row polish (scoped) ===== */



.gate-confirm-row{



  display:flex !important;



  gap:12px !important;



  align-items:center !important;



}







/* Make the two buttons feel intentional */



.gate-confirm-row .btn{



  border-radius:14px !important;



  padding:14px 16px !important;



  font-weight:800 !important;



  letter-spacing:.2px !important;



}







/* CONFIRM: make it “go” green (still “danger” in code, but we skin it here) */



.gate-confirm-row .btn.danger{



  background: linear-gradient(180deg, rgba(34,197,94,.95), rgba(22,163,74,.92)) !important;



  border:1px solid rgba(255,255,255,.22) !important;



  color:#fff !important;



  text-shadow:0 1px 0 rgba(0,0,0,.35) !important;



  box-shadow:0 10px 22px rgba(0,0,0,.18) !important;



}



.gate-confirm-row .btn.danger:hover:not(:disabled){



  filter:brightness(1.05) !important;



}







/* Cancel: neutral/secondary */



.gate-confirm-row .btn.secondary{



  background: rgba(255,255,255,.10) !important;



  border:1px solid rgba(255,255,255,.18) !important;



  color: rgba(255,255,255,.92) !important;



}



.gate-confirm-row .btn.secondary:hover:not(:disabled){



  background: rgba(255,255,255,.16) !important;



}







/* Disabled: obvious */



.gate-confirm-row .btn:disabled{



  opacity:.45 !important;



  cursor:not-allowed !important;



  filter:saturate(.7) !important;



  box-shadow:none !important;



}







/* Optional: when ARMED, give the Drop Gate button a subtle “armed” state */



#gateUnlock.armed{



  box-shadow: 0 0 0 2px rgba(34,197,94,.25) inset !important;



  border-color: rgba(34,197,94,.35) !important;



}













/* ===== Gate Cancel visibility fix ===== */



.gate-confirm-row .btn.secondary{



  opacity: 1 !important;



  visibility: visible !important;



  color: #0f172a !important;



  background: rgba(15,23,42,.08) !important;



  border: 1px solid rgba(15,23,42,.18) !important;



  box-shadow: none !important;



}







.gate-confirm-row .btn.secondary:hover{



  background: rgba(15,23,42,.12) !important;



}







/* If the page ever renders in a dark scheme, keep it readable */



@media (prefers-color-scheme: dark){



  .gate-confirm-row .btn.secondary{



    color: #fff !important;



    background: rgba(255,255,255,.10) !important;



    border: 1px solid rgba(255,255,255,.18) !important;



  }



  .gate-confirm-row .btn.secondary:hover{



    background: rgba(255,255,255,.14) !important;



  }



}













/* ===== Gate confirm visuals ===== */



.gate-confirm-row{



  display:flex !important;



  gap:12px !important;



}







.gate-confirm-row .btn{



  flex:1 1 0;



  height:44px;



  border-radius:14px;



  font-weight:800;



  letter-spacing:.2px;



}







/* Neutral cancel */



.gate-confirm-row .btn.secondary{



  background: rgba(0,0,0,.06) !important;



  border: 1px solid rgba(0,0,0,.10) !important;



  color: rgba(0,0,0,.80) !important;



}







/* Disabled confirm = clearly disabled */



.gate-confirm-row .btn.danger:disabled,



.gate-confirm-row .btn.danger[disabled]{



  background: rgba(0,0,0,.08) !important;



  border: 1px solid rgba(0,0,0,.10) !important;



  color: rgba(0,0,0,.35) !important;



  box-shadow:none !important;



  transform:none !important;



  cursor:not-allowed !important;



}







/* Armed confirm (enabled) = red + readable */



.gate-confirm-row .btn.danger:not(:disabled){



  background: rgba(220,38,38,.92) !important;



  border: 1px solid rgba(255,255,255,.22) !important;



  color:#fff !important;



}







.gate-confirm-row .btn.danger:not(:disabled):hover{



  transform: translateY(-1px);



}











/* === MUTE_BTN_20260121 === */



.mute-btn { display:inline-flex; gap:8px; align-items:center; }



.mute-btn .icon { font-size:14px; line-height:1; }



.mute-btn.is-muted { opacity:0.75; }



.mute-btn.is-muted .label { opacity:0.9; }





/* === OPTION_A_HIDE_BASIC_TABS_20260125 === */


/* === HIDE_JETSON_CAMERA_TABS_BAR_20260125 === */
html[data-capability="advanced"] #cameraTabs{
  display:none !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  overflow:hidden !important;
}

/* When app.js detects "basic" capability it sets html[data-capability="basic"] */

html[data-capability="basic"] #cameraTabs{

  display:none !important;

}