/* =============================================================================
   DevDrive Account Dashboard – Aether Vault Theme Override v3
   Targets the EXACT selectors used by default.css & custom.css to win
   specificity. Layout/positioning values are NEVER changed.
   ============================================================================= */

/* ─── Google Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* ─── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --av-primary:        #003ec7;
  --av-primary-dark:   #0038b6;
  --av-primary-mid:    #0052ff;
  --av-surface:        #faf8ff;
  --av-surface-low:    #f2f3ff;
  --av-surface-c:      #eaedff;
  --av-surface-high:   #e2e7ff;
  --av-surface-w:      #ffffff;
  --av-on-surface:     #131b2e;
  --av-on-var:         #434656;
  --av-outline:        #737688;
  --av-outline-var:    #c3c5d9;
  --av-error:          #ba1a1a;
  --av-success:        #137333;
  --av-success-bg:     #e6f9f0;
  --av-font-d: 'Hanken Grotesk', -apple-system, sans-serif;
  --av-font-b: 'Geist', -apple-system, sans-serif;
  --av-font-m: 'JetBrains Mono', monospace;
  --av-r:  6px;
  --av-rm: 8px;
  --av-rl: 12px;
  --av-rx: 16px;
  --av-sh:  0 1px 3px rgba(19,27,46,.06), 0 1px 2px rgba(19,27,46,.04);
  --av-shm: 0 4px 12px rgba(19,27,46,.08);
  --av-shx: 0 10px 28px rgba(19,27,46,.12);
  --av-t:   0.18s cubic-bezier(.4,0,.2,1);
}

/* =============================================================================
   BASE
   ============================================================================= */
html, body.page-body {
  font-family: var(--av-font-b) !important;
  background-color: var(--av-surface) !important;
  color: var(--av-on-surface) !important;
}
.page-container { background-color: var(--av-surface) !important; }

/* =============================================================================
   HEADER TOP ROW  (the most specific match needed)
   custom.css uses:  .page-container .navbar-fixed-top .navbar-inner .navbar-toprow
                       → background-color: #264b77
   We need body + that chain to beat it.
   ============================================================================= */
body .page-container .navbar-fixed-top .navbar-inner .navbar-toprow {
  background-color: #1c2436 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  height: 60px !important;        /* keep original height */
}

