/* 888 CAPITAL — PREMIUM V2
   DARK / WHITE / ELECTRIC CYAN
   PRESENTATION ONLY
*/

:root {
 --c888:#2fffdc;
 --c888-soft:rgba(47,255,220,.10);
 --c888-border:rgba(255,255,255,.09);
 --c888-bg:#050a0f;
 --c888-panel:#0c141b;
 --c888-panel2:#091017;
 --c888-text:#f4f7f9;
 --c888-muted:rgba(225,233,238,.60);
}


/* ==============================================
   HEADER — POLISH ONLY, STRUCTURE UNCHANGED
   ============================================== */

.app-header {
 background:rgba(6,12,17,.985) !important;
 border-bottom:1px solid rgba(47,255,220,.13) !important;
 box-shadow:0 7px 24px rgba(0,0,0,.20) !important;
}

.app-header .brand-888 {
 color:var(--c888) !important;
 text-shadow:0 0 10px rgba(47,255,220,.25) !important;
}

/* HARD LOCK MISSION DESKTOP BRAND LEFT */
@media (min-width:768px) {
 .app-header .desktop-toggler {
   margin-right:16px !important;
 }

 .app-header .brand-text {
   margin-left:0 !important;
   margin-right:0 !important;
 }
}


/* ==============================================
   FUNCTIONAL PAGE BACKGROUND
   HOME IS EXCLUDED
   ============================================== */

body:has(.capital-page-banner) {
 background:#03070b !important;
}

body:has(.capital-page-banner) #content.app-content {
 background-color:var(--c888-bg) !important;

 background-image:
   radial-gradient(
     circle at 18% 5%,
     rgba(47,255,220,.055),
     transparent 28%
   ),
   linear-gradient(
     rgba(47,255,220,.018) 1px,
     transparent 1px
   ),
   linear-gradient(
     90deg,
     rgba(47,255,220,.018) 1px,
     transparent 1px
   ) !important;

 background-size:
   auto,
   48px 48px,
   48px 48px !important;

 background-attachment:fixed !important;
}


/* ==============================================
   PAGE NAME STRIP
   ============================================== */

body:has(.capital-page-banner) .capital-page-banner {
 background:
   linear-gradient(
     90deg,
     rgba(47,255,220,.075),
     rgba(7,14,20,.985) 26%,
     rgba(7,14,20,.985)
   ) !important;

 border-bottom:
   1px solid rgba(47,255,220,.22) !important;

 box-shadow:
   0 8px 20px rgba(0,0,0,.17) !important;
}

body:has(.capital-page-banner) .capital-page-banner i {
 color:var(--c888) !important;
 filter:drop-shadow(0 0 6px rgba(47,255,220,.22));
}


/* ==============================================
   MAIN PROFESSIONAL WIDGETS
   ============================================== */

body:has(.capital-page-banner) .card,
body:has(.capital-page-banner) .mc-card,
body:has(.capital-page-banner) .b3-mode-panel,
body:has(.capital-page-banner) .b3-clean-filters,
body:has(.capital-page-banner) .trade-gate-section {
 background:
   linear-gradient(
     145deg,
     rgba(14,23,31,.985),
     rgba(7,13,19,.985)
   ) !important;

 border:
   1px solid var(--c888-border) !important;

 border-radius:
   12px !important;

 box-shadow:
   0 11px 30px rgba(0,0,0,.22),
   inset 0 1px rgba(255,255,255,.025) !important;
}


/* Mission KPI subtle neon detail */

body:has(.capital-page-banner) .mc-kpi {
 position:relative !important;
 overflow:hidden !important;
}

body:has(.capital-page-banner) .mc-kpi::before {
 content:"";
 position:absolute;
 top:0;
 left:18%;
 right:18%;
 height:1px;

 background:
   linear-gradient(
     90deg,
     transparent,
     rgba(47,255,220,.48),
     transparent
   );
}


/* ==============================================
   CONTROL ROOM INNER COMPONENTS
   ============================================== */

body:has(.capital-page-banner) .cr-metric,
body:has(.capital-page-banner) .cr-asset-row,
body:has(.capital-page-banner) .cr-conveyor-item,
body:has(.capital-page-banner) .cr-check-row,
body:has(.capital-page-banner) .cr-risk-card,
body:has(.capital-page-banner) .eh-summary-item,
body:has(.capital-page-banner) .eh-engine-card {
 background:
   linear-gradient(
     145deg,
     rgba(255,255,255,.045),
     rgba(255,255,255,.018)
   ) !important;

 border:
   1px solid var(--c888-border) !important;

 border-radius:9px !important;
}


/* ==============================================
   LEADERBOARD SUMMARY WIDGETS
   ============================================== */

body:has(.capital-page-banner)
[class*="col-"]:has(.b3-summary-value) {
 background:
   linear-gradient(
     145deg,
     rgba(14,23,31,.985),
     rgba(7,13,19,.985)
   ) !important;

 border:
   1px solid var(--c888-border) !important;

 border-top:
   1px solid rgba(47,255,220,.42) !important;

 border-radius:12px !important;

 box-shadow:
   0 10px 27px rgba(0,0,0,.20) !important;
}


/* ==============================================
   TITLES
   ============================================== */

body:has(.capital-page-banner) .mc-panel-title,
body:has(.capital-page-banner) .card-title {
 color:#fff !important;
 font-weight:650 !important;
 letter-spacing:.035em !important;
}

