/* RDP Router WebUI - Custom styles */

/* Nav active state */
nav a[aria-current="page"] {
  font-weight: bold;
  border-bottom: 2px solid var(--pico-primary);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

nav a {
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  cursor: pointer;
}

/* Status badges */
.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

.badge-up { background: #2e7d32; }
.badge-down { background: #c62828; }
.badge-degraded { background: #e65100; }
.badge-count {
  background: var(--pico-primary);
  margin-left: 0.5rem;
}

/* Status indicator in header */
#global-status {
  font-size: 0.85rem;
  margin-left: auto;
}

/* Progress bar for token cache */
.token-progress {
  width: 100%;
  height: 1.2rem;
  background: var(--pico-muted-border-color);
  border-radius: 0.25rem;
  overflow: hidden;
  margin: 0.25rem 0;
}

.token-progress-fill {
  height: 100%;
  background: var(--pico-primary);
  transition: width 0.3s ease;
}

/* Token cards grid */
.token-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.token-card {
  padding: 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.5rem;
}

.token-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  color: var(--pico-muted-color);
}

.token-card .value {
  font-size: 1.5rem;
  font-weight: 700;
}

/* Tables */
table {
  width: 100%;
}

th[data-sort] {
  cursor: pointer;
  user-select: none;
}

th[data-sort]:hover {
  text-decoration: underline;
}

th .sort-arrow {
  font-size: 0.7rem;
  margin-left: 0.25rem;
}

/* Filter input */
.filter-bar {
  margin-bottom: 1rem;
}

.filter-bar input {
  margin-bottom: 0;
}

/* Toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.toolbar .spacer {
  flex: 1;
}

/* Polling info */
#poll-info {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
}

/* Section visibility */
section.page { display: none; }
section.page.active { display: block; }

/* Error banner */
.error-banner {
  padding: 0.75rem 1rem;
  background: #ffebee;
  color: #c62828;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  display: none;
}

[data-theme="dark"] .error-banner {
  background: #3e1517;
  color: #ef9a9a;
}

/* Tooltip for ISO dates */
[data-tooltip] {
  cursor: help;
  border-bottom: 1px dotted var(--pico-muted-color);
}

/* CRUD form */
.crud-form {
  padding: 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0.5rem;
}

.crud-form h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
}

.crud-form-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.crud-form-row input,
.crud-form-row select {
  margin-bottom: 0;
}

.crud-form-row button {
  white-space: nowrap;
}

.crud-feedback {
  display: none;
  font-size: 0.85rem;
  color: #e74c3c;
  margin-top: 0.25rem;
}

/* Delete button */
.btn { cursor: pointer; }
.btn-sm { padding: 0.2rem 0.6rem; font-size: 0.8rem; }
.btn-danger {
  background: #c62828;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
}
.btn-danger:hover { background: #b71c1c; }

/* Breakdown bar */
.breakdown-bar {
  display: flex;
  height: 1.2rem;
  border-radius: 0.25rem;
  overflow: hidden;
  margin: 0.25rem 0;
}

.breakdown-positive {
  background: #2e7d32;
}

.breakdown-negative {
  background: #c62828;
}