/* ── CSS Variables ─────────────────────────────────────────────────────────── */
:root {
    --print-time-width:          35px;
    --print-time-margin:         10px;
    --print-line-height:         1.2;
    --print-desc-line-height:    1.3;
    --print-item-padding:        2px 0;
    --print-card-padding:        5px;
    --print-running-text-margin: 5px;

    --print-base-font-size:    8pt;
    --print-header-font-size:  16pt;
    --print-channel-font-size: 11pt;
    --print-desc-font-size:    7pt;

    --accent:       #137fec;
    --accent-hover: #1557a0;
    --success-color:#4caf50;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
body {
    background: #555;
    color: black;
    font-family: 'Work Sans', sans-serif;
    font-size: var(--print-base-font-size);
    margin: 0;
    padding: 20px 0;
}

/* ── A4 Page Container ─────────────────────────────────────────────────────── */
.app-container {
    max-width: 210mm;
    width: 210mm;
    min-height: 297mm;
    background: white;
    padding: 5mm;
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* ── Day Section (one per A4 page) ────────────────────────────────────────── */
.day-section {
    display: block;
    margin-bottom: 0;
}

h2.day-header {
    border-bottom: 2px solid #000;
    padding-bottom: var(--print-running-text-margin);
    margin: 0 0 10px 0;
    color: black;
    font-size: var(--print-header-font-size);
    text-align: center;
    page-break-after: avoid;
    break-after: avoid;
}

/* ── 5-Column Layout ───────────────────────────────────────────────────────── */
.channels-container {
    display: block;
    column-count: 5;
    column-gap: 4px;
    column-fill: auto;
    /* A4 at 96 dpi ≈ 1122px; minus 10mm margins (~38px); minus header (~68px) */
    height: calc(1122px - 38px - 68px);
}

/* ── Channel Card ──────────────────────────────────────────────────────────── */
.channel-card {
    background: none;
    border: 1px solid #ccc;
    color: black;
    padding: var(--print-card-padding);
    margin-bottom: 4px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    page-break-inside: avoid;
    break-inside: avoid;
}

.channel-header {
    margin-bottom: var(--print-running-text-margin);
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.channel-name {
    font-weight: 700;
    font-size: var(--print-channel-font-size);
    color: black;
}

/* ── Running Text (morning / night programs) ───────────────────────────────── */
.program-running-text {
    font-size: var(--print-desc-font-size);
    color: #333;
    line-height: var(--print-line-height);
    margin-bottom: var(--print-running-text-margin);
    padding-bottom: var(--print-running-text-margin);
    border-bottom: 1px solid #eee;
}

.program-running-text.night {
    border-bottom: none;
    border-top: 1px solid #eee;
    margin-top: var(--print-running-text-margin);
    margin-bottom: 0;
    padding-top: var(--print-running-text-margin);
    padding-bottom: 0;
}

.program-running-text b { color: black; }

/* ── Program List ──────────────────────────────────────────────────────────── */
.program-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.program-item {
    display: block;
    padding: var(--print-item-padding);
    border-bottom: 1px solid #eee;
}

.program-item:last-child { border-bottom: none; }

/* Time right-aligned within its fixed column — digits and colons line up */
.program-time {
    display: inline-block;
    text-align: right;
    font-weight: normal;
    color: black;
    width: var(--print-time-width);
    font-size: var(--print-base-font-size);
    vertical-align: top;
}

/* Title sits inline after the time, with a clear gap */
.program-info {
    display: inline;
}

.program-title {
    display: inline;
    font-weight: bold;
    color: black;
    font-size: var(--print-base-font-size);
    margin-left: var(--print-time-margin);
    padding-left: 6px;
}

/* Description on new line, flowing from the left edge */
.program-description {
    display: block;
    font-size: var(--print-desc-font-size);
    color: #333;
    line-height: var(--print-desc-line-height);
    margin-top: 1px;
}

/* ── Floating Action Button ────────────────────────────────────────────────── */
.fab-panel {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.fab-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--accent);
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
    height: 60px;
    width: 60px;
    justify-content: flex-end;
    overflow: hidden;
}

.fab-container:hover {
    height: 340px;
    width: 120px;
    background-color: var(--accent-hover);
    border-radius: 45px;
}

.fab-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    padding: 12px 12px 0 12px;
    margin-bottom: 4px;
    width: 100%;
    box-sizing: border-box;
}

.fab-container:hover .fab-controls {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.1s;
}

.fab-control-row {
    display: flex;
    justify-content: space-between;
    gap: 2px;
    width: 100%;
}

.font-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    width: 34px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s, transform 0.1s;
}

.font-btn:hover  { background-color: rgba(255,255,255,0.2); transform: scale(1.1); }
.font-btn:active { transform: scale(0.95); }

.auto-btn {
    width: 100% !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    height: 28px;
}

.auto-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.fab-btn {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

/* Cards that overflow one column get .breakable — allows the program list
   to split across columns rather than overflowing the page entirely */
.channel-card.breakable {
    break-inside: auto;
    page-break-inside: auto;
}
@media print {
    .fab-panel { display: none !important; }

    @page {
        size: A4 portrait;
        margin: 5mm;
    }

    body {
        background: white;
        padding: 0;
    }

    .app-container {
        max-width: 100%;
        width: 100%;
        min-height: unset;
        padding: 0;
        margin: 0;
        box-shadow: none;
    }

    .day-section {
        page-break-after: always;
    }
    .day-section:last-child {
        page-break-after: auto;
    }

    .channels-container {
        display: block;
        column-count: 5;
        column-gap: 4px;
        column-fill: auto;
        height: calc(297mm - 10mm - 18mm);
    }
}