/* pm-theme-light.css — the "Light" theme.
 *
 * Mostly token values (see pm-tokens.css): components, pages and scripts take
 * their colours from those. The rules below the tokens only cover what tokens
 * cannot reach: Bootstrap's dark-variant classes, which the Hub's markup uses,
 * and a softer depth, since shadows that read on near-black look heavy on white.
 *
 * Loaded by hubHead and by the standalone login and reset pages. Everything is
 * scoped to html[data-pm-theme="light"], so it does nothing in the dark themes.
 */
html[data-pm-theme="light"] {
  color-scheme: light;
  background-color: #f3f5f8;

  /* Surfaces */
  --pm-bg: #f3f5f8;
  --pm-bg-soft: #e9edf2;
  --pm-panel: #ffffff;
  --pm-page-top: #f3f5f8;
  --pm-page-glow-1: #e3edf7;
  --pm-page-glow-2: #e9e8f6;
  --pm-surface-top: #ffffff;
  --pm-surface-bottom: #ffffff;
  --pm-hero-top: #ffffff;
  --pm-hero-bottom: #f7f9fb;
  --pm-kpi-top: #ffffff;
  --pm-kpi-bottom: #f7f9fb;
  --pm-navbar-bg: rgba(255, 255, 255, 0.92);
  --pm-popover: #ffffff;
  --pm-popover-glass: rgba(255, 255, 255, 0.98);
  --pm-code-bg: #eef1f5;
  --pm-overlay: rgba(30, 40, 55, 0.42);
  --pm-preview-bg: #e9edf2;
  --pm-map-bg: #dfe5ec;

  /* Lines */
  --pm-border: #d3dae3;
  --pm-border-strong: #aeb9c7;

  /* Text */
  --pm-text: #18202b;
  --pm-muted: #566373;
  --pm-soft-text: #566373;
  --pm-title-from: #18202b;
  --pm-title-via: #1f3a54;
  --pm-link: #0b62b5;
  --pm-link-hover: #084a8a;

  /* Accents: darker than the dark theme's, because these are also text */
  --pm-brand: #0a7059;
  --pm-warning: #9a6200;
  --pm-danger: #c8372b;
  --pm-accent: #1f5fd0;
  --pm-cyan: #0b7285;
  --pm-yellow: #a98a00;
  --pm-blue-fill: #1f5fd0;

  /* Status text */
  --pm-ok-text: #0a6b55;
  --pm-ok-text-strong: #0a6b55;
  --pm-ok-accent: #0a6b55;
  --pm-info-text: #1d5bb8;
  --pm-neutral-text: #4b5a6d;
  --pm-warn-text: #8a5a00;
  --pm-bad-text: #b3261e;
  --pm-bad-text-soft: #b3261e;
  --pm-bad-text-strong: #b3261e;
  --pm-violet-text: #6d35b0;

  /* Status fills, and the text that sits on them */
  --pm-amber: #b87d00;
  --pm-star: #b87d00;
  --pm-star-off: #8a96a6;
  --pm-on-accent: #ffffff;
  --pm-on-accent-rgb: 255, 255, 255;
  --pm-on-brand: #ffffff;
  --pm-on-danger: #ffffff;

  /* Translucent channels */
  --pm-ink-rgb: 24, 32, 43;
  --pm-field-rgb: 255, 255, 255;
  --pm-well-rgb: 150, 162, 178;
  --pm-shadow-rgb: 70, 85, 105;
  --pm-ok-rgb: 16, 160, 125;
  --pm-mint-rgb: 16, 160, 125;
  --pm-teal-rgb: 16, 160, 125;
  --pm-accent-rgb: 31, 95, 208;
  --pm-info-rgb: 31, 95, 208;
  --pm-neutral-rgb: 86, 99, 115;
  --pm-steel-rgb: 70, 100, 135;
  --pm-steel-2-rgb: 120, 140, 165;
  --pm-warn-rgb: 190, 135, 20;
  --pm-amber-rgb: 190, 135, 20;
  --pm-bad-rgb: 200, 55, 43;
  --pm-bad-2-rgb: 200, 55, 43;
  --pm-red-rgb: 200, 55, 43;
  --pm-violet-rgb: 109, 53, 176;
  --pm-violet-2-rgb: 109, 53, 176;
  --pm-slate-rgb: 86, 99, 115;

  /* Bootstrap */
  --bs-body-bg: #f3f5f8;
  --bs-body-color: #18202b;
  --bs-emphasis-color: #18202b;
  --bs-code-color: #a81e63;
}

/* ---- Softer depth ---- */
html[data-pm-theme="light"] .pm-hero,
html[data-pm-theme="light"] .pm-panel,
html[data-pm-theme="light"] .pm-card {
  box-shadow: 0 1px 2px rgba(var(--pm-shadow-rgb), 0.1), 0 4px 14px rgba(var(--pm-shadow-rgb), 0.07);
}
html[data-pm-theme="light"] .pm-panel:hover,
html[data-pm-theme="light"] .pm-card:hover {
  border-color: var(--pm-border-strong);
  box-shadow: 0 2px 4px rgba(var(--pm-shadow-rgb), 0.12), 0 8px 20px rgba(var(--pm-shadow-rgb), 0.1);
}
html[data-pm-theme="light"] .pm-kpi,
html[data-pm-theme="light"] .stat-card {
  box-shadow: 0 1px 2px rgba(var(--pm-shadow-rgb), 0.08);
}
html[data-pm-theme="light"] .pm-kpi:hover,
html[data-pm-theme="light"] .stat-card:hover {
  border-color: var(--pm-border-strong);
  box-shadow: 0 4px 12px rgba(var(--pm-shadow-rgb), 0.12);
}
html[data-pm-theme="light"] .pm-user-dropdown,
html[data-pm-theme="light"] .pm-modal,
html[data-pm-theme="light"] .modal-content {
  box-shadow: 0 10px 28px rgba(var(--pm-shadow-rgb), 0.22);
}

