/* FORGE — responsive layout final
   Mobile-first overrides. Keeps desktop scale and makes every screen fluid. */
html,body{width:100%;min-width:0;max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
.app{width:100%;min-width:0;max-width:100%;display:flex}
.app aside{width:245px;flex:0 0 245px;min-width:0}
.app main{width:auto;min-width:0;max-width:none;flex:1}
.app header{min-width:0;max-width:none}
#content{width:100%;min-width:0;max-width:none;overflow:visible}
.content{width:100%;min-width:0;max-width:none;margin:0;padding:28px}
.content>*{min-width:0;max-width:100%}
.card,.hero-card,.pro-card,.stat,.pro-stat,.detail-card,.modal-card{min-width:0;max-width:100%}
.stats,.grid2,.form-grid,.filters,.detail-grid,.detail-info,.pro-grid,.pro-grid2,.pro-stats{min-width:0;max-width:100%}

@media(max-width:1100px){
  .app aside{width:210px;flex-basis:210px}
  .content{padding:20px}
  .pro-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pro-grid,.pro-grid2{grid-template-columns:1fr}
}

/* TABLET / PHONE */
@media(max-width:800px){
  html,body{width:100%!important;min-width:0!important;overflow-x:hidden!important}
  .app{display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;max-width:none!important}
  .app aside{order:0;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:58px!important;flex:0 0 auto!important;position:sticky!important;top:0!important;z-index:60!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:7px!important;padding:7px 9px!important;overflow:hidden!important;border-right:0!important;border-bottom:1px solid var(--line)!important;background:#0a0a0ff5!important}
  .app .brand{display:flex!important;flex:0 0 auto!important;padding:3px 6px!important;gap:7px!important}
  .app .brand .forge-mark{width:34px!important;height:34px!important;font-size:18px!important}
  .app .brand b{font-size:14px!important}
  .app .brand small{font-size:7px!important}
  .app aside nav{display:flex!important;flex:1 1 auto!important;width:auto!important;min-width:0!important;gap:4px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important}
  .app aside nav::-webkit-scrollbar{display:none}
  .app aside nav button{display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;width:auto!important;min-width:max-content!important;padding:9px 11px!important;margin:0!important;white-space:nowrap!important;font-size:12px!important;text-align:center!important}
  .app aside nav button.active{box-shadow:inset 3px 0 var(--purple)!important}
  .app .side-foot{display:none!important}

  .app main{order:1;width:100%!important;min-width:0!important;max-width:none!important;flex:1 1 auto!important;padding:0!important}
  .app header{width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:68px!important;padding:12px 14px!important;position:sticky!important;top:58px!important;z-index:40!important;gap:10px!important}
  .app header>div:first-child{min-width:0!important;flex:1 1 auto!important}
  .app header h1{font-size:20px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .app header p{font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .app .header-actions{display:flex!important;flex:0 0 auto!important;gap:5px!important}
  .app .header-actions .ghost{display:none!important}
  .app .header-actions .primary{display:block!important;white-space:nowrap!important;font-size:11px!important;padding:8px 10px!important}

  #content{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;overflow:visible!important}
  .content{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;padding:14px!important}
  .content>*{width:100%!important;min-width:0!important;max-width:none!important}

  .stats{width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin-bottom:12px!important}
  .stat{width:100%!important;min-width:0!important;padding:14px!important;border-radius:14px!important}
  .stat .label{font-size:10px!important;line-height:1.3!important}
  .stat strong{font-size:24px!important}
  .stat em{font-size:9px!important}

  .grid2,.dashboard-v2-grid{display:grid!important;width:100%!important;max-width:none!important;grid-template-columns:1fr!important;gap:12px!important}
  .grid2>.card,.dashboard-opportunities,.dashboard-actions{width:100%!important;max-width:none!important;margin:0 0 12px!important}
  .card{width:100%!important;max-width:none!important;padding:15px!important;border-radius:15px!important}
  .card-head{gap:10px!important;align-items:flex-start!important;flex-wrap:wrap!important}
  .card-head h3{font-size:15px!important}
  .card-head .muted{font-size:11px!important}
  .hero-card{width:100%!important;max-width:none!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;padding:17px!important}

  .filters,.form-grid,.detail-info,.detail-grid{width:100%!important;max-width:none!important;grid-template-columns:1fr!important}
  .table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important}
  .table{min-width:620px}
  .modal{padding:10px!important}
  .modal-card{width:100%!important;max-width:100%!important;max-height:calc(100vh - 20px)!important;padding:15px!important}

  .pro-stats{width:100%!important;max-width:none!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .pro-grid,.pro-grid2{width:100%!important;max-width:none!important;grid-template-columns:1fr!important}
  .pro-card{width:100%!important;max-width:none!important}
  .pro-action-grid{grid-template-columns:1fr!important}
  .pro-pipeline,.kanban{width:100%!important;max-width:none!important;overflow-x:auto!important;grid-template-columns:repeat(7,220px)!important}
}

@media(max-width:520px){
  .app aside{min-height:54px!important;padding:6px!important}
  .app .brand{display:none!important}
  .app aside nav{width:100%!important}
  .app aside nav button{font-size:11px!important;padding:8px 10px!important}
  .app header{top:54px!important;min-height:62px!important;padding:10px 11px!important}
  .app header h1{font-size:18px!important}
  .app header p{font-size:10px!important}
  .app .header-actions .primary{font-size:10px!important;padding:7px 9px!important}
  .content{padding:10px!important}
  .stats{gap:7px!important}
  .stat{padding:12px!important}
  .stat strong{font-size:21px!important}
  .card{padding:13px!important;border-radius:13px!important}
  .dashboard-opportunities,.dashboard-actions{margin-bottom:10px!important}
  .pro-stat{padding:11px!important}
  .pro-stat strong{font-size:19px!important}
}

@media(max-width:360px){
  .app aside nav button{padding:7px 8px!important;font-size:10px!important}
  .stats,.pro-stats{grid-template-columns:1fr!important}
  .app header .header-actions .primary{font-size:9px!important;padding:7px 8px!important}
}

@media(max-height:520px) and (max-width:800px){
  .app aside{position:relative!important}
  .app header{position:relative!important;top:0!important}
}