/* ===========================================================================
   UEV Design System — ported verbatim from the Flutter driver app
   ---------------------------------------------------------------------------
   Source of truth: EVCS_Driver_Mobile
     lib/core/theme/app_colors.dart      (AppColorPalette, 30 tokens x 2 modes)
     lib/core/theme/app_typography.dart  (Inter, 15-step scale)
     lib/core/theme/app_spacing.dart     (AppSpacing, AppRadius)
     lib/core/theme/app_theme.dart       (component themes)

   Every value below is transcribed, not approximated. If a number here and a
   number in those files disagree, the Flutter file wins — fix this file.

   LOAD ORDER MATTERS. This must be imported AFTER style.scss in styles.scss.
   The second half of this file deliberately re-declares the existing .hv2-*
   classes so the in-progress redesign snaps onto the real tokens without
   every template having to be rewritten first. Those overrides only work if
   they cascade last.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Brand — theme-independent constants (AppColors.brandPrimary etc.) */
  --uev-brand-primary: #0757A6;
  --uev-brand-primary-dark: #4A9FE0;
  --uev-brand-secondary: #008F7A;

  /* AppColors.brandGradient with brandGradientStops [0.0, 0.58, 1.0].
     Flutter's topLeft -> bottomRight is exactly 135deg in CSS. Always keep
     the 58% stop: without it the teal midpoint drifts and the banner reads
     as a plain blue-green fade instead of the approved three-stop ramp. */
  --uev-brand-gradient: linear-gradient(135deg, #0757A6 0%, #008F7A 58%, #78BE44 100%);

  /* AppColorPalette.light */
  --uev-background: #F5F7FA;
  --uev-surface: #FFFFFF;
  --uev-surface-elevated: #FFFFFF;
  --uev-card: #FFFFFF;
  --uev-primary: #0757A6;
  --uev-on-primary: #FFFFFF;
  --uev-text-primary: #172034;
  --uev-text-secondary: #5B6472;
  --uev-text-tertiary: #9AA3AF;
  --uev-border: #E3E7ED;
  --uev-divider: #E9ECF1;
  --uev-disabled: #C7CCD4;
  --uev-disabled-bg: #EFF1F4;
  --uev-overlay: rgba(0, 0, 0, 0.08);
  --uev-shadow: rgba(0, 0, 0, 0.12);

  --uev-success: #1F9D55;
  --uev-success-bg: #E7F9EC;
  --uev-warning: #B4790C;
  --uev-warning-bg: #FAEBD4;
  --uev-error: #C0362C;
  --uev-error-bg: #FDECEA;
  --uev-info: #1B4B8A;
  --uev-info-bg: #EAF4FF;

  --uev-status-available: #1F9D55;
  --uev-status-available-bg: #E7F9EC;
  --uev-status-in-use: #1B4B8A;
  --uev-status-in-use-bg: #EAF4FF;
  --uev-status-reserved: #B4790C;
  --uev-status-reserved-bg: #FAEBD4;
  --uev-status-offline: #5B6472;
  --uev-status-offline-bg: #E9ECF1;

  /* AppSpacing */
  --uev-space-xxs: 4px;
  --uev-space-xs: 8px;
  --uev-space-sm: 12px;
  --uev-space-md: 16px;
  --uev-space-lg: 20px;
  --uev-space-xl: 24px;
  --uev-space-xxl: 32px;
  --uev-space-xxxl: 40px;

  /* AppRadius */
  --uev-radius-sm: 8px;
  --uev-radius-md: 12px;
  --uev-radius-lg: 16px;
  --uev-radius-xl: 24px;
  --uev-radius-pill: 999px;

  /* The only four shadows in the migrated Flutter code. There is no
     elevation scale — AppBar and ElevatedButton are both elevation 0, so
     the design is flat-plus-explicit-shadow. Do not invent a fifth. */
  --uev-shadow-card: 0 2px 8px var(--uev-shadow);
  --uev-shadow-tile: 0 4px 12px var(--uev-shadow);
  --uev-shadow-nav: 0 4px 16px var(--uev-shadow);
  --uev-shadow-fab: 0 6px 18px var(--uev-shadow);

  /* Typography. Inter is fetched via google_fonts on mobile; on web it must
     be linked in index.html. The fallback stack matches Tailwind's font-sans,
     which is what the Lovable prototype these screens came from rendered. */
  --uev-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Phone canvas width. The Flutter screens are laid out for a ~390-430pt
     phone and the web app is opened almost exclusively from a QR code on a
     handset, so desktop centres that canvas rather than reflowing it. */
  --uev-canvas: 430px;
  --uev-gutter: 16px;      /* AppSpacing.md — standard screen gutter */
  --uev-gutter-auth: 24px; /* AppSpacing.xl — wider gutter on auth screens */
}

