/*
 * ORBLIGHT visual refinement layer.
 * Loaded after the legacy styles so component geometry and behavior stay intact.
 */

:root {
  --ui-canvas: #09090b;
  --ui-surface: #111113;
  --ui-surface-raised: #171719;
  --ui-surface-subtle: #1d1d20;
  --ui-border: #2a2a2e;
  --ui-border-soft: #222226;
  --ui-foreground: #fafafa;
  --ui-muted: #a1a1aa;
  --ui-muted-soft: #71717a;
  --ui-accent: #02ab53;
  --ui-accent-hover: #02964a;
  --ui-danger: #dc2626;
  --ui-warning: #f59e0b;
  --ui-info: #3b82f6;
  --ui-focus: rgba(2, 171, 83, 0.28);
  --ui-focus-soft: rgba(2, 171, 83, 0.12);
  --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --ui-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.2);
  --ui-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.34);
  --ui-radius: 8px;
  --ui-sidebar-width: 256px;
  --ui-motion-fast: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ui-motion: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --profile-toggle-hover: #28282a;

  --bg: var(--ui-canvas);
  --body-radial: var(--ui-canvas);
  --body-top: var(--ui-canvas);
  --body-bottom: var(--ui-canvas);
  --surface-app: var(--ui-canvas);
  --surface-card: var(--ui-surface);
  --surface-hover: rgba(255, 255, 255, 0.055);
  --surface-active: var(--ui-surface-subtle);
  --surface-soft: rgba(255, 255, 255, 0.045);
  --surface-input: var(--ui-surface);
  --line: var(--ui-border);
  --line-soft: var(--ui-border-soft);
  --line-faint: rgba(255, 255, 255, 0.055);
  --line-panel: var(--ui-border);
  --focus-green: var(--ui-accent);
  --focus-ring: var(--ui-focus-soft);
  --text: #f4f4f5;
  --text-strong: var(--ui-foreground);
  --muted-strong: var(--ui-muted);
  --icon-muted: #d4d4d8;
  --icon-soft: var(--ui-muted);
  --primary: var(--ui-accent);
  --primary-hover: var(--ui-accent-hover);
  --input-bg: var(--ui-surface);
  --input-border: var(--ui-border);
  --shadow: var(--ui-shadow-sm);
  --bs-border-radius: var(--ui-radius);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--ui-radius);
  --bs-border-color: var(--ui-border);
  --bs-secondary-bg: var(--ui-surface-raised);
  --bs-tertiary-bg: var(--ui-surface);
  --bs-box-shadow: var(--ui-shadow-sm);
}

:root[data-theme="light"] {
  --ui-canvas: #fafafa;
  --ui-surface: #ffffff;
  --ui-surface-raised: #ffffff;
  --ui-surface-subtle: #f4f4f5;
  --ui-border: #e4e4e7;
  --ui-border-soft: #ededf0;
  --ui-foreground: #09090b;
  --ui-muted: #71717a;
  --ui-muted-soft: #a1a1aa;
  --ui-focus: rgba(2, 171, 83, 0.24);
  --ui-focus-soft: rgba(2, 171, 83, 0.1);
  --ui-shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.06);
  --ui-shadow-sm: 0 1px 3px rgba(24, 24, 27, 0.08), 0 1px 2px rgba(24, 24, 27, 0.04);
  --ui-shadow-lg: 0 24px 60px rgba(24, 24, 27, 0.14);

  --bg: var(--ui-canvas);
  --body-radial: var(--ui-canvas);
  --body-top: var(--ui-canvas);
  --body-bottom: var(--ui-canvas);
  --surface-app: var(--ui-canvas);
  --surface-card: var(--ui-surface);
  --surface-hover: rgba(24, 24, 27, 0.045);
  --surface-active: var(--ui-surface-subtle);
  --surface-soft: rgba(24, 24, 27, 0.035);
  --surface-input: var(--ui-surface);
  --line: var(--ui-border);
  --line-soft: var(--ui-border-soft);
  --line-faint: rgba(24, 24, 27, 0.055);
  --line-panel: var(--ui-border);
  --text: #18181b;
  --text-strong: var(--ui-foreground);
  --muted: var(--ui-muted);
  --muted-strong: var(--ui-muted);
  --sidebar-muted: #52525b;
  --icon-muted: #52525b;
  --icon-soft: var(--ui-muted);
  --input-bg: var(--ui-surface);
  --input-border: var(--ui-border);
  --shadow: var(--ui-shadow-sm);
  --bs-body-bg: var(--ui-canvas);
  --bs-body-color: #18181b;
  --bs-secondary-bg: var(--ui-surface);
  --bs-tertiary-bg: var(--ui-surface-subtle);
  --bs-border-color: var(--ui-border);
  --bs-box-shadow: var(--ui-shadow-sm);
}

