/* ============================================================
   GLOBAL LAYOUT (app-layout)
   ============================================================ */
.app-layout {                               /* Main layout container */
    display: flex;                          /* Use flexbox layout */
    flex-direction: column;                 /* Stack children vertically */
    height: 100vh;                          /* Full viewport height */
    margin: 0;                              /* Remove default margin */
    overflow: hidden;                       /* Prevent overflow from extending outside the viewport */
}

/* ============================================================
   1. NAVBAR (navbar, bar_logo, toggler_menu)
   ============================================================ */
/* --- Navbar wrapper (.app-navbar-custom) --- */
nav.navbar.app-navbar-custom,               /* Target navbar component */
.app-navbar-custom {                        /* Custom navbar class */
    background-color: #ffffff !important;   /* Force white background */
    color: #000000 !important;              /* Force text color black */
    fill: #000000 !important;               /* Force SVG icon color black */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow for elevation */
    padding-top: 0.5rem !important;         /* Top padding */
    padding-bottom: 0.5rem !important;      /* Bottom padding */
}
/* --- Navbar container (dbc.Container inside navbar) --- */
.app-navbar-custom .container-fluid {       /* Container inside navbar */
    padding-left: 1rem;                     /* Left inner padding */
    padding-right: 1rem;                    /* Right inner padding */
}

/* ============================================================
   1.1 LOGO (bar_logo → .app-navbar-logo-link & .app-navbar-logo)
   ============================================================ */
/* --- Logo link container --- */
.app-navbar-logo-link {                     /* Wrapper around the logo image */
    flex-grow: 0;                           /* Do not allow the element to grow */
    display: flex;                          /* Use flexbox to align content (logo)*/
    text-decoration: none;                  /* Remove underline on the link */
    align-items: center;                    /* Vertically center the logo */
}
/* --- Logo image --- */
.app-navbar-logo {                          /* Logo image styling */
    height: 120px;                          /* Set fixed logo height */
    width: auto;                            /* Keep width automatic to preserve the image aspect ratio */
    max-height: none;                       /* Remove max-height restrictions */
    object-fit: contain;                    /* Ensure full image is visible */
}
/* ============================================================
   1.2 LANGUAGE BUTTON GROUP (language_buttons)
   ============================================================ */
/* --- Button group wrapper --- */
.app-buttongroup-flags {                    /* Container for language flag buttons */
    display: flex;                          /* Arrange buttons horizontally */
    align-items: center;                    /* Vertically align buttons */
    gap: 0.5rem;                            /* Horizontal spacing between buttons */
    background: transparent;                /* Transparent background */
    border: none;                           /* Remove container border */
    margin-left: auto !important;           /* Push group to the right */
}
/* --- Individual flag buttons --- */
.app-buttongroup-flags .btn {               /* Language buttons */
    background: transparent !important;     /* Transparent background forced */
    border: none !important;                /* Remove default Bootstrap border */
    padding: 0.25rem;                       /* Compact padding */
    box-shadow: none !important;            /* Remove focus/hover shadows */
}
/* --- Hover effect for flag buttons --- */
.app-buttongroup-flags .btn:hover {         /* Hover state for flag buttons */
    background-color: rgba(255, 255, 255, 0.1); /* Slight white translucent hover effect */
}

/* ============================================================
   1.3 NAVBAR TOGGLER (toggler_menu)
   ============================================================ */
/* Remove borders, outlines, and shadows from toggler */
.app-navbar-toggler,                        /* Main toggler button */
.app-navbar-toggler:focus,                  /* Toggler focused */
.app-navbar-toggler:active,                 /* Toggler active */
.app-navbar-toggler:focus-visible {         /* Toggler keyboard focus */
    box-shadow: none !important;            /* Remove shadow */
    border: none !important;                /* Remove border */
}

/* ============================================================
   2. OFFCANVAS MENU (offcanvas_menu)
   ============================================================ */
.app-offcanvas-menu {
  width: clamp(10rem, 25vw, 14rem) !important; /*Min: 10rem (~160px), Ideal: 25vw (25% of window width), Max: 14rem (~224px)*/
}

/* ============================================================
   3. PAGE CONTAINER (page_container)
   ============================================================ */
.app-page-container {                       /* Main content container */
    flex: 1 1 auto;                         /* Flexible height but can shrink */
    overflow: hidden;                       /* Prevent overflow */
    height: 100%;                           /* Fill remaining vertical space */
}

/* ============================================================
   RESPONSIVE BEHAVIOR
   ============================================================ */
@media (max-width: 992px) {                 /* Apply rules on medium/small screens */
    .app-navbar-custom .app-navbar-toggler { /* Navbar toggler location */
        margin-left: auto;                  /* Push toggler to the right */
        order: 2;                           /* Change its position in flex order */
    }
    .app-navbar-toggler {                   /* Ensure toggler is visible */
        display: block !important;          /* Force display of toggler */
    }
}