src/components/AttendanceDialog.js

@@ -55,7 +55,7 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background">
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Mark Attendance: {event?.title}

src/components/CreateMemberDialog.js

@@ -119,7 +119,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <UserPlus className="h-6 w-6" />

src/components/ImportMembersDialog.js

@@ -138,7 +138,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <Upload className="h-6 w-6" />

src/components/Navbar.js

@@ -224,7 +224,7 @@ const Navbar = () => {
             )}
 
             {/* Navigation Links */}
-            <nav className="flex-1 overflow-y-auto py-6 px-4">
+            <nav className="flex-1 overflow-y-auto scrollbar-dashboard py-6 px-4">
               <div className="space-y-2">
                 <Link
                   to="/"

src/components/PlanDialog.js

@@ -159,7 +159,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plan ? 'Edit Plan' : 'Create New Plan'}

src/components/PublicNavbar.js

@@ -204,7 +204,7 @@ const PublicNavbar = () => {
           />
 
           {/* Drawer */}
-          <div className="fixed right-0 top-0 h-full w-[280px] bg-brand-purple  shadow-xl overflow-y-auto">
+          <div className="fixed right-0 top-0 h-full w-[280px] bg-brand-purple  shadow-xl overflow-y-auto scrollbar-dashboard">
             {/* Header */}
             <div className="flex justify-between items-center p-6 border-b border-[var(--purple-deep)]">
               <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>

src/components/WordPressImportWizard.js

@@ -896,7 +896,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
                 <DialogHeader>
                     <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]">
                         WordPress Import Wizard

src/components/ui/command.jsx

@@ -50,7 +50,7 @@ CommandInput.displayName = CommandPrimitive.Input.displayName
 const CommandList = React.forwardRef(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn("max-h-[300px] overflow-y-auto scrollbar-dashboard scrollbar-x-dashboard overflow-x-hidden", className)}
     {...props} />
 ))
 

src/components/ui/context-menu.jsx

@@ -47,7 +47,7 @@ const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto scrollbar-dashboard scrollbar-x-dashboard overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
         className
       )}
       {...props} />

src/components/ui/dropdown-menu.jsx

@@ -50,7 +50,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto scrollbar-dashboard scrollbar-x-dashboard overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
         className
       )}

src/components/ui/input.jsx

@@ -7,7 +7,7 @@ const Input = React.forwardRef(({ className, type, ...props }, ref) => {
     <input
       type={type}
       className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       ref={ref}

src/components/ui/select.jsx

@@ -52,7 +52,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden scrollbar-dashboard scrollbar-x-dashboard rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className

src/layouts/AdminLayout.js

@@ -63,7 +63,7 @@ const AdminLayout = ({ children }) => {
       )}
 
       {/* Main Content Area */}
-      <main className="flex-1 overflow-y-auto">
+      <main className="flex-1 overflow-y-auto scrollbar-dashboard">
         <div className="max-w-7xl mx-auto px-6 py-8">
           {children}
         </div>

src/pages/admin/AdminEvents.js

@@ -158,7 +158,7 @@ const AdminEvents = () => {
               </Button>
             </DialogTrigger>
 
-            <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
               <DialogHeader>
                 <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {editingEvent ? 'Edit Event' : 'Create New Event'}
@@ -186,7 +186,7 @@ const AdminEvents = () => {
                     value={formData.description}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                     rows={4}
-                    className="w-full border-2 border-[var(--neutral-800)] focus:border-brand-purple  rounded-lg p-3"
+                    className="w-full border-2 border-[var(--neutral-800)] bg-background focus:border-brand-purple  rounded-lg p-3"
                   />
                 </div>
 
@@ -249,7 +249,7 @@ const AdminEvents = () => {
                     id="published"
                     checked={formData.published}
                     onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
-                    className="w-4 h-4 text-brand-purple  border-[var(--neutral-800)] rounded focus:ring-brand-purple "
+                    className="w-4 h-4 ui-checkbox text-brand-purple  border-[var(--neutral-800)] rounded focus:ring-brand-purple "
                   />
                   <label htmlFor="published" className="text-sm font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Publish event (make visible to members)

src/pages/admin/AdminRoles.js

@@ -273,7 +273,7 @@ const AdminRoles = () => {
 
       {/* Create Role Modal */}
       <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
-        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto scrollbar-dashboard scrollbar-dashboard">
           <DialogHeader>
             <DialogTitle>Create New Role</DialogTitle>
             <DialogDescription>
@@ -317,7 +317,7 @@ const AdminRoles = () => {
               <p className="text-sm text-gray-600 mb-3">
                 Select permissions for this role. You can also add permissions later.
               </p>
-              <div className="border rounded-lg p-4 max-h-64 overflow-y-auto">
+              <div className="border rounded-lg p-4 max-h-64 overflow-y-auto scrollbar-dashboard">
                 {Object.entries(groupedPermissions).map(([module, perms]) => (
                   <div key={module} className="mb-4">
                     <button
@@ -417,7 +417,7 @@ const AdminRoles = () => {
 
       {/* Manage Permissions Modal */}
       <Dialog open={showPermissionsModal} onOpenChange={setShowPermissionsModal}>
-        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto scrollbar-dashboard">
           <DialogHeader>
             <DialogTitle>Manage Permissions: {selectedRole?.name}</DialogTitle>
             <DialogDescription>

src/pages/members/MemberCalendar.js

@@ -195,7 +195,7 @@ export default function MemberCalendar() {
         </Card>
 
         <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
             {selectedEvent && (
               <>
                 <DialogHeader>

src/pages/members/MembersDirectory.js

@@ -377,7 +377,7 @@ const MembersDirectory = () => {
 
       {/* Profile Detail Dialog */}
       <Dialog open={profileDialogOpen} onOpenChange={setProfileDialogOpen}>
-        <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto">
+        <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
           {selectedMember && (
             <>
               <DialogHeader>