/* ============================================================
   MTF PATTERN ANALYSIS
   ============================================================ */

.mpa-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin:4px 0 20px;
}

.mpa-head>div{
  min-width:0;
}

.mpa-head h1{
  margin:4px 0 5px;
  color:#293e55;
  font-size:26px;
  line-height:1.1;
  letter-spacing:-.02em;
}

.mpa-head p{
  max-width:820px;
  margin:0;
  color:#8190a4;
  font-size:11px;
  line-height:1.55;
}

.mpa-readonly{
  flex:0 0 auto;
  padding:7px 10px;
  border:1px solid #cce5df;
  border-radius:7px;
  background:#eff8f6;
  color:#2d8072;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
}


/* Controls */

.mpa-controls{
  padding:14px;
  border:1px solid #dce5ed;
  border-radius:10px;
  background:#fff;
}

.mpa-control-main{
  display:grid;
  grid-template-columns:
    minmax(280px,1fr)
    auto
    auto;
  align-items:end;
  gap:14px;
}

.mpa-controls .field{
  min-width:0;
}

.mpa-controls label{
  display:block;
  margin-bottom:6px;
  color:#75869a;
  font-size:8px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.mpa-controls select,
.mpa-controls input[type="date"]{
  width:100%;
  height:38px;
  box-sizing:border-box;
  border:1px solid #d6e0e9;
  border-radius:7px;
  outline:0;
  background:#fff;
  padding:0 11px;
  color:#3e5369;
  font-size:10px;
}

.mpa-controls select:focus,
.mpa-controls input[type="date"]:focus{
  border-color:#87bdb3;
  box-shadow:0 0 0 2px rgba(73,142,130,.10);
}


/* Range */

.mpa-range{
  display:flex;
  overflow:hidden;
  border:1px solid #d7e0e8;
  border-radius:7px;
  background:#f8fafc;
}

.mpa-range-btn{
  min-width:58px;
  height:38px;
  padding:0 13px;
  border:0;
  border-right:1px solid #e1e7ed;
  background:transparent;
  color:#718196;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}

.mpa-range-btn:last-child{
  border-right:0;
}

.mpa-range-btn:hover{
  background:#f1f6f7;
}

.mpa-range-btn.active{
  background:#eaf5f2;
  color:#267d6e;
}

.mpa-custom-range{
  display:grid;
  grid-template-columns:
    minmax(180px,240px)
    minmax(180px,240px);
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #edf1f4;
}


/* Summary */

.mpa-summary{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  margin-top:13px;
  border:1px solid #dfe6ed;
  border-radius:9px;
  background:#dfe6ed;
}

.mpa-summary>div{
  position:relative;
  padding:11px 13px;
  background:#fff;
}

.mpa-summary>div::before{
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:2px;
  background:#b8c5d2;
  content:"";
}

.mpa-summary .bull::before{
  background:#71b9a7;
}

.mpa-summary .bear::before{
  background:#d98791;
}

.mpa-summary .transition::before{
  background:#d5bb6d;
}

.mpa-summary span{
  display:block;
  color:#8794a4;
  font-size:8px;
  font-weight:800;
  letter-spacing:.04em;
}

.mpa-summary b{
  display:block;
  margin-top:4px;
  color:#334a62;
  font-size:17px;
}


/* Filters */

.mpa-filters{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:13px 0 10px;
}

.mpa-filter{
  height:30px;
  padding:0 10px;
  border:1px solid #d9e2e9;
  border-radius:6px;
  background:#fff;
  color:#6f8093;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

.mpa-filter:hover{
  background:#f6f9fb;
}

.mpa-filter.active{
  border-color:#9bcbbf;
  background:#edf7f4;
  color:#287b6d;
}


/* Status */

.mpa-status{
  margin:8px 0 12px;
  padding:8px 11px;
  border:1px solid #e3e9ee;
  border-radius:7px;
  background:#f8fafc;
  color:#7b8a9b;
  font-size:9px;
}

.mpa-status.loading{
  padding:0;
  border:0;
  background:transparent;
}

.mpa-status.loading .section-loader{
  min-height:72px;
  border:1px solid #e0e7ed;
  border-radius:9px;
  background:#fff;
}


/* Table */

.mpa-table-card{
  overflow:hidden;
  border:1px solid #dde5ec;
  border-radius:10px;
  background:#fff;
}

.mpa-table-card .tablewrap{
  overflow-x:auto;
}

.mpa-table{
  width:100%;
  min-width:1050px;
  border-collapse:collapse;
}

.mpa-table th{
  padding:10px 9px;
  border-bottom:1px solid #dfe6ed;
  background:#f7f9fb;
  color:#8090a2;
  text-align:center;
  font-size:7px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}

.mpa-table td{
  padding:11px 9px;
  border-bottom:1px solid #edf1f4;
  color:#475c72;
  text-align:center;
  font-size:9px;
  vertical-align:middle;
}

.mpa-table tr:last-child td{
  border-bottom:0;
}

.mpa-table th:first-child,
.mpa-table td:first-child,
.mpa-table th:nth-child(2),
.mpa-table td:nth-child(2){
  text-align:left;
}

.mpa-row{
  cursor:pointer;
}

.mpa-row:hover td{
  background:#f8fbfc;
}

.mpa-row.selected td{
  background:#f1f8f6;
}

.mpa-symbol{
  display:block;
  color:#30465e;
  font-size:10px;
  font-weight:800;
}

.mpa-table small{
  display:block;
  margin-top:3px;
  color:#94a0ae;
  font-size:8px;
}


/* Direction state */

.mpa-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  height:23px;
  padding:0 7px;
  border-radius:5px;
  font-size:7px;
  font-weight:800;
  letter-spacing:.03em;
}

.mpa-state.up{
  background:#def1eb;
  color:#24796a;
}

.mpa-state.down{
  background:#f7e1e4;
  color:#aa515b;
}

.mpa-state.neutral{
  background:#e9eef3;
  color:#768596;
}


/* Pattern */

.mpa-pattern{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  box-sizing:border-box;
  padding:4px 9px;
  border-radius:6px;
  font-size:8px;
  font-weight:800;
  white-space:nowrap;
}

.mpa-pattern.large{
  min-height:31px;
  padding:6px 11px;
  font-size:9px;
}

.mpa-pattern.bullish-confirmation{
  background:#dcefe9;
  color:#1f7364;
}

.mpa-pattern.bullish-pullback{
  background:#edf6f3;
  color:#4b7f75;
  border:1px solid #cae2dc;
}

.mpa-pattern.bearish-confirmation{
  background:#f5dfe2;
  color:#a54550;
}

.mpa-pattern.bearish-rebound{
  background:#faecee;
  color:#a8656d;
  border:1px solid #efd2d6;
}

.mpa-pattern.transition{
  background:#f8f0d8;
  color:#8a712d;
}

.mpa-pattern.neutral{
  background:#e8edf2;
  color:#6c7b8d;
}


/* Confidence */

.mpa-confidence{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  height:23px;
  border-radius:5px;
  font-size:7px;
  font-weight:800;
}

.mpa-confidence.high{
  background:#e1f1ec;
  color:#277667;
}

.mpa-confidence.medium{
  background:#faf1d9;
  color:#8a712f;
}

.mpa-confidence.low{
  background:#e9edf2;
  color:#748396;
}


/* Detail */

.mpa-detail{
  margin-top:16px;
  padding:17px;
  border:1px solid #dce5ec;
  border-radius:10px;
  background:#fff;
}

.mpa-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.mpa-detail-head h2{
  margin:4px 0;
  color:#30465e;
  font-size:18px;
}

.mpa-detail-head p{
  margin:0;
  color:#8996a6;
  font-size:9px;
}

.mpa-current-pattern{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.mpa-current-pattern>span{
  color:#8996a6;
  font-size:7px;
  font-weight:800;
  letter-spacing:.06em;
}

.mpa-detail-states{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin-top:15px;
}

.mpa-detail-states>div{
  padding:10px;
  border:1px solid #e2e8ee;
  border-radius:7px;
  background:#fbfcfd;
}

.mpa-detail-states>div>span:first-child{
  display:block;
  margin-bottom:6px;
  color:#8492a3;
  font-size:7px;
  font-weight:800;
}

.mpa-detail-metrics{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  margin-top:10px;
  border:1px solid #e0e6ec;
  border-radius:8px;
  background:#e0e6ec;
}

.mpa-detail-metrics>div{
  padding:10px;
  background:#f8fafc;
}

.mpa-detail-metrics span{
  display:block;
  color:#8795a4;
  font-size:7px;
  font-weight:700;
}

.mpa-detail-metrics b{
  display:block;
  margin-top:4px;
  color:#3e546b;
  font-size:11px;
}


/* Chart */

.mpa-chart-card{
  margin-top:14px;
  overflow:hidden;
  border:1px solid #dfe6ec;
  border-radius:9px;
  background:#fff;
}

.mpa-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px 11px;
  border-bottom:1px solid #e6ebef;
}

.mpa-chart-head h3{
  margin:3px 0 0;
  color:#344b63;
  font-size:14px;
}

.mpa-chart-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  color:#7d8c9e;
  font-size:7px;
}

.mpa-chart-legend span{
  display:flex;
  align-items:center;
  gap:4px;
}

.mpa-chart-legend i{
  width:10px;
  height:5px;
  border-radius:2px;
}

.mpa-chart-legend i.price{
  height:2px;
  background:#40546a;
}

.mpa-chart-legend i.bull-confirm{
  background:#77bba8;
}

.mpa-chart-legend i.bull-pullback{
  background:#b5dacf;
}

.mpa-chart-legend i.bear-confirm{
  background:#d9919a;
}

.mpa-chart-legend i.bear-rebound{
  background:#efbdc3;
}

.mpa-chart-legend i.transition{
  background:#dfc67d;
}

.mpa-chart-wrap{
  position:relative;
  min-height:625px;
  padding:4px 10px 0;
}

#mpaTimeline{
  display:block;
  width:100%;
  height:625px;
  overflow:visible;
}

