@import url('./icons.css');

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

/* Every DxPopup editor in the app sets an explicit Width (e.g. 620px) for a comfortable desktop
   form layout. DevExpress's built-in mobile adaptivity only auto-shrinks the width when NO Width
   is set — an explicit Width forces "dxbl-popup-fixed-width", which stays fixed at that pixel
   value even when it's wider than the viewport (the popup gets centered on its full desktop
   width and the right side, including the Save button, ends up off-screen). Cap it back down to
   the viewport on narrow screens, for every popup, without touching each component's Width. */
@media (max-width: 640px) {
    .dxbl-popup.dxbl-popup-fixed-width {
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
    }
}

.text-danger {
    color: var(--dxds-color-content-danger-default-rest);
}

.alert {
    border: 1px solid var(--dxds-color-border-transparent-rest);
    border-radius: .25rem;
    margin-bottom: 1rem;
    padding: .75rem 1.25rem;
    position: relative;
}

.alert-danger {
    background-color: var(--dxds-color-surface-danger-subdued-rest);
    border-color: var(--dxds-color-border-danger-default-rest);
    color: var(--dxds-color-content-danger-default-rest);
}

.alert-warning {
    background-color: var(--dxds-color-surface-warning-subdued-rest);
    border-color: var(--dxds-color-border-warning-default-rest);
    color: var(--dxds-color-content-warning-default-rest);
}

.alert-success {
    background-color: var(--dxds-color-surface-success-subdued-rest);
    border-color: var(--dxds-color-border-success-default-rest);
    color: var(--dxds-color-content-success-default-rest);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dxds-color-border-success-default-rest);
}

.invalid {
    outline: 1px solid var(--dxds-color-border-danger-default-rest);
}

.validation-message {
    color: var(--dxds-color-content-danger-default-rest);
}

.button-link {
    text-decoration: unset;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.title.title-secondary {
    padding: 0.313rem 0 0;
    color: var(--dxds-color-content-secondary-default-rest);
}

.title-header-text {
    font-size: var(--dxds-font-size-headline-lg);
    font-weight: var(--dxds-font-weight-headline-default);
    letter-spacing: var(--dxds-letter-spacing-headline-lg);
    line-height: var(--dxds-line-height-headline-lg);
}

.title-content-text {
    font-size: var(--dxds-font-size-base-lg);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-lg);
    line-height: var(--dxds-line-height-base-lg);
}

.main-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.block-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    height: auto;
    max-width: 100%;
    width: 31.25rem;
}

.or {
    align-items: center;
    display: flex;
    flex-direction: row;
    padding: 0.3125rem 0;
}

.or .or-line {
    opacity: 0.2;
    width: 100%;
    border-bottom: 1px solid var(--dxds-color-content-neutral-default-rest);
}

.or .or-text {
    padding: 0 0.625rem 0 0.625rem;
    font-size: var(--dxds-font-size-caption-md);
    line-height: var(--dxds-line-height-caption-md);
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.links-container {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.links-container .dot {
    border-radius: 50%;
    height: 0.3125rem;
    margin: 0 0.1875rem;
    opacity: 0.7;
    width: 0.3125rem;
    background-color: var(--dxds-color-surface-neutral-default-rest);
}

.manage-layout {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.info-message {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0.625rem 1rem 0.625rem 1rem;
    position: relative;
    background: var(--dxds-color-surface-info-subdued-rest);
}

.info-message.info-panel {
    margin-bottom: 0.625rem;
}

.manage-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.large-input {
    font-size: 1.875rem;
    height: 4.3125rem;
}

.title-content-text-secondary {
    font-size: var(--dxds-font-size-title-md);
    line-height: var(--dxds-line-height-title-md);
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

.confirm-button {
    margin-top: 0.3125rem;
}

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}

@media (max-width: 768px) {
    .display-desktop {
        display: none;
    }

    .display-mobile {
        display: block;
    }
}

/* ── Calendar page ────────────────────────────────────────────────────── */
.cal-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.75rem;
}

.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.cal-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cal-week-label {
    font-weight: 600;
    font-size: 1rem;
    padding-left: 0.5rem;
}

.cal-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cal-scheduler {
    flex: 1;
    min-height: 0;
}

.cal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--dxds-color-content-secondary-default-rest);
}

