fix: mobile UX overhaul — collapsible filters, settings nav, responsive layout

- Add Settings link to desktop nav bar for admin users
- Rewrite Settings page from table layout to responsive card list (fixes unusable mobile state)
- Filter bar (Dashboard + Comparison): collapsible panel on mobile via display:contents trick; stacked full-width dropdowns replace horizontal scroll
- Active filter count badge shown in collapsed filter header
- AltMultiSelect dropdowns go full-width on mobile to prevent viewport overflow
- Chart control separators hidden on mobile to avoid crowding
- Metric grid: 2-col at ≤700px, 1-col at ≤480px
- Comparison period cards: smaller font and tighter padding at ≤680px
- Page shell padding reduced on mobile (48px→20px top, 24px→16px sides)
- Settings page gets correct 80px bottom padding for mobile nav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.css

@@ -1360,33 +1360,208 @@ table tbody tr:hover {
   font-size: 0.8125rem;
   font-weight: 600;
   border: 1px solid;
+  white-space: nowrap;
 }
 
-.season-edit-name {
+/* Settings card list */
+.settings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.settings-loading {
+  text-align: center;
+  padding: 24px;
+  color: var(--text-muted);
+}
+
+.settings-item {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.settings-item--editing {
+  border-color: var(--accent);
+}
+
+.settings-item-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  flex-wrap: wrap;
+}
+
+.settings-dates {
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.settings-item-actions {
   display: flex;
   gap: 6px;
-  align-items: center;
+  flex-shrink: 0;
 }
 
-.season-edit-name input[type="text"] {
+.settings-item-form {
+  padding: 14px 16px;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Form primitives used in Settings */
+.form-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+
+.form-input {
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  background: var(--surface);
+  color: var(--text-primary);
   flex: 1;
-  min-width: 80px;
+  min-width: 120px;
 }
 
-.season-edit-name input[type="color"] {
-  width: 32px;
-  height: 32px;
+.form-input--sm {
+  flex: 0 0 80px;
+  min-width: 0;
+}
+
+.form-color {
+  width: 38px;
+  height: 38px;
   padding: 2px;
   border: 1px solid var(--border);
   border-radius: 6px;
   cursor: pointer;
+  flex-shrink: 0;
 }
 
-.season-actions {
+.form-field {
   display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 140px;
+}
+
+.form-label {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.form-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Add-new form strip at bottom of each card */
+.settings-add-form {
+  border-top: 2px dashed var(--border);
+  padding-top: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.settings-add-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+/* User item */
+.settings-user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.settings-user-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.settings-user-pin {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  background: var(--bg);
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+
+.settings-user-role {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  text-transform: capitalize;
+}
+
+.settings-user-access {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+/* Access checkboxes in edit panel */
+.access-columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 16px;
+}
+
+.access-col-title {
+  font-weight: 600;
+  font-size: 0.8125rem;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
   gap: 6px;
 }
 
+.access-check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+  cursor: pointer;
+  font-size: 0.875rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.access-check:last-child {
+  border-bottom: none;
+}
+
+.access-check input[type="checkbox"] {
+  width: 17px;
+  height: 17px;
+  cursor: pointer;
+  accent-color: var(--accent);
+  flex-shrink: 0;
+}
+
 .access-badge {
   display: inline-block;
   font-size: 0.7rem;
@@ -1403,13 +1578,14 @@ table tbody tr:hover {
 }
 
 .btn-small {
-  padding: 4px 10px;
+  padding: 6px 12px;
   font-size: 0.75rem;
   border-radius: 6px;
   border: 1px solid var(--border);
   background: var(--surface);
   color: var(--text-primary);
   cursor: pointer;
+  white-space: nowrap;
 }
 
 .btn-small:hover {
@@ -1432,27 +1608,6 @@ table tbody tr:hover {
   color: white;
 }
 
-tr.add-row td {
-  border-top: 2px dashed var(--border);
-  padding-top: 12px;
-}
-
-tr.editing td {
-  background: var(--hover);
-}
-
-.settings-page input[type="text"],
-.settings-page input[type="number"],
-.settings-page input[type="date"],
-.settings-page select {
-  padding: 8px 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  font-size: 0.8125rem;
-  background: var(--surface);
-  color: var(--text-primary);
-}
-
 .period-display {
   background: var(--bg);
   padding: 16px;
@@ -2092,10 +2247,21 @@ tr.editing td {
   
   /* Add padding to main content for bottom nav */
   .dashboard,
-  .comparison {
+  .comparison,
+  .settings-page {
     padding-bottom: 80px;
   }
 
+  .settings-page {
+    padding-inline: 16px;
+    padding-top: 20px;
+  }
+
+  .settings-item-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+  
   .data-source-toggle {
     margin-left: 8px;
     padding: 2px;
@@ -2556,9 +2722,16 @@ html[dir="rtl"] .exportable-chart-wrapper .chart-export-btn.visible {
 
 /* ── filter bar ── */
 .alt-filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:32px; padding:14px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
+/* display:contents makes head/body transparent to parent flex on desktop */
+.alt-filter-head { display:contents; }
+.alt-filter-body { display:contents; }
 .alt-filter-label { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); white-space:nowrap; }
 .alt-filter-sep { width:1px; height:20px; background:var(--border); flex-shrink:0; }
 .alt-filter-spacer { flex:1; min-width:0; }
+.alt-filter-toggle { display:none; } /* hidden on desktop, shown on mobile */
+.alt-filter-badge { display:none; } /* hidden on desktop, active count shown on mobile */
+.alt-filter-chevron { transition:transform .2s; }
+.alt-filter-chevron--open { transform:rotate(180deg); }
 .alt-vat-toggle { display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
 .alt-vat-opt { font-family:var(--alt-body-font); font-size:.75rem; font-weight:500; padding:5px 10px; background:var(--surface); color:var(--text-muted); cursor:pointer; border:none; transition:background .1s,color .1s; }
 .alt-vat-opt--on { background:var(--accent); color:var(--text-inverse); }
@@ -2600,18 +2773,74 @@ html[dir="rtl"] .exportable-chart-wrapper .chart-export-btn.visible {
 /* ── charts (Comparison) — single-column grid, taller wrap ── */
 .alt-charts { display:grid; grid-template-columns:1fr; gap:24px; }
 
-/* ── responsive (Dashboard) ── */
+/* ── responsive (Dashboard + Comparison) ── */
 @media (max-width:700px) {
+  /* Page shell */
+  .alt-page { padding:20px 16px 90px; }
+  .alt-page-title { font-size:1.75rem; }
+  .alt-page-sub { margin-bottom:24px; }
+
+  /* Filter bar — switch to collapsible stacked layout */
+  .alt-filter-bar { flex-direction:column; align-items:stretch; padding:0; gap:0; flex-wrap:nowrap; }
+  .alt-filter-head {
+    display:flex; align-items:center; gap:8px;
+    padding:12px 14px;
+  }
+  .alt-filter-body {
+    display:none; flex-direction:column; gap:10px;
+    padding:12px 14px; border-top:1px solid var(--border);
+  }
+  .alt-filter-bar--open .alt-filter-body { display:flex; }
+
+  /* Toggle button */
+  .alt-filter-toggle {
+    display:flex; align-items:center; justify-content:center;
+    width:30px; height:30px; margin-left:auto; flex-shrink:0;
+    border:1px solid var(--border); border-radius:8px;
+    background:var(--surface); color:var(--text-muted); cursor:pointer;
+    transition:border-color .15s, color .15s;
+  }
+  .alt-filter-toggle:hover { border-color:var(--accent); color:var(--accent); }
+
+  /* Active-count badge */
+  .alt-filter-badge {
+    display:inline-flex; align-items:center; justify-content:center;
+    min-width:18px; height:18px; padding:0 5px; border-radius:9px;
+    background:var(--accent); color:var(--text-inverse);
+    font-size:.6875rem; font-weight:700; line-height:1;
+  }
+
+  /* Full-width dropdowns */
+  .alt-filter-body .altms { width:100%; }
+  .alt-filter-body .altms-trigger { width:100%; justify-content:space-between; box-sizing:border-box; }
+  .alt-filter-body .altms-label { max-width:none; flex:1; text-align:start; }
+  .alt-filter-body .altms-dropdown { width:100%; min-width:0; }
+
+  /* Hide vertical separator and spacer in stacked layout */
+  .alt-filter-body .alt-filter-sep { display:none; }
+  .alt-filter-body .alt-filter-spacer { display:none; }
+
+  /* VAT toggle: align to start */
+  .alt-filter-body .alt-vat-toggle { align-self:flex-start; }
+
+  /* Charts grid */
   .dalt-hero-name { font-size:1.875rem; }
   .dalt-charts-grid { grid-template-columns:1fr; }
   .dalt-chart-full { grid-column:auto; }
+
+  /* Metric cards — 2 col at 700px */
   .alt-metrics { grid-template-columns:1fr 1fr; }
-  .alt-page-title { font-size:1.75rem; }
-  .altms-label { max-width:100px; }
-  .alt-filter-bar { overflow-x:auto; flex-wrap:nowrap; padding-inline:12px; -webkit-overflow-scrolling:touch; }
-  .altms-trigger { flex-shrink:0; }
-  .alt-vat-toggle { flex-shrink:0; }
-  .alt-filter-spacer { display:none; }
+
+  /* Chart controls — allow separator to break line */
+  .alt-chart-controls { row-gap:4px; }
+  .alt-ctrl-sep { display:none; }
+}
+
+/* Very small screens */
+@media (max-width:480px) {
+  .alt-metrics { grid-template-columns:1fr; }
+  .alt-metric { padding:18px 16px; }
+  .alt-metric-value { font-size:1.5rem; }
 }
 
 /* ── responsive (Comparison) ── */
@@ -2620,7 +2849,8 @@ html[dir="rtl"] .exportable-chart-wrapper .chart-export-btn.visible {
   .alt-card--current,.alt-card--previous { border-radius:var(--radius); }
   .alt-vs { flex-direction:row; padding:10px 0; }
   .alt-vs-line { position:static; width:100%; height:1px; }
-  .alt-period-name { font-size:1.75rem; }
+  .alt-period-name { font-size:1.5rem; }
+  .alt-card-body { padding:16px 18px 14px; }
   .alt-chart-header { flex-direction:column; }
 }
 

src/App.tsx

@@ -237,6 +237,14 @@ function App() {
                 </svg>
                 {t('nav.comparison')}
               </NavLink>
+              {userRole === 'admin' && (
+                <NavLink to="/settings">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                  </svg>
+                  {t('nav.settings')}
+                </NavLink>
+              )}
               <span className="nav-sep" aria-hidden="true" />
               {isOffline && (
                 <span className="offline-badge" title={cacheInfo ? `Cached: ${new Date(cacheInfo.timestamp || '').toLocaleString()}` : ''}>

src/components/Comparison.tsx

@@ -200,6 +200,8 @@ export default function PeriodSelectorDemo({ data, seasons, includeVAT, allowedM
   const prevCapture  = prevPilgrims ? prevM.visitors/prevPilgrims*100 : null;
 
   const hasFilters = selDistricts.length>0 || selChannels.length>0 || selMuseums.length>0;
+  const activeFilterCount = selDistricts.length + selChannels.length + selMuseums.length;
+  const [filtersOpen, setFiltersOpen] = useState(false);
 
   return (
     <div
@@ -231,14 +233,24 @@ export default function PeriodSelectorDemo({ data, seasons, includeVAT, allowedM
           onChange={(s,e) => { setPrevStart(s); setPrevEnd(e); }} availableYears={availableYears} L={L} />
       </div>
 
-      <div className="alt-filter-bar">
+      <div className={`alt-filter-bar${filtersOpen ? ' alt-filter-bar--open' : ''}`}>
+        <div className="alt-filter-head">
           <span className="alt-filter-label">{L.filter}</span>
+          {activeFilterCount > 0 && <span className="alt-filter-badge">{activeFilterCount}</span>}
+          <button type="button" className="alt-filter-toggle" onClick={() => setFiltersOpen(v => !v)} aria-expanded={filtersOpen} aria-label="Toggle filters">
+            <svg className={`alt-filter-chevron${filtersOpen ? ' alt-filter-chevron--open' : ''}`} width="14" height="14" viewBox="0 0 10 10" fill="none">
+              <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </button>
+        </div>
+        <div className="alt-filter-body">
           <div className="alt-filter-sep" />
           <AltMultiSelect value={selDistricts} options={districts} onChange={setSelDistricts} allLabel={L.allDistricts} countLabel={L.countDistricts} clearLabel={L.clearSel} />
           <AltMultiSelect value={selChannels}  options={channels}  onChange={setSelChannels}  allLabel={L.allChannels}  countLabel={L.countChannels}  clearLabel={L.clearSel} />
           <AltMultiSelect value={selMuseums}   options={museums}   onChange={setSelMuseums}   allLabel={L.allMuseums}   countLabel={L.countMuseums}   clearLabel={L.clearSel} />
           {hasFilters && <button type="button" className="alt-filter-reset" onClick={() => { setSelDistricts([]); setSelChannels([]); setSelMuseums([]); }}>{L.reset}</button>}
         </div>
+      </div>
 
       <div className="alt-section-heading"><h2>{L.keyMetrics}</h2></div>
       <div className="alt-metrics">

src/components/Dashboard.tsx

@@ -184,6 +184,8 @@ export default function DashboardDemo({ data, seasons: _seasons, includeVAT, set
   const metricOpts = [{ value:'revenue', label:L.revenue }, { value:'visitors', label:L.visitors }, { value:'tickets', label:L.tickets }];
   const granOpts   = [{ value:'day', label:L.daily }, { value:'week', label:L.weekly }, { value:'month', label:L.monthly }];
   const hasFilters = selDistricts.length>0 || selChannels.length>0 || selMuseums.length>0;
+  const activeFilterCount = selDistricts.length + selChannels.length + selMuseums.length;
+  const [filtersOpen, setFiltersOpen] = useState(false);
 
   return (
     <div
@@ -200,8 +202,17 @@ export default function DashboardDemo({ data, seasons: _seasons, includeVAT, set
 
       <PeriodHero start={start} end={end} onChange={(s,e) => { setStart(s); setEnd(e); }} availableYears={availableYears} L={L} />
 
-      <div className="alt-filter-bar">
+      <div className={`alt-filter-bar${filtersOpen ? ' alt-filter-bar--open' : ''}`}>
+        <div className="alt-filter-head">
           <span className="alt-filter-label">{L.filter}</span>
+          {activeFilterCount > 0 && <span className="alt-filter-badge">{activeFilterCount}</span>}
+          <button type="button" className="alt-filter-toggle" onClick={() => setFiltersOpen(v => !v)} aria-expanded={filtersOpen} aria-label="Toggle filters">
+            <svg className={`alt-filter-chevron${filtersOpen ? ' alt-filter-chevron--open' : ''}`} width="14" height="14" viewBox="0 0 10 10" fill="none">
+              <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </button>
+        </div>
+        <div className="alt-filter-body">
           <div className="alt-filter-sep" />
           <AltMultiSelect value={selDistricts} options={allDistricts} onChange={setSelDistricts} allLabel={L.allDistricts} countLabel={L.countDistricts} clearLabel={L.clearSel} />
           <AltMultiSelect value={selChannels}  options={allChannels}  onChange={setSelChannels}  allLabel={L.allChannels}  countLabel={L.countChannels}  clearLabel={L.clearSel} />
@@ -213,6 +224,7 @@ export default function DashboardDemo({ data, seasons: _seasons, includeVAT, set
             <button type="button" className={`alt-vat-opt${includeVAT ?' alt-vat-opt--on':''}`} onClick={() => setIncludeVAT(true)}>{L.inclVAT}</button>
           </div>
         </div>
+      </div>
 
       <div className="alt-section-heading"><h2>{L.keyMetrics}</h2></div>
       <div className="alt-metrics">

src/components/Settings.tsx

@@ -6,13 +6,13 @@ import type { Season } from '../types';
 
 const DEFAULT_COLORS = ['#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899'];
 
-interface SeasonRowProps {
+interface SeasonItemProps {
   season: Season;
   onSave: (id: number, data: Partial<Season>) => Promise<void>;
   onDelete: (id: number) => Promise<void>;
 }
 
-function SeasonRow({ season, onSave, onDelete }: SeasonRowProps) {
+function SeasonItem({ season, onSave, onDelete }: SeasonItemProps) {
   const [editing, setEditing] = useState(false);
   const [form, setForm] = useState(season);
 
@@ -21,48 +21,46 @@ function SeasonRow({ season, onSave, onDelete }: SeasonRowProps) {
     setEditing(false);
   };
 
-  if (!editing) {
   return (
-      <tr>
-        <td>
+    <div className={`settings-item${editing ? ' settings-item--editing' : ''}`}>
+      <div className="settings-item-row">
         <span className="season-chip" style={{ backgroundColor: season.Color + '20', color: season.Color, borderColor: season.Color }}>
           {season.Name} {season.HijriYear}
         </span>
-        </td>
-        <td>{season.StartDate}</td>
-        <td>{season.EndDate}</td>
-        <td>
-          <div className="season-actions">
-            <button className="btn-small" onClick={() => setEditing(true)}>Edit</button>
+        <span className="settings-dates">{season.StartDate} → {season.EndDate}</span>
+        <div className="settings-item-actions">
+          <button className="btn-small" onClick={() => { setForm(season); setEditing(true); }}>Edit</button>
           <button className="btn-small btn-danger" onClick={() => onDelete(season.Id!)}>Delete</button>
         </div>
-        </td>
-      </tr>
-    );
-  }
-
-  return (
-    <tr className="editing">
-      <td>
-        <div className="season-edit-name">
-          <input type="text" value={form.Name} onChange={e => setForm({ ...form, Name: e.target.value })} placeholder="Name" />
-          <input type="number" value={form.HijriYear} onChange={e => setForm({ ...form, HijriYear: parseInt(e.target.value) || 0 })} placeholder="Year" style={{ width: 80 }} />
-          <input type="color" value={form.Color} onChange={e => setForm({ ...form, Color: e.target.value })} />
       </div>
-      </td>
-      <td><input type="date" value={form.StartDate} onChange={e => setForm({ ...form, StartDate: e.target.value })} /></td>
-      <td><input type="date" value={form.EndDate} onChange={e => setForm({ ...form, EndDate: e.target.value })} /></td>
-      <td>
-        <div className="season-actions">
+      {editing && (
+        <div className="settings-item-form">
+          <div className="form-row">
+            <input className="form-input" type="text" value={form.Name} onChange={e => setForm({ ...form, Name: e.target.value })} placeholder="Name" />
+            <input className="form-input form-input--sm" type="number" value={form.HijriYear} onChange={e => setForm({ ...form, HijriYear: parseInt(e.target.value) || 0 })} placeholder="Hijri Year" />
+            <input type="color" className="form-color" value={form.Color} onChange={e => setForm({ ...form, Color: e.target.value })} />
+          </div>
+          <div className="form-row">
+            <label className="form-field">
+              <span className="form-label">Start</span>
+              <input className="form-input" type="date" value={form.StartDate} onChange={e => setForm({ ...form, StartDate: e.target.value })} />
+            </label>
+            <label className="form-field">
+              <span className="form-label">End</span>
+              <input className="form-input" type="date" value={form.EndDate} onChange={e => setForm({ ...form, EndDate: e.target.value })} />
+            </label>
+          </div>
+          <div className="form-actions">
             <button className="btn-small btn-primary" onClick={handleSave}>Save</button>
             <button className="btn-small" onClick={() => setEditing(false)}>Cancel</button>
           </div>
-      </td>
-    </tr>
+        </div>
+      )}
+    </div>
   );
 }
 
-interface UserRowProps {
+interface UserItemProps {
   user: User;
   allMuseums: string[];
   allChannels: string[];
@@ -70,7 +68,7 @@ interface UserRowProps {
   onDelete: (id: number) => Promise<void>;
 }
 
-function UserRow({ user, allMuseums, allChannels, onUpdate, onDelete }: UserRowProps) {
+function UserItem({ user, allMuseums, allChannels, onUpdate, onDelete }: UserItemProps) {
   const [editing, setEditing] = useState(false);
   const [allowedMuseums, setAllowedMuseums] = useState<string[]>(() => {
     try { return JSON.parse(user.AllowedMuseums || '[]'); } catch { return []; }
@@ -91,17 +89,18 @@ function UserRow({ user, allMuseums, allChannels, onUpdate, onDelete }: UserRowP
   };
 
   const isAdmin = user.Role === 'admin';
-
   const museumCount = (() => { try { const a = JSON.parse(user.AllowedMuseums || '[]'); return Array.isArray(a) ? a.length : 0; } catch { return 0; } })();
   const channelCount = (() => { try { const a = JSON.parse(user.AllowedChannels || '[]'); return Array.isArray(a) ? a.length : 0; } catch { return 0; } })();
 
-  if (!editing) {
   return (
-      <tr key={user.Id}>
-        <td>{user.Name}</td>
-        <td><code>{user.PIN}</code></td>
-        <td>{user.Role}</td>
-        <td>
+    <div className={`settings-item${editing ? ' settings-item--editing' : ''}`}>
+      <div className="settings-item-row">
+        <div className="settings-user-info">
+          <span className="settings-user-name">{user.Name}</span>
+          <code className="settings-user-pin">{user.PIN}</code>
+          <span className="settings-user-role">{user.Role}</span>
+        </div>
+        <div className="settings-user-access">
           {isAdmin ? (
             <span className="access-badge access-badge--full">Full access</span>
           ) : (
@@ -110,53 +109,45 @@ function UserRow({ user, allMuseums, allChannels, onUpdate, onDelete }: UserRowP
               <span className="access-badge">{channelCount === 0 ? 'All channels' : `${channelCount} channels`}</span>
             </>
           )}
-        </td>
-        <td>
-          <div className="season-actions">
+        </div>
+        <div className="settings-item-actions">
           {!isAdmin && <button className="btn-small" onClick={() => setEditing(true)}>Edit access</button>}
           <button className="btn-small btn-danger" onClick={() => onDelete(user.Id!)}>Delete</button>
         </div>
-        </td>
-      </tr>
-    );
-  }
-
-  return (
-    <tr className="editing">
-      <td colSpan={5}>
-        <div style={{ padding: '12px 4px' }}>
-          <strong>{user.Name}</strong>
-          <div style={{ display: 'flex', gap: 32, marginTop: 12, flexWrap: 'wrap' }}>
-            <div>
-              <div style={{ fontWeight: 600, marginBottom: 8 }}>
-                Allowed Events {allowedMuseums.length === 0 && <span className="access-badge access-badge--full">All</span>}
+      </div>
+      {editing && (
+        <div className="settings-item-form">
+          <div className="access-columns">
+            <div className="access-col">
+              <div className="access-col-title">
+                Events {allowedMuseums.length === 0 && <span className="access-badge access-badge--full">All</span>}
               </div>
               {allMuseums.map(m => (
-                <label key={m} style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6, cursor: 'pointer' }}>
+                <label key={m} className="access-check">
                   <input type="checkbox" checked={allowedMuseums.includes(m)} onChange={() => toggleItem(allowedMuseums, setAllowedMuseums, m)} />
                   {m}
                 </label>
               ))}
             </div>
-            <div>
-              <div style={{ fontWeight: 600, marginBottom: 8 }}>
-                Allowed Channels {allowedChannels.length === 0 && <span className="access-badge access-badge--full">All</span>}
+            <div className="access-col">
+              <div className="access-col-title">
+                Channels {allowedChannels.length === 0 && <span className="access-badge access-badge--full">All</span>}
               </div>
               {allChannels.map(c => (
-                <label key={c} style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6, cursor: 'pointer' }}>
+                <label key={c} className="access-check">
                   <input type="checkbox" checked={allowedChannels.includes(c)} onChange={() => toggleItem(allowedChannels, setAllowedChannels, c)} />
                   {c}
                 </label>
               ))}
             </div>
           </div>
-          <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
+          <div className="form-actions">
             <button className="btn-small btn-primary" onClick={handleSave}>Save</button>
             <button className="btn-small" onClick={() => setEditing(false)}>Cancel</button>
           </div>
         </div>
-      </td>
-    </tr>
+      )}
+    </div>
   );
 }
 
@@ -173,7 +164,7 @@ function Settings({ onSeasonsChange, allMuseums, allChannels }: SettingsProps) {
 
   const [newSeason, setNewSeason] = useState<Omit<Season, 'Id'>>({
     Name: '',
-    HijriYear: new Date().getFullYear() - 579, // rough Gregorian → Hijri
+    HijriYear: new Date().getFullYear() - 579,
     StartDate: '',
     EndDate: '',
     Color: DEFAULT_COLORS[0],
@@ -238,42 +229,36 @@ function Settings({ onSeasonsChange, allMuseums, allChannels }: SettingsProps) {
         <h2>{t('settings.seasons')}</h2>
         <p className="settings-hint">{t('settings.seasonsHint')}</p>
 
-        <div className="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>{t('settings.seasonName')}</th>
-                <th>{t('settings.startDate')}</th>
-                <th>{t('settings.endDate')}</th>
-                <th>{t('settings.actions')}</th>
-              </tr>
-            </thead>
-            <tbody>
+        <div className="settings-list">
           {loading ? (
-                <tr><td colSpan={4} style={{ textAlign: 'center', padding: 24 }}>Loading...</td></tr>
+            <div className="settings-loading">Loading...</div>
           ) : (
             seasons.map(s => (
-                  <SeasonRow key={s.Id} season={s} onSave={handleSave} onDelete={handleDelete} />
+              <SeasonItem key={s.Id} season={s} onSave={handleSave} onDelete={handleDelete} />
             ))
           )}
-              <tr className="add-row">
-                <td>
-                  <div className="season-edit-name">
-                    <input type="text" value={newSeason.Name} onChange={e => setNewSeason({ ...newSeason, Name: e.target.value })} placeholder={t('settings.namePlaceholder')} />
-                    <input type="number" value={newSeason.HijriYear} onChange={e => setNewSeason({ ...newSeason, HijriYear: parseInt(e.target.value) || 0 })} style={{ width: 80 }} />
-                    <input type="color" value={newSeason.Color} onChange={e => setNewSeason({ ...newSeason, Color: e.target.value })} />
         </div>
-                </td>
-                <td><input type="date" value={newSeason.StartDate} onChange={e => setNewSeason({ ...newSeason, StartDate: e.target.value })} /></td>
-                <td><input type="date" value={newSeason.EndDate} onChange={e => setNewSeason({ ...newSeason, EndDate: e.target.value })} /></td>
-                <td>
+
+        <div className="settings-add-form">
+          <div className="settings-add-title">{t('settings.add')} Season</div>
+          <div className="form-row">
+            <input className="form-input" type="text" value={newSeason.Name} onChange={e => setNewSeason({ ...newSeason, Name: e.target.value })} placeholder={t('settings.namePlaceholder')} />
+            <input className="form-input form-input--sm" type="number" value={newSeason.HijriYear} onChange={e => setNewSeason({ ...newSeason, HijriYear: parseInt(e.target.value) || 0 })} />
+            <input type="color" className="form-color" value={newSeason.Color} onChange={e => setNewSeason({ ...newSeason, Color: e.target.value })} />
+          </div>
+          <div className="form-row">
+            <label className="form-field">
+              <span className="form-label">{t('settings.startDate')}</span>
+              <input className="form-input" type="date" value={newSeason.StartDate} onChange={e => setNewSeason({ ...newSeason, StartDate: e.target.value })} />
+            </label>
+            <label className="form-field">
+              <span className="form-label">{t('settings.endDate')}</span>
+              <input className="form-input" type="date" value={newSeason.EndDate} onChange={e => setNewSeason({ ...newSeason, EndDate: e.target.value })} />
+            </label>
+          </div>
           <button className="btn-small btn-primary" onClick={handleCreate} disabled={!newSeason.Name || !newSeason.StartDate || !newSeason.EndDate}>
             {t('settings.add')}
           </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
         </div>
       </div>
 
@@ -281,20 +266,9 @@ function Settings({ onSeasonsChange, allMuseums, allChannels }: SettingsProps) {
         <h2>{t('settings.users')}</h2>
         <p className="settings-hint">{t('settings.usersHint')}</p>
 
-        <div className="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>{t('settings.userName')}</th>
-                <th>{t('settings.userPin')}</th>
-                <th>{t('settings.userRole')}</th>
-                <th>Access</th>
-                <th>{t('settings.actions')}</th>
-              </tr>
-            </thead>
-            <tbody>
+        <div className="settings-list">
           {users.map(u => (
-                <UserRow
+            <UserItem
               key={u.Id}
               user={u}
               allMuseums={allMuseums}
@@ -303,21 +277,18 @@ function Settings({ onSeasonsChange, allMuseums, allChannels }: SettingsProps) {
               onDelete={async (id) => { await deleteUser(id); await loadUsers(); }}
             />
           ))}
-              <tr className="add-row">
-                <td>
-                  <input type="text" value={newUser.Name} onChange={e => setNewUser({ ...newUser, Name: e.target.value })} placeholder={t('settings.userNamePlaceholder')} />
-                </td>
-                <td>
-                  <input type="text" value={newUser.PIN} onChange={e => setNewUser({ ...newUser, PIN: e.target.value })} placeholder="PIN" />
-                </td>
-                <td>
-                  <select value={newUser.Role} onChange={e => setNewUser({ ...newUser, Role: e.target.value })}>
+        </div>
+
+        <div className="settings-add-form">
+          <div className="settings-add-title">{t('settings.add')} User</div>
+          <div className="form-row">
+            <input className="form-input" type="text" value={newUser.Name} onChange={e => setNewUser({ ...newUser, Name: e.target.value })} placeholder={t('settings.userNamePlaceholder')} />
+            <input className="form-input form-input--sm" type="text" value={newUser.PIN} onChange={e => setNewUser({ ...newUser, PIN: e.target.value })} placeholder="PIN" />
+            <select className="form-input form-input--sm" value={newUser.Role} onChange={e => setNewUser({ ...newUser, Role: e.target.value })}>
               <option value="viewer">Viewer</option>
               <option value="admin">Admin</option>
             </select>
-                </td>
-                <td></td>
-                <td>
+          </div>
           <button className="btn-small btn-primary" onClick={async () => {
             if (!newUser.Name || !newUser.PIN) return;
             await createUser(newUser);
@@ -326,10 +297,6 @@ function Settings({ onSeasonsChange, allMuseums, allChannels }: SettingsProps) {
           }} disabled={!newUser.Name || !newUser.PIN}>
             {t('settings.add')}
           </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
         </div>
       </div>
     </div>