/* ============================================================
   VidMaker Studio — dark theme
   ============================================================ */
:root {
    --bg:          #0b0c12;
    --bg-2:        #0e1018;
    --surface:     #161927;
    --surface-2:   #1c2031;
    --surface-3:   #232842;
    --border:      #2a3047;
    --border-soft: #20253a;
    --text:        #e8eaf2;
    --text-muted:  #8a90a8;
    --text-dim:    #5d6480;
    --violet:      #7c5cff;
    --violet-2:    #9d7bff;
    --cyan:        #22d3ee;
    --accent-grad: linear-gradient(135deg, #7c5cff 0%, #22d3ee 100%);
    --success:     #2dd36f;
    --danger:      #ff5c7a;
    --warning:     #ffb84d;
    --info:        #45c4ff;
    --radius:      14px;
    --radius-sm:   10px;
    --shadow:      0 8px 28px rgba(0,0,0,.45);
    --shadow-lg:   0 18px 50px rgba(0,0,0,.55);
}

* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #2e3556; }

html, body { height: 100%; }
body {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(124,92,255,.16), transparent 60%),
        radial-gradient(900px 500px at -5% 0%, rgba(34,211,238,.10), transparent 55%),
        var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: .1px;
}

main[role="main"] { padding-top: .5rem; }

a { color: var(--violet-2); text-decoration: none; }
a:hover { color: #c2b2ff; }

/* ---------- Navbar ---------- */
header .navbar {
    background: rgba(13,15,22,.72) !important;
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--border-soft) !important;
    box-shadow: none !important;
}
.navbar-brand {
    font-weight: 800; font-size: 1.25rem; letter-spacing: -.3px;
    display: inline-flex; align-items: center; gap: .5rem;
}
.navbar-brand::before {
    content: ""; width: 12px; height: 12px; border-radius: 50%;
    background: var(--accent-grad);
    box-shadow: 0 0 14px rgba(124,92,255,.9);
}
.navbar-brand, .navbar .nav-link { color: var(--text) !important; }
.navbar .nav-link { color: var(--text-muted) !important; font-weight: 500; border-radius: 8px; padding: .35rem .8rem !important; }
.navbar .nav-link:hover { color: var(--text) !important; background: var(--surface-2); }

/* ---------- Cards ---------- */
.card {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
}
.card-body { padding: 1.15rem 1.25rem; }

/* generic surface panel */
.panel-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); font-weight: 700; margin-bottom: .85rem; }

/* ---------- Headings / text ---------- */
h1, h2, h3, h4, h5, h6 { color: var(--text); letter-spacing: -.3px; }
.text-muted { color: var(--text-muted) !important; }
.page-title { font-weight: 800; letter-spacing: -.6px; }
.eyebrow { color: var(--text-dim); font-size: .8rem; }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: .1px; transition: transform .08s ease, box-shadow .2s ease, background .2s ease; }
.btn:active { transform: translateY(1px); }

