/* CDPO Theme - Custom CSS */

:root {
  --cdpo-primary-color: #1976d2;
  --cdpo-success-color: #4caf50;
  --cdpo-warning-color: #ff9800;
  --cdpo-error-color: #f44336;
}

/* Dashboard cards */
.dashboard-view .stat-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.dashboard-view .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lumo-box-shadow-m);
}

/* Status badges */
[theme~="badge"][theme~="success"] {
  color: var(--lumo-success-text-color);
  background-color: var(--lumo-success-color-10pct);
}

[theme~="badge"][theme~="warning"] {
  color: var(--lumo-warning-text-color);
  background-color: var(--lumo-warning-color-10pct);
}

[theme~="badge"][theme~="error"] {
  color: var(--lumo-error-text-color);
  background-color: var(--lumo-error-color-10pct);
}

[theme~="badge"][theme~="contrast"] {
  color: var(--lumo-contrast-80pct);
  background-color: var(--lumo-contrast-10pct);
}

[theme~="badge"][theme~="primary"] {
  color: var(--lumo-primary-text-color);
  background-color: var(--lumo-primary-color-10pct);
}

/* Form layouts */
vaadin-form-layout {
  margin-bottom: var(--lumo-space-m);
}

/* Grid styling */
vaadin-grid {
  --lumo-row-stripe-color: var(--lumo-contrast-5pct);
}

/* Sidebar navigation */
vaadin-side-nav {
  padding: var(--lumo-space-s);
}

vaadin-side-nav-item[active] {
  background-color: var(--lumo-primary-color-10pct);
  border-radius: var(--lumo-border-radius-m);
}

/* Login view */
.login-view {
  background: linear-gradient(135deg, var(--lumo-shade-5pct) 0%, var(--lumo-shade-10pct) 100%);
}

/* Alert styling */
.alert {
  padding: var(--lumo-space-m);
  border-radius: var(--lumo-border-radius-m);
  margin-bottom: var(--lumo-space-s);
}

.alert-error {
  background-color: var(--lumo-error-color-10pct);
  border-left: 4px solid var(--lumo-error-color);
}

.alert-warning {
  background-color: var(--lumo-warning-color-10pct);
  border-left: 4px solid var(--lumo-warning-color);
}

.alert-success {
  background-color: var(--lumo-success-color-10pct);
  border-left: 4px solid var(--lumo-success-color);
}

/* Dashboard clickable cards */
.dashboard-stat-card {
  cursor: pointer;
  transition: all 0.2s ease;
}

.dashboard-stat-card:hover {
  background-color: var(--lumo-contrast-10pct) !important;
  transform: translateY(-2px);
  box-shadow: var(--lumo-box-shadow-s);
}

/* Risk Matrix */
.risk-matrix {
  display: grid;
  grid-template-columns: 80px repeat(4, 1fr);
  grid-template-rows: repeat(4, 60px) 30px;
  gap: 2px;
}

.risk-matrix-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 4px;
  padding: 4px;
  min-height: 50px;
}

.risk-matrix-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--lumo-secondary-text-color);
}

.risk-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  background: white;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Compliance score circle */
.compliance-score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  color: white;
  margin: 0 auto;
}