*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f4f7fb;color:#172033}a{color:inherit;text-decoration:none}.app{display:flex;min-height:100vh}.sidebar{width:248px;background:#0d1424;color:#cbd4e6;padding:24px 16px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.brand{display:flex;align-items:center;gap:11px;padding:0 10px 28px}.brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#6d5dfc,#35b8ff);color:#fff;font-weight:800}.brand b{display:block;color:#fff;font-size:16px}.brand small{display:block;color:#8290aa;font-size:11px;margin-top:2px}.sidebar nav{display:grid;gap:6px}.sidebar nav a,.logout-link{padding:12px 12px;border-radius:10px;color:#aebbd0;font-size:14px}.sidebar nav a:hover,.logout-link:hover{background:#172239;color:#fff}.sidebar-bottom{margin-top:auto}.mini-user{display:flex;align-items:center;gap:10px;border-top:1px solid #202c40;padding:18px 10px 12px}.mini-user b{font-size:13px;color:#fff}.mini-user small{display:block;text-transform:capitalize;color:#7787a2;font-size:11px}.avatar{width:32px;height:32px;border-radius:9px;background:#263450;display:grid;place-items:center;color:#fff;font-weight:700}.main{margin-left:248px;width:calc(100% - 248px);padding:28px 34px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.topbar h1{font-size:25px;margin:5px 0 0}.eyebrow{font-size:10px;letter-spacing:.14em;color:#74819a;font-weight:800}.user-pill{background:#fff;border:1px solid #e4e9f1;border-radius:999px;padding:10px 14px;font-size:13px}.hero{display:flex;justify-content:space-between;gap:25px;align-items:center;padding:28px;border-radius:18px;background:linear-gradient(120deg,#151f36,#263b63);color:#fff;margin-bottom:20px;box-shadow:0 12px 30px rgba(24,37,66,.12)}.hero h2{font-size:26px;max-width:680px;margin:7px 0}.hero p{color:#b9c6dc;margin:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.stat,.panel,.form-panel{background:#fff;border:1px solid #e6ebf2;border-radius:16px;box-shadow:0 5px 18px rgba(30,45,70,.04)}.stat{padding:20px}.stat span,.stat small{display:block;color:#758198;font-size:12px}.stat strong{font-size:30px;display:block;margin:8px 0}.panel{padding:20px;margin-bottom:20px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.panel-head h3,.form-section h3{margin:0 0 4px}.panel-head p{margin:0;color:#7a879d;font-size:13px}.panel-head>a{font-size:13px;font-weight:700}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:650px}th,td{text-align:left;padding:14px 10px;border-bottom:1px solid #edf0f5;font-size:13px}th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7d899d}.table-link{font-weight:700}.badge{display:inline-block;padding:6px 9px;border-radius:8px;font-size:10px;font-weight:800;text-transform:uppercase}.badge.server{background:#e9edff;color:#4d50b8}.badge.wordpress{background:#e8f8f0;color:#16805a}.badge.hosting{background:#fff1e7;color:#bd5d18}.toolbar{display:flex;justify-content:space-between;gap:15px;margin-bottom:14px}.search{display:flex;gap:8px;flex:1;max-width:620px}.search input{flex:1}.type-tabs{display:flex;gap:6px;margin-bottom:14px}.type-tabs a{padding:9px 12px;border-radius:9px;font-size:13px;color:#68758b}.type-tabs a.active{background:#17233a;color:#fff}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #dbe2ec;background:#fff;border-radius:9px;padding:10px 14px;font-weight:700;font-size:13px;cursor:pointer}.btn.primary{background:#4f46e5;color:#fff;border-color:#4f46e5}.btn.danger{color:#c43f4c;border-color:#f0c9cd}.btn.small{padding:7px 9px;font-size:11px}.btn.full{width:100%;padding:13px}.inline{display:flex;gap:5px}.flash{padding:12px 15px;border-radius:10px;margin-bottom:15px;font-size:13px}.flash.success{background:#eaf8f1;color:#18734e}.flash.error{background:#fff0f0;color:#a9333e}.form-panel{padding:26px}.form-head{margin-bottom:22px}.form-head h2{margin:6px 0}.form-head p{color:#7b879a}.field-grid{display:grid;gap:15px}.field-grid.two{grid-template-columns:repeat(2,1fr)}.field-grid.three{grid-template-columns:repeat(3,1fr);align-items:end}label{font-size:12px;font-weight:700;color:#546178}input,select,textarea{display:block;width:100%;margin-top:7px;border:1px solid #dbe2eb;border-radius:9px;padding:11px 12px;background:#fbfcfe;color:#172033;font:inherit;font-size:13px;outline:none}input:focus,select:focus,textarea:focus{border-color:#7a73f6;box-shadow:0 0 0 3px rgba(99,91,238,.08)}.wide{grid-column:1/-1}.form-section{padding:20px 0;border-top:1px solid #edf0f5;margin-top:22px}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:25px}.check{display:flex;align-items:center;gap:7px}.check input{width:auto;margin:0}.detail-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:20px}.detail-head h2{margin:10px 0 5px}.detail-head p{color:#7b879a;font-size:13px}.actions{display:flex;gap:8px;align-items:center}.actions form{margin:0}.detail-grid{max-width:1000px}.cred-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.cred{padding:14px;background:#f8fafd;border:1px solid #edf0f4;border-radius:10px}.cred>span,.text-field>span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#7b879a;font-weight:800;margin-bottom:7px}.cred b,.cred code{font-size:13px;word-break:break-word}.secret{display:flex;align-items:center;gap:7px}.secret code{flex:1}.secret button{border:0;background:none;font-weight:700;font-size:11px;cursor:pointer}.plain{color:#19243a}.text-field{margin-top:15px}.text-field pre{background:#f8fafd;padding:13px;border-radius:9px;white-space:pre-wrap}.empty{text-align:center;color:#8a95a8;padding:35px}.status{font-size:11px;font-weight:700}.login-bg{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top right,#dfe7ff,#f5f7fb 45%,#eef2f8)}.login-wrap{width:min(440px,92vw)}.login-card{background:#fff;border:1px solid #e1e7ef;border-radius:20px;padding:32px;box-shadow:0 20px 60px rgba(33,49,80,.12)}.centered{justify-content:center;padding-bottom:22px}.login-card h1{text-align:center;margin:8px 0}.sub,.hint{text-align:center;color:#7a879a;font-size:13px;line-height:1.5}.login-card label{display:block;margin-top:15px}.login-card .btn{margin-top:20px}@media(max-width:900px){.sidebar{width:76px;padding:18px 8px}.sidebar .brand div,.sidebar nav a{font-size:0}.sidebar nav a:before{content:"•";font-size:20px}.mini-user div:not(.avatar),.logout-link{display:none}.main{margin-left:76px;width:calc(100% - 76px);padding:20px}.stats{grid-template-columns:repeat(2,1fr)}.field-grid.three{grid-template-columns:1fr}.field-grid.two,.cred-grid{grid-template-columns:1fr}}@media(max-width:560px){.topbar,.toolbar,.detail-head{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:1fr}.main{padding:14px}.hero{align-items:flex-start;flex-direction:column}.form-panel{padding:18px}}

