/*
* Call Records Monitoring — shared stylesheet.
*
* Most styling is done via Tailwind utilities in the views. This file
* is for things Tailwind can't express inline:
*
* 1. Global resets & typographic polish (font smoothing, tabular
* figures in tables).
* 2. Dark-mode hooks that aren't a one-liner (`color-scheme`,
* webkit scrollbar, autofill override).
* 3. Animations for the modal + dropdown + mobile sidebar — we
* drive these through `is-open` class toggles from app.js.
* 4. Reduced-motion fallback for accessibility.
*
* Tailwind is loaded from CDN AFTER this file, so any utility class
* wins over a raw-selector rule here (except when we use `!important`,
* which we do only for the mobile sidebar transform override below).
*
* Loaded by: layouts/app.php, layouts/guest.php.
*/
/* ─── Brand palette (CSS vars) ───────────────────────────────────── */
/* These are the same values declared in Tailwind's inline config. We
mirror them as CSS variables here so the button / badge / surface
fallbacks below work even if the Play-CDN config lands slowly (or
is blocked). The `dark` scope swaps a few for on-dark adjustments. */
:root {
--brand-50: #eff6ff;
--brand-100: #dbeafe;
--brand-200: #bfdbfe;
--brand-400: #60a5fa;
--brand-500: #3b82f6;
--brand-600: #2563eb;
--brand-700: #1d4ed8;
--brand-800: #1e40af;
--surface: #ffffff;
--surface-muted: #f8fafc;
--surface-sunk: #f1f5f9;
--text: #0f172a;
--text-muted: #475569;
--border: #e5e7eb;
--border-muted: #f1f5f9;
}
html.dark {
--surface: #0f172a; /* slate-900 */
--surface-muted: #020617; /* slate-950 */
--surface-sunk: #1e293b; /* slate-800 */
--text: #e2e8f0; /* slate-200 */
--text-muted: #94a3b8; /* slate-400 */
--border: #1e293b; /* slate-800 */
--border-muted: #334155; /* slate-700 */
}
/* ─── Global polish ──────────────────────────────────────────────── */
html {
-webkit-text-size-adjust: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Tables & numeric cells read cleaner with tabular figures — call
durations, counts, dates all align vertically instead of the
proportional default where "1111" is narrower than "0000". */
table, .tabular-nums {
font-variant-numeric: tabular-nums;
}
/* `color-scheme: dark` tells the browser to render native UI
(scrollbars, form controls, autofill) in dark colors — without it,
the date picker popups + autocomplete dropdowns stay stubbornly
light even when the page is dark. */
html.dark {
color-scheme: dark;
}
/* ─── Webkit scrollbars (dark mode only) ─────────────────────────── */
html.dark ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
html.dark ::-webkit-scrollbar-track {
background: #0b0f19;
}
html.dark ::-webkit-scrollbar-thumb {
background: #1f2937;
border-radius: 6px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
background: #374151;
}
/* ─── Autofill (dark mode override) ──────────────────────────────── */
/* Chrome paints a canary-yellow background on autofilled inputs.
In dark mode that looks broken. We override with a solid surface
color and a long transition to defeat the default animation. */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
-webkit-text-fill-color: #e2e8f0;
-webkit-box-shadow: 0 0 0 1000px #111418 inset;
caret-color: #e2e8f0;
transition: background-color 5000s ease-in-out 0s;
}
/* ─── Modal ──────────────────────────────────────────────────────── */
/* Shape of a modal:
The backdrop + panel fade in together via `is-open`. Tailwind's
`hidden` keeps the modal off the layout entirely when closed; once
`is-open` fires (and we remove `hidden`) the animation runs. */
[data-modal] {
animation: none;
}
[data-modal].is-open {
animation: crms-modal-fade 140ms ease-out;
}
[data-modal] > .modal-panel {
transform: scale(0.98);
opacity: 0;
transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 120ms ease-out;
}
[data-modal].is-open > .modal-panel {
transform: scale(1);
opacity: 1;
}
@keyframes crms-modal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* ─── Dropdown menus ─────────────────────────────────────────────── */
/* panel, paired with a
button. app.js toggles the
is-open class and removes Tailwind's `hidden`. Open-state has a
small slide-down to differentiate from a hard show/hide. */
[data-menu] {
opacity: 0;
transform: translateY(-4px);
transition: opacity 120ms ease-out, transform 120ms ease-out;
pointer-events: none;
}
[data-menu].is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* ─── Mobile sidebar ─────────────────────────────────────────────── */
/* Below the `md` breakpoint we hide the sidebar by default and slide
it in from the start-edge when `data-sidebar` has `.is-open`. The
`!important` is to override Tailwind's `md:flex` class on the base
sidebar element — without it, the `display: flex` from the utility
would leave the sidebar visible at mobile widths. */
@media (max-width: 767.98px) {
[data-sidebar] {
display: flex !important;
position: fixed;
inset-block: 0;
inset-inline-start: 0;
z-index: 60;
width: 17rem;
max-width: 85vw;
transform: translateX(-100%);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
[dir="rtl"] [data-sidebar] {
transform: translateX(100%);
}
[data-sidebar].is-open {
transform: translateX(0);
}
[data-sidebar-backdrop] {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
z-index: 55;
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease-out;
}
[data-sidebar-backdrop].is-open {
opacity: 1;
pointer-events: auto;
}
}
/* ─── Focus rings ─────────────────────────────────────────────────── */
/* Standardize the focus ring for keyboard users. We use :focus-visible
(not :focus) so mouse clicks don't draw a persistent ring around the
clicked button — the ring is only for keyboard nav. */
.focus-ring:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}
html.dark .focus-ring:focus-visible {
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.45);
}
/* ─── Card hover lift (subtle) ───────────────────────────────────── */
.card-hover {
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.card-hover:hover {
transform: translateY(-1px);
}
/* ─── Buttons (standalone system) ────────────────────────────────── */
/*
* Why these exist: the views use Tailwind's `bg-brand-600 text-white …`
* pattern on submit CTAs. That only paints a visible background when
* the custom `brand` palette is generated by Play-CDN's inline config.
* If the config doesn't land (cached stale script, network hiccup), the
* button has `text-white` on NO background → a white-on-white invisible
* CTA. That's the root cause of the "buttons are invisible" reports.
*
* The `.btn`, `.btn-primary` etc. classes below are a fully self-
* contained system: pure CSS, no Tailwind dependency. Apply them to
* any / and the styling renders correctly even if
* Tailwind never loads. We also emit brand-color utility fallbacks
* further below so the existing `bg-brand-600 text-white` markup keeps
* working without editing every view.
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.25rem;
border: 1px solid transparent;
cursor: pointer;
transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
text-decoration: none;
user-select: none;
-webkit-appearance: none;
appearance: none;
}
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
.btn:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.45);
}
/* Primary — brand blue. */
.btn-primary {
background-color: #2563eb; /* brand-600 */
color: #ffffff;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-primary:hover { background-color: #1d4ed8; color: #ffffff; } /* brand-700 */
.btn-primary:active { background-color: #1e40af; } /* brand-800 */
/* Secondary — subtle on both backgrounds. */
.btn-secondary {
background-color: #f3f4f6; /* gray-100 */
color: #1f2937; /* gray-800 */
border-color: #e5e7eb; /* gray-200 */
}
.btn-secondary:hover { background-color: #e5e7eb; color: #1f2937; }
html.dark .btn-secondary {
background-color: #1e293b; /* slate-800 */
color: #e2e8f0; /* slate-200 */
border-color: #334155; /* slate-700 */
}
html.dark .btn-secondary:hover { background-color: #334155; color: #f1f5f9; }
/* Danger — delete / destructive. */
.btn-danger {
background-color: #dc2626; /* red-600 */
color: #ffffff;
}
.btn-danger:hover { background-color: #b91c1c; color: #ffffff; } /* red-700 */
.btn-danger:active { background-color: #991b1b; } /* red-800 */
/* Success — confirmations / positive actions. */
.btn-success {
background-color: #16a34a; /* green-600 */
color: #ffffff;
}
.btn-success:hover { background-color: #15803d; color: #ffffff; } /* green-700 */
/* Warning — caution actions. */
.btn-warning {
background-color: #d97706; /* amber-600 */
color: #ffffff;
}
.btn-warning:hover { background-color: #b45309; color: #ffffff; } /* amber-700 */
/* Ghost — flat, low-emphasis. */
.btn-ghost {
background-color: transparent;
color: #374151; /* gray-700 */
}
.btn-ghost:hover {
background-color: rgba(0,0,0,0.05);
color: #111827; /* gray-900 */
}
html.dark .btn-ghost {
color: #cbd5e1; /* slate-300 */
}
html.dark .btn-ghost:hover {
background-color: rgba(255,255,255,0.06);
color: #f1f5f9; /* slate-100 */
}
/* ─── Brand colour utility fallbacks (with !important) ───────────── */
/*
* These exist because Tailwind's Play-CDN generates custom palette
* utilities ONLY when its inline `window.tailwind.config` lands in
* time. If a browser serves a stale cached Play-CDN script — or the
* MutationObserver misses a late-injected partial — `bg-brand-600`
* resolves to no CSS, and any view using `` renders as white text on a transparent background.
*
* The `!important` flags below are intentional: they guarantee the
* brand shade paints regardless of Play-CDN's state. That's the right
* trade-off here because the brand colours are fixed values (they
* don't change between light and dark mode) and the views use these
* utilities as a drop-in replacement for hard-coded colours.
*/
.bg-brand-50 { background-color: #eff6ff !important; }
.bg-brand-100 { background-color: #dbeafe !important; }
.bg-brand-200 { background-color: #bfdbfe !important; }
.bg-brand-400 { background-color: #60a5fa !important; }
.bg-brand-500 { background-color: #3b82f6 !important; }
.bg-brand-600 { background-color: #2563eb !important; }
.bg-brand-700 { background-color: #1d4ed8 !important; }
.bg-brand-800 { background-color: #1e40af !important; }
.hover\:bg-brand-500:hover { background-color: #3b82f6 !important; }
.hover\:bg-brand-600:hover { background-color: #2563eb !important; }
.hover\:bg-brand-700:hover { background-color: #1d4ed8 !important; }
.text-brand-400 { color: #60a5fa !important; }
.text-brand-500 { color: #3b82f6 !important; }
.text-brand-600 { color: #2563eb !important; }
.text-brand-700 { color: #1d4ed8 !important; }
.border-brand-500 { border-color: #3b82f6 !important; }
.border-brand-600 { border-color: #2563eb !important; }
.focus\:border-brand-500:focus { border-color: #3b82f6 !important; }
.focus\:ring-brand-500:focus {
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45) !important;
}
/* Dark-mode brand tints (also used for active nav rows) */
html.dark .dark\:bg-brand-400 { background-color: #60a5fa !important; }
html.dark .dark\:bg-brand-500\/10 { background-color: rgba(59, 130, 246, 0.10) !important; }
html.dark .dark\:text-brand-400 { color: #60a5fa !important; }
/* ─── Dark-mode FORCE overrides ──────────────────────────────────── */
/*
* The views pair each light utility with a `dark:` variant
* (`bg-white dark:bg-slate-900`, etc.). That pattern requires Tailwind
* Play-CDN to generate BOTH the light AND dark variants at runtime.
* If the dark variant doesn't generate (for any reason: slow CDN,
* stale cache, a browser extension modifying the Play-CDN script),
* the page stays bright-white even when `html.dark` is applied — and
* the user sees no visible change from the toggle.
*
* The rules below FORCE dark styles via `html.dark` + utility-class
* selectors, with `!important` so they beat any CSS that might already
* be on the element. This means:
* - When Tailwind's `dark:` variant is present: both rules set the
* same colour (we match slate-900 → our override also sets
* slate-900). No visible conflict, no regression.
* - When Tailwind's `dark:` variant is missing: our override is the
* only dark rule that matches → dark mode still works.
*
* Colours chosen to match the slate/gray-based palette the views
* already reference via `dark:` variants, so the look is consistent
* whether Tailwind's dark variants generate or not.
*/
/* Body & app shell */
html.dark body {
background-color: #020617 !important; /* slate-950 */
color: #e2e8f0 !important; /* slate-200 */
}
/* Surfaces: any element using plain `bg-white` flips to slate-900 */
html.dark .bg-white { background-color: #0f172a !important; } /* slate-900 */
html.dark .bg-white\/95 { background-color: rgba(15, 23, 42, 0.95) !important; }
html.dark .bg-white\/80 { background-color: rgba(15, 23, 42, 0.80) !important; }
html.dark .bg-white\/60 { background-color: rgba(15, 23, 42, 0.60) !important; }
/* Muted / sunken backgrounds */
html.dark .bg-gray-50 { background-color: #020617 !important; } /* slate-950 */
html.dark .bg-gray-100 { background-color: #1e293b !important; } /* slate-800 */
html.dark .bg-gray-200 { background-color: #334155 !important; } /* slate-700 */
html.dark .hover\:bg-gray-50:hover { background-color: #1e293b !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #1e293b !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #334155 !important; }
/* Text colours */
html.dark .text-gray-900 { color: #f1f5f9 !important; } /* slate-100 */
html.dark .text-gray-800 { color: #e2e8f0 !important; } /* slate-200 */
html.dark .text-gray-700 { color: #cbd5e1 !important; } /* slate-300 */
html.dark .text-gray-600 { color: #94a3b8 !important; } /* slate-400 */
html.dark .text-gray-500 { color: #94a3b8 !important; } /* slate-400 */
html.dark .text-gray-400 { color: #64748b !important; } /* slate-500 */
html.dark .text-gray-300 { color: #475569 !important; } /* slate-600 */
/* Borders */
html.dark .border-gray-100 { border-color: #1e293b !important; }
html.dark .border-gray-200 { border-color: #1e293b !important; }
html.dark .border-gray-300 { border-color: #334155 !important; }
/* ─── Dark-mode STRUCTURAL fallbacks ─────────────────────────────── */
/*
* Belt-and-suspenders: even if a card forgets to declare `bg-white`
* entirely, the structural selectors below paint the layout shell
* correctly in dark mode. These are low-specificity so the utility
* overrides above still win on specific elements.
*/
/* Sidebar */
html.dark aside[data-sidebar] {
background-color: #0f172a !important; /* slate-900 */
border-color: #1e293b !important;
color: #e2e8f0;
}
/* Topbar */
html.dark header[data-topbar] {
background-color: rgba(15, 23, 42, 0.95) !important;
border-color: #1e293b !important;
color: #e2e8f0;
}
/* Footer */
html.dark footer {
background-color: #0f172a !important;
border-color: #1e293b !important;
color: #94a3b8;
}
/* Form controls (inputs, selects, textareas) */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
html.dark select,
html.dark textarea {
background-color: #1e293b; /* slate-800 */
color: #e2e8f0;
border-color: #334155; /* slate-700 */
}
html.dark input::placeholder,
html.dark textarea::placeholder {
color: #64748b; /* slate-500 */
}
/* Tables */
html.dark table {
color: #e2e8f0;
border-color: #1e293b;
}
html.dark thead th {
background-color: #0b1220;
color: #94a3b8;
border-color: #1e293b;
}
html.dark tbody td {
border-color: #1e293b;
}
html.dark tbody tr:hover td,
html.dark tbody tr:hover {
background-color: rgba(30, 41, 59, 0.5);
}
/* Dropdown panels + modal panels (floating surfaces over content) */
html.dark [data-menu],
html.dark [data-modal] .modal-panel {
background-color: #0f172a;
color: #e2e8f0;
border-color: #1e293b;
}
/* Shadows look weak on dark backgrounds — deepen them */
html.dark .shadow-soft,
html.dark .shadow-card,
html.dark .shadow-pop,
html.dark .shadow-sm {
box-shadow:
0 1px 2px 0 rgba(0, 0, 0, 0.45),
0 2px 6px -2px rgba(0, 0, 0, 0.35);
}
/* ─── Login-specific guarantees ──────────────────────────────────── */
/* Pinned styles for the login submit button so a redesigned login
page always has a visible CTA regardless of CDN race conditions.
The button is tagged `data-login-submit` in markup as well as the
Tailwind classes — either path produces a visible blue button. */
[data-login-submit] {
background-color: var(--brand-600);
color: #ffffff;
width: 100%;
padding: 0.625rem 1rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.875rem;
border: 1px solid var(--brand-600);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
transition: background-color 140ms ease;
}
[data-login-submit]:hover { background-color: var(--brand-700); border-color: var(--brand-700); }
[data-login-submit]:active { background-color: var(--brand-800); border-color: var(--brand-800); }
/* ─── Reduced motion ─────────────────────────────────────────────── */
/* Users with prefers-reduced-motion: reduce get all of our animations
cut to near-zero duration. We keep them present (not `none`) so the
state transitions still fire their callbacks — just visually instant. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ─── Print ──────────────────────────────────────────────────────── */
/* If an admin prints a calls report, drop the sidebar / topbar / modal
so only the content flows onto the page. */
@media print {
[data-sidebar], [data-topbar], [data-modal], [data-sidebar-backdrop] {
display: none !important;
}
main { padding: 0 !important; }
}