/* ── Llegenda de tipus d'event ──────────────────────────────────────────────
   Punt de color + nom (com a la llista «Avui a la graella» del tauler): ocupa poc i
   cap en una sola línia també al mòbil. */
.cal-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
}

.legend-item {
    align-items: center;
    color: var(--ra-ink-muted);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 500;
    gap: 0.4rem;
    white-space: nowrap;
}

.legend-item::before {
    background: var(--legend-color);
    border-radius: 50%;
    content: "";
    height: 0.6rem;
    width: 0.6rem;
}

/* Tipus d'event: colors de senyal a senyal.css (--ra-event-*) */
.legend-live     { --legend-color: var(--ra-event-live); }
.legend-recorded { --legend-color: var(--ra-event-recorded); }
.legend-pending  { --legend-color: var(--ra-event-pending); }
.legend-repeat   { --legend-color: var(--ra-event-repeat); }

/* ── Custom appointment blocks ─────────────────────────────────────────── */
/* Farcit suau del color del tipus i vora de 3 px plena: el color diu quin tipus és sense
   convertir la setmana en una paret de vermell. Text sempre Ink (llegible en clar i fosc). */
.apt-inner {
    --apt-color: var(--ra-event-default);
    background: color-mix(in srgb, var(--apt-color) 22%, var(--ra-ground-1));
    border-left: 3px solid var(--apt-color);
    color: var(--ra-ink);
    height: 100%;
    border-radius: 4px;
    padding: 2px 5px 2px 6px;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.3;
    cursor: pointer;
}

.apt-live     { --apt-color: var(--ra-event-live); }
.apt-recorded { --apt-color: var(--ra-event-recorded); }
.apt-pending  { --apt-color: var(--ra-event-pending); }
.apt-repeat   { --apt-color: var(--ra-event-repeat); }
.apt-default  { --apt-color: var(--ra-event-default); }

.apt-subject {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apt-time {
    color: var(--ra-ink-muted);
    font-family: var(--ra-font-mono);
    font-size: 0.68rem;
}

/* Events dels calendaris de DevExpress (calendari, programació, playlists): el color de
   l'etiqueta el posa DevExpress en línia a .dxbl-apt-bg. A sobre hi pintem el fons de la
   targeta translúcid, deixant lliures els 3 px de l'esquerra: farcit suau + vora plena. */
.dxbl-sc-apt .dxbl-apt-bg {
    background-image: linear-gradient(to right,
        transparent 4px,
        color-mix(in srgb, var(--ra-ground-1) 78%, transparent) 4px);
    border-radius: 4px;
}

/* La franja d'estat (lliure/ocupat) de DevExpress no la fem servir i tapava la vora de color */
.dxbl-sc-apt .dxbl-apt-status-container {
    display: none;
}

.dxbl-sc-apt .dxbl-sc-content-wrapper {
    padding-left: 8px;
}

/* DevExpress força text blanc quan l'event té color (.dxbl-sc-apt:has(.dxbl-apt-bg[style]));
   sobre el farcit suau cal el text del tema. Selectors més específics que el seu. */
.dxbl-scheduler .dxbl-sc-apt:has(.dxbl-apt-bg[style]) .dxbl-apt-content .dxbl-sc-apt-subject {
    color: var(--ra-ink);
    font-weight: 600;
}

.dxbl-scheduler .dxbl-sc-apt:has(.dxbl-apt-bg[style]) .dxbl-apt-content :is(.dxbl-sc-apt-time, .dxbl-sc-apt-description) {
    color: var(--ra-ink-muted);
}

/* ── Event editor popup ─────────────────────────────────────────────────── */
.editor-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.editor-footer-right {
    display: flex;
    gap: 0.5rem;
}

.form-hint {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

.upload-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--dxds-color-surface-neutral-subdued-rest);
    border-radius: 0.5rem;
}

.program-picker-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.program-picker-combo {
    flex: 1;
    min-width: 0;
}

.upload-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.upload-current {
    font-size: 0.85rem;
    color: var(--dxds-color-content-success-default-rest);
}

