/* Vec-TR app shell + dark-mode token overrides on top of VDS 2.0 */
html,body{height:100%;margin:0}
body{background:var(--vds-surface-page);color:var(--vds-text-primary);font-family:var(--vds-font-sans)}
*{box-sizing:border-box}

/* ── Dark mode: override the mid-layer semantic tokens the components consume.
   Brand + bold status fills are left untouched (they read fine on dark). ── */
html[data-theme="dark"]{
  --color-fill-surface-base-0: #1b1f26;
  --color-fill-surface-base-1: #20242c;
  --color-fill-surface-base-2: #262b34;
  --color-fill-surface-base-page: #14171c;
  --color-fill-surface-base-recessed: #2a3040;
  --color-fill-surface-base-recessed-2: #3a4256;
  --color-fill-surface-base-disabled: #262b34;

  --color-fill-container-neutral-0-default: #1b1f26;
  --color-fill-container-neutral-0-hover: #262b34;
  --color-fill-container-neutral-0-pressed: #2e3441;
  --color-fill-container-neutral-0-disabled: #262b34;
  --color-fill-container-neutral-1-default: #262b34;
  --color-fill-container-neutral-1-hover: #2e3441;
  --color-fill-container-neutral-1-pressed: #3a4256;
  --color-fill-container-neutral-1-disabled: #262b34;
  --color-fill-container-neutral-2-default: #2a3040;
  --color-fill-container-neutral-2-hover: #333a4a;
  --color-fill-container-neutral-2-pressed: #3a4256;
  --color-fill-container-neutral-2-disabled: #3a4256;
  --color-fill-container-neutral-3-default: #3a4256;
  --color-fill-container-neutral-3-hover: #333a4a;
  --color-fill-container-neutral-3-pressed: #4a5468;
  --color-fill-container-neutral-3-disabled: #262b34;
  --color-fill-container-no-fill-1-hover: rgba(255,255,255,.06);
  --color-fill-container-no-fill-1-pressed: rgba(255,255,255,.1);

  --color-on-fill-default-default: #eef1f5;
  --color-on-fill-default-subtle: #b3bac8;
  --color-on-fill-default-subtler: #8890a0;
  --color-on-fill-default-disabled: #7a8496;
  --color-on-fill-default-disabled-2: #4a5364;
  --color-on-fill-neutral-bold: #eef1f5;
  --color-on-fill-neutral-default: #b3bac8;
  --color-on-fill-neutral-subtle: #8890a0;

  --color-border-neutral-subtlest: #1e222a;
  --color-border-neutral-subtle: #2a3040;
  --color-border-neutral-default: #3d4456;
  --color-border-neutral-bold: #5b6478;

  --color-on-fill-link-default: #8bbeff;
  --color-on-fill-link-hover: #abd2ff;
  --color-on-fill-link-pressed: #d7e4ff;

  --color-fill-surface-red-subtle: rgba(239,61,55,.14);
  --color-on-fill-red-default: #ff8b85;
  --color-border-red-subtle: rgba(239,61,55,.35);
  --color-fill-surface-green-subtle: rgba(6,151,41,.16);
  --color-on-fill-green-default: #6bdc8e;
  --color-border-green-subtle: rgba(6,151,41,.35);
  --color-fill-surface-orange-subtle: rgba(210,98,0,.2);
  --color-on-fill-orange-default: #ffab6b;
  --color-border-orange-subtle: rgba(210,98,0,.4);
  --color-fill-surface-yellow-subtle: rgba(176,120,4,.22);
  --color-on-fill-yellow-default: #f0c55a;
  --color-border-yellow-subtle: rgba(176,120,4,.4);
  --color-fill-surface-blue-subtle: rgba(61,123,255,.16);
  --color-on-fill-blue-default: #8cb2ff;
  --color-border-blue-subtle: rgba(61,123,255,.35);
  --color-fill-surface-brand-subtle: rgba(0,147,129,.18);
  --color-on-fill-brand-default: #5ed6c4;
  --color-border-brand-subtle: rgba(0,147,129,.4);
  --color-fill-surface-neutral-subtle: #262b34;

  --vds-shadow-overlay: 0px 4px 32px rgba(0,0,0,.45);
}
html[data-theme="dark"] .vds-inputbox--disabled{background:#1e222a}

/* ── App shell ── */
.vtr-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--vds-space-200);padding:var(--vds-space-150) var(--vds-space-400);border-bottom:1px solid var(--vds-border-subtle);background:var(--vds-surface-card)}
.vtr-topbar__brand{display:flex;align-items:center;gap:var(--vds-space-100);font:var(--vds-weight-semibold) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);color:var(--vds-text-primary)}
.vtr-topbar__brand span{color:var(--vds-text-tertiary);font-weight:var(--vds-weight-regular)}
.vtr-logo{height:24px;width:auto;display:block}
.vtr-topbar__divider{color:var(--vds-border-bold)}
.vtr-page{max-width:880px;margin:0 auto;padding:var(--vds-space-400) var(--vds-space-300) var(--vds-space-1000)}
.vtr-title{font:var(--vds-weight-semibold) var(--vds-size-2xl)/var(--vds-line-2xl) var(--vds-font-sans);color:var(--vds-text-primary);margin:0}
.vtr-subtitle{font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);color:var(--vds-text-secondary);margin:var(--vds-space-50) 0 0}
.vtr-card{background:var(--vds-surface-card);border:1px solid var(--vds-border-subtle);border-radius:var(--vds-radius-lg);box-shadow:0 1px 3px rgba(0,0,0,.06);padding:var(--vds-space-300)}
.vtr-section + .vtr-section{margin-top:var(--vds-space-300)}
.vtr-section-title{font:var(--vds-weight-semibold) var(--vds-size-lg)/var(--vds-line-lg) var(--vds-font-sans);color:var(--vds-text-primary);margin:0 0 var(--vds-space-200)}
.vtr-field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--vds-space-200)}
@media (max-width:640px){.vtr-field-row{grid-template-columns:1fr}}

