@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root{
  --bg:#f7f5f2; --bg-elevated:#ffffff; --sidebar-bg:#f7f5f2; --sidebar-border:#e6e2dc;
  --border:#e6e2dc; --border-soft:#efece7;
  --text:#1e1919; --text-secondary:#736c64; --text-tertiary:#9c948a;
  --accent:#0061fe; --accent-soft:#e5f0ff; --accent-text:#0050d6;
  --danger:#c22e2e; --danger-soft:#fbe7e7;
  --warn:#95610a; --warn-soft:#fbedd6;
  --success:#1e7a4c; --success-soft:#e2f5ea;
  --row-hover:#f4f1ec; --row-selected:#e5f0ff; --row-selected-border:#a9caff;
  --scrollbar:#d8d3cb;
  --shadow:0 12px 32px rgba(30,25,25,0.14);
  --shadow-soft:0 2px 8px rgba(30,25,25,0.07);
  --radius:8px; --radius-sm:6px;
  --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:"SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --ql-thumb-bg:#e2e8f0;
  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg:#15181c; --bg-elevated:#1c2025; --sidebar-bg:#15181c; --sidebar-border:#2a2f36;
  --border:#2a2f36; --border-soft:#22262c;
  --text:#eceae7; --text-secondary:#a3a09b; --text-tertiary:#75726c;
  --accent:#4d8fff; --accent-soft:rgba(77,143,255,0.16); --accent-text:#7fb0ff;
  --danger:#e5726b; --danger-soft:rgba(229,114,107,0.16);
  --warn:#dba24a; --warn-soft:rgba(219,162,74,0.16);
  --success:#4fbd85; --success-soft:rgba(79,189,133,0.16);
  --row-hover:#20242a; --row-selected:#1e3358; --row-selected-border:#3e64a3;
  --scrollbar:#3a3f47;
  --shadow:0 12px 32px rgba(0,0,0,0.5);
  --shadow-soft:0 2px 8px rgba(0,0,0,0.35);
  --ql-thumb-bg:#262b32;
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  height:100vh; overflow:hidden;
}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:6px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-track{background:transparent;}
button{font-family:inherit;}
a{color:inherit;}
svg{display:block;flex-shrink:0;}
.text-tertiary{color:var(--text-tertiary);}

/* ---------- login screen ---------- */
.login-screen{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:20px;
}
.login-card{
  width:100%; max-width:360px; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:12px; padding:32px 28px; box-shadow:var(--shadow);
}
.login-card h1{margin:0 0 4px 0; font-size:20px; font-weight:700;}
.login-sub{color:var(--text-secondary); font-size:13px; margin:0 0 20px 0;}
.login-card .field{margin-bottom:14px;}
.login-card input{
  background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:6px;
  padding:9px 10px; font-size:13.5px; width:100%;
}
.login-card input:focus{outline:2px solid var(--accent); outline-offset:1px;}

