/* The JS toggles visibility via the `hidden` attribute; author display rules
 * (.boot/.app/... use display:flex) would silently override the UA's
 * [hidden]{display:none} — force it, or every hide() is a no-op. */
[hidden] { display: none !important; }

:root {
  --gold: #C4973B;
  --gold-light: #E8D5A3;
  --gold-dim: rgba(196,151,59,0.4);
  --gold-subtle: rgba(196,151,59,0.12);
  --ink: #0A0A0A;
  --ink-1: #111111;
  --ink-2: #1A1A1A;
  --ink-3: #242424;
  --cream: #F5F0E8;
  --cream-dim: rgba(245,240,232,0.6);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', sans-serif;

  --topbar-h: 56px;
  --sidebar-w: 248px;
  /* collapsed = exactly list-pad(0.6rem) + tile-pad(0.65rem) + badge 34px +
   * tile-pad + list-pad, so the badge column NEVER moves on collapse/expand —
   * the width change only clips the text area. */
  --sidebar-w-collapsed: 74px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ─── Boot overlay ───────────────────────────────────────── */
.boot {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem; background: var(--ink-1);
}
.boot-mark {
  font-family: var(--serif); font-weight: 700; font-size: 1.6rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.boot-text { font-size: 0.82rem; color: var(--cream-dim); letter-spacing: 0.04em; }
.boot-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--gold-subtle); border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── App layout ─────────────────────────────────────────── */
.app { display: flex; flex-direction: column; height: 100vh; }

.topbar {
  position: relative; z-index: 30;  /* dropdown must overlay the iframe below */
  height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0 1.1rem;
  background: rgba(10,10,10,0.92);
  border-bottom: 1px solid var(--gold-subtle);
  backdrop-filter: blur(20px);
}
.wordmark {
  font-family: var(--serif); font-weight: 700; font-size: 1.25rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  text-decoration: none; white-space: nowrap;
}
.module-sep { color: var(--gold-dim); font-family: var(--serif); font-size: 1.2rem; }
.current-module {
  font-family: var(--serif); font-size: 1.15rem; color: var(--gold-light);
  white-space: nowrap; letter-spacing: 0.01em;
}
.topbar-spacer { flex: 1; }

/* Clickable account entry point — opens the account app in the module iframe.
 * Button resets so it keeps the exact look of the former <div>, plus a hover /
 * active affordance mirroring the sidebar module tiles. */
.user-block {
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.15; text-align: right; min-width: 0;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 0.32rem 0.55rem; cursor: pointer; font-family: var(--sans);
  transition: background-color 0.18s, border-color 0.18s;
}
.user-block:hover { background: var(--ink-2); border-color: rgba(196,151,59,0.18); }
.user-block.active { background: var(--ink-2); border-color: var(--gold-dim); }
.user-name { font-size: 0.82rem; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.user-company { font-size: 0.68rem; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

.logout-btn {
  background: transparent; border: 1px solid var(--gold-dim); color: var(--gold-light);
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.45rem 0.9rem; border-radius: 5px; cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.logout-btn:hover { border-color: var(--gold); background: var(--gold-subtle); }

.icon-btn {
  background: transparent; border: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; flex-shrink: 0;
}
.icon-btn:hover { background: var(--gold-subtle); }
.burger, .burger::before, .burger::after {
  display: block; width: 18px; height: 2px; background: var(--gold-light); border-radius: 2px;
  position: relative; transition: 0.2s;
}
.burger::before, .burger::after { content: ''; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }

.body { flex: 1; display: flex; min-height: 0; }

/* ─── Sidebar ────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--ink-1); border-right: 1px solid var(--gold-subtle);
  overflow-y: auto; overflow-x: hidden;
  transition: width 0.22s ease;
}
.app.collapsed .sidebar { width: var(--sidebar-w-collapsed); }

.module-list { list-style: none; padding: 0.7rem 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }

.module-tile {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem 0.65rem; border-radius: 8px; cursor: pointer;
  /* only paint props — transitioning layout (padding etc.) desyncs from the
   * sidebar width animation and makes the tiles judder */
  border: 1px solid transparent; transition: background-color 0.18s, border-color 0.18s;
  width: 100%; background: transparent; text-align: left; font-family: var(--sans); color: var(--cream);
}
.module-tile:hover { background: var(--ink-2); border-color: rgba(196,151,59,0.18); }
.module-tile.active { background: var(--ink-2); border-color: var(--gold-dim); }
.module-tile.active .tile-badge { background: var(--gold); color: var(--ink); border-color: var(--gold); }

.module-tile.locked { cursor: not-allowed; opacity: 0.42; }
.module-tile.locked:hover { background: transparent; border-color: transparent; }

.tile-badge {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em;
  color: var(--gold-light); border: 1px solid var(--gold-dim); background: var(--ink-3);
}
.tile-text {
  display: flex; flex-direction: column; min-width: 0;
  /* fade in AFTER the width animation has mostly finished (0.1s delay) — a hard
   * display:none flip mid-animation is what caused the collapse judder */
  opacity: 1; transition: opacity 0.12s ease 0.1s;
}
.tile-name { font-size: 0.86rem; color: var(--cream); white-space: nowrap; }
.tile-sub { font-size: 0.68rem; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* nowrap like name/sub — without it the hint re-wraps to two lines while the
 * sidebar width animates, locked tiles grow taller and everything below them
 * shifts down */
.tile-hint { font-size: 0.6rem; color: var(--gold-dim); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 0.1rem; white-space: nowrap; }

/* Collapsed: badge column stays exactly where it is (no justify/padding flip —
 * that made the icons jump); the narrower sidebar simply clips the text, which
 * fades out immediately (no exit delay). */
.app.collapsed .tile-text { opacity: 0; transition: opacity 0.08s ease; }

/* ─── Main / iframe ──────────────────────────────────────── */
.main { flex: 1; position: relative; min-width: 0; background: var(--ink); }
.iframe-host, .iframe-host iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.iframe-host iframe { background: var(--ink); }

.module-loading, .module-error {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; background: var(--ink-1);
}
.module-error-inner {
  max-width: 420px; text-align: center; padding: 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.module-error-icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.6rem;
  color: var(--gold); border: 1.5px solid var(--gold-dim);
}
.module-error h2 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--gold-light); }
.module-error-msg { font-size: 0.86rem; color: var(--cream-dim); line-height: 1.6; }

.gold-btn {
  background: var(--gold); color: var(--ink); border: none; border-radius: 6px;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.7rem 1.5rem; cursor: pointer; transition: background 0.2s;
}
.gold-btn:hover { background: var(--gold-light); }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 760px) {
  .app:not(.collapsed) .sidebar {
    position: absolute; top: var(--topbar-h); bottom: 0; left: 0; z-index: 20;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .user-company { display: none; }
  .current-module, .module-sep { display: none; }
}

/* ─── User dropdown (below the user block) ───────────────── */
.user-menu { position: relative; }
.user-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 200px; padding: 0.35rem;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--ink-1); border: 1px solid var(--gold-dim); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}
.menu-item {
  display: flex; align-items: center; gap: 0.65rem;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  padding: 0.55rem 0.75rem; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 0.84rem; color: var(--cream);
  transition: background-color 0.15s, border-color 0.15s;
}
.menu-item:hover { background: var(--ink-2); border-color: rgba(196,151,59,0.18); }
.menu-item .mi {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: var(--cream-dim); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.menu-item.danger { color: #e07070; }
.menu-item.danger .mi { stroke: #e07070; }
.menu-item.danger:hover { background: rgba(224,112,112,0.08); border-color: rgba(224,112,112,0.25); }

/* header block: name + email, clickable -> Profil (mirrors the module menus) */
.menu-header {
  display: flex; flex-direction: column; gap: 0.15rem;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  padding: 0.6rem 0.75rem; cursor: pointer; text-align: left; font-family: var(--sans);
  transition: background-color 0.15s;
}
.menu-header:hover { background: var(--ink-2); }
.menu-h-name { font-size: 0.86rem; font-weight: 600; color: var(--cream); }
.menu-h-email { font-size: 0.7rem; color: var(--cream-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu-divider { height: 1px; background: var(--gold-subtle); margin: 0.3rem 0.35rem; }

/* invisible full-viewport click-catcher while the user menu is open — sits
 * above the iframe (which swallows clicks) but below the topbar (z30), so
 * topbar clicks still hit their targets and close via the document handler. */
.menu-backdrop { position: fixed; inset: 0; z-index: 20; background: transparent; }