Phase 7

src/features/owner/components/booking-rules-form.tsx

@@ -158,7 +158,7 @@ export function BookingRulesForm({ initial }: { initial: BookingRuleInput }) {
           </p>
         )}
         {saved && !error && (
-          <p role="status" className="text-accent text-sm font-medium">
+          <p role="status" className="text-accent-foreground text-sm font-medium">
             Saved — the customer booking flow uses these rules immediately. Existing appointments are unaffected.
           </p>
         )}

src/features/owner/components/business-details-form.tsx

@@ -193,7 +193,7 @@ export function BusinessDetailsForm({ initial }: { initial: BusinessDetailsIniti
           </p>
         )}
         {saved && !error && (
-          <p role="status" className="text-accent text-sm font-medium">
+          <p role="status" className="text-accent-foreground text-sm font-medium">
             Saved — changes are live for customers immediately.
           </p>
         )}

src/features/owner/components/loyalty-config-form.tsx

@@ -158,7 +158,12 @@ export function LoyaltyConfigForm({
       <section className="space-y-3">
         <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">Rules &amp; Expiry</h3>
         <div className="rounded-jumbo border-line space-y-5 border bg-white p-6">
-          <Switch label="Apply reward automatically" checked={config.autoApplyReward} onCheckedChange={(v) => set("autoApplyReward", v)} />
+          <Switch
+            label="Apply reward automatically"
+            description="Redemption is always staff-initiated this phase — this setting is saved but has no automatic effect yet."
+            checked={config.autoApplyReward}
+            onCheckedChange={(v) => set("autoApplyReward", v)}
+          />
           <Switch
             label="Require staff approval to redeem"
             description="Redemption already requires a permitted staff member — this is informational only this phase."
@@ -203,7 +208,7 @@ export function LoyaltyConfigForm({
           </p>
         )}
         {saved && !error && (
-          <p role="status" className="text-accent text-sm font-medium">
+          <p role="status" className="text-accent-foreground text-sm font-medium">
             Saved.
           </p>
         )}

src/features/owner/components/opening-hours-form.tsx

@@ -189,7 +189,7 @@ export function OpeningHoursForm({ initialRows }: { initialRows: InitialOpeningH
         </p>
       )}
       {saved && !error && (
-        <p role="status" className="text-accent text-sm font-medium">
+        <p role="status" className="text-accent-foreground text-sm font-medium">
           Saved. The booking engine reflects these hours immediately.
         </p>
       )}

src/features/owner/components/staff-detail-panel.tsx

@@ -162,7 +162,7 @@ export function StaffDetailPanel({
             </p>
           )}
           {roleSaved && !roleError && (
-            <p role="status" className="text-accent text-sm font-medium">
+            <p role="status" className="text-accent-foreground text-sm font-medium">
               Saved.
             </p>
           )}
@@ -206,7 +206,7 @@ export function StaffDetailPanel({
             </p>
           )}
           {servicesSaved && !servicesError && (
-            <p role="status" className="text-accent text-sm font-medium">
+            <p role="status" className="text-accent-foreground text-sm font-medium">
               Saved.
             </p>
           )}
@@ -220,11 +220,19 @@ export function StaffDetailPanel({
 
       <section className="space-y-3">
         <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">Availability</h3>
-        <div className="rounded-jumbo border-line overflow-hidden border bg-white">
+        <div className="rounded-jumbo border-line divide-line divide-y overflow-hidden border bg-white">
           <Link href={`/owner/team/${staffId}/hours`} className="hover:bg-stone flex items-center justify-between px-6 py-4">
             <span className="text-sm font-bold">Working Hours</span>
             <span className="text-muted text-xs">Edit</span>
           </Link>
+          <Link href={`/owner/team/${staffId}/breaks`} className="hover:bg-stone flex items-center justify-between px-6 py-4">
+            <span className="text-sm font-bold">Breaks</span>
+            <span className="text-muted text-xs">Edit</span>
+          </Link>
+          <Link href={`/owner/team/${staffId}/time-off`} className="hover:bg-stone flex items-center justify-between px-6 py-4">
+            <span className="text-sm font-bold">Time Off</span>
+            <span className="text-muted text-xs">Edit</span>
+          </Link>
         </div>
       </section>