/* ============================================================
   BOARD Dashboard Page Layout (VBI-1-U)
   ------------------------------------------------------------
   Mobile-first: single-column at <768px; 2-column 768-1023;
   3-column 1024-1439; 4-column 1440+. Alert band stays on top
   at every breakpoint.
   ============================================================ */

.vbi-board-page {
    display:    flex;
    flex-direction: column;
    gap:        var(--space-3);
    padding:    var(--space-4) var(--space-4) var(--space-8);
    color:      var(--text-primary);
    max-width:  1440px;
    margin:     0 auto;
}

.vbi-board-page__header { display: flex; flex-direction: column; gap: var(--space-1); }

.vbi-board-page__title {
    margin: 0;
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-gold-light);
}

.vbi-board-page__subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.vbi-board-page__band {
    display:    flex;
    flex-direction: column;
    gap:        var(--space-3);
}

.vbi-board-page__band--alert {
    /* Sticky on desktop so the alert band stays visible while scrolling
       the analytical/predictive bands. */
    position: relative;
}

/* ── Alert band — horizontal flex on tablet+ ───────────────── */

.vbi-board-page__band--alert {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
}

.vbi-board-page__band--alert .vbi-tile--sentence {
    flex:      1 1 280px;
    min-width: 260px;
    max-width: 420px;
}

@media (max-width: 375px) {
    /* MR-068: canonical 375px breakpoint (was 480px) */
    .vbi-board-page__band--alert {
        flex-direction: column;
    }
    .vbi-board-page__band--alert .vbi-tile--sentence {
        flex:      1 1 auto;
        max-width: none;
    }
}

.vbi-band__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-2);
}

.vbi-band__cell { display: flex; }
.vbi-band__cell > .vbi-tile { width: 100%; }

.vbi-board-page__error {
    padding:       var(--space-3) var(--space-4);
    background:    var(--color-red-glow);
    border:        1px solid var(--color-red-glow);
    border-radius: var(--radius-sm);
    color:         var(--text-primary);
}


/* ── Alert strip — compact grid ──────────────────────────── */

.vbi-alert-strip {
    background:    var(--surface-card);
    border:        1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding:       var(--space-2) var(--space-3);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-2);
}

.vbi-alert-strip__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-2);
}

.vbi-alert-strip__title {
    margin:    0;
    font-size: var(--text-base);
    font-weight: 600;
    color:     var(--text-primary);
}

