/* ================================================================
   portal.css — Perception Academy Client Portal v2
   Phase 6 Rev 2: Complete design system
   Default theme: Midnight Steel
   ================================================================ */

/* ── HARD RESET ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer}
table{border-collapse:collapse;width:100%}

/* ================================================================
   THEME: MIDNIGHT STEEL (default)
   ================================================================ */
:root,
[data-theme="midnight-steel"]{
  --font-sans:'Space Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;
  --navy:rgb(13,77,127);--navy-d:rgb(8,50,85);--navy-l:rgb(40,110,168);
  --amber:rgb(210,118,40);--amber-l:rgb(230,145,60);--amber-d:rgb(175,95,25);
  --gold:rgb(227,198,75);--gold-l:rgba(227,198,75,.15);
  --bg:#0e1117;--s1:#141820;--s2:#1a1f29;--s3:#202633;
  --border:#252d3a;--border2:#2e3748;
  --text:#c8cdd6;--text-h:#dde2ea;--text-m:#7e8fa8;--text-d:#3a4455;
  --success:#3acc72;--success-bg:rgba(58,204,114,.08);--success-bdr:rgba(58,204,114,.2);
  --warning:rgb(227,198,75);--warning-bg:rgba(227,198,75,.06);--warning-bdr:rgba(227,198,75,.18);
  --danger:#e06060;--danger-bg:rgba(224,96,96,.06);--danger-bdr:rgba(224,96,96,.2);
  --info:rgb(40,110,168);--info-bg:rgba(40,110,168,.08);--info-bdr:rgba(40,110,168,.22);
  --r:6px;--r-lg:10px;
  --shadow:0 4px 24px rgba(0,0,0,.4);--shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --nav-bg:rgba(14,17,23,.97);--nav-bdr:#1e2430;--nav-text:#7e8fa8;--nav-hover:#c8cdd6;
  --nav-act-bg:#202633;--nav-act-bdr:#2e3748;--nav-act-text:#dde2ea;
  --card-bg:#141820;--card-bdr:#252d3a;
  --input-bg:#1a1f29;--input-bdr:#2e3748;--input-text:#c8cdd6;--input-ph:#3a4455;
  --tbl-head-bg:#181d26;--tbl-head-text:#7e8fa8;--tbl-row-bdr:#1e2430;
  --tbl-hover:rgba(227,198,75,.03);--tbl-group-bg:#1a1f29;--tbl-group-text:#c8cdd6;--tbl-stripe:rgba(255,255,255,.015);
  --tab-text:#7e8fa8;--tab-act:rgb(227,198,75);--tab-bdr:#252d3a;
  --toggle-off:#202633;--toggle-off-bdr:#2e3748;--toggle-on:rgb(227,198,75);--toggle-on-bdr:rgb(240,215,100);--toggle-knob:#0e1117;
  --btn-pri-bg:var(--gold);--btn-pri-text:#0e1117;--btn-pri-hover:rgb(240,215,100);
  --btn-sec-bg:transparent;--btn-sec-text:#7e8fa8;--btn-sec-bdr:#2e3748;
  --btn-sec-hover-bg:#1a1f29;--btn-sec-hover-text:#c8cdd6;--btn-sec-hover-bdr:#3a4455;
  --btn-acc-bg:var(--navy);--btn-acc-text:#fff;--btn-acc-hover:var(--navy-l);
  --dlg-bg:#141820;--dlg-bdr:#2e3748;--dlg-backdrop:rgba(0,0,0,.7);
  --focus-ring:rgba(227,198,75,.4);--dropzone-bg:#141820;--dropzone-bdr:#2e3748;--dropzone-hover:#3a4455;
}

/* ── BODY ─────────────────────────────────────────────────── */
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:.9em}

