From 120bfa5c720658778ef3fd39d5ef131d70644d56 Mon Sep 17 00:00:00 2001
From: Sebastien Melki <sebastien@anghami.com>
Date: Mon, 16 Feb 2026 12:35:46 +0200
Subject: [PATCH] feat(02-02): add CSS styles for theme toggle section in
 settings modal

- Add .theme-toggle-section with border-bottom separator
- Add .modal .section-label for APPEARANCE/PANELS headings (scoped to modal)
- Add .theme-toggle-group flex layout with gap
- Add .theme-option radio button labels with hover/active states
- Hide radio inputs, use :has(input:checked) for active state
- Override .section-label padding inside .theme-toggle-section to avoid double-padding

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/styles/main.css | 52 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/styles/main.css b/src/styles/main.css
index 3d9ea294e..6df201879 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -3807,6 +3807,58 @@ a.prediction-link:hover {
   cursor: pointer;
 }
 
+.theme-toggle-section {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal .section-label {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+  display: block;
+  padding: 0 16px;
+}
+
+.theme-toggle-section .section-label {
+  padding: 0;
+}
+
+.theme-toggle-group {
+  display: flex;
+  gap: 8px;
+}
+
+.theme-option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 11px;
+  color: var(--text-dim);
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.theme-option:hover {
+  border-color: var(--text-dim);
+}
+
+.theme-option.active,
+.theme-option:has(input:checked) {
+  border-color: var(--green);
+  color: var(--text);
+}
+
+.theme-option input[type="radio"] {
+  display: none;
+}
+
 .panel-toggle-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);