/* e.emach.pl 9_12_374 — canonical local surface-context tokens
   GOLDEN RULE: every non-semantic foreground, icon relief and control colour
   is resolved from the surface that physically contains the component, never
   directly from global LIGHT/DARK. Brands may freely combine light and dark
   shell/content surfaces without component-specific forks.

   IMPORTANT: static SVGs can contain closed/raised/recessed areas. `currentColor`
   alone is not enough for those geometries, therefore the surface context also
   supplies local icon-fill tokens and bridges them to the legacy SVG variables.
*/

:root {
    --surface-context-bg: var(--app-surface, transparent);
    --surface-context-text: var(--app-text);
    --surface-context-muted: var(--app-text-secondary);
    --surface-context-icon: var(--icon-neutral);
    --surface-context-icon-raised-fill: var(--icon-raised-fill, var(--surface-context-bg));
    --surface-context-icon-recessed-fill: var(--icon-recessed-fill, var(--surface-context-bg));
    --surface-context-icon-detail-fill: var(--surface-context-icon);
    --surface-context-control-bg: var(--control-bg, transparent);
    --surface-context-control-bg-hover: var(--surface-hover);
    --surface-context-control-border: var(--surface-border);
    --surface-context-control-text: var(--app-text);
    --surface-context-focus: var(--brand-focus);

    /* Popups are independent surfaces. A brand may override these without
       changing the shell or global theme. */
    --popup-surface-bg: var(--surface-1, var(--app-surface));
    --popup-surface-text: var(--app-text);
    --popup-surface-muted: var(--app-text-secondary);
    --popup-surface-icon: var(--icon-neutral);
    --popup-surface-hover: var(--surface-hover);
    --popup-surface-border: var(--surface-border);
    --popup-surface-shadow: var(--device-card-shadow-hover, 0 12px 30px rgba(0,0,0,.14));
}

/* Generic opt-in contract for future surfaces. A new brand/component can set
   only --surface-context-* locally and all static SVG families will follow. */
.surface-context,
[data-surface-context] {
    --ui-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --ui-icon-recessed-fill: var(--surface-context-icon-recessed-fill);
    --device-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --b45-cabinet-fill: var(--surface-context-icon-raised-fill);
    --b45-lightning-fill: var(--surface-context-icon-detail-fill);
}

/* -------------------------------------------------------------------------- */
/* Shell surfaces                                                              */
/* -------------------------------------------------------------------------- */
.app-topbar,
.app-topbar-surface {
    --surface-context-bg: var(--topbar-surface-bg, var(--topbar-bg));
    --surface-context-text: var(--topbar-surface-text, var(--topbar-title));
    --surface-context-muted: var(--topbar-surface-muted, var(--topbar-eyebrow));
    --surface-context-icon: var(--topbar-surface-control-text, var(--topbar-control-text));
    --surface-context-icon-raised-fill: var(--topbar-icon-raised-fill, var(--surface-context-bg));
    --surface-context-icon-recessed-fill: var(--topbar-icon-recessed-fill, var(--surface-context-bg));
    --surface-context-icon-detail-fill: var(--topbar-icon-detail-fill, var(--surface-context-icon));
    --surface-context-control-bg: var(--topbar-surface-control-bg, var(--topbar-control-bg));
    --surface-context-control-bg-hover: var(--topbar-surface-control-bg-hover, var(--topbar-control-bg-hover, var(--topbar-surface-control-bg, var(--topbar-control-bg))));
    --surface-context-control-border: var(--topbar-surface-control-border, var(--topbar-control-border));
    --surface-context-control-border-hover: var(--topbar-surface-control-border-hover, var(--topbar-control-border-hover, var(--surface-context-control-border)));
    --surface-context-control-text: var(--topbar-surface-control-text, var(--topbar-control-text));
    --surface-context-control-text-hover: var(--topbar-surface-control-text-hover, var(--topbar-control-text-hover, var(--surface-context-control-text)));

    /* Bridge the canonical local surface to every static-icon family. */
    --ui-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --ui-icon-recessed-fill: var(--surface-context-icon-recessed-fill);
    --device-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --b45-cabinet-fill: var(--surface-context-icon-raised-fill);
    --b45-lightning-fill: var(--surface-context-icon-detail-fill);
}

