/* Plays (Operations) — page chrome that matches the Agent Center dark bar, plus the
   "clock feel" scheduling picker shared by the page modal and the chat Swal modal.
   Scoped to dedicated classes so it never clobbers Bootstrap's global .navbar. */

/* Navbar AND page width both come from agentmode.css: the page wraps content in
   .agent-automation-container (max-width 1400px, centered), exactly like the Agent
   Center, so the dark bar stops short of the edge instead of running end-to-end and
   the floating token cluster sits in the right margin, clear of the bar. No navbar
   overrides needed here. */

/* New Play button — identical styling to the card "Run now" button (.pa-run). */
.plays-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 9px;
    min-height: 38px;
    background: var(--primary, #00b3c9);
    border: 1px solid var(--primary, #00b3c9);
    color: #fff;
    cursor: pointer;
    transition: background .12s, filter .12s;
}
.plays-new-btn:hover { filter: brightness(.94); background: var(--primary, #00b3c9); color: #fff; }
/* Danger button for the delete confirm modal. */
.pm-danger { background: #dc2626; color: #fff; }
.pm-danger:hover { filter: brightness(.94); }

/* ── Clock-feel schedule picker (cadence chips + time-of-day) ─────────────────── */
.sched-picker { display: flex; flex-direction: column; gap: 12px; text-align: left; }

.sched-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.sched-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid #d7dbe0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-weight: 500;
}

.sched-chip i { font-size: 18px; color: var(--primary, #00b3c9); }
.sched-chip small { display: block; font-weight: 400; color: #8a929b; font-size: 11px; }

.sched-chip:hover { border-color: var(--primary, #00b3c9); }

.sched-chip.active {
    border-color: var(--primary, #00b3c9);
    background: color-mix(in srgb, var(--primary, #00b3c9) 10%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #00b3c9) 18%, transparent);
}

/* The time-of-day row, revealed only for daily/weekly — this is the "clock". */
.sched-time {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid #d7dbe0;
    border-radius: 12px;
    background: #fff;
}
.sched-time.show { display: flex; }
.sched-time i { font-size: 20px; color: var(--primary, #00b3c9); }
.sched-time input[type="time"] { font-size: 16px; padding: 6px 8px; border: 1px solid #d7dbe0; border-radius: 8px; }
.sched-tz { font-size: 13px; padding: 6px 8px; border: 1px solid #d7dbe0; border-radius: 8px; max-width: 180px; }
[data-theme="dark"] .sched-tz { background: #1f2230; border-color: #3a3d4a; color: #e8e8e8; }

[data-theme="dark"] .sched-chip,
[data-theme="dark"] .sched-time { background: #2a2d3a; border-color: #3a3d4a; color: #e8e8e8; }

/* ── Self-contained modal (chat page is Layout=null: no Bootstrap, no Swal) ───── */
.plays-modal {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0, 0, 0, .5);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.plays-modal-card {
    background: #fff; border-radius: 16px; width: min(540px, 94vw);
    max-height: 92vh; overflow-y: auto;
    padding: 24px; box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
}
.plays-modal-card h3 { font-size: 19px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.pm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.pm-x { background: none; border: none; font-size: 24px; line-height: 1; color: #9aa2ab; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.pm-x:hover { color: #333; background: #f1f3f5; }
.pm-field-label { display: block; font-size: 13px; font-weight: 600; color: #4b5560; margin: 16px 0 7px; }
.pm-field-label:first-of-type { margin-top: 0; }
.plays-modal-card .pm-name,
.plays-modal-card .pm-textarea {
    width: 100%; padding: 11px 13px; border: 1.5px solid #e1e5ea;
    border-radius: 10px; font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.plays-modal-card .pm-textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.plays-modal-card .pm-name:focus,
.plays-modal-card .pm-textarea:focus {
    outline: none; border-color: var(--primary, #00b3c9);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #00b3c9) 16%, transparent);
}
.plays-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.plays-modal-actions button { padding: 9px 18px; border-radius: 10px; font-weight: 600; cursor: pointer; border: none; transition: background .15s, filter .15s; }
.pm-cancel { background: #eef0f2; color: #333; }
.pm-cancel:hover { background: #e2e6ea; }
.pm-save { background: var(--primary, #00b3c9); color: #fff; }
.pm-save:hover { filter: brightness(.94); }
.plays-toast {
    position: fixed; bottom: 1rem; right: 1rem; z-index: 3100; max-width: 360px;
    padding: 12px 16px; border-radius: 10px; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.plays-toast.ok { background: #16a34a; }
.plays-toast.err { background: #dc2626; }
[data-theme="dark"] .plays-modal-card { background: #2a2d3a; color: #e8e8e8; }
[data-theme="dark"] .plays-modal-card .pm-name,
[data-theme="dark"] .plays-modal-card .pm-textarea { background: #1f2230; border-color: #3a3d4a; color: #e8e8e8; }
[data-theme="dark"] .pm-x:hover { color: #fff; background: #3a3d4a; }
[data-theme="dark"] .pm-cancel { background: #3a3d4a; color: #e8e8e8; }

/* ── Plays cards (Stage 4 UI) ─────────────────────────────────────────────────── */
.play-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid #e6e9ee; border-radius: 14px;
    padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.play-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.10); border-color: #d7dce3; }
.play-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.play-name { font-size: 16px; font-weight: 700; margin: 0; line-height: 1.3; }
.play-fromchat { color: var(--primary, #00b3c9); font-size: 12px; margin-left: 4px; }
.play-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.play-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pb-grey { background: #eef1f4; color: #5b6470; }
.pb-info { background: color-mix(in srgb, var(--primary,#00b3c9) 14%, #fff); color: var(--primary-dark,#0090a3); }
.pb-ok { background: #dcfce7; color: #15803d; }
.pb-err { background: #fee2e2; color: #b91c1c; }
.pb-run { background: #e0f2fe; color: #0369a1; }
.pb-idle { background: #f1f3f5; color: #8a929b; }
.play-objective { color: #5b6470; font-size: 13.5px; line-height: 1.5; margin: 4px 0 10px; flex-grow: 1; }
.play-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.play-tag { font-size: 10.5px; font-weight: 600; background: #f3f5f8; color: #55606c; padding: 2px 8px; border-radius: 6px; text-transform: capitalize; }
.play-vars-hint { font-size: 12px; color: #8a929b; margin-bottom: 8px; }
.play-vars-hint i { color: var(--primary,#00b3c9); margin-right: 4px; }
.play-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #8a929b; margin-bottom: 8px; }
.play-lastresult { font-size: 12px; color: #6b7280; background: #f7f8fa; border-radius: 8px; padding: 7px 10px; margin-bottom: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.pa-btn {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
    padding: 7px 12px; border-radius: 9px; border: 1px solid #dde1e7; background: #fff; color: #3a4350;
    cursor: pointer; min-height: 38px; transition: background .12s, border-color .12s, color .12s;
}
.pa-btn:hover { background: #f4f6f8; border-color: #cbd2da; }
.pa-btn:disabled { opacity: .6; cursor: default; }
.pa-run { background: var(--primary,#00b3c9); border-color: var(--primary,#00b3c9); color: #fff; }
.pa-run:hover { filter: brightness(.94); background: var(--primary,#00b3c9); }
.pa-del { margin-left: auto; color: #c2410c; border-color: #f0d6cc; }
.pa-del:hover { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }

/* History (inline run list) */
.op-runs-inner { margin-top: 12px; border-top: 1px solid #eef1f4; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.rr-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }
.rr-ok { color: #15803d; } .rr-err { color: #b91c1c; } .rr-skip { color: #8a929b; } .rr-run { color: #0369a1; }
.rr-trig { background: #eef1f4; color: #5b6470; border-radius: 5px; padding: 0 6px; font-size: 11px; }
.rr-row a { color: var(--primary,#00b3c9); }

/* Empty state */
.play-empty { text-align: center; max-width: 520px; margin: 24px auto; padding: 28px 20px; }
.play-empty-icon { font-size: 40px; color: var(--primary,#00b3c9); margin-bottom: 14px; }
.play-empty h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.play-empty p { color: #6b7280; font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; }
.play-empty .plays-new-btn { margin: 0 auto; }
.play-empty-hint { margin-top: 14px; font-size: 12.5px; color: #9aa2ab; }

/* Editor: advanced/variables */
.pm-advanced { margin: 14px 0 2px; }
.pm-advanced summary { font-size: 13px; font-weight: 600; color: var(--primary-dark,#0090a3); cursor: pointer; }
.pm-help { font-size: 12px; color: #8a929b; margin: 8px 0; line-height: 1.5; }
.pm-help code { background: #f1f3f5; padding: 1px 5px; border-radius: 4px; color: #4b5560; }

/* ── Dark mode ─────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .play-card { background: #23262f; border-color: #343844; box-shadow: none; }
[data-theme="dark"] .play-card:hover { border-color: #454b59; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
[data-theme="dark"] .play-name { color: #f1f2f4; }
[data-theme="dark"] .play-objective { color: #aab2bd; }
[data-theme="dark"] .play-meta, [data-theme="dark"] .play-vars-hint, [data-theme="dark"] .play-empty-hint { color: #8a929b; }
[data-theme="dark"] .play-tag { background: #2d313b; color: #b6bdc7; }
[data-theme="dark"] .play-lastresult { background: #2a2e37; color: #aab2bd; }
[data-theme="dark"] .pb-grey { background: #343a45; color: #b6bdc7; }
[data-theme="dark"] .pb-idle { background: #2d313b; color: #8a929b; }
[data-theme="dark"] .pa-btn { background: #2a2e37; border-color: #3a3f4b; color: #d7dce3; }
[data-theme="dark"] .pa-btn:hover { background: #323742; }
[data-theme="dark"] .pa-run { background: var(--primary,#00b3c9); color: #fff; }
[data-theme="dark"] .pa-del { color: #fda4af; border-color: #4a3a3a; }
[data-theme="dark"] .op-runs-inner { border-top-color: #343844; }
[data-theme="dark"] .play-empty h3 { color: #f1f2f4; }
[data-theme="dark"] .play-empty p { color: #aab2bd; }
[data-theme="dark"] .pm-help code { background: #2d313b; color: #b6bdc7; }

/* ── Mobile ────────────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .play-actions .pa-btn { flex: 1 1 auto; justify-content: center; }
    .pa-del { flex: 0 0 auto; }
    .plays-modal-card { padding: 18px; border-radius: 14px; }
    .play-badges { justify-content: flex-start; }
}