/* skin.css — the console's visual layer, after the Vuexy dark admin template
   the operator chose as the reference: a #25293C canvas, #2F3349 paper,
   #7367F0 primary, floating topbar, pill navigation, tinted icon tiles and
   label badges. Loaded last, so it re-points Tenger's tokens and restyles
   its components; tenger.css and console.css keep the structure and every
   class/data-* hook the scripts rely on.

   The font stays Gilroy (already bundled): Vuexy's Public Sans has no
   Cyrillic, and Mongolian is this console's default language. */

/* ============================ Tokens ============================
   Dark is the console's only palette — the reference is a dark template —
   so this block deliberately wins over tokens.css in both colour schemes. */
:root {
  color-scheme: dark;
  --tc-canvas: #25293C;
  --tc-surface: #2F3349;
  --tc-surface-2: #343850;
  --tc-surface-3: #3A3F58;
  --tc-ink: #CFCDE4;
  --tc-ink-2: #ACABC1;
  --tc-ink-3: #8C8DA6;
  --tc-ink-4: #5E6175;
  --tc-border: #44485E;
  --tc-border-faint: #3A3E55;
  --tc-border-strong: #4E5370;

  --tc-brand: #7367F0;
  --tc-brand-hover: #685DD8;
  --tc-brand-press: #5E50EE;
  --tc-brand-soft: rgba(115, 103, 240, .16);
  --tc-sky: #8F85F3;
  --tc-sky-soft: rgba(115, 103, 240, .16);

  --tc-up: #28C76F;      --tc-up-soft: rgba(40, 199, 111, .16);
  --tc-down: #FF4C51;    --tc-down-soft: rgba(255, 76, 81, .16);
  --tc-warn: #FF9F43;    --tc-warn-soft: rgba(255, 159, 67, .16);
  --tc-info: #00BAD1;    --tc-info-soft: rgba(0, 186, 209, .16);
  --tc-neutral: #808390; --tc-neutral-soft: rgba(128, 131, 144, .16);

  /* The sidebar is paper, not a separate navy: in the reference the menu is
     the same surface as the cards, lifted only by its shadow. */
  --tc-navy-900: #2F3349;
  --tc-navy-800: #3A3F58;
  --tc-navy-700: #44485E;
  --tc-navy-600: #4E5370;
  --tc-on-navy: #CFCDE4;
  --tc-on-navy-2: #ACABC1;
  --tc-on-navy-3: #76778E;

  --tc-r-xs: 4px;
  --tc-r-sm: 6px;
  --tc-r-md: 6px;
  --tc-r-lg: 8px;
  --tc-r-xl: 10px;

  --tc-shadow-xs: 0 1px 3px rgba(19, 17, 32, .16);
  --tc-shadow-sm: 0 2px 6px rgba(19, 17, 32, .18);
  --tc-shadow-md: 0 3px 12px rgba(19, 17, 32, .2);
  --tc-shadow-lg: 0 6px 24px rgba(19, 17, 32, .32);
  --tc-ring: 0 2px 6px rgba(115, 103, 240, .3);

  --tc-sidebar-w: 260px;
  --tc-topbar-h: 58px;

  --vx-primary-grad: linear-gradient(72.47deg, #7367F0 22.16%, rgba(115, 103, 240, .7) 76.47%);
  --vx-primary-shadow: 0 2px 6px rgba(115, 103, 240, .3);
}
body { background: var(--tc-canvas); color: var(--tc-ink-2); }
.tc-app { background: var(--tc-canvas); color: var(--tc-ink-2); }
.tc-app h1, .tc-app h2, .tc-app h3, .tc-h1, .tc-h2, .tc-h3 { color: var(--tc-ink); }

/* ============================ Sidebar ============================ */
.tc-sidebar {
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow-sm);
  border-right: 0;
}
.tc-brand { padding: 20px 20px 18px; gap: 12px; border-bottom: 0; }
.tc-brand-mark {
  width: 34px; height: 34px; border-radius: var(--tc-r-md);
  background: var(--vx-primary-grad); color: #fff; box-shadow: var(--vx-primary-shadow);
}
.tc-brand-name .brand { color: var(--tc-ink); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.tc-brand-name .brand-sub { color: var(--tc-ink-3); font-size: 12px; }

.nav-section {
  margin: 14px 0 6px; padding: 0 24px;
  font: 500 13px/1 var(--tc-font); color: var(--tc-on-navy-3);
}
.tc-nav { padding: 0 14px; gap: 4px; }
/* The section name has no room in the icon-only rail. */
.tc-app[data-collapsed="true"] .nav-section { visibility: hidden; }
.tc-nav-item {
  height: 40px; padding: 0 14px; gap: 12px; border-radius: var(--tc-r-md);
  color: var(--tc-ink-2); font: 500 15px/1 var(--tc-font); background: transparent;
}
.tc-nav-item:hover { background: rgba(255, 255, 255, .05); color: var(--tc-ink); }
.tc-nav-item.is-active, .tc-nav-item.is-active:hover {
  background: var(--vx-primary-grad); color: #fff; box-shadow: var(--vx-primary-shadow);
}
.tc-nav-item .tc-nav-icon { width: 20px; height: 20px; }

.tc-sidebar-foot { padding: 14px; border-top: 1px solid var(--tc-border-faint); }

/* ============================ Topbar ============================
   Floats as its own card above the content, the reference's most
   recognisable piece of chrome. */
.tc-main { background: var(--tc-canvas); }
.tc-topbar {
  position: sticky; top: 0; z-index: 20;
  margin: 16px 24px 0; height: var(--tc-topbar-h); padding: 0 16px 0 20px;
  background: var(--tc-surface); border: 0; border-radius: var(--tc-r-md);
  box-shadow: var(--tc-shadow-sm);
  display: flex; align-items: center; gap: 14px;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.topbar-user .tc-avatar { width: 38px; height: 38px; }
.topbar-user-meta { display: flex; flex-direction: column; gap: 3px; }
.topbar-user-meta b { font: 600 14px/1 var(--tc-font); color: var(--tc-ink); }
.topbar-user-meta span { font: 500 12px/1 var(--tc-font); color: var(--tc-ink-3); }
.tc-icon-btn { color: var(--tc-ink-2); border-radius: var(--tc-r-md); }
.tc-icon-btn:hover { background: rgba(255, 255, 255, .06); color: var(--tc-ink); }
.logout-icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 0; background: transparent; cursor: pointer; }

.tc-content { padding: 24px; }
.tc-page-head { margin-bottom: 20px; }
.tc-page-head .tc-h1 { font-size: 22px; font-weight: 600; }
.tc-page-head .tc-sm { color: var(--tc-ink-3); }

/* ============================ Avatars ============================
   Initials on a tinted tile — the reference's way of giving every row a
   face. Colour classes cycle so neighbouring rows read apart. */
.tc-avatar {
  border-radius: 50%; background: var(--tc-brand-soft); color: var(--tc-brand);
  font: 600 13px/1 var(--tc-font); display: inline-grid; place-items: center;
}
.vx-avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 600 13px/1 var(--tc-font); text-transform: uppercase;
  background: var(--tc-brand-soft); color: var(--tc-brand);
}
.vx-avatar.c1 { background: var(--tc-up-soft); color: var(--tc-up); }
.vx-avatar.c2 { background: var(--tc-info-soft); color: var(--tc-info); }
.vx-avatar.c3 { background: var(--tc-warn-soft); color: var(--tc-warn); }
.vx-avatar.c4 { background: var(--tc-down-soft); color: var(--tc-down); }
.vx-avatar.is-off { background: var(--tc-neutral-soft); color: var(--tc-neutral); }

