/* Cast Producer — app styles on top of the Elevien design system (elevien-ds.css). */

/* ---------- shell ---------- */
.cp-menu-button { background: none; border: 0; width: 100%; text-align: left; padding: 8px 14px; font: inherit; color: var(--status-danger); }
.cp-menu-button:hover { background: var(--bg-page); }
.cp-topbar-tournament { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.cp-required::after { content: ' *'; color: var(--brand-primary); }
.cp-soon { color: var(--status-danger); font-weight: var(--fw-semibold); }
kbd { background: var(--bg-table-header); color: var(--fg-2); border: 1px solid var(--border-default); border-radius: var(--radius-xs); padding: 0 5px; font-size: 11px; }

/* ---------- cast list ---------- */
.cp-cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-4); }
.cp-cast-card--expired { opacity: .8; }
.cp-cast-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.cp-cast-card__name { margin: 0; font-size: var(--fs-lg); }
.cp-cast-card__name a { color: inherit; text-decoration: none; }
.cp-cast-card__name a:hover { color: var(--brand-primary); }
.cp-cast-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.cp-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px var(--sp-4); }
.cp-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xl); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- producer ---------- */
.cp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: 2px; }
.cp-live { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 900px) { .cp-live { grid-template-columns: 1fr; } }
.cp-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cp-section-head .el-section__title { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.cp-onair__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0 0 0 rgba(255,43,81,.6); animation: cp-pulse 2s infinite; }
@keyframes cp-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,43,81,.6); } 70% { box-shadow: 0 0 0 10px rgba(255,43,81,0); } 100% { box-shadow: 0 0 0 0 rgba(255,43,81,0); } }
.cp-onair__card { border: 2px solid var(--brand-primary); border-radius: var(--radius-lg); padding: var(--sp-4); background: var(--brand-primary-soft); }
.cp-onair__type { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.2; }
.cp-onair__summary { font-size: var(--fs-lg); margin-top: var(--sp-1); overflow-wrap: anywhere; }
.cp-onair__meta { margin-top: var(--sp-2); }
.cp-onair__empty { padding: var(--sp-4); border: 2px dashed var(--border-default); border-radius: var(--radius-lg); }
.cp-queue__list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.cp-queue__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-default); }
.cp-queue__item:last-child { border-bottom: 0; }
.cp-queue__pos { width: 24px; text-align: right; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.cp-queue__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cp-queue__text .el-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-queue__remove { flex-shrink: 0; background: none; border: 0; color: var(--fg-3); width: 32px; height: 32px; border-radius: var(--radius-full); }
.cp-queue__remove:hover { background: var(--status-danger-soft); color: var(--status-danger); }
.cp-queue__empty { padding: var(--sp-2) 0; }
.cp-hotkeys { margin: var(--sp-3) 0 0; }

/* deck extras */
.el-deck__grid .el-deck-key { min-height: 110px; }
.cp-deck-key__hotkey { position: absolute; left: 8px; bottom: 6px; font-size: 10px; opacity: .55; font-variant-numeric: tabular-nums; }
.cp-deck-key__warn { position: absolute; top: 8px; right: 38px; color: var(--status-warning); }
.cp-deck-key--invalid { outline: 2px dashed var(--status-warning); outline-offset: -2px; }
.cp-deck--arranging .el-deck-key { cursor: grab; animation: cp-wiggle .35s ease-in-out infinite alternate; }
.cp-deck--arranging .el-deck-key:nth-child(2n) { animation-delay: .15s; }
.cp-deck-key--dragging { opacity: .4; }
@keyframes cp-wiggle { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
.cp-combobox-panel { position: relative; max-height: 300px; display: flex; flex-direction: column; margin-top: 4px; overflow: hidden; }

/* ---------- ported from elevien-management producer.html.twig ---------- */
@keyframes el-producer-flash {
    from { box-shadow: inset 0 0 0 999px var(--status-info-soft); }
    to { box-shadow: inset 0 0 0 999px transparent; }
}
.el-producer--new { animation: el-producer-flash 2.5s ease-out; }
.el-producer--removing { opacity: .45; pointer-events: none; transition: opacity .2s ease; }

.el-producer-active {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 1px var(--brand-primary);
}
.el-producer-config {
    font-size: 12px;
    word-break: break-all;
}
.el-producer-queue td { vertical-align: middle; }
.el-producer-queue .el-producer-pos {
    width: 48px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
}

/* ---- stream deck ---- */
.el-deck__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-3);
}
.el-deck-key {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 96px;
    padding: var(--sp-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-table-header);
    color: var(--fg-1);
    text-align: left;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
    user-select: none;
}
.el-deck-key:hover { filter: brightness(1.04); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.el-deck-key:active { transform: scale(.97); }
.el-deck-key:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.el-deck-key--primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.el-deck-key--success { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.el-deck-key--info    { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.el-deck-key--warning { background: #d69e2e; border-color: #d69e2e; color: #fff; }
.el-deck-key--dark    { background: var(--bg-sidebar); border-color: var(--bg-sidebar); color: #fff; }
.el-deck-key__label {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.el-deck-key__type {
    font-size: 11px;
    opacity: .75;
    margin-top: var(--sp-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.el-deck-key__edit {
    position: absolute; top: 6px; right: 6px;
    width: 26px; height: 26px;
    border: 0; border-radius: var(--radius-full);
    background: rgba(255,255,255,.25);
    color: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .12s ease;
}
.el-deck-key:hover .el-deck-key__edit, .el-deck-key:focus-within .el-deck-key__edit { opacity: 1; }
.el-deck-key--neutral .el-deck-key__edit { background: rgba(0,0,0,.08); }
.el-deck-key--sending { pointer-events: none; opacity: .7; }
.el-deck-key--sending .el-deck-key__label::after {
    content: '…';
}
@keyframes el-deck-sent {
    0% { box-shadow: 0 0 0 0 rgba(31,157,85,.9); }
    100% { box-shadow: 0 0 0 14px rgba(31,157,85,0); }
}
.el-deck-key--sent { animation: el-deck-sent .9s ease-out; }
@keyframes el-deck-failed {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.el-deck-key--failed { animation: el-deck-failed .3s ease-in-out 2; box-shadow: 0 0 0 2px #d9333f; }

.el-deck-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
@media (max-width: 640px) { .el-deck-form__row { grid-template-columns: 1fr; } }
#deck-modal .form-check.form-switch { padding-left: 2.75em; }
.el-deck-json {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.45;
    min-height: 260px;
    resize: vertical;
    white-space: pre;
}
.el-deck-or {
    display: flex; align-items: center; gap: var(--sp-3);
    color: var(--fg-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
    margin: var(--sp-3) 0;
}
.el-deck-or::before, .el-deck-or::after { content: ''; flex: 1; border-top: 1px solid var(--border-default); }
/* ---- picture-in-picture cast preview ---- */
.el-pip {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 480px;
    min-width: 280px;
    max-width: calc(100vw - 32px);
    z-index: 1040;
    background: var(--bg-sidebar);
    color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    overflow: hidden;
    resize: horizontal;
}
.el-pip[hidden] { display: none; }
.el-pip__bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    padding: 6px 8px 6px 12px;
    font-size: var(--fs-sm);
    cursor: move;
    user-select: none;
}
.el-pip__title { display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-pip__actions { display: inline-flex; gap: 2px; }
.el-pip__btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius-sm);
    background: transparent; color: rgba(255,255,255,.8);
    text-decoration: none;
}
.el-pip__btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.el-pip__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.el-pip__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.el-pip--dragging { opacity: .92; }
.el-pip--dragging iframe { pointer-events: none; }

.el-deck-import-mode {
    display: flex; gap: var(--sp-5); flex-wrap: wrap;
    margin-top: var(--sp-3); padding-top: var(--sp-3);
    border-top: 1px solid var(--border-default);
}

/* ---------- cast settings ---------- */
.cp-type-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 0 var(--sp-5); }
.cp-type-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px solid var(--border-default); }
.cp-type-row__duration { width: 110px; flex-shrink: 0; }

/* deck send feedback: floating, never pushes the buttons */
.cp-toasts { position: fixed; left: 24px; bottom: 24px; z-index: 1050; width: min(420px, calc(100vw - 48px)); pointer-events: none; }
.cp-toasts .alert { pointer-events: auto; margin: 0; box-shadow: var(--shadow-overlay); }
.el-deck { margin-bottom: var(--sp-4); }