/* =========================================================================== HDR HR - dashboard design system --------------------------------------------------------------------------- The stock dashboard rendered every metric identically: the same pink circle, the same weight, the same size, whether the number was a headcount or a cancelled project. With fourteen of them on one screen there was nothing to scan by, so the eye had to read each label to find anything. This file gives each metric a tone that carries meaning (people, time, leave, attendance, and the five project states), a clear type hierarchy so the value reads before the label, and a card treatment with enough structure to group related figures. Notes on how it is loaded and written: - theme_scripts.blade.php re-appends style_dark.css to AFTER the stylesheets linked in head_links.blade.php, so link order alone does not decide the cascade. Declarations that must survive that re-injection carry !important, exactly as in hdr-overrides.css. - Colours are defined as custom properties on :root and re-declared under [data-theme="dark"] / .dark-mode, so dark mode is a token swap rather than a second set of rules. - The admin panel runs in Arabic, so everything here is direction-agnostic: logical properties (inline-start/end, margin-inline) instead of left/right. =========================================================================== */ :root { --hdr-card-bg: #ffffff; --hdr-card-border: #e8ecf3; --hdr-card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .04); --hdr-card-shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 12px 28px rgba(16, 24, 40, .10); --hdr-text: #0f172a; --hdr-text-muted: #64748b; --hdr-grid-line: #eef2f7; /* Metric tones. Each is a stroke colour plus a tint for the icon well. */ --tone-indigo: #4f46e5; --tone-indigo-bg: #eef2ff; --tone-blue: #2563eb; --tone-blue-bg: #eff6ff; --tone-amber: #d97706; --tone-amber-bg: #fffbeb; --tone-violet: #7c3aed; --tone-violet-bg: #f5f3ff; --tone-orange: #ea580c; --tone-orange-bg: #fff7ed; --tone-rose: #e11d48; --tone-rose-bg: #fff1f2; --tone-emerald:#059669; --tone-emerald-bg:#ecfdf5; --tone-teal: #0d9488; --tone-teal-bg: #f0fdfa; --tone-slate: #475569; --tone-slate-bg: #f1f5f9; } [data-theme="dark"], .dark-mode, body.dark { --hdr-card-bg: #131a2b; --hdr-card-border: #1f2a41; --hdr-card-shadow: 0 1px 2px rgba(0, 0, 0, .35); --hdr-card-shadow-hover: 0 12px 28px rgba(0, 0, 0, .45); --hdr-text: #e8eefc; --hdr-text-muted: #94a3b8; --hdr-grid-line: #1f2a41; --tone-indigo-bg: rgba(79, 70, 229, .16); --tone-blue-bg: rgba(37, 99, 235, .16); --tone-amber-bg: rgba(217, 119, 6, .16); --tone-violet-bg: rgba(124, 58, 237, .16); --tone-orange-bg: rgba(234, 88, 12, .16); --tone-rose-bg: rgba(225, 29, 72, .16); --tone-emerald-bg:rgba(5, 150, 105, .16); --tone-teal-bg: rgba(13, 148, 136, .16); --tone-slate-bg: rgba(71, 85, 105, .22); --tone-indigo: #818cf8; --tone-blue: #60a5fa; --tone-amber: #fbbf24; --tone-violet: #a78bfa; --tone-orange: #fb923c; --tone-rose: #fb7185; --tone-emerald:#34d399; --tone-teal: #2dd4bf; --tone-slate: #94a3b8; } /* --------------------------------------------------------------------------- Page background only. style_dark.css paints the page rgb(7, 13, 25) - #070D19. Its blue channel is over three times its red, so the whole surface reads as saturated navy rather than as a neutral dark ground, and every accent on top of it has to fight that cast. Pull the hue toward neutral and lift it a touch, keeping just enough blue to stay on-brand. The accent tokens above are deliberately unchanged. Specificity here (id-less attribute + element) beats style_dark.css's bare `body`, so this holds even though that file is re-appended afterwards. --------------------------------------------------------------------------- */ :root[data-theme="dark"] body { background-color: #121722 !important; } /* --------------------------------------------------------------------------- Page heading --------------------------------------------------------------------------- */ .content .hdr-page-title, .page-content > .hdr-page-title { font-size: 1.35rem; font-weight: 650; letter-spacing: -.01em; color: var(--hdr-text); } /* --------------------------------------------------------------------------- KPI card Structure kept from the original blade so the change is a restyle, not a rewrite: .card.hdr-kpi.hdr-kpi-- .card-body .d-md-flex > h6.card-title <- label .row > h3 <- value > .dash-icon > i <- icon --------------------------------------------------------------------------- */ .hdr-kpi { position: relative; border: 1px solid var(--hdr-card-border) !important; border-radius: 14px !important; background: var(--hdr-card-bg) !important; box-shadow: var(--hdr-card-shadow) !important; overflow: hidden; /* Transition only compositor-friendly properties; the sidebar lag bug was caused by layout-affecting animation, so keep this to transform/shadow. */ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .hdr-kpi:hover { transform: translateY(-2px); box-shadow: var(--hdr-card-shadow-hover) !important; border-color: color-mix(in srgb, var(--kpi-tone, var(--tone-slate)) 35%, var(--hdr-card-border)) !important; } /* Tone strip along the top edge - the fastest way to tell two cards apart without reading either of them. */ .hdr-kpi::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--kpi-tone, var(--tone-slate)); opacity: .9; } .hdr-kpi .card-body { padding: 1.15rem 1.25rem 1.25rem !important; } /* Label: small, quiet, and consistent - it is the caption, not the message. */ .hdr-kpi .card-title { font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--hdr-text-muted) !important; margin: 0 0 .85rem !important; line-height: 1.35; } /* Value: the thing the card exists to show. Tabular figures stop the number from shifting width as it changes. */ .hdr-kpi h3 { font-size: 2rem !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -.02em; color: var(--hdr-text) !important; margin: 0 !important; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Icon well: tinted square in the metric's own tone. */ .hdr-kpi .dash-icon { display: flex; align-items: center; justify-content: flex-end; } .hdr-kpi .dash-icon i, .hdr-kpi .dash-icon svg { inline-size: 44px; block-size: 44px; padding: 11px; border-radius: 12px; background: var(--kpi-tone-bg, var(--tone-slate-bg)) !important; color: var(--kpi-tone, var(--tone-slate)) !important; stroke: var(--kpi-tone, var(--tone-slate)) !important; stroke-width: 2; box-shadow: none !important; transition: transform .18s ease; } .hdr-kpi:hover .dash-icon svg { transform: scale(1.06); } /* The theme ships a pink circle for .dash-icon; neutralise it so the tone system is the only thing colouring these. */ .hdr-kpi .dash-icon::before, .hdr-kpi .dash-icon::after { display: none !important; } /* Tone assignments -------------------------------------------------------- */ .hdr-kpi--indigo { --kpi-tone: var(--tone-indigo); --kpi-tone-bg: var(--tone-indigo-bg); } .hdr-kpi--blue { --kpi-tone: var(--tone-blue); --kpi-tone-bg: var(--tone-blue-bg); } .hdr-kpi--amber { --kpi-tone: var(--tone-amber); --kpi-tone-bg: var(--tone-amber-bg); } .hdr-kpi--violet { --kpi-tone: var(--tone-violet); --kpi-tone-bg: var(--tone-violet-bg); } .hdr-kpi--orange { --kpi-tone: var(--tone-orange); --kpi-tone-bg: var(--tone-orange-bg); } .hdr-kpi--rose { --kpi-tone: var(--tone-rose); --kpi-tone-bg: var(--tone-rose-bg); } .hdr-kpi--emerald { --kpi-tone: var(--tone-emerald); --kpi-tone-bg: var(--tone-emerald-bg); } .hdr-kpi--teal { --kpi-tone: var(--tone-teal); --kpi-tone-bg: var(--tone-teal-bg); } .hdr-kpi--slate { --kpi-tone: var(--tone-slate); --kpi-tone-bg: var(--tone-slate-bg); } /* --------------------------------------------------------------------------- Section headings between card groups --------------------------------------------------------------------------- */ .hdr-section-head { display: flex; align-items: center; gap: .75rem; margin: .25rem 0 1rem; } .hdr-section-head h4 { font-size: 1.05rem !important; font-weight: 650 !important; color: var(--hdr-text) !important; margin: 0 !important; letter-spacing: -.01em; } .hdr-section-head::after { content: ""; flex: 1; height: 1px; background: var(--hdr-card-border); } /* --------------------------------------------------------------------------- Panels: charts, tables and the clock share one card treatment so the page reads as one surface rather than a pile of unrelated widgets. --------------------------------------------------------------------------- */ .content .card:not(.hdr-kpi) { border: 1px solid var(--hdr-card-border) !important; border-radius: 14px !important; background: var(--hdr-card-bg) !important; box-shadow: var(--hdr-card-shadow) !important; } .content .card:not(.hdr-kpi) > .card-header { background: transparent !important; border-bottom: 1px solid var(--hdr-card-border) !important; padding: 1rem 1.25rem !important; } .content .card:not(.hdr-kpi) > .card-header .card-title { font-size: .95rem !important; font-weight: 650 !important; color: var(--hdr-text) !important; letter-spacing: -.005em; text-transform: none; margin: 0 !important; } /* Chart canvases need a bounded height or Chart.js grows them on every resize pass. */ .content canvas#projectChart, .content canvas#tasksChart { max-block-size: 320px; } /* --------------------------------------------------------------------------- Recent-projects table --------------------------------------------------------------------------- */ .content .card-table .table > thead > tr > th { font-size: .7rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--hdr-text-muted) !important; border-bottom: 1px solid var(--hdr-card-border) !important; background: transparent !important; padding-block: .8rem; } .content .card-table .table > tbody > tr > td { vertical-align: middle; border-bottom: 1px solid var(--hdr-grid-line) !important; padding-block: .8rem; color: var(--hdr-text); } .content .card-table .table > tbody > tr:last-child > td { border-bottom: 0 !important; } .content .card-table .table > tbody > tr { transition: background-color .15s ease; } .content .card-table .table > tbody > tr:hover { background: color-mix(in srgb, var(--tone-blue) 4%, transparent); } .content .member-listed img { inline-size: 30px; block-size: 30px; border: 2px solid var(--hdr-card-bg); } /* Progress bars were flat blocks; give them a track and rounded fill. */ .content .progress { block-size: 8px; border-radius: 999px; background: var(--hdr-grid-line) !important; overflow: visible; position: relative; } .content .progress-bar { border-radius: 999px !important; background: var(--tone-emerald) !important; position: relative; } .content .progress-bar > span { position: absolute; inset-inline-end: 0; inset-block-start: -20px; font-size: .7rem; font-weight: 650; color: var(--hdr-text-muted); } /* Priority pills: readable chips rather than solid buttons. */ .content .btn-xs.cursor-default { border-radius: 999px !important; font-size: .7rem !important; font-weight: 650 !important; padding: .25rem .7rem !important; border: 1px solid transparent !important; text-transform: capitalize; } .content .btn-info.cursor-default { background: var(--tone-blue-bg) !important; color: var(--tone-blue) !important; border-color: color-mix(in srgb, var(--tone-blue) 25%, transparent) !important; } .content .btn-warning.cursor-default { background: var(--tone-amber-bg) !important; color: var(--tone-amber) !important; border-color: color-mix(in srgb, var(--tone-amber) 25%, transparent) !important; } .content .btn-primary.cursor-default { background: var(--tone-rose-bg) !important; color: var(--tone-rose) !important; border-color: color-mix(in srgb, var(--tone-rose) 25%, transparent) !important; } /* --------------------------------------------------------------------------- Responsive --------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .hdr-kpi h3 { font-size: 1.6rem !important; } .hdr-kpi .dash-icon i, .hdr-kpi .dash-icon svg { inline-size: 38px; block-size: 38px; padding: 9px; } .hdr-kpi .card-body { padding: 1rem !important; } } /* Respect a reduced-motion preference: drop the lift and the icon scale. */ @media (prefers-reduced-motion: reduce) { .hdr-kpi, .hdr-kpi .dash-icon svg, .content .card-table .table > tbody > tr { transition: none !important; } .hdr-kpi:hover { transform: none; } .hdr-kpi:hover .dash-icon svg { transform: none; } }