/* ============================ Cards ============================ */
.tc-card {
  background: var(--tc-surface); border: 0; border-radius: var(--tc-r-md);
  box-shadow: var(--tc-shadow-md);
}
.tc-card-head { border-bottom: 0; padding: 22px 24px 4px; }
.tc-card-head .tc-h3, .tc-card .tc-h3 { font-size: 18px; font-weight: 600; color: var(--tc-ink); }
.tc-card-head .tc-sm { color: var(--tc-ink-3); }

/* Stat cards: number left, tinted icon tile right, the reference's layout. */
.tc-stat { padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; }
.tc-stat .tc-stat-top { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; }
.tc-stat .tc-stat-val { grid-column: 1; grid-row: 1; font: 600 28px/1.1 var(--tc-font); color: var(--tc-ink); }
.tc-stat .tc-stat-label { grid-column: 1; grid-row: 2; margin-top: 6px; font: 500 14px/1.3 var(--tc-font); color: var(--tc-ink-3); }
.tc-stat-ic {
  width: 42px; height: 42px; border-radius: var(--tc-r-md);
  background: var(--tc-brand-soft); color: var(--tc-brand); display: grid; place-items: center;
}
.tc-stat-ic.live { background: var(--tc-up-soft); color: var(--tc-up); }
.tc-stat-ic.info { background: var(--tc-info-soft); color: var(--tc-info); }
.tc-stat-ic.warn { background: var(--tc-warn-soft); color: var(--tc-warn); }