/* Light only. The mobile app runs ThemeMode.system and these screens used to
   follow the device setting; the web flow is pinned light by product
   decision, so there is one palette above and no theme switching anywhere. */

/* ------------------------------------------------------------ typography */

/* The 15-step scale from AppTypography.buildTextTheme. `height` in Flutter is
   a multiplier, so it transcribes straight to a unitless line-height. No
   style in the scale sets letterSpacing — all inherit 0 (`normal`). */
.uev-display-lg  { font: 700 34px/1.2 var(--uev-font);  color: var(--uev-text-primary); }
.uev-display-md  { font: 700 30px/1.2 var(--uev-font);  color: var(--uev-text-primary); }
.uev-display-sm  { font: 700 26px/1.2 var(--uev-font);  color: var(--uev-text-primary); }
.uev-headline-lg { font: 700 24px/1.25 var(--uev-font); color: var(--uev-text-primary); }
.uev-headline-md { font: 700 22px/1.25 var(--uev-font); color: var(--uev-text-primary); }
.uev-headline-sm { font: 700 20px/1.3 var(--uev-font);  color: var(--uev-text-primary); }
.uev-title-lg    { font: 600 18px/1.3 var(--uev-font);  color: var(--uev-text-primary); }
.uev-title-md    { font: 600 16px/1.35 var(--uev-font); color: var(--uev-text-primary); }
.uev-title-sm    { font: 600 14px/1.35 var(--uev-font); color: var(--uev-text-primary); }
.uev-body-lg     { font: 400 16px/1.45 var(--uev-font); color: var(--uev-text-primary); }
.uev-body-md     { font: 400 14px/1.45 var(--uev-font); color: var(--uev-text-primary); }
.uev-body-sm     { font: 400 12px/1.4 var(--uev-font);  color: var(--uev-text-secondary); }
.uev-label-lg    { font: 600 16px/1.2 var(--uev-font);  color: var(--uev-text-primary); }
.uev-label-md    { font: 500 14px/1.2 var(--uev-font);  color: var(--uev-text-primary); }
.uev-label-sm    { font: 500 12px/1.2 var(--uev-font);  color: var(--uev-text-secondary); }

/* Eyebrow / section label — one of only four places the Flutter code sets
   letter-spacing (dashboard "GOOD DAY", profile section labels). */
.uev-eyebrow {
  font: 700 11px/1.2 var(--uev-font);
  letter-spacing: 0.5px;
  color: var(--uev-text-tertiary);
  text-transform: uppercase;
}
.uev-section-label {
  font: 700 12px/1.2 var(--uev-font);
  letter-spacing: 0.6px;
  color: var(--uev-text-secondary);
  text-transform: uppercase;
  padding: 20px 8px 8px 8px;
}

/* ----------------------------------------------------------------- shell */

/* Mobile-width canvas, centred on desktop. The page background sits behind
   the canvas so a wide window reads as a framed phone rather than a stretched
   layout with 900px line lengths the mobile design never accounted for. */