/* ── LAYOUT ───────────────────────────────────────────────── */
.wrap{max-width:1200px;margin:0 auto;padding:28px 28px 80px}

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
h1,h2,h3{color:var(--text-h);font-weight:600;line-height:1.3}
h1{font-size:1.5em;margin-bottom:20px}
h2{font-size:1.2em;margin:24px 0 14px}
h3{font-size:1.05em;margin:20px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
section{margin-bottom:28px}
section h3{margin-top:0}
p{margin-bottom:8px}
small,.text-muted{font-size:.85em;color:var(--text-m)}
strong{font-weight:600;color:var(--text-h)}

/* ── NAVIGATION ───────────────────────────────────────────── */
.portal-nav{position:sticky;top:0;z-index:80;background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--nav-bdr);display:flex;align-items:center;padding:0 24px;height:52px;gap:14px}
.nav-logo{flex-shrink:0;display:flex;align-items:center}
.nav-logo img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:8px}
.nav-link{font-size:.78em;font-weight:500;color:var(--nav-text);padding:0 12px;height:30px;display:inline-flex;align-items:center;border-radius:var(--r);text-decoration:none;letter-spacing:.02em;transition:color .15s,background .15s;white-space:nowrap;border:1px solid transparent}
.nav-link:hover{color:var(--nav-hover);background:var(--s2)}
.nav-link.active{color:var(--nav-act-text);background:var(--nav-act-bg);border-color:var(--nav-act-bdr)}
.nav-link.admin-link{color:var(--nav-text)}
.nav-link.admin-link:hover{color:var(--nav-hover);background:var(--s2)}
.nav-link.admin-link.active{color:var(--nav-act-text);background:var(--nav-act-bg);border-color:var(--nav-act-bdr)}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.nav-filter-group{display:flex;align-items:center;gap:6px}
.nav-filter-select{padding:2px 24px 2px 10px;height:32px;line-height:normal;margin-top:0;width:auto;vertical-align:middle;background:var(--input-bg);border:1px solid var(--input-bdr);border-radius:var(--r);color:var(--text);font-family:var(--font-sans);font-size:.78em;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a6678' fill='none' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;min-width:120px;transition:border-color .15s,color .15s}
.nav-filter-select:hover,.nav-filter-select:focus{border-color:var(--gold);color:var(--text-h)}
.nav-filter-select.filtered{border-color:var(--gold);color:var(--text-h)}
.nav-filter-select option{background:var(--s2);color:var(--text)}
.nav-user{font-size:.75em;color:var(--text-m);white-space:nowrap}
.nav-user-icon{display:inline-flex;align-items:center;opacity:.6;transition:opacity .15s}
.nav-user-icon:hover{opacity:1}
.nav-user-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-user-icon img{width:18px;height:18px;display:none}
.nav-user-icon::after{content:'';display:inline-block;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-nav-action{font-size:.78em;font-weight:500;height:30px;padding:0 12px;border-radius:var(--r);background:transparent;color:var(--text-m);border:1px solid var(--border2);text-decoration:none;transition:all .15s;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.btn-nav-action:hover{color:var(--text);border-color:var(--gold);background:var(--s2)}
.btn-nav-action.btn-nav-highlight{background:var(--btn-pri-bg);color:var(--btn-pri-text);border-color:var(--btn-pri-bg);font-weight:600}
.btn-nav-action.btn-nav-highlight:hover{background:var(--btn-pri-hover);border-color:var(--btn-pri-hover)}

/* ── ADMIN TABS ───────────────────────────────────────────── */
.admin-tabs{display:flex;gap:0;border-bottom:2px solid var(--tab-bdr);margin-bottom:24px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-tabs a{font-size:.75em;font-weight:500;padding:10px 16px;color:var(--tab-text);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.admin-tabs a:hover{color:var(--text-h)}
.admin-tabs a.active{color:var(--tab-act);border-bottom-color:var(--tab-act)}

/* ── ALERTS ───────────────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--r);font-size:.85em;line-height:1.5;margin-bottom:16px;border:1px solid}
.alert-success{background:var(--success-bg);border-color:var(--success-bdr);color:var(--success)}
.alert-danger{background:var(--danger-bg);border-color:var(--danger-bdr);color:var(--danger)}
.alert-warning{background:var(--warning-bg);border-color:var(--warning-bdr);color:var(--warning)}
.alert-info{background:var(--info-bg);border-color:var(--info-bdr);color:var(--info)}
.alert ul{margin:4px 0 0 18px;list-style:disc}
.alert li{margin-bottom:2px}
.alert a{text-decoration:underline;font-weight:500}
.alert p{margin-bottom:4px}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-sans);font-size:.82em;font-weight:500;padding:8px 18px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1.3;white-space:nowrap;transition:all .15s;letter-spacing:.02em}
.btn:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}
.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.btn-primary{background:var(--btn-pri-bg);color:var(--btn-pri-text);border-color:var(--btn-pri-bg)}
.btn-primary:hover{background:var(--btn-pri-hover);border-color:var(--btn-pri-hover)}
.btn-secondary{background:var(--btn-sec-bg);color:var(--btn-sec-text);border-color:var(--btn-sec-bdr)}
.btn-secondary:hover{background:var(--btn-sec-hover-bg);color:var(--btn-sec-hover-text);border-color:var(--btn-sec-hover-bdr)}
.btn-accent{background:var(--btn-acc-bg);color:var(--btn-acc-text);border-color:var(--btn-acc-bg)}
.btn-accent:hover{background:var(--btn-acc-hover);border-color:var(--btn-acc-hover)}
.btn-danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bdr)}
.btn-danger:hover{background:rgba(224,96,96,.14);border-color:rgba(224,96,96,.35)}
.btn-sm{font-size:.74em;padding:5px 11px}
.btn-icon{padding:5px 7px;min-width:28px;min-height:28px}
.btn-icon svg{width:15px;height:15px;flex-shrink:0}

/* ── Ghost icon-only action buttons ───────────────────────── */
/*
   Applies equally to <a> and <button> — eliminates the browser-
   default ButtonFace background on <button> elements so all action
   icons look identical regardless of element type.

   Usage in action columns:
     Download : btn btn-sm btn-icon btn-ghost
     Rename   : btn btn-sm btn-icon btn-ghost btn-edit
     Delete   : btn btn-sm btn-icon btn-ghost btn-danger
*/
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-m)}
.btn-ghost:hover{background:var(--s2);border-color:transparent;color:var(--text-h)}
.btn-ghost.btn-edit{color:var(--info)}
.btn-ghost.btn-edit:hover{background:var(--s2);border-color:transparent;color:var(--text-h)}
/* Overrides the filled .btn-danger rule when combined with .btn-ghost */
.btn-ghost.btn-danger{background:transparent;border-color:transparent;color:var(--danger)}
.btn-ghost.btn-danger:hover{background:var(--s2);border-color:transparent;color:var(--text-h)}

/* ── TOGGLE SWITCHES ─────────────────────────────────────── */
.toggle-switch{position:relative;width:36px;height:20px;background:var(--toggle-off);border:1px solid var(--toggle-off-bdr);border-radius:100px;cursor:pointer;padding:0;transition:background .2s,border-color .2s;flex-shrink:0;appearance:none;-webkit-appearance:none;outline:none;vertical-align:middle}
.toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;background:var(--toggle-knob);border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.toggle-switch.on{background:var(--toggle-on);border-color:var(--toggle-on-bdr)}
.toggle-switch.on::after{transform:translateX(16px)}
.toggle-switch:disabled{opacity:.25;cursor:not-allowed}

/* ── FORMS ────────────────────────────────────────────────── */
label{display:block !important;font-size:.85em;color:var(--text-m);margin-bottom:14px;font-weight:500}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="search"],select,textarea,.form-input,.form-select{display:block !important;width:100%;padding:9px 12px;background:var(--input-bg);border:1px solid var(--input-bdr);border-radius:var(--r);color:var(--input-text);font-family:var(--font-sans);font-size:1em;outline:none;transition:border-color .15s;margin-top:5px}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
input::placeholder,textarea::placeholder{color:var(--input-ph)}
input:disabled,select:disabled{opacity:.45;cursor:not-allowed}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a6678' fill='none' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
select option{background:var(--s2);color:var(--text)}
input[type="checkbox"]{display:inline !important;width:15px;height:15px;accent-color:var(--gold);cursor:pointer;vertical-align:middle;margin-right:4px}
.form-hint{font-size:.82em;color:var(--text-m);margin:6px 0 14px;line-height:1.5}
.form-hint ul{margin:4px 0 0 18px;list-style:disc}
.form-hint li{margin-bottom:2px}
fieldset{border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;margin-bottom:14px}
legend{font-size:.85em;font-weight:600;color:var(--text-h);padding:0 6px}

/* ── SURFACE CARD ─────────────────────────────────────────── */
.surface-card{background:var(--card-bg);border:1px solid var(--card-bdr);border-radius:var(--r-lg);padding:0;margin-bottom:20px;overflow:hidden}
.surface-card .del-table{margin:0}

/* ── TABLES ───────────────────────────────────────────────── */
.del-table{width:100%;border-collapse:collapse;font-size:.84em}
.del-table thead th{padding:10px 14px;text-align:left;font-size:.7em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tbl-head-text);background:var(--tbl-head-bg);border-bottom:1px solid var(--border);white-space:nowrap}
.del-table tbody td{padding:10px 14px;border-bottom:1px solid var(--tbl-row-bdr);color:var(--text);vertical-align:middle}
.del-table tbody tr:last-child td{border-bottom:none}
.del-table tbody tr:hover td{background:var(--tbl-hover)}
.del-table tbody tr:nth-child(even) td{background:var(--tbl-stripe)}
.del-table tbody tr:nth-child(even):hover td{background:var(--tbl-hover)}
.del-table a{color:var(--info);text-decoration:none}
.del-table a:hover{text-decoration:underline}
.td-action{text-align:center !important}

/* ── GROUP HEADER ROWS ────────────────────────────────────── */
.org-header td,.group-header td{background:var(--tbl-group-bg) !important;font-weight:600;color:var(--tbl-group-text);border-bottom:1px solid var(--border) !important;font-size:.92em;padding:9px 14px;letter-spacing:.02em}
.org-header:hover td,.group-header:hover td{background:var(--tbl-group-bg) !important}

/* ── TOOLBAR (filter rows) ────────────────────────────────── */
form[method="GET"]{display:flex;align-items:flex-end;gap:10px;margin-bottom:16px;flex-wrap:wrap}
form[method="GET"] label{display:flex !important;flex-direction:column;gap:3px;margin-bottom:0;font-size:.78em}
form[method="GET"] input,form[method="GET"] select{width:auto;min-width:140px;margin-top:0;padding:7px 10px;font-size:.92em}
form[method="GET"] select{padding-right:28px}

/* ── INLINE FORMS ─────────────────────────────────────────── */
.inline-form{display:inline}

/* ── PAGINATION ───────────────────────────────────────────── */
.pagination{display:flex;align-items:center;gap:3px;margin-top:18px;font-size:.82em}
.pagination a{padding:5px 10px;border-radius:var(--r);color:var(--text-m);text-decoration:none;transition:background .15s,color .15s;border:1px solid transparent}
.pagination a:hover{background:var(--s2);color:var(--text);border-color:var(--border)}
.pagination strong{padding:5px 10px;border-radius:var(--r);background:var(--gold);color:var(--bg)}

/* ── BADGES ───────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:.68em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px;white-space:nowrap}
.badge-active{background:var(--success-bg);color:var(--success)}
.badge-pending{background:var(--warning-bg);color:var(--warning)}
.badge-locked{background:var(--danger-bg);color:var(--danger)}
.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* ── DIALOGS ──────────────────────────────────────────────── */
dialog{background:var(--dlg-bg);color:var(--text);border:1px solid var(--dlg-bdr);border-radius:var(--r-lg);padding:24px 28px;max-width:500px;width:90vw;box-shadow:var(--shadow)}
dialog::backdrop{background:var(--dlg-backdrop)}
dialog h3{margin-top:0;border-bottom:none;padding-bottom:0;margin-bottom:16px}
dialog .btn{margin-right:8px;margin-top:8px}

/* ── DROPZONE ─────────────────────────────────────────────── */
#content-zone,#fmgr-dropzone,.dropzone{border:2px dashed var(--dropzone-bdr);border-radius:var(--r-lg);background:var(--dropzone-bg);padding:36px 24px;text-align:center;cursor:pointer;transition:border-color .2s;margin-bottom:18px}
#content-zone:hover,#fmgr-dropzone:hover{border-color:var(--dropzone-hover)}
#content-zone p,#fmgr-dropzone p{color:var(--text-m);font-size:.85em;margin-bottom:4px}
#content-zone input[type="file"],#fmgr-dropzone input[type="file"]{display:inline !important;width:auto;margin:0 auto 8px;font-size:.82em;color:var(--text-m);border:none;background:none;padding:0}

/* ── QUEUE / PROGRESS ─────────────────────────────────────── */
.queue-item,#items-panel>div,#fmgr-items-panel>div{display:flex;flex-direction:column;align-items:stretch;padding:8px 14px;background:var(--s1);border:1px solid var(--border);border-radius:var(--r);margin-bottom:4px;font-size:.82em;gap:5px}
.queue-item-main{display:flex;align-items:center;justify-content:space-between;width:100%}
.item-status{color:var(--text-m);font-size:.92em}

/* Filename rename + title inputs inside each queue item */
.queue-item-fields{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.queue-item-fields label{flex:1 1 180px;margin-bottom:0 !important;font-size:.78em;font-weight:500;color:var(--text-m);display:flex !important;flex-direction:column;gap:3px}
.queue-item-fields input[type="text"]{padding:4px 8px;font-size:.82em;margin-top:0;width:100% !important;display:block !important;height:auto}

/* Thumb zone row */
.thumb-zone{width:100%;padding-top:2px}
.thumb-notice{font-size:.8em;color:var(--text-m)}
progress{width:100%;height:8px;border-radius:4px;appearance:none;-webkit-appearance:none;overflow:hidden;border:none}
progress::-webkit-progress-bar{background:var(--s3);border-radius:4px}
progress::-webkit-progress-value{background:var(--gold);border-radius:4px;transition:width .3s}
progress::-moz-progress-bar{background:var(--gold);border-radius:4px}
#progress-bar,#fmgr-progress{margin:16px 0}
#progress-label,#fmgr-progress-label{font-size:.82em;color:var(--text-m);margin-top:4px;display:block}
#result-msg,#fmgr-result{padding:12px 16px;border-radius:var(--r);font-size:.85em;background:var(--success-bg);border:1px solid var(--success-bdr);color:var(--success)}
#notify-opts{margin:16px 0}
#notify-opts label{display:flex !important;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer}
#notify-opts select{width:auto;display:inline-block !important;margin-top:0}

/* ── DETAILS / SUMMARY ────────────────────────────────────── */
details{margin-bottom:16px}
summary{cursor:pointer;font-size:.85em;font-weight:500;color:var(--info);padding:8px 0;user-select:none}
summary:hover{color:var(--text-h)}

/* ── ICON ─────────────────────────────────────────────────── */
.icon{width:16px;height:16px;vertical-align:middle;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── AUTH PAGES ───────────────────────────────────────────── */
.auth-page{min-height:100vh;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;padding:40px 20px;background:var(--bg)}
.auth-logo{margin-bottom:28px}
.auth-logo img{height:44px;width:auto;display:block}
.auth-card{background:var(--card-bg);border:1px solid var(--card-bdr);border-radius:var(--r-lg);padding:32px 36px;width:100%;max-width:400px;box-shadow:var(--shadow)}
.auth-card h1{text-align:center;margin-bottom:24px;font-size:1.3em}
.auth-card .btn{width:100%;justify-content:center;margin-top:6px}
.auth-card .alert{font-size:.82em}
.auth-link{display:block;text-align:center;margin-top:18px;font-size:.82em;color:var(--text-m)}
.auth-link:hover{color:var(--text-h)}
.reset-section{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.reset-section p{font-size:.88em;color:var(--text-m);margin-bottom:12px}

/* ── THUMB (future) ───────────────────────────────────────── */
.thumb-cell{width:64px;padding:4px 8px !important}
.thumb-cell img{width:56px;height:32px;object-fit:cover;border-radius:4px;background:var(--s2)}

/* ── UTILITY LAYOUTS ─────────────────────────────────────── */
.row-2col{display:flex;gap:12px;flex-wrap:wrap}
.row-2col>label,.row-2col>.col{flex:1 1 calc(50% - 6px);min-width:180px}
.inline-actions{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.order-cell{display:flex;align-items:center;gap:2px;justify-content:center;white-space:nowrap}
.order-cell .btn{padding:3px 6px;min-width:24px;min-height:24px}
.order-val{font-size:.85em;color:var(--text-m);margin-left:2px}
.checkbox-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.checkbox-row label{margin-bottom:0 !important}
.theme-inline{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.theme-inline label{margin-bottom:0}
.theme-inline p{margin-bottom:0;line-height:1.5}
.pw-fields-row{display:flex;gap:12px;flex-wrap:wrap}
.pw-fields-row>label{flex:1 1 calc(50% - 6px);min-width:180px}

/* ── PASSWORD REVEAL TOGGLE ──────────────────────────────── */
/*
   Usage:
     <div class="pw-field-wrap">
       <input type="password" …>
       <button type="button" class="btn btn-sm btn-icon btn-ghost btn-pw-reveal" aria-label="Show password">
         <svg>…eye / eye-off icon…</svg>
       </button>
     </div>

   JS toggle example:
     btn.addEventListener('click', () => {
       const inp = btn.previousElementSibling;
       inp.type = inp.type === 'password' ? 'text' : 'password';
       btn.setAttribute('aria-label', inp.type === 'password' ? 'Show password' : 'Hide password');
     });
*/
.pw-field-wrap{position:relative;display:flex;align-items:center}
.pw-field-wrap input{padding-right:36px !important;width:100%}
.btn-pw-reveal{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--text-d);border:none;background:transparent;padding:4px;cursor:pointer;line-height:0;transition:color .15s;flex-shrink:0}
.btn-pw-reveal:hover{color:var(--text-h)}
.btn-pw-reveal:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r)}
.btn-pw-reveal svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;display:block}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:900px){
  .portal-nav{padding:0 12px;gap:8px;height:auto;min-height:52px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .nav-links{order:3;width:100%;justify-content:center;padding:4px 0}
  .nav-right{flex-wrap:wrap;justify-content:flex-end}
  .nav-filter-group{width:100%;order:4}
  .nav-filter-select{flex:1;min-width:0}
  .wrap{padding:18px 14px 60px}
}
@media(max-width:600px){
  .del-table{font-size:.76em}
  .del-table thead th,.del-table tbody td{padding:7px 8px}
  .auth-card{padding:24px 20px}
  .btn{font-size:.78em;padding:7px 12px}
}

/* ================================================================
   THEME: DARK INDUSTRIAL
   ================================================================ */
[data-theme="dark-industrial"]{
  --font-sans:'IBM Plex Sans',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --bg:#0b0d10;--s1:#111318;--s2:#181b21;--s3:#1f232b;--border:#252830;--border2:#2e323c;
  --text:#d5d3cc;--text-h:#eceae4;--text-m:#9a9890;--text-d:#3e4048;
  --success:#3ecf6e;--success-bg:rgba(62,207,110,.07);--success-bdr:rgba(62,207,110,.2);
  --danger:#e05c5c;--danger-bg:rgba(224,92,92,.06);--danger-bdr:rgba(224,92,92,.2);
  --warning:rgb(210,118,40);--warning-bg:rgba(210,118,40,.07);--warning-bdr:rgba(210,118,40,.2);
  --info:rgb(24,98,158);--info-bg:rgba(24,98,158,.08);--info-bdr:rgba(24,98,158,.22);
  --nav-bg:rgba(11,13,16,.96);--nav-bdr:#1a1c22;--nav-text:#9a9890;--nav-hover:#eceae4;
  --nav-act-bg:#1f232b;--nav-act-bdr:#2e323c;--nav-act-text:#eceae4;
  --card-bg:#111318;--card-bdr:#252830;
  --input-bg:#181b21;--input-bdr:#2e323c;--input-text:#d5d3cc;--input-ph:#3e4048;
  --tbl-head-bg:#14171d;--tbl-head-text:#9a9890;--tbl-row-bdr:#1a1c22;--tbl-hover:rgba(210,118,40,.03);
  --tbl-group-bg:#1a1d24;--tbl-group-text:#d5d3cc;--tbl-stripe:rgba(255,255,255,.012);
  --tab-text:#9a9890;--tab-act:rgb(210,118,40);--tab-bdr:#252830;
  --toggle-off:#1f232b;--toggle-off-bdr:#2e323c;--toggle-on:var(--navy);--toggle-on-bdr:var(--navy-l);--toggle-knob:#fff;
  --btn-pri-bg:var(--navy);--btn-pri-text:#fff;--btn-pri-hover:var(--navy-l);
  --btn-sec-bg:transparent;--btn-sec-text:#9a9890;--btn-sec-bdr:#2e323c;
  --btn-sec-hover-bg:#181b21;--btn-sec-hover-text:#eceae4;--btn-sec-hover-bdr:#3e4048;
  --btn-acc-bg:var(--amber);--btn-acc-text:#fff;--btn-acc-hover:var(--amber-l);
  --dlg-bg:#111318;--dlg-bdr:#2e323c;--dlg-backdrop:rgba(0,0,0,.7);
  --focus-ring:rgba(24,98,158,.5);--dropzone-bg:#111318;--dropzone-bdr:#252830;--dropzone-hover:#3e4048;
  --gold:var(--amber);
}
[data-theme="dark-industrial"] .admin-tabs a{text-transform:none;letter-spacing:.03em;font-size:.78em}

/* ================================================================
   THEME: CLEAN LIGHT
   ================================================================ */
[data-theme="clean-light"]{
  --font-sans:'DM Sans',sans-serif;--font-mono:'DM Mono',monospace;
  --bg:#f5f6f8;--s1:#ffffff;--s2:#f0f1f4;--s3:#e8eaed;--border:#dde0e5;--border2:#c8ccd3;
  --text:#4a4a4a;--text-h:#2a2a2a;--text-m:#6a6a6a;--text-d:#b0b4bc;
  --success:#2a9d5c;--success-bg:rgba(42,157,92,.05);--success-bdr:rgba(42,157,92,.16);
  --danger:#c94040;--danger-bg:rgba(201,64,64,.04);--danger-bdr:rgba(201,64,64,.16);
  --warning:rgb(210,118,40);--warning-bg:rgba(210,118,40,.05);--warning-bdr:rgba(210,118,40,.16);
  --info:rgb(13,77,127);--info-bg:rgba(13,77,127,.04);--info-bdr:rgba(13,77,127,.14);
  --shadow:0 1px 4px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);--shadow-sm:0 1px 3px rgba(0,0,0,.07);
  --r:7px;--r-lg:12px;
  --nav-bg:#ffffff;--nav-bdr:#dde0e5;--nav-text:#6a6a6a;--nav-hover:#2a2a2a;
  --nav-act-bg:rgba(13,77,127,.06);--nav-act-bdr:rgba(13,77,127,.14);--nav-act-text:rgb(13,77,127);
  --card-bg:#ffffff;--card-bdr:#dde0e5;
  --input-bg:#ffffff;--input-bdr:#dde0e5;--input-text:#2a2a2a;--input-ph:#b0b4bc;
  --tbl-head-bg:#f0f1f4;--tbl-head-text:#6a6a6a;--tbl-row-bdr:#ecedef;--tbl-hover:rgba(13,77,127,.03);
  --tbl-group-bg:#e8eaed;--tbl-group-text:#2a2a2a;--tbl-stripe:rgba(0,0,0,.015);
  --tab-text:#6a6a6a;--tab-act:rgb(13,77,127);--tab-bdr:#dde0e5;
  --toggle-off:#dde0e5;--toggle-off-bdr:#c8ccd3;--toggle-on:var(--navy);--toggle-on-bdr:var(--navy-l);--toggle-knob:#fff;
  --btn-pri-bg:var(--navy);--btn-pri-text:#fff;--btn-pri-hover:var(--navy-l);
  --btn-sec-bg:#fff;--btn-sec-text:#6a6a6a;--btn-sec-bdr:#dde0e5;
  --btn-sec-hover-bg:#f0f1f4;--btn-sec-hover-text:#2a2a2a;--btn-sec-hover-bdr:#c8ccd3;
  --btn-acc-bg:var(--amber);--btn-acc-text:#fff;--btn-acc-hover:var(--amber-l);
  --dlg-bg:#ffffff;--dlg-bdr:#dde0e5;--dlg-backdrop:rgba(0,0,0,.25);
  --focus-ring:rgba(13,77,127,.3);--dropzone-bg:#fff;--dropzone-bdr:#dde0e5;--dropzone-hover:var(--navy-l);
  --gold:var(--navy);
}
[data-theme="clean-light"] .admin-tabs a{text-transform:none;letter-spacing:.03em;font-size:.78em}

/* ================================================================
   THEME: NAVY COMMAND
   ================================================================ */
[data-theme="navy-command"]{
  --font-sans:'Sora',sans-serif;--font-mono:'JetBrains Mono',monospace;
  --bg:#eef1f5;--s1:#ffffff;--s2:#f4f5f8;--s3:#e6e9ef;--border:rgba(13,77,127,.12);--border2:rgba(13,77,127,.2);
  --text:#4a5568;--text-h:#1e232d;--text-m:#5a6473;--text-d:rgba(90,100,115,.4);
  --success:#27ae73;--success-bg:rgba(39,174,115,.05);--success-bdr:rgba(39,174,115,.16);
  --danger:#c94040;--danger-bg:rgba(201,64,64,.04);--danger-bdr:rgba(201,64,64,.16);
  --warning:rgb(210,118,40);--warning-bg:rgba(210,118,40,.05);--warning-bdr:rgba(210,118,40,.16);
  --info:rgb(13,77,127);--info-bg:rgba(13,77,127,.04);--info-bdr:rgba(13,77,127,.14);
  --shadow:0 2px 8px rgba(13,77,127,.06),0 8px 24px rgba(13,77,127,.04);--shadow-sm:0 1px 3px rgba(13,77,127,.06);
  --r:7px;--r-lg:12px;
  --nav-bg:rgb(13,77,127);--nav-bdr:rgb(8,50,85);--nav-text:rgba(255,255,255,.65);--nav-hover:#fff;
  --nav-act-bg:rgba(255,255,255,.12);--nav-act-bdr:rgba(255,255,255,.2);--nav-act-text:#fff;
  --card-bg:#ffffff;--card-bdr:rgba(13,77,127,.1);
  --input-bg:#ffffff;--input-bdr:rgba(13,77,127,.14);--input-text:#1e232d;--input-ph:rgba(90,100,115,.4);
  --tbl-head-bg:#f0f2f6;--tbl-head-text:#5a6473;--tbl-row-bdr:rgba(13,77,127,.07);--tbl-hover:rgba(13,77,127,.03);
  --tbl-group-bg:rgba(13,77,127,.05);--tbl-group-text:#1e232d;--tbl-stripe:rgba(13,77,127,.015);
  --tab-text:#5a6473;--tab-act:rgb(13,77,127);--tab-bdr:rgba(13,77,127,.12);
  --toggle-off:#d8dce4;--toggle-off-bdr:#c0c5d0;--toggle-on:var(--navy);--toggle-on-bdr:var(--navy-l);--toggle-knob:#fff;
  --btn-pri-bg:var(--navy);--btn-pri-text:#fff;--btn-pri-hover:var(--navy-l);
  --btn-sec-bg:#fff;--btn-sec-text:#5a6473;--btn-sec-bdr:rgba(13,77,127,.14);
  --btn-sec-hover-bg:rgba(13,77,127,.04);--btn-sec-hover-text:#1e232d;--btn-sec-hover-bdr:rgba(13,77,127,.25);
  --btn-acc-bg:var(--amber);--btn-acc-text:#fff;--btn-acc-hover:var(--amber-l);
  --dlg-bg:#ffffff;--dlg-bdr:rgba(13,77,127,.14);--dlg-backdrop:rgba(0,0,0,.3);
  --focus-ring:rgba(13,77,127,.3);--dropzone-bg:#fff;--dropzone-bdr:rgba(13,77,127,.14);--dropzone-hover:var(--navy-l);
  --gold:var(--navy);
}
[data-theme="navy-command"] .nav-filter-select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.6)}
[data-theme="navy-command"] .nav-filter-select:hover,[data-theme="navy-command"] .nav-filter-select:focus{border-color:rgba(255,255,255,.35);color:#fff}
[data-theme="navy-command"] .nav-filter-select option{background:rgb(13,77,127);color:#fff}
[data-theme="navy-command"] .nav-user{color:rgba(255,255,255,.55)}
[data-theme="navy-command"] .nav-user-icon{filter:brightness(10)}
[data-theme="navy-command"] .btn-nav-action{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.75)}
[data-theme="navy-command"] .btn-nav-action:hover{background:rgba(255,255,255,.15);color:#fff}
[data-theme="navy-command"] .admin-tabs a{text-transform:none;letter-spacing:.03em;font-size:.78em}

/* ================================================================
   THEME: WARM SLATE
   ================================================================ */
[data-theme="warm-slate"]{
  --font-sans:'Plus Jakarta Sans',sans-serif;--font-mono:'Fira Code',monospace;
  --bg:#f0ede8;--s1:#faf8f5;--s2:#f5f2ee;--s3:#ebe7e0;--border:#ddd9d2;--border2:#c8c3bb;
  --text:#4a4540;--text-h:#2e2b26;--text-m:#7a7268;--text-d:#b5b0a8;
  --success:#2a9058;--success-bg:rgba(42,144,88,.05);--success-bdr:rgba(42,144,88,.16);
  --danger:#b83c3c;--danger-bg:rgba(184,60,60,.04);--danger-bdr:rgba(184,60,60,.16);
  --warning:rgb(210,118,40);--warning-bg:rgba(210,118,40,.06);--warning-bdr:rgba(210,118,40,.18);
  --info:rgb(13,77,127);--info-bg:rgba(13,77,127,.04);--info-bdr:rgba(13,77,127,.14);
  --shadow:0 1px 3px rgba(80,60,20,.06),0 4px 14px rgba(80,60,20,.05);--shadow-sm:0 1px 2px rgba(80,60,20,.07);
  --r:8px;--r-lg:14px;
  --nav-bg:#faf8f5;--nav-bdr:#ddd9d2;--nav-text:#7a7268;--nav-hover:#2e2b26;
  --nav-act-bg:rgba(210,118,40,.08);--nav-act-bdr:rgba(210,118,40,.18);--nav-act-text:#2e2b26;
  --card-bg:#faf8f5;--card-bdr:#ddd9d2;
  --input-bg:#ffffff;--input-bdr:#ddd9d2;--input-text:#2e2b26;--input-ph:#b5b0a8;
  --tbl-head-bg:#ebe7e0;--tbl-head-text:#7a7268;--tbl-row-bdr:#e4e0d8;--tbl-hover:rgba(210,118,40,.04);
  --tbl-group-bg:#e4e0d8;--tbl-group-text:#2e2b26;--tbl-stripe:rgba(0,0,0,.015);
  --tab-text:#7a7268;--tab-act:var(--amber);--tab-bdr:#ddd9d2;
  --toggle-off:#ddd9d2;--toggle-off-bdr:#c8c3bb;--toggle-on:var(--amber);--toggle-on-bdr:var(--amber-l);--toggle-knob:#fff;
  --btn-pri-bg:var(--amber);--btn-pri-text:#fff;--btn-pri-hover:var(--amber-l);
  --btn-sec-bg:#faf8f5;--btn-sec-text:#7a7268;--btn-sec-bdr:#ddd9d2;
  --btn-sec-hover-bg:#ebe7e0;--btn-sec-hover-text:#2e2b26;--btn-sec-hover-bdr:#c8c3bb;
  --btn-acc-bg:var(--navy);--btn-acc-text:#fff;--btn-acc-hover:var(--navy-l);
  --dlg-bg:#faf8f5;--dlg-bdr:#ddd9d2;--dlg-backdrop:rgba(0,0,0,.2);
  --focus-ring:rgba(210,118,40,.35);--dropzone-bg:#faf8f5;--dropzone-bdr:#ddd9d2;--dropzone-hover:var(--amber);
  --gold:var(--amber);
}
[data-theme="warm-slate"] .admin-tabs a{text-transform:none;letter-spacing:.03em;font-size:.78em}

/* ============================================================
   THUMBNAIL COLUMN — portal.css additions (v6r3)
   Append to the end of assets/portal.css
   ============================================================ */

/* Column header — minimal width, no label */
.th-thumb {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    padding: 0 0.25rem !important;
}

/* Cell containing the thumbnail */
.td-thumb {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    padding: 0.35rem 0.25rem !important;
    vertical-align: middle;
    line-height: 0;
}

/* Real image thumbnail — 16:9, rounded corners */
img.file-thumb {
    display: block;
    width: 96px;
    height: 54px;            /* 96 / 16 * 9 = 54 */
    object-fit: cover;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
}

/* Generic file-type SVG icon — same 16:9 container */
svg.file-thumb-icon {
    display: block;
    width: 96px;
    height: 54px;
    border-radius: 4px;
}

/* ── Large thumbnail variant (paDashboard) ───────────────── */
.del-table-lg-thumb .th-thumb {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}

.del-table-lg-thumb .td-thumb {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}

/* Shrink Date / Type / Actions to content width */
.del-table-lg-thumb .th-compact {
    width: 1%;
    white-space: nowrap;
}

.del-table-lg-thumb img.file-thumb {
    width: 192px;
    height: 108px;            /* 192 / 16 * 9 = 108 */
}

.del-table-lg-thumb svg.file-thumb-icon {
    width: 192px;
    height: 108px;
}
/* ================================================================
   PREVIEW MODAL — paDashboard.php  (append to end of portal.css)
   Rev: 6r4
   ================================================================ */

/* ── Dialog overrides ─────────────────────────────────────── */
/*
   IMPORTANT — display:flex must NOT be placed on the <dialog>
   element itself. The browser's built-in hide mechanism sets the
   element to display:none when dlg.close() is called, but an
   author-level display:flex wins in specificity and the element
   remains visible as a ghost overlay.

   Centering: showModal() centres via UA position:fixed + margin:auto,
   but author stylesheets with differing max-width values can shift the
   result. Explicit position:fixed + translate(-50%,-50%) is
   bulletproof across Chrome, Firefox, and Safari.

   The flex layout is moved to the inner .preview-dlg-inner wrapper.
*/
#preview-dlg {
    /* Explicit centring — overrides any UA margin drift */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;

    /* Sizing */
    max-width: min(92vw, 960px);
    width:     min(92vw, 960px);
    max-height: 92vh;

    /* Reset the base dialog padding */
    padding: 0;
    overflow: hidden;

    /* display is intentionally NOT overridden — let the browser
       toggle between its default open/closed states safely */

    border-radius: var(--r-lg);
    /* border, background, box-shadow inherited from base dialog rule */
}

/* ── Inner layout wrapper ─────────────────────────────────── */
/* Carries the flex column layout that was previously (incorrectly)
   on the <dialog> element itself.                               */
.preview-dlg-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 92vh;
    overflow: hidden;
}

