* { box-sizing: border-box; }

:root {
    --bg: #1b1b1c;
    --surface: #252527;
    --rail: #1f1f21;
    --input: #2c2c2f;
    --hover: #333336;
    --row-hover: #2a2a2d;
    --row-current: #3d2224;
    --border: #3a3a3d;
    --row-border: #303033;
    --input-border: #45454a;
    --text: #ececed;
    --muted: #a1a1a6;
    --accent: #e03c3c;
    --accent-hover: #f05555;
    --accent-strong: #ff4d4d;
    --accent-soft: #ff8a8a;
    --on-accent: #ffffff;
    --danger: #8f1f1f;
    --marker: #d0d0d4;
    --success-bg: #1e3324;
    --success-text: #86d99b;
    --error-bg: #3d1c1e;
    --warning-bg: #3a3220;
    --warning-text: #f0d48a;
}

body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

a { color: var(--accent-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.navbar .brand { font-weight: 700; font-size: 1.1rem; color: #fff; }

.nav-links { display: flex; align-items: center; gap: 1rem; }
.nav-user { color: var(--muted); font-size: 0.9rem; }

.inline-form { display: inline; }
.link-button {
    background: none; border: none; color: var(--accent-soft); cursor: pointer;
    font: inherit; padding: 0;
}
.link-button:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.message { padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 0.5rem; }
.message.success { background: var(--success-bg); color: var(--success-text); }
.message.error { background: var(--error-bg); color: var(--accent-soft); }
.message.warning { background: var(--warning-bg); color: var(--warning-text); }

.form-input,
form input[type=text], form input[type=password], form input[type=email] {
    width: 100%; padding: 0.5rem; margin-bottom: 0.75rem;
    background: var(--input); border: 1px solid var(--input-border); border-radius: 6px;
    color: var(--text);
}

form label { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.85rem; }

.btn {
    display: inline-block; padding: 0.5rem 1rem; border-radius: 6px;
    background: var(--accent); color: var(--on-accent); border: none; cursor: pointer;
    font-weight: 600;
}
.btn:hover { background: var(--accent-hover); }
.btn.danger { background: var(--danger); }
.btn.active { background: var(--accent-strong); box-shadow: 0 0 0 2px var(--text) inset; }

#ctl-prev-play:disabled, #ctl-next-play:disabled { opacity: 0.35; cursor: default; }
#ctl-prev-play:disabled:hover, #ctl-next-play:disabled:hover { background: transparent; }

.video-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.video-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem;
}

.player-layout { display: flex; flex-direction: column; gap: 1rem; }

.player-shell { background: #000; }
.player-shell:fullscreen { display: flex; flex-direction: column; justify-content: center; }

/* --- video area: a vertical tool rail beside the video, custom controls below --- */
.video-frame { display: flex; gap: 0; background: #000; border-radius: 8px 8px 0 0; overflow: hidden; }

.tool-rail {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 0.5rem 0.35rem; background: var(--rail); flex-shrink: 0;
}
.tool-rail-sep { width: 70%; height: 1px; background: var(--border); margin: 0.4rem 0; }
.tool-btn {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 6px; color: var(--muted); cursor: pointer;
    font-weight: 700; font-size: 0.85rem;
}
.tool-btn:hover { background: var(--hover); color: var(--text); }
.tool-btn.active { background: var(--accent); color: var(--on-accent); }
.tool-btn svg { width: 18px; height: 18px; display: block; }

.video-stage { position: relative; width: 100%; flex: 1; background: #000; min-width: 0; }
.video-stage video { width: 100%; display: block; }

.play-counter {
    position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
    background: rgba(20, 20, 20, 0.75); color: var(--text); font-size: 0.8rem; font-weight: 600;
    padding: 0.2rem 0.55rem; border-radius: 20px;
}
.play-counter[hidden] { display: none; }

/* Fabric.js wraps the <canvas> in its own .canvas-container div with inline
 * pixel width/height matching the canvas's internal resolution. That wrapper
 * (not the bare <canvas> tag) is what has to sit on top of the video, scaled
 * to the video's displayed size, with a transparent background so the video
 * shows through underneath the drawing. The !important overrides Fabric's
 * inline width/height so it stretches to fill .video-stage. Custom controls
 * now live below the video in their own bar, so the canvas can stay
 * interactive at all times without ever blocking playback controls. */
.video-stage .canvas-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    pointer-events: auto;
}
.video-stage .canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

/* --- custom video control bar (replaces native <video controls>) --- */
.video-controls {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--rail); border-radius: 0 0 8px 8px; padding: 0.5rem 0.75rem;
}
.ctl-btn {
    background: transparent; border: none; color: var(--text); cursor: pointer;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; flex-shrink: 0;
}
.ctl-btn:hover { background: var(--hover); }
.ctl-btn svg { width: 18px; height: 18px; }
.seek-bar {
    position: relative; flex: 1; height: 6px; background: var(--border); border-radius: 3px; cursor: pointer;
}
.seek-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--accent-strong); border-radius: 3px; }
.seek-handle {
    position: absolute; top: 50%; width: 12px; height: 12px; background: var(--accent-strong); border-radius: 50%;
    transform: translate(-50%, -50%); left: 0%;
}
.ctl-time { color: var(--muted); font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; }
.ctl-select {
    background: var(--input); border: 1px solid var(--input-border); color: var(--text);
    padding: 0.3rem 0.4rem; border-radius: 6px; font-size: 0.8rem; flex-shrink: 0;
}

/* --- compact drawing action row (color/clear/new/save), shown under the controls --- */
.draw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.75rem 0; }
.draw-actions button, .draw-actions input[type=color] {
    background: var(--input); border: 1px solid var(--input-border); color: var(--text);
    padding: 0.4rem 0.6rem; border-radius: 6px; cursor: pointer;
}

