/* Ecofami mobile safety layer: loaded last to keep every module readable. */
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%}
:where(.main,.content,.section,.card,.modal,.modal-body,.field,.formgrid,.actions,.tabs,.tablewrap){min-width:0;max-width:100%}
:where(h1,h2,h3,h4,h5,h6,p,span,strong,b,small,label,a,button,td,th,li){overflow-wrap:break-word;word-break:normal}
:where(input,select,textarea,button){max-width:100%;font-family:inherit}

@media(max-width:760px){
  body{font-size:15px;line-height:1.5}
  .topbar{height:auto;min-height:68px;padding:10px 14px;gap:10px}
  .topbar>div{min-width:0}
  .topbar h2{font-size:clamp(18px,5.1vw,22px);line-height:1.25;overflow-wrap:anywhere}
  .topbar small{font-size:11px;line-height:1.35}
  .content{width:100%;padding:16px 12px calc(88px + env(safe-area-inset-bottom));overflow-x:hidden}
  .section,.card{padding:15px;border-radius:18px}
  .section{margin:14px 0}
  .section-head{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .section-head>:is(.btn,button,.actions){width:100%}
  .section h3{font-size:19px;line-height:1.3}
  .section p{line-height:1.55}
  .cards{gap:10px;margin-bottom:14px}
  .kpi small{font-size:11px;line-height:1.35}
  .kpi b{font-size:21px;overflow-wrap:anywhere}

  .formgrid,.filters,.checks,.product-picker{grid-template-columns:minmax(0,1fr)!important;gap:11px}
  .field{min-width:0;width:100%}
  .field label{font-size:11px;line-height:1.4}
  .field input,.field select,.field textarea{min-width:0;width:100%;font-size:16px;line-height:1.35;padding:12px;border-radius:12px}
  input[type="date"],input[type="time"],input[type="datetime-local"]{min-height:46px}

  .actions,.tabs,.modal-foot{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:8px}
  .actions>:is(.btn,button,a),.tabs button,.modal-foot>:is(.btn,button){width:100%;min-width:0;white-space:normal;text-align:center;line-height:1.35}
  .btn{min-height:44px;padding:11px 13px;white-space:normal;line-height:1.35;text-align:center}

  .modal-bg{padding:0;align-items:flex-end;overflow:hidden}
  .modal{width:100%;max-width:100%;max-height:94dvh;border-radius:22px 22px 0 0;overflow:hidden;display:flex;flex-direction:column}
  .modal-head{flex:none;padding:14px 15px;gap:10px}
  .modal-head h3{min-width:0;font-size:19px;line-height:1.3;overflow-wrap:anywhere}
  .modal-head .x{flex:0 0 38px}
  .modal-body{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;padding:15px;-webkit-overflow-scrolling:touch}
  .modal-foot{flex:none;padding:12px 15px max(12px,env(safe-area-inset-bottom));border-radius:0}
  .modal-body :where(.card,.section){max-width:100%}

  .tablewrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table{min-width:640px;width:max-content;max-width:none}
  .table th,.table td{font-size:12px;line-height:1.45;padding:10px;white-space:normal;vertical-align:top}
  .table :where(.btn,button){white-space:normal}
  .detailbox{font-size:13px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}

  .personal-hero{padding:20px 17px;border-radius:21px}
  .personal-hero h2{font-size:24px;line-height:1.25;overflow-wrap:anywhere}
  .personal-hero p{line-height:1.55}
  .level-pill{max-width:100%;white-space:normal;line-height:1.4}

  .ch-heading{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:9px}
  .ch-heading h2{line-height:1.3;overflow-wrap:anywhere}
  .ch-heading>:is(.btn,button){width:100%}
  .ch-hero{min-height:auto;padding:21px 17px;gap:16px}
  .ch-hero h1{font-size:25px;line-height:1.28;overflow-wrap:anywhere}
  .ch-hero p{line-height:1.55}
  .ch-hero-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .ch-hero-stats b{white-space:normal;line-height:1.35}
  .ch-section{min-width:0;padding:15px}
  .ch-leaders>div{grid-template-columns:24px 34px minmax(0,1fr);align-items:start}
  .ch-leaders>div>:last-child{grid-column:3;text-align:left;overflow-wrap:anywhere}
  .ch-outlet-filters{grid-template-columns:minmax(0,1fr)}
  .ch-outlet-list{grid-template-columns:minmax(0,1fr);max-height:none;overflow:visible}
  .ch-outlet-admin-row{align-items:flex-start;flex-direction:column}
  .ch-outlet-admin-row button{width:100%}

  .auth{padding:12px}
  .auth-card{width:100%;padding:23px 17px;border-radius:22px}
  .auth-card h1{font-size:23px;overflow-wrap:anywhere}
  .toast{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));transform:none;width:auto;text-align:center;line-height:1.4;overflow-wrap:anywhere}

  /* Mobile menu: clean one-column accordion instead of uneven tiles. */
  .side.open{
    display:flex!important;flex-direction:column!important;
    left:8px!important;right:8px!important;bottom:8px!important;top:auto!important;
    width:auto!important;height:min(90dvh,760px)!important;
    padding:12px 10px max(12px,env(safe-area-inset-bottom))!important;
    border:1px solid #dcebe3!important;border-radius:24px!important;
    overflow:hidden!important;background:#f8fcf9!important;color:#173b2d!important;
    box-shadow:0 -10px 54px rgba(4,46,28,.24)!important
  }
  .side.open .brand{display:none!important}
  .side.open .userbox{
    flex:0 0 auto!important;margin:0 0 10px!important;padding:11px 13px!important;
    border:1px solid #cfe9d9!important;border-radius:16px!important;
    background:linear-gradient(135deg,#ecfdf3,#ddf8e7)!important;color:#124b32!important;
    font-size:12px!important;line-height:1.35!important;box-shadow:none!important
  }
  .side.open .userbox b{display:inline!important;margin-left:4px;font-size:15px!important;color:#063e28!important}
  .side.open .userbox small{display:inline-block!important;margin-left:6px;padding-left:7px;border-left:1px solid #aad7ba;color:#547164!important;font-size:11px!important}
  .side.open .quick{
    flex:0 0 auto!important;min-height:46px!important;margin:0 0 10px!important;border-radius:14px!important;
    background:linear-gradient(135deg,#079447,#12b76a)!important;box-shadow:0 8px 20px rgba(7,148,71,.2)!important
  }
  .side.open .nav.eco-grouped-nav{
    display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
    grid-template-columns:none!important;gap:6px!important;width:100%!important;min-height:0!important;
    padding:2px 1px 6px!important;overflow-x:hidden!important;overflow-y:auto!important
  }
  .side.open .eco-menu-group{display:block!important;width:100%!important}
  .side.open .nav.eco-grouped-nav button{
    width:100%!important;min-height:46px!important;margin:0!important;padding:10px 12px!important;
    border:1px solid #e0ebe5!important;border-radius:14px!important;
    background:#fff!important;color:#244c39!important;box-shadow:0 3px 10px rgba(19,67,43,.035)!important;
    font-size:14px!important;line-height:1.3!important
  }
  .side.open .nav.eco-grouped-nav button svg{width:19px!important;height:19px!important;color:#087443!important}
  .side.open .nav.eco-grouped-nav button span{flex:1 1 auto!important;width:auto!important;max-width:none!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:break-word!important}
  .side.open .eco-menu-parent{grid-template-columns:20px minmax(0,1fr) 18px!important;font-weight:850!important}
  .side.open .eco-menu-parent i{color:#6b8175!important;font-size:15px!important}
  .side.open .eco-menu-group.open>.eco-menu-parent{border-color:#b8dec8!important;background:#eefaf3!important;color:#075f38!important}
  .side.open .eco-menu-children{gap:5px!important;padding:6px 0 1px 12px!important;border-left:2px solid #cde8d7!important;margin-left:10px!important}
  .side.open .eco-menu-children button{min-height:42px!important;padding:9px 11px!important;border-color:transparent!important;background:transparent!important;box-shadow:none!important;color:#426052!important;font-size:13.5px!important}
  .side.open .eco-menu-children button:hover{background:#eff8f3!important}
  .side.open .nav.eco-grouped-nav button.active,
  .side.open .nav.eco-grouped-nav button[aria-current="page"]{
    border-color:#087443!important;background:#087443!important;color:#fff!important;
    box-shadow:0 7px 18px rgba(8,116,67,.2)!important
  }
  .side.open .nav.eco-grouped-nav button.active svg,
  .side.open .nav.eco-grouped-nav button[aria-current="page"] svg{color:#fff!important}
  .side.open .logout{
    flex:0 0 auto!important;min-height:44px!important;margin:9px 0 0!important;border:1px solid #fee2e2!important;
    border-radius:14px!important;background:#fff7f7!important;color:#b42318!important;box-shadow:none!important
  }
  .side-scrim.show{background:rgba(5,31,20,.52)!important;backdrop-filter:blur(2px)}
}

@media(max-width:380px){
  .content{padding-left:10px;padding-right:10px}
  .section,.card,.ch-section{padding:13px}
  .topbar h2{font-size:18px}
  .ch-hero h1,.personal-hero h2{font-size:22px}
  .modal-body{padding:13px}
}

@media(max-height:560px) and (orientation:landscape){
  .modal{max-height:100dvh;border-radius:0}
  .modal-bg{align-items:stretch}
}