.audio-preview {
    width: 100%;
    height: 2.25rem;
}

.upload-progress {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.upload-progress-label {
    font-size: 0.8rem;
    color: var(--dxds-color-content-secondary-default-rest);
}

.upload-progress-bar {
    width: 100%;
    height: 0.5rem;
    accent-color: var(--ra-blue);
}

/* ── "Repeat of" date picker dots (ProgramEventEditor) ──────────────────── */
.prev-date-dot {
    display: block;
    width: 4px;
    height: 4px;
    margin: 2px auto 0;
    border-radius: 50%;
}

/* ── Drawer branding ────────────────────────────────────────────────────── */
.logo-link {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    text-decoration: none;
}

.drawer-logo-icon {
    height: 1.75rem;
    width: 1.75rem;
}

.drawer-logo-text {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--dxds-color-content-neutral-default-static-dark-rest);
}


/* ── Monitor en viu ──────────────────────────────────────────────────────── */
.monitor-page { display: flex; flex-direction: column; gap: 1rem; height: 100%; }

.monitor-refresh { font-size: 0.8rem; color: var(--dxds-color-content-secondary-default-rest); }

.monitor-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; flex: 1; min-height: 0; }

.monitor-card {
    background: var(--dxds-color-surface-neutral-subdued-rest);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
}

.monitor-card-header { display: flex; align-items: center; justify-content: space-between; }
.monitor-app-name    { font-weight: 700; font-size: 1rem; }

.monitor-badge { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.7rem; border-radius: 9999px; }
.badge-ok      { background: var(--ra-green);       color: var(--ra-on-green); }
.badge-error   { background: var(--ra-red);         color: var(--ra-on-red); }
.badge-offline { background: var(--ra-neutral-fill); color: var(--ra-on-neutral-fill); }
.badge-warning { background: var(--ra-amber);       color: var(--ra-on-amber); }

.monitor-no-data { color: var(--dxds-color-content-secondary-default-rest); font-style: italic; padding: 1rem 0; }

/* History (already-played items, shown above Now Playing) */
.history-label { font-size: 0.72rem; font-weight: 600; color: var(--dxds-color-content-secondary-default-rest); text-transform: uppercase; letter-spacing: 0.05em; }
.history-list  { flex: 0 0 auto; max-height: 7.5rem; overflow-y: auto; opacity: 0.6; margin-bottom: 0.25rem; }
.queue-item-history { font-style: italic; }

/* Now Playing */
.now-playing-block  { background: var(--ra-green-soft); /* el que sona: verd suau (Senyal) */ border-radius: 0.5rem; padding: 0.75rem 1rem; }
.now-playing-label  { font-size: 0.72rem; font-weight: 600; color: var(--ra-green-text); text-transform: uppercase; letter-spacing: 0.05em; }
.now-playing-title  { font-size: 1.1rem; font-weight: 700; margin: 0.25rem 0; }
.now-playing-artist { font-size: 0.9rem; color: var(--dxds-color-content-secondary-default-rest); margin-bottom: 0.4rem; }
.now-playing-meta   { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.now-playing-times  { font-size: 0.78rem; color: var(--dxds-color-content-secondary-default-rest); margin-left: auto; }
.now-playing-remaining       { font-size: 0.78rem; color: var(--dxds-color-content-secondary-default-rest); margin-top: 0.35rem; }
.now-playing-remaining-value { font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--ra-font-mono); color: var(--ra-ink); }

.tag-type     { font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 9999px; font-weight: 600; }
.tag-song     { background: var(--ra-neutral-fill); color: var(--ra-on-neutral-fill); }
.tag-programa { background: var(--ra-red);         color: var(--ra-on-red); }
.tag-playlist { background: var(--ra-blue);        color: var(--ra-on-blue); }
.tag-genre    { font-size: 0.72rem; color: var(--dxds-color-content-secondary-default-rest); }

/* Queue */
.queue-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }

.queue-item {
    display: grid;
    grid-template-columns: 4.75rem 1fr auto auto; /* hh:mm:ss en Martian Mono */
    gap: 0.4rem;
    align-items: center;
    padding: 0.3rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.82rem;
}

