/* --- Branding --- */
h1 {
  text-align: center;
  font-size: 3.5em;
  margin: 0.7em 0 0.2em 0;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  letter-spacing: -0.02em;
}
h2 {
  text-align: center;
  font-size: 3.0em;
  margin: 0.7em 0 0.2em 0;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  letter-spacing: -0.02em;
}
h3 {
  text-align: center;
  font-size: 2.5em;
  margin: 0.7em 0 0.2em 0;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  letter-spacing: -0.02em;
}
h4 {
  text-align: center;
  font-size: 1.0em;
  margin: 0.7em 0 0.2em 0;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  letter-spacing: -0.02em;
}
#agri {
  color: #7CB82F;
  font-weight: 900;
  letter-spacing: 0.01em;
}
#overview {
  color: #34B3E4;
  font-weight: 900;
  letter-spacing: 0.01em;
}

#static-line {
  text-align: center;
  font-size: 1.3em;
  color: #333;
  margin-bottom: 1em;
  font-family: 'Segoe UI', 'Arial', sans-serif;
}

hr.custom-line {
  width: 65%;
  border: 0;
  height: 2.5px;
  background: linear-gradient(to right, transparent, #278c28, #222, #2176b7, transparent);
  margin: 0.5em auto 2.2em auto;
  border-radius: 2em;
}
hr.custom-line2 {
  width: 35%;
  border: 0;
  height: 2.5px;
  background: linear-gradient(to right, transparent, #278c28, #222, #2176b7, transparent);
  margin: 0.5em auto 2.2em auto;
  border-radius: 2em;
}
/* --- Logo top right --- */
#logo-box {
  position: absolute;
  right: 7em;
  top: 2em;
}
#logo-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 2px 16px #88c36e30;
}

/* --- Login panel --- */
#login-card {
  width: 360px;
  margin: 0 auto;
  margin-top: 2.5em;
  padding: 2em 2.2em 1.4em 2.2em;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 28px #34b3e41a, 0 1.5px 6px #7cb82f18;
  text-align: center;
}

#login-card h2 {
  font-size: 2em;
  color: #34B3E4;
  margin-bottom: 0.9em;
  letter-spacing: 0.03em;
}
#login-card label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.3em;
  text-align: left;
}
#login-card input[type="text"], #login-card input[type="password"] {
  width: 100%;
  padding: 0.75em 0.8em;
  margin-bottom: 1.15em;
  border: 1.5px solid #7CB82F;
  border-radius: 7px;
  font-size: 1em;
  background: #f8faf8;
  transition: border 0.18s;
}
#login-card input[type="text"]:focus, #login-card input[type="password"]:focus {
  border-color: #34B3E4;
  outline: none;
  background: #f4fbff;
}

#login-card button {
  width: 100%;
  padding: 0.85em;
  background: linear-gradient(90deg,#7CB82F 20%,#34B3E4 100%);
  color: #fff;
  border: none;
  font-weight: bold;
  font-size: 1.18em;
  border-radius: 7px;
  box-shadow: 0 2px 12px #34b3e432;
  cursor: pointer;
  transition: background 0.17s;
}
#login-card button:hover {
  background: linear-gradient(90deg,#34B3E4 10%,#7CB82F 90%);
}
@media (max-width: 480px) {
  #login-card { width: 94vw; padding: 1.2em; }
  #logo-box { right: 1vw; top: 0.7em;}
  #logo-img { width: 42px; height: 42px; }
}
    .unit-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 2em;
      justify-content: center;
    }
    .unit-card {
      width: 350px; max-width: 46vw;
      margin-bottom: 2em;
      background: #f5f5f5;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 2px 10px #aaa2;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: box-shadow 0.2s;
    }
    .unit-card:hover {
      box-shadow: 0 6px 16px #57a94655;
    }
    .unit-img {
      width: 100%;
      aspect-ratio: 3/2;
      object-fit: cover;
      background: #ddd;
    }
    .unit-label {
      padding: 1em 0.5em;
      text-align: center;
      font-size: 1.2em;
      font-weight: bold;
      width: 100%;
    }
    @media (max-width: 700px) {
      .unit-card { width: 98vw; max-width: 100vw; }
    }
  .summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.11em;
  }
  .summary-table th {
    text-align: left;
    padding: 0.5em 0.7em 0.5em 0;
    color: #165589;
    font-weight: 600;
    width: 30%;
    vertical-align: top;
  }
  .summary-table td {
    color: #173447;
    padding: 0.5em 0 0.5em 0.7em;
    vertical-align: top;
    background: transparent;
  }
  .summary-table tr:not(:last-child) td,
  .summary-table tr:not(:last-child) th {
    border-bottom: 1px solid #e5e8ef;
  }
