/* * Brain — tema admin peste Filament v3, injectată ca CSS static (fără build * Vite). Reproduce paleta/radius/umbrele din docs/mockups/dashboard-*.html * peste componentele native ale Filament (sidebar, topbar, secțiuni/carduri), * fără să rescriem markup-ul framework-ului. */ :root { --brain-bg: #eef2f9; --brain-border: #e7ebf3; --brain-radius: 18px; --brain-shadow: 0 6px 24px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --brain-shadow-lg: 0 14px 40px rgba(30, 41, 120, .10); } .dark { --brain-bg: #0b1020; --brain-border: rgba(255, 255, 255, .08); --brain-radius: 16px; --brain-shadow: 0 6px 20px rgba(0, 0, 0, .35); --brain-shadow-lg: 0 16px 40px rgba(0, 0, 0, .5); } /* Fundal general — gradient radial indigo/cyan discret, ca în mockup */ .fi-body { background-color: var(--brain-bg) !important; background-image: radial-gradient(900px 500px at 12% -8%, rgba(79, 70, 229, .10), transparent 60%), radial-gradient(700px 500px at 100% 0%, rgba(6, 182, 212, .10), transparent 55%); background-attachment: fixed; } .dark .fi-body { background-image: radial-gradient(1200px 600px at 15% -10%, rgba(79, 70, 229, .22), transparent 55%), radial-gradient(700px 500px at 100% 0%, rgba(34, 211, 238, .10), transparent 55%); } /* Sidebar — translucid + blur, ca în mockup */ .fi-sidebar { background-color: rgba(255, 255, 255, .75) !important; backdrop-filter: blur(12px); border-color: var(--brain-border) !important; box-shadow: 8px 0 30px rgba(15, 23, 42, .03); } .dark .fi-sidebar { background-color: rgba(19, 26, 46, .85) !important; border-color: var(--brain-border) !important; box-shadow: none; } .fi-sidebar-group-label { letter-spacing: .07em; } .fi-sidebar-item-button { border-radius: 11px !important; } .fi-sidebar-item.fi-active > .fi-sidebar-item-button, .fi-sidebar-item-active .fi-sidebar-item-button { background: linear-gradient(90deg, rgba(79, 70, 229, .12), rgba(6, 182, 212, .10)) !important; box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .18); } .dark .fi-sidebar-item.fi-active > .fi-sidebar-item-button, .dark .fi-sidebar-item-active .fi-sidebar-item-button { background: linear-gradient(90deg, rgba(99, 102, 241, .22), rgba(34, 211, 238, .08)) !important; box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .35); } /* Topbar — fără graniță dură, se topește în fundal */ .fi-topbar { background-color: transparent !important; border-color: transparent !important; backdrop-filter: blur(8px); } .fi-topbar > nav { background-color: rgba(255, 255, 255, .6); } .dark .fi-topbar > nav { background-color: rgba(11, 16, 32, .6); } /* Carduri/secțiuni — radius mai generos + umbră mai catifelată */ .fi-section, .fi-ta-ctn, .fi-modal-window, .fi-wi-stats-overview-stat { border-radius: var(--brain-radius) !important; box-shadow: var(--brain-shadow) !important; } .fi-section:hover { transition: box-shadow .15s ease; } /* Login card */ .fi-simple-layout .fi-simple-main { border-radius: var(--brain-radius) !important; box-shadow: var(--brain-shadow-lg) !important; } /* * Badge numeric ("notification badge") pe pastilele "Filtrează după tip" din * /admin/activities (vezi activity-type-filter-bar.blade.php) — cerut * explicit, 2026-08-25, după ce prima variantă (clase Tailwind arbitrare: * `bg-gray-700`, `text-[10px]`, `-top-1.5` etc.) a ieșit "aproape alb pe * gri". Cauza reală: acest bundle CSS e cel PRECOMPILAT al Filament, generat * din SURSELE PACHETULUI (nu dintr-un build Vite peste blade-urile acestei * aplicații — vezi nota de mai sus, "fără build Vite") — orice clasă * Tailwind pe care Filament însuși n-o folosește nicăieri (confirmat cu * `grep` pe `public/css/filament/filament/app.css`: `bg-gray-700` neexistă * deloc în light, doar varianta `dark:`; `text-[10px]`/`min-w-[1rem]`/ * `-top-1.5` nu există nicăieri) e pur și simplu absentă din CSS-ul livrat — * fără nicio eroare, clasa e acolo în HTML, dar n-are efect. Rezultatul: * `text-white` (care EXISTĂ) se aplica, fundalul `bg-gray-700` (care NU * exista în light) nu — text alb, fără fundal, peste pastila deschisă. * Fix: CSS static, scris de mână, ca restul acestui fișier — garantat să * randeze exact cum e definit, indiferent ce utilitare arbitrare a compilat * Filament pentru propriile lui view-uri. */ .brain-type-count-badge { position: absolute; top: -.4rem; right: -.4rem; display: flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: 9999px; background-color: #111827; color: #fff; font-size: .625rem; line-height: 1; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 2px #fff; pointer-events: none; } .dark .brain-type-count-badge { /* Fundal/text neschimbate — negru pe alb citește clar peste ORICE culoare de pastilă (bifată sau nu), în ambele teme; doar "ring"-ul de separare se subțiază/luminează, ca să nu pară un contur dur pe fundalul deja întunecat. */ box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); } /* * Evidențierea coloanei active de sortare (cerut explicit, 2026-08-25) — * GLOBAL, pentru orice tabel Filament sortabil din admin, nu doar * `/admin/activities`. Funcționează fără NICIO modificare de markup/ * `vendor/`: Filament însuși pune `aria-sort="ascending|descending"` pe * `` DOAR când acea coloană e cea activ sortată (vezi * `vendor/filament/tables/resources/views/components/header-cell.blade.php` * — parte din pachet, generică, aceeași pe orice Resource/tabel), deci * selectorul `th[aria-sort]` de mai jos se mută automat pe noua coloană la * fiecare schimbare de sortare, fără cod nou per coloană/Resource. `.fi-ta- * table`/`.fi-ta-header-cell-label`/`.fi-ta-header-cell-sort-icon` sunt * clase STABILE ale pachetului (nu clase Tailwind arbitrare neincluse în * bundle-ul precompilat, ca la bug-ul badge-urilor de mai sus) — motiv * pentru care merg direct ca selectoare CSS, fără riscul de "clasă fără * efect" deja identificat în acest fișier. */ .fi-ta-table th[aria-sort] { background-color: rgba(79, 70, 229, .06); box-shadow: inset 0 -2px 0 0 var(--primary-500, #6366f1); } .dark .fi-ta-table th[aria-sort] { background-color: rgba(129, 140, 248, .12); } .fi-ta-table th[aria-sort] .fi-ta-header-cell-label { color: var(--primary-600, #4f46e5); font-weight: 700; } .dark .fi-ta-table th[aria-sort] .fi-ta-header-cell-label { color: var(--primary-400, #818cf8); } /* Săgeata activă e deja colorată diferit de Filament (vezi header-cell. blade.php: text-gray-950/text-white doar când `$activelySorted`) — aici o accentuăm în plus, cu culoarea temei, ca să se distingă clar de cea inactivă (gri, neschimbată). */ .fi-ta-table th[aria-sort] .fi-ta-header-cell-sort-icon { color: var(--primary-600, #4f46e5); opacity: 1; } .dark .fi-ta-table th[aria-sort] .fi-ta-header-cell-sort-icon { color: var(--primary-400, #818cf8); } /* * Repeated-chevron fix for the Activity ownership ("Atribuit utilizatorilor" * / "Creat de utilizatori") multi-selects — 2026-08-31, real UAT defect on * /admin/activities, the Dashboard Team Calendar, and the standalone Team * Calendar. Root cause, confirmed by reading the actual PRECOMPILED CSS * shipped to the browser (not assumed from the screenshot alone): * * public/css/filament/forms/forms.css: * select:not(.choices){background-image:url(...chevron svg...)} * * public/css/filament/filament/app.css: * select{background-image:url(...same chevron...);background-repeat:no-repeat;...} * select:where([multiple]),select:where([size]:not([size="1"])){background-image:none;background-repeat:unset;...} * * `:not(.choices)` CONTRIBUTES to CSS specificity; `:where(...)` NEVER does * (by design — that's the whole point of `:where()`). So on any native * `` carries Filament's own * `!bg-none` utility class (`background-image:none!important`, * vendor/filament/forms/resources/views/components/select.blade.php), * which wins regardless of the specificity race above. `.brain-activity- * ownership-select` below is a deliberate, narrowly-scoped BACKSTOP for * that control anyway — hand-written CSS, not dependent on a Tailwind * utility class surviving Filament's own precompiled-bundle purge (this * file's own badge-icon fix above already documents that exact failure * class occurring once in this codebase) — never a broad, unscoped `select` * rule that could affect any other Filament select in the admin panel. */ .brain-user-multiselect, .brain-activity-ownership-select { background-image: none !important; } /* * Cross-browser UX task (2026-08-31) — the standard Alpine.js `x-cloak` * pattern: Alpine only ever REMOVES this attribute once it initializes: it * never supplies the hiding rule itself, that's the page's own * responsibility. Neither Filament's precompiled bundles nor this file * defined it before, so `x-cloak` on the new collapsible Team Calendar * filter panel (activity-calendar-widget.blade.php) had no effect at all — * this single global rule is what actually makes it work, for that panel * and for any future use of the same, well-known Alpine idiom. */ [x-cloak] { display: none !important; } /* ───────────────────────────────────────────────────────────────────────── * TASK 3B.3C.2 (UAT vizual) — utilitare Tailwind pe care acest deployment * NU le compilează. * * Proiectul nu are build Vite/Tailwind: CSS-ul Filament vine PRE-COMPILAT din * directoarele `dist` ale pachetelor Filament din `vendor`, publicate în * `public/css/filament/…` — deci * singurele utilitare care există sunt cele folosite de componentele * Filament însele. Orice clasă Tailwind scrisă de aplicație — inclusiv în * `HtmlString`-urile din `app/Filament/Support/ActivityNotificationsSection.php` * — nu ajunge în nicio foaie de stil și pur și simplu nu face nimic. * * Consecințele observate în UAT (capturi în raport, §5 „defecte reparate"): * · `ms-2` lipsea, deci meta-datele unei reguli se lipeau de eticheta ei: * „În ziua activitățiisursă: Implicit · activă · …"; * · `text-warning-700` / `dark:text-warning-400` lipseau, deci avertismentele * („Activitatea nu are dată.", „Activitatea nu are oră.") se randau în * culoarea textului normal, adică nu se citeau ca avertismente; * · culorile/inelele badge-ului de provenienţă lipseau, deci „Personalizat" * și „Fără notificări" arătau identic cu „Implicit". * * Se declară aici, în CSS-ul propriu al aplicației, pentru că acesta e * mecanismul deja documentat al proiectului („CSS static, fără build Vite"). * Formele sunt copiate EXACT după cele compilate de Filament — aceleași * variabile de paletă (`--warning-700`, injectate de panou), aceeași formă de * variantă dark (`:is(.dark *)`) — ca să nu apară o a doua convenție. * ───────────────────────────────────────────────────────────────────────── */ .ms-2 { margin-inline-start: .5rem; } .text-warning-700 { --tw-text-opacity: 1; color: rgba(var(--warning-700), var(--tw-text-opacity, 1)); } .dark\:text-warning-400:is(.dark *) { --tw-text-opacity: 1; color: rgba(var(--warning-400), var(--tw-text-opacity, 1)); } .text-primary-700 { --tw-text-opacity: 1; color: rgba(var(--primary-700), var(--tw-text-opacity, 1)); } .bg-primary-50 { --tw-bg-opacity: 1; background-color: rgba(var(--primary-50), var(--tw-bg-opacity, 1)); } .bg-warning-50 { --tw-bg-opacity: 1; background-color: rgba(var(--warning-50), var(--tw-bg-opacity, 1)); } .dark\:bg-primary-400\/10:is(.dark *) { background-color: rgba(var(--primary-400), 0.1); } .dark\:bg-warning-400\/10:is(.dark *) { background-color: rgba(var(--warning-400), 0.1); } .ring-gray-600\/20 { --tw-ring-color: rgba(var(--gray-600), 0.2); } .ring-primary-600\/20 { --tw-ring-color: rgba(var(--primary-600), 0.2); } .ring-warning-600\/20 { --tw-ring-color: rgba(var(--warning-600), 0.2); } .dark\:ring-gray-400\/30:is(.dark *) { --tw-ring-color: rgba(var(--gray-400), 0.3); } .dark\:ring-primary-400\/30:is(.dark *) { --tw-ring-color: rgba(var(--primary-400), 0.3); } .dark\:ring-warning-400\/30:is(.dark *) { --tw-ring-color: rgba(var(--warning-400), 0.3); } /* --------------------------------------------------------------------------- * TASK WEB-UAT-UI-1 — marcajul „Finalizată", definit O SINGURĂ DATĂ pentru * ambele suprafețe: rândul din listă și evenimentul din calendar. * * Reguli respectate deliberat: * · marcajul CITIBIL e textul („Finalizată" în badge-ul de status, „✓ * Finalizată ·" în titlul evenimentului) — ce urmează e doar accentul * care îl însoțește, niciodată singurul semnal; * · gri discret, nu o culoare de accent: o activitate încheiată nu trebuie * să atragă privirea într-o listă de lucru curent; * · conturul PUNCTAT e al doilea semnal non-cromatic — rămâne vizibil la * tipărire alb-negru și pentru cine nu distinge culorile. * ------------------------------------------------------------------------- */ /* Rândul din lista de activități (ActivityResource::table()->recordClasses()) */ .brain-activity-completed { background-color: rgba(107, 114, 128, .06) !important; box-shadow: inset 3px 0 0 0 rgba(107, 114, 128, .55); } .brain-activity-completed .fi-ta-cell, .brain-activity-completed .fi-ta-text { color: #6b7280; } .dark .brain-activity-completed { background-color: rgba(255, 255, 255, .04) !important; box-shadow: inset 3px 0 0 0 rgba(156, 163, 175, .5); } /* Badge-ul „Finalizată" din coloana Status */ .brain-completed-badge { border: 1px dashed rgba(107, 114, 128, .7) !important; background-color: rgba(107, 114, 128, .08) !important; color: #4b5563 !important; } .dark .brain-completed-badge { border-color: rgba(156, 163, 175, .6) !important; color: #d1d5db !important; } /* Evenimentul de calendar (eventClassNames() → 'brain-fc-completed') */ .fc .brain-fc-completed, .fc .brain-fc-completed.fc-event { background-color: rgba(107, 114, 128, .12) !important; border: 1px dashed rgba(107, 114, 128, .75) !important; color: #4b5563 !important; opacity: .85; } .fc .brain-fc-completed .fc-event-title, .fc .brain-fc-completed .fc-event-time, .fc .brain-fc-completed .fc-list-event-title a { color: #4b5563 !important; text-decoration: none; } /* Punctul colorat al evenimentelor din vederea listă/agendă */ .fc .brain-fc-completed .fc-daygrid-event-dot, .fc .brain-fc-completed .fc-list-event-dot { border-color: rgba(107, 114, 128, .75) !important; } .dark .fc .brain-fc-completed, .dark .fc .brain-fc-completed.fc-event { background-color: rgba(255, 255, 255, .06) !important; border-color: rgba(156, 163, 175, .6) !important; color: #d1d5db !important; } .dark .fc .brain-fc-completed .fc-event-title, .dark .fc .brain-fc-completed .fc-event-time, .dark .fc .brain-fc-completed .fc-list-event-title a { color: #d1d5db !important; } /* ------------------------------------------------------------------ * TASK BRAIN-CALENDAR-UX-DELIVERY-1 * ------------------------------------------------------------------ */ /* Eveniment care NU se mută prin tragere (lead, activitate văzută doar ca participant): un lacăt mic înaintea titlului, în culoarea textului, deci lizibil pe orice culoare de tip și în ambele teme. Motivul e în tooltip și în `aria-description` (RendersActivityCalendarEvents::lockedReason()). */ .fc .brain-fc-locked .fc-event-title::before { content: ''; display: inline-block; width: .75em; height: .75em; margin-right: .25em; vertical-align: -.05em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain; } /* Bifele de sub filtre: pe ecran îngust explicația coboară pe rândul ei, în loc să strângă eticheta pe trei rânduri lângă ea. */ .brain-filter-check { flex-wrap: wrap; row-gap: .125rem; } @media (max-width: 639px) { .brain-filter-check-help { flex-basis: 100%; padding-left: 1.5rem; } /* Bara calendarului: titlul lunii pe rândul lui, butoanele dedesubt — nu se mai lipesc de titlu și nu ies din casetă. */ .fc .fc-header-toolbar { flex-wrap: wrap; gap: .5rem; } .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) { order: -1; flex-basis: 100%; text-align: center; } .fc .fc-header-toolbar .fc-toolbar-title { font-size: 1.15rem; } } /* ------------------------------------------------------------------ * TASK BRAIN-UX-FINAL-POLISH-AND-OWNER-PREVIEW-1 — bara „Filtrează după tip” * (partialul activity-type-filter-bar, calendar + lista de activități). * ------------------------------------------------------------------ */ /* Butoanele („Filtrează după tip:”, Toate, Niciuna) și grupul pastilelor: pe ecran îngust, unul sub altul; de la 640 px, alături, iar pastilele se rup pe rânduri ÎN grupul lor. Separatorul e marginea grupului, deci nu poate rămâne singur pe un rând. */ .brain-type-bar { display: flex; flex-direction: column; gap: .5rem; } @media (min-width: 640px) { .brain-type-bar { flex-direction: row; align-items: flex-start; } .brain-type-bar-actions { flex-shrink: 0; flex-wrap: nowrap; } .brain-type-bar-types { flex: 1 1 0%; min-width: 0; padding-left: .75rem; border-left: 1px solid #d1d5db; } .dark .brain-type-bar-types { border-left-color: rgba(255, 255, 255, .2); } } /* Starea comutatorului se vede și fără culoare. */ .brain-type-pill[aria-pressed="true"]::before { content: '✓'; margin-right: .25rem; font-weight: 700; } /* Focus de la tastatură, vizibil pe orice culoare de tip și în ambele teme. */ .brain-type-bar button:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; } .dark .brain-type-bar button:focus-visible { outline-color: #a5b4fc; }