/* ============================ Badges ============================
   Label style: the colour at 16% behind the colour itself. */
.tc-badge {
  border: 0; border-radius: var(--tc-r-xs); padding: 5px 10px;
  font: 600 12.5px/1 var(--tc-font);
  background: var(--tc-neutral-soft); color: var(--tc-ink-2);
}
.tc-badge.up { background: var(--tc-up-soft); color: var(--tc-up); }
.tc-badge.down { background: var(--tc-down-soft); color: var(--tc-down); }
.tc-badge.info { background: var(--tc-info-soft); color: var(--tc-info); }
.tc-badge.warn { background: var(--tc-warn-soft); color: var(--tc-warn); }
.tc-badge.brand { background: var(--tc-brand-soft); color: var(--tc-brand); }

/* ============================ Buttons ============================ */
.tc-btn { border-radius: var(--tc-r-md); font-weight: 600; letter-spacing: .01em; }
.tc-btn-primary { background: var(--tc-brand); border-color: var(--tc-brand); color: #fff; box-shadow: var(--vx-primary-shadow); }
.tc-btn-primary:hover { background: var(--tc-brand-hover); border-color: var(--tc-brand-hover); }
.tc-btn-secondary {
  background: var(--tc-brand-soft); border-color: transparent; color: var(--tc-brand);
}
.tc-btn-secondary:hover { background: rgba(115, 103, 240, .24); color: var(--tc-brand); }
.tc-btn-danger { background: var(--tc-down-soft); border-color: transparent; color: var(--tc-down); }
.tc-btn-danger:hover { background: var(--tc-down); color: #fff; }
.tc-btn:disabled { opacity: .45; box-shadow: none; }
.tc-btn:focus-visible, .tc-nav-item:focus-visible, .tc-icon-btn:focus-visible { outline: 2px solid var(--tc-brand); outline-offset: 2px; }

/* ============================ Forms ============================ */
.tc-label { color: var(--tc-ink-2); font-weight: 500; font-size: 13px; }
.tc-input, .tc-select, .tc-textarea {
  background: transparent; border: 1px solid var(--tc-border); color: var(--tc-ink);
  border-radius: var(--tc-r-md);
}
.tc-input::placeholder, .tc-textarea::placeholder { color: var(--tc-ink-4); }
.tc-input:focus, .tc-select:focus, .tc-textarea:focus {
  border-color: var(--tc-brand); background: transparent; box-shadow: var(--tc-ring);
}
.tc-select option { background: var(--tc-surface); color: var(--tc-ink); }

.tc-seg { background: var(--tc-surface-3); border: 0; border-radius: var(--tc-r-md); padding: 3px; }
.tc-seg button { color: var(--tc-ink-3); border-radius: var(--tc-r-sm); }
.tc-seg button.is-active { background: var(--tc-brand); color: #fff; box-shadow: var(--vx-primary-shadow); }

/* ============================ Tables ============================ */
.tc-table-wrap { border: 0; border-radius: 0; }
.tc-table { color: var(--tc-ink-2); }
.tc-table thead th {
  background: transparent; color: var(--tc-ink);
  font: 600 13px/1 var(--tc-font); letter-spacing: .02em;
  border-bottom: 1px solid var(--tc-border); padding: 14px 16px;
}
.tc-table tbody td { border-bottom: 1px solid var(--tc-border-faint); padding: 12px 16px; }
.tc-table tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.vx-cell-id { display: flex; align-items: center; gap: 12px; }
.vx-cell-id-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vx-cell-id-text b { color: var(--tc-ink); font: 600 14.5px/1.2 var(--tc-font); }
.vx-cell-id-text span { color: var(--tc-ink-3); font: 500 12.5px/1.2 var(--tc-font); }

/* ============================ Alerts, dialogs ============================ */
.tc-alert { border-radius: var(--tc-r-md); border: 0; }
.tc-alert.down { background: var(--tc-down-soft); color: var(--tc-down); }
dialog.tc-modal {
  background: var(--tc-surface); color: var(--tc-ink-2); border: 0;
  border-radius: var(--tc-r-lg); box-shadow: var(--tc-shadow-lg);
}
dialog.tc-modal::backdrop { background: rgba(23, 25, 38, .6); }
.tc-hint { color: var(--tc-ink-3); }

/* ============================ Small screens ============================ */
@media (max-width: 899px) {
  .tc-topbar { margin: 12px 12px 0; }
  .tc-content { padding: 16px 12px; }
  .topbar-user-meta { display: none; }
}
@media (max-width: 1180px) and (min-width: 900px) {
  .tc-app:not([data-collapsed]) .nav-section { visibility: hidden; }
}

/* Card headers: an icon on a tinted tile, then title over subtitle, all
   left-aligned — the reference's panel heading. The <svg> itself is the
   tile (an inline SVG root takes padding/background), so the templates
   need no wrapper. */
.tc-card-head.panel-header, .tc-card-head.section-header, .tc-card-head.fw-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  padding: 22px 24px 8px; text-align: left;
}
.tc-card-head.section-header { flex-direction: column; align-items: flex-start; gap: 6px; }
.tc-card-head.fw-head { justify-content: space-between; }
.tc-card-head.panel-header > svg {
  box-sizing: content-box; flex: 0 0 auto; padding: 10px;
  border-radius: var(--tc-r-md); background: var(--tc-brand-soft); color: var(--tc-brand);
}
.tc-card-head .tc-h2, .tc-card-head .tc-h3 { margin: 0; font: 600 18px/1.25 var(--tc-font); color: var(--tc-ink); }
.tc-card-head .panel-subtitle, .tc-card-head .section-hint { display: block; margin-top: 4px; color: var(--tc-ink-3); font-size: 13.5px; }
.tc-brand-name .brand-sub { text-transform: none; letter-spacing: 0; white-space: normal; line-height: 1.3; }

/* Device settings dialog: the node-password form sits under the settings,
   divided by a rule because it is a separate action with its own request. */
.node-password-form {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--tc-border);
  display: flex; flex-direction: column; gap: 12px;
}
.dialog-section-title { margin: 0; font-size: 16px; }
.status-ok { color: var(--tc-up); }
.status-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-cell .last-seen { flex-basis: 100%; }
.tc-sidebar .tc-brand-name .brand-sub { font: 500 12px/1.3 var(--tc-font); text-transform: none; letter-spacing: 0; color: var(--tc-ink-3); }
.dashboard-stats { margin-bottom: 24px; }
.tc-app input[type="range"], .tc-app input[type="checkbox"], .tc-app input[type="radio"] { accent-color: var(--tc-brand); }

/* Reports: each kind keeps one colour everywhere it appears. */
.tc-badge.badge-announce { background: var(--tc-brand-soft); color: var(--tc-brand); }
.tc-badge.badge-schedule { background: var(--tc-warn-soft); color: var(--tc-warn); }
.tc-badge.badge-live { background: var(--tc-up-soft); color: var(--tc-up); }
.tc-badge.badge-auth { background: var(--tc-info-soft); color: var(--tc-info); }
.tc-badge.badge-device { background: var(--tc-neutral-soft); color: var(--tc-ink-2); }

/* Login: the hero sits on the canvas, the form on paper — the reference's
   auth layout — so the two halves stay distinct now the sidebar navy has
   become paper. */
.login-hero { background: var(--tc-canvas); }
.login-panel { background: var(--tc-surface); }
.login-title { color: var(--tc-ink); }

/* ============================ Toolbar card ============================
   The reference's list pattern: title on the left, search and the primary
   "add" action on the right, the table running edge to edge below. */
.devices-card { margin-bottom: 24px; overflow: hidden; }
.vx-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px;
  padding: 20px 24px; border-bottom: 1px solid var(--tc-border-faint);
}
.vx-toolbar .tc-h3 { margin: 0; font-size: 18px; font-weight: 600; }
.vx-toolbar .tc-sm { margin: 4px 0 0; }
.vx-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vx-search { position: relative; display: flex; align-items: center; }
.vx-search svg { position: absolute; left: 12px; color: var(--tc-ink-3); pointer-events: none; }
.vx-search .tc-input { width: 260px; padding-left: 40px; }
.vx-toolbar .tc-btn-primary { display: inline-flex; align-items: center; gap: 8px; }
.devices-card .tc-table-wrap { margin: 0; }
.devices-card > .tc-sm.muted { padding: 20px 24px; margin: 0; }
.vx-empty-filter { padding: 20px 24px; margin: 0; }
.provision-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.status-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
td > .status-cell { min-width: 120px; }
@media (max-width: 640px) { .vx-search .tc-input { width: 100%; } .vx-search, .vx-toolbar-actions { width: 100%; } }

