Optimize mobile layouts and fix integration tab overflow

Mobile Card Layout Improvements:
- Remove redundant Card/CardContent wrappers in mobile layouts
- Use simple div with border-2 border-border rounded-lg p-4 space-y-3 bg-card
- This provides wider cards without extra padding from wrapper div
- Applied to all admin pages: AdminProducts, AdminOrders, AdminMembers, AdminConsulting, AdminEvents

Integration Tab Fix:
- Remove redundant Calendar ID display in Alert component
- The Calendar ID is already visible in the input field above
- This Alert was causing horizontal overflow on mobile
- Alert showed 'OAuth configured. Calendar ID: {long_email}@group.calendar.google.com'
- Removing this eliminates the overflow issue

src/components/admin/settings/IntegrasiTab.tsx

@@ -363,14 +363,6 @@ export function IntegrasiTab() {
                 OAuth2 credentials untuk personal Gmail account. Gunakan <a href="/get-google-refresh-token.html" target="_blank" className="text-blue-600 underline">tool ini</a> untuk generate refresh token.
               </p>
             </div>
-            {settings.google_oauth_config && (
-              <Alert>
-                <AlertTriangle className="w-4 h-4" />
-                <AlertDescription>
-                  OAuth configured. Calendar ID: {settings.integration_google_calendar_id || 'Not set'}
-                </AlertDescription>
-              </Alert>
-            )}
           </div>
 
           <Button

src/pages/admin/AdminConsulting.tsx

@@ -410,8 +410,8 @@ export default function AdminConsulting() {
                 {/* Mobile Card Layout */}
                 <div className="md:hidden space-y-3 p-4">
                   {upcomingSlots.map((slot) => (
-                    <Card key={slot.id} className="border-2 border-border">
+                    <div key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
-                      <CardContent className="p-4 space-y-3">
+                      <div>
                         <div className="flex items-start justify-between gap-2">
                           <div className="flex-1 min-w-0">
                             <div className="flex items-center gap-2 flex-wrap mb-1">
@@ -540,8 +540,8 @@ export default function AdminConsulting() {
                 {/* Mobile Card Layout */}
                 <div className="md:hidden space-y-3 p-4">
                   {pastSlots.slice(0, 20).map((slot) => (
-                    <Card key={slot.id} className="border-2 border-border">
+                    <div key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
-                      <CardContent className="p-4 space-y-2">
+                      <div>
                         <div className="flex items-start justify-between gap-2">
                           <div className="flex-1 min-w-0">
                             <h3 className="font-semibold text-sm">

src/pages/admin/AdminEvents.tsx

@@ -282,8 +282,8 @@ export default function AdminEvents() {
                 {/* Mobile Card Layout */}
                 <div className="md:hidden space-y-3 p-4">
                   {events.map((event) => (
-                    <Card key={event.id} className="border-2 border-border">
+                    <div key={event.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
-                      <CardContent className="p-4 space-y-3">
+                      <div>
                         <div className="flex items-start justify-between gap-2">
                           <div className="flex-1 min-w-0">
                             <h3 className="font-semibold text-base line-clamp-1">{event.title}</h3>
@@ -379,8 +379,8 @@ export default function AdminEvents() {
                 {/* Mobile Card Layout */}
                 <div className="md:hidden space-y-3 p-4">
                   {blocks.map((block) => (
-                    <Card key={block.id} className="border-2 border-border">
+                    <div key={block.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
-                      <CardContent className="p-4 space-y-3">
+                      <div>
                         <div className="flex items-start justify-between gap-2">
                           <div className="flex-1 min-w-0">
                             <h3 className="font-semibold text-base">

src/pages/admin/AdminMembers.tsx

@@ -158,8 +158,8 @@ export default function AdminMembers() {
             {/* Mobile Card Layout */}
             <div className="md:hidden space-y-3 p-4">
               {members.map((member) => (
-                <Card key={member.id} className="border-2 border-border">
+                <div key={member.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
-                  <CardContent className="p-4 space-y-3">
+                  <div>
                     <div className="flex items-start justify-between gap-2">
                       <div className="flex-1 min-w-0">
                         <h3 className="font-semibold text-base line-clamp-1">{member.name || "Tanpa Nama"}</h3>

src/pages/admin/AdminOrders.tsx

@@ -222,8 +222,8 @@ export default function AdminOrders() {
             {/* Mobile Card Layout */}
             <div className="md:hidden space-y-3 p-4">
               {orders.map((order) => (
-                <Card key={order.id} className="border-2 border-border">
+                <div key={order.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
-                  <CardContent className="p-4 space-y-3">
+                  <div>
                     <div className="flex items-start justify-between gap-2">
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-2 flex-wrap">

src/pages/admin/AdminProducts.tsx

@@ -218,10 +218,9 @@ export default function AdminProducts() {
             </div>
 
             {/* Mobile Card Layout */}
-            <div className="md:hidden space-y-3 p-4">
+            <div className="md:hidden space-y-3">
               {products.map((product) => (
-                <Card key={product.id} className="border-2 border-border">
+                <div key={product.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
-                  <CardContent className="p-4 space-y-3">
                   <div className="flex items-start justify-between gap-2">
                     <div className="flex-1 min-w-0">
                       <h3 className="font-semibold text-base line-clamp-1">{product.title}</h3>
@@ -257,8 +256,7 @@ export default function AdminProducts() {
                       </span>
                     </div>
                   </div>
-                  </CardContent>
+                </div>
-                </Card>
               ))}
               {products.length === 0 && (
                 <div className="text-center py-8 text-muted-foreground">