body:has(.capital-page-banner) .card-header {
 background:rgba(255,255,255,.025) !important;
 border-bottom:1px solid var(--c888-border) !important;
}


/* ==============================================
   TABLES
   ============================================== */

body:has(.capital-page-banner) .table {
 --bs-table-bg:transparent !important;
 color:rgba(242,246,248,.88) !important;
}

body:has(.capital-page-banner) .table thead th {
 background:rgba(11,20,27,.99) !important;
 color:rgba(240,246,249,.76) !important;
 border-bottom:1px solid rgba(47,255,220,.18) !important;
}

body:has(.capital-page-banner) .table tbody td {
 border-color:rgba(255,255,255,.055) !important;
}

body:has(.capital-page-banner)
.table-hover tbody tr:hover > * {
 background:rgba(47,255,220,.04) !important;
}


/* ==============================================
   FILTER SYSTEM
   ============================================== */

body:has(.capital-page-banner)
.capital-filter-toggle {
 background:rgba(47,255,220,.075) !important;
 border:1px solid rgba(47,255,220,.38) !important;
 color:#fff !important;
}

body:has(.capital-page-banner)
.capital-filter-toggle:hover {
 background:rgba(47,255,220,.12) !important;
 border-color:rgba(47,255,220,.58) !important;
}


/* Reset only exists visually WHEN filters are open */

.mc-filters:not(.capital-filters-open) > #mc-reset {
 display:none !important;
}

.mc-filters.capital-filters-open > #mc-reset {
 display:flex !important;
}


/* ==============================================
   INPUTS
   ============================================== */

body:has(.capital-page-banner) input,
body:has(.capital-page-banner) select,
body:has(.capital-page-banner) .form-control,
body:has(.capital-page-banner) .form-select {
 background-color:rgba(3,8,13,.85) !important;
 border-color:rgba(255,255,255,.13) !important;
 color:#fff !important;
 border-radius:8px !important;
}

body:has(.capital-page-banner) input:focus,
body:has(.capital-page-banner) select:focus {
 border-color:rgba(47,255,220,.55) !important;
 box-shadow:0 0 0 2px rgba(47,255,220,.07) !important;
}


/* ==============================================
   INTERACTIONS — SUBTLE, NOT FLASHY
   ============================================== */

@media (min-width:768px) {

 body:has(.capital-page-banner) .mc-card,
 body:has(.capital-page-banner)
 [class*="col-"]:has(.b3-summary-value) {
   transition:
     transform .18s ease,
     border-color .18s ease,
     box-shadow .18s ease !important;
 }

 body:has(.capital-page-banner) .mc-card:hover,
 body:has(.capital-page-banner)
 [class*="col-"]:has(.b3-summary-value):hover {
   transform:translateY(-2px);

   border-color:
     rgba(47,255,220,.23) !important;

   box-shadow:
     0 14px 34px rgba(0,0,0,.27),
     0 0 18px rgba(47,255,220,.025) !important;
 }
}


/* ==============================================
   MOBILE
   Keep existing layout/width/sidebar behaviour
   ============================================== */

@media (max-width:767.98px) {

 body:has(.capital-page-banner)
 #content.app-content {
   background-size:
     auto,
     36px 36px,
     36px 36px !important;
 }
}


/* NO SIDEBAR RULES IN THIS FILE.
   EXISTING SIDE MENU IS PRESERVED. */


/* ==================================================================
   888 FINAL GOLDEN VISUAL POLISH 20260808
   ================================================================== */

/* Approved premium rounded widgets: remove legacy bracket decoration. */
.card:not(.border-0)::before,
.card:not(.border-0)::after {
    content: none !important;
    display: none !important;
}

.card:not(.border-0) {
    border-radius: 14px !important;
}

/* Leaderboard summary cards. */
#b3-summary .card {
    border-radius: 14px !important;
    overflow: hidden;
}

#b3-summary .card-body {
    min-width: 0;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
}

#b3-summary .card-body > .small {
    font-size: 0.68rem !important;
    line-height: 1.15;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

#b3-summary .b3-summary-value {
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.08 !important;
}

#b3-summary > [class*="col-"]:nth-child(7) .b3-summary-value,
#b3-summary > [class*="col-"]:nth-child(8) .b3-summary-value {
    font-size: clamp(0.85rem, 1.15vw, 1.05rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em;
}

/* Deliberate activation gate for zoom-capable Mission Control charts. */
.mc-chart.mc-zoom-guarded {
    position: relative;
}

.mc-chart.mc-zoom-guarded:not(.mc-zoom-active) {
    cursor: pointer;
    touch-action: pan-y;
}

.mc-chart.mc-zoom-guarded:not(.mc-zoom-active) .apexcharts-canvas {
    pointer-events: none !important;
}

.mc-chart.mc-zoom-guarded:not(.mc-zoom-active)::after {
    content: "Click to activate zoom";
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(45, 226, 230, 0.30);
    background: rgba(4, 17, 25, 0.88);
    color: rgba(220, 250, 250, 0.82);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

.mc-chart.mc-zoom-guarded.mc-zoom-active {
    cursor: crosshair;
}

/* 888 FINAL CARD ARROW RETIREMENT 20260808 */
.card > .card-arrow {
    display: none !important;
}