/* ── Header bar ───────────────────────────────────────────── */
.preview-dlg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    background: var(--s2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.preview-dlg-title {
    font-size: .88em;
    font-weight: 600;
    color: var(--text-h);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* ── Body container ───────────────────────────────────────── */
.preview-dlg-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    overscroll-behavior: contain;
}

/* ── Loading state ────────────────────────────────────────── */
.preview-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-m);
    font-size: .86em;
    padding: 56px 32px;
    flex-shrink: 0;
}

.preview-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: preview-spin .65s linear infinite;
}

@keyframes preview-spin { to { transform: rotate(360deg); } }

/* ── Error state ──────────────────────────────────────────── */
.preview-error {
    color: var(--danger);
    font-size: .86em;
    text-align: center;
    padding: 40px 32px;
    line-height: 1.6;
}

/* ── Image viewer ─────────────────────────────────────────── */
.preview-img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    background: var(--bg);
    user-select: none;
    -webkit-user-select: none;
}

.preview-img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 100px);
    object-fit: contain;
    border-radius: var(--r);
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* ── Video viewer ─────────────────────────────────────────── */
.preview-video-wrap {
    width: 100%;
    background: #000;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-video {
    display: block;
    width: 100%;
    max-height: calc(92vh - 60px);
    outline: none;
    background: #000;
}

