/* =========================================================
   PROGRAMS PAGE
   ---------------------------------------------------------
   Page-specific styling for programs.html / programs.js
   ========================================================= */

/* ==================================================
   PAGE
================================================== */

.programs-page {
    margin: 0 20px;
    padding: 20px;
    color: var(--theme-text);
}

.programs-header h1 {
    margin: 0 0 6px;
    font-size: 28px;
    color: var(--theme-text);
}


/* =========================================================
   PROGRAM STATISTICS
   ========================================================= */

.program-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 18px 14px;
}

.program-stat {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    background: var(--theme-panel);
}

.program-stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--theme-text);
}

.program-stat-label {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-text-muted);
}

.program-stat.warning {
    border-color: var(--theme-warning);
}

.program-stat.warning .program-stat-value {
    color: var(--theme-warning);
}

.program-stat-total {
    color: var(--theme-text);
}

.program-stat-good {
    color: var(--theme-success);
}

.program-stat-missing {
    color: var(--theme-warning);
    font-weight: bold;
}

.program-stat-missing:hover {
    text-decoration: underline;
}

.program-stat-complete {
    color: var(--theme-success);
    font-weight: bold;
}

.program-stat-percent {
    color: var(--theme-text-muted);
}


.new-program-button {
    display: flex;
    align-items: center;
    gap: 7px;

    min-height: 40px;
    padding: 0 14px;

    border: 1px solid var(--theme-primary-dark);
    border-radius: var(--theme-button-radius);

    background: var(--theme-gradient-primary);
    color: var(--theme-text);

    box-shadow: var(--theme-shadow-button);

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.new-program-button span {
    font-size: 18px;
    line-height: 1;
}

.new-program-button:hover {
    background: var(--theme-gradient-primary-hover);
    border-color: var(--theme-primary);
    color: #fff;
    box-shadow: var(--theme-shadow-glow);
}


/* =========================================================
   PROGRAM PAGE INTRO
   ========================================================= */

.program-page-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 0 14px;
    padding: 0 2px;
}

.program-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--theme-text);
}

.program-page-subtitle {
    margin-top: 3px;
    font-size: 13px;
    color: var(--theme-text-secondary);
}

.program-page-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;

    border-radius: 999px;
    background: var(--theme-input);

    color: var(--theme-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-success);
    box-shadow: 0 0 0 3px var(--theme-success-soft);
}

.status-dot.loading {
    background: var(--theme-warning);
    box-shadow: 0 0 0 3px var(--theme-warning-soft);
}

.status-dot.error {
    background: var(--theme-danger);
    box-shadow: 0 0 0 3px var(--theme-danger-soft);
}


/* =========================================================
   PROGRAM LOAD STATUS
   ========================================================= */

.program-load-status {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 10px 0 16px;

    font-size: 13px;
    color: var(--theme-text-muted);
}

.program-load-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.program-load-dot.ready {
    background: var(--theme-success);
}

.program-load-dot.loading {
    background: var(--theme-primary);
    animation: programStatusPulse 1s infinite;
}

.program-load-dot.error {
    background: var(--theme-danger);
}

@keyframes programStatusPulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}


/* =========================================================
   PROGRAM FILTERS
   ========================================================= */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    padding: 12px;
    margin-top: 14px;

    background: var(--theme-panel-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
}

.filters input,
.filters select {
    background: var(--theme-input);
    border-color: var(--theme-border);
}

#programSearch {
    flex: 1 1 260px;
}


/* =========================================================
   PROGRAM LIST
   ========================================================= */

#programList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 14px;
    margin-top: 16px;
}


/* =========================================================
   PROGRAM CARD
   ========================================================= */

.program-card {
    position: relative;
    overflow: hidden;

    padding: 18px 20px;

    border: 1px solid var(--theme-border);
    border-left: 3px solid transparent;
    border-radius: 12px;

    background: var(--theme-gradient-panel);

    transition:
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.program-card:hover {
    border-color: var(--theme-border-light);
    transform: translateY(-1px);
    box-shadow: var(--theme-shadow-card);
}

.program-card.passive {
    opacity: 0.65;
}


/* =========================================================
   PROGRAM CARD HEADER
   ========================================================= */

.program-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.program-card-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}


/* =========================================================
   PROGRAM TITLE
   ========================================================= */

.program-title {
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--theme-text);
}


/* =========================================================
   PROGRAM STATUS
   ========================================================= */