.queue-item:hover { background: var(--dxds-color-surface-neutral-subdued-rest); }
.queue-item-event { background: var(--ra-red-soft); }

.queue-item-time   { font-size: 0.75rem; color: var(--dxds-color-content-secondary-default-rest); font-variant-numeric: tabular-nums; font-family: var(--ra-font-mono); }
.queue-item-title  { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item-artist { font-size: 0.75rem; color: var(--dxds-color-content-secondary-default-rest); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item-dur    { font-size: 0.75rem; color: var(--dxds-color-content-secondary-default-rest); font-variant-numeric: tabular-nums; font-family: var(--ra-font-mono); }

/* Recorder */
.rec-info    { display: flex; flex-direction: column; gap: 0.4rem; }
.rec-label   { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dxds-color-content-secondary-default-rest); }
.rec-segment { font-weight: 600; font-size: 0.95rem; }
.rec-updated { font-size: 0.75rem; color: var(--dxds-color-content-secondary-default-rest); }
.rec-stale   { color: var(--ra-amber-text); font-weight: 600; }

/* En una sola columna la pàgina té alçada fixa (100%) i les targetes, amb overflow:hidden, quedaven
   escanyades: la de la unitat mòbil es retallava i el botó de confirmar no es veia. Al mòbil la
   pàgina creix i fa scroll el contenidor (.drawer-content), i la columna lateral (unitat mòbil,
   recorder) va primer perquè els controls quedin a dalt. */
@media (max-width: 900px) {
    .monitor-page { height: auto; }
    .monitor-grid { grid-template-columns: 1fr; flex: 0 0 auto; }
    .monitor-side { order: -1; }
    .monitor-card { overflow: visible; }
    .monitor-card-main .queue-list { flex: 0 0 auto; max-height: 24rem; }
    .monitor-card-header { gap: 0.5rem; flex-wrap: wrap; }
    .mobile-actions .dxbl-btn { flex: 1 1 8rem; min-height: 2.75rem; }
    .vu-row { grid-template-columns: 5.5rem 1fr 2.25rem; }
}

/* ── Weekly programming template page ───────────────────────────────────── */
.prog-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.75rem;
}

.prog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.prog-toolbar-left,
.prog-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.prog-season-select {
    min-width: 220px;
}

.prog-scheduler {
    flex: 1;
    min-height: 0;
}

.prog-grid {
    flex: 1;
    min-height: 0;
}

.prog-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--dxds-color-content-secondary-default-rest);
}

/* ── 24h continuous config page ─────────────────────────────────────────── */
.c24-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.75rem;
}

.c24-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
}

.c24-empty {
    color: var(--dxds-color-content-secondary-default-rest);
    font-style: italic;
    padding: 1rem 0;
}

.c24-row {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--dxds-color-border-simple);
    border-radius: 6px;
    position: relative;
}

.c24-row-times {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.c24-time {
    width: 100px;
}

.c24-dash {
    color: var(--dxds-color-content-secondary-default-rest);
}

.c24-tagbox {
    min-width: 180px;
}

.c24-folders-only {
    white-space: nowrap;
}

.c24-row-actions {
    display: flex;
    gap: 0.4rem;
}

.c24-row-error {
    grid-column: 1 / -1;
    color: var(--dxds-color-content-danger-default-rest, var(--ra-red-text));
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .c24-row {
        grid-template-columns: 1fr;
    }
}

.section-gap {
    margin-top: 1rem;
}

/* ── Logs page ───────────────────────────────────────────────────────────── */
.log-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.log-filters > * {
    min-width: 160px;
}

.log-grid {
    flex: 1;
    min-height: 0;
}

.log-detail-text {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--dxds-color-bg-simple, var(--ra-ground-2));
    padding: 0.5rem;
    border-radius: 4px;
    max-height: 240px;
    overflow-y: auto;
}

/* ── Bulk import rows (music/jingles) ───────────────────────────────────── */
.import-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.import-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    align-items: center;
    gap: 0.75rem;
}

.import-row-3col {
    grid-template-columns: 1fr 1fr 1fr auto;
}

