/* ===== login gate ===== */
html.app-locked, html.app-locked body { overflow: hidden; height: 100%; }
.login-gate {
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
background:
radial-gradient(120% 100% at 50% 0%, rgba(201,168,76,0.10), transparent 60%),
var(--bg, #14110c);
}
.login-card {
width: 100%; max-width: 380px;
background: var(--panel, #1b1812);
border: 1px solid var(--line, rgba(201,168,76,0.18));
border-radius: var(--radius-lg, 18px);
box-shadow: var(--shadow-frame, 0 40px 90px -30px rgba(0,0,0,0.7));
padding: 2.6rem 2.1rem 2.3rem;
text-align: center;
animation: login-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes login-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.login-logo { width: 56px; height: 56px; object-fit: contain; margin: 0 auto 1rem; display: block; opacity: 0.95; }
.login-title {
font-family: var(--font-display, "Times New Roman", serif);
font-size: 1.35rem; font-weight: 700; letter-spacing: 0.06em;
color: var(--fg1, #f5edd8); margin: 0 0 0.2rem;
}
.login-sub {
font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--fg3, #8a7f6a); margin: 0 0 1.8rem;
}
.login-form { display: flex; flex-direction: column; text-align: left; }
.login-label {
font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--fg3, #8a7f6a); margin: 0 0 0.4rem;
}
.login-input {
background: var(--panel-2, #211d16);
border: 1px solid var(--line, rgba(201,168,76,0.18));
border-radius: var(--radius, 10px);
padding: 0.7rem 0.85rem; font-size: 0.95rem;
color: var(--fg1, #f5edd8); margin-bottom: 1.05rem;
transition: border-color 0.18s, box-shadow 0.18s;
}
.login-input:focus {
outline: none;
border-color: var(--gold, #c9a84c);
box-shadow: 0 0 0 3px rgba(201,168,76,0.16);
}
.login-error {
margin: -0.4rem 0 0.9rem; font-size: 0.78rem;
color: var(--red, #c0392b); font-weight: 600;
}
.login-btn {
margin-top: 0.3rem; padding: 0.8rem 1rem;
font-family: var(--font-ui, sans-serif);
font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--bg-deep, #14110c);
background: var(--gold, #c9a84c);
border: 1px solid var(--gold, #c9a84c);
border-radius: var(--radius, 10px);
cursor: pointer;
transition: filter 0.18s, transform 0.18s;
}
.login-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.login-btn:active { transform: translateY(0); }
.login-btn:disabled { opacity: 0.7; cursor: default; transform: none; }
.login-forgot {
margin: 0.9rem auto 0; padding: 0.3rem;
background: none; border: none; cursor: pointer;
font-size: 0.78rem; color: var(--fg3, #8a7f6a);
text-decoration: underline; text-underline-offset: 3px;
transition: color 0.18s;
}
.login-forgot:hover { color: var(--gold, #c9a84c); }
.login-recovery-note {
font-size: 0.82rem; line-height: 1.5; color: var(--fg2, #c9bfa6);
text-align: center; margin: 0 0 1.2rem;
}
.login-recovery-note strong { color: var(--fg1, #f5edd8); }
#recovery-step2 { margin-top: 1.2rem; }
[data-theme="light"] .login-btn,
[data-theme="crimson"] .login-btn { color: #fff; }
[data-theme="crimson"] .login-btn { background: #C0392B; border-color: #C0392B; }
[data-theme="crimson"] .login-input:focus { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,0.16); }
/* topbar sign-out button */
.topbar-signout {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; margin-left: 0.5rem;
background: transparent;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--fg3); cursor: pointer;
transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.topbar-signout:hover { color: var(--red); border-color: var(--red); }
.topbar-signout svg { width: 18px; height: 18px; }
/* ===== theme.css ===== */
/* ============================================================
FILM WEDDING DAYS — Studio OS
theme.css · fonts, tokens, themes, base + typography
Cinematic · Premium · Timeless
============================================================ */
/* ---------- BRAND FONTS ---------- */
@font-face {
font-family: "Trajan Pro";
src: url("fonts/TrajanPro-Regular.ttf") format("truetype");
font-weight: 400; font-display: swap;
}
@font-face {
font-family: "Trajan Pro";
src: url("fonts/TrajanPro-Bold.otf") format("opentype");
font-weight: 700; font-display: swap;
}
@font-face {
font-family: "Times Ten";
src: url("fonts/TimesTenBold.ttf") format("truetype");
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Times Ten";
src: url("fonts/TimesTenItalic.ttf") format("truetype");
font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
font-family: "Quant";
src: url("fonts/Quant-Regular.ttf") format("truetype");
font-weight: 400; font-display: swap;
}
/* ============================================================
TOKENS — default = Studio dark
============================================================ */
:root,
[data-theme="dark"] {
/* surfaces */
--bg: #121212;
--bg-deep: #0c0c0c;
--panel: #1a1a1a;
--panel-2: #211f1b;
--panel-hi: #262320;
--sidebar-bg: #0e0e0e;
/* hairlines */
--line: rgba(201, 168, 76, 0.18);
--line-strong: rgba(201, 168, 76, 0.42);
--line-soft: rgba(245, 237, 216, 0.09);
/* text */
--fg1: #F5EDD8;
--fg2: #C7C0AE;
--fg3: #8C867A;
/* gold luxury */
--gold: #C9A84C;
--gold-bright: #E0C879;
--gold-deep: #7A5C1E;
--gold-soft: rgba(201, 168, 76, 0.14);
/* passion */
--crimson: #8F2020;
--crimson-bright: #C56A60;
/* status (legacy hooks — tuned for dark legibility) */
--green: #74B17E;
--red: #D67B6F;
--warm: #8C867A;
--blush: rgba(245, 237, 216, 0.10);
--cream: #15140f;
--gold-light: #E0C879;
--gold-dark: #7A5C1E;
--wine: #C56A60;
--charcoal: #F5EDD8;
--ink: #F5EDD8;
/* alerts (warning / overdue) */
--alert-bg: rgba(143, 32, 32, 0.16);
--alert-border: rgba(197, 106, 96, 0.45);
--alert-text: #E6A99F;
/* effects */
--shadow-soft: 0 16px 44px -22px rgba(0, 0, 0, 0.85);
--shadow-frame: 0 28px 70px -26px rgba(0, 0, 0, 0.9);
--glow-gold: 0 0 0 1px rgba(201, 168, 76, 0.35), 0 10px 34px -12px rgba(201, 168, 76, 0.22);
--grad-gold: linear-gradient(135deg, #7A5C1E 0%, #C9A84C 45%, #F5EDD8 60%, #C9A84C 78%, #7A5C1E 100%);
/* type */
--font-display: "Trajan Pro", Georgia, serif;
--font-feature: "Quant", "Times Ten", Georgia, serif;
--font-body: "Times Ten", Georgia, "Times New Roman", serif;
--font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display-fallback: var(--font-ui);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--dur: 380ms;
--radius: 3px;
--radius-lg: 4px;
color-scheme: dark;
}
/* deep crimson luxury */
[data-theme="crimson"] {
/* surfaces — ivory cream content, deep crimson sidebar */
--bg: #faf4f0;
--bg-deep: #f2e8e0;
--panel: #ffffff;
--panel-2: #fdf7f3;
--panel-hi: #fef9f6;
--sidebar-bg: #7B0D1E;
/* hairlines */
--line: rgba(123, 13, 30, 0.20);
--line-strong: rgba(123, 13, 30, 0.42);
--line-soft: rgba(34, 10, 14, 0.09);
/* text */
--fg1: #0f0405;
--fg2: #2e0e18;
--fg3: #5a3640;
/* warm antique gold — charts, accents, active states */
--gold: #A8722A;
--gold-bright: #C8922A;
--gold-deep: #7A5018;
--gold-soft: rgba(168, 114, 42, 0.12);
/* passion */
--crimson: #7B0D1E;
--crimson-bright: #C0392B;
/* status */
--green: #3f6b4d;
--red: #c0392b;
--warm: #8a7060;
--blush: #fde8e5;
--cream: #fdf7f3;
--gold-light: #C8922A;
--gold-dark: #7A5018;
--wine: #7B0D1E;
--charcoal: #2a0a0e;
--ink: #2a0a0e;
/* alerts */
--alert-bg: rgba(192, 57, 43, 0.10);
--alert-border: rgba(192, 57, 43, 0.40);
--alert-text: #7B0D1E;
/* effects */
--shadow-soft: 0 16px 44px -22px rgba(60, 10, 18, 0.25);
--shadow-frame: 0 28px 70px -26px rgba(60, 10, 18, 0.30);
--glow-gold: 0 0 0 1px rgba(168, 114, 42, 0.35), 0 10px 34px -12px rgba(168, 114, 42, 0.22);
--grad-gold: linear-gradient(135deg, #7A5018 0%, #A8722A 45%, #F5EDD8 60%, #A8722A 78%, #7A5018 100%);
color-scheme: light;
}
[data-theme="crimson"] body::before { opacity: 0.3; }
[data-theme="crimson"] .sidebar { color: #faf4f0; }
[data-theme="crimson"] .bottom-nav a { color: rgba(250, 244, 240, 0.6); }
[data-theme="crimson"] .bottom-nav a.active { color: #faf4f0; }
[data-theme="crimson"] .bottom-nav a svg { color: inherit; }
[data-theme="crimson"] .bottom-nav { border-top-color: rgba(250, 244, 240, 0.15); }
[data-theme="crimson"] .theme-opt.active { background: #C0392B !important; color: #fff; }
[data-theme="crimson"] .fab { color: #fff; background: #C0392B; }
[data-theme="crimson"] .btn-primary { background: #C0392B; border-color: #C0392B; color: #fff; }
[data-theme="crimson"] .scope-toggle button.active,
[data-theme="crimson"] .cal-view-btns button.active,
[data-theme="crimson"] .month-tab.active,
[data-theme="crimson"] .export-scope-tab.active { background: #C0392B !important; border-color: #C0392B !important; }
[data-theme="crimson"] input,
[data-theme="crimson"] select,
[data-theme="crimson"] textarea { background: #fdf7f3; }
[data-theme="crimson"] .scope-toggle button.active,
[data-theme="crimson"] .cal-view-btns button.active,
[data-theme="crimson"] .export-scope-tab.active { color: #fff; }
[data-theme="crimson"] .month-tab.active { color: #fff; }
[data-theme="crimson"] .theme-tile.active .theme-tile-check { color: #fff; }
[data-theme="crimson"] .osc-stage.current { color: #fff; }
/* Crimson theme — single chart bars use crimson red, dual bars use gold */
[data-theme="crimson"] .chart-col .bar { background: #C0392B !important; }
/* Year picker */
.year-picker { padding: 0.85rem 1.1rem; margin-bottom: 1.25rem; }
.year-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.year-pill {
font-family: var(--font-ui);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
padding: 0.4rem 1rem;
border-radius: 999px;
border: 1px solid var(--line);
background: transparent;
color: var(--fg2);
cursor: pointer;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.year-pill:hover { color: var(--fg1); border-color: var(--gold); }
.year-pill.active { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); }
[data-theme="light"] .year-pill.active { color: #fff; }
[data-theme="crimson"] .year-pill.active { background: #C0392B; border-color: #C0392B; color: #fff; }
/* Dual chart value labels */
.dual-labels {
display: flex;
gap: 2px;
justify-content: center;
margin-bottom: 2px;
min-height: 14px;
}
.dual-label-rev, .dual-label-exp {
font-size: 0.52rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
}
.dual-label-rev { color: var(--gold); }
.dual-label-exp { color: var(--fg3); }
/* deepest cinematic black */
[data-theme="black"] {
--bg: #080808;
--bg-deep: #040404;
--panel: #131313;
--panel-2: #181613;
--panel-hi: #1d1a16;
--sidebar-bg: #050505;
--line: rgba(201, 168, 76, 0.16);
--line-soft: rgba(245, 237, 216, 0.07);
color-scheme: dark;
}
/* warm ivory premium */
[data-theme="light"] {
--bg: #f0e9db;
--bg-deep: #e9e1cf;
--panel: #fbf8f0;
--panel-2: #f6f0e2;
--panel-hi: #f9f3e7;
--sidebar-bg: #1a1a1a; /* sidebar stays dark/cinematic even in light mode */
--line: rgba(122, 92, 30, 0.26);
--line-strong: rgba(122, 92, 30, 0.5);
--line-soft: rgba(34, 29, 22, 0.10);
--fg1: #241d12;
--fg2: #5b4a36;
--fg3: #8a7a62;
--gold: #936c1f;
--gold-bright: #b0863a;
--gold-deep: #6f521a;
--gold-soft: rgba(147, 108, 31, 0.12);
--green: #3f6b4d;
--red: #a73a30;
--warm: #8a7a62;
--blush: #e3d9c6;
--cream: #efe7d8;
--gold-light: #b0863a;
--gold-dark: #6f521a;
--wine: #6c2f39;
--charcoal: #241d12;
--ink: #241d12;
--alert-bg: #f6e6e1;
--alert-border: #d7a89d;
--alert-text: #8f2020;
--shadow-soft: 0 14px 38px -22px rgba(60, 45, 20, 0.4);
--shadow-frame: 0 26px 60px -28px rgba(60, 45, 20, 0.45);
--glow-gold: 0 0 0 1px rgba(147, 108, 31, 0.3), 0 10px 30px -14px rgba(147, 108, 31, 0.25);
color-scheme: light;
}
/* ============================================================
RESET + BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
margin: 0;
min-height: 100vh;
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.5;
color: var(--fg1);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "tnum" 1, "ss01" 1;
}
/* faint film-grain / vignette on the canvas */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(120% 90% at 50% -10%, rgba(201, 168, 76, 0.05), transparent 60%),
radial-gradient(100% 100% at 100% 0%, rgba(143, 32, 32, 0.05), transparent 55%);
}
[data-theme="light"] body::before { opacity: 0.5; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(201, 168, 76, 0.28); color: var(--fg1); }
/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
background: var(--line-strong);
border-radius: 999px;
border: 3px solid transparent;
background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--gold); background-clip: content-box; }
/* ============================================================
TYPOGRAPHY PRIMITIVES
============================================================ */
.eyebrow,
.fwd-eyebrow {
font-family: var(--font-display);
font-weight: 400;
font-size: 0.7rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold);
}
h1, h2, h3, h4 { margin: 0; color: var(--fg1); }
.meta { color: var(--fg3); font-size: 0.85rem; }
.fwd-rule { display: block; height: 1px; background: var(--line-strong); border: 0; }
/* numerals in display serif */
.num { font-family: var(--font-feature); font-feature-settings: "tnum" 1; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
/* ===== app.css ===== */
/* ============================================================
FILM WEDDING DAYS — Studio OS
app.css · shell chrome + shared components
============================================================ */
/* ============================================================
APP SHELL
============================================================ */
.app-shell { position: relative; z-index: 1; }
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 256px;
display: flex;
flex-direction: column;
padding: 1.5rem 1.1rem 1.25rem;
background: var(--sidebar-bg);
border-right: 1px solid var(--line);
z-index: 60;
}
[data-theme="light"] .sidebar { color: #F5EDD8; }
/* brand lockup */
.brand {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.25rem 0.4rem 1.4rem;
margin-bottom: 0.4rem;
border-bottom: 1px solid var(--line-soft);
}
.brand-logo { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.brand-text { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.brand-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #F5EDD8;
line-height: 1.05;
}
.brand-tagline {
font-size: 0.62rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold);
}
/* nav */
.main-nav { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.8rem; }
.main-nav a {
position: relative;
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.62rem 0.7rem;
border-radius: var(--radius);
color: #b9b2a3;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.main-nav a .nav-icon { display: inline-flex; }
.main-nav a svg { width: 19px; height: 19px; opacity: 0.85; }
.main-nav a::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 2px; height: 0;
background: var(--gold);
transform: translateY(-50%);
transition: height var(--dur) var(--ease);
}
.main-nav a:hover { color: #F5EDD8; background: rgba(201,168,76,0.06); }
.main-nav a.active {
color: var(--gold);
background: linear-gradient(90deg, rgba(201,168,76,0.12), rgba(201,168,76,0.02));
}
.main-nav a.active::before { height: 60%; }
.main-nav a.active svg { opacity: 1; }
.sidebar-foot { margin-top: auto; padding-top: 1rem; }
.sidebar-directors .fwd-rule { margin-bottom: 0.9rem; }
.directors-line {
margin: 0 0 0.35rem;
font-family: var(--font-body);
font-size: 0.92rem;
color: #d8d1c0;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.directors-line span {
font-family: var(--font-ui);
font-size: 0.58rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
}
/* content column */
.content {
margin-left: 256px;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* topbar */
.topbar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
min-height: 58px;
padding: 0.6rem 2rem;
background: color-mix(in srgb, var(--bg) 82%, transparent);
border-bottom: 1px solid var(--line-soft);
backdrop-filter: blur(12px);
}
.topbar-brand { display: none; align-items: center; gap: 0.55rem; margin-right: auto; }
.topbar-logo { width: 28px; height: 28px; object-fit: contain; }
/* Ivory (light) & Crimson themes have a light bg — white logo is invisible, so invert to black (keeps transparency) */
[data-theme="light"] .topbar-logo,
[data-theme="crimson"] .topbar-logo { filter: invert(1); }
.topbar-brand span {
font-family: var(--font-display);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg1);
}
.topbar-right { display: flex; align-items: center; gap: 0.75rem; }
.topbar-gear {
display: inline-flex; align-items: center; justify-content: center;
width: 2.15rem; height: 2.15rem;
color: var(--fg3);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: all var(--dur) var(--ease);
}
.topbar-gear svg { width: 18px; height: 18px; }
.topbar-gear:hover { color: var(--gold); border-color: var(--gold); transform: rotate(45deg); }
/* single-button theme cycler */
.theme-cycle {
display: inline-flex; align-items: center; justify-content: center;
width: 2.15rem; height: 2.15rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
cursor: pointer;
transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.theme-cycle:hover { border-color: var(--gold); }
.theme-cycle:active { transform: scale(0.92); }
.theme-cycle .theme-dot {
display: block; width: 14px; height: 14px; border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(128,128,128,0.5);
transition: background var(--dur) var(--ease);
}
/* theme segmented control */
.theme-switch {
display: inline-flex;
padding: 3px;
gap: 2px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--panel);
}
.theme-opt {
font-family: var(--font-ui);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg3);
background: transparent;
border: 0;
padding: 0.34rem 0.7rem;
border-radius: 2px;
cursor: pointer;
transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.theme-opt:hover { color: var(--fg1); }
.theme-opt.active { color: var(--bg-deep); background: var(--gold); }
[data-theme="light"] .theme-opt.active { color: #fff; }
/* Symbol-only theme switcher: each option is a colour swatch dot, not text. */
.theme-opt:has(.theme-dot) { padding: 0.25rem; line-height: 0; background: transparent !important; }
.theme-dot {
display: block; width: 12px; height: 12px; border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(128,128,128,0.45);
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.theme-opt:hover .theme-dot { transform: scale(1.08); }
.theme-opt.active .theme-dot {
box-shadow: inset 0 0 0 1px rgba(128,128,128,0.45), 0 0 0 2px var(--panel), 0 0 0 4px var(--gold);
}
[data-theme="crimson"] .theme-opt.active:has(.theme-dot) { background: transparent !important; }
/* main */
.main { flex: 1; padding: 2rem 2rem 4rem; max-width: 1440px; width: 100%; margin: 0 auto; }
/* footer */
.site-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
padding: 1rem 2rem;
border-top: 1px solid var(--line-soft);
color: var(--fg3);
font-size: 0.78rem;
}
.footer-note { letter-spacing: 0.04em; }
.footer-actions { display: flex; align-items: center; gap: 0.5rem; }
.footer-actions button {
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--fg2);
background: transparent;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.4rem 0.75rem;
cursor: pointer;
transition: all var(--dur) var(--ease);
}
.footer-actions button:hover { color: var(--gold); border-color: var(--line-strong); }
.footer-message { color: var(--gold); font-style: italic; font-family: var(--font-body); }
/* bottom nav (mobile) */
.bottom-nav { display: none; }
/* FAB */
.fab {
position: fixed;
right: 1.5rem; bottom: 1.5rem;
z-index: 55;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.7rem 1.15rem;
font-family: var(--font-ui);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bg-deep);
background: var(--gold);
border: 1px solid var(--gold-bright);
border-radius: var(--radius);
cursor: pointer;
box-shadow: var(--glow-gold), var(--shadow-soft);
transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fab .fab-plus { font-size: 1.1rem; line-height: 0; margin-top: -1px; }
.fab:hover { background: var(--gold-bright); transform: translateY(-2px); }
[data-theme="light"] .fab { color: #fff; }
/* ============================================================
PAGE HEADER
============================================================ */
.page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.75rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--line);
}
.page-header h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.05;
color: var(--fg1);
}
.page-header > div > p,
.page-header p:not(.meta) {
margin: 0.5rem 0 0;
font-family: var(--font-body);
font-style: italic;
font-size: 1rem;
color: var(--fg3);
}
/* ============================================================
BUTTONS
============================================================ */
.btn-primary {
font-family: var(--font-ui);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bg-deep);
background: var(--gold);
border: 1px solid var(--gold-bright);
border-radius: var(--radius);
padding: 0.62rem 1.15rem;
cursor: pointer;
transition: all var(--dur) var(--ease);
}
.btn-primary:hover { background: var(--gold-bright); box-shadow: var(--glow-gold); }
[data-theme="light"] .btn-primary { color: #fff; }
.btn-secondary {
font-family: var(--font-ui);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--fg1);
background: transparent;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 0.58rem 1rem;
cursor: pointer;
transition: all var(--dur) var(--ease);
}
.btn-secondary:hover { color: var(--gold); border-color: var(--gold); }
.btn-sm { padding: 0.34rem 0.7rem; font-size: 0.72rem; }
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem; height: 2rem;
color: var(--fg3);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius);
cursor: pointer;
font-size: 0.95rem;
transition: all var(--dur) var(--ease);
}
.btn-icon:hover { color: var(--gold); border-color: var(--line); }
.text-link {
font-family: var(--font-ui);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--gold);
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
}
.text-link:hover { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.link-gold { color: var(--gold); transition: color var(--dur) var(--ease); }
.link-gold:hover { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
/* small table action buttons */
.table-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.btn-view, .btn-edit, .btn-delete {
font-family: var(--font-ui);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--fg2);
background: transparent;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.32rem 0.62rem;
cursor: pointer;
transition: all var(--dur) var(--ease);
}
.btn-view:hover { color: var(--gold); border-color: var(--gold); }
.btn-edit:hover { color: var(--fg1); border-color: var(--line-strong); }
.btn-delete:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
/* ============================================================
BADGES
============================================================ */
.badge {
--badge: var(--gold);
display: inline-flex;
align-items: center;
gap: 0.3em;
font-family: var(--font-ui);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
white-space: nowrap;
padding: 0.24em 0.62em;
border-radius: 2px;
color: color-mix(in srgb, var(--badge) 60%, var(--fg1));
background: color-mix(in srgb, var(--badge) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--badge) 36%, transparent);
}
.badge-outline { background: transparent; }
/* Lead conversion-score pill */
.lead-score {
--badge: #0ea5e9;
display: inline-flex;
align-items: center;
font-family: var(--font-ui);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.04em;
white-space: nowrap;
padding: 0.2em 0.55em;
border-radius: 999px;
color: color-mix(in srgb, var(--badge) 62%, var(--fg1));
background: color-mix(in srgb, var(--badge) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--badge) 38%, transparent);
}
/* WhatsApp draft action button (deep-link, opens pre-filled message) */
.btn-wa {
display: inline-flex;
align-items: center;
gap: 0.3em;
font-family: var(--font-ui);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
color: #128c4b;
background: color-mix(in srgb, #25d366 14%, transparent);
border: 1px solid color-mix(in srgb, #25d366 45%, transparent);
border-radius: var(--radius);
padding: 0.32rem 0.62rem;
cursor: pointer;
transition: all var(--dur) var(--ease);
}
.btn-wa::before { content: "🟢"; font-size: 0.85em; }
.btn-wa:hover { background: color-mix(in srgb, #25d366 26%, transparent); border-color: #25d366; }
.btn-wa.btn-sm { padding: 0.28rem 0.6rem; font-size: 0.68rem; }
/* ============================================================
DAILY BRIEFING
============================================================ */
.brief-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
gap: 0.7rem;
margin-bottom: 1.4rem;
}
.brief-stat {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.8rem 0.9rem;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
text-decoration: none;
transition: all var(--dur) var(--ease);
}
.brief-stat:hover { border-color: var(--gold); transform: translateY(-1px); }
.brief-stat .num { font-family: var(--font-display, var(--font-ui)); font-size: 1.5rem; font-weight: 700; color: var(--fg1); line-height: 1.1; }
.brief-stat .lbl { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); }
.brief-stat.alert { border-color: color-mix(in srgb, var(--red) 45%, transparent); background: var(--alert-bg); }
.brief-stat.alert .num { color: var(--red); }
.brief-action { border-left: 3px solid color-mix(in srgb, var(--red) 55%, transparent); }
.brief-list { list-style: none; margin: 0; padding: 0; }
.brief-list li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0;
border-bottom: 1px solid var(--line);
}
.brief-list li:last-child { border-bottom: none; }
.brief-list .name { font-weight: 600; color: var(--fg1); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.brief-list .meta { font-size: 0.8rem; color: var(--fg3); }
.brief-crew { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: 0.8rem; color: var(--fg3); }
/* ============================================================
CARDS
============================================================ */
.card {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
.section-card { margin-bottom: 1.5rem; }
.section-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.05rem 1.35rem;
border-bottom: 1px solid var(--line-soft);
}
.section-card-header h2 {
font-family: var(--font-feature);
font-weight: 400;
font-size: 1.18rem;
letter-spacing: 0.01em;
color: var(--fg1);
}
.section-card-header h2 + p,
.section-card-header .meta { margin: 0; }
/* generic content padding for bare divs inside a section card */
.section-card > div:not(.section-card-header):not([style*="padding"]) { padding: 0.5rem 1.35rem 1.1rem; }
/* ============================================================
TABLES
============================================================ */
.table-wrap {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--panel);
}
.section-card .table-wrap { border: 0; border-radius: 0; background: transparent; }
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
thead th {
text-align: left;
font-family: var(--font-ui);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg3);
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--line);
white-space: nowrap;
background: color-mix(in srgb, var(--panel-2) 60%, transparent);
}
tbody td {
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--line-soft);
color: var(--fg2);
vertical-align: middle;
}
tbody tr { transition: background var(--dur) var(--ease); }
tbody tr:hover td { background: rgba(201,168,76,0.045); }
tbody tr:last-child td { border-bottom: 0; }
td strong, th strong { color: var(--fg1); font-weight: 600; }
.total-row td {
background: var(--panel-2) !important;
color: var(--fg1) !important;
font-weight: 700;
border-top: 1px solid var(--line);
}
.profit-pos { color: var(--green); font-weight: 600; }
.profit-neg { color: var(--red); font-weight: 600; }
/* ============================================================
TOOLBAR / FILTERS + FORM CONTROLS
============================================================ */
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 1.1rem;
padding: 0.9rem 1rem;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
input, select, textarea {
font-family: var(--font-ui);
font-size: 0.86rem;
color: var(--fg1);
background: var(--bg-deep);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.55rem 0.7rem;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #fffdf8; }
input::placeholder, textarea::placeholder { color: var(--fg3); }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-soft);
}
select { cursor: pointer; appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--fg3) 50%), linear-gradient(135deg, var(--fg3) 50%, transparent 50%);
background-position: calc(100% - 16px) 53%, calc(100% - 11px) 53%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 1.9rem;
}
.toolbar input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.orders-toolbar select, .orders-toolbar input[type="month"] { flex: 0 1 auto; }
input[type="checkbox"] {
appearance: none;
width: 1.05rem; height: 1.05rem;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: 2px;
background: var(--bg-deep);
cursor: pointer;
position: relative;
flex-shrink: 0;
}
input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
input[type="checkbox"]:checked::after {
content: "✓"; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 0.72rem; color: var(--bg-deep); font-weight: 700;
}
/* ============================================================
OVERLAYS (modals + slide-over)
============================================================ */
.overlay {
position: fixed; inset: 0;
z-index: 200;
background: rgba(4,4,4,0.72);
backdrop-filter: blur(6px);
display: flex;
}
.overlay.center { align-items: center; justify-content: center; padding: 1.5rem; }
.overlay:not(.center) { justify-content: flex-end; }
.form-modal {
width: 100%;
max-width: 32rem;
max-height: 90vh;
display: flex;
flex-direction: column;
background: var(--panel);
border: 1px solid var(--line-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-frame);
animation: modal-rise var(--dur) var(--ease);
}
.form-modal-wide { max-width: 46rem; }
.kpi-modal { max-width: 62rem; }
.kpi-modal-body { padding: 1.2rem 1.4rem; overflow-y: auto; flex: 1; }
.kpi-summary-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.1rem; }
.kpi-summary-chip { background: var(--panel-hi); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 0.75rem; font-size: 0.8rem; color: var(--fg2); }
.kpi-summary-chip strong { color: var(--fg1); margin-left: 0.3rem; }
.kpi-table-wrap { overflow-x: auto; }
.kpi-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.kpi-table th { text-align: left; padding: 0.45rem 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); border-bottom: 1px solid var(--line); }
.kpi-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line-soft); color: var(--fg1); vertical-align: middle; }
.kpi-row:hover td { background: var(--panel-hi); }
.kpi-row:last-child td { border-bottom: none; }
.stat-card:hover { border-color: var(--gold); box-shadow: var(--glow-gold); transform: translateY(-1px); transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
@keyframes modal-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.form-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 1.4rem;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.form-modal-header h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg1);
}
/* slide-over detail panel */
.detail-panel {
width: 100%;
max-width: 30rem;
height: 100%;
overflow-y: auto;
background: var(--panel);
border-left: 1px solid var(--line-strong);
box-shadow: var(--shadow-frame);
animation: panel-slide var(--dur) var(--ease);
}
@keyframes panel-slide { from { transform: translateX(36px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.detail-header {
padding: 1.5rem 1.5rem 1.25rem;
border-bottom: 1px solid var(--line);
position: sticky; top: 0;
background: var(--panel);
z-index: 2;
}
.detail-header h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.3rem;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0.35rem 0 0.4rem;
}
.detail-header .eyebrow { color: var(--gold); }
.detail-body { padding: 1.25rem 1.5rem 2rem; }
.detail-section { margin-bottom: 1.6rem; }
.detail-section h3 {
font-family: var(--font-ui);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 0.7rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--line-soft);
}
/* definition lists */
.booking-services { margin: 0; display: grid; gap: 0.6rem; }
.booking-services > div { display: flex; justify-content: space-between; gap: 1rem; }
.booking-services dt { color: var(--fg3); font-size: 0.82rem; }
.booking-services dd { margin: 0; color: var(--fg1); font-size: 0.85rem; text-align: right; font-weight: 500; }
.finance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0; }
.finance-box {
padding: 0.8rem 0.9rem;
background: var(--panel-2);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
}
.finance-box.wide { grid-column: 1 / -1; }
.finance-box dt { color: var(--fg3); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.finance-box dd {
margin: 0.3rem 0 0;
font-family: var(--font-feature);
font-size: 1.25rem;
color: var(--fg1);
}
.slot-item {
padding: 0.65rem 0.85rem;
margin-bottom: 0.5rem;
background: var(--panel-2);
border-left: 2px solid var(--gold);
border-radius: 2px;
font-size: 0.84rem;
color: var(--fg2);
}
.slot-item strong { color: var(--fg1); }
/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip {
display: inline-flex;
font-family: var(--font-ui);
font-size: 0.74rem;
font-weight: 500;
color: var(--fg1);
padding: 0.26rem 0.62rem;
background: var(--gold-soft);
border: 1px solid var(--line);
border-radius: 2px;
}
.chip.video { background: color-mix(in srgb, var(--crimson) 16%, transparent); border-color: color-mix(in srgb, var(--crimson) 32%, transparent); }
/* expense table inside detail/form */
.expense-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 0.5rem; }
.expense-table th {
font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--fg3); padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line);
background: transparent;
}
.expense-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line-soft); color: var(--fg2); }
.expense-table .total-row td { background: transparent !important; color: var(--fg1) !important; font-weight: 700; }
.expense-total-bar {
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
padding: 0.7rem 0.9rem;
background: var(--panel-2);
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: 0.82rem; color: var(--fg2);
}
.expense-total-bar strong { color: var(--gold); font-family: var(--font-feature); font-size: 1rem; }
/* ============================================================
THE ORDER / LEAD / TEAM FORMS
============================================================ */
.order-form { overflow-y: auto; padding: 1.3rem 1.4rem 1.5rem; }
.form-section {
padding: 0 0 1.3rem;
margin-bottom: 1.3rem;
border-bottom: 1px solid var(--line-soft);
}
.form-section:last-of-type { border-bottom: 0; }
.form-section-title {
font-family: var(--font-ui);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 1rem;
}
.form-section-desc { margin: -0.6rem 0 0.9rem; font-size: 0.78rem; color: var(--fg3); font-style: italic; font-family: var(--font-body); }
.form-group { margin-bottom: 0.85rem; display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg3);
}
.form-group input, .form-group select, .form-group textarea { width: 100%; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.expense-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }
.expense-grid .form-group { margin-bottom: 0; }
.form-actions {
display: flex; gap: 0.7rem; flex-wrap: wrap;
position: sticky; bottom: 0;
padding: 1rem 0 0;
margin-top: 0.5rem;
background: linear-gradient(to top, var(--panel) 70%, transparent);
}
.slot-block {
padding: 0.75rem;
margin-bottom: 0.6rem;
background: var(--panel-2);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
display: flex; flex-direction: column; gap: 0.5rem;
}
.crew-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 0.6rem 0.7rem;
align-items: end;
padding: 0.8rem;
margin-bottom: 0.7rem;
background: var(--panel-2);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
}
.crew-payout-wrap input { max-width: 8rem; }
.crew-row .btn-remove-crew { align-self: end; margin-bottom: 0.1rem; }
/* history modal */
.history-modal { max-width: 34rem; }
.history-body { padding: 0 1.4rem 1.4rem; overflow-y: auto; max-height: min(64vh, 520px); }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-item {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 0.75rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line-soft);
}
.history-item:last-child { border-bottom: 0; }
.history-item-main { display: flex; flex-direction: column; gap: 0.15rem; }
.history-action { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.history-label { color: var(--fg1); font-size: 0.9rem; }
.history-time { color: var(--fg3); font-size: 0.76rem; }
/* empty states */
.empty-state {
text-align: center;
padding: 2.5rem 1.5rem;
color: var(--fg3);
font-family: var(--font-body);
font-style: italic;
font-size: 1rem;
}
.empty-state.card { border-style: dashed; border-color: var(--line); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 880px) {
.sidebar { display: none; }
.content { margin-left: 0; }
.topbar { justify-content: space-between; padding: 0.6rem 1.1rem; overflow: hidden; }
.topbar-brand { display: flex; }
.theme-opt { padding: 0.28rem 0.38rem; font-size: 0.6rem; letter-spacing: 0.07em; }
.main { padding: 1.25rem 1.1rem 6rem; }
.site-footer { padding: 1rem 1.1rem 6rem; }
.bottom-nav {
display: grid;
grid-template-columns: repeat(8, 1fr);
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 60;
background: color-mix(in srgb, var(--sidebar-bg) 94%, transparent);
backdrop-filter: blur(12px);
border-top: 1px solid var(--line);
}
.bottom-nav a {
display: flex; flex-direction: column; align-items: center; gap: 0.18rem;
padding: 0.5rem 0.1rem;
font-size: 0.53rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--fg3);
}
.bottom-nav a svg { width: 18px; height: 18px; }
.bottom-nav a.active { color: var(--gold); }
.fab { bottom: 4.6rem; right: 1rem; }
}
@media (max-width: 480px) {
.topbar-brand span { display: none; }
.theme-opt { padding: 0.28rem 0.22rem; font-size: 0.58rem; letter-spacing: 0.05em; }
}
@media (max-width: 560px) {
.form-row { grid-template-columns: 1fr; }
.crew-row { grid-template-columns: 1fr; }
.crew-payout-wrap input { max-width: none; }
.page-header { align-items: flex-start; }
.fab .fab-text { display: none; }
.fab { padding: 0.85rem; border-radius: 999px; }
.fab .fab-plus { font-size: 1.3rem; }
}
/* ===== views.css ===== */
/* ============================================================
FILM WEDDING DAYS — Studio OS
views.css · dashboard, calendar, orders, leads, team, reports
============================================================ */
/* ============================================================
SEGMENTED CONTROLS (scope toggle, view btns, month tabs, export tabs)
============================================================ */
.scope-toggle,
.cal-view-btns,
.export-scope-tabs {
display: inline-flex;
padding: 3px;
gap: 2px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.scope-toggle button,
.cal-view-btns button,
.export-scope-tab {
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg3);
background: transparent;
border: 0;
padding: 0.45rem 0.85rem;
border-radius: 2px;
cursor: pointer;
white-space: nowrap;
transition: all var(--dur) var(--ease);
}
.scope-toggle button:hover,
.cal-view-btns button:hover,
.export-scope-tab:hover { color: var(--fg1); }
.scope-toggle button.active,
.cal-view-btns button.active,
.export-scope-tab.active { color: var(--bg-deep); background: var(--gold); }
[data-theme="light"] .scope-toggle button.active,
[data-theme="light"] .cal-view-btns button.active,
[data-theme="light"] .export-scope-tab.active { color: #fff; }
/* month picker */
.month-picker { padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.month-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.month-picker-title { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); font-weight: 600; }
.year-stepper { display: flex; align-items: center; gap: 0.5rem; }
.year-stepper-label { font-family: var(--font-feature); font-size: 1.1rem; color: var(--gold); min-width: 3.5rem; text-align: center; }
.month-tabs { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.month-tab {
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 600;
color: var(--fg3);
background: var(--panel-2);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
padding: 0.45rem 0.2rem;
cursor: pointer;
transition: all var(--dur) var(--ease);
}
.month-tab:hover { color: var(--fg1); border-color: var(--line); }
.month-tab.active { color: var(--bg-deep); background: var(--gold); border-color: var(--gold); }
[data-theme="light"] .month-tab.active { color: #fff; }
.dashboard-scope-banner {
padding: 0.8rem 1.1rem !important;
margin-bottom: 1.5rem;
font-family: var(--font-body);
font-style: italic;
color: var(--fg2);
}
.dashboard-scope-banner strong { color: var(--gold); font-style: normal; }
@media (max-width: 640px) { .month-tabs { grid-template-columns: repeat(6, 1fr); } }
/* ============================================================
KPI GRID
============================================================ */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.kpi-card {
position: relative; padding: 1.15rem 1.25rem; overflow: hidden;
transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
animation: kpi-fade-in 0.4s var(--ease) both;
}
/* subtle top-light sheen for depth */
.kpi-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(130% 120% at 0% 0%, rgba(255,255,255,0.04), transparent 55%);
}
.kpi-card:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: var(--glow-gold);
}
.kpi-card::after {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: linear-gradient(var(--gold), transparent);
opacity: 0; transition: opacity var(--dur) var(--ease);
}
.kpi-card:hover::after { opacity: 0.85; }
.kpi-card:hover .kpi-value { color: var(--gold-bright); }
.kpi-card:hover .stat-icon { opacity: 1; transform: scale(1.08); }
.stat-icon { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
/* staggered entrance */
.kpi-card:nth-child(1) { animation-delay: 0.02s; }
.kpi-card:nth-child(2) { animation-delay: 0.06s; }
.kpi-card:nth-child(3) { animation-delay: 0.10s; }
.kpi-card:nth-child(4) { animation-delay: 0.14s; }
.kpi-card:nth-child(5) { animation-delay: 0.18s; }
.kpi-card:nth-child(6) { animation-delay: 0.22s; }
.kpi-card:nth-child(7) { animation-delay: 0.26s; }
.kpi-card:nth-child(8) { animation-delay: 0.30s; }
.kpi-card:nth-child(9) { animation-delay: 0.34s; }
.kpi-card:nth-child(10) { animation-delay: 0.38s; }
@keyframes kpi-fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.kpi-value { transition: color var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce) {
.kpi-card { animation: none; }
}
.stat-icon {
position: absolute; top: 0.9rem; right: 1rem;
font-size: 1.2rem; line-height: 1;
opacity: 0.75;
}
.kpi-label {
font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--fg3); margin-bottom: 0.5rem; padding-right: 1.5rem;
}
.kpi-value {
font-family: var(--font-feature);
font-size: 1.85rem;
line-height: 1;
color: var(--fg1);
font-feature-settings: "tnum" 1;
}
.kpi-sub { margin-top: 0.45rem; font-size: 0.74rem; color: var(--fg3); }
/* ============================================================
COLLECTIONS HERO
============================================================ */
.collections-hero { margin-bottom: 1.5rem; padding: 1.6rem 1.75rem; overflow: hidden; position: relative; }
.collections-hero::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 140% at 100% 0%, rgba(201,168,76,0.08), transparent 55%);
pointer-events: none;
}
.collections-head { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; justify-content: space-between; align-items: flex-end; position: relative; }
.collections-eyebrow { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.collections-amount {
font-family: var(--font-feature);
font-size: clamp(2.4rem, 5vw, 3.4rem);
line-height: 0.95;
color: var(--fg1);
}
.collections-sub { margin-top: 0.5rem; color: var(--fg3); font-size: 0.88rem; }
.collections-sub .overdue, .overdue { color: var(--red); font-weight: 600; }
.collections-meter { min-width: 240px; flex: 1 1 240px; max-width: 360px; }
.collections-meter-track {
height: 8px; border-radius: 999px; overflow: hidden;
background: var(--panel-2); border: 1px solid var(--line-soft);
}
.collections-meter-track > span { display: block; height: 100%; background: var(--grad-gold); }
.collections-meter-label { margin-top: 0.5rem; font-size: 0.8rem; color: var(--fg3); }
.collections-meter-label strong { color: var(--gold); font-family: var(--font-feature); }
.collections-ledger { list-style: none; margin: 1.4rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 0.3rem; position: relative; }
.collect-row {
display: grid;
grid-template-columns: 1fr 120px auto;
gap: 1rem;
align-items: center;
padding: 0.6rem 0.5rem;
border-radius: var(--radius);
transition: background var(--dur) var(--ease);
}
.collect-row:hover { background: rgba(201,168,76,0.05); }
.collect-row-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.collect-name { color: var(--fg1); font-weight: 600; font-size: 0.92rem; }
.collect-due { font-size: 0.74rem; color: var(--fg3); }
.collect-due.overdue { color: var(--red); }
.collect-bar { height: 5px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.collect-bar > span { display: block; height: 100%; background: var(--gold); }
.collect-row.is-overdue .collect-bar > span { background: var(--red); }
.collect-row-amt { text-align: right; display: flex; flex-direction: column; gap: 0.1rem; }
.collect-bal { font-family: var(--font-feature); color: var(--fg1); font-size: 1rem; }
.collect-paidpct { font-size: 0.68rem; color: var(--fg3); }
.collect-empty { padding: 1rem 0; color: var(--fg3); font-style: italic; font-family: var(--font-body); }
/* ============================================================
ANOMALIES / NEEDS ATTENTION
============================================================ */
.anomaly-card { border-color: var(--alert-border); }
.anomaly-list { list-style: none; margin: 0; padding: 0.6rem 1.35rem 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.anomaly-row {
display: flex; align-items: center; gap: 0.7rem;
padding: 0.7rem 0.6rem;
border-radius: var(--radius);
cursor: pointer;
transition: background var(--dur) var(--ease);
}
.anomaly-row:hover { background: var(--alert-bg); }
.anomaly-icon { color: var(--red); font-size: 0.95rem; flex-shrink: 0; }
.anomaly-text { font-size: 0.86rem; color: var(--fg2); }
.anomaly-name { color: var(--fg1); }
/* ============================================================
PRODUCTION FUNNEL + RISK
============================================================ */
.funnel-chart { display: flex; flex-direction: column; gap: 0.65rem; padding: 1.1rem 1.35rem 0.5rem; }
.funnel-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 1rem; align-items: center; }
.funnel-label { font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg3); font-weight: 600; }
.funnel-track { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 2px; overflow: hidden; height: 30px; }
.funnel-bar {
height: 100%;
display: flex; align-items: center; padding-left: 0.7rem;
min-width: 2.2rem;
transition: width var(--dur) var(--ease);
}
.funnel-count { font-family: var(--font-feature); font-size: 0.95rem; color: var(--bg-deep); font-weight: 700; }
.funnel-lead { background: linear-gradient(90deg, #5c4a38, #8C867A); }
.funnel-booked { background: linear-gradient(90deg, #7A5C1E, #b0863a); }
.funnel-production { background: linear-gradient(90deg, #b0863a, var(--gold)); }
.funnel-post { background: linear-gradient(90deg, #6c2f39, #A93232); }
.funnel-post .funnel-count { color: #F5EDD8; }
.funnel-lead .funnel-count { color: #F5EDD8; }
.funnel-delivered { background: linear-gradient(90deg, #3f6b4d, #5fa074); }
.funnel-delivered .funnel-count { color: #F5EDD8; }
.funnel-value { font-family: var(--font-feature); font-size: 0.86rem; color: var(--fg2); white-space: nowrap; }
.risk-header { padding: 1.1rem 1.35rem 0.5rem; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.risk-list { list-style: none; margin: 0; padding: 0 1.35rem 1.2rem; display: flex; flex-direction: column; gap: 0.15rem; }
.risk-row {
display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 1rem; align-items: center;
padding: 0.6rem 0.5rem; border-radius: var(--radius); cursor: pointer;
transition: background var(--dur) var(--ease);
}
.risk-row:hover { background: rgba(201,168,76,0.05); }
.risk-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.risk-name { color: var(--fg1); font-weight: 600; font-size: 0.9rem; }
.risk-prog { display: flex; align-items: center; gap: 0.55rem; }
.risk-prog-track { flex: 1; height: 5px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.risk-prog-track > span { display: block; height: 100%; background: var(--gold); }
.risk-row.is-low .risk-prog-track > span { background: var(--red); }
.risk-prog-pct { font-size: 0.72rem; color: var(--fg3); min-width: 2.2rem; text-align: right; }
.risk-value { font-family: var(--font-feature); font-size: 0.9rem; color: var(--fg2); white-space: nowrap; text-align: right; }
/* ============================================================
SCHEDULE / UPCOMING LISTS
============================================================ */
.upcoming-list { list-style: none; margin: 0; }
.section-card > .upcoming-list { padding: 0.4rem 1.35rem 1.1rem; }
.section-card > div > .upcoming-list { padding: 0.4rem 0 0; }
.section-card > div { padding: 0.6rem 1.35rem 1rem; }
.section-card > div > h4 { padding: 0; }
.upcoming-list li {
display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
padding: 0.85rem 0;
border-bottom: 1px solid var(--line-soft);
}
.upcoming-list li:last-child { border-bottom: 0; }
.upcoming-list .name { color: var(--fg1); font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.upcoming-list .meta { color: var(--fg3); font-size: 0.8rem; margin-top: 0.2rem; }
.upcoming-list .crew { color: var(--fg3); font-size: 0.78rem; margin-top: 0.25rem; font-style: italic; font-family: var(--font-body); }
.upcoming-list .meta strong { color: var(--gold); font-family: var(--font-feature); font-style: normal; display: inline-block; margin: 0.15rem 0; }
/* ============================================================
CHARTS
============================================================ */
.charts-grid { margin-bottom: 1.5rem; }
.chart-card {
padding: 1.25rem 1.35rem 1.1rem;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chart-card:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-frame);
transform: translateY(-2px);
}
.chart-card h3 {
font-family: var(--font-ui);
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--fg3); margin: 0 0 1.1rem;
display: flex; align-items: center; gap: 0.5rem;
}
.chart-card h3::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--gold); flex-shrink: 0;
box-shadow: 0 0 8px -1px var(--gold);
}
/* Charts stack one-per-row as large rectangles */
.charts-grid { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2rem; }
.chart-bars {
display: flex; align-items: flex-end; gap: 0.55rem; height: 180px;
overflow-x: auto; overflow-y: hidden; padding-bottom: 0.45rem;
scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.chart-bars::-webkit-scrollbar { height: 6px; }
.chart-bars::-webkit-scrollbar-track { background: transparent; }
.chart-bars::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
/* Each month column keeps a comfortable min width and never shrinks → no overlap */
.chart-col {
flex: 1 0 46px; min-width: 46px;
display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
gap: 0.4rem; height: 100%;
}
.chart-col-dual { flex: 1 0 66px; min-width: 66px; }
.chart-col .count { font-size: 0.62rem; color: var(--fg2); font-family: var(--font-feature); white-space: nowrap; }
.chart-col .bar {
width: 100%; max-width: 10px;
background: var(--gold);
border-radius: 8px;
min-height: 2px;
transition: height var(--dur) var(--ease);
box-shadow: none;
}
.chart-col .label { font-size: 0.6rem; color: var(--fg3); white-space: nowrap; }
.chart-bars-dual .dual-bar-group { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%; max-width: 26px; }
.dual-bar-group .bar { flex: 1; border-radius: 8px; min-height: 2px; }
.bar-revenue { background: var(--gold); }
.bar-expense { background: var(--gold); opacity: 0.3; }
.chart-legend { color: var(--fg3) !important; }
.type-chart { display: flex; flex-direction: column; gap: 0.55rem; }
.type-chart-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 0.7rem; align-items: center; }
.type-chart-label { font-size: 0.76rem; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.type-chart-track { height: 16px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 2px; overflow: hidden; }
.type-chart-bar { height: 100%; border-radius: 2px; transition: width var(--dur) var(--ease); }
.type-chart-count { font-family: var(--font-feature); font-size: 0.85rem; color: var(--fg1); min-width: 1.5rem; text-align: right; }
/* export panel */
.dashboard-export-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem 1.35rem; }
.export-scope-scroll { overflow-x: auto; }
.dashboard-export-actions { display: flex; gap: 0.6rem; }
/* ============================================================
CALENDAR
============================================================ */
.calendar-card { padding: 0; overflow: hidden; }
.cal-toolbar {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--line);
}
.cal-nav { display: flex; align-items: center; gap: 0.75rem; }
.cal-nav h2 {
font-family: var(--font-feature); font-weight: 400; font-size: 1.3rem; color: var(--fg1);
min-width: 13rem;
}
.cal-nav #cal-prev, .cal-nav #cal-next {
width: 2.1rem; height: 2.1rem;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem; color: var(--fg2);
background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
cursor: pointer; transition: all var(--dur) var(--ease);
}
.cal-nav #cal-prev:hover, .cal-nav #cal-next:hover { color: var(--gold); border-color: var(--gold); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
/* Long-press opens the calendar context menu — stop iOS from showing its own
text-selection callout on the cells/events while pressing. */
.cal-day, .cal-week-cell, .cal-event, .cal-item-chip {
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
/* Same for chat bubbles — long-press opens Copy / Send via WhatsApp. */
.inbox-bubble {
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: context-menu;
}
.cal-weekday {
padding: 0.7rem 0.6rem; text-align: left;
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--fg3);
border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-soft);
background: var(--panel-2);
}
.cal-day {
min-height: 116px;
padding: 0.45rem;
border-bottom: 1px solid var(--line-soft);
border-right: 1px solid var(--line-soft);
display: flex; flex-direction: column; gap: 0.3rem;
transition: background var(--dur) var(--ease);
}
.cal-day:hover { background: rgba(201,168,76,0.035); }
.cal-day.other-month { opacity: 0.4; }
.cal-day.today { background: rgba(201,168,76,0.07); box-shadow: inset 0 0 0 1px var(--gold-soft); }
.cal-day-num { font-family: var(--font-feature); font-size: 0.9rem; color: var(--fg2); }
.cal-day.today .cal-day-num { color: var(--gold); font-weight: 700; }
.cal-event {
width: 100%; text-align: left; cursor: pointer;
border: 1px solid var(--line);
border: 1px solid color-mix(in srgb, var(--ev, var(--gold)) 40%, transparent);
border-left: 3px solid var(--ev, var(--gold));
border-radius: 6px;
padding: 0.4rem 0.5rem;
display: flex; flex-direction: column; gap: 0.1rem;
color: var(--fg1);
background: var(--panel-2);
background: color-mix(in srgb, var(--ev, var(--gold)) 30%, transparent);
position: relative;
overflow: hidden;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cal-event::before { content: none; }
.cal-event > * { position: relative; }
.cal-event:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.cal-event-name { font-weight: 700; font-size: 0.78rem; line-height: 1.15; }
.cal-event-badges { display: none; }
.cal-event-day { font-size: 0.62rem; opacity: 0.85; letter-spacing: 0.04em; }
.cal-event-time { font-size: 0.66rem; opacity: 0.92; font-family: var(--font-feature); }
.cal-event-crew { display: none; }
.cal-event-budget { font-size: 0.66rem; font-weight: 700; opacity: 0.95; font-family: var(--font-feature); }
/* ── Apple-style calendar enhancements ── */
.cal-kpis {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.7rem; margin-bottom: 1.1rem;
}
.cal-kpi {
background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cal-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.cal-kpi-label { font-size: 0.66rem; color: var(--fg3); letter-spacing: 0.02em; }
.cal-kpi-val { font-size: 1.3rem; font-weight: 700; color: var(--fg1); font-family: var(--font-feature); letter-spacing: -0.01em; }
.cal-apple-layout { display: grid; grid-template-columns: minmax(0,1.62fr) minmax(0,1fr); gap: 1.1rem; align-items: start; }
.cal-apple-layout .calendar-card { border-radius: 20px; }
.cal-apple-layout .cal-grid { gap: 4px; padding: 0.55rem; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-apple-layout .cal-weekday { border: none; background: transparent; color: var(--fg3); text-align: center; padding: 0.35rem 0; }
.cal-apple-layout .cal-day {
min-height: 78px; min-width: 0; border: none; border-radius: 12px; background: var(--panel-2);
gap: 0.2rem; padding: 0.35rem 0.4rem;
}
.cal-apple-layout .cal-day:hover { background: var(--gold-soft); }
.cal-apple-layout .cal-day.today { box-shadow: inset 0 0 0 2px var(--gold); background: var(--panel-2); }
.cal-apple-layout .cal-day.other-month { opacity: 0.32; }
.cal-apple-layout .cal-event { border-radius: 8px; padding: 0.25rem 0.4rem; gap: 0; min-width: 0; max-width: 100%; }
.cal-apple-layout .cal-event-name { font-size: 0.72rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-apple-layout .cal-event-day, .cal-apple-layout .cal-event-time, .cal-apple-layout .cal-event-budget { display: none; }
.cal-event-wedding { box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 3px rgba(201,168,76,0.25); }
.cal-event-selected { box-shadow: 0 0 0 2px var(--fg1), 0 2px 10px rgba(0,0,0,0.25) !important; transform: translateY(-1px); }
.cal-detail-panel { padding: 1.2rem 1.25rem; border-radius: 20px; position: sticky; top: 1rem; }
.cal-detail-empty { text-align: center; padding: 2.5rem 1rem; color: var(--fg3); }
.cal-detail-empty-icon { font-size: 2.4rem; opacity: 0.5; margin-bottom: 0.6rem; }
.cal-detail-empty p { font-family: var(--font-feature); font-size: 1.05rem; color: var(--fg2); margin: 0 0 0.2rem; }
.cal-detail-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.cal-detail-avatar {
width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: #F5EDD8; font-weight: 700; font-size: 1rem; font-family: var(--font-feature);
position: relative; overflow: hidden;
}
.cal-detail-avatar img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; border-radius: inherit;
}
.cal-detail-couple { font-family: var(--font-feature); font-size: 1.1rem; color: var(--fg1); line-height: 1.2; }
.cal-detail-sub { font-size: 0.72rem; color: var(--fg3); margin-top: 0.15rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.cal-detail-countdown {
background: var(--gold-soft); color: var(--gold); border-radius: 12px;
padding: 0.55rem; text-align: center; font-weight: 700; font-size: 0.85rem; margin-bottom: 0.95rem;
}
.cal-detail-info { font-size: 0.82rem; color: var(--fg2); line-height: 1.85; margin-bottom: 0.95rem; }
.cal-detail-info a { font-size: 0.82rem; }
.cal-crew-avs { display: inline-flex; gap: 3px; margin-left: 0.5rem; vertical-align: middle; }
.cal-crew-av {
width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #2a2206;
display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700;
border: 1.5px solid var(--panel);
}
.cal-crew-more { background: var(--panel-2); color: var(--fg2); }
.cal-detail-pay {
display: flex; align-items: center; gap: 0.9rem; background: var(--panel-2);
border-radius: 14px; padding: 0.7rem 0.9rem; margin-bottom: 1.1rem;
}
.cal-detail-pay > div { display: flex; flex-direction: column; gap: 0.1rem; }
.cal-pay-lbl { font-size: 0.64rem; color: var(--fg3); }
.cal-pay-val { font-size: 0.86rem; font-weight: 700; font-family: var(--font-feature); }
.cal-pay-pct { margin-left: auto; font-size: 0.95rem; font-weight: 700; color: var(--gold); font-family: var(--font-feature); }
.cal-detail-tl-title { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg3); margin-bottom: 0.5rem; }
.cal-detail-tl { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 1.1rem; }
.cal-tl-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--fg3); padding: 0.18rem 0; }
.cal-tl-row.done { color: var(--fg1); }
.cal-tl-dot {
width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center; font-size: 0.66rem;
background: var(--line); color: var(--panel);
}
.cal-tl-row.done .cal-tl-dot { background: var(--green, #3c7c4e); color: #fff; }
.cal-detail-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cal-detail-actions .btn-primary, .cal-detail-actions .btn-secondary { flex: 1; text-align: center; text-decoration: none; }
@media (max-width: 980px) {
.cal-apple-layout { grid-template-columns: 1fr; }
.cal-detail-panel { position: static; }
.cal-kpis { grid-template-columns: repeat(3, 1fr); }
}
/* week + day */
.cal-week-grid { padding: 1rem 1.35rem 1.35rem; overflow-x: auto; }
.cal-week-row { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 0.6rem; }
.cal-week-cell {
min-height: 200px; padding: 0.7rem;
background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.cal-week-cell.today { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-soft); }
.cal-week-cell > strong { font-size: 0.74rem; color: var(--fg2); letter-spacing: 0.03em; }
.cal-week-cell.today > strong { color: var(--gold); }
.cal-week-cell .cal-event { gap: 0.12rem; }
.cal-week-cell .cal-event-crew { display: block; font-size: 0.62rem; opacity: 0.8; }
.cal-day-view { padding: 1.35rem; }
.cal-day-view h3 { font-family: var(--font-feature); font-weight: 400; font-size: 1.25rem; color: var(--fg1); margin-bottom: 1rem; }
.cal-day-view .cal-event { padding: 0.8rem 0.9rem; gap: 0.25rem; }
.cal-day-view .cal-event-name { font-size: 0.95rem; }
.cal-day-view .cal-event-crew { display: block; font-size: 0.74rem; opacity: 0.85; }
.cal-day-view .cal-event-badges { display: flex; gap: 0.3rem; }
/* clash banner */
.clash-banner {
border-color: var(--alert-border) !important;
background: var(--alert-bg) !important;
color: var(--alert-text) !important;
}
.clash-banner strong { color: var(--red); }
.clash-banner ul { color: var(--fg2); }
@media (max-width: 760px) {
.cal-day { min-height: 84px; padding: 0.3rem; }
.cal-event-day, .cal-event-time, .cal-event-budget { display: none; }
.cal-event-name { font-size: 0.66rem; }
.cal-nav h2 { min-width: 0; font-size: 1.05rem; }
.cal-kpis { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.cal-kpi-val { font-size: 1.1rem; }
.cal-apple-layout .cal-day { min-height: 62px; }
}
/* Phones: show full event names (wrap instead of truncate) and squeeze the
unused weeks — empty cells shrink to ~the day number, so the extra height a
wrapped name needs is reclaimed from blank rows. 7 columns still fit; swipe
still changes month. */
@media (max-width: 600px) {
.cal-apple-layout .cal-grid { padding: 0.3rem; gap: 2px; }
.cal-apple-layout .cal-day { min-height: 34px; padding: 0.22rem 0.1rem; gap: 0.14rem; }
.cal-apple-layout .cal-day-num { font-size: 0.7rem; }
.cal-apple-layout .cal-event { padding: 0.2rem 0.18rem; border-radius: 6px; }
.cal-apple-layout .cal-event-name {
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: break-word;
hyphens: none;
font-size: 0.56rem;
line-height: 1.16;
}
}
/* ============================================================
ORDERS / LEADS / TEAM CARDS
============================================================ */
.order-card, .team-card { padding: 1.25rem; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.order-card:hover, .team-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.order-card dt, .team-card dt { font-size: 0.62rem !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3) !important; }
.order-card dd, .team-card dd { color: var(--fg1); }
.team-card h3 { font-family: var(--font-feature) !important; color: var(--fg1); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
/* ============================================================
REPORTS type bars (inline-styled tracks -> theme override)
============================================================ */
.section-card [style*="background:var(--blush)"] { background: var(--panel-2) !important; border: 1px solid var(--line-soft); }
/* ============================================================
CUSTOMER PROFILE
============================================================ */
.profile-grid { margin-top: 0.5rem; }
.profile-grid .section-card { margin: 0; }
/* keep a little air under page when FAB floats */
.main > :last-child { margin-bottom: 1rem; }
/* ============================================================
SETTINGS
============================================================ */
.settings-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
align-items: start;
}
.settings-span { grid-column: 1 / -1; }
.settings-body { padding: 1.2rem 1.35rem 1.4rem; }
.settings-lead { color: var(--fg2); font-family: var(--font-body); font-size: 0.98rem; line-height: 1.55; margin: 0 0 1.2rem; max-width: 64ch; }
.theme-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.theme-tile {
position: relative;
display: flex; flex-direction: column; gap: 0.8rem;
text-align: left; cursor: pointer;
padding: 1.05rem;
background: var(--panel-2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.theme-tile:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.theme-tile.active { border-color: var(--gold); box-shadow: var(--glow-gold); }
.theme-tile-swatch { display: flex; gap: 4px; }
.theme-tile-swatch span { width: 30px; height: 30px; border-radius: 3px; border: 1px solid var(--line-soft); }
.theme-tile-body { display: flex; flex-direction: column; }
.theme-tile-name { font-family: var(--font-feature); font-size: 1.1rem; color: var(--fg1); }
.theme-tile-desc { font-size: 0.78rem; color: var(--fg3); margin-top: 0.3rem; line-height: 1.45; }
.theme-tile-check {
position: absolute; top: 0.85rem; right: 0.95rem;
width: 1.3rem; height: 1.3rem;
display: flex; align-items: center; justify-content: center;
border-radius: 999px;
background: var(--gold); color: var(--bg-deep);
font-size: 0.78rem; font-weight: 700;
opacity: 0; transform: scale(0.5);
transition: all var(--dur) var(--ease);
}
.theme-tile.active .theme-tile-check { opacity: 1; transform: none; }
[data-theme="light"] .theme-tile.active .theme-tile-check { color: #fff; }
.studio-directors { display: flex; align-items: center; gap: 1.1rem; }
.studio-director { display: flex; flex-direction: column; }
.studio-director-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg1); font-size: 1.02rem; }
.studio-director-role { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-top: 0.25rem; }
.studio-amp { font-family: var(--font-body); font-style: italic; color: var(--gold); font-size: 1.5rem; }
.settings-note { margin: 1.1rem 0 0; font-family: var(--font-body); font-style: italic; color: var(--fg3); font-size: 0.86rem; line-height: 1.5; }
.settings-stats { margin-bottom: 1.2rem; }
.settings-stats .finance-box dd { font-size: 1.15rem; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.1rem; }
.settings-sync { display: flex; align-items: center; gap: 0.55rem; font-size: 0.84rem; color: var(--fg3); }
.settings-sync-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--warm); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warm) 24%, transparent); }
.settings-sync.is-on .settings-sync-dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 24%, transparent); }
@media (max-width: 820px) {
.settings-grid { grid-template-columns: 1fr; }
.theme-tiles { grid-template-columns: 1fr; }
}
/* ============================================================
CALENDAR — PRODUCTION TIMELINE / ROADMAP
============================================================ */
.cal-timeline { padding: 0; }
.tl-scroll { overflow-x: auto; padding: 1.1rem 1.35rem 1.4rem; }
.tl-head { display: flex; align-items: stretch; min-width: 720px; border-bottom: 1px solid var(--line); margin-bottom: 0.6rem; }
.tl-head-spacer {
flex: 0 0 200px;
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--fg3); padding: 0.4rem 0.6rem 0.7rem; align-self: flex-end;
}
.tl-months { flex: 1; display: flex; position: relative; }
.tl-month {
font-family: var(--font-feature); font-size: 0.86rem; color: var(--gold);
letter-spacing: 0.03em;
padding: 0.2rem 0 0.7rem 0.6rem;
border-left: 1px solid var(--line-soft);
}
.tl-month:first-child { border-left: 0; }
.tl-rows { min-width: 720px; display: flex; flex-direction: column; }
.tl-row {
display: flex; align-items: center; gap: 0;
padding: 0.4rem 0; border-bottom: 1px solid var(--line-soft);
}
.tl-row:last-child { border-bottom: 0; }
.tl-label { flex: 0 0 200px; padding-right: 0.8rem; min-width: 0; }
.tl-name { color: var(--fg1); font-weight: 600; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-badges { display: flex; gap: 0.3rem; margin-top: 0.25rem; }
.tl-track { flex: 1; position: relative; height: 30px; }
.tl-track::before {
content: ""; position: absolute; inset: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent calc(33.333% - 1px), var(--line-soft) calc(33.333% - 1px), var(--line-soft) 33.333%);
}
.tl-bar {
position: absolute; top: 50%; transform: translateY(-50%);
height: 22px; border: 0; border-radius: 2px;
cursor: pointer; overflow: hidden;
display: flex; align-items: center;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), var(--shadow-soft);
transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.tl-bar:hover { transform: translateY(-50%) scale(1.012); filter: brightness(1.12); z-index: 2; }
.tl-bar-label {
position: relative; z-index: 2;
padding: 0 0.5rem; font-size: 0.66rem; font-weight: 700; color: #F5EDD8;
white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.tl-bar-prog {
position: absolute; left: 0; top: 0; bottom: 0;
background: linear-gradient(180deg, rgba(201,168,76,0.55), rgba(201,168,76,0.32));
border-right: 1px solid var(--gold-bright);
z-index: 1;
}
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--crimson-bright); z-index: 3; box-shadow: 0 0 8px rgba(197,106,96,0.6); }
.tl-today-head { top: auto; bottom: 0; height: 1.7rem; }
.tl-legend {
display: flex; flex-wrap: wrap; gap: 1.5rem;
margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line-soft);
min-width: 720px;
}
.tl-legend-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; color: var(--fg3); }
.tl-legend-dot { width: 10px; height: 10px; border-radius: 2px; }
.tl-legend-rule { width: 2px; height: 14px; background: var(--crimson-bright); display: inline-block; }
/* ============================================================
ORDERS — BOARD / SMART CARDS
============================================================ */
.orders-subbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.orders-subbar .meta { margin: 0; }
.orders-board {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
gap: 1.1rem;
}
@media (max-width: 520px) { .orders-board { grid-template-columns: 1fr; } }
.order-smart { padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 1rem; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.order-smart:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.osc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.osc-name { font-family: var(--font-feature); font-size: 1.18rem; color: var(--fg1); line-height: 1.1; }
.osc-sub { margin-top: 0.3rem; font-size: 0.78rem; color: var(--fg3); }
.osc-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; flex-shrink: 0; }
/* pipeline stage track */
.osc-stages { display: flex; gap: 4px; }
.osc-stage {
flex: 1; text-align: center;
font-size: 0.56rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--fg3);
padding: 0.4rem 0.2rem 0.34rem;
background: var(--panel-2);
border: 1px solid var(--line-soft);
border-radius: 2px;
position: relative;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.osc-stage.done { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: var(--gold-soft); }
.osc-stage.current {
color: var(--bg-deep); background: var(--gold); border-color: var(--gold-bright);
box-shadow: var(--glow-gold);
}
[data-theme="light"] .osc-stage.current { color: #fff; }
.osc-stages.is-cancelled .osc-stage { opacity: 0.45; text-decoration: line-through; }
/* metrics */
.osc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.osc-metric { display: flex; flex-direction: column; gap: 0.4rem; }
.osc-metric-top, .osc-metric-bot { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.osc-metric-top { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }
.osc-money { font-family: var(--font-feature); font-size: 0.84rem; color: var(--fg1); }
.osc-metric-bot { font-size: 0.72rem; }
.osc-pay-track, .osc-prog-track {
display: flex; height: 7px; border-radius: 999px; overflow: hidden;
background: var(--panel-2); border: 1px solid var(--line-soft);
}
.osc-seg { height: 100%; }
.osc-seg.s1 { background: var(--gold-deep); }
.osc-seg.s2 { background: var(--gold); }
.osc-seg.s3 { background: var(--gold-bright); }
.osc-prog-track > span { display: block; height: 100%; background: var(--grad-gold); }
/* expand toggle + drawer */
.osc-expand {
display: flex; align-items: center; justify-content: space-between;
width: 100%; cursor: pointer;
font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--fg3); background: transparent;
border: 0; border-top: 1px solid var(--line-soft);
padding: 0.7rem 0 0; margin-top: 0.1rem;
transition: color var(--dur) var(--ease);
}
.osc-expand:hover { color: var(--gold); }
.osc-expand-icon { transition: transform var(--dur) var(--ease); font-size: 0.9rem; }
.order-smart.is-open .osc-expand-icon { transform: rotate(180deg); color: var(--gold); }
.order-smart.is-open .osc-expand-label { color: var(--gold); }
.osc-details {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows var(--dur) var(--ease);
}
.order-smart.is-open .osc-details { grid-template-rows: 1fr; }
.osc-details-inner { overflow: hidden; }
.order-smart.is-open .osc-details-inner { padding-top: 0.4rem; }
.osc-detail-block { margin-bottom: 1rem; }
.osc-detail-block:last-of-type { margin-bottom: 0.5rem; }
.osc-detail-block h4 {
font-family: var(--font-ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--gold); margin: 0 0 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--line-soft);
}
.osc-slot { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8rem; color: var(--fg2); padding: 0.18rem 0; }
.osc-slot strong { color: var(--fg1); font-weight: 600; }
.osc-crew { margin: 0; font-size: 0.82rem; color: var(--fg2); font-style: italic; font-family: var(--font-body); }
.osc-fin { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
.osc-fin > div { display: flex; justify-content: space-between; gap: 0.5rem; }
.osc-fin dt { font-size: 0.74rem; color: var(--fg3); }
.osc-fin dd { margin: 0; font-family: var(--font-feature); font-size: 0.84rem; color: var(--fg1); }
.osc-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.9rem; margin-top: 0.6rem; border-top: 1px solid var(--line-soft); }
/* ===== finance ===== */
.fin-tabs-scroll { overflow-x: auto; margin-bottom: 1.25rem; -webkit-overflow-scrolling: touch; }
.fin-tabs-scroll::-webkit-scrollbar { height: 0; }
.fin-tabs {
display: inline-flex;
padding: 3px;
gap: 2px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
white-space: nowrap;
}
.fin-tab {
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg3);
background: transparent;
border: 0;
padding: 0.45rem 0.85rem;
border-radius: 2px;
cursor: pointer;
white-space: nowrap;
transition: all var(--dur) var(--ease);
}
.fin-tab:hover { color: var(--fg1); }
.fin-tab.active { color: var(--bg-deep); background: var(--gold); }
[data-theme="crimson"] .fin-tab.active { background: #C0392B; color: #fff; }
/* source / status pills */
.fin-pill {
display: inline-block;
font-family: var(--font-ui);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.15rem 0.5rem;
border-radius: 999px;
border: 1px solid var(--line-strong);
color: var(--fg3);
}
.fin-pill-auto { color: var(--gold); border-color: var(--gold); }
.fin-pill-manual { color: var(--fg2); border-color: var(--line-strong); }
.fin-pill-rec { color: var(--crimson-bright); border-color: var(--crimson-bright); }
/* category bars */
.fin-catrow { display: grid; grid-template-columns: 9rem 1fr 6rem; align-items: center; gap: 0.75rem; margin-bottom: 0.55rem; }
.fin-catlabel { font-size: 0.78rem; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-catbar { height: 8px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.fin-catbar-fill { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width var(--dur) var(--ease); }
.fin-catbar-fill.fin-fill-red { background: var(--red); }
.fin-catval { font-family: var(--font-feature); font-size: 0.82rem; color: var(--fg1); text-align: right; }
.fin-cat-head td { background: color-mix(in srgb, var(--panel-2) 55%, transparent); border-top: 1px solid var(--line); }
@media (max-width: 560px) { .fin-catrow { grid-template-columns: 6rem 1fr 5rem; gap: 0.5rem; } }
/* progress bars (budgets & savings) */
.fin-progress { height: 10px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin: 0.6rem 0; }
.fin-progress-bar { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width var(--dur) var(--ease); }
.fin-progress-bar.fin-bar-over { background: var(--red); }
.fin-progress-bar.fin-bar-gold { background: var(--gold); }
.fin-budget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.fin-budget { padding: 1.1rem 1.2rem; }
.fin-budget.fin-over { border-color: var(--red); }
.fin-budget-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.fin-budget-head h3 { font-family: var(--font-feature); font-weight: 400; font-size: 1.1rem; color: var(--fg1); margin: 0.15rem 0 0; }
.fin-budget-foot { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8rem; color: var(--fg2); }
.fin-alert { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--red); font-weight: 600; }
/* cash-flow chart */
.fin-cf-chart { display: flex; align-items: flex-end; gap: 0.4rem; height: 200px; padding: 1.25rem 1.25rem 0.5rem; overflow-x: auto; }
.fin-cf-col { flex: 1; min-width: 26px; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; height: 100%; }
.fin-cf-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.fin-cf-bar { width: 8px; max-width: 10px; border-radius: 6px 6px 0 0; min-height: 2px; transition: height var(--dur) var(--ease); }
.fin-cf-bar.fin-cf-inc { background: var(--green); }
.fin-cf-bar.fin-cf-exp { background: var(--red); }
.fin-cf-lbl { font-size: 0.62rem; color: var(--fg3); white-space: nowrap; }
.fin-cf-legend { display: flex; gap: 1.25rem; padding: 0.5rem 1.25rem 1.1rem; font-size: 0.76rem; color: var(--fg2); }
.fin-cf-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.fin-dot { width: 0.7rem; height: 0.7rem; border-radius: 3px; display: inline-block; }
.fin-dot.fin-cf-inc { background: var(--green); }
.fin-dot.fin-cf-exp { background: var(--red); }
/* ===== installed-app (PWA) safe areas — notch / Dynamic Island / home indicator ===== */
@supports (padding: env(safe-area-inset-bottom)) {
.topbar { padding-top: calc(0.6rem + env(safe-area-inset-top)); }
@media (max-width: 880px) {
.bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
.main { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
.fab { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}
}