/* Unified theme palette and gentle, professional UI harmonization */
:root {
  --color-bg: #f6f7fb;
  --color-surface: #ffffff;
  --color-surface-muted: #eef1f7;
  --color-text: #1f2937;          /* Slate-800 */
  --color-text-muted: #6b7280;    /* Gray-500 */
  --color-border: #e5e7eb;        /* Gray-200 */
  --color-primary: #6366f1;       /* Indigo-500 */
  --color-primary-600: #5458e8;   /* Indigo-600 */
  --color-primary-700: #4f46e5;   /* Indigo-700 */
  --color-accent: #8b5cf6;        /* Violet-500 */
  --color-shadow: rgba(15, 23, 42, 0.06); /* Subtle slate shadow */
  --ring-primary: rgba(99, 102, 241, 0.18);

  --status-success-bg: #dcfce7;   /* Emerald-100 */
  --status-success-text: #166534; /* Emerald-800 */
  --status-warn-bg: #fef9c3;      /* Yellow-100 */
  --status-warn-text: #854d0e;    /* Amber-800 */
  --status-danger-bg: #fee2e2;    /* Red-100 */
  --status-danger-text: #991b1b;  /* Red-800 */
  --status-info-bg: #e0f2fe;      /* Sky-100 */
  --status-info-text: #075985;    /* Sky-800 */
}

/* Base */
body {
  background-color: var(--color-bg) !important;
  color: var(--color-text);
}

/* Headers across pages */
.header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px var(--color-shadow) !important;
}
.header h1,
.header p {
  color: #fff !important;
}

/* Breadcrumbs */
.breadcrumb {
  background: var(--color-surface) !important;
  box-shadow: 0 2px 8px var(--color-shadow) !important;
  border: 1px solid var(--color-border);
}
.breadcrumb a {
  color: var(--color-primary) !important;
}
.breadcrumb span {
  color: var(--color-text-muted) !important;
}

/* Containers / Cards */
.services-container,
.dashboard-container,
.service-container,
.documentation,
.dashboard-section {
  background: var(--color-surface) !important;
  box-shadow: 0 2px 10px var(--color-shadow) !important;
  border: 1px solid var(--color-border);
}

/* Generic cards often used as items */
.service-card,
.alert-card,
.stat-card {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 1px 6px var(--color-shadow) !important;
}
.service-card:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 4px 14px rgba(102, 126, 234, 0.18) !important;
}

/* Titles */
.services-title,
.chart-title,
.service-title,
.section-title,
.modal-title {
  color: var(--color-text) !important;
}
.service-description,
.service-subtitle,
.stat-label,
.no-data,
.loading,
.documentation .documentation-content,
.documentation .documentation-list,
.form-group small,
.alert-info-label {
  color: var(--color-text-muted) !important;
}

/* Stats bars / muted surfaces */
.stats-bar,
.no-data-message,
.coming-soon,
.stat-card {
  background: var(--color-surface-muted) !important;
  border: 1px dashed var(--color-border) !important;
}
.stat-number,
.stat-value {
  color: var(--color-primary) !important;
}

/* Buttons */
.btn,
.back-link {
  box-shadow: 0 1px 6px var(--color-shadow);
}
.btn-primary,
.back-link {
  background: var(--color-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.back-link:hover {
  background: var(--color-primary-600) !important;
}
.btn-secondary {
  background: var(--color-surface-muted) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}
.btn-secondary:hover {
  background: #e9eef6 !important;
}
.btn-danger {
  background: #dc3545 !important;
  color: #fff !important;
}
.btn-danger:hover {
  background: #c82333 !important;
}

/* Inputs */
.form-input,
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
  border: 2px solid var(--color-border) !important;
  box-shadow: none !important;
}
.form-input:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--ring-primary) !important;
}

/* Messages / Badges / Status */
.error-message,
.message-error,
.badge-disabled {
  background: var(--status-danger-bg) !important;
  color: var(--status-danger-text) !important;
  border-color: #f5c6cb !important;
}
.success-message,
.message-success,
.badge-enabled,
.status-active {
  background: var(--status-success-bg) !important;
  color: var(--status-success-text) !important;
  border-color: #c3e6cb !important;
}
.message-warning {
  background: var(--status-warn-bg) !important;
  color: var(--status-warn-text) !important;
  border-color: #ffeaa7 !important;
}
.message-info {
  background: var(--status-info-bg) !important;
  color: var(--status-info-text) !important;
  border-color: #bee5eb !important;
}

/* Links inside informative hints */
.project-select-link {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.28) !important;
}
.project-select-link:hover {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent) 100%) !important;
}

/* Modal content surface */
.modal-content {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
}

/* Footer text tone */
.footer {
  color: var(--color-text-muted) !important;
}