/* ========================================
   TVA TIMEDOOR PANEL - STYLESHEET
   ======================================== 
   Main layout grid system with retro CRT aesthetic
   ======================================== */

/* --- ROOT VARIABLES & GLOBAL CONFIGURATION --- */
:root {
    --tva-gold: #ff7919;
    --tva-gold-grid: #221500;
    --tva-gold-dim: #7c4d00;
    --tva-pin-yellow: #ffa319; /* ← color del marc fixat; si el canvies, actualitza també --tva-pin-yellow-rgb */
    --tva-pin-yellow-rgb: 255, 163, 25; /* RGB del mateix (glow) */
    --tva-bg: #050505;
    --tva-logo-bg: #3d2b1f; 
    
    --grid-size: min(25px, 2.6vw); 
    --grid-thickness: 1.7px;
    --screen-padding: 10px;
    --webkit-tap-highlight-color: transparent;
}

/* --- GLOBAL STYLES --- */
body {
    background-color: #000;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Press Start 2P', cursive;
    color: var(--tva-gold);
    overflow: hidden;
    -webkit-tap-highlight-color: var(--webkit-tap-highlight-color);
    image-rendering: pixelated;
}

/* Classe per a l'encesa del sistema (spec APK-BRIEF: crtPowerOn) */
.boot-loader {
    display: none !important;
}

/* CRT a .screen-border: el gir portrait de .outer-frame no el bloqueja */
.screen-border.tempad-power-on {
    animation: crtPowerOn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes crtPowerOn {
    0% { transform: scaleY(0.005) scaleX(0); opacity: 0; filter: brightness(20); }
    60% { transform: scaleY(0.005) scaleX(1.1); opacity: 1; filter: brightness(5); }
    100% { transform: scaleY(1) scaleX(1); opacity: 1; filter: brightness(1); }
}

.screen-border.tempad-power-off {
    animation: crtPowerOff 0.5s ease-out forwards !important;
}

@keyframes crtPowerOff {
    0% { transform: scaleY(1) scaleX(1); opacity: 1; filter: brightness(1); }
    60% { transform: scaleY(0.005) scaleX(1.1); opacity: 1; filter: brightness(5); }
    100% { transform: scaleY(0.005) scaleX(0); opacity: 0; filter: brightness(20); }
}

/* Capta un toc per despertar quan el CRT està col·lapsat */
#tempad-wake-shield {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    background: transparent;
    touch-action: manipulation;
    cursor: pointer;
}
#tempad-wake-shield.is-active {
    display: block;
}

/* --- ESTAT VERTICAL → forçar layout horitzontal --- */
@media (orientation: portrait) {
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #000;
    }

    .outer-frame {
        /* Contingut sempre en landscape: gira 90° i ocupa la pantalla física */
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100vh;
        height: 100vw;
        max-width: none;
        max-height: none;
        transform: translate(-50%, -50%) rotate(-90deg);
        transform-origin: center center;
        z-index: 1;
        pointer-events: auto;
        opacity: 1 !important;
    }

    .boot-loader {
        display: none !important;
    }
}

/* --- ESTAT HORITZONTAL --- */
@media (orientation: landscape) {
    .outer-frame {
        opacity: 1;
    }
}

.outer-frame {
    position: relative;
    padding: 6px;
    background-color: #000;
    border-radius: 4px;
    max-width: 95vw;
    display: inline-block;
    opacity: 1;
    /* Conté el overlay fixed i el wipe dins el mateix stacking context */
    transform: translateZ(0);
    z-index: 1;
}

.screen-border.tempad-power-on,
.screen-border.tempad-power-off {
    /* Evita que transition d'opacity trenqui el keyframe CRT */
    transition: none;
}

/* Core screen border */
.screen-border {
    position: relative;
    border: 3px solid var(--tva-gold);
    padding: var(--screen-padding);
    background-color: var(--tva-bg);
    transition: none;
    opacity: 0; /* Encès via .tempad-power-on */
    overflow: visible; /* cal per al wipe del marc; el clip el fa .grid-canvas */
    z-index: 1;
}

.screen-border.view-pinned {
    /* Mateix estil que el glow taronja, només canvia el color */
    border: 3px solid var(--tva-pin-yellow) !important;
    /* box-shadow: 0 0 15px rgba(var(--tva-pin-yellow-rgb), 0.6),
                inset 0 0 15px rgba(var(--tva-pin-yellow-rgb), 0.1); */
    box-shadow: 0 0 15px rgba(255, 121, 25, 0.6), 
        inset 0 0 15px rgba(255, 121, 25, 0.1);
}

/* Enhanced border color when Programs view is active */
.screen-border.programs-active:not(.view-pinned) {
    border-color: var(--tva-gold);
    box-shadow: 0 0 15px rgba(255, 121, 25, 0.6), 
                inset 0 0 15px rgba(255, 121, 25, 0.1);
}
.screen-border.view-pinned.programs-active {
    border: 3px solid var(--tva-pin-yellow) !important;
    box-shadow: 0 0 15px rgba(var(--tva-pin-yellow-rgb), 0.6),
                inset 0 0 15px rgba(var(--tva-pin-yellow-rgb), 0.1);
}

.tempad-border-wipe {
    display: none !important;
}

/* Wipe CRT del marc: mateixa vora de 3px, sense ombra ni doble contorn */
.tempad-border-wipe-live {
    position: absolute;
    inset: -3px;
    z-index: 2147483646;
    pointer-events: none;
    box-sizing: border-box;
    border: 3px solid var(--tva-pin-yellow);
    border-radius: 0;
    background: transparent;
    opacity: 0;
    box-shadow: none;
    will-change: clip-path, opacity;
}
.tempad-border-wipe-live.wipe-to-orange {
    border-color: #ff7919;
}
.tempad-border-wipe-live.is-playing {
    opacity: 1;
    /* Desplegament ràpid; plegada final (a la dreta) una mica més lenta */
    animation: borderCrtWipe 1.55s linear forwards;
}

@keyframes borderCrtWipe {
    0% {
        clip-path: inset(50% 100% 50% 0);
        opacity: 1;
    }
    /* Obertura vertical (~0.10s) */
    6.5% {
        clip-path: inset(0 98.5% 0 0);
        opacity: 1;
    }
    /* Expansió horitzontal (~0.25s) → arriba a la punta dreta */
    23% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
    28% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
    /* Plegada final a la dreta (~1.0s), un xic més lenta */
    94% {
        clip-path: inset(50% 0 50% 0);
        opacity: 1;
    }
    100% {
        clip-path: inset(50% 0 50% 0);
        opacity: 0;
    }
}

.outer-frame.view-pinned {
    outline: none !important;
}
.outer-frame.view-pinned .screen-border {
    border: 3px solid var(--tva-pin-yellow) !important;
    box-shadow: 0 0 15px rgba(var(--tva-pin-yellow-rgb), 0.6),
                inset 0 0 15px rgba(var(--tva-pin-yellow-rgb), 0.1);
}

/* --- GRID CANVAS & LAYOUT --- */
.grid-canvas {
    display: grid;
    grid-template-rows: repeat(16, var(--grid-size));
    grid-template-columns: repeat(33, var(--grid-size));
    
    background-image: 
        linear-gradient(to right, var(--tva-gold-grid) var(--grid-thickness), transparent var(--grid-thickness)),
        linear-gradient(to bottom, var(--tva-gold-grid) var(--grid-thickness), transparent var(--grid-thickness));
    background-size: var(--grid-size) var(--grid-size);
    
    position: relative;
    border-right: var(--grid-thickness) solid var(--tva-gold-grid);
    border-bottom: var(--grid-thickness) solid var(--tva-gold-grid);
    overflow: hidden;

}

/* Draw app: bloqueja gestos del navegador només al canvas */
#tva-canvas,
.tva-app-fullscreen {
    touch-action: none;
}

/* --- CRT MONITOR OVERLAY EFFECT --- */
.monitor-screen-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background: rgba(255, 0, 0, 0.05);
    background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
                      linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 3px, 3px 100%;
    z-index: 99999;
    pointer-events: none;
    display: block !important;
    opacity: 1;
}

.tva-purge-chaos .monitor-screen-overlay {
    background: rgba(255, 0, 0, 0.15);
    transition: background 0.2s ease;
}

/* --- SIDEBAR & ICON AREA --- */
.sidebar-status {
    margin-left: 2px;
    margin-top: 0.8px;
    grid-row: 1 / 16;
    grid-column: 1;
    display: grid;
    grid-template-rows: repeat(15, var(--grid-size));
    z-index: 999999999;
}

.side-icon {
    width: 90%;
    height: 90%;
    justify-self: center;
    align-self: center;
    filter: sepia(1) saturate(5) brightness(0.8);
}

.icon-5 { grid-row: 14; } 
.icon-4 { grid-row: 12; } 
.icon-3 { grid-row: 10; } 
.icon-2 { grid-row: 8; }  
.icon-1 { grid-row: 6; }

/* Hitbox més gran sense moure les icones:
   +½ fila amunt/avall; +2 columnes a l’esquerra (compensat amb marge negatiu) */
.sidebar-status .side-icon {
    padding-top: calc(var(--grid-size) * 0.5);
    padding-bottom: calc(var(--grid-size) * 0.5);
    padding-right: calc(var(--grid-size) * 0.5);
    padding-left: calc(var(--grid-size) * 2.5);
    margin-top: calc(var(--grid-size) * -0.5);
    margin-bottom: calc(var(--grid-size) * -0.5);
    margin-right: calc(var(--grid-size) * -0.5);
    margin-left: calc(var(--grid-size) * -2.5);
    box-sizing: content-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.side-icon.icon-3.idle-lock-active {
    filter: sepia(1) saturate(5) brightness(0.55);
    opacity: 0.75;
}

/* Pin de vista: sense brillar la icona (només canvia el contorn del marc) */
.side-icon.icon-3.view-nosleep-active:not(.idle-lock-active) {
    filter: sepia(1) saturate(5) brightness(0.8);
    opacity: 1;
}

.side-icon.icon-3.idle-lock-active.view-nosleep-active {
    filter: sepia(1) saturate(5) brightness(0.55);
    opacity: 0.75;
}

.side-icon.icon-2.app-action-active {
    filter: sepia(1) saturate(5) brightness(1.15);
    opacity: 1;
}

.side-icon.icon-4.cubecat-controls-active {
    filter: sepia(1) saturate(5) brightness(1.15);
    opacity: 1;
}

/* --- FOOTER AREA --- */
.grid-footer {
    margin-top: 3px;
    grid-row: 16 / 17;
    grid-column: 1 / 25;
    display: flex;
    align-items: center;
    z-index: 10;
    font-weight: 400;
    font-size: calc(var(--grid-size) * 0.5); 
    letter-spacing: 1px;
    text-transform: uppercase;
}

#current-date {
    margin-left: calc(var(--grid-size) * 0.4); 
}

#ip-display {
    color: var(--tva-gold);
    opacity: 0.9;
}

