@charset "UTF-8";

/**
 * Layout System for Loon Multi-Tenant CMS/ERP (Bootstrap 6)
 *
 * This file contains all layout-related styles including:
 * - Base HTML/Body Structure
 * - Container System with Padding
 * - Main Layout Structure
 * - Sidebar Layout and Navigation
 * - Page Content Layout
 * - Header and Footer Layouts
 * - Grid Extensions
 *
 * Sits in Bootstrap 6's "custom" layer, like components.css, so Bootstrap
 * utilities (.p-0, .d-none, .lg:d-flex…) still override these rules.
 *
 * Breakpoints: Bootstrap 6 uses sm 576, md 768, lg 1024, xl 1280, 2xl 1536.
 * The 1200px container width below is Loon's own and stays as it was.
 *
 * Dependencies: variables.css only - no custom properties defined here
 */

@layer custom {


/* =============================================================================
   BASE HTML STRUCTURE
   ============================================================================= */

html {
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
}

/* The body's grey fills the whole screen either way (html has no background of its own) */
body {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: var(--bs-body-bg);
}

/* At least the screen's height on computers only. Phones and tablets don't need it (the
   bottom bar is fixed), and there the screen-height units can't be trusted: in the
   installed Android app they come out taller than what shows, so a short page scrolled
   by the difference. Without it a short page is just its content and can't scroll. */
@media (width >= 1024px) {
  body {
    min-height: 100vh;
    min-height: 100dvh;
  }
}


/* =============================================================================
   CONTAINER SYSTEM
   ============================================================================= */

/* Container padding – the layout space from variables.css (responsive containers
   are .sm:container etc. in Bootstrap 6) */
.container,
.container-fluid,
.sm\:container,
.md\:container,
.lg\:container,
.xl\:container,
.\32 xl\:container {
  padding: 0 var(--loon-space);
}

/* Main container layout */
main.container {
  padding-top: var(--loon-space);
  padding-bottom: calc(var(--loon-space) * 3);
  display: flex;
}

body.form main.container {
  padding: 0;
  max-width: 480px;
}

@media (width < 576px) {
  body.form main.container .content-wrapper {
    flex-direction: unset;
  }
}

/* Space between the sidebar and the content */
main.container > aside.sidebar {
  margin-right: var(--loon-space);
}

/* Wide containers from 1200px */
@media (width >= 1200px) {
  .container,
  .sm\:container,
  .md\:container,
  .lg\:container,
  .xl\:container {
    max-width: 1650px;
  }
}


/* =============================================================================
   HEADER LAYOUT
   ============================================================================= */

header {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1050;
}

/* Page header */
.page-header {
  --bs-page-header-bg: var(--bs-body-bg-secondary);
  background-color: var(--bs-page-header-bg);
}

[data-bs-theme=dark] .page-header {
  --bs-page-header-bg: #2c2d33;
}

.page-header-dark {
  --bs-page-header-bg: #273246;
}

[data-bs-theme=dark] .page-header-dark {
  --bs-page-header-bg: #1a1b1e;
}

.page-header-static {
  z-index: 1021;
}


/* =============================================================================
   MAIN CONTENT LAYOUT
   ============================================================================= */

.page-content {
  position: relative;
  display: flex;
  flex-grow: 1;
  padding: var(--bs-spacer);
  overflow: hidden; /* Prevents menu overflow on card-nav-tabs */
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.content {
  flex-grow: 1;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}

.content::after {
  display: block;
  clear: both;
  content: "";
}

.content-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Back to top button */
.btn-to-top {
  position: fixed;
  bottom: var(--bs-spacer);
  right: 0.625rem;
  align-self: flex-end;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
  transition: opacity ease-in-out var(--bs-transition-base-timer),
              visibility ease-in-out var(--bs-transition-base-timer),
              bottom ease-in-out var(--bs-transition-base-timer);
}

@media (prefers-reduced-motion: reduce) {
  .btn-to-top {
    transition: none;
  }
}

.btn-to-top-visible {
  visibility: visible;
  opacity: 1;
}


/* =============================================================================
   SIDEBAR LAYOUT
   Values come straight from variables.css (--bs-sidebar-*).
   ============================================================================= */

.sidebar {
  max-width: 21rem;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: var(--bs-sidebar-width);
  position: fixed;
  top: 0;
  bottom: 0;
  border: var(--bs-sidebar-border-width) solid var(--bs-sidebar-border-color);
  background-color: var(--bs-sidebar-bg);
  color: var(--bs-sidebar-color);
  box-shadow: var(--bs-sidebar-box-shadow);
}

.sidebar .nav-tabs:not(.nav-tabs-underline):not(.nav-tabs-overline) .nav-link.active {
  background-color: var(--bs-sidebar-bg);
  border-bottom-color: var(--bs-sidebar-bg);
}

/* Off-screen positions (slid in on mobile) */
.sidebar-main,
.sidebar-secondary {
  left: calc(var(--bs-sidebar-width) * 1.1 * -1);
}

.sidebar-end {
  --bs-sidebar-box-shadow: -0.25rem 0 1rem rgba(0, 0, 0, 0.35);
  right: calc(var(--bs-sidebar-width) * 1.1 * -1);
}

/* Sidebar content */
.sidebar-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}

.sidebar-section {
  position: relative;
  flex-shrink: 0;
}

.sidebar-section-header {
  --bs-sidebar-section-padding-y: calc(var(--bs-sidebar-section-padding-x) * 0.75);
  display: flex;
  align-items: center;
  padding: var(--bs-sidebar-section-padding-y) var(--bs-sidebar-section-padding-x);
}

.sidebar-section-body {
  position: relative;
  padding: var(--bs-sidebar-section-padding-y) var(--bs-sidebar-section-padding-x);
}

/* Resize helpers */
.sidebar-resize-show {
  display: none !important;
}

.sidebar-mobile-expanded.sidebar-main,
.sidebar-mobile-expanded.sidebar-secondary {
  left: 0;
}

.sidebar-mobile-expanded.sidebar-end {
  right: 0;
}


/* =============================================================================
   SIDEBAR EXPAND (sidebar in the page flow)
   ============================================================================= */

.sidebar-expand {
  position: relative;
  top: auto;
  bottom: auto;
  box-shadow: var(--loon-surface-shadow); /* flat, like cards */
  transition: all var(--bs-transition-base-timer) ease-in-out;
}

[data-bs-theme=dark] .sidebar-expand {
  --bs-sidebar-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.075), var(--bs-box-shadow);
}