.pro-summary {
  max-width: 650px;
  margin: 2em auto 1.5em auto;
  border-radius: 18px;
  box-shadow: 0 3px 12px #18395a1a;
  background: #f8fafc;
  padding: 2.1em 2.2em 1.5em 2.2em;
  border: 1px solid #dde3ea;
}
.summary-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5em;
}
.summary-labels, .summary-values {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
}
.summary-label {
  color: #165589;
  font-weight: 600;
  font-size: 1.08em;
  min-width: 90px;
  text-align: right;
}
.summary-values {
  min-width: 170px;
}
.summary-value {
  color: #173447;
  font-size: 1.07em;
  min-height: 1.1em;
  padding-left: 0.2em;
}
.summary-address {
  margin-left: 2.5em;
  padding: 1.1em 1.7em 1.1em 1.7em;
  border-left: 2px solid #e0e8f2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #f3f7fd;
  border-radius: 12px;
  min-width: 180px;
}
.address-title {
  font-size: 1em;
  color: #2d6fa3;
  font-weight: 600;
  margin-bottom: 0.45em;
}
.address-value {
  color: #205090;
  font-size: 1.06em;
  font-weight: 500;
  word-break: break-word;
}
@media (max-width: 650px) {
  .summary-flex { flex-direction: column; gap: 1.1em; }
  .summary-address { margin-left: 0; margin-top: 2em; min-width: unset; }
}
  .nav-bar {
    display: flex; justify-content: center; gap: 1.5em; margin: 2em 0 0.5em 0; font-size:1.07em;
  }
  .nav-bar a {
    text-decoration: none;
    color: #2579b5;
    border: 1px solid #eee;
    padding: 0.4em 1em;
    border-radius: 16px;
    background: #f8f9fa;
    transition: background .2s;
  }
  .nav-bar a:hover {
    background: #e3eefc;
    color: #111;
  }
  .date-spinner { margin: 1em auto 1.5em auto; text-align: center; }
  .date-spinner input { font-size: 1.1em; padding: 0.35em; }
.login-error {
    color: #b80000;
    background: #fff0f0;
    border: 1.5px solid #e2c7c7;
    border-radius: 7px;
    font-size: 1.12em;
    font-weight: 500;
    margin-bottom: 1em;
    margin-top: 0.7em;
    padding: 9px 8px 8px 8px;
    width: 85%;
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 8px rgba(180,0,0,0.07);
}

/* =========================
   AgriOverView Dark UI Layer
   Only active when <body class="ao-dark">
========================= */
body.ao-dark{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  color:#e9eefc;
  background:
    radial-gradient(1200px 500px at 18% 0%, rgba(124,184,47,.18), transparent 45%),
    radial-gradient(900px 500px at 85% 10%, rgba(52,179,228,.16), transparent 46%),
    radial-gradient(1000px 600px at 50% 110%, rgba(251,113,133,.10), transparent 55%),
    #0b0f17;
}

body.ao-dark *{ box-sizing:border-box; }

body.ao-dark .shell{ min-height:100vh; display:flex; }
body.ao-dark .main{ flex:1; padding:22px 16px 34px; }
body.ao-dark .wrapWide{ max-width:1180px; margin:0 auto; }

body.ao-dark .topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

body.ao-dark .brand{ display:flex; gap:12px; align-items:center; }
body.ao-dark .brand h1{
  margin:0;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

body.ao-dark .sub{ color:#9fb0d0; font-size:13px; margin-top:2px; }

body.ao-dark .pillLogoImg{
  height:46px;
  width:auto;
  display:block;
  border:none;
  background:transparent;
  padding:0;
  object-fit:contain;
}

body.ao-dark .pills{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
body.ao-dark .pill{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  min-height:44px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  border-radius:999px;
  font-size:13px;
  color:#e9eefc;
}

body.ao-dark .dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(255,255,255,.25);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
body.ao-dark .dot.good{ background:#36d399; box-shadow: 0 0 0 4px rgba(54,211,153,.12); }

body.ao-dark .hero{ margin-top:16px; }
body.ao-dark .heroInner{
  padding:22px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
body.ao-dark .heroInner h2{ margin:0 0 8px; font-size:30px; letter-spacing:-.01em; }

body.ao-dark .hint{ color:#9fb0d0; font-size:13px; line-height:1.35; }

body.ao-dark .sep{ height:1px; background: rgba(255,255,255,.08); margin:16px 0; }

body.ao-dark .ao-form{ max-width:520px; }
body.ao-dark .fieldRow{ margin-bottom:12px; }

body.ao-dark .label{
  display:block;
  color:#9fb0d0;
  font-size:13px;
  margin-bottom:6px;
}

body.ao-dark .input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color:#e9eefc;
  outline:none;
}
body.ao-dark .input:focus{ border-color: rgba(52,179,228,.45); }

body.ao-dark .btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color:#e9eefc;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
body.ao-dark .btn.primary{
  background: linear-gradient(135deg, rgba(124,184,47,.85), rgba(52,179,228,.82));
  border-color: rgba(255,255,255,.08);
  color:#061018;
}

body.ao-dark .ao-alert{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(251,113,133,.25);
  background: rgba(251,113,133,.10);
  color:#e9eefc;
  font-size:13px;
}

body.ao-dark .footer{
  margin-top:16px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color: rgba(159,176,208,.75);
  font-size:12px;
  flex-wrap:wrap;
}

/* Sidebar optional */
body.ao-dark .sidebar{
  width:78px;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:sticky;
  top:0;
  height:100vh;
  border-right:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

body.ao-dark .sideTop, body.ao-dark .sideBottom{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}

body.ao-dark .sideSep{
  width:44px;
  height:1px;
  background: rgba(255,255,255,.08);
  margin:6px 0 8px;
}

body.ao-dark .sideIcon{
  width:54px;
  height:54px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color:#e9eefc;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

/* Bigger icons inside the same squares */
body.ao-dark .sideSvg{
  width: 30px;           /* icon size */
  height: 30px;
  fill: currentColor;    /* uses your existing text color */
  opacity: 0.92;
}

/* Active state: make it obvious which page you're on */
body.ao-dark .sideIcon.active{
  border-color: rgba(52,179,228,.35);
  background: linear-gradient(135deg, rgba(124,184,47,.16), rgba(52,179,228,.14));
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* Slight hover lift */
body.ao-dark .sideIcon:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14);
}
body.ao-dark .sideIcon{
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

body.ao-dark .sideBrand img{
  width:46px;
  height:46px;
  display:block;
  object-fit:contain;
  border-radius:12px;
}


/* =========================
   Dark-mode overrides for CURRENT login markup
   (keeps your existing HTML + functionality)
========================= */
body.ao-dark #static-line{
  color: rgba(159,176,208,.85);
}

body.ao-dark hr.custom-line,
body.ao-dark hr.custom-line2{
  background: linear-gradient(to right, transparent, rgba(124,184,47,.8), rgba(255,255,255,.18), rgba(52,179,228,.8), transparent);
}

body.ao-dark #logo-img{
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Dark glass login card */
body.ao-dark #login-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* Make the login title readable in dark */
body.ao-dark #login-card h2{
  color: #e9eefc;
}

/* Inputs become dark */
body.ao-dark #login-card input[type="text"],
body.ao-dark #login-card input[type="password"]{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: #e9eefc;
}

body.ao-dark #login-card input[type="text"]::placeholder,
body.ao-dark #login-card input[type="password"]::placeholder{
  color: rgba(159,176,208,.70);
}

body.ao-dark #login-card input[type="text"]:focus,
body.ao-dark #login-card input[type="password"]:focus{
  border-color: rgba(52,179,228,.45);
  background: rgba(0,0,0,.28);
}

/* Labels */
body.ao-dark #login-card label{
  color: rgba(159,176,208,.90);
}

/* Button becomes "modern" */
body.ao-dark #login-card button{
  background: linear-gradient(135deg, rgba(124,184,47,.85), rgba(52,179,228,.82));
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
}

