staff chnages and customer chnages

resources/views/admin/staff/create.blade.php

@@ -5,6 +5,46 @@
 @section('content')
 <style>
 
+    /* Hide scrollbar but keep scroll functionality */
+    html,
+    body {
+        overflow-x: hidden !important;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
+        html, body {
+            scrollbar-width: none;          /* Firefox */
+            -ms-overflow-style: none;       /* IE & Edge */
+        }
+
+        html::-webkit-scrollbar,
+        body::-webkit-scrollbar {
+            display: none;                  /* Chrome, Safari */
+        }
+
+        /* GLOBAL scrollbar hide – keeps scrolling */
+        html,
+        body,
+        .staff-add-container,
+        .staff-add-card {
+            scrollbar-width: none;          /* Firefox */
+            -ms-overflow-style: none;       /* IE / Edge */
+        }
+
+        html::-webkit-scrollbar,
+        body::-webkit-scrollbar,
+        .staff-add-container::-webkit-scrollbar,
+        .staff-add-card::-webkit-scrollbar {
+            display: none;                  /* Chrome / Safari */
+        }
+
     :root {
         --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
@@ -15,11 +55,16 @@
     }
 
     body {
+        
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     min-height: 100vh;
-        padding: 20px;
+    margin: 0;
+    padding: clamp(12px, 2vw, 30px);
+    box-sizing: border-box;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    }
+      overflow-x: hidden;   /* hide horizontal only */
+    overflow-y: auto; 
+}
 
     /* Main Container - FLUID LIKE SHIPMENT PAGE */
     .staff-add-container {
@@ -29,16 +74,7 @@
 
     /* Decorative Elements */
     .decorative-circle {
-        position: absolute;
+       display: none;
-        width: 300px;
-        height: 300px;
-        border-radius: 50%;
-        background: var(--secondary-gradient);
-        opacity: 0.05;
-        filter: blur(40px);
-        z-index: 0;
-        top: -100px;
-        right: -100px;
     }
 
     /* Main Card - FLUID BEHAVIOR */
@@ -950,6 +986,23 @@
             font-size: 0.75rem;
         }
     }
+    .header-flex {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    text-align: left; /* override center */
+}
+
+.header-icon {
+    flex-shrink: 0;
+    font-size: 48px;
+}
+
+.header-text {
+    display: flex;
+    flex-direction: column;
+}
+
 </style>
 
 <div class="staff-add-container">
@@ -960,13 +1013,18 @@
     <div class="staff-add-card">
         <!-- Header -->
         <div class="staff-add-header">
-            <div class="header-content">
+            <div class="header-content header-flex">
             <div class="header-icon">👨‍💼</div>
+            <div class="header-text">
                 <h1 class="header-title">Add New Staff Member</h1>
-                <p class="header-subtitle">Complete all the steps below to add a new staff member to your team</p>
+                <p class="header-subtitle">
+                    Complete all the steps below to add a new staff member to your team
+                </p>
             </div>
         </div>
 
+        </div>
+
         <!-- Progress Steps -->
         <div class="progress-steps">
             <div class="step active" data-step="1">

resources/views/admin/staff/edit.blade.php

@@ -11,6 +11,79 @@
         --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
     }
 
