/**
 * SAW Admin - App Shell Layout
 * @package SAW_Visitors
 * @version 12.0.0
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --saw-header-height: 60px;
    --saw-header-height-tablet: 56px;
    --saw-header-height-mobile: 52px;
    --saw-footer-height: 45px;
    --saw-bottom-nav-height: 52px;
    --saw-bottom-nav-height-mobile: 48px;
    --saw-sidebar-width: 260px;
}

/* ============================================
   HTML & BODY
   ============================================ */
html {
    height: 100% !important;
    overflow: hidden !important;
}

body {
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   APP BODY - CSS GRID LAYOUT
   ============================================ */
.sa-app-body,
.saw-app-body {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    
    display: grid !important;
    grid-template-rows: var(--saw-header-height) 1fr var(--saw-footer-height) !important;
    grid-template-areas:
        "header"
        "main"
        "footer" !important;
    
    min-height: 0 !important;
    overflow: hidden !important;
    background: var(--saw-bg-primary, #ffffff);
    font-family: var(--saw-font-body, system-ui, -apple-system, sans-serif);
    font-size: var(--saw-text-base, 1rem);
    line-height: 1.5;
    color: var(--saw-text-primary, #0f172a);
}

/* ============================================
   HEADER - GRID AREA
   ============================================ */
.sa-app-header {
    grid-area: header !important;
}

/* ============================================
   CONTAINER - GRID AREA MAIN
   ============================================ */
.sa-app-container,
.saw-app-container {
    grid-area: main !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================
   FOOTER - GRID AREA
   ============================================ */
.sa-app-footer,
.saw-app-footer {
    grid-area: footer !important;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.sa-app-main,
.saw-app-main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--saw-bg-primary, #ffffff);
}

/* ============================================
   CONTENT AREA
   ============================================ */
.sa-app-content,
.saw-app-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    background: var(--saw-bg-primary, #ffffff);
}

/* ============================================
   MODULE WRAPPER
   ============================================ */
[class^="saw-module-"],
[class*=" saw-module-"] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================
   TABLE PANEL
   ============================================ */
.sa-table-panel {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ============================================
   DESKTOP
   ============================================ */
@media (min-width: 1025px) {
    .sa-app-body,
    .saw-app-body {
        grid-template-rows: var(--saw-header-height) 1fr var(--saw-footer-height) !important;
    }
    
    .sa-app-main,
    .saw-app-main {
        margin-left: var(--saw-sidebar-width) !important;
    }
    
    .sa-bottom-nav {
        display: none !important;
    }
}

/* ============================================
   TABLET
   ============================================ */
@media (max-width: 1024px) {
    .sa-app-body,
    .saw-app-body {
        grid-template-rows: var(--saw-header-height-tablet) 1fr var(--saw-bottom-nav-height) !important;
    }
    
    .sa-app-main,
    .saw-app-main {
        margin-left: 0 !important;
    }
}

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 768px) {
    .sa-app-body,
    .saw-app-body {
        grid-template-rows: var(--saw-header-height-mobile) 1fr var(--saw-bottom-nav-height-mobile) !important;
    }
}

/* ============================================
   SMALL MOBILE
   ============================================ */
@media (max-width: 480px) {
    .sa-app-body,
    .saw-app-body {
        grid-template-rows: var(--saw-header-height-mobile) 1fr var(--saw-bottom-nav-height-mobile) !important;
    }
}

/* ============================================
   PWA STANDALONE
   ============================================ */
@media (display-mode: standalone) {
    .sa-app-body,
    .saw-app-body {
        padding-top: env(safe-area-inset-top, 0px);
    }
}