.btn-primary, .btn-success-grad {
    background: var(--accent-grad); border: none; color: #fff;
    box-shadow: 0 6px 18px rgba(124,92,255,.35);
}
.btn-primary:hover, .btn-success-grad:hover { color:#fff; box-shadow: 0 8px 24px rgba(124,92,255,.5); filter: brightness(1.05); }

.btn-success { background: linear-gradient(135deg,#1fb866,#2dd36f); border: none; color:#04130b; box-shadow: 0 6px 18px rgba(45,211,111,.3); }
.btn-success:hover { color:#04130b; filter: brightness(1.06); }

.btn-info { background: linear-gradient(135deg,#2bb6e6,#45c4ff); border:none; color:#04141c; }
.btn-info:hover { color:#04141c; filter: brightness(1.06); }

.btn-outline-primary { color: var(--violet-2); border-color: var(--border); background: var(--surface-2); }
.btn-outline-primary:hover { background: var(--surface-3); color:#fff; border-color: var(--violet); }
.btn-outline-secondary { color: var(--text-muted); border-color: var(--border); background: transparent; }
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-outline-info { color: var(--info); border-color: var(--border); background: var(--surface-2); }
.btn-outline-info:hover { background: var(--surface-3); color:#fff; border-color: var(--info); }
.btn-outline-success { color: var(--success); border-color: var(--border); background: var(--surface-2); }
.btn-outline-success:hover { background: var(--surface-3); color:#fff; }
.btn-outline-danger { color: var(--danger); border-color: var(--border); background: transparent; }
.btn-outline-danger:hover { background: rgba(255,92,122,.14); color: var(--danger); border-color: var(--danger); }

/* ---------- Forms ---------- */
.form-label { color: var(--text-muted); font-weight: 600; font-size: .8rem; }
.form-control, .form-select {
    background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
    background: var(--bg-2); color: var(--text); border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124,92,255,.22);
}
.form-control::placeholder { color: var(--text-dim); }
input[type="file"].form-control { padding: .35rem .6rem; }
.form-control[disabled], .btn[disabled] { opacity: .5; }

/* ---------- Badges / status pills ---------- */
.badge { font-weight: 600; border-radius: 999px; padding: .4em .7em; }
.status-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
}
.status-pill::before { content:""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.status-Complete       { color: var(--success); }
.status-Failed         { color: var(--danger); }
.status-Rendering      { color: var(--warning); }
.status-Draft          { color: var(--text-dim); }
.status-AudioUploaded,
.status-Transcribed,
.status-Segmented,
.status-FootageSelected{ color: var(--info); }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--radius-sm); border: 1px solid var(--border); }
.alert-success { background: rgba(45,211,111,.12); color: #8ff0bd; border-color: rgba(45,211,111,.3); }
.alert-danger  { background: rgba(255,92,122,.12); color: #ffb3c2; border-color: rgba(255,92,122,.3); }

/* ---------- Tables ---------- */
.table { color: var(--text); border-color: var(--border); }
.table > :not(caption) > * > * { border-color: var(--border-soft); background: transparent; }

/* ---------- Video / clip thumbnails ---------- */
video { background: #05060a; }
.thumb { border-radius: var(--radius-sm); overflow: hidden; background: #05060a; aspect-ratio: 16/9; object-fit: cover; }
.clip-frame { border: 1px solid var(--border); border-radius: var(--radius-sm); background: #05060a; overflow: hidden; }

/* ---------- Video dashboard grid ---------- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.video-card { transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease; }
.video-card:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: var(--shadow-lg); }
.video-card .thumb-wrap { position: relative; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 16/9; background: linear-gradient(135deg,#1a1e30,#0c0e16); display:flex; align-items:center; justify-content:center; }
.video-card .thumb-wrap .placeholder-ic { font-size: 2rem; opacity: .25; }

/* ---------- Segment cards ---------- */
.segment-card { position: relative; }
.segment-card::before {
    content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius: 3px;
    background: var(--accent-grad); opacity:.8;
}
.seg-index {
    display:inline-flex; align-items:center; justify-content:center;
    min-width: 30px; height: 30px; padding: 0 .5rem; border-radius: 8px;
    background: var(--surface-3); color: var(--violet-2); font-weight: 700; font-size: .85rem;
}
.footage-results { border-top: 1px dashed var(--border); padding-top: .9rem; }
.footage-grid .clip-frame:hover { border-color: var(--violet); }

/* number inputs: hide spinners for a cleaner look */
input[type=number]::-webkit-inner-spin-button { opacity: .35; }

/* ---------- Footer ---------- */
footer.footer { background: transparent; border-color: var(--border-soft) !important; color: var(--text-dim); }
footer.footer a { color: var(--text-muted); }

/* ---------- Misc ---------- */
/* ---------- Timeline track ---------- */
/* horizontal scroll: the inner timeline is sized at a fixed px/sec scale (set inline),
   so it overflows the card and only a few segments show at once — scroll to see the rest. */
.tl-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
.tl-inner { position: relative; min-width: 100%; }
.tl-ruler { position: relative; height: 16px; margin-bottom: 6px; }
.tl-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: .68rem; color: var(--text-dim); white-space: nowrap; }
.tl-tick::after { content: ""; position: absolute; left: 50%; top: 14px; width: 1px; height: 6px; background: var(--border); }
.tl-tick:first-child { transform: none; }
.tl-tick:last-child { transform: translateX(-100%); }

.timeline-track {
    position: relative; height: 86px; border-radius: var(--radius-sm);
    background: var(--bg-2); border: 1px solid var(--border); overflow: hidden;
}
.tl-block {
    position: absolute; top: 6px; bottom: 6px; display: block;
    border-radius: 8px; overflow: hidden; cursor: pointer; text-decoration: none;
    border: 1px solid var(--border); background: var(--surface-3);
    transition: transform .1s ease, box-shadow .2s ease, border-color .2s ease;
}
.tl-block:hover { transform: translateY(-2px); border-color: var(--violet); box-shadow: var(--shadow); z-index: 3; }
.tl-block .tl-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; pointer-events: none; }
.tl-block.no-clip { background: linear-gradient(135deg, #232842, #14172300); }
.tl-scrim {
    position: absolute; inset: 0; z-index: 2; padding: .35rem .5rem;
    display: flex; flex-direction: column; justify-content: space-between;
    background: linear-gradient(180deg, rgba(8,9,14,.35) 0%, rgba(8,9,14,.78) 100%);
    color: #fff; overflow: hidden;
}
.tl-idx { font-size: .72rem; font-weight: 700; color: var(--violet-2); }
.tl-topic { font-size: .78rem; font-weight: 600; line-height: 1.1; overflow: hidden; text-overflow: ellipsis;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tl-dur { font-size: .68rem; color: #c9cce0; }

/* resize handles on segment boundaries */
.tl-handle { position: absolute; top: 0; bottom: 0; width: 12px; transform: translateX(-50%); cursor: ew-resize; z-index: 5; touch-action: none; }
.tl-handle::before {
    content: ""; position: absolute; left: 50%; top: 16%; bottom: 16%; width: 3px; transform: translateX(-50%);
    background: rgba(255,255,255,.5); border-radius: 3px; box-shadow: 0 0 6px rgba(0,0,0,.55);
    opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.timeline-track:hover .tl-handle::before { opacity: .8; }
.tl-handle:hover::before { opacity: 1; background: var(--violet-2); }

/* audio lanes */
.tl-lane { margin-top: 10px; }
.tl-lane-label { font-size: .68rem; color: var(--text-dim); margin-bottom: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.tl-lane-track { position: relative; height: 30px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tl-audio {
    position: absolute; top: 3px; bottom: 3px; border-radius: 6px; display: flex; align-items: center;
    padding: 0 .55rem; font-size: .72rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden;
    cursor: grab; user-select: none; touch-action: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.tl-audio:active { cursor: grabbing; }
.tl-voice { background: linear-gradient(135deg, #1b8fae, #22d3ee); color: #04141c; }
.tl-lofi { background: linear-gradient(135deg, #6b4bd6, #9d7bff); }
.tl-lofi.empty {
    background: repeating-linear-gradient(45deg, #1c2031, #1c2031 8px, #161927 8px, #161927 16px);
    color: var(--text-dim); cursor: default; box-shadow: inset 0 0 0 1px var(--border);
}

/* flash a segment card when its timeline block is clicked */
@keyframes tl-flash {
    0%   { box-shadow: 0 0 0 0 rgba(124,92,255,.0); border-color: var(--border); }
    25%  { box-shadow: 0 0 0 3px rgba(124,92,255,.55); border-color: var(--violet); }
    100% { box-shadow: 0 0 0 0 rgba(124,92,255,.0); border-color: var(--border); }
}
.segment-card.tl-flash { animation: tl-flash 1.1s ease; }

/* override boilerplate site.css white focus ring */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(124,92,255,.28) !important;
}

details summary { cursor: pointer; }
pre { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); padding: .75rem; }
hr { border-color: var(--border); }
.divider { height:1px; background: var(--border-soft); margin: 1rem 0; }

/* overlays lane */
.tl-ov-add .form-select-sm { padding:.1rem 1.4rem .1rem .4rem; font-size:.72rem; }
.tl-ov { position:absolute; top:3px; bottom:3px; border-radius:6px; background:linear-gradient(135deg,#3a2f6e,#5b46b8);
    color:#fff; font-size:.7rem; font-weight:600; padding:0 .45rem; display:flex; align-items:center; overflow:hidden;
    cursor:grab; user-select:none; touch-action:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.tl-ov.sel { box-shadow:0 0 0 2px var(--violet); z-index:3; }
.tl-ov-handle { position:absolute; right:0; top:0; bottom:0; width:8px; cursor:ew-resize; background:rgba(255,255,255,.25); }

/* overlay live preview */
.ov-preview { position:relative; width:100%; aspect-ratio:16/9; background:#05060a; border-radius:var(--radius-sm); overflow:hidden; }
.ov-preview-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ov-preview-layer { position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; pointer-events:none; }
.ov-preview-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:.85rem; }

/* map drag-to-edit handles */
.ov-map-handles { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.ov-map-handle {
    position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
    background: rgba(124,92,255,.55); border: 2px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,.6);
    cursor: grab; pointer-events: auto; touch-action: none;
}
.ov-map-handle:hover { background: rgba(124,92,255,.85); }
.ov-map-handle:active { cursor: grabbing; }