/* ── Screen 1 ── */
.vtr-customer-list{display:flex;flex-direction:column;max-height:360px;overflow-y:auto;border:1px solid var(--vds-border-subtle);border-radius:var(--vds-radius-md)}
.vtr-customer-row{display:flex;align-items:center;justify-content:space-between;gap:var(--vds-space-200);height:52px;flex-shrink:0;padding:0 var(--vds-space-200);border:0;border-bottom:1px solid var(--vds-border-subtlest);background:var(--vds-surface-card);cursor:pointer;text-align:left;width:100%;font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);color:var(--vds-text-primary);transition:background-color var(--vds-duration) var(--vds-ease)}
.vtr-customer-row:last-child{border-bottom:0}
.vtr-customer-row:hover{background:var(--color-fill-container-neutral-0-hover)}
.vtr-customer-row:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--vds-focus-ring)}
.vtr-tag-text{text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:600}
.vtr-skip-row{display:flex;align-items:center;justify-content:space-between;margin-top:var(--vds-space-200)}
.vtr-elapsed{font-variant-numeric:tabular-nums;color:var(--vds-text-secondary)}
.vtr-empty{padding:var(--vds-space-400) var(--vds-space-200);text-align:center;color:var(--vds-text-tertiary);font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans)}

/* ── Combo / dropdown ── */
.vtr-combo{position:relative}
.vtr-combo-panel{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;max-height:220px;overflow-y:auto}
.vtr-bms{position:relative;flex-shrink:0}
.vtr-bms__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--vds-space-100);width:180px;height:40px;padding:0 var(--vds-space-150);border-radius:var(--vds-radius-md);background:var(--vds-surface-card);border:1px solid var(--vds-border-default);color:var(--vds-text-primary);font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);cursor:pointer}
.vtr-bms__trigger:hover{border-color:var(--vds-border-bold)}
.vtr-bms-panel{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:180px}

