/* =============================================================================
   LAYOUT - BASE STYLES
   Path: /css/_shared/_layout-base.css
   
   Purpose: Layout structure, grid, positioning for main admin shell.
   Dependencies: _variables.css, _typography.css
   
   DO NOT include:
   - Colors, backgrounds (see _layout-theme.css)
   - Media queries (see _layout-responsive.css)
   ========================================================================== */

/* =============================================================================
   PAGE SHELL
   ========================================================================== */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* =============================================================================
   NAVBAR STRUCTURE
   ========================================================================== */

.navbar {
    display: flex;
    align-items: center;
    height: var(--navbar-height);
    padding: 0 var(--space-4);
    position: sticky;
    top: 0;
    z-index: var(--z-fixed);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    text-decoration: none;
}

.navbar-brand-logo {
    height: 32px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.navbar-nav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-2);
}

.navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    border: none;
    background: transparent;
    cursor: pointer;
}

/* =============================================================================
   LAYOUT SHELL (Sidebar + Content)
   ========================================================================== */

.layout-shell {
    display: flex;
    min-height: calc(100vh - var(--navbar-height));
}

/* =============================================================================
   SIDEBAR STRUCTURE
   ========================================================================== */

#sidebar.offcanvas {
    width: var(--sidebar-width);
    max-width: 100%;
}

#sidebar .offcanvas-body {
    padding: 0;
}

#sidebar .offcanvas-header {
    padding: var(--space-4);
}

/* Sidebar navigation */
#sidebar nav {
    padding: var(--space-3);
}

#sidebar .nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

#sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
}

#sidebar .nav-link i {
    width: 1.25rem;
    text-align: center;
}

/* Section labels */
#sidebar .text-uppercase {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-1);
}

/* =============================================================================
   MAIN CONTENT AREA
   ========================================================================== */

.with-sidebar {
    flex: 1;
    min-width: 0;
    padding: var(--space-4);
}

.content,
.main-content {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

/* =============================================================================
   CONTAINER UTILITIES
   ========================================================================== */

.container-fluid {
    width: 100%;
    padding-right: var(--space-4);
    padding-left: var(--space-4);
}

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

footer {
    padding: var(--space-4) 0;
    margin-top: var(--space-4);
}

/* =============================================================================
   LOADING & SUCCESS OVERLAYS
   Migrated from user.css
   ========================================================================== */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-loading);
}

.success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-success);
}

/* Form section overlay (semi-transparent) */
.form-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   DROPDOWN MENU STRUCTURE
   ========================================================================== */

.dropdown-menu {
    min-width: 10rem;
    padding: var(--space-2) 0;
    margin: 0;
    border-radius: var(--radius-lg);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
}

.dropdown-header {
    padding: var(--space-2) var(--space-4);
}

.dropdown-divider {
    margin: var(--space-2) 0;
}

/* =============================================================================
   USER AVATAR (Navbar)
   ========================================================================== */

.navbar .rounded-circle {
    width: 28px;
    height: 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* =============================================================================
   ORGANIZATION THUMBNAILS
   Migrated from user.css
   ========================================================================== */

.org-thumbnail-md {
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.org-thumbnail-container.org-thumbnail-md {
    width: 80px;
    height: 80px;
    min-width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.org-thumbnail-container.org-thumbnail-md img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.org-thumbnail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* =============================================================================
   TOAST CONTAINER POSITION
   ========================================================================== */

.toast-container.top-center {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    z-index: var(--z-toast);
}