/* ------------------------------------------------------------------
   Global
-------------------------------------------------------------------*/


/* ------------------------------------------------------------------
   Main Layout
-------------------------------------------------------------------*/


.navbar-vertical
{
    width: 260px;
    background: #1b1d21;
}

.page-wrapper
{
    margin-left: 260px;
}

.card
{
    padding: 20px;

    background: #2b2b2b;
    border: 1px solid #444;
    border-radius: 6px;

    color: white;
}


/* ------------------------------------------------------------------
   Preview
-------------------------------------------------------------------*/

.preview-body
{
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 650px;
    padding: 32px;

    background: #000;
    overflow: hidden;
}

.virtual-preview
{
    flex: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
}


/* ------------------------------------------------------------------
   Dashboard
-------------------------------------------------------------------*/

.home
{
    padding: 30px;
}

.dashboard-grid
{
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}

.dashboard-card
{
    padding: 20px;

    background: #2b2b2b;
    border: 1px solid #444;
    border-radius: 8px;
}

.dashboard-card h1
{
    font-size: 42px;
}

.dashboard-card h2
{
    margin-top: 0;
}

.card
{
    border: none;

    border-radius: 10px;

    background: #242932;

    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.card-header
{
    font-weight: 600;

    font-size: 15px;

    padding: 14px 18px;

    border-bottom: 1px solid #353b45;
}

.card-body
{
    padding: 18px;
}

.widget-settings-heading
{
    margin: 0 0 16px;

    color: #f8f9fa;
    font-size: 16px;
    font-weight: 600;
}

.widget-weather-settings
{
    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid #353b45;
}

.widget-playlist-settings
{
    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid #353b45;
}

.widget-playlist-row
{
    display: grid;
    grid-template-columns: minmax(112px, 1fr) auto auto;
    align-items: center;
    gap: 12px;

    margin: 0;
    min-height: 64px;
    padding: 12px 14px;

    border: 1px solid #353b45;
    border-radius: 8px;

    background: #1e2228;
}

#widgetPlaylistRows
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* Keep each widget name on its own row on tablet and desktop so duration and
   ordering controls retain comfortable widths. */
@media (min-width: 561px)
{
    #widgetPlaylistRows .widget-playlist-row
    {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px 8px;
        min-height: 72px;
    }

    #widgetPlaylistRows .widget-playlist-row > .form-check
    {
        grid-column: 1;
        grid-row: 1;
    }

    #widgetPlaylistRows .widget-derived-duration,
    #widgetPlaylistRows .widget-playlist-duration-input
    {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: start;
    }

    #widgetPlaylistRows .widget-order-controls
    {
        grid-column: 2;
        grid-row: 1;
        justify-content: end;
    }
}

/* The dedicated desktop playlist page uses compact three-column cards. */
@media (min-width: 1181px)
{
    #widgetPlaylistRows
    {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
}

.display-settings-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(70, 80, 93, .72);
}

.display-settings-heading h3
{
    margin: 0;
    color: #f1f3f5;
    font-size: 21px;
}

.display-settings-heading p
{
    margin: 3px 0 0;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.display-settings-heading > span
{
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(32, 161, 76, .18);
    color: #79d491;
    font-size: 10px;
    font-weight: 700;
}

.display-settings-grid
{
    display: grid;
    grid-template-columns: minmax(260px, .78fr) minmax(360px, 1.22fr);
    align-items: stretch;
    gap: 14px;
}

.display-settings-section
{
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.display-settings-section-heading
{
    min-height: 58px;
    margin-bottom: 14px;
}

.display-settings-section-heading .widget-settings-heading
{
    color: var(--sfr-orange, #f28c28);
    font-size: 12px;
}

.display-settings-section .form-label
{
    margin-bottom: 5px;
}

.display-settings-section .form-hint
{
    margin-top: 8px;
}

.display-settings-grid:has(#manualDisplaySettings[hidden]) .display-layout-section
{
    grid-column: 1 / -1;
}

.display-settings-grid:has(#manualDisplaySettings[hidden]) .display-layout-section .form-select
{
    max-width: 520px;
}

@media (max-width: 880px)
{
    .display-settings-grid
    {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px)
{
    .display-settings-heading
    {
        align-items: stretch;
        flex-direction: column;
    }

    .display-settings-section
    {
        padding: 14px;
    }

    .display-settings-section-heading
    {
        min-height: 0;
    }
}

.composer-playlist-entry
{
    display: block;
    padding: 14px;
}

.composer-entry-header,
.composer-entry-header-controls,
.composer-entry-duration-label,
.composer-entry-actions
{
    display: flex;
    align-items: center;
    gap: 8px;
}

.composer-entry-header
{
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(70, 80, 93, .68);
}

.composer-entry-header-controls
{
    justify-content: flex-end;
}

.composer-entry-show-label
{
    margin-left: 5px;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.composer-entry-duration-label
{
    margin: 0;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
    font-weight: 600;
}

.composer-entry-duration-label .form-control
{
    width: 54px;
    text-align: center;
}

.composer-entry-rows
{
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.composer-entry-row
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(70, 80, 93, .58);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.composer-entry-photo-choice
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 10px;
    align-items: center;
}

.composer-entry-photo-thumbnail
{
    width: 56px;
    height: 40px;
    border: 1px solid var(--sfr-line, #46505d);
    border-radius: 4px;
    object-fit: cover;
}

.composer-entry-row-label
{
    grid-column: 1 / -1;
    display: block;
    margin: 0;
    font-size: 10px;
}

.composer-entry-row-style
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    color: var(--tblr-secondary, #9aa4b2);
    font-size: 10px;
}

.composer-entry-row-alignment
{
    width: 88px;
    min-width: 88px;
    padding-right: 24px;
}

.composer-entry-row-style input[type="color"]
{
    width: 28px;
    height: 24px;
    padding: 2px;
    border: 1px solid var(--sfr-line, #46505d);
    border-radius: 4px;
    background: transparent;
}

.composer-entry-background
{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(70, 80, 93, .68);
}

.composer-entries-heading
{
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 18px 0 8px;
}

.composer-schedule-card
{
    padding: 12px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.composer-schedule-card .widget-settings-heading
{
    color: var(--sfr-orange, #f28c28);
    font-size: 12px;
}

.composer-entry-actions
{
    justify-content: flex-end;
    margin-top: 12px;
}

.composer-entry-actions .btn
{
    min-width: 180px;
}

.message-composer-workspace-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(70, 80, 93, .72);
}

.message-composer-workspace-title
{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.message-composer-workspace-title svg
{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: var(--sfr-orange, #f28c28);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.message-composer-workspace-title h3
{
    margin: 0;
    color: #f1f3f5;
    font-size: 21px;
}

.message-composer-workspace-title p
{
    margin: 3px 0 0;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.message-composer-layout-note
{
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(242, 140, 40, .14);
    color: #f1a04d;
    font-size: 10px;
    font-weight: 700;
}

.message-composer-workspace-grid
{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.configuration-library
{
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 10px;
    background: rgba(15, 23, 42, .32);
}

.message-composer-entries-panel,
.composer-schedule-card
{
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.message-composer-entries-panel
{
    grid-column: 1;
    grid-row: 2;
}

.composer-schedule-card
{
    grid-column: 1;
    grid-row: 1;
}

#composerPlaylistEntries
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#composerPlaylistEntries .composer-playlist-entry
{
    align-self: start;
    min-width: 0;
    margin: 0;
}

.message-composer-section-heading
{
    margin-bottom: 14px;
}

.message-composer-section-heading .widget-settings-heading,
.message-composer-entries-panel .composer-entries-heading .widget-settings-heading
{
    color: var(--sfr-orange, #f28c28);
    font-size: 12px;
}

.message-composer-entries-panel .composer-entries-heading
{
    align-items: center;
    gap: 14px;
    margin: 0 0 10px;
}

.message-composer-entries-panel .composer-entries-heading .btn
{
    flex: 0 0 auto;
}

.message-composer-layout-help
{
    margin: 0 0 12px;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 10px;
}

.message-composer-workspace-actions
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 14px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(70, 80, 93, .72);
}

.message-composer-workspace-actions .widget-settings-note
{
    margin-right: auto;
}

.message-composer-workspace-actions .btn
{
    min-width: 210px;
}

@media (max-width: 1180px)
{
    #composerPlaylistEntries
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px)
{
    #composerPlaylistEntries
    {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px)
{
    .message-composer-workspace-heading,
    .message-composer-workspace-actions
    {
        align-items: stretch;
        flex-direction: column;
    }

    .message-composer-entries-panel .composer-entries-heading
    {
        align-items: stretch;
        flex-direction: column;
    }

    .message-composer-entries-panel .composer-entries-heading .btn,
    .message-composer-workspace-actions .btn
    {
        width: 100%;
        min-width: 0;
    }
}

.widget-visual-style
{
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sfr-line, #46505d);
}

.widget-photo-choice
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 10px;
    align-items: center;
}

.widget-photo-thumbnail
{
    width: 72px;
    height: 48px;
    border: 1px solid var(--sfr-line, #46505d);
    border-radius: 4px;
    object-fit: cover;
}

.widget-row-colors
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(154px, 190px));
    justify-content: start;
    gap: 8px;
    margin-top: 12px;
}

/* Shared colour editor for every widget. Keep it compact, but make each row
   readable as one intentional control instead of a faint checkbox and swatch
   spread across a wide form. */
.widget-row-color-control
{
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 7px 8px;
    border: 1px solid rgba(84, 97, 112, .9);
    border-radius: 3px;
    background: rgba(0, 0, 0, .16);
    color: #d9e1e8;
    cursor: pointer;
}

.widget-row-color-control:hover
{
    border-color: #718095;
    background: rgba(255, 255, 255, .025);
}

.widget-row-color-control > span
{
    color: #d9e1e8;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.widget-row-color-control input[type="checkbox"]
{
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--sfr-orange, #f28c28);
}

.widget-row-color-control input[type="color"]
{
    width: 34px;
    height: 28px;
    padding: 2px;
    border: 1px solid #647286;
    border-radius: 3px;
    background: #15191e;
    cursor: pointer;
}

.widget-row-color-control input[type="color"]:disabled
{
    opacity: .42;
    cursor: not-allowed;
}

@media (max-width: 520px)
{
    .widget-row-colors
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.menu-import-preview
{
    border-top: 1px solid var(--sfr-line, #39424d);
    padding-top: 12px;
}

.menu-import-page
{
    margin-top: 8px;
    border: 1px solid var(--sfr-line, #39424d);
    border-radius: 4px;
    background: rgba(0, 0, 0, .12);
}

.menu-import-page > summary
{
    cursor: pointer;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
}

.menu-import-rows
{
    margin: 0;
    padding: 0 10px 10px 32px;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 12px;
}

.widget-row-color-control
{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 30px;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

.widget-row-color-control input[type="color"]
{
    width: 30px;
    height: 26px;
    padding: 2px;
    border: 1px solid var(--sfr-line, #46505d);
    border-radius: 4px;
    background: transparent;
}

/* Menu uses compact row controls and page cards so six-row layouts remain
   readable on both a laptop and a phone. These classes are intentionally
   scoped to Menu; other widget cards keep their existing layout. */
.menu-builder,
.menu-csv-import,
.menu-style-section
{
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--sfr-line, #46505d);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.menu-builder > summary,
.menu-csv-import > summary
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.menu-builder > summary small,
.menu-csv-import > summary small
{
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 10px;
    font-weight: 400;
}

.menu-builder-empty
{
    margin: 12px 0 0;
}

.menu-builder-page
{
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--sfr-line, #39424d);
    border-radius: 4px;
    background: rgba(0, 0, 0, .16);
}

.menu-builder-page-header,
.menu-builder-page-actions,
.menu-builder-actions,
.menu-builder-duration
{
    display: flex;
    align-items: center;
    gap: 7px;
}

.menu-builder-page-header
{
    justify-content: space-between;
}

.menu-builder-page-actions .btn
{
    min-width: 30px;
    padding-inline: 7px;
}

.menu-builder-duration
{
    margin: 10px 0;
}

.menu-builder-duration .form-label
{
    margin: 0;
}

.menu-builder-duration .form-control
{
    width: 72px;
    text-align: center;
}

.menu-builder-unit
{
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.menu-builder-row
{
    display: block;
    margin-top: 8px;
}

.menu-builder-row > span,
.menu-builder-row > label
{
    display: block;
    margin-bottom: 4px;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 10px;
}

.menu-builder-row-controls
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 142px;
    gap: 8px;
}

.menu-builder-field-alignment
{
    min-width: 0;
}

.menu-builder-actions
{
    justify-content: flex-end;
    margin-top: 12px;
}

.menu-style-section-heading
{
    margin-bottom: 10px;
    color: var(--sfr-orange, #f28c28);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.menu-style-section + .menu-style-section
{
    margin-top: 10px;
}

.menu-style-section .widget-settings-note
{
    margin: -3px 0 9px;
}

.menu-row-style-grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.menu-row-options
{
    grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
    margin-top: 5px;
}

.menu-row-color-control,
.menu-row-alignment-control
{
    padding: 5px 6px;
    border: 1px solid rgba(70, 80, 93, .75);
    border-radius: 3px;
    background: rgba(0, 0, 0, .10);
}

.menu-row-color-control
{
    grid-template-columns: auto minmax(0, 1fr) 28px;
}

.menu-row-alignment-control
{
    grid-template-columns: minmax(0, 1fr) 70px;
}

.menu-row-alignment-control .form-select
{
    min-width: 0;
    padding: 3px 20px 3px 5px;
}

.menu-workspace-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(70, 80, 93, .72);
}

.menu-workspace-title
{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.menu-workspace-title svg
{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: var(--sfr-orange, #f28c28);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-workspace-title h3
{
    margin: 0;
    color: #f1f3f5;
    font-size: 21px;
}

.menu-workspace-title p
{
    margin: 3px 0 0;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.menu-layout-note
{
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(242, 140, 40, .14);
    color: #f1a04d;
    font-size: 10px;
    font-weight: 700;
}

.menu-workspace-grid
{
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr);
    align-items: start;
    gap: 14px;
}

.menu-workspace-side
{
    display: grid;
    gap: 14px;
    min-width: 0;
}

@media (min-width: 1181px)
{
    .menu-workspace-grid
    {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .menu-workspace-side
    {
        display: contents;
    }
}

.menu-pages-panel,
.menu-import-panel,
.menu-appearance-panel
{
    min-width: 0;
    margin-top: 0;
    padding: 16px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.menu-workspace-section-heading
{
    margin-bottom: 14px;
}

.menu-workspace-section-heading .widget-settings-heading
{
    color: var(--sfr-orange, #f28c28);
    font-size: 12px;
}

.menu-layout-hint
{
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid rgba(70, 80, 93, .58);
    border-radius: 4px;
    background: rgba(0, 0, 0, .13);
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 10px;
    line-height: 1.5;
}

.menu-appearance-panel .menu-style-section:first-of-type
{
    margin-top: 0;
}

.menu-workspace-actions
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 14px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(70, 80, 93, .72);
}

.menu-workspace-actions .widget-settings-note
{
    margin-right: auto;
}

.menu-workspace-actions .btn
{
    min-width: 210px;
}

@media (max-width: 1050px)
{
    .menu-workspace-grid
    {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px)
{
    .menu-workspace-heading,
    .menu-workspace-actions
    {
        align-items: stretch;
        flex-direction: column;
    }

    .menu-workspace-actions .btn
    {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 620px)
{
    .menu-builder-row-controls
    {
        grid-template-columns: 1fr;
    }

    .menu-row-style-grid
    {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .menu-builder-actions
    {
        justify-content: stretch;
    }

    .menu-builder-actions .btn
    {
        flex: 1;
    }

    .composer-entry-header
    {
        align-items: stretch;
        flex-direction: column;
    }

    .composer-entry-header-controls,
    .composer-entry-actions
    {
        justify-content: space-between;
    }

    .composer-entry-row
    {
        grid-template-columns: 1fr;
    }

    .composer-entry-row-style
    {
        justify-content: flex-start;
    }

    .composer-entry-actions
    {
        flex-direction: column;
    }

    .composer-entry-actions .btn
    {
        width: 100%;
    }

    .weather-location-grid,
    .weather-status-card,
    .airport-source-grid,
    .airport-behaviour-grid,
    .train-options-grid,
    .train-rotation-grid
    {
        grid-template-columns: 1fr;
    }

    .airport-live-toggle
    {
        margin-top: 0;
    }
}

.widget-duration
{
    width: 44px;
    min-width: 0;

    text-align: center;
}

.widget-duration-input
{
    display: grid;
    grid-template-columns: 44px auto 44px auto;
    align-items: center;
    gap: 4px;

    grid-column: 2;
    grid-row: 1;
    justify-content: end;

    color: #8b94a3;
    font-size: 12px;
    font-weight: 600;
}

.widget-derived-duration
{
    color: #9ba7b4;
    font-size: 11px;
    font-weight: 600;
}

.widget-playlist-duration-input
{
    display: grid;
    grid-template-columns: 46px auto 46px auto;
    align-items: center;
    gap: 5px;
    color: #9ba7b4;
    font-size: 11px;
    font-weight: 600;
}

.widget-playlist-duration-input .form-control
{
    width: 46px;
    min-height: 30px;
    padding: 4px;
    text-align: center;
}

#widgetPlaylistRows .widget-derived-duration
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#widgetPlaylistRows .widget-derived-duration .btn
{
    flex: 0 0 auto;
    padding: 3px 8px;
    font-size: 10px;
}

.widget-playback-settings
{
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid #353b45;
    border-radius: 8px;
    background: #1e2228;
}

.widget-playback-settings > div:first-child
{
    flex: 1 1 auto;
    min-width: 0;
}

.widget-playback-settings .widget-settings-heading
{
    margin-top: 0 !important;
}

.widget-playback-settings .widget-duration-input
{
    flex: 0 0 auto;
    grid-column: auto;
    grid-row: auto;
}

.widget-playback-autosave
{
    flex: 0 0 auto;
    color: #79d491;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.widget-playlist-row .form-check-label
{
    color: #f8f9fa;
    font-weight: 600;
}

.widget-playlist-row .form-check
{
    min-width: 0;
}

.widget-order-controls
{
    display: flex;
    grid-column: 3;
    grid-row: 1;
    gap: 4px;
}

.widget-order-controls .btn { min-width: 30px; padding-inline: 7px; }

.widget-playlist-row .form-control
{
    min-height: 36px;
}
@media (max-width: 880px) {
    #widgetPlaylistRows { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .widget-settings-card .card-body { max-height: none; overflow: visible; }
    .widget-playlist-row { grid-template-columns:minmax(0, 1fr) auto; gap:8px; }
    .widget-duration-input { grid-column:1 / -1; grid-row:2; justify-content:start; }
    .widget-order-controls { grid-column:2; grid-row:1; }
    .widget-derived-duration { grid-column:1 / -1; grid-row:2; }
    .widget-playlist-duration-input { grid-column:1 / -1; grid-row:2; justify-content:start; }
    .widget-playback-settings { align-items:flex-start; flex-wrap:wrap; }
}

.display-animation-card
{
    margin-top: 14px;
}

.display-animation-control
{
    display: flex;
    align-items: center;
    gap: 12px;
}

.display-animation-control .form-range
{
    flex: 1;
    min-width: 0;
}

.display-animation-control output
{
    min-width: 58px;

    color: #f8f9fa;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

@media (min-width: 1101px)
{
    .widget-settings-card .card-body
    {
        max-height: none;
        overflow: visible;
    }
}

.widget-weather-status
{
    display: flex;
    align-items: center;
    gap: 10px;

    color: #c5ccd6;
    font-size: 13px;
}

.weather-workspace-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(70, 80, 93, .72);
}

.weather-workspace-title
{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.weather-workspace-title svg
{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: var(--sfr-orange, #f28c28);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.weather-workspace-title h3
{
    margin: 0;
    color: #f1f3f5;
    font-size: 21px;
}

.weather-workspace-title p
{
    margin: 3px 0 0;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.weather-workspace-grid
{
    display: grid;
    grid-template-columns: minmax(230px, .9fr) minmax(300px, 1.25fr) minmax(220px, .8fr);
    align-items: stretch;
    gap: 14px;
}

.weather-settings-section
{
    min-width: 0;
    margin-top: 0;
    padding: 16px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.weather-section-heading
{
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.weather-section-heading .widget-settings-heading
{
    color: var(--sfr-orange, #f28c28);
    font-size: 12px;
}

.weather-auto-note
{
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(32, 161, 76, .18);
    color: #79d491;
    font-size: 10px;
    font-weight: 700;
}

.weather-location-grid
{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.weather-location-grid .form-label
{
    margin-bottom: 5px;
}

.weather-appearance-section
{
    margin-top: 0;
}

.weather-row-colours-heading
{
    margin: 13px 0 6px;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.weather-row-color-control
{
    padding: 5px 6px;
    border: 1px solid rgba(70, 80, 93, .75);
    border-radius: 3px;
    background: rgba(0, 0, 0, .10);
}

.weather-status-card
{
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    margin-top: 0;
    padding: 16px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .16);
}

.weather-workspace-actions
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 14px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(70, 80, 93, .72);
}

.weather-workspace-actions .form-hint
{
    margin-right: auto;
}

.weather-workspace-actions .btn
{
    min-width: 210px;
}

@media (max-width: 1180px)
{
    .weather-workspace-grid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-status-card
    {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px)
{
    .weather-workspace-heading,
    .weather-workspace-actions
    {
        align-items: stretch;
        flex-direction: column;
    }

    .weather-workspace-grid
    {
        grid-template-columns: 1fr;
    }

    .weather-status-card
    {
        grid-column: auto;
    }

    .weather-workspace-actions .btn
    {
        width: 100%;
        min-width: 0;
    }
}

.weather-status-label
{
    margin-bottom: 5px;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.clock-workspace-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(70, 80, 93, .72);
}

.clock-workspace-title
{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.clock-workspace-title svg
{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: var(--sfr-orange, #f28c28);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.clock-workspace-title h3
{
    margin: 0;
    color: #f1f3f5;
    font-size: 21px;
}

.clock-workspace-title p
{
    margin: 3px 0 0;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.clock-auto-note
{
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(32, 161, 76, .18);
    color: #79d491;
    font-size: 10px;
    font-weight: 700;
}

.clock-workspace-grid
{
    display: grid;
    grid-template-columns: minmax(230px, .9fr) minmax(210px, .72fr) minmax(300px, 1.25fr);
    align-items: stretch;
    gap: 14px;
}

.clock-settings-section
{
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.clock-section-heading
{
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.clock-section-heading .widget-settings-heading
{
    color: var(--sfr-orange, #f28c28);
    font-size: 12px;
}

.clock-date-toggle
{
    margin: 18px 0;
    padding: 12px 12px 12px 42px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 4px;
    background: rgba(0, 0, 0, .13);
}

.clock-row-colours-heading
{
    margin: 13px 0 6px;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.clock-workspace-actions
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 14px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(70, 80, 93, .72);
}

.clock-workspace-actions .form-hint
{
    margin-right: auto;
}

.clock-workspace-actions .btn
{
    min-width: 210px;
}

@media (max-width: 1180px)
{
    .clock-workspace-grid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clock-appearance-section
    {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px)
{
    .clock-workspace-heading,
    .clock-workspace-actions
    {
        align-items: stretch;
        flex-direction: column;
    }

    .clock-workspace-grid
    {
        grid-template-columns: 1fr;
    }

    .clock-appearance-section
    {
        grid-column: auto;
    }

    .clock-workspace-actions .btn
    {
        width: 100%;
        min-width: 0;
    }
}

.news-settings-section
{
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.news-section-heading
{
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.news-section-heading .widget-settings-heading
{
    color: var(--sfr-orange, #f28c28);
    font-size: 12px;
}

.news-auto-note
{
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(32, 161, 76, .18);
    color: #79d491;
    font-size: 10px;
    font-weight: 700;
}

.news-appearance-section
{
    margin-top: 10px;
}

.news-row-colours-heading
{
    margin: 13px 0 6px;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.news-row-color-control
{
    padding: 5px 6px;
    border: 1px solid rgba(70, 80, 93, .75);
    border-radius: 3px;
    background: rgba(0, 0, 0, .10);
}

.news-workspace-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(70, 80, 93, .72);
}

.news-workspace-title
{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.news-workspace-title svg
{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: var(--sfr-orange, #f28c28);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.news-workspace-title h3
{
    margin: 0;
    color: #f1f3f5;
    font-size: 21px;
}

.news-workspace-title p
{
    margin: 3px 0 0;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.news-workspace-grid
{
    display: grid;
    grid-template-columns: minmax(280px, 1.1fr) minmax(240px, .8fr) minmax(250px, .9fr);
    align-items: stretch;
    gap: 14px;
}

.news-workspace-grid .news-settings-section
{
    min-width: 0;
    margin-top: 0;
    padding: 16px;
}

.news-rows-section .widget-row-colors
{
    grid-template-columns: 1fr;
}

.news-workspace-actions
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 14px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(70, 80, 93, .72);
}

.news-workspace-actions .form-hint
{
    margin-right: auto;
}

.news-workspace-actions .btn
{
    min-width: 210px;
}

@media (max-width: 1180px)
{
    .news-workspace-grid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-rows-section
    {
        grid-column: 1 / -1;
    }

    .news-rows-section .widget-row-colors
    {
        grid-template-columns: repeat(auto-fit, minmax(154px, 190px));
    }
}

@media (max-width: 700px)
{
    .news-workspace-heading,
    .news-workspace-actions
    {
        align-items: stretch;
        flex-direction: column;
    }

    .news-workspace-grid
    {
        grid-template-columns: 1fr;
    }

    .news-rows-section
    {
        grid-column: auto;
    }

    .news-rows-section .widget-row-colors
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-workspace-actions .btn
    {
        width: 100%;
        min-width: 0;
    }
}

.airport-settings-section
{
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.airport-section-heading
{
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.airport-section-heading .widget-settings-heading
{
    color: var(--sfr-orange, #f28c28);
    font-size: 12px;
}

.airport-source-grid,
.airport-behaviour-grid
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, .42fr);
    gap: 10px;
}

.airport-source-grid .form-label,
.airport-behaviour-grid .form-label
{
    margin-bottom: 5px;
}

.airport-behaviour-section,
.airport-appearance-section
{
    margin-top: 10px;
}

.airport-live-toggle
{
    margin-top: 26px;
}

.airport-row-colours-heading
{
    margin: 13px 0 6px;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.airport-row-color-control
{
    padding: 5px 6px;
    border: 1px solid rgba(70, 80, 93, .75);
    border-radius: 3px;
    background: rgba(0, 0, 0, .10);
}

.airport-workspace-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(70, 80, 93, .72);
}

.airport-workspace-title
{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.airport-workspace-title svg
{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: var(--sfr-orange, #f28c28);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.airport-workspace-title h3
{
    margin: 0;
    color: #f1f3f5;
    font-size: 21px;
}

.airport-workspace-title p
{
    margin: 3px 0 0;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.airport-live-note
{
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(32, 161, 76, .18);
    color: #79d491;
    font-size: 10px;
    font-weight: 700;
}

.airport-workspace-grid
{
    display: grid;
    grid-template-columns: minmax(300px, 1.15fr) minmax(240px, .78fr) minmax(270px, .95fr);
    align-items: stretch;
    gap: 14px;
}

.airport-workspace-grid .airport-settings-section
{
    min-width: 0;
    margin-top: 0;
    padding: 16px;
}

.airport-workspace-grid .airport-behaviour-grid
{
    grid-template-columns: 1fr;
}

.airport-workspace-grid .airport-live-toggle
{
    margin-top: 0;
}

.airport-appearance-section .widget-row-colors
{
    grid-template-columns: 1fr;
}

.airport-workspace-actions
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 14px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(70, 80, 93, .72);
}

.airport-workspace-actions .form-hint
{
    margin-right: auto;
}

.airport-workspace-actions .btn
{
    min-width: 220px;
}

@media (max-width: 1180px)
{
    .airport-workspace-grid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .airport-appearance-section
    {
        grid-column: 1 / -1;
    }

    .airport-appearance-section .widget-row-colors
    {
        grid-template-columns: repeat(auto-fit, minmax(154px, 190px));
    }
}

@media (max-width: 700px)
{
    .airport-workspace-heading,
    .airport-workspace-actions
    {
        align-items: stretch;
        flex-direction: column;
    }

    .airport-workspace-grid
    {
        grid-template-columns: 1fr;
    }

    .airport-appearance-section
    {
        grid-column: auto;
    }

    .airport-appearance-section .widget-row-colors
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .airport-workspace-actions .btn
    {
        width: 100%;
        min-width: 0;
    }
}

.train-settings-section
{
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.train-section-heading
{
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.train-section-heading .widget-settings-heading
{
    color: var(--sfr-orange, #f28c28);
    font-size: 12px;
}

.train-content-section,
.train-background-section
{
    margin-top: 10px;
}

.train-options-grid
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.train-options-grid .form-label,
.train-rotation-grid .form-label
{
    margin-bottom: 5px;
}

.train-rotation-heading
{
    margin: 13px 0 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(70, 80, 93, .68);
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.train-rotation-toggle
{
    margin-bottom: 10px;
}

.train-rotation-grid
{
    display: grid;
    grid-template-columns: minmax(110px, .32fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.train-seconds-input
{
    display: flex;
    align-items: center;
    gap: 7px;
}

.train-seconds-input .form-control
{
    width: 74px;
    text-align: center;
}

.train-seconds-input span
{
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
    font-weight: 600;
}

.train-save-actions
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 14px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(70, 80, 93, .72);
}

.train-save-actions .form-hint
{
    margin-right: auto;
}

.train-save-actions .btn
{
    min-width: 210px;
}

.train-workspace-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(70, 80, 93, .72);
}

.train-workspace-title
{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.train-workspace-title svg
{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: var(--sfr-orange, #f28c28);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.train-workspace-title h3
{
    margin: 0;
    color: #f1f3f5;
    font-size: 21px;
}

.train-workspace-title p
{
    margin: 3px 0 0;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.train-live-note
{
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(32, 161, 76, .18);
    color: #79d491;
    font-size: 10px;
    font-weight: 700;
}

.train-workspace-grid
{
    display: grid;
    grid-template-columns: minmax(270px, .9fr) minmax(300px, 1.05fr) minmax(300px, 1.05fr);
    align-items: stretch;
    gap: 14px;
}

.train-workspace-grid .train-settings-section
{
    min-width: 0;
    margin-top: 0;
    padding: 16px;
}

.train-workspace-grid .train-options-grid
{
    grid-template-columns: 1fr;
}

@media (max-width: 1180px)
{
    .train-workspace-grid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .train-background-section
    {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px)
{
    .train-workspace-heading,
    .train-save-actions
    {
        align-items: stretch;
        flex-direction: column;
    }

    .train-workspace-grid
    {
        grid-template-columns: 1fr;
    }

    .train-background-section
    {
        grid-column: auto;
    }

    .train-save-actions .btn
    {
        width: 100%;
        min-width: 0;
    }
}

.widget-settings-note
{
    margin: 16px 0 0;

    color: #8b94a3;
    font-size: 12px;
}

.google-font-preview
{
    margin-top: 10px;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid #353b45;
    border-radius: 6px;
    color: #f28c28;
    background: #171b21;
    font-size: 18px;
    letter-spacing: .08em;
    white-space: nowrap;
}

.preview-canvas
{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: 520px;

    background: #000;
    overflow: hidden;
}