/* --- TVA LOGO AREA --- */
.tva-logo-box {
    grid-row: 14 / 17;
    grid-column: 27 / 34;
    background-color: var(--tva-logo-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1000; /* Per sobre d'animacions d'apps (missions, tmux focus, etc.) */
    outline: 1px solid var(--tva-gold-dim);
    outline-offset: -1px;
}

/* TIME: només la img, sense requadre/fons de l'emblema */
.grid-canvas.time-app-active .tva-logo-box {
    background: transparent;
    outline: none;
    border: none;
    box-shadow: none;
}

.grid-canvas.time-app-active .sidebar-status,
.grid-canvas.time-app-active .tva-logo-box,
.grid-canvas.time-app-active #tva-clock-app,
.grid-canvas.time-app-active .tva-clock-app {
    z-index: 50;
}

.grid-canvas.time-app-active .tva-logo-box {
    z-index: 1000;
}

/*
 * TIME: enfosquir la graella FORA del requadre (mateix efecte que
 * l’opacity 0.8 deixava veure a dins). Forat al requadre del rellotge.
 */
.grid-canvas.time-app-active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
    z-index: 40;
    -webkit-mask-image:
        linear-gradient(#000 0 0),
        linear-gradient(#000 0 0);
    -webkit-mask-size:
        100% 100%,
        calc(var(--grid-size) * 27) calc(var(--grid-size) * 11);
    -webkit-mask-position:
        0 0,
        calc(var(--grid-size) * 3) calc(var(--grid-size) * 2);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
    mask-image:
        linear-gradient(#000 0 0),
        linear-gradient(#000 0 0);
    mask-size:
        100% 100%,
        calc(var(--grid-size) * 27) calc(var(--grid-size) * 11);
    mask-position:
        0 0,
        calc(var(--grid-size) * 3) calc(var(--grid-size) * 2);
    mask-repeat: no-repeat;
    mask-composite: exclude;
}

.tva-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none;
    z-index: 100;
}

/* --- HOME SCREEN: APPS CONTAINER --- */
.apps-container {
    grid-row: 1 / 14;     
    grid-column: 3 / 17; 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, calc(var(--grid-size) * 6)); 
    gap: 0;
    align-items: start;
    justify-items: center;
    padding-top: calc(var(--grid-size) * 0.5);
}

.app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    cursor: default; 
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.app-item img {
    height: calc(var(--grid-size) * 7);
    width: calc(var(--grid-size) * 7);
    object-fit: contain;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    filter: none !important;
    cursor: pointer;
}

.app-item span {
    font-size: calc(var(--grid-size) * 0.5); 
    text-transform: uppercase;
    letter-spacing: 0px;
    margin-top: calc(var(--grid-size) * -1.15); 
    background-color: transparent; 
    padding: 0;
    z-index: 5;
    pointer-events: none; 
}

/* --- HOME SCREEN: ACTION MENU (RIGHT SIDE) --- */
.text-menu {
    grid-column: 18 / 33; 
    grid-row: 3 / 14;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    pointer-events: none;
}

.action-list-title {
    display: flex;
    align-items: center;
    gap: calc(var(--grid-size) * 0.4); 
    font-size: calc(var(--grid-size) * 1.1); 
    transform: scaleX(0.70);
    transform-origin: left; 
    margin-left: 2px;
    margin-top: 1px;
    letter-spacing: 2.4px; 
    color: var(--tva-gold);
    line-height: 1;
    white-space: nowrap;
}

.custom-slashes {
    transform: scaleX(1.3);
    display: flex;
    gap: 4px;
    margin-top: 2px; 
    margin-left: 8px;
}

.slash-item {
    width: 4px;
    height: calc(var(--grid-size) * 0.95);
    background-color: var(--tva-gold);
    transform: rotate(45deg);
    margin-left: 20px;
}

.select-program {
    font-size: calc(var(--grid-size) * 1.1);
    letter-spacing: 2.4px;
    margin-top: 22px; 
    color: var(--tva-gold);
    display: inline-block;
    white-space: nowrap;
    transform: scaleX(0.72);
    transform-origin: left;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    transition: filter 0.2s ease, text-shadow 0.2s ease;
}

.select-program:active {
    filter: brightness(1.3) drop-shadow(0 0 3px var(--tva-gold));
}

.select-program:hover {
    filter: brightness(1.15);
}

.select-program u {
    text-decoration-thickness: 4px;
    text-underline-offset: 2px;
}

.inactive-list {
    list-style: none;
    padding: 0;
    margin-top: 18px;
    width: 100%;
}

.inactive-list li {
    font-size: calc(var(--grid-size) * 1.1);
    letter-spacing: 2.4px;
    color: var(--tva-gold-dim); 
    line-height: 2.5; 
    margin-top: -17px;
    display: block;
    white-space: nowrap;
    transform: scaleX(0.7);
    transform-origin: left;
}

.inactive-list li.action-list-item {
    color: var(--tva-gold-dim);
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    transition: filter 0.2s ease, text-shadow 0.2s ease;
}

.inactive-list li.action-list-item:hover {
    filter: brightness(1.15);
}

.inactive-list li.action-list-item:active,
.inactive-list li.action-list-item.is-busy {
    filter: brightness(1.15);
}

.inactive-list li.action-list-item.is-done {
    filter: brightness(1.35);
}

.inactive-list li.action-list-item.is-failed {
    color: #ff5533;
}

/* ========================================
   APPLICATION LAYOUTS
   ======================================== */

.timedoor-app-layout {
    display: contents;
}

.directory-app-layout {
    display: contents;
}

/* --- NEWS APPLICATION --- */
.news-app-layout {
    grid-column: 3 / 33;
    grid-row: 1 / 16;
    display: grid;
    grid-template-columns: repeat(30, var(--grid-size));
    grid-template-rows: repeat(15, var(--grid-size));
    overflow: hidden;
    min-height: 0;
    z-index: 20;
}

.news-channels-column,
.news-feed-column,
.news-reader-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    pointer-events: auto;
}

.news-channels-column {
    grid-column: 1 / 12;
    grid-row: 1 / 15;
}

.news-feed-column {
    grid-column: 14 / 31;
    grid-row: 1 / 15;
}

.news-reader-column {
    grid-column: 14 / 31;
    grid-row: 1 / 15;
}

.news-app-layout.is-reading .news-feed-column {
    display: none;
}

.news-app-layout.is-reading .news-reader-column {
    display: flex;
}

.news-reader-column[hidden] {
    display: none !important;
}

.news-channels-column .sessions-app-header,
.news-feed-column .sessions-app-header,
.news-reader-column .sessions-app-header {
    flex-shrink: 0;
}

.news-channels-column .tva-divider-diagonals,
.news-feed-column .tva-divider-diagonals,
.news-reader-column .tva-divider-diagonals {
    flex-shrink: 0;
}

.news-channels-column > .sessions-container {
    flex: 0 0 auto;
    overflow: visible;
}

.news-channels-actions {
    flex: 0 0 auto !important;
    margin-top: calc(var(--grid-size) * 0.35);
    overflow: visible !important;
}

.news-channels-column > .session-id,
.news-feed-column > .session-id,
.news-reader-column > .session-id {
    flex-shrink: 0;
    height: auto;
    margin-top: calc(var(--grid-size) * 0.25);
}

.news-feed-column > .sessions-container {
    flex: 1 1 0;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.news-feed-column > .sessions-container::-webkit-scrollbar {
    display: none;
}

.news-reader-title {
    flex-shrink: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 0.42);
    color: var(--tva-gold);
    line-height: 1.45;
    letter-spacing: 0.5px;
    text-transform: none;
    margin-bottom: calc(var(--grid-size) * 0.35);
    transform: scaleX(0.92);
    transform-origin: left;
}

.news-reader-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1.5px solid var(--tva-gold);
    background: #000;
    padding: calc(var(--grid-size) * 0.4);
    box-sizing: border-box;
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 0.36);
    color: var(--tva-gold);
    line-height: 1.65;
    letter-spacing: 0.4px;
    text-transform: none;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.news-reader-body::-webkit-scrollbar {
    display: none;
}

.news-reader-body.is-html {
    white-space: normal;
}

.news-reader-body.is-html p {
    margin: 0 0 calc(var(--grid-size) * 0.45) 0;
}

.news-reader-body.is-error {
    color: rgb(255, 51, 0);
    border-color: rgb(255, 51, 0);
}

.news-reader-actions {
    flex: 0 0 auto !important;
    margin-top: calc(var(--grid-size) * 0.35);
    overflow: visible !important;
}

.news-feed-column .session-entry.news-item {
    text-align: left;
    padding: calc(var(--grid-size) * 0.35) calc(var(--grid-size) * 0.4);
    letter-spacing: 1px;
    font-size: calc(var(--grid-size) * 0.42);
    line-height: 1.35;
    text-transform: none;
    display: flex;
    align-items: flex-start;
    gap: calc(var(--grid-size) * 0.35);
}

.news-feed-column .session-entry.news-item .news-item-number {
    flex: 0 0 auto;
    color: inherit;
    font-size: calc(var(--grid-size) * 0.38);
    letter-spacing: 0;
    opacity: 0.85;
}

.news-feed-column .session-entry.news-item .news-item-title {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-feed-column .session-entry.news-feed-status {
    text-align: center;
    cursor: default;
    opacity: 0.75;
}

.news-feed-column .session-entry.news-feed-status.is-error {
    border-color: rgb(255, 51, 0);
    color: rgb(255, 51, 0);
    opacity: 1;
}

.news-feed-column .session-entry.news-feed-status:hover {
    background: transparent;
    color: var(--tva-gold);
    box-shadow: none;
}

.news-feed-column .session-entry.news-feed-status.is-error:hover {
    color: rgb(255, 51, 0);
}

/* --- COMMON: PREVIEW COLUMN (LEFT SIDE) --- */
.timedoor-preview-column,
.dir-preview-column {
    display: flex;
    flex-direction: column;
    margin-bottom: calc(var(--grid-size) * -0.1);
}

.timedoor-preview-column {
    /* La mida real la defineix el bloc TMUX més avall (max-width / max-height animables) */
    grid-column: 3 / 33;
    grid-row: 1 / 17;
}

.dir-preview-column {
    grid-column: 3 / 17;
    grid-row: 1 / 13;
    margin-bottom: -15px;
    margin-top: calc(var(--grid-size) * 0.02); 
    margin-bottom: calc(var(--grid-size) * -0.9);
}

.preview-inner-border {
    border: 2px solid transparent;
    padding: calc(var(--grid-size) * 0.5);
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 157, 0, 0.02);
}

.preview-title {
    font-size: calc(var(--grid-size) * 0.9);
    margin-bottom: calc(var(--grid-size) * 0.5);
    transform: scaleX(0.8);
    transform-origin: left;
    color: var(--tva-gold);
}

.dir-preview-column .preview-title {
    margin-top: calc(var(--grid-size) * -0.25);
    font-size: calc(var(--grid-size) * 0.5);
    color: var(--tva-gold);
    text-transform: uppercase;
}

/* --- TERMINAL/PREVIEW FRAMES --- */
.terminal-frame {
    flex-grow: 1;
    border: 1px solid var(--tva-gold-dim);
    background: #000;
    padding: 5px 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    height: calc(var(--grid-size) * 11);
    z-index: 5;
}

.dir-preview-column .terminal-frame {
    flex-grow: 1;
    min-height: calc(var(--grid-size) * 9.5);
    max-height: calc(var(--grid-size) * 10);
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    position: relative;
    background: #000;
    border: 1px solid var(--tva-gold-dim);
    margin-bottom: calc(var(--grid-size) * 0.4);
}

.terminal-frame-settings {
    flex-grow: 1;
    border: 1px solid var(--tva-gold-dim);
    background: #000;
    padding: 5px 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    height: calc(var(--grid-size) * 10);
    margin-top: calc(var(--grid-size) * 0.5);
    z-index: 5;
}

/* --- TERMINAL CONTENT --- */
#tmux-terminal-snapshot,
#settings-status,
#file-content-preview {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    line-height: 1.2;
    color: var(--tva-gold);
    margin: 0;
    white-space: pre;
    max-width: 100%;
}

#tmux-terminal-snapshot {
    opacity: 0.9;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

/* Emojis (tmux, Discord, etc.): B/N + tint taronja TVA */
.tva-emoji,
.tmux-emoji {
    display: inline-block;
    filter: grayscale(1) sepia(1) hue-rotate(-28deg) saturate(7) brightness(0.9);
    vertical-align: baseline;
}

#settings-status {
    line-height: 1.4;
    white-space: pre-wrap;
    margin-top: 0;
    padding-top: 0;
}

#file-content-preview {
    white-space: pre;
    padding: 12px;
    flex-grow: 1;
    display: block;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.file-image-preview,
#file-content-preview.file-image-preview {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 8px;
    box-sizing: border-box;
    background: #000;
}

.file-pdf-preview {
    background: #1a1208;
}

#file-content-preview::-webkit-scrollbar {
    width: 6px;
}

#file-content-preview::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

#file-content-preview::-webkit-scrollbar-thumb {
    background-color: var(--tva-gold);
    border-radius: 10px;
}

#file-content-preview::-webkit-scrollbar-thumb:hover {
    background: var(--tva-gold);
}

.preview-metadata-settings {
    margin-top: calc(var(--grid-size) * -0.48);
    line-height: 1.68;
    font-size: calc(var(--grid-size) * 0.6);
    margin-bottom: calc(var(--grid-size) * 1);
    transform: scaleX(0.8);
    transform-origin: left;
    color: var(--tva-gold);
}

.preview-metadata-tmux {
    height: calc(var(--grid-size) * 2);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: flex-start;
    margin-bottom: calc(var(--grid-size) * -0.4);
    white-space: nowrap;
    font-size: calc(var(--grid-size) * 0.45); 
    line-height: 1.72;
    color: var(--tva-gold);
    transform: scaleX(0.8);
    transform-origin: left;
    overflow: hidden;
    box-sizing: border-box;
}

.dir-preview-column .preview-metadata-tmux {
    height: calc(var(--grid-size) * 3.2);
    margin-bottom: -8px;
    line-height: 1.6;
}

#file-info-label {
    height: auto;
    margin: 0;
    padding: 0;
    line-height: 1.8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.preview-metadata-tmux p, 
.session-id {
    height: var(--grid-size);
    display: flex;
    align-items: center;
}

.dir-preview-column .preview-metadata-tmux p {
    height: auto;
}

#active-session-label {
    font-size: calc(var(--grid-size) * 0.5);
    transform: scaleX(0.85);
    transform-origin: left;
    margin: 0;
    padding-bottom: 0px;
    color: var(--tva-gold);
    text-transform: uppercase;
}

#settings-status {
    font-size: 9px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-y: auto;
    height: 100%;
}

.session-id {
    font-size: calc(var(--grid-size) * 0.45);
    color: var(--tva-gold-dim);
    margin: 4px 0 0 0;
    transform: scaleX(0.9);
    transform-origin: left;
    letter-spacing: 1px;
}

/* --- SESSION STATUS INDICATORS --- */
#session-status-text {
    transition: color 0.3s ease;
}

#session-status-text.status-active {
    margin-top: 1px;
    color: #1aff00 !important;
}

#session-status-text.status-broken {
    color: rgb(255, 51, 0) !important;
    animation: tva-flicker 1.5s infinite;
}

#system-status-text {
    transition: color 0.3s ease;
}

#system-status-text.status-active {
    margin-top: 1px;
    color: #1aff00 !important;
}

#system-status-text.status-broken {
    color: rgb(255, 51, 0) !important;
    animation: tva-flicker 1.5s infinite;
}

@keyframes tva-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ========================================
   RIGHT COLUMN: SESSIONS/DIRECTORY LIST
   ======================================== */

/* --- DIRECTORY PREVIEW COLUMN --- */
.dir-preview-column-directory {
    grid-column: 3 / 17;
    grid-row: 1 / 15; 
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.preview-inner-border-directory {
    border: 2px solid var(--tva-gold);
    padding: calc(var(--grid-size) * 0.4);
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 157, 0, 0.02);
    box-sizing: border-box;
}

.preview-title-directory {
    font-size: calc(var(--grid-size) * 0.45);
    margin-bottom: calc(var(--grid-size) * 0.3);
    color: var(--tva-gold);
    text-transform: uppercase;
    transform: scaleX(0.85);
    transform-origin: left;
    /* Pugem el títol una mica per ajustar-lo al límit superior del border */
    margin-top: calc(var(--grid-size) * -0.15); 
}