html {
  scrollbar-color: var(--ui-muted-soft) transparent;
}

body {
  background: var(--ui-canvas);
  letter-spacing: 0;
}

.layout-shell {
  --sidebar-width: var(--ui-sidebar-width);
}

.sidebar-brand {
  border-radius: 8px;
  transition: background-color var(--ui-motion-fast);
}

:root:not([data-theme="light"]) .sidebar-brand:hover,
:root:not([data-theme="light"]) .sidebar-brand:focus-visible {
  background: #262626;
}

:root[data-theme="light"] .sidebar-brand:hover,
:root[data-theme="light"] .sidebar-brand:focus-visible {
  background: #eeeeef;
}

/* Keep the sidebar collapse control consistent across every application page. */
.app-topbar__action--menu {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  color: #aaaaaa;
  transform: translateX(-2px);
}

.app-topbar__action--menu svg {
  width: 16px;
  height: 16px;
  color: #aaaaaa;
  stroke: #aaaaaa;
  stroke-width: 2;
}

.app-topbar__action--menu:hover,
.app-topbar__action--menu:focus-visible,
.app-topbar__action--menu.is-collapsed {
  border-color: transparent;
  background: #262626;
}

:root[data-theme="light"] .app-topbar__action--menu,
:root[data-theme="light"] .app-topbar__action--menu svg {
  color: #71717a;
  stroke: #71717a;
}

:root[data-theme="light"] .app-topbar__action--menu:hover,
:root[data-theme="light"] .app-topbar__action--menu:focus-visible,
:root[data-theme="light"] .app-topbar__action--menu.is-collapsed {
  background: #eeeeef;
}

:root:not([data-theme="light"]) .sidebar-profile:hover,
:root:not([data-theme="light"]) .sidebar-profile:focus-visible,
:root:not([data-theme="light"]) .sidebar-profile[aria-expanded="true"] {
  background: #262626;
}

/* Perfil da sidebar: geometria e tons do sistema visual ORBLIGHT. */
.sidebar {
  padding-bottom: 8px;
}

.sidebar:not(.sidebar--admin) .sidebar-profile__avatar {
  overflow: hidden;
}

.sidebar:not(.sidebar--admin) .sidebar-profile__avatar img {
  object-fit: fill;
}

:root:not([data-theme="light"]) .sidebar:not(.sidebar--admin) .sidebar-profile__email {
  color: lab(66.128 0 0);
}

:root:not([data-theme="light"]) .sidebar:not(.sidebar--admin) .sidebar-profile__chevron {
  color: lab(98.26 0 0);
}

::selection {
  color: #ffffff;
  background: rgba(2, 171, 83, 0.72);
}

:is(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, button, input, select, textarea) {
  letter-spacing: 0;
}

:is(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

:is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select) {
  border-color: var(--ui-border);
  background-color: var(--ui-surface);
  box-shadow: var(--ui-shadow-xs);
}

:is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ui-border) 62%, var(--ui-muted));
}

:is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select):focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-focus-soft);
}

:is(input, textarea)::placeholder {
  color: var(--ui-muted-soft);
  opacity: 1;
}

/* Keep map search icons above the professional input surface. */
.devices-explorer .devices-explorer__search input {
  background-color: transparent !important;
  box-shadow: none !important;
}

.devices-explorer .devices-explorer__search-icon {
  z-index: 2;
  visibility: visible;
  opacity: 1;
}

