/* =============================================================================
   Premium Tiles — Enterprise Visual Hierarchy
   NOC Platform v12 · Accenture Demo

   Refined tile styles with subtle gradients, muted shadows, and thin accent
   borders. Uses the enterprise color palette — no neon, no harsh glows.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   CSS Custom Properties — Enterprise Palette
   --------------------------------------------------------------------------- */
:root {
  --pt-primary: #2B5797;
  --pt-steel: #5B7B9A;
  --pt-success: #3D8B6E;
  --pt-warning: #C4883A;
  --pt-critical: #B84444;

  --pt-bg-start: rgba(30, 36, 46, 0.65);
  --pt-bg-end: rgba(24, 29, 38, 0.80);
  --pt-shadow: rgba(0, 0, 0, 0.18);
  --pt-shadow-strong: rgba(0, 0, 0, 0.28);
}

/* ---------------------------------------------------------------------------
   1. .premium-tile — base styles
   --------------------------------------------------------------------------- */
.premium-tile {
  background: linear-gradient(135deg, var(--pt-bg-start), var(--pt-bg-end));
  box-shadow: 0 2px 8px var(--pt-shadow);
  border-top: 3px solid var(--pt-steel);
  border-radius: 10px;
  padding: 16px;
  min-height: 180px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* ---------------------------------------------------------------------------
   2. .premium-tile.status-critical
      Muted red accent border + subtlePulse animation from
      demo-polish-animations.css. Slightly stronger shadow.
   --------------------------------------------------------------------------- */
.premium-tile.status-critical {
  border-top-color: var(--pt-critical);
  box-shadow: 0 2px 12px var(--pt-shadow-strong);
  animation: subtlePulse 2.5s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
   3. .premium-tile.status-warning
      Muted amber accent border.
   --------------------------------------------------------------------------- */
.premium-tile.status-warning {
  border-top-color: var(--pt-warning);
}

/* ---------------------------------------------------------------------------
   4. .premium-tile.status-normal
      Steel accent border (default enterprise tone).
   --------------------------------------------------------------------------- */
.premium-tile.status-normal {
  border-top-color: var(--pt-steel);
}

/* ---------------------------------------------------------------------------
   5. .tile-group — CSS grid layout for tile collections
   --------------------------------------------------------------------------- */
.tile-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* ---------------------------------------------------------------------------
   6. .gradient-header — section header with gradient underline
      Thin 2 px gradient line from primary blue to steel.
   --------------------------------------------------------------------------- */
.gradient-header {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  background-image: linear-gradient(to right, var(--pt-primary), var(--pt-steel));
  background-size: 100% 2px;
  background-position: bottom left;
  background-repeat: no-repeat;
}