/* phones.techvision365.ca — 2035 interaction layer for the phones portal (/opt/uc/portal/public), presentation only.
   Same engine (ui2035.js), same scoping: every rule is under html[data-ui-version="2035"]; remove the attribute
   and the portal is its legacy self. Selectors are the phones portal's own (styles.css, qa-fixes.css, billing.css).
   The alias tokens on html map phones names (--accent, --bg-card, --border …) onto the names the shared toggle and
   overlays use; the phones stylesheets define none of those names, so nothing legacy changes. */

@property --ui-sweep { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --ui-halo  { syntax: '<number>'; inherits: false; initial-value: 0; }

html {
  --card: var(--bg-card); --line: var(--border); --ink: var(--text-primary); --ink-3: var(--text-muted);
  --blue: var(--accent); --off-bg: var(--bg-hover); --shadow-l: var(--shadow); --input-bg: var(--bg-primary);
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
html[data-ui-version="2035"] {
  --ui-ease-sink: cubic-bezier(.16, 1, .3, 1);
  --ui-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ui-ease-roll: cubic-bezier(.76, 0, .24, 1);
  --ui-ease-momentum: cubic-bezier(.22, 1, .36, 1);
  --ui-lift-shadow: 0 22px 44px -14px rgba(0, 0, 0, .55), 0 4px 12px -4px rgba(0, 0, 0, .3);
}

/* ================================================ 1. buttons: sink & spring ============================================= */
html[data-ui-version="2035"] .btn,
html[data-ui-version="2035"] .ea-btn,
html[data-ui-version="2035"] .nav-link,
html[data-ui-version="2035"] .nav-group-header,
html[data-ui-version="2035"] .nav-subgroup-header,
html[data-ui-version="2035"] .tk-mi,
html[data-ui-version="2035"] .kpi-card {
  -webkit-tap-highlight-color: transparent;
  transition: transform 420ms var(--ui-ease-spring), background-color .15s, border-color .15s, color .15s, box-shadow .2s, filter .15s;
}
html[data-ui-version="2035"] .btn, html[data-ui-version="2035"] .ea-btn, html[data-ui-version="2035"] .nav-link,
html[data-ui-version="2035"] .nav-group-header, html[data-ui-version="2035"] .tk-mi { position: relative; }
html[data-ui-version="2035"] .btn::after,
html[data-ui-version="2035"] .ea-btn::after,
html[data-ui-version="2035"] .nav-link::after,
html[data-ui-version="2035"] .nav-group-header::after,
html[data-ui-version="2035"] .tk-mi::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(0, 0, 0, .12);
  transition: opacity 140ms var(--ui-ease-sink);
}
html[data-ui-version="2035"] .btn:active:not(:disabled),
html[data-ui-version="2035"] .ea-btn:active:not(:disabled),
html[data-ui-version="2035"] .nav-link:active,
html[data-ui-version="2035"] .nav-group-header:active,
html[data-ui-version="2035"] .nav-subgroup-header:active,
html[data-ui-version="2035"] .tk-mi:active {
  transform: scale3d(.94, .94, 1);
  transition-duration: 90ms; transition-timing-function: var(--ui-ease-sink);
}
html[data-ui-version="2035"] .kpi-card:active { transform: scale3d(.97, .97, 1); transition-duration: 90ms; transition-timing-function: var(--ui-ease-sink); }
html[data-ui-version="2035"] .btn:active:not(:disabled)::after,
html[data-ui-version="2035"] .ea-btn:active:not(:disabled)::after,
html[data-ui-version="2035"] .nav-link:active::after,
html[data-ui-version="2035"] .nav-group-header:active::after,
html[data-ui-version="2035"] .tk-mi:active::after { opacity: 1; }
@keyframes ui-spring {
  0%   { transform: scale3d(.94, .94, 1); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  45%  { transform: scale3d(1.02, 1.02, 1); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  100% { transform: none; }
}
html[data-ui-version="2035"] [data-ui-spring] { animation: ui-spring 420ms both; }
html[data-ui-version="2035"] .btn-accent:hover:not(:disabled), html[data-ui-version="2035"] .btn-primary:hover:not(:disabled) { box-shadow: 0 8px 18px -10px var(--accent); }
html[data-ui-version="2035"] .btn-danger:hover:not(:disabled) { box-shadow: 0 8px 18px -10px var(--danger); }

/* ============================================= 2. navigation ============================================================ */
@keyframes ui-momentum {
  0%       { opacity: 0; transform: translate3d(0, 14px, 0) scale3d(.985, .985, 1); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  33.333%  { opacity: 1; transform: translate3d(0, 2.8px, 0) scale3d(.997, .997, 1); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  100%     { opacity: 1; transform: none; }
}
@keyframes ui-momentum-y {
  0%       { opacity: 0; transform: translate3d(0, -8px, 0); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  33.333%  { opacity: 1; transform: translate3d(0, -1.6px, 0); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  100%     { opacity: 1; transform: none; }
}
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
html[data-ui-version="2035"] .nav-chev { display: inline-block; transition: transform 380ms var(--ui-ease-spring); }
/* a group or sub-group opening (the portal toggles .open): the body arrives with the two-phase curve */
html[data-ui-version="2035"] .nav-group.open > .nav-group-body,
html[data-ui-version="2035"] .nav-subgroup.open > .nav-subgroup-body { animation: ui-momentum-y 450ms both; transform-origin: top left; }
html[data-ui-version="2035"] .nav-link { transition: transform 220ms var(--ui-ease-momentum), background-color .15s, color .15s, box-shadow .2s; }
html[data-ui-version="2035"] .nav-link:hover:not(.active) { transform: translate3d(3px, 0, 0); }
html[data-ui-version="2035"] .nav-link.active { box-shadow: inset 3px 0 0 var(--accent); }

/* ============================================== 3. panels, dialogs, drawers, toasts ===================================== */
html[data-ui-version="2035"] .modal-overlay, html[data-ui-version="2035"] .drawer-overlay { animation: ui-fade 300ms var(--ui-ease-momentum) both; }
html[data-ui-version="2035"] .modal-card { animation: ui-momentum 450ms both; transform-origin: 50% 60%; }
html[data-ui-version="2035"] .toast { animation: ui-momentum 450ms both; }
html[data-ui-version="2035"] .content-section.active > .panel,
html[data-ui-version="2035"] .content-section.active .kpi-card,
html[data-ui-version="2035"] .content-section.active .donut-card { animation: ui-momentum 450ms both; }
html[data-ui-version="2035"] .content-section.active > .panel:nth-child(2), html[data-ui-version="2035"] .content-section.active .kpi-card:nth-child(2), html[data-ui-version="2035"] .content-section.active .donut-card:nth-child(2) { animation-delay: 30ms; }
html[data-ui-version="2035"] .content-section.active > .panel:nth-child(3), html[data-ui-version="2035"] .content-section.active .kpi-card:nth-child(3), html[data-ui-version="2035"] .content-section.active .donut-card:nth-child(3) { animation-delay: 60ms; }
html[data-ui-version="2035"] .content-section.active > .panel:nth-child(4), html[data-ui-version="2035"] .content-section.active .kpi-card:nth-child(4), html[data-ui-version="2035"] .content-section.active .donut-card:nth-child(4) { animation-delay: 90ms; }
html[data-ui-version="2035"] .content-section.active > .panel:nth-child(n+5), html[data-ui-version="2035"] .content-section.active .kpi-card:nth-child(n+5), html[data-ui-version="2035"] .content-section.active .donut-card:nth-child(n+5) { animation-delay: 120ms; }
html[data-ui-version="2035"] .panel { transition: box-shadow .25s, border-color .15s; }

/* ============================================ 4. drag & drop: lift & displace ========================================== */
html[data-ui-version="2035"] [data-ui-lift] {
  transform: scale3d(1.05, 1.05, 1) !important;
  box-shadow: var(--ui-lift-shadow) !important;
  opacity: .92 !important; border-style: solid !important;
  position: relative; z-index: 3;
  transition: transform 220ms var(--ui-ease-momentum), box-shadow 220ms ease, opacity 150ms !important;
}
html[data-ui-version="2035"] .donut-card, html[data-ui-version="2035"] .device-chip, html[data-ui-version="2035"] .sequence-item,
html[data-ui-version="2035"] .policy-row, html[data-ui-version="2035"] .group-card, html[data-ui-version="2035"] .unassigned-pool {
  transition: transform 300ms var(--ui-ease-momentum), box-shadow .2s, border-color .15s, opacity .15s;
}
/* the widget under the pointer steps back to make room; the target group opens its arms */
html[data-ui-version="2035"] .donut-card.drag-over { outline: 0; transform: scale3d(.96, .96, 1); box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
html[data-ui-version="2035"] .group-card.drop-target-active, html[data-ui-version="2035"] .unassigned-pool.drop-target-active { outline: 0; transform: scale3d(1.015, 1.015, 1); box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
html[data-ui-version="2035"] [data-ui-flip] { transition: transform 300ms var(--ui-ease-momentum); }

/* ========================================== 5. textboxes: luminescent horizon =========================================== */
html[data-ui-version="2035"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
html[data-ui-version="2035"] select, html[data-ui-version="2035"] textarea { transition: border-color .15s, box-shadow .25s var(--ui-ease-momentum); }
@keyframes ui-horizon {
  0%   { --ui-sweep: 0; --ui-halo: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  70%  { --ui-sweep: 1; --ui-halo: .4; }
  100% { --ui-sweep: 1; --ui-halo: 1; }
}
html[data-ui-version="2035"][data-ui-prop] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus,
html[data-ui-version="2035"][data-ui-prop] select:focus,
html[data-ui-version="2035"][data-ui-prop] textarea:focus {
  outline: none;
  border-color: transparent;
  background:
    linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
    conic-gradient(from -90deg at var(--ui-x, 50%) var(--ui-y, 50%),
      var(--accent) 0turn,
      var(--accent) calc(var(--ui-sweep) * 1turn),
      color-mix(in srgb, var(--accent) 35%, transparent) calc(var(--ui-sweep) * 1turn + .02turn),
      transparent calc(var(--ui-sweep) * 1turn + .06turn),
      transparent 1turn) border-box;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) calc(var(--ui-halo) * 28%), transparent);
  animation: ui-horizon 700ms both;
}
.ui2035-ghost {
  position: fixed; z-index: 9998; pointer-events: none; white-space: pre;
  will-change: transform, opacity;
  animation: ui-drop 170ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ui-drop { from { opacity: .9; transform: translate3d(0, -4px, 0); } to { opacity: 0; transform: none; } }

/* ============================================= 6. numbers: kinetic roll ================================================ */
html[data-ui-version="2035"] [data-ui-roll] { color: transparent !important; text-shadow: none !important; }
.ui2035-roll { position: fixed; z-index: 9997; pointer-events: none; display: inline-flex; align-items: stretch; white-space: pre; overflow: hidden; text-align: left; }
.ui2035-roll > span { display: inline-block; overflow: hidden; text-align: center; }
.ui2035-roll .ui2035-track { display: block; will-change: transform; transition: transform 520ms cubic-bezier(.76, 0, .24, 1); }
.ui2035-roll .ui2035-track > span { display: block; }
html[data-ui-version="2035"] .kpi-value, html[data-ui-version="2035"] .donut-value, html[data-ui-version="2035"] .dialer2-stat-val,
html[data-ui-version="2035"] .badge { font-variant-numeric: tabular-nums; }
html[data-ui-version="2035"] .badge { transition: transform 420ms var(--ui-ease-spring), background-color .2s; }
html[data-ui-version="2035"] .badge[data-ui-roll] { transform: scale3d(1.1, 1.1, 1); }

/* ============================================ 7. verification toggle (unscoped) ========================================= */
.ui2035-toggle {
  position: fixed; left: 14px; bottom: 14px; z-index: 70;
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; margin: 0;
  border-radius: 999px; border: 1px solid var(--line, #334155); background: var(--card, #151e32); color: var(--ink, #e2e8f0);
  font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; cursor: pointer; user-select: none;
  box-shadow: var(--shadow-l, 0 10px 30px rgba(0, 0, 0, .4)); -webkit-tap-highlight-color: transparent;
  transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, border-color .15s;
}
.ui2035-toggle:hover { border-color: var(--blue, #3b82f6); }
.ui2035-toggle:active { transform: scale3d(.94, .94, 1); transition-duration: 90ms; }
.ui2035-toggle:focus-visible { outline: none; box-shadow: var(--focus, 0 0 0 3px rgba(59, 130, 246, .35)); }
.ui2035-toggle .sw { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--off-bg, #334155); transition: background-color .25s; flex: none; }
.ui2035-toggle .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1); }
.ui2035-toggle[aria-pressed="true"] .sw { background: var(--blue, #3b82f6); }
.ui2035-toggle[aria-pressed="true"] .sw::after { transform: translate3d(12px, 0, 0); }
.ui2035-toggle .lbl { min-width: 44px; text-align: left; }
.ui2035-toggle small { font-weight: 500; color: var(--ink-3, #94a3b8); }
@media (max-width: 480px) { .ui2035-toggle { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: 10px; height: 30px; } .ui2035-toggle small { display: none; } }
@media print { .ui2035-toggle, .ui2035-roll, .ui2035-ghost { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .ui2035-ghost, .ui2035-roll { display: none !important; }
  html[data-ui-version="2035"] * { transition: none !important; animation: none !important; }
}