/* notifications.css */
/* Status board styles — fully self-contained, no base theme dependency for number panels */
/* statusManager owns the desktop display — status cards and number panels in a 2x2 grid */
/* Number panels: 3 rows x 5 columns, digit widths [2, 3, 12, 2, 2] */
/* Columns drop progressively as width shrinks */

/* === SHARED CARD STYLES === */

.notif-card {
    display: flex;
    flex-direction: row;
    gap: 0;
    min-width: 0;
}

.notif-tab {
    width: 0.75rem;
    min-width: 0.75rem;
    border-radius: 4px 0 0 4px;
    background: var(--beta-blue);
}

.notif-info .notif-tab    { background: var(--beta-blue); }
.notif-alert .notif-tab   { background: var(--sunset-red); }
.notif-success .notif-tab { background: var(--radioactive); }

.notif-body {
    flex: 1;
    background: var(--night-rain);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.35rem 0.5rem;
    gap: 0.4rem;
    border-radius: 0 4px 4px 0;
    min-width: 0;
    overflow: hidden;
}

.notif-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.notif-title {
    font-size: clamp(0.65rem, 1.5vw, 0.8rem);
    font-weight: bold;
    color: var(--arctic-ice);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-message {
    font-size: clamp(0.55rem, 1.2vw, 0.65rem);
    color: var(--beta-blue);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-buttons {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.notif-buttons .lcars-btn {
    font-size: 0.6rem;
    padding: 0.25rem 0.6rem;
    border-radius: 100vmax;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    color: black;
    white-space: nowrap;
}

.notif-buttons .lcars-btn-secondary { background: var(--alpha-blue); }
.notif-buttons .lcars-btn-primary   { background: var(--radioactive); }
.notif-buttons .lcars-btn-alert     { background: var(--sunset-red); }

/* === DESKTOP — status board in data cascade area === */

/* Hide the original static data cascade */
.data-wrapper {
    display: none !important;
}

.notification-desktop-container {
    display: none;
}

.notification-desktop-container.visible {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.35rem;
    flex: 1;
    height: 200px;
    overflow: hidden;
    padding-top: 0px;
    padding-right: 2rem;
    padding-left: clamp(20px, 3vw, 50px);
}

/* === NUMBER PANELS — mini data cascades in empty quadrants === */

.sc-number-panel {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    overflow: hidden;
    align-items: center;
    justify-content: flex-end;
}

/* Left column quadrants (1st and 3rd child) — numbers push right */
.notification-desktop-container > :nth-child(odd).sc-number-panel {
    justify-content: flex-end;
}

/* Right column quadrants (2nd and 4th child) — numbers push left */
.notification-desktop-container > :nth-child(even).sc-number-panel {
    justify-content: flex-start;
}

/* Same alignment for status cards */
.notification-desktop-container > :nth-child(odd).notif-card {
    justify-content: flex-end;
}

.notification-desktop-container > :nth-child(even).notif-card {
    justify-content: flex-start;
}

.sc-column {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
    white-space: nowrap;
    flex-shrink: 0;
}

.sc-cell {
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.1rem 0;
}

/* Column layout — 9 columns:   [2, 3, 5, 4, 12, 6, 5, 2], */
/* Symmetrical around wide center */
/* Col 0: 2 digits  (outer narrow)  */
/* Col 1: 3 digits  (medium)        */
/* Col 2: 5 digits  (wide)          */
/* Col 3: 3 digits  (medium)        */
/* Col 4: 12 digits (center)        */
/* Col 5: 3 digits  (medium)        */
/* Col 6: 5 digits  (wide)          */
/* Col 7: 3 digits  (medium)        */
/* Col 8: 2 digits  (outer narrow)  */
/* Progressive hiding — swap wider columns for narrow backfill at each step */

/* === RESPONSIVE — desktop sizing === */

@media (max-width: 1300px) {
    .notification-desktop-container.visible {
        height: 160px;
    }
    .sc-cell {
        font-size: 0.9rem;
    }
}

/* TODO: Tune breakpoints and swap logic manually*/
    @media (max-width: 1800px) {
        .sc-col-0 { display: none; }    /* hide the 2-digit */
    }

    @media (max-width: 1700px) {
        .sc-col-1 { display: none; }     /* hide the 3-digit */
        .sc-col-0 { display: flex; }     /* show the 2-digit */
    }

    @media (max-width: 1675px) {
        .sc-col-3 { display: none; }     /* hide the 4-digit */
        .sc-col-1,
        .sc-col-0 { display: flex; }     
    }

    @media (max-width: 1645px) {
        .sc-col-2 { display: none; }     /* hide the 5-digit */
        .sc-col-3,
        .sc-col-1,
        .sc-col-0 { display: flex; }     
    }

    @media (max-width: 1625px) {
        .sc-col-3,
        .sc-col-0 { display: none; }     /* 5+2 Hidden*/
        .sc-col-2,
        .sc-col-1 { display: flex; }     
    }

    @media (max-width: 1580px) {
        .sc-col-3,
        .sc-col-1 { display: none; }     /* 5+3 Hidden*/
        .sc-col-2,
        .sc-col-0 { display: flex; }     
    }

    @media (max-width: 1560px) {
        .sc-col-3,
        .sc-col-2 { display: none; }     /* 5+4 Hidden*/
        .sc-col-1,
        .sc-col-0 { display: flex; }     
    }

    @media (max-width: 1530px) {
        .sc-col-3,
        .sc-col-5 { display: none; }     /* 5+6 Hidden*/
        .sc-col-1,
        .sc-col-2,
        .sc-col-0 { display: flex; }     
    }

    @media (max-width: 1500px) {
        .sc-col-0,
        .sc-col-5 { display: none; }     /* SIDEBAR RESIZES 2+6 Hidden*/
        .sc-col-3,
        .sc-col-1,
        .sc-col-2 { display: flex; }     
    }

    @media (max-width: 1445px) {
        .sc-col-2,
        .sc-col-5 { display: none; }     /*4+6 Hidden*/
        .sc-col-3,
        .sc-col-1,
        .sc-col-0 { display: flex; }     
    }

    @media (max-width: 1445px) {
        .sc-col-0,
        .sc-col-1,
        .sc-col-5 { display: none; }     /*2+3+6 Hidden*/
        .sc-col-3,
        .sc-col-2 { display: flex; }     
    }

    @media (max-width: 1370px) {
        .sc-col-3,
        .sc-col-2,
        .sc-col-5 { display: none; }     /*5+4+6 Hidden*/
        .sc-col-1,
        .sc-col-0 { display: flex; }     
    }

    @media (max-width: 1300px) {
        .notification-desktop-container.visible {
            height: 160px;
        }
        .sc-cell {
            font-size: 0.9rem;
        }
        .sc-col-0,
        .sc-col-5 { display: none; }     /*FONT RESIZES 2+6 Hidden*/
        .sc-col-3,
        .sc-col-1,
        .sc-col-2 { display: flex; }     
    }

    @media (max-width: 1270px) {
        .sc-col-2,
        .sc-col-5 { display: none; }     /*4+6 Hidden*/
        .sc-col-3,
        .sc-col-1,
        .sc-col-0 { display: flex; }     
    }

    @media (max-width: 1235px) {
        .sc-col-4 { display: none; }     /*12 Hidden*/
        .sc-col-5,
        .sc-col-3,
        .sc-col-2,
        .sc-col-1,
        .sc-col-0 { display: flex; }     
    }

    @media (max-width: 1230px) {
        .sc-col-0,
        .sc-col-4 { display: none; }     /*2+12 Hidden*/
        .sc-col-5,
        .sc-col-3,
        .sc-col-2,
        .sc-col-1 { display: flex; }     
    }

    @media (max-width: 1200px) {
        .sc-col-1,
        .sc-col-0,
        .sc-col-4 { display: none; }     /*3+2+12 Hidden*/
        .sc-col-5,
        .sc-col-3,
        .sc-col-2 { display: flex; }     
    }

    @media (max-width: 1100px) {
        .notification-desktop-container.visible {
            padding-right: 1rem;
        }
        .sc-number-panel {
            gap: 0.5rem;
        }
        .sc-col-4 {
            display: none;
    }
}

    @media (max-width: 1050px) {
        .sc-col-2,
        .sc-col-1,
        .sc-col-0,
        .sc-col-4 { display: none; }     /*4+3+2+12 Hidden*/
        .sc-col-5,
        .sc-col-3 { display: flex; }     
    }

    @media (max-width: 950px) {
        .sc-col-2,
        .sc-col-5,
        .sc-col-0,
        .sc-col-4 { display: none; }     /*4+6+2+12 Hidden*/
        .sc-col-1,
        .sc-col-3 { display: flex; }     
    }

    @media (max-width: 870px) {
        .sc-col-2,
        .sc-col-5,
        .sc-col-0,
        .sc-col-1,
        .sc-col-4 { display: none; }     /*4+6+2+3+12 Hidden*/
        .sc-col-3 { display: flex; }     
    }

    @media (max-width: 800px) {
        .sc-col-2,
        .sc-col-5,
        .sc-col-0,
        .sc-col-3,
        .sc-col-4 { display: none; }     /*4+6+2+4+12 Hidden*/
        .sc-col-1 { display: flex; }     
    }




/* === MOBILE — bottom overlay === */

.notification-mobile-container {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    z-index: 500;
    pointer-events: none;
}

.notification-mobile-container.visible {
    pointer-events: auto;
}

.notification-mobile-container .notif-card {
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.6);
    border-radius: 6px;
}

.notification-mobile-container .notif-tab {
    border-radius: 6px 0 0 6px;
    width: 1.25rem;
    min-width: 1.25rem;
}

.notification-mobile-container .notif-body {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0 6px 6px 0;
}

.notification-mobile-container .notif-buttons {
    justify-content: flex-end;
}

.notification-mobile-container .notif-buttons .lcars-btn {
    font-size: 0.7rem;
    padding: 0.4rem 1rem;
}

/* Stack dots for mobile */
.notif-stack-dots {
    display: flex;
    gap: 3px;
    justify-content: center;
    padding-bottom: 0.25rem;
    position: relative;
}

.notif-stack-dot {
    width: 0.75rem;
    height: 4px;
    background: var(--alpha-blue);
    border-radius: 2px;
    opacity: 0.5;
}

.notif-stack-count {
    font-size: 0.6rem;
    color: var(--alpha-blue);
    font-weight: bold;
    opacity: 0.7;
    margin-left: 0.25rem;
}

/* === RESPONSIVE SWITCHING — desktop vs mobile === */

@media (min-width: 781px) {
    .notification-mobile-container {
        display: none !important;
    }
}

@media (max-width: 780px) {
    .notification-desktop-container {
        display: none !important;
    }
    .notification-mobile-container {
        display: block;
    }
}