/*
 * Tulip Interface Monitor — Cloudscape-inspired design system.
 * Matches the visual language of @cloudscape-design/components
 * without requiring React or a build pipeline.
 */

/* --- Cloudscape Design Tokens --- */
:root {
  /* Background */
  --cs-color-background-layout-main: #ffffff;
  --cs-color-background-container: #ffffff;
  --cs-color-background-input: #ffffff;
  --cs-color-background-status-info: #f2f8fd;
  --cs-color-background-status-success: #f2fcf3;
  --cs-color-background-status-error: #fff7f7;
  --cs-color-background-layout-toggle-default: #414d5c;

  /* Text */
  --cs-color-text-body-default: #000716;
  --cs-color-text-body-secondary: #5f6b7a;
  --cs-color-text-heading: #000716;
  --cs-color-text-label: #000716;
  --cs-color-text-status-success: #037f0c;
  --cs-color-text-status-error: #d91515;
  --cs-color-text-interactive-default: #0972d3;
  --cs-color-text-interactive-hover: #033160;

  /* Border */
  --cs-color-border-divider: #e9ebed;
  --cs-color-border-container: #e9ebed;
  --cs-color-border-input: #7d8998;
  --cs-color-border-control-focus: #0972d3;

  /* Button */
  --cs-color-background-button-normal: transparent;
  --cs-color-background-button-primary: #0972d3;
  --cs-color-text-button-primary: #ffffff;

  /* Spacing */
  --cs-space-xs: 4px;
  --cs-space-s: 8px;
  --cs-space-m: 12px;
  --cs-space-l: 16px;
  --cs-space-xl: 20px;
  --cs-space-xxl: 24px;

  /* Typography */
  --cs-font-family: 'Amazon Ember', 'Helvetica Neue', Roboto, Arial, sans-serif;
  --cs-font-size-body: 14px;
  --cs-font-size-heading-l: 24px;
  --cs-font-size-heading-s: 18px;
  --cs-font-size-small: 12px;

  /* Radius */
  --cs-border-radius: 16px;
  --cs-border-radius-button: 8px;
  --cs-border-radius-input: 8px;

  /* Shadow */
  --cs-shadow-container:
    0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
}

/* --- Dark mode (Cloudscape dark) --- */
@media (prefers-color-scheme: dark) {
  :root {
    --cs-color-background-layout-main: #0f1b2d;
    --cs-color-background-container: #192534;
    --cs-color-background-input: #0f1b2d;
    --cs-color-background-status-info: #192534;
    --cs-color-background-status-success: #192534;
    --cs-color-background-status-error: #1a0000;
    --cs-color-background-layout-toggle-default: #354150;

    --cs-color-text-body-default: #d1d5db;
    --cs-color-text-body-secondary: #8d99a8;
    --cs-color-text-heading: #e9ebed;
    --cs-color-text-label: #d1d5db;
    --cs-color-text-status-success: #29ad32;
    --cs-color-text-status-error: #eb6f6f;
    --cs-color-text-interactive-default: #539fe5;
    --cs-color-text-interactive-hover: #89bdee;

    --cs-color-border-divider: #354150;
    --cs-color-border-container: #354150;
    --cs-color-border-input: #5f6b7a;
    --cs-color-border-control-focus: #539fe5;

    --cs-color-background-button-primary: #539fe5;

    --cs-shadow-container:
      0 1px 1px 0 rgba(0, 0, 0, 0.6), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3);
  }
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--cs-font-family);
  font-size: var(--cs-font-size-body);
  color: var(--cs-color-text-body-default);
  background: var(--cs-color-background-layout-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --- Top Navigation Bar (Cloudscape-style) --- */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--cs-space-l);
  padding: 0 var(--cs-space-xxl);
  height: 48px;
  background: var(--cs-color-background-layout-toggle-default);
  color: #ffffff;
  font-size: var(--cs-font-size-body);
}
.top-nav .logo {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: #ffffff;
  text-decoration: none;
}
.top-nav .nav-sep {
  flex: 1;
}
.top-nav .nav-info {
  font-size: var(--cs-font-size-small);
  opacity: 0.7;
}

/* --- Page Layout --- */
.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--cs-space-xxl);
}

/* --- Page Header (Cloudscape Header component style) --- */
.page-header {
  margin-bottom: var(--cs-space-xxl);
}
.page-header h1 {
  font-size: var(--cs-font-size-heading-l);
  font-weight: 700;
  color: var(--cs-color-text-heading);
  line-height: 1.25;
}
.page-header p {
  font-size: var(--cs-font-size-body);
  color: var(--cs-color-text-body-secondary);
  margin-top: var(--cs-space-xs);
}

/* --- Stats Cards (Cloudscape ColumnLayout + Box style) --- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--cs-space-l);
  margin-bottom: var(--cs-space-xxl);
}
.stat-card {
  background: var(--cs-color-background-container);
  border: 1px solid var(--cs-color-border-container);
  border-radius: var(--cs-border-radius);
  box-shadow: var(--cs-shadow-container);
  padding: var(--cs-space-xl);
  text-align: center;
}
.stat-card .stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--cs-color-text-heading);
  line-height: 1.1;
}
.stat-card .stat-label {
  font-size: var(--cs-font-size-small);
  color: var(--cs-color-text-body-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--cs-space-xs);
}
.stat-card.success .stat-value {
  color: var(--cs-color-text-status-success);
}
.stat-card.error .stat-value {
  color: var(--cs-color-text-status-error);
}

/* --- Controls (Cloudscape Input + Button style) --- */
.controls-bar {
  display: flex;
  gap: var(--cs-space-s);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--cs-space-l);
}