.import-row-status {
    white-space: nowrap;
    color: var(--dxds-color-content-secondary-default-rest);
    font-size: 0.85rem;
}

@media (max-width: 1100px) {
    .import-row {
        grid-template-columns: 1fr;
    }
}

.import-grid {
    flex: 1;
    min-height: 0;
}


/* ── Playlists (ad scheduling) page ─────────────────────────────────────── */
.pl-body {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

.pl-sidebar {
    width: 260px;
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pl-sidebar-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--dxds-color-border-simple);
    border-radius: 6px;
    cursor: pointer;
}

.pl-sidebar-item:hover {
    background: var(--dxds-color-content-secondary-hover, rgba(0, 0, 0, 0.04));
}

.pl-sidebar-name {
    font-weight: 600;
}

.pl-sidebar-meta {
    font-size: 0.8rem;
    color: var(--dxds-color-content-secondary-default-rest);
}

.pl-scheduler-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
}

.pl-empty {
    color: var(--dxds-color-content-secondary-default-rest);
    font-style: italic;
    padding: 0.5rem 0;
}

@media (max-width: 900px) {
    .pl-body { flex-direction: column; }
    .pl-sidebar { width: 100%; }
}

/* ── Playlist editor popup ───────────────────────────────────────────────── */
.pl-tracks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
}

.pl-total-duration {
    font-size: 0.85rem;
    color: var(--dxds-color-content-secondary-default-rest);
}

.pl-track-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}

.pl-track-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--dxds-color-border-simple);
    border-radius: 6px;
}

.pl-track-company {
    font-size: 0.8rem;
    color: var(--dxds-color-content-secondary-default-rest);
}

.pl-track-duration {
    font-size: 0.8rem;
    color: var(--dxds-color-content-secondary-default-rest);
}

.pl-track-actions {
    display: flex;
    gap: 0.25rem;
}