/* ---------- app shell ---------- */
#app{
  position:fixed; top:0; left:0; right:0; bottom:0;
  display:flex; background:var(--bg);
  /* An explicit z-index (any value; #app is the only full-page layer while
     it is shown) makes #app establish its own stacking context, so its
     children's z-index values (#scrim, #sidebar, #qlpane below) are ordered
     against each other rather than being flattened into a single "auto"
     layer that a z-index:auto position:fixed element otherwise is. Without
     this, #scrim's explicit z-index put it ahead of the whole #app subtree
     in the root stacking context, and every tap on the open sidebar or
     Quick Look panel landed on the scrim underneath instead. */
  z-index:1;
}
#sidebar{
  width:228px; min-width:228px; background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  display:flex; flex-direction:column; padding:10px 0 0 0; overflow-y:auto;
}
.sb-search{
  margin:0 10px 10px 10px; display:flex; align-items:center; gap:6px;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:7px;
  padding:5px 8px; color:var(--text-tertiary);
}
.sb-search input{
  border:none; outline:none; background:transparent; color:var(--text); font-size:12.5px; width:100%;
}
.sb-section{margin-bottom:14px;}
.sb-heading{
  font-size:11px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase;
  letter-spacing:0.03em; padding:2px 16px 4px 16px;
}
.sb-item{
  display:flex; align-items:center; gap:8px; padding:6px 16px 6px 14px; margin:0 6px;
  border-radius:6px; cursor:pointer; color:var(--text); font-size:12.8px; white-space:nowrap;
  overflow:hidden;
}
.sb-item .lbl{overflow:hidden;text-overflow:ellipsis;flex:1;}
.sb-item .count{color:var(--text-tertiary); font-size:11px;}
.sb-item:hover{background:var(--row-hover);}
.sb-item.active{background:var(--accent); color:#fff;}
.sb-item.active .count{color:rgba(255,255,255,0.75);}
.sb-item.active svg{stroke:#fff !important;}
.sb-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.sb-icon{color:var(--text-secondary);}
.sb-storage{
  margin-top:auto; padding:10px 16px 12px 16px; border-top:1px solid var(--sidebar-border);
  cursor:pointer;
}
.sb-storage:hover{background:var(--row-hover);}
.sb-storage-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;display:flex;margin:6px 0;}
.sb-storage-label{font-size:11px;color:var(--text-secondary);}

#main{flex:1; display:flex; flex-direction:column; min-width:0; background:var(--bg-elevated);}
#toolbar{
  height:46px; min-height:46px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px; padding:0 12px; background:var(--bg-elevated);
}
.breadcrumbs{display:flex; align-items:center; gap:4px; font-size:13.5px; flex:1; min-width:0; overflow:hidden;}
.breadcrumbs .crumb{color:var(--text-secondary); cursor:pointer; white-space:nowrap;}
.breadcrumbs .crumb:hover{color:var(--accent-text); text-decoration:underline;}
.breadcrumbs .crumb.current{color:var(--text); font-weight:600; cursor:default;}
.breadcrumbs .crumb.current:hover{text-decoration:none;}
.breadcrumbs .sep{color:var(--text-tertiary);}
.tb-btn{
  display:flex; align-items:center; gap:5px; background:var(--bg-elevated); border:1px solid var(--border);
  color:var(--text); border-radius:6px; padding:6px 11px; font-size:12.5px; font-weight:500; cursor:pointer;
}
.tb-btn:hover{background:var(--row-hover); border-color:#d4cec5;}
.tb-btn.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;}
.tb-btn.primary:hover{background:#0052d6; border-color:#0052d6;}
.tb-btn.danger{background:var(--danger); border-color:var(--danger); color:#fff; font-weight:600;}
.tb-btn.danger:hover{background:#a52626; border-color:#a52626;}
.tb-btn:disabled{opacity:0.55; cursor:default;}
select.tb-select{
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text);
  border-radius:6px; padding:6px 8px; font-size:12.5px; cursor:pointer;
}
#content{flex:1; display:flex; min-height:0;}
#list-pane{flex:1; overflow-y:auto; min-width:0;}
#qlpane{
  width:352px; min-width:352px; border-left:1px solid var(--border); background:var(--bg-elevated);
  overflow-y:auto; display:flex; flex-direction:column;
}
.qlpane-empty{
  flex:1; display:flex; align-items:center; justify-content:center; color:var(--text-tertiary);
  font-size:12.5px; text-align:center; padding:20px;
}
.qlpane-inner{padding:16px;}
.ql-thumb{
  width:100%; aspect-ratio:16/10; border-radius:8px; margin-bottom:12px; position:relative;
  display:flex; align-items:center; justify-content:center; color:#5b6472; overflow:hidden;
  box-shadow:none; border:1px solid var(--border); background:var(--ql-thumb-bg);
}
.ql-thumb svg{width:34px;height:34px;opacity:0.85;}
.ql-thumb .ql-venue{position:absolute;left:10px;bottom:8px;font-size:11.5px;font-weight:600;color:#33383f;}
.ql-title{font-size:14.5px; font-weight:600; margin-bottom:2px; word-break:break-word;}
.ql-sub{font-size:12px; color:var(--text-secondary); margin-bottom:12px;}
.ql-actions{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;}
.ql-meta{border-top:1px solid var(--border); padding-top:10px; margin-top:4px;}
.ql-meta-row{display:flex; justify-content:space-between; padding:4px 0; font-size:12px;}
.ql-meta-row .k{color:var(--text-secondary);}
.ql-meta-row .v{color:var(--text); text-align:right; max-width:60%;}
.ql-section-title{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; color:var(--text-tertiary); margin:14px 0 6px 0;}
.chip{
  display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:2px 9px; border-radius:6px;
  font-weight:600; white-space:nowrap;
}
.chip-complete{background:var(--success-soft); color:var(--success);}
.chip-mirroring{background:var(--warn-soft); color:var(--warn);}
.chip-uploading{background:var(--accent-soft); color:var(--accent-text);}
.chip-neutral{background:var(--border-soft); color:var(--text-secondary);}
.tag-chip{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-secondary); cursor:pointer;
}
.tag-chip:hover{border-color:var(--accent); color:var(--accent-text);}
.tag-chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}