.uev-shell {
  font-family: var(--uev-font);
  background: var(--uev-background);
  color: var(--uev-text-primary);
  min-height: 100vh;
  width: 100%;
  max-width: var(--uev-canvas);
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

/* Top app bar — back, centred title, favourite, overflow. Mobile's AppBar is
   left-aligned (centerTitle: false) app-wide, but this screen is one of the
   places it centres the charger name, per the reference screenshots. */
.uev-topbar {
  display: grid;
  grid-template-columns: 40px 1fr 40px 40px;
  align-items: center;
  gap: 4px;
  padding: var(--uev-space-xs) var(--uev-space-xs);
  background: var(--uev-background);
}
.uev-topbar-title {
  margin: 0;
  text-align: center;
  font: 700 19px/1.3 var(--uev-font);
  color: var(--uev-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uev-topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  color: var(--uev-text-primary);
  cursor: pointer;
}

/* style.scss styles headings as `#content h4 { ... }` — an id selector, which
   outranks any component class (Angular's scoping attribute only takes a class
   rule to 0,2,0 against the id's 1,0,1). Headings inside the shell were
   therefore rendering in the legacy dark colour and centred, which is invisible
   on the dark canvas. Re-qualified with the same id so the shell wins.
   Everything in the app's screens is left-aligned except the app-bar title. */
#content .uev-shell h1,
#content .uev-shell h2,
#content .uev-shell h3,
#content .uev-shell h4,
#content .uev-shell p {
  color: var(--uev-text-primary);
  text-align: left;
  font-family: var(--uev-font);
}
#content .uev-shell .uev-topbar-title { text-align: center; }

/* Plain bar with a LEFT-aligned title — used on Starting Charge and Charging,
   where the app puts the title next to the back arrow rather than centring it
   the way the charger screen does. */
.uev-topbar--plain {
  grid-template-columns: 40px 1fr 40px;
  padding: var(--uev-space-xs) var(--uev-space-xs) var(--uev-space-md);
}
#content .uev-shell .uev-topbar--plain .uev-topbar-title {
  text-align: left;
  font-size: 22px;
  font-weight: 700;
}

/* Gradient app bar — used on Add Payment, where the bar is filled with the
   three-stop brand gradient and the title and back arrow sit on top in white.
   Distinct from the plain .uev-topbar used on the charger screen, which is
   transparent over the page background. */
.uev-topbar--gradient {
  background: var(--uev-brand-gradient);
  padding: var(--uev-space-sm) var(--uev-space-xs);
  grid-template-columns: 40px 1fr 40px;
}
.uev-topbar--gradient .uev-topbar-btn,
#content .uev-shell .uev-topbar--gradient .uev-topbar-title {
  color: #FFFFFF;
}
#content .uev-shell .uev-topbar--gradient .uev-topbar-title {
  font-size: 20px;
  font-weight: 700;
}
#content .uev-shell .uev-cd-preauth {
  text-align: center;
  color: var(--uev-primary);
}
#content .uev-shell .uev-cd-empty { color: var(--uev-error); }
#content .uev-shell .uev-cd-offline { color: var(--uev-status-offline); text-align: center; }
#content .uev-shell .uev-pay-section,
#content .uev-shell .uev-cd-section-title,
#content .uev-shell .uev-cd-panel-title {
  color: var(--uev-text-primary);
  text-align: left;
}

@media (min-width: 600px) {
  /* Only paint the surround once there is actually room for it — below this
     the canvas is the whole viewport and a border would just eat 2px. */
  .uev-shell {
    box-shadow: 0 0 0 1px var(--uev-border), var(--uev-shadow-nav);
    min-height: 100vh;
  }
}

.uev-screen {
  padding: 0 var(--uev-gutter);
}
.uev-screen--auth {
  padding: 0 var(--uev-gutter-auth);
}

/* Scroll views in the Flutter app reserve 120px so content clears the
   floating bottom nav. Same reservation here. */
.uev-screen--has-nav {
  padding-bottom: 120px;
}

/* ------------------------------------------------------------- buttons */

/* elevatedButtonTheme: 52px min height (Size.fromHeight forces full width
   too), radius 12, elevation 0, labelLarge = Inter 16/600/1.2. */
.uev-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--uev-space-md);
  border: none;
  border-radius: var(--uev-radius-md);
  font: 600 16px/1.2 var(--uev-font);
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  transition: background-color 120ms ease, opacity 120ms ease;
}

.uev-btn--primary {
  background: var(--uev-primary);
  color: var(--uev-on-primary);
}
.uev-btn--primary:hover:not(:disabled) { opacity: 0.92; }

/* outlinedButtonTheme: foreground primary, but the 1px side uses the NEUTRAL
   border token, not primary. Easy to get wrong from a screenshot. */
