/* services.techvision365.ca — 2035 interaction layer for the Services dashboard (/opt/services/web), presentation only.
   Same engine (ui2035.js), same scoping: every rule is under html[data-ui-version="2035"]; remove the attribute
   and the dashboard is its legacy self. Selectors and tokens are the dashboard's own (the <style> in index.html:
   --accent, --surface, --line, --ink, --mute, --ring …). The few alias tokens on html are names the dashboard does
   not define; they only feed the shared toggle and overlays. */

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

html { --blue: var(--accent); --card: var(--surface); --input-bg: var(--bg-2); --off-bg: var(--off-soft); --ink-3: var(--mute);
       --shadow-l: 0 18px 40px rgba(0, 0, 0, .45); --focus: var(--ring); }
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);
}

/* ================================================ 1. buttons: sink & spring ============================================= */
html[data-ui-version="2035"] .btn,
html[data-ui-version="2035"] .icon-btn,
html[data-ui-version="2035"] .nav-item,
html[data-ui-version="2035"] .stat-group h3 a {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: transform 420ms var(--ui-ease-spring), background-color .15s, border-color .15s, color .15s, box-shadow .2s;
}
html[data-ui-version="2035"] .btn::after,
html[data-ui-version="2035"] .icon-btn::after,
html[data-ui-version="2035"] .nav-item::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .36), inset 0 0 0 1px rgba(0, 0, 0, .14);
  transition: opacity 140ms var(--ui-ease-sink);
}
html[data-ui-version="2035"] .btn:active:not(:disabled),
html[data-ui-version="2035"] .icon-btn:active:not(:disabled),
html[data-ui-version="2035"] .nav-item:active,
html[data-ui-version="2035"] .stat-group h3 a:active {
  transform: scale3d(.94, .94, 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"] .icon-btn:active:not(:disabled)::after,
html[data-ui-version="2035"] .nav-item: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:not(.ghost):not(.danger):hover:not(:disabled) { box-shadow: 0 8px 18px -10px var(--accent); }
html[data-ui-version="2035"] .btn.danger-solid:hover:not(:disabled) { box-shadow: 0 8px 18px -10px var(--bad); }

/* ============================================= 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-fade { from { opacity: 0; } to { opacity: 1; } }
html[data-ui-version="2035"] .nav-item { transition: transform 220ms var(--ui-ease-momentum), background-color .15s, color .15s; }
html[data-ui-version="2035"] .nav-item:hover:not(.on) { transform: translate3d(3px, 0, 0); }
html[data-ui-version="2035"] .nav-item.on::before { transition: top 300ms var(--ui-ease-momentum), bottom 300ms var(--ui-ease-momentum); }
html[data-ui-version="2035"] .shell.menu-open .sidebar { transition: transform 450ms var(--ui-ease-momentum); }
html[data-ui-version="2035"] .shell.menu-open .scrim { animation: ui-fade 300ms both; }

/* ============================================== 3. panels, dialogs, toasts ============================================== */
html[data-ui-version="2035"] .modal-bg { animation: ui-fade 300ms var(--ui-ease-momentum) both; }
html[data-ui-version="2035"] .modal { 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"] main > .panel,
html[data-ui-version="2035"] main .stat-group,
html[data-ui-version="2035"] main .ov-grid > .panel,
html[data-ui-version="2035"] main .split > .panel { animation: ui-momentum 450ms both; }
html[data-ui-version="2035"] main > .panel:nth-child(2), html[data-ui-version="2035"] main .stat-group:nth-child(2) { animation-delay: 30ms; }
html[data-ui-version="2035"] main > .panel:nth-child(3), html[data-ui-version="2035"] main .stat-group:nth-child(3) { animation-delay: 60ms; }
html[data-ui-version="2035"] main > .panel:nth-child(4), html[data-ui-version="2035"] main .stat-group:nth-child(4) { animation-delay: 90ms; }
html[data-ui-version="2035"] main > .panel:nth-child(n+5), html[data-ui-version="2035"] main .stat-group:nth-child(n+5) { animation-delay: 120ms; }
html[data-ui-version="2035"] .panel .panel { animation: none; }
html[data-ui-version="2035"] .panel, html[data-ui-version="2035"] .stat-group { transition: box-shadow .25s, border-color .15s; }

/* ============================================ 4. drag & drop (none in this dashboard today; ready if it comes) ========== */
html[data-ui-version="2035"] [data-ui-lift] {
  transform: scale3d(1.05, 1.05, 1) !important; opacity: .92 !important; position: relative; z-index: 3;
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .55), 0 4px 12px -4px rgba(0, 0, 0, .3) !important;
  transition: transform 220ms var(--ui-ease-momentum), box-shadow 220ms ease, opacity 150ms !important;
}
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-2), var(--bg-2)) 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"] .nav-badge, html[data-ui-version="2035"] .pill { font-variant-numeric: tabular-nums; }
html[data-ui-version="2035"] .nav-badge { transition: transform 420ms var(--ui-ease-spring), background-color .2s; }
html[data-ui-version="2035"] .nav-badge[data-ui-roll] { transform: scale3d(1.12, 1.12, 1); }

/* ============================================ 7. verification toggle (unscoped) ========================================= */
/* right of the sidebar on a desktop (its footer owns the bottom-left corner); bottom-left once the sidebar is off-canvas */
.ui2035-toggle {
  position: fixed; left: calc(var(--side, 260px) + 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-2, #2a3a5e); background: var(--surface, #141c33); color: var(--ink, #e6e9f2);
  font: 600 12px/1 var(--font, Manrope, system-ui, sans-serif); letter-spacing: .02em; cursor: pointer; user-select: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45); -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(--accent, #6d5ef1); }
.ui2035-toggle:active { transform: scale3d(.94, .94, 1); transition-duration: 90ms; }
.ui2035-toggle:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(109, 94, 241, .4)); }
.ui2035-toggle .sw { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--off-soft, #2a3350); 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(--accent, #6d5ef1); }
.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(--mute, #8b94b3); }
.login ~ .ui2035-toggle, body > .login + .ui2035-toggle { left: 14px; }
@media (max-width: 900px) { .ui2035-toggle { left: 14px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 480px) { .ui2035-toggle { height: 30px; left: 10px; } .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; }
}