/* ---------- list view table ---------- */
table.rows{width:100%; border-collapse:collapse; font-size:13px;}
table.rows thead th{
  position:sticky; top:0; background:var(--bg-elevated); text-align:left; font-weight:600;
  color:var(--text-secondary); font-size:11px; text-transform:uppercase; letter-spacing:0.02em;
  padding:8px 10px; border-bottom:1px solid var(--border); user-select:none; z-index:2;
}
table.rows tbody tr{cursor:pointer; border-bottom:1px solid var(--border-soft);}
table.rows tbody tr:hover{background:var(--row-hover);}
table.rows tbody tr.selected{background:var(--row-selected);}
table.rows tbody td{padding:9px 10px; vertical-align:middle; color:var(--text);}
.row-name{display:flex; align-items:center; gap:8px; min-width:0;}
.row-name .icon{color:var(--text-secondary); flex-shrink:0;}
.row-name .txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.row-name .txt .sec{display:block; font-size:11px; color:var(--text-tertiary); font-weight:400;}
.contains-icons{display:flex; gap:5px; color:var(--text-tertiary);}
.contains-icons svg{width:14px;height:14px;}
.contains-icons svg.on{color:var(--accent-text);}
.num{text-align:right; font-variant-numeric:tabular-nums; color:var(--text-secondary);}
.row-actions{display:flex; gap:4px; opacity:0; transition:opacity .1s;}
table.rows tbody tr:hover .row-actions{opacity:1;}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:5px;
  border:1px solid transparent; background:transparent; color:var(--text-secondary); cursor:pointer;
}
.icon-btn:hover{background:var(--bg-elevated); border-color:var(--border); color:var(--text);}

/* ---------- panel / cards ---------- */
.panel{background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:16px;}
.view-pad{padding:18px 20px 40px 20px;}
.show-header{display:flex; gap:18px; margin-bottom:18px; flex-wrap:wrap;}
.show-header-info{flex:1; min-width:260px;}
.show-header-info h1{font-size:20px; margin:0 0 4px 0; font-weight:700;}
.show-header-info .venue-line{color:var(--text-secondary); font-size:13px; margin-bottom:10px;}
.meta-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-bottom:10px;}
.meta-tile{background:var(--bg); border:1px solid var(--border-soft); border-radius:7px; padding:8px 10px;}
.meta-tile .k{font-size:10.5px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.03em;}
.meta-tile .v{font-size:14px; font-weight:600; margin-top:2px;}
.notes-box{background:var(--warn-soft); border:1px solid transparent; border-radius:7px; padding:8px 10px; font-size:12px; color:var(--text); margin-top:8px;}
.storage-bar-track{height:10px; border-radius:5px; background:var(--border-soft); overflow:hidden; display:flex;}
.storage-bar-seg{height:100%;}