.program-status {
    flex-shrink: 0;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;

    padding: 4px 7px;
    border-radius: 5px;
}

.program-status.active {
    color: var(--theme-info);
    background: var(--theme-info-soft);
}

.program-status.passive {
    color: var(--theme-text-secondary);
    background: var(--theme-panel-secondary);
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.program-description {
    margin-top: 7px;
    color: var(--theme-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}


/* =========================================================
   EPISODE COUNT
   ========================================================= */

.program-episode-summary {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 16px;
}

.episode-number {
    font-size: 25px;
    font-weight: 700;
    color: var(--theme-text);
}

.episode-label {
    font-size: 12px;
    color: var(--theme-text-muted);
}


/* =========================================================
   INFORMATION STATS
   ========================================================= */

.program-info-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
}

.program-info-stats span {
    font-size: 11px;
    padding: 4px 7px;
    border-radius: 5px;
    background: var(--theme-panel-secondary);
}

.program-info-good {
    color: var(--theme-success);
}

.program-info-missing {
    color: var(--theme-warning);
    font-weight: 600;
    cursor: pointer;
}

.program-info-missing:hover {
    text-decoration: underline;
}

.program-info-complete {
    color: var(--theme-success);
    font-weight: 600;
}

.program-info-percent {
    color: var(--theme-text-secondary);
    margin-left: auto;
}


/* =========================================================
   METADATA
   ========================================================= */

.program-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid var(--theme-border);
}

.program-metadata span {
    font-size: 10px;
    color: var(--theme-text-secondary);

    background: var(--theme-panel-secondary);
    border: 1px solid var(--theme-border);

    padding: 3px 7px;
    border-radius: 4px;
}


/* =========================================================
   PROGRAM ACTIONS
   ========================================================= */

.program-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 15px;
}

.program-action {
    padding: 7px 11px;
    font-size: 11px;

    background: var(--theme-gradient-button);
    border: 1px solid var(--theme-border);
    color: var(--theme-text-secondary);
}

.program-action:hover {
    background: var(--theme-gradient-button-hover);
}

.program-action.primary {
    background: var(--theme-gradient-primary);
    border-color: var(--theme-primary-dark);
    color: var(--theme-text);
}

.program-action.primary:hover {
    background: var(--theme-gradient-primary-hover);
}

.program-action.danger {
    background: transparent;
    border-color: var(--theme-danger);
    color: var(--theme-danger);
}


/* =========================================================
   PROGRAM TYPE
   ========================================================= */

.program-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 9px;

    border-radius: 6px;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;

    white-space: nowrap;

    border: 1px solid transparent;
}

.program-type-icon {
    font-size: 0.78rem;
    line-height: 1;
}


/* FILE */

.program-card.type-file {
    border-left-color: var(--theme-info);
}

.program-type-file {
    color: var(--theme-info);
    background: var(--theme-info-soft);
    border-color: var(--theme-info);
}


/* HYBRID */

.program-card.type-hybrid {
    border-left-color: var(--theme-hybrid);
}

.program-type-hybrid {
    color: var(--theme-hybrid);
    background: var(--theme-hybrid-soft);
    border-color: var(--theme-hybrid);
}


/* LIVE */

.program-card.type-live {
    border-left-color: var(--theme-live);

    box-shadow:
        inset 3px 0 12px var(--theme-live-soft);
}

.program-type-live {
    color: var(--theme-live);
    background: var(--theme-live-soft);
    border-color: var(--theme-live);

    box-shadow:
        0 0 12px var(--theme-live-soft);
}


/* VIRTUAL */

.program-card.type-virtual {
    border-left-color: var(--theme-virtual);

    box-shadow:
        inset 3px 0 12px var(--theme-virtual-soft);
}

.program-type-virtual {
    color: var(--theme-virtual);
    background: var(--theme-virtual-soft);
    border-color: var(--theme-virtual);

    box-shadow:
        0 0 12px var(--theme-virtual-soft);
}


/* =========================================================
   EPISODE CARDS
   ---------------------------------------------------------
   Episode information displayed from the Programs page
   ========================================================= */