.search-input {
  background: var(--cs-color-background-input);
  border: 2px solid var(--cs-color-border-input);
  color: var(--cs-color-text-body-default);
  padding: 6px 12px;
  border-radius: var(--cs-border-radius-input);
  font-size: var(--cs-font-size-body);
  font-family: var(--cs-font-family);
  width: 300px;
  outline: none;
  transition: border-color 0.15s;
}
.search-input:focus {
  border-color: var(--cs-color-border-control-focus);
  box-shadow: 0 0 0 1px var(--cs-color-border-control-focus);
}
.search-input::placeholder {
  color: var(--cs-color-text-body-secondary);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-space-xs);
  background: var(--cs-color-background-button-normal);
  border: 2px solid var(--cs-color-text-interactive-default);
  color: var(--cs-color-text-interactive-default);
  padding: 4px 16px;
  border-radius: var(--cs-border-radius-button);
  font-size: var(--cs-font-size-body);
  font-family: var(--cs-font-family);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 22px;
}
.btn:hover {
  color: var(--cs-color-text-interactive-hover);
  border-color: var(--cs-color-text-interactive-hover);
}
.btn.active {
  background: var(--cs-color-background-button-primary);
  border-color: var(--cs-color-background-button-primary);
  color: var(--cs-color-text-button-primary);
}

.gen-time {
  margin-left: auto;
  font-size: var(--cs-font-size-small);
  color: var(--cs-color-text-body-secondary);
}

/* --- Table (Cloudscape Table component style) --- */
.table-container {
  background: var(--cs-color-background-container);
  border: 1px solid var(--cs-color-border-container);
  border-radius: var(--cs-border-radius);
  box-shadow: var(--cs-shadow-container);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cs-font-size-body);
}

thead th {
  background: var(--cs-color-background-container);
  color: var(--cs-color-text-body-secondary);
  font-size: var(--cs-font-size-small);
  font-weight: 700;
  text-align: left;
  padding: var(--cs-space-s) var(--cs-space-l);
  border-bottom: 1px solid var(--cs-color-border-divider);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
}
thead th:hover {
  color: var(--cs-color-text-interactive-default);
}
thead th .sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.15s;
}
thead th:hover .sort-arrow {
  opacity: 0.4;
}
thead th.sorted .sort-arrow {
  opacity: 1;
  color: var(--cs-color-text-interactive-default);
}

tbody td {
  padding: var(--cs-space-s) var(--cs-space-l);
  border-bottom: 1px solid var(--cs-color-border-divider);
  vertical-align: middle;
}

tbody tr:hover {
  background: var(--cs-color-background-status-info);
}

/* Status indicators */
.status-ok {
  color: var(--cs-color-text-status-success);
  font-weight: 700;
}
.status-nok {
  color: var(--cs-color-text-status-error);
  font-weight: 700;
}
.status-on {
  color: var(--cs-color-text-status-success);
  font-weight: 600;
}
.status-off {
  color: var(--cs-color-text-status-error);
  font-weight: 600;
}

/* Cloudscape-style status indicator with dot */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-indicator::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-indicator.status-ok::before {
  background: var(--cs-color-text-status-success);
}
.status-indicator.status-nok::before {
  background: var(--cs-color-text-status-error);
}

.watched-star {
  color: #f0c14b;
  font-size: 16px;
}

/* Clickable watch/star button */
.watch-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--cs-color-text-body-secondary);
  padding: 2px 4px;
  border-radius: 4px;
  transition:
    color 0.15s,
    transform 0.15s;
  line-height: 1;
}
.watch-btn:hover {
  color: #f0c14b;
  transform: scale(1.2);
}
.watch-btn.watched {
  color: #f0c14b;
}

/* Dashboards stat card accent */
.stat-card.dashboards .stat-value {
  color: #f0c14b;
}

/* Header star size — match the row star buttons */
.th-star {
  font-size: 18px;
  vertical-align: middle;
}

.ts-cell {
  color: var(--cs-color-text-body-secondary);
  font-size: var(--cs-font-size-small);
}

/* Row states */
tr.row-nok {
  background: var(--cs-color-background-status-error);
}
tr.row-nok:hover {
  background: var(--cs-color-background-status-error);
  filter: brightness(0.97);
}
tr.hide {
  display: none;
}

/* --- Error Banner --- */
.error-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cs-color-text-status-error);
  color: #ffffff;
  padding: var(--cs-space-s) var(--cs-space-xxl);
  font-size: var(--cs-font-size-body);
  text-align: center;
  z-index: 200;
}

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding: 60px var(--cs-space-xxl);
  color: var(--cs-color-text-body-secondary);
}
.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: var(--cs-space-l);
}