/* ---------- upload view ---------- */
.dropzone{
  border:2px dashed var(--border); border-radius:10px; padding:36px 20px; text-align:center;
  color:var(--text-secondary); margin-bottom:18px; cursor:pointer; transition:border-color .12s, background .12s;
}
.dropzone.drag{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-text);}
.dropzone svg{margin:0 auto 8px auto;}
.upload-form-row{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.field{display:flex; flex-direction:column; gap:4px;}
.field label{font-size:11px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.02em;}
.field select, .field input{
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); border-radius:6px;
  padding:7px 9px; font-size:12.5px; min-width:190px;
}
.queue-item{border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:8px; background:var(--bg-elevated);}
.queue-item-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px;}
.queue-name{font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:7px;}
.queue-sub{font-size:11px; color:var(--text-tertiary);}
.progress-track{height:7px; background:var(--border-soft); border-radius:4px; overflow:hidden;}
.progress-fill{height:100%; background:var(--accent); border-radius:4px; transition:width .3s linear;}
.progress-fill.done{background:var(--success);}

/* ---------- library / category grouping ---------- */
.lib-folder-group{margin-bottom:4px;}
.lib-folder-head{
  display:flex; align-items:center; gap:6px; padding:7px 10px; font-weight:600; font-size:12.5px;
  color:var(--text-secondary); cursor:pointer; border-radius:6px;
}
.lib-folder-head:hover{background:var(--row-hover);}
.lib-folder-head svg.chev{transition:transform .12s;}
.lib-folder-group.collapsed .lib-folder-head svg.chev{transform:rotate(-90deg);}
.lib-folder-group.collapsed .lib-file-rows{display:none;}

/* ---------- storage/activity view ---------- */
.tier-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-soft);}
.tier-row .name{flex:1; font-size:12.8px;}
.tier-row .amt{font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--text-secondary); width:70px; text-align:right;}
.tier-row .cost{font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--text-secondary); width:60px; text-align:right;}
.activity-row{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-soft); font-size:12.5px;}
.activity-row .who-badge{
  width:26px;height:26px;border-radius:50%; background:var(--accent-soft); color:var(--accent-text); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700;
}
.activity-row .txt{flex:1;}
.activity-row .when{color:var(--text-tertiary); font-size:11px; white-space:nowrap;}

.two-col{display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:start;}
@media (max-width:900px){ .two-col{grid-template-columns:1fr;} }