/* ── PDF viewer ───────────────────────────────────────────── */
.preview-pdf-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Toolbar sits above the canvas wrap — NOT inside it — so the
   overlay on the canvas area does not block the nav buttons.  */
.pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 9px 16px;
    background: var(--s2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.pdf-page-info {
    font-size: .8em;
    color: var(--text-m);
    min-width: 110px;
    text-align: center;
    white-space: nowrap;
}

.pdf-canvas-wrap {
    position: relative;
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: var(--s3);
    overscroll-behavior: contain;
    user-select: none;
    -webkit-user-select: none;
}

#pdf-canvas {
    display: block;
    max-width: 100%;
    box-shadow: var(--shadow);
    border-radius: 2px;
    pointer-events: none;
}

/* ── Transparent overlay ──────────────────────────────────── */
/* Sits on top of <img> and <canvas> via position:absolute inset:0.
   Captures right-click and drag. z-index:10 keeps it above media
   but below the dialog chrome. Does NOT cover the PDF toolbar
   (toolbar is a sibling above .pdf-canvas-wrap, not a child).  */
.preview-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: default;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
}

/* ── Thumbnail click affordance ───────────────────────────── */
.td-preview-trigger {
    cursor: pointer;
}

.td-preview-trigger:hover img.file-thumb,
.td-preview-trigger:hover svg.file-thumb-icon {
    opacity: .75;
    transition: opacity .15s ease;
}

