/*
* app.css — the template's styles, on top of Bootstrap 5.3.
*
* The only stylesheet a page links. It imports Bootstrap, the plugins' CSS,
* the fonts and the icon sets first, so its own rules come after them and can
* theme Bootstrap and the plugins. Customize through the tokens below (or in
* your project's own CSS, loaded after this file) rather than by editing the
* rules further down.
*
* Contents
* Imports · Design tokens · Bootstrap bridge
* Base · Shell · Topbar menus · Content area · Content helpers
* Authentication and error pages · Chat · Data table · Dashboard · Email
* Calendar · Command palette · Responsive
* Sidebar collapsed · Menu tree · Horizontal layout
* Topbar user · Form helpers · Select2 · flatpickr · SweetAlert2 · Wizard
* Other plugins · .rich-text · Bootstrap theme · Authentication extras
* Profile page · Settings page · Icon pages · Widgets page · Your customizations
*/
/* Imports. They must stay here, before every other rule (the browser ignores an
@import that comes later). Bootstrap first, then the plugins, so the rules in
this file override them. Each file is still downloaded and cached on its own.
The paths are relative to this file, so they keep working wherever the
template is served from.
ClockPicker and Nestable come from stylesheets adapted for the template (the
original ones clash with Bootstrap 5 and with the topbar's .dd-* classes;
the header of each file says how). TinyMCE isn't imported: it loads its own
skin. */
@import url("../vendor/bootstrap/bootstrap.min.css");
@import url("../vendor/select2/select2.min.css");
@import url("../vendor/flatpickr/flatpickr.min.css");
@import url("../vendor/sweetalert2/sweetalert2.min.css");
@import url("../vendor/jsvectormap/jsvectormap.min.css");
@import url("../vendor/fullcalendar/skeleton.min.css");
@import url("../vendor/fullcalendar/themes/classic/theme.min.css");
@import url("../vendor/fullcalendar/themes/classic/palette.min.css");
@import url("../vendor/clockpicker/clockpicker-bootstrap5.css");
@import url("../vendor/datatables/css/datatables.min.css"); /* the build in js/datatables.min.js: DataTables, its extensions, Bootstrap 5 styling */
@import url("../vendor/nestable/nestable-scoped.css");
@import url("../vendor/toast/jquery.toast.min.css");
/* Fonts: assets/fonts/fonts.css imports every family the template ships (each
in its own folder with a fonts.css). */
@import url("../fonts/fonts.css");
/* Icons: assets/fonts/icons/icons.css imports every icon set the template ships. */
@import url("../fonts/icons/icons.css");
/* Design tokens (independent of the theme) */
:root {
/* Typography. Every size in this file is in rem, so --font-scale (or the
browser's own font-size setting) resizes all text proportionally. */
--font-sans: "Inter", system-ui, Segoe UI, Ubuntu, Cantarell, Noto Sans, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display: "Inter Tight", "Inter", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
--font-features: "cv11", "ss01", "ss03"; /* Inter-specific; use normal with other fonts */
--font-scale: 1;
--font-weight-base: 400;
--line-height-base: 1.55;
--letter-spacing-base: -0.003em;
/* Corner radius. Everything derives from --radius: 0 = square UI. */
--radius: 8px;
--radius-xs: calc(var(--radius) * 0.5);
--radius-sm: calc(var(--radius) * 0.75);
--radius-md: calc(var(--radius) * 1.25);
--radius-lg: calc(var(--radius) * 1.5);
--radius-xl: calc(var(--radius) * 1.75);
/* Layout */
--sidebar-width: 248px;
--sidebar-rail-width: 72px;
--sidebar-drawer-width: 280px;
--topbar-height: 60px;
/* Form controls and buttons (inputs, selects, plugins and buttons share them,
so a form row stays aligned) */
--control-font-size: 0.8125rem;
--control-padding-y: 9px;
--control-padding-x: 12px;
--control-line-height: 1.55;
--button-padding-x: 14px;
--focus-ring: 0 0 0 3px var(--primary-soft);
}
html {
font-size: calc(var(--font-scale) * 100%);
}
/* Typography preferences — the profile page sets these on through
preferences.js (no attribute = the defaults above). The font family itself
is set inline on as --font-sans / --font-display. */
:root[data-font-size=sm] { --font-scale: 0.9375; }
:root[data-font-size=lg] { --font-scale: 1.0625; }
:root[data-font-size=xl] { --font-scale: 1.125; }
:root[data-font-weight=light] { --font-weight-base: 300; }
:root[data-font-weight=medium] { --font-weight-base: 500; }
:root[data-line-height=compact] { --line-height-base: 1.4; }
:root[data-line-height=relaxed] { --line-height-base: 1.75; }
:root[data-letter-spacing=tight] { --letter-spacing-base: -0.015em; }
:root[data-letter-spacing=wide] { --letter-spacing-base: 0.02em; }
/* Theme colors — light */
:root[data-theme=light] {
--bg-body: #F0F4F8;
--bg-card: #FFFFFF;
--bg-sidebar: #FFFFFF;
--bg-hover: #F8FAFC;
--bg-muted: #F1F5F9;
--t-base: #1E293B;
--t-muted: #64748B;
--t-light: #94A3B8;
--t-inverse: #FFFFFF;
--border: #E4E8EF;
--border-soft: #EEF1F5;
--primary: #2563EB;
--primary-light: #3B82F6;
--primary-dark: #1D4ED8;
--primary-soft: #EFF6FF;
--primary-ring: rgba(37, 99, 235, 0.18);
--success: #10B981;
--success-soft: #ECFDF5;
--warning: #F59E0B;
--warning-soft: #FFFBEB;
--danger: #EF4444;
--danger-soft: #FEF2F2;
--info: #0EA5E9;
--info-soft: #F0F9FF;
--purple: #8B5CF6;
--purple-soft: #F5F3FF;
--pink: #EC4899;
--pink-soft: #FDF2F8;
--teal: #14B8A6;
--teal-soft: #F0FDFA;
--orange: #F97316;
--orange-soft: #FFF7ED;
--shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04);
--shadow-card: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
--shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.05);
--overlay: rgba(240, 244, 248, 0.72);
/* The same colors as "r, g, b" — Bootstrap's opacity utilities need them.
Change them together with the colors above. */
--primary-rgb: 37, 99, 235;
--primary-dark-rgb: 29, 78, 216;
--success-rgb: 16, 185, 129;
--warning-rgb: 245, 158, 11;
--danger-rgb: 239, 68, 68;
--info-rgb: 14, 165, 233;
--t-base-rgb: 30, 41, 59;
--t-muted-rgb: 100, 116, 139;
--t-light-rgb: 148, 163, 184;
--bg-body-rgb: 240, 244, 248;
--bg-card-rgb: 255, 255, 255;
--bg-muted-rgb: 241, 245, 249;
--bg-hover-rgb: 248, 250, 252;
}
/* Theme colors — dark */
:root[data-theme=dark] {
--bg-body: #0B1120;
--bg-card: #141B2D;
--bg-sidebar: #141B2D;
--bg-hover: #1C2438;
--bg-muted: #1A2237;
--t-base: #F1F5F9;
--t-muted: #94A3B8;
--t-light: #64748B;
--t-inverse: #0B1120;
--border: #222C42;
--border-soft: #1A2237;
--primary: #60A5FA;
--primary-light: #93C5FD;
--primary-dark: #3B82F6;
--primary-soft: #0F2847;
--primary-ring: rgba(96, 165, 250, 0.24);
--success: #34D399;
--success-soft: #0F2A20;
--warning: #FBBF24;
--warning-soft: #2B1F08;
--danger: #F87171;
--danger-soft: #2B1414;
--info: #38BDF8;
--info-soft: #0D2232;
--purple: #A78BFA;
--purple-soft: #1E1A2C;
--pink: #F472B6;
--pink-soft: #2A1424;
--teal: #2DD4BF;
--teal-soft: #0E2826;
--orange: #FB923C;
--orange-soft: #2A1810;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.25);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
--overlay: rgba(11, 17, 32, 0.72);
--primary-rgb: 96, 165, 250;
--primary-dark-rgb: 59, 130, 246;
--success-rgb: 52, 211, 153;
--warning-rgb: 251, 191, 36;
--danger-rgb: 248, 113, 113;
--info-rgb: 56, 189, 248;
--t-base-rgb: 241, 245, 249;
--t-muted-rgb: 148, 163, 184;
--t-light-rgb: 100, 116, 139;
--bg-body-rgb: 11, 17, 32;
--bg-card-rgb: 20, 27, 45;
--bg-muted-rgb: 26, 34, 55;
--bg-hover-rgb: 28, 36, 56;
}
/* Bootstrap, themed by the tokens above. Its components and utilities follow
the template's fonts, sizes, radius and colors, in light and dark
(preferences.js also sets ). */
:root[data-theme] {
--bs-font-sans-serif: var(--font-sans);
--bs-font-monospace: var(--font-mono);
--bs-body-font-family: var(--font-sans);
--bs-body-font-size: 0.875rem;
--bs-body-font-weight: var(--font-weight-base);
--bs-body-line-height: var(--line-height-base);
--bs-body-color: var(--t-base);
--bs-body-color-rgb: var(--t-base-rgb);
--bs-body-bg: var(--bg-body);
--bs-body-bg-rgb: var(--bg-body-rgb);
--bs-emphasis-color: var(--t-base);
--bs-emphasis-color-rgb: var(--t-base-rgb);
--bs-secondary-color: var(--t-muted);
--bs-secondary-color-rgb: var(--t-muted-rgb);
--bs-secondary-bg: var(--bg-muted);
--bs-secondary-bg-rgb: var(--bg-muted-rgb);
--bs-tertiary-color: var(--t-light);
--bs-tertiary-color-rgb: var(--t-light-rgb);
--bs-tertiary-bg: var(--bg-hover);
--bs-tertiary-bg-rgb: var(--bg-hover-rgb);
--bs-heading-color: inherit;
--bs-link-color: var(--primary);
--bs-link-color-rgb: var(--primary-rgb);
--bs-link-decoration: none;
--bs-link-hover-color: var(--primary-dark);
--bs-link-hover-color-rgb: var(--primary-dark-rgb);
--bs-code-color: var(--pink);
--bs-highlight-color: var(--t-base);
--bs-highlight-bg: var(--warning-soft);
--bs-border-color: var(--border);
--bs-border-color-translucent: var(--border);
--bs-border-radius: var(--radius);
--bs-border-radius-sm: var(--radius-sm);
--bs-border-radius-lg: var(--radius-lg);
--bs-border-radius-xl: var(--radius-xl);
--bs-border-radius-xxl: calc(var(--radius) * 2.25);
--bs-box-shadow: var(--shadow-lg);
--bs-box-shadow-sm: var(--shadow-sm);
--bs-box-shadow-lg: var(--shadow-lg);
--bs-focus-ring-width: 3px;
--bs-focus-ring-color: var(--primary-soft);
--bs-form-valid-color: var(--success);
--bs-form-valid-border-color: var(--success);
--bs-form-invalid-color: var(--danger);
--bs-form-invalid-border-color: var(--danger);
--bs-primary: var(--primary);
--bs-primary-rgb: var(--primary-rgb);
--bs-secondary: var(--t-muted);
--bs-secondary-rgb: var(--t-muted-rgb);
--bs-success: var(--success);
--bs-success-rgb: var(--success-rgb);
--bs-info: var(--info);
--bs-info-rgb: var(--info-rgb);
--bs-warning: var(--warning);
--bs-warning-rgb: var(--warning-rgb);
--bs-danger: var(--danger);
--bs-danger-rgb: var(--danger-rgb);
--bs-light: var(--bg-muted);
--bs-light-rgb: var(--bg-muted-rgb);
--bs-dark: var(--t-base);
--bs-dark-rgb: var(--t-base-rgb);
--bs-primary-text-emphasis: var(--primary);
--bs-secondary-text-emphasis: var(--t-muted);
--bs-success-text-emphasis: var(--success);
--bs-info-text-emphasis: var(--info);
--bs-warning-text-emphasis: var(--warning);
--bs-danger-text-emphasis: var(--danger);
--bs-light-text-emphasis: var(--t-muted);
--bs-dark-text-emphasis: var(--t-base);
--bs-primary-bg-subtle: var(--primary-soft);
--bs-secondary-bg-subtle: var(--bg-muted);
--bs-success-bg-subtle: var(--success-soft);
--bs-info-bg-subtle: var(--info-soft);
--bs-warning-bg-subtle: var(--warning-soft);
--bs-danger-bg-subtle: var(--danger-soft);
--bs-light-bg-subtle: var(--bg-hover);
--bs-dark-bg-subtle: var(--bg-muted);
--bs-primary-border-subtle: color-mix(in oklab, var(--primary) 30%, var(--bg-card));
--bs-secondary-border-subtle: var(--border);
--bs-success-border-subtle: color-mix(in oklab, var(--success) 30%, var(--bg-card));
--bs-info-border-subtle: color-mix(in oklab, var(--info) 30%, var(--bg-card));
--bs-warning-border-subtle: color-mix(in oklab, var(--warning) 30%, var(--bg-card));
--bs-danger-border-subtle: color-mix(in oklab, var(--danger) 30%, var(--bg-card));
--bs-light-border-subtle: var(--border);
--bs-dark-border-subtle: var(--border);
}
/* --------------------------------------------------------------------------
* Base — reset, body, text helpers, shared animations
* ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
a { color: inherit; -webkit-text-decoration: none; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
input, select, textarea { font: inherit; color: inherit; }
body {
font-family: var(--font-sans);
font-feature-settings: var(--font-features);
font-weight: var(--font-weight-base);
background: var(--bg-body);
color: var(--t-base);
font-size: 0.875rem;
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background-color 280ms ease,color 280ms ease;
}
::-moz-selection { background: var(--primary); color: #fff; }
::selection { background: var(--primary); color: #fff; }
.mono { font-family: var(--font-mono); }
.eyebrow {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--t-light);
font-weight: 500;
}
@keyframes rise-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bar-in {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* --------------------------------------------------------------------------
* Shell — page grid, sidebar and menu, topbar, footer
* ------------------------------------------------------------------------ */
.shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; }
.d-sidebar {
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
padding: 22px 16px 18px;
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
gap: 22px;
overflow-y: auto;
}
.d-sidebar::-webkit-scrollbar { width: 4px; }
.d-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-xs); }
.brand {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 10px 20px;
border-bottom: 1px solid var(--border-soft);
}
.brand-logo {
width: 32px;
height: 32px;
background: var(--primary);
border-radius: var(--radius);
display: grid;
place-items: center;
box-shadow: 0 4px 10px -2px color-mix(in oklab, var(--primary) 40%, transparent);
}
.brand-logo svg { width: 18px; height: 18px; }
.brand-text { line-height: 1.1; }
.brand-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.96875rem;
color: var(--t-base);
letter-spacing: -0.02em;
}
.brand-tag { font-family: var(--font-mono); font-size: 0.59375rem; color: var(--t-light); letter-spacing: .1em; }
.menu-section { display: flex; flex-direction: column; gap: 2px; }
.menu-label {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--t-light);
padding: 0 10px 6px;
}
.menu-link {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
border-radius: var(--radius);
color: var(--t-muted);
font-size: 0.8125rem;
font-weight: 500;
transition: background-color 180ms ease,color 180ms ease,box-shadow 180ms ease;
line-height: 1.2;
}
.menu-link>svg {
width: 17px;
height: 17px;
stroke: currentColor;
stroke-width: 1.75;
fill: none;
flex-shrink: 0;
display: block;
stroke-linecap: round;
stroke-linejoin: round;
}
.menu-link>span:not(.menu-badge) { min-width: 0; flex: 1; }
.menu-link:hover { background: var(--bg-hover); color: var(--t-base); }
.menu-link.is-active {
color: var(--primary);
background: var(--primary-soft);
box-shadow: inset 3px 0 0 var(--primary);
}
.menu-badge {
flex: 0 0 auto;
margin-left: auto;
font-family: var(--font-sans);
font-size: 0.5625rem;
font-weight: 700;
letter-spacing: .04em;
padding: 2px 6px;
line-height: 1.4;
border-radius: 999px;
}
.menu-badge.pro { background: var(--primary); color: #fff; }
.menu-badge.hot { background: var(--danger-soft); color: var(--danger); }
.menu-badge.new { background: var(--success-soft); color: var(--success); }
.menu-group .menu-link .chev { width: 11px; height: 11px; margin-left: auto; transition: transform 200ms ease; }
.menu-group.is-open>.menu-link .chev { transform: rotate(90deg); }
.menu-sub {
overflow: hidden;
max-height: 0;
margin-left: 20px;
padding-left: 14px;
position: relative;
transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-sub::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 1px;
background: var(--border);
}
.menu-group.is-open>.menu-sub { max-height: none; padding-top: 4px; padding-bottom: 6px; }
.menu-sub a {
display: flex;
align-items: center;
padding: 7px 10px;
font-size: 0.78125rem;
color: var(--t-muted);
border-radius: var(--radius-sm);
transition: color 160ms ease,background-color 160ms ease,padding-left 160ms ease;
}
.menu-sub a:hover { color: var(--t-base); background: var(--bg-hover); padding-left: 13px; }
.menu-sub a.is-active { color: var(--primary); font-weight: 600; background: var(--primary-soft); }
.sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.workspace {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-radius: var(--radius);
transition: background-color 180ms ease;
}
.workspace:hover { background: var(--bg-hover); }
.workspace-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--purple));
color: #fff;
display: grid;
place-items: center;
font-weight: 600;
font-size: 0.78125rem;
flex-shrink: 0;
}
.workspace-text { line-height: 1.2; min-width: 0; }
.workspace-name { font-size: 0.8125rem; color: var(--t-base); font-weight: 600; }
.workspace-role { font-size: 0.6875rem; color: var(--t-light); }
.workspace-chev { margin-left: auto; color: var(--t-light); }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; }
.hamburger {
display: none;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border-radius: var(--radius);
color: var(--t-base);
margin-right: 4px;
transition: background 160ms;
}
.hamburger:hover { background: var(--bg-hover); }
.hamburger svg { width: 20px; height: 20px; }
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(15,23,42,.5);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 90;
opacity: 0;
visibility: hidden;
transition: opacity 240ms ease,visibility 240ms;
}
body.has-drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }
.d-topbar {
height: var(--topbar-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
background: var(--overlay);
}
.topbar-start { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.cmd {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 10px 7px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
color: var(--t-light);
font-size: 0.8125rem;
transition: all 200ms ease;
width: 220px;
min-width: 0;
}
.cmd:hover { border-color: var(--primary); color: var(--t-muted); box-shadow: var(--focus-ring); }
.cmd svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.cmd span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.kbd {
font-family: var(--font-mono);
font-size: 0.625rem;
padding: 2px 6px;
border-radius: var(--radius-xs);
background: var(--bg-muted);
color: var(--t-muted);
border: 1px solid var(--border);
}
.icon-btn {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: var(--radius);
color: var(--t-muted);
transition: background 180ms,color 180ms;
position: relative;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--t-base); }
.icon-btn>svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.icon-btn .count {
position: absolute;
top: 5px;
right: 5px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
font-size: 0.59375rem;
font-weight: 600;
display: grid;
place-items: center;
border: 2px solid var(--bg-body);
line-height: 1;
}
.icon-btn .count.danger { background: var(--danger); color: #fff; }
.icon-btn .count.info { background: var(--info); color: #fff; }
.avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--purple));
color: #fff;
display: grid;
place-items: center;
font-weight: 600;
font-size: 0.8125rem;
margin-left: 6px;
border: 2px solid var(--bg-card);
box-shadow: var(--shadow-sm);
cursor: pointer;
}
/* Foto de perfil no lugar das iniciais: enche o círculo sem deformar */
.avatar img,
.workspace-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.d-footer {
padding: 24px 32px 28px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--t-muted);
font-size: 0.75rem;
}
.d-footer a { color: var(--primary); font-weight: 600; }
.d-footer a:hover { color: var(--primary-dark); }
.d-footer-meta {
display: flex;
gap: 20px;
font-family: var(--font-mono);
font-size: 0.65625rem;
color: var(--t-light);
letter-spacing: .06em;
}
/* --------------------------------------------------------------------------
* Topbar menus — notifications, messages, account (inside .dropdown-menu)
* ------------------------------------------------------------------------ */
.dd-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-soft);
font-size: 0.78125rem;
font-weight: 600;
color: var(--t-base);
letter-spacing: .01em;
}
.dd-head svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; color: var(--t-muted); }
/* Nestable uses .dd-list and .dd-item too: :where(.dropdown-menu) keeps these
rules off its trees without adding specificity. */
:where(.dropdown-menu) .dd-list { max-height: 320px; overflow-y: auto; }
:where(.dropdown-menu) .dd-list::-webkit-scrollbar { width: 4px; }
:where(.dropdown-menu) .dd-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-xs); }
:where(.dropdown-menu) .dd-item {
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
align-items: center;
padding: 12px 18px;
border-bottom: 1px solid var(--border-soft);
transition: background 150ms ease;
}
:where(.dropdown-menu) .dd-item:last-child { border-bottom: 0; }
:where(.dropdown-menu) .dd-item:hover { background: var(--bg-hover); }
.dd-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.75rem;
font-weight: 600;
color: #fff;
flex-shrink: 0;
}
.dd-avatar.a1 { background: linear-gradient(135deg, var(--primary), var(--purple)); }
.dd-avatar.a2 { background: linear-gradient(135deg, var(--success), var(--teal)); }
.dd-avatar.a3 { background: linear-gradient(135deg, var(--danger), var(--warning)); }
.dd-body { min-width: 0; }
.dd-text { font-size: 0.8125rem; color: var(--t-muted); line-height: 1.4; margin-bottom: 3px; }
.dd-text strong { color: var(--t-base); font-weight: 600; }
.dd-text em { color: var(--primary); font-style: normal; }
.dd-preview {
font-size: 0.78125rem;
color: var(--t-muted);
line-height: 1.45;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 2px;
}
.dd-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dd-row-head strong { font-size: 0.8125rem; color: var(--t-base); font-weight: 600; }
.dd-time {
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--t-light);
letter-spacing: .04em;
flex-shrink: 0;
}
.dd-footer {
display: block;
padding: 12px 18px;
text-align: center;
font-size: 0.78125rem;
color: var(--primary);
font-weight: 600;
border-top: 1px solid var(--border-soft);
transition: color 180ms,background 180ms;
}
.dd-footer:hover { color: var(--primary-dark); background: var(--bg-hover); }
.dd-profile-head { padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.dd-profile-name { font-size: 0.8125rem; font-weight: 600; color: var(--t-base); }
.dd-profile-email {
font-size: 0.71875rem;
color: var(--t-muted);
margin-top: 2px;
font-family: var(--font-mono);
letter-spacing: .02em;
}
/* --------------------------------------------------------------------------
* Content area and page header (.hero)
* ------------------------------------------------------------------------ */
.content { flex: 1 0 auto; padding: 32px 32px 24px; width: 100%; }
.hero {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
margin-bottom: 28px;
animation: rise-in 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-text .eyebrow { display: block; margin-bottom: 10px; }
.hero-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.75rem,3.2vw,2.25rem);
line-height: 1.15;
letter-spacing: -0.028em;
color: var(--t-base);
margin: 0 0 8px;
}
.hero-title .accent { color: var(--primary); }
.hero-sub { font-size: 0.875rem; color: var(--t-muted); max-width: 60ch; line-height: 1.6; }
.hero-sub strong { color: var(--success); font-weight: 600; }
.hero-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* --------------------------------------------------------------------------
* Content helpers — card titles, table cells, tags, fields with an icon,
* form actions, spinner, avatar group, demo rows
* ------------------------------------------------------------------------ */
.card-title-wrap { min-width: 0; }
.card-title-wrap .eyebrow { display: block; margin-bottom: 4px; }
.card-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
letter-spacing: -0.02em;
color: var(--t-base);
margin: 0;
}
.card-action {
font-size: 0.75rem;
color: var(--primary);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color 180ms;
}
.card-action:hover { color: var(--primary-dark); }
.card-action svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.table .cell-name { color: var(--t-base); font-weight: 600; }
.table .cell-date { color: var(--t-muted); font-size: 0.75rem; }
.table .cell-price { font-weight: 600; color: var(--t-base); text-align: right; }
.table .cell-price.pos { color: var(--success); }
.table .cell-price.neg { color: var(--danger); }
.tag {
font-size: 0.65625rem;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
letter-spacing: .02em;
display: inline-flex;
align-items: center;
line-height: 1;
}
.tag.t-new { background: var(--purple-soft); color: var(--purple); }
.tag.t-used { background: var(--orange-soft); color: var(--orange); }
.tag.t-old { background: var(--warning-soft); color: var(--warning); }
.tag.t-unavail { background: var(--danger-soft); color: var(--danger); }
.tag.t-active { background: var(--success-soft); color: var(--success); }
.tag.t-info { background: var(--info-soft); color: var(--info); }
.input-icon { position: relative; }
.input-icon .ico {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--t-light);
pointer-events: none;
}
.input-icon .ico svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; }
.input-icon .form-control { padding-left: 34px; }
.form-actions {
display: flex;
gap: 10px;
align-items: center;
padding-top: 18px;
margin-top: 18px;
border-top: 1px solid var(--border-soft);
}
.form-actions .spacer { flex: 1; }
.spinner {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2.5px solid var(--bg-muted);
border-top-color: var(--primary);
animation: spin 700ms linear infinite;
display: inline-block;
}
.spinner.sm { width: 14px; height: 14px; border-width: 2px; }
.spinner.lg { width: 36px; height: 36px; border-width: 3px; }
@keyframes spin {
to { transform: rotate(360deg); }
}
.avatar-group { display: inline-flex; align-items: center; }
.avatar-group .av {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-size: 0.71875rem;
font-weight: 600;
border: 2px solid var(--bg-card);
margin-left: -8px;
flex-shrink: 0;
}
.avatar-group .av:first-child { margin-left: 0; }
.avatar-group .av.more { background: var(--bg-muted); color: var(--t-muted); font-size: 0.65625rem; }
.section-h {
display: flex;
align-items: baseline;
gap: 12px;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.9375rem;
color: var(--t-base);
letter-spacing: -0.012em;
margin: 0 0 14px;
}
.section-h .num {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--t-light);
font-weight: 500;
letter-spacing: .06em;
}
.demo-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* --------------------------------------------------------------------------
* Authentication and error pages
* ------------------------------------------------------------------------ */
.auth-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: var(--bg-body); }
.auth-aside {
position: relative;
background: linear-gradient(135deg, var(--primary), var(--purple));
color: #fff;
padding: 40px 48px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.auth-aside::before {
content: "";
position: absolute;
inset: -40% -20% auto auto;
width: 80%;
aspect-ratio: 1;
background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 60%);
pointer-events: none;
}
.auth-aside::after {
content: "";
position: absolute;
inset: auto auto -30% -20%;
width: 80%;
aspect-ratio: 1;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 60%);
pointer-events: none;
}
.auth-brand { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.auth-brand .logo {
width: 36px;
height: 36px;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.25);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: calc(var(--radius) * 1.125);
display: grid;
place-items: center;
}
.auth-brand .logo svg { width: 20px; height: 20px; }
.auth-brand .name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.018em; }
.auth-aside-body { margin-top: auto; position: relative; z-index: 1; max-width: 440px; }
.auth-aside-eyebrow {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
margin-bottom: 14px;
display: block;
}
.auth-aside h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.75rem,3vw,2.375rem);
letter-spacing: -0.025em;
line-height: 1.15;
margin: 0 0 14px;
}
.auth-aside p { font-size: 0.90625rem; color: rgba(255,255,255,.85); line-height: 1.6; margin: 0 0 24px; }
.auth-quote {
margin-top: 32px;
padding: 18px 20px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: var(--radius-lg);
font-size: 0.8125rem;
color: rgba(255,255,255,.9);
line-height: 1.6;
}
.auth-quote-author {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
font-size: 0.75rem;
color: rgba(255,255,255,.75);
}
.auth-quote-author .av {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255,255,255,.22);
display: grid;
place-items: center;
font-size: 0.6875rem;
font-weight: 600;
}
.auth-aside-footer {
margin-top: auto;
padding-top: 24px;
position: relative;
z-index: 1;
display: flex;
gap: 18px;
font-family: var(--font-mono);
font-size: 0.625rem;
color: rgba(255,255,255,.55);
letter-spacing: .06em;
}
.auth-main { display: flex; flex-direction: column; padding: 32px 48px; min-height: 100vh; }
.auth-main-top { display: flex; justify-content: space-between; align-items: center; }
.auth-main-top .switch-link { font-size: 0.78125rem; color: var(--t-muted); }
.auth-main-top .switch-link a { color: var(--primary); font-weight: 600; margin-left: 4px; }
.auth-card { width: 100%; max-width: 400px; margin: auto; padding: 8px 0; }
.auth-card h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.625rem;
letter-spacing: -0.022em;
color: var(--t-base);
margin: 0 0 6px;
}
.auth-card .sub { font-size: 0.84375rem; color: var(--t-muted); margin: 0 0 24px; line-height: 1.55; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .field-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.auth-form .field-row .form-label { margin: 0; }
.auth-form .field-row a { color: var(--primary); font-size: 0.75rem; font-weight: 600; }
.auth-submit { margin-top: 4px; }
.auth-divider {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--t-light);
letter-spacing: .14em;
text-transform: uppercase;
margin: 18px 0;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.social-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
color: var(--t-base);
font-size: 0.78125rem;
font-weight: 600;
transition: border-color 160ms,box-shadow 160ms,background 160ms;
}
.social-btn:hover { border-color: var(--t-light); box-shadow: var(--shadow-sm); }
.social-btn svg { width: 14px; height: 14px; }
.auth-main-bottom { margin-top: 24px; font-size: 0.71875rem; color: var(--t-light); text-align: center; }
.auth-main-bottom a { color: var(--t-muted); }
.error-shell {
min-height: 100vh;
display: grid;
place-items: center;
padding: 32px;
background: var(--bg-body);
position: relative;
overflow: hidden;
}
.error-shell::before {
content: "";
position: absolute;
inset: -20% -10% auto auto;
width: 60vmax;
aspect-ratio: 1;
background: radial-gradient(circle, color-mix(in oklab, var(--primary) 10%, transparent), transparent 70%);
pointer-events: none;
}
.error-shell::after {
content: "";
position: absolute;
inset: auto auto -20% -10%;
width: 60vmax;
aspect-ratio: 1;
background: radial-gradient(circle, color-mix(in oklab, var(--purple) 8%, transparent), transparent 70%);
pointer-events: none;
}
.error-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: calc(var(--radius) * 2.25);
box-shadow: var(--shadow-lg);
padding: 48px 56px;
max-width: 540px;
width: 100%;
text-align: center;
animation: rise-in 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@media (max-width: 600px) {
.error-card { padding: 32px 24px; }
}
.error-eyebrow {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--t-light);
margin-bottom: 14px;
display: block;
}
.error-code {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(6rem,16vw,10rem);
line-height: .95;
letter-spacing: -0.05em;
background: linear-gradient(135deg, var(--primary), var(--purple));
-webkit-background-clip: text;
background-clip: text;
color: rgba(0,0,0,0);
margin-bottom: 8px;
}
.error-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.022em;
color: var(--t-base);
margin: 0 0 10px;
}
.error-sub {
font-size: 0.875rem;
color: var(--t-muted);
line-height: 1.6;
margin: 0 0 24px;
max-width: 40ch;
margin-left: auto;
margin-right: auto;
}
.error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.error-meta {
margin-top: 28px;
padding-top: 18px;
border-top: 1px dashed var(--border);
font-family: var(--font-mono);
font-size: 0.65625rem;
color: var(--t-light);
letter-spacing: .06em;
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.error-meta strong { color: var(--t-muted); font-weight: 600; }
/* --------------------------------------------------------------------------
* Chat (chat.html)
* ------------------------------------------------------------------------ */
.chat-shell {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 20px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
overflow: hidden;
height: calc(100vh - 220px);
min-height: 560px;
animation: rise-in 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.chat-rail {
display: flex;
flex-direction: column;
border-right: 1px solid var(--border-soft);
background: var(--bg-card);
min-width: 0;
min-height: 0;
overflow: hidden;
}
.chat-rail-head {
padding: 14px 16px;
border-bottom: 1px solid var(--border-soft);
display: flex;
flex-direction: column;
gap: 12px;
}
.chat-rail-title-row { display: flex; align-items: center; justify-content: space-between; }
.chat-rail-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.90625rem;
color: var(--t-base);
letter-spacing: -0.012em;
}
.chat-rail-title .meta {
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--t-light);
font-weight: 500;
margin-left: 8px;
letter-spacing: .04em;
}
.chat-search { position: relative; }
.chat-search input {
width: 100%;
padding: 8px 10px 8px 32px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-muted);
font-size: 0.78125rem;
color: var(--t-base);
outline: 0;
transition: border-color 180ms,box-shadow 180ms,background 180ms;
}
.chat-search input::-moz-placeholder { color: var(--t-light); }
.chat-search input::placeholder { color: var(--t-light); }
.chat-search input:focus { border-color: var(--primary); background: var(--bg-card); box-shadow: var(--focus-ring); }
.chat-search svg {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 13px;
stroke: var(--t-light);
stroke-width: 2;
fill: none;
pointer-events: none;
}
.chat-list-scroll { flex: 1; overflow-y: auto; padding: 4px 0; }
.chat-list-scroll::-webkit-scrollbar { width: 4px; }
.chat-list-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-xs); }
.chat-conv {
display: grid;
grid-template-columns: 38px 1fr;
gap: 10px;
padding: 11px 16px;
border-bottom: 1px solid var(--border-soft);
cursor: pointer;
transition: background 160ms ease;
position: relative;
}
.chat-conv:hover { background: var(--bg-hover); }
.chat-conv.is-active { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.chat-conv-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-weight: 600;
font-size: 0.75rem;
flex-shrink: 0;
position: relative;
}
.chat-conv-avatar .presence {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--success);
border: 2px solid var(--bg-card);
}
.chat-conv-avatar .presence.away { background: var(--warning); }
.chat-conv-avatar .presence.off { background: var(--t-light); }
.chat-conv-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.chat-conv-name {
font-size: 0.8125rem;
color: var(--t-base);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-conv-time {
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--t-light);
letter-spacing: .04em;
flex-shrink: 0;
}
.chat-conv-preview {
font-size: 0.75rem;
color: var(--t-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-conv.is-unread .chat-conv-preview { color: var(--t-base); font-weight: 500; }
.chat-conv.is-unread .chat-conv-time { color: var(--primary); }
.chat-conv-badge {
position: absolute;
right: 14px;
top: 14px;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: var(--primary);
color: #fff;
font-size: 0.625rem;
font-weight: 700;
display: grid;
place-items: center;
}
.chat-pane { display: flex; flex-direction: column; background: var(--bg-card); min-width: 0; overflow: hidden; }
.chat-pane-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 22px;
border-bottom: 1px solid var(--border-soft);
}
.chat-pane-head .av {
width: 38px;
height: 38px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-weight: 600;
font-size: 0.75rem;
position: relative;
}
.chat-pane-head .av .presence {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--success);
border: 2px solid var(--bg-card);
}
.chat-pane-head .meta { line-height: 1.3; min-width: 0; flex: 1; }
.chat-pane-head .name { font-size: 0.875rem; font-weight: 600; color: var(--t-base); }
.chat-pane-head .status { font-size: 0.71875rem; color: var(--t-muted); display: flex; align-items: center; gap: 4px; }
.chat-pane-head .status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.chat-pane-head-tools { display: flex; gap: 2px; }
.chat-thread {
flex: 1;
overflow-y: auto;
padding: 22px 28px;
background: var(--bg-muted);
display: flex;
flex-direction: column;
gap: 16px;
}
.chat-thread::-webkit-scrollbar { width: 5px; }
.chat-thread::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-xs); }
.chat-day-sep {
display: flex;
align-items: center;
gap: 10px;
margin: 6px 0;
color: var(--t-light);
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: .14em;
text-transform: uppercase;
}
.chat-day-sep::before, .chat-day-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.chat-msg { display: flex; gap: 10px; max-width: min(75%,600px); }
.chat-msg.me { margin-left: auto; flex-direction: row-reverse; }
.chat-msg-av {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-weight: 600;
font-size: 0.71875rem;
flex-shrink: 0;
align-self: flex-end;
}
.chat-msg-av.me { background: linear-gradient(135deg, var(--primary), var(--purple)); }
.chat-msg-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chat-msg.me .chat-msg-stack { align-items: flex-end; }
.chat-bub {
padding: 10px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
border-top-left-radius: var(--radius-xs);
font-size: 0.84375rem;
color: var(--t-base);
line-height: 1.5;
box-shadow: var(--shadow-sm);
word-wrap: break-word;
}
.chat-msg.me .chat-bub {
background: var(--primary);
color: #fff;
border-color: var(--primary);
border-top-left-radius: var(--radius-xl);
border-top-right-radius: var(--radius-xs);
}
.chat-msg-meta {
display: flex;
gap: 6px;
align-items: center;
font-family: var(--font-mono);
font-size: 0.59375rem;
color: var(--t-light);
letter-spacing: .04em;
padding: 0 4px;
}
.chat-msg-meta .read { color: var(--primary); }
.chat-typing {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.71875rem;
color: var(--t-muted);
margin-top: 4px;
}
.chat-typing-dots { display: inline-flex; gap: 3px; }
.chat-typing-dots span {
width: 4px;
height: 4px;
background: var(--t-light);
border-radius: 50%;
animation: typing 1.2s infinite ease-in-out;
}
.chat-typing-dots span:nth-child(2) { animation-delay: .15s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
0%, 60%, 100% { opacity: .3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
.chat-composer { padding: 14px 22px 18px; border-top: 1px solid var(--border-soft); background: var(--bg-card); }
.chat-composer-input {
display: flex;
align-items: end;
gap: 8px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-muted);
padding: 8px 10px;
transition: border-color 180ms,box-shadow 180ms;
}
.chat-composer-input:focus-within {
border-color: var(--primary);
background: var(--bg-card);
box-shadow: var(--focus-ring);
}
.chat-composer-input textarea {
flex: 1;
background: rgba(0,0,0,0);
border: 0;
outline: 0;
resize: none;
min-height: 22px;
max-height: 120px;
font-size: 0.84375rem;
color: var(--t-base);
padding: 4px 4px;
font-family: inherit;
line-height: 1.5;
}
.chat-composer-input textarea::-moz-placeholder { color: var(--t-light); }
.chat-composer-input textarea::placeholder { color: var(--t-light); }
.chat-composer-tools { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.chat-composer-tools .tool {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: var(--radius-sm);
color: var(--t-muted);
transition: background 160ms,color 160ms;
}
.chat-composer-tools .tool:hover { background: var(--bg-hover); color: var(--t-base); }
.chat-composer-tools .tool svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.chat-composer-send {
width: 32px;
height: 32px;
border-radius: var(--radius);
background: var(--primary);
color: #fff;
display: grid;
place-items: center;
transition: background 180ms;
flex-shrink: 0;
}
.chat-composer-send:hover { background: var(--primary-dark); }
.chat-composer-send svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
/* --------------------------------------------------------------------------
* Data table — toolbar, row cells, footer and pagination (datatable.html)
* ------------------------------------------------------------------------ */
.data-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.data-toolbar-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px; }
.data-toolbar-right { display: flex; align-items: center; gap: 8px; }
.data-toolbar .input-icon { flex: 1; max-width: 320px; }
.data-table thead th .sort { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--t-light); }
.data-table thead th.sorted-asc .sort, .data-table thead th.sorted-desc .sort { color: var(--primary); }
.data-table thead th.sorted-asc .sort svg { transform: rotate(180deg); }
.data-table thead th .sort svg {
width: 10px;
height: 10px;
stroke: currentColor;
stroke-width: 2;
fill: none;
transition: transform 160ms;
}
.data-cell-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.data-cell-user .av {
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-weight: 600;
font-size: 0.6875rem;
flex-shrink: 0;
}
.data-cell-user-meta { line-height: 1.3; min-width: 0; }
.data-cell-user-name { font-size: 0.8125rem; font-weight: 600; color: var(--t-base); }
.data-cell-user-email {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--t-muted);
letter-spacing: .02em;
}
.data-cell-mono { font-family: var(--font-mono); font-size: 0.75rem; color: var(--t-muted); letter-spacing: .02em; }
.data-cell-actions { display: flex; gap: 2px; }
.data-cell-actions .btn-icon {
padding: 6px;
background: rgba(0,0,0,0);
border: 0;
color: var(--t-muted);
border-radius: var(--radius-sm);
transition: background 140ms,color 140ms;
}
.data-cell-actions .btn-icon:hover { background: var(--bg-hover); color: var(--t-base); }
.data-cell-actions .btn-icon svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.data-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
margin-top: 4px;
border-top: 1px solid var(--border-soft);
font-size: 0.75rem;
color: var(--t-muted);
}
.data-foot-info { display: flex; align-items: center; gap: 16px; }
.data-foot-info .form-select { width: auto; padding: 6px 28px 6px 10px; font-size: 0.75rem; }
.pager { display: flex; gap: 4px; align-items: center; }
.pager-btn {
min-width: 30px;
height: 30px;
padding: 0 8px;
display: grid;
place-items: center;
border-radius: calc(var(--radius) * 0.875);
font-size: 0.75rem;
font-weight: 600;
color: var(--t-muted);
transition: background 160ms,color 160ms;
}
.pager-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--t-base); }
.pager-btn.is-active { background: var(--primary); color: #fff; }
.pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.pager-btn svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
/* --------------------------------------------------------------------------
* Dashboard widgets (index.html)
* ------------------------------------------------------------------------ */
.chart-canvas-wrap { position: relative; width: 100%; min-height: 240px; }
.chart-meta-row {
display: flex;
gap: 18px;
padding-top: 14px;
border-top: 1px dashed var(--border-soft);
margin-top: 14px;
flex-wrap: wrap;
}
.chart-meta-cell { display: flex; flex-direction: column; gap: 3px; min-width: 90px; }
.chart-meta-label {
font-size: 0.65625rem;
color: var(--t-light);
text-transform: uppercase;
letter-spacing: .1em;
font-family: var(--font-mono);
}
.chart-meta-value {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: -0.02em;
color: var(--t-base);
}
.chart-meta-value.up { color: var(--success); }
.chart-meta-value.down { color: var(--danger); }
.kpi-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 22px 22px 20px;
box-shadow: var(--shadow-card);
animation: rise-in 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
position: relative;
overflow: hidden;
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),box-shadow 220ms ease,border-color 220ms ease;
}
.kpi-card::before {
content: "";
position: absolute;
inset: 0 0 auto auto;
width: 180px;
height: 180px;
background: radial-gradient(circle at top right, currentColor, transparent 65%);
opacity: .08;
pointer-events: none;
transition: opacity 220ms ease;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi-card:hover::before { opacity: .14; }
.kpi-card.c-success { color: var(--success); }
.kpi-card.c-danger { color: var(--danger); }
.kpi-card.c-purple { color: var(--purple); }
.kpi-card.c-primary { color: var(--primary); }
:nth-child(1)>.kpi-card { animation-delay: 60ms; }
:nth-child(2)>.kpi-card { animation-delay: 120ms; }
:nth-child(3)>.kpi-card { animation-delay: 180ms; }
:nth-child(4)>.kpi-card { animation-delay: 240ms; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; }
.kpi-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kpi-icon {
width: 32px;
height: 32px;
border-radius: calc(var(--radius) * 1.125);
display: grid;
place-items: center;
flex-shrink: 0;
}
.kpi-icon svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.9; fill: none; }
.kpi-icon.primary { background: var(--primary-soft); color: var(--primary); }
.kpi-icon.success { background: var(--success-soft); color: var(--success); }
.kpi-icon.info { background: var(--info-soft); color: var(--info); }
.kpi-icon.purple { background: var(--purple-soft); color: var(--purple); }
.kpi-icon.danger { background: var(--danger-soft); color: var(--danger); }
.kpi-icon.warning { background: var(--warning-soft); color: var(--warning); }
.kpi-label {
font-size: 0.8125rem;
color: var(--t-muted);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kpi-value {
font-family: var(--font-display);
font-weight: 700;
font-size: 2.75rem;
line-height: 1;
letter-spacing: -0.035em;
color: var(--t-base);
position: relative;
}
.kpi-value sup {
font-size: 1.0625rem;
color: var(--t-muted);
vertical-align: top;
font-weight: 500;
margin-left: 3px;
line-height: 2.1;
}
.kpi-compare {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.75rem;
color: var(--t-light);
font-weight: 500;
padding-top: 12px;
border-top: 1px dashed var(--border-soft);
margin-top: auto;
}
.kpi-compare strong {
color: var(--t-base);
font-weight: 600;
font-family: var(--font-mono);
font-size: 0.71875rem;
letter-spacing: -0.01em;
}
.kpi-compare svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.2; fill: none; flex-shrink: 0; }
.kpi-compare .up { color: var(--success); }
.kpi-compare .down { color: var(--danger); }
.kpi-compare .flat { color: var(--purple); }
.kpi-compare .info { color: var(--info); }
.kpi-compare .sep { color: var(--t-light); opacity: .45; font-weight: 400; }
.kpi-pill {
font-family: var(--font-mono);
font-size: 0.65625rem;
font-weight: 500;
padding: 4px 9px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 4px;
letter-spacing: .02em;
flex-shrink: 0;
}
.kpi-pill.up { background: var(--success-soft); color: var(--success); }
.kpi-pill.down { background: var(--danger-soft); color: var(--danger); }
.kpi-pill.flat { background: var(--purple-soft); color: var(--purple); }
.kpi-pill.info { background: var(--info-soft); color: var(--info); }
.kpi-pill svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.5; fill: none; }
.sv-regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.sv-region { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sv-region-head {
display: flex;
align-items: center;
gap: 9px;
font-size: 0.8125rem;
color: var(--t-muted);
font-weight: 500;
}
.sv-region-head .marker { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sv-region-value {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.75rem;
color: var(--t-base);
letter-spacing: -0.03em;
line-height: 1.05;
display: flex;
align-items: baseline;
gap: 8px;
}
.sv-region-value .pct {
font-family: var(--font-mono);
font-size: 0.71875rem;
color: var(--t-light);
font-weight: 500;
letter-spacing: .02em;
}
.sv-region-bar { height: 3px; background: var(--bg-muted); border-radius: 99px; overflow: hidden; margin-top: 2px; }
.sv-region-bar-fill {
height: 100%;
border-radius: 99px;
transform-origin: left;
animation: bar-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 300ms both;
}
.sv-divider { height: 1px; background: var(--border-soft); margin: 28px 0; }
.sv-radials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sv-radial { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; }
.sv-radial-chart { width: 72px; height: 72px; position: relative; flex-shrink: 0; }
.sv-radial-chart svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.radial-track { stroke: var(--bg-muted); stroke-width: 5; fill: none; }
.radial-fill { stroke-width: 5; fill: none; stroke-linecap: round; }
.radial-fill.danger { stroke: var(--danger); }
.radial-fill.info { stroke: var(--info); }
.radial-fill.warning { stroke: var(--warning); }
.sv-radial-chart .pct {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.9375rem;
color: var(--t-base);
letter-spacing: -0.022em;
}
.sv-radial-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-radial-name { font-size: 0.84375rem; font-weight: 600; color: var(--t-base); letter-spacing: -0.005em; }
.sv-radial-caption { font-size: 0.71875rem; color: var(--t-muted); }
.monthly-footer {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
padding-top: 18px;
border-top: 1px solid var(--border-soft);
margin-top: 18px;
}
.stat-cell { display: flex; flex-direction: column; gap: 4px; }
.stat-cell-label { font-size: 0.6875rem; color: var(--t-muted); font-weight: 500; }
.stat-cell-value {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.125rem;
letter-spacing: -0.022em;
color: var(--t-base);
display: flex;
align-items: center;
gap: 6px;
}
.stat-cell-value .trend-ic { width: 11px; height: 11px; color: var(--success); flex-shrink: 0; }
.todo-list { display: flex; flex-direction: column; }
.todo-item {
display: grid;
grid-template-columns: 20px 1fr auto;
gap: 12px;
align-items: center;
padding: 11px 0;
border-bottom: 1px solid var(--border-soft);
}
.todo-item:last-child { border-bottom: 0; }
.todo-check {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1.5px solid var(--t-light);
border-radius: var(--radius-sm);
cursor: pointer;
position: relative;
transition: all 160ms ease;
background: rgba(0,0,0,0);
}
.todo-check:hover { border-color: var(--primary); }
.todo-check:checked { background: var(--primary); border-color: var(--primary); }
.todo-check:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 4px;
height: 9px;
border: solid #fff;
border-width: 0 1.8px 1.8px 0;
transform: rotate(45deg);
}
.todo-item.is-done .todo-text {
color: var(--t-light);
-webkit-text-decoration: line-through;
text-decoration: line-through;
text-decoration-thickness: 1.5px;
}
.todo-text { font-size: 0.84375rem; color: var(--t-base); cursor: pointer; }
.todo-badge {
font-size: 0.65625rem;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
letter-spacing: .02em;
line-height: 1;
}
.todo-badge.low { background: var(--bg-muted); color: var(--t-muted); }
.todo-badge.upcoming { background: var(--info-soft); color: var(--info); }
.todo-badge.urgent { background: var(--danger-soft); color: var(--danger); }
.todo-badge.warn { background: var(--warning-soft); color: var(--warning); }
.todo-badge.done { background: var(--success-soft); color: var(--success); }
.sales-summary {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 0 20px;
margin-bottom: 4px;
}
.sales-summary-label .eyebrow { display: block; margin-bottom: 4px; }
.sales-summary h4 {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.9375rem;
color: var(--t-base);
margin: 0;
}
.sales-summary-total {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.75rem;
letter-spacing: -0.03em;
color: var(--t-base);
line-height: 1;
}
.sales-summary-total sup {
font-size: 0.9375rem;
color: var(--t-muted);
vertical-align: top;
font-weight: 500;
margin-right: 1px;
line-height: 2;
}
.sales-all { padding: 18px 0 0; text-align: center; margin-top: 6px; border-top: 1px solid var(--border-soft); }
.sales-all a {
font-size: 0.78125rem;
color: var(--primary);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color 180ms;
}
.sales-all a:hover { color: var(--primary-dark); }
.sales-all svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.wx-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 8px 0; }
.wx-temp-block { display: flex; align-items: center; gap: 16px; }
.wx-icon {
width: 60px;
height: 60px;
border-radius: calc(var(--radius) * 2);
background: linear-gradient(135deg, var(--info-soft), var(--primary-soft));
color: var(--info);
display: grid;
place-items: center;
flex-shrink: 0;
}
.wx-icon svg { width: 34px; height: 34px; stroke: currentColor; stroke-width: 1.3; fill: none; }
.wx-temp {
font-family: var(--font-display);
font-weight: 700;
font-size: 2.75rem;
line-height: 1;
letter-spacing: -0.035em;
color: var(--t-base);
}
.wx-temp sup { font-size: 1.125rem; color: var(--t-muted); vertical-align: top; font-weight: 500; line-height: 1.6; }
.wx-condition { margin-top: 4px; color: var(--t-muted); font-size: 0.8125rem; }
.wx-condition strong { color: var(--t-base); font-weight: 600; }
.wx-date { text-align: right; }
.wx-date h5 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--t-base);
margin: 0 0 2px;
letter-spacing: -0.02em;
}
.wx-date p {
font-family: var(--font-mono);
font-size: 0.65625rem;
color: var(--t-light);
letter-spacing: .06em;
margin: 0;
}
.wx-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 16px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 20px 0 16px;
}
.wx-stats>div { display: flex; flex-direction: column; gap: 4px; }
.wx-stat-label { font-size: 0.6875rem; color: var(--t-muted); font-weight: 500; }
.wx-stat-value {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--t-base);
letter-spacing: -0.018em;
}
.wx-stat-value .unit {
font-size: 0.6875rem;
color: var(--t-light);
margin-left: 3px;
font-weight: 500;
letter-spacing: 0;
}
.wx-forecast { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.wx-day { padding: 10px 4px; border-radius: var(--radius-md); cursor: pointer; transition: background 160ms ease; }
.wx-day:hover { background: var(--bg-hover); }
.wx-day.is-today { background: var(--primary); color: #fff; }
.wx-day-name {
font-size: 0.65625rem;
font-weight: 600;
color: var(--t-muted);
letter-spacing: .04em;
margin-bottom: 6px;
}
.wx-day.is-today .wx-day-name { color: rgba(255,255,255,.85); }
.wx-day-icon { width: 22px; height: 22px; margin: 0 auto 6px; color: var(--t-muted); }
.wx-day-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.6; fill: none; }
.wx-day.is-today .wx-day-icon { color: #fff; }
.wx-day-temp { font-size: 0.78125rem; color: var(--t-base); font-weight: 600; }
.wx-day.is-today .wx-day-temp { color: #fff; }
.chat-frame { margin: -6px -6px 0; border-radius: var(--radius-lg); background: var(--bg-muted); overflow: hidden; }
.chat-messages { padding: 20px; display: flex; flex-direction: column; gap: 16px; min-height: 200px; }
.chat-row { display: flex; gap: 10px; max-width: min(85%,560px); }
.chat-row.me { margin-left: auto; flex-direction: row-reverse; }
.chat-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--bg-card);
color: var(--t-base);
display: grid;
place-items: center;
font-weight: 600;
font-size: 0.71875rem;
flex-shrink: 0;
border: 1px solid var(--border);
}
.chat-avatar.me { background: linear-gradient(135deg, var(--primary), var(--purple)); color: #fff; border: 0; }
.chat-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chat-row.me .chat-stack { align-items: flex-end; }
.chat-bubble {
padding: 8px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
border-top-left-radius: var(--radius-xs);
font-size: 0.8125rem;
color: var(--t-base);
line-height: 1.45;
box-shadow: var(--shadow-sm);
}
.chat-row.me .chat-bubble {
background: var(--primary);
color: #fff;
border-color: var(--primary);
border-top-left-radius: var(--radius-xl);
border-top-right-radius: var(--radius-xs);
}
.chat-ts {
font-family: var(--font-mono);
font-size: 0.59375rem;
color: var(--t-light);
letter-spacing: .04em;
padding: 0 4px;
}
.chat-input-row {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
background: var(--bg-card);
border-top: 1px solid var(--border);
}
.chat-input {
flex: 1;
background: rgba(0,0,0,0);
border: 0;
outline: 0;
font-size: 0.84375rem;
color: var(--t-base);
padding: 4px 0;
}
.chat-input::-moz-placeholder { color: var(--t-light); }
.chat-input::placeholder { color: var(--t-light); }
.chat-send {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--primary);
color: #fff;
transition: background 180ms;
flex-shrink: 0;
box-shadow: 0 2px 6px -1px color-mix(in oklab, var(--primary) 40%, transparent);
}
.chat-send:hover { background: var(--primary-dark); }
.chat-send svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }
/* --------------------------------------------------------------------------
* Email (email.html, compose.html, chat.html header)
* ------------------------------------------------------------------------ */
.mail-hero {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 20px;
animation: rise-in 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.mail-hero .hero-title { font-size: clamp(1.5rem,2.4vw,1.75rem); margin-bottom: 6px; }
.mail-hero .hero-sub { font-size: 0.84375rem; }
.mail-shell {
display: grid;
grid-template-columns: 220px minmax(320px, 1fr) minmax(0, 1.4fr);
gap: 20px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
overflow: hidden;
height: calc(100vh - 240px);
min-height: 560px;
animation: rise-in 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
animation-delay: 80ms;
}
.mail-rail {
display: flex;
flex-direction: column;
padding: 18px 14px;
border-right: 1px solid var(--border-soft);
background: var(--bg-card);
overflow-y: auto;
gap: 18px;
}
.mail-rail::-webkit-scrollbar { width: 4px; }
.mail-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-xs); }
.mail-compose {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--primary);
color: #fff;
padding: 11px 14px;
border-radius: calc(var(--radius) * 1.125);
font-size: 0.8125rem;
font-weight: 600;
box-shadow: 0 2px 6px -1px var(--primary-ring);
transition: background 180ms;
}
.mail-compose:hover { background: var(--primary-dark); }
.mail-compose svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.mail-rail-section { display: flex; flex-direction: column; gap: 1px; }
.mail-rail-label {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--t-light);
padding: 0 10px 8px;
}
.mail-folder {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius);
color: var(--t-muted);
font-size: 0.8125rem;
font-weight: 500;
transition: background 160ms ease,color 160ms ease;
cursor: pointer;
}
.mail-folder svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.75; fill: none; flex-shrink: 0; }
.mail-folder:hover { background: var(--bg-hover); color: var(--t-base); }
.mail-folder.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.mail-folder-name { flex: 1; min-width: 0; }
.mail-folder-count { font-family: var(--font-mono); font-size: 0.65625rem; color: var(--t-light); font-weight: 500; }
.mail-folder.is-active .mail-folder-count { color: var(--primary); }
.mail-folder-count.is-strong {
background: var(--primary);
color: #fff;
padding: 2px 7px;
border-radius: 999px;
font-size: 0.625rem;
}
.mail-folder.is-active .mail-folder-count.is-strong { background: var(--primary); color: #fff; }
.mail-label-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mail-rail-storage { margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid var(--border-soft); }
.mail-storage-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.71875rem;
color: var(--t-muted);
font-weight: 500;
margin-bottom: 8px;
}
.mail-storage-head .num {
font-family: var(--font-mono);
font-size: 0.65625rem;
color: var(--t-light);
letter-spacing: .04em;
}
.mail-storage-bar { height: 4px; background: var(--bg-muted); border-radius: 99px; overflow: hidden; }
.mail-storage-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--purple));
border-radius: 99px;
animation: bar-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 300ms both;
transform-origin: left;
}
.mail-storage-foot { font-size: 0.6875rem; color: var(--t-light); margin-top: 6px; }
.mail-storage-foot a { color: var(--primary); font-weight: 600; }
.mail-list {
display: flex;
flex-direction: column;
border-right: 1px solid var(--border-soft);
background: var(--bg-card);
min-width: 0;
overflow: hidden;
}
.mail-list-head {
padding: 14px 16px;
border-bottom: 1px solid var(--border-soft);
display: flex;
flex-direction: column;
gap: 12px;
}
.mail-list-toptools { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mail-list-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.9375rem;
color: var(--t-base);
letter-spacing: -0.018em;
}
.mail-list-title .meta {
font-family: var(--font-mono);
font-size: 0.65625rem;
color: var(--t-light);
font-weight: 500;
margin-left: 8px;
letter-spacing: .04em;
}
.mail-list-tools { display: flex; gap: 2px; }
.mail-tool {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: calc(var(--radius) * 0.875);
color: var(--t-muted);
transition: background 160ms,color 160ms;
}
.mail-tool:hover { background: var(--bg-hover); color: var(--t-base); }
.mail-tool svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.mail-search { position: relative; }
.mail-search input {
width: 100%;
padding: 8px 10px 8px 32px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-muted);
font-size: 0.78125rem;
color: var(--t-base);
outline: 0;
transition: border-color 180ms,box-shadow 180ms,background 180ms;
}
.mail-search input::-moz-placeholder { color: var(--t-light); }
.mail-search input::placeholder { color: var(--t-light); }
.mail-search input:focus { border-color: var(--primary); background: var(--bg-card); box-shadow: var(--focus-ring); }
.mail-search svg {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 13px;
stroke: var(--t-light);
stroke-width: 2;
fill: none;
pointer-events: none;
}
.mail-tabs {
display: flex;
gap: 4px;
padding: 0 16px;
border-bottom: 1px solid var(--border-soft);
background: var(--bg-card);
}
.mail-tab {
padding: 10px 4px;
margin-right: 14px;
font-size: 0.75rem;
color: var(--t-muted);
font-weight: 500;
border-bottom: 2px solid rgba(0,0,0,0);
transition: color 160ms,border-color 160ms;
position: relative;
top: 1px;
}
.mail-tab:hover { color: var(--t-base); }
.mail-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.mail-tab .num {
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--t-light);
margin-left: 4px;
letter-spacing: .04em;
}
.mail-tab.is-active .num { color: var(--primary); }
.mail-list-scroll { flex: 1; overflow-y: auto; padding: 4px 0; }
.mail-list-scroll::-webkit-scrollbar { width: 4px; }
.mail-list-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-xs); }
.mail-row {
display: grid;
grid-template-columns: 36px 1fr;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--border-soft);
cursor: pointer;
transition: background 160ms ease;
position: relative;
}
.mail-row:hover { background: var(--bg-hover); }
.mail-row.is-active { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.mail-row.is-unread::before {
content: "";
position: absolute;
left: 8px;
top: 18px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--primary);
}
.mail-row-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-weight: 600;
font-size: 0.75rem;
flex-shrink: 0;
}
.ma-1 { background: linear-gradient(135deg, var(--primary), var(--purple)); }
.ma-2 { background: linear-gradient(135deg, var(--success), var(--teal)); }
.ma-3 { background: linear-gradient(135deg, var(--danger), var(--warning)); }
.ma-4 { background: linear-gradient(135deg, var(--info), var(--primary-light)); }
.ma-5 { background: linear-gradient(135deg, var(--orange), var(--pink)); }
.ma-6 { background: linear-gradient(135deg, var(--purple), var(--pink)); }
.mail-row-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mail-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mail-row-from {
font-size: 0.8125rem;
color: var(--t-base);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.mail-row.is-unread .mail-row-from { font-weight: 700; }
.mail-row-time {
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--t-light);
letter-spacing: .04em;
flex-shrink: 0;
}
.mail-row.is-unread .mail-row-time { color: var(--primary); }
.mail-row-subject {
font-size: 0.78125rem;
color: var(--t-base);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mail-row.is-unread .mail-row-subject { font-weight: 600; }
.mail-row-preview {
font-size: 0.75rem;
color: var(--t-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mail-row-tags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.mail-tag {
font-size: 0.59375rem;
font-weight: 600;
padding: 2px 7px;
border-radius: 999px;
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1.4;
}
.mail-tag.work { background: var(--primary-soft); color: var(--primary); }
.mail-tag.team { background: var(--success-soft); color: var(--success); }
.mail-tag.finance { background: var(--purple-soft); color: var(--purple); }
.mail-tag.invoice { background: var(--warning-soft); color: var(--warning); }
.mail-tag.travel { background: var(--info-soft); color: var(--info); }
.mail-tag.attach {
background: var(--bg-muted);
color: var(--t-muted);
display: inline-flex;
align-items: center;
gap: 3px;
}
.mail-tag.attach svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.mail-star {
position: absolute;
right: 16px;
bottom: 12px;
color: var(--t-light);
cursor: pointer;
transition: color 160ms;
}
.mail-star svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.mail-star:hover { color: var(--warning); }
.mail-star.is-on { color: var(--warning); }
.mail-star.is-on svg { fill: var(--warning); }
.mail-reader { display: flex; flex-direction: column; background: var(--bg-card); min-width: 0; overflow: hidden; }
.reader-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 22px;
border-bottom: 1px solid var(--border-soft);
gap: 10px;
}
.reader-tools-group { display: flex; gap: 2px; align-items: center; }
.reader-tools-group .sep { width: 1px; height: 18px; background: var(--border-soft); margin: 0 6px; }
.reader-scroll { flex: 1; overflow-y: auto; padding: 24px 28px 28px; }
.reader-scroll::-webkit-scrollbar { width: 5px; }
.reader-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-xs); }
.reader-head { margin-bottom: 18px; }
.reader-subject {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.375rem;
line-height: 1.25;
letter-spacing: -0.022em;
color: var(--t-base);
margin: 0 0 10px;
}
.reader-meta-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.reader-meta-row .mail-tag { font-size: 0.625rem; padding: 3px 8px; }
.reader-card {
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 14px;
}
.reader-card-head {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: var(--bg-card);
border-bottom: 1px solid var(--border-soft);
}
.reader-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-weight: 600;
font-size: 0.8125rem;
flex-shrink: 0;
}
.reader-from-block { flex: 1; min-width: 0; line-height: 1.3; }
.reader-from-name { font-size: 0.84375rem; color: var(--t-base); font-weight: 600; }
.reader-from-email {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--t-muted);
letter-spacing: .02em;
}
.reader-from-meta { font-size: 0.71875rem; color: var(--t-light); margin-top: 4px; }
.reader-time-block { text-align: right; font-size: 0.71875rem; color: var(--t-muted); flex-shrink: 0; }
.reader-time-block .mono {
font-family: var(--font-mono);
color: var(--t-light);
font-size: 0.65625rem;
letter-spacing: .04em;
display: block;
margin-top: 2px;
}
.reader-actions { display: flex; gap: 4px; margin-left: 4px; }
.reader-body {
padding: 18px 16px;
font-size: 0.84375rem;
color: var(--t-base);
line-height: 1.65;
background: var(--bg-card);
}
.reader-body p { margin: 0 0 12px; }
.reader-body p:last-child { margin-bottom: 0; }
.reader-body strong { color: var(--t-base); font-weight: 600; }
.reader-body a { color: var(--primary); font-weight: 500; }
.reader-body ul { margin: 0 0 12px; padding-left: 18px; list-style: disc; }
.reader-body li { margin: 4px 0; }
.reader-quote {
margin: 14px 0 4px;
padding: 12px 14px;
border-left: 2px solid var(--border);
background: var(--bg-muted);
border-radius: 0 var(--radius) var(--radius) 0;
font-size: 0.78125rem;
color: var(--t-muted);
}
.reader-attach { padding: 14px 16px; border-top: 1px solid var(--border-soft); background: var(--bg-card); }
.reader-attach-head {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.65625rem;
color: var(--t-light);
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 12px;
}
.reader-attach-head svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none; }
.reader-attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.reader-attach-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border: 1px solid var(--border-soft);
border-radius: calc(var(--radius) * 1.125);
background: var(--bg-card);
transition: border-color 160ms,box-shadow 160ms,transform 160ms;
cursor: pointer;
}
.reader-attach-item:hover { border-color: var(--primary); box-shadow: var(--focus-ring); }
.attach-ico {
width: 34px;
height: 34px;
border-radius: var(--radius);
display: grid;
place-items: center;
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 0.59375rem;
font-weight: 700;
letter-spacing: .04em;
color: #fff;
}
.attach-ico.pdf { background: var(--danger); }
.attach-ico.doc { background: var(--primary); }
.attach-ico.xls { background: var(--success); }
.attach-ico.img { background: var(--purple); }
.attach-ico.zip { background: var(--orange); }
.attach-meta { line-height: 1.3; min-width: 0; }
.attach-name {
font-size: 0.78125rem;
color: var(--t-base);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.attach-size { font-family: var(--font-mono); font-size: 0.625rem; color: var(--t-light); letter-spacing: .04em; }
.reader-collapsed {
padding: 12px 16px;
background: var(--bg-card);
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: background 160ms;
}
.reader-collapsed:hover { background: var(--bg-hover); }
.reader-collapsed .reader-avatar { width: 28px; height: 28px; font-size: 0.6875rem; }
.reader-collapsed-from { font-size: 0.78125rem; color: var(--t-base); font-weight: 600; }
.reader-collapsed-preview {
flex: 1;
min-width: 0;
font-size: 0.75rem;
color: var(--t-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.reader-collapsed-time {
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--t-light);
letter-spacing: .04em;
}
.reader-replybar {
display: flex;
align-items: center;
gap: 6px;
padding: 14px 16px;
margin-top: 8px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
background: var(--bg-muted);
}
.reader-replybar input {
flex: 1;
background: rgba(0,0,0,0);
border: 0;
outline: 0;
font-size: 0.8125rem;
color: var(--t-base);
padding: 4px 6px;
}
.reader-replybar input::-moz-placeholder { color: var(--t-light); }
.reader-replybar input::placeholder { color: var(--t-light); }
.reader-replybar .reply-send {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: var(--radius);
background: var(--primary);
color: #fff;
transition: background 180ms;
flex-shrink: 0;
}
.reader-replybar .reply-send:hover { background: var(--primary-dark); }
.reader-replybar .reply-send svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
/* --------------------------------------------------------------------------
* Calendar (calendar.html) and the FullCalendar theme
* ------------------------------------------------------------------------ */
.cal-hero { margin-bottom: 20px; }
.cal-hero .hero-title { font-size: clamp(1.5rem,2.4vw,1.75rem); margin-bottom: 6px; }
.cal-hero .hero-sub { font-size: 0.84375rem; }
.cal-shell {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 20px;
animation: rise-in 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
animation-delay: 80ms;
}
.cal-rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cal-quickadd {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--primary);
color: #fff;
padding: 11px 14px;
border-radius: var(--radius-md);
font-size: 0.8125rem;
font-weight: 600;
box-shadow: 0 2px 6px -1px var(--primary-ring);
transition: background 180ms;
}
.cal-quickadd:hover { background: var(--primary-dark); }
.cal-quickadd svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.cal-rail-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 16px;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
gap: 12px;
}
.cal-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-rail-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.84375rem;
color: var(--t-base);
letter-spacing: -0.01em;
}
.cal-rail-tools { display: flex; gap: 2px; }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.mini-cal-wd {
font-family: var(--font-mono);
font-size: 0.59375rem;
color: var(--t-light);
text-align: center;
padding: 4px 0 6px;
letter-spacing: .06em;
}
.mini-cal-day {
aspect-ratio: 1;
display: grid;
place-items: center;
font-size: 0.71875rem;
color: var(--t-base);
border-radius: calc(var(--radius) * 0.875);
cursor: pointer;
transition: background 140ms ease,color 140ms ease;
position: relative;
}
.mini-cal-day:hover { background: var(--bg-hover); }
.mini-cal-day.is-other { color: var(--t-light); }
.mini-cal-day.is-today { background: var(--primary); color: #fff; font-weight: 700; }
.mini-cal-day.has-event::after {
content: "";
position: absolute;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--primary);
}
.mini-cal-day.is-today.has-event::after { background: #fff; }
.cal-list { display: flex; flex-direction: column; gap: 2px; }
.cal-list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 8px;
border-radius: calc(var(--radius) * 0.875);
cursor: pointer;
transition: background 140ms ease;
}
.cal-list-item:hover { background: var(--bg-hover); }
.cal-list-check {
width: 14px;
height: 14px;
border-radius: var(--radius-xs);
flex-shrink: 0;
position: relative;
border: 1.5px solid currentColor;
background: currentColor;
}
.cal-list-check::after {
content: "";
position: absolute;
left: 3px;
top: 0;
width: 3px;
height: 7px;
border: solid #fff;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.cal-list-check.is-off { background: rgba(0,0,0,0); }
.cal-list-check.is-off::after { display: none; }
.cal-list-name { font-size: 0.78125rem; color: var(--t-base); flex: 1; min-width: 0; }
.cal-list-item.is-off .cal-list-name { color: var(--t-light); }
.cal-list-count { font-family: var(--font-mono); font-size: 0.625rem; color: var(--t-light); letter-spacing: .04em; }
.upc-list { display: flex; flex-direction: column; }
.upc-item {
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px;
padding: 11px 0;
border-top: 1px solid var(--border-soft);
align-items: center;
}
.upc-item:first-child { border-top: 0; padding-top: 4px; }
.upc-date {
text-align: center;
line-height: 1.05;
padding: 6px 0;
border-radius: var(--radius);
background: var(--bg-muted);
}
.upc-date .day {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
color: var(--t-base);
letter-spacing: -0.022em;
}
.upc-date .mo {
font-family: var(--font-mono);
font-size: 0.5625rem;
color: var(--t-light);
letter-spacing: .08em;
margin-top: 2px;
display: block;
text-transform: uppercase;
}
.upc-date.is-today { background: var(--primary-soft); }
.upc-date.is-today .day { color: var(--primary); }
.upc-date.is-today .mo { color: var(--primary); }
.upc-meta { min-width: 0; line-height: 1.35; }
.upc-title {
font-size: 0.8125rem;
color: var(--t-base);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.upc-time {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.71875rem;
color: var(--t-muted);
margin-top: 3px;
}
.upc-time .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.upc-time .mono { font-family: var(--font-mono); font-size: 0.65625rem; letter-spacing: .04em; color: var(--t-light); }
.cal-main {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
.cal-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
border-bottom: 1px solid var(--border-soft);
}
.cal-toolbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cal-month {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.375rem;
color: var(--t-base);
letter-spacing: -0.022em;
line-height: 1;
white-space: nowrap;
}
.cal-month .yr { color: var(--t-light); font-weight: 500; margin-left: 4px; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-nav-btn {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: calc(var(--radius) * 0.875);
color: var(--t-muted);
transition: background 160ms,color 160ms;
border: 1px solid var(--border);
background: var(--bg-card);
}
.cal-nav-btn:hover { background: var(--bg-hover); color: var(--t-base); border-color: var(--t-light); }
.cal-nav-btn svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; }
.cal-today-btn {
padding: 0 12px;
height: 30px;
font-size: 0.75rem;
font-weight: 600;
color: var(--t-base);
border: 1px solid var(--border);
border-radius: calc(var(--radius) * 0.875);
background: var(--bg-card);
transition: border-color 160ms,background 160ms;
}
.cal-today-btn:hover { background: var(--bg-hover); border-color: var(--t-light); }
.cal-views { display: flex; background: var(--bg-muted); border-radius: var(--radius); padding: 3px; gap: 2px; }
.cal-view-tab {
padding: 6px 12px;
font-size: 0.75rem;
font-weight: 600;
color: var(--t-muted);
border-radius: var(--radius-sm);
transition: background 160ms,color 160ms,box-shadow 160ms;
}
.cal-view-tab:hover { color: var(--t-base); }
.cal-view-tab.is-active { background: var(--bg-card); color: var(--t-base); box-shadow: var(--shadow-sm); }
.cal-toolbar-right { display: flex; align-items: center; gap: 8px; }
[data-fc], .fc {
--fc-classic-background: var(--bg-card);
--fc-classic-foreground: var(--t-base);
--fc-classic-muted: var(--bg-muted);
--fc-classic-muted-foreground: var(--t-muted);
--fc-classic-faint: var(--bg-hover);
--fc-classic-faint-foreground: var(--t-light);
--fc-classic-strong: var(--bg-hover);
--fc-classic-stronger: var(--bg-muted);
--fc-classic-strongest: var(--t-base);
--fc-classic-border: var(--border);
--fc-classic-strong-border: var(--border);
--fc-classic-border-style: solid;
--fc-classic-primary: var(--primary);
--fc-classic-primary-foreground: var(--t-inverse);
--fc-classic-ring-color: var(--primary-ring);
--fc-classic-today: var(--primary-soft);
--fc-classic-now: var(--danger);
--fc-classic-highlight: var(--primary-soft);
--fc-classic-button: var(--bg-muted);
--fc-classic-button-border: var(--border);
--fc-classic-button-foreground: var(--t-base);
--fc-classic-button-strong: var(--primary);
--fc-classic-button-strong-border: var(--primary);
--fc-classic-button-outline: var(--primary-ring);
--fc-classic-event: var(--primary-soft);
--fc-classic-event-contrast: var(--primary);
--fc-classic-background-event: var(--success);
font-family: var(--font-sans);
font-size: 0.8125rem;
height: 100%;
}
.fc-cat-work { --fc-classic-event: var(--primary-soft); --fc-classic-event-contrast: var(--primary); }
.fc-cat-team { --fc-classic-event: var(--success-soft); --fc-classic-event-contrast: var(--success); }
.fc-cat-personal { --fc-classic-event: var(--purple-soft); --fc-classic-event-contrast: var(--purple); }
.fc-cat-travel { --fc-classic-event: var(--info-soft); --fc-classic-event-contrast: var(--info); }
.fc-cat-finance { --fc-classic-event: var(--warning-soft); --fc-classic-event-contrast: var(--warning); }
.fc-cat-birthday { --fc-classic-event: var(--pink-soft); --fc-classic-event-contrast: var(--pink); }
.fc-dow {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--t-light);
}
/* --------------------------------------------------------------------------
* Command palette (⌘K / Ctrl+K)
* ------------------------------------------------------------------------ */
.palette-backdrop {
position: fixed;
inset: 0;
background: rgba(15,23,42,.55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
z-index: 200;
display: none;
align-items: flex-start;
justify-content: center;
padding: 12vh 16px 16px;
animation: palette-fade 160ms ease both;
}
body.has-palette-open .palette-backdrop { display: flex; }
@keyframes palette-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.palette-modal {
width: 100%;
max-width: 560px;
max-height: 70vh;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
overflow: hidden;
animation: palette-rise 200ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes palette-rise {
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.palette-input-row {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--border-soft);
}
.palette-icon { width: 18px; height: 18px; color: var(--t-muted); flex-shrink: 0; }
.palette-input {
flex: 1;
background: rgba(0,0,0,0);
border: 0;
outline: 0;
font-size: 0.9375rem;
color: var(--t-base);
font-family: inherit;
padding: 4px 0;
min-width: 0;
}
.palette-input::-moz-placeholder { color: var(--t-light); }
.palette-input::placeholder { color: var(--t-light); }
.palette-esc {
font-family: var(--font-mono);
font-size: 0.625rem;
padding: 3px 7px;
border-radius: calc(var(--radius) * 0.625);
background: var(--bg-muted);
color: var(--t-muted);
border: 1px solid var(--border);
flex-shrink: 0;
text-transform: lowercase;
letter-spacing: .04em;
}
.palette-results { flex: 1; overflow-y: auto; padding: 6px; }
.palette-results::-webkit-scrollbar { width: 4px; }
.palette-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-xs); }
.palette-result {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 12px;
align-items: center;
padding: 9px 12px;
border-radius: var(--radius);
cursor: pointer;
transition: background 120ms;
}
.palette-result:hover { background: var(--bg-hover); }
.palette-result.is-selected { background: var(--primary-soft); color: var(--primary); }
.palette-result-icon {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: var(--radius-sm);
background: var(--bg-muted);
color: var(--t-muted);
flex-shrink: 0;
}
.palette-result.is-selected .palette-result-icon {
background: color-mix(in oklab, var(--primary) 14%, transparent);
color: var(--primary);
}
.palette-result-icon svg { width: 14px; height: 14px; }
.palette-result-label {
font-size: 0.84375rem;
font-weight: 500;
color: var(--t-base);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.palette-result.is-selected .palette-result-label { color: var(--primary); font-weight: 600; }
.palette-result-section {
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--t-light);
letter-spacing: .04em;
text-transform: uppercase;
flex-shrink: 0;
}
.palette-result.is-selected .palette-result-section { color: var(--primary); opacity: .8; }
.palette-empty { padding: 32px 16px; text-align: center; color: var(--t-muted); font-size: 0.8125rem; }
.palette-foot {
display: flex;
gap: 18px;
padding: 10px 16px;
border-top: 1px solid var(--border-soft);
background: var(--bg-card);
font-size: 0.6875rem;
color: var(--t-muted);
}
.palette-foot kbd {
font-family: var(--font-mono);
font-size: 0.59375rem;
padding: 1.5px 5px;
border-radius: var(--radius-xs);
background: var(--bg-muted);
color: var(--t-muted);
border: 1px solid var(--border);
margin-right: 4px;
letter-spacing: .04em;
}
@media (max-width: 600px) {
.palette-backdrop { padding-top: 6vh; }
.palette-foot { flex-wrap: wrap; gap: 10px; font-size: 0.625rem; }
}
/* --------------------------------------------------------------------------
* Responsive — up to 1200px, 1100px (tablets), 720px (phones), 480px
* ------------------------------------------------------------------------ */
@media (max-width: 900px) {
.auth-shell { grid-template-columns: 1fr; }
.auth-aside { display: none; }
}
@media (max-width: 1200px) {
.sv-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.sv-radials { grid-template-columns: 1fr; gap: 18px; }
.mail-shell { grid-template-columns: 200px 1fr; height: auto; min-height: 0; }
.mail-reader { display: none; }
.cal-shell { grid-template-columns: 240px 1fr; }
}
@media (max-width: 1100px) {
.shell { grid-template-columns: var(--sidebar-rail-width) 1fr; }
.d-sidebar { padding: 20px 10px; overflow-y: auto; overflow-x: hidden; z-index: 20; }
.brand-text,
.brand-tag,
.menu-label,
.menu-link>span:not(.menu-badge),
.menu-link .menu-badge,
.workspace-text,
.workspace-chev,
.menu-link .chev {
display: none;
}
.brand { justify-content: center; padding: 0 0 18px; }
.menu-link { justify-content: center; padding: 10px; }
.menu-link.is-active::before { left: -10px; }
.workspace { justify-content: center; padding: 6px; }
.menu-sub {
position: fixed;
left: calc(var(--sidebar-rail-width) + 10px);
top: 0;
width: 200px;
max-height: 0;
margin-left: 0;
padding: 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
z-index: 50;
transition: opacity 180ms ease,visibility 180ms;
}
.menu-sub::before { display: none; }
.menu-group.is-open>.menu-sub { max-height: none; padding: 6px 0; opacity: 1; visibility: visible; }
.menu-sub a { padding: 8px 14px; font-size: 0.8125rem; border-radius: var(--radius-sm); margin: 0 6px; }
.menu-sub a:hover { padding-left: 14px; }
.chat-shell { grid-template-columns: 240px 1fr; }
}
@media (max-width: 720px) {
.shell { display: block; }
.d-sidebar {
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-drawer-width);
height: 100vh;
z-index: 100;
transform: translateX(-100%);
transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 240ms;
padding: 22px 16px 18px;
overflow-y: auto;
overscroll-behavior: contain;
}
.brand-text,
.brand-tag,
.menu-label,
.menu-link>span:not(.menu-badge),
.menu-link .menu-badge,
.workspace-text,
.workspace-chev,
.menu-sub,
.menu-link .chev {
display: revert;
}
.brand { justify-content: flex-start; padding: 4px 10px 20px; }
.menu-link { justify-content: flex-start; padding: 9px 12px; }
.workspace { justify-content: flex-start; padding: 6px 10px; }
.menu-group { position: static; }
.menu-sub {
position: relative;
left: auto;
top: auto;
width: auto;
margin-left: 20px;
padding: 0 0 0 14px;
background: rgba(0,0,0,0);
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
max-height: 0;
transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-sub::before { display: block; }
.menu-group.is-open>.menu-sub { max-height: none; padding: 4px 0 6px 14px; opacity: 1; visibility: visible; }
.menu-sub a { margin: 0; padding: 7px 10px; font-size: 0.78125rem; border-radius: var(--radius-sm); }
.menu-sub a:hover { padding-left: 13px; }
body.has-drawer-open .d-sidebar { transform: translateX(0); box-shadow: 0 12px 40px -8px rgba(0,0,0,.4); } /* shadow only while open: closed, it showed at the left edge */
body.has-drawer-open { overflow: hidden; }
.hamburger { display: inline-flex; }
.d-topbar { padding: 0 12px; }
.topbar-actions { gap: 2px; }
.topbar-start { gap: 2px; }
.cmd {
flex-shrink: 0;
padding: 0;
width: 36px;
height: 36px;
justify-content: center;
border-color: rgba(0,0,0,0);
background: none;
color: var(--t-muted);
}
.cmd:hover { border-color: rgba(0,0,0,0); box-shadow: none; background: var(--bg-hover); color: var(--t-base); }
.cmd span, .cmd .kbd { display: none; }
.cmd svg { width: 17px; height: 17px; stroke-width: 1.8; }
.avatar { margin-left: 2px; }
.content { padding: 20px 16px 16px; }
.d-footer { padding: 20px 16px; flex-direction: column; gap: 10px; align-items: flex-start; }
.hero { flex-direction: column; align-items: flex-start; gap: 20px; }
.hero-actions { flex-wrap: wrap; }
.sv-regions { grid-template-columns: 1fr; gap: 22px; }
.monthly-footer { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.wx-forecast { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wx-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
.wx-date { text-align: left; }
.sales-summary { flex-direction: column; align-items: flex-start; gap: 12px; }
.chart-canvas-wrap { min-height: 200px; }
.data-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
.data-toolbar-left, .data-toolbar-right { min-width: 0; flex-wrap: wrap; }
.data-foot { flex-direction: column; gap: 12px; align-items: flex-start; }
.mail-shell { grid-template-columns: 1fr; }
.mail-rail { display: none; }
.mail-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
.chat-shell { grid-template-columns: 1fr; height: auto; min-height: 0; overflow: visible; }
.chat-rail { display: flex; border-right: 0; border-bottom: 1px solid var(--border-soft); max-height: 260px; }
.chat-pane { overflow: visible; }
.chat-pane-head { padding: 12px 16px; }
.chat-thread { flex: 0 0 auto; overflow: visible; padding: 16px; }
.chat-composer { padding: 12px 16px 16px; }
.cal-shell { grid-template-columns: 1fr; }
.cal-toolbar { flex-wrap: wrap; gap: 10px; padding: 14px; }
.cal-toolbar-left { width: 100%; justify-content: space-between; }
.cal-views { order: 3; }
.compose-row { grid-template-columns: 1fr !important; gap: 6px !important; }
.compose-row-actions { justify-content: flex-start !important; }
.auth-main { padding: 24px 20px; }
}
@media (max-width: 480px) {
.monthly-footer { grid-template-columns: 1fr; }
.wx-forecast { grid-template-columns: repeat(2, 1fr); }
.form-actions { flex-direction: column; align-items: stretch; }
.form-actions .btn { width: 100%; justify-content: center; }
.form-actions .spacer { display: none; }
.social-row { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
* Sidebar collapsed to icons on desktop — toggled by the hamburger and kept
* across pages (, set by preferences.js before
* the first paint). Mirrors the tablet "rail" rules in app.css.
* ------------------------------------------------------------------------ */
@media (min-width: 1101px) {
.hamburger { display: inline-flex; }
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .shell { grid-template-columns: var(--sidebar-rail-width) 1fr; }
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .d-sidebar { padding: 20px 10px; overflow-x: hidden; z-index: 20; }
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .brand-text,
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .brand-tag,
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-label,
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-link > span:not(.menu-badge),
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-link .menu-badge,
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .workspace-text,
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .workspace-chev,
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-link .chev { display: none; }
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .brand { justify-content: center; padding: 0 0 18px; }
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-link { justify-content: center; padding: 10px; }
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-link.is-active::before { left: -10px; }
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .workspace { justify-content: center; padding: 6px; }
/* Submenus open as flyouts next to the icon (positioned by app.js). */
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-sub {
position: fixed;
left: calc(var(--sidebar-rail-width) + 10px);
top: 0;
width: 200px;
max-height: 0;
margin-left: 0;
padding: 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
z-index: 50;
transition: none; /* no fade-out of every submenu when the sidebar collapses */
}
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-sub::before { display: none; }
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-sub a { padding: 8px 14px; font-size: 0.8125rem; border-radius: var(--radius-sm); margin: 0 6px; }
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-sub a:hover { padding-left: 14px; }
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-group.is-flyout > .menu-sub {
max-height: calc(100vh - 16px);
overflow-y: auto;
padding: 6px 0;
opacity: 1;
visibility: visible;
transition: opacity 180ms ease, visibility 180ms;
}
/* groups inside the flyout open in place */
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-sub .menu-sub {
position: relative;
left: auto;
top: auto;
width: auto;
margin: 0 0 0 20px;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: inherit;
transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-sub .menu-sub::before { display: block; }
:root[data-sidebar="collapsed"]:not([data-layout="horizontal"]) .menu-sub .menu-group.is-open > .menu-sub { max-height: none; padding: 2px 0 4px; }
}
/* Tablet (sidebar always icons): flyouts open only on click (.is-flyout), so
the group of the current page doesn't pop open over the topbar on load.
Groups inside a flyout open in place. */
@media (min-width: 721px) and (max-width: 1100px) {
:root:not([data-layout="horizontal"]) .menu-section > .menu-group.is-open > .menu-sub { max-height: 0; padding: 0; opacity: 0; visibility: hidden; }
:root:not([data-layout="horizontal"]) .menu-section > .menu-group.is-flyout > .menu-sub { max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px 0; opacity: 1; visibility: visible; }
:root:not([data-layout="horizontal"]) .menu-sub .menu-sub {
position: relative;
left: auto;
top: auto;
width: auto;
margin: 0 0 0 20px;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: inherit;
transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
:root:not([data-layout="horizontal"]) .menu-sub .menu-sub::before { display: block; }
:root:not([data-layout="horizontal"]) .menu-sub .menu-group.is-open > .menu-sub { max-height: none; padding: 2px 0 4px; }
}
/* --------------------------------------------------------------------------
* Menu tree — groups inside groups, any depth, with the same markup in every
* layout. A group inside a submenu has a plain toggle: text + chevron.
* app.js marks the link to the current page and every group above it
* (.is-active, opened), and animates the height when a group is clicked.
* ------------------------------------------------------------------------ */
.menu-sub > .menu-group > [data-menu-toggle] > span { flex: 1; min-width: 0; }
.menu-sub > .menu-group > [data-menu-toggle] .chev { width: 11px; height: 11px; flex-shrink: 0; margin-left: 8px; transition: transform 200ms ease; }
.menu-sub > .menu-group.is-open > [data-menu-toggle] .chev { transform: rotate(90deg); }
.menu-sub .menu-sub { margin-left: 10px; } /* the guide line sits under the parent's text */
/* --------------------------------------------------------------------------
* Horizontal layout () — the same menu markup:
* desktop a bar under the topbar; section titles and badges hidden,
* groups as dropdowns (hover or click), and what doesn't fit goes
* into "More" (app.js); the brand moves to the topbar
* smaller the hamburger opens the menu as a panel under the topbar
* ------------------------------------------------------------------------ */
:root { --layout-max-width: 90%; } /* page width in the horizontal layout (100% = full width) */
.topbar-brand { display: none; align-items: center; gap: 10px; margin-right: 14px; flex-shrink: 0; }
.menu-more { display: none; }
:root[data-layout="horizontal"] .topbar-brand { display: flex; }
:root[data-layout="horizontal"] .d-sidebar > .brand,
:root[data-layout="horizontal"] .d-sidebar > .sidebar-footer,
:root[data-layout="horizontal"] .menu-label,
:root[data-layout="horizontal"] .menu-link .menu-badge { display: none; }
@media (min-width: 1101px) {
/* Topbar, menu bar, content and footer stacked (the bar is the sidebar itself) */
:root[data-layout="horizontal"] .shell { display: flex; flex-direction: column; }
:root[data-layout="horizontal"] .main { display: contents; }
:root[data-layout="horizontal"] .d-topbar { order: 1; }
:root[data-layout="horizontal"] .d-sidebar { order: 2; }
:root[data-layout="horizontal"] .content { order: 3; }
:root[data-layout="horizontal"] .d-footer { order: 4; }
:root[data-layout="horizontal"] .hamburger { display: none; }
:root[data-layout="horizontal"] .d-topbar,
:root[data-layout="horizontal"] .d-sidebar,
:root[data-layout="horizontal"] .content,
:root[data-layout="horizontal"] .d-footer { padding-inline: max(32px, calc((100% - var(--layout-max-width)) / 2)); }
:root[data-layout="horizontal"] .d-sidebar {
position: sticky;
top: var(--topbar-height);
z-index: 9;
height: auto;
flex-direction: row;
align-items: center;
gap: 2px;
padding-block: 6px;
border-right: 0;
border-bottom: 1px solid var(--border);
overflow-x: clip; /* closed dropdowns that stick out never make the page scroll sideways */
overflow-y: visible;
}
:root[data-layout="horizontal"] .menu-section { flex-direction: row; align-items: center; gap: 2px; flex-shrink: 0; }
:root[data-layout="horizontal"] .menu-link { gap: 8px; padding: 8px 12px; white-space: nowrap; }
:root[data-layout="horizontal"] .menu-link > span:not(.menu-badge) { flex: none; }
:root[data-layout="horizontal"] .menu-link.is-active { box-shadow: none; }
:root[data-layout="horizontal"] .menu-group { position: relative; flex-shrink: 0; }
:root[data-layout="horizontal"] .menu-group > .menu-link .chev { margin-left: 0; transform: rotate(90deg); }
:root[data-layout="horizontal"] .menu-more.has-items { display: block; }
/* Dropdowns */
:root[data-layout="horizontal"] .menu-sub {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 60;
min-width: 200px;
max-height: none;
margin: 0;
padding: 6px;
overflow: visible;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transition: opacity 150ms ease, visibility 150ms;
}
:root[data-layout="horizontal"] .menu-sub::before { display: none; }
/* invisible bridge over the gap, so the pointer can travel to the dropdown */
:root[data-layout="horizontal"] .menu-sub::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; }
:root[data-layout="horizontal"] .menu-group.is-open > .menu-sub { max-height: none; padding: 6px; }
:root[data-layout="horizontal"] .menu-group.is-flyout > .menu-sub { opacity: 1; visibility: visible; }
:root[data-layout="horizontal"] .menu-group.is-flip > .menu-sub { left: auto; right: 0; }
:root[data-layout="horizontal"] .menu-sub a { padding: 8px 10px; white-space: nowrap; }
:root[data-layout="horizontal"] .menu-sub a:hover { padding-left: 10px; }
/* Groups inside a dropdown (any depth, and whatever moved into "More") open to the side */
:root[data-layout="horizontal"] .menu-sub .menu-sub { top: -7px; left: calc(100% + 13px); } /* past the list's padding and border: a 6px gap */
:root[data-layout="horizontal"] .menu-sub .menu-group.is-flip > .menu-sub { left: auto; right: calc(100% + 13px); }
:root[data-layout="horizontal"] .menu-sub .menu-sub::after { top: 0; bottom: 0; left: auto; right: 100%; width: 14px; height: auto; }
:root[data-layout="horizontal"] .menu-sub .menu-group.is-flip > .menu-sub::after { right: auto; left: 100%; }
:root[data-layout="horizontal"] .menu-sub .menu-group > [data-menu-toggle] .chev { margin-left: auto; transform: none; }
/* "More": the moved items as a list */
:root[data-layout="horizontal"] .menu-more > .menu-sub { left: auto; right: 0; }
:root[data-layout="horizontal"] .menu-more .menu-sub > .menu-link,
:root[data-layout="horizontal"] .menu-more .menu-sub > .menu-group > .menu-link { gap: 10px; padding: 8px 10px; font-size: 0.8125rem; }
}
/* With a mouse, dropdowns also open on hover (touch and keyboard use the click). */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
:root[data-layout="horizontal"] .menu-group:hover > .menu-sub { opacity: 1; visibility: visible; }
}
@media (max-width: 1100px) {
/* Smaller screens: the hamburger opens the menu as a panel under the topbar */
:root[data-layout="horizontal"] .shell { display: block; }
:root[data-layout="horizontal"] .hamburger { display: inline-flex; }
:root[data-layout="horizontal"] .d-sidebar {
display: none;
position: fixed;
top: var(--topbar-height);
left: 0;
right: 0;
z-index: 100;
width: auto;
height: auto;
max-height: calc(100vh - var(--topbar-height));
padding: 10px 16px 16px;
gap: 14px;
border-right: 0;
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-lg);
transform: none;
transition: none;
overflow-x: hidden;
overflow-y: auto;
}
:root[data-layout="horizontal"] body.has-drawer-open { overflow: visible; }
:root[data-layout="horizontal"] body.has-drawer-open .d-sidebar { display: flex; }
:root[data-layout="horizontal"] .drawer-backdrop { display: none; }
/* the vertical list, also on tablet (undoes the icon rail) */
:root[data-layout="horizontal"] .menu-link { justify-content: flex-start; padding: 9px 12px; }
:root[data-layout="horizontal"] .menu-link > span:not(.menu-badge) { display: block; }
:root[data-layout="horizontal"] .menu-link .chev { display: block; }
:root[data-layout="horizontal"] .menu-group { position: static; }
:root[data-layout="horizontal"] .menu-sub {
position: relative; /* holds its guide line (::before) */
left: auto;
top: auto;
width: auto;
max-height: 0;
margin-left: 20px;
padding: 0 0 0 14px;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
:root[data-layout="horizontal"] .menu-sub::before { display: block; }
:root[data-layout="horizontal"] .menu-group.is-open > .menu-sub { max-height: none; padding: 4px 0 6px 14px; opacity: 1; visibility: visible; }
:root[data-layout="horizontal"] .menu-sub .menu-sub { margin-left: 10px; }
:root[data-layout="horizontal"] .menu-sub a { margin: 0; padding: 7px 10px; font-size: 0.78125rem; }
:root[data-layout="horizontal"] .menu-sub a:hover { padding-left: 13px; }
}
@media (max-width: 720px) {
/* Phones: the logo without the name, like Velzon's small logo */
:root[data-layout="horizontal"] .topbar-brand { margin-right: 4px; }
:root[data-layout="horizontal"] .topbar-brand .brand-name { display: none; }
}
/* --------------------------------------------------------------------------
* Topbar user: name beside the avatar (hidden on mobile); both open the
* account menu.
* ------------------------------------------------------------------------ */
.topbar-user {
display: flex;
align-items: center;
gap: 10px;
margin-left: 6px;
padding: 3px 3px 3px 12px;
border-radius: 999px;
cursor: pointer;
transition: background 180ms;
}
.topbar-user:hover,
.topbar-user.show { background: var(--bg-hover); }
.topbar-user .avatar { margin-left: 0; }
.topbar-user-name {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.8125rem;
font-weight: 600;
color: var(--t-base);
}
@media (max-width: 720px) {
.topbar-user { margin-left: 2px; padding: 0; }
.topbar-user:hover,
.topbar-user.show { background: none; }
.topbar-user-name { display: none; }
}
/* --------------------------------------------------------------------------
* Form helpers (forms.js): show/hide button on passwords, calendar/clock icon
* on date & time fields. The icon sits inside the field, on the right.
* ------------------------------------------------------------------------ */
.input-wrap { position: relative; display: block; }
.input-icon > .ico { z-index: 1; } /* the leading icon stays above a wrapped field */
.input-wrap.has-action > .form-control,
.input-wrap.has-adorn > .form-control { padding-right: calc(var(--control-padding-x) + 1.5rem); }
.input-action,
.input-adorn {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: var(--radius-sm);
color: var(--t-light);
}
.input-adorn { pointer-events: none; } /* clicks reach the field, which opens the picker */
.input-action { transition: color 160ms, background 160ms; }
.input-action:hover { color: var(--t-base); background: var(--bg-hover); }
.input-action:focus-visible { outline: 0; color: var(--t-base); box-shadow: var(--focus-ring); }
.input-action svg,
.input-adorn svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 1.8; fill: none; }
.input-action [data-icon="hide"],
.input-action[aria-pressed="true"] [data-icon="show"] { display: none; }
.input-action[aria-pressed="true"] [data-icon="hide"] { display: block; }
.form-control:disabled ~ .input-action { pointer-events: none; opacity: .5; }
input::-ms-reveal,
input::-ms-clear { display: none; } /* Edge's own eye / clear buttons */
/* Field stays highlighted while its picker is open. */
.form-control.flatpickr-input.active { border-color: var(--primary); box-shadow: var(--focus-ring); }
/* --------------------------------------------------------------------------
* Select2 — same box, sizes and states as .input / .select, so a form row
* lines up whichever control it uses.
* ------------------------------------------------------------------------ */
.select2-container { font-family: inherit; font-size: var(--control-font-size); }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
background-color: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--t-base);
transition: border-color 180ms, box-shadow 180ms, background 180ms;
}
.select2-container .select2-selection--single {
height: auto;
padding: var(--control-padding-y) 32px var(--control-padding-y) var(--control-padding-x);
/* Same chevron as .select in app.css */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
padding: 0;
color: var(--t-base);
line-height: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder { color: var(--t-light); }
.select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
.select2-container--default .select2-selection--single .select2-selection__clear {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
float: none;
height: auto;
margin: 0;
padding: 0 4px;
color: var(--t-light);
font-size: 1.125em;
line-height: 1;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--danger); }
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
border-color: var(--primary);
box-shadow: var(--focus-ring);
outline: 0;
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-radius: var(--radius); }
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
background-color: var(--bg-muted);
cursor: not-allowed;
}
.select2-container--default.select2-container--disabled .select2-selection__rendered { color: var(--t-light); }
select.is-invalid + .select2-container--default .select2-selection { border-color: var(--danger); }
select.is-invalid + .select2-container--default.select2-container--focus .select2-selection,
select.is-invalid + .select2-container--default.select2-container--open .select2-selection { box-shadow: 0 0 0 3px var(--danger-soft); }
/* Multiple: chips inside a box that is exactly .input-high when empty */
.select2-container .select2-selection--multiple { min-height: 0; }
.select2-container--default .select2-selection--multiple {
padding: 3px 4px 3px calc(var(--control-padding-x) - 4px);
cursor: text;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered { display: inline; margin: 0; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
margin: 3px 4px 3px 0;
padding: 0 8px 0 22px;
border: 0;
border-radius: var(--radius-xs);
background: var(--primary-soft);
color: var(--primary);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.75;
vertical-align: middle;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display { padding: 0; cursor: default; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
top: 50%;
transform: translateY(-50%);
height: auto;
padding: 0 6px;
border: 0;
background: none;
color: var(--primary);
font-size: 1.1em;
line-height: 1;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus { background: none; color: var(--danger); outline: 0; }
.select2-container .select2-search--inline .select2-search__field {
/* one line high (it's a