/**
 * Redstone / Bulsho Finance — cohesive blue shell (main area, sidebar, header, footer, auth).
 * Loaded after assets/css/styles.css
 */

/* ----- Logged-in app (Metronic demo1 body) ----- */
html:not(.dark) body.demo1 {
  background: linear-gradient(180deg, #d8e6fb 0%, #e4eefb 42%, #edf3fd 100%) !important;
  background-color: #e4eefb !important;
}

html.dark body.demo1 {
  background: linear-gradient(180deg, #0a1220 0%, #0f1b2e 45%, #0c1526 100%) !important;
  background-color: #0f1b2e !important;
}

html:not(.dark) body.demo1 .kt-wrapper {
  background: transparent;
}

/* Topbar / header — dark navy (matches Bulsho topbar brand strip) */
body.demo1 {
  --topbar-bg: #1a2544;
  --topbar-bg-sticky: #15203b;
  --topbar-border: rgba(255, 255, 255, 0.1);
  --topbar-fg: #ffffff;
  --topbar-fg-muted: rgba(255, 255, 255, 0.78);
  --topbar-accent: #5eb3ff;
}

body.demo1 header#header.kt-header,
body.demo1 header.kt-header,
body.demo1 header#header.kt-header.bg-background,
body.demo1 header.kt-header.bg-background {
  background: var(--topbar-bg) !important;
  background-color: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--topbar-border) !important;
  box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.45);
  color: var(--topbar-fg);
}

body.demo1 header#header.kt-header.border-b,
body.demo1 header.kt-header.border-b {
  background: var(--topbar-bg-sticky) !important;
  background-color: var(--topbar-bg-sticky) !important;
}

body.demo1 header#header .kt-btn-ghost,
body.demo1 header.kt-header .kt-btn-ghost {
  color: var(--topbar-fg) !important;
}

body.demo1 header#header .kt-btn-ghost .ki-filled,
body.demo1 header.kt-header .kt-btn-ghost .ki-filled,
body.demo1 header#header .kt-btn-icon .ki-filled,
body.demo1 header.kt-header .kt-btn-icon .ki-filled {
  color: var(--topbar-fg) !important;
}

body.demo1 header#header .kt-btn-ghost:hover,
body.demo1 header.kt-header .kt-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

body.demo1 header#header .text-foreground,
body.demo1 header.kt-header .text-foreground,
body.demo1 header#header .kt-menu-title,
body.demo1 header.kt-header .kt-menu-title {
  color: var(--topbar-fg-muted) !important;
}

body.demo1 header#header .kt-menu-link:hover .kt-menu-title,
body.demo1 header.kt-header .kt-menu-link:hover .kt-menu-title {
  color: var(--topbar-fg) !important;
}

body.demo1 header#header [data-kt-dropdown-toggle],
body.demo1 header.kt-header [data-kt-dropdown-toggle] {
  color: var(--topbar-fg) !important;
}

html:not(.dark) body.demo1 .kt-footer {
  background: rgba(255, 255, 255, 0.55);
  border-top: 1px solid #c5d8f0;
  margin-top: auto;
}

html.dark body.demo1 .kt-footer {
  background: rgba(10, 18, 32, 0.6);
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

/* Fade content top into header — avoids a flat “lavender strip” under the toolbar */
html:not(.dark) body.demo1 main#content {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.55) 1.5rem,
    rgba(255, 255, 255, 0.12) 3rem,
    rgba(255, 255, 255, 0) 5rem
  );
  background-repeat: no-repeat;
}

html.dark body.demo1 .kt-wrapper {
  background: transparent;
}

html.dark body.demo1 main#content {
  background-image: linear-gradient(
    180deg,
    rgba(15, 27, 46, 0.95) 0%,
    rgba(15, 27, 46, 0.5) 1.5rem,
    rgba(15, 27, 46, 0.12) 3rem,
    rgba(15, 27, 46, 0) 5.25rem
  );
  background-repeat: no-repeat;
}

