/* =====================================================================
   LabelYog themes.css (V5.27.29) -- app-chrome themes ONLY.
   NOT part of the locked design baseline; style.css stays byte-identical
   (design audit 13/13). Every theme re-pins the KLD stage to the house
   palette below, and PDFs never load this file, so the SUPREME DESIGN
   LOCK is honored: labels never recolor.
   ===================================================================== */

/* ---- Ocean ---- */
[data-theme="ocean"] {
  --green: #1B6FA8; --green-hov: #155C8C; --green-down: #114D75;
  --green-soft: #E8F2F9; --green-line: #BBD8EC;
  --gsoft: #E8F2F9; --gline: #BBD8EC; --ghov: #155C8C;
  --lime: #81AFCF;
}
[data-theme="ocean"] .side {
  background: linear-gradient(180deg, #0F2233 0%, #293E50 60%, #0C1D2B 100%);
}

/* ---- Plum ---- */
[data-theme="plum"] {
  --green: #7A3E8F; --green-hov: #663277; --green-down: #552A63;
  --green-soft: #F3EAF7; --green-line: #DCC5E6;
  --gsoft: #F3EAF7; --gline: #DCC5E6; --ghov: #663277;
  --lime: #B594C1;
}
[data-theme="plum"] .side {
  background: linear-gradient(180deg, #27162F 0%, #42304B 60%, #211228 100%);
}

/* ---- Terracotta ---- */
[data-theme="terracotta"] {
  --green: #C4602F; --green-hov: #A84E22; --green-down: #8D411C;
  --green-soft: #FAEEE6; --green-line: #EBCDB8;
  --gsoft: #FAEEE6; --gline: #EBCDB8; --ghov: #A84E22;
  --lime: #DEA78C;
}
[data-theme="terracotta"] .side {
  background: linear-gradient(180deg, #331E13 0%, #50392E 60%, #2B1910 100%);
}

/* ---- Slate ---- */
[data-theme="slate"] {
  --green: #3E5C76; --green-hov: #324B61; --green-down: #2A3F51;
  --green-soft: #ECF1F5; --green-line: #C8D6E0;
  --gsoft: #ECF1F5; --gline: #C8D6E0; --ghov: #324B61;
  --lime: #94A5B3;
}
[data-theme="slate"] .side {
  background: linear-gradient(180deg, #1A232B 0%, #353F47 60%, #161E24 100%);
}

/* ---- Royal Gold ---- */
[data-theme="royal"] {
  --green: #8A6D1B; --green-hov: #735A14; --green-down: #604B10;
  --green-soft: #F7F1E1; --green-line: #E3D5AC;
  --gsoft: #F7F1E1; --gline: #E3D5AC; --ghov: #735A14;
  --lime: #BEAE81;
}
[data-theme="royal"] .side {
  background: linear-gradient(180deg, #2B230D 0%, #473F27 60%, #241E0B 100%);
}

/* ---- Ruby ---- */
[data-theme="ruby"] {
  --green: #B02A45; --green-hov: #93213A; --green-down: #7B1B30;
  --green-soft: #FBE9ED; --green-line: #EDC0CA;
  --gsoft: #FBE9ED; --gline: #EDC0CA; --ghov: #93213A;
  --lime: #D38998;
}
[data-theme="ruby"] .side {
  background: linear-gradient(180deg, #310D15 0%, #4D2730 60%, #290B12 100%);
}

/* ---- Teal ---- */
[data-theme="teal"] {
  --green: #0E8683; --green-hov: #0B6F6C; --green-down: #095D5A;
  --green-soft: #E5F4F3; --green-line: #B7DEDC;
  --gsoft: #E5F4F3; --gline: #B7DEDC; --ghov: #0B6F6C;
  --lime: #7ABCBA;
}
[data-theme="teal"] .side {
  background: linear-gradient(180deg, #0B2727 0%, #264342 60%, #0A2121 100%);
}

/* ---- Indigo ---- */
[data-theme="indigo"] {
  --green: #4A57A8; --green-hov: #3C478C; --green-down: #323B75;
  --green-soft: #EBEDF8; --green-line: #C7CCEA;
  --gsoft: #EBEDF8; --gline: #C7CCEA; --ghov: #3C478C;
  --lime: #9BA2CF;
}
[data-theme="indigo"] .side {
  background: linear-gradient(180deg, #171C36 0%, #323753 60%, #14172E 100%);
}

/* ---- Forest ---- */
[data-theme="forest"] {
  --green: #356B37; --green-hov: #2A572C; --green-down: #234924;
  --green-soft: #EAF3EA; --green-line: #C2DCC3;
  --gsoft: #EAF3EA; --gline: #C2DCC3; --ghov: #2A572C;
  --lime: #8FAD91;
}
[data-theme="forest"] .side {
  background: linear-gradient(180deg, #12220C 0%, #2D3E27 60%, #0F1D0A 100%);
}

/* ---- Mocha ---- */
[data-theme="mocha"] {
  --green: #6F4E37; --green-hov: #5B402D; --green-down: #4C3525;
  --green-soft: #F4EDE7; --green-line: #DCC9B8;
  --gsoft: #F4EDE7; --gline: #DCC9B8; --ghov: #5B402D;
  --lime: #AF9D91;
}
[data-theme="mocha"] .side {
  background: linear-gradient(180deg, #231811 0%, #3F332B 60%, #1E140E 100%);
}

/* ---- Navy ---- */
[data-theme="navy"] {
  --green: #1F3A64; --green-hov: #182E50; --green-down: #142643;
  --green-soft: #E9EEF6; --green-line: #C2CFE2;
  --gsoft: #E9EEF6; --gline: #C2CFE2; --ghov: #182E50;
  --lime: #8392A9;
}
[data-theme="navy"] .side {
  background: linear-gradient(180deg, #0D182B 0%, #273347 60%, #0B1424 100%);
}

/* ---- Copper ---- */
[data-theme="copper"] {
  --green: #A25B2A; --green-hov: #874B22; --green-down: #713F1C;
  --green-soft: #F8EFE6; --green-line: #E5CCB2;
  --gsoft: #F8EFE6; --gline: #E5CCB2; --ghov: #874B22;
  --lime: #CBA489;
}
[data-theme="copper"] .side {
  background: linear-gradient(180deg, #2B1B0C 0%, #473627 60%, #24170A 100%);
}

/* ---- Rose ---- */
[data-theme="rose"] {
  --green: #B4517E; --green-hov: #984268; --green-down: #7F3757;
  --green-soft: #F9EDF3; --green-line: #E9C6D7;
  --gsoft: #F9EDF3; --gline: #E9C6D7; --ghov: #984268;
  --lime: #D59FB8;
}
[data-theme="rose"] .side {
  background: linear-gradient(180deg, #311623 0%, #4D303F 60%, #29121E 100%);
}

/* ---- Graphite ---- */
[data-theme="graphite"] {
  --green: #4A4F55; --green-hov: #3B3F44; --green-down: #313439;
  --green-soft: #EEF0F1; --green-line: #CFD4D8;
  --gsoft: #EEF0F1; --gline: #CFD4D8; --ghov: #3B3F44;
  --lime: #9B9EA1;
}
[data-theme="graphite"] .side {
  background: linear-gradient(180deg, #1C1E22 0%, #37393D 60%, #17191C 100%);
}

/* ---- KLD RE-PIN: the print sheet keeps house colors in EVERY theme ---- */
[data-theme] .kld-stage, [data-theme] #w-kld {
  --green: #12925A; --green-hov: #0D7A4A; --green-down: #0A6A40;
  --green-soft: #E7F4EC; --green-line: #BFE0CD; --lime: #6FDD9B;
  --gsoft: #E7F4EC; --gline: #E7F4EC; --ghov: #0D7A4A;
}

/* ---- batch-weight toggle + balance (V5.27.35) ---- */
.wt-toggle { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; flex-wrap: wrap; }
.wt-btn { border: 1px solid var(--green-line); background: var(--surface); color: var(--ink-2);
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.wt-btn.on { background: var(--green-soft); color: var(--green-hov); border-color: var(--green-line); }
.wt-hint { font-size: 11.5px; color: var(--muted); }
.ing-name-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ing-name-wrap .ing-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-derived { margin-left: auto; font-size: 11.5px; color: var(--green-hov); font-weight: 700; white-space: nowrap; }

/* ---- ingredient thumbs (V5.27.43): photo when packed, group icon always ---- */
.results .result { flex-direction: row; align-items: center; gap: 11px; }
.res-thumb { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 9px;
  background: var(--green-soft); border: 1px solid var(--green-line);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.res-thumb svg { width: 22px; height: 22px; color: var(--green-hov); }
.res-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.res-main b, .res-main span { display: block; }

/* ---- dashboard deluxe (V5.27.55) ---- */
.dash-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.dash-hero-right { display: flex; align-items: center; gap: 12px; }
.plan-chip { font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 5px 12px;
  border-radius: 999px; border: 1.5px solid var(--line); }
.plan-free { background: var(--sunken); color: var(--muted); }
.plan-pro { background: var(--green); color: #fff; border-color: var(--green); }
.stats-5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dash-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin: 20px 0 6px; }
.dash-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 16px; }
.spark { width: 100%; height: 84px; margin-top: 8px; }
.spark-line { stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.spark-dot { fill: var(--accent); }
.spark-cap { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.dest-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dest-chip { background: var(--sunken); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; }
.dest-chip b { color: var(--accent); margin-right: 4px; }
.onb-body { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.onb-ring { width: 72px; height: 72px; flex: 0 0 72px; transform: rotate(-90deg); }
.onb-track { fill: none; stroke: var(--sunken); stroke-width: 7; }
.onb-fill { fill: none; stroke: var(--green); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 188.5; transition: stroke-dashoffset .6s ease; }
.onb-num { transform: rotate(90deg); transform-origin: 36px 36px; font-size: 15px;
  font-weight: 800; fill: var(--ink); }
.onb-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.onb-list li { margin: 3px 0; }
.onb-list li.done a { color: var(--muted); text-decoration: line-through; }
.feed { list-style: none; margin: 10px 0 0; padding: 0; }
.feed li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed-ico { flex: 0 0 22px; text-align: center; }
.feed-main { font-size: 13px; }
.feed-main i { display: block; color: var(--muted); font-style: normal; font-size: 11.5px; margin-top: 1px; }

/* ---- server health gauges (V5.27.48) ---- */
.srv-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px; margin: 18px 0 22px; }
.gauge { position: relative; text-align: center; padding: 10px 6px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.gauge svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.g-track { fill: none; stroke: var(--sunken); stroke-width: 10; }
.g-fill { fill: none; stroke: var(--green); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset .6s ease; }
.g-fill.hot { stroke: #c0392b; }
.g-num { position: absolute; top: 52px; left: 0; right: 0; font-size: 20px;
  font-weight: 800; color: var(--ink); }
.g-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px; }
.g-sub { font-size: 11.5px; color: var(--ink-2); min-height: 15px; }
.srv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.srv-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 16px; }
.srv-card h3 { margin: 0 0 8px; font-size: 14px; }
.srv-table td:first-child { color: var(--muted); width: 46%; }

/* ---- OCR scan row (V5.27.41) ---- */
.ocr-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; flex-wrap: wrap; }

/* ---- 2cm brand logo, sidebar top-left (V5.27.32, owner order) ---- */
.side .brand-tile { width: 2cm; height: 2cm; border-radius: 16px; flex: 0 0 auto; }

/* ---- top-right account pill (V5.27.30) ---- */
.top-account { display: flex; justify-content: flex-end; align-items: center;
  gap: 10px; padding: 14px 22px 0; }
.top-account .ta-meta { text-align: right; line-height: 1.25; }
.top-account .ta-meta b { display: block; font-size: 13px; color: var(--ink); font-weight: 700;
  max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-account .ta-meta small { color: var(--muted); font-size: 11px; }
.top-account .ta-avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--green);
  color: #fff; font-weight: 800; font-size: 15px; display: inline-flex;
  align-items: center; justify-content: center; }
.top-account .ta-out { width: 34px; height: 34px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink-2); display: inline-flex;
  align-items: center; justify-content: center; }
.top-account .ta-out svg { width: 16px; height: 16px; }
.top-account .ta-out:hover { background: var(--green-soft); border-color: var(--green-line); color: var(--green-hov); }
@media (max-width: 760px) { .top-account .ta-meta small { display: none; } }

/* ---- switcher (sidebar footer) ---- */
.theme-pick { margin-top: 10px; }
.theme-pick .tp-label { display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; color: #8FA096; text-transform: uppercase; margin-bottom: 7px; }
.theme-dots { display: grid; grid-template-columns: repeat(8, 16px); gap: 7px; }
.theme-dot { width: 16px; height: 16px; border-radius: 999px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.25); padding: 0; }
.theme-dot:hover { border-color: rgba(255,255,255,.7); }
.theme-dot.on { border-color: #FFFFFF; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }