/* Admin theme — aligns with the client app's warm-beige Tajawal look. * * Strategy: keep Tailwind 2 markup, override what's visible. Tailwind's * dark-bg / dark-text utility classes (bg-gray-*, text-gray-*) all get * remapped to a warmer palette via the class overrides below, plus a * handful of component-level rules for .card, .btn-*, .input, .nav-item, * .badge, .stat-card, .modal, .file-drop. * * Loaded AFTER tailwind.min.css in the admin index so the * specificity-equal selectors win on cascade. */ :root { --m-bg: #FAF9F6; --m-bg-card: #FFFFFF; --m-bg-hover: #F3F1EC; --m-bg-soft: #F5F4F0; --m-bg-dark: #0F766E; /* sidebar */ --m-primary: #0F766E; --m-primary-hover: #0D6660; --m-primary-light: #F0FDFA; --m-accent: #D97706; --m-success: #059669; --m-success-light: #ECFDF5; --m-danger: #DC2626; --m-danger-light: #FEF2F2; --m-warn: #B45309; --m-warn-light: #FFFBEB; --m-text: #111827; --m-text-secondary: #4B5563; --m-text-muted: #9CA3AF; --m-border: #E5E1DB; --m-border-light: #F0EDE7; } /* ── Base ─────────────────────────────────────────────────────── */ body, .bg-gray-900 { background: var(--m-bg) !important; color: var(--m-text) !important; } * { font-family: 'Tajawal', sans-serif; } html[lang="en"] *, input.input, textarea.input, select.input, table { font-family: 'Inter', 'Tajawal', sans-serif; } /* ── Sidebar (keeps a darker accent for visual hierarchy) ──── */ aside { background: var(--m-bg-card) !important; border-left: 1px solid var(--m-border) !important; border-right: 0 !important; color: var(--m-text) !important; } aside h1 { color: var(--m-primary) !important; } aside .text-gray-400, aside .text-gray-500 { color: var(--m-text-secondary) !important; } /* Nav items */ .nav-item { color: var(--m-text-secondary) !important; border-radius: 8px !important; transition: all 0.15s ease; } .nav-item:hover, .nav-item.active { background: var(--m-primary-light) !important; color: var(--m-primary) !important; } /* ── Cards & general containers ───────────────────────────── */ .card, .bg-gray-800, .bg-gray-700 { background: var(--m-bg-card) !important; border: 1px solid var(--m-border) !important; color: var(--m-text) !important; } .card-header, .bg-gray-700.card-header { background: var(--m-bg-soft) !important; border-bottom: 1px solid var(--m-border) !important; color: var(--m-text) !important; } .stat-card { background: var(--m-bg-card) !important; border: 1px solid var(--m-border) !important; color: var(--m-text) !important; border-radius: 12px !important; } /* ── Buttons ──────────────────────────────────────────────── */ .btn-primary { background: var(--m-primary) !important; color: #fff !important; font-weight: 600; } .btn-primary:hover { background: var(--m-primary-hover) !important; } .btn-success { background: var(--m-success) !important; color: #fff !important; } .btn-danger { background: var(--m-danger) !important; color: #fff !important; } .btn-secondary, button.bg-gray-700, button.bg-gray-600 { background: var(--m-bg-soft) !important; color: var(--m-text) !important; border: 1px solid var(--m-border) !important; } .btn-secondary:hover, button.bg-gray-700:hover, button.bg-gray-600:hover { background: var(--m-bg-hover) !important; } /* ── Inputs ──────────────────────────────────────────────── */ .input, input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], textarea, select { background: var(--m-bg-soft) !important; border: 1px solid var(--m-border) !important; color: var(--m-text) !important; border-radius: 8px !important; } .input:focus, input:focus, textarea:focus, select:focus { border-color: var(--m-primary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(15,118,110,0.15) !important; } /* ── Tables ──────────────────────────────────────────────── */ table { color: var(--m-text) !important; } thead tr, th { background: var(--m-bg-soft) !important; color: var(--m-text-secondary) !important; border-bottom: 1px solid var(--m-border) !important; } tr.border-b, tr.border-b.border-gray-800 { border-color: var(--m-border) !important; } tr.hover\:bg-gray-800:hover { background: var(--m-bg-hover) !important; } /* ── Text utility colors ────────────────────────────────── */ .text-white { color: var(--m-text) !important; } .text-gray-100, .text-gray-200, .text-gray-300, .text-gray-400 { color: var(--m-text-secondary) !important; } .text-gray-500, .text-gray-600 { color: var(--m-text-muted) !important; } .text-blue-400, .text-blue-300 { color: var(--m-primary) !important; } .text-green-400 { color: var(--m-success) !important; } .text-red-400, .text-red-300 { color: var(--m-danger) !important; } .text-yellow-400 { color: var(--m-warn) !important; } /* ── Badges (admin uses dark-bg variants) ──────────────── */ .badge { font-weight: 600; padding: 3px 10px !important; border-radius: 999px !important; } .badge-green { background: var(--m-success-light) !important; color: var(--m-success) !important; } .badge-yellow { background: var(--m-warn-light) !important; color: var(--m-warn) !important; } .badge-red { background: var(--m-danger-light) !important; color: var(--m-danger) !important; } .badge-blue { background: var(--m-primary-light) !important; color: var(--m-primary) !important; } /* ── Modals & file drop ─────────────────────────────────── */ .modal-overlay { background: rgba(15,23,42,0.45) !important; } .modal { background: var(--m-bg-card) !important; border: 1px solid var(--m-border) !important; color: var(--m-text) !important; } .file-drop { border-color: var(--m-border) !important; background: var(--m-bg-soft) !important; color: var(--m-text-secondary) !important; } .file-drop:hover, .file-drop.dragover { border-color: var(--m-primary) !important; background: var(--m-primary-light) !important; } /* ── Tabs ───────────────────────────────────────────────── */ .tab-btn { color: var(--m-text-muted) !important; } .tab-btn.active { border-color: var(--m-primary) !important; color: var(--m-primary) !important; } /* ── Message bubbles in admin conversation viewer ───── */ .msg-bubble.msg-in { background: var(--m-bg-soft) !important; color: var(--m-text) !important; } .msg-bubble.msg-out { background: var(--m-primary-light) !important; color: var(--m-text) !important; } /* ── Toasts ─────────────────────────────────────────────── */ .toast.bg-green-700 { background: var(--m-success) !important; color: #fff !important; } .toast.bg-red-700 { background: var(--m-danger) !important; color: #fff !important; } /* ── Borders ────────────────────────────────────────────── */ .border-gray-700, .border-gray-800 { border-color: var(--m-border) !important; }