/* App Portal — base styles
 *
 * Token architecture follows /check-branding:
 *   :root       holds only theme-independent brand constants and layout vars.
 *   [data-bs-theme="dark|light"] hold the semantic colour tokens.
 *
 * Bootstrap's own [data-bs-theme] CSS still drives component colours; these
 * tokens are for our custom chrome (header, sidebar, cards).
 */

/* ── Self-hosted Barlow font (weights 400 / 500 / 600 / 700 / 800) ────── */
@font-face {
  font-family: 'Barlow';
  src: url('/vendor/fonts/barlow/barlow-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/vendor/fonts/barlow/barlow-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/vendor/fonts/barlow/barlow-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/vendor/fonts/barlow/barlow-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/vendor/fonts/barlow/barlow-latin-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ── Brand constants & layout vars (theme-independent) ────────────────── */
:root {
  --herotel-orange:   #FF5000;
  --herotel-charcoal: #3D3B34;
  --herotel-teal:     #17A2B1;

  --header-height: 56px;
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 56px;
  --sidebar-transition: width 0.2s ease;
}

/* ── Dark mode semantic tokens ────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --bg:            #18181b;
  --surface:       #303036;
  --surface-2:     #28282d;
  --surface-hover: #3c3c42;
  --text:          #ececea;
  --text-2:        #a8a8a8;
  --text-3:        #787878;
  --border:        #454550;
  --shadow:        0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.45);
}

/* ── Light mode semantic tokens ───────────────────────────────────────── */
[data-bs-theme="light"] {
  --bg:            #f7f5f2;
  --surface:       #ffffff;
  --surface-2:     #f0ece6;
  --surface-hover: #f0ece6;
  --text:          #3D3B34;
  --text-2:        #656359;
  --text-3:        #9B9993;
  --border:        #CDCCC9;
  --shadow:        0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.12);
}

html { font-size: 15px; }

body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: 'Barlow', Arial, system-ui, sans-serif;
  padding-top: calc(var(--header-height) + 3px);
}

/* ── Fixed header ─────────────────────────────────────────────────────── */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--herotel-charcoal);
  border-bottom: 3px solid var(--herotel-orange);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 0.5rem;
  z-index: 1050;
  color: #fff;
}

.app-header-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.app-header-brand:hover { color: #fff; }

/* Herotel logo: orange PNG re-cast to white via filter, per /check-branding
   "On charcoal/dark backgrounds: White logo (inverted)". The wordmark in the
   PNG sits below the image's geometric centre, so a small upward nudge brings
   its baseline in line with the title text next to it. */
.app-header-logo {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  position: relative;
  top: -2px;
}

.app-header-title {
  white-space: nowrap;
  line-height: 1;
}
@media (max-width: 576px) {
  .app-header-title { display: none; }
}

.app-header-spacer { flex: 1; }

.app-header-user {
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  margin-right: 0.5rem;
  white-space: nowrap;
}

.theme-toggle,
.sidebar-toggle,
.app-header-logout {
  background: none;
  border: 0;
  color: #fff;
  font-size: 1rem;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  border-radius: 4px;
}
.theme-toggle:hover,
.sidebar-toggle:hover,
.app-header-logout:hover {
  color: var(--herotel-orange);
  background: rgba(255,255,255,0.08);
}

.app-header-admin-link {
  color: #fff;
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: 0.3rem;
  margin-right: 0.5rem;
  line-height: 1;
  font-size: 0.9rem;
}
.app-header-admin-link:hover {
  color: var(--herotel-orange);
  background: rgba(255, 255, 255, 0.08);
}

/* ── Portal main (no sidebar layout) ──────────────────────────────────── */
.portal-main {
  padding: 1.5rem;
}

/* ── Tag pills (portal tiles + admin DataTable tags column) ─────────────
   Lives in app.css (loaded by every layout) so the same class works in
   both contexts. .app-tile-tag-new is the special Herotel-orange "New"
   auto-badge applied by the portal route. */
.app-tile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.app-tile-tag {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.06));
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
.app-tile-tag-new {
  background: var(--herotel-orange);
  color: #fff;
}
.app-tile-tag-unrestricted {
  background: #198754;   /* Bootstrap success-green — reads as "open access" */
  color: #fff;
}
.app-tile-tag-restricted {
  background: #dc3545;   /* Bootstrap danger-red — reads as "gated access" */
  color: #fff;
}