/* ═══════════════════════════════════════════════════════════════ GESAT — Warm Precision Design System Strategy: CSS override only. Zero HTML/PHP structural changes. ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700&display=swap'); /* ── Design Tokens ──────────────────────────────────────────── */ :root { --brand: #166534; --brand-mid: #15803d; --brand-lite: #4ade80; --brand-glow: rgba(74, 222, 128, 0.15); --sb-bg: #0b1612; --sb-border: rgba(74, 222, 128, 0.07); --sb-text: #8ec4a4; --sb-text-hover: #e2f0e8; --sb-active: #4ade80; --sb-submenu: rgba(0, 0, 0, 0.35); --app-bg: #f2ede3; --surface: #fdfaf4; --surface-alt: #f6f1e7; --header-bg: #fdfaf4; --header-border: #e0d9cc; --text-main: #1a2e21; --text-muted: #5a7566; --border: #ddd8cc !important; --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --radius: 8px; --radius-lg: 12px; --danger: #dc2626; --danger-dark: #b91c1c; --row-hover: rgba(22, 101, 52, .045); } /* Dark mode via Alpine's theme-dark class on */ .theme-dark { --app-bg: #0b1612; --surface: #112019; --surface-alt: #152a1e; --header-bg: #0e1b14; --header-border: #1e3528; --text-main: #ddeee5; --text-muted: #7aaa8e; --border: #1e3528 !important; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.4); } /* ── Typography ─────────────────────────────────────────────── */ body, input, select, textarea, button, a { font-family: 'Bricolage Grotesque', -apple-system, sans-serif !important; } h1, h2, h3, h4, h5, h6 { font-family: 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.01em; } /* Stat numbers — Fraunces gives personality */ .text-3xl, .text-2xl.font-semibold, .text-xl { font-family: 'Fraunces', serif !important; } /* ── App Shell / Wrapper ────────────────────────────────────── */ body { background-color: var(--app-bg) !important; } /* Main flex wrapper */ div.flex.h-screen { background-color: var(--app-bg) !important; } /* Page heading */ h2.my-6.text-2xl { color: var(--text-main) !important; } .text-gray-700 { color: var(--text-main) !important; } /* ── Desktop Sidebar ────────────────────────────────────────── */ /* One fixed width for every page. `w-50` is not a real Tailwind class here, so without this the width came from the content and individual pages could (and did) override it — admin_logs.php and Stock.php pinned it to 200px, which made their labels wrap while every other page sat at 222px. */ aside.z-20.hidden { width: 222px !important; background-color: var(--sb-bg) !important; border-right: 1px solid var(--sb-border) !important; box-shadow: 2px 0 20px rgba(0,0,0,.25) !important; } /* Sidebar text wrapper */ aside.z-20.hidden > div { color: var(--sb-text) !important; } /* Sidebar nav links — all inline-flex anchors */ aside.z-20.hidden a.inline-flex { color: var(--sb-text) !important; transition: color 0.15s ease !important; } aside.z-20.hidden a.inline-flex:hover { color: var(--sb-text-hover) !important; } /* Sidebar submenu dropdown bg */ aside.z-20.hidden ul.p-2.mt-2 { background-color: var(--sb-submenu) !important; color: var(--sb-text) !important; } aside.z-20.hidden ul.p-2.mt-2 a { color: var(--sb-text) !important; } aside.z-20.hidden ul.p-2.mt-2 a:hover { color: var(--sb-text-hover) !important; } /* Active page indicator bar */ aside.z-20.hidden span.absolute.inset-y-0.left-0.w-1 { background-color: var(--sb-active) !important; } /* Sidebar toggle button icon */ aside.z-20.hidden button { color: var(--sb-text) !important; } aside.z-20.hidden button:hover { color: var(--sb-text-hover) !important; } /* Sidebar chevron icon */ aside.z-20.hidden svg[viewBox="0 0 20 20"] { color: var(--sb-text) !important; fill: var(--sb-text) !important; } /* Logo image */ img.sm\:mx-0.sm\:shrink-0.w-17 { width: 200px !important; padding: 8px 16px !important; display: block !important; filter: brightness(1.1) !important; } /* ── Mobile Sidebar ─────────────────────────────────────────── */ aside.fixed.inset-y-0 { background-color: var(--sb-bg) !important; } aside.fixed.inset-y-0 .text-gray-500, aside.fixed.inset-y-0 a.inline-flex, aside.fixed.inset-y-0 a { color: var(--sb-text) !important; } aside.fixed.inset-y-0 a:hover { color: var(--sb-text-hover) !important; } /* ── Header / Topbar ────────────────────────────────────────── */ header.z-10 { background-color: var(--header-bg) !important; box-shadow: var(--shadow-sm) !important; border-bottom: 1px solid var(--header-border) !important; } /* Header accent/icon color: purple → green */ header.z-10 > div { color: var(--brand) !important; } /* Header search input */ header.z-10 input[type="text"] { background-color: var(--surface-alt) !important; color: var(--text-main) !important; border: 1px solid var(--border) !important; } header.z-10 input[type="text"]::placeholder { color: var(--text-muted) !important; } /* ── Profile Dropdown ───────────────────────────────────────── */ ul[aria-label="submenu"].absolute.right-0 { background-color: var(--surface) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; } ul[aria-label="submenu"].absolute.right-0 a { color: var(--text-main) !important; } ul[aria-label="submenu"].absolute.right-0 a:hover { background-color: var(--surface-alt) !important; color: var(--text-main) !important; } /* ── Main Content Area ──────────────────────────────────────── */ main.h-full { background-color: var(--app-bg) !important; } /* Panels / Cards */ .bg-white { background-color: var(--surface) !important; } .bg-gray-50 { background-color: var(--app-bg) !important; } /* Table header row */ thead tr, tr.text-xs.font-semibold.tracking-wide { background-color: var(--surface-alt) !important; } thead th { color: var(--text-muted) !important; border-bottom-color: var(--border) !important; } /* Table body */ tbody.bg-white { background-color: var(--surface) !important; } .text-gray-700.dark\:text-gray-400 { color: var(--text-main) !important; } tbody tr td { border-bottom-color: var(--border) !important; } /* Table wrap */ .rounded-lg.shadow-xs { box-shadow: var(--shadow-md) !important; border: 1px solid var(--border) !important; background-color: var(--surface) !important; } /* ── Form Inputs ────────────────────────────────────────────── */ .form-input, input.form-input, select.form-input, input[type="date"], input[type="text"], select { background-color: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-main) !important; border-radius: var(--radius) !important; } input[type="text"]::placeholder, input[type="date"]::placeholder { color: var(--text-muted) !important; } input[type="text"]:focus, select:focus { border-color: var(--brand) !important; outline: none !important; box-shadow: 0 0 0 3px var(--brand-glow) !important; } /* ── Buttons — Brand Green ──────────────────────────────────── */ /* Replace all purple with green */ .bg-purple-600, .active\:bg-purple-600, [class*="bg-purple-6"] { background-color: var(--brand) !important; } .hover\:bg-purple-700:hover { background-color: var(--brand-mid) !important; } /* Specific button IDs and classes — higher specificity (html body) beats inline !important */ html body #searchBtn, html body .addU, html body .modifyme { background-color: var(--brand) !important; } html body #searchBtn:hover, html body .addU:hover, html body .modifyme:hover { background-color: var(--brand-mid) !important; } /* ── DataTables Pagination ──────────────────────────────────── */ html body a#example_previous, html body a#example_next { background: var(--brand) !important; color: #fff !important; border-radius: var(--radius) !important; border: none !important; } html body a#example_previous:hover, html body a#example_next:hover { background: var(--brand-mid) !important; } html body a.paginate_button.current { background: var(--brand) !important; color: #fff !important; border-radius: var(--radius) !important; } html body a.paginate_button { color: var(--text-muted) !important; border-radius: var(--radius) !important; } html body a.paginate_button:hover { background: var(--surface-alt) !important; color: var(--text-main) !important; } /* ── Sidebar Logout Button ──────────────────────────────────── */ /* The logout button in sidebar has bg-purple-600 → green via above rule */ /* Keep its text white */ /* Logout only — the Ads Manager / ADS Stats buttons get their own treatment further down, and this selector would otherwise outrank it. */ aside.z-20.hidden a.flex.items-center.justify-between.bg-purple-600:not([href*="adsManager"]):not([href*="UserStats"]) { background-color: var(--brand) !important; color: #fff !important; border-radius: var(--radius) !important; } /* ── Scrollbar ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 6px; } ::-webkit-scrollbar-track { background: transparent !important; } ::-webkit-scrollbar-thumb { background-color: rgba(22, 101, 52, .35) !important; border-radius: 50px; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(22, 101, 52, .6) !important; } /* ── Dark Mode Overrides ────────────────────────────────────── */ .theme-dark div.flex.h-screen { background-color: var(--app-bg) !important; } .theme-dark body { background-color: var(--app-bg) !important; } .theme-dark main.h-full { background-color: var(--app-bg) !important; } .theme-dark .bg-white, .theme-dark .dark\:bg-gray-800 { background-color: var(--surface) !important; } .theme-dark .bg-gray-50, .theme-dark .dark\:bg-gray-900 { background-color: var(--app-bg) !important; } .theme-dark header.z-10 { background-color: var(--header-bg) !important; border-bottom-color: var(--header-border) !important; } .theme-dark thead tr { background-color: var(--surface-alt) !important; } .theme-dark h2.my-6.text-2xl, .theme-dark .text-gray-700, .theme-dark .dark\:text-gray-200 { color: var(--text-main) !important; } .theme-dark .text-gray-500, .theme-dark .dark\:text-gray-400 { color: var(--text-muted) !important; } .theme-dark .form-input, .theme-dark input[type="text"], .theme-dark input[type="date"], .theme-dark select { background-color: var(--surface-alt) !important; border-color: var(--border) !important; color: var(--text-main) !important; } .theme-dark input[type="text"]::placeholder { color: var(--text-muted) !important; } .theme-dark ul[aria-label="submenu"].absolute.right-0 { background-color: var(--surface-alt) !important; border-color: var(--border) !important; } .theme-dark a.paginate_button { background: var(--surface-alt) !important; color: var(--text-muted) !important; } .theme-dark tbody.bg-white, .theme-dark .dark\:bg-gray-800 { background-color: var(--surface) !important; } /* ── Loader ─────────────────────────────────────────────────── */ .loader-container { background-color: rgba(11, 22, 18, 0.55) !important; backdrop-filter: blur(8px) !important; } .loader { border-top-color: var(--brand) !important; } /* ── Modal backdrop ─────────────────────────────────────────── */ .fixed.inset-0.z-10.flex.items-end { backdrop-filter: blur(4px) !important; } /* ── Status badges ──────────────────────────────────────────── */ /* Keep inline-styled status badges as-is (green, orange, yellow, red, gray) Nothing to override — they use inline style= attributes */ /* ── Small refinements ──────────────────────────────────────── */ /* shadow on main content wrapper */ div.flex.flex-col.flex-1.w-full { background-color: var(--app-bg) !important; } /* Dividers between table rows */ .divide-y > * + * { border-top-color: var(--border) !important; } /* ═══════════════════════════════════════════════════════════════ Parity with the "Demandes clients" screen Same components, applied to the markup the older pages already use. ═══════════════════════════════════════════════════════════════ */ /* ── Destructive actions stay red ───────────────────────────── */ /* The blanket purple→green rule above would otherwise paint delete buttons green, making them read as a primary action. */ .theme-dark html body #deleteSelected, html body #deleteSelected, html body .deleteSelectedBtn, html body button[class*="bg-red-"], html body a[class*="bg-red-"] { background-color: var(--danger) !important; color: #fff !important; } html body #deleteSelected:hover, html body .deleteSelectedBtn:hover, html body button[class*="bg-red-"]:hover { background-color: var(--danger-dark) !important; } /* ── Buttons: shape + motion ────────────────────────────────── */ html body #searchBtn, html body .addU, html body .modifyme, html body #deleteSelected, html body .deleteSelectedBtn, button.px-4.py-2, a.px-4.py-2, button.px-5.py-3, a.px-5.py-3 { border-radius: var(--radius) !important; font-weight: 600 !important; transition: background-color .16s ease, transform .1s ease, box-shadow .16s ease !important; } html body #searchBtn:active, html body .addU:active, html body .modifyme:active, html body #deleteSelected:active { transform: scale(.98); } /* ── Panels & cards ─────────────────────────────────────────── */ .rounded-lg.shadow-xs, .bg-white.rounded-lg.shadow-md, form .bg-gray-700 { background-color: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; } /* Dashboard stat tiles — same lift as the Demandes clients stat cards */ main div.flex.items-center.p-4 { border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; transition: transform .18s ease, box-shadow .18s ease !important; } main div.flex.items-center.p-4:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) !important; } /* Dashboard tile icons — unify the blue/orange tints on brand green */ main .p-3.mr-4.rounded-full, main .text-blue-500.bg-blue-100, main .text-orange-500.bg-orange-100 { background-color: var(--brand-glow) !important; color: var(--brand) !important; } /* Chart section titles: drop the underline so they read as headings */ main h1 u, main h2 u, main h3 u, main h4 u { text-decoration: none !important; } main center h1 { letter-spacing: -.01em; } .gapo, form#dataFilterForm { background-color: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 13px 14px !important; } .gapo { gap: 12px !important; } form#dataFilterForm label.block { margin: 0 !important; } /* ── Tables ─────────────────────────────────────────────────── */ thead th { font-size: 11px !important; letter-spacing: .05em !important; } tbody tr { transition: background-color .14s ease !important; } tbody tr:hover { background-color: var(--row-hover) !important; } /* Status chips: colours come from each page's inline style, we only restyle the shape so they read as the pills used on Demandes clients. */ td span.font-semibold.px-2.py-1.rounded, td span.font-semibold[style*="background-color"] { border-radius: 999px !important; padding: 4px 11px !important; font-size: 11.5px !important; font-weight: 600 !important; display: inline-block !important; white-space: nowrap !important; line-height: 1.5 !important; } /* ── Modals ─────────────────────────────────────────────────── */ .fixed.inset-0.z-30 { background-color: rgba(11, 22, 18, .6) !important; backdrop-filter: blur(4px) !important; } div#modal, .fixed.inset-0.z-30 > div { background-color: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; box-shadow: 0 18px 48px rgba(0,0,0,.28) !important; } /* ── Loader — slim green ring ───────────────────────────────── */ html body .loader { border: 5px solid rgba(22, 101, 52, .15) !important; border-top: 5px solid var(--brand) !important; width: 52px !important; height: 52px !important; } html body .loader-container { background-color: rgba(242, 237, 227, .72) !important; backdrop-filter: blur(6px) !important; } .theme-dark html body .loader-container { background-color: rgba(11, 22, 18, .72) !important; } /* ── Standalone form pages (Ajouter / Modifier un client) ───── */ /* These pages have no sidebar: the form is a direct child of body. */ body > form { display: block; max-width: 980px; margin: 28px auto; padding: 0 16px; } body > form .bg-gray-700 { padding: 22px 20px !important; } body > form label.block.uppercase { color: var(--text-muted) !important; letter-spacing: .04em !important; } body > form input.appearance-none, body > form select, body > form input[type="date"] { background-color: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--text-main) !important; } body > form input.appearance-none:focus, body > form select:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-glow) !important; outline: none !important; } /* Red "required" outline in the old markup reads as an error state — neutralise it */ body > form input.border-red-500 { border-color: var(--border) !important; } body > form footer { background: transparent !important; border: 0 !important; margin-top: 6px !important; } /* ── Select2 (used on the add/modify client forms) ──────────── */ .select2-container--default .select2-selection--single, .select2-dropdown { background-color: var(--surface) !important; border-color: var(--border) !important; border-radius: var(--radius) !important; color: var(--text-main) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--brand) !important; } /* Dark mode: form controls need a visible edge to stay readable */ .theme-dark input, .theme-dark select, .theme-dark textarea { border-color: rgba(122, 170, 142, .28) !important; } /* ── Sidebar action buttons ─────────────────────────────────── */ /* Some pages hard-code these colours inline (#55c2da, #FF7900, #1f366e). Give them one shared sidebar treatment; logout stays the solid green CTA. */ aside a[href*="adsManager"], aside a[href*="UserStats"], aside.z-20.hidden a.flex.items-center.justify-between[href*="adsManager"], aside.z-20.hidden a.flex.items-center.justify-between[href*="UserStats"] { background: rgba(74, 222, 128, .10) !important; color: var(--sb-text-hover) !important; border: 1px solid var(--sb-border) !important; border-radius: var(--radius) !important; transition: background .16s ease !important; } aside a[href*="adsManager"]:hover, aside a[href*="UserStats"]:hover { background: rgba(74, 222, 128, .18) !important; } aside a[href*="logout"] { background: var(--brand) !important; color: #fff !important; border-radius: var(--radius) !important; transition: background .16s ease !important; } aside a[href*="logout"]:hover { background: var(--brand-mid) !important; } /* ── Pages with their own palette (Historique, Stock) ───────── */ /* admin_logs.php and Stock.php declare their own slate/navy token set in an inline