/* CADECO HQ landing responsive correction V1 */
html,body{max-width:100%;overflow-x:hidden}
.topbar-title{min-width:0}
.mobile-overlay{display:none}

@media(max-width:1280px){
  .dashboard-grid{padding-bottom:0!important}
  .right-stack{height:auto!important;min-height:355px}
}

@media(max-width:760px){
  .app-shell{display:block}
  .main{width:100%;min-width:0}
  .topbar{
    position:sticky;
    top:0;
    z-index:40;
    height:auto!important;
    min-height:112px;
    display:grid!important;
    grid-template-columns:56px minmax(0,1fr);
    grid-template-areas:"title title" "menu actions";
    align-items:center;
    gap:0;
    padding:8px 10px!important;
  }
  .topbar>.topbar-title,.topbar>div:first-of-type{
    grid-area:title;
    width:100%;
    min-width:0;
    padding:3px 4px 10px;
    border-bottom:1px solid var(--line2);
  }
  .topbar h1{
    display:block;
    width:100%;
    margin:0;
    font-size:17px!important;
    line-height:1.2;
    letter-spacing:.04em;
    white-space:nowrap;
  }
  .topbar p{display:none}
  .mobile-menu{
    grid-area:menu;
    display:grid!important;
    place-items:center;
    width:48px;
    height:48px;
    margin-top:7px;
    padding:0!important;
    border:1px solid #397ba7!important;
    border-radius:9px!important;
    background:#0b3150!important;
    color:#fff!important;
    font-size:30px!important;
    line-height:1;
    box-shadow:0 0 0 2px #35aaf222,0 5px 15px #0005;
  }
  .mobile-menu:focus-visible{outline:3px solid #48bdff;outline-offset:2px}
  .top-actions{
    grid-area:actions;
    justify-self:end;
    min-width:0;
    margin-top:7px;
  }
  .top-actions>span,.top-actions>button{min-width:44px;height:44px;padding:0 11px}
  .top-actions .live{display:flex!important;padding:0 12px}
  .top-actions .currency,.top-actions .readonly,.top-actions>span:not(.live){display:none!important}
  .top-actions button{font-size:20px}
  .sidebar{z-index:60;height:100dvh;box-shadow:none}
  .sidebar.open{box-shadow:18px 0 50px #000b}
  .mobile-overlay{position:fixed;inset:0;z-index:55;background:#0009;display:none}
  .mobile-overlay.open{display:block}
  .workspace,.module-view{padding:9px!important}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .kpi{min-width:0;min-height:150px;padding:13px!important}
  .kpi label{font-size:12px}.kpi strong{font-size:23px}.kpi p{white-space:normal}
  .dashboard-grid{display:flex;flex-direction:column;gap:10px;padding-bottom:0!important}
  .panel{min-height:0!important}
  .network-panel{height:auto;overflow:hidden}
  .network-panel .panel-head{height:auto;min-height:46px;flex-wrap:wrap}
  .network{
    height:auto!important;
    min-height:0!important;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:14px;
    background-size:auto,18px 18px;
  }
  .connections{display:none}
  .hub,.node,
  .n-board,.n-treasury,.n-compliance,.n-finance,.n-recon,.n-executive,.n-external,.n-branches{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
  }
  .hub{
    grid-column:1/-1;
    justify-self:center;
    width:104px;
    height:104px;
    margin:4px 0 10px;
  }
  .node{
    width:100%;
    min-width:0;
    min-height:112px;
    justify-content:center;
    padding:15px 6px 10px;
    border:1px solid #245374;
    border-radius:10px;
    background:#082139;
  }
  .node>span{width:48px;height:48px}
  .node b{font-size:12px}.node small{font-size:9px;text-align:center;white-space:normal}
  .node.normal:before,.node.attention:before,.node.critical:before{top:6px;right:6px}
  .liquidity-panel,.flow-panel{min-height:370px!important}
  .chart,.flow-chart{width:100%;min-height:250px}
  .liquidity-foot{height:auto;grid-template-columns:1fr}
  .liquidity-foot>div{min-height:62px;padding:10px 18px;border-left:0;border-top:1px solid var(--line)}
  .flow-totals{height:auto;grid-template-columns:1fr 1fr}
  .flow-totals>div{min-height:82px;border-top:1px solid var(--line)}
  .right-stack{display:flex;height:auto!important;min-height:0;gap:10px}
  .exceptions-panel,.status-panel{min-height:260px!important}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .panel table{min-width:680px}
  .module-title{align-items:flex-start;gap:12px}.module-title h2{font-size:20px}
  .module-cards{grid-template-columns:1fr 1fr}
}

@media(max-width:430px){
  .topbar h1{font-size:15px!important}
  .top-actions>button{padding:0 9px}
  .kpi-grid,.module-cards{grid-template-columns:1fr}
  .kpi{min-height:132px}
  .network{grid-template-columns:1fr}
  .hub{grid-column:1}
  .flow-totals{grid-template-columns:1fr}
}

/* HQCOM_MOBILE_COMPACT_NETWORK_V1_1_BEGIN */
@media(max-width:760px){
  .network-panel{
    min-height:0!important;
    height:auto!important;
    overflow:hidden!important;
  }
  .network-panel .panel-head{
    min-height:44px;
    position:relative;
    z-index:5;
  }
  .network{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1.28/1;
    padding:0!important;
    overflow:hidden!important;
    background-image:
      radial-gradient(circle at center,rgba(30,116,183,.22),transparent 45%),
      radial-gradient(#174366 1px,transparent 1px)!important;
    background-size:auto,16px 16px!important;
  }
  .connections{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:visible;
  }
  .connections path{
    stroke-width:2!important;
    stroke-dasharray:7 7;
    opacity:.78!important;
    animation:hqcomNetworkFlow 3.2s linear infinite;
    vector-effect:non-scaling-stroke;
  }
  .hub,.node,
  .n-board,.n-treasury,.n-compliance,.n-finance,
  .n-recon,.n-executive,.n-external,.n-branches{
    position:absolute!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    min-height:0!important;
  }
  .hub{
    left:50%!important;
    top:50%!important;
    width:76px!important;
    height:76px!important;
    display:flex!important;
    border:2px solid #4ca7ff!important;
    border-radius:50%!important;
    background:radial-gradient(circle,#134f83,#071e35 70%)!important;
    box-shadow:0 0 20px #268cff,inset 0 0 15px #41a0ff66!important;
    animation:hqcomHubPulse 2.6s ease-in-out infinite;
    z-index:3;
  }
  .hub span{font-size:20px!important}
  .hub b{font-size:10px!important;margin:0!important}
  .hub small{font-size:8px!important}
  .hub i{inset:-7px!important}
  .node{
    width:72px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    color:#fff!important;
    overflow:visible!important;
    z-index:2;
  }
  .node>span{
    width:38px!important;
    height:38px!important;
    border:1px solid #61a8e7!important;
    border-radius:50%!important;
    background:radial-gradient(circle,#174e7b,#092038 70%)!important;
    box-shadow:0 0 10px #459bf099!important;
    font-size:16px!important;
    animation:hqcomNodePulse 3s ease-in-out infinite;
  }
  .node b{
    max-width:76px;
    margin-top:3px!important;
    font-size:8.5px!important;
    line-height:1.05;
    text-align:center;
    white-space:normal;
  }
  .node small{
    display:none!important;
  }
  .node.normal:before,.node.attention:before,.node.critical:before{
    top:-3px!important;
    right:0!important;
    padding:1px 4px!important;
    font-size:6px!important;
    line-height:1.25;
  }
  .n-board{left:22%!important;top:20%!important}
  .n-treasury{left:50%!important;top:12%!important}
  .n-compliance{left:78%!important;top:20%!important}
  .n-finance{left:17%!important;top:50%!important}
  .n-recon{left:83%!important;top:50%!important}
  .n-executive{left:22%!important;top:80%!important}
  .n-external{left:50%!important;top:88%!important}
  .n-branches{left:78%!important;top:80%!important}
}

@media(max-width:390px){
  .network{aspect-ratio:1.12/1}
  .hub{width:70px!important;height:70px!important}
  .node{width:64px!important}
  .node>span{width:35px!important;height:35px!important}
  .node b{font-size:8px!important}
  .n-finance{left:15%!important}.n-recon{left:85%!important}
}

@keyframes hqcomNetworkFlow{
  to{stroke-dashoffset:-28}
}
@keyframes hqcomHubPulse{
  0%,100%{box-shadow:0 0 14px #268cff,inset 0 0 14px #41a0ff55}
  50%{box-shadow:0 0 28px #42b8ff,inset 0 0 22px #41a0ff88}
}
@keyframes hqcomNodePulse{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.07);filter:brightness(1.18)}
}
@media(prefers-reduced-motion:reduce){
  .connections path,.hub,.node>span{animation:none!important}
}
/* HQCOM_MOBILE_COMPACT_NETWORK_V1_1_END */