/* The navbar itself – beat default.css "body .page-container.horizontal-menu header.navbar" */
body .page-container.horizontal-menu header.navbar {
  background: #1c2436 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}
body .page-container.horizontal-menu header.navbar.navbar-fixed-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body .page-container.horizontal-menu.with-sidebar header.navbar {
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* navbar-inner bottom border */
body .page-container .navbar-fixed-top .navbar-inner {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Second row */
body .page-container .navbar-fixed-top .navbar-inner .navbar-secondrow {
  background-color: #151b29 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* =============================================================================
   NAV LINKS in header
   ============================================================================= */

/* default link colour  (beat custom.css "body .page-container…ul.nav > li > a") */
body .page-container.horizontal-menu header.navbar ul.nav > li > a,
body .page-container.horizontal-menu header.navbar ul.nav > li > span {
  color: rgba(220, 225, 255, 0.75) !important;
  font-family: var(--av-font-d) !important;
}
body .page-container.horizontal-menu header.navbar ul.nav > li > a:hover,
body .page-container.horizontal-menu header.navbar ul.nav > li > a:focus {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* span text inside links */
body .page-container.horizontal-menu header.navbar .navbar-nav > li > a span,
body .page-container.horizontal-menu header.navbar .navbar-right > li > a span {
  color: rgba(220, 225, 255, 0.75) !important;
  font-family: var(--av-font-d) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Active link */
body .page-container.horizontal-menu header.navbar .navbar-nav > li.active > a,
body .page-container.horizontal-menu header.navbar .navbar-nav > li.active:hover > a {
  color: #00ccf9 !important;
  background-color: rgba(0, 82, 255, 0.15) !important;
  box-shadow: inset 0 -2.5px 0 #00ccf9 !important;
}
body .page-container.horizontal-menu header.navbar .navbar-nav > li.active > a span {
  color: #00ccf9 !important;
}

/* Hover span/icon */
body .page-container.horizontal-menu header.navbar .navbar-nav > li:hover > a span,
body .page-container.horizontal-menu header.navbar .navbar-right > li:hover > a span,
body .page-container.horizontal-menu header.navbar .navbar-right > li:hover > a i,
body .page-container.horizontal-menu header.navbar ul.nav > li.dropdown:hover > a i {
  color: #ffffff !important;
}

/* Dropdown open state */
body .page-container.horizontal-menu header.navbar ul.nav > li.dropdown.open {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}
body .page-container.horizontal-menu header.navbar ul.nav > li.dropdown.open > a span {
  color: #ffffff !important;
}
/* The arrow triangle under dropdown */
body .page-container.horizontal-menu header.navbar ul.nav > li.dropdown.open:after {
  border-color: rgba(0,0,0,0) rgba(0,0,0,0) #ffffff rgba(0,0,0,0) !important;
}

/* Caret colour */
.page-container.horizontal-menu header.navbar .nav .caret,
body .page-container.horizontal-menu header.navbar .navbar-nav .caret {
  border-top-color: rgba(255, 255, 255, 0.6) !important;
  border-bottom-color: rgba(255, 255, 255, 0.6) !important;
}

/* Logo */
.page-container.horizontal-menu header.navbar .navbar-brand img {
  height: 28px !important;
  margin: 16px 0 0 16px !important;
}

/* Home icon */
.navbar-inner .header-home-button a,
.header-home-button a {
  color: rgba(220, 225, 255, 0.75) !important;
}
.navbar-inner .header-home-button a:hover,
.header-home-button a:hover {
  color: #ffffff !important;
}

/* Account level badge */
body .page-container.horizontal-menu header.navbar .badge.badge-success.badge-roundless,
body .page-container.horizontal-menu header.navbar .badge-success.badge-roundless {
  background: linear-gradient(135deg, #0052ff, #00ccf9) !important;
  font-family: var(--av-font-m) !important;
  font-size: 10px !important;
  letter-spacing: .05em !important;
  border-radius: 4px !important;
  padding: 3px 7px !important;
  color: #ffffff !important;
}
body .page-container.horizontal-menu header.navbar .badge-danger.badge-roundless {
  background: linear-gradient(135deg, #5136b0, #0052ff) !important;
  font-family: var(--av-font-m) !important;
  font-size: 10px !important;
  letter-spacing: .05em !important;
  border-radius: 4px !important;
  padding: 3px 7px !important;
  color: #ffffff !important;
}

/* Bell icon */
body .page-container.horizontal-menu header.navbar .internal-notification > a {
  color: rgba(220, 225, 255, 0.75) !important;
}
body .page-container.horizontal-menu header.navbar .internal-notification:hover > a {
  color: #ffffff !important;
}

/* =============================================================================
   SECOND ROW – Upload / New / Search
   ============================================================================= */
.left-action-buttons .btn-white {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(220, 225, 255, 0.9) !important;
  font-family: var(--av-font-d) !important;
  font-weight: 500 !important;
}
.left-action-buttons .btn-white:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

.upload-button-wrapper .btn-green,
.left-action-buttons .btn-green {
  background: linear-gradient(135deg, #0052ff 0%, #00ccf9 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-family: var(--av-font-d) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,204,249,.25) !important;
}
.upload-button-wrapper .btn-green:hover,
.left-action-buttons .btn-green:hover {
  background: linear-gradient(135deg, #003ec7 0%, #0052ff 100%) !important;
  box-shadow: 0 4px 14px rgba(0,204,249,.35) !important;
}
.upload-button-wrapper .btn.dropdown-toggle {
  background: #00ccf9 !important;
  border-color: transparent !important;
  border-left: 1px solid rgba(255,255,255,.3) !important;
  color: #fff !important;
}

/* Search input – custom.css sets border:0 on this, restore with our style */
body .page-container .navbar-fixed-top .navbar-inner .navbar-secondrow .navbar-secondrow-right .navbar-form-sm input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--av-r) !important;
  color: #ffffff !important;
  font-family: var(--av-font-b) !important;
}
body .page-container .navbar-fixed-top .navbar-inner .navbar-secondrow .navbar-secondrow-right .navbar-form-sm input::placeholder {
  color: rgba(220, 225, 255, 0.5) !important;
}
body .page-container .navbar-fixed-top .navbar-inner .navbar-secondrow .navbar-secondrow-right .navbar-form-sm .btn-input-pre {
  color: rgba(220, 225, 255, 0.6) !important;
  background: transparent !important;
}
body .page-container .navbar-fixed-top .navbar-inner .navbar-secondrow .navbar-secondrow-right .navbar-form-sm .btn-input-pre:hover {
  color: #ffffff !important;
}

/* =============================================================================
   SIDEBAR
   ============================================================================= */

/* light theme sidebar matching white dashboard */
body .page-container .sidebar-menu {
  background: var(--av-surface-w) !important;
  border-right: 1px solid var(--av-outline-var) !important;
}

/* sub-title labels */
.sidebar-menu .sub-title {
  font-family: var(--av-font-m) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--av-on-var) !important;
  padding: 14px 16px 5px !important;
  border-top: 1px solid var(--av-outline-var) !important;
}

/* folder tree active link */
body .page-container .sidebar-menu #folderTreeview li a.jstree-clicked {
  color: var(--av-primary) !important;
  background-color: var(--av-surface-c) !important;
}
body .page-container .sidebar-menu #folderTreeview li a.jstree-clicked:hover,
body .page-container .sidebar-menu #folderTreeview li .jstree-clicked a:hover {
  color: var(--av-primary) !important;
  background-color: var(--av-surface-c) !important;
}
body .page-container .sidebar-menu #folderTreeview li .jstree-clicked:before {
  color: var(--av-primary) !important;
}

/* jstree hover / clicked state */
.jstree-default .jstree-hovered,
.jstree-default .jstree-clicked {
  background: var(--av-surface-low) !important;
  border-radius: var(--av-r) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.jstree-default a.jstree-hovered {
  color: var(--av-primary) !important;
}
.jstree-default a {
  color: var(--av-on-surface) !important;
}

/* Storage widget */
.remaining-storage .progress {
  background: var(--av-surface-high) !important;
  height: 3px !important;
  margin-top: 5px !important;
}
.remaining-storage .progress-bar,
.remaining-storage .progress-bar-success {
  background: linear-gradient(90deg, var(--av-primary) 0%, var(--av-primary-mid) 100%) !important;
}
.remaining-storage #totalUsageText,
.remaining-storage #totalUsageTextLoading {
  font-family: var(--av-font-b) !important;
  font-size: 12px !important;
  color: var(--av-on-var) !important;
}

/* sidebar menu links */
body .page-container .sidebar-menu ul li a,
body .page-container .sidebar-menu #main-menu li a {
  color: var(--av-on-var) !important;
  font-family: var(--av-font-b) !important;
}
body .page-container .sidebar-menu #main-menu li a:hover {
  color: var(--av-primary) !important;
  background-color: var(--av-surface-low) !important;
}
body .page-container .sidebar-menu #main-menu li.active > a {
  background-color: var(--av-surface-c) !important;
  color: var(--av-primary) !important;
}

/* side-notice text */
body .sidebar-menu .side-notice {
  color: var(--av-on-var) !important;
}
body .sidebar-menu .side-notice p {
  color: var(--av-on-var) !important;
}

/* orange convert button */
.sidebar-menu .btn-orange {
  background: #f59e0b !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--av-font-d) !important;
  font-weight: 600 !important;
  border-radius: var(--av-r) !important;
}
.sidebar-menu .btn-orange:hover {
  background: #d97706 !important;
  text-decoration: none !important;
}

/* =============================================================================
   DROPDOWN MENUS
   ============================================================================= */
body .page-container.horizontal-menu header.navbar .navbar-nav > li ul {
  background: var(--av-surface-w) !important;
  border: 1px solid var(--av-outline-var) !important;
  border-radius: var(--av-rm) !important;
  box-shadow: var(--av-shx) !important;
}
body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li a {
  border-color: var(--av-outline-var) !important;
  color: var(--av-on-surface) !important;
  font-family: var(--av-font-b) !important;
  font-size: 13px !important;
}
body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li:hover > a {
  background: var(--av-surface-low) !important;
  color: var(--av-primary) !important;
}
body .page-container.horizontal-menu header.navbar .navbar-nav > li ul li.active > a {
  background: var(--av-surface-low) !important;
  color: var(--av-primary) !important;
}

/* generic dropdown-menu */
.dropdown-menu {
  background: var(--av-surface-w) !important;
  border: 1px solid var(--av-outline-var) !important;
  border-radius: var(--av-rm) !important;
  box-shadow: var(--av-shx) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a {
  font-family: var(--av-font-b) !important;
  font-size: 13px !important;
  color: var(--av-on-surface) !important;
  padding: 7px 12px !important;
  border-radius: var(--av-r) !important;
  transition: background var(--av-t) !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--av-surface-low) !important;
  color: var(--av-primary) !important;
}
.dropdown-menu .divider {
  background-color: var(--av-outline-var) !important;
  margin: 4px 0 !important;
}

.dropdown-white {
  background: var(--av-surface-w) !important;
  border: 1px solid var(--av-outline-var) !important;
  border-radius: var(--av-rm) !important;
  box-shadow: var(--av-shx) !important;
}
.dropdown-white > li > a {
  color: var(--av-on-surface) !important;
  font-family: var(--av-font-b) !important;
  border-radius: var(--av-r) !important;
}
.dropdown-white > li > a:hover {
  background: var(--av-surface-low) !important;
  color: var(--av-primary) !important;
}

/* notification list */
.dropdown-menu-list > li > a .line {
  font-family: var(--av-font-b) !important;
  font-size: 12px !important;
  color: var(--av-on-surface) !important;
}
.dropdown-menu-list > li > a .line.small {
  color: var(--av-on-var) !important;
  font-size: 11px !important;
  font-family: var(--av-font-m) !important;
}
.dropdown-menu-list .unread > a {
  background: var(--av-surface-low) !important;
}
.dropdown-menu-list .unread > a:hover {
  background: var(--av-surface-c) !important;
}
.dropdown-menu-list > li > a:hover {
  background: var(--av-surface-low) !important;
}
.dropdown-menu-list > li > a:hover .line {
  color: var(--av-primary) !important;
}
.badge-warning { background: #f59e0b !important; }

/* =============================================================================
   MAIN CONTENT
   ============================================================================= */
#main-ajax-container { background-color: var(--av-surface) !important; }

/* toolbar above the file listing */
.toolbar-container {
  background-color: var(--av-surface-w) !important;
  border-bottom: 1px solid var(--av-outline-var) !important;
}

/* =============================================================================
   MODALS
   ============================================================================= */
.modal-content {
  background: var(--av-surface-w) !important;
  border: 1px solid var(--av-outline-var) !important;
  border-radius: var(--av-rx) !important;
  box-shadow: var(--av-shx) !important;
}
.modal-header {
  background: var(--av-surface-low) !important;
  border-bottom: 1px solid var(--av-outline-var) !important;
  border-radius: var(--av-rx) var(--av-rx) 0 0 !important;
  padding: 14px 20px !important;
}
.modal-header .modal-title, .modal-header h4, .modal-header h3 {
  font-family: var(--av-font-d) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--av-on-surface) !important;
  margin: 0 !important;
}
.modal-header .close { color: var(--av-on-var) !important; opacity: 1 !important; }
.modal-header .close:hover { color: var(--av-on-surface) !important; }
.modal-body { padding: 20px !important; background: var(--av-surface-w) !important; }
.modal-footer {
  background: var(--av-surface-low) !important;
  border-top: 1px solid var(--av-outline-var) !important;
  border-radius: 0 0 var(--av-rx) var(--av-rx) !important;
  padding: 12px 20px !important;
}

/* =============================================================================
   FORMS
   ============================================================================= */
.form-control {
  font-family: var(--av-font-b) !important;
  font-size: 13px !important;
  border: 1px solid var(--av-outline-var) !important;
  border-radius: var(--av-r) !important;
  background: var(--av-surface-w) !important;
  color: var(--av-on-surface) !important;
  box-shadow: none !important;
}
.form-control:focus {
  border-color: var(--av-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,62,199,.12) !important;
  outline: none !important;
}
label {
  font-family: var(--av-font-d) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--av-on-var) !important;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */
.btn { font-family: var(--av-font-d) !important; font-weight: 600 !important; transition: all var(--av-t) !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--av-primary) 0%, var(--av-primary-mid) 100%) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,62,199,.25) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, var(--av-primary-dark) 0%, var(--av-primary) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0,62,199,.35) !important;
}
.btn-default {
  background: var(--av-surface-w) !important;
  border: 1px solid var(--av-outline-var) !important;
  color: var(--av-on-surface) !important;
  box-shadow: var(--av-sh) !important;
}
.btn-default:hover, .btn-default:focus {
  background: var(--av-surface-low) !important;
  border-color: var(--av-primary) !important;
  color: var(--av-primary) !important;
}
.btn-success, .btn-green {
  background: linear-gradient(135deg, var(--av-primary) 0%, var(--av-primary-mid) 100%) !important;
  border-color: transparent !important; color: #fff !important;
}
.btn-success:hover, .btn-green:hover {
  background: linear-gradient(135deg, var(--av-primary-dark) 0%, var(--av-primary) 100%) !important;
  color: #fff !important;
}
.btn-danger { background: var(--av-error) !important; border-color: var(--av-error) !important; color: #fff !important; }
.btn-danger:hover { background: #93000a !important; border-color: #93000a !important; color: #fff !important; }

/* =============================================================================
   PANELS / BOXES
   ============================================================================= */
.panel {
  background: var(--av-surface-w) !important;
  border: 1px solid var(--av-outline-var) !important;
  border-radius: var(--av-rm) !important;
  box-shadow: var(--av-sh) !important;
}
.panel-heading {
  background: var(--av-surface-low) !important;
  border-bottom: 1px solid var(--av-outline-var) !important;
  border-radius: var(--av-rm) var(--av-rm) 0 0 !important;
  font-family: var(--av-font-d) !important;
  font-weight: 600 !important;
  color: var(--av-on-surface) !important;
}

/* =============================================================================
   TABS
   ============================================================================= */
.nav-tabs { border-bottom: 1px solid var(--av-outline-var) !important; }
.nav-tabs > li > a {
  font-family: var(--av-font-d) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--av-on-var) !important;
  border-color: transparent !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: -1px !important;
  transition: color var(--av-t), border-color var(--av-t) !important;
}
.nav-tabs > li > a:hover {
  color: var(--av-primary) !important;
  background: transparent !important;
  border-bottom-color: rgba(0,62,199,.4) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--av-primary) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 2px solid var(--av-primary) !important;
  font-weight: 600 !important;
}

