/* ============================================================
   ServerMonitor — Ionic Custom Styles
   Light & Dark mode
   ============================================================ */

/* ── Login Page ─────────────────────────────────────────────── */
#login-page {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ion-background-color);
}

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 40px 32px;
  border-radius: 16px;
  background: var(--ion-card-background, var(--ion-item-background));
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

.login-logo {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 12px 0 4px;
}

.login-logo p {
  font-size: 13px;
  color: var(--ion-color-medium);
}

.login-form ion-item {
  --border-radius: 8px;
  margin-bottom: 12px;
}

/* ── App pages ──────────────────────────────────────────────── */
.app-page {
  display: none;
}

.app-page.active {
  display: block;
}

/* ── Stat Cards ─────────────────────────────────────────────── */
.stat-card {
  text-align: center;
  padding: 20px 16px !important;
}

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ion-color-medium);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 36px;
  font-weight: 700;
}

.stat-online {
  color: var(--ion-color-success);
}

.stat-offline {
  color: var(--ion-color-danger);
}

/* ── Server Cards (Dashboard) ──────────────────────────────── */
.server-card-dash {
  border-left: 4px solid var(--ion-color-medium);
  transition: border-color 0.2s;
}

.server-card-dash.online {
  border-left-color: var(--ion-color-success);
}

.server-card-dash.offline {
  border-left-color: var(--ion-color-danger);
}

.card-host {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
  word-break: break-all;
}

.card-url {
  font-size: 11px;
  color: var(--ion-color-medium);
  margin-bottom: 12px;
  word-break: break-all;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Response Time Chart ────────────────────────────────────── */
.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.rt-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(66, 140, 255, 0.12);
  color: var(--ion-color-primary);
  white-space: nowrap;
}

.card-chart-wrap {
  position: relative;
  width: 100%;
  height: 90px;
  margin: 8px 0;
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.badge.online {
  background: rgba(45, 211, 111, 0.15);
  color: var(--ion-color-success);
}

.badge.offline {
  background: rgba(235, 68, 90, 0.15);
  color: var(--ion-color-danger);
}

.badge.unknown {
  background: rgba(146, 148, 156, 0.15);
  color: var(--ion-color-medium);
}

/* ── Server Table ───────────────────────────────────────────── */
.srv-table {
  width: 100%;
  border-collapse: collapse;
}

.srv-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ion-color-medium);
  padding: 8px 12px;
  border-bottom: 1px solid var(--ion-border-color, rgba(0, 0, 0, 0.1));
}

.srv-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--ion-border-color, rgba(0, 0, 0, 0.06));
  font-size: 13px;
}

.srv-table tr:hover td {
  background: var(--ion-color-light, rgba(0, 0, 0, 0.03));
}