.uev-btn--outline {
  background: transparent;
  color: var(--uev-primary);
  border: 1px solid var(--uev-border);
}

.uev-btn--text {
  background: transparent;
  color: var(--uev-primary);
  min-height: 0;
  width: auto;
  padding: 0;
}

.uev-btn--gradient {
  background: var(--uev-brand-gradient);
  color: #FFFFFF;
}

/* Disabled uses its own fill/foreground pair rather than opacity — matching
   Flutter, where disabledBg and disabled are distinct palette tokens. */
.uev-btn:disabled,
.uev-btn--primary:disabled,
.uev-btn--gradient:disabled {
  background: var(--uev-disabled-bg);
  color: var(--uev-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* --------------------------------------------------------------- inputs */

/* inputDecorationTheme: filled with `surface`, 16/12 content padding,
   radius 12, 1px border, 1.5px on focus. The focus width change is the
   single most visible difference from Bootstrap's default input. */
/* Element-qualified on purpose. common.scss carries a legacy reset —
   `input[type="text"], input[type="email"], input[type="password"] { border: none }`
   — whose specificity (0,1,1) beats a bare class (0,1,0), so `.uev-input` alone
   silently lost its border on exactly those three types while `type="tel"`,
   which the reset never listed, kept one. Matching that specificity and loading
   later is what makes these fields render consistently. */
.uev-input,
input.uev-input,
select.uev-input,
textarea.uev-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--uev-surface);
  color: var(--uev-text-primary);
  border: 1px solid var(--uev-border);
  border-radius: var(--uev-radius-md);
  padding: 12px var(--uev-space-md);
  font: 400 14px/1.45 var(--uev-font);
  outline: none;
  transition: border-color 120ms ease;
}
.uev-input::placeholder,
input.uev-input::placeholder,
textarea.uev-input::placeholder {
  color: var(--uev-text-tertiary);
}
.uev-input:focus,
input.uev-input:focus,
select.uev-input:focus,
textarea.uev-input:focus {
  /* Mobile thickens the focused border to 1.5px. Done with an inset shadow
     rather than a border-width change so the content box never resizes —
     growing the border shifts every character half a pixel on focus. */
  border-color: var(--uev-primary);
  box-shadow: inset 0 0 0 0.5px var(--uev-primary);
}
.uev-input.is-invalid,
input.uev-input.is-invalid,
select.uev-input.is-invalid,
.uev-input[aria-invalid='true'] {
  border-color: var(--uev-error);
}
.uev-input.is-invalid:focus,
input.uev-input.is-invalid:focus {
  border-color: var(--uev-error);
  box-shadow: inset 0 0 0 0.5px var(--uev-error);
}
.uev-input:disabled,
input.uev-input:disabled,
select.uev-input:disabled {
  border-color: var(--uev-disabled);
  background: var(--uev-disabled-bg);
  color: var(--uev-disabled);
}

/* AppTextField renders its label ABOVE the field, labelMedium with a 6px gap
   — not a floating Material label. */
.uev-field { margin-bottom: var(--uev-space-md); }
.uev-field > label {
  display: block;
  font: 500 14px/1.2 var(--uev-font);
  color: var(--uev-text-primary);
  margin-bottom: 6px;
}
.uev-field-error {
  display: block;
  margin-top: 6px;
  font: 400 12px/1.4 var(--uev-font);
  color: var(--uev-error);
}

/* ---------------------------------------------------------------- cards */

/* There is no cardTheme in Flutter — cards are hand-built Containers, and
   this is the recipe they all follow. 14px padding is AppSpacing.sm + 2,
   an off-scale value used deliberately on list-row cards. */
.uev-card {
  background: var(--uev-surface);
  border: 1px solid var(--uev-border);
  border-radius: var(--uev-radius-lg);
  box-shadow: var(--uev-shadow-card);
  padding: 14px;
  box-sizing: border-box;
  margin-bottom: var(--uev-space-md);
}

.uev-tile {
  background: var(--uev-surface);
  border-radius: var(--uev-radius-lg);
  box-shadow: var(--uev-shadow-tile);
  padding: var(--uev-space-md);
  min-height: 160px;
  box-sizing: border-box;
}
.uev-tile--gradient {
  background: var(--uev-brand-gradient);
  border: none;
  color: #FFFFFF;
}

