/* R.M. Wester Employee Portal.
   Ported from the RadCal client-portal hub (radcal main: includes/family_css.html,
   client/dashboard.html): dark fixed navbar with gold bottom bar, light grey page,
   borderless soft-shadow cards, tinted icon squares, stretched-link hub tiles.
   Gold #C9922A is the single accent (portal-accent-gold). Light + dark mode. */

:root {
  --pa: #C9922A; --pa-rgb: 201,146,42;
  --pa-btn: #C9922A; --pa-btn-hover: #B07F1E; --pa-on: #1A1A1A;
  --pa-text: #7D5A12; --pa-text-rgb: 125,90,18; --pa-text-hover-rgb: 94,67,13;
  --pa-tint: rgba(201,146,42,.16);
  --hub-page: #f4f6f9; --hub-ink: #1A1A1A; --hub-muted: #6c757d;
  --hub-card: #fff; --hub-quiet: #fbfcfd; --hub-shadow: 0 4px 12px rgba(0,0,0,.05);
  --hub-shadow-hover: 0 8px 22px rgba(0,0,0,.09);
}
[data-bs-theme="dark"] {
  --pa-text: #E0B55A; --pa-text-rgb: 224,181,90; --pa-text-hover-rgb: 238,201,122;
  --pa-tint: rgba(201,146,42,.22);
  --hub-page: #121418; --hub-ink: #e9ecef; --hub-muted: #9aa3ad;
  --hub-card: #1b1f24; --hub-quiet: #171a1f; --hub-shadow: 0 4px 12px rgba(0,0,0,.35);
  --hub-shadow-hover: 0 8px 22px rgba(0,0,0,.55);
  --bs-body-bg: #121418; --bs-body-color: #e9ecef;
}

body { padding-top: 70px; background: var(--hub-page); color: var(--hub-ink); }
.navbar-brand { font-weight: 800; letter-spacing: .02em; }
.card { box-shadow: var(--hub-shadow); border: 0; background: var(--hub-card); }
.card-header { background: var(--hub-card); font-weight: 600; border-bottom: 1px solid rgba(0,0,0,.06); }
[data-bs-theme="dark"] .card-header { border-bottom-color: rgba(255,255,255,.08); }

/* Portal theme (gold) over Bootstrap */
.portal-theme {
  --bs-primary: var(--pa); --bs-primary-rgb: var(--pa-rgb);
  --bs-link-color: var(--pa-text); --bs-link-color-rgb: var(--pa-text-rgb);
  --bs-link-hover-color-rgb: var(--pa-text-hover-rgb);
  --bs-primary-text-emphasis: var(--pa-text);
  --bs-primary-bg-subtle: var(--pa-tint);
  --bs-primary-border-subtle: rgba(var(--pa-rgb), .35);
}
.portal-theme .navbar.bg-dark { border-bottom: 3px solid var(--pa); background-color: #1a1d21 !important; }
.portal-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; letter-spacing: .01em; }
.portal-logo { height: 30px; width: auto; }
.portal-login-logo { height: 64px; width: auto; }
.portal-theme h1, .portal-theme h2, .portal-theme h3, .portal-theme .h4 { color: var(--hub-ink); }
.portal-theme .text-muted { color: var(--hub-muted) !important; }
.portal-theme .btn-primary {
  --bs-btn-bg: var(--pa-btn); --bs-btn-border-color: var(--pa-btn); --bs-btn-color: var(--pa-on);
  --bs-btn-hover-bg: var(--pa-btn-hover); --bs-btn-hover-border-color: var(--pa-btn-hover); --bs-btn-hover-color: var(--pa-on);
  --bs-btn-active-bg: var(--pa-btn-hover); --bs-btn-active-border-color: var(--pa-btn-hover); --bs-btn-active-color: var(--pa-on);
  --bs-btn-focus-shadow-rgb: var(--pa-rgb); font-weight: 700;
}
.portal-theme .btn-outline-primary {
  --bs-btn-color: var(--pa-text); --bs-btn-border-color: var(--pa);
  --bs-btn-hover-bg: var(--pa-btn); --bs-btn-hover-border-color: var(--pa-btn); --bs-btn-hover-color: var(--pa-on);
  --bs-btn-active-bg: var(--pa-btn-hover); --bs-btn-active-border-color: var(--pa-btn-hover); --bs-btn-active-color: var(--pa-on);
  --bs-btn-focus-shadow-rgb: var(--pa-rgb);
}
.portal-theme .form-control:focus, .portal-theme .form-select:focus {
  border-color: var(--pa); box-shadow: 0 0 0 .2rem rgba(var(--pa-rgb), .25); }

