/* Rasid v27.00 — responsive mobile navigation and layout */
html{max-width:100%;overflow-x:hidden}
body{max-width:100%;overflow-x:hidden}
img,svg,canvas{max-width:100%}
.table-scroll,.table-responsive,.license-table-wrap,.data-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table,.table-responsive table{min-width:720px}
.mobile-nav-overlay,.mobile-menu-toggle,.mobile-menu-close{display:none}

@media (max-width: 900px){
  body.mobile-nav-locked{overflow:hidden;touch-action:none}
  .shell{display:block!important;min-height:100vh}
  .shell main{width:100%;min-width:0}
  .shell aside{
    position:fixed!important;z-index:1002;top:0;right:0;left:auto;
    width:min(86vw,330px)!important;height:100dvh;min-height:100dvh!important;
    padding:16px 14px!important;overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(105%);visibility:hidden;pointer-events:none;
    transition:transform .24s ease,visibility 0s linear .24s;
    box-shadow:-18px 0 45px rgba(0,0,0,.22)
  }
  .shell.mobile-sidebar-open aside{
    transform:translateX(0);visibility:visible;pointer-events:auto;
    transition:transform .24s ease,visibility 0s
  }
  .mobile-nav-overlay{
    position:fixed;z-index:1001;inset:0;width:100%;height:100%;padding:0;margin:0;
    border:0;border-radius:0;background:rgba(0,0,0,.46);backdrop-filter:blur(2px);cursor:pointer
  }
  .shell.mobile-sidebar-open .mobile-nav-overlay{display:block}
  .shell aside .logo{position:relative;padding:4px 4px 15px;gap:10px}
  .shell aside .logo>div{display:block!important;min-width:0}
  .shell aside .logo b,.shell aside .logo small{display:block!important}
  .shell aside nav{display:grid!important;grid-template-columns:1fr!important;gap:5px}
  .shell aside nav span,.shell aside .aside-foot small{display:block!important}
  .shell aside nav button,.aside-foot button{min-height:46px;width:100%;font-size:14px}
  .sidebar-toggle{display:none!important}
  .mobile-menu-toggle,.mobile-menu-close{
    border:0;cursor:pointer;align-items:center;justify-content:center
  }
  .mobile-menu-toggle{
    display:grid!important;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;
    padding:0;margin:0;border:1px solid var(--border);border-radius:11px;background:#fff;color:var(--deep)
  }
  .mobile-menu-toggle svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .mobile-menu-close{
    display:grid!important;flex:0 0 40px;width:40px;height:40px;min-width:40px;min-height:40px;
    padding:0;margin-inline-start:auto;border:1px solid rgba(255,255,255,.24);border-radius:10px;
    background:rgba(255,255,255,.09);color:#fff
  }
  .mobile-menu-close svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  header{height:auto!important;min-height:68px;position:sticky!important;top:0;padding:9px 10px!important;gap:8px;z-index:900}
  header .header-identity{min-width:0;flex:1}
  header .header-identity img{width:39px;height:39px;object-fit:contain}
  header .header-identity b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:39vw}
  header .header-identity small{font-size:11px}
  header>p{display:none}
  header .user{gap:5px;min-width:0}
  header .user>div{display:none}
  header .user>i{width:36px;height:36px;flex:0 0 36px}
  .theme-toggle,.notification-button{min-width:40px!important;min-height:40px!important}
  #content{padding:14px 10px 24px!important;width:100%;max-width:100%;overflow:hidden}
  .home-welcome{display:grid!important;grid-template-columns:1fr!important;gap:10px;padding:17px!important}
  .home-welcome h1{font-size:21px!important;line-height:1.5}
  .welcome-date{font-size:12px}
  .home-module-shortcuts{grid-template-columns:1fr!important;gap:10px!important}
  .module-shortcut{min-height:108px!important;padding:16px!important}
  .kpis,.home-kpis,.efficiency-kpis,.module-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .kpi{padding:14px!important;min-width:0}
  .kpi strong{font-size:25px!important;overflow-wrap:anywhere}
  .grid2,.grid3,.home-grid,.home-overview,.quality-dashboard-grid,.quality-analysis-layout,.module-grid{grid-template-columns:1fr!important;gap:12px!important}
  .panel,.card{min-width:0}
  .panel{padding:15px!important}
  .toolbar,.visit-search-toolbar{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;gap:8px!important}
  .toolbar input,.toolbar select,.toolbar button,.visit-search-toolbar input,.visit-search-toolbar select,.visit-search-toolbar button{width:100%!important;margin:0!important}
  .form,.form-grid,.license-form-grid,.module-form-grid{grid-template-columns:1fr!important;padding:15px!important;gap:12px!important}
  .form .full,.form-actions{grid-column:auto!important}
  .form-actions{display:grid!important;grid-template-columns:1fr!important}
  button,input,select,textarea{min-height:44px;font-size:16px}
  input[type="checkbox"],input[type="radio"]{min-height:auto}
  .modal,.license-modal{padding:8px!important;align-items:flex-end!important}
  .modal-content,.modal-card,.license-modal-card,.dialog-card{width:100%!important;max-width:100%!important;max-height:92dvh!important;border-radius:18px 18px 0 0!important;overflow-y:auto!important;padding:15px!important}
  .map-container,#map,.license-map,.visit-map{width:100%!important;height:300px!important;min-height:260px!important}
  table{font-size:13px}
  td,th{padding:10px 9px;white-space:nowrap}
  .dashboard-bars span{gap:6px}
  .quality-featured-observations{grid-column:auto!important}
  .monthly-panel{grid-column:auto!important}
  .app-footer{padding:12px;font-size:11px;text-align:center}
}

@media (max-width: 520px){
  .kpis,.home-kpis,.efficiency-kpis,.module-kpis{grid-template-columns:1fr!important}
  .home-overview{display:grid!important}
  .quality-overview,.followup-overview{min-height:auto!important}
  .home-ring{width:138px!important;height:138px!important}
  .login{padding:12px}
  .login-card{padding:24px 18px!important;width:100%!important}
  .login-brand{max-width:100%}
  .login-brand img{width:70px!important}
  .login-features{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .section-title{align-items:flex-start!important;gap:8px;flex-direction:column!important}
  .section-title button{width:100%}
  header .header-identity b{max-width:31vw}
}

@media (prefers-reduced-motion: reduce){
  .shell aside{transition:none!important}
}