/* ============================================================================
   Rotem Shevah — Slate Glass · component glass layer
   Load AFTER each tool's local CSS AND after design-tokens.css.
   Adds the glass MATERIAL (backdrop-blur, glass border, layered shadow) and
   the Emil-Kowalski motion polish to the shared template components.
   Recolour itself is handled by design-tokens.css (tokens) — this file only
   adds material + motion, keyed on the classes every tool shares.
   Skill: rotem-glass · §4 glass recipe, §5 motion, §6 components
   ============================================================================ */

/* ---- Structural surfaces: header + sidebar ------------------------------- */
header {
  background: var(--surface) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--glass-border) !important;
}
.sidebar {
  background: var(--surface) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid var(--glass-border) !important;
  border-left: 1px solid var(--glass-border);
}
footer {
  background: var(--surface) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid var(--glass-border) !important;
}

/* ---- Cards & elevated tiles ---------------------------------------------- */
.card,
.stat-box,
.dl-card,
.net-row,
.basemap-strip {
  background: var(--card) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-sm);
}

/* ---- Buttons: Emil motion + Slate recolour ------------------------------- */
.btn,
.btn-job,
.btn-clear {
  transition: transform 160ms var(--ease), background-color 160ms ease, border-color 160ms ease !important;
}
.btn:active,
.btn-job:active,
.btn-clear:active,
.basemap-btn:active {
  transform: scale(.97);
}
.btn-primary {
  background: var(--accent) !important;
  color: #0e1420 !important;
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 85%, white) !important;
}
.btn-secondary {
  background: var(--border) !important;
  color: var(--text) !important;
}
.btn-secondary:hover {
  background: color-mix(in srgb, var(--border) 55%, var(--text) 15%) !important;
}

/* ---- Inputs: focus ring -------------------------------------------------- */
.fc,
.cp-in,
.job-name-input,
input[type="text"],
input[type="number"],
select,
textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.fc:focus,
.cp-in:focus,
.job-name-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

/* ---- Tables: token borders + accent hover -------------------------------- */
td {
  border-bottom: 1px solid var(--border) !important;
}
tr {
  transition: background-color 140ms ease;
}
tr:hover td {
  background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}

/* ---- Modals / overlays: glass + entrance --------------------------------- */
#auditOverlay,
.job-modal-overlay,
.modal-overlay,
.overlay {
  background: var(--scrim) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: overlayFadeIn 200ms ease-out both;
}
#auditModal,
.job-modal,
.modal,
.modal-box {
  background: var(--glass-strong) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-lg) !important;
  animation: modalPopIn 260ms var(--ease) both;
}

/* ---- Theme toggle press feedback ----------------------------------------- */
#themeToggle {
  transition: transform 160ms var(--ease), border-color 160ms ease !important;
}
#themeToggle:active {
  transform: scale(.9);
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #auditOverlay,
  .job-modal-overlay,
  .modal-overlay,
  .overlay,
  #auditModal,
  .job-modal,
  .modal,
  .modal-box {
    animation-duration: 1ms;
  }
}