/*
 * Business Fleet — Portal Shell & Auth
 * Covers: app shell layout, topbar, sidebar, auth pages, notices.
 * All selectors scoped to .bf-portal or .bf-auth-page / .bf-auth-wrap.
 */

/* ── Box Model Reset (BF scope only) ────────────────────────────────────── */
.bf-portal *,
.bf-portal *::before,
.bf-portal *::after,
.bf-auth-page *,
.bf-auth-page *::before,
.bf-auth-page *::after,
.bf-auth-wrap *,
.bf-auth-wrap *::before,
.bf-auth-wrap *::after {
  box-sizing: border-box;
  min-width: 0;
}

/* ── Portal Root ─────────────────────────────────────────────────────────── */
.bf-portal {
  font-family: var(--bf-font-body) !important;
  font-size: 15px;
  color: var(--bf-text);
  background: var(--bf-bg);
  min-height: 100dvh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.bf-portal__header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--bf-topbar-h);
  background: var(--bf-bg-alt);
  border-bottom: 1px solid var(--bf-border);
  display: flex;
  align-items: center;
}

.bf-portal__header-inner {
  width: 100%;
  max-width: var(--bf-content-max);
  margin: 0 auto;
  padding: 0 var(--bf-gap);
  display: flex;
  align-items: center;
  gap: var(--bf-gap);
}

/* Brand / logo */
.bf-portal__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.bf-portal__logo-img {
  height: 38px;
  max-height: 42px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

/* ── Empty State (vehicle fleet, no data) ────────────────────────────────── */
.bf-empty-state {
  text-align: center;
  padding: 52px 24px 48px;
  background: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-top: 2px solid var(--bf-accent);
  border-radius: var(--bf-radius-lg);
  margin-bottom: 24px;
}
.bf-empty-state__icon {
  margin: 0 auto 20px;
  width: 64px;
  height: 64px;
  background: var(--bf-accent-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bf-empty-state__heading {
  font-family: var(--bf-font-heading) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--bf-accent) !important;
  margin: 0 0 10px !important;
}
.bf-empty-state__body {
  color: var(--bf-text-muted);
  font-size: .875rem;
  margin: 0 0 24px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .bf-portal__logo-img { height: 32px; max-height: 36px; }
}

.bf-portal__logo-text {
  font-family: var(--bf-font-heading) !important;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bf-text) !important;
  line-height: 1;
}

.bf-portal__logo-text .bf-accent {
  color: var(--bf-accent);
}

.bf-portal__title-sep {
  width: 1px;
  height: 20px;
  background: var(--bf-border);
  flex-shrink: 0;
}

.bf-portal__company-name {
  font-size: .8125rem;
  color: var(--bf-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Topbar title (used when no sidebar) */
.bf-portal__title {
  font-family: var(--bf-font-heading) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--bf-text) !important;
  margin: 0 !important;
}

/* Right-side controls */
.bf-portal__user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--bf-gap-sm);
}

.bf-portal__nav {
  display: flex;
  align-items: center;
  gap: var(--bf-gap-xs);
}

.bf-portal__logout,
.bf-portal__nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--bf-font-body) !important;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--bf-text-muted) !important;
  background: transparent;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  cursor: pointer;
  text-decoration: none !important;
  transition: color var(--bf-transition), border-color var(--bf-transition);
  white-space: nowrap;
}

.bf-portal__logout:hover,
.bf-portal__nav a:hover {
  color: var(--bf-text) !important;
  border-color: var(--bf-border-hover);
}

/* ── App Layout ──────────────────────────────────────────────────────────── */
.bf-portal__layout {
  display: flex;
  min-height: calc(100dvh - var(--bf-topbar-h));
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.bf-sidebar {
  width: var(--bf-sidebar-w);
  flex-shrink: 0;
  background: var(--bf-bg-alt);
  border-right: 1px solid var(--bf-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: sticky;
  top: var(--bf-topbar-h);
  height: calc(100dvh - var(--bf-topbar-h));
}

.bf-sidebar__links {
  display: flex;
  flex-direction: column;
  padding: var(--bf-gap-sm) 0;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.bf-sidebar__link,
.bf-sidebar__links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  font-family: var(--bf-font-body) !important;
  font-size: .875rem;
  font-weight: 400;
  color: var(--bf-text-muted) !important;
  text-decoration: none !important;
  border-left: 3px solid transparent;
  transition: color var(--bf-transition), background var(--bf-transition), border-color var(--bf-transition);
  line-height: 1.4;
}

.bf-sidebar__link:hover,
.bf-sidebar__links a:hover {
  color: var(--bf-text) !important;
  background: rgba(255,255,255,.04);
}

.bf-sidebar__link--active,
.bf-sidebar__links a.active,
.bf-sidebar__links a[aria-current="page"] {
  color: var(--bf-text) !important;
  font-weight: 500;
  background: var(--bf-accent-bg);
  border-left-color: var(--bf-accent) !important;
}

/* Sidebar section label */
.bf-sidebar__section {
  padding: var(--bf-gap) 20px var(--bf-gap-xs);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--bf-text-dim);
  margin: 0;
}

/* Mobile drawer toggle */
.bf-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  color: var(--bf-text-muted);
  cursor: pointer;
  transition: color var(--bf-transition), border-color var(--bf-transition);
  flex-shrink: 0;
}

