/* SIEBIS UI Framework v2.0
   MOBILE LAYER: 0px - 720px
   This file contains phone rules only.
*/

@media (max-width:720px){
  :root{
    --mobile-gutter:14px;
    --touch-size:44px;
  }

  html,
  body{
    overflow-x:hidden;
  }

  .layout{
    display:block;
    min-height:100vh;
  }

  .sidebar{
    position:fixed;
    z-index:3000;
    top:0;
    left:0;
    bottom:0;
    width:min(310px,86vw);
    height:100dvh;
    transform:translateX(-105%);
    transition:transform .25s ease;
    overflow-y:auto;
    box-shadow:22px 0 50px rgba(9,30,28,.3);
  }

  body.mobile-menu-open .sidebar{
    transform:translateX(0);
  }

  .mobile-sidebar-overlay{
    display:block;
    position:fixed;
    z-index:2990;
    inset:0;
    border:0;
    padding:0;
    background:rgba(4,20,19,.55);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
  }

  body.mobile-menu-open .mobile-sidebar-overlay{
    opacity:1;
    visibility:visible;
  }

  .sidebar-profile{
    position:static;
    margin-top:18px;
  }

  .main{
    width:100%;
    margin-left:0;
    padding:0 var(--mobile-gutter) 22px;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:2000;
    min-height:62px;
    margin:0 calc(var(--mobile-gutter) * -1) 16px;
    padding:9px var(--mobile-gutter);
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    gap:8px;
  }

  .mobile-menu-button{
    display:inline-grid;
    place-items:center;
    width:var(--touch-size);
    min-width:var(--touch-size);
    height:var(--touch-size);
    border:1px solid var(--line);
    border-radius:13px;
    background:var(--surface);
    color:var(--green);
    cursor:pointer;
  }

  .mobile-menu-button svg{
    width:22px;
    height:22px;
  }

  .topbar-spacer{
    display:none;
  }

  .top-actions{
    margin-left:auto;
    gap:5px;
  }

  .search-button span,
  .account-button strong,
  .language-current,
  .language-chevron{
    display:none;
  }

  .search-button,
  .account-button,
  .language-toggle,
  .icon-button,
  .theme-button{
    width:var(--touch-size);
    min-width:var(--touch-size);
    height:var(--touch-size);
    padding:0;
    justify-content:center;
    border-radius:13px;
  }

  .account-button > svg{
    display:none;
  }

  .language-menu{
    right:0;
    left:auto;
    min-width:210px;
  }

  .hero{
    padding:0;
    margin:0 0 18px;
    text-align:center;
  }

  .hero-title h2{
    font-size:40px;
    line-height:1.05;
  }

  .hero-title h3{
    margin-top:6px;
    font-size:19px;
    line-height:1.2;
    letter-spacing:.04em;
  }

  .hero-title p{
    margin:8px auto 16px;
    max-width:92%;
    font-size:14px;
    line-height:1.45;
  }

  .hero-visual{
    height:158px;
    min-height:158px;
    border-radius:16px;
    background-position:center;
  }

  .section{
    margin-top:0;
  }

  .section-title{
    display:block;
    margin-bottom:13px;
  }

  .section-title h3{
    font-size:22px;
  }

  .section-title p{
    font-size:14px;
  }

  .module-grid{
    grid-template-columns:1fr;
    gap:13px;
  }

  .module-card{
    min-height:0;
    padding:18px;
    border-radius:20px;
  }

  .module-icon{
    width:46px;
    height:46px;
    margin-bottom:14px;
    border-radius:15px;
  }

  .module-card h4{
    margin-bottom:9px;
    font-size:19px;
  }

  .module-card p{
    font-size:14px;
    line-height:1.5;
  }

  .module-footer{
    margin-top:16px;
  }

  .stats{
    grid-template-columns:1fr;
    gap:11px;
    margin-top:18px;
  }

  .stats article{
    padding:16px;
    border-radius:20px;
  }

  .stats strong{
    font-size:26px;
  }

  button,
  a,
  input,
  select,
  textarea{
    touch-action:manipulation;
  }
}

@media (max-width:390px){
  :root{
    --mobile-gutter:11px;
    --touch-size:42px;
  }

  .top-actions{
    gap:3px;
  }

  .hero-title h2{
    font-size:37px;
  }
}

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