.metadata-line-directory {
    /* Reduïm l'alçada de cada línia a la meitat d'un quadrat */
    height: calc(var(--grid-size) * 0.45); 
    display: flex;
    align-items: center;
    font-size: calc(var(--grid-size) * 0.45); 
    color: var(--tva-gold);
    transform: scaleX(0.85);
    transform-origin: left;
    white-space: nowrap;
    /* Eliminem qualsevol margin intern */
    margin-top: 8px; 
}

.session-id-directory {
    color: var(--tva-gold-dim);
    letter-spacing: 1px;
}

/* Ajust de la columna de la llista: tall a meitat entre files 13 i 14 */
.dir-list-column {
    grid-column: 19 / 33;
    grid-row: 1 / 14;
    margin-bottom: calc(var(--grid-size) * 0.5);
}

/* --- DIVIDER SEPARATOR --- */
.tva-divider-diagonals {
    width: 100%;
    height: calc(var(--grid-size) * 0.5); 
    margin: 0 0 15px 0; 
    display: block;
    box-sizing: border-box;
    background: repeating-linear-gradient(
        -45deg,
        var(--tva-gold),
        var(--tva-gold) 2px,      
        transparent 2px,
        transparent 10px          
    );
    opacity: 0.8;
    flex-shrink: 0;
}

/* --- SCROLL CONTAINERS --- */
.scroll-interface {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.sessions-container {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.dir-list-column .sessions-container::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

.dir-list-column .sessions-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: auto;
}

/* --- SCROLLBAR STYLING (WEBKIT) --- */
#tmux-terminal-snapshot::-webkit-scrollbar,
.sessions-container::-webkit-scrollbar {
    width: 6px;
}

#tmux-terminal-snapshot::-webkit-scrollbar-track,
.sessions-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

#tmux-terminal-snapshot::-webkit-scrollbar-thumb,
.sessions-container::-webkit-scrollbar-thumb {
    background-color: var(--tva-gold);
    border-radius: 10px;
}

/* --- SCROLLBAR STYLING (FIREFOX) --- */
#tmux-terminal-snapshot,
.sessions-container {
    scrollbar-width: thin;
    scrollbar-color: var(--tva-gold) transparent;
}

/* --- SESSION/ENTRY BUTTONS --- */
.session-entry {
    border: 1.5px solid var(--tva-gold);
    margin-bottom: 12px;
    padding: 12px 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: calc(var(--grid-size) * 0.55);
    cursor: pointer;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tva-gold);
    background: transparent;
    transition: all 0.1s ease-in-out;
    pointer-events: auto !important;
    z-index: 30 !important;
    position: relative;
}

.session-entry.active, 
.session-entry:hover {
    background-color: var(--tva-gold);
    color: var(--tva-bg);
    box-shadow: 0 0 10px rgba(255, 121, 25, 0.3);
}

/* --- DANGER BUTTON (SETTINGS) --- */
.danger-button {
    border-color: #ff3300 !important;
    color: #ff3300 !important;
}

.danger-button:hover {
    background-color: #ff3300 !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(255, 51, 0, 0.4);
}

/* --- SETTINGS SPECIFIC FIXES --- */
.settings-preview-fix {
    grid-row: 1 / 15 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: calc(var(--grid-size) * -0.1) !important;
}

.settings-inner-height {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.settings-preview-fix .terminal-frame {
    height: calc(var(--grid-size) * 10) !important;
    margin-bottom: calc(var(--grid-size) * 0.5);
}

.settings-preview-fix .preview-metadata {
    margin-top: 0 !important;
    height: auto;
    display: block;
}

#active-session-label {
    font-size: calc(var(--grid-size) * 0.5);
    color: var(--tva-gold);
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 0px;
    width: 100%;
}

/* ========================================
   MODAL SYSTEM
   ======================================== */

.tva-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 999;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.tva-modal-content {
    background-color: var(--tva-bg);
    border: 2px solid var(--tva-gold);
    padding: 40px;
    width: calc(var(--grid-size) * 11.1);
    height: calc(var(--grid-size) * 4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: auto;
    transform-origin: center;
    transform: scaleY(0);
    opacity: 0;
    box-shadow: none;
}

.tva-modal-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    margin-bottom: 20px;
    line-height: 3;
    text-transform: uppercase;
    color: var(--tva-gold);
}

.modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.modal-btn {
    padding: 10px 20px;
    border: 2px solid var(--tva-gold);
    background: transparent;
    color: var(--tva-gold);
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-btn:hover {
    background: rgba(255, 121, 25, 0.1);
}

.modal-btn:active {
    background: var(--tva-gold);
}

.modal-btn.confirm:hover {
    background: var(--tva-gold);
    color: #000;
}

/* ========================================
   ANIMATIONS
   ======================================== */

.modal-open {
    display: flex !important;
    animation: timedoor-open 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.modal-closing {
    animation: timedoor-close 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

@keyframes timedoor-open {
    0% {
        transform: scaleX(1) scaleY(0);
        opacity: 0;
    }
    30% {
        transform: scaleX(1) scaleY(0.01);
        opacity: 1;
    }
    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
}

@keyframes timedoor-close {
    0% {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
    70% {
        transform: scaleX(1) scaleY(0.01);
        opacity: 1;
    }
    100% {
        transform: scaleX(1) scaleY(0);
        opacity: 0;
    }
}

/* --- CHAOS EFFECT (PURGE MODE) --- */
.grid-canvas.tva-purge-chaos {
    animation: tva-purge-vibration 0.1s linear infinite !important;
    background-color: #200000 !important;
    filter: drop-shadow(0 0 10px #ff0000) brightness(1.2) !important;
}

.grid-canvas.tva-purge-chaos::after {
    content: "";
    position: fixed;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.2) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.2) 2px, transparent 2px);
    background-size: 80px 80px;
    z-index: 10000;
    animation: tva-grid-warp 0.6s linear infinite;
    pointer-events: none;
    display: block !important;
}

.tva-purge-chaos::after {
    content: "";
    position: fixed;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.2) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.2) 2px, transparent 2px);
    background-size: 80px 80px;
    z-index: 10000;
    animation: tva-grid-warp 0.6s linear infinite;
    pointer-events: none;
}

@keyframes tva-purge-vibration {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-8px, 4px); }
    50% { transform: translate(8px, -4px); }
    75% { transform: translate(-4px, -8px); }
    100% { transform: translate(0, 0); }
}

@keyframes tva-grid-warp {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(10deg) scale(1.1); }
}

.scramble-word {
    display: inline-block;
    animation: tva-text-chaos 0.2s linear infinite;
}

@keyframes tva-text-chaos {
    0% { transform: translate(2px, -2px); filter: blur(0px); }
    50% { transform: translate(-2px, 2px); filter: blur(1px); font-family: serif; }
    100% { transform: translate(0,0); }
}

/* --- CRT GLITCH EFFECT --- */
.tva-glitch-active {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(255, 0, 0, 0.05);
    background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
                      linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 3px, 3px 100%;
    z-index: 99999;
    pointer-events: none;

    color: var(--tva-gold-dim); 
    line-height: 2.5; 
    margin-top: -17px;
    
    /* Apliquem l'aplastat a cada línia */
    display: block;
    white-space: nowrap;
    transform: scaleX(0.7);
    transform-origin: left;
}

/* --- APPLICACIÓ: (TMUX) --- */

.timedoor-app-layout {
    display: contents; /* Usa la graella del pare (grid-canvas) */
}

/* Columna Esquerra: ample animable; alçada sempre amb espai per títol + Active */
.timedoor-preview-column {
    grid-column: 3 / 33;
    grid-row: 1 / 17;
    display: flex;
    flex-direction: column;
    margin-bottom: calc(var(--grid-size) * 0.1);
    justify-self: start;
    align-self: start;
    width: 100%;
    max-width: calc(var(--grid-size) * 14);
    /* Espai per terminal (11) + padding + metadata (2) sense tallar Active */
    min-height: calc(var(--grid-size) * 14);
    overflow: visible;
    transition:
        max-width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        min-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-inner-border {
    position: relative;
    border: 2px solid transparent;
    padding: calc(var(--grid-size) * 0.5);
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 157, 0, 0.02);
    transition: background-color 0.45s ease, padding 0.45s ease;
}

/* Contorn decoratiu: només canvia el color (mides estables) */
.preview-inner-border::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid var(--tva-gold);
    pointer-events: none;
    z-index: 2;
    transition: border-color 0.55s ease;
}

.preview-title {
    font-size: calc(var(--grid-size) * 0.9);
    margin-bottom: calc(var(--grid-size) * 0.5);
    transform: scaleX(0.8);
    transform-origin: left;
    color: var(--tva-gold);
}

/* Contenidor de text dins de la terminal de Settings */
#settings-status {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    line-height: 1.4; /* Ajustem l'interliniat perquè no "baixi" el text */
    white-space: pre-wrap;
    color: var(--tva-gold);
    margin-top: 0; /* Forcem marge zero */
    padding-top: 0; /* Forcem padding zero */
}

/* Forcem que el frame de la terminal no tingui paddings estranys */
.terminal-frame {
    flex-grow: 1;
    border: 1px solid var(--tva-gold-dim);
    background: #000;
    padding: 5px 10px; /* Reduïm el padding superior de 10px a 5px */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    height: calc(var(--grid-size) * 11);
    
    /* ASSEGUREM QUE EL TEXT ESTIGUI PER SOBRE DE LA CAPA DE FONS SI CAL */
    z-index: 5; 
}


#tmux-terminal-snapshot {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    line-height: 1.2;
    color: var(--tva-gold);
    opacity: 0.9;
    margin: 0;
    white-space: pre; 
    overflow-x: hidden;
    overflow-y: auto;
    
    /* Forcem l'ocupació total */
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.preview-metadata {
    margin-top: calc(var(--grid-size) * -0.48);
    line-height: 1.68;
    font-size: calc(var(--grid-size) * 0.6);
    margin-bottom: calc(var(--grid-size) * 0.5);
    transform: scaleX(0.8);
    transform-origin: left;
    color: var(--tva-gold);
}

.preview-metadata-settings {
    margin-top: calc(var(--grid-size) * -0.48);
    line-height: 1.68;
    font-size: calc(var(--grid-size) * 0.6);
    margin-bottom: calc(var(--grid-size) * 1);
    transform: scaleX(0.8);
    transform-origin: left;
    color: var(--tva-gold);
}

.preview-metadata-tmux {
    /* 1. RESERVA D'ESPAI (2 files exactes) */
    height: calc(var(--grid-size) * 2);
    display: flex;
    flex-direction: column;
    
    /* 2. ALINEACIÓ SUPERIOR (La clau) */
    justify-content: flex-end; 
    align-items: flex-start;
    
    /* 3. POSICIÓ I MARGES */
    /* Eliminem el margin-top negatiu si vols que toqui exactament la línia de la graella */
    margin-bottom: calc(var(--grid-size) * -0.4);

    white-space: nowrap;
    
    /* 4. TIPOGRAFIA CONTROLADA PER GRAELLA */
    font-size: calc(var(--grid-size) * 0.45); 
    line-height: var(--grid-size); /* Cada línia de text = 1 fila de graella */
    
    line-height: 1.72;

    color: var(--tva-gold);
    transform: scaleX(0.8);
    transform-origin: left;
    
    /* 5. NETEJA */
    overflow: hidden;
    box-sizing: border-box;
}

.preview-metadata .session-id {
    margin-top: calc(var(--grid-size) * -0.55);
}

#active-session-label {
    font-size: calc(var(--grid-size) * 0.5);
    transform: scaleX(0.85);
    transform-origin: left;
    margin: 0;
    padding-bottom: 0px;
    color: var(--tva-gold);
    text-transform: uppercase;
}

/* Estils per al text de l'estat */
#session-status-text {
    transition: color 0.3s ease;
}

#session-status-text.status-active {
    margin-top: 1px;
    color: #1aff00 !important; /* Verd */
}
#session-status-text.status-broken {
    color: rgb(255, 51, 0) !important; /* Vermell */
    animation: tva-flicker 1.5s infinite;
}

@keyframes tva-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.session-id {
    font-size: calc(var(--grid-size) * 0.45);
    color: var(--tva-gold-dim);
    margin: 4px 0 0 0;
    transform: scaleX(0.9);
    transform-origin: left;
    letter-spacing: 1px;
}

/* Columna Dreta: Menú de sessions */
.sessions-list-column {
    grid-column: 19 / 33;
    grid-row: 1 / 14;
    margin-bottom: calc(var(--grid-size) * 0.5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    overflow: hidden;
    z-index: 20 !important;
    pointer-events: auto !important;
    transform: translateX(0);
    opacity: 1;
    transition:
        transform 0.55s cubic-bezier(0.45, 0.05, 0.2, 1),
        opacity 0.4s ease;
    will-change: transform, opacity;
}

.preview-inner-border {
    transition:
        background-color 0.45s ease,
        padding 0.45s ease;
}

.preview-metadata-tmux #active-session-label:has(.session-title-name) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    transition: border-top-color 0.5s ease;
}

.preview-metadata-tmux .session-title-name {
    display: block;
    font-size: calc(var(--grid-size) * 0.5);
    transform: scaleX(0.85);
    transform-origin: left bottom;
    transition:
        font-size 0.55s cubic-bezier(0.45, 0.05, 0.2, 1),
        transform 0.55s cubic-bezier(0.45, 0.05, 0.2, 1);
}