.episode-card {
    background: var(--theme-panel);

    border: 1px solid var(--theme-border);
    border-radius: 12px;

    padding: 14px 16px;
    margin-bottom: 10px;

    box-shadow: var(--theme-shadow-button);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.episode-card:hover {
    border-color: var(--theme-border-light);
    box-shadow: var(--theme-shadow-card);
}

.episode-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.episode-title {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 16px;
    font-weight: 600;

    color: var(--theme-text);
}

.episode-title .episode-number {
    color: var(--theme-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.episode-status {
    flex-shrink: 0;

    padding: 3px 8px;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.episode-status.active {
    background: var(--theme-success-soft);
    color: var(--theme-success);
}

.episode-status.passive {
    background: var(--theme-panel-secondary);
    color: var(--theme-text-muted);
}

.episode-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 8px;

    font-size: 12px;
    color: var(--theme-text-muted);
}

.episode-metadata span {
    overflow-wrap: anywhere;
}

.episode-info {
    font-size: 12px;
    margin-bottom: 10px;
}

.episode-info.good {
    color: var(--theme-success);
}

.episode-info.missing {
    color: var(--theme-warning);
    cursor: pointer;
}


/* =========================================================
   SCHEDULE PROTECTION
   ========================================================= */

.episode-protected {
    display: flex;
    flex-direction: column;
    gap: 3px;

    margin-top: 4px;
    margin-bottom: 10px;
    padding: 8px 10px;

    border: 1px solid var(--theme-warning);
    border-left: 3px solid var(--theme-warning);
    border-radius: 7px;

    background: var(--theme-warning-soft);
    color: var(--theme-warning);

    font-size: 11px;
    line-height: 1.4;
}

.episode-protected strong {
    font-size: 11px;
    font-weight: 700;
    color: var(--theme-warning);
}

.episode-protected span {
    color: var(--theme-text-secondary);
}


/* =========================================================
   EPISODE ACTIONS
   ========================================================= */

.episode-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.episode-action {
    padding: 6px 10px;

    border: 1px solid var(--theme-border-light);
    border-radius: 7px;

    background: var(--theme-gradient-button);
    color: var(--theme-text-secondary);

    font-size: 12px;
    cursor: pointer;
}

.episode-action:hover {
    background: var(--theme-gradient-button-hover);
}

.episode-action.danger {
    color: var(--theme-danger);
    border-color: var(--theme-danger);
    background: var(--theme-danger-soft);
}

.episode-action.danger:hover {
    background: var(--theme-danger-soft);
}


/* =========================================================
   PROGRAM EPISODE VIEW
   ---------------------------------------------------------
   Older/simple episode information blocks still used by
   the Programs page.
   ========================================================= */

.episode-item {
    padding: 12px;
    margin-bottom: 8px;

    background: var(--theme-panel);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
}

.episode-title {
    font-size: 14px;
    line-height: 1.4;
}

.episode-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.episode-meta {
    flex: 1;
    font-size: 11px;
    color: var(--theme-text-muted);
}

.episode-epg-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;

    background: var(--theme-primary);
    color: var(--theme-bg);

    white-space: nowrap;
}

.episode-epg-badge.missing {
    background: var(--theme-panel-secondary);
    color: var(--theme-text-muted);
}

.episode-description {
    margin-top: 8px;

    color: var(--theme-text);
    font-size: 12px;
    line-height: 1.45;

    white-space: pre-line;
}

.episode-actions button {
    padding: 6px 9px;
    font-size: 11px;
}


/* =========================================================
   EPISODE EDIT MODAL
   ========================================================= */

.episode-modal-box {
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
    max-height: calc(100vh - 40px);

    display: flex;
    flex-direction: column;

    padding: 0;
    overflow: hidden;
}

.episode-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding: 22px 26px 18px;

    border-bottom: 1px solid var(--theme-border-light);
}

.episode-modal-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--theme-text-muted);
    margin-bottom: 4px;
}

.episode-modal-header h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.episode-modal-close {
    border: 0;
    background: transparent;
    color: var(--theme-text-muted);

    font-size: 22px;
    line-height: 1;

    width: 36px;
    height: 36px;

    border-radius: 8px;

    cursor: pointer;
}

.episode-modal-close:hover {
    background: var(--theme-gradient-button-hover);
    color: var(--theme-text);
}

.episode-form {
    overflow-y: auto;
    padding: 22px 26px;
}

.episode-form-section {
    margin-bottom: 26px;
}

.episode-form-section:last-child {
    margin-bottom: 0;
}

.episode-form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-text);
    margin-bottom: 14px;
}

.episode-form-row {
    display: grid;
    gap: 16px;
}