/* ── Devices ── */
.vtr-device-row{display:flex;gap:var(--vds-space-200);align-items:flex-start}
.vtr-device-row > .vds-field{flex:1;min-width:0}
.vtr-device-controls{display:flex;gap:var(--vds-space-100);flex-shrink:0;align-self:flex-start}
.vtr-add-device-btn{margin-top:calc(var(--vds-line-md) + var(--vds-space-50))}
.vtr-device-table-wrap{margin-top:var(--vds-space-200)}
.vtr-device-table-wrap.vds-table-wrap{max-height:360px;overflow-y:auto}
.vtr-device-table-head{display:flex;align-items:center;justify-content:space-between;gap:var(--vds-space-200);padding:var(--vds-space-125) var(--vds-space-200);position:sticky;top:0;z-index:2;background:var(--vds-surface-card);border-bottom:1px solid var(--vds-border-subtle);font:var(--vds-weight-medium) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);color:var(--vds-text-secondary)}
.vtr-device-search{height:28px;padding:0 var(--vds-space-100);border-radius:var(--vds-radius-md);border:1px solid var(--vds-border-default);background:var(--vds-surface-card);color:var(--vds-text-primary);font:var(--vds-weight-regular) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);width:160px}
.vtr-device-search:focus{outline:0;border-color:var(--vds-focus-ring);box-shadow:inset 0 0 0 1px var(--vds-focus-ring)}

/* ── Options ── */
.vtr-options{display:flex;flex-direction:column;gap:var(--vds-space-150)}
.vtr-option-danger{display:flex;align-items:center;gap:var(--vds-space-100);padding:var(--vds-space-150);border-radius:var(--vds-radius-md);background:var(--color-fill-surface-red-subtle);border:1px solid var(--color-border-red-subtle)}
.vtr-option-danger .vds-choice{color:var(--vds-text-danger);font-weight:var(--vds-weight-medium)}
.vtr-option-danger .vds-choice__box--on{background:var(--color-fill-container-red-2-default);border-color:var(--color-fill-container-red-2-default)}

.vtr-actions{display:flex;gap:var(--vds-space-150);margin-top:var(--vds-space-300)}

/* ── Results ── */
.vtr-results{margin-top:var(--vds-space-400)}
.vtr-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--vds-space-200)}
.vtr-device-panel{border:1px solid var(--vds-border-subtle);border-radius:var(--vds-radius-lg);background:var(--vds-surface-card);overflow:hidden}
.vtr-device-panel + .vtr-device-panel{margin-top:var(--vds-space-150)}
.vtr-device-header{display:flex;align-items:center;justify-content:space-between;gap:var(--vds-space-200);width:100%;padding:var(--vds-space-200);border:0;background:transparent;cursor:pointer;text-align:left;font-family:var(--vds-font-sans)}
.vtr-device-header:hover{background:var(--color-fill-container-neutral-0-hover)}
.vtr-device-header__left{display:flex;align-items:center;gap:var(--vds-space-150);min-width:0}
.vtr-device-serial{font:var(--vds-weight-medium) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);color:var(--vds-text-primary)}
.vtr-device-bms{font:var(--vds-weight-regular) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans);color:var(--vds-text-tertiary)}
.vtr-device-chevron{display:flex;color:var(--vds-text-secondary);transition:transform var(--vds-duration) var(--vds-ease);flex-shrink:0}
.vtr-device-chevron--open{transform:rotate(180deg)}
.vtr-device-body{padding:0 var(--vds-space-200) var(--vds-space-200);border-top:1px solid var(--vds-border-subtlest)}
.vtr-step-row{border-bottom:1px solid var(--vds-border-subtlest)}
.vtr-step-row:last-child{border-bottom:0}
.vtr-step-header{display:flex;align-items:center;justify-content:space-between;gap:var(--vds-space-150);width:100%;padding:var(--vds-space-150) 0;border:0;background:transparent;cursor:pointer;text-align:left;font-family:var(--vds-font-sans)}
.vtr-step-name{display:flex;align-items:center;gap:var(--vds-space-100);font:var(--vds-weight-regular) var(--vds-size-md)/var(--vds-line-md) var(--vds-font-sans);color:var(--vds-text-primary)}
.vtr-step-detail{padding:0 0 var(--vds-space-200)}
.vtr-step-json{margin:0;padding:var(--vds-space-150);border-radius:var(--vds-radius-md);background:var(--vds-surface-recessed);color:var(--vds-text-secondary);font:400 12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto;white-space:pre}
.vtr-step-error{margin-top:var(--vds-space-100);color:var(--vds-text-danger);font:var(--vds-weight-medium) var(--vds-size-sm)/var(--vds-line-sm) var(--vds-font-sans)}
.vtr-pulse-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;animation:vtr-pulse 1.1s ease-in-out infinite}
@keyframes vtr-pulse{0%,100%{opacity:1}50%{opacity:.35}}

