/* Fire Audit module — SaaS surface polish, scoped to its screen.
   Built on the app's theme tokens so it tracks light/dark automatically. */

#screen-asset-audits {
  --fa-radius: 14px;
  --fa-gap: 18px;
}

/* Page intro row */
#screen-asset-audits > h2 { letter-spacing: -0.02em; }

/* Cards: soft surface, hairline border, quiet shadow, accent hover lift.
   Applies to the module's inline-styled cards via the shared background token. */
#assetAuditsRoot [style*="--bg-card"] {
  border-radius: var(--fa-radius) !important;
  padding: 20px !important;
  box-shadow: var(--shadow);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

/* Section titles inside cards (the leading <b>) */
#assetAuditsRoot b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
/* Detail/site headings (h3) keep their weight */
#assetAuditsRoot h3 { letter-spacing: -0.01em; }

/* Rows: subtle hover so clickable lists feel alive */
#assetAuditsRoot [onclick*="openSite"],
#assetAuditsRoot [onclick*="openAudit"],
#assetAuditsRoot [onclick*="openAssetDetail"] {
  border-radius: 8px;
  margin: 0 -8px;
  padding-left: 8px !important;
  padding-right: 8px !important;
  transition: background .15s ease;
}
#assetAuditsRoot [onclick*="openSite"]:hover,
#assetAuditsRoot [onclick*="openAudit"]:hover,
#assetAuditsRoot [onclick*="openAssetDetail"]:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Inputs / selects: consistent height, focus ring in the brand accent */
#assetAuditsRoot input,
#assetAuditsRoot select,
#assetAuditsRoot textarea {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#assetAuditsRoot input:focus,
#assetAuditsRoot select:focus,
#assetAuditsRoot textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Buttons: primary gets the accent gradient, secondary a quiet outline */
#assetAuditsRoot .btn-primary {
  background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  border: none;
  color: #04121a;
  font-weight: 700;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 30%, transparent);
}
#assetAuditsRoot .btn-primary:hover { filter: brightness(1.05); }
#assetAuditsRoot .btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
#assetAuditsRoot .btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Clock chips: rounded, faint tinted fill matching the border colour */
#assetAuditsRoot span[style*="border-radius:999px"] {
  font-weight: 600;
  backdrop-filter: saturate(1.1);
}

/* Empty-state copy sits centred and calm */
#assetAuditsRoot [style*="padding:12px 0"],
#assetAuditsRoot [style*="padding:10px 0"] { line-height: 1.5; }

/* Help disclosure: rotate the arrow, hide the default marker */
#assetAuditsRoot summary::-webkit-details-marker { display: none; }
#assetAuditsRoot details[open] summary span { transform: rotate(90deg); display: inline-block; }
#assetAuditsRoot summary:hover { color: var(--accent); }