/* ── Log Lines ──────────────────────────────────────────────── */
.log-line {
  padding: 1px 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.log-line.c-offline { color: #ef4444; }
.log-line.c-online  { color: #22c55e; }
.log-line.c-warn    { color: #f59e0b; }
.log-line.c-error   { color: #dc2626; }
.log-line.c-info    { color: #3b82f6; }
.log-line.c-default { color: var(--ion-text-color); }

.log-viewer-content {
  --padding-start: 14px;
  --padding-end: 14px;
}

/* ── Check Chips ────────────────────────────────────────────── */
.check-chip {
  cursor: pointer;
  font-size: 12px;
  height: 28px;
  /* Inactive: outlined, clearly visible in both themes */
  --background: transparent;
  --color: var(--ion-color-primary);
  color: var(--ion-color-primary);
  border: 2px solid var(--ion-color-primary);
}

.check-chip.active {
  --background: var(--ion-color-primary);
  --color: #fff;
  color: #fff;
  background: var(--ion-color-primary);
  border-color: var(--ion-color-primary);
}

.check-chip.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Empty state ────────────────────────────────────────────── */
.empty-state {
  color: var(--ion-color-medium);
  font-size: 13px;
  text-align: center;
  padding: 40px 20px;
}

/* ── Menu item active ───────────────────────────────────────── */
.menu-item.active {
  --color: var(--ion-color-primary);
  font-weight: 600;
}

/* ── Misc ───────────────────────────────────────────────────── */
ion-card {
  border-radius: 12px;
}

ion-split-pane {
  --side-min-width: 220px;
  --side-max-width: 260px;
}

/* ── Dark Palette (class-based toggle) ──────────────────────── */
.ion-palette-dark {
  color-scheme: dark;

  --ion-color-primary:              #f0880d;
  --ion-color-primary-rgb:          66,140,255;
  --ion-color-primary-contrast:     #ffffff;
  --ion-color-primary-contrast-rgb: 255,255,255;
  --ion-color-primary-shade:        #3a7be0;
  --ion-color-primary-tint:         #5598ff;

  --ion-color-secondary:              #50c8ff;
  --ion-color-secondary-rgb:          80,200,255;
  --ion-color-secondary-contrast:     #ffffff;
  --ion-color-secondary-contrast-rgb: 255,255,255;
  --ion-color-secondary-shade:        #46b0e0;
  --ion-color-secondary-tint:         #62ceff;

  --ion-color-tertiary:              #6a64ff;
  --ion-color-tertiary-rgb:          106,100,255;
  --ion-color-tertiary-contrast:     #ffffff;
  --ion-color-tertiary-contrast-rgb: 255,255,255;
  --ion-color-tertiary-shade:        #5d58e0;
  --ion-color-tertiary-tint:         #7974ff;

  --ion-color-success:              #2fdf75;
  --ion-color-success-rgb:          47,223,117;
  --ion-color-success-contrast:     #000000;
  --ion-color-success-contrast-rgb: 0,0,0;
  --ion-color-success-shade:        #29c467;
  --ion-color-success-tint:         #44e283;

  --ion-color-warning:              #ffd534;
  --ion-color-warning-rgb:          255,213,52;
  --ion-color-warning-contrast:     #000000;
  --ion-color-warning-contrast-rgb: 0,0,0;
  --ion-color-warning-shade:        #e0bb2e;
  --ion-color-warning-tint:         #ffd948;

  --ion-color-danger:              #ff4961;
  --ion-color-danger-rgb:          255,73,97;
  --ion-color-danger-contrast:     #ffffff;
  --ion-color-danger-contrast-rgb: 255,255,255;
  --ion-color-danger-shade:        #e04055;
  --ion-color-danger-tint:         #ff5b71;

  --ion-color-dark:              #f4f5f8;
  --ion-color-dark-rgb:          244,245,248;
  --ion-color-dark-contrast:     #000000;
  --ion-color-dark-contrast-rgb: 0,0,0;
  --ion-color-dark-shade:        #d7d8da;
  --ion-color-dark-tint:         #f5f6f9;

  --ion-color-medium:              #989aa2;
  --ion-color-medium-rgb:          152,154,162;
  --ion-color-medium-contrast:     #000000;
  --ion-color-medium-contrast-rgb: 0,0,0;
  --ion-color-medium-shade:        #86888f;
  --ion-color-medium-tint:         #a2a4ab;

  --ion-color-light:              #222428;
  --ion-color-light-rgb:          34,36,40;
  --ion-color-light-contrast:     #ffffff;
  --ion-color-light-contrast-rgb: 255,255,255;
  --ion-color-light-shade:        #1e2023;
  --ion-color-light-tint:         #383a3e;

  --ion-background-color:     #121212;
  --ion-background-color-rgb: 18,18,18;
  --ion-text-color:           #ffffff;
  --ion-text-color-rgb:       255,255,255;
  --ion-border-color:         #222222;

  --ion-color-step-50:  #1e1e1e;
  --ion-color-step-100: #2a2a2a;
  --ion-color-step-150: #363636;
  --ion-color-step-200: #414141;
  --ion-color-step-250: #4d4d4d;
  --ion-color-step-300: #595959;
  --ion-color-step-350: #656565;
  --ion-color-step-400: #717171;
  --ion-color-step-450: #7d7d7d;
  --ion-color-step-500: #898989;
  --ion-color-step-550: #949494;
  --ion-color-step-600: #a0a0a0;
  --ion-color-step-650: #acacac;
  --ion-color-step-700: #b8b8b8;
  --ion-color-step-750: #c4c4c4;
  --ion-color-step-800: #d0d0d0;
  --ion-color-step-850: #dbdbdb;
  --ion-color-step-900: #e7e7e7;
  --ion-color-step-950: #f3f3f3;

  --ion-item-background:     #1e1e1e;
  --ion-toolbar-background:  #1f1f1f;
  --ion-tab-bar-background:  #1f1f1f;
  --ion-card-background:     #1e1e1e;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .stat-value {
    font-size: 28px;
  }

  .srv-table th:nth-child(5),
  .srv-table td:nth-child(5),
  .srv-table th:nth-child(6),
  .srv-table td:nth-child(6) {
    display: none;
  }
}