.gprog-admin-devices { --device-success-bg: #dcfce7; --device-success-text: #14532d; --device-danger-bg: #ffe4e6; --device-danger-text: #9f1239; --device-neutral-bg: #e2e8f0; --device-neutral-text: #334155; --device-action-bg: #1257c8; --device-save-bg: #166534; --device-selection-border: #2563eb; --device-placeholder: #64748b; }
:root[data-ui-theme="dark"] .gprog-admin-devices { --device-success-bg: #17372b; --device-success-text: #bbf7d0; --device-danger-bg: #41262d; --device-danger-text: #fecdd3; --device-neutral-bg: #232b34; --device-neutral-text: #e7ecf2; --device-action-bg: #214f8d; --device-save-bg: #246b45; --device-selection-border: #93c5fd; --device-placeholder: #a0adbb; }
.gprog-shell .gprog-admin-devices .gprog-device-status { display: inline-flex; max-width: 100%; line-height: 1.4; border: 1px solid currentColor; }
.gprog-shell .gprog-admin-devices .gprog-device-status[data-tone="success"] { background-color: var(--device-success-bg); color: var(--device-success-text); }
.gprog-shell .gprog-admin-devices .gprog-device-status[data-tone="danger"] { background-color: var(--device-danger-bg); color: var(--device-danger-text); }
.gprog-shell .gprog-admin-devices .gprog-device-status[data-tone="neutral"] { background-color: var(--device-neutral-bg); color: var(--device-neutral-text); }
.gprog-shell .gprog-admin-devices .gprog-device-card { background-color: var(--ui-surface); border-color: var(--ui-border); }
.gprog-shell .gprog-admin-devices .gprog-device-card:is(:hover, [data-selected="true"]) { background-color: var(--ui-subtle); border-color: var(--device-selection-border); }
.gprog-shell .gprog-admin-devices .gprog-device-danger { color: var(--device-danger-text); }
.gprog-shell .gprog-admin-devices button.bg-indigo-600 { background-color: var(--device-action-bg); color: #fff; }
.gprog-shell .gprog-admin-devices button.bg-green-600 { background-color: var(--device-save-bg); color: #fff; }
.gprog-shell .gprog-admin-devices input::placeholder { color: var(--device-placeholder); opacity: 1; }

/* Keep filled controls separate from the brighter link/accent color. */
:root { --readable-button-bg: #1257c8; --readable-button-hover: #0e47a3; --readable-success: #166534; --readable-panel-muted: #475569; --ui-warning: #854d0e; --ui-danger: #9f1239; }
:root[data-ui-theme="dark"] { --readable-button-bg: #214f8d; --readable-button-hover: #285c9e; --readable-success: #81dfab; --readable-panel-muted: #b8c6d6; --ui-warning: #fcd34d; --ui-danger: #fecdd3; }
.gprog-shell button.text-white:is(.bg-indigo-600, .bg-violet-600, .bg-purple-600, .bg-blue-500, .bg-blue-600, .bg-sky-600) { background-color: var(--readable-button-bg); color: #fff; }
.gprog-shell button.text-white:is(.bg-indigo-600, .bg-violet-600, .bg-purple-600, .bg-blue-500, .bg-blue-600, .bg-sky-600):not(:disabled):hover { background-color: var(--readable-button-hover); color: #fff; filter: none; }
.gprog-shell :is(button, a).text-white:is(.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600) { background-color: #166534; color: #fff; }
.gprog-shell :is(button, a).text-white:is(.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600):not(:disabled):hover { background-color: #14532d; color: #fff; filter: none; }
:root[data-ui-theme="dark"] .gprog-shell :is(button, a).text-white:is(.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600) { background-color: #246b45; color: #fff; }
:root[data-ui-theme="dark"] .gprog-shell :is(button, a).text-white:is(.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600):not(:disabled):hover { background-color: #185638; color: #fff; filter: none; }
.gprog-shell :is(.text-emerald-600, .text-emerald-700, .text-green-700) { color: var(--readable-success); }

/* Read foreground and background together for status labels. */
:root[data-ui-theme="dark"] .gprog-shell :is(.bg-indigo-100.text-indigo-800, .bg-blue-100.text-blue-800) { background-color: #1d354e; color: #bfdbfe; }
:root[data-ui-theme="dark"] .gprog-shell :is(.bg-emerald-100.text-emerald-800, .bg-green-100.text-green-800) { background-color: #17372b; color: #bbf7d0; }
:root[data-ui-theme="dark"] .gprog-shell :is(.bg-red-100.text-red-800, .bg-rose-100.text-rose-800) { background-color: #41262d; color: #fecdd3; }
:root[data-ui-theme="dark"] .gprog-shell :is(.bg-amber-100.text-amber-800, .bg-yellow-100.text-yellow-800) { background-color: #3c3320; color: #fcd34d; }

/* CDEK selections, archive/delivery panels and translucent profile panels. */
.gprog-shell :is(.bg-blue-50, .bg-blue-100, .bg-zinc-50, [class~="bg-sky-50/70"], [class~="bg-fuchsia-50/40"]) :is(.text-gray-500, .text-gray-600, .text-slate-500, .text-slate-600) { color: var(--readable-panel-muted); }
:root[data-ui-theme="dark"] .gprog-shell :is(.bg-blue-50, .bg-blue-100, [class~="bg-sky-50/70"]) { background-color: #1d354e; color: var(--ui-text); }
:root[data-ui-theme="dark"] .gprog-shell :is(.bg-blue-50, .bg-blue-100)[class~="border-blue-600"] { border-color: #93c5fd; }
:root[data-ui-theme="dark"] .gprog-shell :is(.bg-zinc-50, .bg-zinc-100) { background-color: var(--ui-subtle); color: var(--ui-text); border-color: var(--ui-border); }
:root[data-ui-theme="dark"] .gprog-shell :is([class~="bg-sky-50/70"], .bg-blue-50, .bg-blue-100) :is(.text-sky-900, .text-sky-800, .text-blue-600, .text-blue-700) { color: #bfdbfe; }
:root[data-ui-theme="dark"] .gprog-shell :is(.bg-fuchsia-50, [class~="bg-fuchsia-50/40"]) { background-color: #38283d; color: var(--ui-text); border-color: #8b6595; }
:root[data-ui-theme="dark"] .gprog-shell :is(.bg-fuchsia-50, [class~="bg-fuchsia-50/40"]) :is(.text-fuchsia-700, .text-fuchsia-800, .text-fuchsia-900) { color: #e9b6f0; }
:root[data-ui-theme="dark"] .gprog-shell [class~="bg-violet-50/50"] { background-color: #302b46; color: var(--ui-text); border-color: #81769e; }
:root[data-ui-theme="dark"] .gprog-shell [class~="bg-violet-50/50"] .text-violet-900 { color: #ddd6fe; }
:root[data-ui-theme="dark"] .gprog-shell [class~="bg-emerald-50/60"] { background-color: #17372b; color: var(--ui-text); border-color: #347559; }
:root[data-ui-theme="dark"] .gprog-shell [class~="bg-emerald-50/60"] :is(.text-emerald-800, .text-emerald-900) { color: #bbf7d0; }

/* Also support retained production device utility classes during scoped rollout. */
.gprog-shell .gprog-admin-devices .bg-red-200 { background-color: var(--device-danger-bg); color: var(--device-danger-text); }
.gprog-shell .gprog-admin-devices .bg-green-200 { background-color: var(--device-success-bg); color: var(--device-success-text); }
.gprog-shell .gprog-admin-devices .bg-gray-300 { background-color: var(--device-neutral-bg); color: var(--device-neutral-text); }
.gprog-shell .gprog-admin-devices .text-red-600 { color: var(--device-danger-text); }
.gprog-shell .gprog-admin-devices .gprog-device-card .flex.items-center.gap-2.mt-2 { flex-wrap: wrap; }
.gprog-shell .gprog-admin-devices .gprog-device-card.border-indigo-400 { background-color: var(--ui-subtle); border-color: var(--device-selection-border); }
.gprog-shell .gprog-admin-devices .gprog-device-card :is(.bg-red-200, .bg-green-200, .bg-gray-300) { display: inline-flex; max-width: 100%; line-height: 1.4; border: 1px solid currentColor; }