/* ══════════════════════════════════════════════════════════════
   BrickFlow – App Shell Layout
   Refererar BARA --color-*, --space-*, --text-*, --shadow-*,
   --radius-*, --weight-*, --transition-*, --z-* från tokens.css.
   Inga hårdkodade hex-värden.
   ══════════════════════════════════════════════════════════════ */

/* ── Dashboard: bakgrund #e5f0f0, kort vita med teal-skugga */
#dashboardView {
  --color-bg-surface:   #ffffff;   /* kort — vita, syns tydligt mot bakgrunden */
  --color-bg-surface-2: #f2f8f8;
  --color-bg-muted:     #e5f0f0;
  --color-bg-subtle:    #d6e8e7;
  --color-bg-app:       #e5f0f0;
  background: #e5f0f0 !important;
}

/* Ge alla kort i dashboarden en tydlig skugga så de lyfter sig */
#dashboardView .card,
#dashboardView .u-card,
#dashboardView [style*="border-radius:12px"],
#dashboardView [style*="border-radius:14px"] {
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(72,140,146,0.10), 0 4px 16px rgba(72,140,146,0.07) !important;
  border-color: rgba(72,140,146,0.15) !important;
}

/* ── Sidsynlighet ─────────────────────────────────────────────── */
#authPage,
#appPage,
#signingPage,
#employeePage        { display: none !important; }

#authPage.active,
#appPage.active,
#signingPage.active,
#employeePage.active { display: block !important; }

/* ── Yttre wrapper ────────────────────────────────────────────── */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg-app);
}

/* ══════════════════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  padding: 0 var(--space-7);
  background: var(--color-bg-topbar);
  border-bottom: 1px solid var(--color-bg-topbar-border);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  gap: var(--space-5);
  flex-shrink: 0;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-brand);
  font-weight: var(--weight-black);
  font-size: var(--text-lg);
  color: #fff;
  letter-spacing: -0.5px;
  text-decoration: none;
  white-space: nowrap;
  margin-right: var(--space-8);
  flex-shrink: 0;
}
.topbar-logo span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--color-brand);
  border-radius: var(--radius-md);
  font-family: var(--font-brand);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  color: #fff;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.topbar-logo img { height: 28px; width: auto; }

/* Nav */
.top-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.top-nav::-webkit-scrollbar { display: none; }

.top-nav-item,
.top-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
  text-decoration: none;
}
.top-nav-item:hover,
.top-nav-btn:hover  { background: rgba(255,255,255,0.08); color: #fff; }
.top-nav-item.active,
.top-nav-btn.active { background: var(--color-brand); color: #fff; font-weight: var(--weight-semi); }

.top-nav-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.12);
  margin: 0 var(--space-1);
  flex-shrink: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-shrink: 0;
}

.topbar-company {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: rgba(255,255,255,0.5);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-new {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--color-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  cursor: pointer;
  transition: background var(--transition-base);
  white-space: nowrap;
}
.btn-new:hover { background: var(--color-brand-dark); }

/* Avatar */
.topbar-avatar { position: relative; display: flex; align-items: center; }
.topbar-avatar > span,
.topbar-avatar > button,
.topbar-avatar > .avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  border: none;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
  user-select: none;
  flex-shrink: 0;
}
.topbar-avatar > span:hover,
.topbar-avatar > button:hover,
.topbar-avatar > .avatar-btn:hover { background: var(--color-brand-dark); }

.avatar-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 190px;
  /* transparent top padding bridges the gap so hover doesn't break */
  padding-top: 8px;
  z-index: var(--z-modal);
}
.avatar-dropdown-inner {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  overflow: hidden;
}
.topbar-avatar:hover .avatar-dropdown,
.avatar-dropdown.open { display: block; }

