/* Shotlist Studio application styles; load after glasspanel.css. */
.shotlist-icon { width:1em; height:1em; display:inline-block; flex:none; vertical-align:middle; pointer-events:none; }
.theme-icon-sun { display:none; }
body.mode-light .theme-icon-sun { display:inline-block; }
body.mode-light .theme-icon-moon { display:none; }
:root {
    --accent-rgb: 245,158,11;
    --accent-glow-rgb: 245,158,11;
    --accent-text-rgb: 0,0,0;
    --accent-glass-tint: rgba(245,158,11,.45);
    --color-accent: #f59e0b; 
    --color-accent-hover: #d97706; 
    --color-text-accent: #fef3c7; 
    --color-accent-shadow: rgba(245, 158, 11, 0.45);
    --color-accent-fg: #000000;
}
body, body.mode-dark {
    --color-bg-body: #0a0c10;
    --color-text-accent: #fef3c7;
    color: #e2e8f0;
}
body.mode-light {
    --color-bg-body: #eef2f6;
    --color-text-accent: #78350f;
    color: #0f172a;
}
body { 
    font-family: 'Noto Sans TC', sans-serif; 
    background-color: var(--color-bg-body) !important; 
    overflow-x: hidden; 
    transition: background-color 0.5s ease, color 0.5s ease;
    position: relative;
}