.vbi-alert-strip__counter {
    font-size:      0.68rem;
    font-weight:    700;
    padding:        2px var(--space-2);
    background:     var(--color-amber-glow);
    color:          var(--color-amber);
    border-radius:  9999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* List — 1 col mobile → 2 col tablet → 3 col desktop */
.vbi-alert-strip__list {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    grid;
    grid-template-columns: 1fr;
    gap:        0;
}

/* Override tile-card appearance: inside the strip, items are rows not cards */
.vbi-alert-strip__item {
    display:   flex;
    border-bottom: 1px solid var(--surface-border);
    overflow:  hidden;   /* prevent text bleeding into adjacent grid cells */
    position:  relative;
    min-width: 0;        /* grid cell shrink */
}
.vbi-alert-strip__item:last-child { border-bottom: none; }

.vbi-alert-strip__item .vbi-tile--sentence {
    flex:          1 1 auto;
    background:    transparent;
    border:        none;
    border-radius: 0;
    padding:       6px var(--space-2);
    box-shadow:    none;
    animation:     none;
    gap:           var(--space-2);
}
.vbi-alert-strip__item .vbi-tile--sentence:hover {
    background:   rgba(237,232,219,0.05);
    border:       none;
    box-shadow:   none;
}

/* Compact title + truncated description */
.vbi-alert-strip__item .vbi-tile__title {
    font-size:  var(--text-sm);
    font-weight: 600;
    margin:     0;
}
.vbi-alert-strip__item .vbi-tile__sentence {
    font-size:    var(--text-xs);
    color:        var(--text-muted);
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
    margin:       0;
}
.vbi-alert-strip__item .vbi-tile__dismiss {
    width:  32px;
    height: 32px;
    flex:   0 0 32px;
    font-size: 1.1rem;
    align-self: center;
}

.vbi-alert-strip__empty {
    padding:    var(--space-2);
    text-align: center;
    color:      var(--text-muted);
    font-size:  var(--text-sm);
    font-style: italic;
}

/* 2-col from tablet — MR-068: canonical 376px min boundary (was 640px) */
@media (min-width: 376px) {
    .vbi-alert-strip__list {
        grid-template-columns: repeat(2, 1fr);
    }
    .vbi-alert-strip__item {
        border-right: 1px solid var(--surface-border);
        border-bottom: 1px solid var(--surface-border);
    }
    .vbi-alert-strip__item:nth-child(2n) { border-right: none; }
    /* Clear bottom border for last row */
    .vbi-alert-strip__item:nth-last-child(-n+2):nth-child(2n+1),
    .vbi-alert-strip__item:nth-last-child(-n+2):nth-child(2n+1) ~ .vbi-alert-strip__item {
        border-bottom: none;
    }
}

/* 3-col from 1024px */
@media (min-width: 1024px) {
    .vbi-alert-strip__list { grid-template-columns: repeat(3, 1fr); }
    .vbi-alert-strip__item:nth-child(2n) { border-right: 1px solid var(--surface-border); }
    .vbi-alert-strip__item:nth-child(3n) { border-right: none; }
    .vbi-alert-strip__item:nth-last-child(-n+3):nth-child(3n+1),
    .vbi-alert-strip__item:nth-last-child(-n+3):nth-child(3n+1) ~ .vbi-alert-strip__item {
        border-bottom: none;
    }
}

/* 4-col from 1440px */
@media (min-width: 1440px) {
    .vbi-alert-strip__list { grid-template-columns: repeat(4, 1fr); }
    .vbi-alert-strip__item:nth-child(3n) { border-right: 1px solid var(--surface-border); }
    .vbi-alert-strip__item:nth-child(4n) { border-right: none; }
}


/* ── Breakpoint scaling ────────────────────────────────────── */
/* MR-068: standardised to canonical breakpoints 375px/768px/1024px */

@media (max-width: 375px) {
    /* Narrowest mobile — tight padding */
    .vbi-board-page {
        padding: var(--space-2) var(--space-2) var(--space-6);
        gap:     var(--space-3);
    }
    .vbi-board-page__title { font-size: var(--text-2xl); }
    .vbi-alert-strip { padding: var(--space-2); }
    .vbi-band__grid { gap: var(--space-2); }
}

@media (min-width: 376px) and (max-width: 768px) {
    /* Standard mobile / large mobile */
    .vbi-board-page { padding: var(--space-3) var(--space-4) var(--space-8); }
    .vbi-band__grid { gap: var(--space-3); }
}

/* Large tablet — 769-1023px → 2-column analytical/predictive grids. */
@media (min-width: 769px) and (max-width: 1023px) {
    .vbi-board-page { padding: var(--space-4) var(--space-5); }
    .vbi-band__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }
    .vbi-band__cell--wide { grid-column: 1 / -1; }
}

/* Desktop — 1024-1439px → 3-column analytical/predictive grids. */
@media (min-width: 1024px) and (max-width: 1439px) {
    .vbi-board-page { padding: var(--space-4) var(--space-6); }
    .vbi-band__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-3);
    }
    .vbi-band__cell--wide { grid-column: span 2; }
    .vbi-board-page__band--alert {
        position: sticky;
        top: var(--space-4);
        z-index: 10;
    }
}

/* Wide desktop — 1440px+ → 4-column (BOARD keeps 4-col, not 5). */
@media (min-width: 1440px) {
    .vbi-board-page { padding: var(--space-5) var(--space-8); }
    .vbi-band__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-3);
    }
    .vbi-band__cell--wide { grid-column: span 2; }
    .vbi-board-page__band--alert {
        position: sticky;
        top: var(--space-6);
        z-index: 10;
    }
}


/* ============================================================
   Accordion band groups (AccordionBand component)
   ============================================================ */

.vbi-accordion {
    border:        1px solid var(--surface-border);
    border-radius: var(--radius-md);
    overflow:      hidden;
    margin-bottom: var(--space-3);
    background:    var(--surface-card);
}

.vbi-accordion__hdr {
    width:        100%;
    display:      flex;
    align-items:  center;
    gap:          var(--space-2);
    padding:      var(--space-3) var(--space-4);
    background:   rgba(237,232,219,0.07);
    border:       none;
    border-bottom: 1px solid var(--surface-border);
    cursor:        pointer;
    text-align:    left;
    color:         var(--text-primary);
    transition:    background 0.15s;
    user-select:   none;
}