.preview-thumb-container {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.preview-thumb-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .58);
    border: 1.5px solid rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}

.td-preview-trigger:hover .preview-thumb-badge {
    opacity: 1;
}

.preview-thumb-badge svg {
    width: 13px;
    height: 13px;
}

/* ── Title click affordance ───────────────────────────────── */
.title-preview-trigger {
    cursor: pointer;
    color: var(--info);
}

.title-preview-trigger:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Preview eye-icon button in actions column ────────────── */
/*
   Legacy alias — kept so any existing paDashboard markup that
   uses .btn-preview-open continues to render correctly.
   New code should use .btn-ghost instead.
*/
.btn-preview-open {
    background: transparent;
    border-color: transparent;
    color: var(--text-m);
}

.btn-preview-open:hover {
    color: var(--gold);
    border-color: transparent;
    background: var(--gold-l);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
    #preview-dlg {
        max-width: 100vw;
        width:     100vw;
        max-height: 100dvh;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 0;
    }

    .preview-dlg-inner {
        max-height: 100dvh;
    }

    .preview-img {
        max-height: calc(100dvh - 110px);
    }

    .preview-video {
        max-height: calc(100dvh - 70px);
    }

    /* Always show badge on touch — no hover state available */
    .preview-thumb-badge {
        opacity: 1;
    }
}