.preview-metadata-tmux #session-status-text {
    display: block;
    transform-origin: top center;
    transform: scaleY(1);
    opacity: 1;
    overflow: hidden;
    transition:
        transform 0.45s cubic-bezier(0.45, 0.05, 0.2, 1),
        opacity 0.4s ease;
}

.preview-metadata-tmux {
    transition:
        margin-top 0.55s cubic-bezier(0.45, 0.05, 0.2, 1),
        margin-bottom 0.45s ease;
}

.timedoor-preview-column .terminal-frame {
    transition:
        height 0.5s cubic-bezier(0.45, 0.05, 0.2, 1),
        max-height 0.5s cubic-bezier(0.45, 0.05, 0.2, 1),
        border-color 0.4s ease;
}

/* TMUX focus: expansió animada (botó contextual icon-2) */
.grid-canvas.tmux-focus-mode .sessions-list-column {
    transform: translateX(115%);
    opacity: 0;
    pointer-events: none;
}

.grid-canvas.tmux-focus-mode .timedoor-preview-column {
    max-width: calc(var(--grid-size) * 30);
    min-height: calc(var(--grid-size) * 16);
    margin-bottom: 0;
    overflow: visible;
    z-index: 4;
}

.grid-canvas.tmux-focus-mode .preview-inner-border {
    background-color: transparent;
    padding: calc(var(--grid-size) * 0.4) calc(var(--grid-size) * 0.5) 0;
    overflow: visible;
}

/* Contorn: transparent (es manté la mida, només el color) */
.grid-canvas.tmux-focus-mode .preview-inner-border::after {
    border-color: transparent;
}

.grid-canvas.tmux-focus-mode .terminal-frame {
    height: calc(var(--grid-size) * 11.5);
    max-height: calc(var(--grid-size) * 11.5);
    flex-grow: 0;
    flex-shrink: 0;
    border: 1px solid var(--tva-gold);
    overflow: hidden;
}

.grid-canvas.tmux-focus-mode #tmux-terminal-snapshot {
    overflow-x: hidden;
    overflow-y: auto;
}

.grid-canvas.tmux-focus-mode .preview-metadata-tmux {
    margin-top: calc(var(--grid-size) * 0.7);
    margin-bottom: 0;
    height: calc(var(--grid-size) * 2);
    justify-content: flex-end;
    background: transparent;
    overflow: visible;
}

.grid-canvas.tmux-focus-mode #active-session-label {
    border-top-color: transparent;
}

.grid-canvas.tmux-focus-mode .session-title-name {
    font-size: calc(var(--grid-size) * 0.72);
    transform: scaleX(0.88);
    transform-origin: left bottom;
}

.grid-canvas.tmux-focus-mode #session-status-text {
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
}

.grid-canvas.tmux-focus-mode .tva-logo-box,
.grid-canvas.tmux-focus-closing .tva-logo-box {
    z-index: 1000;
}

/* Tancament: torna a 14 columnes sense tallar el contingut */
.grid-canvas.tmux-focus-closing .sessions-list-column {
    transform: translateX(0);
    opacity: 1;
}

.grid-canvas.tmux-focus-closing .timedoor-preview-column {
    max-width: calc(var(--grid-size) * 14);
    min-height: calc(var(--grid-size) * 14);
    overflow: visible;
    z-index: 4;
}

.grid-canvas.tmux-focus-closing .preview-inner-border {
    background-color: transparent;
    overflow: visible;
}

.grid-canvas.tmux-focus-closing .preview-inner-border::after {
    border-color: var(--tva-gold);
}

.grid-canvas.tmux-focus-closing .terminal-frame {
    height: calc(var(--grid-size) * 11);
    max-height: calc(var(--grid-size) * 11);
    border-color: var(--tva-gold-dim);
}

.grid-canvas.tmux-focus-closing .preview-metadata-tmux {
    margin-top: 0;
    height: calc(var(--grid-size) * 2);
    justify-content: flex-end;
}

.grid-canvas.tmux-focus-closing .session-title-name {
    font-size: calc(var(--grid-size) * 0.5);
    transform: scaleX(0.85);
    transform-origin: left bottom;
}

.grid-canvas.tmux-focus-closing #session-status-text {
    transform: scaleY(1);
    opacity: 1;
}

.grid-canvas.tmux-focus-closing #active-session-label {
    border-top-color: var(--tva-gold-dim);
}

/* Contenidor del títol superior */
.sessions-app-header {
    width: 100%;
    font-size: calc(var(--grid-size) * 1);
    transform: scaleX(0.8);
    transform-origin: left;
    color: var(--tva-gold);
    padding-top: calc(var(--grid-size) * 1.14);
    margin-bottom: 5px;
    white-space: nowrap;
}

/* LA LÍNIA DIVISÒRIA DIAGONAL */
.tva-divider-diagonals {
    width: 100%;
    /* Forcem que ocupi exactament un quadrat de la graella */
    height: calc(var(--grid-size) * 0.5); 
    
    /* Centrem el dibuix de les línies dins d'aquest quadrat */
    margin: 0 0 15px 0; 
    display: block;
    box-sizing: border-box;

    /* El patró de la TVA */
    background: repeating-linear-gradient(
        -45deg,
        var(--tva-gold),
        var(--tva-gold) 2px,      
        transparent 2px,
        transparent 10px          
    );
    
    /* Opcional: una mica de transparència com tenies */
    opacity: 0.8;
    
    /* Evitem que res l'empenyi o el deformi */
    flex-shrink: 0; 
}

/*.saved-times-label {
    width: 100%;
    text-align: center;
    font-size: calc(var(--grid-size) * 0.5);
    margin-bottom: 15px;
    letter-spacing: 3px;
    transform: scaleX(0.8);
    color: var(--tva-gold);
    margin-top: -9px;
}*/

/* Ajustem el scroll-interface perquè no tingui marges estranys */
.scroll-interface {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.sessions-container {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%; /* Ocupa el 100% de la columna, igual que el separador */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y; /* Permet scroll tàctil malgrat touch-action:none del canvas */
}

/* Mateix scroll amagat que al directori */
.sessions-list-column .sessions-container::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

.sessions-list-column .sessions-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-height: 100%;
}

/* BOTONS DE SESSIÓ: Mateixa amplada que el separador */
.session-entry {
    border: 1.5px solid var(--tva-gold);
    margin-bottom: 12px;
    padding: 12px 0; /* Padding vertical */
    width: 100%;     /* Amplada total del bloc */
    box-sizing: border-box;
    
    text-align: center;
    font-size: calc(var(--grid-size) * 0.55); /* Una mica més petita per encabir noms llargs */
    cursor: pointer;
    
    /* En comptes de scaleX, usem letter-spacing per a l'efecte TVA */
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tva-gold);
    background: transparent;
    transition: all 0.1s ease-in-out;
    pointer-events: auto !important;
    z-index: 30 !important;
    position: relative; /* Necessari per al z-index */
}

/* Efecte de selecció */
.session-entry.active, 
.session-entry:hover {
    background-color: var(--tva-gold);
    color: var(--tva-bg);
    box-shadow: 0 0 10px rgba(255, 121, 25, 0.3); /* Brillar lleuger */
}

/* Personalització de la barra de scroll per a Chrome, Safari i Edge */
#tmux-terminal-snapshot::-webkit-scrollbar,
.sessions-container::-webkit-scrollbar {
    width: 6px; /* Molt fineta */
}

#tmux-terminal-snapshot::-webkit-scrollbar-track,
.sessions-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2); /* Fons gairebé invisible */
}

#tmux-terminal-snapshot::-webkit-scrollbar-thumb,
.sessions-container::-webkit-scrollbar-thumb {
    background-color: var(--tva-gold); /* Taronja TVA */
    border-radius: 10px;
}

/* Per a Firefox */
#tmux-terminal-snapshot,
.sessions-container {
    scrollbar-width: thin;
    scrollbar-color: var(--tva-gold) transparent;
}

/* Estil per a accions perilloses a Settings */
.danger-button {
    border-color: #ff3300 !important; /* Un taronja més vermellós */
    color: #ff3300 !important;
}

.danger-button:hover {
    background-color: #ff3300 !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(255, 51, 0, 0.4);
}

/* Ajust específic per a la previsualització de Settings */
/* --- TVA TIMEDOOR MODAL SYSTEM --- */

.tva-modal {
    display: none; /* Controlat per JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent; /* Sense fons fosc per estètica TVA */
    z-index: 999;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Evita bloquejos fins que el contingut sigui actiu */
}

.tva-modal-content {
    background-color: var(--tva-bg);
    border: 2px solid var(--tva-gold);
    padding: 40px;
    width: calc(var(--grid-size) * 11.1);
    height: calc(var(--grid-size) * 4);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    pointer-events: auto; /* Reactiva els clics dins del requadre */
    transform-origin: center;
    transform: scaleY(0); /* Estat inicial col·lapsat */
    opacity: 0;
    box-shadow: none;
}

/* --- ANIMACIONS --- */

.modal-open {
    display: flex !important;
    animation: timedoor-open 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.modal-closing {
    animation: timedoor-close 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

@keyframes timedoor-open {
    0% {
        transform: scaleX(1) scaleY(0);
        opacity: 0;
    }
    30% {
        transform: scaleX(1) scaleY(0.01); /* Línia horitzontal completa */
        opacity: 1;
    }
    100% {
        transform: scaleX(1) scaleY(1); /* Expansió vertical completa */
        opacity: 1;
    }
}

@keyframes timedoor-close {
    0% {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
    70% {
        transform: scaleX(1) scaleY(0.01); /* Col·lapse vertical a línia */
        opacity: 1;
    }
    100% {
        transform: scaleX(1) scaleY(0); /* Desvaniment central */
        opacity: 0;
    }
}

/* --- ELEMENTS INTERNS --- */

.tva-modal-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    margin-bottom: 20px;
    line-height: 3;
    text-transform: uppercase;
    color: var(--tva-gold);
}

.modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.modal-btn {
    padding: 10px 20px;
    border: 2px solid var(--tva-gold);
    background: transparent;
    color: var(--tva-gold);
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-btn:hover {
    background: rgba(255, 121, 25, 0.1);
}

.modal-btn:active {
    background: var(--tva-gold);
}

.modal-btn.confirm:hover {
    background: var(--tva-gold);
    color: #000;
}



/* Efecte de línies de ràster (TV antiga) */
.tva-glitch-active {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(255, 0, 0, 0.05);
    background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
                      linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 3px, 3px 100%;
    z-index: 99999;
    pointer-events: none;
}

/* MODE CAOS EXTREM */
/* EL CAOS NOMÉS S'APLICA SI EXISTEIX LA CLASSE AL PARE */
.grid-canvas.tva-purge-chaos {
    animation: tva-purge-vibration 0.1s linear infinite !important;
    
    /* --- EL CANVI ÉS AQUÍ --- */
    /* Eliminem filter: invert(1) */
    /* Posem un fons vermell molt fosc per a l'efecte d'alerta */
    background-color: #200000 !important; 
    /* Fem que tot el text i icones tinguin una brillantor vermella */
    filter: drop-shadow(0 0 10px #ff0000) brightness(1.2) !important;
}

/* La quadrícula vermella NOMÉS apareix si la classe està activa */
.grid-canvas.tva-purge-chaos::after {
    content: "";
    position: fixed;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.2) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.2) 2px, transparent 2px);
    background-size: 80px 80px;
    z-index: 10000;
    animation: tva-grid-warp 0.6s linear infinite;
    pointer-events: none;
    display: block !important; /* Forcem que aparegui */
}

/* Quadrícula gegant distorsionada que apareix en Purge */
.tva-purge-chaos::after {
    content: "";
    position: fixed;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.2) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.2) 2px, transparent 2px);
    background-size: 80px 80px;
    z-index: 10000;
    animation: tva-grid-warp 0.6s linear infinite;
    pointer-events: none;
}

@keyframes tva-purge-vibration {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-8px, 4px); }
    50% { transform: translate(8px, -4px); }
    75% { transform: translate(-4px, -8px); }
    100% { transform: translate(0, 0); }
}

@keyframes tva-grid-warp {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(10deg) scale(1.1); }
}

.scramble-word {
    display: inline-block;
    animation: tva-text-chaos 0.2s linear infinite;
}

@keyframes tva-text-chaos {
    0% { transform: translate(2px, -2px); filter: blur(0px); }
    50% { transform: translate(-2px, 2px); filter: blur(1px); font-family: serif; }
    100% { transform: translate(0,0); }
}

.directory-app-layout { display: contents; }

.dir-list-column {
    grid-column: 19 / 33; /* Mateixa posició que les sessions de Tmux */
    grid-row: 1 / 14;
    margin-bottom: calc(var(--grid-size) * 0.5); /* Tall a 13.5 */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.dir-header {
    /* 1. Mantenim la teva estètica de posició */
    font-size: calc(var(--grid-size) * 0.5);
    color: var(--tva-gold);
    padding-top: calc(var(--grid-size) * 0.335);
    margin-bottom: 5px;
    margin-left: 5px;
    text-transform: uppercase;

    /* 2. Forcem que es quedi en una sola línia i es desbordi */
    display: block;             /* Res de flex, block pur */
    white-space: nowrap;        /* Prohibit saltar de línia */
    overflow: hidden;           /* El que no cap, s'amaga a la dreta */
    text-overflow: clip;        /* O 'ellipsis' si vols els puntets, però 'clip' simplement talla */
    
    /* 3. Seguretat visual */
    width: 100%;
    min-height: 1.2em;          /* Garanteix espai per a la font pixelada */
    visibility: visible !important; /* Evitem que cap herència el faci desaparèixer */
}

/* AMAGAR SCROLLBARS NOMÉS A LA DRETA DEL DIRECTORI */
.dir-list-column .sessions-container::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

.dir-list-column .sessions-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    touch-action: pan-y;
}

