/* ==========================================
   DRILLBIT GUIDE ANIMATIONS v3
   ========================================== */

/* === CONTAINER === */
.guide-anim{border:1px solid #e2e2e0;border-radius:16px;overflow:hidden;margin:28px 0 32px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.ga-slides{position:relative}
.ga-slide{display:none}
.ga-slide.active{display:block}

.guide-anim{position:relative;z-index:0;overflow:hidden;border-radius:14px;margin-bottom:24px;border:1px solid #e5e5e0;background:#fff}

/* === VIEWPORT (animation stage) === */
.ga-viewport{position:relative;height:340px;overflow:hidden;background:#eceae6}

/* === INFO === */
.ga-info{padding:18px 22px 14px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-step-badge{display:inline-block;font-size:10px;font-weight:700;color:#1967D2;background:#E8F0FE;padding:4px 12px;border-radius:20px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.8px}
.ga-info h3{font-size:16px;font-weight:600;margin-bottom:4px;color:#1a1a1a;text-align:left;hyphens:manual;-webkit-hyphens:manual}
.ga-info p{font-size:13px;color:#6b6b6b;line-height:1.55;margin:0;text-align:left;hyphens:manual;-webkit-hyphens:manual;word-spacing:normal}

/* === CONTROLS === */
.ga-controls{display:none}
.ga-viewport{cursor:pointer;position:relative}
.ga-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.ga-overlay.on{opacity:1;pointer-events:auto}
.ga-overlay-btn{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ga-overlay-btn svg{width:22px;height:22px;color:#333;margin-left:3px}
.ga-overlay-btn .reset-ico{position:absolute;bottom:10px;right:10px}
.ga-reset-float{position:absolute;bottom:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:201;opacity:0;pointer-events:none;transition:opacity .25s ease}
.ga-reset-float.on{opacity:1;pointer-events:auto}
.ga-reset-float svg{width:13px;height:13px;color:#333}
.ga-progress{height:3px;background:#eee;border-radius:2px}
.ga-progress-bar{height:100%;background:#4285f4;transition:width .5s ease;border-radius:2px}

/* === CURSOR === */
.ga-cursor{position:absolute;width:20px;height:24px;z-index:100;pointer-events:none;opacity:0;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.25))}
.ga-cursor.vis{opacity:1}

/* === SCENE: each phase lives in a .sc layer === */
.sc{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease;font-family:var(--db-font,system-ui,sans-serif)}
.sc.on{opacity:1;pointer-events:auto}

/* ---- SCENE 1: EMAIL ---- */



@keyframes npop{0%{opacity:0;transform:translateX(-50%) scale(.5) translateY(-8px)}100%{opacity:1;transform:translateX(-50%) scale(1) translateY(0)}}

@keyframes ngone{to{opacity:0;transform:translateX(-50%) scale(.9) translateY(-8px)}}







@keyframes ecpop{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}














@keyframes egl{0%,100%{opacity:.3;box-shadow:0 0 0 0 rgba(66,133,244,.2)}50%{opacity:1;box-shadow:0 0 0 6px rgba(66,133,244,0)}}



/* ---- SCENE 2: HOMEPAGE ---- */













/* Dropdown */







/* ---- SCENE 3: LOGIN ---- */

























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

/* Typing cursor */

@keyframes tcb{50%{opacity:0}}

/* ---- SCENE 4: DASHBOARD ---- */






























/* ---- TIP CALLOUT (inline, not overlay) ---- */
.ga-tip{position:absolute;z-index:40;background:#fffde7;border:1px solid #f0e68c;border-radius:10px;padding:10px 14px;box-shadow:0 4px 16px rgba(0,0,0,.08);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .35s ease,transform .35s ease;display:flex;align-items:flex-start;gap:8px;max-width:280px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-tip.on{opacity:1;transform:translateY(0)}
.ga-tip-ico{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.ga-tip-ico svg{width:20px;height:20px}
.ga-tip-txt{font-size:11px;color:#5d4e00;line-height:1.5}
.ga-tip-txt b{font-weight:600;color:#3e3300}

/* ---- ERROR POPUP (kept for other uses) ---- */









/* ---- LOGIN FIELD ERROR STATE ---- */


@keyframes fshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---- SUCCESS CHECKMARK ---- */






/* ---- TOAST NOTIFICATION ---- */
.ga-toast{position:absolute;top:10px;right:10px;background:#fff;border-radius:10px;padding:10px 14px;box-shadow:0 4px 20px rgba(0,0,0,.12);display:flex;align-items:center;gap:8px;z-index:50;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;max-width:260px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-toast.on{opacity:1;transform:translateY(0)}
.ga-toast-ico{width:22px;height:22px;flex-shrink:0}
.ga-toast-ico svg{width:22px;height:22px}
.ga-toast-txt{font-size:11px;color:#333;line-height:1.4}
.ga-toast-bar{position:absolute;bottom:0;left:10px;right:10px;height:3px;background:#eee;border-radius:2px;overflow:hidden}
.ga-toast-bar-fill{height:100%;background:#1D9E75;width:100%;border-radius:2px}
.ga-toast-bar-fill.run{animation:toastBar 2s linear forwards}
@keyframes toastBar{from{width:100%}to{width:0%}}

/* ---- FORGOT PASSWORD PAGE ---- */














/* ---- RESET PASSWORD PAGE ---- */




/* ---- RESET EMAIL CARD (compact) ---- */













/* ---- PROFILE DROPDOWN ---- */



















/* ---- USER DASHBOARD (after switch) ---- */


































/* ---- ACCOUNT INFO PAGE ---- */



























/* ---- CHANGE PASSWORD PAGE ---- */























/* ---- ANNOUNCEMENTS PAGE ---- */























/* Slide panel */



















/* Announcement item (after creation) */








/* ---- FULL DASHBOARD (for dashboard article) ---- */
.sc-dashfull{background:#fff;display:flex}
.sc-consdash{background:#fff;display:flex}
.df-side{width:115px;background:#fafafc;border-right:1px solid #eee;padding:12px 0;display:flex;flex-direction:column;gap:1px}
.df-side-logo{display:flex;align-items:center;gap:5px;padding:0 12px 14px}
.df-side-logo i{width:18px;height:18px;background:#4285f4;border-radius:5px;display:block}
.df-side-logo span{font-size:12px;font-weight:600;color:#1a1a1a}
.df-nav{padding:8px 12px;font-size:10px;color:#999;display:flex;align-items:center;gap:7px;margin-right:6px;border-radius:0 7px 7px 0}
.df-nav i{width:14px;height:14px;border-radius:4px;background:currentColor;opacity:.2;display:block}
.df-nav.act{background:#4285f4;color:#fff;font-weight:600}
.df-nav.act i{opacity:.5}
.df-body{flex:1;padding:10px 14px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}
.df-body::-webkit-scrollbar{display:none}
.df-top{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-bottom:8px}
.df-uname{font-size:10px;color:#888}
.df-uname b{color:#333}
.df-av{width:28px;height:28px;border-radius:50%;background:#9c5fff;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.df-stats{display:flex;gap:8px;margin-bottom:10px}
.df-stat{flex:1;border:1px solid #eee;border-radius:10px;padding:10px;position:relative;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.df-stat.pop{opacity:1;transform:translateY(0)}
.df-stat-lbl{font-size:9px;color:#aaa;margin-bottom:1px}
.df-stat-val{font-size:18px;font-weight:700;color:#1a1a1a}
.df-stat-ico{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.df-stat-ico svg{width:12px;height:12px}
.df-row{display:flex;gap:8px;margin-bottom:8px}
.df-panel{flex:1;border:1px solid #eee;border-radius:10px;padding:10px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;min-height:80px;position:relative;overflow:hidden}
.df-panel.pop{opacity:1;transform:translateY(0)}
.df-panel-hd{font-size:10px;font-weight:600;color:#1a1a1a;margin-bottom:2px;display:flex;justify-content:space-between;align-items:center}
.df-panel-hd small{font-size:8px;color:#bbb;font-weight:400}
.df-panel-hd .df-hm{width:14px;height:10px;display:flex;flex-direction:column;gap:2px;cursor:default}
.df-hm span{display:block;width:100%;height:2px;background:#ccc;border-radius:1px}
/* Mini bar chart */
.df-mini-bars{display:flex;align-items:stretch;gap:3px;height:65px;margin-top:6px}
.df-mini-bar{width:100%;background:#4285f4;border-radius:2px 2px 0 0;min-width:6px;height:0;transition:height .7s cubic-bezier(.34,1.56,.64,1)}
.df-mini-bar-lbl{font-size:7px;color:#ccc;text-align:center;margin-top:2px}
.df-mini-bar-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
/* SVG donut/pie */
.df-donut{width:70px;height:70px;margin:4px auto}
.df-donut circle{fill:none;stroke-width:8;transition:stroke-dasharray 1.2s ease}
.df-donut text{font-size:8px;font-weight:600;fill:#1a1a1a;font-family:var(--db-font,system-ui,sans-serif)}
.df-donut .donut-track{stroke:#eee}
.df-donut .donut-fill{stroke:#4285f4;stroke-linecap:round;stroke-dasharray:0 999;transition:stroke-dasharray 1.2s ease}
.df-donut .donut-fill2{stroke:#1a3a8a;stroke-linecap:round;stroke-dasharray:0 999;transition:stroke-dasharray 1.2s ease}
.df-pie{width:60px;height:60px;border-radius:50%;margin:4px auto;position:relative;overflow:hidden;background:conic-gradient(#4285f4 0% 0%,#eee 0% 100%);transition:background 1s ease}
.df-legend{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;justify-content:center}
.df-legend-item{display:flex;align-items:center;gap:3px;font-size:7px;color:#888}
.df-legend-item i{width:6px;height:6px;border-radius:50%;display:block}

/* Similarity ranges line */






/* Dashboard highlight for individual sections */
.df-stat.hl,.df-panel.hl{border-color:#4285f4;box-shadow:0 0 0 3px rgba(66,133,244,.12);transform:scale(1.04);z-index:15;position:relative;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;background:#fff}
.df-blur-overlay{position:absolute;inset:0;background:rgba(255,255,255,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:10;opacity:0;pointer-events:none;transition:opacity .3s ease}
.df-blur-overlay.on{opacity:1}
/* User management highlights above blur */





/* Individual action card highlight */






.df-tooltip{position:absolute;background:#fffef5;color:#333;font-size:9px;padding:8px 12px;border-radius:8px;z-index:30;opacity:0;pointer-events:none;transition:opacity .3s ease;white-space:normal;font-family:var(--db-font,system-ui,sans-serif);line-height:1.5;max-width:220px;letter-spacing:.2px;box-shadow:0 4px 20px rgba(0,0,0,.12);border:1px solid #f0e8c8}
.df-tooltip.on{opacity:1}
.df-tooltip::after{content:'';position:absolute;top:-5px;left:20px;width:10px;height:10px;background:#fffef5;transform:rotate(45deg);border-radius:2px;border-left:1px solid #f0e8c8;border-top:1px solid #f0e8c8}

/* ---- USER MANAGEMENT PAGE ---- */










































/* Highlight row */



/* Confirmation dialog overlay */













/* Edit/Add User slide panel */














/* Stats popup overlay */

























/* ---- FAB POPUP MENU ---- */










/* ---- ADD USER PANEL (slide-over right) ---- */




















/* ---- ADD MULTIPLE USERS: upload page scene ---- */

























/* ---- CSV preview modal ---- */

























/* ---- ADMIN REPORTS PAGE SCENE ---- */


























/* Download notification popup (browser-like) */












/* ---- REPORTS RESULTS POPUP ---- */


















/* Score badges */






/* Form filled state */





/* ---- MAIL DIALOG (submissions report) ---- */













/* Confirm dialogs inside reports need to be above results popup (z-index:25) */


/* ---- EMAIL PREVIEW (submissions report) ---- */














/* ---- REPOSITORY SCENES ---- */













/* Upload page scene */






















/* Metadata form below upload */















/* Repo select dropdown */




/* Repo delete button */





/* ---- INTEGRATIONS PAGE SCENE ---- */

























/* Tooltip cards for overview */





/* ---- INTEGRATION SETUP PANEL (slide-over) ---- */













/* Know More link on card */




/* Moodle details page */















/* ---- SECURITY SETTINGS SCENE ---- */















/* OTP login page */
















/* ---- SUPPORT CENTRE SCENE ---- */



















/* Create ticket panel */

















/* Ticket details page */


















/* ---- USER MY FOLDERS SCENE ---- */























/* User profile dropdown */













/* User account info page */












/* === RESPONSIVE === */
@media(max-width:640px){
  .ga-viewport{height:280px}
  
  
  
  .ds-side,.ud-side,.ai-side,.cp-side,.an-side,.df-side,.um-side{width:80px}
  
  
  
  
  
  
}

/* ======================================================================
   USER SECTION ANIMATIONS — NEW SCENES
   ====================================================================== */

/* --- Shared user top bar & breadcrumb bar --- */





/* --- USER CHANGE PASSWORD (uChangePw) --- */






/* --- USER DASHBOARD (uDashOverview, uDashCharts, uDashDocTypes) --- */

























/* Charts */
















/* Doc types */











/* --- FOLDER MANAGEMENT (uFolderTable, uFolderView) --- */















/* --- NEW FOLDER (uNewFolder) --- */






















/* --- FILE UPLOAD (uUploadEnglish, uUploadRegional) --- */




























/* --- SUBMISSIONS (uSubOverview, uSubAnalysis) --- */

















/* Analysis page */









































/* --- DOC ERRORS (uDocError) --- */









/* --- REPOSITORY (uRepoUpload, uRepoManage) --- */






















/* --- MFA (uMfa) --- */






/* --- SUPPORT CENTRE (uSupCreate, uSupView) --- */






/* --- FOLDER TABLE ROWS --- */


/* --- FOLDER TABLE ICON (matches screenshot blue folder) --- */



/* --- SUBMISSIONS TABLE ROWS --- */



/* ==========================================
   CONSORTIUM DASHBOARD SCENE (cd-)
   Layered on top of the shared .df-* scene styles
   ========================================== */

/* Stat tiles sit three-up rather than two-up */
.sc-consdash .df-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px}
.sc-consdash .df-stat-val{font-size:13px}

/* Language / processing-time cards */
.cd-langs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px}
.cd-lang{background:#fff;border:1px solid #e8e8e6;border-radius:6px;padding:7px 8px;position:relative;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.cd-lang.pop{opacity:1;transform:none}
.cd-lang.hl{border-color:#1447E6;box-shadow:0 0 0 2px rgba(20,71,230,.18);z-index:60}
.cd-lang-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.cd-lang-hd b{font-size:8.5px;color:#111;font-weight:700}
.cd-lang-ico{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cd-lang-ico svg{width:8px;height:8px;color:#fff}
.cd-lang-row{display:flex;justify-content:space-between;font-size:7px;color:#555;line-height:1.6}
.cd-lang-row span:last-child{font-weight:700;color:#222}

/* Chart panel header controls */
.cd-panel-ctl{display:flex;align-items:center;gap:5px;margin-left:auto}
.cd-sel{font-size:6.5px;border:1px solid #ccc;border-radius:3px;padding:2px 12px 2px 4px;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 3px center;background-size:6px;color:#333;white-space:nowrap;position:relative}
.cd-sel.hl{border-color:#1447E6;box-shadow:0 0 0 2px rgba(20,71,230,.18);z-index:60}
.cd-hm{cursor:pointer;padding:2px;border-radius:3px}
.cd-hm.hl{background:#e8f0fe;box-shadow:0 0 0 2px rgba(20,71,230,.18);z-index:60}
.cd-hm span{display:block;width:9px;height:1.3px;background:#666;margin:1.6px 0;border-radius:1px}

/* Export dropdown revealed from the hamburger */
.cd-export{position:absolute;top:20px;right:6px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.14);padding:3px 0;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:70}
.cd-export.on{opacity:1;transform:none}
.cd-export i{display:block;font-style:normal;font-size:6.5px;color:#333;padding:3px 10px;white-space:nowrap}
.cd-export i+i{border-top:1px solid #f2f2f2}

/* Scrollable dashboard body so the second chart can be revealed */
.sc-consdash .df-body{overflow:hidden}
.cd-scroll{position:relative;top:0;transition:top .8s cubic-bezier(.4,0,.2,1)}
.cd-scroll.up{top:-46px}

/* Empty-state shown when Month wise defaults to 2020 */
.cd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:52px;border:1px solid #eee;border-radius:5px;color:#888;font-size:7.5px;gap:3px}
.cd-empty svg{width:11px;height:11px;color:#bbb}
.cd-empty.gone{display:none}
.cd-chart2.gone{display:none}

/* panel becomes the positioning context for its export menu */
.sc-consdash .df-panel{position:relative}
/* slimmer bars so a single-year spike reads as a bar, not a block */
.sc-consdash .df-mini-bar{max-width:16px;margin:0 auto}
.sc-consdash .df-top{margin-bottom:6px}

/* .df-panel.pop leaves transform:translateY(0) in place, which still creates a
   stacking context and traps highlighted descendants under .df-blur-overlay
   (z-index 10). Reset it to none once the panel has finished popping in. */
.sc-consdash .df-panel.pop{transform:none}

/* ==========================================
   CREATE INSTITUTION SCENE (ci-)
   ========================================== */
.sc-conscreate{background:#fff;display:flex}
.sc-conscreate .df-body{overflow:hidden;position:relative}

/* Licences table */
.ci-hd{font-size:10px;font-weight:600;color:#1a1a1a;margin-bottom:6px}
.ci-tbl{width:100%;border-collapse:collapse;font-size:7px}
.ci-tbl th{text-align:left;color:#666;font-weight:600;padding:4px 5px;border-bottom:1px solid #eee;white-space:nowrap}
.ci-tbl td{padding:5px;border-bottom:1px solid #f4f4f4;color:#333;white-space:nowrap}
.ci-tbl tbody tr{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.ci-tbl tbody tr.pop{opacity:1;transform:none}

/* Floating action button */
.ci-fab{position:absolute;right:12px;bottom:12px;width:26px;height:26px;border-radius:50%;background:#1447E6;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;line-height:1;box-shadow:0 3px 8px rgba(20,71,230,.35);z-index:40}
.ci-fab.hl{box-shadow:0 0 0 4px rgba(20,71,230,.25),0 3px 8px rgba(20,71,230,.35)}
.ci-fab.press{transform:scale(.9)}

/* The two-option menu the FAB opens */
.ci-menu{position:absolute;right:14px;bottom:44px;background:#fff;border:1px solid #e4e4e4;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.14);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:45;overflow:hidden}
.ci-menu.on{opacity:1;transform:none}
.ci-menu i{display:flex;align-items:center;gap:6px;font-style:normal;font-size:7.5px;color:#222;padding:6px 12px;white-space:nowrap}
.ci-menu i+i{border-top:1px solid #f2f2f2}
.ci-menu i b{width:13px;height:13px;border-radius:50%;display:inline-block}
.ci-menu i:nth-child(1) b{background:#1e88e5}
.ci-menu i:nth-child(2) b{background:#2e9e5b}
.ci-menu i.hl{background:#eef3ff}

/* Right-hand form drawer */
.ci-drawer{position:absolute;top:0;right:0;bottom:0;width:170px;background:#fff;border-left:1px solid #e6e6e6;box-shadow:-6px 0 18px rgba(0,0,0,.08);transform:translateX(100%);transition:transform .5s cubic-bezier(.4,0,.2,1);z-index:50;padding:9px 10px;overflow:hidden}
.ci-drawer.on{transform:none}
.ci-drawer-scroll{transition:margin-top .55s cubic-bezier(.4,0,.2,1);margin-top:0}
.ci-drawer-scroll.s1{margin-top:-26px}
.ci-drawer-scroll.s2{margin-top:-50px}
.ci-fld{margin-bottom:6px;position:relative}
.ci-fld label{display:block;font-size:6.5px;color:#333;font-weight:600;margin-bottom:2px}
.ci-fld label em{font-style:normal;color:#d33}
.ci-inp{height:14px;border:1px solid #d8d8d8;border-radius:3px;background:#fff;font-size:6.5px;color:#222;padding:0 5px;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.ci-inp.req{border-color:#e9a3a3}
.ci-inp.fc{border-color:#1447E6;box-shadow:0 0 0 2px rgba(20,71,230,.15)}
.ci-fld.hl{z-index:60}
.ci-fld.hl .ci-inp{border-color:#1447E6;box-shadow:0 0 0 2px rgba(20,71,230,.2)}
.ci-inp.sel::after{content:'';margin-left:auto;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3.5px solid #777}
.ci-caret{display:inline-block;width:1px;height:7px;background:#1447E6;margin-left:1px;animation:cicaret .9s step-end infinite}
@keyframes cicaret{50%{opacity:0}}

/* Option list dropped by a select */
.ci-dd{position:absolute;left:0;right:0;top:100%;margin-top:2px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 5px 14px rgba(0,0,0,.14);opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:70;overflow:hidden}
.ci-dd.on{opacity:1;transform:none}
.ci-dd i{display:block;font-style:normal;font-size:6.5px;color:#333;padding:3px 6px}
.ci-dd i+i{border-top:1px solid #f5f5f5}
.ci-dd i.hl{background:#eef3ff;font-weight:700}

/* Submit button */
.ci-btn{height:16px;border-radius:4px;background:#1447E6;color:#fff;font-size:7px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:2px}
.ci-btn.press{transform:scale(.97);filter:brightness(.92)}

/* Success toast */
.ci-toast{position:absolute;left:50%;top:14px;transform:translate(-50%,-8px);background:#0f9d58;color:#fff;font-size:8px;font-weight:600;padding:6px 14px;border-radius:5px;box-shadow:0 5px 16px rgba(15,157,88,.3);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:90;white-space:nowrap}
.ci-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- Tooltip fixes for this scene ----
   1. The drawer sits at z-index 50; the shared tooltip is 30, so tooltips
      shown over the open form were rendering behind it.
   2. This scene places tooltips to the LEFT of their target, but the shared
      arrow is hard-coded to point up from the tooltip's top-left corner.
      .tip-right moves it to the right edge, pointing at the element.
   3. A fixed width keeps placement stable while the text types in. */
.df-tooltip{z-index:95;width:186px;max-width:186px}
.df-tooltip.tip-right::after{
  top:50%;left:auto;right:-5px;
  transform:translateY(-50%) rotate(45deg);
  border-left:none;border-top:none;
  border-right:1px solid #f0e8c8;border-bottom:1px solid #f0e8c8;
}

/* ---- Licences page furniture that the first draft of the mock omitted:
   the CSV export button and institution search, the per-column sort
   arrows, and the Actions column with its edit and drill-in buttons. ---- */
.ci-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:8px}
.ci-tools{display:flex;align-items:center;gap:5px}
.ci-csv{width:15px;height:15px;border:1px solid #d9d9d9;border-radius:3px;display:flex;align-items:center;justify-content:center;background:#fff;color:#555;flex:none}
.ci-csv svg{width:8px;height:8px}
.ci-search{font-size:6px;color:#9a9a9a;border:1px solid #d9d9d9;border-radius:3px;background:#fff;padding:3px 8px;min-width:104px;white-space:nowrap}
.ci-tbl{table-layout:fixed;width:100%}
.ci-tbl th{font-size:5.6px;padding:3px 3px;white-space:nowrap;overflow:hidden}
.ci-tbl th b{font-weight:400;color:#aaa;margin-left:1px;font-size:5px}
.ci-tbl td{font-size:5.6px;padding:4px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-act-h{text-align:left}
.ci-act{display:flex;gap:2px}
.ci-act i{width:11px;height:11px;border:1px solid #d5d5d5;border-radius:2.5px;background:#fff;display:inline-block;position:relative;flex:none}
.ci-act i::after{content:'';position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:6px}
.ci-ed::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E")}
.ci-nx::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E")}