body.ao-dark #login-card button:hover{
  filter: brightness(1.05);
}

/* Error message matches dark theme */
body.ao-dark .login-error{
  color: #e9eefc;
  background: rgba(251,113,133,.12);
  border: 1px solid rgba(251,113,133,.25);
  box-shadow: none;
}


/* =========================
   AO Dark overrides for existing dashboard widgets
   Active only when <body class="ao-dark">
========================= */

body.ao-dark #agri,
body.ao-dark #overview{
  /* keep your brand colors */
}

body.ao-dark #static-line{
  color: rgba(159,176,208,.85);
}

/* Remove the old absolute logo box on dashboard pages */
body.ao-dark #logo-box{
  display:none;
}

/* Make your "Unit Information" card match dark panels */
body.ao-dark .pro-summary{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

body.ao-dark .summary-title{
  color: #e9eefc;
}

body.ao-dark .summary-label{
  color: #9fb0d0;
}

body.ao-dark .summary-value{
  color: #e9eefc;
}

body.ao-dark .summary-address{
  background: rgba(0,0,0,.18);
  border-left: 2px solid rgba(255,255,255,.08);
}

body.ao-dark .address-title{
  color: #9fb0d0;
}

body.ao-dark .address-value{
  color: #e9eefc;
}

/* Egg totals table (keep your sizing, just re-skin) */
body.ao-dark .egg-table{
  background: rgba(0,0,0,.18);
  border-collapse: collapse;
}

body.ao-dark .egg-table th{
  background: rgba(255,255,255,.06);
  color: #e9eefc;
  border: 1px solid rgba(255,255,255,.10);
}

body.ao-dark .egg-table td{
  color: #e9eefc;
  border: 1px solid rgba(255,255,255,.10);
}

/* Env mini table */
body.ao-dark .env-mini-table{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.20);
}

body.ao-dark .env-mini-table th{
  background: rgba(255,255,255,.06);
  color: #e9eefc;
  border: 1px solid rgba(255,255,255,.10);
}

body.ao-dark .env-mini-table td{
  color: #e9eefc;
  border: 1px solid rgba(255,255,255,.10);
}

/* History headings you currently render with inline colors */
body.ao-dark h2,
body.ao-dark h3,
body.ao-dark h4{
  color: #e9eefc;
}