.vtr-context-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--vds-space-200);margin-bottom:var(--vds-space-150)}

/* ── Screen 0: login (from the Claude Design handoff) ──────────────────
   Note: the handoff's own theme.css targeted `.vds-inline-flag`, which
   doesn't exist in this design system's actual CSS (confirmed against the
   real exported feedback.css) -- the real class is `.vds-flag`, used here
   instead so the long "no credentials configured for ..." error text
   actually wraps instead of overflowing. */
.vtr-login-card{max-width:480px;margin:var(--vds-space-300) auto 0}
.vtr-login-form{display:flex;flex-direction:column;gap:var(--vds-space-200)}
.vtr-login-status{margin-top:var(--vds-space-200)}
.vtr-login-status .vds-flag,.vtr-login-status .vds-flag__title{white-space:normal;word-break:break-word}
@media (max-width:480px){.vtr-login-page{padding-left:var(--vds-space-200);padding-right:var(--vds-space-200)}.vtr-login-card{max-width:100%}}

/* ── Mobile (onboarding devices without a laptop) ──────────────────────
   Everything above already keeps a side gutter via .vtr-page's own
   padding and never sets a min-width wider than the screen, so this block
   only needs to (a) stack rows that assume desktop-width side-by-side
   space, (b) trim padding that's generous on desktop but eats too much of
   a ~375-400px screen, and (c) size tap targets for fingers, not a
   mouse cursor. */
@media (max-width: 640px) {
  .vtr-topbar{padding:var(--vds-space-150) var(--vds-space-200)}
  .vtr-topbar__brand{font-size:var(--vds-size-sm)}
  .vtr-topbar__brand span{display:none} /* "Device Onboarding" -- the logo + "Vec-TR" alone is enough on a phone-width bar */
  .vtr-page{padding:var(--vds-space-300) var(--vds-space-200) var(--vds-space-800)}
  .vtr-title{font-size:var(--vds-size-xl);line-height:var(--vds-line-xl)}

  /* Add-device row: textarea, BMS dropdown and Add button no longer fit
     side by side -- stack them, and let the dropdown/button each take
     equal width on their own row instead of a fixed 180px trigger. */
  .vtr-device-row{flex-direction:column;align-items:stretch}
  .vtr-device-controls{width:100%;align-items:stretch}
  .vtr-device-controls .vds-field{flex:1;min-width:0}
  .vtr-bms{width:100%}
  .vtr-bms__trigger{width:100%}
  .vtr-bms-panel{left:0;right:0;min-width:0}
  .vtr-add-device-btn{margin-top:0;flex-shrink:0;white-space:nowrap}

  /* Device queue table header: label + search + collapse link no longer
     fit on one line at phone width. */
  .vtr-device-table-head{flex-wrap:wrap;row-gap:var(--vds-space-100)}
  .vtr-device-search{width:100%;order:3}
  .vtr-device-table-head #device-count-label{flex:1 0 100%}

  /* Start/Clear -- full-width, stacked, comfortable tap targets instead of
     two cramped buttons sharing a row. */
  .vtr-actions{flex-direction:column}
  .vtr-actions .vds-btn{width:100%}

  /* A long org name shouldn't push its type badge off-screen or wrap onto
     a second line mid-word. */
  .vtr-customer-row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .vtr-customer-row{gap:var(--vds-space-100)}

  /* Combo suggestion panels and the BMS menu can otherwise run past the
     bottom of a short phone viewport. */
  .vtr-combo-panel{max-height:45vh}
  .vtr-bms-panel{max-height:45vh;overflow-y:auto}

  .vds-modal__footer{flex-wrap:wrap}
  .vds-modal__footer .vds-btn{flex:1;min-width:120px}
}