/* =============================================================
R24K UI KIT
Version 1.1 — May 2026
Design language: Legora-inspired. Clean, minimal, floating
surfaces, semantic chip colors, generous radius.
HOW TO USE
----------
1. Link this file from the CDN. It is the single source of truth.
...kit-styled markup only...
Nothing outside .r24k-scope is touched. Safe to load on any page.
4. Override the three per-site variables on .r24k-scope (after this import):
.r24k-scope {
--color-accent: #1B7280;
--color-accent-hover: #155f6b;
--color-bg: #fdfdfd;
}
That is the only thing that changes per product.
Every other token and component class is shared.
============================================================= */
/* =============================================================
DESIGN TOKENS
Defined on the wrapper so they cascade only inside the kit.
Falls back to :root for any kit elements that ever end up
detached from .r24k-scope (e.g. portals appended to body).
============================================================= */
:root,
.r24k-scope {
/* --- PER-SITE (override these three per product) --- */
--color-accent: #1B7280; /* petroleum teal -- R24k default */
--color-accent-hover: #155f6b;
--color-bg: #fdfdfd;
/* --- SURFACES (fixed) --- */
--color-surface: #FFFFFF;
--color-surface-2: #f8f8f6;
--color-surface-3: #EBEBE8;
--color-surface-glass: rgba(255, 255, 255, 0.72);
/* --- INK (fixed) --- */
--color-text: #1A1A1A;
--color-text-muted: #555555;
--color-text-subtle: #A6A6A6;
/* --- BORDERS (fixed) --- */
--color-border: #ECECEA;
--color-border-subtle: #eae9ea;
--color-border-strong: #D6D6D4;
/* --- SEMANTIC (fixed) --- */
--color-danger: #C4453A;
--color-danger-bg: #FBE8E5;
--color-warn: #A87A2C;
--color-warn-bg: #FBF0D5;
--color-success: #2D7A4F;
--color-success-bg: #E6F2EB;
/* --- CHIP PAIRS (fixed) ---
Each colour earns a meaning, used consistently across all products.
pos = confirmed, paid, connected, success
neg = error, failed, rejected, danger
warn = pending, overdue, needs attention
step = reference, workflow step, link
tabular = data review, table, import
neutral = inactive, secondary, default */
--chip-pos: #2D7A4F; --chip-pos-bg: #E6F2EB;
--chip-neg: #C4453A; --chip-neg-bg: #FBE8E5;
--chip-warn: #A87A2C; --chip-warn-bg: #FBF0D5;
--chip-step: #8B6FB8; --chip-step-bg: #EFE7F5;
--chip-tabular: #E89C5F; --chip-tabular-bg: #FCEDDC;
--chip-neutral: #555555; --chip-neutral-bg: #F2F2F0;
/* --- TYPOGRAPHY (fixed) ---
In Next.js: next/font injects --font-inter and --font-fraunces.
The var(--font-inter, "Inter") pattern falls back gracefully. */
--font-sans: var(--font-inter, "Inter"), -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
--font-display: var(--font-fraunces, "Fraunces"), Georgia, serif;
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
/* --- RADIUS (fixed) --- */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-3xl: 24px;
--radius-pill: 999px;
/* --- SHADOW (fixed) ---
Always soft, vertical, pure black at low opacity. Never grey-blue. */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
--shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
--shadow-lg: 0 16px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
/* --- MOTION (fixed) --- */
--ease: cubic-bezier(0.2, 0, 0, 1);
--transition: all 120ms cubic-bezier(0.2, 0, 0, 1);
--transition-med: all 220ms cubic-bezier(0.2, 0, 0, 1);
/* --- SPACING (4px base) --- */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-7: 32px;
--s-8: 40px;
--s-9: 56px;
/* --- LAYOUT --- */
--width-content: 1200px;
--width-form: 860px;
--width-narrow: 480px;
}
/* =============================================================
RESET (scoped)
Only elements inside .r24k-scope are reset.
============================================================= */
.r24k-scope,
.r24k-scope *,
.r24k-scope *::before,
.r24k-scope *::after {
box-sizing: border-box;
}
/* Only when the body itself carries the scope (greenfield apps),
strip default body/html margins. In embedded use the host page
keeps its own layout. */
body.r24k-scope {
margin: 0;
padding: 0;
}
/* =============================================================
BASE (scoped)
============================================================= */
.r24k-scope {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.5;
text-rendering: optimizeLegibility;
}
.r24k-scope h1,
.r24k-scope h2,
.r24k-scope h3,
.r24k-scope h4,
.r24k-scope h5,
.r24k-scope h6 {
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0;
font-weight: 600;
}
.r24k-scope h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; }
.r24k-scope h2 { font-size: 24px; }
.r24k-scope h3 { font-size: 19px; }
.r24k-scope h4 { font-size: 16px; }
.r24k-scope h5 { font-size: 14px; }
.r24k-scope h6 { font-size: 13px; }
.r24k-scope p { margin: 0; }
.r24k-scope a {
color: inherit;
text-decoration: none;
transition: var(--transition);
}
.r24k-scope a:hover { opacity: 0.7; }
.r24k-scope button {
background: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: inherit;
margin: 0;
padding: 0;
}
.r24k-scope img { display: block; }
.r24k-scope svg { display: inline-block; vertical-align: middle; }
/* =============================================================
FORM ELEMENTS (scoped)
============================================================= */
.r24k-scope input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.flatpickr-calendar *),
.r24k-scope textarea,
.r24k-scope select:not(.flatpickr-calendar *) {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
color: inherit;
font-family: inherit;
font-size: 14px;
outline: none;
transition: var(--transition);
width: 100%;
}
.r24k-scope input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.flatpickr-calendar *),
.r24k-scope select:not(.flatpickr-calendar *) {
height: 32px;
line-height: 30px;
padding: 0 28px 0 10px;
}
.r24k-scope textarea {
line-height: 1.5;
padding: 8px 10px;
}
.r24k-scope input:not(.flatpickr-calendar *):focus,
.r24k-scope textarea:focus,
.r24k-scope select:not(.flatpickr-calendar *):focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.r24k-scope input::placeholder,
.r24k-scope textarea::placeholder {
color: var(--color-text-subtle);
}
.r24k-scope select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: right 10px center;
background-repeat: no-repeat;
cursor: pointer;
}
.r24k-scope label {
display: block;
font-size: 13px;
font-weight: 500;
margin-bottom: 6px;
}
/* =============================================================
BUTTONS (scoped)
============================================================= */
.r24k-scope .btn {
align-items: center;
background: var(--color-accent);
border-radius: var(--radius-pill);
color: white;
display: inline-flex;
font-size: 14px;
font-weight: 500;
gap: 8px;
height: 34px;
justify-content: center;
padding: 0 16px;
transition: var(--transition);
white-space: nowrap;
}
.r24k-scope .btn:hover { background: var(--color-accent-hover); opacity: 1; }
.r24k-scope .btn:disabled { cursor: not-allowed; opacity: 0.5; }
.r24k-scope .btn-secondary {
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-xs);
color: var(--color-text);
}
.r24k-scope .btn-secondary:hover { background: var(--color-surface-2); border-color: var(--color-border); opacity: 1; }
.r24k-scope .btn-danger {
background: var(--color-surface);
border: 1px solid var(--color-danger);
color: var(--color-danger);
}
.r24k-scope .btn-danger:hover { background: var(--color-danger); border-color: var(--color-danger); color: #fff; opacity: 1; }
.r24k-scope .btn-ghost {
background: transparent;
color: var(--color-text-muted);
}
.r24k-scope .btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text); opacity: 1; }
.r24k-scope .btn-sm {
font-size: 12px;
height: 28px;
padding: 0 12px;
}
.r24k-scope .btn-lg {
font-size: 15px;
height: 40px;
padding: 0 22px;
}
.r24k-scope .btn-icon {
height: 32px;
padding: 0;
width: 32px;
}
/* =============================================================
CARD (scoped)
============================================================= */
.r24k-scope .card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--s-6);
}
.r24k-scope .card-sm {
border-radius: var(--radius-lg);
padding: var(--s-4);
}
.r24k-scope .card-lg {
border-radius: var(--radius-2xl);
padding: var(--s-7);
}
/* =============================================================
CHIPS (scoped)
============================================================= */
/* Base chip -- use this plus a modifier below */
.r24k-scope .chip {
align-items: center;
border-radius: var(--radius-md);
display: inline-flex;
font-size: 13px;
font-weight: 500;
gap: 6px;
line-height: 1.3;
padding: 3px 10px;
}
.r24k-scope .chip-pos { background: var(--chip-pos-bg); color: var(--chip-pos); }
.r24k-scope .chip-neg { background: var(--chip-neg-bg); color: var(--chip-neg); }
.r24k-scope .chip-warn { background: var(--chip-warn-bg); color: var(--chip-warn); }
.r24k-scope .chip-step { background: var(--chip-step-bg); color: var(--chip-step); }
.r24k-scope .chip-tabular { background: var(--chip-tabular-bg); color: var(--chip-tabular); }
.r24k-scope .chip-neutral { background: var(--chip-neutral-bg); color: var(--chip-neutral); }
/* Pill variant -- for status, currency, counts */
.r24k-scope .chip-pill {
border-radius: var(--radius-pill);
}
/* File chip -- icon + filename */
.r24k-scope .chip-file {
align-items: center;
background: var(--color-surface-2);
border-radius: var(--radius-md);
color: var(--color-text);
display: inline-flex;
font-size: 14px;
font-weight: 500;
gap: 8px;
padding: 6px 12px 6px 8px;
}
/* Currency pill */
.r24k-scope .chip-currency {
background: color-mix(in srgb, var(--color-accent) 11%, transparent);
border-radius: var(--radius-pill);
color: var(--color-accent);
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
padding: 2px 8px;
}
/* Status dot */
.r24k-scope .status-dot {
background: var(--chip-pos);
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
height: 6px;
width: 6px;
}
.r24k-scope .status-dot-error { background: var(--chip-neg); }
.r24k-scope .status-dot-warn { background: var(--chip-warn); }
/* =============================================================
PDF ICON (scoped)
Renders a small red folded-corner PDF badge.
Usage: PDF
============================================================= */
.r24k-scope .icon-pdf {
align-items: flex-end;
background: linear-gradient(135deg, #F5564B 0%, #DC3F35 100%);
border-radius: 3px;
color: white;
display: inline-flex;
flex-shrink: 0;
font-size: 7px;
font-weight: 700;
height: 24px;
justify-content: center;
letter-spacing: 0.5px;
padding-bottom: 3px;
position: relative;
width: 20px;
}
.r24k-scope .icon-pdf::before {
background: rgba(0, 0, 0, 0.15);
border-radius: 2px 3px 2px 0;
clip-path: polygon(0 0, 100% 100%, 100% 0);
content: "";
height: 8px;
position: absolute;
right: 0;
top: 0;
width: 8px;
}
/* =============================================================
TOOLTIP (scoped)
Usage: hover me
============================================================= */
.r24k-scope [data-tooltip] {
position: relative;
}
.r24k-scope [data-tooltip]::after {
background: var(--color-text);
border-radius: var(--radius-sm);
bottom: calc(100% + 5px);
color: var(--color-bg);
content: attr(data-tooltip);
font-size: 12px;
left: 50%;
opacity: 0;
padding: 4px 8px;
pointer-events: none;
position: absolute;
transform: translateX(-50%);
transition: opacity 0.15s;
white-space: nowrap;
z-index: 200;
}
.r24k-scope [data-tooltip]:hover::after {
opacity: 1;
}
/* =============================================================
MODAL (scoped, basic overlay + dialog)
============================================================= */
.r24k-scope .modal-overlay {
align-items: center;
background: rgba(0, 0, 0, 0.35);
bottom: 0;
display: flex;
justify-content: center;
left: 0;
padding: var(--s-6);
position: fixed;
right: 0;
top: 0;
z-index: 1000;
}
.r24k-scope .modal {
background: var(--color-surface);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
max-width: var(--width-narrow);
padding: var(--s-7);
width: 100%;
}
.r24k-scope .modal-title {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: var(--s-3);
}
.r24k-scope .modal-body {
color: var(--color-text-muted);
font-size: 14px;
line-height: 1.55;
margin-bottom: var(--s-6);
}
.r24k-scope .modal-actions {
display: flex;
gap: var(--s-3);
justify-content: flex-end;
}
/* =============================================================
HINT (scoped, static contextual info, always visible in the UI)
Use for constraints, tips, and contextual notes --
not for feedback after an action (use .alert for that).
============================================================= */
.r24k-scope .hint {
align-items: center;
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
border-radius: var(--radius-lg);
display: flex;
font-size: 13px;
gap: var(--s-2);
line-height: 1.45;
padding: var(--s-3) var(--s-4);
}
.r24k-scope .hint svg {
flex-shrink: 0;
height: 14px;
width: 14px;
}
.r24k-scope .hint-info { background: var(--chip-step-bg); color: var(--chip-step); }
.r24k-scope .hint-warn { background: var(--chip-warn-bg); color: var(--chip-warn); }
.r24k-scope .hint-neg { background: var(--chip-neg-bg); color: var(--chip-neg); }
/* =============================================================
ALERT (scoped, inline feedback banner)
============================================================= */
.r24k-scope .alert {
align-items: flex-start;
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
border-radius: var(--radius-lg);
display: flex;
font-size: 14px;
gap: var(--s-3);
line-height: 1.5;
padding: var(--s-4) var(--s-5);
}
.r24k-scope .alert-icon {
flex-shrink: 0;
margin-top: 1px;
}
.r24k-scope .alert-icon svg {
height: 16px;
width: 16px;
}
.r24k-scope .alert-body { flex: 1; }
.r24k-scope .alert-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
}
.r24k-scope .alert-close {
background: none;
border: none;
color: inherit;
cursor: pointer;
flex-shrink: 0;
line-height: 1;
opacity: 0.55;
padding: 0;
}
.r24k-scope .alert-close:hover { opacity: 1; }
.r24k-scope .alert-pos { background: var(--chip-pos-bg); color: var(--chip-pos); }
.r24k-scope .alert-neg { background: var(--chip-neg-bg); color: var(--chip-neg); }
.r24k-scope .alert-warn { background: var(--chip-warn-bg); color: var(--chip-warn); }
.r24k-scope .alert-step { background: var(--chip-step-bg); color: var(--chip-step); }
/* =============================================================
TOAST (scoped, floating notification stack, fixed top-right)
============================================================= */
.r24k-scope .toast-stack {
display: flex;
flex-direction: column;
gap: var(--s-3);
padding: var(--s-5);
pointer-events: none;
position: fixed;
right: 0;
top: 0;
width: 360px;
z-index: 2000;
}
.r24k-scope .toast {
align-items: flex-start;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left-width: 3px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
display: flex;
font-size: 14px;
gap: var(--s-3);
padding: var(--s-4) var(--s-5);
pointer-events: auto;
}
.r24k-scope .toast-icon {
flex-shrink: 0;
margin-top: 1px;
}
.r24k-scope .toast-icon svg {
height: 16px;
width: 16px;
}
.r24k-scope .toast-body { flex: 1; }
.r24k-scope .toast-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
}
.r24k-scope .toast-message { color: var(--color-text-muted); }
.r24k-scope .toast-close {
background: none;
border: none;
color: var(--color-text-subtle);
cursor: pointer;
flex-shrink: 0;
line-height: 1;
padding: 0;
}
.r24k-scope .toast-close:hover { color: var(--color-text); }
.r24k-scope .toast-pos { border-left-color: var(--chip-pos); }
.r24k-scope .toast-neg { border-left-color: var(--chip-neg); }
.r24k-scope .toast-warn { border-left-color: var(--chip-warn); }
.r24k-scope .toast-step { border-left-color: var(--chip-step); }
.r24k-scope .toast-pos .toast-icon { color: var(--chip-pos); }
.r24k-scope .toast-neg .toast-icon { color: var(--chip-neg); }
.r24k-scope .toast-warn .toast-icon { color: var(--chip-warn); }
.r24k-scope .toast-step .toast-icon { color: var(--chip-step); }
/* =============================================================
MODAL ICON VARIANT (scoped, confirm / destructive dialogs)
Extend the base .modal with a colored icon circle at the top.
============================================================= */
.r24k-scope .modal-icon-wrap {
align-items: center;
border-radius: var(--radius-xl);
display: flex;
height: 48px;
justify-content: center;
margin-bottom: var(--s-5);
width: 48px;
}
.r24k-scope .modal-icon-wrap svg {
height: 22px;
width: 22px;
}
.r24k-scope .modal-icon-neg { background: var(--chip-neg-bg); color: var(--chip-neg); }
.r24k-scope .modal-icon-warn { background: var(--chip-warn-bg); color: var(--chip-warn); }
.r24k-scope .modal-icon-pos { background: var(--chip-pos-bg); color: var(--chip-pos); }
.r24k-scope .modal-icon-step { background: var(--chip-step-bg); color: var(--chip-step); }
/* =============================================================
TABLE (scoped)
============================================================= */
.r24k-scope .table {
border-collapse: collapse;
font-size: 14px;
width: 100%;
}
.r24k-scope .table th {
border-bottom: 1px solid var(--color-border);
color: var(--color-text-muted);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
padding: 8px 12px;
text-align: left;
text-transform: uppercase;
}
.r24k-scope .table td {
border-bottom: 1px solid var(--color-border);
padding: 10px 12px;
vertical-align: middle;
}
.r24k-scope .table tbody tr:last-child td { border-bottom: none; }
.r24k-scope .table tbody tr:hover { background: var(--color-surface-2); }
/* =============================================================
UTILITIES (scoped)
============================================================= */
.r24k-scope .muted { color: var(--color-text-muted); }
.r24k-scope .subtle { color: var(--color-text-subtle); }
.r24k-scope .mono { font-family: var(--font-mono); }
.r24k-scope .nowrap { white-space: nowrap; }
.r24k-scope .sr-only {
clip: rect(0, 0, 0, 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.r24k-scope .container {
margin: 0 auto;
max-width: var(--width-content);
padding: 0 var(--s-6);
}
.r24k-scope .divider {
background: var(--color-border);
border: none;
height: 1px;
margin: var(--s-6) 0;
}
/* =============================================================
FLATPICKR DATE PICKER THEME (scoped)
Visual overrides only -- load flatpickr.min.css first.
HOW TO USE
----------
1. Load flatpickr's default CSS first (structural foundation),
then r24k-kit.css after it (visual overrides).
flatpickr(input, {
appendTo: input.closest(".date-field"),
dateFormat: "d M Y"
});
Without appendTo, flatpickr appends to body and the
kit theme will not apply.
4. The calendar inherits --color-accent automatically.
============================================================= */
/* Wrapper for any flatpickr input. Gives the calendar a local
containing block so it never drifts outside the viewport. */
.r24k-scope .date-field {
display: inline-block;
position: relative;
}
/* Calendar container -- visual only, no width or display overrides */
.r24k-scope .flatpickr-calendar {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
font-family: var(--font-sans);
font-size: 13px;
}
/* Hide the arrow pointer above/below the calendar */
.r24k-scope .flatpickr-calendar.arrowTop::before,
.r24k-scope .flatpickr-calendar.arrowTop::after,
.r24k-scope .flatpickr-calendar.arrowBottom::before,
.r24k-scope .flatpickr-calendar.arrowBottom::after {
display: none;
}
/* Month header */
.r24k-scope .flatpickr-months {
background: var(--color-surface-2);
border-bottom: 1px solid var(--color-border);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.r24k-scope .flatpickr-months .flatpickr-month {
color: var(--color-text);
fill: var(--color-text);
}
.r24k-scope .flatpickr-current-month {
color: var(--color-text);
font-size: 13px;
font-weight: 600;
}
.r24k-scope .flatpickr-current-month input.cur-year {
color: var(--color-text);
font-weight: 600;
}
.r24k-scope .flatpickr-current-month input.cur-year:focus {
outline: none;
}
.r24k-scope .flatpickr-current-month .flatpickr-monthDropdown-months {
background: transparent;
color: var(--color-text);
font-size: 13px;
font-weight: 600;
}
.r24k-scope .flatpickr-current-month .flatpickr-monthDropdown-months:focus {
outline: none;
}
/* Prev / next arrows -- keep position: absolute (flatpickr default), only change color */
.r24k-scope .flatpickr-months .flatpickr-prev-month,
.r24k-scope .flatpickr-months .flatpickr-next-month {
color: var(--color-text-muted);
fill: var(--color-text-muted);
padding: 8px 10px;
transition: var(--transition);
}
.r24k-scope .flatpickr-months .flatpickr-prev-month:hover,
.r24k-scope .flatpickr-months .flatpickr-next-month:hover {
color: var(--color-text);
fill: var(--color-text);
}
/* Weekday labels */
.r24k-scope span.flatpickr-weekday {
background: transparent;
color: var(--color-text-subtle);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* Day cells */
.r24k-scope .flatpickr-day {
border-radius: var(--radius-md);
color: var(--color-text);
font-size: 13px;
transition: var(--transition);
}
.r24k-scope .flatpickr-day:hover,
.r24k-scope .flatpickr-day:focus {
background: var(--color-surface-2);
border-color: var(--color-surface-2);
color: var(--color-text);
}
.r24k-scope .flatpickr-day.today {
border-color: var(--color-accent);
color: var(--color-accent);
font-weight: 600;
}
.r24k-scope .flatpickr-day.today:hover {
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
border-color: var(--color-accent);
color: var(--color-accent);
}
.r24k-scope .flatpickr-day.selected,
.r24k-scope .flatpickr-day.selected:hover,
.r24k-scope .flatpickr-day.startRange,
.r24k-scope .flatpickr-day.startRange:hover,
.r24k-scope .flatpickr-day.endRange,
.r24k-scope .flatpickr-day.endRange:hover {
background: var(--color-accent);
border-color: var(--color-accent);
color: white;
font-weight: 600;
}
.r24k-scope .flatpickr-day.inRange {
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
border-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
box-shadow: none;
color: var(--color-text);
}
.r24k-scope .flatpickr-day.prevMonthDay,
.r24k-scope .flatpickr-day.nextMonthDay {
color: var(--color-text-subtle);
}
.r24k-scope .flatpickr-day.flatpickr-disabled,
.r24k-scope .flatpickr-day.flatpickr-disabled:hover {
color: var(--color-text-subtle);
opacity: 0.4;
}
/* Time picker */
.r24k-scope .flatpickr-time {
border-top: 1px solid var(--color-border);
}
.r24k-scope .flatpickr-time input,
.r24k-scope .flatpickr-time .flatpickr-am-pm {
color: var(--color-text);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
}
.r24k-scope .flatpickr-time input:focus {
box-shadow: none;
}
.r24k-scope .numInputWrapper span.arrowUp,
.r24k-scope .numInputWrapper span.arrowDown {
display: none;
}