/* Your nav-bar (if you still keep it) */
body.ao-dark .nav-bar a{
  color: #e9eefc;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

body.ao-dark .nav-bar a:hover{
  background: rgba(255,255,255,.06);
}

/* Optional: make those radio labels readable */
body.ao-dark label{
  color: rgba(233,238,252,.92);
}

/* Force dark tables even when unit.php has inline <style> rules */
body.ao-dark .egg-table{
  background: rgba(0,0,0,.18) !important;
  border-collapse: collapse !important;
}

body.ao-dark .egg-table th{
  background: rgba(255,255,255,.06) !important;
  color: #e9eefc !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

body.ao-dark .egg-table td{
  background: transparent !important;
  color: #e9eefc !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Your JS renderZoneSummary uses inline background colors on <tr>:
   override them too */
body.ao-dark .egg-table tr[style],
body.ao-dark .egg-table tr{
  color: #e9eefc !important;
}
body.ao-dark .egg-table tr[style*="background"]{
  background: rgba(255,255,255,.05) !important;
}

/* Env mini table */
body.ao-dark .env-mini-table{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.20) !important;
}

body.ao-dark .env-mini-table th{
  background: rgba(255,255,255,.06) !important;
  color: #e9eefc !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

body.ao-dark .env-mini-table td{
  background: transparent !important;
  color: #e9eefc !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Topbar brand title */
body.ao-dark .brandTitle{
  margin:0;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:28px;              /* bigger */
}

body.ao-dark .brandAgri{
  color:#7CB82F;               /* green */
}

body.ao-dark .brandOverview{
  color:#34B3E4;               /* blue */
  margin-left:10px;
}

/* Optional: make it even bigger on larger screens */
@media (min-width: 900px){
  body.ao-dark .brandTitle{
    font-size:34px;
  }
}

/* Optional: keep it readable on small phones */
@media (max-width: 420px){
  body.ao-dark .brandTitle{
    font-size:22px;
    letter-spacing:.08em;
  }
  body.ao-dark .brandOverview{ margin-left:8px; }
}

/* =========================
   FORCE CENTER + BIG TITLE IN TOPBAR
   (only affects the AGRI OVERVIEW title)
========================= */

/* Make the title bigger (force override) */
body.ao-dark .topbar .brandTitle{
  margin: 0;
  padding: 0;
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 44px !important;      /* <-- BIG */
}

/* Colors */
body.ao-dark .topbar .brandTitle .brandAgri{
  color: #7CB82F;
}
body.ao-dark .topbar .brandTitle .brandOverview{
  color: #34B3E4;
  margin-left: 14px;
}

/* Center the BRAND block inside the topbar */
body.ao-dark .topbar{
  position: relative;              /* anchor for absolute centering */
}

/* Keep your pills on the right, but allow centering */
body.ao-dark .topbar .brand{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* true center of the topbar */
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: center;
  justify-content: center;
  width: max-content;
}

/* Optional: if you want the logo to stay visible, keep it.
   If you want title-only centered, uncomment the next lines. */
/*
body.ao-dark .topbar .pillLogoImg{
  display:none;
}
*/

/* Keep sub text centered under the title */
body.ao-dark .topbar .brand .sub{
  margin-top: 6px;
  text-align: center;
}

/* Make sure pills remain on the right */
body.ao-dark .topbar .pills{
  margin-left: auto;
  position: relative;
  z-index: 2;
}

/* Responsive: scale down on small screens so it doesn't overflow */
@media (max-width: 700px){
  body.ao-dark .topbar .brandTitle{
    font-size: 30px !important;
    letter-spacing: 0.12em;
  }
  body.ao-dark .topbar .brandTitle .brandOverview{
    margin-left: 10px;
  }
}

/* Sub-line separators: consistent dot + spacing */
body.ao-dark .topbar .sub .sep{
  display: inline-block;
  margin: 0 10px;          /* space around the dot */
  color: rgba(159,176,208,.85);
  font-weight: 700;
}

body.ao-dark .pro-summary{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

/* ===== Segmented control (Normal / Split) ===== */
.segRow{
  display: flex;
  justify-content: center;
  margin: 10px 0 12px 0;
}

.seg{
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
}

.seg input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg label{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  color: rgba(233,238,252,0.80);
  font-family: 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: transparent;
  border: 1px solid transparent;
  transition: transform .06s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

.seg label:active{
  transform: scale(0.985);
}

.seg input:checked + label{
  background: linear-gradient(135deg, rgba(39,140,40,0.22), rgba(33,118,183,0.20));
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.94);
}

/* Optional tiny subtext */
.seg small{
  font-weight: 650;
  opacity: .78;
}

/* Remove old modeRow spacing issues (you can keep modeRow elsewhere if needed) */
.modeRow{ display:none; }

/* Force outline-only SVGs (prevents solid filled icons like logout door) */
.sideSvgOutline,
.sideSvgOutline *{
  fill: none !important;
  stroke: currentColor !important;
}