/* ---------- user menu ---------- */
.user-menu-wrap{position:relative;}
.user-avatar{
  width:28px;height:28px;border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.user-dropdown{
  position:absolute; top:34px; right:0; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:8px; box-shadow:var(--shadow); width:240px; padding:6px; z-index:50; display:none;
}
.user-dropdown.open{display:block;}
.user-dropdown .u-item{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:12.5px;}
.user-dropdown .u-item:hover{background:var(--row-hover);}
.user-dropdown .u-role{color:var(--text-tertiary); font-size:10.5px;}
.user-dropdown hr{border:none; border-top:1px solid var(--border); margin:6px 0;}

/* ---------- player modal ---------- */
#playerModal{
  position:fixed; inset:0; background:rgba(20,18,16,0.6); z-index:200; display:none;
  align-items:center; justify-content:center; padding:24px;
}
#playerModal.open{display:flex;}
.player-card{
  background:var(--bg-elevated); color:var(--text); border-radius:12px; width:min(1040px,100%); max-height:100%;
  overflow-y:auto; box-shadow:var(--shadow); border:1px solid var(--border);
}
.player-top{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border);}
.player-top h3{margin:0; font-size:14px; font-weight:600;}
.player-top .sub{font-size:11.5px; color:var(--text-secondary);}
.player-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:6px;}
.player-close:hover{background:var(--row-hover);}
.player-body{display:grid; grid-template-columns:1.5fr 1fr;}
.player-body.single{grid-template-columns:1fr;}
@media (max-width:820px){ .player-body{grid-template-columns:1fr;} }
.player-video-wrap{padding:16px;}
.player-body:not(.single) .player-video-wrap{border-right:1px solid var(--border);}
@media (max-width:820px){ .player-body:not(.single) .player-video-wrap{border-right:none; border-bottom:1px solid var(--border);} }
.stem-panel{padding:14px 16px; max-height:520px; overflow-y:auto; background:var(--bg);}
.stem-panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.stem-panel-head h4{margin:0; font-size:12.5px;}
.stem-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-soft);}
.stem-row .stem-name{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.thaw-banner{display:flex; align-items:center; gap:6px; background:var(--warn-soft); color:var(--warn); border-radius:6px; padding:6px 9px; font-size:11.5px; margin-top:8px;}

/* ---------- generic modal ---------- */
.modal-scrim{position:fixed; inset:0; background:rgba(20,18,16,0.45); z-index:300; display:flex; align-items:center; justify-content:center; padding:20px;}
.modal-card{background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); max-height:90vh; overflow-y:auto;}
.modal-top{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border);}
.modal-top h3{margin:0; font-size:14.5px; font-weight:600;}
.modal-body{padding:16px;}
.form-error{background:var(--danger-soft); color:var(--danger); border-radius:6px; padding:8px 10px; font-size:12px; margin-bottom:10px;}

/* ---------- share dialog ---------- */
.share-row{display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border-soft); font-size:12px;}
.share-row .link-txt{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary);}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#232326; color:#fff;
  padding:9px 16px; border-radius:8px; font-size:12.5px; z-index:500; box-shadow:0 6px 20px rgba(0,0,0,0.3);
  max-width:80vw; text-align:center; opacity:0; pointer-events:none; transition:opacity .25s;
}
.toast.show{opacity:1;}
.toast.toast-error{background:var(--danger);}

/* ---------- mobile ---------- */
@media (max-width:780px){
  #sidebar{position:fixed; z-index:60; left:0; top:0; bottom:0; transform:translateX(-100%); transition:transform .18s; box-shadow:var(--shadow);}
  #sidebar.open{transform:translateX(0);}
  #qlpane{position:fixed; z-index:60; right:0; top:0; bottom:0; transform:translateX(100%); transition:transform .18s; width:88vw; min-width:0; max-width:min(360px, 100vw); box-shadow:var(--shadow);}
  #qlpane.open{transform:translateX(0);}
  #app{overflow:hidden;}
  .meta-grid{grid-template-columns:repeat(2,1fr);}
  body{overflow:auto;}
}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:55; display:none;}
.scrim.open{display:block;}
@media (min-width:781px){ .scrim{display:none !important;} }
.hide-mobile{display:inline-flex;}
@media (max-width:780px){ .hide-mobile{display:none;} }
.show-mobile{display:none;}
@media (max-width:780px){ .show-mobile{display:inline-flex;} }
.empty-state{padding:40px 20px; text-align:center; color:var(--text-tertiary); font-size:13px;}