/* =============================================================================
   ALERTS
   ============================================================================= */
.alert { font-family: var(--av-font-b) !important; font-size: 13px !important; border-radius: var(--av-rm) !important; }
.alert-success { background: var(--av-success-bg) !important; color: var(--av-success) !important; border-color: rgba(19,115,51,.2) !important; }
.alert-danger, .alert-error { background: #ffdad6 !important; color: var(--av-error) !important; border-color: rgba(186,26,26,.2) !important; }
.alert-info { background: rgba(0,62,199,.06) !important; color: var(--av-primary) !important; border-color: rgba(0,62,199,.15) !important; }
.alert-warning { background: #fffbeb !important; color: #92400e !important; border-color: rgba(245,158,11,.2) !important; }

/* =============================================================================
   PROGRESS
   ============================================================================= */
.progress { background: var(--av-surface-high) !important; border-radius: 3px !important; }
.progress-bar, .progress-bar-success {
  background: linear-gradient(90deg, var(--av-primary) 0%, var(--av-primary-mid) 100%) !important;
}

/* =============================================================================
   TOASTR
   ============================================================================= */
#toast-container > div { font-family: var(--av-font-b) !important; border-radius: var(--av-rm) !important; box-shadow: var(--av-shx) !important; opacity: 1 !important; }
#toast-container .toast-success { background: var(--av-success) !important; }
#toast-container .toast-error   { background: var(--av-error) !important; }
#toast-container .toast-info    { background: var(--av-primary) !important; }
#toast-container .toast-warning { background: #b45309 !important; }

/* =============================================================================
   BREADCRUMBS
   ============================================================================= */
ol.breadcrumb { background: transparent !important; font-family: var(--av-font-b) !important; font-size: 13px !important; }
.breadcrumb > li > a { color: var(--av-primary) !important; }
.breadcrumb > .active { color: var(--av-on-var) !important; }

/* =============================================================================
   PAGINATION
   ============================================================================= */
.pagination > li > a, .pagination > li > span {
  font-family: var(--av-font-d) !important;
  color: var(--av-on-surface) !important;
  border: 1px solid var(--av-outline-var) !important;
  background: var(--av-surface-w) !important;
}
.pagination > li > a:hover { background: var(--av-surface-low) !important; color: var(--av-primary) !important; border-color: var(--av-primary) !important; }
.pagination > .active > a, .pagination > .active > span { background: var(--av-primary) !important; border-color: var(--av-primary) !important; color: #fff !important; }

/* =============================================================================
   CONTEXT MENUS
   ============================================================================= */
.context-menu-list {
  background: var(--av-surface-w) !important;
  border: 1px solid var(--av-outline-var) !important;
  border-radius: var(--av-rm) !important;
  box-shadow: var(--av-shx) !important;
  padding: 6px !important;
}
.context-menu-item {
  font-family: var(--av-font-b) !important;
  font-size: 13px !important;
  color: var(--av-on-surface) !important;
  border-radius: var(--av-r) !important;
}
.context-menu-item:hover, .context-menu-item.context-menu-hover {
  background: var(--av-surface-low) !important;
  color: var(--av-primary) !important;
}

/* =============================================================================
   MISC
   ============================================================================= */
#statusText { font-family: var(--av-font-m) !important; font-size: 11px !important; color: var(--av-on-var) !important; }
.text-muted { color: var(--av-on-var) !important; }
.user-screen-name { color: rgba(220, 225, 255, 0.9) !important; font-family: var(--av-font-d) !important; font-size: 13px !important; font-weight: 500 !important; }
.img-circle { border: 2px solid rgba(255, 255, 255, 0.15) !important; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--av-surface-low); }
::-webkit-scrollbar-thumb { background: var(--av-outline-var); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--av-outline); }