/*
  Aegis Platform Shell
  Structural layout (fixed sidebar + topbar) themed entirely through brand CSS variables.
  The app sets --brand-primary / --brand-secondary / --brand-accent per tenant; everything
  else derives from those, so re-theming a tenant is just three values.
*/

:root {
  --brand-primary: #7d7350;
  --brand-secondary: #3f3a2e;
  --brand-accent: #3e8fa8;

  --shell-sidebar-width: 256px;
  --shell-topbar-height: 56px;
  --shell-surface: #ffffff;
  --shell-surface-2: #f5f4f0;
  --shell-border: rgba(0, 0, 0, 0.08);
  --shell-sidebar-fg: rgba(255, 255, 255, 0.82);
  --shell-sidebar-fg-active: #ffffff;
}

html, body { height: 100%; }
body { margin: 0; background: var(--shell-surface-2); }

.app-shell { display: flex; min-height: 100vh; min-width: 0; }

/* Sidebar — offcanvas on mobile, fixed on lg+ */
.app-sidebar {
  width: var(--shell-sidebar-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--brand-secondary) !important;  /* beat Bootstrap .offcanvas-lg transparent !important at lg+ */
  color: var(--shell-sidebar-fg);
}
.app-sidebar .offcanvas-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; }

.app-sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1rem .9rem;
  /* no border-bottom — clean logo area */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
}
.app-sidebar-brand img {
  max-height: 40px;
  max-width: 160px;
  width: auto;
  display: block;
  background: #fff;
  padding: 5px 10px;
  border-radius: 7px;
}
.app-sidebar-brand .brand-text {
  font-size: .78rem;
  opacity: .55;
  margin-top: .35rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.app-sidebar-nav { padding: .75rem .5rem; overflow-y: auto; flex: 1 1 auto; }
.app-nav-section {
  padding: .9rem .85rem .35rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.45);
}
.app-nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .85rem;
  margin: .1rem 0;
  border-radius: .5rem;
  color: var(--shell-sidebar-fg);
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.2;
  transition: background-color .12s ease, color .12s ease;
}
.app-nav-link .bi { font-size: 1.05rem; opacity: .9; width: 1.2rem; text-align: center; }
.app-nav-link:hover { background: rgba(255, 255, 255, 0.08); color: var(--shell-sidebar-fg-active); }
.app-nav-link.is-active {
  background: var(--brand-primary);
  color: var(--shell-sidebar-fg-active);
  font-weight: 600;
}

/* Main column */
.app-main { min-height: 100vh; min-width: 0; display: flex; flex-direction: column; width: 100%; background: var(--shell-surface-2); }

/* Topbar */
.app-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--shell-topbar-height);
  z-index: 1030;
  display: flex;
  align-items: center;
  background: var(--brand-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.app-topbar .topbar-title { font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.app-topbar .btn-outline-secondary { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.3); }
.app-topbar .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Content offset for the fixed topbar */
.app-main-content {
  flex: 1 0 auto;
  min-width: 0;
  padding-top: calc(var(--shell-topbar-height) + 1.25rem);
  padding-bottom: 1.5rem;
}

.app-footer { flex-shrink: 0; color: #6b7280; }

/* User menu button */
.app-user-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: .25rem .75rem .25rem .35rem;
  color: #fff;
}
.app-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
}

/* Accent helpers reused by pages */
.text-brand { color: var(--brand-secondary) !important; }
.bg-brand { background-color: var(--brand-primary) !important; color: #fff; }

/* Brand button — explicit states so text stays white and feedback is visible on
   hover AND active/click. Without an :active override, Bootstrap's base .btn:active
   rule reverts a custom button to dark-text/transparent (invisible on click). */
.btn-brand { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn-brand:hover { background-color: var(--brand-secondary); border-color: var(--brand-secondary); color: #fff; }
.btn-brand:focus,
.btn-brand:focus-visible { color: #fff; box-shadow: 0 0 0 .25rem rgba(125, 115, 80, .45); }
.btn-brand:active,
.btn-brand:first-child:active,
.btn-brand.active,
.btn-brand.show,
.btn-brand:active:focus {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #fff !important;
}
.btn-brand:disabled,
.btn-brand.disabled { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff; opacity: .6; }
.badge-brand-accent { background-color: var(--brand-accent); color: #fff; }

/* Keep outline buttons legible on hover/active everywhere (defensive: white text on fill). */
.btn-outline-secondary:hover, .btn-outline-secondary:active,
.btn-outline-primary:hover, .btn-outline-primary:active,
.btn-outline-success:hover, .btn-outline-success:active,
.btn-outline-danger:hover, .btn-outline-danger:active { color: #fff !important; }

/* ── Accordion nav sections ───────────────────────────────────────────────── */
/* Section header is now a toggle button */
.app-nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .9rem .85rem .35rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .12s;
  line-height: 1.2;
}
.app-nav-section-toggle:hover { color: rgba(255, 255, 255, 0.7); }
.app-nav-section-toggle .chevron {
  font-size: .75rem;
  transition: transform .2s ease;
  opacity: .6;
}
.app-nav-section-toggle[aria-expanded="false"] .chevron { transform: rotate(-90deg); }

/* ── Topbar search ────────────────────────────────────────────────────────── */
.topbar-search {
  flex: 0 1 280px;
  min-width: 0;
}
.topbar-search .form-control {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: .88rem;
  padding: .3rem .75rem .3rem 2rem;
  border-radius: 999px;
  height: 34px;
  transition: background .15s, border-color .15s;
}
.topbar-search .form-control::placeholder { color: rgba(255,255,255,.45); }
.topbar-search .form-control:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  color: #fff;
  outline: none;
}
.topbar-search-icon {
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.45);
  font-size: .85rem;
  pointer-events: none;
}

/* ── Dropdown menu — explicit colours to prevent white-on-white ───────────── */
.dropdown-menu {
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-color: #1f2937;
  --bs-dropdown-link-color: #1f2937;
  --bs-dropdown-link-hover-bg: #f3f4f6;
  --bs-dropdown-link-hover-color: #111827;
  background-color: #ffffff !important;
  color: #1f2937 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  border: 1px solid #e5e7eb;
}
.dropdown-menu .dropdown-item { color: #1f2937 !important; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background-color: #f3f4f6 !important; color: #111827 !important; }
.dropdown-menu .dropdown-divider { border-color: #e5e7eb; }
/* Undo the global white-text-on-hover rule INSIDE dropdowns only */
.dropdown-menu .btn-outline-secondary:hover,
.dropdown-menu .btn-outline-secondary:active { color: #374151 !important; }

/* ── Breadcrumb bar at top of content ────────────────────────────────────── */
.page-breadcrumb {
  margin-bottom: 1rem;
}
.page-breadcrumb .breadcrumb { margin: 0; }
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #9ca3af; }
.page-breadcrumb .breadcrumb-item a { color: #6b7280; }
.page-breadcrumb .breadcrumb-item.active { color: #374151; font-weight: 500; }

/* Desktop: pin sidebar, offset main + topbar */
@media (min-width: 992px) {
  .app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; transform: none !important; visibility: visible !important; background: var(--brand-secondary) !important; }
  .app-main { margin-left: var(--shell-sidebar-width); }
  .app-topbar { left: var(--shell-sidebar-width); }
}