/* ---------- v2: stars, flags, multi-select ---------- */
.flag-dot{
  display:inline-block; border-radius:50%; vertical-align:middle;
  background:var(--text-tertiary);
}
.flag-dot.empty{background:transparent; border:1.5px dashed var(--text-tertiary); opacity:0.7;}
.star-mark{color:var(--text-tertiary);}
.star-btn.on .star-mark, .star-btn.on{color:#d8a531;}
.star-btn:hover .star-mark{color:var(--text);}
.marks-cell{white-space:nowrap; width:1%;}
.marks-cell .icon-btn{opacity:1;}
.header-marks{display:inline-flex; gap:6px; margin-left:10px; vertical-align:middle;}
.ql-marks{display:flex; gap:6px; margin-bottom:10px;}
.flag-btn, .star-btn{background:none;}

.cb-cell{width:1%; padding-right:0 !important;}
.cb-wrap{display:inline-flex; padding:4px; cursor:pointer;}
.cb{
  width:15px; height:15px; border:1.5px solid var(--border); border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center; background:var(--bg-elevated);
  color:#fff;
}
.cb.on{background:var(--accent); border-color:var(--accent);}
table.rows tbody tr.row-picked{background:var(--row-selected);}

.bulk-bar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:250;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow); padding:8px 12px; max-width:calc(100vw - 32px);
}
.bulk-bar .bulk-count{font-size:12.5px; font-weight:600; margin-right:4px; white-space:nowrap;}
@media (max-width:780px){ .bulk-bar{bottom:10px; padding:8px;} }

/* ---------- v2: flag picker ---------- */
.flag-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:6px;}
.flag-swatch{
  display:flex; align-items:center; gap:8px; padding:7px 9px; font-size:12.5px;
  background:none; border:1px solid var(--border); border-radius:7px; cursor:pointer; color:var(--text);
}
.flag-swatch:hover{background:var(--row-hover);}
.flag-swatch.active{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-text);}