/* --------------------------------------------------------------- badges */

/* AppStatusBadge: 3px/8px padding, pill radius, 11.5px 600 label, 12px icon
   with a 4px gap. The half-pixel font size is intentional. */
.uev-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--uev-radius-pill);
  font: 600 11.5px/1.2 var(--uev-font);
  white-space: nowrap;
}
.uev-badge i, .uev-badge svg { font-size: 12px; width: 12px; height: 12px; }

.uev-badge--available { background: var(--uev-status-available-bg); color: var(--uev-status-available); }
.uev-badge--in-use    { background: var(--uev-status-in-use-bg);    color: var(--uev-status-in-use); }
.uev-badge--reserved  { background: var(--uev-status-reserved-bg);  color: var(--uev-status-reserved); }
.uev-badge--offline   { background: var(--uev-status-offline-bg);   color: var(--uev-status-offline); }

/* --------------------------------------------------- icon circle / misc */

/* AppIconCircle: background is the icon colour at 10%, icon is half the
   circle's size. Default 40px -> 20px glyph. */
.uev-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(7, 87, 166, 0.10);
  color: var(--uev-primary);
  font-size: 20px;
  flex: 0 0 auto;
}
.uev-icon-circle--lg { width: 44px; height: 44px; font-size: 22px; }
.uev-icon-circle--gradient { background: var(--uev-brand-gradient); color: #FFFFFF; }

/* Info / auth-reason callout: full width, 16px padding, infoBg, radius 12,
   bodyMedium in `info`. Deliberately borderless. */
.uev-callout {
  background: var(--uev-info-bg);
  color: var(--uev-info);
  border-radius: var(--uev-radius-md);
  padding: var(--uev-space-md);
  font: 400 14px/1.45 var(--uev-font);
}

/* Divider — 1px, `divider` token, no surrounding space (Flutter space: 1). */
.uev-divider {
  height: 1px;
  background: var(--uev-divider);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------- empty states */

/* AppEmptyState: 32px side padding, 40px icon in a circle padded 20px all
   round, then 20 / 8 / 24px vertical rhythm. */
.uev-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--uev-space-xxl);
}
.uev-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 50%;
  background: rgba(7, 87, 166, 0.08);
  color: rgba(23, 32, 52, 0.45);
  font-size: 40px;
}
.uev-empty--error .uev-empty-icon {
  background: rgba(192, 54, 44, 0.10);
  color: var(--uev-error);
}
.uev-empty-title   { margin: 20px 0 0 0; font: 600 16px/1.35 var(--uev-font); color: var(--uev-text-primary); }
.uev-empty-message { margin: 8px 0 0 0;  font: 400 14px/1.45 var(--uev-font); color: rgba(23, 32, 52, 0.60); }
.uev-empty .uev-btn { margin-top: 24px; }

/* --------------------------------------------------- sheets and dialogs */

/* bottomSheetTheme: TOP corners only, radius 24. The drag handle is a fixed
   40x4 pill at 20% onSurface with 10px above and 8px below. */
.uev-sheet {
  background: var(--uev-surface);
  border-radius: var(--uev-radius-xl) var(--uev-radius-xl) 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.uev-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: var(--uev-radius-pill);
  background: rgba(23, 32, 52, 0.20);
  margin: 10px auto 8px auto;
}

/* AppDialog uses stock Material 3 AlertDialog with no shape override, so it
   inherits M3's 28px radius — deliberately larger than any AppRadius token. */
.uev-dialog {
  background: var(--uev-surface);
  border-radius: 28px;
  padding: var(--uev-space-xl);
  max-width: 320px;
}

/* --------------------------------------------------------- app bar/nav */

/* AppBar: background is `background` (NOT surface), elevation 0, title is
   titleLarge and LEFT aligned (centerTitle: false). */
.uev-appbar {
  display: flex;
  align-items: center;
  gap: var(--uev-space-sm);
  background: var(--uev-background);
  color: var(--uev-text-primary);
  min-height: 56px;
  padding: 0 var(--uev-gutter);
  box-shadow: none;
}
.uev-appbar-title {
  font: 600 18px/1.3 var(--uev-font);
  color: var(--uev-text-primary);
  margin: 0;
}