/* Sidebar + mobile drawer: black shell matching Bulsho dark logo (#1a1a1f) */
#sidebar.redstone-sidebar-surface,
.kt-drawer #sidebar.redstone-sidebar-surface {
  --sidebar-bg: #1a1a1f;
  --sidebar-bg-elevated: #222228;
  --sidebar-fg: #ffffff;
  --sidebar-fg-muted: rgba(255, 255, 255, 0.72);
  --sidebar-fg-dim: rgba(255, 255, 255, 0.55);
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-hover: rgba(255, 255, 255, 0.08);
  --sidebar-active: rgba(25, 118, 210, 0.32);
  --sidebar-accent: #5eb3ff;
  background: var(--sidebar-bg) !important;
  background-color: var(--sidebar-bg) !important;
  border-right-color: var(--sidebar-border) !important;
  color: var(--sidebar-fg);
}

#sidebar_header {
  border-bottom: 1px solid var(--sidebar-border);
}

/* Sidebar company logo — must stay visible (custom PNG + Metronic collapse rules) */
#sidebar_header {
  min-height: 6rem;
  padding: 0.75rem 0 0.55rem;
  overflow: visible;
  align-items: flex-start;
}

#sidebar_header .kt-sidebar-brand {
  display: flex !important;
  align-items: center;
  flex: 1 1 auto;
  min-width: 12rem;
  max-width: calc(100% - 2rem);
  min-height: 5rem;
  padding-inline-end: 1.75rem;
  text-decoration: none;
}

#sidebar_header .kt-sidebar-brand .default-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 5rem;
  max-width: min(16rem, 100%);
  object-fit: contain;
  object-position: left center;
}

#sidebar_header .kt-sidebar-brand .small-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 3.25rem;
  max-width: 3.25rem;
  object-fit: contain;
  object-position: left center;
}

.demo1 .kt-sidebar .small-logo {
  display: none !important;
}

.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .default-logo {
  display: none !important;
}

.demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .small-logo {
  display: block !important;
}

.demo1.kt-sidebar-collapse .kt-sidebar:hover .default-logo {
  display: block !important;
}

.demo1.kt-sidebar-collapse .kt-sidebar:hover .small-logo {
  display: none !important;
}

/* Override Metronic/Tailwind text utilities inside sidebar */
#sidebar.redstone-sidebar-surface .text-foreground,
#sidebar.redstone-sidebar-surface .kt-menu-title.text-foreground {
  color: var(--sidebar-fg-muted) !important;
}

#sidebar.redstone-sidebar-surface .text-muted-foreground,
#sidebar.redstone-sidebar-surface .kt-menu-icon.text-muted-foreground,
#sidebar.redstone-sidebar-surface .kt-menu-arrow.text-muted-foreground {
  color: var(--sidebar-fg-muted) !important;
}

#sidebar.redstone-sidebar-surface .kt-menu-item.active .text-primary,
#sidebar.redstone-sidebar-surface .kt-menu-item.kt-menu-item-active .text-primary,
#sidebar.redstone-sidebar-surface .kt-menu-item.kt-menu-item-show .text-primary {
  color: var(--sidebar-fg) !important;
}

/* Sidebar menu: white labels + icons on black */
#sidebar.redstone-sidebar-surface .kt-menu-title,
#sidebar.redstone-sidebar-surface .kt-menu-link,
#sidebar.redstone-sidebar-surface .kt-menu-label {
  color: var(--sidebar-fg-muted) !important;
}

#sidebar.redstone-sidebar-surface .kt-menu-icon,
#sidebar.redstone-sidebar-surface .kt-menu-arrow,
#sidebar.redstone-sidebar-surface .kt-menu-icon .ki-filled,
#sidebar.redstone-sidebar-surface .kt-menu-arrow .ki-filled,
#sidebar.redstone-sidebar-surface .kt-menu-link .ki-filled {
  color: var(--sidebar-fg) !important;
}

#sidebar.redstone-sidebar-surface .kt-menu-item > .kt-menu-link:hover,
#sidebar.redstone-sidebar-surface .kt-menu-item > .kt-menu-toggle:hover,
#sidebar.redstone-sidebar-surface .kt-menu-accordion .kt-menu-link:hover {
  background: var(--sidebar-hover) !important;
  border-radius: 0.5rem;
}