.dir-preview-column {
    grid-column: 3 / 17;
    /* Pugem de la 3 a la 1 (els 2 quadrats que demanaves) */
    grid-row: 1 / 13; 
    margin-bottom: -15px;
    display: flex;
    flex-direction: column;
    margin-top: calc(var(--grid-size) * 0.02); 
    margin-bottom: calc(var(--grid-size) * -0.9); 
}

/* Ajustem el títol perquè no quedi tapat pel logo si ara està massa amunt */
.dir-preview-column .preview-title {
    margin-top: calc(var(--grid-size) * -0.25); /* Mateix padding que el dir-header de la dreta */
    font-size: calc(var(--grid-size) * 0.5);
    color: var(--tva-gold);
    text-transform: uppercase;
}

/* Contenidor del text del fitxer */
#file-content-preview {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    line-height: 1.2;
    color: var(--tva-gold);
    white-space: pre; /* Manté el format original (columnes, espais) */
    margin: 0;
    padding: 10px;
    
    /* ACTIVEM ELS SLIDERS */
    overflow: auto; 
    display: block;
    max-height: 100%; /* No pot ser més alt que el seu pare */
    max-width: 100%;  /* No pot ser més ample que el seu pare */
}

/* Forcem que el pare (terminal-frame) tingui una mida fixa */
.dir-preview-column .terminal-frame {
    flex-grow: 1;
    /* Ocupem 13 unitats de grid per guanyar aquest quadrat extra */
    min-height: calc(var(--grid-size) * 9.4); 
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    position: relative;
    background: #000;
    border: 1px solid var(--tva-gold-dim);
    margin-top: -6.5px;
}

/* --- ESTIL DE LES BARRES DE DESPLAÇAMENT (Retro-style) --- */
#file-content-preview {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    line-height: 1.2;
    color: var(--tva-gold);
    white-space: pre; 
    margin: 0;
    padding: 12px;
    
    flex-grow: 1;
    display: block;
    overflow: auto; /* Permet el scroll */
    
    /* AMAGAR SCROLLBARS (Firefox) */
    scrollbar-width: none; 
    
    /* AMAGAR SCROLLBARS (Internet Explorer/Edge antic) */
    -ms-overflow-style: none; 
    
    scrollbar-width: thin;
    scrollbar-color: var(--tva-gold) transparent;
}

/* AMAGAR SCROLLBARS (Chrome, Safari, Edge modern) */
#file-content-preview::-webkit-scrollbar {
    width: 6px; /* Molt fineta */
}

#file-content-preview::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2); /* Fons gairebé invisible */
}

#file-content-preview::-webkit-scrollbar-thumb {
    background-color: var(--tva-gold); /* Taronja TVA */
    border-radius: 10px;
}

#file-content-preview::-webkit-scrollbar-thumb:hover {
    background: var(--tva-gold); /* S'il·lumina en passar el ratolí */
}

/* --- FIX SETTINGS MONITOR --- */

/* Forcem que la terminal de Settings no s'estiri infinitament */
.settings-preview-fix .terminal-frame {
    height: calc(var(--grid-size) * 10) !important; /* Fixem l'alçada exacta */
    margin-bottom: calc(var(--grid-size) * 0.5);   /* Espai per al títol inferior */
}

/* Corregim el títol inferior perquè no "floti" */
.settings-preview-fix .preview-metadata {
    margin-top: 0 !important;
    height: auto;
    display: block;
}#active-session-label {
    font-size: calc(var(--grid-size) * 0.5);
    color: var(--tva-gold);
    text-transform: uppercase;
    margin: 0;
    padding-top: 0px;
    border-top: 1px solid var(--tva-gold-dim); /* Línia subtil de tancament */
    width: 100%;
}

/* Assegurem que el text de sistema no es talli */
#settings-status {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-y: auto;
    height: 100%;
}

/* ========================================
   APPLICATION: SELECT PROGRAM (Grid View)
   ======================================== */

.programs-app-layout {
    display: contents;
}

/* PROGRAMS GRID WRAPPER & CONTAINER */
.programs-grid-wrapper {
    grid-column: 3 / 33;
    grid-row: 1 / 14;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(var(--grid-size) * 0.8);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgba(255, 157, 0, 0.01);
}

.programs-grid-wrapper::-webkit-scrollbar {
    width: 6px;
}

.programs-grid-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.programs-grid-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--tva-gold);
    border-radius: 3px;
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--grid-size) * -1);
    width: 100%;
    align-content: start;
    padding-right: calc(var(--grid-size) * 0.5);
}

/* PROGRAM ITEM (Grid cell) */
.program-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.15s ease, filter 0.15s ease;
    min-height: auto;
}

.program-item:active {
    transform: scale(0.95);
    filter: brightness(1.2);
}

.program-item:hover {
    filter: brightness(1.15);
}

.program-item img {
    height: calc(var(--grid-size) * 6);
    width: calc(var(--grid-size) * 6);
    object-fit: contain;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    filter: sepia(0.3) saturate(1.2) brightness(0.95);
    margin-bottom: 0;
}

.program-item span {
    font-size: calc(var(--grid-size) * 0.48);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tva-gold);
    text-align: center;
    line-height: 1.2;
    padding: 0 calc(var(--grid-size) * 0.2);
    max-width: calc(var(--grid-size) * 7);
    word-break: break-word;
    transform: scaleX(0.85);
    transform-origin: center;
    pointer-events: none;
    margin-top: calc(var(--grid-size) * -0.85);
}

/* PROGRAMS FOOTER */

/* ========================================
   APPLICATION: BATTERY
   ======================================== */

.battery-app-layout {
    grid-column: 3 / 26;
    grid-row: 1 / 15;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    z-index: 5;
}

.battery-app-layout .sessions-app-header {
    flex-shrink: 0;
}

.battery-app-layout .tva-divider-diagonals {
    flex-shrink: 0;
    margin-bottom: calc(var(--grid-size) * 0.6);
}

.battery-main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-size) * 0.55);
    min-height: 0;
    flex: 1;
}

.battery-gauge {
    width: 100%;
    height: calc(var(--grid-size) * 1.15);
    flex-shrink: 0;
    border: 1.5px solid var(--tva-gold);
    background: rgba(255, 121, 25, 0.06);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

#battery-bar-fill {
    height: 100%;
    width: 0%;
    background-color: var(--tva-gold);
    transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(255, 121, 25, 0.35);
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 4px,
        rgba(0, 0, 0, 0.22) 4px,
        rgba(0, 0, 0, 0.22) 8px
    );
}

.battery-readout-row {
    display: flex;
    align-items: stretch;
    gap: calc(var(--grid-size) * 0.6);
    min-height: 0;
    flex: 1;
}

.battery-pct-box {
    flex: 0 0 auto;
    width: calc(var(--grid-size) * 7.2);
    border: 1.5px solid var(--tva-gold);
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--grid-size) * 0.45);
    padding: calc(var(--grid-size) * 0.5);
    box-sizing: border-box;
}

.battery-pct-label {
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 0.38);
    color: var(--tva-gold-dim);
    letter-spacing: 1px;
    transform: scaleX(0.9);
}

#battery-percentage-value {
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 1.35);
    color: var(--tva-gold);
    line-height: 1.15;
    letter-spacing: 1px;
}

.battery-telemetry-panel {
    flex: 1;
    min-width: 0;
    border: 1.5px solid var(--tva-gold);
    background: rgba(255, 121, 25, 0.03);
    padding: calc(var(--grid-size) * 0.45) calc(var(--grid-size) * 0.55);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.battery-telemetry-title {
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 0.48);
    color: var(--tva-gold);
    text-transform: uppercase;
    transform: scaleX(0.88);
    transform-origin: left;
    letter-spacing: 0.5px;
    margin-bottom: calc(var(--grid-size) * 0.4);
    flex-shrink: 0;
}

.battery-telemetry-body {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: calc(var(--grid-size) * 0.12);
    flex: 1;
    min-height: 0;
}

.battery-telemetry-body .metadata-line {
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 0.4);
    color: var(--tva-gold);
    text-transform: uppercase;
    transform: scaleX(0.88);
    transform-origin: left;
    letter-spacing: 0.5px;
    line-height: 1.45;
}

.battery-telemetry-body .metadata-line span {
    font-weight: normal;
    color: var(--tva-gold);
}

#battery-status-label.is-charging {
    color: #1aff00;
}

.battery-telemetry-body .session-id {
    height: auto;
    margin: 0;
}

/* ========================================
   APP: TIME - 7 Segment Display Clock
   ======================================== */

/* Font set segments local (abans CDN fonts.cdnfonts.com) */
@font-face {
    font-family: 'Seven Segment';
    font-style: normal;
    font-weight: 400;
    font-display: block; /* no mostrar fallback mentre carrega */
    src: url('/static/fonts/SevenSegment.woff') format('woff');
}

/* Requadre hora: tota l’amplada i alçada útil, marge 3 files a tot arreu */
#tva-clock-app,
.tva-clock-app {
    grid-column: 4 / span 27;
    grid-row: 3 / span 11;
    justify-self: stretch;
    align-self: stretch;
    width: calc(var(--grid-size) * 27);
    height: calc(var(--grid-size) * 11);
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    display: block;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.tva-clock-screen {
    background: #050505;
    padding: 15px;
    border: 1px solid #444;
    position: relative;
    overflow: hidden;
}

.tva-clock-inner-border {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 3px solid var(--tva-gold);
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
}

.seven-segment {
    font-family: 'Seven Segment', sans-serif;
    color: var(--tva-gold);
    font-size: calc(var(--grid-size) * 10);
    line-height: 1;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Efecte de resplendor del fòsfor */
    text-shadow: 0 0 15px rgba(255, 174, 0, 0.5);
    visibility: hidden;
}

.seven-segment.is-font-ready {
    visibility: visible;
}

/* HH a l’esquerra del centre; MM a la dreta; ":" al mig de la pantalla */
.seven-hh,
.seven-mm {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
}

.seven-hh {
    right: 50%;
    padding-right: 0.14em;
    justify-content: flex-end;
}

.seven-mm {
    left: 50%;
    padding-left: 0.14em;
    justify-content: flex-start;
}

.seven-sep {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Amplada = dígit "0"; valor alineat a flex-end (afecta sobretot el "1") */
.seven-digit {
    display: inline-grid;
    justify-items: end;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.seven-digit-sizer {
    grid-area: 1 / 1;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.seven-digit-value {
    grid-area: 1 / 1;
    justify-self: end;
}


/* ========================================
   APP: MAP
   ======================================== */

/* El contenidor que envolta el mapa dins de la teva grid */
.map-app-layout {
    grid-column: 3 / span 30;
    grid-row: 2 / span 13;
    position: relative;
    display: block;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--tva-gold);
    background: #000;
    z-index: 1;
}

#tva-map-container {
    width: 100%;
    height: 500px;
    border: 1px solid var(--tva-gold);
    background: #1a1a1a;
    position: relative;
    z-index: 1;
    background-color: #000 !important;
}

.tva-map-style {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%) sepia(100%) saturate(300%) hue-rotate(-30deg);
}

@import url('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');

#tva-leaflet-map,
.tva-cubecat-frame {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    margin: 0;
    padding: 0;
    background: #000 !important;
}

#tva-leaflet-map {
    z-index: 2;
    opacity: 1;
}

.tva-cubecat-frame {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

/* Mode Cubecat: mapa Minecraft sense marcadors Leaflet */
.map-app-layout.is-cubecat #tva-leaflet-map {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.map-app-layout.is-cubecat .tva-cubecat-frame {
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
}

.map-interaction-notice {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    color: var(--tva-gold);
    font-family: monospace;
    background: rgba(0, 0, 0, 0.8);
    padding: 15px;
    border: 1px solid var(--tva-gold);
    pointer-events: none;
}

/* CALIBRATE: requadre 1.5 files, text 0.5, padding lateral 1, marge 0.5 DR */
.map-calibrate-btn {
    position: absolute;
    right: calc(var(--grid-size) * 0.5);
    bottom: calc(var(--grid-size) * 0.5);
    z-index: 25;
    height: calc(var(--grid-size) * 1.5);
    padding: 0 calc(var(--grid-size) * 1);
    margin: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tva-gold);
    background: rgba(0, 0, 0, 0.88);
    color: var(--tva-gold);
    font-family: 'Press Start 2P', monospace;
    font-size: calc(var(--grid-size) * 0.5);
    line-height: calc(var(--grid-size) * 0.5);
    letter-spacing: 0.5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.map-calibrate-btn:active {
    background: rgba(255, 121, 25, 0.2);
}

.map-app-layout.is-cubecat:not(.is-calibrating) .map-calibrate-btn {
    display: none;
}

.map-app-layout.is-calibrating .map-calibrate-btn {
    display: none;
}

/* Mode calibratge: overlay; esquerra Cubecat, dreta API (hit) */
.map-app-layout.is-calibrating #tva-leaflet-map {
    opacity: 0.48;
    pointer-events: none;
    z-index: 6;
}

.map-app-layout.is-calibrating .tva-cubecat-frame {
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
}

.map-calib-hit-right {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    z-index: 20;
    touch-action: none;
    cursor: grab;
    background: transparent;
}

.map-app-layout.is-calibrating .map-calib-hit-right {
    display: block;
}

.map-calib-hit-right:active {
    cursor: grabbing;
}

.map-calib-split-line {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    z-index: 21;
    pointer-events: none;
    background: rgba(255, 121, 25, 0.45);
}

.map-app-layout.is-calibrating .map-calib-split-line {
    display: block;
}

