/* ═══════════════════════════════════════════════════════════════
   Manzoma Responsive Styles
   Phase 2 split: extracted runtime support styles from style.css.
   Load order: tokens.css → base.css → layout.css → components.css → pages → support styles → style.css.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MOBILE — PM VIEW
═══════════════════════════════════════════════════════════════ */
.ham-btn{
  display:none;width:36px;height:36px;border-radius:var(--r3);
  background:var(--s1);border:1px solid var(--b1);
  color:var(--t2);font-size:17px;
  align-items:center;justify-content:center;flex-shrink:0;
  transition:all .14s;
}
.ham-btn:hover{background:var(--g5);border-color:var(--g4);color:var(--g3)}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:49;backdrop-filter:blur(3px)}
.sb-overlay.open{display:block}

@media(max-width:767px){
  .ham-btn{display:flex}
  .sidebar{position:fixed;right:0;top:0;bottom:0;z-index:50;transform:translateX(110%);transition:transform .26s var(--ease);box-shadow:-4px 0 22px rgba(0,0,0,.26);width:236px;height:auto}
  .sidebar.open{transform:translateX(0)}
  
  .topbar{padding:var(--sp3) var(--sp3);flex-wrap:wrap;gap:var(--sp2)}
  .topbar-actions{gap:var(--sp2);flex-wrap:wrap}
  .btn-lbl{display:none}
  .btn-primary,.btn-sec,.btn-portfolio{padding:10px 13px;font-size:var(--fz-sm);min-height:42px}
  .page{padding:var(--sp3) var(--sp3);gap:var(--sp4)}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp3)}
  .kpi-card{padding:var(--sp4) var(--sp3) var(--sp3)}
  .kv{font-size:var(--fz-xl)}
  .kpi-ic{width:32px;height:32px;font-size:var(--fz-sm);margin-bottom:var(--sp2)}
  .charts-row,.charts-row-2{grid-template-columns:1fr}
  .board-highlights{grid-template-columns:1fr 1fr}
  .pg-v2,.tg-v2{grid-template-columns:1fr}
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dt th,.dt td{padding:8px 10px;font-size:var(--fz-sm)}
  .dt .hide-sm{display:none}
  .dt td:nth-child(2),.dt th:nth-child(2){display:none}
  .filter-bar{padding:var(--sp3);gap:var(--sp3)}
  .filter-row{flex-direction:column;align-items:flex-start;gap:var(--sp2)}
  .filter-label{min-width:auto}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex-shrink:0;padding:8px 14px;font-size:var(--fz-sm);min-height:38px}
  .rep-header{flex-direction:column;gap:var(--sp3)}
  .rep-header-left h2{font-size:var(--fz-md)}
  .gw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sec-hd h2{font-size:var(--fz-sm)}
  #rep-kpi-grid{grid-template-columns:1fr 1fr}
  .rep-kpi-card-pro{min-height:auto;flex-direction:column;align-items:flex-start;gap:var(--sp3)}
  .rep-kpi-val{font-size:var(--fz-xl)}
  /* Action buttons — mobile: 44px touch targets (Apple HIG / WCAG 2.5.5) */
  .act-btns{gap:var(--sp2)}
  .act-btn-due,.act-btn-ass,.act-btn-move{display:none}
  .act-btn{width:44px;height:44px}
  /* Portfolio mobile: hide move+ass */
  .pf-act-ass,.pf-act-move{display:none}
}

@media(min-width:768px){.btn-lbl{display:inline}}

@media(max-width:400px){
  .topbar{flex-direction:column;align-items:flex-start;gap:8px;padding:11px}
  .topbar-actions{width:100%;justify-content:flex-end}
}