body.mode-dark .brand-logo { filter: invert(1) brightness(2); }
body.mode-light .brand-logo { filter: none; }
body.mode-dark .title-text { color: #f8fafc; }
body.mode-light .title-text { color: #0f172a; }

.animate-transition-all { transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.pointer-events-none-children * { pointer-events: none !important; }

/* 防禦拖曳干擾 */
body.is-dragging-file .thumb-dropzone * { pointer-events: none !important; }

table { border-collapse: separate; border-spacing: 0; }
thead tr { background: rgba(0,0,0,0.2); backdrop-filter: blur(10px); }
body.mode-light thead tr { background: rgba(255,255,255,0.4); }

tbody tr { transition: background-color 0.2s ease, border-color 0.2s ease; border-bottom: 1px solid rgba(255,255,255,0.05); }
tbody tr:nth-child(even):not([class*="mark-row-"]):not(.shot-row-completed):not(.sortable-selected) { background: rgba(255,255,255,0.015); }
tbody tr:hover:not(.sortable-selected) { background: rgba(255,255,255,0.06) !important; }

body.mode-light tbody tr { border-bottom: 1px solid rgba(0,0,0,0.05); }
body.mode-light tbody tr:nth-child(even):not([class*="mark-row-"]):not(.shot-row-completed):not(.sortable-selected) { background: rgba(0,0,0,0.025); }
body.mode-light tbody tr:hover:not(.sortable-selected) { background: rgba(0,0,0,0.05) !important; }

td input:not(.glass-checkbox), td textarea, td select { background: transparent !important; border: none; outline: none; }
.markdown-editor { position:relative; white-space:pre-wrap; overflow-wrap:anywhere; cursor:text; line-height:1.45; }
.markdown-editor[data-empty="true"]::before { content:attr(data-placeholder); position:absolute; inset:0; padding:inherit; color:#94a3b8; pointer-events:none; }
.markdown-editor[contenteditable="false"] { cursor:default; }
.markdown-editor .md-line { min-height:1.3em; }
.markdown-editor .md-h1 { font-size:1.32em; font-weight:800; }
.markdown-editor .md-h2 { font-size:1.18em; font-weight:750; }
.markdown-editor .md-h3 { font-size:1.04em; font-weight:700; }
.markdown-editor a { color:var(--color-accent); text-decoration:underline; }
td .markdown-editor { background:transparent!important; border:none; outline:none; height:36px; }
body.mode-light .markdown-editor[data-empty="true"]::before { color:#64748b; }
.save-status-lamp { --save-color:#ef4444; position:absolute; right:20px; top:20px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(148,163,184,.28); background:rgba(255,255,255,.08); display:grid; place-items:center; box-shadow:inset 0 1px 3px rgba(255,255,255,.12); }
.save-status-lamp::after { content:''; width:11px; height:11px; border-radius:50%; background:var(--save-color); box-shadow:0 0 12px color-mix(in srgb,var(--save-color) 60%,transparent); transition:background-color .15s,box-shadow .15s; }
.save-status-lamp[data-status="saved"] { --save-color:#22c55e; }
.save-status-lamp[data-status="saving"] { --save-color:#fbbf24; }
body.mode-light .save-status-lamp { background:rgba(255,255,255,.7); box-shadow:inset 0 1px 3px rgba(255,255,255,.8); }
#project-info > .max-w-2xl { padding-top:14px; }
.version-button { font:10px 'JetBrains Mono',monospace; opacity:.55; width:fit-content; margin-top:5px; }
.version-button:hover { opacity:1; }
.release-dialog { width:min(480px,calc(100vw - 32px)); margin:auto; padding:28px; border:1px solid rgba(255,255,255,.35); border-radius:24px; background:#f8fafc; color:#0f172a; box-shadow:0 24px 80px rgba(0,0,0,.3); }
.release-dialog::backdrop { background:rgba(10,12,16,.45); backdrop-filter:blur(8px); }
body.mode-dark .release-dialog { background:#151922; color:#e2e8f0; }
.release-kicker { font:10px 'JetBrains Mono',monospace; letter-spacing:.15em; opacity:.65; }
.release-dialog h2 { font-size:23px; font-weight:800; margin:10px 0 18px; }
.release-dialog ul { list-style:disc; padding-left:20px; font-size:14px; line-height:1.8; }
.release-dialog li { margin:10px 0; }
.release-dialog > button { width:100%; padding:12px; margin-top:20px; }
.mark-row-red { --row-description-color:#fca5a5; }
.mark-row-orange { --row-description-color:#fdba74; }
.mark-row-yellow { --row-description-color:#fde047; }
.mark-row-green { --row-description-color:#6ee7b7; }
.mark-row-blue { --row-description-color:#93c5fd; }
.mark-row-purple { --row-description-color:#d8b4fe; }
body.mode-light .mark-row-red { --row-description-color:#991b1b; }
body.mode-light .mark-row-orange { --row-description-color:#9a3412; }
body.mode-light .mark-row-yellow { --row-description-color:#854d0e; }
body.mode-light .mark-row-green { --row-description-color:#065f46; }
body.mode-light .mark-row-blue { --row-description-color:#1e40af; }
body.mode-light .mark-row-purple { --row-description-color:#6b21a8; }
[class*="mark-row-"] .markdown-editor { color:var(--row-description-color)!important; }
.markdown-preview { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.markdown-preview:empty { display: none; }
.markdown-preview .md-line { min-height: 1.3em; white-space: pre-wrap; }
.markdown-preview .md-h1 { font-size: 1.32em; font-weight: 800; }
.markdown-preview .md-h2 { font-size: 1.18em; font-weight: 750; }
.markdown-preview .md-h3 { font-size: 1.04em; font-weight: 700; }
.markdown-preview a { color: var(--color-accent); text-decoration: underline; }
#print-content .markdown-preview a { color: #1d4ed8; }

.shot-row-completed { 
    opacity: 0.4 !important; 
    filter: grayscale(0.5); 
}
.shot-row-completed td { 
    position: relative; 
}
.shot-row-completed td::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--color-accent);
    opacity: 0.7;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
}
.shot-row-completed td:has(> .glass-checkbox)::after { display:none; }

.font-mono-tech { font-family: 'JetBrains Mono', monospace; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(156, 163, 175, 0.4); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(156, 163, 175, 0.7); }
body.mode-light ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); }

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sortable-ghost { opacity: 0.4; background-color: rgba(255, 255, 255, 0.05) !important; border: 1px dashed var(--color-accent) !important; }
.drag-handle { touch-action:none; user-select:none; -webkit-touch-callout:none; }
body.shot-dragging, body.shot-dragging * { cursor:grabbing !important; user-select:none !important; }
#shotlist-tbody .shot-drop-placeholder td { padding:0; text-align:center; border:2px dashed rgba(var(--accent-rgb), .65); color:rgb(var(--accent-rgb)); background:rgba(var(--accent-rgb), .12); font-size:12px; font-weight:800; pointer-events:none; }
.shot-drag-ghost { position:fixed; z-index:99999; pointer-events:none; margin:0; filter:drop-shadow(0 20px 24px rgba(15,23,42,.35)); }
.shot-drag-stack { position:relative; width:184px; box-sizing:border-box; padding:8px; border:1px solid rgba(255,255,255,.2); border-radius:16px; color:#f4f4f5; background:rgba(39,39,42,.94); box-shadow:inset 0 1px rgba(255,255,255,.08); }
body.mode-light .shot-drag-stack { color:#0f172a; background:rgba(248,250,252,.94); border-color:rgba(255,255,255,.65); box-shadow:inset 0 1px rgba(255,255,255,.8); }
.shot-drag-stack.is-multiple::before, .shot-drag-stack.is-multiple::after { content:''; position:absolute; inset:5px -4px -5px 4px; z-index:-1; border-radius:16px; background:rgba(var(--accent-rgb), .38); transform:rotate(4deg); }
.shot-drag-stack.is-multiple::after { inset:8px -8px -8px 8px; opacity:.55; transform:rotate(7deg); }
.shot-drag-mini { display:flex; align-items:center; gap:7px; min-height:49px; padding:4px; border-radius:9px; background:rgba(var(--accent-rgb), .1); font-size:11px; font-weight:800; }
.shot-drag-mini + .shot-drag-mini { margin-top:3px; }
.shot-drag-mini img, .shot-drag-empty { width:69px; height:42px; flex:none; object-fit:cover; border-radius:6px; }
.shot-drag-empty { display:grid; place-items:center; background:rgba(var(--accent-rgb), .1); font-weight:400; }
.shot-drag-stack-label { display:flex; justify-content:space-between; margin-top:4px; font-size:11px; font-weight:800; }
@media print { .shot-drag-ghost, .shot-drop-placeholder { display:none !important; } }
.sortable-chosen { background-color: rgba(255, 255, 255, 0.03) !important; }

tr.sortable-selected { 
    background-color: var(--color-accent-shadow) !important; 
    outline: 2px solid var(--color-accent) !important;
    outline-offset: -2px;
    box-shadow: inset 4px 0 0 0 var(--color-accent) !important;
}

/* Smart Highlight CSS */
.highlight-group-0 { border: 2px solid #3b82f6 !important; box-shadow: 0 0 10px rgba(59,130,246,0.6) !important; background-color: rgba(59,130,246,0.1) !important; }
.highlight-group-1 { border: 2px solid #10b981 !important; box-shadow: 0 0 10px rgba(16,185,129,0.6) !important; background-color: rgba(16,185,129,0.1) !important; }
.highlight-group-2 { border: 2px solid #f59e0b !important; box-shadow: 0 0 10px rgba(245,158,11,0.6) !important; background-color: rgba(245,158,11,0.1) !important; }
.highlight-group-3 { border: 2px solid #a855f7 !important; box-shadow: 0 0 10px rgba(168,85,247,0.6) !important; background-color: rgba(168,85,247,0.1) !important; }
.highlight-group-4 { border: 2px solid #f43f5e !important; box-shadow: 0 0 10px rgba(244,63,94,0.6) !important; background-color: rgba(244,63,94,0.1) !important; }
.highlight-group-5 { border: 2px solid #06b6d4 !important; box-shadow: 0 0 10px rgba(6,182,212,0.6) !important; background-color: rgba(6,182,212,0.1) !important; }

.custom-highlighted { transition: border 0.25s ease-in-out, box-shadow 0.25s ease-in-out, background-color 0.25s ease-in-out; }
.movable-col-header { cursor: move; }

body.mode-light #highlight-options-menu {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #0f172a !important;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15) !important;
}
body.mode-light #highlight-options-menu > div:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}
body.mode-light #highlight-options-menu > div.border-b {
    border-color: rgba(0, 0, 0, 0.05) !important;
}

.mark-row-red { background-color: rgba(239, 68, 68, 0.15) !important; box-shadow: inset 0 1px 0 rgba(239, 68, 68, 0.3), inset 0 -1px 0 rgba(239, 68, 68, 0.3) !important; }
.mark-row-red input, .mark-row-red textarea { color: #fca5a5 !important; }
.mark-row-orange { background-color: rgba(249, 115, 22, 0.15) !important; box-shadow: inset 0 1px 0 rgba(249, 115, 22, 0.3), inset 0 -1px 0 rgba(249, 115, 22, 0.3) !important; }
.mark-row-orange input, .mark-row-orange textarea { color: #fdba74 !important; }
.mark-row-yellow { background-color: rgba(234, 179, 8, 0.15) !important; box-shadow: inset 0 1px 0 rgba(234, 179, 8, 0.3), inset 0 -1px 0 rgba(234, 179, 8, 0.3) !important; }
.mark-row-yellow input, .mark-row-yellow textarea { color: #fde047 !important; }
.mark-row-green { background-color: rgba(16, 185, 129, 0.15) !important; box-shadow: inset 0 1px 0 rgba(16, 185, 129, 0.3), inset 0 -1px 0 rgba(16, 185, 129, 0.3) !important; }
.mark-row-green input, .mark-row-green textarea { color: #6ee7b7 !important; }
.mark-row-blue { background-color: rgba(59, 130, 246, 0.15) !important; box-shadow: inset 0 1px 0 rgba(59, 130, 246, 0.3), inset 0 -1px 0 rgba(59, 130, 246, 0.3) !important; }
.mark-row-blue input, .mark-row-blue textarea { color: #93c5fd !important; }
.mark-row-purple { background-color: rgba(168, 85, 247, 0.15) !important; box-shadow: inset 0 1px 0 rgba(168, 85, 247, 0.3), inset 0 -1px 0 rgba(168, 85, 247, 0.3) !important; }
.mark-row-purple input, .mark-row-purple textarea { color: #d8b4fe !important; }

body.mode-light .mark-row-red { background-color: rgba(254, 226, 226, 0.8) !important; box-shadow: inset 0 1px 0 rgba(248, 113, 113, 0.5), inset 0 -1px 0 rgba(248, 113, 113, 0.5) !important; }
body.mode-light .mark-row-red input, body.mode-light .mark-row-red textarea { color: #991b1b !important; }
body.mode-light .mark-row-orange { background-color: rgba(255, 237, 213, 0.8) !important; box-shadow: inset 0 1px 0 rgba(251, 146, 60, 0.5), inset 0 -1px 0 rgba(251, 146, 60, 0.5) !important; }
body.mode-light .mark-row-orange input, body.mode-light .mark-row-orange textarea { color: #9a3412 !important; }
body.mode-light .mark-row-yellow { background-color: rgba(254, 249, 195, 0.8) !important; box-shadow: inset 0 1px 0 rgba(250, 204, 21, 0.5), inset 0 -1px 0 rgba(250, 204, 21, 0.5) !important; }
body.mode-light .mark-row-yellow input, body.mode-light .mark-row-yellow textarea { color: #854d0e !important; }
body.mode-light .mark-row-green { background-color: rgba(209, 250, 229, 0.8) !important; box-shadow: inset 0 1px 0 rgba(52, 211, 153, 0.5), inset 0 -1px 0 rgba(52, 211, 153, 0.5) !important; }
body.mode-light .mark-row-green input, body.mode-light .mark-row-green textarea { color: #065f46 !important; }
body.mode-light .mark-row-blue { background-color: rgba(219, 234, 254, 0.8) !important; box-shadow: inset 0 1px 0 rgba(96, 165, 250, 0.5), inset 0 -1px 0 rgba(96, 165, 250, 0.5) !important; }
body.mode-light .mark-row-blue input, body.mode-light .mark-row-blue textarea { color: #1e40af !important; }
body.mode-light .mark-row-purple { background-color: rgba(243, 232, 255, 0.8) !important; box-shadow: inset 0 1px 0 rgba(192, 132, 252, 0.5), inset 0 -1px 0 rgba(192, 132, 252, 0.5) !important; }
body.mode-light .mark-row-purple input, body.mode-light .mark-row-purple textarea { color: #6b21a8 !important; }

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body { background-color: #ffffff !important; margin: 0; padding: 0; }
    body::before, body::after { display: none !important; }
    #app-ui { display: none !important; }
    #print-view-container { display: block !important; padding: 0 !important; background-color: #ffffff !important; }
    .no-print { display: none !important; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}