.avatar-dropdown-inner a,
.avatar-dropdown-inner button {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-7);
  text-align: left;
  background: none;
  border: none;
  font-size: var(--text-md);
  color: var(--color-text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.avatar-dropdown-inner a:hover,
.avatar-dropdown-inner button:hover { background: var(--color-bg-app); }
.avatar-dropdown-inner hr { margin: var(--space-1) 0; border: none; border-top: 1px solid var(--color-border); }


/* ══════════════════════════════════════════════════════════════
   APP BODY
   ══════════════════════════════════════════════════════════════ */
.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  padding: var(--space-5) 0;
}

.sidebar-section-label {
  padding: var(--space-4) var(--space-7) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.sidebar-nav { list-style: none; margin: 0; padding: 0 var(--space-3); }

.sidebar-nav li a,
.sidebar-nav li button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 7px var(--space-4);
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-nav li a:hover,
.sidebar-nav li button:hover {
  background: var(--color-bg-app);
  color: var(--color-brand);
}
.sidebar-nav li a.active,
.sidebar-nav li button.active {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  font-weight: var(--weight-semi);
}

.main-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-bg-app);
}

#view-root {
  min-height: 100%;
  padding: 0;
  position: relative;
  /* will-change:opacity borttaget — skapade ett cachat GPU-lager som dolde dynamiskt
     innehåll (t.ex. faktura-preview) tills nästa resize-event tvingade omladdning.
     Opacity-transitionerna i routern fungerar utan denna hint. */
}

/* Shimmer vid laddning */
#view-root.view-root--busy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(
    90deg,
    rgba(248,248,246,0.65) 0%,
    rgba(240,240,238,0.85) 50%,
    rgba(248,248,246,0.65) 100%
  );
  background-size: 200% 100%;
  animation: bf-view-shimmer 1.1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bf-view-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  #view-root.view-root--busy::before { animation: none; background: rgba(248,248,246,0.75); }
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-status-error-mid);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  margin-left: 2px;
}

/* ── Gammal responsiv (behålls för bakåtkompatibilitet) ──────── */
@media (max-width: 768px) {
  .main-content { padding-bottom: 60px; }
}

/* ══════════════════════════════════════════════════════════════
   ICON SIDEBAR — Agendrix-inspirerad vänsternavigation
   ══════════════════════════════════════════════════════════════ */

/* Göm gamla topbar och sidebar */
.topbar  { display: none !important; }
.sidebar { display: none !important; }

/* Appens yttre wrapper */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── App Topbar ────────────────────────────────────────────── */
.app-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: #f2f8f8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 72px; /* lämna plats för icon-sidebar (60px) + gap */
  z-index: calc(var(--z-topbar) + 10);
  border-bottom: 1px solid rgba(72, 140, 146, 0.20);
  flex-shrink: 0;
}

/* Vänster: företagsnamn */
.app-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-topbar-company-name {
  font-size: 15px;
  font-weight: 700;
  color: #0F4F55;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Höger: notiser + avatar */
.app-topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Topbar-knappar (bell, avatar) */
.app-topbar-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3A7A80;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
  position: relative;
}
.app-topbar-btn:hover {
  background: rgba(72, 140, 146, 0.15);
  color: #0F4F55;
}

/* Topbar avatar-knapp */
.app-topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #488C92;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background var(--transition-base);
}
.app-topbar-avatar:hover { background: #3A7A80; }

.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-left: 60px;  /* icon-sidebar bredd */
  margin-top: 52px;   /* app-topbar höjd */
}

.main-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff; /* Default vit — vyer med egna bakgrunder (t.ex. dashboard) sätter sin egen */
}

/* ── Icon Sidebar ──────────────────────────────────────────── */
.icon-sidebar {
  width: 60px;
  flex-shrink: 0;
  background: #f2f8f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  position: fixed;
  left: 0;
  top: 52px;   /* börjar under app-topbar */
  bottom: 0;
  z-index: var(--z-sidebar);
  overflow: visible; /* Flyouts stickar ut */
  border-right: 1px solid rgba(72, 140, 146, 0.20);
}