@media(max-width:540px){
  .modal{width:100%;max-width:100%;border-radius:var(--r) var(--r) 0 0;position:fixed;bottom:0;left:0;right:0;animation:modal-sheet .24s var(--ease-out)}
  .overlay{align-items:flex-end}
  @keyframes modal-sheet{from{transform:translateY(100%)}to{transform:none}}
  .mbd{max-height:58vh;overflow-y:auto}
  .fg{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO TABLET
═══════════════════════════════════════════════════════════════ */
@media(min-width:768px) and (max-width:1023px){
  #portfolio-app{background:var(--bg)}
  .pf-header{padding:15px 22px}
  .pf-kpi-scroll{display:grid;grid-template-columns:repeat(3,1fr);overflow-x:visible;gap:10px;padding:13px 18px}
  .pf-kpi-chip{min-width:0;flex-shrink:unset}
  .pf-section{padding:0 18px 14px}
  .pf-alert-wrap{padding:13px 18px 0}
  .pf-filter-wrap{padding:9px 18px}
  #pf-home-proj-list,#pf-proj-list{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
  .pf-proj-card{margin-bottom:0}
  #pf-team-list{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
  .pf-member-card{margin:0}
  .pf-task-item{padding:12px 15px}
  .pf-rep-section{margin:0 18px 11px;border-radius:var(--r)}
}

/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO DESKTOP
═══════════════════════════════════════════════════════════════ */
@media(min-width:1024px){
  #portfolio-app{flex-direction:row;align-items:stretch;overflow:hidden}
  .pf-pages{flex:1;min-width:0;height:100%;overflow-y:auto}
  .pf-header{padding:16px 28px}
  .pf-bottom-nav{
    flex-shrink:0;width:220px;height:100%;
    flex-direction:column;align-items:stretch;
    border-top:none;border-left:1px solid var(--b0);
    padding:22px 10px 18px;gap:2px;overflow-y:auto;
    box-shadow:-2px 0 14px rgba(0,0,0,.04);
    background:var(--s0);order:-1;
  }
  .pf-bottom-nav::before{
    content:'محفظة منظومة';display:block;
    font-size:13px;font-weight:800;color:var(--g3);
    padding:0 9px 14px;border-bottom:1px solid var(--b0);margin-bottom:8px;
  }
  .pf-nav-btn{
    flex-direction:row;align-items:center;justify-content:flex-end;
    gap:9px;padding:9px 11px;border-radius:var(--r3);
    text-align:right;position:relative;
  }
  .pf-nav-btn::before{display:none}
  .pf-nav-btn.active::after{content:'';position:absolute;right:0;top:22%;bottom:22%;width:3px;background:var(--accent);border-radius:4px 0 0 3px}
  .pf-nav-btn:hover{background:var(--g6)}
  .pf-nav-btn.active{background:var(--g5);color:var(--g3)}
  .pf-nav-icon{font-size:15px;order:1}
  .pf-nav-lbl{font-size:13px;font-weight:500;order:0;flex:1}
  .pf-nav-btn.active .pf-nav-lbl{font-weight:700}
  .pf-kpi-scroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));overflow-x:visible;gap:11px;padding:16px 26px}
  .pf-kpi-chip{min-width:0}
  .pf-section{padding:0 26px 20px}
  .pf-alert-wrap{padding:14px 26px 0}
  .pf-filter-wrap{padding:11px 26px}
  #pf-home-proj-list,#pf-proj-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px}
  .pf-proj-card{margin-bottom:0}
  #pf-team-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px}
  .pf-member-card{margin:0}
  .pf-task-item{padding:13px 17px}
  .pf-rep-section{margin:0 26px 13px;border-radius:var(--r)}
}

/* ═══════════════════════════════════════════════════════════════
   LARGE SCREENS
═══════════════════════════════════════════════════════════════ */
@media(min-width:1200px){
  .page{padding:24px 32px;gap:22px}
  .topbar{padding:13px 32px}
}

/* WBS MODAL MOBILE styles moved to styles/pages/project-page.css. */

/* Timeline mobile styles moved to styles/pages/gantt.css. */