.app-sidebar {
    --surface-context-bg: var(--sidebar-bg);
    --surface-context-text: var(--sidebar-nav-text);
    --surface-context-muted: var(--sidebar-brand-muted, var(--sidebar-nav-text));
    --surface-context-icon: var(--sidebar-nav-text);
    --surface-context-icon-raised-fill: var(--sidebar-icon-raised-fill, var(--surface-context-bg));
    --surface-context-icon-recessed-fill: var(--sidebar-icon-recessed-fill, var(--surface-context-bg));
    --surface-context-icon-detail-fill: var(--sidebar-icon-detail-fill, var(--surface-context-icon));

    --ui-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --ui-icon-recessed-fill: var(--surface-context-icon-recessed-fill);
    --device-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --b45-cabinet-fill: var(--surface-context-icon-raised-fill);
    --b45-lightning-fill: var(--surface-context-icon-detail-fill);
}

.sidebar-brand-row {
    --surface-context-bg: var(--sidebar-brand-bg, var(--sidebar-bg));
    --surface-context-text: var(--sidebar-nav-text);
    --surface-context-muted: var(--sidebar-brand-muted, var(--sidebar-nav-text));
    --surface-context-icon: var(--sidebar-nav-text);
    --surface-context-icon-raised-fill: var(--sidebar-brand-icon-raised-fill, var(--surface-context-bg));
    --surface-context-icon-recessed-fill: var(--sidebar-brand-icon-recessed-fill, var(--surface-context-bg));
    --surface-context-icon-detail-fill: var(--sidebar-brand-icon-detail-fill, var(--surface-context-icon));

    --ui-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --ui-icon-recessed-fill: var(--surface-context-icon-recessed-fill);
    --device-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --b45-cabinet-fill: var(--surface-context-icon-raised-fill);
    --b45-lightning-fill: var(--surface-context-icon-detail-fill);
}

.mobile-quick-nav {
    --surface-context-bg: var(--mobile-nav-bg, var(--topbar-bg));
    --surface-context-text: var(--mobile-nav-active-text, var(--topbar-title));
    --surface-context-muted: var(--mobile-nav-text, var(--topbar-eyebrow));
    --surface-context-icon: var(--mobile-nav-text, var(--topbar-control-text));
    --surface-context-icon-raised-fill: var(--mobile-nav-icon-raised-fill, var(--surface-context-bg));
    --surface-context-icon-recessed-fill: var(--mobile-nav-icon-recessed-fill, var(--surface-context-bg));
    --surface-context-icon-detail-fill: var(--mobile-nav-icon-detail-fill, var(--surface-context-icon));

    --ui-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --ui-icon-recessed-fill: var(--surface-context-icon-recessed-fill);
    --device-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --b45-cabinet-fill: var(--surface-context-icon-raised-fill);
    --b45-lightning-fill: var(--surface-context-icon-detail-fill);
}

.workspace-context,
#appContent {
    --surface-context-bg: var(--app-workspace-bg, var(--app-canvas-background));
    --surface-context-text: var(--app-text);
    --surface-context-muted: var(--app-text-secondary);
    --surface-context-icon: var(--icon-neutral);
}

/* -------------------------------------------------------------------------- */
/* Popup/menu surfaces                                                         */
/* -------------------------------------------------------------------------- */
.topbar-device-actions-menu,
.device-context-menu,
.device-list-actions-menu,
.device-card .device-card-actions-menu,
.account-popover {
    --surface-context-bg: var(--popup-surface-bg);
    --surface-context-text: var(--popup-surface-text);
    --surface-context-muted: var(--popup-surface-muted);
    --surface-context-icon: var(--popup-surface-icon);
    --surface-context-icon-raised-fill: var(--popup-icon-raised-fill, var(--surface-context-bg));
    --surface-context-icon-recessed-fill: var(--popup-icon-recessed-fill, var(--surface-context-bg));
    --surface-context-icon-detail-fill: var(--popup-icon-detail-fill, var(--surface-context-icon));
    --surface-context-control-bg: transparent;
    --surface-context-control-bg-hover: var(--popup-surface-hover);
    --surface-context-control-border: var(--popup-surface-border);
    --surface-context-control-text: var(--popup-surface-text);

    --ui-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --ui-icon-recessed-fill: var(--surface-context-icon-recessed-fill);
    --device-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --b45-cabinet-fill: var(--surface-context-icon-raised-fill);
    --b45-lightning-fill: var(--surface-context-icon-detail-fill);
}

