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/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">
-                      <CardContent className="p-4 space-y-3">
+                    <div key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
+                      <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">
-                      <CardContent className="p-4 space-y-2">
+                    <div key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
+                      <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">
-                      <CardContent className="p-4 space-y-3">
+                    <div key={event.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
+                      <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">
-                      <CardContent className="p-4 space-y-3">
+                    <div key={block.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
+                      <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">
-                  <CardContent className="p-4 space-y-3">
+                <div key={member.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
+                  <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">
-                  <CardContent className="p-4 space-y-3">
+                <div key={order.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
+                  <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,47 +218,45 @@ 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">
-                  <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>
-                        <p className="text-sm text-muted-foreground capitalize">{product.type}</p>
-                      </div>
-                      <div className="flex gap-1 shrink-0">
-                        <Button variant="ghost" size="sm" onClick={() => handleEdit(product)}>
-                          <Pencil className="w-4 h-4" />
-                        </Button>
-                        <Button variant="ghost" size="sm" onClick={() => handleDelete(product.id)}>
-                          <Trash2 className="w-4 h-4" />
-                        </Button>
+                <div key={product.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
+                  <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>
+                      <p className="text-sm text-muted-foreground capitalize">{product.type}</p>
+                    </div>
+                    <div className="flex gap-1 shrink-0">
+                      <Button variant="ghost" size="sm" onClick={() => handleEdit(product)}>
+                        <Pencil className="w-4 h-4" />
+                      </Button>
+                      <Button variant="ghost" size="sm" onClick={() => handleDelete(product.id)}>
+                        <Trash2 className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-muted-foreground">Harga:</span>
+                      <div className="text-right">
+                        {product.sale_price ? (
+                          <div className="flex items-center gap-2">
+                            <span className="font-bold">{formatIDR(product.sale_price)}</span>
+                            <span className="text-sm text-muted-foreground line-through">{formatIDR(product.price)}</span>
+                          </div>
+                        ) : (
+                          <span className="font-bold">{formatIDR(product.price)}</span>
+                        )}
                       </div>
                     </div>
-                    <div className="space-y-1">
-                      <div className="flex items-center justify-between">
-                        <span className="text-sm text-muted-foreground">Harga:</span>
-                        <div className="text-right">
-                          {product.sale_price ? (
-                            <div className="flex items-center gap-2">
-                              <span className="font-bold">{formatIDR(product.sale_price)}</span>
-                              <span className="text-sm text-muted-foreground line-through">{formatIDR(product.price)}</span>
-                            </div>
-                          ) : (
-                            <span className="font-bold">{formatIDR(product.price)}</span>
-                          )}
-                        </div>
-                      </div>
-                      <div className="flex items-center justify-between">
-                        <span className="text-sm text-muted-foreground">Status:</span>
-                        <span className={product.is_active ? 'text-foreground' : 'text-muted-foreground'}>
-                          {product.is_active ? 'Aktif' : 'Nonaktif'}
-                        </span>
-                      </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-muted-foreground">Status:</span>
+                      <span className={product.is_active ? 'text-foreground' : 'text-muted-foreground'}>
+                        {product.is_active ? 'Aktif' : 'Nonaktif'}
+                      </span>
                     </div>
-                  </CardContent>
-                </Card>
+                  </div>
+                </div>
               ))}
               {products.length === 0 && (
                 <div className="text-center py-8 text-muted-foreground">