/* Welcome card */
.hub-welcome .card-body { padding: .9rem 1.25rem; }
.hub-welcome { border-left: 3px solid var(--pa); }
.admin-pill { background: var(--pa-tint); color: var(--pa-text); border: 1px solid rgba(var(--pa-rgb), .45); font-weight: 600; }
.hub-section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--hub-muted) !important; margin: 0 0 .6rem; }

/* Hub tiles */
.dash-icon { width: 2.1rem; height: 2.1rem; border-radius: .5rem; display: inline-flex; align-items: center;
  justify-content: center; font-size: .95rem; flex-shrink: 0; }
.tile-primary .dash-icon { background: rgba(13,110,253,.1); color: #0d6efd; }
.tile-success .dash-icon { background: rgba(25,135,84,.1); color: #198754; }
.tile-danger  .dash-icon { background: rgba(220,53,69,.1); color: #dc3545; }
/* Warning is amber (rmw_ui --rmw-warning), not brand gold. */
.tile-warning .dash-icon { background: rgba(245,158,11,.18); color: #C2620A; }
[data-bs-theme="dark"] .tile-warning .dash-icon { background: rgba(251,146,60,.18); color: #FB9A3C; }
.tile-info    .dash-icon { background: rgba(13,202,240,.12); color: #0a8ea8; }
.tile-secondary .dash-icon { background: rgba(33,37,41,.07); color: #495057; }
[data-bs-theme="dark"] .tile-primary .dash-icon { background: rgba(110,168,254,.16); color: #8bb9fe; }
[data-bs-theme="dark"] .tile-success .dash-icon { background: rgba(117,183,152,.16); color: #8fd1ae; }
[data-bs-theme="dark"] .tile-danger  .dash-icon { background: rgba(234,134,143,.16); color: #f1a0a8; }
[data-bs-theme="dark"] .tile-info    .dash-icon { background: rgba(110,223,246,.14); color: #7fdcf0; }
[data-bs-theme="dark"] .tile-secondary .dash-icon { background: rgba(255,255,255,.08); color: #c3c9cf; }

.hub-tile { border: 1px solid transparent; }
.hub-tile .card-body { padding: 1.1rem 1.25rem; }
.hub-tile-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.hub-tile .tile-title { font-size: 1rem; font-weight: 600; color: var(--hub-ink); text-decoration: none; }
.hub-tile-text { font-size: .875rem; color: var(--hub-muted); margin-bottom: .75rem; }
.hub-links { font-size: .825rem; margin-top: .5rem; }
.hub-links a { text-decoration: none; }
.hub-tile-quiet { background: var(--hub-quiet); box-shadow: 0 2px 6px rgba(0,0,0,.035); }
.hub-tile-quiet .tile-title { font-size: .95rem; }

/* Clickable cards: title is a stretched-link; inner links sit above it */
.hub-clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.hub-clickable:hover { transform: translateY(-2px); box-shadow: var(--hub-shadow-hover); border-color: rgba(var(--pa-rgb), .65); }
.hub-clickable .hub-links a, .hub-clickable .hub-inner { position: relative; z-index: 2; }
.hub-clickable .hub-links a:hover, .hub-clickable .hub-inner:hover { text-decoration: underline; }
a.tile-title:hover { color: var(--pa-text); }
.hub-card-link:focus { outline: none; }
.hub-card-link:focus-visible { outline: 3px solid var(--pa); outline-offset: 2px; border-radius: .2rem; }
@supports selector(:has(a)) {
  .hub-card-link:focus-visible { outline: none; }
  .hub-clickable:has(.hub-card-link:focus-visible) { outline: 3px solid var(--pa); outline-offset: 3px; }
}

/* Coming soon: muted, no link */
.hub-tile-soon { opacity: .72; box-shadow: none; border: 1px dashed rgba(0,0,0,.12); background: transparent; }
[data-bs-theme="dark"] .hub-tile-soon { border-color: rgba(255,255,255,.14); }
.hub-tile-soon .dash-icon { filter: grayscale(1); }
.soon-pill { background: transparent; color: var(--hub-muted); border: 1px solid currentColor; font-weight: 600; }
.sep-pill, .google-pill { font-weight: 600; }
[data-bs-theme="dark"] .sep-pill, [data-bs-theme="dark"] .google-pill { background: #262b31 !important; color: #dee2e6 !important; border-color: #3a4048 !important; }

/* Login */
.login-card .card-header { border-top: 3px solid var(--pa); }
.login-divider { display: flex; align-items: center; gap: .75rem; color: var(--hub-muted); font-size: .8rem; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; border-top: 1px solid rgba(0,0,0,.1); }
[data-bs-theme="dark"] .login-divider::before, [data-bs-theme="dark"] .login-divider::after { border-top-color: rgba(255,255,255,.12); }

@media print {
  .navbar, .btn { display: none !important; }
  body { padding-top: 0; background: #fff; }
  .card { box-shadow: none; }
}

/* ---- Legacy classes used by the static UI mocks under /preview/ ---- */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #c8962a;
  color: #111;
  border-radius: 0.25rem;
}

.navbar-fieldwork {
  background-color: #1b365d;
}

.tile-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}

.tile-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1.25rem rgba(17, 24, 39, 0.12) !important;
  color: inherit;
}

[data-bs-theme="dark"] .tile-card:hover,
[data-theme="dark"] .tile-card:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.45) !important;
}

.tile-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.tile-fieldwork { background: #e7eef6; color: #3d5a80; }
.tile-time { background: #e8f0ea; color: #3d6b4a; }
.tile-radcal { background: #e7eef8; color: #3d5a80; }
.tile-qe { background: #eee8f4; color: #5c4d7a; }
.tile-radlab { background: #e8f2ee; color: #3d6b5c; }
.tile-waterlab { background: #e6f1f5; color: #3a6a7c; }

[data-bs-theme="dark"] .tile-fieldwork,
[data-theme="dark"] .tile-fieldwork { background: rgba(125, 162, 214, 0.18); color: #9bb6d9; }
[data-bs-theme="dark"] .tile-time,
[data-theme="dark"] .tile-time { background: rgba(90, 160, 110, 0.18); color: #9dcaab; }
[data-bs-theme="dark"] .tile-radcal,
[data-theme="dark"] .tile-radcal { background: rgba(13, 110, 253, 0.22); color: #9ec0ff; }
[data-bs-theme="dark"] .tile-qe,
[data-theme="dark"] .tile-qe { background: rgba(140, 110, 190, 0.2); color: #c4b3e0; }
[data-bs-theme="dark"] .tile-radlab,
[data-theme="dark"] .tile-radlab { background: rgba(80, 160, 130, 0.2); color: #9dccc0; }
[data-bs-theme="dark"] .tile-waterlab,
[data-theme="dark"] .tile-waterlab { background: rgba(70, 140, 170, 0.2); color: #9cc5d6; }

.preview-banner {
  background: #fff3cd;
  color: #664d03;
  text-align: center;
  padding: 0.55rem 1rem;
  font-weight: 600;
  border-bottom: 1px solid #ffe69c;
}

[data-bs-theme="dark"] .preview-banner,
[data-theme="dark"] .preview-banner {
  background: #4d3b08;
  color: #ffe69c;
  border-color: #6b5420;
}

.btn-rmw {
  background: #c8962a;
  border-color: #c8962a;
  color: #111;
  font-weight: 700;
}

.btn-rmw:hover {
  background: #b07f1e;
  border-color: #b07f1e;
  color: #111;
}

.login-panel {
  max-width: 26rem;
}

:root { --rmw-gold: #c8962a; --rmw-gold-2: #b07f1e; }

.navbar.bg-dark {
  border-bottom: 3px solid var(--rmw-gold);
}

.eyebrow-gold {
  color: var(--rmw-gold-2);
  letter-spacing: 0.12em;
}

.tile-card {
  border: 1px solid transparent;
}

.tile-card:hover {
  border-color: var(--rmw-gold);
}

.form-control:focus {
  border-color: var(--rmw-gold);
  box-shadow: 0 0 0 0.2rem rgba(200, 150, 42, 0.25);
}