#sidebar.redstone-sidebar-surface .kt-menu-item > .kt-menu-link:hover .kt-menu-title,
#sidebar.redstone-sidebar-surface .kt-menu-item > .kt-menu-toggle:hover .kt-menu-title,
#sidebar.redstone-sidebar-surface .kt-menu-accordion .kt-menu-link:hover .kt-menu-title {
  color: var(--sidebar-fg) !important;
}

#sidebar.redstone-sidebar-surface .kt-menu-item.active > .kt-menu-link,
#sidebar.redstone-sidebar-surface .kt-menu-item.kt-menu-item-active > .kt-menu-link,
#sidebar.redstone-sidebar-surface .kt-menu-item.kt-menu-item-show > .kt-menu-link,
#sidebar.redstone-sidebar-surface .kt-menu-item.kt-menu-item-active > .kt-menu-toggle,
#sidebar.redstone-sidebar-surface .kt-menu-item.kt-menu-item-show > .kt-menu-toggle,
#sidebar.redstone-sidebar-surface .kt-menu-accordion .kt-menu-item.kt-menu-item-active > .kt-menu-link {
  background: var(--sidebar-active) !important;
  border-color: transparent !important;
  border-radius: 0.5rem;
}

#sidebar.redstone-sidebar-surface .kt-menu-item.active .kt-menu-title,
#sidebar.redstone-sidebar-surface .kt-menu-item.kt-menu-item-active .kt-menu-title,
#sidebar.redstone-sidebar-surface .kt-menu-item.kt-menu-item-show > .kt-menu-link .kt-menu-title,
#sidebar.redstone-sidebar-surface .kt-menu-item.kt-menu-item-show > .kt-menu-toggle .kt-menu-title,
#sidebar.redstone-sidebar-surface .kt-menu-accordion .kt-menu-item.kt-menu-item-active .kt-menu-title {
  color: var(--sidebar-fg) !important;
  font-weight: 600;
}

#sidebar.redstone-sidebar-surface .kt-menu-item.active .kt-menu-icon,
#sidebar.redstone-sidebar-surface .kt-menu-item.kt-menu-item-active .kt-menu-icon,
#sidebar.redstone-sidebar-surface .kt-menu-item.kt-menu-item-show .kt-menu-icon .ki-filled,
#sidebar.redstone-sidebar-surface .kt-menu-accordion .kt-menu-item.kt-menu-item-active .kt-menu-icon .ki-filled {
  color: var(--sidebar-accent) !important;
}

#sidebar.redstone-sidebar-surface .kt-menu-accordion::before {
  border-color: var(--sidebar-border) !important;
}

#sidebar.redstone-sidebar-surface .kt-menu-bullet::before {
  background-color: var(--sidebar-fg-dim) !important;
}

#sidebar.redstone-sidebar-surface .kt-menu-item.kt-menu-item-active .kt-menu-bullet::before,
#sidebar.redstone-sidebar-surface .kt-menu-accordion .kt-menu-link:hover .kt-menu-bullet::before {
  background-color: var(--sidebar-accent) !important;
}

#sidebar.redstone-sidebar-surface #sidebar_toggle {
  background: var(--sidebar-bg-elevated) !important;
  border-color: var(--sidebar-border) !important;
  color: var(--sidebar-fg) !important;
}

#sidebar.redstone-sidebar-surface #sidebar_toggle .ki-filled,
#sidebar.redstone-sidebar-surface #sidebar_toggle i {
  color: var(--sidebar-fg) !important;
}

#sidebar.redstone-sidebar-surface #sidebar_toggle:hover {
  background: var(--sidebar-hover) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Scrollbar on dark sidebar */
#sidebar.redstone-sidebar-surface .kt-scrollable-y-hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}

#sidebar.redstone-sidebar-surface .kt-scrollable-y-hover::-webkit-scrollbar-track {
  background: transparent;
}

/* ----- Auth pages (login, forgot password, etc.) — Bulsho dark shell ----- */
body.bulsho-auth-page {
  --auth-bg: #1a1a1f;
  --auth-bg-card: #222228;
  --auth-border: rgba(255, 255, 255, 0.12);
  --auth-fg: #ffffff;
  --auth-fg-muted: rgba(255, 255, 255, 0.72);
  --auth-fg-dim: rgba(255, 255, 255, 0.55);
  --auth-accent: #5eb3ff;
  --auth-input-bg: #2a2a32;
  background-color: var(--auth-bg) !important;
  color: var(--auth-fg) !important;
}

