style: enhance SettingsLayout and AppointmentSettingsPage for improved layout and spacing

assets/admin/components/layout/SettingsLayout.tsx

@@ -49,11 +49,8 @@ export function menuForRole(role: string | null | undefined): SettingsMenuItem[]
  */
 export default function SettingsLayout({ active, children }: { active: string; children: React.ReactNode }) {
   return (
-    <div className="fade-in" dir="rtl" style={{ width: '100%' }}>
+    <div className="fade-in settings-shell" dir="rtl" style={{ width: '100%' }}>
-      <div
+      <div className="grid grid-cols-1 lg:grid-cols-[248px_minmax(0,1fr)] gap-5">
-        className="grid grid-cols-1 lg:grid-cols-[248px_minmax(0,1fr)] gap-5"
-        style={{ marginInlineStart: 'calc(-1 * var(--gap))' }}
-      >
         <PurchaseSubscriptionSidebar active={active} />
         <div style={{ minWidth: 0 }}>{children}</div>
       </div>

assets/admin/pages/AppointmentSettingsPage.tsx

@@ -27,7 +27,10 @@ export default function AppointmentSettingsPage() {
 
   return (
     <SettingsLayout active="appointment">
-      <div style={{ background: 'var(--surface)', minWidth: 0 }}>
+      <div
+        style={{ background: 'var(--surface)', minWidth: 0 }}
+        className="px-4 py-4 md:px-6 md:py-6 rounded-[var(--r-lg)]"
+      >
         <h1 className="section-title" style={{ marginBottom: 16 }}>مدیریت نوبت دهی</h1>
 
         <FreeVisitPrice />

assets/admin/styles.css

@@ -317,6 +317,9 @@ body {
 }
 .app[data-collapsed="true"] .main { margin-right: var(--collapsed-w); }
 .content { padding: var(--gap); max-width: 1480px; width: 100%; margin: 0 auto; }
+/* Settings pages go full-bleed: no max-width centering, and the settings menu
+   sits flush against the main nav (drop the inline-start / right padding). */
+.content:has(> .settings-shell) { max-width: none; padding-inline-start: 0; }
 
 /* ── Sidebar ─────────────────────────────────────────────────── */
 .sidebar {