.vbi-accordion--collapsed .vbi-accordion__hdr {
    border-bottom: none;
}

.vbi-accordion__hdr:hover  { background: rgba(237,232,219,0.12); }
.vbi-accordion__hdr:focus-visible {
    outline:        2px solid var(--color-teal);
    outline-offset: -2px;
}

.vbi-accordion__icon {
    font-style:  normal;
    font-size:   var(--text-base);
    flex-shrink: 0;
    color:       var(--text-muted);
}

.vbi-accordion__label {
    flex:           1 1 auto;
    font-size:      var(--text-sm);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--text-primary);
}

.vbi-accordion__badge-wrap {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    flex-shrink: 0;
}

.vbi-accordion__badge {
    font-size:      0.65rem;
    font-weight:    700;
    padding:        2px var(--space-2);
    border-radius:  9999px;
    background:     var(--color-teal-glow);
    color:          var(--color-teal);
    border:         1px solid transparent;
    white-space:    nowrap;
}

.vbi-accordion__badge--green  { background: rgba(46,196,124,0.14);  color: var(--color-green); }
.vbi-accordion__badge--amber  { background: var(--color-amber-glow); color: var(--color-amber); }
.vbi-accordion__badge--red    { background: var(--color-red-glow);   color: var(--color-red); }
.vbi-accordion__badge--unknown { background: rgba(237,232,219,0.08); color: var(--text-muted); }

.vbi-accordion__chevron {
    flex-shrink: 0;
    width:       22px;
    height:      22px;
    position:    relative;
    color:       var(--text-secondary);
    transition:  transform 0.22s ease;
}
/* draw the chevron via pseudo-element so no icon font is needed */
.vbi-accordion__chevron::before,
.vbi-accordion__chevron::after {
    content:       '';
    position:      absolute;
    top:           50%;
    width:         9px;
    height:        2px;
    background:    currentColor;
    border-radius: 1px;
    transition:    transform 0.22s ease;
}
.vbi-accordion__chevron::before { left:  2px; transform: translateY(-50%) rotate( 45deg); }
.vbi-accordion__chevron::after  { right: 2px; transform: translateY(-50%) rotate(-45deg); }

.vbi-accordion--collapsed .vbi-accordion__chevron::before {
    transform: translateY(-50%) rotate(-45deg);
}
.vbi-accordion--collapsed .vbi-accordion__chevron::after {
    transform: translateY(-50%) rotate( 45deg);
}

.vbi-accordion__body {
    padding: var(--space-3) var(--space-3) var(--space-4);
}
/* hidden via [hidden] attribute; browser hides it; add animation via CSS */
.vbi-accordion__body:not([hidden]) {
    animation: accordion-reveal 0.18s ease;
}
@keyframes accordion-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Alert accordion variant */
.vbi-accordion--alert {
    border-color: rgba(255,178,56,0.22);
    background:   rgba(255,178,56,0.02);
}
.vbi-accordion--alert .vbi-accordion__label { color: var(--color-amber); }
.vbi-accordion--alert .vbi-accordion__icon  { color: var(--color-amber); }


/* ── Achievement highlight bar ─────────────────────────────── */

.vbi-band__highlight {
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-2) var(--space-3);
    background:    rgba(46,196,124,0.07);
    border:        1px solid rgba(46,196,124,0.22);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    color:         var(--color-green);
    font-size:     var(--text-xs);
    font-weight:   500;
    line-height:   1.4;
}

.vbi-band__highlight::before {
    content:     '✓';
    font-size:   0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}


/* ── Tooltip via data-vbi-tip attribute ────────────────────── */

[data-vbi-tip] {
    position: relative;
    cursor:   default;
}

[data-vbi-tip]::after {
    content:       attr(data-vbi-tip);
    position:      absolute;
    bottom:        calc(100% + 6px);
    left:          50%;
    transform:     translateX(-50%);
    background:    var(--surface-card);
    border:        1px solid var(--surface-border-mid, rgba(237,232,219,0.18));
    border-radius: var(--radius-sm);
    color:         var(--text-primary);
    font-size:     0.68rem;
    line-height:   1.45;
    padding:       5px 10px;
    white-space:   pre-wrap;
    max-width:     220px;
    text-align:    left;
    z-index:       200;
    pointer-events: none;
    opacity:       0;
    transition:    opacity 0.14s;
    box-shadow:    0 4px 12px rgba(0,0,0,0.35);
}

[data-vbi-tip]:hover::after { opacity: 1; }