/* =========================================================================
 * St. Claude — base skin (product default)
 *
 * Dark translucent glass panels with backdrop blur. This is the fallback
 * look when no other skin is active, and the baseline that other skins
 * override.
 *
 * All rules scoped under body[data-skin="stclaude"].
 * ========================================================================= */

/* =========================================================================
 * Brushed skin — admin content overrides
 *
 * The shell rules above style the drawer panel/head/handle/scrollbar
 * regardless of what lives inside. THESE rules know about the admin
 * region's DOM (#adminBody, #adminServiceLinks, admin.js-rendered
 * inline styles) and retexture / recolor that content to match the
 * brushed-metal panel.
 *
 * Kept here (rather than in DEFAULT_ADMIN_CSS inside js/config.js)
 * because drawers.css is an always-loaded framework stylesheet. If
 * these lived in the default admin CSS, a user who had ever saved
 * any settings edit would have their saved admin.style shadow the
 * default and never see updates to these rules.
 * ========================================================================= */

/* =========================================================================
 * Skin: St. Claude — dashboard surfaces (cards, graphs)
 *
 * Dark-glass card styling migrated OUT of the rain/circuit background
 * plugins. Backgrounds must only draw the animated backdrop; all visual
 * styling (colors, opacity, borders, blur) belongs with the skin so
 * switching backgrounds doesn't change card appearance and switching
 * skins doesn't change the animation.
 *
 * Variables are defined on the skin so user / region CSS can read them
 * consistently; override them in a region style pane to tweak per page.
 * ========================================================================= */
body[data-skin="stclaude"] {
  --gauge-card-bg:         rgba(24, 27, 31, 0.75);
  --graph-card-bg:         rgba(24, 27, 31, 0.75);
  --card-content-opacity:  1.0;
  --card-blur:             10px;
}


/* Gauge-style cards — every variant POC2 uses across sections. */
body[data-skin="stclaude"] .gauge,
body[data-skin="stclaude"] .gauge-stat,
body[data-skin="stclaude"] .gauge-status-indicator,
body[data-skin="stclaude"] .gauge-canvas-tile,
body[data-skin="stclaude"] .gauge-pip,
body[data-skin="stclaude"] .gauge-camera,
body[data-skin="stclaude"] .gauge-stub,
body[data-skin="stclaude"] .ss-tile,
body[data-skin="stclaude"] .env-outdoor,
body[data-skin="stclaude"] .health-bar {
  background: var(--gauge-card-bg) !important;
  backdrop-filter: blur(var(--card-blur));
  -webkit-backdrop-filter: blur(var(--card-blur));
}


/* Graph-style cards (line charts, daily-energy, etc.). */
body[data-skin="stclaude"] .graph-host,
body[data-skin="stclaude"] .graph-power-host,
body[data-skin="stclaude"] .graph-status,
body[data-skin="stclaude"] .graph-power-status {
  background: var(--graph-card-bg) !important;
  backdrop-filter: blur(var(--card-blur));
  -webkit-backdrop-filter: blur(var(--card-blur));
}

body[data-skin="stclaude"] .gauge-canvas-tile canvas,
body[data-skin="stclaude"] .ss-tile canvas {
  opacity: var(--card-content-opacity);
}