.episode-form-row.two-columns {
    grid-template-columns: 1fr 1fr;
}

.episode-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.episode-field:last-child {
    margin-bottom: 0;
}

.episode-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-secondary);
}

.episode-field input,
.episode-field textarea {
    width: 100%;
    box-sizing: border-box;

    border: 1px solid var(--theme-border-light);
    border-radius: 8px;

    background: var(--theme-input);
    color: var(--theme-text);

    font: inherit;

    padding: 11px 12px;

    outline: none;
}

.episode-field input:focus,
.episode-field textarea:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px var(--theme-primary-soft);
}

.episode-field input {
    height: 44px;
}

.episode-input-with-unit {
    display: flex;
    align-items: center;

    border: 1px solid var(--theme-border-light);
    border-radius: 8px;

    background: var(--theme-input);

    overflow: hidden;
}

.episode-input-with-unit input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
}

.episode-input-with-unit input:focus {
    box-shadow: none;
}

.episode-input-with-unit span {
    padding: 0 12px;

    color: var(--theme-text-muted);
    font-size: 13px;
    white-space: nowrap;
}

.episode-description-input {
    min-height: 150px;
    resize: vertical;
}

.episode-metadata-input {
    min-height: 180px;
    resize: vertical;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 13px;
    line-height: 1.5;
}

.episode-field-help {
    font-size: 12px;
    color: var(--theme-text-muted);

    margin-top: -2px;
    margin-bottom: 4px;
}

.episode-status-section {
    padding: 14px 16px;

    border: 1px solid var(--theme-border);
    border-radius: 10px;

    background: var(--theme-panel-secondary);
}

.episode-active-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.episode-active-toggle input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.episode-active-toggle span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.episode-active-toggle strong {
    font-size: 14px;
    color: var(--theme-text);
}

.episode-active-toggle small {
    font-size: 12px;
    color: var(--theme-text-muted);
}

.episode-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    padding: 16px 26px;

    border-top: 1px solid var(--theme-border);
    background: var(--theme-panel);
}

.episode-button {
    min-height: 42px;
    padding: 0 18px;

    border-radius: 8px;

    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

.episode-button.secondary {
    border: 1px solid var(--theme-border-light);
    background: transparent;
    color: var(--theme-text-secondary);
}

.episode-button.secondary:hover {
    background: var(--theme-gradient-button-hover);
}

.episode-button.primary {
    border: 1px solid var(--theme-primary-dark);
    background: var(--theme-gradient-primary);
    color: var(--theme-text);
}

.episode-button.primary:hover {
    background: var(--theme-gradient-primary-hover);
}


/* =========================================================
   PROGRAM EDIT MODAL
   ========================================================= */

.program-modal-box {
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
    max-height: calc(100vh - 40px);

    display: flex;
    flex-direction: column;

    padding: 0;
    overflow: hidden;
}

.program-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding: 22px 26px 18px;

    border-bottom: 1px solid var(--theme-border-light);
}

.program-modal-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--theme-text-muted);
    margin-bottom: 4px;
}

.program-modal-header h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.program-modal-close {
    border: 0;
    background: transparent;

    color: var(--theme-text-muted);

    font-size: 22px;
    line-height: 1;

    width: 36px;
    height: 36px;

    border-radius: 8px;

    cursor: pointer;
}

.program-modal-close:hover {
    background: var(--theme-gradient-button-hover);
    color: var(--theme-text);
}

.program-form {
    overflow-y: auto;
    padding: 22px 26px;
}

.program-form-section {
    margin-bottom: 26px;
}

.program-form-section:last-child {
    margin-bottom: 0;
}

.program-form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-text);
    margin-bottom: 14px;
}

.program-form-row {
    display: grid;
    gap: 16px;
}

.program-form-row.two-columns {
    grid-template-columns: 1fr 1fr;
}

.program-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.program-field:last-child {
    margin-bottom: 0;
}

.program-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-secondary);
}

.program-field input,
.program-field textarea,
.program-field select {
    width: 100%;
    box-sizing: border-box;

    border: 1px solid var(--theme-border-light);
    border-radius: 8px;

    background: var(--theme-input);
    color: var(--theme-text);

    font: inherit;

    padding: 11px 12px;

    outline: none;
}

.program-field input,
.program-field select {
    height: 44px;
}

.program-field input:focus,
.program-field textarea:focus,
.program-field select:focus {
    border-color: var(--theme-primary);

    box-shadow:
        0 0 0 2px var(--theme-primary-soft);
}