.sidebar-expand.sidebar-sticky {
  position: sticky;
  top: var(--bs-spacer);
  z-index: 1020;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-expand {
    transition: none;
  }
}

.sidebar-expand.sidebar-secondary {
  z-index: 98;
}

.sidebar-expand.sidebar-end {
  --bs-sidebar-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.075), var(--bs-box-shadow);
  z-index: 97;
}


/* =============================================================================
   SIDEBAR MAIN RESIZED (icons only)
   ============================================================================= */

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) {
  --bs-sidebar-width: calc(var(--bs-spacer) * 2 + var(--bs-icon-font-size));
  --bs-sidebar-section-padding-x: 0;
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .sidebar-resize-hide {
  display: none !important;
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .sidebar-resize-show {
  display: block !important;
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar > .nav-item > .nav-link {
  --bs-nav-link-padding-x: 0;
  justify-content: center;
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar > .nav-item > .nav-link:after {
  content: none;
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar > .nav-item > .nav-link > span {
  display: none;
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar > .nav-item-header {
  --bs-nav-link-padding-x: 0;
  text-align: center;
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar > .nav-item-header > i {
  margin: calc((var(--bs-body-line-height-computed) - var(--bs-icon-font-size)) / 2);
  margin-bottom: calc((var(--bs-body-line-height-computed) - var(--bs-icon-font-size)) / 2);
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar > .nav-item-submenu:hover > .nav-link:not(.active):not(.disabled),
.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar > .nav-item-submenu:focus > .nav-link:not(.active):not(.disabled) {
  background-color: var(--bs-nav-link-hover-bg);
  color: var(--bs-nav-link-hover-color);
}

/* Submenu flyout */
.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar > .nav-item-submenu > .nav-group-sub {
  --bs-sidebar-width: 18.75rem;
  position: absolute;
  top: calc(var(--bs-nav-link-padding-y) * -1);
  right: calc(var(--bs-sidebar-width) * -1);
  width: var(--bs-sidebar-width);
  background-color: var(--bs-sidebar-bg);
  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
  display: none !important;
  z-index: 1000;
  box-shadow: var(--bs-box-shadow);
  border-radius: var(--bs-border-radius);
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar > .nav-item-submenu > .nav-group-sub[data-submenu-title]:before {
  content: attr(data-submenu-title);
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  padding-bottom: 0;
  margin-top: var(--bs-nav-link-padding-y);
  opacity: 0.5;
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar > .nav-item-submenu > .nav-group-sub-reversed {
  top: auto;
  bottom: calc(var(--bs-nav-link-padding-y) * -1);
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar > .nav-item-submenu.nav-group-sub-visible > .nav-group-sub {
  display: block !important;
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar .nav-group-sub .nav-link {
  padding-left: var(--bs-nav-link-padding-x);
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar .nav-group-sub .nav-group-sub .nav-link {
  padding-left: calc(var(--bs-nav-link-padding-x) + var(--bs-icon-font-size));
}

.sidebar-expand.sidebar-main-resized:not(.sidebar-collapsed) .nav-sidebar .nav-group-sub .nav-group-sub .nav-group-sub .nav-link {
  padding-left: calc(var(--bs-nav-link-padding-x) * 2 + var(--bs-icon-font-size));
}


/* =============================================================================
   SIDEBAR NAVIGATION
   Link colours and padding come from the .nav tokens in components.css.
   ============================================================================= */

.nav-sidebar {
  flex-direction: column;
  overflow: hidden;
}

.nav-sidebar .nav-item:not(.nav-item-header):first-child {
  padding-top: var(--bs-nav-sidebar-padding-y);
}

.nav-sidebar .nav-item:not(.nav-item-header):last-child {
  padding-bottom: var(--bs-nav-sidebar-padding-y);
}

.nav-sidebar .nav-item:not(.nav-item-divider):not(:last-child) {
  margin-bottom: var(--bs-nav-link-spacer-y);
}

.nav-sidebar .nav-link:before {
  bottom: unset;
  height: unset;
  background: unset;
}

.nav-sidebar .nav-link:hover,
.nav-sidebar .nav-link:focus {
  background-color: var(--bs-nav-link-hover-bg);
}

.nav-sidebar .nav-link:active {
  background-color: var(--bs-nav-link-hover-active-bg);
}

.nav-sidebar .nav-link.active {
  background-color: var(--bs-nav-link-active-bg);
}

.nav-sidebar .nav-link i {
  margin-right: var(--bs-nav-link-padding-x);
  margin-top: calc((var(--bs-body-line-height-computed) - var(--bs-icon-font-size)) * 0.5);
  margin-bottom: calc((var(--bs-body-line-height-computed) - var(--bs-icon-font-size)) * 0.5);
}

.nav-sidebar .nav-item-header {
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
}

.nav-sidebar .nav-item-divider {
  background-color: var(--bs-nav-sidebar-divider-color);
  margin: var(--bs-nav-sidebar-padding-y) 0;
  height: var(--bs-border-width);
}

/* Submenu item */
.nav-item-submenu {
  position: relative;
}

.nav-item-submenu > .nav-link {
  padding-right: calc(var(--bs-nav-link-padding-x) + var(--bs-body-font-size) * 1.5);
}


/* =============================================================================
   MOBILE SIDEBAR BEHAVIOR
   ============================================================================= */

body.sidebar-mobile-main .sidebar-main,
body.sidebar-mobile-main .sidebar-secondary {
  left: 0;
}


/* =============================================================================
   FOOTER LAYOUT
   ============================================================================= */

footer {
  box-shadow: 0 -0.075em 0.25em 0 rgba(0, 0, 0, 0.1);
}

/* The bottom bar shows below 1024px (lg:d-none), so it is styled up to there too.
   It is 64px tall (plus its top line and the phone's home bar area), and the page ends
   the layout space above it, so the last card shows whole when scrolled to the bottom. */
@media (width < 1024px) {
  :root {
    --loon-tabbar-height: 4rem;
  }

  main.container {
    padding-bottom: calc(var(--loon-space) + var(--loon-tabbar-height) + var(--bs-border-width) + env(safe-area-inset-bottom));
  }

  footer.fixed-bottom {
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--bs-body-bg);
    z-index: 1055;
  }

  footer.fixed-bottom .flex-row {
    height: var(--loon-tabbar-height);
    padding: var(--bs-spacing);
  }

  footer.fixed-bottom .flex-row .btn {
    color: var(--bs-placeholder-color);
    flex: 1 1 auto;
    border: none !important;
    width: 100%;
    border-radius: 0;
  }

  footer.fixed-bottom .flex-row .btn.show {
    color: var(--bs-body-color);
  }
}


/* =============================================================================
   BOXED LAYOUT
   ============================================================================= */

.layout-boxed-bg {
  --bs-layout-boxed-bg: url(../../../../../../assets/images/backgrounds/boxed_bg.png) repeat;
  background: var(--bs-layout-boxed-bg);
}

.layout-boxed {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.layout-boxed .page-content {
  background-color: var(--bs-body-bg);
}


/* =============================================================================
   GRID SYSTEM EXTENSIONS
   ============================================================================= */

/* Row tile layout */
.row-tile div[class*=col] .btn {
  position: relative;
}

.row-tile div[class*=col] .btn:hover,
.row-tile div[class*=col] .btn:focus {
  z-index: 3;
}

.row-tile div[class*=col] .btn + .btn {
  margin-top: calc(var(--bs-btn-border-width) * -1);
}

.row-tile div[class*=col] + div[class*=col] .btn {
  margin-left: calc(var(--bs-btn-border-width) * -1);
}


/* =============================================================================
   CONTENT WRAPPER INTEGRATION
   ============================================================================= */

.content-wrapper > .card {
  margin-bottom: var(--bs-spacer-4);
}

.content-wrapper > .card:last-child {
  margin-bottom: 0;
}

}