/* Shared theme (Fleet + HerdAI)

   Light background + wildlife green accents

*/



:root{

  /* Light UI */

  --bg: #f3f4f6;                 /* page background */

  --card: #ffffff;               /* cards */

  --text: #0f172a;               /* main text */

  --muted: #475569;              /* secondary text */

  --line: rgba(15,23,42,.10);    /* borders */



  /* Status */

  --ok: #22c55e;

  --warn: #f59e0b;

  --bad: #ef4444;



  /* Surfaces */

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

  --radius: 18px;



  /* Inputs */

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



  /* Attention */

  --attnBorder: rgba(239,68,68,.28);

  --attnGlow: rgba(239,68,68,.14);



  /* Wildlife green */

  --greenSolid: #0a3d2e;

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

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

}




/* === Bell icon for Notify pill (SVG mask, UTF-8 safe) === */

.pill.notify{display:inline-flex;align-items:center;gap:8px}

.pill.notify .icon-bell{

  width:14px;height:14px;display:inline-block;

  background:currentColor;

  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22Zm6-6V11a6 6 0 1 0-12 0v5L4 18v1h16v-1l-2-2Z'/></svg>") no-repeat center/contain;

          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22Zm6-6V11a6 6 0 1 0-12 0v5L4 18v1h16v-1l-2-2Z'/></svg>") no-repeat center/contain;

}





/* === HEADER CHIP NORMALIZE (20260121) === */
.app-header .status-bar .tag,
.app-header .status-bar .pill,
.app-header .status-bar button.pill{
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}
.app-header .status-bar .pill.good,
.app-header .status-bar .pill.warn,
.app-header .status-bar .pill.bad,
.app-header .status-bar .pill.info{
  font-weight: 600;
}
.app-header .status-bar .mute-btn{
  padding-top: 7px;
  padding-bottom: 7px;
}
.app-header .status-bar .pill .icon-bell{
  flex: 0 0 auto;
}