.program-description-input {
    min-height: 150px;
    resize: vertical;
}

.program-input-with-unit {
    display: flex;
    align-items: center;

    border: 1px solid var(--theme-border-light);
    border-radius: 8px;

    background: var(--theme-input);

    overflow: hidden;
}

.program-input-with-unit input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
}

.program-input-with-unit input:focus {
    box-shadow: none;
}

.program-input-with-unit span {
    padding: 0 12px;

    color: var(--theme-text-muted);

    font-size: 13px;
    white-space: nowrap;
}

.program-field-help {
    font-size: 12px;
    color: var(--theme-text-muted);
    margin-top: -2px;
}

.program-status-section {
    margin: 0 26px 22px;

    padding: 14px 16px;

    border: 1px solid var(--theme-border);
    border-radius: 10px;

    background: var(--theme-panel-secondary);
}

.program-active-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.program-active-toggle input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.program-active-toggle span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.program-active-toggle strong {
    font-size: 14px;
    color: var(--theme-text);
}

.program-active-toggle small {
    font-size: 12px;
    color: var(--theme-text-muted);
}

.program-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    padding: 16px 26px;

    border-top: 1px solid var(--theme-border);
    background: var(--theme-panel);
}

.program-button {
    min-height: 42px;
    padding: 0 18px;

    border-radius: 8px;

    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

.program-button.secondary {
    border: 1px solid var(--theme-border-light);
    background: transparent;
    color: var(--theme-text-secondary);
}

.program-button.secondary:hover {
    background: var(--theme-gradient-button-hover);
}

.program-button.primary {
    border: 1px solid var(--theme-primary-dark);
    background: var(--theme-gradient-primary);
    color: var(--theme-text);
}

.program-button.primary:hover {
    background: var(--theme-gradient-primary-hover);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    #programList {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .program-card {
        padding: 15px;
    }

    .program-title {
        font-size: 19px;
    }

    .program-info-percent {
        margin-left: 0;
    }

    .program-actions {
        justify-content: stretch;
    }

    .program-action {
        flex: 1;
    }

    .program-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 12px;
    }

    .program-stat {
        padding: 12px 14px;
    }

    .program-stat-value {
        font-size: 21px;
    }

    .topbar {
        padding: 9px 12px;
    }

    .topbar-right {
        gap: 6px;
    }

    .topbar-page-status {
        display: none;
    }

    .title-icon {
        font-size: 22px;
    }

    .title-main {
        font-size: 18px;
    }

    .title-sub {
        display: none;
    }

    .new-program-button {
        min-height: 38px;
        padding: 0 11px;
    }
}

@media (max-width: 600px) {

    .program-page-intro {
        align-items: flex-start;
    }

    .program-page-title {
        font-size: 19px;
    }

    .program-page-subtitle {
        font-size: 12px;
    }

    .program-page-status {
        padding: 6px 9px;
    }

    .status-text {
        display: none;
    }

    .program-card-header {
        gap: 8px;
    }

    .program-card-badges {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .program-type-badge,
    .program-status {
        font-size: 0.65rem;
        padding: 4px 7px;
    }

    .program-card {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .program-card > div:last-child {
        text-align: left !important;
    }

    .program-stats {
        gap: 5px;
    }

    .program-modal-box {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .program-modal-header {
        padding: 18px 18px 14px;
    }

    .program-modal-header h2 {
        font-size: 21px;
    }

    .program-form {
        padding: 18px;
    }

    .program-form-row.two-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .program-status-section {
        margin: 0 18px 18px;
    }

    .program-modal-footer {
        padding: 14px 18px;
    }

    .program-button {
        flex: 1;
    }

    .episode-modal-box {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .episode-modal-header {
        padding: 18px 18px 14px;
    }

    .episode-modal-header h2 {
        font-size: 21px;
    }

    .episode-form {
        padding: 18px;
    }

    .episode-form-row.two-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .episode-modal-footer {
        padding: 14px 18px;
    }

    .episode-button {
        flex: 1;
    }

    .episode-field input,
    .episode-field textarea,
    .program-field input,
    .program-field textarea,
    .program-field select {
        font-size: 16px;
    }
}


/* =========================================================
   LARGER SCREENS
   ========================================================= */

@media (min-width: 700px) {

    .episode-panel {
        width: 520px;
    }
}