.no-scrollbar::-webkit-scrollbar {
        display: none;
      }
      .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      :root {
        --profile-ink: var(--edel-purple-dark);
        --profile-ink-strong: #1d0c38;
        --profile-muted: rgba(58, 26, 106, 0.72);
        --profile-muted-soft: rgba(58, 26, 106, 0.48);
        --profile-surface: rgba(255, 255, 255, 0.95);
        --profile-surface-soft: rgba(241, 241, 241, 0.72);
        --profile-surface-wash: rgba(75, 42, 127, 0.08);
        --profile-border: rgba(75, 42, 127, 0.12);
        --profile-border-strong: rgba(75, 42, 127, 0.2);
      }

      body.bg-brand-light {
        background:
          radial-gradient(circle at top left, rgba(251, 191, 36, 0.18), transparent 24%),
          radial-gradient(circle at top right, rgba(75, 42, 127, 0.14), transparent 30%),
          linear-gradient(180deg, #f8f4ff 0%, #ffffff 48%, #f4eefb 100%);
        color: var(--profile-ink);
      }

      main.bg-brand-light {
        background:
          radial-gradient(circle at 18% 4%, rgba(251, 191, 36, 0.12), transparent 18%),
          radial-gradient(circle at 82% 8%, rgba(75, 42, 127, 0.12), transparent 24%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 243, 255, 0.96) 100%);
      }

      aside.bg-brand-navy {
        background:
          linear-gradient(180deg, #1d0c38 0%, var(--edel-purple-dark) 44%, var(--edel-purple-main) 100%);
        box-shadow: 10px 0 30px rgba(45, 17, 87, 0.18);
      }

      aside.bg-brand-navy nav a {
        color: rgba(241, 241, 241, 0.84);
      }

      aside.bg-brand-navy nav a:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.08);
      }

      aside.bg-brand-navy nav a.bg-white\/10 {
        color: var(--brand-accent);
        background-color: rgba(255, 255, 255, 0.1);
      }

      aside.bg-brand-navy nav a.bg-white\/10:hover {
        color: var(--brand-accent);
        background-color: rgba(255, 255, 255, 0.16);
      }

      aside.bg-brand-navy nav a i {
        color: inherit;
      }

      aside.bg-brand-navy .text-slate-400 {
        color: rgba(241, 241, 241, 0.7);
      }

      .glass-header {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(247, 243, 255, 0.92));
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--profile-border);
        box-shadow: 0 12px 32px rgba(45, 17, 87, 0.06);
      }

      /* Sidebar Refinement */
      body.bg-brand-light .text-slate-800 {
        color: var(--profile-ink);
      }

      body.bg-brand-light .text-slate-600 {
        color: var(--profile-muted);
      }

      body.bg-brand-light .text-slate-500 {
        color: var(--profile-muted);
      }

      body.bg-brand-light .text-slate-400 {
        color: var(--profile-muted-soft);
      }

      body.bg-brand-light .text-slate-300 {
        color: rgba(75, 42, 127, 0.28);
      }

      body.bg-brand-light .bg-slate-50 {
        background-color: var(--profile-surface-soft);
      }

      body.bg-brand-light .bg-slate-50\/50 {
        background-color: rgba(247, 243, 255, 0.84);
      }

      body.bg-brand-light .bg-slate-100 {
        background-color: var(--profile-surface-wash);
      }

      body.bg-brand-light .bg-slate-200 {
        background-color: rgba(75, 42, 127, 0.14);
      }

      body.bg-brand-light .bg-gray-300 {
        background-color: rgba(75, 42, 127, 0.18);
      }

      body.bg-brand-light .bg-gray-200 {
        background-color: rgba(75, 42, 127, 0.12);
      }

      body.bg-brand-light .border-slate-100 {
        border-color: var(--profile-border);
      }

      body.bg-brand-light .border-slate-200 {
        border-color: var(--profile-border-strong);
      }

      body.bg-brand-light .border-slate-200\/50 {
        border-color: rgba(75, 42, 127, 0.14);
      }

      body.bg-brand-light .border-slate-100\/50 {
        border-color: rgba(75, 42, 127, 0.1);
      }

      body.bg-brand-light .hover\:bg-slate-50:hover {
        background-color: rgba(75, 42, 127, 0.06);
      }

      body.bg-brand-light .hover\:bg-slate-100:hover {
        background-color: rgba(75, 42, 127, 0.12);
      }

      body.bg-brand-light .bg-white.rounded-\[2rem\],
      body.bg-brand-light .bg-white.rounded-3xl {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 243, 255, 0.98));
      }

      /* Verified Badge Gradient */
      .verified-badge {
        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%);
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
      }

      /* Metric Cards */
      .shadow-soft {
        box-shadow: 0 16px 32px -14px rgba(45, 17, 87, 0.18), 0 10px 18px -10px rgba(75, 42, 127, 0.12);
      }

      /* Custom Dropdown Styles */
      .status-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1em;
      }
      .status-available {
        color: #16a34a;
        background-color: #f0fdf4;
        border-color: #bbf7d0;
      }
      .status-busy {
        color: #d97706;
        background-color: #fffbeb;
        border-color: #fde68a;
      }
      .status-away,
      .status-unavailable {
        color: #dc2626;
        background-color: #fef2f2;
        border-color: #fecaca;
      }

      /* Toggle Switch CSS */
      .toggle-checkbox:checked {
        right: 0;
        border-color: #fbbf24;
      }
      .toggle-checkbox:checked + .toggle-label {
        background-color: #fbbf24;
      }
      .toggle-checkbox:checked + .toggle-label:after {
        transform: translateX(100%);
        border-color: white;
      }
      .toggle-label {
        width: 3rem;
        height: 1.5rem;
        background-color: #e2e8f0;
        border-radius: 9999px;
        position: relative;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      .toggle-label:after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 1.25rem;
        height: 1.25rem;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      /* Floating Label CSS for Modals */
      .float-label {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .float-input:focus ~ .float-label,
      .float-input:not(:placeholder-shown) ~ .float-label,
      select.float-input:focus ~ .float-label,
      select.float-input:valid ~ .float-label {
        top: 0;
        left: 1rem;
        transform: translateY(-50%);
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--brand-navy);
        background-color: rgba(255, 255, 255, 0.98);
        padding: 0 0.4rem;
        border-radius: 0.25rem;
      }
      textarea ~ .float-label {
        top: 1.25rem;
        transform: translateY(-50%);
      }
      textarea.float-input:focus ~ .float-label,
      textarea.float-input:not(:placeholder-shown) ~ .float-label {
        top: 0;
        transform: translateY(-50%);
      }

      body.bg-brand-light #modal-overlay,
      body.bg-brand-light #reports-modal {
        background: rgba(29, 12, 56, 0.62);
      }