.mpa-grid-line{
  stroke:#e8edf2;
  stroke-width:1;
}

.mpa-price-line{
  fill:none;
  stroke:#405369;
  stroke-width:2.1;
  stroke-linejoin:round;
  stroke-linecap:round;
}

.mpa-axis-text{
  fill:#8896a6;
  font-size:8px;
}

.mpa-band-label{
  fill:#718297;
  font-size:7px;
  font-weight:800;
  letter-spacing:.04em;
}

.mpa-svg-empty{
  fill:#8391a1;
  font-size:11px;
}

.mpa-hover-line{
  stroke:#798da2;
  stroke-width:1;
  stroke-dasharray:3 3;
  pointer-events:none;
}

.mpa-hover{
  position:absolute;
  top:18px;
  left:50%;
  z-index:4;
  min-width:220px;
  transform:translateX(-50%);
  padding:9px 10px;
  border:1px solid #d9e2e9;
  border-radius:8px;
  background:rgba(255,255,255,.97);
  box-shadow:0 5px 18px rgba(46,65,84,.09);
  color:#53677d;
  font-size:8px;
  pointer-events:none;
}

.mpa-hover>b{
  display:block;
  margin-bottom:6px;
  color:#344a61;
  font-size:9px;
}

.mpa-hover>span{
  margin-right:8px;
}