/* -------------------------------------------------------------------------- */
/* Shell device context                                                        */
/* -------------------------------------------------------------------------- */
.app-topbar .topbar-view-title {
    color: var(--surface-context-text) !important;
}

.app-topbar .topbar-eyebrow,
.app-topbar .topbar-subtitle {
    color: var(--surface-context-muted) !important;
}

.app-topbar .topbar-detail-status {
    border-color: var(--surface-context-control-border);
    background: var(--surface-context-control-bg);
    color: var(--surface-context-text);
}

.app-topbar .topbar-context-icon {
    color: var(--surface-context-icon) !important;
    border-color: color-mix(in srgb, var(--surface-context-text) 18%, transparent);
    background: color-mix(in srgb, var(--surface-context-text) 8%, transparent);
}

.app-topbar .topbar-context-icon .device-class-icon-svg {
    color: currentColor;
}

.app-topbar .topbar-detail-status.is-connection {
    --connection-halo: var(--surface-context-bg);
    --connection-hop-bg: var(--surface-context-control-bg);
    --connection-hop-ring: var(--surface-context-bg);
    --connection-hop-text: var(--surface-context-control-text);
    border-color: transparent !important;
    background: transparent !important;
    color: var(--surface-context-icon) !important;
}

.app-topbar .topbar-detail-status.is-connection .device-connection-indicator {
    color: var(--surface-context-icon) !important;
}

/* OFFLINE is availability, not an alarm. It intentionally remains plain text
   and never borrows danger/red semantics. */
.app-topbar .topbar-detail-status.is-offline {
    min-width: 0;
    min-height: 28px;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--surface-context-muted) !important;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
}


/* -------------------------------------------------------------------------- */
/* Public/auth surfaces                                                        */
/* -------------------------------------------------------------------------- */
.auth-brand-panel {
    --surface-context-bg: var(--auth-brand-bg);
    --surface-context-text: var(--auth-brand-text);
    --surface-context-muted: var(--auth-brand-muted, var(--auth-brand-text));
    --surface-context-icon: var(--auth-brand-text);
    /* Brand panels may be gradients; transparent closed areas reveal the real
       local surface instead of injecting a LIGHT/DARK-derived solid patch. */
    --surface-context-icon-raised-fill: var(--auth-brand-icon-raised-fill, transparent);
    --surface-context-icon-recessed-fill: var(--auth-brand-icon-recessed-fill, transparent);
    --surface-context-icon-detail-fill: var(--auth-brand-icon-detail-fill, var(--surface-context-icon));

    --ui-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --ui-icon-recessed-fill: var(--surface-context-icon-recessed-fill);
    --device-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --b45-cabinet-fill: var(--surface-context-icon-raised-fill);
    --b45-lightning-fill: var(--surface-context-icon-detail-fill);
}

.auth-main,
.auth-card,
.legal-document-body {
    --surface-context-bg: var(--auth-main-bg, var(--app-surface));
    --surface-context-text: var(--auth-text, var(--app-text));
    --surface-context-muted: var(--auth-muted, var(--app-text-secondary));
    --surface-context-icon: var(--auth-text, var(--icon-neutral));
    --surface-context-icon-raised-fill: var(--auth-main-icon-raised-fill, var(--surface-context-bg));
    --surface-context-icon-recessed-fill: var(--auth-main-icon-recessed-fill, var(--surface-context-bg));
    --surface-context-icon-detail-fill: var(--auth-main-icon-detail-fill, var(--surface-context-icon));

    --ui-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --ui-icon-recessed-fill: var(--surface-context-icon-recessed-fill);
    --device-icon-raised-fill: var(--surface-context-icon-raised-fill);
    --b45-cabinet-fill: var(--surface-context-icon-raised-fill);
    --b45-lightning-fill: var(--surface-context-icon-detail-fill);
}