/* ============================ Toolbar cards on every page ============================
   Dashboard zones, schedules, history and reports share the devices card's
   shape: a header with the title and its one primary action, content below. */
.zone-section, .schedules-card, .reports-card { overflow: hidden; }
.schedules-card { margin-bottom: 24px; }
.vx-toolbar .tc-btn { display: inline-flex; align-items: center; gap: 8px; }
.zone-card-body { padding-top: 20px; }

/* Empty state: an invitation to act, not a dead sentence. */
.vx-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 36px 16px; border: 1px dashed var(--tc-border); border-radius: var(--tc-r-lg);
}
.vx-empty p { margin: 0; }
.vx-empty .tc-btn { display: inline-flex; align-items: center; gap: 8px; }
.vx-empty-ic {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--tc-brand-soft, rgba(115, 103, 240, .16)); color: var(--tc-brand, #7367f0);
}

/* Inline call-out (the starter sample schedule). */
.vx-callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 14px 18px; margin-bottom: 18px; border-radius: var(--tc-r-md);
  background: var(--tc-info-soft, rgba(0, 186, 209, .12));
}
.vx-callout p { margin: 4px 0 0; }
.vx-callout strong { color: var(--tc-ink); }

/* Reports: filters sit in one row under the toolbar, the table runs edge to edge. */
.vx-filter-bar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 14px;
  padding: 18px 24px; margin: 0; border-bottom: 1px solid var(--tc-border-faint);
}
.reports-card .tc-table-wrap { margin: 0; }
@media (max-width: 1100px) { .vx-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vx-filter-bar { grid-template-columns: 1fr; } }