/* ---------- v2: batch rename ---------- */
.rename-tokens{font-size:11.5px; color:var(--text-tertiary);}
.rename-tokens code{font-family:var(--mono); font-size:11px; background:var(--border-soft); border-radius:4px; padding:1px 4px;}
.rename-preview{border:1px solid var(--border-soft); border-radius:7px; padding:8px 10px; background:var(--bg);}
.rename-preview-row{display:flex; align-items:center; gap:8px; font-size:12px; padding:3px 0; min-width:0;}
.rename-preview-row .from{color:var(--text-tertiary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.rename-preview-row .to{color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.rename-preview-row .arrow{color:var(--text-tertiary);}

/* ---------- v2: move dialog ---------- */
.move-tabs{display:flex; gap:8px; margin-bottom:14px;}
.move-folder-list{display:flex; gap:6px; flex-wrap:wrap; max-height:140px; overflow-y:auto;}

/* ---------- v2: category headers and inline upload ---------- */
.lib-folder-head{position:relative;}
.cat-head-actions{margin-left:auto; display:inline-flex; gap:6px;}
.tb-btn.tiny{padding:3px 7px; font-size:11.5px; gap:5px;}
.cat-progress{display:flex; flex-direction:column; gap:6px;}
.cat-progress:not(:empty){margin:8px 0;}
.cat-upload-row{border:1px solid var(--border-soft); border-radius:7px; padding:7px 9px; background:var(--bg-elevated);}
.cat-upload-top{display:flex; justify-content:space-between; gap:10px; font-size:11.5px; margin-bottom:5px;}
.cat-upload-top span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cat-upload-top span:last-child{color:var(--text-tertiary); white-space:nowrap;}
.toggle-line{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--text-secondary); margin-bottom:14px; cursor:pointer;}

/* ---------- v2: sudo prompt and previews ---------- */
.preview-frame{width:100%; height:66vh; border:1px solid var(--border); border-radius:8px; background:var(--bg-elevated);}
.preview-image{width:100%; max-height:70vh; object-fit:contain; border-radius:8px; background:#000; display:block;}
.ql-thumb.ql-preview{aspect-ratio:auto; height:auto; padding:0; background:transparent; border:none;}
.preview-frame.ql{height:220px;}
.preview-image.ql{max-height:220px; background:var(--ql-thumb-bg);}
#sudoFormEl .field input{width:100%;}

/* ---------- v2: mobile-friendly pass ----------
   Kept as one block at the end of the file so it wins the cascade over every
   earlier rule of equal specificity (several v2 sections above set their own
   sizes on .icon-btn, .cb-wrap, table.rows, etc.). Still scoped to the same
   780px breakpoint the rest of the sheet uses, so nothing above that width
   changes. */
@media (max-width:780px){
  /* Safe-area insets (viewport-fit=cover lets these resolve on a notch/home
     indicator device instead of always being 0). */
  #sidebar{padding-top:env(safe-area-inset-top,0px);}
  .login-screen{
    padding:calc(20px + env(safe-area-inset-top,0px)) calc(20px + env(safe-area-inset-right,0px))
      calc(20px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px));
  }
  .bulk-bar{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));}
  .toast{bottom:calc(20px + env(safe-area-inset-bottom,0px));}
  .modal-scrim{
    padding:14px;
    padding-top:calc(14px + env(safe-area-inset-top,0px));
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
  }

  /* Toolbar: a view can hand toolbarControls several buttons/selects (see
     shows.js / show detail), which never fit next to the breadcrumbs and
     avatar on a phone. Force them onto their own wrapping row instead of
     letting them run off the right edge unreachably. */
  #toolbar{
    flex-wrap:wrap; height:auto; min-height:46px; row-gap:6px;
    padding:8px calc(10px + env(safe-area-inset-right,0px)) 8px calc(10px + env(safe-area-inset-left,0px));
  }
  #btnSidebarToggle{order:0;}
  .breadcrumbs{order:1;}
  .user-menu-wrap{order:2;}
  #toolbarControls{order:3; flex-basis:100%; flex-wrap:wrap; gap:6px;}

  /* No horizontal scrolling anywhere on a phone, tables included: a
     sideways-scrolling table hid whatever ran off the right edge (Cameron
     hit this live on his phone) rather than making it reachable. Every
     table now sheds its non-essential columns instead (.col-mobile-hide,
     set from each view's JS) and wraps long text, so it fits the viewport
     outright. overflow-x:hidden here is a backstop, not the fix: if
     something still doesn't fit it gets clipped rather than scrollable. */
  #list-pane{overflow-x:hidden;}
  .modal-body{overflow-x:hidden;}

  /* Row actions relied on :hover to appear, which a touch screen never
     fires; keep them visible so Play/Download/Star/etc. stay reachable. */
  .row-actions{opacity:1;}

  /* ~44px touch targets for row actions, toolbar buttons, sidebar items,
     and the select-row checkbox. */
  .icon-btn{width:44px; height:44px;}
  .tb-btn{min-height:44px; padding:10px 14px;}
  select.tb-select{min-height:44px;}
  .sb-item{min-height:44px; padding:10px 16px 10px 14px;}
  .cb-wrap{padding:9px !important;}

  /* 16px inputs so iOS Safari does not zoom the page in on focus. Several
     earlier rules (.login-card input, .sb-search input, .field select,
     .field input, select.tb-select, ...) set a smaller size at equal or
     higher specificity, so this needs !important to actually win everywhere. */
  input, select, textarea{font-size:16px !important;}

  /* A form laid out with CSS grid (contractor invite, add-category, share
     link) does not shrink a long <select> below its content width on its
     own; without this the whole form ran off the right edge. */
  .field{min-width:0;}
  .field select, .field input{width:100%;}

  /* Defense in depth: a modal that asks for an explicit pixel width (many
     do, e.g. "Move to" at 460px) usually still flex-shrinks to fit, but cap
     it outright so a longer opts.width value can never push it past the
     viewport. */
  .modal-card{max-width:calc(100vw - 28px) !important;}

  /* Quick Look becomes a slide-in panel on mobile (see #qlpane.open above);
     give it an explicit way back to the list instead of relying on someone
     noticing the darkened scrim is tappable. */
  .ql-mobile-head{
    padding:10px calc(10px + env(safe-area-inset-left,0px));
    border-bottom:1px solid var(--border);
    padding-top:calc(10px + env(safe-area-inset-top,0px));
  }
}