body.bulsho-auth-page .page-bg {
  background-image: none !important;
  background: var(--auth-bg) !important;
  background-color: var(--auth-bg) !important;
}

body.bulsho-auth-page .kt-card {
  background: var(--auth-bg-card) !important;
  border: 1px solid var(--auth-border) !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.55);
}

body.bulsho-auth-page .kt-card-content {
  color: var(--auth-fg);
}

body.bulsho-auth-page h3,
body.bulsho-auth-page .text-mono,
body.bulsho-auth-page .kt-form-label {
  color: var(--auth-fg) !important;
}

body.bulsho-auth-page .text-secondary-foreground,
body.bulsho-auth-page .text-muted-foreground,
body.bulsho-auth-page .kt-checkbox-label {
  color: var(--auth-fg-muted) !important;
}

body.bulsho-auth-page .kt-link,
body.bulsho-auth-page a.kt-link {
  color: var(--auth-accent) !important;
}

body.bulsho-auth-page .kt-link:hover,
body.bulsho-auth-page a.kt-link:hover {
  color: #93c5fd !important;
}

body.bulsho-auth-page .kt-input,
body.bulsho-auth-page .kt-input input {
  background: var(--auth-input-bg) !important;
  border-color: var(--auth-border) !important;
  color: var(--auth-fg) !important;
}

body.bulsho-auth-page .kt-input input::placeholder {
  color: var(--auth-fg-dim) !important;
}

body.bulsho-auth-page .kt-input .ki-filled,
body.bulsho-auth-page .kt-btn-ghost .ki-filled {
  color: var(--auth-fg-muted) !important;
}

body.bulsho-auth-page .kt-btn-primary {
  background: #1976d2 !important;
  border-color: #1976d2 !important;
  color: #fff !important;
}

body.bulsho-auth-page .kt-btn-primary:hover {
  background: #1565c0 !important;
  border-color: #1565c0 !important;
}

body.bulsho-auth-page .kt-checkbox {
  border-color: var(--auth-border) !important;
  background: var(--auth-input-bg) !important;
}

body.bulsho-auth-page .kt-alert {
  border-color: var(--auth-border);
}

body.bulsho-auth-page .auth-page-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: min(100%, 320px);
  width: 100%;
}

body.bulsho-auth-page .auth-page-logo__img {
  display: block;
  height: 80px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

html:has(body.bulsho-auth-page) {
  font-size: 87.5%;
}

/* Company logo preview on Settings (matches sidebar size) */
.settings-logo-preview-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 16rem;
  min-height: 4.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(185, 204, 232, 0.65);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  overflow: hidden;
}
.settings-logo-preview-box img {
  display: block;
  width: auto;
  height: auto;
  max-height: 5rem;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Top bar image preview on Settings */
.settings-topbar-preview-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 32rem;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(185, 204, 232, 0.65);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  overflow: hidden;
}
.settings-topbar-preview-box img {
  display: block;
  width: auto;
  height: auto;
  max-height: 2.5rem;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Top bar brand / banner in header */
body.demo1 #megaMenuContainer .app-topbar-brand,
body.demo1 header .app-topbar-brand {
  flex-shrink: 0;
  align-self: center;
  max-width: min(28rem, 42vw);
  margin-inline-end: 0.5rem;
}

body.demo1 .app-topbar-brand-img {
  display: block;
  width: auto;
  height: auto;
  max-height: 2.5rem;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

body.demo1 #headerContainer {
  background: transparent;
}

/* Customers KPI + filter bar: see inline <style> in customers.php (avoids missing styles when only that file is synced) */

/* ----- Wider main content (all app pages; default Metronic cap is 80rem) ----- */
@media (width >= 80rem) {
  body.demo1 #contentContainer.kt-container-fixed {
    max-width: min(96rem, calc(100vw - 2.5rem));
  }

  body.demo1.kt-sidebar-fixed #contentContainer.kt-container-fixed {
    max-width: min(96rem, calc(100vw - var(--sidebar-width, 16.5rem) - 3rem));
  }
}