/* Vistes guardades: targetes 1 fila, marge 0.5, gap 0.25, max 7 files + scroll */
.map-calib-views {
    position: absolute;
    top: calc(var(--grid-size) * 0.5);
    left: calc(var(--grid-size) * 0.5);
    z-index: 28;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--grid-size) * 0.25);
    max-height: calc(var(--grid-size) * 7);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
}

.map-calib-views[hidden] {
    display: none !important;
}

.map-calib-view-card {
    pointer-events: auto;
    flex: 0 0 auto;
    height: var(--grid-size);
    min-height: var(--grid-size);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 calc(var(--grid-size) * 0.5);
    border: 1px solid var(--tva-gold);
    background: rgba(0, 0, 0, 0.88);
    color: var(--tva-gold);
    font-family: 'Press Start 2P', monospace;
    font-size: calc(var(--grid-size) * 0.35);
    line-height: 1;
    letter-spacing: 0.5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.map-calib-view-card:active {
    background: rgba(180, 40, 40, 0.45);
}

.map-calib-view-card.is-active {
    background: rgba(255, 121, 25, 0.35);
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--tva-gold);
}

.map-calibrate-bar {
    position: absolute;
    left: calc(var(--grid-size) * 0.5);
    right: calc(var(--grid-size) * 0.5);
    bottom: calc(var(--grid-size) * 0.5);
    z-index: 30;
    height: calc(var(--grid-size) * 1.5);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: calc(var(--grid-size) * 0.35);
    padding: 0 calc(var(--grid-size) * 0.5);
    border: 1px solid var(--tva-gold);
    background: rgba(0, 0, 0, 0.9);
    color: var(--tva-gold);
    font-family: 'Press Start 2P', monospace;
    font-size: calc(var(--grid-size) * 0.35);
    line-height: 1;
}

.map-calibrate-bar[hidden] {
    display: none !important;
}

.map-calibrate-hint {
    flex: 1 1 auto;
    min-width: 0;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-calibrate-bar button {
    flex: 0 0 auto;
    height: calc(var(--grid-size) * 1);
    min-width: calc(var(--grid-size) * 1.2);
    padding: 0 calc(var(--grid-size) * 0.35);
    border: 1px solid var(--tva-gold);
    background: transparent;
    color: var(--tva-gold);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

.map-calibrate-bar button.map-calibrate-saveview {
    background: rgba(255, 121, 25, 0.12);
}

.map-calibrate-bar button.map-calibrate-done {
    background: rgba(255, 121, 25, 0.25);
}

.map-calibrate-bar button:active {
    background: rgba(255, 121, 25, 0.35);
}

/* Filtre només a les rajoles Leaflet */
#tva-leaflet-map .leaflet-tile-pane {
    filter:
        grayscale(1)
        invert(1)
        brightness(5)
        contrast(1)
        sepia(100%)
        saturate(1000%)
        hue-rotate(10deg);
}

/* Creu d'ubicació: blanca */
.tva-map-cross-icon {
    background: transparent !important;
    border: none !important;
}

.tva-map-cross {
    position: relative;
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.tva-map-cross::before,
.tva-map-cross::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: #ffffff;
    transform: translate(-50%, -50%);
}

.tva-map-cross::before {
    width: 3px;
    height: 100%;
}

.tva-map-cross::after {
    width: 100%;
    height: 3px;
}

.tva-map-peer {
    position: relative;
    width: 22px;
    height: 22px;
}

.tva-map-peer-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 3px);
    transform: translateX(-50%);
    color: var(--tva-gold);
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    line-height: 1.2;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-shadow: 0 0 2px #000, 0 1px 2px #000;
    pointer-events: none;
}

/* Això ajuda a que el text del mapa no es vegi borrós */
.leaflet-tile-container {
    image-rendering: pixelated;
}

/* Això és clau: si les imatges estan "amagades", això les forçarà a veure's */
.leaflet-tile {
    visibility: visible !important;
}

/* Millorem les línies del mapa perquè es vegin més definides */
.leaflet-tile-container img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}


/* ========================================
   APP: DRAW
   ======================================== */

.tva-app-fullscreen {
    width: 100%;
    height: 100%;
    min-height: 1000px; /* Alçada mínima per assegurar-nos que es veu */
    min-width: 1000px;
    background: #000;
    position: relative;
    display: block;
    z-index: 9999;
    margin-left: calc(var(--grid-size) * -0.9);
    margin-top: calc(var(--grid-size) * 0.1);

}

#tva-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    touch-action: none; /* Evita que el mòbil faci scroll mentre dibuixes */
}

#clear-canvas {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: transparent;
    color: var(--tva-gold);
    border: 1px solid var(--tva-gold);
    padding: 5px 10px;
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    cursor: pointer;
    z-index: 10;
}

#clear-canvas:hover {
    background: var(--tva-gold);
    color: #000;
}

/* ========================================
   APPLICATION: PERSONNEL
   ======================================== */

.personnel-app-layout {
    display: contents;
}

.personnel-toolbar {
    grid-column: 3 / 34;
    grid-row: 1;
    height: var(--grid-size);
    max-height: var(--grid-size);
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: calc(var(--grid-size) * 0.45);
    padding: 0 calc(var(--grid-size) * 0.9);
    overflow: hidden;
}

.personnel-search {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: calc(var(--grid-size) * 0.28);
    color: var(--tva-gold);
    cursor: text;
    min-width: 0;
    flex: 1 1 auto;
    height: 100%;
}

.personnel-search-icon {
    width: calc(var(--grid-size) * 0.55);
    height: calc(var(--grid-size) * 0.55);
    color: var(--tva-gold);
    align-self: center;
}

.personnel-search-label {
    font-family: 'Press Start 2P', monospace;
    font-size: calc(var(--grid-size) * 0.3);
    letter-spacing: 1px;
    white-space: nowrap;
    line-height: 1;
    align-self: center;
}

.personnel-search-field {
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.personnel-search-field input {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    font-family: 'Press Start 2P', monospace;
    font-size: calc(var(--grid-size) * 0.3);
    letter-spacing: 0.5px;
    line-height: 1;
    border: none;
    border-bottom: 2px solid var(--tva-gold);
    border-radius: 0;
    /* Espai mínim sobre la barra: Press Start 2P baixa el glif */
    padding: 0 4px 6px;
    margin: 0;
    background: transparent;
    color: var(--tva-gold);
    caret-color: var(--tva-gold);
    outline: none;
}

.personnel-search-field input::-webkit-search-decoration,
.personnel-search-field input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.personnel-toolbar-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: calc(var(--grid-size) * 0.4);
    flex: 0 0 auto;
    margin-left: auto;
    height: 100%;
}

.personnel-source-btn,
.personnel-sort-btn {
    background: transparent;
    border: 1px solid var(--tva-gold);
    color: var(--tva-gold);
    font-family: 'Press Start 2P', monospace;
    font-size: calc(var(--grid-size) * 0.24);
    padding: 0 calc(var(--grid-size) * 0.32);
    height: 100%;
    line-height: 1;
    cursor: pointer;
    letter-spacing: 0.5px;
    white-space: nowrap;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.personnel-source-btn {
    min-width: 11ch;
}

.personnel-sort {
    display: flex;
    align-items: stretch;
    gap: calc(var(--grid-size) * 0.3);
    min-width: 0;
    height: 100%;
}

.personnel-sort-label {
    font-family: 'Press Start 2P', monospace;
    font-size: calc(var(--grid-size) * 0.24);
    color: var(--tva-gold);
    opacity: 0.85;
    white-space: nowrap;
    align-self: center;
}

.personnel-sort-btn {
    min-width: 7ch;
}

.personnel-source-btn:hover,
.personnel-sort-btn:hover {
    background: rgba(255, 157, 0, 0.15);
}

.personnel-source-btn:active,
.personnel-sort-btn:active {
    background: var(--tva-gold);
    color: #000;
}

.personnel-grid-scroll {
    grid-column: 3 / 34;
    grid-row: 3 / 17;
    align-self: start;
    width: 100%;
    height: calc(var(--grid-size) * 12.55);
    max-height: calc(var(--grid-size) * 12.55);
    min-height: 0;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 calc(var(--grid-size) * 0.9);
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.personnel-grid-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.personnel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--grid-size) * 0.7) calc(var(--grid-size) * 1.45);
    align-content: start;
    justify-items: center;
    padding: calc(var(--grid-size) * 0.55) calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.8);
}

.personnel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--grid-size) * 0.35);
    min-width: 0;
    width: 78%;
    /* Permet scroll vertical des de la foto/nom (no només els buits) */
    touch-action: pan-y;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Construcció de la graella: flotar amunt + fade-in (stagger JS) */
.personnel-card.is-anim-in,
.missions-list-column .session-entry.is-anim-in,
.missions-status-panel .session-entry.is-anim-in,
.program-item.is-anim-in,
.app-item.is-anim-in,
.sessions-container .session-entry.is-anim-in,
#file-list .session-entry.is-anim-in {
    animation: personnel-card-in 0.26s cubic-bezier(0.22, 0.82, 0.28, 1) both;
    will-change: opacity, transform;
}

@keyframes personnel-card-in {
    from {
        opacity: 0;
        transform: translateY(calc(var(--grid-size) * 0.65));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.personnel-card-empty {
    visibility: hidden;
    pointer-events: none;
}

.personnel-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--tva-gold);
    background: #0a0704;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
    -webkit-user-drag: none;
}

.personnel-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    filter: sepia(1) saturate(4) hue-rotate(-18deg) brightness(0.92) contrast(1.15);
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
    touch-action: pan-y;
}