.mpa-hover strong{
  color:#30465d;
}

.mpa-hover-states{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  margin-top:7px;
  padding-top:6px;
  border-top:1px solid #edf1f4;
  color:#718196;
  font-size:7px;
  font-weight:700;
}


/* Note */

.mpa-analysis-note{
  margin-top:12px;
  padding:10px 12px;
  border-left:3px solid #7895af;
  border-radius:0 6px 6px 0;
  background:#f6f9fb;
  color:#718196;
  font-size:9px;
  line-height:1.55;
}

.mpa-analysis-note b{
  color:#40566d;
}


/* Responsive */

@media(max-width:1100px){

  .mpa-control-main{
    grid-template-columns:1fr auto;
  }

  .mpa-control-main>.field:first-child{
    grid-column:1/-1;
  }

  .mpa-detail-states,
  .mpa-detail-metrics{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:760px){

  .mpa-head,
  .mpa-detail-head,
  .mpa-chart-head{
    flex-direction:column;
  }

  .mpa-current-pattern{
    align-items:flex-start;
  }

  .mpa-control-main{
    grid-template-columns:1fr;
  }

  .mpa-control-main>.field:first-child{
    grid-column:auto;
  }

  .mpa-range{
    width:100%;
  }

  .mpa-range-btn{
    flex:1;
    min-width:0;
  }

  .mpa-custom-range{
    grid-template-columns:1fr;
  }

  .mpa-summary{
    grid-template-columns:repeat(2,1fr);
  }

  .mpa-detail-states,
  .mpa-detail-metrics{
    grid-template-columns:repeat(2,1fr);
  }

  .mpa-chart-legend{
    justify-content:flex-start;
  }
}

/* Directional transition states */

.mpa-pattern.bullish-transition{
  background:#e8f3e8;
  color:#577b55;
  border:1px solid #cee0cd;
}

.mpa-pattern.bearish-transition{
  background:#f7e7e5;
  color:#96625e;
  border:1px solid #ead0cd;
}