:is(button, .btn, [role="button"]):disabled,
:is(button, .btn, [role="button"])[aria-disabled="true"] {
  opacity: 0.5;
}

.btn-success,
.settings-button--primary,
.installers-admin__primary-button,
.support-page__cta {
  box-shadow: 0 1px 2px rgba(2, 171, 83, 0.22);
}

.btn-success:hover:not(:disabled),
.settings-button--primary:hover:not(:disabled),
.installers-admin__primary-button:hover:not(:disabled),
.support-page__cta:hover:not(:disabled) {
  box-shadow: 0 8px 22px rgba(2, 171, 83, 0.18);
}

:is(
  .overview-card,
  .dashboard-map-card,
  .alerts-summary-card,
  .alerts-dashboard__panel,
  .metrics-dashboard__panel,
  .devices-dashboard__panel,
  .settings-card,
  .install-device-card,
  .installers-admin__table-card,
  .devices-admin__table-card,
  .approvals-admin__table-card,
  .centrals-admin__table-card,
  .incident-center__summary-card,
  .incident-center__list-card,
  .night-operations__summary-card,
  .night-operations__table-card,
  .support-inbox__panel,
  .support-page__agent,
  .support-page__meta-card,
  .panel,
  .card
) {
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow-xs);
}

:is(
  .overview-card,
  .alerts-summary-card,
  .settings-card,
  .install-device-card,
  .support-page__agent,
  .support-page__meta-card
):hover {
  border-color: color-mix(in srgb, var(--ui-border) 74%, var(--ui-muted));
  box-shadow: var(--ui-shadow-sm);
}

:is(
  .theme-menu,
  .notifications-menu,
  .incidents-menu,
  .sidebar-profile-menu,
  .installers-admin__status-menu,
  .installers-admin__page-size-menu,
  .installers-admin__columns-menu,
  .centrals-admin__company-menu,
  .centrals-admin__communication-menu,
  .incident-center__sort-menu,
  .night-operations__columns-menu,
  .night-operations__page-size-menu,
  .devices-explorer__filter-menu
) {
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow-lg);
}

:is(
  .sidebar-nav__item,
  .sidebar-subnav__item,
  .sidebar-group__toggle,
  .sidebar-profile,
  .sidebar-profile-menu__item,
  .theme-menu__item
):hover {
  text-decoration: none;
}

:is(
  .sidebar-nav__item,
  .sidebar-subnav__item,
  .sidebar-group__toggle,
  .sidebar-profile-menu__item,
  .theme-menu__item
):focus-visible {
  box-shadow: inset 0 0 0 1px var(--ui-focus);
}

:is(
  .installers-admin__table,
  .devices-admin__table,
  .centrals-admin__table,
  .approvals-admin__table,
  .incident-center__table,
  .night-operations__table
) tbody tr {
  transition: background-color var(--ui-motion-fast);
}

:is(
  .installers-admin__table,
  .devices-admin__table,
  .centrals-admin__table,
  .approvals-admin__table,
  .incident-center__table,
  .night-operations__table
) tbody tr:hover > * {
  background-color: var(--surface-hover);
}

:is(
  .installers-admin__status-badge,
  .devices-explorer__status-badge,
  .incident-center__badge,
  .night-operations__badge,
  .app-topbar__badge
) {
  font-variant-numeric: tabular-nums;
}

:is(
  .overview-card__value,
  .alerts-summary-card__value,
  .night-operations__summary-value,
  .metrics-dashboard__value,
  .installers-admin__page-indicator
) {
  font-variant-numeric: tabular-nums;
}

:is(
  .installers-admin__modal,
  .companies-admin__modal,
  .incident-center__dialog,
  .devices-explorer__alerts-modal
) {
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow-lg);
}

:is(
  .installers-admin__modal-backdrop,
  .incident-center__dialog-backdrop,
  .devices-explorer__alerts-modal-backdrop
) {
  backdrop-filter: blur(3px);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-muted-soft) 65%, transparent);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ui-muted) 78%, transparent);
  background-clip: padding-box;
}