.personnel-name {
    font-family: 'Press Start 2P', monospace;
    font-size: calc(var(--grid-size) * 0.26);
    color: var(--tva-gold);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.35;
    max-width: 100%;
    word-break: break-word;
    padding: 0 2px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.personnel-empty,
.personnel-status {
    font-family: 'Press Start 2P', monospace;
    font-size: calc(var(--grid-size) * 0.3);
    color: var(--tva-gold);
    text-align: center;
    padding: calc(var(--grid-size) * 1.2) 0;
    opacity: 0.85;
    letter-spacing: 1px;
}

.personnel-status[hidden],
.personnel-empty[hidden],
.personnel-detail[hidden],
.personnel-toolbar[hidden],
.personnel-grid-scroll[hidden] {
    display: none !important;
}

.personnel-card {
    cursor: pointer;
}

.personnel-card:hover .personnel-frame {
    filter: brightness(1.12);
}

.personnel-card:active {
    transform: scale(0.97);
}

/* ========================================
   PERSONNEL DETAIL DOSSIER
   ======================================== */

.personnel-detail {
    /* Deixem la darrera columna de la graella lliure */
    grid-column: 3 / 33;
    grid-row: 1 / 17;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    box-sizing: border-box;
    min-height: 0;
}

.personnel-dossier {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    box-sizing: border-box;
    border: none;
    min-height: 0;
    overflow: hidden;
    transform-origin: left center;
    will-change: opacity, transform;
}

/* Entrada des del selector (fons buit → dossier) */
.personnel-dossier.is-anim-enter-prep {
    opacity: 0;
    transform: translateY(calc(var(--grid-size) * 0.55)) scale(0.985);
}

.personnel-dossier.is-anim-enter {
    animation: dossier-enter 0.48s cubic-bezier(0.45, 0.05, 0.2, 1) both;
}

.personnel-dossier.is-anim-exit {
    animation: dossier-exit 0.42s cubic-bezier(0.55, 0.05, 0.35, 1) both;
    pointer-events: none;
}

@keyframes dossier-enter {
    from {
        opacity: 0;
        transform: translateY(calc(var(--grid-size) * 0.55)) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dossier-exit {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(calc(var(--grid-size) * 0.55)) scale(0.985);
    }
}

/* Canvi Discord ↔ Jugador: només difumina el text/contingut variable */
.personnel-dossier.is-anim-cross .dossier-name,
.personnel-dossier.is-anim-cross .dossier-status-badge,
.personnel-dossier.is-anim-cross .dossier-page-title,
.personnel-dossier.is-anim-cross .dossier-fields,
.personnel-dossier.is-anim-cross .sessions-container,
.personnel-dossier.is-anim-cross .dossier-photo-frame img {
    animation: dossier-cross-text 0.34s ease both;
}

@keyframes dossier-cross-text {
    0% { opacity: 1; }
    40% { opacity: 0.15; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .personnel-dossier.is-anim-enter-prep,
    .personnel-dossier.is-anim-enter,
    .personnel-dossier.is-anim-exit,
    .personnel-dossier.is-anim-cross .dossier-name,
    .personnel-dossier.is-anim-cross .dossier-status-badge,
    .personnel-dossier.is-anim-cross .dossier-page-title,
    .personnel-dossier.is-anim-cross .dossier-fields,
    .personnel-dossier.is-anim-cross .sessions-container,
    .personnel-dossier.is-anim-cross .dossier-photo-frame img,
    .personnel-card.is-anim-in,
    .missions-list-column .session-entry.is-anim-in,
    .missions-status-panel .session-entry.is-anim-in,
    .program-item.is-anim-in,
    .app-item.is-anim-in,
    .sessions-container .session-entry.is-anim-in,
    #file-list .session-entry.is-anim-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}


/* Requadre esquerre: sense vora dreta a les 3 primeres files (obert al STATUS);
   la línia dreta es dibuixa des de la 3a fila fins baix amb ::after */
.dossier-profile {
    width: fit-content;
    max-width: none;
    /* Exactament 13 files d'alt (voreres incloses) */
    height: calc(var(--grid-size) * 13);
    min-height: calc(var(--grid-size) * 13);
    max-height: calc(var(--grid-size) * 13);
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 2px solid var(--tva-gold);
    border-right: none;
    position: relative;
    padding: var(--grid-size);
    margin-top: var(--grid-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* 1 fila entre imatge i nom → sota la foto: gap + nom + padding = 3 files */
    gap: var(--grid-size);
    background-color: rgba(255, 157, 0, 0.02);
    min-width: 0;
    overflow: hidden;
}

.dossier-profile::after {
    content: '';
    position: absolute;
    top: calc(var(--grid-size) * 3 - 3.5px);
    right: 0;
    bottom: 0;
    width: 0;
    border-right: 2px solid var(--tva-gold);
    pointer-events: none;
    z-index: 2;
}

.dossier-photo-frame {
    width: calc(var(--grid-size) * 9);
    height: calc(var(--grid-size) * 9);
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    border: 1px solid var(--tva-gold);
    background: #0a0704;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.dossier-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: pixelated;
    filter: sepia(1) saturate(4) hue-rotate(-18deg) brightness(0.92) contrast(1.15);
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.dossier-name {
    flex: 0 0 auto;
    width: calc(var(--grid-size) * 9);
    max-width: calc(var(--grid-size) * 9);
    height: var(--grid-size);
    min-height: var(--grid-size);
    max-height: var(--grid-size);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    border: none;
    font-family: 'Press Start 2P', monospace;
    font-size: var(--grid-size);
    color: var(--tva-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    word-break: normal;
}

.dossier-right {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    /* Mateixa alçada que .dossier-profile: 13 files */
    height: calc(var(--grid-size) * 13);
    min-height: calc(var(--grid-size) * 13);
    max-height: calc(var(--grid-size) * 13);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    border: none;
    gap: 0;
    /* Mateix marge superior que el requadre d'imatge → enganxat a dalt a la dreta */
    margin-top: var(--grid-size);
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
}

.dossier-status {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: calc(var(--grid-size) * 0.35);
    width: auto;
    max-width: 100%;
    margin-right: var(--grid-size);
    height: calc(var(--grid-size) * 3);
    min-height: calc(var(--grid-size) * 3);
    max-height: calc(var(--grid-size) * 3);
    padding: 0 calc(var(--grid-size) * 0.45) 0 0;
    box-sizing: border-box;
    border: 2px solid var(--tva-gold);
    border-left: none;
    background-color: rgba(255, 157, 0, 0.02);
    min-width: 0;
    flex: 0 0 auto;
    align-self: stretch;
}

.dossier-status-label {
    font-family: 'Press Start 2P', monospace;
    font-size: var(--grid-size);
    color: var(--tva-gold);
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
    /* Mitja fila des de la vora del requadre (només el text) */
    margin-left: var(--grid-size);
    /* Correcció òptica Press Start 2P: +3px amunt / -3px avall */
    padding-top: 3px;
    margin-bottom: -3px;
    box-sizing: border-box;
}

.dossier-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: var(--grid-size);
    letter-spacing: 1px;
    line-height: 1;
    /* 2 files; text 1 fila; +3px amunt / -3px avall (mateix que STATUS) */
    height: calc(var(--grid-size) * 2);
    min-height: calc(var(--grid-size) * 2);
    max-height: calc(var(--grid-size) * 2);
    padding: calc(var(--grid-size) * 0.5 + 3px) calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5 - 3px);
    box-sizing: border-box;
    background: var(--tva-gold);
    color: #0a0704;
    text-transform: uppercase;
    max-width: 100%;
    white-space: nowrap;
}

.dossier-tabs {
    flex: 1 1 auto;
    min-height: 0;
    width: auto;
    max-width: 100%;
    margin-top: 0;
    margin-left: var(--grid-size);
    margin-right: var(--grid-size);
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    overflow: hidden;
    position: relative;
}

.dossier-tabs[hidden] {
    display: none !important;
}

/* Barra fixa: flex-end de la fila just sota el títol */
.dossier-tabs-divider {
    position: absolute;
    /* 1 sobre + 1 títol + 1 fila sota − alçada barra (0.5) → enganxada al final d'aquesta fila */
    top: calc(var(--grid-size) * 2.5);
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    z-index: 3;
    pointer-events: none;
}

.dossier-tab-viewport {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    position: relative;
}

.dossier-tab-viewport.is-swiping-tabs,
.dossier-tab-viewport.is-swiping-tabs .dossier-fields,
.dossier-tab-viewport.is-swiping-tabs .sessions-container {
    touch-action: none;
}

.dossier-tab-track {
    display: flex;
    flex-direction: row;
    width: 200%;
    height: 100%;
    transform: translateX(0%);
    will-change: transform;
}

.dossier-tab-track.is-animating {
    transition: transform 0.32s cubic-bezier(0.45, 0.05, 0.2, 1);
}

.dossier-tab-page {
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-right: 1px;
}

.dossier-role-edit-panel {
    flex: 1 1 auto;
    min-height: 0;
    width: auto;
    max-width: 100%;
    margin-top: var(--grid-size);
    margin-left: var(--grid-size);
    margin-right: var(--grid-size);
    display: flex;
    flex-direction: column;
    align-self: stretch;
    overflow: hidden;
    padding-top: 0;
    box-sizing: border-box;
}

.dossier-role-edit-panel[hidden] {
    display: none !important;
}

.dossier-right.is-role-editing .dossier-tabs,
.dossier-right.is-role-editing .dossier-tabs-divider {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.dossier-role-edit-panel .sessions-container {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dossier-role-edit-panel .sessions-container::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

.dossier-page-title {
    flex: 0 0 auto;
    width: 100%;
    height: var(--grid-size);
    min-height: var(--grid-size);
    max-height: var(--grid-size);
    margin-top: var(--grid-size);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Press Start 2P', monospace;
    font-size: var(--grid-size);
    line-height: 1;
    letter-spacing: 1px;
    color: var(--tva-gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Correcció òptica Press Start 2P (com STATUS) */
    padding-top: 3px;
    box-sizing: border-box;
}

/* Fila just sota el títol (la barra va al flex-end d'aquesta fila) + mitja fila fins al contingut */
.dossier-page-divider-slot {
    flex: 0 0 auto;
    width: 100%;
    height: var(--grid-size);
    margin: 0 0 calc(var(--grid-size) * 0.5) 0;
    visibility: hidden;
    pointer-events: none;
}

.dossier-fields {
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-size) * 0.45);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-y;
}

.dossier-fields::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

.dossier-row {
    display: grid;
    grid-template-columns: calc(var(--grid-size) * 5.5) 1fr;
    align-items: baseline;
    gap: calc(var(--grid-size) * 0.4);
    min-width: 0;
    font-family: 'Press Start 2P', monospace;
    font-size: calc(var(--grid-size) * 0.36);
    color: var(--tva-gold);
    letter-spacing: 0.5px;
    line-height: 1.35;
}

.dossier-key {
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dossier-val {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dossier-val.is-null {
    opacity: 0.45;
}

.dossier-linked-btn {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}

.dossier-linked-btn:hover,
.dossier-linked-btn:focus-visible {
    color: #fff;
    outline: none;
}

.dossier-linked-false {
    opacity: 0.55;
}

.dossier-ip-mask {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(var(--grid-size) * 7);
    min-width: calc(var(--grid-size) * 7);
    max-width: calc(var(--grid-size) * 7);
    margin: 0;
    padding: calc(var(--grid-size) * 0.12) calc(var(--grid-size) * 0.28);
    border: 1px solid rgba(255, 157, 0, 0.45);
    background: rgba(255, 121, 25, 0.28);
    box-sizing: border-box;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    line-height: 1.3;
    vertical-align: baseline;
    overflow: hidden;
}

.dossier-ip-mask-text {
    color: transparent;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dossier-ip-mask.is-revealed {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.dossier-ip-mask.is-revealed .dossier-ip-mask-text {
    color: var(--tva-gold);
    user-select: text;
}

.dossier-ip-mask.is-revealed .dossier-ip-mask-text.is-null-text {
    opacity: 0.45;
}

.dossier-ip-mask.is-copied {
    outline: 1px solid var(--tva-gold);
}

.dossier-tab-page .sessions-container {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dossier-tab-page .sessions-container::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

.dossier-tab-page .session-entry {
    cursor: default;
}

.dossier-tab-page .session-entry.role-add-btn {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Mateixa mida tipogràfica / alçada que la resta de contenidors de rol */
    font-size: calc(var(--grid-size) * 0.55);
    letter-spacing: 0;
    line-height: 1;
    padding: 12px 0;
    box-sizing: border-box;
    /* Color apagat com el text de l'ACTION LIST (abans de CLEAR CACHE) */
    color: var(--tva-gold-dim);
    border-color: var(--tva-gold-dim);
    background: transparent;
}

.dossier-tab-page .session-entry.role-add-btn:hover,
.dossier-tab-page .session-entry.role-add-btn:active,
.dossier-tab-page .session-entry.role-add-btn:focus {
    color: var(--tva-gold-dim);
    border-color: var(--tva-gold-dim);
    background: transparent;
    box-shadow: none;
    filter: none;
}

/* Editor de rols: actiu = fons taronja; inactiu = fons fosc. Sense :hover/:active. */
.dossier-role-edit-panel .session-entry.role-edit-item {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: none;
    filter: none;
    box-shadow: none;
}

.dossier-role-edit-panel .session-entry.role-edit-item.is-active,
.dossier-role-edit-panel .session-entry.role-edit-item.is-active:hover,
.dossier-role-edit-panel .session-entry.role-edit-item.is-active:active,
.dossier-role-edit-panel .session-entry.role-edit-item.is-active:focus {
    background-color: var(--tva-gold) !important;
    color: var(--tva-bg) !important;
    opacity: 1;
    box-shadow: none !important;
    filter: none !important;
}

.dossier-role-edit-panel .session-entry.role-edit-item:not(.is-active),
.dossier-role-edit-panel .session-entry.role-edit-item:not(.is-active):hover,
.dossier-role-edit-panel .session-entry.role-edit-item:not(.is-active):active,
.dossier-role-edit-panel .session-entry.role-edit-item:not(.is-active):focus {
    background-color: rgba(0, 0, 0, 0.55) !important;
    color: var(--tva-gold) !important;
    opacity: 1;
    box-shadow: none !important;
    filter: none !important;
}

.dossier-status-badge.is-save-action {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dossier-status-badge.is-saving {
    opacity: 0.55;
    pointer-events: none;
}

/* --- MISSIONS APPLICATION --- */
/* Escenari retallat: cols 1-2 i 33 queden lliures (botons / logo) */
.missions-app-layout {
    grid-column: 3 / 33; /* columnes 3..32 */
    grid-row: 1 / 16;
    display: grid;
    grid-template-columns: repeat(30, var(--grid-size));
    grid-template-rows: repeat(15, var(--grid-size));
    overflow: hidden;
    min-height: 0;
    z-index: 20;
    pointer-events: none;
}

.missions-preview-column,
.missions-list-column,
.missions-status-panel {
    pointer-events: auto;
    transition:
        transform 0.5s cubic-bezier(0.45, 0.05, 0.2, 1),
        opacity 0.4s ease;
    will-change: transform, opacity;
}

.missions-status-panel {
    grid-column: 1 / 15; /* 14 columnes dins l'escenari */
    grid-row: 2 / 15;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    overflow: hidden;
    z-index: 21;
    pointer-events: none;
    opacity: 0;
    transform: translateX(calc(var(--grid-size) * -16));
}

.missions-status-panel[hidden] {
    display: none !important;
}

.grid-canvas.missions-status-mode .missions-status-panel {
    display: flex !important;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.grid-canvas.missions-status-mode .missions-list-column {
    transform: translateX(calc(var(--grid-size) * 16));
    opacity: 0;
    pointer-events: none;
}

.grid-canvas.missions-status-mode .missions-preview-column {
    transform: translateX(calc(var(--grid-size) * 15));
    z-index: 22;
}

.missions-status-panel .sessions-app-header,
.missions-status-header {
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    transform: none;
}

.missions-status-header .header-text {
    transform: scaleX(0.8);
    transform-origin: left;
}

.missions-status-save {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--tva-gold);
    font: inherit;
    font-size: calc(var(--grid-size) * 0.55);
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transform: scaleX(0.85);
    transform-origin: right;
}

.missions-status-save[hidden] {
    display: none !important;
}

.missions-status-save.is-saving {
    opacity: 0.55;
    pointer-events: none;
    text-decoration: none;
}

.missions-status-panel .sessions-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    touch-action: pan-y;
    width: 100%;
}

.missions-status-panel .sessions-container::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

.missions-status-panel .session-entry.mission-tag-item {
    cursor: pointer;
    user-select: none;
    transition: none;
    filter: none;
    box-shadow: none;
}

.missions-status-panel .session-entry.mission-tag-item.is-active,
.missions-status-panel .session-entry.mission-tag-item.is-active:hover,
.missions-status-panel .session-entry.mission-tag-item.is-active:active,
.missions-status-panel .session-entry.mission-tag-item.is-active:focus {
    background-color: var(--tva-gold) !important;
    color: var(--tva-bg) !important;
    opacity: 1;
    box-shadow: none !important;
    filter: none !important;
}

.missions-status-panel .session-entry.mission-tag-item:not(.is-active),
.missions-status-panel .session-entry.mission-tag-item:not(.is-active):hover,
.missions-status-panel .session-entry.mission-tag-item:not(.is-active):active,
.missions-status-panel .session-entry.mission-tag-item:not(.is-active):focus {
    background-color: rgba(0, 0, 0, 0.55) !important;
    color: var(--tva-gold) !important;
    opacity: 1;
    box-shadow: none !important;
    filter: none !important;
}

.missions-preview-column {
    grid-column: 1 / 15; /* 14 columnes */
    grid-row: 2 / 15;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    z-index: 20;
    pointer-events: auto;
}

.missions-preview-frame {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid var(--tva-gold);
    background-color: rgba(255, 157, 0, 0.02);
    /* Marge 1 fila a banda i banda (+ superior ja cobert pel spacer) */
    padding-top: 0;
    padding-left: var(--grid-size);
    padding-right: var(--grid-size);
    padding-bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.missions-preview-body {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.missions-preview-body::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

.missions-preview-body[hidden] {
    display: none !important;
}

.missions-preview-spacer {
    flex: 0 0 var(--grid-size);
    height: var(--grid-size);
    width: 100%;
}

.missions-preview-title {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    color: var(--tva-gold);
    font-size: calc(var(--grid-size) * 0.7);
    letter-spacing: 1.5px;
    line-height: var(--grid-size);
    min-height: var(--grid-size);
    text-transform: uppercase;
    word-break: break-word;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.missions-chat-frame {
    flex: 0 0 calc(var(--grid-size) * 5);
    height: calc(var(--grid-size) * 5);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--tva-gold-dim);
    background: #000;
    padding: 4px 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#missions-chat-terminal {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    line-height: 1.25;
    color: var(--tva-gold);
    opacity: 0.9;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#missions-chat-terminal::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

.missions-published-at {
    flex: 0 0 var(--grid-size);
    height: var(--grid-size);
    width: 100%;
    box-sizing: border-box;
    margin-top: var(--grid-size);
    margin-bottom: var(--grid-size);
    color: var(--tva-gold);
    font-size: calc(var(--grid-size) * 0.7);
    letter-spacing: 1.5px;
    line-height: var(--grid-size);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0.9;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.missions-published-at:empty {
    display: none;
    margin: 0;
    height: 0;
}

.missions-speakers-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--grid-size) * 0.55) calc(var(--grid-size) * 0.7);
    align-content: start;
    justify-items: center;
    padding: 0 0 calc(var(--grid-size) * 0.5);
    width: 100%;
    touch-action: pan-y;
}

.missions-speakers-grid .personnel-card {
    width: 88%;
    cursor: pointer;
    pointer-events: auto;
    touch-action: pan-y;
}

.missions-list-column {
    grid-column: 16 / 31; /* 15 columnes dins l'escenari (equiv. canvas 18-32) */
    grid-row: 2 / 15;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    overflow: hidden;
    z-index: 20;
    pointer-events: auto;
}

.grid-canvas.missions-status-mode .missions-list-column {
    pointer-events: none;
}

.missions-list-column .sessions-app-header {
    padding-top: 0;
}

.missions-list-column .sessions-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    touch-action: pan-y;
    max-height: 100%;
}

.missions-list-column .sessions-container::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

.missions-list-column .session-entry {
    cursor: pointer;
    padding-left: calc(var(--grid-size) * 0.5);
    padding-right: calc(var(--grid-size) * 0.5);
    box-sizing: border-box;
}

.missions-list-column .session-entry.is-placeholder {
    cursor: default;
}

.missions-list-column .session-entry.is-archived,
.missions-list-column .session-entry.missions-load-more {
    color: var(--tva-gold-dim);
    border-color: var(--tva-gold-dim);
}

.missions-list-column .session-entry.is-archived:hover,
.missions-list-column .session-entry.is-archived.active,
.missions-list-column .session-entry.missions-load-more:hover,
.missions-list-column .session-entry.missions-load-more:active {
    background-color: var(--tva-gold-dim);
    color: var(--tva-bg);
    box-shadow: none;
}

.missions-list-column .session-entry.missions-load-more.is-busy {
    pointer-events: none;
    opacity: 0.7;
}

/* ========================================
   APPLICATION: BRANCH (monitor TVA)
   ======================================== */

.branch-app-layout {
    display: contents;
}

/* Marges: 2 cols esquerra (botons), 1 dreta, 1 fila dalt/baix */
.branch-monitor {
    grid-column: 3 / 33;
    grid-row: 2 / 16;
    box-sizing: border-box;
    border: 2px solid var(--tva-gold);
    background-color: rgba(255, 157, 0, 0.02);
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    z-index: 20;
    pointer-events: auto;
}

/* Capa SVG: ona + agulla (clip dinàmic per sobre l'ona) */
.branch-scope-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}

.branch-wave-path {
    stroke: #ffffff;
    stroke-width: 1.35;
    stroke-linecap: butt;
    stroke-linejoin: round;
    fill: none;
}

.branch-needle-line {
    stroke: var(--tva-gold);
    stroke-width: 5;
    stroke-linecap: butt;
}

/* Dues primeres files: marquee REDLIGHT IMMINENT (color = franja vermella) */
.branch-redlight {
    --branch-alert: #8b1414;
    --branch-redlight-duration: 22s; /* ajusta velocitat aquí */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--grid-size) * 2);
    display: flex;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 4;
    pointer-events: none;
    color: var(--branch-alert);
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 0.5);
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Ocult mentre no hi hagi .is-active (≥75% RAM) */
.branch-redlight:not(.is-active) {
    visibility: hidden;
}

.branch-redlight-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    animation: branch-redlight-marquee var(--branch-redlight-duration) linear infinite;
}

.branch-redlight-seq {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.branch-redlight-seq span {
    flex: 0 0 auto;
    margin-right: calc(var(--grid-size) * 3.5); /* gap 3.5 columnes */
}

@keyframes branch-redlight-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .branch-redlight-track {
        animation: none;
    }
}

/* 3a fila des de dalt del contenidor */
.branch-red-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--grid-size) * 2 - 2px);
    height: var(--grid-size);
    background: #8b1414;
    z-index: 1;
    pointer-events: none;
}

/*
 * RAM: després de la franja vermella
 * - marge superior 1 fila
 * - text 1.5 files (flex-end → base del glif a baix de la 2a fila + mitja)
 * - marge esquerre 1 fila
 */
.branch-ram {
    position: absolute;
    left: var(--grid-size);
    /* Pujat un quart i mig de fila, després baixat 2px */
    top: calc(var(--grid-size) * 3.625);
    height: calc(var(--grid-size) * 1.5);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    z-index: 2;
    pointer-events: none;
    color: var(--tva-gold);
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 1.5);
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    transform: scaleX(0.86);
    transform-origin: left bottom;
}

/* Just sota els números RAM: 3/4 de fila d'alt, enganxat al baix de la fila */
.branch-ram-units {
    position: absolute;
    left: var(--grid-size);
    top: calc(var(--grid-size) * 5.125 - 2px);
    height: var(--grid-size);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    z-index: 2;
    pointer-events: none;
    color: var(--tva-gold);
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 0.75);
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    transform: scaleX(0.86);
    transform-origin: left bottom;
}

/* Fila immediatament sota l'ona (4a fila des de baix), + mitja fila avall */
.branch-axis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--grid-size) * 2.5 + 2px);
    height: var(--grid-size);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    z-index: 2;
    pointer-events: none;
    color: var(--tva-gold);
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 0.42);
    letter-spacing: 0.5px;
    line-height: 1;
}