/* Ingen separat logo i sidebaren — den sitter i app-topbar */
.icon-sidebar-brand { display: none; }

/* Navigations-container */
.icon-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  align-items: center;
}

/* Varje nav-rad: ikon + flyout */
.icon-nav-item {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Ikon-knapp */
.icon-nav-btn {
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #488C92; /* teal-ikoner på ljus bakgrund */
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
  position: relative;
  flex-shrink: 0;
}
.icon-nav-btn svg { pointer-events: none; }
.icon-nav-btn:hover,
.icon-nav-item:hover .icon-nav-btn {
  background: rgba(72, 140, 146, 0.15);
  color: #0F4F55;
}
.icon-nav-btn.active {
  background: rgba(72, 140, 146, 0.20);
  color: #0F4F55;
}

/* Aktiv nav-item (aktuell vy tillhör denna grupp) */
.icon-nav-item.active .icon-nav-btn {
  background: rgba(72, 140, 146, 0.20);
  color: #0F4F55;
}
/* Indikatorstreck till vänster för aktiv grupp */
.icon-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: #488C92;
  border-radius: 0 3px 3px 0;
}

/* Avatar-knapp (i topbar) */
.icon-avatar-btn {
  background: rgba(72, 140, 146, 0.20);
  color: #0F4F55;
  font-size: 13px;
  font-weight: 700;
}
.icon-avatar-btn:hover { background: rgba(72, 140, 146, 0.30) !important; }

/* ── Flyout-panel (tooltip-etikett) ───────────────────────── */
.icon-flyout {
  display: none;
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  background: #f2f8f8;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(72,140,146,0.18);
  padding: 7px 12px;
  z-index: calc(var(--z-sidebar) + 10);
  border: 1px solid rgba(72, 140, 146, 0.30);
  white-space: nowrap;
  pointer-events: none; /* Tooltip — ingen klick */
}
/* Osynlig brygga */
.icon-flyout::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 10px;
}
/* Flyout uppåt (nedre items) */
.icon-flyout--up {
  top: auto;
  bottom: 50%;
  transform: translateY(50%);
  pointer-events: auto; /* Meny med klickbara länkar */
}
.icon-nav-item:hover .icon-flyout {
  display: block;
}

/* Etikett i tooltip */
.icon-flyout-label {
  font-size: 13px;
  font-weight: 600;
  color: #0F4F55;
  letter-spacing: 0.01em;
}

/* Flyout-rubrik (för meny-flyouts) */
.icon-flyout-title {
  font-size: 10px;
  font-weight: 700;
  color: #3A7A80;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 8px 2px;
  margin: 0;
}

/* Flyout-länk (för meny-flyouts med klickbara val) */
.icon-flyout-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #0F4F55;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
  font-family: var(--font-sans);
}
.icon-flyout-link:hover {
  background: rgba(72, 140, 146, 0.15);
  color: #083B40;
}
.icon-flyout-link.active {
  background: rgba(72, 140, 146, 0.20);
  color: #083B40;
  font-weight: 600;
}

/* Nedre sektion: notiser + avatar */
.icon-sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  align-items: center;
}

/* ── Notification panel (öppnas under topbar, höger) ──────── */
.notif-panel {
  position: fixed !important;
  top: 60px !important;   /* under app-topbar (52) + gap */
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  display: none;
  width: 380px;
  max-height: 540px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  z-index: calc(var(--z-sidebar) + 20);
  flex-direction: column;
  overflow: hidden;
}
.notif-panel.open { display: flex; }

/* ── Avatar dropdown i topbar — öppnas neråt ───────────────── */
.app-topbar-avatar .avatar-dropdown {
  top: calc(100% + 8px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  min-width: 210px;
}

/* ── Mobilanpassning ─────────────────────────────────────── */
@media (max-width: 768px) {
  .app-topbar { padding-left: 16px; }
  .icon-sidebar { display: none; }
  .app-body { margin-left: 0; }
  .main-content { padding-bottom: 60px; }
}