/* ===========================================================================
   hv2-* alignment layer
   ---------------------------------------------------------------------------
   The web app already had a redesign in flight using .hv2-* classes with
   hand-picked values that drifted from the Flutter tokens — #0B1F3A vs the
   real #172034 for headings, #6B7280 vs #5B6472 for secondary text, 30px
   button radius vs 12px, #E7E9EE borders vs #E3E7ED, and an icon circle in
   #EAF1FB/#1951A1 that exists nowhere in the palette.
   Re-pointing those classes at the tokens fixes every screen already using
   them without touching a single template. New markup should use .uev-*.
   =========================================================================== */

.hv2-title {
  color: var(--uev-text-primary);
  font-family: var(--uev-font);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
}
.hv2-subtitle {
  color: var(--uev-text-secondary);
  font-family: var(--uev-font);
  font-size: 15px;
}

.hv2-btn {
  min-height: 52px;
  padding: 0 var(--uev-space-md);
  border-radius: var(--uev-radius-md);
  font-family: var(--uev-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  justify-content: center;
  text-align: center;
  gap: 10px;
}
.hv2-btn--primary  { background: var(--uev-primary); color: var(--uev-on-primary); }
.hv2-btn--outline  { background: transparent; color: var(--uev-primary); border: 1px solid var(--uev-border); }
.hv2-btn--gradient { background: var(--uev-brand-gradient); color: #FFFFFF; }
.hv2-btn:disabled,
.hv2-btn--gradient:disabled {
  background: var(--uev-disabled-bg);
  color: var(--uev-disabled);
  opacity: 1;
}

.hv2-icon-circle {
  background: rgba(7, 87, 166, 0.10);
  color: var(--uev-primary);
}

.hv2-info-label { color: var(--uev-text-secondary); font-family: var(--uev-font); font-size: 13px; }
.hv2-info-value { color: var(--uev-text-primary);   font-family: var(--uev-font); font-weight: 700; font-size: 18px; }

#content h4.hv2-section-title {
  color: var(--uev-text-primary);
  font-family: var(--uev-font);
  font-weight: 700;
  font-size: 16px;
}

.hv2-row {
  border: 1px solid var(--uev-border);
  border-radius: var(--uev-radius-md);
  background: var(--uev-surface);
}
.hv2-row:has(input:checked) {
  border-color: var(--uev-primary);
}
.hv2-row.hv2-row--disabled {
  background: var(--uev-disabled-bg);
  color: var(--uev-disabled);
}

.hv2-connector-card {
  border-radius: var(--uev-radius-lg);
  background: var(--uev-surface);
}
.hv2-connector-list--multi .hv2-connector-card--bordered {
  border: 1px solid var(--uev-border);
}
.hv2-connector-list--multi .hv2-connector-card--bordered.hv2-connector-card--selected {
  border-color: var(--uev-primary);
}
.hv2-connector-card--disabled {
  background: var(--uev-disabled-bg);
  color: var(--uev-disabled);
}

.hv2-address  { color: var(--uev-text-secondary); font-family: var(--uev-font); }
.hv2-chevron  { color: var(--uev-text-tertiary); }

/* ---------------------------------------------------- charging screens */

/* startcharging / stopcharging keep their own markup — the countdown ring and
   the live meter carry real logic — but their surfaces, type and colour are
   pulled onto the tokens here so they read as the same app as the charger and
   payment screens. */

.uev-charge {
  padding-top: var(--uev-space-md);
  padding-bottom: var(--uev-space-xxl);

  .container { padding: 0; width: auto; max-width: none; }

  /* The legacy .white-bg + .hv2-card pairing produced a flat panel; mobile's
     cards are 16px radius with a hairline border and a soft shadow. */
  .white-bg.hv2-card {
    background: var(--uev-surface);
    border: 1px solid var(--uev-border);
    border-radius: var(--uev-radius-lg);
    box-shadow: var(--uev-shadow-card);
    padding: var(--uev-space-md);
    margin-bottom: var(--uev-space-md);
  }

  /* The summary strip was built as a wrapping flex row for a ~1100px page. In
     the 430px canvas it wrapped mid-row and stranded a vertical divider on its
     own line. Fixed columns instead: icon, then the stats sharing the rest
     evenly — the same shape as the charger screen's hero stat row. */
  .hv2-info-card {
    display: grid;
    /* Two rows: the charge point identifier gets the full width on top (it is
       long and must never break mid-word), then the numbers share the row
       beneath it. Four columns of equal width forced "TESTCHARGER01 / 1" to
       hyphenate into "TESTCHAR GER01", which reads like a different charger. */
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--uev-space-xs) var(--uev-space-sm);
    flex-wrap: nowrap;
  }
  /* Hidden rather than restyled: a vertical rule between grid cells that wrap
     onto two rows ends up floating on its own. */
  .hv2-info-divider { display: none; }

  .hv2-info-icon { grid-row: 1 / span 2; }
  /* nth-of-type(2) is the charge-point column — the dividers between the stats
     are display:none, so they create no grid items. */
  .hv2-info-card > div:nth-of-type(2) { grid-column: 2 / -1; }

  .hv2-info-col { text-align: left; min-width: 0; }
  .hv2-info-value {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.hv2-state-heading {
  font-family: var(--uev-font);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  text-align: center;
}
.hv2-state-heading--danger  { color: var(--uev-error); }
.hv2-state-heading--success { color: var(--uev-success); }

.hv2-state-subtext {
  font: 400 14px/1.45 var(--uev-font);
  color: var(--uev-text-secondary);
  text-align: center;
}

.hv2-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: 0 auto var(--uev-space-md) auto;
  border-radius: 50%;
}
/* 10% tints, the same ratio AppEmptyState uses for its icon medallion. */
.hv2-state-icon--danger  { background: rgba(192, 54, 44, 0.10); color: var(--uev-error); }
.hv2-state-icon--success { background: rgba(31, 157, 85, 0.10); color: var(--uev-success); }

.hv2-ring-number {
  font-family: var(--uev-font);
  font-weight: 700;
}
.hv2-ring-number--danger { color: var(--uev-error); }
.hv2-ring-unit {
  font: 400 12px/1.2 var(--uev-font);
  color: var(--uev-text-secondary);
}
.hv2-ring-track { stroke: var(--uev-divider); }
.hv2-ring-progress--danger { stroke: var(--uev-error); }

/* Caution strip — mobile's warning callout: warningBg, 12px radius, no border. */
.hv2-caution {
  background: var(--uev-warning-bg);
  border: none;
  border-radius: var(--uev-radius-md);
  padding: var(--uev-space-sm) var(--uev-space-md);
}
.hv2-caution-text {
  font: 500 12.5px/1.4 var(--uev-font);
  color: var(--uev-warning);
}
.hv2-caution-link {
  font: 600 12.5px/1.4 var(--uev-font);
  color: var(--uev-primary);
}

/* Live meter stats — label above value, value in brand blue, matching the
   hero card's stat row on the charger screen. */
.hv2-stat-label {
  font: 500 11.5px/1.2 var(--uev-font);
  color: var(--uev-text-secondary);
}
.hv2-stat-value {
  font: 700 18px/1.25 var(--uev-font);
  color: var(--uev-text-primary);
}
.hv2-stat-icon { color: var(--uev-primary); }

.hv2-detail-row {
  font: 400 14px/1.45 var(--uev-font);
  color: var(--uev-text-secondary);
  border-bottom: 1px solid var(--uev-divider);

  strong { color: var(--uev-text-primary); font-weight: 600; }
}
.hv2-detail-value--success { color: var(--uev-success) !important; }

.hv2-inner-title {
  font: 600 16px/1.35 var(--uev-font);
  color: var(--uev-text-primary);
}
.hv2-inner-sub {
  font: 400 13px/1.4 var(--uev-font);
  color: var(--uev-text-secondary);
}

.hv2-pill {
  background: var(--uev-info-bg);
  color: var(--uev-info);
  border-radius: var(--uev-radius-pill);
  padding: 4px 12px;
  font: 600 12.5px/1.2 var(--uev-font);
}