.toolbar {
    display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0;
}
.toolbar button, .toolbar select, .toolbar input[type=color] {
    background: var(--input); border: 1px solid var(--input-border); color: var(--text);
    padding: 0.4rem 0.6rem; border-radius: 6px; cursor: pointer;
}
.toolbar button.active { background: var(--accent); color: var(--on-accent); }

.timeline { position: relative; height: 10px; background: var(--input); border-radius: 5px; margin: 0.5rem 0 1rem; }
.timeline-marker {
    position: absolute; top: -3px; width: 4px; height: 16px; background: var(--marker);
    cursor: pointer; border-radius: 2px;
}

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.panel h3 { margin-top: 0; }

.play-row, .annotation-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.4rem 0; border-bottom: 1px solid var(--row-border);
}
.play-row:last-child, .annotation-row:last-child { border-bottom: none; }
.play-row button, .annotation-row button {
    background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem;
}
.play-row button:hover, .annotation-row button:hover { color: var(--accent-soft); }

table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th, table.data-table td {
    text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--border);
}

/* --- spreadsheet-style plays grid --- */
.grid-scroll { overflow-x: auto; }
table.plays-grid { width: 100%; border-collapse: collapse; font-size: 0.8rem; white-space: nowrap; }
table.plays-grid th {
    position: sticky; top: 0; background: var(--input); color: var(--muted);
    text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--border);
    font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase;
}
table.plays-grid td {
    padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--row-border); vertical-align: middle;
}
table.plays-grid tbody tr:hover { background: var(--row-hover); }
table.plays-grid tbody tr.current-play { background: var(--row-current); }
table.plays-grid input, table.plays-grid select, table.plays-grid textarea {
    width: 100%; min-width: 60px; background: transparent; border: 1px solid transparent;
    color: var(--text); padding: 0.2rem 0.3rem; border-radius: 4px; font-size: 0.8rem;
}
table.plays-grid input:hover, table.plays-grid select:hover, table.plays-grid textarea:hover,
table.plays-grid input:focus, table.plays-grid select:focus, table.plays-grid textarea:focus {
    border-color: var(--input-border); background: var(--input);
}
table.plays-grid input[type=number] { width: 4.5rem; min-width: 0; }
table.plays-grid input[type=checkbox] { width: auto; min-width: 0; }
table.plays-grid .grid-play-label { cursor: pointer; font-weight: 600; }
table.plays-grid .grid-play-label:hover { color: var(--accent-soft); }
table.plays-grid textarea { resize: vertical; min-height: 1.6rem; }