/* Shows toolbar on phones: the filter selects hide behind a Filters button;
   the Tour column is redundant with the group header and is dropped. */
.tb-filters{display:contents;}
.tb-filters-btn{display:none;}
@media (max-width:780px){
  .tb-filters-btn{display:inline-flex;}
  .tb-filters{display:none;}
  .tb-filters.open{display:contents;}
  table.rows .col-tour{display:none;}
}

/* ---------- v2: every table fits a phone with no sideways scroll ----------
   Per-table column decisions live in each view's JS as a "col-mobile-hide"
   class on the th AND its matching td; this just makes that class do
   something below 780px (it is a no-op above it) and handles the parts
   every table needs regardless of which columns it keeps: wrap long text
   instead of truncating/pushing width, keep the actions cell on one line,
   and shrink the row-level icon buttons (they do not compete with anything
   else for space outside a table, so they stay full size everywhere else). */
.mobile-sub{display:none;}
.action-secondary{}
@media (max-width:780px){
  .col-mobile-hide{display:none !important;}

  /* The bulk-select checkbox column: multi-select is a desktop workflow,
     and every action it would gate is one tap away in Quick Look anyway. */
  table.rows .cb-cell{display:none !important;}

  /* A file row can carry up to seven conditional action icons (play or
     preview, download, share, rename, move, trash, request restore) --
     rename/move/trash/restore stay one tap away in Quick Look (which the
     row itself opens) and are marked action-secondary in shows.js and
     library.js so the row keeps only its 2-3 most common actions inline
     and genuinely fits at 320px instead of merely "staying on one line" by
     being too narrow to read. */
  .action-secondary{display:none;}

  table.rows tbody td, table.rows thead th{padding:7px 4px;}
  table.rows .icon-btn{width:34px; height:34px;}
  .row-actions{gap:2px; flex-wrap:nowrap;}

  /* Every plain text cell wraps instead of pushing the table wider than the
     screen; a cell that must stay compact (a number, the marks/checkbox/
     actions cells) opts back out below with a more specific selector. An
     unbroken share label, scope string, etc. previously widened the table
     past the viewport, and .modal-body's overflow-x:hidden then clipped
     whatever ran off the edge (e.g. the Copy/Revoke buttons on that row). */
  table.rows tbody td{white-space:normal; overflow-wrap:anywhere;}
  /* More specific than the blanket td rule above (needs table.rows.<class>,
     not just .<class>, to win: both selectors tie on class-count otherwise
     and the td rule's extra element count would win the tiebreak). */
  table.rows .marks-cell, table.rows .cb-cell, table.rows .num, table.rows .row-actions{white-space:nowrap;}

  /* Long names/venues/emails wrap onto more lines instead of pushing the
     table wider than the screen (the name column is the one column meant
     to flex; everything else above is now a fixed, small, min-content
     width, so this is what actually absorbs a narrow viewport). */
  .row-name{align-items:flex-start;}
  .row-name .icon{margin-top:2px;}
  .row-name .txt{white-space:normal; overflow-wrap:anywhere; min-width:0;}

  /* A field a table drops on mobile (a tour's year, a user's status, a
     contractor's... already covered by its own column) can be folded back
     in as a second line under the name instead of just disappearing. */
  .mobile-sub{display:block; font-size:11px; color:var(--text-tertiary); margin-top:2px;}
}

/* Desktop Quick Look pane: gone from the layout while nothing is selected. */
@media (min-width:781px){
  #qlpane.ql-hidden{display:none;}
}

/* Phones: every free-text cell wraps (share labels, scopes, emails), so an
   unbroken word can never widen a table past the screen; action cells stay
   on one line. */
@media (max-width:780px){
  table.rows td{white-space:normal; overflow-wrap:anywhere; word-break:break-word;}
  table.rows td .row-actions, table.rows td .row-actions *{white-space:nowrap;}
}