/* ---- Navbar: the markup says navbar-dark ---- */
html[data-pm-theme="light"] .navbar-dark {
  --bs-navbar-color: var(--pm-muted);
  --bs-navbar-hover-color: var(--pm-text);
  --bs-navbar-active-color: var(--pm-text);
  --bs-navbar-brand-color: var(--pm-text);
  --bs-navbar-brand-hover-color: var(--pm-text);
  --bs-navbar-toggler-border-color: var(--pm-border);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(24,32,43,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---- Bootstrap's dark-variant classes ---- */
html[data-pm-theme="light"] .bg-dark { background-color: var(--pm-panel) !important; }
html[data-pm-theme="light"] .text-light { color: var(--pm-text) !important; }
html[data-pm-theme="light"] .border-secondary { border-color: var(--pm-border) !important; }
html[data-pm-theme="light"] .btn-close-white { filter: none; }
html[data-pm-theme="light"] .btn-outline-light {
  --bs-btn-color: var(--pm-text);
  --bs-btn-border-color: var(--pm-border-strong);
  --bs-btn-hover-color: var(--pm-text);
  --bs-btn-hover-bg: rgba(var(--pm-ink-rgb), 0.07);
  --bs-btn-hover-border-color: var(--pm-border-strong);
  --bs-btn-active-color: var(--pm-text);
  --bs-btn-active-bg: rgba(var(--pm-ink-rgb), 0.12);
  --bs-btn-active-border-color: var(--pm-border-strong);
  --bs-btn-disabled-color: var(--pm-muted);
  --bs-btn-disabled-border-color: var(--pm-border);
}
html[data-pm-theme="light"] .table-dark {
  --bs-table-color: var(--pm-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--pm-border);
  --bs-table-striped-color: var(--pm-text);
  --bs-table-striped-bg: rgba(var(--pm-ink-rgb), 0.03);
  --bs-table-active-color: var(--pm-text);
  --bs-table-active-bg: rgba(var(--pm-ink-rgb), 0.06);
  --bs-table-hover-color: var(--pm-text);
  --bs-table-hover-bg: rgba(var(--pm-ink-rgb), 0.05);
}

/* ---- Form fields: page rules tint them for a dark panel ---- */
html[data-pm-theme="light"] .form-control,
html[data-pm-theme="light"] .form-select {
  border-color: var(--pm-border-strong);
  color: var(--pm-text);
}
html[data-pm-theme="light"] .form-control::placeholder { color: var(--pm-muted); }
html[data-pm-theme="light"] .form-control:disabled,
html[data-pm-theme="light"] .form-select:disabled { background-color: var(--pm-bg-soft); }
html[data-pm-theme="light"] .input-group-text {
  background-color: var(--pm-bg-soft);
  border-color: var(--pm-border-strong);
  color: var(--pm-muted);
}

/* ---- Bootstrap's bright colours are too pale for text on white ---- */
html[data-pm-theme="light"] .text-secondary,
html[data-pm-theme="light"] .text-muted { color: var(--pm-muted) !important; }
html[data-pm-theme="light"] .text-warning { color: var(--pm-warn-text) !important; }
html[data-pm-theme="light"] .text-info { color: var(--pm-cyan) !important; }
html[data-pm-theme="light"] .btn-outline-secondary {
  --bs-btn-color: var(--pm-muted);
  --bs-btn-border-color: var(--pm-border-strong);
  --bs-btn-hover-color: var(--pm-text);
  --bs-btn-hover-bg: rgba(var(--pm-ink-rgb), 0.07);
  --bs-btn-hover-border-color: var(--pm-border-strong);
  --bs-btn-active-color: var(--pm-text);
  --bs-btn-active-bg: rgba(var(--pm-ink-rgb), 0.12);
  --bs-btn-active-border-color: var(--pm-border-strong);
}
html[data-pm-theme="light"] .btn-outline-warning {
  --bs-btn-color: var(--pm-warn-text);
  --bs-btn-border-color: var(--pm-amber);
  --bs-btn-disabled-color: var(--pm-warn-text);
  --bs-btn-disabled-border-color: var(--pm-amber);
}
html[data-pm-theme="light"] .btn-outline-info {
  --bs-btn-color: var(--pm-cyan);
  --bs-btn-border-color: var(--pm-cyan);
  --bs-btn-hover-bg: var(--pm-cyan);
  --bs-btn-hover-border-color: var(--pm-cyan);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--pm-cyan);
  --bs-btn-active-border-color: var(--pm-cyan);
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-color: var(--pm-cyan);
  --bs-btn-disabled-border-color: var(--pm-cyan);
}

/* ---- Sign-in button: the darker accents take a white label ---- */
html[data-pm-theme="light"] .btn-login {
  background: linear-gradient(135deg, var(--pm-brand), var(--pm-cyan));
  color: var(--pm-on-brand);
}
html[data-pm-theme="light"] .btn-login:hover { color: var(--pm-on-brand); }

/* ---- Login and reset cards ---- */
html[data-pm-theme="light"] .login-card {
  box-shadow: 0 10px 28px rgba(var(--pm-shadow-rgb), 0.16);
}
html[data-pm-theme="light"] .login-card .form-control::placeholder { color: var(--pm-muted); }

/* ---- A label on a selected tile needs more than the dark theme's 70% ---- */
html[data-pm-theme="light"] .bed-tile.active .bed-tile-l { color: var(--pm-on-accent); }