/* Modals that hold whole forms. */
dialog.zone-manager-dialog { width: min(640px, calc(100vw - 32px)); }
dialog.schedule-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.zone-manager-dialog .zone-form {
  display: grid; grid-template-columns: 120px 1fr auto; align-items: end; gap: 12px; margin: 16px 0 20px;
}
@media (max-width: 560px) { .zone-manager-dialog .zone-form { grid-template-columns: 1fr; } }
.zone-manager-dialog .zone-settings-list { border-top: 1px solid var(--tc-border-faint); padding-top: 8px; }
.schedule-dialog .schedule-form { padding: 0; }
.schedule-dialog .dialog-actions { border-top: 1px solid var(--tc-border-faint); padding-top: 16px; margin-top: 4px; }

/* Zone tiles: the thing an operator picks before paging, so selection reads at a glance. */
.zone-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 0; }
.zone-card {
  padding: 16px; background: var(--tc-canvas); border: 1px solid var(--tc-border-faint);
  border-radius: var(--tc-r-md); box-shadow: none;
}
.zone-card:hover { border-color: var(--tc-brand); background: var(--tc-canvas); }
.zone-card.selected { background: var(--tc-brand-soft); border-color: var(--tc-brand); box-shadow: none; }
.zone-card-head { justify-content: flex-start; gap: 12px; margin-bottom: 12px; }
.zone-ic {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--tc-r-md);
  background: var(--tc-brand-soft); color: var(--tc-brand);
}
.zone-card.selected .zone-ic { background: var(--tc-brand); color: #fff; }
.zone-card.streaming .zone-ic { background: var(--tc-up-soft); color: var(--tc-up); }
.zone-name { flex: 1; min-width: 0; color: var(--tc-ink); font: 600 15px/1.3 var(--tc-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-check {
  display: none; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--tc-brand); color: #fff; font-size: 12px; font-weight: 700;
}
.zone-card.selected .zone-check { display: grid; }
.zone-meta { justify-content: space-between; color: var(--tc-ink-3); }

/* Zone setup rows inside the modal: identity on the left, relay master and row actions on the right. */
dialog.zone-manager-dialog, dialog.schedule-dialog { max-width: none; padding: 28px; }
.zone-manager-dialog .zone-settings-list { gap: 0; margin-top: 4px; }
.zone-manager-dialog .zone-settings-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 14px 0; border: 0; border-bottom: 1px solid var(--tc-border-faint); border-radius: 0; background: none;
}
.zone-manager-dialog .zone-settings-row:last-child { border-bottom: 0; }
.zone-settings-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zone-settings-id .zone-ic { font: 700 13px/1 var(--tc-font); }
.zone-settings-id div { display: flex; flex-direction: column; gap: 2px; }
.zone-settings-id strong { color: var(--tc-ink); font-weight: 600; }
.zone-settings-id small { color: var(--tc-ink-3); }
.zone-manager-dialog .zone-settings-row > div:last-child { flex-wrap: wrap; }