/* Staff management visual refresh */
.sidebar nav a{display:flex;align-items:center;gap:13px}.sidebar nav a i{width:19px;text-align:center;font-size:15px}.sidebar nav a.active{background:linear-gradient(110deg,#5548f4,#4b3be0);color:#fff;box-shadow:0 8px 20px #3328b533}
.staff-intro{display:flex;align-items:center;justify-content:space-between;margin:0 0 22px}.staff-intro h2{font-size:23px;margin:5px 0}.staff-intro p{color:#7c89a1;margin:0;font-size:13px}.staff-intro .btn{gap:9px}
.staff-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.staff-stat{background:#fff;border:1px solid #e5eaf2;border-radius:15px;padding:19px;display:flex;align-items:center;gap:15px;box-shadow:0 5px 18px #23385c08}.stat-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:21px}.stat-icon.purple{background:#efedff;color:#5949ef}.stat-icon.green{background:#e4f8f0;color:#16a576}.stat-icon.amber{background:#fff3df;color:#e59a18}.staff-stat span,.staff-stat small{display:block;color:#8290a7;font-size:11px}.staff-stat strong{display:block;font-size:27px;line-height:1.2;margin:4px 0;color:#17233d}.staff-stat small{font-size:10px}
.staff-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}.staff-team{min-width:0;padding:21px}.staff-panel-head{margin-bottom:18px}.staff-panel-head h3{font-size:18px;display:flex;gap:10px;align-items:center}.staff-panel-head h3 i{color:#6255ed}.staff-tools{display:flex;gap:9px;margin-bottom:16px}.staff-search{position:relative;flex:1;min-width:130px}.staff-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#8b98ae;font-size:13px}.staff-search input{padding-left:36px;margin:0;height:41px;background:#fbfcff}.staff-tools select{width:auto;min-width:105px;margin:0;height:41px;background:#fbfcff;padding:8px 10px}.staff-table{min-width:780px}.staff-table th{background:#f7f9fc;font-size:10px;white-space:nowrap}.staff-table th:first-child{border-radius:8px 0 0 8px}.staff-table th:last-child{border-radius:0 8px 8px 0}.staff-table td{padding:15px 9px}.row-number{color:#8b98ad}.member-cell{display:flex;align-items:center;gap:10px;white-space:nowrap}.member-cell b{font-size:12px}.member-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#e8e7ff;color:#5144dc;font-weight:800;font-size:12px}.member-avatar.admin-avatar{background:#fff0d9;color:#c17b09}.email-cell{white-space:nowrap;color:#63718b}.role-chip,.permission-chip,.status-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:7px;font-size:10px;font-weight:700;white-space:nowrap}.role-chip.administrator{background:#fff5e6;color:#b87910}.role-chip.staff-role{background:#eaf2ff;color:#2765c9}.permission-chip.manage{background:#edf0ff;color:#4c51d4}.permission-chip.view{background:#f0f2f5;color:#68758a}.status-chip{background:#e8f8f1;color:#14875e}.status-chip.disabled{background:#fff0f0;color:#bd4b54}.status-chip span{width:6px;height:6px;background:currentColor;border-radius:50%}.staff-actions{display:flex;align-items:center;gap:7px}.staff-actions form{margin:0}.icon-action{width:34px;height:34px;border:1px solid #dce4ef;border-radius:9px;background:#fff;color:#6d7a92;display:grid;place-items:center;cursor:pointer}.icon-action.delete{color:#e34d5b;border-color:#f3d4d8;background:#fffafa}.icon-action:disabled{opacity:.35;cursor:not-allowed}.toggle-switch{width:34px;height:19px;border:0;border-radius:999px;background:#cbd3e1;padding:2px;cursor:pointer}.toggle-switch span{display:block;width:15px;height:15px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002;transition:transform .18s}.toggle-switch.on{background:#6254ef}.toggle-switch.on span{transform:translateX(15px)}.toggle-switch:disabled{opacity:.35;cursor:not-allowed}.table-footer{display:flex;justify-content:space-between;align-items:center;padding:16px 2px 0;color:#71809a;font-size:11px}.table-footer-note{display:flex;gap:7px;align-items:center}.table-footer-note i{color:#18a477}.no-results{text-align:center;padding:35px 10px;color:#8190a8}.no-results i{display:block;font-size:25px;margin-bottom:10px}.no-results b,.no-results span{display:block}.no-results span{font-size:12px;margin-top:5px}
.staff-form-panel{padding:23px;position:relative}.form-panel-title{position:relative;margin-bottom:21px}.form-icon{width:43px;height:43px;border-radius:13px;background:#efedff;color:#5949ec;display:grid;place-items:center;font-size:18px;margin-bottom:13px}.form-panel-title h3{font-size:18px;margin:0 0 5px}.form-panel-title p{font-size:12px;color:#8190a7;margin:0}.close-form{position:absolute;right:0;top:0;border:0;background:#f3f5f9;border-radius:8px;width:31px;height:31px;color:#7c899e;cursor:pointer}.staff-form-panel form>label{display:block;margin:14px 0}.staff-form-panel form>label>span{display:block;margin-bottom:7px;color:#4b5870;font-size:11px}.input-icon{position:relative}.input-icon>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8794aa;font-size:13px;pointer-events:none}.input-icon input,.input-icon select{margin:0;height:42px;padding-left:36px;background:#fbfcff}.input-icon select{appearance:auto}.password-toggle{position:absolute;right:9px;top:50%;transform:translateY(-50%);border:0;background:none;color:#75839c;cursor:pointer}.permission-box{display:flex;gap:11px;background:#f7f8ff;border:1px solid #e8e8ff;border-radius:11px;padding:13px;margin:18px 0}.permission-box-icon{width:30px;height:30px;border-radius:9px;background:#e9e7ff;color:#5c50e8;display:grid;place-items:center;flex-shrink:0}.permission-box b{font-size:12px}.permission-box p{font-size:10px;color:#7b88a0;margin:4px 0 10px;line-height:1.45}.permission-check{display:flex;align-items:center;gap:8px;font-size:11px!important;color:#4c5870!important;cursor:pointer}.permission-check input{position:absolute;opacity:0;width:1px;height:1px}.custom-check{width:17px;height:17px;border:1px solid #b9c4d5;background:white;border-radius:5px;display:grid;place-items:center;color:white;font-size:9px}.permission-check input:checked+.custom-check{background:#5949ed;border-color:#5949ed}.permission-box small{display:block;font-size:9px;color:#8a96aa;margin-top:7px}.create-staff-btn{gap:9px;margin-top:3px}.secure-note{display:flex;gap:8px;align-items:flex-start;background:#f5fbf8;color:#5d8a78;padding:11px;border-radius:9px;font-size:10px;line-height:1.4;margin-top:16px}.secure-note i{color:#1aa578}.form-collapsed{display:none}
@media(max-width:1250px){.staff-layout{grid-template-columns:minmax(0,1fr) 310px}.staff-team{padding:16px}.staff-tools{flex-wrap:wrap}.staff-search{flex-basis:100%}}
@media(max-width:900px){.staff-layout{grid-template-columns:1fr}.staff-form-panel{order:-1}.staff-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.staff-intro{align-items:flex-start;gap:12px;flex-direction:column}.staff-stats{grid-template-columns:1fr}.staff-tools select{flex:1}.table-footer{gap:10px;align-items:flex-start;flex-direction:column}}

/* Bootstrap-assisted responsive shell */
.mobile-nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #e1e7f0;border-radius:10px;background:#fff;color:#25334d;cursor:pointer}
@media(max-width:900px){
 .sidebar{z-index:1050;transform:translateX(-100%);width:255px;transition:transform .22s ease;box-shadow:12px 0 35px #0d142433}
 body.nav-open .sidebar{transform:translateX(0)}
 .sidebar .brand div{display:block}
 .sidebar nav a{font-size:14px}
 .sidebar nav a:before{content:none}
 .mini-user div:not(.avatar),.logout-link{display:block}
 .main{margin-left:0;width:100%;padding:20px}
 .mobile-nav-toggle{display:inline-flex}
 .topbar{gap:12px}
 .topbar-left{display:flex;align-items:center;gap:12px}
 .mobile-nav-backdrop{display:none;position:fixed;inset:0;background:#0b1225a8;z-index:1040}
 body.nav-open .mobile-nav-backdrop{display:block}
}

/* Client-inspired admin portal theme: clean slate surfaces, red accent, icon navigation */
:root{--vd-red:#e91d25;--vd-red-dark:#cf171e;--vd-ink:#111a30;--vd-muted:#71809a;--vd-line:#e3e9f1;--vd-bg:#f4f7fb}
body{background:var(--vd-bg);color:var(--vd-ink)}
.sidebar{background:#10172b;border-right:1px solid #202a40;padding:24px 17px}
.brand{padding:0 10px 27px;border-bottom:1px solid #273149;margin-bottom:22px}
.brand-mark{border-radius:11px;background:#fff;color:var(--vd-red);box-shadow:0 5px 14px #0002}
.sidebar nav{gap:7px}
.sidebar nav a{padding:13px 14px;border-radius:11px;color:#b7c3d8;transition:background .18s,color .18s,transform .18s}
.sidebar nav a i{font-size:16px;width:20px}
.sidebar nav a:hover{background:#1c2740;color:white;transform:translateX(2px)}
.sidebar nav a.active{background:var(--vd-red);color:white;box-shadow:0 8px 22px #e91d252b}
.sidebar-bottom{border-top:1px solid #273149;padding-top:8px}
.main{padding:25px 32px}
.topbar{background:#fff;margin:-25px -32px 28px;padding:18px 32px;border-bottom:1px solid var(--vd-line);min-height:80px}
.topbar h1{font-size:21px;font-weight:750}
.user-pill{border-radius:12px;display:flex;align-items:center;gap:9px}
.btn.primary,.button.primary,.create-staff-btn{background:var(--vd-red)!important;border-color:var(--vd-red)!important;color:#fff!important;box-shadow:0 7px 17px #e91d2524}
.btn.primary:hover,.create-staff-btn:hover{background:var(--vd-red-dark)!important}
.panel,.stat,.form-panel,.staff-stat{border-radius:17px;border-color:var(--vd-line);box-shadow:0 9px 28px #1a2b4608}
.hero{background:#fff;color:var(--vd-ink);border:1px solid var(--vd-line);box-shadow:0 9px 28px #1a2b4608}
.hero p{color:var(--vd-muted)}.hero .eyebrow{color:var(--vd-red)}
.stats .stat:hover{border-color:#f2b6b9;transform:translateY(-2px);transition:.18s}
.table-link,.panel-head>a{color:var(--vd-red)}
.type-tabs a.active{background:var(--vd-red);color:white}
input:focus,select:focus,textarea:focus{border-color:#ed777c!important;box-shadow:0 0 0 .2rem #e91d2518!important}
.staff-intro .btn{background:var(--vd-red);border-color:var(--vd-red)}
@media(max-width:900px){.main{padding:18px}.topbar{margin:-18px -18px 22px;padding:16px 18px}.sidebar{padding-top:22px}}

/* N4U refined staff page */
.vd-page-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:4px 0 25px}.vd-kicker{font-size:10px;letter-spacing:1.7px;font-weight:800;color:#7c8aa3}.vd-page-head h2{font-size:27px;letter-spacing:-.7px;font-weight:750;margin:8px 0 5px;color:#15213a}.vd-page-head p{margin:0;color:#77859d;font-size:13px}.vd-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 17px;border-radius:10px;font-size:13px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:all .18s;text-decoration:none}.vd-btn-primary{background:#e91d25;color:white;border-color:#e91d25;box-shadow:0 8px 20px #e91d2526}.vd-btn-primary:hover{background:#ca151d;color:#fff;transform:translateY(-1px)}.vd-btn-quiet{background:#fff;border-color:#dfe5ee;color:#5c6980}
.vd-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-bottom:22px}.vd-metric{display:flex;align-items:center;gap:15px;padding:20px;background:#fff;border:1px solid #e5eaf2;border-radius:16px;box-shadow:0 7px 24px #17274407}.vd-metric-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;font-size:20px;flex-shrink:0}.vd-metric-icon.violet{background:#efedff;color:#6556ed}.vd-metric-icon.mint{background:#e5f8f0;color:#18a276}.vd-metric-icon.peach{background:#fff1df;color:#d58a18}.vd-metric span,.vd-metric small{display:block;color:#8190a7;font-size:11px}.vd-metric strong{display:block;color:#15213a;font-size:28px;line-height:1.2;margin:4px 0}.vd-metric small{font-size:10px}
.vd-panel{background:#fff;border:1px solid #e4eaf2;border-radius:17px;box-shadow:0 8px 26px #17274408;overflow:hidden}.vd-panel-head{display:flex;align-items:center;gap:13px;padding:22px 23px;border-bottom:1px solid #edf0f5}.vd-panel-title-icon{width:43px;height:43px;border-radius:13px;background:#f0efff;color:#6153e9;display:grid;place-items:center;font-size:18px}.vd-panel-head h3{font-size:17px;font-weight:750;color:#19253c;margin:0 0 4px}.vd-panel-head p{font-size:12px;color:#8491a6;margin:0}.vd-count-pill{margin-left:auto;padding:7px 11px;border-radius:8px;background:#f4f6fa;color:#74819a;font-size:11px;font-weight:700}
.vd-toolbar{display:flex;align-items:center;gap:10px;padding:17px 22px}.vd-search{position:relative;flex:1;min-width:160px}.vd-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#93a0b3;font-size:13px}.vd-search input,.vd-toolbar select{height:42px;border:1px solid #e0e6ef;border-radius:10px;background:#fbfcfe;color:#37445d;font-size:12px;outline:none}.vd-search input{width:100%;padding:0 13px 0 39px}.vd-toolbar select{padding:0 32px 0 12px;min-width:135px}.vd-search input:focus,.vd-toolbar select:focus{border-color:#9d96f8;box-shadow:0 0 0 3px #6556ed14}
.vd-table-scroll{width:100%;overflow-x:auto}.vd-table{width:100%;border-collapse:separate;border-spacing:0;min-width:800px}.vd-table th{padding:13px 17px;background:#f8f9fc;border-top:1px solid #edf0f5;border-bottom:1px solid #e9edf4;color:#8793a8;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}.vd-table td{padding:15px 17px;border-bottom:1px solid #edf0f5;font-size:12px;color:#34415a;vertical-align:middle}.vd-table tbody tr{transition:background .15s}.vd-table tbody tr:hover{background:#fbfcff}.vd-table tbody tr:last-child td{border-bottom:0}.vd-member{display:flex;align-items:center;gap:11px;min-width:155px}.vd-member>span:last-child{display:flex;flex-direction:column;gap:3px}.vd-member b{font-size:12px;color:#202c43}.vd-member small{font-size:10px;color:#8995a9}.vd-avatar{width:37px;height:37px;border-radius:12px;background:#eeedff;color:#5d50dc;display:grid;place-items:center;font-weight:800;font-size:12px;flex-shrink:0}.vd-avatar.is-admin{background:#fff0dc;color:#bd7a13}.vd-email{color:#66758e!important;white-space:nowrap}.vd-tag{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:7px;font-size:10px;font-weight:750;white-space:nowrap}.tag-admin{background:#fff4e4;color:#b87a17}.tag-staff{background:#edf3ff;color:#3d69c5}.tag-manage{background:#eeedff;color:#5a50d2}.tag-view{background:#f0f3f7;color:#69768b}.vd-status{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;white-space:nowrap}.vd-status i{width:7px;height:7px;border-radius:50%;background:currentColor}.vd-status.is-active{color:#15956a}.vd-status.is-disabled{color:#bd6570}.vd-actions-head{text-align:right}.vd-row-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}.vd-row-actions form{margin:0}.vd-icon-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid #e1e6ef;border-radius:9px;background:#fff;color:#71809a;cursor:pointer;transition:.15s}.vd-icon-btn:hover{background:#f2f1ff;border-color:#c8c3ff;color:#5c50e8}.vd-icon-btn.danger{color:#d95662;border-color:#f2dadd}.vd-icon-btn.danger:hover{background:#fff1f2;border-color:#efb8be}.vd-icon-btn:disabled,.vd-switch:disabled{opacity:.35;cursor:not-allowed}.vd-switch{width:37px;height:21px;border:0;border-radius:99px;background:#cbd3df;padding:3px;cursor:pointer}.vd-switch span{display:block;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.vd-switch.on{background:#6758ee}.vd-switch.on span{transform:translateX(16px)}.vd-table-foot{display:flex;justify-content:space-between;gap:12px;padding:15px 22px;border-top:1px solid #edf0f5;color:#7b899f;font-size:11px}.vd-table-foot span:last-child{display:flex;align-items:center;gap:7px}.vd-table-foot i{color:#19a276}.vd-empty{text-align:center;padding:42px 10px;color:#8491a6}.vd-empty[hidden]{display:none!important}.vd-empty i{font-size:25px;display:block;margin-bottom:10px}.vd-empty b,.vd-empty span{display:block}.vd-empty span{font-size:12px;margin-top:5px}
.vd-modal-backdrop{display:none;position:fixed;inset:0;z-index:2000;background:#10182bc2;align-items:center;justify-content:center;padding:20px;overflow-y:auto}.vd-modal-backdrop.is-open{display:flex}.vd-modal{width:min(100%,610px);background:#fff;border-radius:20px;box-shadow:0 25px 90px #0b142a55;padding:27px;animation:vdModalIn .18s ease}.vd-modal-open{overflow:hidden}@keyframes vdModalIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}.vd-modal-head{display:flex;align-items:center;gap:13px;margin-bottom:23px}.vd-modal-icon{width:47px;height:47px;border-radius:14px;background:#eeedff;color:#5d50e8;display:grid;place-items:center;font-size:19px}.vd-modal-head h3{font-size:19px;font-weight:750;color:#1c2840;margin:0 0 4px}.vd-modal-head p{font-size:12px;color:#8290a6;margin:0}.vd-modal-close{margin-left:auto;align-self:flex-start;border:0;border-radius:9px;width:34px;height:34px;background:#f3f5f9;color:#75829a;cursor:pointer}.vd-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.vd-field{display:block;min-width:0}.vd-field>span{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;color:#4c5971;font-size:11px;font-weight:750}.vd-field>span small{font-size:9px;color:#929eb0;font-weight:500}.vd-field>div{position:relative}.vd-field>div>i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#8996aa;font-size:13px;pointer-events:none}.vd-field input,.vd-field select{display:block;width:100%;height:44px;border:1px solid #dfe5ee;border-radius:10px;background:#fbfcfe;padding:0 13px 0 38px;color:#29364e;font-size:12px;outline:none}.vd-field input:focus,.vd-field select:focus{border-color:#9e97f8;box-shadow:0 0 0 3px #6556ed14}.vd-field input[readonly]{color:#8a96a9;background:#f4f6f9}.vd-password-field>div>input{padding-right:43px}.vd-password-field>div>button{position:absolute;right:7px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#8290a6;padding:7px;cursor:pointer}.vd-permission-card{display:flex;gap:13px;padding:16px;margin:21px 0;background:#f8f8ff;border:1px solid #e9e8ff;border-radius:13px}.vd-permission-icon{width:35px;height:35px;flex-shrink:0;border-radius:10px;background:#e9e7ff;color:#5c50e8;display:grid;place-items:center}.vd-permission-copy>b{font-size:12px;color:#26324a}.vd-permission-copy>p{font-size:11px;line-height:1.5;color:#7d8aa1;margin:5px 0 12px}.vd-check{display:flex;align-items:center;gap:9px;color:#4b5870;font-size:11px;font-weight:700;cursor:pointer}.vd-check input{position:absolute;opacity:0;width:1px;height:1px}.vd-check>span{width:18px;height:18px;border:1px solid #c5cddd;background:white;border-radius:5px;display:grid;place-items:center;color:white;font-size:10px}.vd-check input:checked+span{background:#6253eb;border-color:#6253eb}.vd-permission-copy>small{display:block;color:#8b97aa;font-size:10px;margin-top:7px}.vd-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:21px}.vd-secure-note{display:flex;align-items:flex-start;gap:8px;border-top:1px solid #edf0f5;padding-top:15px;margin-top:18px;color:#6f9a89;font-size:10px;line-height:1.5}.vd-secure-note i{color:#1aa578}
@media(max-width:1100px){.vd-metrics{gap:12px}.vd-metric{padding:16px}.vd-page-head h2{font-size:24px}}
@media(max-width:760px){.vd-page-head{align-items:flex-start;flex-direction:column}.vd-page-head .vd-btn{width:100%}.vd-metrics{grid-template-columns:1fr}.vd-metric{padding:16px}.vd-toolbar{flex-wrap:wrap;padding:14px}.vd-search{flex-basis:100%}.vd-toolbar select{flex:1;min-width:0}.vd-panel-head{padding:17px}.vd-table-foot{flex-direction:column;padding:14px}.vd-form-grid{grid-template-columns:1fr}.vd-modal{padding:21px}.vd-modal-backdrop{align-items:flex-start}.vd-modal-actions .vd-btn{flex:1}}

/* N4U Client Files submenu */
.sidebar .nav-parent{display:grid;gap:4px}
.sidebar .nav-submenu{display:grid;gap:3px;padding:0 0 8px 27px}
.sidebar .nav-submenu a{display:block;padding:7px 10px;border-radius:8px;color:#9eacc2;font-size:12px}
.sidebar .nav-submenu a:hover{background:#172239;color:#fff}

/* =========================================
   N4U SIDEBAR — CLIENT FILES SUBMENU
========================================= */

.nav-parent {
    position: relative;
    display: block;
    width: 100%;
}

/* Parent menu link */
.nav-parent > a {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}

/* Hide submenu by default */
.nav-parent > .nav-submenu {
    display: none;
    position: static;
    width: 100%;
    box-sizing: border-box;

    flex-direction: column;
    align-items: stretch;
    gap: 4px;

    margin: 0;
    padding: 8px 12px 12px 45px;

    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Show submenu on hover and keyboard focus */
.nav-parent:hover > .nav-submenu,
.nav-parent:focus-within > .nav-submenu {
    display: flex;
}

/* Submenu links */
.nav-parent > .nav-submenu > a {
    display: block;
    width: 100%;
    box-sizing: border-box;

    padding: 10px 12px;
    margin: 0;

    color: #aebbd0;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    white-space: normal;

    border-radius: 6px;
    background: transparent;
}

/* Submenu hover */
.nav-parent > .nav-submenu > a:hover,
.nav-parent > .nav-submenu > a:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
}

/* Highlight parent while submenu is open */
.nav-parent:hover > a,
.nav-parent:focus-within > a {
    color: #ffffff;
}

/* Prevent submenu from extending into the content area */
.sidebar .nav-parent {
    overflow: visible;
}

/* Responsive sidebar */
@media (max-width: 768px) {
    .nav-parent > .nav-submenu {
        padding-left: 28px;
    }

    .nav-parent > .nav-submenu > a {
        font-size: 13px;
    }
}

/* N4U CRM pagination */

.crm-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 24px;
    margin-top: 0;
    border-top: 1px solid #e5eaf1;
    background: #fff;
}

.crm-pagination-info {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.crm-pagination-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.crm-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 8px 12px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

a.crm-page-btn:hover {
    border-color: #e91d2b;
    background: #fff5f5;
    color: #e91d2b;
}

.crm-page-btn.active {
    border-color: #e91d2b;
    background: #e91d2b;
    color: #fff;
}

.crm-page-btn.disabled {
    color: #94a3b8;
    background: #f8fafc;
    cursor: not-allowed;
}

.crm-page-dots {
    padding: 0 4px;
    color: #64748b;
}

@media (max-width: 700px) {
    .crm-pagination {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }
}

/* ==========================================
   N4U CRM — Modern Colored Pagination
========================================== */

.crm-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;

    width: 100%;
    box-sizing: border-box;

    margin-top: 0;
    padding: 22px 26px;

    background: #ffffff;
    border-top: 1px solid #e5eaf1;
    border-radius: 0 0 16px 16px;
}

.crm-pagination-info {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.crm-pagination-info strong {
    color: #172033;
    font-weight: 700;
}

.crm-pagination-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

/* All pagination buttons */
.crm-pagination .crm-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    min-height: 42px;
    padding: 0 15px;

    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #ffffff;
    color: #334155;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover */
.crm-pagination a.crm-page-btn:hover {
    color: #e91d2b;
    background: #fff1f2;
    border-color: #e91d2b;
    transform: translateY(-1px);
}

/* Current page */
.crm-pagination .crm-page-btn.active {
    color: #ffffff;
    background: #e91d2b;
    border-color: #e91d2b;
    box-shadow: 0 4px 10px rgba(233, 29, 43, 0.20);
    cursor: default;
}

/* Disabled Previous / Next */
.crm-pagination .crm-page-btn.disabled {
    color: #a0aabc;
    background: #f8fafc;
    border-color: #e8edf3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Ellipsis */
.crm-pagination .crm-page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    color: #94a3b8;
    font-size: 15px;
}

/* Mobile layout */
@media (max-width: 700px) {
    .crm-pagination {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
    }

    .crm-pagination-buttons {
        justify-content: flex-start;
        gap: 6px;
    }

    .crm-pagination .crm-page-btn {
        min-width: 38px;
        min-height: 38px;
        padding: 0 11px;
        font-size: 13px;
    }
}

/* Activity Logs - Delete Button */

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 14px;

    border: 1px solid #dc2626;
    border-radius: 8px;

    background: #dc2626;
    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.2);
}
/* Topbar layout */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

/* Right side actions */
.topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-left: auto;
}

/* User information pill */
.topbar .user-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.topbar .user-pill > i {
    color: #64748b;
    font-size: 19px;
}

.topbar .user-role {
    padding: 4px 9px;
    border-radius: 6px;
    background: #eef2ff;
    color: #5145cd;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
}

/* Logout button */
.topbar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 17px;
    border: 1px solid #fecaca;
    border-radius: 11px;
    background: #fff;
    color: #dc2626;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s ease;
}

.topbar-logout i {
    font-size: 15px;
}

.topbar-logout:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    box-shadow: 0 5px 15px rgba(220, 38, 38, .15);
    transform: translateY(-1px);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .topbar {
        gap: 10px;
    }

    .topbar-right {
        gap: 8px;
    }

    .topbar .user-pill {
        gap: 6px;
        padding: 8px;
        font-size: 11px;
    }

    .topbar .user-role {
        display: none;
    }

    .topbar-logout {
        min-height: 38px;
        padding: 0 10px;
        gap: 6px;
        font-size: 12px;
    }
}

.hero {
    background: #14213a !important;
    color: white !important;
    padding: 40px !important;
    border-radius: 20px !important;
}

/* ===================================
   ACCESS DASHBOARD STAT CARDS
=================================== */

.stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin: 25px 0 30px !important;
}

.stats .stat {
    --accent: #60a5fa;
    --accent-bg: rgba(59, 130, 246, .13);

    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    min-width: 0 !important;
    min-height: 190px !important;
    padding: 25px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    background: linear-gradient(
        145deg,
        #192942 0%,
        #111c30 100%
    ) !important;

    border: 1px solid #293b55 !important;
    border-radius: 18px !important;

    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;

    transition: transform .25s ease,
                border-color .25s ease,
                box-shadow .25s ease !important;
}

/* Top accent line */
.stats .stat::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 3px !important;

    background: var(--accent) !important;
}

/* Icon container */
.stats .stat::after {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 54px !important;
    height: 54px !important;

    background-color: var(--accent-bg) !important;
    border: 1px solid var(--accent-border, #344b68) !important;
    border-radius: 15px !important;

    color: var(--accent) !important;
    font-family: Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 500 !important;

    pointer-events: none !important;
}

/* Total access icon */
.stats .stat:nth-child(1)::after {
    content: "▤" !important;
}

/* Server icon */
.stats .stat:nth-child(2)::after {
    content: "▣" !important;
}

/* WordPress icon */
.stats .stat:nth-child(3)::after {
    content: "W" !important;
    font-family: Georgia, serif !important;
    font-weight: bold !important;
    border-radius: 50% !important;
}

/* Hosting icon */
.stats .stat:nth-child(4)::after {
    content: "☁" !important;
    font-size: 32px !important;
}

/* Individual card colors */
.stats .stat:nth-child(1) {
    --accent: #60a5fa;
    --accent-bg: rgba(59, 130, 246, .13);
    --accent-border: rgba(96, 165, 250, .22);
}

.stats .stat:nth-child(2) {
    --accent: #34d399;
    --accent-bg: rgba(16, 185, 129, .12);
    --accent-border: rgba(52, 211, 153, .22);
}

.stats .stat:nth-child(3) {
    --accent: #a78bfa;
    --accent-bg: rgba(139, 92, 246, .13);
    --accent-border: rgba(167, 139, 250, .22);
}

.stats .stat:nth-child(4) {
    --accent: #fb923c;
    --accent-bg: rgba(249, 115, 22, .12);
    --accent-border: rgba(251, 146, 60, .22);
}

/* Card labels */
.stats .stat span {
    display: block !important;
    margin: 5px 65px 20px 0 !important;

    color: #aebed2 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}

/* Main number */
.stats .stat strong {
    display: block !important;
    margin: 0 0 10px !important;

    color: #f8fafc !important;
    font-size: 40px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: -1.5px !important;
}

/* Supporting text */
.stats .stat small {
    display: block !important;

    color: #8295af !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

/* Hover */
.stats .stat:hover {
    transform: translateY(-5px) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .25) !important;
}

/* Keyboard accessibility */
.stats .stat:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 4px !important;
}

/* Tablet */
@media (max-width: 1000px) {
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 560px) {
    .stats {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .stats .stat {
        min-height: 165px !important;
        padding: 23px !important;
    }

    .stats .stat::after {
        top: 22px !important;
        right: 22px !important;
    }

    .stats .stat strong {
        font-size: 36px !important;
    }
}

/* N4U Website menus: controlled by app.js (not CSS hover alone) */
.sidebar .nav-website-parent > .nav-submenu {
  display: none !important;
}
.sidebar .nav-website-parent.is-open > .nav-submenu,
.sidebar .nav-website-parent.is-hover-open > .nav-submenu {
  display: flex !important;
}
.sidebar .nav-website-parent.is-click-closed > .nav-submenu,
.sidebar .nav-website-parent.is-click-closed:hover > .nav-submenu,
.sidebar .nav-website-parent.is-click-closed:focus-within > .nav-submenu {
  display: none !important;
}
.sidebar .nav-website-parent > a::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  font-size: 11px;
  color: #8493b0;
  transition: transform .18s ease;
}
.sidebar .nav-website-parent.is-open > a::after,
.sidebar .nav-website-parent.is-hover-open > a::after {
  transform: rotate(180deg);
}


/* N4U Access CRM — modern, compact submenu links with icons */
.sidebar .nav-website-parent > .nav-submenu {
  display: none !important;
  gap: 4px !important;
  margin: 2px 0 8px 9px !important;
  padding: 7px !important;
  border: 1px solid rgba(151, 174, 211, .16) !important;
  border-radius: 13px !important;
  background: rgba(5, 12, 26, .36) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.sidebar .nav-website-parent.is-open > .nav-submenu,
.sidebar .nav-website-parent.is-hover-open > .nav-submenu {
  display: flex !important;
  flex-direction: column !important;
}
.sidebar .nav-website-parent.is-click-closed > .nav-submenu,
.sidebar .nav-website-parent.is-click-closed:hover > .nav-submenu,
.sidebar .nav-website-parent.is-click-closed:focus-within > .nav-submenu {
  display: none !important;
}
.sidebar .nav-website-parent > .nav-submenu > a,
.sidebar .nav-parent:not(.nav-website-parent) > .nav-submenu > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 35px !important;
  padding: 8px 9px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #aebbd0 !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-decoration: none !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}
.sidebar .nav-website-parent > .nav-submenu > a > i,
.sidebar .nav-parent:not(.nav-website-parent) > .nav-submenu > a > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 17px !important;
  width: 17px !important;
  color: #8498bd !important;
  font-size: 12px !important;
  transition: color .16s ease !important;
}
.sidebar .nav-website-parent > .nav-submenu > a > span,
.sidebar .nav-parent:not(.nav-website-parent) > .nav-submenu > a > span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.sidebar .nav-website-parent > .nav-submenu > a:hover,
.sidebar .nav-parent:not(.nav-website-parent) > .nav-submenu > a:hover,
.sidebar .nav-website-parent > .nav-submenu > a:focus-visible,
.sidebar .nav-parent:not(.nav-website-parent) > .nav-submenu > a:focus-visible {
  color: #fff !important;
  background: rgba(100, 125, 255, .13) !important;
  border-color: rgba(140, 160, 255, .19) !important;
  transform: translateX(2px);
  outline: none;
}
.sidebar .nav-website-parent > .nav-submenu > a:hover > i,
.sidebar .nav-parent:not(.nav-website-parent) > .nav-submenu > a:hover > i {
  color: #8fcaff !important;
}
@media (max-width: 900px) {
  .sidebar .nav-website-parent > .nav-submenu { margin-left: 0 !important; }
  .sidebar .nav-website-parent > .nav-submenu > a,
  .sidebar .nav-parent:not(.nav-website-parent) > .nav-submenu > a { white-space: normal !important; }
}


/* Access Records and all submenu groups share the N4U Website dropdown design */
.sidebar .nav-website-parent > .nav-submenu > a.active {
  color: #ffffff !important;
  background: rgba(100, 125, 255, .13) !important;
  border-color: rgba(140, 160, 255, .19) !important;
}
.sidebar .nav-website-parent > .nav-submenu > a.active > i { color: #8fcaff !important; }
.sidebar .nav-access-records > a.active { color: inherit; }


/* Active navigation state consistency: highlight the exact current submenu item. */
.sidebar .nav-parent > .nav-submenu > a.active {
  background: rgba(143, 202, 255, .13) !important;
  color: #ffffff !important;
  border: 1px solid rgba(143, 202, 255, .22);
  border-radius: 8px;
}
.sidebar .nav-parent > .nav-submenu > a.active > i {
  color: #8fcaff !important;
}
.sidebar .nav-parent.is-open > a,
.sidebar .nav-parent.is-hover-open > a {
  color: #ffffff;
}


/* Separate submenu toggle keeps parent navigation links clickable */
.sidebar .nav-website-parent { position: relative !important; }
.sidebar .nav-website-parent > a { padding-right: 38px !important; }
.sidebar .nav-website-parent > a::after { display: none !important; content: none !important; }
.sidebar .nav-website-parent > .nav-submenu-toggle {
  position: absolute; z-index: 3; top: 4px; right: 5px;
  width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: #8498bd;
  cursor: pointer; transition: background .16s ease, color .16s ease, transform .16s ease;
}
.sidebar .nav-website-parent > .nav-submenu-toggle span::before {
  content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px;
}
.sidebar .nav-website-parent > .nav-submenu-toggle:hover,
.sidebar .nav-website-parent > .nav-submenu-toggle:focus-visible { background: rgba(100,125,255,.15); border-color: rgba(140,160,255,.2); color: #fff; outline: none; }
.sidebar .nav-website-parent > .nav-submenu-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.sidebar .nav-website-parent > .nav-submenu-toggle span { display: inline-block; transition: transform .16s ease; }


/* Fix submenu arrow glyph: use a single CSS escape for Font Awesome chevron */
.sidebar .nav-website-parent > .nav-submenu-toggle span::before {
  content: "\f078" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  display: inline-block;
  line-height: 1;
}
.sidebar .nav-website-parent > .nav-submenu-toggle {
  color: #9eacc2;
}
.sidebar .nav-website-parent > .nav-submenu-toggle:hover {
  color: #ffffff;
}