/* ============================
   RESET
============================ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.mobile-topbar{ display:none; }

/* Mobile app header and on-demand navigation drawer. */
@media (max-width:600px){
    body.mobile-nav-open{ overflow:hidden; }
    .mobile-topbar{
        position:fixed; top:0; left:0; right:0; z-index:1197;
        display:flex; align-items:center; justify-content:space-between;
        height:calc(72px + env(safe-area-inset-top));
        padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));
        border-bottom:1px solid #E5E7EB; background:rgba(255,255,255,.97);
        box-shadow:0 4px 16px rgba(15,23,42,.06);
    }
    .mobile-topbar-logo{ display:block; width:auto; max-width:145px; height:42px; object-fit:contain; }
    .mobile-home-link{ display:flex; align-items:center; min-width:0; }
    .mobile-menu-button{
        position:static; display:flex !important; width:48px; height:48px; flex:0 0 48px;
        align-items:center; justify-content:center; border-color:#E8DFC5;
        background:#FFFAEC; color:#9B7500; box-shadow:none;
    }
    .mobile-nav-backdrop{
        position:fixed; inset:0; z-index:1198; background:rgba(15,23,42,.46);
        backdrop-filter:blur(2px);
    }
    body.mobile-nav-open .mobile-nav-backdrop{ display:block !important; }
    .sidebar{
        top:0; bottom:0; left:0; z-index:1200; display:flex !important;
        width:min(86vw,360px); min-width:0; height:100dvh; border:0;
        border-radius:0 18px 18px 0; transform:translateX(calc(-100% - 24px));
        transition:transform .25s ease;
    }
    body.mobile-nav-open .sidebar{ transform:translateX(0); }
    .menu-item{ min-height:46px; padding:11px 14px; font-size:14px; }
    .logout-btn{ min-height:46px; }
    .main,
    .main.has-side-panel{
        width:100%; margin:0;
        padding:calc(92px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(104px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    }
}

html{
    width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:'Inter',sans-serif;
    background:#F8FAFC;
    color:#1F2937;
    width:100%;
    min-width:0;
    overflow-x:hidden;
}

img,svg{ max-width:100%; }
input,select,textarea,button{ max-width:100%; }

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

.app{
    display:flex;
    min-height:100vh;
}

/* ============================
   MAIN
============================ */

.main{
    flex:1;
    margin-left:282px;
    background:#F8FAFC;
    padding:32px;
}

/* Recap pages that render the right-hand overview/progress panel need
   room reserved so content doesn't run under it (see .recap-side-panel
   in recap.css). Dashboard/All Recaps don't carry this panel, so this
   is opt-in via a modifier class rather than a blanket .main change. */
.main.has-side-panel{
    margin-right:312px;
}

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

Fixed to the viewport (position:fixed) so it always spans the full
screen height and never moves when the main content scrolls. Only the
nav list itself (.sidebar-body, Dashboard through Warranty & Service)
scrolls internally, and only when it actually needs to — on a big
screen it fits with no scrollbar at all; on a short window it scrolls
in place instead of clipping. Logo, title, and footer stay pinned.
==================================*/

.sidebar{

    width:250px;
    min-width:250px;

    height:calc(100vh - 32px);

    position:fixed;
    top:16px;
    left:16px;

    display:flex;
    flex-direction:column;

    background:#FFFFFF;

    border:1px solid #ECECEC;

    border-radius:22px;

    box-shadow:
        0 12px 35px rgba(15,23,42,.08);

    overflow:hidden;

}

.sidebar-content{

    flex:1;

    display:flex;

    flex-direction:column;

    min-height:0;

}

.sidebar-body{

    flex:1;

    overflow-y:auto;

    min-height:0;

    padding:8px 0;

}

.sidebar-footer{

    flex-shrink:0;

    padding:12px 14px;

    border-top:1px solid #E5E7EB;

    background:#FFFFFF;

}

/*==================================
LOGO
==================================*/

.logo{

    display:flex;
    align-items:center;
    justify-content:center;

    padding:12px 16px;

    background:#FFFFFF;

    border-bottom:1px solid #E5E7EB;

}

.logo img{
    width:200px;
    height:auto;
    display:block;
    object-fit:contain;
}

/* MENU */

.sidebar-menu{

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    min-height:100%;

    padding:8px 12px;

}

.menu-title{

    color:#6b7280;

    font-size:11px;

    letter-spacing:2px;

    margin:20px 10px 10px;

    font-weight:600;

}

.menu-item{

    display:flex;
    align-items:center;
    gap:12px;

    padding:9px 16px;

    margin-bottom:0px;

    border-radius:10px;

    text-decoration:none;

    color:#374151;

    font-size:13.5px;

    font-weight:500;

    transition:all .25s ease;

}

.menu-item img{

    width:19px;
    height:19px;

}

.menu-item:hover{

    background:#F3F4F6;

}

.menu-item.active{

    background:#FFF8E6;

    color:#B8860B;

}

.avatar{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#F4B400;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.avatar img{

    width:16px;

    height:16px;

}

/*==================================
SIDEBAR TITLE
==================================*/

.sidebar-title{

    padding:16px 20px;

    text-align:left;

    border-bottom:1px solid #F5F5F5;

    background:#FFFFFF;

}

.sidebar-label{

    display:block;

    margin-bottom:8px;

    font-size:13.5px;

    font-weight:700;

    letter-spacing:2.5px;

    color:#D4A017;

}

.sidebar-title p{

    font-size:11.5px;

    color:#6B7280;

    line-height:1.5;

    margin:0;

    max-width:100%;

}

/*==================================
ACCOUNT
==================================*/

.account{

    display:flex;

    align-items:center;

    gap:12px;

}

.account-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.account-info h4{

    font-size:13px;

    font-weight:600;

    color:#111827;

    line-height:1.1;

    margin:0;

}

.account-info p{

    font-size:11px;

    color:#6B7280;

    line-height:1.1;

    margin-top:2px;

}

.account-card{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-bottom:10px;

}

/*==================================
LOGOUT
==================================*/

.logout-btn{

    width:100%;

    height:34px;

    border:none;

    border-radius:10px;

    background:#F3F4F6;

    color:#374151;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.logout-btn:hover{

    background:#E5E7EB;

}

.mobile-menu-button,
.mobile-nav-backdrop{ display:none; }


@media (max-width:900px){
    body.mobile-nav-open{ overflow:hidden; }
    .app{ display:block; }
    .main,
    .main.has-side-panel{
        width:100%; min-width:0; margin:0;
        padding:calc(76px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    }
    .mobile-menu-button{
        position:fixed; top:calc(14px + env(safe-area-inset-top)); left:max(14px,env(safe-area-inset-left)); z-index:1201;
        display:flex; width:46px; height:46px; align-items:center; justify-content:center;
        border:1px solid #E5E7EB; border-radius:13px; background:#FFF; color:#111827;
        box-shadow:0 8px 24px rgba(15,23,42,.14); cursor:pointer;
        touch-action:manipulation;
    }
    .mobile-menu-button svg{ width:23px; height:23px; }
    .mobile-nav-backdrop{
        position:fixed; inset:0; z-index:1198;
        background:rgba(15,23,42,.46); backdrop-filter:blur(2px);
    }
    body.mobile-nav-open .mobile-nav-backdrop{ display:block; }
    .sidebar{
        top:10px; bottom:10px; left:10px; z-index:1200;
        width:min(84vw,310px); min-width:0; height:auto; border-radius:18px;
        transform:translateX(calc(-100% - 24px)); transition:transform .25s ease;
    }
    body.mobile-nav-open .sidebar{ transform:translateX(0); }
    .menu-item{ min-height:44px; padding:11px 14px; font-size:14px; }
    .logout-btn{ min-height:44px; }
}

@media (max-width:480px){
    .main,
    .main.has-side-panel{
        padding:calc(72px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    }
}

/* Phone layout: maximize the working area by removing desktop navigation. */
@media (max-width:600px){
    body.mobile-nav-open{ overflow:auto; }
    .sidebar,
    .mobile-menu-button,
    .mobile-nav-backdrop{ display:none !important; }
    .main,
    .main.has-side-panel{
        width:100%;
        margin:0;
        padding:calc(16px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    }
}

/* Final mobile drawer behavior: closed by default, opened by the top button. */
@media (max-width:600px){
    body.mobile-nav-open{ overflow:hidden; }
    .mobile-topbar{ display:flex !important; }
    .mobile-menu-button{
        position:static !important;
        top:auto !important;
        right:auto !important;
        left:auto !important;
        display:flex !important;
        margin-left:auto;
    }
    .sidebar{
        display:flex !important;
        top:0; bottom:0; left:0;
        width:min(86vw,360px); height:100dvh;
        border:0; border-radius:0 18px 18px 0;
        transform:translateX(calc(-100% - 24px));
    }
    body.mobile-nav-open .sidebar{ transform:translateX(0); }
    body.mobile-nav-open .mobile-nav-backdrop{ display:block !important; }
    .main,
    .main.has-side-panel{
        padding:calc(92px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(104px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    }
}