/* ================================================================
   FILTER FORM — control height normalisation
   Applies to paDashboard.php, cScratch.php, and any other portal
   page that uses a form[method="GET"] with .btn-sm Filter/Clear buttons.
   ================================================================

   Problem: the base portal.css filter-form rule uses
     padding:7px 10px; font-size:.92em
   which makes select dropdowns and text inputs ~10px taller than
   .btn-sm (padding:5px 11px; font-size:.74em).

   Fix: override padding and font-size to match .btn-sm exactly.

   Why 0.74rem instead of 0.74em:
   cScratch.php wraps its date input inside a <label> that already
   has font-size:.78em.  Using 'em' would compound (.78 × .74 = .577em
   effective) and make the text far too small.  'rem' is root-relative
   (html{font-size:15px} → 0.74rem = 11.1px) so it is label-agnostic
   and matches .btn-sm on every page regardless of nesting depth.
   ================================================================ */
form[method="GET"] input,
form[method="GET"] select {
    padding:     5px 10px;   /* was 7px 10px — matches btn-sm vertical rhythm */
    font-size:   0.74rem;    /* rem breaks label-inheritance; equals .74em at root */
    line-height: 1.3;        /* matches btn base line-height */
}

/* Re-apply select-only right padding so the chevron arrow has room */
form[method="GET"] select {
    padding-right: 28px;
}
/* ================================================================
   NAV FILTER — cascade override block
   form[method="GET"] (line 172) sets align-items:flex-end and
   margin-bottom:16px. form[method="GET"] select (lines 174 & 835)
   has specificity (0,1,2) which silently beats .nav-filter-select
   (0,1,0) for padding, font-size, and line-height.
   .portal-nav scoped rules raise specificity to (0,2,x) so they
   win the cascade unconditionally, regardless of whether the
   selects are wrapped in a form element or not.
   ================================================================ */

/* Reset any form container used to house the filter selects */
.portal-nav form[method="GET"] {
    display:     inline-flex;
    align-items: center;
    margin:      0;
    gap:         6px;
    flex-wrap:   nowrap;
}

/* Force correct dimensions on the selects — beats (0,1,2) */
.portal-nav form[method="GET"] select,
.portal-nav .nav-filter-select {
    height:        32px;
    padding:       2px 24px 2px 10px;
    font-size:     .78em;
    line-height:   normal;
    margin-top:    0;
    margin-bottom: 0;
    width:         auto;
    min-width:     120px;
    box-sizing:    border-box;
    align-self:    center;
}