.branch-axis-group {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--grid-size);
}

.branch-axis-group.is-start {
    justify-content: flex-start;
    padding-left: var(--grid-size);
}

.branch-axis-group.is-center {
    justify-content: center;
}

.branch-axis-group.is-end {
    justify-content: flex-end;
    padding-right: var(--grid-size);
}

/* 2a fila des de baix: TIMELINE MAG */
.branch-timeline-mag,
.branch-timeline-segment {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--grid-size);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: calc(var(--grid-size) * 0.25);
    box-sizing: border-box;
    margin: 0;
    z-index: 2;
    pointer-events: none;
    color: #ffffff;
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 0.5);
    line-height: 1;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.branch-timeline-mag {
    bottom: var(--grid-size);
}

/* 1a fila des de baix: TIMELINE SEGMENT */
.branch-timeline-segment {
    bottom: 0;
}

.branch-axis-group span {
    flex: 0 0 auto;
}

/* ========================================
   OPTIONS APP (login gate + users)
   ======================================== */

.options-app-layout {
    display: contents;
}

/*
 * LOGIN GATE:
 * - interior (terminal-frame): −1 fila (10 en lloc de 11)
 * - exterior (preview-inner-border + ACCESS CONTROL): +1 fila a baix
 */
.options-app-layout .timedoor-preview-column .terminal-frame {
    height: calc(var(--grid-size) * 10);
    max-height: calc(var(--grid-size) * 10);
    flex-grow: 0;
}

.options-app-layout .timedoor-preview-column .preview-inner-border {
    /* padding base 0.5 + 1 fila extra + espai metadata (+ mitja fila restaurada) */
    padding-bottom: calc(var(--grid-size) * 3);
}

.options-app-layout .timedoor-preview-column .preview-inner-border::after {
    /* Que el requadre daurat cobreixi també el padding inferior */
    height: auto;
    bottom: 0;
}

/* ACCESS CONTROL: inferior esquerra, mitja fila de marge (lletra = #active-session-label) */
.options-app-layout .preview-metadata-tmux {
    position: absolute;
    left: calc(var(--grid-size) * 0.5);
    bottom: calc(var(--grid-size) * 0.5);
    margin: 0;
    height: auto;
    justify-content: flex-end;
    align-items: flex-start;
    transform: scaleX(0.8);
    transform-origin: left bottom;
    overflow: visible;
}

.options-app-layout .preview-metadata-tmux #active-session-label {
    margin: 0;
    padding: 0;
    border-top: none;
    width: auto;
    text-align: left;
}

/* ENABLED/DISABLED: colors tmux active/broken, sense flicker */
#options-login-label {
    transition: color 0.3s ease;
}

#options-login-label.status-active {
    color: #1aff00;
}

#options-login-label.status-broken {
    color: rgb(255, 51, 0);
    animation: none;
}

.options-app-layout #options-actions {
    flex: 0 0 auto;
    overflow: visible;
}

/* USERS: mitja fila de marge just sobre el títol */
.options-app-layout .options-users-header {
    flex: 0 0 auto;
    margin-top: calc(var(--grid-size) * 0.5);
    padding-top: 0;
}

.options-app-layout #options-users-list {
    flex: 1 1 0;
}

.options-app-layout #options-users-list .options-create-user-btn {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--grid-size) * 0.55);
    letter-spacing: 0;
    line-height: 1;
    padding: 12px 0;
    box-sizing: border-box;
    color: var(--tva-gold-dim);
    border-color: var(--tva-gold-dim);
    background: transparent;
}

.options-app-layout #options-users-list .options-create-user-btn:hover,
.options-app-layout #options-users-list .options-create-user-btn:active,
.options-app-layout #options-users-list .options-create-user-btn:focus {
    color: var(--tva-gold-dim);
    border-color: var(--tva-gold-dim);
    background: transparent;
    box-shadow: none;
    filter: none;
}

.options-app-layout .options-users-empty {
    opacity: 0.7;
    pointer-events: none;
    cursor: default;
}

.options-user-avatar {
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 3);
    color: var(--tva-gold);
    letter-spacing: 0;
    position: relative;
}

.options-user-avatar #options-user-initial {
    line-height: 1;
    transform: translateY(2px);
}

.options-user-avatar.has-qr #options-user-initial {
    display: none;
}

.options-user-qr,
.dossier-photo-frame img.options-user-qr {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    background: transparent;
    filter: none;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.dossier-status-badge.is-online {
    background: var(--tva-gold);
    color: #0a0704;
}

.dossier-status-badge.is-offline {
    background: transparent;
    color: var(--tva-gold);
    border: 1px solid var(--tva-gold);
    box-sizing: border-box;
}

.dossier-status-badge.is-pending {
    background: transparent;
    color: var(--tva-gold);
    border: 1px solid var(--tva-gold);
    box-sizing: border-box;
}

.options-create-fields {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.options-create-modal-title {
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.options-create-username {
    width: min(100%, calc(var(--grid-size) * 18));
    height: calc(var(--grid-size) * 1.5);
    min-height: calc(var(--grid-size) * 1.5);
    max-height: calc(var(--grid-size) * 1.5);
    box-sizing: border-box;
    border: 1.5px solid var(--tva-gold);
    background: transparent;
    color: var(--tva-gold);
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 0.45);
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.options-create-username::placeholder {
    color: var(--tva-gold-dim);
}

.options-create-label {
    text-transform: none;
}

.options-create-error {
    margin-top: 6px;
    margin-bottom: 0;
    min-height: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 0.35);
    color: #ff3300;
    text-align: center;
    display: none;
}

.options-create-error.is-visible {
    display: block;
    margin-bottom: 4px;
}

.options-create-modal-buttons {
    margin-top: 8px;
}

/* DELETE usuari: inferior dreta, 2 files alt, 2 files marge */
.options-user-detail {
    position: relative;
}

.options-user-delete-btn {
    position: absolute;
    right: calc(var(--grid-size) * 1);
    bottom: calc(var(--grid-size) * 2);
    z-index: 6;
    width: calc(var(--grid-size) * 6);
    min-width: calc(var(--grid-size) * 6);
    max-width: calc(var(--grid-size) * 6);
    height: calc(var(--grid-size) * 2);
    min-height: calc(var(--grid-size) * 2);
    max-height: calc(var(--grid-size) * 2);
    padding: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgb(255, 51, 0);
    background: transparent;
    color: rgb(255, 51, 0);
    font-family: 'Press Start 2P', cursive;
    font-size: calc(var(--grid-size) * 0.45);
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}

.options-user-delete-btn:hover,
.options-user-delete-btn:active {
    background-color: rgb(255, 51, 0);
    color: #0a0704;
    box-shadow: 0 0 15px rgba(255, 51, 0, 0.55);
}