+    /* Hide scrollbar but allow scroll */
+    .hide-scrollbar {
+        overflow-y: auto;
+        scrollbar-width: none;          /* Firefox */
+        -ms-overflow-style: none;       /* IE & Edge */
+    }
+
+    .hide-scrollbar::-webkit-scrollbar {
+        display: none;                  /* Chrome, Safari */
+    }
+
+    /* =========================================== */
+    /* HORIZONTAL SCROLL FIXES */
+    /* =========================================== */
+    html, body {
+        overflow-x: hidden !important;
+        scrollbar-width: none;
+    }
+
+    .staff-edit-container,
+    .staff-edit-card,
+    .form-section,
+    .form-grid,
+    .permissions-container {
+        max-width: 100%;
+        overflow-x: hidden;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+    /* Fix grid overflow issues */
+    .form-grid,
+    .permissions-container {
+        min-width: 0;
+    }
+
+    /* Fix transform hover effects */
+    .permission-group:hover,
+    .status-option:hover {
+        transform: translateY(-2px) !important;
+    }
+
+    .permission-item:hover {
+        transform: translateX(3px) !important;
+    }
+
+    /* Ensure containers don't exceed viewport */
+    @media (min-width: 1200px) {
+        .staff-edit-card {
+            max-width: 95vw;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        .staff-edit-card {
+            max-width: 97vw;
+        }
+    }
+
+    @media (min-width: 1600px) {
+        .staff-edit-card {
+            max-width: 98vw;
+        }
+    }
+
+    @media (min-width: 1920px) {
+        .staff-edit-card {
+            max-width: 99vw;
+        }
+    }
+
     body {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         min-height: 100vh;
@@ -46,21 +119,26 @@
         z-index: 10;
     }
 
-    /* Fluid Header */
+    /* =========================================== */
+    /* UPDATED HEADER LAYOUT */
+    /* =========================================== */
     .staff-header {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        text-align: left;
         background: var(--primary-gradient);
-        padding: 30px 25px;
+         /* padding: 16px 20px; */
         color: white;
-        text-align: center;
         position: relative;
+        flex-wrap: wrap;
     }
 
     .staff-avatar {
-        width: 80px;
+        width: 70px;
-        height: 80px;
+        height: 70px;
         border-radius: 50%;
         background: white;
-        margin: 0 auto 15px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -68,6 +146,7 @@
         color: #667eea;
         border: 3px solid white;
         box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        flex-shrink: 0;
     }
 
     .staff-avatar-initials {
@@ -78,6 +157,11 @@
         -webkit-text-fill-color: transparent;
     }
 
+    .staff-header-content {
+        flex: 1;
+        min-width: 0;
+    }
+
     .staff-title {
         font-size: 1.8rem;
         font-weight: 700;
@@ -102,6 +186,68 @@
         border: 1px solid rgba(255,255,255,0.2);
     }
 
+    /* Mobile responsive for header */
+    @media (max-width: 768px) {
+        .staff-header {
+            flex-direction: column;
+            text-align: center;
+            gap: 15px;
+            padding: 20px 15px;
+        }
+        
+        .staff-avatar {
+            margin: 0 auto;
+        }
+        
+        .staff-header-content {
+            text-align: center;
+        }
+    }
+
+    /* Adjust avatar sizes for larger screens */
+    @media (min-width: 1200px) {
+        .staff-header {
+            gap: 30px;
+            padding: 40px 35px;
+        }
+        
+        .staff-avatar {
+            width: 90px;
+            height: 90px;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        .staff-header {
+            gap: 35px;
+            padding: 45px 40px;
+        }
+        
+        .staff-avatar {
+            width: 100px;
+            height: 100px;
+        }
+    }
+
+    @media (min-width: 1600px) {
+        .staff-header {
+            gap: 40px;
+            padding: 50px 45px;
+        }
+        
+        .staff-avatar {
+            width: 110px;
+            height: 110px;
+        }
+    }
+
+    @media (min-width: 1920px) {
+        .staff-header {
+            gap: 45px;
+            padding: 60px 50px;
+        }
+    }
+
     /* Fluid Form Sections */
     .form-section {
         padding: 25px;
@@ -479,7 +625,7 @@
     @media (min-width: 1200px) {
         .staff-edit-card {
             margin: 0 auto;
-            max-width: 95%;
+            max-width: 95vw;
         }
         
         .form-grid {
@@ -532,7 +678,7 @@
     /* Extra large desktop - 1440px+ */
     @media (min-width: 1440px) {
         .staff-edit-card {
-            max-width: 97%;
+            max-width: 97vw;
         }
         
         .form-grid {
@@ -604,7 +750,7 @@
     /* Ultra wide desktop - 1600px+ */
     @media (min-width: 1600px) {
         .staff-edit-card {
-            max-width: 98%;
+            max-width: 98vw;
         }
         
         .form-grid {
@@ -676,7 +822,7 @@
         }
         
         .staff-edit-card {
-            max-width: 99%;
+            max-width: 99vw;
         }
         
         .form-grid {
@@ -788,10 +934,12 @@
                     {{ strtoupper(substr($staff->name, 0, 2)) }}
                 </div>
             </div>
+            <div class="staff-header-content">
                 <h1 class="staff-title">Edit Staff Profile</h1>
                 <div class="staff-subtitle">{{ $staff->name }}</div>
                 <div class="employee-id-badge">{{ $staff->employee_id }}</div>
             </div>
+        </div>
 
         <!-- Error Messages -->
         @if($errors->any())