.pl-add-existing {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.pl-ad-picker {
    flex: 1;
}

.pl-upload-section {
    border-top: 1px solid var(--dxds-color-border-simple);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.pl-new-company {
    display: flex;
    gap: 0.5rem;
}

/* ── Copy template dialog ───────────────────────────────────────────────── */
.copy-slots-label {
    font-weight: 600;
    margin-top: 0.75rem;
}

.copy-slots-tree {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.copy-slots-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.copy-slots-children {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-left: 1.5rem;
}

/* ── Generate/copy summary popup ────────────────────────────────────────── */
.summary-success {
    font-weight: 600;
    color: var(--dxds-color-content-success-default-rest);
}

.summary-skipped-list {
    max-height: 240px;
    overflow-y: auto;
    padding-left: 1.25rem;
    font-size: 0.85rem;
}

/* Unitat mòbil (línia del receptor UHF a DXRAudio24) */
.monitor-side { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.mobile-state { font-weight: 700; font-size: 1.05rem; }
.mobile-state-onair { color: var(--ra-red-text); }
.mobile-note  { font-size: 0.8rem; color: var(--dxds-color-content-secondary-default-rest); }
.mobile-warn  { font-size: 0.8rem; color: var(--ra-amber-text); font-weight: 600; }
.mobile-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.vu-row   { display: grid; grid-template-columns: 6.5rem 1fr 2.5rem; gap: 0.5rem; align-items: center; font-size: 0.78rem; }
.vu-label { color: var(--dxds-color-content-secondary-default-rest); }
.vu-track { position: relative; height: 0.8rem; border-radius: 0.25rem; overflow: hidden;
            /* Zones de Senyal sobre l'escala -60..0 dBFS: verd fins a -6 (90 %), ambre fins a 0,
               i l'últim tram en vermell (tocant el límit). Zones fixes, no degradat. */
            background: linear-gradient(90deg, var(--ra-green) 0 90%, var(--ra-amber) 90% 98%, var(--ra-red) 98% 100%); }
/* La part apagada tapa les zones des de la dreta amb un vel fosc: es continuen veient enfosquides,
   com els LEDs apagats del VU del Live. */
.vu-mask  { position: absolute; top: 0; right: 0; bottom: 0; background: rgba(10, 14, 16, 0.82); transition: width 0.15s linear; }
.vu-db    { font-family: var(--ra-font-mono); }
.vu-db    { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--ra-font-mono); color: var(--dxds-color-content-secondary-default-rest); }


/* ── Pàgines d'accés (login, establir contrasenya) — design system «Senyal» ───
   Fons neutre del tema, targeta plana i el color reservat per al logotip, la línia de
   degradat de dalt i l'acció principal. Global perquè la comparteixen diverses pàgines. */
.login-page {
    align-items: center;
    background: var(--ra-ground-0);
    color: var(--ra-ink);
    display: flex;
    flex-direction: column;
    font-family: var(--ra-font-sans);
    gap: 1.25rem;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem 1rem;
}

.login-card {
    background: var(--ra-ground-1);
    border: 1px solid var(--ra-line);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 24rem;
    overflow: hidden;
    padding: 2.5rem 2rem 2rem;
    position: relative;
    width: 100%;
}

/* Únic toc de color en repòs: el degradat del logo, en una línia fina a dalt */
.login-card::before {
    background: linear-gradient(90deg, #45d737, #0057de);
    content: "";
    height: 3px;
    inset: 0 0 auto 0;
    position: absolute;
}

/* ── Logotip: símbol + «RAudio» (Archivo 700 al 118 % d'amplada) + «Web» ── */
.login-logo {
    align-items: center;
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}

.login-logo-mark {
    /* El SVG és quadrat amb marge: a aquesta mida el símbol fa l'alçada de les majúscules */
    height: 3.1rem;
    margin: -0.4rem -0.2rem;
    width: 3.1rem;
}

.login-logo-name {
    color: var(--ra-ink);
    display: inline-block;
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    /* L'Archivo inclòs és estàtic (sense eix wdth): eixamplem i compensem l'espai que ocupa */
    margin-right: 1.05rem;
    transform: scaleX(1.18);
    transform-origin: left center;
}

.login-logo-sub {
    align-self: flex-end;
    border: 1px solid var(--ra-line);
    border-radius: 4px;
    color: var(--ra-ink-muted);
    font-family: var(--ra-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    line-height: 1;
    margin-bottom: 0.3rem;
    padding: 0.2rem 0.35rem;
    text-transform: uppercase;
}

/* ── Formulari ── */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.login-field label {
    color: var(--ra-ink-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.login-input {
    width: 100%;
}

.login-remember {
    align-items: center;
    color: var(--ra-ink-muted);
    cursor: pointer;
    display: flex;
    font-size: 0.875rem;
    gap: 0.5rem;
    user-select: none;
}

.login-remember input {
    accent-color: var(--ra-blue);
    cursor: pointer;
    height: 1rem;
    margin: 0;
    width: 1rem;
}

.login-actions {
    margin-top: 0.5rem;
}

.login-actions .login-btn {
    font-weight: 600;
    width: 100%;
}

.login-alert {
    background: var(--ra-red-soft);
    border: 1px solid var(--ra-red);
    border-radius: 8px;
    color: var(--ra-red-text);
    font-size: 0.875rem;
    padding: 0.7rem 0.9rem;
}

/* ── Peu: idiomes i versió ── */
.login-footer {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.login-langs {
    display: flex;
    gap: 0.25rem;
}

.login-lang {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--ra-ink-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
}

.login-lang:hover {
    background: var(--ra-ground-2);
    color: var(--ra-ink);
}

.login-lang:focus-visible {
    outline: 2px solid var(--ra-teal);
    outline-offset: 1px;
}

.login-lang.is-current {
    color: var(--ra-ink);
    font-weight: 600;
}

.login-version {
    color: var(--ra-ink-faint);
    font-family: var(--ra-font-mono);
    font-size: 0.7rem;
}

.login-title {
    color: var(--ra-ink);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.login-alert.is-ok {
    background: var(--ra-green-soft);
    border-color: var(--ra-green);
    color: var(--ra-green-text);
}

.login-link {
    color: var(--ra-blue-text);
    font-weight: 600;
    text-align: center;
}

/* ── Capçalera de pàgina (Components/Shared/PageHeader.razor) ─────────────────
   Títol a l'esquerra, accions a la dreta. Al mòbil les accions baixen a sota. */
.page-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    min-height: 2.5rem;
}

.page-title {
    color: var(--ra-ink);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}

.page-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Títol d'una secció dins la pàgina (Empreses, Cançons, Playlists...) */
.section-title {
    color: var(--ra-ink);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* ── Control segmentat (idioma i tema de la barra lateral) ───────────────────
   La barra lateral és sempre fosca: colors fixos de Senyal fosc, no els tokens del tema. */
.drawer-prefs {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.segmented {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    display: inline-flex;
    gap: 2px;
    margin: 0;
    padding: 2px;
}

.segmented-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #9aa9af;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--ra-font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    height: 1.75rem;
    justify-content: center;
    letter-spacing: 0.04em;
    min-width: 1.85rem;
    padding: 0 0.4rem;
}

.segmented-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #e6edef;
}

.segmented-item.is-current {
    background: rgba(255, 255, 255, 0.14);
    color: #e6edef;
}

.segmented-item:focus-visible {
    outline: 2px solid #2bb3a0;
    outline-offset: 1px;
}

/* Idioma: botó (globus + codi) que obre la llista cap amunt (és al peu de la barra) */
.lang-menu {
    position: relative;
}

.lang-menu-button {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    color: #9aa9af;
    cursor: pointer;
    display: inline-flex;
    gap: 0.35rem;
    height: 2rem;
    list-style: none;
    padding: 0 0.5rem;
    user-select: none;
}

.lang-menu-button::-webkit-details-marker {
    display: none;
}

.lang-menu-button:hover,
.lang-menu[open] .lang-menu-button {
    background: rgba(255, 255, 255, 0.09);
    color: #e6edef;
}

.lang-menu-button:focus-visible {
    outline: 2px solid #2bb3a0;
    outline-offset: 1px;
}

.lang-menu-code {
    font-family: var(--ra-font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.lang-menu-chevron {
    opacity: 0.7;
    transition: transform 0.15s;
}

.lang-menu[open] .lang-menu-chevron {
    transform: rotate(180deg);
}

.lang-menu-list {
    background: #182024;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    bottom: calc(100% + 6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    left: 0;
    margin: 0;
    max-height: 16rem;
    min-width: 11rem;
    overflow-y: auto;
    padding: 4px;
    position: absolute;
    z-index: 20;
}

.lang-menu-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #c4cfd3;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 0.85rem;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.45rem 0.6rem;
    text-align: left;
}

.lang-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e6edef;
}

.lang-menu-item.is-current {
    color: #e6edef;
    font-weight: 600;
}

.lang-menu-item-code {
    color: #6e7d84;
    font-family: var(--ra-font-mono);
    font-size: 0.68rem;
}

/* ── Selector de fitxers per importar (Música, Indicatius) ───────────────────
   L'<input type=file> cobreix tota la zona i és invisible: clicar obre el diàleg i
   deixar-hi fitxers a sobre també funciona (comportament natiu del navegador). */
.file-drop {
    align-items: center;
    background: var(--ra-ground-1);
    border: 1px dashed var(--ra-line-strong);
    border-radius: 10px;
    color: var(--ra-ink-muted);
    cursor: pointer;
    display: flex;
    flex: 1 1 22rem;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.6rem 1rem;
    position: relative;
    transition: background-color 0.15s, border-color 0.15s;
}

.file-drop:hover,
.file-drop:focus-within {
    background: var(--ra-ground-2);
    border-color: var(--ra-blue);
}

/* La barra on va el selector ha de créixer perquè la zona agafi l'amplada disponible */
.prog-toolbar-left:has(.file-drop) {
    flex: 1 1 22rem;
}

.file-drop input[type=file] {
    cursor: pointer;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
}

.file-drop-icon {
    color: var(--ra-blue-text);
    flex-shrink: 0;
}

.file-drop-text strong {
    color: var(--ra-ink);
    font-weight: 600;
}

/* ── Registres: nivell amb el color de senyal ─────────────────────────────── */
.log-level-error { color: var(--ra-red-text); font-weight: 600; }
.log-level-warn  { color: var(--ra-amber-text); font-weight: 600; }