.bf-sidebar-toggle:hover {
  color: var(--bf-text);
  border-color: var(--bf-border-hover);
}

.bf-sidebar-toggle svg { width: 18px; height: 18px; }

/* Drawer backdrop */
.bf-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 190;
}

/* ── Content Area ────────────────────────────────────────────────────────── */
.bf-portal__content {
  flex: 1;
  padding: var(--bf-gap-lg);
  background: var(--bf-bg);
  overflow-x: hidden;
}

.bf-page-title {
  font-family: var(--bf-font-heading) !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--bf-text) !important;
  margin: 0 0 var(--bf-gap-lg) 0 !important;
}

.bf-section-heading {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--bf-text-dim);
  margin: 0 0 var(--bf-gap-sm) 0;
}

/* ── Portal Notices ──────────────────────────────────────────────────────── */
.bf-notice {
  padding: 12px 16px;
  border-radius: var(--bf-radius);
  border-left: 3px solid;
  font-size: .875rem;
  line-height: 1.5;
  margin-bottom: var(--bf-gap);
  background: var(--bf-surface);
}

.bf-notice--error   { border-color: var(--bf-danger);  color: #FCA5A5; background: var(--bf-danger-bg); }
.bf-notice--success { border-color: var(--bf-success); color: #86EFAC; background: var(--bf-success-bg); }
.bf-notice--warning { border-color: var(--bf-warning); color: #FDE68A; background: var(--bf-warning-bg); }
.bf-notice--info    { border-color: var(--bf-info);    color: #CBD5E1; background: var(--bf-info-bg); }

/* ── No-Company / Access Denied ──────────────────────────────────────────── */
.bf-notice-page {
  max-width: 480px;
  margin: 64px auto;
  font-family: var(--bf-font-body);
}

.bf-notice-page__card {
  background: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  padding: var(--bf-gap-xl) var(--bf-gap-lg);
  text-align: center;
  box-shadow: var(--bf-shadow);
}

.bf-notice-page__icon {
  font-size: 2.5rem;
  margin-bottom: var(--bf-gap);
  display: block;
  line-height: 1;
}

.bf-notice-page__title {
  font-family: var(--bf-font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--bf-text) !important;
  margin: 0 0 var(--bf-gap-sm) 0 !important;
}

.bf-notice-page__body {
  color: var(--bf-text-muted);
  font-size: .875rem;
  margin-bottom: var(--bf-gap);
}

.bf-notice-page__actions {
  display: flex;
  flex-direction: column;
  gap: var(--bf-gap-sm);
  margin-top: var(--bf-gap);
}

/* ── Info List ───────────────────────────────────────────────────────────── */
.bf-info-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bf-gap-xs) var(--bf-gap);
  font-size: .875rem;
  margin: 0;
}

.bf-info-list dt {
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bf-text-dim);
  align-self: center;
}

.bf-info-list dd {
  color: var(--bf-text);
  margin: 0;
  align-self: center;
}

.bf-info-list a {
  color: var(--bf-accent) !important;
  text-decoration: none;
}

.bf-info-list a:hover {
  color: var(--bf-accent-hover) !important;
  text-decoration: underline;
}

/* ── Portal Section Card ─────────────────────────────────────────────────── */
.bf-portal__section {
  background: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  padding: var(--bf-gap) var(--bf-gap-lg);
  margin-bottom: var(--bf-gap);
}

.bf-portal__section h2 {
  font-family: var(--bf-font-heading) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--bf-text) !important;
  margin: 0 0 var(--bf-gap) 0 !important;
}

.bf-portal__section h3 {
  font-size: .75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--bf-text-dim) !important;
  margin: 0 0 var(--bf-gap-sm) 0 !important;
}

.bf-portal__main {
  display: flex;
  flex-direction: column;
  gap: var(--bf-gap);
}

/* ── User Info Block (below sidebar navigation) ──────────────────────────── */
.bf-user-info {
  margin-top: auto;
  padding: var(--bf-gap-sm) 20px var(--bf-gap);
  border-top: 1px solid var(--bf-border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bf-user-info__status {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bf-success);
}

.bf-user-info__name {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--bf-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-user-info__company {
  font-size: .75rem;
  color: var(--bf-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Manager portal: horizontal info bar below top-nav */
.bf-user-info--bar {
  flex-direction: row;
  align-items: center;
  gap: var(--bf-gap-sm);
  margin-top: 0;
  padding: 6px var(--bf-gap);
  background: var(--bf-bg-alt);
  border-top: none;
  border-bottom: 1px solid var(--bf-border);
}

.bf-user-info--bar .bf-user-info__status {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: .8125rem;
}

.bf-user-info--bar .bf-user-info__name {
  font-size: .8125rem;
  font-weight: 400;
}