/**
 * Admin core layout & theme – layout-wrapper, menu, navbar, loader
 * Replaces vendor core.css + theme-default.css + demo.css + css-loader
 */

:root {
  --bs-body-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-body-bg: #f5f5f9;
  --bs-body-color: #697a8d;
  --bs-border-color: rgba(67, 89, 113, 0.12);
  --layout-menu-width: 260px;
  --navbar-height: 56px;
  --menu-link-padding-x: 1rem;
  --menu-link-padding-y: 0.625rem;
}

html { height: 100%; }
body {
  min-height: 100%;
  font-family: var(--bs-body-font-family);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* ----- Layout wrapper ----- */
.layout-wrapper { min-height: 100vh; }
.layout-wrapper.layout-content-navbar .layout-container { display: flex; }
.layout-container { flex: 1 1 auto; width: 100%; }
.layout-page {
  height: 100vh !important;
  overflow: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.layout-page .container { flex: 1; }

/* ----- Menu (sidebar) ----- */
.layout-menu {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1031;
  width: var(--layout-menu-width);
  height: 100vh;
  flex-direction: column;
  transition: transform 0.25s ease, margin 0.25s ease;
  overflow: hidden;
}
.layout-container .layout-page { margin-inline-start: var(--layout-menu-width); }
.menu-vertical.menu { padding: 0; }
.menu { list-style: none; margin: 0; }
.menu-inner { padding: 0.5rem 0.75rem 1.5rem; }
.menu-inner-shadow { flex-shrink: 0; height: 0; }
.menu-item { position: relative; }
.menu-link {
  display: flex;
  align-items: center;
  padding: var(--menu-link-padding-y) var(--menu-link-padding-x);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background-color 0.15s, color 0.15s;
}
.menu-link:hover { background: rgba(67, 89, 113, 0.08); color: inherit; }
.menu-item.active > .menu-link,
.menu-item.open > .menu-link { background: rgba(67, 89, 113, 0.1); font-weight: 500; }
.menu-icon {
  flex-shrink: 0;
  width: 1.75rem;
  margin-inline-end: 0.75rem;
  font-size: 1.375rem;
  text-align: center;
}
.menu-icon.tf-icons { font-style: normal; }
.menu-link .menu-icon:last-child { margin-inline-start: auto; }
.menu-sub {
  list-style: none;
  padding: 0.35rem 0;
  margin: 0.25rem 0 0 0.5rem;
  border-inline-start: 2px solid rgba(67, 89, 113, 0.12);
  padding-inline-start: 0.75rem;
}
.menu-sub .menu-link { padding: 0.4rem 0.75rem; }
.menu-item.open > .menu-sub { display: block; }
.menu-item:not(.open) > .menu-sub { display: none; }
.menu-toggle::after { content: ''; }
.menu-header { padding: 0.75rem var(--menu-link-padding-x) 0.35rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(67, 89, 113, 0.6); }

/* App brand (logo) */
.app-brand.demo {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}
.app-brand-link { display: flex; align-items: center; text-decoration: none; color: inherit; }
.app-brand-link img { max-height: 2.5rem; width: auto; }
.layout-menu-toggle { cursor: pointer; }

/* ----- Navbar ----- */
.layout-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: var(--navbar-height);
  padding-inline: 1.5rem;
  transition: box-shadow 0.2s;
}
.bg-navbar-theme { background: #fff !important; color: #697a8d; border-bottom: 1px solid var(--bs-border-color); }
.navbar-detached .layout-navbar { margin: 0 1.5rem; }
.container-xxl { width: 100%; max-width: 100%; padding-inline: 1rem; }
.navbar .form-control.border-0.shadow-none { background: transparent; }
.navbar-nav-right { display: flex; align-items: center; }
.hide-arrow.dropdown-toggle::after { display: none; }
.w-px-40 { width: 2.5rem; min-width: 2.5rem; }
.h-auto { height: auto; }
.rounded-circle { border-radius: 50%; }

.avatar { position: relative; display: inline-flex; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Navbar avatar: 40×40 circle, image covers without distortion */
.avatar .w-px-40 {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.avatar-online::before {
  content: '';
  position: absolute;
  inset-block-end: 0; inset-inline-end: 0;
  width: 0.4rem; height: 0.4rem;
  background: #71dd37;
  border: 2px solid #fff;
  border-radius: 50%;
}

/* ----- Overlay (mobile) ----- */
.layout-overlay {
  position: fixed;
  inset: 0;
  z-index: 1030;
  background: rgba(67, 89, 113, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.layout-overlay.layout-menu-toggle.show { opacity: 1; visibility: visible; }
.content-backdrop.fade {
  position: fixed;
  inset: 0;
  z-index: 1029;
  background: rgba(67, 89, 113, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}
.content-backdrop.fade.show { opacity: 1; visibility: visible; }

@media (max-width: 1199.98px) {
  .layout-menu { transform: translateX(-100%); }
  .layout-menu.layout-menu-open { transform: translateX(0); }
  .layout-container .layout-page { margin-inline-start: 0; }
}

/* ----- Loader ----- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
}
.loader.is-active { display: flex; }
.loader-default::after {
  content: attr(data-text);
  position: absolute;
  margin-top: 3rem;
  font-size: 0.875rem;
  color: #697a8d;
}
.loader-default::before {
  content: '';
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgba(67, 89, 113, 0.2);
  border-top-color: #696cff;
  border-radius: 50%;
  animation: loader-spin 0.8s linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }

/* ----- Demo / utilities ----- */
.default-footer { margin-top: auto; }
.border-gray-200 { border-color: rgb(229 231 235); }
.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }