/*
 * Shared app stylesheet
 * Design tokens + skeleton loaders + Parsley error styles + button states.
 * Generic class names only (no system/brand-derived names).
 */

/* Self-hosted Mozilla Text (variable font, one file per subset serves all weights 400–700). */
@font-face{
    font-family:'Mozilla Text'; font-style:normal; font-weight:400 700; font-display:swap;
    src:url(../fonts/mozilla-text-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
    font-family:'Mozilla Text'; font-style:normal; font-weight:400 700; font-display:swap;
    src:url(../fonts/mozilla-text-latinext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
    --app-bg:#F8FAFD; --white:#FFFFFF; --hover:#E9EEF6; --hover-row:#F1F5FA; --sel:#C2E7FF;
    --blue-m3:#0B57D0; --blue:#1A73E8; --ink:#1F1F1F; --dim:#444746; --faint:#5F6368;
    --line:#DADCE0; --line-soft:#E8EAED; --green:#188038; --yellow:#FBBC04; --red:#EA4335;
}

/* ------------------------------------------------------------------ */
/* Skeleton loaders                                                    */
/* ------------------------------------------------------------------ */
.skeleton{
    position:relative; overflow:hidden; background:#E8Eced; border-radius:8px;
    background:linear-gradient(90deg,#E9edf1 25%,#f3f6f9 37%,#E9edf1 63%);
    background-size:400% 100%; animation:skeleton-shimmer 1.35s ease infinite;
}
@keyframes skeleton-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skeleton-line{height:14px; margin:0 0 12px}
.skeleton-line:last-child{margin-bottom:0}
.skeleton-circle{border-radius:50%}
.skeleton-wrap{padding:4px 0}
.skeleton-card{height:140px; border-radius:12px}
.skeleton-row{height:44px; border-radius:8px; margin:0 0 10px}
@media (prefers-reduced-motion: reduce){ .skeleton{animation:none} }

/* ------------------------------------------------------------------ */
/* Parsley validation                                                  */
/* ------------------------------------------------------------------ */
.parsley-errors-list{
    list-style:none; margin:6px 2px 0; padding:0; color:var(--red); font-size:13px;
}
.parsley-errors-list li{margin:2px 0}
.parsley-errors-list.filled{margin-top:6px}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{border-color:var(--red)!important}
input.parsley-error,select.parsley-error,textarea.parsley-error{border-color:var(--red)!important}

/* ------------------------------------------------------------------ */
/* Button loading state (spinner)                                      */
/* ------------------------------------------------------------------ */
.btn.is-loading{position:relative; color:transparent!important; pointer-events:none}
.btn.is-loading::after{
    content:""; position:absolute; top:50%; left:50%; width:16px; height:16px;
    margin:-8px 0 0 -8px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
    border-radius:50%; animation:btn-spin .6s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* SweetAlert2 tweaks to match the design language + consistent button style */
.swal2-popup{font-family:'Mozilla Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; border-radius:12px}
/* Every modal dialog (confirms, alerts, login/auth pages) gets the same lift as .app-dialog, so it
   separates from the frosted-white overlay. Toasts keep SweetAlert's own toast shadow. */
.swal2-popup.swal2-modal{box-shadow:0 8px 30px rgba(32,33,36,.24)}
.swal2-styled{border-radius:5px !important; font-weight:600; padding:11px 20px !important; font-size:14px}
.swal2-styled i{margin-right:7px}
/* Blurred backdrop on every SweetAlert overlay */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-backdrop-show > .swal2-popup{}
/* Blur backdrop ONLY for real modal dialogs (targets the modal popup, not the backdrop class) */
/* SweetAlert dialogs must sit above app modals (share dialog z-index 3000, snackbar 4000, etc.) */
.swal2-container{z-index:6000!important}
.swal2-container:has(.swal2-modal){
    background:rgba(255,255,255,.6)!important;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* Toast containers must never dim/overlay the page */
.swal2-container:has(.swal2-toast){background:transparent!important; backdrop-filter:none!important; pointer-events:none}
.swal2-container:has(.swal2-toast) .swal2-toast{pointer-events:auto}
/* Long file names must wrap inside a toast, not force a horizontal scrollbar. */
.swal2-toast{overflow:hidden; max-width:calc(100vw - 24px)}
.swal2-toast .swal2-title{white-space:normal; word-break:break-word; overflow-wrap:anywhere; min-width:0}
.swal2-toast .swal2-html-container{white-space:normal; word-break:break-word; overflow-wrap:anywhere}

/* Brand logo (logo.jpg) */
.brand-logo{max-width:158px; object-fit:contain; display:block}
.auth-logo{height:40px; width:auto; border-radius:8px; margin:0 auto 14px; display:block}

/* Icon spacing inside buttons/links */
.btn i,.chip i,.new-btn i,.nav-item i.fa-solid,.nav-item i.fa-regular,.storage-more i,.link i,.panel-head .r i{ font-size:.95em }
.icon-btn i,.search-btn i,.rail-ico i,.dots i{ font-size:15px }

/* ================================================================== */
/* Base + primary buttons (generic)                                    */
/* ================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
/* Kill any document-level horizontal scroll (e.g. off-screen fixed drawers/panels
   that real mobile browsers count toward page width). Inner scroll containers
   like .table-wrap keep their own overflow-x:auto. */
html{overflow-x:hidden}
body{
    font-family:'Mozilla Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
    background:var(--app-bg); color:var(--ink); font-size:14px; min-height:100vh; min-height:100dvh;
    overflow-x:hidden; max-width:100%;
}
button{font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
input,select,textarea{font-family:inherit}
a{-webkit-tap-highlight-color:transparent}
img,svg{display:block; max-width:100%}
:root{--radius:16px; --header-h:64px; --blue-soft:#D3E3FD; --red-d:#D93025}

/* One consistent button style across the whole project (border-radius: 5px) */
.btn{
    background:var(--blue-m3); color:#fff; border:0; border-radius:5px; padding:11px 20px;
    font-size:14px; font-weight:600; transition:.15s; min-height:44px; display:inline-flex;
    align-items:center; justify-content:center; gap:8px; text-decoration:none; line-height:1;
}
.btn:hover{box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15); background:color-mix(in srgb, var(--blue-m3) 85%, #000)}
.btn.text:hover{background:color-mix(in srgb, var(--blue-m3) 10%, transparent)}
.btn.text{background:transparent; color:var(--blue-m3); padding:11px 16px}
.btn.text:hover{background:#F0F4F9; box-shadow:none}
/* Secondary (outline) button — used for toolbar "New", empty-state "New folder" */
.btn.outline{background:var(--white); color:var(--blue-m3); border:1px solid var(--line); box-shadow:none}
.btn.outline:hover{background:var(--hover); box-shadow:none}
.btn .nb-caret{font-size:11px; opacity:.8; margin-left:-2px}
/* Empty-state actions */
.empty-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
/* Mobile floating "New" button */
.new-fab{position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom)); width:56px; height:56px;
    border-radius:50%; border:0; background:var(--blue-m3); color:#fff; font-size:22px; display:none;
    place-items:center; cursor:pointer; z-index:1400;
    box-shadow:0 4px 12px color-mix(in srgb, var(--blue-m3) 40%, transparent), 0 2px 6px rgba(60,64,67,.3)}
.new-fab:hover{background:color-mix(in srgb, var(--blue-m3) 88%, #000)}
@media(max-width:700px){ .new-fab{display:grid} #newDriveBtn{display:none} }

/* ================================================================== */
/* App shell — topbar / sidebar / main / rail                          */
/* ================================================================== */
.shell{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--app-bg); overflow-x:clip}
.topbar{display:flex; align-items:center; gap:8px; padding:8px 14px; height:var(--header-h); flex-shrink:0}
.menu-btn{display:none; width:44px; height:44px; border-radius:5px; border:0; background:transparent; font-size:19px; color:var(--dim); flex-shrink:0}
.menu-btn:hover{background:var(--hover)}
.brand-link{display:flex; align-items:center; gap:9px; width:234px; flex-shrink:0; text-decoration:none; color:inherit}
.brand-logo{flex-shrink:0}
.brand-link span{font-size:20px; font-weight:500; color:var(--faint); letter-spacing:-.2px}
.searchbar{position:relative; flex:1; min-width:0; max-width:722px; display:flex; align-items:center; gap:4px; background:var(--white); border:1px solid transparent; border-radius:99px; padding:0 8px 0 4px; height:46px}
.icon-btn.mobile-search-btn{display:none}
.ms-close-ico{display:none}
.search-btn.on{background:var(--sel); color:var(--blue-m3)}
.search-kbd{flex-shrink:0; font-family:inherit; font-size:11px; font-weight:600; color:var(--faint); background:var(--app-bg); border:1px solid var(--line-soft); border-radius:6px; padding:3px 7px; letter-spacing:.3px; white-space:nowrap; user-select:none}
.searchbar:focus-within .search-kbd{display:none}
.search-clear{color:var(--faint)}
.searchbar .search-clear[hidden]{display:none}

/* Notifications bell */
.notif-wrap{position:relative; display:flex}
.notif-badge{position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--red); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; line-height:1; border:2px solid var(--white)}
.notif-badge[hidden]{display:none}
.notif-menu{position:absolute; top:calc(100% + 8px); right:0; z-index:3000; width:344px; max-width:calc(100vw - 24px); background:var(--white); border:1px solid var(--line-soft); border-radius:12px; box-shadow:0 6px 20px rgba(60,64,67,.28),0 1px 3px rgba(60,64,67,.15); overflow:hidden}
.notif-menu[hidden]{display:none}
.notif-head{padding:14px 16px 11px; font-size:15px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line-soft)}
.notif-list{max-height:min(60vh,380px); overflow-y:auto}
.notif-item{display:flex; align-items:flex-start; gap:12px; padding:11px 16px; text-decoration:none; color:inherit; border-bottom:1px solid var(--line-soft)}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--hover-row)}
.notif-ico{width:34px; height:34px; border-radius:50%; background:var(--app-bg); display:grid; place-items:center; color:var(--faint); font-size:14px; flex-shrink:0}
.notif-main{flex:1; min-width:0}
.notif-text{font-size:13px; color:var(--dim); line-height:1.4}
.notif-text b{color:var(--ink); font-weight:600}
.notif-time{font-size:11.5px; color:var(--faint)}
.notif-empty{display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 16px; color:var(--faint); font-size:13px}
.notif-empty i{font-size:24px; opacity:.7}
.notif-foot{display:block; text-align:center; padding:12px; font-size:13px; font-weight:600; color:var(--blue-m3); text-decoration:none; border-top:1px solid var(--line-soft)}
.notif-foot:hover{background:var(--hover)}
.search-opts{position:absolute; top:calc(100% + 8px); right:0; z-index:2500; width:300px; max-width:calc(100vw - 24px); background:var(--white); border:1px solid var(--line-soft); border-radius:12px; box-shadow:0 6px 20px rgba(60,64,67,.28),0 1px 3px rgba(60,64,67,.15); padding:14px}
.search-opts[hidden]{display:none}
/* Dashboard time-range dropdown */
.range-wrap{position:relative}
.range-menu{position:absolute; top:calc(100% + 6px); right:0; z-index:2500; min-width:172px; background:var(--white); border:1px solid var(--line-soft); border-radius:10px; box-shadow:0 6px 20px rgba(60,64,67,.22); padding:6px; display:flex; flex-direction:column; gap:2px}
.range-menu[hidden]{display:none}
.range-item{display:block; padding:9px 12px; border-radius:7px; font-size:13px; font-weight:600; color:var(--dim); text-decoration:none; white-space:nowrap}
.range-item:hover{background:var(--hover)}
.range-item.on{background:var(--sel); color:var(--blue-m3)}
.search-opts-title{font-size:13px; font-weight:600; color:var(--ink); margin-bottom:10px}
.search-opt{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.search-opt span{font-size:13px; color:var(--dim)}
.search-opt select{flex:0 0 170px; height:38px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font-family:inherit; font-size:13px; color:var(--ink); background:var(--white); cursor:pointer}
.search-opts .btn{margin-top:4px}
.searchbar:focus-within{box-shadow:0 1px 1px rgba(65,69,73,.3),0 1px 3px 1px rgba(65,69,73,.15)}
.searchbar .search-btn{width:40px; height:40px; border-radius:5px; border:0; background:transparent; display:grid; place-items:center; color:var(--dim); font-size:16px; flex-shrink:0}
.searchbar .search-btn:hover{background:rgba(60,64,67,.08)}
.searchbar input{border:0; outline:0; background:none; flex:1; font-size:15px; color:var(--ink); min-width:0}
.searchbar input::placeholder{color:var(--faint)}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:0; flex-shrink:0}
.icon-btn{width:42px; height:42px; border-radius:5px; border:0; background:transparent; display:grid; place-items:center; color:var(--dim); font-size:17px; position:relative; text-decoration:none}
.icon-btn:hover{background:rgba(60,64,67,.08)}
.icon-btn.dot::after{content:""; position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--red-d); border:1.5px solid var(--app-bg)}
.avatar{width:34px; height:34px; border-radius:5px; background:#7B1FA2; color:#fff; display:grid; place-items:center; font-size:13px; font-weight:600; margin-left:8px; cursor:pointer; border:0; flex-shrink:0}
/* Header profile menu */
.profile-wrap{position:relative}
.profile-menu{position:absolute; top:calc(100% + 8px); right:0; width:300px; max-width:calc(100vw - 24px); background:var(--white); border:1px solid var(--line-soft); border-radius:12px; box-shadow:0 6px 20px rgba(60,64,67,.28),0 1px 3px rgba(60,64,67,.15); padding:14px; z-index:3000}
.profile-head{display:flex; align-items:center; gap:12px; padding:2px 2px 12px}
.profile-ava{width:40px; height:40px; border-radius:50%; background:#7B1FA2; color:#fff; display:grid; place-items:center; font-size:16px; font-weight:600; flex-shrink:0}
.profile-id{min-width:0}
.profile-id b{display:block; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.profile-id small{display:block; font-size:12px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.profile-form{display:block; border-top:1px solid var(--line-soft); padding-top:12px}
.pf-label{display:block; font-size:12px; font-weight:600; color:var(--dim); margin:10px 0 4px}
.pf-label:first-child{margin-top:0}
.pf-label span{font-weight:400; color:var(--faint)}
.pf-input{width:100%; height:38px; padding:8px 12px; font-size:13px; font-family:inherit; border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink)}
.pf-input:focus{outline:none; border-color:var(--blue-m3); box-shadow:0 0 0 2px color-mix(in srgb, var(--blue-m3) 15%, transparent)}
.pf-error{color:var(--red); font-size:12px; margin:5px 2px 0}
.profile-sep{height:1px; background:var(--line-soft); margin:12px -14px}
.profile-item{display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent; padding:9px 8px; border-radius:8px; font-family:inherit; font-size:14px; color:var(--ink); text-decoration:none; cursor:pointer; text-align:left}
.profile-item i{width:18px; text-align:center; color:var(--faint)}
.profile-item:hover{background:var(--hover)}
.profile-item.danger{color:var(--red)}
.profile-item.danger i{color:var(--red)}
.profile-item.danger:hover{background:#FCE8E6}
.profile-page-head{display:flex; align-items:center; gap:14px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line-soft)}
.body{flex:1; display:flex; min-height:0; position:relative}

.sidebar{width:256px; flex-shrink:0; padding:2px 12px 16px; display:flex; flex-direction:column; overflow-y:auto}
.sidebar-head{display:none}
.new-wrap{position:relative; width:100%; margin:6px 0 16px}
/* Elevated white "New" button (Drive-style) with an accent + badge that fills on hover */
.new-btn{display:flex; align-items:center; gap:13px; width:100%; background:var(--white); border:1px solid var(--line-soft); border-radius:16px; padding:0 18px 0 13px; height:52px; font-size:15px; font-weight:600; color:var(--ink); font-family:inherit; cursor:pointer; text-decoration:none;
    box-shadow:0 1px 2px rgba(60,64,67,.16), 0 4px 12px rgba(60,64,67,.08);
    transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease}
.new-btn:hover{transform:translateY(-1px); border-color:transparent; box-shadow:0 2px 6px rgba(60,64,67,.18), 0 10px 24px color-mix(in srgb, var(--blue-m3) 18%, transparent)}
.new-btn:active{transform:translateY(0); box-shadow:0 1px 2px rgba(60,64,67,.2)}
.new-btn i{width:28px; height:28px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-size:14px;
    background:color-mix(in srgb, var(--blue-m3) 12%, transparent); color:var(--blue-m3);
    transition:background .18s ease, color .18s ease, transform .18s ease}
.new-btn:hover i{background:var(--blue-m3); color:#fff; transform:scale(1.08)}
/* "+ New" dropdown menu — full width of the sidebar so it can't clip/overflow */
.new-menu{position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:1000; background:var(--white); border:1px solid var(--line-soft); border-radius:14px; box-shadow:0 6px 18px rgba(60,64,67,.16),0 2px 6px rgba(60,64,67,.1); padding:7px}
.new-menu[hidden]{display:none}
.new-menu-item{display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent; padding:10px 12px; border-radius:9px; font-size:14px; color:var(--ink); font-family:inherit; cursor:pointer; text-align:left}
.new-menu-item i{font-size:15px; color:var(--blue-m3); width:20px; text-align:center; flex-shrink:0}
.new-menu-item span{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.new-menu-item em{font-style:normal; color:var(--faint); font-size:11px; white-space:nowrap; flex-shrink:0}
.new-menu-item:hover{background:var(--hover)}
.new-menu-sep{height:1px; background:var(--line-soft); margin:6px 4px}

/* Folder / item context menu (floating, appended to body) */
.ctx-menu{position:fixed; z-index:6000; min-width:236px; background:var(--white); border:1px solid var(--line-soft); border-radius:8px; box-shadow:0 4px 14px rgba(60,64,67,.28),0 1px 3px rgba(60,64,67,.15); padding:6px 0}
.ctx-item{display:flex; align-items:center; gap:14px; width:100%; border:0; background:transparent; padding:9px 16px; font-size:14px; color:var(--ink); font-family:inherit; cursor:pointer; text-align:left}
.ctx-item i{font-size:15px; color:var(--faint); width:18px; text-align:center; flex-shrink:0}
.ctx-item span{flex:1; white-space:nowrap}
.ctx-item em{font-style:normal; color:var(--faint); font-size:11px; white-space:nowrap}
.ctx-item:hover{background:var(--hover)}
.ctx-item.danger{color:var(--red)}
.ctx-item.danger i{color:var(--red)}
.ctx-item.danger:hover{background:#FCE8E6}
.ctx-sep{height:1px; background:var(--line-soft); margin:6px 0}
/* Submenus */
.ctx-parent{position:relative}
.ctx-caret{margin-left:auto; font-size:11px !important; color:var(--faint) !important}
.ctx-submenu{display:none; position:absolute; top:-6px; z-index:2001; min-width:214px; background:var(--white); border:1px solid var(--line-soft); border-radius:8px; box-shadow:0 4px 14px rgba(60,64,67,.28),0 1px 3px rgba(60,64,67,.15); padding:6px 0}
/* Folder color palette (inside Organize submenu) */
.ctx-colors-label{font-size:12px; font-weight:600; color:var(--faint); padding:4px 16px 6px}
.ctx-colors{display:grid; grid-template-columns:repeat(8, 1fr); gap:6px; padding:2px 14px 8px}
.ctx-swatch{width:22px; height:22px; border-radius:50%; border:0; cursor:pointer; padding:0; position:relative; display:grid; place-items:center}
.ctx-swatch.on::after{content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:10px; color:#fff; text-shadow:0 0 2px rgba(0,0,0,.4)}
.ctx-swatch-none{background:var(--hover); color:var(--faint); font-size:12px}
.ctx-swatch-none.on{outline:2px solid var(--blue-m3); outline-offset:1px}
.ctx-swatch-none.on::after{color:var(--dim); text-shadow:none}
.ctx-swatch:hover{transform:scale(1.12)}
/* Star badge on folder cards */
.folder-card .file-card-head{display:flex; align-items:center; gap:8px}
.folder-card .file-card-head .name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.folder-star{color:#FBBC04; font-size:13px; flex-shrink:0}
/* Selection action bar + selected folder card */
/* Selection bar OVERLAYS the toolbar row (absolute) so showing/hiding it never
   reflows the list below — no more jumping when you click a file/folder. */
.sel-bar{position:absolute; top:26px; left:22px; right:22px; z-index:20; display:flex; align-items:center; gap:2px; background:var(--hover); border:1px solid var(--line-soft); border-radius:12px; padding:6px 12px; margin:0; box-shadow:0 2px 10px rgba(60,64,67,.18)}
.scroll > .sel-bar{top:6px}
.sel-bar[hidden]{display:none}
tr.act-row,tr.user-row{cursor:pointer}
.sel-bar .icon-btn{width:38px; height:38px}
.sel-count{font-size:15px; font-weight:600; color:var(--ink); margin:0 10px 0 4px; white-space:nowrap}
.sel-actions{display:flex; align-items:center; gap:2px; flex-wrap:wrap}
.sel-bar .icon-btn{width:40px; height:40px}
.folder-card{transition:background .12s, box-shadow .12s}
.folder-card.selected{background:var(--sel); border-color:transparent; box-shadow:inset 0 0 0 1px var(--blue-m3)}
.folder-card.selected .name{color:var(--ink)}
.file-card.selected{background:var(--sel); border-color:transparent; box-shadow:inset 0 0 0 1px var(--blue-m3)}
.table tbody tr.selected{background:var(--sel)}
.table tbody tr.selected td:first-child{box-shadow:inset 3px 0 0 var(--blue-m3)}
/* Folder LIST rows also carry .folder-card — strip the grid-card outline so they match file rows. */
.table tbody tr.folder-card.selected{box-shadow:none}
.table tbody tr.folder-card.selected td:first-child{box-shadow:inset 3px 0 0 var(--blue-m3)}

/* ================================================================== */
/* Professional dialog system (SweetAlert popup: customClass app-dialog)*/
/* ================================================================== */
.app-dialog{border-radius:16px !important; padding:26px 26px 20px !important; box-shadow:0 8px 30px rgba(32,33,36,.24) !important}
.app-dialog .swal2-title{font-size:20px; font-weight:600; color:var(--ink); padding:0 6px; line-height:1.35}
.app-dialog .swal2-html-container{margin:16px 4px 4px !important; overflow:visible}
.dlg{text-align:left; display:flex; flex-direction:column; gap:14px}
.dlg-field{display:flex; flex-direction:column; gap:6px}
.dlg-field label{font-size:12px; font-weight:600; color:var(--faint); letter-spacing:.02em}
.dlg-field input,.dlg-field select,.dlg-field textarea{width:100%; height:44px; padding:0 13px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; color:var(--ink); background:var(--white); outline:none; transition:border-color .15s, box-shadow .15s}
.dlg-field textarea{height:auto; padding:11px 13px; resize:vertical}
.dlg-field select{appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%235F6368' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 13px center; background-size:10px}
.dlg-field input:focus,.dlg-field select:focus,.dlg-field textarea:focus{border-color:var(--blue-m3); box-shadow:0 0 0 2px color-mix(in srgb, var(--blue-m3) 16%, transparent)}
.dlg-field input::placeholder{color:var(--faint)}
.dlg-info{text-align:left; font-size:14px; line-height:1.5; display:flex; flex-direction:column; gap:9px}
.dlg-info .row{display:flex; gap:10px}
.dlg-info .row b{color:var(--faint); font-weight:600; min-width:96px; flex-shrink:0}
.app-dialog .swal2-actions{gap:10px; margin-top:20px}
.app-dialog .swal2-input{margin:0}

/* ---- Move: folder picker dialog ---- */
.mv-dialog{width:480px !important; max-width:calc(100vw - 32px) !important}
.mv-dialog .swal2-html-container{margin:14px 2px 2px !important; overflow:visible}
.mv-pick{text-align:left; display:flex; flex-direction:column; gap:12px}
.mv-sub{font-size:13.5px; color:var(--dim); line-height:1.45; margin:-2px 2px 0}
.mv-search{position:relative; display:flex; align-items:center}
.mv-search i{position:absolute; left:14px; color:var(--faint); font-size:13px; pointer-events:none}
.mv-search input{width:100%; height:44px; padding:0 14px 0 38px; border:1px solid var(--line); border-radius:10px;
    font-size:14px; font-family:inherit; color:var(--ink); background:var(--app-bg); outline:none;
    transition:border-color .15s, box-shadow .15s, background .15s}
.mv-search input:focus{border-color:var(--blue-m3); background:var(--white);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--blue-m3) 15%, transparent)}
.mv-search input::placeholder{color:var(--faint)}
.mv-list{max-height:288px; overflow-y:auto; overflow-x:hidden; border:1px solid var(--line-soft); border-radius:12px;
    padding:6px; display:flex; flex-direction:column; gap:2px; background:var(--white)}
.mv-list::-webkit-scrollbar{width:12px}
.mv-list::-webkit-scrollbar-thumb{background:#d3d7dd; border:3px solid var(--white); border-radius:9px}
.mv-list::-webkit-scrollbar-thumb:hover{background:#c3c8cf}
.mv-opt{display:flex; align-items:center; gap:12px; width:100%; padding:9px 12px; border:0; border-radius:10px;
    background:transparent; cursor:pointer; font-family:inherit; font-size:14px; color:var(--ink); text-align:left;
    transition:background .13s}
.mv-opt:hover{background:var(--hover-row)}
.mv-opt[hidden]{display:none}   /* [hidden] alone loses to .mv-opt{display:flex} — force it off for search filtering */
.mv-opt .mv-ic{width:32px; height:32px; flex-shrink:0; display:grid; place-items:center; border-radius:9px;
    background:color-mix(in srgb, var(--blue) 12%, transparent); color:var(--blue); font-size:14px; transition:background .13s, color .13s}
.mv-opt .mv-nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500}
.mv-opt .mv-chk{flex-shrink:0; opacity:0; color:var(--blue-m3); font-size:14px; transition:opacity .13s}
.mv-opt.on{background:var(--sel)}
.mv-opt.on:hover{background:var(--sel)}
.mv-opt.on .mv-ic{background:var(--blue-m3); color:#fff}
.mv-opt.on .mv-nm{font-weight:600; color:#0a3b86}
.mv-opt.on .mv-chk{opacity:1}
.mv-empty{padding:26px 12px; text-align:center; color:var(--faint); font-size:13.5px}
.mv-dest{font-size:12.5px; color:var(--faint); padding:0 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mv-dest b{color:var(--ink); font-weight:600}

/* ---- New folder dialog ---- */
.nf-dialog{width:432px !important; max-width:calc(100vw - 32px) !important}
.nf-dialog .swal2-html-container{margin:6px 4px 2px !important; overflow:visible}
.nf-pick{display:flex; flex-direction:column; align-items:center; text-align:center}
.nf-hero-ic{width:60px; height:60px; display:grid; place-items:center; border-radius:17px; font-size:24px;
    color:var(--blue-m3); margin:2px 0 14px;
    background:linear-gradient(140deg, color-mix(in srgb, var(--blue) 16%, transparent), color-mix(in srgb, var(--blue-m3) 24%, transparent));
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blue-m3) 14%, transparent)}
.nf-title{font-size:20px; font-weight:600; color:var(--ink); margin:0; line-height:1.3}
.nf-sub{font-size:13.5px; color:var(--dim); margin:6px 0 18px; line-height:1.45; max-width:32ch}
.nf-field{position:relative; display:flex; align-items:center; width:100%; text-align:left}
.nf-field .nf-fico{position:absolute; left:16px; color:var(--faint); font-size:15px; pointer-events:none; transition:color .15s}
.nf-field:focus-within .nf-fico{color:var(--blue-m3)}
.nf-field input{width:100%; height:48px; padding:0 15px 0 44px; border:1px solid var(--line); border-radius:12px;
    font-size:15px; font-family:inherit; color:var(--ink); background:var(--app-bg); outline:none;
    transition:border-color .15s, box-shadow .15s, background .15s}
.nf-field input:focus{border-color:var(--blue-m3); background:var(--white);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--blue-m3) 15%, transparent)}
.nf-field input::placeholder{color:var(--faint)}
.nf-field input.nf-err{border-color:var(--red-d); background:var(--white)}
.nf-field input.nf-err:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--red-d) 16%, transparent)}
.nf-msg{display:flex; align-items:center; gap:7px; align-self:flex-start; margin:9px 2px 0;
    font-size:12.5px; color:var(--red-d); font-weight:500}
.nf-msg[hidden]{display:none}   /* [hidden] alone loses to display:flex — force it off */

/* ================================================================== */
/* Google-style Share dialog                                           */
/* ================================================================== */
.share-modal{position:fixed; inset:0; z-index:3000; background:rgba(32,33,36,.5); display:flex; align-items:center; justify-content:center; padding:20px; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.share-modal[hidden]{display:none}
.share-card{position:relative; width:100%; max-width:516px; background:var(--white); border-radius:16px; box-shadow:0 8px 30px rgba(32,33,36,.3); display:flex; flex-direction:column; max-height:92vh; overflow:hidden}
.share-snack{position:fixed; left:50%; bottom:30px; transform:translate(-50%,22px); display:flex; align-items:center; gap:12px; background:#202124; color:#fff; font-size:13.5px; font-weight:500; padding:13px 20px; border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.34); opacity:0; pointer-events:none; transition:opacity .26s cubic-bezier(.2,.7,.2,1), transform .26s cubic-bezier(.2,.7,.2,1); z-index:4000; max-width:calc(100vw - 32px)}
.share-snack.show{opacity:1; transform:translate(-50%,0)}
.share-snack-ico{font-size:17px; flex-shrink:0; color:#81C995}
.share-snack.err .share-snack-ico{color:#F28B82}
.share-snack-msg{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.share-head{display:flex; align-items:center; gap:8px; padding:22px 22px 8px}
.share-head h2{flex:1; font-size:21px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0}
.share-head-ico{display:flex; gap:2px; flex-shrink:0}
.share-body{padding:6px 22px 4px; overflow-y:auto}
.share-add{display:flex; gap:8px; align-items:center; margin:10px 0 22px}
.share-add input{flex:1; min-width:0; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; color:var(--ink); background:var(--white); outline:none; transition:border-color .15s, box-shadow .15s}
.share-add input:focus{border-color:var(--blue-m3); box-shadow:0 0 0 2px color-mix(in srgb, var(--blue-m3) 16%, transparent)}
.share-add input.field-err,.share-add input.field-err:focus{border-color:var(--red); box-shadow:0 0 0 2px color-mix(in srgb, var(--red) 20%, transparent)}
.share-add input.field-err::placeholder{color:var(--red)}
.share-add select{height:46px; border:1px solid var(--line); border-radius:8px; padding:0 30px 0 12px; font-size:13px; font-weight:600; font-family:inherit; color:var(--dim); background:var(--white); cursor:pointer; appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%235F6368' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:10px}
.share-add .btn{height:46px; flex-shrink:0}
.share-sec{font-size:15px; font-weight:600; color:var(--ink); margin:8px 0 8px}
.share-people{display:flex; flex-direction:column; gap:2px; margin-bottom:22px}
.share-loading{color:var(--faint); font-size:14px; padding:6px 0}
.person{display:flex; align-items:center; gap:12px; padding:7px 0}
.s-avatar{width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; font-size:14px; font-weight:600; flex-shrink:0}
.person-main{flex:1; min-width:0; display:flex; flex-direction:column}
.person-main b{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.person-main span{font-size:13px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.person-role{font-size:13px; color:var(--faint); flex-shrink:0}
.person-del{color:var(--faint); flex-shrink:0}
.person-del:hover{color:var(--red); background:#FCE8E6}
.share-general{display:flex; gap:12px; align-items:flex-start; margin-bottom:8px}
.share-lock{width:36px; height:36px; border-radius:50%; background:var(--hover); display:grid; place-items:center; color:var(--dim); font-size:14px; flex-shrink:0}
.share-lock.open{background:#E6F4EA; color:var(--green)}
.share-general-main{flex:1; min-width:0}
.share-general-main select{border:1px solid transparent; border-radius:6px; padding:6px 30px 6px 8px; margin-left:-8px; font-size:14px; font-weight:600; font-family:inherit; color:var(--ink); background-color:transparent; cursor:pointer; appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%235F6368' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:10px}
.share-general-main select:hover{background-color:var(--hover)}
.share-general-main p{font-size:13px; color:var(--faint); margin:3px 0 0 2px}
.share-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px 22px}
.share-foot .btn{border-radius:99px; height:42px}
.share-foot .btn.text{border:1px solid var(--line); padding:0 18px}
.share-foot .btn.text:hover{background:var(--hover)}
@media(max-width:520px){ .share-add{flex-wrap:wrap} .share-add input{flex:1 1 100%} }

/* Version history modal */
.ver-modal{position:fixed; inset:0; z-index:3000; background:rgba(32,33,36,.5); display:flex; align-items:center; justify-content:center; padding:20px; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.ver-modal[hidden]{display:none}
.ver-card{width:100%; max-width:540px; background:var(--white); border-radius:16px; box-shadow:0 8px 30px rgba(32,33,36,.3); display:flex; flex-direction:column; max-height:92vh; overflow:hidden}
.ver-head{display:flex; align-items:center; gap:8px; padding:22px 22px 8px}
.ver-head h3{flex:1; font-size:21px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0}
.ver-body{padding:6px 22px 4px; overflow-y:auto}
.ver-loading,.ver-empty{color:var(--faint); font-size:14px; padding:14px 2px}
.ver-row{display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line-soft)}
.ver-row:last-of-type{border-bottom:0}
.ver-current{background:linear-gradient(90deg, color-mix(in srgb, var(--blue-m3) 5%, transparent), transparent); border-radius:8px; padding-left:10px; margin:2px 0}
.ver-dot{width:10px; height:10px; border-radius:50%; background:var(--blue-m3); flex-shrink:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--blue-m3) 15%, transparent)}
.ver-dot.old{background:var(--line); box-shadow:none}
.ver-main{flex:1; min-width:0; display:flex; flex-direction:column}
.ver-main b{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ver-main span{font-size:12.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ver-act{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--faint); flex-shrink:0; border:0; background:transparent; cursor:pointer; font-size:14px; text-decoration:none; transition:background .12s, color .12s}
.ver-act:hover{background:var(--hover); color:var(--ink)}
.ver-del:hover{background:#FCE8E6; color:var(--red)}
.ver-note{font-size:12px; color:var(--faint); padding:12px 2px 4px; line-height:1.5}
.ver-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px 22px}
.ver-foot .btn{border-radius:99px; height:42px}
.ver-foot .btn.text{border:1px solid var(--line); padding:0 18px}
.ver-foot .btn.text:hover{background:var(--hover)}

/* File comments (in the details side panel) */
.cmt-list{display:flex; flex-direction:column; gap:14px; padding:4px 0 10px}
.cmt{display:flex; gap:10px}
.cmt .act-ava{flex-shrink:0}
.cmt-main{flex:1; min-width:0}
.cmt-head{display:flex; align-items:center; gap:8px}
.cmt-head b{font-size:13px; font-weight:600; color:var(--ink)}
.cmt-time{font-size:11.5px; color:var(--faint)}
.cmt-del{margin-left:auto; width:24px; height:24px; border:0; background:transparent; border-radius:50%; color:var(--faint); cursor:pointer; font-size:12px; display:grid; place-items:center; opacity:0; transition:opacity .12s, background .12s, color .12s}
.cmt:hover .cmt-del{opacity:1}
.cmt-del:hover{background:#FCE8E6; color:var(--red)}
.cmt-body{font-size:13.5px; color:var(--dim); line-height:1.5; margin-top:2px; word-wrap:break-word}
.cmt-compose{position:sticky; bottom:0; background:var(--white); padding-top:10px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:8px}
.cmt-compose textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-family:inherit; font-size:13.5px; color:var(--ink); resize:vertical; min-height:44px; outline:none; transition:border-color .15s, box-shadow .15s}
.cmt-compose textarea:focus{border-color:var(--blue-m3); box-shadow:0 0 0 2px color-mix(in srgb, var(--blue-m3) 16%, transparent)}
.cmt-compose .btn{align-self:flex-end; height:38px; border-radius:99px}

/* Active sessions / recent sign-ins (Security page) */
.sess-list{display:flex; flex-direction:column}
.sess-row{display:flex; align-items:center; gap:14px; padding:11px 2px; border-bottom:1px solid var(--line-soft)}
.sess-row:last-child{border-bottom:0}
.sess-ico{width:40px; height:40px; border-radius:50%; background:var(--app-bg); display:grid; place-items:center; color:var(--faint); font-size:16px; flex-shrink:0}
.sess-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.sess-main b{font-size:14px; font-weight:600; color:var(--ink); display:flex; align-items:center}
.sess-main span{font-size:12.5px; color:var(--faint)}

/* ================================================================== */
/* Details / Activity side panel                                       */
/* ================================================================== */
.info-panel{position:fixed; top:var(--header-h); right:0; bottom:0; width:360px; max-width:88vw; background:var(--white); border-radius:var(--radius) var(--radius) 0 0; z-index:1500; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s ease; visibility:hidden}
.info-panel.open{transform:translateX(0); visibility:visible}
/* Panel pushes main left with a gap (two separated surfaces), on wide screens */
.main{transition:margin-right .22s ease}
@media(min-width:901px){ body.panel-open .main{margin-right:374px} }
.info-head{display:flex; align-items:center; gap:10px; padding:16px 12px 10px 18px}
.info-title{flex:1; display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600; color:var(--ink); min-width:0}
.info-title span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.info-title > i{color:var(--faint)}
.info-tabs{display:flex; gap:18px; padding:0 18px; border-bottom:1px solid var(--line-soft)}
.info-tab{border:0; background:transparent; padding:10px 2px; font-size:14px; font-weight:600; color:var(--faint); font-family:inherit; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px}
.info-tab:hover{color:var(--ink)}
.info-tab.on{color:var(--blue-m3); border-bottom-color:var(--blue-m3)}
.info-body{flex:1; overflow-y:auto; padding:18px}
.info-pane[hidden]{display:none}
.info-row{margin:0 0 16px}
.info-row b{display:block; font-size:13px; color:var(--faint); font-weight:600; margin-bottom:3px}
.info-row span{font-size:14px; color:var(--ink); word-break:break-word}
/* Embedded file metadata ("Properties") section in the Details tab */
.info-meta{margin:2px 0 14px; padding-top:12px; border-top:1px solid var(--line-soft)}
.info-meta-h{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin:0 0 12px}
.info-meta .info-row{margin-bottom:12px}
.info-meta a{color:var(--blue-m3); text-decoration:none}
.info-meta a:hover{text-decoration:underline}
.info-meta a i{font-size:11px; margin-left:2px}
/* File preview thumbnail at the top of the Details tab */
.info-preview{height:180px; border:1px solid var(--line-soft); border-radius:10px; overflow:hidden; margin:0 0 18px; display:grid; place-items:center; background:var(--app-bg); cursor:pointer}
.info-preview img,.info-preview video{width:100%; height:100%; object-fit:contain; display:block; background:#000}
.info-preview iframe{width:100%; height:100%; border:0; background:#fff}
.info-preview i{font-size:48px; color:var(--faint)}
.act-group{font-size:14px; font-weight:600; color:var(--ink); margin:0 0 8px}
.act-feed{display:flex; flex-direction:column}
.act-day{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:16px 0 2px; padding-bottom:7px; border-bottom:1px solid var(--line-soft)}
.act-feed .act-day:first-child{margin-top:2px}
.act-item{display:flex; gap:12px; padding:9px 8px; margin:0 -8px; border-radius:10px; align-items:flex-start; transition:background .12s ease}
.act-item:hover{background:var(--hover-row)}
.act-ico{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:14px; flex-shrink:0}
.act-ico.bl{background:color-mix(in srgb, var(--blue-m3) 13%, #fff); color:var(--blue-m3)}
.act-ico.gr{background:#E6F4EA; color:#188038}
.act-ico.yl{background:#FEF7E0; color:#B06000}
.act-ico.rd{background:#FCE8E6; color:#C5221F}
.act-ico.pu{background:#F3E8FD; color:#8430CE}
.act-ava{width:32px; height:32px; border-radius:50%; background:var(--blue-m3); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:600; flex-shrink:0}
.act-main{flex:1; min-width:0; padding-top:1px}
.act-main .desc{font-size:13.5px; color:var(--ink); line-height:1.45}
.act-main .desc b{font-weight:600}
.act-main .time{font-size:12px; color:var(--faint); margin-top:3px}
.act-empty{color:var(--faint); font-size:14px; padding:8px 0}
/* Side-panel skeleton loader (label + value pairs) */
.panel-skel{display:flex; flex-direction:column; gap:9px}
.panel-skel .sk-label{height:11px; width:34%; border-radius:6px; margin-top:9px}
.panel-skel .sk-value{height:14px; width:86%; border-radius:6px}
.panel-skel .sk-label:first-child{margin-top:0}
.info-desc{margin-top:8px; border-top:1px solid var(--line-soft); padding-top:14px}
.info-desc b{display:block; font-size:13px; color:var(--faint); font-weight:600; margin-bottom:6px}
.info-desc textarea{width:100%; min-height:64px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; color:var(--ink); background:var(--white); outline:none; resize:vertical}
.info-desc textarea:focus{border-color:var(--blue-m3); box-shadow:0 0 0 2px color-mix(in srgb, var(--blue-m3) 16%, transparent)}
.info-desc textarea::placeholder{color:var(--faint)}
.desc-count{text-align:right; font-size:12px; color:var(--faint); margin-top:4px}
@media(max-width:600px){ .info-panel{width:100%; max-width:100%} }
.nav-item{display:flex; align-items:center; gap:14px; min-height:38px; padding:0 12px 0 16px; border-radius:99px; color:var(--ink); text-decoration:none; font-size:13.5px; margin-bottom:2px; letter-spacing:.1px; font-weight:500}
.nav-item .nav-ico{width:20px; text-align:center; font-size:14px; color:var(--dim); flex-shrink:0}
.nav-item:hover{background:var(--hover)}
.nav-item.on{background:var(--sel); font-weight:600}
.nav-gap{height:14px; flex-shrink:0}
.nav-label{font-size:11px; font-weight:700; color:var(--faint); padding:14px 16px 6px; text-transform:uppercase; letter-spacing:.8px}

/* Sidebar "My Drive" expandable folder tree */
.nav-item-tree{display:flex; align-items:center; gap:2px}
.nav-item-tree .nav-item{flex:1; min-width:0; margin-bottom:0}
/* "Show folders" toggle beside My Drive — a subtle rounded chevron button */
.ftree-toggle{width:30px; height:34px; flex-shrink:0; border:0; background:transparent; color:var(--faint); cursor:pointer; display:grid; place-items:center; border-radius:8px; font-size:12px; transition:transform .2s ease, background .15s ease, color .15s ease}
.ftree-toggle:hover{background:var(--hover); color:var(--ink)}
.ftree-toggle.open{transform:rotate(90deg)}
.ftree-toggle.leaf{visibility:hidden; cursor:default}
/* Nested under "My Drive"; caps its height and scrolls on its own — a huge root list
   never stretches the sidebar (New / Shared / Trash / Storage stay put). */
.ftree{margin:3px 0 6px 12px; padding-left:3px; max-height:42vh; overflow-y:auto; overscroll-behavior:contain}
.ftree[hidden]{display:none}
.ftree::-webkit-scrollbar{width:9px}
.ftree::-webkit-scrollbar-thumb{background:#dadce0; border:2px solid var(--white); border-radius:8px}
.ftree::-webkit-scrollbar-thumb:hover{background:#c6cace}
.ftree-node > .ftree-children{display:none}
.ftree-node.open > .ftree-children{display:block}
.ftree-children{margin-left:15px; border-left:1px solid var(--line-soft); padding-left:4px}
.ftree-row{display:flex; align-items:center; gap:2px; border-radius:9px; padding:0 4px 0 0; margin:1px 0; transition:background .13s ease}
.ftree-row:hover{background:var(--hover)}
.ftree-row.on{background:var(--sel)}
.ftree-row.on .ftree-name{color:#041e49; font-weight:600}
.ftree-row.on .ftree-ico{color:var(--blue-m3)}
.ftree-caret{width:22px; height:30px; flex-shrink:0; border:0; background:transparent; color:var(--faint); cursor:pointer; display:grid; place-items:center; font-size:11px; border-radius:6px; transition:transform .2s ease, background .13s ease}
.ftree-caret:hover{background:rgba(60,64,67,.1)}
.ftree-caret.leaf{visibility:hidden; cursor:default}
.ftree-node.open > .ftree-row .ftree-caret{transform:rotate(90deg)}
.ftree-link{flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:6px 2px; color:var(--dim); text-decoration:none; font-size:13.5px}
.ftree-row.on .ftree-link{color:#041e49}
/* Muted gray folders like a file explorer; folders with a custom colour override this inline. */
.ftree-ico{width:16px; text-align:center; color:#5F6368; font-size:14px; flex-shrink:0; transition:color .13s ease}
.ftree-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Per-folder options (⋮): appears on hover / when the row is active; always shown on touch. */
.ftree-menu-btn{flex-shrink:0; width:26px; height:26px; border:0; background:transparent; color:var(--faint); cursor:pointer; border-radius:50%; display:grid; place-items:center; font-size:13px; opacity:0; transition:opacity .12s ease, background .12s ease}
.ftree-row:hover .ftree-menu-btn, .ftree-row.on .ftree-menu-btn{opacity:1}
.ftree-menu-btn:hover{background:rgba(60,64,67,.12)}
@media (hover:none){ .ftree-menu-btn{opacity:1} }
.storage{padding:8px 16px 0; margin-top:auto}
.storage .storage-bar{height:4px; border-radius:99px; background:var(--hover); margin:10px 0; overflow:hidden}
.storage .storage-bar i{display:block; height:100%; width:1%; min-width:6px; background:var(--blue-m3); border-radius:99px}
.storage p{font-size:12.5px; color:var(--dim)}
.storage-more{display:inline-block; margin-top:12px; border:1px solid var(--line); border-radius:5px; padding:9px 22px; font-size:13.5px; font-weight:600; color:var(--blue-m3); background:transparent; text-decoration:none}
.storage-more:hover{background:#F0F7FF}
.scrim{display:none; position:fixed; inset:0; background:rgba(31,31,31,.45); z-index:40; opacity:0; transition:opacity .2s}
.scrim.show{opacity:1}

.main{flex:1; min-width:0; background:var(--white); border-radius:var(--radius) var(--radius) 0 0; margin-right:14px; display:flex; flex-direction:column; overflow:hidden}
.main-pad{padding:26px 22px 6px; flex-shrink:0; position:relative}
/* Breadcrumb bar (layout-level, every page) */
.crumbbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 22px 0; font-size:13px; flex-shrink:0}
.crumbbar a{display:inline-flex; align-items:center; gap:6px; color:var(--faint); text-decoration:none; padding:3px 6px; border-radius:6px}
.crumbbar a:hover{background:var(--hover); color:var(--ink)}
.crumbbar .sep{font-size:10px; color:var(--line)}
.crumbbar .cur{display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-weight:600; padding:3px 4px}
@media (max-width:600px){ .crumbbar{padding:10px 14px 0} }
/* Reserve the selection-bar's height so the bar (which overlays this row) never bleeds
   into the content below — keeps clear space above and below it. */
.page-title{display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-height:64px}
.page-title h1{font-size:22px; font-weight:500; letter-spacing:-.3px}
.page-sub{color:var(--faint); font-size:14px; margin:2px 0 0}
.page-title .end{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* Uniform 40px height so Upload / view-toggle / details align cleanly */
.page-title .end .btn{min-height:40px; height:40px; padding:0 18px}
.page-title .end .icon-btn{width:40px; height:40px; font-size:16px}
/* Details (i) button — bordered box to match the list/grid toggle */
#detailsBtn{border:1px solid var(--line); border-radius:5px; color:var(--faint)}
#detailsBtn:hover{background:var(--hover); color:var(--dim)}
#detailsBtn.on{background:var(--sel); border-color:transparent; color:var(--ink)}
.view-toggle{display:inline-flex; align-items:stretch; height:40px; border:1px solid var(--line); border-radius:5px; overflow:hidden}
.view-toggle button,.view-toggle a{border:0; background:transparent; padding:0 14px; font-size:14px; color:var(--faint); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:.15s}
.view-toggle button:hover,.view-toggle a:hover{background:var(--hover)}
.view-toggle button.on,.view-toggle a.on{background:var(--sel); color:var(--ink)}
.view-toggle a:not(:last-child){border-right:1px solid var(--line)}
/* "View all" pill link (section headers) */
.view-all{display:inline-flex; align-items:center; gap:7px; color:var(--blue-m3); font-size:14px; font-weight:600; text-decoration:none; padding:7px 14px; border-radius:99px; transition:background .15s; white-space:nowrap}
.view-all:hover{background:var(--hover)}
.view-all i{font-size:12px}
/* Sort menu ("Name ↑" dropdown replacing the section titles) */
.sort-bar{margin:2px 0 8px}
.sort-details{position:relative; display:inline-block}
.sort-details > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:99px; font-size:15px; font-weight:600; color:var(--ink); user-select:none}
.sort-details > summary::-webkit-details-marker{display:none}
.sort-details > summary:hover{background:var(--hover)}
.sort-details[open] > summary{background:var(--sel); color:var(--ink)}
.sort-details > summary i{font-size:13px; color:var(--blue-m3)}
.sort-menu{position:absolute; top:calc(100% + 4px); left:0; z-index:200; min-width:264px; background:var(--white); border:1px solid var(--line-soft); border-radius:8px; box-shadow:0 4px 14px rgba(60,64,67,.28),0 1px 3px rgba(60,64,67,.15); padding:6px 0}
.sort-sec{font-size:12px; font-weight:600; color:var(--faint); padding:8px 16px 4px}
.sort-item{display:flex; align-items:center; gap:14px; padding:9px 16px 9px 16px; font-size:14px; color:var(--ink); text-decoration:none}
.sort-item i{font-size:13px; color:var(--blue-m3); width:14px; visibility:hidden}
.sort-item.on i{visibility:visible}
.sort-item:hover{background:var(--hover)}
.sort-item.on{background:var(--hover-row)}
.sort-divider{height:1px; background:var(--line-soft); margin:6px 0}
.chips{display:flex; gap:8px; padding:12px 0 6px; flex-wrap:wrap}
.chips a.chip{height:44px}
/* Users search + pagination */
.user-search{position:relative; display:flex; align-items:center}
.user-search i{position:absolute; left:12px; font-size:13px; color:var(--faint); pointer-events:none}
.user-search input{height:44px; border:1px solid var(--line); border-radius:8px; padding:0 12px 0 32px; font-size:13px; font-family:inherit; min-width:230px; max-width:100%; background:var(--white); color:var(--ink)}
.user-search input:focus{outline:none; border-color:var(--blue-m3); box-shadow:0 0 0 2px color-mix(in srgb, var(--blue-m3) 15%, transparent)}
.pager{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:14px 0 4px}
.pager-nav{display:flex; align-items:center; gap:12px}
.pager-info{font-size:13px; color:var(--faint)}
.chip.is-disabled{opacity:.45; pointer-events:none}
/* Bulk-actions bar (Users) */
.bulk-bar{display:flex; align-items:center; gap:12px; background:var(--sel); border:1px solid var(--blue-m3); border-radius:10px; padding:8px 10px 8px 8px; margin:10px 0 0}
.bulk-bar[hidden]{display:none}
.bulk-bar .sel-count{font-weight:600; color:var(--ink); font-size:13px}
.bulk-actions{display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap}
.u-check,.u-checkall{width:16px; height:16px; accent-color:var(--blue-m3); cursor:pointer; vertical-align:middle}
/* Storage-quota warning banner */
.quota-banner{display:flex; align-items:center; gap:12px; margin:12px 22px 0; padding:11px 14px; border-radius:10px; background:#FEF7E0; border:1px solid #FDE293; color:#7a5900; font-size:13.5px}
.quota-banner.full{background:#FCE8E6; border-color:#F5C6C0; color:var(--red)}
.quota-banner > i{font-size:16px; flex-shrink:0}
.quota-banner b{font-weight:600}
.quota-banner .quota-more{margin-left:auto; color:inherit; font-weight:600; text-decoration:underline; white-space:nowrap}
.quota-x{background:none; border:0; cursor:pointer; color:inherit; padding:2px 4px; font-size:14px}
@media (max-width:600px){ .quota-banner{margin:10px 14px 0; flex-wrap:wrap} }
.table mark{background:#FFF2A8; color:inherit; border-radius:3px; padding:0 1px; font-weight:600}
.chip{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:5px; padding:0 13px; height:34px; font-size:13px; font-weight:600; color:var(--dim); background:var(--white); text-decoration:none; white-space:nowrap}
.chip:hover{background:#F0F4F9}
.chip.act{background:var(--sel); border-color:transparent; color:var(--ink)}
/* Select styled as a filter chip */
select.chip{cursor:pointer; padding-right:26px; appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%235F6368' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center; background-size:9px}
select.chip:focus{outline:none; border-color:var(--blue-m3)}

/* ================================================================== */
/* Select2 — themed to match the app (radius 5px, app colors/font)     */
/* ================================================================== */
.select2-container{font-family:inherit}
.select2-container--default .select2-selection--single{
    height:44px; border:1px solid var(--line); border-radius:5px; background:var(--white);
    display:flex; align-items:center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    color:var(--ink); font-size:14px; line-height:1.2; padding:0 30px 0 14px; font-weight:500;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--faint)}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:100%; right:8px}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--faint) transparent transparent}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent var(--faint)}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--blue-m3); box-shadow:0 0 0 1px var(--blue-m3)}
/* Compact variant for filter chips */
.select2-container.s2-compact .select2-selection--single{height:36px}
.select2-container.s2-compact .select2-selection--single .select2-selection__rendered{font-size:13px; font-weight:600; color:var(--dim)}
/* Dropdown panel */
.select2-dropdown{border:1px solid var(--line); border-radius:8px; box-shadow:0 2px 10px rgba(60,64,67,.18); overflow:hidden; font-size:14px}
.select2-container--default .select2-results__option{padding:9px 14px; color:var(--ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--hover); color:var(--ink)}
.select2-container--default .select2-results__option[aria-selected=true]{background:var(--sel); color:var(--ink)}
.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid var(--line); border-radius:5px; padding:7px 10px}
.select2-container--default .select2-search--dropdown .select2-search__field:focus{outline:none; border-color:var(--blue-m3)}
/* Inside SweetAlert popups */
.swal2-popup .select2-container{width:100%!important; margin-bottom:2px}

/* Breadcrumb (folder navigation) */
.crumbs{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:34px}
.crumbs a{display:inline-flex; align-items:center; gap:7px; color:var(--faint); text-decoration:none; font-size:15px; font-weight:500; padding:5px 11px; border-radius:8px; transition:.15s}
.crumbs a:hover{background:var(--hover); color:var(--blue-m3)}
.crumbs .crumb-sep{color:var(--line); font-size:11px}
.crumbs .crumb-current{font-size:22px; font-weight:500; letter-spacing:-.3px; color:var(--ink)}
/* Current folder is a dropdown button (opens the folder menu), like Google Drive. */
.crumbs button.crumb-current{font-family:inherit; border:0; background:transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:3px 10px; border-radius:8px; transition:background .15s}
.crumbs button.crumb-current:hover{background:var(--hover)}
.crumb-caret{font-size:13px; color:var(--faint); margin-top:3px}
/* Double-click opens items — stop the browser from selecting the name text on that action. */
.card-grid, .table-wrap .table, .ftree, .crumbs, .sel-bar{-webkit-user-select:none; -moz-user-select:none; user-select:none}
.scroll{flex:1; overflow-y:auto; padding:6px 22px 32px; -webkit-overflow-scrolling:touch; position:relative}
.section-title{font-size:14px; font-weight:600; margin:16px 0 10px; letter-spacing:-.1px}

.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-bottom:6px}
.file-card{border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; cursor:pointer; background:#F8FAFD}
.file-card:hover{background:#E3E4E4; border-color:var(--line)}
.file-card .file-card-head{display:flex; align-items:center; gap:10px; padding:12px 8px 12px 14px; font-size:13px; font-weight:600; min-height:48px}
.file-card .file-card-head .name{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.file-card .file-card-head .dots{margin-left:auto; flex-shrink:0}
.file-card .file-card-thumb{margin:0 10px 10px; height:124px; border-radius:8px; background:var(--app-bg); display:grid; place-items:center; font-size:40px; overflow:hidden; cursor:pointer}
.file-card .file-card-thumb img{width:100%; height:100%; object-fit:cover; display:block}
/* Password show/hide toggle (project-wide) */
.pw-field{position:relative; display:block}
.pw-field > input{width:100%; padding-right:44px !important}
.pw-toggle{position:absolute; top:0; right:0; height:100%; width:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; cursor:pointer; color:var(--faint); font-size:15px}
.pw-toggle:hover{color:var(--ink)}
.pw-toggle:focus{outline:none}
/* Rendered PDF/Word/Excel thumbnails (lazy) */
.thumb-preview{position:relative; width:100%; height:100%; overflow:hidden; background:#fff; display:grid; place-items:center}
.thumb-preview iframe{position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none}
.thumb-preview .thumb-doc,.thumb-preview .thumb-sheet{position:absolute; top:0; left:0; width:360px; transform:scale(.42); transform-origin:top left; pointer-events:none; color:#202124; background:#fff; padding:10px; font-size:12px; line-height:1.4}
.thumb-preview .thumb-doc *{max-width:100%}
.thumb-preview .thumb-sheet table{border-collapse:collapse}
.thumb-preview .thumb-sheet td,.thumb-preview .thumb-sheet th{border:1px solid #dadce0; padding:2px 5px; font-size:10px; white-space:nowrap}
.info-preview .thumb-preview{border-radius:10px}
.file-name.file-open{cursor:pointer}
.loc-cell{color:var(--dim); white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis; cursor:default}
.file-card .file-card-foot{display:flex; align-items:center; gap:8px; padding:0 14px 12px; font-size:12px; color:var(--faint)}
.avatar-sm{width:22px; height:22px; border-radius:50%; color:#fff; display:grid; place-items:center; font-size:9.5px; font-weight:700; flex-shrink:0}
.dots{width:34px; height:34px; border-radius:5px; border:0; background:transparent; color:var(--dim); font-size:15px; display:grid; place-items:center; flex-shrink:0}
.dots:hover{background:rgba(60,64,67,.1)}

.file-ico{font-size:16px; flex-shrink:0; width:22px; text-align:center}
.file-ico.folder{color:var(--faint)}
.file-ico.doc{color:#4285F4}.file-ico.sheet{color:#34A853}.file-ico.slide{color:#FBBC04}
.file-ico.pdf,.file-ico.img,.file-ico.vid,.file-ico.aud{color:#EA4335}
.file-ico.zip,.file-ico.code,.file-ico.file{color:var(--faint)}

.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px}
.table{width:100%; border-collapse:collapse; min-width:640px}
.table th{font-size:12.5px; font-weight:600; color:var(--ink); text-align:left; padding:0 12px; height:46px; border-bottom:1px solid var(--line-soft); white-space:nowrap}
.table th .arr{font-size:10px; color:var(--dim); margin-left:4px}
.th-sort{display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; cursor:pointer}
.th-sort:hover{color:var(--blue-m3)}
.th-sort.on{color:var(--blue-m3)}
.th-sort i{font-size:11px}
.table td{padding:0 12px; height:52px; border-bottom:1px solid var(--line-soft); font-size:13.5px; vertical-align:middle; white-space:nowrap; color:var(--dim)}
.table tbody tr{cursor:pointer}
.table tbody tr:hover td{background:var(--hover-row)}
.table tr.sel td{background:var(--sel)}
.table .file-name{display:flex; align-items:center; gap:13px; color:var(--ink); font-weight:500; min-width:0}
/* The "grow" column (file name / activity action) absorbs remaining width and truncates its
   text with an ellipsis, so one long value can't stretch the table or push other columns off. */
.table td.col-grow{width:100%; max-width:0}
.table .file-ico{flex-shrink:0}
.fname-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
/* Activity log: truncate the (often long) action description + its code line. */
.act-row td.col-grow .file-name{width:100%; min-width:0}
.act-row td.col-grow b,.act-row td.col-grow small{display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Shared-state indicators on file/folder rows & cards */
.share-flags{display:inline-flex; align-items:center; gap:5px; flex-shrink:0}
.file-card-head .share-flags{margin-left:6px}
.share-flag{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--hover); color:var(--faint); font-size:10px; cursor:default}
.share-flag.lnk{color:var(--blue-m3); background:color-mix(in srgb, var(--blue-m3) 12%, #fff)}
.file-name .share-flags{margin-left:-4px}
.owner{display:flex; align-items:center; gap:9px}
.row-actions{display:flex; justify-content:flex-end; opacity:0}
.table tbody tr:hover .row-actions,.table tr.sel .row-actions{opacity:1}
.share-tag{font-size:12px; color:var(--faint)}
.table-note{padding:14px 4px; color:var(--faint); font-size:12.5px}

.empty{min-height:44vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px}
.empty .art{font-size:100px; line-height:1; margin-bottom:14px; opacity:.9}
.empty h2{font-size:21px; font-weight:500; margin-bottom:8px}
.empty p{color:var(--faint); font-size:14px; max-width:400px; line-height:1.6}
.notice-strip{display:flex; align-items:center; gap:10px; background:var(--app-bg); border-radius:8px; padding:11px 16px; font-size:13.5px; color:var(--dim); margin:8px 0; flex-wrap:wrap}
.notice-strip .link{margin-left:auto; padding:4px 0}

/* Admin stats & panels */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:14px; margin:8px 0 18px}
/* Aurora — soft-tint KPI cards (light, theme-compatible) */
.stat{--c:#1a73e8; position:relative; border:1px solid color-mix(in srgb,var(--c) 20%,#fff); border-radius:16px; padding:18px; overflow:hidden; text-decoration:none;
    box-shadow:0 1px 2px rgba(20,30,80,.05); transition:transform .16s ease, box-shadow .16s ease;
    background:linear-gradient(135deg, color-mix(in srgb,var(--c) 12%,#fff), color-mix(in srgb,var(--c) 5%,#fff))}
.stat:hover{transform:translateY(-3px); box-shadow:0 10px 22px color-mix(in srgb,var(--c) 22%, transparent)}
.stat-ico{position:relative; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:18px; margin-bottom:14px; background:color-mix(in srgb,var(--c) 16%,#fff); color:var(--c)}
.stat b{position:relative; font-size:30px; font-weight:800; display:block; letter-spacing:-.02em; color:var(--c); line-height:1}
.stat-lbl{position:relative; font-size:13px; color:var(--ink); font-weight:600; margin-top:10px}
.stat-sub{position:relative; font-size:12px; color:var(--faint); margin-top:3px}
.stat-sub em{font-style:normal; color:var(--c); font-weight:800}
.bubble{border-radius:50%; display:grid; place-items:center; flex-shrink:0}
.bubble.bl{background:#E8F0FE; color:#1A73E8}.bubble.gr{background:#E6F4EA; color:#188038}
.bubble.yl{background:#FEF7E0; color:#B06000}.bubble.rd{background:#FCE8E6; color:#C5221F}
.stat-bl{--c:#1a73e8}
.stat-gr{--c:#0e9c78}
.stat-pu{--c:#7c3aed}
.stat-te{--c:#0e8fb0}
.stat-yl{--c:#d97706}
.stat-rd{--c:#e11d48}
/* Aurora welcome hero (Dashboard + Home) */
.hero-band{--c:#4361ee; position:relative; overflow:hidden; border-radius:16px; padding:22px 24px; margin:6px 0 18px; color:var(--ink);
    border:1px solid color-mix(in srgb,var(--c) 20%,#fff);
    background:linear-gradient(120deg, color-mix(in srgb,#0B57D0 12%,#fff) 0%, color-mix(in srgb,#3f5efb 9%,#fff) 48%, color-mix(in srgb,#8a3ffb 11%,#fff) 100%);
    box-shadow:0 1px 2px rgba(20,30,80,.05)}
.hero-band::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(700px 240px at 88% -40%, rgba(255,255,255,.5), transparent)}
.hero-band h1,.hero-band h2{position:relative; margin:0; color:var(--ink); font-size:24px; font-weight:800; letter-spacing:-.02em}
.hero-band p{position:relative; margin:6px 0 0; color:var(--dim); font-size:14.5px}
.hero-band .hero-end{position:relative; margin-left:auto}
.hero-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
@media(max-width:600px){ .hero-band{padding:18px} .hero-band h1,.hero-band h2{font-size:20px} }
.panels{display:grid; grid-template-columns:1.55fr 1fr; gap:14px}
.panel{border:1px solid var(--line-soft); border-radius:12px; margin-bottom:14px; background:var(--white)}
.panel-head{padding:14px 20px; display:flex; align-items:center; font-size:14px; font-weight:600; flex-wrap:wrap; gap:6px}
.panel-head .r{margin-left:auto; font-size:13px; color:var(--blue-m3); font-weight:600; text-decoration:none}
.panel-body{padding:4px 20px 18px}
.chart{height:172px; display:flex; align-items:flex-end; gap:12px; padding-top:22px; margin-top:2px; border-bottom:1px solid var(--line-soft)}
.chart .bc{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; cursor:default}
.chart .bar{position:relative; width:100%; max-width:36px; min-height:3px; background:color-mix(in srgb, #3f5efb 18%, #fff); border-radius:7px 7px 0 0; transition:background .15s ease, filter .15s ease}
.chart .bar.cur{background:linear-gradient(180deg, #8a3ffb, #3f5efb)}
.chart .bc:hover .bar{filter:brightness(.94); background:linear-gradient(180deg, #8a3ffb, #3f5efb)}
.chart .bval{position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%); font-size:11px; font-weight:700; color:var(--faint)}
.chart .bc:hover .bval{color:var(--blue-m3)}
.chart small{color:var(--faint); font-size:11px; font-weight:500}
.list-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:13px}
a.list-row,.list-row.js-preview{cursor:pointer; padding:10px 8px; border-radius:8px; transition:background .12s}
a.list-row:hover,.list-row.js-preview:hover{background:var(--hover-row)}
.list-row:last-child{border:0}
.list-row .bubble{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:13px; flex-shrink:0}
.list-row b{font-weight:600; display:block; color:var(--ink)}
.list-row small{color:var(--faint); font-size:12px}
.list-row .e{margin-left:auto; color:var(--faint); font-size:12px; flex-shrink:0}
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:6px; font-size:12px; font-weight:600}
.pill.g{background:#E6F4EA; color:#137333}
.pill.b{background:#E8F0FE; color:#1967D2}
.pill.n{background:#F1F3F4; color:var(--faint)}
.pill.g::before{content:"✓"; font-size:10px}

/* Forms / settings */
.settings-wrap{display:grid; grid-template-columns:210px 1fr; gap:28px; align-items:start; padding-top:10px}
.settings-nav{display:flex; flex-direction:column; gap:8px}
.settings-nav a{display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--line-soft); border-radius:12px; background:var(--white); color:var(--dim); font-size:14px; font-weight:500; text-decoration:none; transition:background .15s, border-color .15s}
.settings-nav a i{width:20px; text-align:center; font-size:15px; color:var(--faint); flex-shrink:0}
.settings-nav a:hover{background:var(--hover-row); border-color:var(--line)}
.settings-nav a.on{background:var(--sel); border-color:var(--blue-m3); color:var(--ink); font-weight:600}
.settings-nav a.on i{color:var(--blue-m3)}
.settings-nav-select{display:none; width:100%; height:46px; padding:0 38px 0 14px; font-size:14px; font-weight:600; color:var(--ink); font-family:inherit; background:var(--white); border:1px solid var(--line); border-radius:10px; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%235F6368' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center}
.settings-nav-select:focus{outline:none; border-color:var(--blue-m3); box-shadow:0 0 0 1px var(--blue-m3)}
.form-row{display:grid; grid-template-columns:250px 1fr; gap:24px; padding:18px 0; border-bottom:1px solid var(--line-soft); align-items:start}
.form-row:last-child{border-bottom:0}
/* Label + tooltip on one line: the ℹ️ stays inline with the label text, never on its own line.
   Scoped to the DIRECT label <b> so emphasis (<b>) inside the <small> hint stays inline text. */
.form-row .fl > b{font-size:14px; display:flex; align-items:center; flex-wrap:wrap; column-gap:5px; margin-bottom:3px; font-weight:600; line-height:1.4}
.form-row .fl small{color:var(--faint); font-size:12.5px; line-height:1.5; display:block}
/* Full-width sub-section header inside a settings form (label + hint span the whole row). */
.form-row.form-section{grid-template-columns:1fr; margin-top:8px; padding-top:20px}
.form-row.form-section .fl b{font-size:15px}
/* Per-role default cards (Member / Admin) — polished side-by-side panels. */
.role-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:16px}
.role-card{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--white); box-shadow:0 1px 2px rgba(32,33,36,.05)}
.role-card-head{display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line-soft)}
.role-card-member .role-card-head{background:rgba(24,128,56,.06)}
.role-card-admin .role-card-head{background:rgba(11,87,208,.06)}
.role-badge{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:16px; flex-shrink:0}
.role-card-member .role-badge{background:var(--green)}
.role-card-admin .role-badge{background:var(--blue-m3)}
.role-card-txt b{display:block; font-size:15px; font-weight:600; color:var(--ink)}
.role-card-txt small{color:var(--faint); font-size:12.5px}
.role-card-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:16px}
.role-field{display:block}
.role-field-lbl{display:flex; align-items:center; flex-wrap:wrap; column-gap:5px; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px}
.role-card-body .input{max-width:220px}
.role-err{display:block; color:var(--red); font-size:13px; margin:6px 2px 0}
@media(max-width:820px){ .role-cards{grid-template-columns:1fr; gap:14px} }
/* E-mail template editor cards */
.tpl-card{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--white); box-shadow:0 1px 2px rgba(32,33,36,.05); margin-top:16px}
.tpl-head{display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--app-bg); border-bottom:1px solid var(--line-soft)}
.tpl-badge{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:15px; flex-shrink:0; background:var(--faint)}
.tpl-head b{display:block; font-size:14.5px; font-weight:600; color:var(--ink)}
.tpl-head small{color:var(--faint); font-size:12.5px}
.tpl-preview{margin-left:auto; flex-shrink:0; font-size:13px; color:var(--blue-m3); text-decoration:none; white-space:nowrap; padding:6px 10px; border-radius:8px}
.tpl-preview:hover{background:var(--hover)}
.tpl-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:16px}
.tpl-field{display:block}
.tpl-lbl{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px}
.tpl-field textarea.input{resize:vertical; min-height:64px; line-height:1.5; font-family:inherit; width:100%}
.tpl-vars{display:block; margin-top:7px; font-size:12px; color:var(--faint); line-height:1.9}
.tpl-vars code{background:var(--hover); border-radius:5px; padding:1px 6px; font-size:11.5px; color:var(--dim)}
.tpl-switch{display:flex; align-items:center; gap:10px}
.tpl-switch input{width:18px; height:18px; flex-shrink:0}
.tpl-switch span{font-size:13.5px; color:var(--ink)}
.tpl-globals{margin:14px 0 4px; padding:12px 14px; background:var(--app-bg); border:1px solid var(--line-soft); border-radius:10px; font-size:13px; color:var(--dim); line-height:2}
.tpl-globals code{background:var(--white); border:1px solid var(--line-soft); border-radius:5px; padding:1px 6px; font-size:11.5px; color:var(--blue-m3)}
.tpl-globals small{display:block; margin-top:6px; color:var(--faint); font-size:12px; line-height:1.5}
/* CodeMirror HTML editor for e-mail message bodies (full width of the card) */
.tpl-body .CodeMirror{width:100%; height:auto; border:1px solid var(--line); border-radius:8px; font-size:12.5px; line-height:1.6; background:var(--white); font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace}
.tpl-body .CodeMirror-focused{border-color:var(--blue-m3); box-shadow:0 0 0 3px rgba(11,87,208,.12)}
.tpl-body .CodeMirror-gutters{background:var(--app-bg); border-right:1px solid var(--line-soft)}
@media(max-width:600px){ .tpl-head{flex-wrap:wrap} .tpl-preview{margin-left:0} }

/* Inline info tooltip (ℹ) next to a field label + the floating bubble it shows. */
.s-tip{border:0; background:transparent; color:var(--faint); cursor:help; padding:0; margin:0; font-size:13px; line-height:1; vertical-align:middle; flex-shrink:0; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%}
.s-tip:hover,.s-tip:focus-visible{color:var(--blue-m3); background:var(--hover); outline:none}
.tip-pop{position:absolute; z-index:7000; max-width:280px; background:#202939; color:#fff; font-size:12.5px; line-height:1.5; padding:9px 12px; border-radius:9px; box-shadow:0 8px 24px rgba(20,30,60,.3); pointer-events:none; opacity:0; transform:translateY(3px); transition:opacity .12s ease, transform .12s ease}
.tip-pop.show{opacity:1; transform:none}

/* "How this works" button + the illustrated help modal (rendered inside a SweetAlert). */
.settings-help-bar{display:flex; justify-content:flex-end; margin-bottom:2px}
.help-btn{border:1px solid var(--line); background:var(--white); color:var(--blue-m3); border-radius:99px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px}
.help-btn:hover{background:var(--hover)}
.help-modal .swal2-html-container{margin:12px 4px 4px; text-align:left}
.hw{color:var(--ink)}
.hw h4{margin:0 0 6px; font-size:18px; font-weight:800; letter-spacing:-.01em}
.hw > p{margin:0 0 16px; color:var(--dim); font-size:14px; line-height:1.55}
.hw-items{display:flex; flex-direction:column; gap:10px}
.hw-item{display:flex; gap:12px; padding:12px 14px; border:1px solid var(--line-soft); border-radius:12px; background:var(--app-bg); text-align:left}
.hw-item .hw-ico{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; font-size:15px; background:#E8F0FE; color:#0B57D0}
.hw-item.gr .hw-ico{background:#E6F4EA; color:#0f8a5f}
.hw-item.pu .hw-ico{background:#F2ECFE; color:#7c3aed}
.hw-item.am .hw-ico{background:#FEF7E0; color:#b26a00}
.hw-item > div > b{display:block; font-size:14px; margin-bottom:2px}
.hw-item > div > span{display:block; font-size:13px; color:var(--dim); line-height:1.5}
.hw-item code{background:rgba(60,64,67,.1); border-radius:4px; padding:1px 5px; font-size:12px}
.hw-flow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 0 14px}
.hw-box{border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600; background:var(--white); color:var(--ink)}
.hw-arrow{color:var(--faint); font-weight:700}
.hw-note{margin-top:14px; background:#E8F0FE; border-radius:10px; padding:11px 13px; font-size:13px; color:var(--dim); line-height:1.5}
.hw-note b{color:var(--ink)}
.req{color:var(--red-d)}
.input{width:100%; max-width:420px; padding:12px 14px; border:1px solid var(--faint); border-radius:6px; font-size:14px; outline:none; background:var(--white); min-height:44px}
.input:focus{border:2px solid var(--blue-m3); padding:11px 13px}
.chips-box{display:flex; flex-wrap:wrap; gap:8px; max-width:420px}
.tag-chip{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; padding:7px 13px; font-size:13px; font-weight:600; color:var(--ink); background:var(--white)}
.tag-chip i{font-style:normal; color:var(--faint); cursor:pointer; font-size:11px}
.tag-chip:hover{background:#F0F4F9}
.logo-drop{width:150px; height:66px; border:1px dashed var(--faint); border-radius:8px; display:grid; place-items:center; color:var(--faint); font-size:12px; background:var(--app-bg)}
.switch{width:52px; height:32px; border-radius:99px; background:#E1E3E6; border:2px solid var(--faint); position:relative; cursor:pointer; flex-shrink:0}
.switch.on{background:var(--blue-m3); border-color:var(--blue-m3)}
.switch::after{content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--faint); top:6px; left:6px; transition:.15s}
.switch.on::after{background:var(--white); width:24px; height:24px; top:2px; left:22px}
.save-bar{display:flex; justify-content:flex-end; gap:10px; padding:18px 0 6px; flex-wrap:wrap}
.folder-wrap{display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start; padding-top:10px}
.tree{padding:8px; font-size:14px}
.tree .ti{display:flex; align-items:center; gap:12px; min-height:40px; padding:0 14px; border-radius:99px; cursor:pointer; color:var(--dim); font-weight:500}
.tree .ti:hover{background:var(--hover)}
.tree .ti.on{background:var(--sel); color:var(--ink); font-weight:600}
.tree .l1{margin-left:24px}
.tabs{display:flex; gap:0; border-bottom:1px solid var(--line-soft); margin-top:6px; overflow-x:auto}
.tabs a{border:0; background:none; padding:14px 18px; font-size:14px; font-weight:600; color:var(--dim); border-bottom:3px solid transparent; margin-bottom:-1px; border-radius:8px 8px 0 0; text-decoration:none; white-space:nowrap}
.tabs a:hover{background:#F0F4F9; color:var(--ink)}
.tabs a.on{color:var(--blue-m3); border-color:var(--blue-m3)}
.form-note{font-size:12px; color:var(--faint); margin-top:7px}

/* Storage usage bar */
.usage-bar{height:10px; border-radius:99px; background:var(--hover); overflow:hidden; margin:12px 0}
.usage-bar i{display:block; height:100%; background:var(--blue-m3); border-radius:99px; min-width:4px}
.usage-bar i.warn{background:var(--yellow)}
.usage-bar i.full{background:var(--red)}
.type-mini{height:6px; border-radius:99px; background:var(--hover); overflow:hidden; margin-top:6px; width:120px}
.type-mini i{display:block; height:100%; background:var(--blue); border-radius:99px}

/* Storage page — usage ring, type breakdown, KPI tiles */
.stor-hero{display:flex; align-items:center; gap:28px; background:var(--white); border:1px solid var(--line-soft); border-radius:16px; padding:22px 26px; margin-bottom:14px}
.stor-ring{flex-shrink:0; width:132px; height:132px}
.stor-ring svg{width:132px; height:132px; display:block; font-family:inherit}
.ring-track{fill:none; stroke:var(--line-soft); stroke-width:11}
.ring-val{fill:none; stroke:var(--blue-m3); stroke-width:11; stroke-linecap:round; transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
.stor-hero.warn .ring-val{stroke:#F9AB00}
.stor-hero.full .ring-val{stroke:var(--red)}
.ring-pct{fill:var(--ink); font-size:23px; font-weight:600; text-anchor:middle}
.ring-sub{fill:var(--faint); font-size:11px; text-anchor:middle; text-transform:uppercase; letter-spacing:.5px}
.stor-hero-main{flex:1; min-width:0}
.stor-hero-head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.stor-hero-head b{font-size:28px; font-weight:600; letter-spacing:-.5px; color:var(--ink)}
.stor-hero-head span{color:var(--faint); font-size:14px}
.seg-bar{display:flex; height:14px; border-radius:99px; overflow:hidden; margin:16px 0 10px; background:var(--hover)}
.seg-bar .seg{height:100%; border-right:2px solid var(--white)}
.seg-bar .seg:last-child{border-right:0}
.seg-bar.empty .seg{border:0}
.seg-legend{display:flex; flex-wrap:wrap; gap:10px 16px; margin-bottom:12px}
.seg-key{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--dim)}
.seg-key i{width:10px; height:10px; border-radius:3px; display:inline-block; flex-shrink:0}
.stor-avail{display:flex; align-items:center; gap:8px; color:var(--faint); font-size:13px; margin:0}

.stor-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px}
.stor-stat{display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--line-soft); border-radius:12px; padding:16px 18px}
.stor-stat-ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:18px; flex-shrink:0}
.stor-stat-ico.i-blue{background:#E8F0FE; color:#1A73E8}
.stor-stat-ico.i-green{background:#E6F4EA; color:#188038}
.stor-stat-ico.i-grey{background:var(--hover); color:var(--faint)}
.stor-stat-ico.i-amber{background:#FEF7E0; color:#B06000}
.stor-stat b{font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.3px; display:block; line-height:1.2}
.stor-stat small{font-size:12.5px; color:var(--faint)}

.type-row{display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-soft); text-decoration:none; color:inherit}
.type-row:last-child{border-bottom:0}
.type-row:hover{background:var(--hover-row); margin:0 -20px; padding-left:20px; padding-right:20px; border-radius:8px; border-color:transparent}
.type-dot{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:15px; flex-shrink:0}
.type-main{flex:1; min-width:0}
.type-top{display:flex; align-items:baseline; gap:8px}
.type-top b{font-size:13.5px; font-weight:600; color:var(--ink); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.type-size{font-size:13px; color:var(--dim); font-weight:600; flex-shrink:0}
.type-bar{height:5px; border-radius:99px; background:var(--hover); overflow:hidden; margin:6px 0 4px}
.type-bar i{display:block; height:100%; border-radius:99px; min-width:3px}
.type-meta{color:var(--faint); font-size:12px}
@media(max-width:820px){
    .stor-hero{flex-direction:column; text-align:center; gap:18px}
    .stor-hero-main{width:100%}
    .stor-hero-head{justify-content:center}
    .seg-legend{justify-content:center}
    .stor-avail{justify-content:center}
    .stor-stats{grid-template-columns:1fr 1fr}
}

/* Settings — Test SMTP panel */
.test-panel{margin-top:22px}
.test-head{align-items:center; gap:12px; font-weight:400}
.test-ico{width:38px; height:38px; border-radius:10px; background:var(--hover); color:var(--dim); display:grid; place-items:center; font-size:15px; flex-shrink:0}
.test-head b{display:block; font-size:14px; font-weight:600; color:var(--ink)}
.test-head small{display:block; font-size:12.5px; color:var(--faint); margin-top:1px}
.test-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.test-field label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin:0 0 6px}
.test-field label .opt{font-weight:400; color:var(--faint); font-size:12px}
.test-field .input{max-width:none; width:100%}
.test-field textarea.input{min-height:92px; resize:vertical; font-family:inherit; line-height:1.5}
.test-hint{display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--faint); margin:12px 0 16px}
.test-hint i{margin-top:2px}
@media(max-width:600px){ .test-grid{grid-template-columns:1fr} }

/* Appearance — accent colour picker */
.accent-swatches{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px}
.accent-swatch{width:32px; height:32px; border-radius:50%; border:0; box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; transition:transform .1s, box-shadow .12s}
.accent-swatch:hover{transform:scale(1.09)}
.accent-swatch.on{box-shadow:0 0 0 2px var(--white), 0 0 0 4px var(--ink)}
.accent-custom{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.accent-custom input[type=color]{width:46px; height:42px; border:1px solid var(--line); border-radius:8px; background:var(--white); cursor:pointer; padding:3px}
.accent-custom .input{text-transform:uppercase}

/* File preview modal */
.preview-overlay{position:fixed; inset:0; background:rgba(31,31,31,.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:2500; padding:24px}
.preview-overlay.show{display:flex}
.preview-box{background:var(--white); border-radius:12px; width:min(920px,100%); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.35)}
.preview-head{display:flex; align-items:center; gap:10px; padding:8px 10px 8px 18px; border-bottom:1px solid var(--line-soft)}
.preview-title{font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.preview-actions{margin-left:auto; display:flex; gap:2px}
.preview-body{flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; background:var(--app-bg); min-height:220px}
.preview-body img{max-width:100%; max-height:82vh; object-fit:contain}
.preview-body iframe{width:100%; height:82vh; border:0; background:var(--white)}
.preview-body video{max-width:100%; max-height:82vh}
.preview-text{white-space:pre-wrap; word-break:break-word; padding:18px; font-family:ui-monospace,Consolas,monospace; font-size:13px; width:100%; align-self:flex-start; color:var(--ink); margin:0}
/* Rendered Word / Excel previews (client-side) */
.preview-body:has(.preview-doc),.preview-body:has(.preview-sheet){align-items:stretch; justify-content:flex-start; background:#fff}
.preview-doc{padding:36px 44px; max-width:820px; margin:0 auto; width:100%; color:#202124; font-size:15px; line-height:1.6}
.preview-doc img{max-width:100%; height:auto}
.preview-doc h1,.preview-doc h2,.preview-doc h3{margin:.7em 0 .3em; line-height:1.3}
.preview-doc p{margin:.5em 0}
.preview-doc table{border-collapse:collapse; margin:10px 0}
.preview-doc td,.preview-doc th{border:1px solid #dadce0; padding:6px 10px}
.preview-sheet{padding:16px; width:100%; overflow:auto; color:#202124}
.preview-sheet table{border-collapse:collapse; margin-bottom:18px; font-size:13px}
.preview-sheet td,.preview-sheet th{border:1px solid #dadce0; padding:5px 9px; white-space:nowrap}
.preview-sheet-tab{font-weight:600; color:var(--blue-m3); margin:16px 0 8px; font-size:13px}
.preview-sheet-tab.first{margin-top:0}
.preview-loading{padding:40px; color:var(--faint); font-size:15px; text-align:center; width:100%}
.preview-none{text-align:center; color:var(--faint); padding:44px}
.preview-none i{font-size:48px; margin-bottom:12px}
.preview-none p{margin-bottom:16px}
.preview-loading{color:var(--faint); padding:44px}
.js-preview{cursor:pointer}

/* Upload drop zone + progress */
.dropzone{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
    border:1.5px dashed color-mix(in srgb, var(--blue-m3) 26%, var(--line)); border-radius:16px;
    padding:26px 22px; text-align:center; color:var(--dim); cursor:pointer;
    background:linear-gradient(180deg, var(--white), var(--app-bg)); margin:6px 0 18px;
    transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dropzone:hover{border-color:var(--blue-m3); background:linear-gradient(180deg, #FFFFFF, #F0F7FF);
    box-shadow:0 6px 20px color-mix(in srgb, var(--blue-m3) 12%, transparent)}
.dropzone.drag{border-style:solid; border-color:var(--blue-m3);
    background:linear-gradient(180deg, #EAF2FE, #E1ECFD); box-shadow:0 6px 22px color-mix(in srgb, var(--blue-m3) 18%, transparent)}
.dropzone.drag .dz-ic{transform:translateY(-2px) scale(1.05)}
.dz-ic{width:52px; height:52px; flex-shrink:0; display:grid; place-items:center; border-radius:50%;
    background:color-mix(in srgb, var(--blue-m3) 12%, transparent); color:var(--blue-m3); font-size:22px;
    transition:background .18s ease, color .18s ease, transform .18s ease}
.dropzone:hover .dz-ic{background:var(--blue-m3); color:#fff; transform:translateY(-1px)}
.dz-main{font-size:14.5px; color:var(--ink); font-weight:500}
.dz-main strong{color:var(--blue-m3); font-weight:600}
.dz-sub{font-size:12.5px; color:var(--faint); line-height:1.4}
.dz-sub b{color:var(--dim); font-weight:600}

/* Drop-anywhere overlay */
.drop-overlay{position:fixed; inset:0; z-index:4000; display:none; align-items:center; justify-content:center; padding:24px; background:color-mix(in srgb, var(--blue-m3) 10%, transparent); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.drop-overlay.show{display:flex}
.drop-overlay-card{pointer-events:none; background:var(--white); border:2px dashed var(--blue-m3); border-radius:16px; padding:34px 48px; display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:0 10px 40px rgba(32,33,36,.25)}
.drop-overlay-card .fa-cloud-arrow-up{font-size:40px; color:var(--blue-m3); margin-bottom:6px}
.drop-overlay-card b{font-size:18px; color:var(--ink)}
.drop-overlay-card span{font-size:13px; color:var(--faint)}

/* Upload progress panel (bottom-right) */
/* Admin dashboard — storage overview (server disk + allocation + per-role) */
.stor-meters{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:700px){ .stor-meters{grid-template-columns:1fr; gap:16px} }
.stor-meter-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px}
.stor-meter-top b{font-size:14px}
.stor-meter-top span{font-size:13px; color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap}
.stor-track{height:10px; border-radius:99px; background:var(--hover); overflow:hidden}
.stor-track i{display:block; height:100%; border-radius:99px; background:var(--blue-m3); transition:width .35s ease}
.stor-track i.warn{background:#E8A000}
.stor-track i.crit{background:var(--red)}
.stor-track.sm{height:7px}
.stor-meter-sub{font-size:12px; color:var(--faint); margin-top:6px}
.stor-warn{margin-top:16px; background:#FEF7E0; border:1px solid #FDE293; color:#7a5900; border-radius:10px; padding:11px 14px; font-size:13px; display:flex; gap:9px; align-items:flex-start; line-height:1.5}
.stor-warn i{margin-top:2px; flex-shrink:0}
.stor-roles{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft)}
@media(max-width:700px){ .stor-roles{grid-template-columns:1fr} }
.stor-role-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px}
.stor-role-head b{font-size:13.5px}
.stor-role-head span{font-size:12px; color:var(--faint)}
.stor-role-sub{font-size:12px; color:var(--faint); margin-top:6px; font-variant-numeric:tabular-nums}

/* In-app navigation (PJAX) top progress bar */
.pjax-bar{position:fixed; top:0; left:0; height:3px; width:0; z-index:9000; background:linear-gradient(90deg,var(--blue-m3),#8a3ffb); box-shadow:0 0 8px rgba(11,87,208,.5); transition:width .3s ease, opacity .3s ease; pointer-events:none}

.up-panel{position:fixed; right:22px; bottom:22px; z-index:3500; width:360px; max-width:calc(100vw - 32px); background:var(--white); border:1px solid var(--line-soft); border-radius:12px; box-shadow:0 6px 24px rgba(32,33,36,.28); overflow:hidden}
.up-panel-head{display:flex; flex-direction:column; padding:12px 14px; background:var(--app-bg); border-bottom:1px solid var(--line-soft); cursor:pointer}
.up-head-row{display:flex; align-items:center; gap:8px}
.up-panel-title{flex:1; font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Overall batch progress (bar + %) in the panel header. */
.up-head-prog{display:flex; align-items:center; gap:8px; margin-top:8px}
.up-head-bar{flex:1; height:6px; border-radius:99px; background:var(--line-soft); overflow:hidden}
.up-head-bar i{display:block; height:100%; width:0; background:var(--blue-m3); border-radius:99px; transition:width .2s ease}
.up-head-bar.up-all-done i{background:var(--green)}
.up-head-bar.up-failed i{background:var(--red)}
.up-head-pct{font-size:12px; font-weight:700; color:var(--dim); min-width:36px; text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums}
.up-head-bar.up-all-done ~ .up-head-pct{color:var(--green)}
.up-head-bar.up-failed ~ .up-head-pct{color:var(--red)}
.up-panel-actions{display:flex; gap:2px; flex-shrink:0}
.up-panel-actions button{width:28px; height:28px; border:0; background:transparent; border-radius:50%; color:var(--faint); cursor:pointer; display:grid; place-items:center; font-size:13px}
.up-panel-actions button:hover{background:var(--hover); color:var(--ink)}
.up-panel.min .up-min{transform:rotate(180deg)}
.up-panel-body{max-height:min(50vh,340px); overflow-y:auto}
.up-panel.min .up-panel-body{display:none}
.up-row{display:flex; align-items:center; gap:11px; padding:10px 14px; border-bottom:1px solid var(--line-soft)}
.up-row:last-child{border-bottom:0}
.up-ico{width:24px; text-align:center; flex-shrink:0; color:var(--blue-m3); font-size:15px}
.up-row.done .up-ico{color:var(--green)}
.up-row.failed .up-ico{color:var(--red)}
.up-row-main{flex:1; min-width:0}
.up-name{font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Inline failure reason under a failed file's name (full text in its tooltip). */
.up-err{font-size:11px; color:var(--red); margin-top:2px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.up-mini{height:4px; border-radius:99px; background:var(--hover); overflow:hidden; margin-top:6px}
.up-mini i{display:block; height:100%; width:0; background:var(--blue-m3); border-radius:99px; transition:width .15s}
.up-row.done .up-mini i{background:var(--green)}
.up-row.failed .up-mini i{background:var(--red)}
.up-pct{font-size:11.5px; color:var(--faint); flex-shrink:0; min-width:34px; text-align:right}
.up-row.failed .up-pct{color:var(--red)}

/* Non-blocking download progress cards (bottom-right, stack clear of upload panel) */
.dl-dock{position:fixed; right:22px; bottom:22px; z-index:3400; display:flex; flex-direction:column-reverse; gap:10px; width:340px; max-width:calc(100vw - 32px)}
.dl-card{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--white); border:1px solid var(--line-soft); border-radius:12px; box-shadow:0 6px 24px rgba(32,33,36,.28); animation:dlIn .18s ease}
@keyframes dlIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.dl-spin{width:20px; height:20px; flex-shrink:0; border:2.5px solid var(--line); border-top-color:var(--blue-m3); border-radius:50%; animation:dlSpin .7s linear infinite}
@keyframes dlSpin{to{transform:rotate(360deg)}}
.dl-card.done .dl-spin,.dl-card.err .dl-spin{border:0; animation:none; display:grid; place-items:center; font-size:18px}
.dl-card.done .dl-spin{color:var(--green)}
.dl-card.err .dl-spin{color:var(--red)}
.dl-txt{flex:1; min-width:0}
.dl-title{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dl-card.err .dl-title{color:var(--red)}
.dl-sub{font-size:12px; color:var(--faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dl-x{width:28px; height:28px; flex-shrink:0; border:0; background:transparent; border-radius:50%; color:var(--faint); cursor:pointer; display:grid; place-items:center; font-size:13px}
.dl-x:hover{background:var(--hover); color:var(--ink)}

.rail{width:56px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; padding:8px 0; gap:12px; border-left:1px solid var(--line-soft); background:var(--app-bg)}
.rail .rail-ico{width:42px; height:42px; border-radius:5px; display:grid; place-items:center; font-size:16px; cursor:pointer; color:var(--dim)}
.rail .rail-ico:hover{background:var(--hover)}
.rail .rail-div{width:26px; height:1px; background:var(--line)}

/* Responsive */
@media(max-width:1180px){ .rail{display:none} .main{margin-right:10px} }
@media(max-width:1020px){
    .menu-btn{display:grid; place-items:center}
    .brand-link{width:auto} .brand-link span{display:none}
    .sidebar{position:fixed; top:0; left:0; bottom:0; z-index:50; background:var(--app-bg); width:280px; max-width:84vw; padding-top:8px; transform:translateX(-105%); transition:transform .22s ease; box-shadow:0 8px 24px rgba(31,31,31,.18)}
    .sidebar.open{transform:translateX(0)}
    .sidebar-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 2px 10px; margin-bottom:4px}
    .sidebar-brand{width:auto; display:flex; align-items:center}
    .sidebar-brand .brand-logo{max-width:150px}
    .sidebar-close{display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:transparent; color:var(--dim); font-size:20px; flex-shrink:0}
    .sidebar-close:hover{background:var(--hover)}
    .scrim{display:block; pointer-events:none} .scrim.show{pointer-events:auto}
    .panels{grid-template-columns:1fr} .folder-wrap{grid-template-columns:1fr}
    /* Touch devices have no hover — keep row action buttons visible so they're reachable */
    .table .row-actions{opacity:1}
}
@media(max-width:820px){
    .settings-wrap{grid-template-columns:1fr; gap:10px}
    /* Mobile/tablet: replace the section tabs with a compact dropdown */
    .settings-nav{display:block}
    .settings-nav a{display:none}
    .settings-nav-select{display:block}
    .form-row{grid-template-columns:1fr; gap:10px; padding:15px 0}
    .hide-md{display:none}
    /* Activity Logs filters: stack full-width so the Select2 dropdowns aren't squeezed/cut */
    #activityFilters{flex-direction:column; align-items:stretch; gap:8px}
    #activityFilters .select2-container{width:100% !important; flex:0 0 auto; min-width:0}
    #activityFilters .user-search{margin-left:0; width:100%}
    #activityFilters > .chip{align-self:flex-start}
}
@media(max-width:600px){
    .topbar{padding:8px 10px; gap:6px; position:relative}
    .brand-logo{max-width:132px}
    .hide-sm-i{display:none}
    /* Search collapses to an icon; tapping slides it open on its own full-width row below the logo.
       The row is always present but height:0 so open/close can animate (display can't transition). */
    .icon-btn.mobile-search-btn{display:grid; place-items:center}
    .topbar{flex-wrap:wrap; height:auto; min-height:var(--header-h); align-content:center}
    .searchbar{order:10; flex:1 1 100%; min-width:0; max-width:none;
        height:0; min-height:0; margin:0; opacity:0; overflow:hidden;
        background:var(--white); border:1px solid var(--line); border-width:0;
        transition:height .24s ease, opacity .2s ease, margin .24s ease, border-width .24s ease}
    .topbar.msearch-open .searchbar{height:42px; margin-top:6px; opacity:1; border-width:1px}
    .topbar.msearch-open .icon-btn.hide-sm-i{display:none}
    .topbar.msearch-open .ms-open-ico{display:none}
    .topbar.msearch-open .ms-close-ico{display:inline}
    /* Show the advanced-search (filters) button when the search row is open, and free its
       dropdown from the search bar's overflow:hidden by making it a fixed panel */
    .topbar.msearch-open #searchOptsBtn{display:grid}
    .search-opts{position:fixed; top:calc(var(--header-h) + 54px); left:8px; right:8px; width:auto; max-width:none}
    .topbar-right{gap:2px}
    /* Phones: collapse the file quick-actions into the ⋮ menu (all actions live there);
       folder ⋮ and user Edit/Delete stay visible */
    .row-actions .js-row-act,
    .row-actions a.dots[aria-label="Download"]{display:none}
    /* Notification + profile dropdowns: fixed, near full-width so they never spill off-screen */
    .notif-menu,.profile-menu{position:fixed; top:calc(var(--header-h) + 4px); left:8px; right:8px; width:auto; max-width:none}
    /* Filter dropdowns share the row two-up instead of stacking */
    .chips{gap:8px}
    .chips .select2-container{flex:1 1 0; width:auto !important; min-width:0}
    .main{margin-right:0; border-radius:12px 12px 0 0}
    .main-pad{padding:22px 14px 6px}
    .scroll{padding:6px 14px 28px}
    .page-title h1{font-size:20px}
    .card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
    .file-card .file-card-thumb{height:96px; font-size:32px}
    .hide-sm{display:none}
    /* Name column truncates (.fname-text), so the table fits the viewport — no forced min-width
       / horizontal scrollbar on phones & small tablets. */
    .table{min-width:0}
    .stat-grid{grid-template-columns:1fr 1fr; gap:10px}
    .stat{padding:14px 16px} .stat b{font-size:24px}
    .chart{gap:7px} .save-bar .btn{flex:1}
}
@media(max-width:400px){ .stat-grid{grid-template-columns:1fr} .view-toggle{display:none} }
/* Lock page scroll behind the off-canvas drawer */
body.nav-open{overflow:hidden}
@media(max-width:600px){
    .stor-stat{min-width:0}
    .stor-stat b{overflow-wrap:anywhere}
    .sel-bar{top:22px; left:14px; right:14px; padding:8px 12px; gap:8px}
    .sel-bar .sel-count{font-size:13px}
}
/* Phones: let tables reflow to the viewport instead of forcing horizontal scroll */
@media(max-width:480px){
    .table{min-width:0}
    .table th,.table td{white-space:normal; padding:10px 8px}
    .table .file-name{gap:9px}
    .stor-stats{grid-template-columns:1fr 1fr; gap:8px}
    .stor-stat{padding:12px 12px}
}
@media(display-mode:standalone){
    .topbar{padding-top:calc(8px + env(safe-area-inset-top))}
    body{padding-bottom:env(safe-area-inset-bottom)}
}