/* ==========================================================================
Attendance v2 — global theme
--------------------------------------------------------------------------
Loaded LAST, after Bootstrap/AdminBSB, so it can neutralise the parts of the
old chrome it replaces. Everything here is prefixed `ti-` (Trivedi Infoway)
so it cannot collide with Bootstrap or AdminBSB class names — the old theme
styles `.navbar`, `.sidebar` and `#leftsidebar`, none of which we use.
Light/dark is driven by `data-theme` on , set before first paint by
the inline script in header.php. Every colour is a custom property, so a
page never hard-codes one.
Sections
1 Fonts
2 Design tokens
3 Reset & base
4 Keyframes
5 App shell
6 Sidebar
7 Topbar
8 Components
9 Utilities
10 Legacy compatibility
11 Responsive
========================================================================== */
/* 1 — Fonts ============================================================== */
/* Plus Jakarta Sans for UI, IBM Plex Mono for anything numeric: times, totals,
dates. Monospace digits stop table columns from jittering as values change.
The families are requested from a
hands its own background straight to the OS popup, and a translucent one
composites over white -- see .ti-select. */
--ti-chip-solid: #f7f6f2;
--ti-track-bg: #e9e7e0;
/* A panel that holds its own fields, which on paper-white has to be deeper
than a chip: the fields inside it are white, and --ti-chip-bg left them
two per cent apart from their own background -- boxes you could not see. */
--ti-panel-bg: #edebe4;
/* A tooltip is an overlay, not a surface: on a light page it inverts, which
is what the native one does and what reads fastest over any background. */
--ti-tip-bg: #1f1e1b;
--ti-tip-text: #f4f3ef;
--ti-tip-border: rgb(255 255 255 / .12);
--ti-shadow-sm: 0 8px 18px -14px rgb(0 0 0 / .35);
--ti-shadow: 0 16px 30px -20px rgb(0 0 0 / .3);
--ti-shadow-lg: 0 30px 60px -30px rgb(0 0 0 / .35);
color-scheme: light;
}
/* --- Dark --- */
:root[data-theme="dark"] {
--ti-bg: #0a0c11;
--ti-canvas-glow: radial-gradient(120% 90% at 15% 0%, rgb(120 110 255 / .09), transparent 60%);
--ti-text: #e8eaf1;
--ti-text-soft: #a9adba;
/* Lifted from #7e8290, which measured 5.1:1 on --ti-bg. That clears AA on
paper, but the things wearing it are the smallest type in the app -- the
11px tracked-out mono of .ti-page-eyebrow, table headers, card captions --
and at that size on near-black it read as grey noise rather than text.
6.5:1 now, still two clear steps below --ti-text (16:1) and --ti-text-soft
(8.7:1), so secondary text still reads as secondary. */
--ti-text-muted: #8f95a4;
/* 6.3:1 on a dark card. */
--ti-red: oklch(.7 .19 25);
--ti-header-grad: linear-gradient(100deg, oklch(.31 .11 285), oklch(.34 .12 258));
--ti-sidebar-bg: #10131a;
--ti-count-bg: rgb(255 255 255 / .12);
--ti-border: rgb(255 255 255 / .07);
--ti-border-strong: rgb(255 255 255 / .3);
--ti-nav-color: #9598a6;
--ti-nav-icon: oklch(.72 .13 275);
--ti-nav-hover-bg: rgb(255 255 255 / .07);
--ti-nav-hover-color: #fff;
--ti-accent: oklch(.72 .15 275);
--ti-accent-soft: oklch(.72 .15 275 / .14);
--ti-card-bg: #12151d;
--ti-chip-bg: rgb(255 255 255 / .04);
--ti-chip-solid: #14161b;
--ti-track-bg: rgb(255 255 255 / .06);
/* Dark needs no deepening: the fields inside a panel are #12151d, which
already reads against this wash. */
--ti-panel-bg: rgb(255 255 255 / .04);
/* Dark already is the overlay colour, so this lifts instead of inverting. */
--ti-tip-bg: #1e222c;
--ti-tip-text: #e8eaf1;
--ti-tip-border: rgb(255 255 255 / .12);
--ti-shadow-sm: 0 8px 18px -14px rgb(0 0 0 / .7);
--ti-shadow: 0 16px 30px -20px rgb(0 0 0 / .6);
--ti-shadow-lg: 0 30px 60px -30px rgb(0 0 0 / .8);
color-scheme: dark;
}
/* 3 — Reset & base ======================================================= */
/* Bootstrap sets this on every page it is loaded on, and the layout here
assumes it -- without it `min-height: 100vh` plus padding overflows the
viewport and puts a scrollbar on a page that fits. The login screen no
longer loads Bootstrap, so it has to be stated. */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
background: var(--ti-bg);
}
/* `display: flow-root` is load-bearing, not decoration. The content container
(`.ti-page` / `section.content`) clears the fixed topbar with
`margin-top: var(--ti-header-h)`, and it is effectively the first in-flow
child of an unpadded body -- so that margin collapsed *out* of the body box
and pushed body down by 64px instead of moving the content inside it. With
`min-height: 100vh` still asking for a full-viewport body, the document came
out 64px taller than the screen and every page carried a small scrollbar
even when the content fitted (most visible on the dashboard, which is one
screen of tiles). flow-root gives body its own formatting context, so the
margin stays inside and the page measures exactly 100vh. */
body.ti-body {
margin: 0;
display: flow-root;
min-height: 100vh;
background: var(--ti-bg);
background-image: var(--ti-canvas-glow);
background-attachment: fixed;
color: var(--ti-text);
font-family: var(--ti-font);
font-size: 14px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
transition: background-color var(--ti-slow) ease, color var(--ti-slow) ease;
}
/* WebKit's `antialiased` above turns subpixel rendering off. On a paper-white
page that is what you want -- it stops dark-on-light text from rendering
heavier than the weight asked for. Light-on-dark is the opposite case: the
glyphs already thin out against a near-black ground, and dropping subpixel
AA on top of that is what makes small labels look washed rather than set.
Dark keeps whatever the platform does by default.
No effect on Windows or Linux, where this property was never implemented --
it is macOS and iOS that this is for. */
:root[data-theme="dark"] body.ti-body {
-webkit-font-smoothing: auto;
}
/* AdminBSB sets a 0.5s transition on `body` for its own theme switcher; that
makes our own toggle feel sluggish and fights the one above. */
body.ti-body {
transition-property: background-color, color;
}
.ti-body h1,
.ti-body h2,
.ti-body h3,
.ti-body h4,
.ti-body h5,
.ti-body h6 {
font-family: var(--ti-font);
font-weight: 800;
letter-spacing: -.02em;
color: var(--ti-text);
}
.ti-body a {
color: var(--ti-accent);
text-decoration: none;
transition: color var(--ti-fast) ease;
}
.ti-body a:hover,
.ti-body a:focus {
color: var(--ti-accent);
filter: brightness(1.15);
text-decoration: none;
}
.ti-body :focus-visible {
outline: 2px solid var(--ti-accent);
outline-offset: 2px;
border-radius: 6px;
}
/* Numeric text. Applied to any figure that sits in a column so the digits
line up: totals, clock, dates, durations. */
.ti-num {
font-family: var(--ti-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
/* --- Cross-document view transitions ------------------------------------
The design is a single-page app: changing tab is a state change, so nothing
blinks. This app navigates for real, and a full reload between tabs is what
made it feel heavier than the mockup.
`navigation: auto` lets the browser animate between two page loads instead
of cutting to white. Naming the header and the sidebar takes them out of the
page snapshot, so they hold still while only the content crosses over --
which is what the sidebar staying put in an SPA actually looks like.
Chrome and Edge honour this today; everywhere else simply navigates as
before, so there is nothing to fall back to. */
@view-transition {
navigation: auto;
}
.ti-header { view-transition-name: ti-header; }
.ti-sidebar { view-transition-name: ti-sidebar; }
::view-transition-old(root) {
animation: ti-vt-out .18s ease both;
}
::view-transition-new(root) {
animation: ti-vt-in .26s var(--ti-ease) both;
}
@keyframes ti-vt-out {
to { opacity: 0; transform: translateY(-6px); }
}
@keyframes ti-vt-in {
from { opacity: 0; transform: translateY(8px); }
}
/* A transition is motion; someone who asked for less should not get it. */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}
/* 4 — Keyframes ========================================================== */
@keyframes ti-rise-in {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: none; }
}
@keyframes ti-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Diagonal highlight that travels across a tile. Used sparingly — on the
dashboard metric cards only. */
@keyframes ti-sweep {
0% { transform: translateX(-120%) skewX(-18deg); }
55%, 100% { transform: translateX(320%) skewX(-18deg); }
}
@keyframes ti-badge-pulse {
0%, 100% { box-shadow: 0 0 0 0 oklch(.55 .2 20 / .55); }
60% { box-shadow: 0 0 0 6px oklch(.55 .2 20 / 0); }
}
@keyframes ti-shimmer {
0% { background-position: -160% 0; }
100% { background-position: 160% 0; }
}
@keyframes ti-ripple {
from { transform: scale(0); opacity: .6; }
to { transform: scale(32); opacity: 0; }
}
.ti-rise { animation: ti-rise-in .55s var(--ti-ease) both; }
.ti-fade { animation: ti-fade-in .4s ease both; }
/* Respect the OS setting. Everything still renders, it just arrives at once. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* 5 — App shell ========================================================== */
/* Each content view includes nav.php and left_sidebar.php itself, so there is
no wrapper element to hang a flex layout on. Both are `position: fixed`
instead and the offset lives on the content container — which also means a
view needs no extra markup to sit correctly.
`section.content` is the old AdminBSB container every un-migrated view still
opens with; `.ti-page` is the class redesigned views use. Both get the same
treatment so the two can coexist while the migration is in progress. */
.ti-body section.content,
.ti-body .ti-page {
margin: var(--ti-header-h) 0 0 var(--ti-sidebar-w);
padding: 26px 28px 34px;
min-height: calc(100vh - var(--ti-header-h));
transition: margin-left var(--ti-base) var(--ti-ease);
}
:root[data-sidebar="collapsed"] .ti-body section.content,
:root[data-sidebar="collapsed"] .ti-body .ti-page {
margin-left: var(--ti-sidebar-w-collapsed);
}
/* The empty that wraps the sidebar include must not add height. */
.ti-body > section:empty,
.ti-body section:has(> .ti-sidebar) {
margin: 0;
padding: 0;
min-height: 0;
}
.ti-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.ti-page-eyebrow {
font-family: var(--ti-mono);
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ti-text-muted);
margin-bottom: 6px;
}
/* A title with something qualifying it on the same line -- the financial year
the leave figures are counted over. Wraps rather than pushing the chip off
the edge on a narrow screen; baseline, not centre, so the chip sits with the
text and not with the cap height of a 27px heading. */
.ti-titlerow {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
}
/* These sit on headings as often as not, and `.ti-body h1..h6` in g3 is
(0,1,1) -- one more than a bare class. Without the .ti-body in front, a
heading quietly took the base colour and letter-spacing instead of the
ones stated right here, which is exactly what happened to the Settings
card titles. */
.ti-body .ti-page-title {
font-size: 27px;
font-weight: 800;
letter-spacing: -.03em;
margin: 0;
}
/* 6 — Sidebar ============================================================ */
.ti-sidebar {
position: fixed;
top: var(--ti-header-h);
left: 0;
bottom: 0;
width: var(--ti-sidebar-w);
display: flex;
flex-direction: column;
background: var(--ti-sidebar-bg);
border-right: 1px solid var(--ti-border);
transition: width var(--ti-base) var(--ti-ease), background-color var(--ti-slow) ease;
z-index: 900;
}
:root[data-sidebar="collapsed"] .ti-sidebar {
width: var(--ti-sidebar-w-collapsed);
}
/* --- Banner --- */
/* --- Collapse control --- */
.ti-sidebar-toggle {
flex: none;
display: flex;
justify-content: flex-end;
padding: 8px 12px 6px;
}
.ti-sidebar-toggle button {
display: grid;
place-items: center;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--ti-nav-icon);
cursor: pointer;
transition: background-color var(--ti-fast) ease;
}
.ti-sidebar-toggle button:hover {
background: var(--ti-nav-hover-bg);
}
.ti-sidebar-toggle svg {
transition: transform var(--ti-base) var(--ti-ease);
}
:root[data-sidebar="collapsed"] .ti-sidebar-toggle svg {
transform: rotate(180deg);
}
/* --- Nav --- */
.ti-nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 2px 10px 14px;
list-style: none;
margin: 0;
scrollbar-width: thin;
scrollbar-color: var(--ti-border) transparent;
}
.ti-nav::-webkit-scrollbar { width: 6px; }
.ti-nav::-webkit-scrollbar-thumb {
background: var(--ti-border);
border-radius: 6px;
}
.ti-nav li { margin: 0 0 2px; }
.ti-nav a {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--ti-radius-sm);
font-size: 14px;
font-weight: 600;
color: var(--ti-nav-color);
white-space: nowrap;
transition:
background-color var(--ti-base) ease,
color var(--ti-base) ease,
transform var(--ti-base) var(--ti-ease),
box-shadow var(--ti-base) ease;
}
.ti-nav a:hover,
.ti-nav a:focus-visible {
background: var(--ti-nav-hover-bg);
color: var(--ti-nav-hover-color);
transform: translateX(5px);
box-shadow: inset 3px 0 0 0 var(--ti-accent);
filter: none;
}
.ti-nav li.is-active > a {
background: var(--ti-nav-hover-bg);
color: var(--ti-nav-hover-color);
box-shadow: inset 3px 0 0 0 var(--ti-accent);
}
.ti-nav-icon {
flex: none;
display: grid;
place-items: center;
width: 20px;
height: 20px;
color: var(--ti-nav-icon);
transition: transform var(--ti-base) var(--ti-ease);
}
.ti-nav a:hover .ti-nav-icon {
transform: scale(1.15) rotate(-6deg);
}
.ti-nav li.is-active .ti-nav-icon {
color: var(--ti-accent);
}
.ti-nav-label { flex: 1; }
.ti-nav-badge {
flex: none;
font-family: var(--ti-mono);
font-size: 10px;
font-weight: 600;
line-height: 1;
padding: 3px 6px;
border-radius: 20px;
background: oklch(.55 .2 20);
color: #fff;
animation: ti-badge-pulse 2.6s ease-in-out infinite;
}
/* Collapsed: icons only, centred. Labels are removed from the a11y tree too —
the link keeps its accessible name from `aria-label` set in the markup. */
:root[data-sidebar="collapsed"] .ti-nav a {
justify-content: center;
padding: 10px 0;
}
:root[data-sidebar="collapsed"] .ti-nav-label,
:root[data-sidebar="collapsed"] .ti-nav-badge {
display: none;
}
:root[data-sidebar="collapsed"] .ti-nav a:hover {
transform: none;
}
/* --- Legal footer --- */
.ti-sidebar-legal {
flex: none;
padding: 12px 16px;
border-top: 1px solid var(--ti-border);
font-size: 11px;
line-height: 1.5;
color: var(--ti-text-muted);
}
:root[data-sidebar="collapsed"] .ti-sidebar-legal {
display: none;
}
/* 7 — Topbar ============================================================= */
.ti-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--ti-header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 24px;
background: var(--ti-header-grad);
border-bottom: 1px solid rgb(255 255 255 / .08);
color: #fff;
transition: background var(--ti-slow) ease;
z-index: 1000;
}
/* Everything in the bar sits on a saturated gradient, so it is always white.
Scoped under `.ti-body .ti-header` deliberately: the generic `.ti-body a`
rule in §3 is (0,1,1) and would otherwise beat a plain `.ti-brand` (0,1,0)
and paint these with --ti-accent -- which is a light violet in dark mode and
therefore looked fine, but a dark violet in light mode, where it vanished
into the blue. */
.ti-body .ti-header a,
.ti-body .ti-header a:hover,
.ti-body .ti-header a:focus {
color: #fff;
filter: none;
text-decoration: none;
}
.ti-brand {
font-size: 17px;
font-weight: 800;
letter-spacing: -.02em;
}
.ti-header-actions {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
/* Given a hit area and a hover state, so they read as controls rather than
loose words floating in the bar. */
.ti-header-link {
padding: 7px 13px;
border-radius: 9px;
color: rgb(255 255 255 / .85);
font-weight: 600;
transition: color var(--ti-fast) ease, background-color var(--ti-fast) ease;
}
.ti-header-link:hover,
.ti-header-link:focus {
background: rgb(255 255 255 / .14);
color: #fff;
filter: none;
}
.ti-header-user {
display: flex;
align-items: center;
gap: 8px;
margin-right: 6px;
padding: 7px 14px;
border-radius: 20px;
background: rgb(255 255 255 / .14);
color: #fff;
font-size: 13px;
font-weight: 600;
}
/* --- "Request Leave" call to action --- */
.ti-header-cta {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 15px;
border-radius: 20px;
background: rgb(255 255 255 / .14);
color: #fff;
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
transition: background-color var(--ti-fast) ease, transform var(--ti-fast) ease;
}
.ti-body .ti-header .ti-header-cta:hover,
.ti-body .ti-header .ti-header-cta:focus {
background: rgb(255 255 255 / .26);
transform: translateY(-1px);
}
/* --- Account menu --- */
.ti-usermenu { position: relative; }
.ti-usermenu-trigger {
display: flex;
align-items: center;
gap: 9px;
padding: 4px 12px 4px 4px;
border: 0;
border-radius: 24px;
background: rgb(255 255 255 / .1);
color: #fff;
font-family: var(--ti-font);
cursor: pointer;
transition: background-color var(--ti-fast) ease;
}
.ti-usermenu-trigger:hover,
.ti-usermenu.is-open .ti-usermenu-trigger {
background: rgb(255 255 255 / .2);
}
.ti-avatar {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex: none;
border-radius: 50%;
background: linear-gradient(135deg, oklch(.6 .17 285), oklch(.48 .17 305));
color: #fff;
font-size: 12px;
font-weight: 700;
}
.ti-usermenu-id {
display: flex;
flex-direction: column;
line-height: 1.25;
text-align: left;
}
.ti-usermenu-name {
font-size: 12.5px;
font-weight: 700;
color: #fff;
}
.ti-usermenu-role {
font-size: 10.5px;
color: rgb(255 255 255 / .7);
}
/* Opened by toggling `.is-open` on the wrapper rather than :hover — a hover
menu is unusable on touch and snaps shut when the pointer cuts a corner. */
.ti-usermenu-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 186px;
padding: 5px;
border-radius: 13px;
background: var(--ti-sidebar-bg);
border: 1px solid var(--ti-border);
box-shadow: var(--ti-shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--ti-fast) ease, transform var(--ti-fast) var(--ti-ease), visibility var(--ti-fast);
z-index: 1100;
}
.ti-usermenu.is-open .ti-usermenu-panel {
opacity: 1;
visibility: visible;
transform: none;
}
/* The .ti-body .ti-header prefix is load-bearing. Every link in the topbar is
forced to #fff so it reads against the gradient, and that rule -- (0,2,1) --
outranks a plain `.ti-usermenu-panel a`. The panel is not on the gradient
though: it sits on --ti-sidebar-bg, which is white in the light theme, so
the items were white on white and the menu came up looking empty. */
.ti-body .ti-header .ti-usermenu-panel a,
.ti-usermenu-panel a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 9px;
color: var(--ti-text);
font-size: 12.5px;
font-weight: 600;
transition: background-color var(--ti-fast) ease;
}
.ti-body .ti-header .ti-usermenu-panel a:hover,
.ti-body .ti-header .ti-usermenu-panel a:focus,
.ti-usermenu-panel a:hover,
.ti-usermenu-panel a:focus {
background: var(--ti-nav-hover-bg);
color: var(--ti-text);
filter: none;
}
.ti-usermenu-panel a svg { color: var(--ti-accent); }
.ti-usermenu-danger svg { color: var(--ti-red) !important; }
/* Theme switch */
.ti-theme-toggle {
position: relative;
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 8px;
background: rgb(255 255 255 / .14);
color: #fff;
cursor: pointer;
overflow: hidden;
transition: background-color var(--ti-fast) ease, transform var(--ti-base) ease;
}
.ti-theme-toggle:hover {
background: rgb(255 255 255 / .26);
transform: rotate(-8deg);
}
/* Only one of the two glyphs is shown, whichever the click will switch *to*. */
/* An inline sits on a text baseline, so the span around it is a line box
taller than the glyph, with the descender space left under it -- which pushed
the icon 1.5px above the middle of the button. Blocking the svg drops the
baseline and the box becomes the glyph. */
.ti-theme-toggle .ti-icon { display: block; }
.ti-theme-toggle .ti-icon-sun { display: none; }
:root[data-theme="dark"] .ti-theme-toggle .ti-icon-sun { display: block; }
:root[data-theme="dark"] .ti-theme-toggle .ti-icon-moon { display: none; }
/* Water-drop feedback on the topbar when the theme flips. */
.ti-ripple {
position: absolute;
top: 14px;
right: 96px;
width: 16px;
height: 16px;
border-radius: 50%;
background: radial-gradient(circle, rgb(255 255 255 / .55), transparent 70%);
pointer-events: none;
animation: ti-ripple .65s ease-out forwards;
}
/* Drawer backdrop. Only ever visible below the mobile breakpoint. */
.ti-scrim { display: none; }
/* Hamburger, mobile only */
.ti-nav-open {
display: none;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 8px;
background: rgb(255 255 255 / .14);
color: #fff;
cursor: pointer;
}
.ti-header-left {
display: flex;
align-items: center;
gap: 12px;
}
/* 8 — Components ========================================================= */
/* --- Card --- */
.ti-card {
background: var(--ti-card-bg);
border: 1px solid var(--ti-border);
border-radius: var(--ti-radius);
transition:
transform var(--ti-base) var(--ti-ease),
border-color var(--ti-base) ease,
box-shadow var(--ti-base) ease;
}
.ti-card--pad { padding: 16px 18px; }
.ti-card--hover:hover {
transform: translateY(-3px);
border-color: var(--ti-accent);
box-shadow: var(--ti-shadow);
}
/* --- Chip: a small labelled value --- */
.ti-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 20px;
background: var(--ti-chip-bg);
border: 1px solid var(--ti-border);
font-size: 12.5px;
color: var(--ti-text);
}
.ti-chip-label {
font-size: 10.5px;
letter-spacing: .08em;
text-transform: uppercase;
/* Soft, not muted: at this size the quiet token measured about 6:1 on the
surface it sits on, which is AA for text twice as big and grey mush
here. Soft takes it past 8. */
color: var(--ti-text-soft);
}
/* A row of chips for the counts that do not warrant a card each. The value
takes its colour from --chip-h, the same hue-per-figure arrangement the
summary cards and the day cards use. */
.ti-chiprow {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 22px;
}
/* The fallback belongs inside var(), not as a declaration here -- a custom
property set on the element itself shadows the one inherited from the chip,
so every value would come out the same hue. */
.ti-chip-value {
font-size: 14px;
font-weight: 600;
color: oklch(.48 .16 var(--chip-h, 275));
}
:root[data-theme="dark"] .ti-chip-value { color: oklch(.8 .13 var(--chip-h, 275)); }
/* --- Badge: status pill --- */
.ti-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
line-height: 1.5;
}
.ti-badge--green { background: var(--ti-green-bg); color: var(--ti-green); }
.ti-badge--teal { background: oklch(.62 .15 195 / .2); color: oklch(.75 .14 195); }
.ti-badge--blue { background: var(--ti-blue-bg); color: var(--ti-blue); }
.ti-badge--amber { background: var(--ti-amber-bg); color: var(--ti-amber); }
.ti-badge--red { background: var(--ti-red-bg); color: var(--ti-red); }
/* --- Buttons --- */
.ti-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid transparent;
border-radius: 12px;
font-family: var(--ti-font);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: transform var(--ti-fast) ease, box-shadow var(--ti-fast) ease,
background-color var(--ti-fast) ease;
}
.ti-btn:hover { transform: translateY(-2px); }
.ti-btn--primary {
background: linear-gradient(135deg, oklch(.58 .19 285), oklch(.5 .18 258));
color: #fff;
box-shadow: 0 12px 24px -14px oklch(.5 .18 275 / .9);
}
.ti-btn--primary:hover,
.ti-btn--primary:focus { color: #fff; filter: none; }
.ti-btn--ghost {
background: var(--ti-chip-bg);
border-color: var(--ti-border);
color: var(--ti-text);
}
.ti-btn--danger {
background: var(--ti-red-bg);
color: var(--ti-red);
}
/* --- Icon button --- */
.ti-icon-btn {
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 9px;
background: var(--ti-chip-bg);
color: var(--ti-text-soft);
cursor: pointer;
transition: transform var(--ti-fast) ease, background-color var(--ti-fast) ease;
}
.ti-icon-btn:hover { transform: translateY(-2px); }
/* --- Tabs --- */
.ti-tabs {
display: inline-flex;
gap: 6px;
padding: 5px;
border-radius: var(--ti-radius);
background: var(--ti-chip-bg);
border: 1px solid var(--ti-border);
}
.ti-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: 0;
border-radius: var(--ti-radius-sm);
background: transparent;
color: var(--ti-text-soft);
font-family: var(--ti-font);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background-color var(--ti-base) ease, color var(--ti-base) ease,
transform var(--ti-fast) ease;
}
.ti-tab:hover { transform: translateY(-1px); }
.ti-tab.is-active {
background: linear-gradient(135deg, oklch(.58 .19 285), oklch(.5 .18 258));
color: #fff;
box-shadow: 0 10px 22px -14px oklch(.5 .18 275 / .95);
}
/* Tabs that navigate rather than switch panels in place. `a` needs the link
colour from §3 overridden, and the row sits above the page content. */
.ti-tabs--nav {
margin-bottom: 22px;
flex-wrap: wrap;
}
.ti-body .ti-tabs--nav .ti-tab { color: var(--ti-text-soft); }
.ti-body .ti-tabs--nav .ti-tab:hover { color: var(--ti-text); filter: none; }
.ti-body .ti-tabs--nav .ti-tab.is-active,
.ti-body .ti-tabs--nav .ti-tab.is-active:hover { color: #fff; filter: none; }
.ti-tab-count {
font-family: var(--ti-mono);
font-size: 10px;
font-weight: 600;
line-height: 1;
padding: 3px 7px;
border-radius: 20px;
background: oklch(.55 .2 20);
color: #fff;
}
.ti-tab.is-active .ti-tab-count { background: rgb(255 255 255 / .26); }
/* --- Progress track --- */
.ti-track {
height: 6px;
border-radius: 20px;
background: var(--ti-track-bg);
overflow: hidden;
}
.ti-track-fill {
height: 100%;
border-radius: 20px;
background: linear-gradient(90deg, oklch(.62 .16 195), oklch(.55 .17 215));
transition: width .6s var(--ti-ease);
}
/* --- Form controls --- */
.ti-input,
.ti-select,
.ti-textarea {
width: 100%;
padding: 11px 13px;
border: 1px solid var(--ti-border);
border-radius: 11px;
background: var(--ti-chip-bg);
color: var(--ti-text);
font-family: var(--ti-font);
font-size: 13px;
transition: border-color var(--ti-fast) ease, box-shadow var(--ti-fast) ease;
}
.ti-input:focus,
.ti-select:focus,
.ti-textarea:focus {
outline: none;
border-color: var(--ti-accent);
box-shadow: 0 0 0 3px var(--ti-accent-soft);
}
/* The option list is drawn by the OS, not by us: it inherits the select's own
background and colour, and a translucent background composites over white --
which left dark-theme options as pale grey on near-white. Opaque both, and
restate them on the options for the browsers that read them from there. */
.ti-select { background-color: var(--ti-chip-solid); }
.ti-select option,
.ti-select optgroup {
background-color: var(--ti-chip-solid);
color: var(--ti-text);
}
.ti-textarea { resize: vertical; min-height: 84px; }
.ti-label {
display: block;
margin-bottom: 6px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ti-text-muted);
}
/* --- Loading placeholder --- */
.ti-skeleton {
border-radius: 6px;
background: linear-gradient(
90deg,
var(--ti-track-bg) 25%,
var(--ti-chip-bg) 50%,
var(--ti-track-bg) 75%
);
background-size: 250% 100%;
animation: ti-shimmer 1.3s ease-in-out infinite;
}
/* --- Bento metric tiles -------------------------------------------------
The dashboard grid. Four columns of 132px rows; a tile claims more space
with --wide (2 columns) or --hero (2x2). `grid-auto-flow: dense` lets the
small tiles backfill the gaps a hero leaves behind.
Colour is parameterised: each tile sets `--tile-h` (an OKLCH hue) inline and
every gradient, icon wash and progress bar is derived from it here. That is
the one thing a view is allowed to pass in — it keeps twelve near-identical
gradient definitions out of the stylesheet without hard-coding colour in
the markup. */
.ti-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 132px;
grid-auto-flow: dense;
gap: var(--ti-gap);
}
/* Four equal tiles on one row — the dashboard's layout. Kept as a modifier so
the dense bento above is still available for pages that mix tile sizes. */
.ti-bento--4 { grid-auto-flow: row; }
.ti-tile {
--tile-h: 275; /* overridden per tile */
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px 18px;
border-radius: var(--ti-radius-lg);
border: 1px solid rgb(255 255 255 / .09);
background: linear-gradient(
135deg,
oklch(.6 calc(.19 * var(--tile-c, 1)) var(--tile-h)),
oklch(.44 calc(.17 * var(--tile-c, 1)) calc(var(--tile-h) + 16))
);
color: #fff;
box-shadow: 0 12px 26px -16px rgb(0 0 0 / .6);
animation: ti-rise-in .6s var(--ti-ease) both;
transition: transform var(--ti-base) var(--ti-ease), box-shadow var(--ti-base) ease;
}
:root[data-theme="dark"] .ti-tile {
background: linear-gradient(
135deg,
oklch(.44 calc(.15 * var(--tile-c, 1)) var(--tile-h)),
oklch(.27 calc(.1 * var(--tile-c, 1)) calc(var(--tile-h) + 16))
);
}
/* Travelling highlight. Each tile inherits its own animation-delay from the
stagger below, so they do not all sweep in lockstep. */
.ti-tile::after {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 40%;
background: linear-gradient(90deg, transparent, rgb(255 255 255 / .18), transparent);
animation: ti-sweep 3.4s ease-in-out infinite;
animation-delay: inherit;
pointer-events: none;
}
.ti-tile--wide { grid-column: span 2; }
.ti-tile--hero {
grid-column: span 2;
grid-row: span 2;
padding: 22px 24px;
}
.ti-tile--link { cursor: pointer; }
/* Nobody is punched in. The tile keeps its gradient, its shape and its
lightness and gives up only its colour -- `--tile-c` is a 0-1 multiplier on
the chroma of every oklch() above, so 0 is the same tile drawn in grey.
Hue alone could not do this: oklch(.6 .19 ) is always a colour.
This is the old app's tell, carried over. It read the same max(check_status)
parity and swapped the tile to a flat #7b7b7b when the day was not running.
Only Today's tile ever wears it -- it is the only figure that can be live. */
.ti-tile--off { --tile-c: 0; }
.ti-tile--link:hover,
.ti-tile--link:focus-visible {
transform: translateY(-5px) scale(1.015);
box-shadow: 0 26px 44px -18px rgb(0 0 0 / .7);
}
.ti-tile-head {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.ti-tile-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex: none;
border-radius: 9px;
background: rgb(255 255 255 / .18);
color: #fff;
}
:root[data-theme="dark"] .ti-tile-icon {
background: rgb(255 255 255 / .12);
color: oklch(.78 calc(.15 * var(--tile-c, 1)) var(--tile-h));
}
.ti-tile-label {
font-size: 12px;
font-weight: 600;
line-height: 1.35;
text-align: right;
color: rgb(255 255 255 / .82);
}
:root[data-theme="dark"] .ti-tile-label { color: rgb(255 255 255 / .7); }
.ti-tile-body { position: relative; }
.ti-tile-value {
font-family: var(--ti-mono);
font-variant-numeric: tabular-nums;
font-size: 28px;
font-weight: 600;
letter-spacing: -.03em;
line-height: 1.1;
}
.ti-tile--hero .ti-tile-value { font-size: 54px; }
.ti-tile--wide .ti-tile-value { font-size: 34px; }
.ti-tile-sub {
font-family: var(--ti-mono);
font-size: 12px;
margin-top: 6px;
color: rgb(255 255 255 / .78);
}
.ti-tile-note {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
font-size: 11.5px;
color: rgb(255 255 255 / .8);
}
/* Pulsing dot shown on the Today tile while the clock is still running. */
.ti-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: oklch(.86 .16 165);
animation: ti-badge-pulse 1.6s ease-in-out infinite;
}
.ti-tile-bar {
margin-top: 10px;
height: 3px;
border-radius: 3px;
background: rgb(255 255 255 / .25);
overflow: hidden;
}
:root[data-theme="dark"] .ti-tile-bar { background: rgb(255 255 255 / .16); }
.ti-tile-bar > span {
display: block;
height: 100%;
border-radius: 3px;
background: #fff;
transition: width .6s var(--ti-ease);
}
:root[data-theme="dark"] .ti-tile-bar > span {
background: oklch(.78 calc(.15 * var(--tile-c, 1)) var(--tile-h));
}
/* Entrance stagger. Also feeds the sweep delay via `animation-delay: inherit`
on ::after, so a tile's highlight starts when the tile itself lands. */
.ti-tile:nth-child(1) { animation-delay: 0ms; }
.ti-tile:nth-child(2) { animation-delay: 70ms; }
.ti-tile:nth-child(3) { animation-delay: 140ms; }
.ti-tile:nth-child(4) { animation-delay: 210ms; }
.ti-tile:nth-child(5) { animation-delay: 280ms; }
.ti-tile:nth-child(6) { animation-delay: 350ms; }
.ti-tile:nth-child(7) { animation-delay: 420ms; }
.ti-tile:nth-child(8) { animation-delay: 490ms; }
.ti-tile:nth-child(9) { animation-delay: 560ms; }
@media (max-width: 1280px) {
.ti-bento { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.ti-bento { grid-template-columns: repeat(2, 1fr); }
.ti-tile--hero { grid-column: span 2; grid-row: span 1; }
.ti-tile--hero .ti-tile-value { font-size: 40px; }
}
@media (max-width: 520px) {
.ti-bento { grid-template-columns: 1fr; }
.ti-tile--wide,
.ti-tile--hero { grid-column: span 1; }
}
/* --- Banners ------------------------------------------------------------
Full-width strips above the tiles: the birthday note and the rolling quote. */
.ti-banner {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
border-radius: var(--ti-radius);
margin-bottom: var(--ti-gap);
font-size: 13px;
animation: ti-rise-in .45s var(--ti-ease) both;
}
.ti-banner-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex: none;
border-radius: 10px;
}
.ti-banner--birthday {
background: oklch(.62 .16 40 / .12);
border: 1px solid oklch(.62 .16 40 / .3);
color: var(--ti-text);
}
.ti-banner--birthday .ti-banner-icon {
background: oklch(.62 .16 40 / .18);
color: oklch(.68 .16 42);
}
.ti-banner--quote {
background: linear-gradient(120deg, oklch(.5 .15 258), oklch(.42 .14 285));
color: #fff;
box-shadow: 0 18px 36px -20px oklch(.45 .15 270 / .8);
}
.ti-banner--quote .ti-banner-icon { background: rgb(255 255 255 / .16); }
.ti-banner-close {
display: grid;
place-items: center;
width: 26px;
height: 26px;
flex: none;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--ti-text-muted);
cursor: pointer;
transition: color var(--ti-fast) ease, background-color var(--ti-fast) ease;
}
.ti-banner-close:hover {
background: var(--ti-chip-bg);
color: var(--ti-text);
}
/* Rolling quote. The text is duplicated in the markup and the track shifts by
exactly half its width, so the loop has no visible gap where it wraps. */
/* The dashboard quote. It scrolled as a marquee once, which needed the text
printed twice for a seamless loop -- and anything short enough to fit showed
both copies side by side. It is one line of italic now, wrapping if the
quote is long, and the banner grows to hold it. */
.ti-quote {
flex: 1;
min-width: 0;
margin: 0;
font-size: 13.5px;
font-style: italic;
line-height: 1.55;
}
/* Nothing set yet — a prompt rather than a quote, so it does not read as one
somebody wrote. Admins only: the banner is not drawn empty for anyone else. */
.ti-banner--quote.is-empty .ti-quote {
font-style: normal;
opacity: .7;
}
/* --- Editing the quote in the banner (admin) ---------------------------- */
/* Everything here sits on the banner's saturated gradient, so it is drawn in
white-on-white-alpha rather than from the surface tokens. */
.ti-quote-input {
flex: 1;
min-width: 0;
padding: 8px 13px;
border: 1px solid rgb(255 255 255 / .3);
border-radius: 10px;
background: rgb(255 255 255 / .12);
color: #fff;
font-family: var(--ti-font);
font-size: 13.5px;
transition: background-color var(--ti-fast) ease, border-color var(--ti-fast) ease;
}
.ti-quote-input::placeholder { color: rgb(255 255 255 / .58); }
.ti-quote-input:focus {
outline: none;
border-color: rgb(255 255 255 / .65);
background: rgb(255 255 255 / .18);
}
.ti-quote-btn {
flex: none;
padding: 7px 15px;
border: 1px solid rgb(255 255 255 / .3);
border-radius: 10px;
background: rgb(255 255 255 / .12);
color: #fff;
font-family: var(--ti-font);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background-color var(--ti-fast) ease, border-color var(--ti-fast) ease;
}
.ti-quote-btn:hover { background: rgb(255 255 255 / .24); }
.ti-quote-btn:disabled { opacity: .55; cursor: default; }
/* Save is the one that commits, so it is the one that is filled in. */
.ti-quote-btn--solid {
background: #fff;
border-color: #fff;
color: oklch(.42 .14 285);
}
.ti-quote-btn--solid:hover { background: rgb(255 255 255 / .87); }
/* The pencil is an icon, not a word. */
.ti-quote-edit {
display: grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
}
/* One banner, two states. Reading is the default; the field and its two
buttons only exist once .is-editing is on. Scoped to the banner because
.is-editing is also what an open rule card on the Rules page wears. */
.ti-banner--quote .ti-quote-input,
.ti-banner--quote .ti-quote-save,
.ti-banner--quote .ti-quote-cancel { display: none; }
.ti-banner--quote.is-editing .ti-quote,
.ti-banner--quote.is-editing .ti-quote-edit { display: none; }
.ti-banner--quote.is-editing .ti-quote-input { display: block; }
.ti-banner--quote.is-editing .ti-quote-save,
.ti-banner--quote.is-editing .ti-quote-cancel { display: block; }
/* Too narrow for a field and two buttons on one line: the field takes the
row and the buttons drop under it. */
@media (max-width: 640px) {
.ti-banner--quote.is-editing { flex-wrap: wrap; }
.ti-banner--quote.is-editing .ti-quote-input { flex: 1 0 100%; }
}
/* --- Sidebar stats ------------------------------------------------------ */
.ti-sidebar-stats {
flex: none;
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px;
border-top: 1px solid var(--ti-border);
}
.ti-sidebar-stat {
--stat-h: 275;
display: flex;
align-items: center;
gap: 11px;
padding: 8px 10px;
border-radius: var(--ti-radius-sm);
cursor: pointer;
transition: background-color var(--ti-fast) ease;
}
.ti-sidebar-stat:hover,
.ti-sidebar-stat:focus-visible { background: var(--ti-nav-hover-bg); }
.ti-sidebar-stat-icon {
display: grid;
place-items: center;
width: 20px;
height: 20px;
flex: none;
color: oklch(.75 .13 var(--stat-h));
}
:root[data-theme="light"] .ti-sidebar-stat-icon { color: oklch(.48 .16 var(--stat-h)); }
.ti-sidebar-stat-label {
flex: 1;
min-width: 0;
font-size: 12px;
/* Soft, not muted: at this size the quiet token measured about 6:1 on the
surface it sits on, which is AA for text twice as big and grey mush
here. Soft takes it past 8. */
color: var(--ti-text-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ti-sidebar-stat-value {
flex: none;
font-family: var(--ti-mono);
font-size: 12px;
font-weight: 700;
color: oklch(.75 .13 var(--stat-h));
}
:root[data-theme="light"] .ti-sidebar-stat-value { color: oklch(.48 .16 var(--stat-h)); }
/* Collapsed: icon only, centred, with the value as the title tooltip. */
:root[data-sidebar="collapsed"] .ti-sidebar-stat { justify-content: center; }
:root[data-sidebar="collapsed"] .ti-sidebar-stat-label,
:root[data-sidebar="collapsed"] .ti-sidebar-stat-value { display: none; }
/* --- Filter control ----------------------------------------------------- */
.ti-filter {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 4px 4px 4px 13px;
border-radius: 12px;
background: var(--ti-chip-bg);
border: 1px solid var(--ti-border);
transition: border-color var(--ti-fast) ease;
}
.ti-filter:focus-within { border-color: var(--ti-accent); }
.ti-filter-icon {
display: grid;
color: var(--ti-accent);
}
.ti-filter input {
border: 0;
background: transparent;
color: var(--ti-text);
font-family: var(--ti-mono);
font-size: 12.5px;
outline: none;
}
/* Sized to their contents: "2026-08-04 - 2026-08-31" and "08 / 2026". The
shared 120px they had before truncated the range mid-date. */
.ti-filter-range { width: 196px; }
.ti-filter-month { width: 74px; }
.ti-filter-date { width: 96px; }
/* A filter with no button: the picker applying is the whole gesture, so the
pill closes up to the same padding a plain chip has. */
.ti-filter--chip { padding: 9px 14px; }
/* A filter that takes words rather than a date: UI font, and room for a name.
The search UI the browser adds to type="search" is dropped — it sits at the
wrong baseline inside the pill, and there is an explicit clear button. */
.ti-filter-search {
width: 178px;
font-family: var(--ti-font);
font-size: 13px;
}
.ti-filter-search::-webkit-search-cancel-button { display: none; }
.ti-filter-clear {
display: grid;
place-items: center;
width: 26px;
height: 26px;
flex: none;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--ti-text-muted);
cursor: pointer;
transition: background-color var(--ti-fast) ease, color var(--ti-fast) ease;
}
.ti-filter-clear:hover { background: var(--ti-nav-hover-bg); color: var(--ti-text); }
/* --- Date pickers -------------------------------------------------------
bootstrap-datepicker and daterangepicker both ship their own light styling
and render into , outside anything themed. Restyled here so they are
not a white box over a dark page. */
.datepicker,
.daterangepicker {
font-family: var(--ti-font) !important;
background: var(--ti-sidebar-bg) !important;
border: 1px solid var(--ti-border) !important;
border-radius: var(--ti-radius) !important;
box-shadow: var(--ti-shadow-lg) !important;
color: var(--ti-text) !important;
padding: 8px !important;
z-index: 1200 !important;
}
/* Both draw a CSS-triangle callout in hardcoded white/grey. */
.datepicker-dropdown::before,
.datepicker-dropdown::after,
.daterangepicker::before,
.daterangepicker::after {
display: none !important;
}
.datepicker table tr td,
.datepicker table tr th,
.daterangepicker td,
.daterangepicker th {
color: var(--ti-text) !important;
border-radius: 8px !important;
font-size: 12.5px;
}
.datepicker table tr th,
.daterangepicker th {
color: var(--ti-text-muted) !important;
font-weight: 700;
}
.datepicker table tr td.day:hover,
.datepicker .month:hover,
.datepicker .year:hover,
.daterangepicker td.available:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker .datepicker-switch:hover {
background: var(--ti-nav-hover-bg) !important;
color: var(--ti-text) !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker .month.focused,
.datepicker .month.active,
.datepicker .year.active,
.daterangepicker td.active,
.daterangepicker td.active:hover {
background: linear-gradient(135deg, oklch(.58 .19 285), oklch(.5 .18 258)) !important;
color: #fff !important;
text-shadow: none !important;
}
/* Today. The plugin paints this cell with a hardcoded pale-yellow gradient
and leaves the text to inherit -- which here is a light colour, so the
number disappeared into it.
Outlined rather than filled, so today cannot be mistaken for the day that
is actually selected, and drawn with an inset shadow rather than a border
so the cell does not change size and shunt the grid. */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker .month.today,
.datepicker .year.today,
.daterangepicker td.today,
.daterangepicker td.today:hover {
background: transparent !important;
background-image: none !important;
box-shadow: inset 0 0 0 1px var(--ti-accent) !important;
color: var(--ti-accent) !important;
font-weight: 700;
text-shadow: none !important;
}
/* Today and selected at once: the selection wins, or the day you picked
stops looking picked. */
.datepicker table tr td.today.active,
.datepicker table tr td.today.active:hover,
.daterangepicker td.today.active {
background: linear-gradient(135deg, oklch(.58 .19 285), oklch(.5 .18 258)) !important;
box-shadow: none !important;
color: #fff !important;
}
.daterangepicker td.in-range {
background: var(--ti-accent-soft) !important;
color: var(--ti-text) !important;
}
.datepicker table tr td.old,
.datepicker table tr td.new,
.daterangepicker td.off {
color: var(--ti-text-muted) !important;
opacity: .5;
}
.datepicker table tr td.disabled,
.daterangepicker td.disabled {
color: var(--ti-text-muted) !important;
opacity: .35;
}
.datepicker .month,
.datepicker .year {
border-radius: 8px !important;
line-height: 34px;
}
/* daterangepicker chrome */
/* The two months were stacking into one very tall column. Its own layout
floats them side by side on width maths the global border-box reset changes,
so the months are laid out here instead -- but on the months themselves, not
on the container.
The container's `display` has to be left alone: the plugin closes the panel
with .hide(), which writes an inline `display: none`, and a `!important`
display here would outrank it and pin the picker open forever. Buttons and
ranges are already block, so they take their own row. */
.daterangepicker {
width: auto !important;
max-width: min(680px, calc(100vw - 32px)) !important;
}
.daterangepicker.show-calendar .drp-calendar {
display: inline-block !important;
float: none !important;
vertical-align: top;
max-width: 280px !important;
}
/* The !important above is there to beat the library's float layout, and it was
also beating the inline display:none it puts on the second calendar --
`singleDatePicker` hides .right with jQuery, which cannot outrank an
!important rule. So every single-date picker in the app drew two months and
two sets of time selects for one date. Put the hide back. */
.daterangepicker.single .drp-calendar.right { display: none !important; }
/* The hour and minute dropdowns are plain s. Nothing had ever dressed
them, so they came out in the browser's own grey inside an otherwise dark
panel. */
.daterangepicker select {
height: auto;
padding: 4px 6px;
border: 1px solid var(--ti-border) !important;
border-radius: 8px;
background: var(--ti-chip-solid) !important;
color: var(--ti-text) !important;
font-family: var(--ti-mono);
font-size: 12px;
}
.daterangepicker .calendar-time { color: var(--ti-text-soft); }
.daterangepicker .calendar-table {
background: transparent !important;
border: 0 !important;
}
.daterangepicker .drp-buttons {
border-top: 1px solid var(--ti-border) !important;
}
.daterangepicker .drp-selected {
color: var(--ti-text-soft) !important;
font-family: var(--ti-mono);
font-size: 12px;
}
.daterangepicker .drp-buttons .btn {
border-radius: 9px !important;
font-size: 12px;
font-weight: 700;
padding: 7px 15px;
}
.daterangepicker .drp-buttons .applyBtn {
background: linear-gradient(135deg, oklch(.58 .19 285), oklch(.5 .18 258)) !important;
border: 0 !important;
color: #fff !important;
}
.daterangepicker .drp-buttons .cancelBtn {
background: var(--ti-chip-bg) !important;
border: 1px solid var(--ti-border) !important;
color: var(--ti-text) !important;
}
.daterangepicker .calendar-table th.next span,
.daterangepicker .calendar-table th.prev span {
border-color: var(--ti-text-muted) !important;
}
.ti-filter-go {
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex: none;
padding: 0;
border: 0;
border-radius: 9px;
background: linear-gradient(135deg, oklch(.58 .19 285), oklch(.5 .18 258));
color: #fff;
cursor: pointer;
transition: transform var(--ti-fast) ease;
}
.ti-filter-go:hover { transform: translateY(-2px); }
/* --- Summary cards ------------------------------------------------------ */
.ti-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.ti-summary-card {
--sum-h: 275;
position: relative;
overflow: hidden;
padding: 14px 16px;
border-radius: var(--ti-radius);
border: 1px solid var(--ti-border);
background: linear-gradient(135deg, oklch(.97 .025 var(--sum-h)), #fff);
animation: ti-rise-in .5s var(--ti-ease) both;
}
:root[data-theme="dark"] .ti-summary-card {
background: linear-gradient(135deg, oklch(.2 .045 var(--sum-h)), #12151d);
}
.ti-summary-label {
font-size: 10.5px;
letter-spacing: .1em;
text-transform: uppercase;
/* Soft, not muted: this names the card, and uppercase at 10.5px with a
tenth of an em of tracking needs the extra contrast to stay a word
rather than a texture. The note under the figure keeps muted, so the
three lines still read title > figure > qualifier. */
color: var(--ti-text-soft);
}
/* What stretch of the month the figure above covers. Deliberately quieter
than .ti-summary-label: it qualifies the number, it does not name it. */
.ti-summary-note {
margin-top: 4px;
font-size: 11px;
letter-spacing: .04em;
/* No opacity on top of the token: --ti-text-muted is already the quiet
one, and dimming it again puts an 11px line under 5:1 on the card --
AA on paper and grey mush at that size. 6.1:1 as it stands. */
color: var(--ti-text-muted);
}
.ti-summary-value {
margin-top: 6px;
font-size: 24px;
font-weight: 600;
letter-spacing: -.03em;
color: oklch(.5 .17 var(--sum-h));
}
:root[data-theme="dark"] .ti-summary-value { color: oklch(.78 .14 var(--sum-h)); }
/* Summary grid variants. The base is four columns; pages with fewer figures
say so rather than leaving a gap. */
.ti-summary--3 { grid-template-columns: repeat(3, 1fr); }
/* --- Leave row ---------------------------------------------------------- */
.ti-leaverow {
--leave-h: 285;
display: flex;
align-items: center;
gap: 16px;
padding: 16px 18px;
border-radius: var(--ti-radius);
background: var(--ti-card-bg);
border: 1px solid var(--ti-border);
animation: ti-rise-in .5s var(--ti-ease) both;
transition: transform var(--ti-base) var(--ti-ease), border-color var(--ti-base) ease,
box-shadow var(--ti-base) ease;
}
.ti-leaverow:hover {
transform: translateY(-3px);
border-color: oklch(.62 .15 var(--leave-h));
box-shadow: var(--ti-shadow);
}
.ti-leaverow-badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
flex: none;
border-radius: 14px;
background: linear-gradient(135deg, oklch(.58 .18 var(--leave-h)), oklch(.48 .17 calc(var(--leave-h) + 18)));
color: #fff;
}
.ti-leaverow-badge > span:first-child {
font-family: var(--ti-mono);
font-size: 20px;
font-weight: 600;
line-height: 1;
}
.ti-leaverow-badge > span:last-child {
margin-top: 3px;
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
opacity: .85;
}
.ti-leaverow-top {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.ti-leaverow-note {
font-size: 15px;
font-weight: 700;
}
.ti-leaverow-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 12px;
color: var(--ti-text-muted);
}
.ti-leaverow-sep { opacity: .45; }
.ti-leaverow-status { flex: none; }
.ti-leaverow-actions {
display: flex;
align-items: center;
gap: 7px;
flex: none;
}
.ti-icon-btn--danger {
background: var(--ti-red-bg);
color: var(--ti-red);
}
.ti-badge--muted {
background: var(--ti-chip-bg);
border: 1px solid var(--ti-border);
color: var(--ti-text-muted);
}
/* Select styled to match .ti-filter, for toolbars that carry one. */
.ti-select--auto {
width: auto;
min-width: 180px;
padding: 10px 14px;
border-radius: 12px;
}
@media (max-width: 720px) {
.ti-summary--3 { grid-template-columns: 1fr; }
.ti-leaverow { flex-wrap: wrap; }
.ti-leaverow-actions { margin-left: auto; }
}
/* --- Leave request form -------------------------------------------------
The markup already carried a sensible set of lr-* classes; what it did not
have was theme colours -- every value was a hardcoded light one, so the
inputs and the request table came out white on a dark page. Same class
names, driven by tokens, and living here rather than in 254 lines of