/* --- Invoice Editor App Layout Fix --- */
html, body {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: auto;
}
#invoice-builder-section {
scroll-behavior: auto !important;
overscroll-behavior-y: auto;
}
body.invoice-editor-active {
overflow: hidden !important;
}
#invoice-editor-section.editor-layout {
height: var(--app-height);
display: flex;
flex-direction: column;
overflow: hidden;
}
.invoice-editor-main-wrap {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
padding-bottom: var(--dock-height);
}
.previewWorkspace {
flex: 1;
overflow: auto;
min-height: 0;
padding-bottom: var(--dock-height);
}
.styleDock {
--dock-height: clamp(240px, 28vh, 320px);
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: var(--dock-height);
z-index: 50;
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr;
padding: 0 0 calc(16px + env(safe-area-inset-bottom));
background: #fff;
}
.styleDock-head {
/* Row 1: tabs + actions */
}
.styleDock-carousel-shell {
min-height: 0;
overflow: hidden;
}
.styleDock-carousel {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
}
.styleDock-card {
height: clamp(100px, 12vh, 130px);
}
@media (max-height: 900px) {
.styleDock { --dock-height: clamp(240px, 28vh, 320px); }
}
@media (max-height: 800px) {
.styleDock { --dock-height: clamp(220px, 28vh, 300px); }
}
@media (max-height: 700px) {
.styleDock { --dock-height: clamp(200px, 28vh, 260px); }
}
/* CrewTime pages: section/page-level styling and overrides */
body.app-booting .container {
opacity: 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.stats-grid {
animation: fadeIn 0.3s ease-out 0.05s both;
}
.quick-actions {
animation: fadeIn 0.3s ease-out 0.1s both;
}
.dashboard-section {
animation: fadeIn 0.3s ease-out 0.15s both;
}
.dashboard-summary-card {
animation: fadeIn 0.3s ease-out both;
}
.dashboard-summary-card:nth-child(1) {
animation-delay: 0.18s;
}
.dashboard-summary-card:nth-child(2) {
animation-delay: 0.22s;
}
.dashboard-summary-card:nth-child(3) {
animation-delay: 0.26s;
}
.dashboard-summary-card:nth-child(4) {
animation-delay: 0.30s;
}
@media (max-width: 768px) {
.site-header {
padding: var(--space-2) var(--space-4);
}
.header-search-wrap {
position: static;
transform: none;
width: 100%;
margin-top: var(--space-2);
}
.auth-buttons {
width: 100%;
justify-content: stretch;
}
.auth-btn {
flex: 1;
padding: var(--space-3) var(--space-4);
}
.dashboard-shell {
padding: var(--space-4) var(--space-4) var(--space-8);
}
.dashboard-greeting {
font-size: 28px;
}
.stat-value {
font-size: 34px;
}
.tool-card {
flex: 0 0 85%;
padding: var(--space-5);
}
.job-summary-actions {
grid-template-columns: 1fr;
}
.job-day-row {
grid-template-columns: 1fr;
gap: var(--space-2);
}
button {
padding: var(--space-4);
font-size: var(--text-base);
}
.account-grid {
grid-template-columns: 1fr;
}
.quick-actions {
grid-template-columns: 1fr;
gap: var(--space-2);
}
.quick-action-btn {
width: 100%;
}
.invoice-stats-card {
grid-template-columns: 1fr 1fr;
padding: var(--space-4);
gap: var(--space-3);
}
.invoice-stat.highlight {
grid-column: 1 / -1;
}
#onboarding-section .account-section-content {
padding: 20px 12px 24px;
border-radius: 16px;
}
.onboarding-template-option {
min-width: 185px;
width: 185px;
}
h1 {
font-size: 36px;
}
}
.tools-section h2 {
display: none;
}
.dashboard-analytics-section .dashboard-section-title {
display: block;
}
.tools-grid {
display: flex;
gap: 26px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 8px 4px 18px;
scrollbar-width: none;
-ms-overflow-style: none;
background: transparent;
scroll-padding-left: 5%;
scroll-padding-right: 5%;
}
#tools-section .tools-grid {
width: 100vw;
margin-left: calc(50% - 50vw);
padding-left: 5%;
padding-right: 5%;
}
.tool-card {
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(226, 232, 240, 0.86);
border-radius: var(--radius-xl);
padding: var(--space-5);
cursor: pointer;
transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-in-out);
display: grid;
grid-template-columns: 1fr;
align-content: start;
gap: var(--space-3);
min-height: auto;
flex: 0 0 47%;
scroll-snap-align: center;
box-shadow:
0 18px 30px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.82);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
}
.tool-card:hover {
border-color: rgba(148, 163, 184, 0.54);
box-shadow:
0 24px 36px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
transform: translateY(-3px);
}
.tool-card:active {
transform: translateY(-1px);
}
.tools-grid {
margin-top: 32px;
}
.tool-card-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
background: linear-gradient(170deg, rgba(248, 250, 252, 0.96), rgba(226, 232, 240, 0.66));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.tool-card-content {
display: grid;
align-content: start;
gap: 6px;
}
.tool-card-content h3 {
color: var(--text-primary);
font-size: var(--text-lg);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0;
}
.tool-card-content p {
color: var(--text-secondary);
font-size: var(--text-sm);
margin: 0;
line-height: 1.45;
font-weight: 500;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tool-card-metric {
color: var(--text-primary);
font-size: 32px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
margin: var(--space-3) 0 0 0;
background: linear-gradient(135deg, #0f172a 0%, #2f8d6a 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.tool-card-submetric {
color: #718198;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.15px;
margin: 0;
}
.tools-grid::-webkit-scrollbar {
display: none;
}
.dashboard-shell {
width: min(1380px, 100%);
margin: 0 auto;
padding: var(--space-5) 3% var(--space-10);
position: relative;
}
.dashboard-shell::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(1100px 500px at 50% -10%, rgba(59, 130, 246, 0.08), transparent 65%),
radial-gradient(900px 420px at -8% -20%, rgba(255, 255, 255, 0.95), transparent 62%),
radial-gradient(780px 360px at 104% -18%, rgba(214, 231, 255, 0.6), transparent 68%);
pointer-events: none;
z-index: 0;
}
.dashboard-shell > * {
position: relative;
z-index: 1;
}
.dashboard-hero {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 48px;
padding: 2px 0 4px;
margin-bottom: 4px;
gap: 0;
}
.dashboard-greeting {
font-size: clamp(16px, 2vw, 21px);
font-weight: 700;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.2;
}
.dashboard-date-range {
display: block;
font-size: 11px;
color: var(--text-tertiary);
font-weight: 600;
margin: 2px 0 0;
opacity: 0.62;
}
.dashboard-local-mode {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin: 0 0 16px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.34);
background: rgba(248, 250, 252, 0.86);
}
.dashboard-local-copy {
color: #334155;
font-size: 13px;
font-weight: 600;
}
.dashboard-local-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.dashboard-local-actions .quick-action-btn {
padding: 8px 12px;
font-size: 12px;
}
.dashboard-onboarding {
margin: 0 0 18px;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.34);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.dashboard-onboarding-title {
font-size: 15px;
font-weight: 700;
color: #0f172a;
margin: 0 0 10px;
}
.dashboard-onboarding-list {
display: grid;
gap: 8px;
}
.dashboard-onboarding-item {
font-size: 13px;
font-weight: 600;
color: #334155;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid rgba(226, 232, 240, 0.95);
background: rgba(255, 255, 255, 0.78);
cursor: pointer;
transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
.dashboard-onboarding-item:hover {
border-color: rgba(59, 130, 246, 0.4);
transform: translateY(-1px);
background: rgba(248, 250, 252, 0.9);
}
.dashboard-onboarding-item.done {
color: #0f766e;
border-color: rgba(45, 212, 191, 0.42);
background: rgba(240, 253, 250, 0.82);
}
#onboarding-section {
background:
radial-gradient(760px 360px at 4% -18%, rgba(148, 163, 184, 0.24), transparent 64%),
radial-gradient(680px 320px at 100% -16%, rgba(191, 219, 254, 0.28), transparent 68%),
linear-gradient(180deg, #ecf2fb 0%, #e2eaf6 52%, #dde6f2 100%);
}
#onboarding-section .account-section-content {
max-width: 980px;
padding: 28px 20px 34px;
border-radius: 24px;
border: 1px solid rgba(203, 213, 225, 0.7);
background: rgba(236, 244, 252, 0.72);
box-shadow:
0 34px 56px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
}
#onboarding-section .account-header {
margin-bottom: 20px;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid rgba(203, 213, 225, 0.78);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(241, 247, 255, 0.78));
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}
#onboarding-section .account-email {
max-width: 62ch;
color: #4a5d78;
font-weight: 600;
font-size: 14px;
}
#onboarding-section .account-grid {
gap: 18px;
}
#onboarding-section .onboarding-card {
background: linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(245, 249, 255, 0.86));
border: 1px solid rgba(196, 210, 230, 0.86);
box-shadow:
0 16px 30px rgba(15, 23, 42, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
min-height: 0;
}
#onboarding-section .onboarding-card h3 {
margin-bottom: 12px;
color: #0f172a;
}
#onboarding-section .settings-panel {
background: rgba(248, 251, 255, 0.88);
border-color: rgba(209, 220, 237, 0.9);
}
.onboarding-template-scroll {
display: flex;
gap: 10px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 2px 2px 8px;
scroll-snap-type: x mandatory;
}
.onboarding-template-scroll::-webkit-scrollbar {
height: 8px;
}
.onboarding-template-scroll::-webkit-scrollbar-thumb {
background: #c0ccdd;
border-radius: 999px;
}
.onboarding-template-option {
min-width: 210px;
width: 210px;
margin: 0;
border: 1px solid #ccdae9;
border-radius: 12px;
background: #ffffff;
padding: 10px;
text-align: left;
cursor: pointer;
scroll-snap-align: start;
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.onboarding-template-option:hover {
transform: translateY(-1px);
border-color: #8fa8c7;
box-shadow: 0 12px 20px rgba(15, 23, 42, 0.12);
}
.onboarding-template-option.active {
border-color: #0f172a;
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.26);
}
.onboarding-template-option-title {
margin: 0 0 3px;
font-size: 13px;
font-weight: 800;
color: #0f172a;
line-height: 1.3;
}
.onboarding-template-option-copy {
margin: 0 0 8px;
font-size: 11px;
color: #64748b;
font-weight: 650;
}
.onboarding-template-option-preview {
border: 1px solid #dbe6f3;
border-radius: 10px;
overflow: hidden;
background: #ffffff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.onboarding-template-option-preview .invoice-template-stack {
transform: scale(0.34);
transform-origin: top left;
width: 294%;
margin-bottom: -158%;
pointer-events: none;
}
.onboarding-template-option-preview .invoice-template-canvas {
box-shadow: none;
border-width: 1px;
}
.onboarding-template-footer {
display: grid;
gap: 8px;
}
.onboarding-gallery-note {
margin: 0;
font-size: 12px;
font-weight: 700;
color: #3f4f67;
}
.dashboard-section-header {
margin: var(--space-8) 0 var(--space-5);
}
.dashboard-section-title {
font-size: 20px;
font-weight: 800;
color: var(--text-primary);
margin: 0 0 4px 0;
letter-spacing: -0.02em;
}
.dashboard-section-subtitle {
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
margin: 0;
opacity: 0.8;
}
.dashboard-stats,
.stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 0 0 var(--space-6);
}
.stat-card {
background: rgba(255, 255, 255, 0.74);
backdrop-filter: blur(14px) saturate(130%);
-webkit-backdrop-filter: blur(14px) saturate(130%);
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 22px;
padding: 22px 22px 20px;
transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease, border-color 240ms ease, background-color 240ms ease;
box-shadow:
0 16px 32px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
display: flex;
flex-direction: column;
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow:
0 24px 38px rgba(15, 23, 42, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
border-color: rgba(148, 163, 184, 0.38);
}
.stat-card-enhanced {
position: relative;
overflow: hidden;
}
.stat-card-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #2f8d6a 0%, #8b5cf6 100%);
opacity: 0;
transition: opacity var(--dur-2) ease;
}
.stat-card-enhanced:hover::before {
opacity: 1;
}
.stat-card-accent::before {
background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
}
.stat-card-icon-wrapper {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: #2f8d6a;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
transition: transform var(--dur-2) var(--ease-out);
}
.stat-card-accent .stat-card-icon-wrapper {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(239, 68, 68, 0.12) 100%);
color: #f59e0b;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}
.stat-card-enhanced:hover .stat-card-icon-wrapper {
transform: scale(1.08) rotate(2deg);
}
.stat-card-content {
display: grid;
align-content: start;
gap: 6px;
}
.stat-card-content h3 {
color: var(--text-primary);
font-size: var(--text-lg);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0;
}
.stat-card-content p {
color: var(--text-secondary);
font-size: var(--text-sm);
margin: 0;
line-height: 1.45;
font-weight: 500;
}
#dashboard-earnings-card .dashboard-earnings-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
#dashboard-earnings-card .stat-card-icon-wrapper {
margin-bottom: 0;
}
.dashboard-earnings-tabs {
margin: 0 0 6px 0;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
width: fit-content;
flex-wrap: nowrap;
}
.dashboard-earnings-tab {
border: 1px solid rgba(203, 213, 225, 0.95);
background: rgba(255, 255, 255, 0.82);
color: #334155;
border-radius: 999px;
padding: 4px 8px;
font-size: 11px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.dashboard-earnings-tab:hover {
border-color: rgba(148, 163, 184, 0.82);
background: rgba(248, 250, 252, 0.96);
color: #0f172a;
}
.dashboard-earnings-tab.active {
border-color: rgba(37, 99, 235, 0.45);
background: linear-gradient(135deg, rgba(239, 246, 255, 0.96) 0%, rgba(224, 242, 254, 0.94) 100%);
color: #1D4ED8;
box-shadow:
0 1px 3px rgba(30, 64, 175, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.stat-card-metric {
color: var(--text-primary);
font-size: 32px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
margin: var(--space-3) 0 0 0;
background: linear-gradient(135deg, #0f172a 0%, #2f8d6a 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-value {
font-size: clamp(30px, 3vw, 42px);
font-weight: 700;
color: #0f172a;
line-height: 1;
margin-bottom: 8px;
letter-spacing: -0.03em;
}
.stat-label {
font-size: 13px;
color: #64748b;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.stat-change {
font-size: 13px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
color: #64748b;
}
.stat-change.positive {
color: #3B82F6;
}
.stat-change.negative {
color: #dc2626;
}
.quick-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 0 0 var(--space-8);
padding-left: 8px;
}
.dashboard-quick-strip {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
margin: 0 0 var(--space-8);
padding: 8px;
border-radius: 14px;
border: 1px solid rgba(203, 213, 225, 0.74);
background: rgba(255, 255, 255, 0.76);
box-shadow: 0 5px 12px rgba(15, 23, 42, 0.04);
}
.dashboard-quick-strip-btn {
border: 1px solid rgba(148, 163, 184, 0.44);
border-radius: 10px;
background: rgba(255, 255, 255, 0.92);
color: #334155;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1;
padding: 9px 10px;
min-height: 34px;
width: 100%;
cursor: pointer;
transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease, color 150ms ease;
}
.dashboard-quick-strip-btn:hover {
border-color: rgba(37, 99, 235, 0.48);
background: rgba(239, 246, 255, 0.95);
color: #1D4ED8;
transform: translateY(-1px);
}
.dashboard-quick-strip-btn-primary {
border-color: rgba(37, 99, 235, 0.46);
background: linear-gradient(135deg, #2563EB, #1D4ED8);
color: #ffffff;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.26);
}
.dashboard-quick-strip-btn-primary:hover {
border-color: #14523d;
background: linear-gradient(135deg, #1D4ED8, #14523d);
color: #ffffff;
}
.dashboard-lower-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
margin-bottom: var(--space-6);
}
.dashboard-lower-col {
min-width: 0;
display: flex;
flex-direction: column;
}
.dashboard-quick-actions-col .dashboard-section-header,
.dashboard-analytics-section .dashboard-section-header {
margin-top: 0;
margin-bottom: 10px;
}
.dashboard-quick-actions-col .dashboard-quick-strip {
margin-bottom: 0;
}
.action-card {
width: 100%;
margin: 0;
padding: 24px;
min-height: 180px;
border-radius: 20px;
border: none;
outline: none;
cursor: pointer;
transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
text-align: left;
gap: 16px;
}
.action-card:focus-visible {
outline: 2px solid rgba(59, 130, 246, 0.5);
outline-offset: 2px;
}
.action-card-icon {
width: 60px;
height: 60px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease;
}
.action-card-primary {
background: rgba(255, 255, 255, 0.8);
color: var(--text-primary);
border: 1px solid rgba(226, 232, 240, 0.88);
box-shadow:
0 8px 16px rgba(15, 23, 42, 0.04),
0 2px 4px rgba(15, 23, 42, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.84);
position: relative;
overflow: hidden;
}
.action-card-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59,130,246,0.08), transparent);
transition: left 0.5s ease;
}
.action-card-primary:hover::before {
left: 100%;
}
.action-card-primary .action-card-icon {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
color: #2f8d6a;
box-shadow:
0 2px 8px rgba(59, 130, 246, 0.12);
}
.action-card-primary:hover {
border-color: rgba(148, 163, 184, 0.6);
background: rgba(255, 255, 255, 0.95);
transform: translateY(-2px);
box-shadow:
0 16px 28px rgba(15, 23, 42, 0.08),
0 4px 8px rgba(15, 23, 42, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.action-card-primary:hover .action-card-icon {
transform: scale(1.08);
box-shadow:
0 4px 12px rgba(59, 130, 246, 0.18);
}
#dashboard-unpaid-card:focus-visible {
outline: 2px solid rgba(239, 68, 68, 0.42);
outline-offset: 2px;
}
.action-card-secondary {
background: rgba(255, 255, 255, 0.8);
color: var(--text-primary);
border: 1px solid rgba(226, 232, 240, 0.88);
box-shadow:
0 8px 16px rgba(15, 23, 42, 0.04),
0 2px 4px rgba(15, 23, 42, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.84);
position: relative;
}
.action-card-secondary .action-card-icon {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
color: #2f8d6a;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}
.action-card-secondary:hover {
border-color: rgba(148, 163, 184, 0.6);
background: rgba(255, 255, 255, 0.95);
transform: translateY(-2px);
box-shadow:
0 16px 28px rgba(15, 23, 42, 0.08),
0 4px 8px rgba(15, 23, 42, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.action-card-secondary:hover .action-card-icon {
transform: scale(1.08);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.18);
}
.action-card-content {
display: flex;
flex-direction: column;
gap: 6px;
}
.action-card-title {
font-size: 16px;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0;
}
.action-card-description {
font-size: 13px;
line-height: 1.4;
opacity: 0.85;
font-weight: 500;
margin: 0;
}
.dashboard-section {
margin: 36px 0;
}
.dashboard-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.dashboard-summary-card {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(226, 232, 240, 0.88);
border-radius: 18px;
padding: 20px;
box-shadow:
0 8px 16px rgba(15, 23, 42, 0.04),
0 2px 4px rgba(15, 23, 42, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.84);
transition: all var(--dur-2) ease;
}
.dashboard-summary-card:hover {
transform: translateY(-2px);
box-shadow:
0 12px 24px rgba(15, 23, 42, 0.08),
0 4px 8px rgba(15, 23, 42, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.dashboard-summary-card-accent {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
border-color: rgba(59, 130, 246, 0.2);
}
.dashboard-summary-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.dashboard-summary-header svg {
color: #64748b;
opacity: 0.6;
}
.dashboard-summary-card-accent .dashboard-summary-header svg {
color: #2f8d6a;
opacity: 0.8;
}
.dashboard-summary-title {
font-size: 14px;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
}
.dashboard-summary-stats {
display: flex;
flex-direction: column;
gap: 12px;
}
.dashboard-summary-stat {
display: flex;
align-items: baseline;
gap: 8px;
}
.dashboard-summary-stat-value {
font-size: 26px;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.dashboard-summary-stat-label {
font-size: 13px;
font-weight: 600;
color: var(--text-tertiary);
}
.dashboard-summary-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.dashboard-summary-payment {
display: flex;
flex-direction: column;
gap: 6px;
}
.dashboard-summary-payment-client {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
}
.dashboard-summary-payment-amount {
font-size: 22px;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.dashboard-summary-payment-date {
font-size: 12px;
font-weight: 600;
color: var(--text-tertiary);
}
.dashboard-summary-card-alert {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.08) 100%);
border-color: rgba(239, 68, 68, 0.2);
}
.dashboard-summary-card-alert:hover {
border-color: rgba(239, 68, 68, 0.3);
box-shadow: 0 8px 24px rgba(239, 68, 68, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.dashboard-summary-payments-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.dashboard-summary-payment-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-top: 4px;
}
.dashboard-summary-payment-empty {
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
}
/* Earnings Chart */
.earnings-chart-card {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)),
radial-gradient(120% 120% at 0% 0%, rgba(219, 234, 254, 0.34), rgba(219, 234, 254, 0));
border: 1px solid rgba(191, 219, 254, 0.8);
border-top-color: rgba(96, 165, 250, 0.62);
border-radius: 18px;
padding: 32px;
box-shadow:
0 12px 24px rgba(15, 23, 42, 0.06),
0 3px 8px rgba(15, 23, 42, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition: all 0.25s ease;
}
.chart-period-select {
padding: 8px 16px;
border: 1px solid rgba(191, 219, 254, 0.86);
border-radius: 10px;
background: rgba(255, 255, 255, 0.95);
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.chart-period-select:hover {
border-color: rgba(37, 99, 235, 0.42);
background: white;
color: #1D4ED8;
}
.chart-period-select:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.2);
outline-offset: 2px;
}
.earnings-chart-wrapper {
position: relative;
width: 100%;
height: 260px;
border-radius: 14px;
border: 1px solid rgba(191, 219, 254, 0.62);
background:
linear-gradient(180deg, rgba(239, 246, 255, 0.62), rgba(255, 255, 255, 0.84)),
repeating-linear-gradient(
90deg,
rgba(37, 99, 235, 0.04) 0px,
rgba(37, 99, 235, 0.04) 1px,
transparent 1px,
transparent 34px
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.94),
inset 0 -18px 28px rgba(219, 234, 254, 0.18),
0 10px 22px rgba(15, 23, 42, 0.06);
padding: 10px 10px 0;
}
.earnings-chart {
width: 100%;
height: 190px;
}
.dashboard-analytics-section {
margin-top: 22px;
margin-bottom: 24px;
}
.dashboard-analytics-section .dashboard-section-header {
margin-top: 0;
margin-bottom: 10px;
}
.dashboard-analytics-section .earnings-chart-card {
padding: 22px 22px 18px;
}
.dashboard-lower-grid .dashboard-analytics-section {
margin-top: 10px;
margin-bottom: 0;
background:
linear-gradient(170deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.94) 52%, rgba(241, 247, 255, 0.9)),
radial-gradient(140% 130% at 100% -8%, rgba(191, 219, 254, 0.3), rgba(219, 234, 254, 0));
border: 1px solid rgba(186, 205, 232, 0.72);
border-top-color: rgba(96, 165, 250, 0.5);
border-radius: 18px;
padding: 16px 16px 14px;
box-shadow:
0 14px 30px rgba(15, 23, 42, 0.08),
0 3px 8px rgba(15, 23, 42, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.94);
}
.dashboard-lower-grid .dashboard-analytics-section .dashboard-section-header {
margin-top: 0;
margin-bottom: 10px;
}
.dashboard-lower-grid .dashboard-analytics-section .earnings-chart-card {
padding: 0;
border: none;
background: transparent;
box-shadow: none;
}
.dashboard-lower-grid .dashboard-analytics-section .chart-period-select {
border-color: rgba(186, 205, 232, 0.78);
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.dashboard-lower-grid .dashboard-analytics-section .chart-period-select:hover {
border-color: rgba(59, 130, 246, 0.44);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}
.dashboard-activity-card {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)),
radial-gradient(130% 120% at 100% 0%, rgba(219, 234, 254, 0.28), rgba(219, 234, 254, 0));
border: 1px solid rgba(191, 219, 254, 0.76);
border-top-color: rgba(96, 165, 250, 0.58);
border-radius: 18px;
padding: 16px 16px 14px;
box-shadow:
0 10px 22px rgba(15, 23, 42, 0.06),
0 2px 6px rgba(15, 23, 42, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
display: grid;
align-content: start;
gap: 10px;
margin-top: 10px;
flex: 1 1 auto;
min-height: 0;
}
.dashboard-activity-title {
margin: 0;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.dashboard-activity-list {
display: grid;
gap: 6px;
flex: 1 1 auto;
min-height: 0;
max-height: 100%;
overflow-y: auto;
padding-right: 2px;
}
.dashboard-activity-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.dashboard-activity-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.dashboard-activity-item-main {
min-width: 0;
display: grid;
gap: 2px;
}
.dashboard-activity-item-title {
font-size: 12px;
font-weight: 800;
color: #0f172a;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard-activity-item-meta {
font-size: 11px;
font-weight: 600;
color: #64748b;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard-activity-item-time {
font-size: 11px;
font-weight: 700;
color: #334155;
text-align: right;
white-space: nowrap;
}
.dashboard-activity-empty {
font-size: 12px;
font-weight: 600;
color: #64748b;
padding: 6px 0 2px;
}
.chart-grid-line {
stroke: rgba(59, 130, 246, 0.18);
stroke-width: 1;
}
.earnings-bar {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation: barSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
cursor: pointer;
stroke: rgba(255, 255, 255, 0.72);
stroke-width: 0.32;
filter: drop-shadow(0 8px 14px rgba(37, 99, 235, 0.18));
}
@keyframes barSlideUp {
from {
opacity: 0;
transform: translateY(20px) scaleY(0.3);
}
to {
opacity: 1;
transform: translateY(0) scaleY(1);
}
}
.earnings-bar:hover {
filter: brightness(1.08) saturate(1.05) drop-shadow(0 10px 16px rgba(37, 99, 235, 0.24));
transform: translateY(-2px);
}
.bar-value-label {
fill: var(--text-primary);
font-size: 4px;
font-weight: 700;
text-anchor: middle;
pointer-events: none;
}
.earnings-chart-value-labels {
position: absolute;
top: 10px;
left: 10px;
width: calc(100% - 20px);
height: 190px;
pointer-events: none;
}
.bar-value-label-html {
position: absolute;
transform: translate(-50%, -50%);
font-size: 11px;
font-weight: 700;
color: #1e3a8a;
white-space: nowrap;
pointer-events: none;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(191, 219, 254, 0.9);
border-radius: 999px;
padding: 4px 8px;
box-shadow: 0 4px 10px rgba(30, 64, 175, 0.12);
}
.earnings-chart-labels {
display: flex;
justify-content: space-between;
margin-top: 20px;
position: relative;
}
.earnings-chart-label {
position: absolute;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.earnings-chart-label-month {
font-size: 11px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.08em;
border: 1px solid rgba(219, 234, 254, 0.88);
background: rgba(255, 255, 255, 0.86);
border-radius: 999px;
padding: 3px 7px;
}
.earnings-chart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
color: var(--text-muted);
font-size: 14px;
font-weight: 500;
text-align: center;
padding: 20px;
}
#earnings-chart-drilldown {
height: auto;
min-height: 0;
align-items: flex-start;
justify-content: flex-start;
text-align: left;
padding: 12px 0 0;
font-size: 12px;
color: #334155;
}
.chart-drilldown-modal-content {
width: min(96vw, 780px);
max-height: 90vh;
}
.chart-drilldown-modal-body {
overflow: auto;
padding: 6px 4px 4px;
display: grid;
gap: 10px;
align-content: start;
}
.chart-drilldown-summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
border: 1px solid #dbe4ef;
border-radius: 12px;
background: #fff;
padding: 10px 12px;
font-size: 13px;
color: #334155;
}
.chart-drilldown-summary strong {
font-size: 14px;
color: #0f172a;
}
.chart-drilldown-grid {
display: grid;
gap: 10px;
}
.chart-drilldown-card {
border: 1px solid #dbe4ef;
border-radius: 12px;
background: #fff;
padding: 12px;
display: grid;
gap: 8px;
}
.chart-drilldown-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
}
.chart-drilldown-card-title-wrap {
min-width: 0;
}
.chart-drilldown-card-title {
margin: 0;
font-size: 14px;
font-weight: 700;
color: #0f172a;
overflow-wrap: anywhere;
}
.chart-drilldown-card-meta {
margin-top: 3px;
font-size: 12px;
color: #64748b;
}
.chart-drilldown-card-total {
white-space: nowrap;
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
.chart-drilldown-lines {
display: grid;
gap: 6px;
}
.chart-drilldown-line {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
font-size: 12px;
color: #334155;
}
.chart-drilldown-line span:first-child {
min-width: 0;
overflow-wrap: anywhere;
}
.chart-drilldown-line-value {
white-space: nowrap;
font-weight: 600;
color: #0f172a;
}
.chart-drilldown-more {
font-size: 11px;
color: #64748b;
}
.chart-drilldown-actions {
margin-top: 2px;
}
.chart-drilldown-open {
border-color: #1D4ED8 !important;
background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
color: #ffffff !important;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.26) !important;
}
.chart-drilldown-open:hover,
.chart-drilldown-open:focus-visible {
border-color: #14523d !important;
background: linear-gradient(135deg, #1D4ED8, #14523d) !important;
color: #ffffff !important;
}
.chart-drilldown-footer {
font-size: 12px;
color: #64748b;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.section-title {
font-size: 20px;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.02em;
margin: 0;
}
.section-badge {
background: rgba(254, 226, 226, 0.75);
color: #b91c1c;
border: 1px solid rgba(248, 113, 113, 0.38);
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 650;
display: inline-flex;
align-items: center;
gap: 6px;
}
.activity-feed {
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 24px;
overflow: hidden;
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
box-shadow:
0 20px 36px rgba(15, 23, 42, 0.08),
0 4px 8px rgba(15, 23, 42, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.dashboard-jobs-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 16px;
}
#dashboard-activity-section .dashboard-jobs-table {
width: 100%;
min-width: 0;
table-layout: fixed;
}
#dashboard-activity-section .dashboard-jobs-table th,
#dashboard-activity-section .dashboard-jobs-table td {
padding-top: 14px;
padding-bottom: 14px;
}
#dashboard-activity-section .dashboard-jobs-table .job-actions {
white-space: nowrap;
}
.activity-item {
padding: 18px 22px;
border-bottom: 1px solid rgba(203, 213, 225, 0.42);
transition: background-color 150ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-item:hover {
background: rgba(248, 250, 252, 0.85);
transform: translateY(-1px);
}
.activity-left {
flex: 1;
min-width: 0;
}
.activity-title {
font-size: 16px;
font-weight: 640;
color: #0f172a;
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.activity-meta {
font-size: 13px;
color: #64748b;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-weight: 520;
}
.activity-meta-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid rgba(203, 213, 225, 0.8);
background: rgba(248, 250, 252, 0.9);
color: #475569;
font-size: 12px;
font-weight: 640;
line-height: 1.2;
}
.activity-status-pill {
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 11px;
}
.activity-status-paid {
border-color: rgba(16, 185, 129, 0.4);
background: rgba(239, 246, 255, 0.9);
color: #2563EB;
}
.activity-status-sent {
border-color: rgba(59, 130, 246, 0.4);
background: rgba(239, 246, 255, 0.9);
color: #1D4ED8;
}
.activity-status-draft {
border-color: rgba(148, 163, 184, 0.42);
background: rgba(248, 250, 252, 0.92);
color: #475569;
}
.activity-meta-divider {
color: #cbd5e1;
}
.dashboard-invoices-card {
border-radius: 18px;
overflow: hidden;
}
.dashboard-invoices-card-head {
padding: 14px 16px 6px;
border-bottom: 1px solid rgba(226, 232, 240, 0.82);
background: rgba(248, 250, 252, 0.62);
}
.dashboard-invoices-filters {
display: inline-flex;
gap: 8px;
flex-wrap: wrap;
}
.dashboard-invoices-filter-btn {
border: 1px solid rgba(148, 163, 184, 0.34);
background: rgba(255, 255, 255, 0.88);
color: #334155;
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
font-weight: 650;
cursor: pointer;
transition: all 150ms ease;
}
.dashboard-invoices-filter-btn.active {
background: rgba(239, 246, 255, 0.96);
border-color: rgba(59, 130, 246, 0.42);
color: #1D4ED8;
}
.dashboard-invoices-list {
display: grid;
}
.dashboard-invoice-row {
display: grid;
grid-template-columns: minmax(0, 1.4fr) auto auto auto;
gap: 10px;
align-items: center;
width: 100%;
padding: 13px 16px;
border: 0;
border-bottom: 1px solid rgba(226, 232, 240, 0.68);
background: transparent;
text-align: left;
cursor: pointer;
}
.dashboard-invoice-row:last-child {
border-bottom: 0;
}
.dashboard-invoice-row:hover {
background: rgba(248, 250, 252, 0.82);
}
.dashboard-invoice-main {
min-width: 0;
display: grid;
gap: 3px;
}
.dashboard-invoice-client {
font-size: 14px;
font-weight: 680;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard-invoice-role {
font-size: 12px;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard-invoice-amount {
font-size: 14px;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
}
.dashboard-invoice-due {
font-size: 12px;
color: #64748b;
white-space: nowrap;
text-align: right;
min-width: 110px;
display: inline-flex;
justify-content: flex-end;
}
.dashboard-invoice-row-due-soon {
grid-template-columns: minmax(0, 1fr) auto;
}
.dashboard-invoice-due-inline {
text-align: right;
font-weight: 620;
color: #475569;
min-width: 110px;
display: inline-flex;
justify-content: flex-end;
}
.dashboard-invoice-status {
justify-self: end;
}
.dashboard-invoices-empty {
padding: 18px 16px;
display: grid;
gap: 10px;
justify-items: start;
}
.dashboard-invoices-empty-text {
font-size: 13px;
color: #64748b;
font-weight: 600;
}
#dashboard-draft-resume-section .dashboard-next-card {
display: grid;
grid-template-rows: auto 1fr;
min-height: 144px;
height: 100%;
max-height: var(--work-now-fixed-height);
}
#dashboard-draft-resume-section .dashboard-next-card-head {
padding: 12px 14px 8px;
border-bottom: 1px solid rgba(226, 232, 240, 0.82);
background: rgba(248, 250, 252, 0.62);
}
#dashboard-draft-resume-section .dashboard-next-card-title {
font-size: 14px;
font-weight: 720;
color: #0f172a;
letter-spacing: -0.01em;
}
#dashboard-draft-resume-section .dashboard-next-card-body {
padding: 10px 12px 12px;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 8px;
min-height: 0;
}
#dashboard-draft-resume-section .dashboard-next-card .dashboard-invoices-filters {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
width: 100%;
align-items: stretch;
height: 34px;
padding: 0;
border: 1px solid rgba(191, 219, 254, 0.82);
border-radius: 11px;
background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.86));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
0 2px 6px rgba(15, 23, 42, 0.04);
overflow: hidden;
}
#dashboard-draft-resume-section .dashboard-next-card .dashboard-invoices-filter-btn {
-webkit-appearance: none;
appearance: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 34px;
align-self: stretch;
border: 0;
border-right: 1px solid rgba(191, 219, 254, 0.78);
border-radius: 0;
background: transparent;
padding: 0 8px;
margin: 0;
font-size: 11px;
font-weight: 720;
letter-spacing: 0.01em;
color: #475569;
text-align: center;
min-height: 0;
line-height: 1;
box-sizing: border-box;
transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
#dashboard-draft-resume-section .dashboard-next-card .dashboard-invoices-filter-btn:last-child {
border-right: 0;
}
#dashboard-draft-resume-section .dashboard-next-card .dashboard-invoices-filter-btn:hover {
background: rgba(239, 246, 255, 0.62);
color: #1e3a8a;
}
#dashboard-draft-resume-section .dashboard-next-card .dashboard-invoices-filter-btn.active {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(59, 130, 246, 0.24));
color: #1D4ED8;
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3);
}
#dashboard-draft-resume-section .dashboard-next-card .dashboard-invoices-list {
grid-row: 2;
min-height: 0;
height: 100%;
max-height: none;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
border-radius: 10px;
border: 1px solid rgba(226, 232, 240, 0.72);
background: rgba(255, 255, 255, 0.68);
}
#dashboard-draft-resume-section .dashboard-next-card .dashboard-invoice-row {
padding: 7px 9px;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 7px;
}
#dashboard-draft-resume-section .dashboard-next-card .dashboard-invoice-client {
font-size: 12px;
}
#dashboard-draft-resume-section .dashboard-next-card .dashboard-invoice-role {
font-size: 10px;
}
#dashboard-draft-resume-section .dashboard-next-card .dashboard-invoice-amount {
font-size: 12px;
}
#dashboard-draft-resume-section .dashboard-next-card .dashboard-invoice-due {
grid-column: 1 / -1;
text-align: left;
font-size: 10px;
}
#dashboard-draft-resume-section .dashboard-next-card .dashboard-invoices-empty {
grid-row: 2;
height: 100%;
max-height: none;
padding: 10px 2px 2px;
gap: 8px;
min-height: 100%;
align-content: center;
justify-items: center;
text-align: center;
}
@media (max-width: 980px) {
.dashboard-invoice-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.dashboard-invoice-status {
justify-self: start;
}
.dashboard-invoice-due {
text-align: left;
}
#dashboard-draft-resume-section .dashboard-draft-grid {
grid-auto-rows: auto;
}
#dashboard-draft-resume-section .dashboard-work-now-left {
height: auto;
}
#dashboard-draft-resume-section .dashboard-next-card {
max-height: none;
}
}
#dashboard-draft-resume-section .dashboard-draft-grid {
--work-now-fixed-height: 388px;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 14px;
align-items: stretch;
grid-auto-rows: var(--work-now-fixed-height);
}
#dashboard-draft-resume-section .dashboard-work-now-left {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: 14px;
align-content: stretch;
min-height: 100%;
height: var(--work-now-fixed-height);
}
#dashboard-draft-resume-section .activity-feed {
border-radius: 18px;
border-color: rgba(191, 219, 254, 0.85);
background: linear-gradient(140deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.78));
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
}
#dashboard-draft-resume-section #dashboard-draft-card {
border: 1px solid rgba(96, 165, 250, 0.58);
box-shadow:
0 16px 32px rgba(37, 99, 235, 0.14),
0 6px 14px rgba(15, 23, 42, 0.08);
background: linear-gradient(142deg, rgba(255, 255, 255, 0.98), rgba(219, 234, 254, 0.86));
height: 100%;
}
#dashboard-draft-resume-section .dashboard-draft-card .activity-item {
min-height: 168px;
padding: 18px 20px;
gap: 12px;
}
#dashboard-draft-resume-section #dashboard-draft-card .activity-item {
min-height: 206px;
padding: 24px;
}
#dashboard-draft-resume-section #dashboard-work-now-actions-card {
border: 1px solid rgba(191, 219, 254, 0.76);
border-top-color: rgba(147, 197, 253, 0.9);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9)),
radial-gradient(140% 140% at -10% 0%, rgba(219, 234, 254, 0.5), rgba(219, 234, 254, 0)),
linear-gradient(90deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0));
box-shadow:
0 14px 30px rgba(15, 23, 42, 0.08),
0 4px 10px rgba(15, 23, 42, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
padding: 14px;
position: relative;
overflow: hidden;
}
#dashboard-draft-resume-section #dashboard-work-now-actions-card::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(120deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 46%);
}
.dashboard-work-now-actions-title {
font-size: 13px;
font-weight: 800;
color: #0f172a;
letter-spacing: 0.02em;
margin-bottom: 10px;
text-transform: uppercase;
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 7px;
}
.dashboard-work-now-actions-title::before {
content: '';
width: 8px;
height: 8px;
border-radius: 999px;
background: linear-gradient(135deg, #60A5FA, #2563EB);
box-shadow: 0 0 0 4px rgba(191, 219, 254, 0.55);
}
.dashboard-work-now-actions-buttons {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
position: relative;
z-index: 1;
}
.dashboard-work-now-action-btn {
border: 1px solid rgba(148, 163, 184, 0.42);
border-radius: 11px;
background: rgba(255, 255, 255, 0.96);
color: #334155;
font-size: 12px;
font-weight: 740;
line-height: 1.2;
padding: 10px 8px;
cursor: pointer;
box-shadow:
0 2px 6px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.dashboard-work-now-action-btn:hover {
border-color: rgba(37, 99, 235, 0.5);
background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.95));
color: #1D4ED8;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(37, 99, 235, 0.12);
}
#dashboard-draft-resume-section .dashboard-draft-card:not(.dashboard-next-card) .activity-item {
display: grid;
grid-template-columns: 1fr;
align-content: start;
}
#dashboard-draft-resume-section .dashboard-draft-card:not(.dashboard-next-card) .activity-right {
justify-content: flex-start;
margin-top: 10px;
}
#dashboard-draft-resume-section .activity-title {
font-size: 21px;
line-height: 1.25;
margin-bottom: 10px;
font-weight: 760;
letter-spacing: -0.01em;
color: #0f172a;
}
#dashboard-draft-resume-section #dashboard-draft-card .activity-title {
font-size: 25px;
line-height: 1.2;
margin-bottom: 12px;
letter-spacing: -0.02em;
font-weight: 800;
}
.dashboard-draft-kicker {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.36);
background: rgba(248, 250, 252, 0.88);
color: #334155;
font-size: 11px;
font-weight: 680;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.04em;
width: fit-content;
}
.dashboard-draft-details {
display: grid;
gap: 7px;
font-size: 14px;
color: #475569;
font-weight: 620;
line-height: 1.45;
}
#dashboard-draft-resume-section #dashboard-draft-card .dashboard-draft-details {
font-size: 15px;
gap: 8px;
color: #334155;
}
#dashboard-draft-resume-section #dashboard-draft-continue-btn {
border-color: #1D4ED8;
background: linear-gradient(135deg, #2563EB, #1D4ED8);
color: #ffffff;
min-width: 128px;
min-height: 40px;
padding: 9px 18px;
font-size: 13px;
font-weight: 760;
box-shadow: 0 10px 22px rgba(37, 99, 235, 0.3);
}
#dashboard-draft-resume-section #dashboard-draft-continue-btn:hover {
border-color: #14523d;
background: linear-gradient(135deg, #1D4ED8, #14523d);
color: #ffffff;
box-shadow: 0 12px 24px rgba(30, 64, 175, 0.34);
}
#dashboard-draft-resume-section .dashboard-draft-card-placeholder {
border-color: rgba(203, 213, 225, 0.82);
background: linear-gradient(140deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.82));
}
#dashboard-draft-resume-section .dashboard-draft-card-placeholder .dashboard-draft-kicker {
color: #64748b;
border-color: rgba(203, 213, 225, 0.92);
background: rgba(248, 250, 252, 0.94);
}
#dashboard-draft-resume-section .dashboard-draft-card-placeholder .activity-title {
color: #334155;
}
#dashboard-draft-resume-section .dashboard-draft-card-placeholder .dashboard-draft-details {
color: #64748b;
}
@media (max-width: 980px) {
#dashboard-draft-resume-section .dashboard-draft-grid {
grid-template-columns: 1fr;
}
}
.activity-right {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.activity-amount {
font-size: 22px;
font-weight: 690;
color: #0f172a;
white-space: nowrap;
letter-spacing: -0.02em;
}
.activity-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.activity-action-btn {
min-width: 84px;
padding: 7px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 640;
border: 1px solid rgba(148, 163, 184, 0.38);
background: rgba(255, 255, 255, 0.84);
color: #334155;
cursor: pointer;
text-align: center;
transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.activity-action-btn[data-action="view"] {
border-color: rgba(59, 130, 246, 0.42);
background: rgba(239, 246, 255, 0.95);
color: #1D4ED8;
}
.activity-action-btn[data-action="send"] {
border-color: rgba(148, 163, 184, 0.45);
background: rgba(255, 255, 255, 0.9);
color: #334155;
}
.activity-action-btn[data-action="toggle-paid"] {
border-color: rgba(16, 185, 129, 0.35);
background: rgba(239, 246, 255, 0.92);
color: #2563EB;
}
.activity-action-btn:hover {
border-color: rgba(59, 130, 246, 0.5);
color: #2563EB;
background: rgba(239, 246, 255, 0.94);
transform: translateY(-1px);
}
.alert-list {
background: linear-gradient(180deg, rgba(254, 242, 242, 0.86), rgba(255, 237, 237, 0.84));
border: 1px solid rgba(248, 113, 113, 0.35);
border-radius: 18px;
padding: 16px 20px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.alert-item {
padding: 12px 0;
border-bottom: 1px solid rgba(248, 113, 113, 0.26);
font-size: 14px;
color: #7f1d1d;
display: flex;
justify-content: space-between;
gap: 12px;
font-weight: 560;
}
.alert-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.alert-item.overdue {
color: #b91c1c;
font-weight: 680;
}
.view-all-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #2563EB;
font-weight: 640;
font-size: 14px;
margin-top: 14px;
text-decoration: none;
transition: gap 0.2s ease, color 0.2s ease;
}
.view-all-link:hover {
gap: 10px;
color: #1D4ED8;
}
body.dark-mode .dashboard-shell::before {
background:
radial-gradient(980px 420px at -8% -20%, rgba(59, 130, 246, 0.16), transparent 64%),
radial-gradient(820px 380px at 104% -18%, rgba(15, 23, 42, 0.34), transparent 70%);
}
body.dark-mode .dashboard-greeting {
color: #f8fafc;
}
body.dark-mode .dashboard-date-range {
color: #a5b4c9;
}
body.dark-mode .dashboard-local-mode {
background: rgba(15, 23, 42, 0.62);
border-color: rgba(71, 85, 105, 0.56);
}
body.dark-mode .dashboard-local-copy {
color: #d6e0ef;
}
body.dark-mode .dashboard-onboarding {
background: rgba(15, 23, 42, 0.62);
border-color: rgba(71, 85, 105, 0.56);
}
body.dark-mode .dashboard-onboarding-title {
color: #f8fafc;
}
body.dark-mode .dashboard-onboarding-item {
color: #cdd8e7;
border-color: rgba(71, 85, 105, 0.62);
background: rgba(15, 23, 42, 0.7);
}
body.dark-mode .dashboard-onboarding-item.done {
color: #67e8f9;
border-color: rgba(34, 211, 238, 0.46);
background: rgba(8, 47, 73, 0.62);
}
#front-page-section {
position: relative;
overflow: hidden;
background:
radial-gradient(1200px 560px at 0% -20%, rgba(148, 163, 184, 0.2), transparent 66%),
radial-gradient(980px 460px at 100% -10%, rgba(191, 219, 254, 0.34), transparent 62%),
linear-gradient(180deg, #fbfcff 0%, #f5f8fd 42%, #edf2fb 100%);
}
#front-page-section::before,
#front-page-section::after {
content: '';
position: absolute;
border-radius: 999px;
pointer-events: none;
filter: blur(2px);
}
#front-page-section::before {
width: 440px;
height: 440px;
top: -180px;
left: -120px;
background: radial-gradient(circle at 40% 40%, rgba(30, 64, 175, 0.22), rgba(30, 64, 175, 0));
animation: ctFrontGlow 9s ease-in-out infinite;
}
#front-page-section::after {
width: 520px;
height: 520px;
bottom: -250px;
right: -140px;
background: radial-gradient(circle at 60% 50%, rgba(8, 145, 178, 0.22), rgba(8, 145, 178, 0));
animation: ctFrontGlow 10s ease-in-out infinite reverse;
}
.front-shell {
width: min(1220px, 100%);
margin: 0 auto;
padding: 36px 5% 56px;
position: relative;
z-index: 1;
display: grid;
gap: 24px;
perspective: 1200px;
}
.front-hero-panel {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 22px;
align-items: stretch;
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 30px;
padding: 28px;
background: linear-gradient(138deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 255, 0.72));
box-shadow:
0 40px 60px rgba(15, 23, 42, 0.12),
0 10px 24px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
backdrop-filter: blur(18px) saturate(125%);
-webkit-backdrop-filter: blur(18px) saturate(125%);
transform: translateZ(0);
position: relative;
overflow: hidden;
}
.front-hero-panel::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(115deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 42%);
z-index: 0;
}
.front-copy,
.front-visual {
position: relative;
z-index: 1;
}
.front-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #0f172a;
margin-bottom: 14px;
}
.front-kicker::before {
content: '';
width: 26px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, #0f172a, #0891b2);
}
.front-title {
font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
font-size: clamp(38px, 6vw, 62px);
line-height: 0.95;
letter-spacing: -0.045em;
color: #020817;
margin: 0;
text-wrap: balance;
}
.front-title-accent {
display: block;
font-size: clamp(15px, 2vw, 20px);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 700;
color: #0e7490;
margin-top: 14px;
}
.front-subtitle {
margin: 16px 0 0;
color: #46576d;
font-size: 16px;
line-height: 1.65;
max-width: 56ch;
}
.front-cta-row {
margin-top: 26px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.front-primary-cta,
.front-secondary-cta {
width: auto;
margin: 0;
padding: 12px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: transform 180ms var(--ease-out), box-shadow 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.front-primary-cta {
border: 1px solid rgba(15, 23, 42, 0.88);
background: linear-gradient(126deg, #0b1220, #151f30 50%, #24344c 100%);
color: #f8fafc;
box-shadow: 0 16px 26px rgba(2, 6, 23, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.front-secondary-cta {
border: 1px solid rgba(148, 163, 184, 0.42);
background: rgba(255, 255, 255, 0.64);
color: #0f172a;
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
}
.front-primary-cta:hover,
.front-secondary-cta:hover {
transform: translateY(-2px);
}
.front-primary-cta:hover {
box-shadow: 0 22px 34px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.front-secondary-cta:hover {
background: rgba(255, 255, 255, 0.96);
border-color: rgba(15, 23, 42, 0.36);
}
.front-micro-copy {
margin-top: 12px;
font-size: 12px;
font-weight: 600;
color: #64748b;
}
.front-draft-analytics {
margin-top: 14px;
border: 1px solid rgba(203, 213, 225, 0.9);
border-radius: 18px;
padding: 14px 14px 12px;
background: linear-gradient(152deg, rgba(255, 255, 255, 0.9), rgba(241, 247, 255, 0.78));
box-shadow: 0 16px 28px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.front-draft-analytics-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.front-draft-analytics-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 800;
color: #0f172a;
}
.front-draft-analytics-range {
font-size: 11px;
font-weight: 700;
color: #64748b;
}
.front-draft-analytics-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 10px;
}
.front-draft-kpi {
border: 1px solid rgba(219, 229, 242, 0.92);
border-radius: 12px;
padding: 8px 9px;
background: rgba(255, 255, 255, 0.76);
display: grid;
gap: 4px;
}
.front-draft-kpi-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #64748b;
font-weight: 700;
line-height: 1.2;
}
.front-draft-kpi-value {
font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
font-weight: 700;
color: #0f172a;
line-height: 1;
letter-spacing: -0.02em;
}
.front-draft-bars {
display: grid;
gap: 8px;
}
.front-draft-bar-row {
display: grid;
grid-template-columns: minmax(0, 130px) minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
}
.front-draft-bar-label {
font-size: 11px;
font-weight: 700;
color: #334155;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.front-draft-bar-track {
height: 8px;
border-radius: 999px;
background: rgba(203, 213, 225, 0.72);
overflow: hidden;
}
.front-draft-bar-fill {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #2563EB, #3B82F6);
box-shadow: 0 6px 12px rgba(37, 99, 235, 0.28);
}
.front-draft-bar-value {
font-size: 11px;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.01em;
}
.front-trust-grid {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.front-trust-item {
border: 1px solid rgba(226, 232, 240, 0.92);
border-radius: 14px;
background: rgba(255, 255, 255, 0.7);
padding: 12px 14px;
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.front-trust-value {
display: block;
font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
font-size: 22px;
letter-spacing: -0.03em;
color: #020617;
font-weight: 700;
line-height: 1;
}
.front-trust-label {
display: block;
margin-top: 5px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
font-weight: 700;
}
.front-visual {
position: relative;
border-radius: 24px;
border: 1px solid rgba(226, 232, 240, 0.82);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(241, 245, 255, 0.72));
padding: 16px;
min-height: 360px;
overflow: hidden;
box-shadow:
0 24px 40px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.78);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
}
.front-visual::before {
content: '';
position: absolute;
inset: -26% -18% auto auto;
width: 320px;
height: 320px;
background: radial-gradient(circle at center, rgba(8, 145, 178, 0.25), transparent 68%);
animation: ctFrontFloat 11s ease-in-out infinite;
pointer-events: none;
}
.front-visual-grid {
position: relative;
z-index: 1;
height: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.front-hero-shot {
height: 100%;
min-height: 340px;
border-radius: 18px;
border: 1px solid rgba(191, 219, 254, 0.82);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(235, 244, 255, 0.84));
box-shadow: 0 20px 34px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86);
padding: 12px;
display: grid;
grid-template-rows: auto 1fr;
gap: 10px;
}
.front-hero-shot-toolbar {
display: flex;
gap: 6px;
align-items: center;
padding: 2px 0;
}
.front-hero-shot-toolbar span {
width: 9px;
height: 9px;
border-radius: 999px;
background: #c5ddd2;
}
.front-hero-shot-body {
border-radius: 14px;
border: 1px solid rgba(191, 219, 254, 0.86);
background: rgba(255, 255, 255, 0.82);
padding: 10px;
display: grid;
grid-template-columns: minmax(0, 1fr) 150px;
gap: 10px;
}
.front-hero-shot-main {
border-radius: 12px;
border: 1px solid rgba(219, 234, 254, 0.92);
background: rgba(255, 255, 255, 0.78);
padding: 10px;
display: grid;
grid-template-rows: auto auto auto 1fr;
gap: 8px;
}
.front-hero-shot-line {
height: 11px;
border-radius: 999px;
background: linear-gradient(90deg, #e3efe9, #c5ddd2);
}
.front-hero-shot-line.w-90 { width: 90%; }
.front-hero-shot-line.w-80 { width: 80%; }
.front-hero-shot-line.w-70 { width: 70%; }
.front-hero-shot-bars {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
align-items: end;
padding-top: 4px;
}
.front-hero-shot-bars span {
display: block;
width: 100%;
border-radius: 8px;
background: linear-gradient(180deg, #2563EB, #1D4ED8);
box-shadow: 0 10px 16px rgba(47, 109, 246, 0.28);
min-height: 28%;
}
.front-hero-shot-side {
border-radius: 12px;
border: 1px solid rgba(219, 234, 254, 0.92);
background: rgba(255, 255, 255, 0.78);
padding: 10px 8px;
display: grid;
gap: 8px;
align-content: start;
}
.front-hero-shot-chip {
border-radius: 999px;
border: 1px solid rgba(191, 219, 254, 0.95);
background: rgba(239, 246, 255, 0.92);
color: #1e3a8a;
font-size: 11px;
font-weight: 700;
padding: 7px 9px;
line-height: 1.2;
}
.front-metric-card {
border-radius: 16px;
border: 1px solid rgba(226, 232, 240, 0.82);
background: rgba(255, 255, 255, 0.74);
padding: 14px;
display: grid;
gap: 8px;
align-content: start;
box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
transition: transform 200ms var(--ease-out), box-shadow 200ms ease;
}
.front-metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
.front-metric-card.featured {
grid-column: span 2;
background: linear-gradient(128deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.93) 52%, rgba(8, 145, 178, 0.82));
color: #e2e8f0;
box-shadow: 0 16px 28px rgba(2, 6, 23, 0.28);
}
.front-metric-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
}
.front-metric-card.featured .front-metric-title {
color: rgba(226, 232, 240, 0.82);
}
.front-metric-value {
font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
color: #020617;
}
.front-metric-card.featured .front-metric-value {
color: #f8fafc;
}
.front-metric-copy {
font-size: 12px;
color: #475569;
line-height: 1.45;
font-weight: 600;
}
.front-metric-card.featured .front-metric-copy {
color: rgba(226, 232, 240, 0.84);
}
.front-feature-band {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.front-feature-card {
border: 1px solid rgba(226, 232, 240, 0.84);
background: rgba(255, 255, 255, 0.68);
border-radius: 20px;
padding: 16px;
box-shadow: 0 16px 26px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}
.front-feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 32px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.front-feature-title {
font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
color: #0f172a;
margin: 0 0 8px;
letter-spacing: -0.02em;
line-height: 1.24;
padding-bottom: 2px;
}
.front-feature-copy {
color: #475569;
font-size: 13px;
line-height: 1.55;
font-weight: 600;
margin: 0;
}
.front-scroll-sections {
display: grid;
gap: 16px;
}
.front-story-section {
border: 1px solid rgba(226, 232, 240, 0.84);
background: rgba(255, 255, 255, 0.68);
border-radius: 22px;
padding: 18px;
display: grid;
grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
gap: 18px;
align-items: center;
box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
}
.front-story-section-reverse {
grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
}
.front-story-section-reverse .front-story-copy {
order: 2;
}
.front-story-section-reverse .front-story-visual {
order: 1;
}
.front-story-copy .front-feature-title {
margin-bottom: 6px;
}
.front-story-copy .front-feature-copy {
max-width: 46ch;
}
.front-story-visual {
min-height: 320px;
border-radius: 18px;
border: 1px solid rgba(203, 213, 225, 0.76);
background: linear-gradient(152deg, rgba(248, 251, 255, 0.92), rgba(232, 241, 255, 0.74));
padding: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
display: grid;
}
.front-shot-card {
border-radius: 14px;
border: 1px solid rgba(191, 219, 254, 0.75);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.84));
box-shadow: 0 14px 26px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.88);
padding: 12px;
display: grid;
gap: 10px;
height: 100%;
}
.front-shot-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #334155;
font-weight: 800;
}
.front-shot-grid {
display: grid;
gap: 8px;
}
.front-shot-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: #334155;
font-weight: 700;
border: 1px solid rgba(219, 229, 242, 0.92);
border-radius: 10px;
padding: 8px 9px;
background: rgba(255, 255, 255, 0.76);
}
.front-shot-row strong {
color: #0f172a;
font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
letter-spacing: -0.01em;
}
.front-shot-lines {
display: grid;
gap: 10px;
align-content: center;
height: 100%;
}
.front-shot-lines span {
display: block;
height: 14px;
border-radius: 999px;
background: linear-gradient(90deg, #c7d2fe, #93c5fd);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.front-shot-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-content: flex-start;
}
.front-shot-pills span {
padding: 8px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(191, 219, 254, 0.86);
color: #1e3a8a;
font-size: 12px;
font-weight: 700;
}
.front-shot-bars {
height: 100%;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
align-items: end;
padding: 8px 2px 2px;
}
.front-shot-bars > div {
height: 100%;
background: rgba(219, 234, 254, 0.7);
border: 1px solid rgba(191, 219, 254, 0.9);
border-radius: 10px;
display: flex;
align-items: end;
padding: 4px;
}
.front-shot-bars > div > span {
display: block;
width: 100%;
border-radius: 7px;
background: linear-gradient(180deg, #2563EB, #1D4ED8);
box-shadow: 0 8px 14px rgba(47, 109, 246, 0.32);
}
@keyframes ctFrontGlow {
0%, 100% { transform: translateY(0px) scale(1); opacity: 1; }
50% { transform: translateY(14px) scale(1.04); opacity: 0.88; }
}
@keyframes ctFrontFloat {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(-16px, 14px, 0); }
}
body.dark-mode #front-page-section {
background:
radial-gradient(1020px 520px at 0% -20%, rgba(148, 163, 184, 0.08), transparent 65%),
radial-gradient(900px 480px at 100% -10%, rgba(59, 130, 246, 0.14), transparent 66%),
linear-gradient(180deg, #070d18 0%, #0b1320 42%, #0d1727 100%);
}
body.dark-mode .front-hero-panel {
border-color: rgba(71, 85, 105, 0.62);
background: linear-gradient(140deg, rgba(2, 6, 23, 0.82), rgba(15, 23, 42, 0.74));
box-shadow:
0 34px 56px rgba(2, 6, 23, 0.45),
0 12px 24px rgba(2, 6, 23, 0.34),
inset 0 1px 0 rgba(148, 163, 184, 0.2);
}
body.dark-mode .front-kicker,
body.dark-mode .front-title,
body.dark-mode .front-trust-value,
body.dark-mode .front-feature-title,
body.dark-mode .front-metric-value {
color: #f8fafc;
}
body.dark-mode .front-subtitle,
body.dark-mode .front-feature-copy,
body.dark-mode .front-metric-copy {
color: #cbd5e1;
}
body.dark-mode .front-micro-copy,
body.dark-mode .front-trust-label,
body.dark-mode .front-metric-title {
color: #94a3b8;
}
body.dark-mode .front-draft-analytics {
border-color: rgba(71, 85, 105, 0.64);
background: linear-gradient(150deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.68));
box-shadow: 0 18px 30px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(148, 163, 184, 0.16);
}
body.dark-mode .front-draft-kpi {
border-color: rgba(71, 85, 105, 0.62);
background: rgba(15, 23, 42, 0.72);
}
body.dark-mode .front-draft-analytics-title,
body.dark-mode .front-draft-kpi-value,
body.dark-mode .front-draft-bar-value {
color: #e2e8f0;
}
body.dark-mode .front-draft-analytics-range,
body.dark-mode .front-draft-kpi-label,
body.dark-mode .front-draft-bar-label {
color: #94a3b8;
}
body.dark-mode .front-draft-bar-track {
background: rgba(51, 65, 85, 0.88);
}
body.dark-mode .front-trust-item,
body.dark-mode .front-feature-card,
body.dark-mode .front-metric-card {
border-color: rgba(71, 85, 105, 0.62);
background: rgba(15, 23, 42, 0.72);
}
body.dark-mode .front-story-section {
border-color: rgba(71, 85, 105, 0.62);
background: rgba(15, 23, 42, 0.72);
}
body.dark-mode .front-story-visual {
border-color: rgba(71, 85, 105, 0.62);
background: linear-gradient(152deg, rgba(15, 23, 42, 0.84), rgba(15, 23, 42, 0.7));
}
body.dark-mode .front-shot-card {
border-color: rgba(71, 85, 105, 0.66);
background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.78));
}
body.dark-mode .front-hero-shot {
border-color: rgba(71, 85, 105, 0.66);
background: linear-gradient(150deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8));
}
body.dark-mode .front-hero-shot-body,
body.dark-mode .front-hero-shot-main,
body.dark-mode .front-hero-shot-side {
border-color: rgba(71, 85, 105, 0.66);
background: rgba(15, 23, 42, 0.76);
}
body.dark-mode .front-hero-shot-line {
background: linear-gradient(90deg, #334155, #1e3a8a);
}
body.dark-mode .front-hero-shot-chip {
border-color: rgba(71, 85, 105, 0.72);
background: rgba(15, 23, 42, 0.86);
color: #c5ddd2;
}
body.dark-mode .front-shot-head {
color: #cbd5e1;
}
body.dark-mode .front-shot-row {
border-color: rgba(71, 85, 105, 0.62);
background: rgba(15, 23, 42, 0.72);
color: #cbd5e1;
}
body.dark-mode .front-shot-row strong {
color: #f8fafc;
}
body.dark-mode .front-shot-lines span {
background: linear-gradient(90deg, #334155, #1D4ED8);
}
body.dark-mode .front-shot-pills span {
border-color: rgba(71, 85, 105, 0.66);
background: rgba(15, 23, 42, 0.8);
color: #c5ddd2;
}
body.dark-mode .front-shot-bars > div {
background: rgba(30, 41, 59, 0.74);
border-color: rgba(71, 85, 105, 0.66);
}
body.dark-mode .front-visual {
border-color: rgba(71, 85, 105, 0.62);
background: linear-gradient(160deg, rgba(2, 6, 23, 0.86), rgba(8, 47, 73, 0.72));
}
body.dark-mode .front-secondary-cta {
background: rgba(15, 23, 42, 0.68);
border-color: rgba(100, 116, 139, 0.64);
color: #e2e8f0;
}
body.dark-mode .front-secondary-cta:hover {
background: rgba(30, 41, 59, 0.92);
border-color: rgba(148, 163, 184, 0.74);
}
body.dark-mode .stat-card {
background: rgba(15, 23, 42, 0.62);
border-color: rgba(71, 85, 105, 0.56);
box-shadow:
0 18px 34px rgba(2, 6, 23, 0.4),
inset 0 1px 0 rgba(148, 163, 184, 0.16);
}
body.dark-mode .stat-card:hover {
border-color: rgba(148, 163, 184, 0.5);
}
body.dark-mode .stat-value {
color: #f8fafc;
}
body.dark-mode .stat-label {
color: #a5b4c9;
}
body.dark-mode .section-title {
color: #f8fafc;
}
body.dark-mode .quick-action-btn.btn-primary {
background: #f8fafc;
color: #0f172a;
box-shadow: none;
}
body.dark-mode .quick-action-btn.btn-primary:hover {
background: #e2e8f0;
}
body.dark-mode .quick-action-btn.btn-secondary {
background: rgba(15, 23, 42, 0.62);
border-color: rgba(71, 85, 105, 0.56);
color: #dbe4f0;
}
body.dark-mode .quick-action-btn.btn-secondary:hover {
background: rgba(30, 41, 59, 0.86);
border-color: rgba(148, 163, 184, 0.44);
}
body.dark-mode .summary-secondary-toggle {
background: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
body.dark-mode .summary-secondary-panel {
background: #0f172a;
border-color: #334155;
box-shadow: 0 14px 28px rgba(2, 6, 23, 0.52);
}
body.dark-mode .activity-feed {
background: rgba(15, 23, 42, 0.62);
border-color: rgba(71, 85, 105, 0.56);
box-shadow:
0 18px 30px rgba(2, 6, 23, 0.35),
inset 0 1px 0 rgba(148, 163, 184, 0.14);
}
body.dark-mode .activity-item {
border-bottom-color: rgba(71, 85, 105, 0.48);
}
body.dark-mode .activity-item:hover {
background: rgba(30, 41, 59, 0.78);
}
body.dark-mode .activity-title,
body.dark-mode .activity-amount {
color: #f8fafc;
}
body.dark-mode .activity-meta {
color: #a5b4c9;
}
body.dark-mode .activity-action-btn {
background: rgba(15, 23, 42, 0.7);
border-color: rgba(71, 85, 105, 0.62);
color: #cdd8e7;
}
body.dark-mode .activity-action-btn:hover {
border-color: rgba(96, 165, 250, 0.65);
color: #93c5fd;
background: rgba(30, 58, 95, 0.56);
}
body.dark-mode .alert-list {
background: linear-gradient(180deg, rgba(127, 29, 29, 0.32), rgba(69, 10, 10, 0.28));
border-color: rgba(239, 68, 68, 0.5);
}
body.dark-mode .alert-item {
border-bottom-color: rgba(248, 113, 113, 0.32);
color: #fecaca;
}
body.dark-mode .alert-item.overdue {
color: #fca5a5;
}
@media (max-width: 980px) {
.dashboard-stats,
.stats-grid {
grid-template-columns: 1fr;
}
.dashboard-lower-grid {
grid-template-columns: 1fr;
}
.front-hero-panel {
grid-template-columns: 1fr;
}
.front-feature-band {
grid-template-columns: 1fr;
}
.front-story-section,
.front-story-section-reverse {
grid-template-columns: 1fr;
}
.front-story-section-reverse .front-story-copy,
.front-story-section-reverse .front-story-visual {
order: initial;
}
}
@media (max-width: 768px) {
.dashboard-shell {
padding: 2px 3.5% 30px;
}
.dashboard-hero {
min-height: 62px;
padding: 6px 0 6px;
}
.dashboard-greeting {
font-size: 18px;
}
.dashboard-date-range {
font-size: 11px;
}
.stat-value {
font-size: 34px;
}
.quick-actions {
grid-template-columns: 1fr;
gap: 10px;
}
.dashboard-quick-strip {
gap: 7px;
padding: 8px;
}
.dashboard-quick-strip-btn {
padding: 9px 10px;
font-size: 11px;
}
.dashboard-work-now-actions-buttons {
grid-template-columns: 1fr;
}
.dashboard-work-now-action-btn {
font-size: 11px;
padding: 9px 10px;
}
.quick-action-btn {
width: 100%;
}
.dashboard-local-mode {
flex-direction: column;
align-items: flex-start;
}
.dashboard-local-actions {
width: 100%;
}
.dashboard-local-actions .quick-action-btn {
width: 100%;
}
.activity-item {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.activity-right {
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}
.earnings-chart-card {
padding: 20px;
}
.earnings-chart-wrapper {
height: 240px;
}
.earnings-chart-label-value {
font-size: 11px;
}
.earnings-chart-label-month {
font-size: 10px;
}
.chart-period-select {
font-size: 12px;
padding: 6px 12px;
}
.chart-drilldown-modal-content {
width: min(94vw, 720px);
}
.chart-drilldown-modal-body {
padding: 4px 0 0;
}
.chart-drilldown-card {
padding: 10px;
}
#front-page-section::before,
#front-page-section::after {
display: none;
}
.front-shell {
padding: 18px 4% 28px;
gap: 16px;
}
.front-hero-panel {
border-radius: 20px;
padding: 16px;
gap: 14px;
}
.front-subtitle {
font-size: 14px;
line-height: 1.55;
}
.front-cta-row {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.front-primary-cta,
.front-secondary-cta {
width: 100%;
text-align: center;
}
.front-trust-grid {
grid-template-columns: 1fr;
}
.front-story-section {
padding: 14px;
gap: 12px;
}
.front-story-visual {
min-height: 240px;
}
.front-visual {
min-height: auto;
}
.front-hero-shot-body {
grid-template-columns: 1fr;
}
.front-visual-grid {
grid-template-columns: 1fr;
}
.front-metric-card.featured {
grid-column: span 1;
}
}
.job-creation-section.hidden,
.jobs-list-section.hidden,
.invoice-builder-section.hidden,
.job-summary-section.hidden,
.create-job-form-section.hidden,
.tools-section.hidden {
display: none;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInRow {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.jobs-table tbody tr {
animation: fadeInRow 0.3s ease-out forwards;
}
@media (max-width: 900px) {
.page-section {
padding: 22px;
}
#tools-section {
padding: 24px 20px;
}
.jobs-list-section {
padding: 24px 20px;
}
#tools-section .dashboard-shell {
padding-top: 0;
}
#account-section,
#clients-section,
#analytics-section {
padding: 24px 20px;
}
.dashboard-summary-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.dashboard-summary-card {
padding: 16px;
}
.dashboard-summary-stat-value {
font-size: 22px;
}
.dashboard-summary-payment-amount {
font-size: 20px;
}
.jobs-list-header h2 {
position: static;
transform: none;
font-size: 24px;
margin-top: 16px;
margin-bottom: 0;
width: 100%;
text-align: center;
}
.jobs-list-header {
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.jobs-list-left {
width: 100%;
}
.jobs-list-left {
width: 100%;
flex-direction: column;
}
.jobs-list-right {
width: 100%;
flex-direction: column;
}
.jobs-filter-select {
width: 100%;
}
.create-job-btn,
.delete-selected-btn {
width: 100%;
justify-content: center;
}
.jobs-table th,
.jobs-table td {
padding: 12px 8px;
font-size: 12px;
}
.jobs-table th:first-child,
.jobs-table td:first-child {
width: 30px;
}
.job-date {
font-size: 11px;
}
.delete-selected-btn {
font-size: 13px;
padding: 10px 14px;
}
.job-actions {
flex-direction: column;
gap: 6px !important;
}
.job-days-expand-panel {
padding: 12px;
}
.job-days-expand-item {
grid-template-columns: 1fr;
gap: 6px;
}
.job-action-btn {
width: 100%;
}
.job-summary-actions {
flex-direction: column;
}
.tools-grid {
gap: 16px;
}
.tool-card {
flex-basis: 84%;
min-height: 220px;
padding: 24px;
}
h1 {
font-size: 38px;
}
}
:root {
--bg-start: #f7f9fd;
--bg-end: #ecf1f9;
--panel: rgba(255, 255, 255, 0.76);
--panel-border: rgba(15, 23, 42, 0.1);
--ink: #0f172a;
--subtle: #5f6c80;
--accent: #1D4ED8;
--accent-soft: rgba(37, 99, 235, 0.14);
--success-soft: #e7f7ef;
--success-ink: #0b6a3f;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background:
radial-gradient(900px 420px at 6% -12%, rgba(255, 255, 255, 0.92), transparent 62%),
radial-gradient(720px 360px at 98% -8%, rgba(191, 219, 254, 0.24), transparent 64%),
radial-gradient(circle at 10% 8%, #ffffff 0%, var(--bg-start) 38%, var(--bg-end) 100%);
color: var(--ink);
}
.container {
padding-top: 0;
padding-bottom: 0 !important;
}
.site-header {
background: #f3f6fb;
border-bottom: 1px solid #d7e0ec;
box-shadow:
0 14px 30px rgba(15, 23, 42, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.84);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.header-page-indicator {
background: #eef3fa;
border-bottom-color: #d7e0ec;
color: #3a4b63;
}
.mobile-nav-panel {
border-color: rgba(226, 232, 240, 0.9);
background: #f6f9fd;
box-shadow:
0 18px 30px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.84);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.account-subnav-btn,
.header-nav-btn,
.mobile-nav-item {
background: rgba(255, 255, 255, 0.78);
border-color: rgba(212, 224, 240, 0.95);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.page-section:not(#front-page-section) {
position: relative;
isolation: isolate;
}
.page-section:not(#front-page-section)::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(760px 320px at -8% -18%, rgba(191, 219, 254, 0.2), transparent 66%),
radial-gradient(680px 300px at 108% -16%, rgba(167, 243, 208, 0.16), transparent 68%);
}
.page-section:not(#front-page-section) > * {
position: relative;
z-index: 1;
}
.dashboard-shell::before {
background:
radial-gradient(980px 430px at -8% -20%, rgba(255, 255, 255, 0.94), transparent 63%),
radial-gradient(820px 380px at 104% -18%, rgba(191, 219, 254, 0.3), transparent 68%),
radial-gradient(780px 340px at 54% 116%, rgba(167, 243, 208, 0.14), transparent 68%);
}
.dashboard-greeting {
background: linear-gradient(125deg, #020617, #1e3a8a 52%, #0f766e 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.account-card,
.create-job-shell,
.job-summary-content,
.calc-entry-panel,
.calc-estimate-panel,
.saved-days-panel,
.results,
.template-gallery-card,
.summary-kpi {
border-radius: 18px;
}
.settings-panel,
.summary-expenses-card,
.job-day-card,
.calc-section,
.saved-expense-item,
.job-day-detail-item {
border-color: rgba(219, 229, 242, 0.95);
background: rgba(255, 255, 255, 0.76);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.job-summary-header {
background: linear-gradient(130deg, rgba(239, 246, 255, 0.86), rgba(239, 246, 255, 0.76));
border-color: rgba(191, 219, 254, 0.86);
box-shadow:
0 12px 24px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.84);
}
.job-summary-total,
.job-days-head,
.summary-expenses-head,
.summary-expense-item {
background: rgba(248, 250, 252, 0.78);
border-color: rgba(219, 229, 242, 0.9);
}
.job-summary-total .value,
.job-day-row-pay {
color: #1D4ED8;
}
.job-day-card > summary:hover,
.job-day-card[open] > summary {
background: linear-gradient(120deg, rgba(239, 246, 255, 0.84), rgba(240, 253, 250, 0.72));
}
.job-day-row:hover {
background: linear-gradient(120deg, rgba(243, 247, 252, 0.84), rgba(240, 249, 255, 0.72));
}
.settings-btn,
.quick-action-btn {
transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}
.settings-btn.btn-secondary,
.quick-action-btn.btn-secondary {
backdrop-filter: blur(10px) saturate(118%);
-webkit-backdrop-filter: blur(10px) saturate(118%);
}
.settings-btn.btn-secondary:hover,
.quick-action-btn.btn-secondary:hover {
box-shadow:
0 12px 22px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.jobs-table td,
.jobs-table th {
border-color: rgba(226, 232, 240, 0.86);
}
.jobs-table {
width: 100%;
min-width: 1240px;
table-layout: fixed;
}
.jobs-table th:nth-child(2),
.jobs-table td:nth-child(2) {
text-align: left;
}
.jobs-table .job-actions-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
@media (min-width: 901px) {
.jobs-table .status-chip {
width: auto;
min-width: 52px;
padding: 5px 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.jobs-table th:nth-child(6),
.jobs-table th:nth-child(7),
.jobs-table th:nth-child(8),
.jobs-table td:nth-child(6),
.jobs-table td:nth-child(7),
.jobs-table td:nth-child(8) {
padding-left: 2px;
padding-right: 2px;
}
.jobs-table th:nth-child(4),
.jobs-table td:nth-child(4) {
padding-left: 4px;
}
.jobs-table th:nth-child(5),
.jobs-table td:nth-child(5) {
padding-left: 4px;
padding-right: 1px;
}
.jobs-table th:nth-child(6),
.jobs-table td:nth-child(6) {
padding-left: 1px;
}
.jobs-table .job-actions-row {
display: flex;
gap: 8px;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
width: max-content;
margin-left: auto;
}
.jobs-table .job-actions-row .job-expand-caret {
margin-left: 2px;
flex: 0 0 auto;
}
.jobs-table .job-action-btn {
padding: 7px 9px;
font-size: 12px;
min-width: 82px;
flex: 0 0 82px;
white-space: nowrap;
}
.jobs-table .job-status-btn {
min-width: 110px;
flex: 0 0 110px;
}
.jobs-table .job-send-btn[data-action="toggle-sent"] {
min-width: 96px;
flex: 0 0 96px;
}
.jobs-table td.job-actions {
padding-left: 8px;
padding-right: 6px;
text-align: right;
min-width: 420px;
}
#jobs-actions-th,
#timesheets-actions-th {
text-align: right;
}
#jobs-actions-th .jobs-actions-th-inner,
#timesheets-actions-th .jobs-actions-th-inner {
justify-content: flex-end;
}
}
.jobs-table .job-name {
color: #0b1324;
text-align: left;
padding-left: 18px;
overflow: hidden;
}
.jobs-table .job-name-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
line-height: 1.2;
max-width: 30ch;
overflow: hidden;
}
.jobs-table .job-name-link {
display: block;
width: 100%;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jobs-table .job-name-due-date {
display: block;
width: 100%;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
font-weight: 600;
color: rgba(15, 23, 42, 0.62);
}
.jobs-table .job-pay,
.jobs-table .job-total {
color: #1D4ED8;
font-weight: 800;
}
.jobs-table .job-balance {
font-weight: 700;
transition: all 0.15s ease;
}
.jobs-table .balance-due-amount {
color: #dc2626;
}
.jobs-table .balance-due-amount:hover {
color: #991b1b;
text-decoration: underline;
}
.jobs-table .balance-paid-full {
color: #3B82F6;
cursor: default;
}
body.dark-mode .site-header {
background: #0f172a;
box-shadow:
0 16px 30px rgba(2, 6, 23, 0.44),
inset 0 1px 0 rgba(148, 163, 184, 0.2);
}
body.dark-mode .header-page-indicator {
background: #111c31;
border-bottom-color: rgba(71, 85, 105, 0.62);
color: #a9bbd0;
}
body.dark-mode .dashboard-greeting {
background: linear-gradient(120deg, #f8fafc, #93c5fd 52%, #60a5fa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
body.dark-mode .jobs-table .job-name-due-date {
color: rgba(226, 232, 240, 0.72);
}
body.dark-mode .mobile-nav-panel,
body.dark-mode .settings-panel,
body.dark-mode .summary-expenses-card,
body.dark-mode .job-day-card,
body.dark-mode .calc-section,
body.dark-mode .saved-expense-item,
body.dark-mode .job-day-detail-item {
border-color: rgba(71, 85, 105, 0.64);
background: rgba(15, 23, 42, 0.72);
box-shadow:
0 16px 30px rgba(2, 6, 23, 0.34),
inset 0 1px 0 rgba(148, 163, 184, 0.14);
}
.page-section {
background: transparent;
border: none;
border-radius: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
h1 {
font-size: 52px;
letter-spacing: -1.8px;
}
.logo {
font-size: 24px;
letter-spacing: -0.6px;
}
input, select {
border: 1px solid #d9e2ee;
border-radius: 14px;
background: rgba(255, 255, 255, 0.88);
font-weight: 600;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
input:focus, select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
label {
color: #334155;
font-size: 12px;
letter-spacing: 0.9px;
}
button {
border-radius: 14px;
box-shadow:
0 14px 26px rgba(15, 23, 42, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
#save-day-btn,
.save-job-btn,
.invoice-btn,
.edit-btn {
background: linear-gradient(140deg, #0b1220 0%, #131f33 52%, #1f3552 100%);
box-shadow:
0 16px 28px rgba(2, 6, 23, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
#save-day-btn:hover,
.save-job-btn:hover,
.invoice-btn:hover,
.edit-btn:hover {
background: linear-gradient(140deg, #101a2c 0%, #1a2a40 50%, #274564 100%);
}
.results {
background: rgba(250, 252, 255, 0.82);
border: 1px solid #dbe4ef;
border-radius: 16px;
box-shadow:
0 16px 30px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.82);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
}
.results h2 {
color: #0b5fc0;
}
#save-day-btn {
margin-top: 14px;
}
.day-save-actions {
margin-top: 14px;
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
.saved-secondary-actions {
margin-top: 6px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
align-items: center;
padding: 10px 14px 8px;
border-top: 1px solid #edf2f7;
}
.saved-secondary-actions button {
margin-top: 0;
padding: 8px 10px;
font-size: 12px;
font-weight: 700;
border-radius: 9px;
box-shadow: 0 10px 18px rgba(2, 6, 23, 0.18) !important;
}
.day-editor-state {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border-radius: 12px;
border: 2px solid #d8e1ee;
background: #f8fafc;
color: #334155;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.day-editor-state.editing {
border-color: #2f8d6a;
background: linear-gradient(135deg, #f2f7f4 0%, #e3efe9 100%);
color: #14523d;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.day-editor-state.new {
border-color: #8b5cf6;
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
color: #6d28d9;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}
.day-editor-state .hint {
font-weight: 600;
opacity: 0.9;
font-size: 13px;
}
#save-day-btn:disabled,
#add-another-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
#add-another-btn:hover {
background: linear-gradient(140deg, #101a2c 0%, #1a2a40 50%, #274564 100%) !important;
transform: translateY(-1px);
box-shadow: 0 12px 22px rgba(2, 6, 23, 0.22) !important;
}
.saved-days {
margin-top: 8px;
width: 100%;
}
.saved-days-panel {
border: 1px solid rgba(203, 218, 236, 0.9);
border-radius: 16px;
background: linear-gradient(138deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 255, 0.74));
overflow: hidden;
box-shadow:
0 16px 30px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.saved-days-summary {
list-style: none;
cursor: pointer;
padding: var(--space-4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
font-weight: 700;
color: var(--text-primary);
background: rgba(241, 245, 249, 0.76);
border-bottom: 1px solid var(--border-light);
}
.saved-days-summary::-webkit-details-marker {
display: none;
}
.saved-days-summary .meta {
color: #4e5f77;
font-size: 13px;
font-weight: 700;
}
.saved-days-job {
margin-left: 8px;
background: #edf2f7;
color: #334155;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
}
.saved-days-panel:not([open]) .saved-days-summary {
border-bottom: none;
}
.saved-days-panel .saved-days-table {
margin: 0;
border-collapse: separate;
border-spacing: 0;
}
.saved-days-panel .saved-days-table thead {
background: #f8fafc;
color: #475569;
}
.saved-days-panel .saved-days-table th {
font-size: 12px;
padding: 14px 14px;
border-bottom: 1px solid #e2e8f0;
}
.saved-days-panel .saved-days-table td {
padding: 14px 14px;
border-bottom: 1px solid #edf2f7;
}
.saved-days-panel .saved-days-table tbody tr {
background: #ffffff;
border-bottom: none;
cursor: pointer;
}
.saved-days-panel .saved-days-table tbody tr:nth-child(even) {
background: #fbfdff;
}
.saved-days-panel .saved-days-table tbody tr:hover {
background: #f3f8ff;
}
.saved-days-panel .saved-days-table tbody tr.active {
background: linear-gradient(90deg, rgba(37, 99, 235, 0.16) 0%, rgba(191, 219, 254, 0.24) 100%);
box-shadow:
inset 5px 0 0 #2563EB,
inset 0 0 0 9999px rgba(147, 197, 253, 0.2),
0 0 0 1px #60A5FA;
}
.saved-days-panel .saved-days-table tbody tr.active:hover {
background: linear-gradient(90deg, rgba(37, 99, 235, 0.2) 0%, rgba(191, 219, 254, 0.3) 100%);
}
.saved-days-panel .saved-days-table tbody tr.active td {
color: #0f172a;
font-weight: 800;
}
.saved-days-panel .saved-days-table tbody tr.active .day-label {
color: #0b3b8f;
}
.saved-days-panel .saved-days-table .day-label {
display: inline-block;
max-width: 34ch;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
.saved-days-panel .edit-day,
.saved-days-panel .delete-day {
border: 1px solid #d5deeb;
border-radius: 8px;
padding: 5px 9px;
color: #42526a;
background: #ffffff;
}
.saved-days-panel .edit-day:hover,
.saved-days-panel .delete-day:hover {
background: #eef4ff;
color: #0f172a;
}
.saved-expenses-wrap {
border-top: 1px solid #e6edf5;
padding: 14px 16px 16px;
background: #fbfdff;
}
.saved-expenses-title {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.7px;
text-transform: uppercase;
color: #64748b;
margin-bottom: 10px;
}
.saved-expenses-list {
display: grid;
gap: 8px;
}
.saved-expense-item {
border: 1px solid #dbe5f1;
border-radius: 10px;
background: #ffffff;
padding: 10px 12px;
display: grid;
gap: 4px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.saved-expense-item:hover {
background: #f3f8ff;
border-color: #cfe0f5;
}
.saved-expense-item.active {
background: #eaf3ff;
border-color: #b9d6ff;
box-shadow: inset 3px 0 0 #2f8d6a;
}
.saved-expense-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 13px;
font-weight: 700;
color: #0f172a;
}
.saved-expense-meta {
font-size: 12px;
color: #64748b;
font-weight: 600;
line-height: 1.4;
}
.saved-expense-actions {
display: flex;
gap: 8px;
margin-top: 2px;
}
.saved-expense-actions button {
width: auto;
margin: 0;
padding: 6px 10px;
border: 1px solid #d8e1ee;
border-radius: 8px;
background: #ffffff;
color: #334155;
font-size: 12px;
font-weight: 700;
box-shadow: none;
}
.calculator-workspace {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
gap: 18px;
align-items: start;
}
.calc-entry-panel,
.calc-estimate-panel {
border: 1px solid rgba(226, 232, 240, 0.88);
border-radius: 16px;
background: rgba(255, 255, 255, 0.82);
padding: 14px;
box-shadow:
0 16px 30px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.84);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
}
.calc-entry-panel label {
min-height: auto;
margin-bottom: 3px;
line-height: 1.25;
}
.calc-entry-panel .form-group {
margin-bottom: 10px;
}
.calc-estimate-panel {
position: -webkit-sticky;
position: sticky;
top: 14px;
align-self: start;
max-height: none;
overflow: visible;
}
.calc-preview-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 10px 0 8px;
}
.calc-preview-head .title {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.7px;
color: #64748b;
}
.calc-preview-toggle {
width: auto;
margin: 0;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid #d8e1ee;
background: #ffffff;
color: #334155;
font-size: 12px;
font-weight: 700;
box-shadow: none;
}
.calc-preview-collapsed .calc-preview-head {
margin-bottom: 2px;
}
.calc-preview-collapsed #calc-invoice-preview {
display: none;
}
.calc-preview-collapsed .day-save-actions {
margin-top: 8px;
}
.calc-section {
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 12px;
background: rgba(248, 250, 252, 0.82);
padding: 12px;
margin-bottom: 10px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
.calc-section:last-child {
margin-bottom: 0;
}
.calc-section-title {
margin: 0 0 6px 0;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #000000;
font-weight: 800;
}
#invoice-builder-section #calculator-form .calc-section-title,
#invoice-builder-section #expense-form .calc-section-title {
display: none;
}
#invoice-builder-section .builder-main-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4);
margin: 0;
border: 1px solid rgba(203, 218, 236, 0.9);
border-bottom: 1px solid var(--border-light);
border-radius: 16px 16px 0 0;
background: rgba(241, 245, 249, 0.76);
color: var(--text-primary);
font-weight: 700;
letter-spacing: 0;
cursor: default;
}
#invoice-builder-section #calculator-form,
#invoice-builder-section #expense-form {
margin-top: 0;
border: 1px solid rgba(203, 218, 236, 0.9);
border-top: none;
border-radius: 0 0 16px 16px;
padding: 12px;
background: linear-gradient(138deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 255, 0.74));
box-shadow:
0 16px 30px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
margin-bottom: 10px;
}
#invoice-builder-section #calculator-form .calc-section:first-child,
#invoice-builder-section #expense-form .calc-section:first-child {
margin-top: 0;
}
#calculator-form .calc-section label {
color: #000000;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip {
margin-top: 12px;
margin-bottom: 12px;
padding: 12px 14px;
border: 1px solid #c5ddd2;
border-radius: 14px;
background:
linear-gradient(135deg, rgba(239, 246, 255, 0.96) 0%, rgba(224, 242, 254, 0.92) 100%);
box-shadow:
0 10px 24px rgba(30, 64, 175, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
width: 100%;
max-width: 100%;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip.show {
display: grid;
grid-template-columns: max-content max-content max-content max-content;
align-items: stretch;
gap: 14px;
text-align: left;
justify-content: center;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip h2 {
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
justify-self: stretch;
margin: 0;
font-size: 19px;
line-height: 1.2;
color: #0b3b8f;
font-weight: 900;
white-space: normal;
overflow: visible;
max-width: none;
word-break: normal;
overflow-wrap: anywhere;
padding: 0 10px;
border-right: 1px solid rgba(59, 130, 246, 0.35);
letter-spacing: 0.01em;
text-align: center;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip .breakdown {
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
min-width: 0;
padding: 0 12px;
border-right: none;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip .calc-detail-lines {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
align-self: stretch;
padding: 0 12px;
border-right: 1px solid rgba(59, 130, 246, 0.35);
white-space: nowrap;
text-align: center;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip .detail-line {
font-size: 12px;
line-height: 1.3;
color: #1e3a8a;
font-weight: 800;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(147, 197, 253, 0.55);
border-radius: 999px;
padding: 2px 8px;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip .calc-hours-line {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 15px;
white-space: normal;
font-weight: 800;
color: #1e293b;
line-height: 1.2;
width: 100%;
flex-wrap: wrap;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip .calc-hours-line .label {
min-width: 0;
word-break: normal;
overflow-wrap: break-word;
text-align: center;
}
#invoice-builder-section .quick-hours {
margin-top: 10px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
#invoice-builder-section .quick-hours-label {
font-size: 12px;
font-weight: 700;
color: #334155;
}
#invoice-builder-section .quick-hours-btn {
width: auto;
margin: 0;
padding: 6px 10px;
font-size: 12px;
font-weight: 800;
border-radius: 10px;
border: 1px solid #c5ddd2;
background: #f2f7f4;
color: #1e3a8a;
box-shadow: none;
}
#invoice-builder-section .quick-hours-btn:hover {
background: #e3efe9;
transform: translateY(-1px);
}
#invoice-builder-section .quick-hours-btn.active {
background: #1D4ED8;
border-color: #1D4ED8;
color: #ffffff;
}
#invoice-builder-section .crewtime-date-field {
position: relative;
}
#invoice-builder-section .crewtime-date-display {
width: 100%;
padding-right: 88px;
cursor: pointer;
font-weight: 600;
color: #0f172a;
}
#invoice-builder-section .crewtime-date-toggle {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: auto;
margin: 0;
padding: 5px 10px;
border-radius: 8px;
border: 1px solid #c5ddd2;
background: #f2f7f4;
color: #1e3a8a;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
box-shadow: none;
}
#invoice-builder-section .crewtime-date-toggle:hover {
background: #e3efe9;
}
#invoice-builder-section .crewtime-date-native {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
}
#invoice-builder-section .crewtime-calendar-popover {
position: absolute;
z-index: 80;
top: calc(100% + 8px);
left: 0;
width: min(320px, calc(100vw - 48px));
padding: 10px;
border-radius: 14px;
border: 1px solid rgba(191, 219, 254, 0.95);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94));
box-shadow: 0 16px 30px rgba(30, 64, 175, 0.14);
}
#invoice-builder-section .crewtime-calendar-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
#invoice-builder-section .crewtime-calendar-nav {
width: 30px;
height: 30px;
margin: 0;
padding: 0;
border-radius: 9px;
border: 1px solid #c7d2fe;
background: #ffffff;
color: #1e3a8a;
font-size: 18px;
line-height: 1;
font-weight: 800;
box-shadow: none;
}
#invoice-builder-section .crewtime-calendar-title {
text-align: center;
font-size: 13px;
font-weight: 800;
color: #0f172a;
}
#invoice-builder-section .crewtime-calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
margin-bottom: 6px;
color: #64748b;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
}
#invoice-builder-section .crewtime-calendar-weekdays span {
text-align: center;
}
#invoice-builder-section .crewtime-calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
}
#invoice-builder-section .crewtime-calendar-day {
width: 100%;
min-height: 34px;
margin: 0;
padding: 0;
border-radius: 10px;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.8);
color: #0f172a;
font-size: 13px;
font-weight: 700;
box-shadow: none;
}
#invoice-builder-section .crewtime-calendar-day:hover {
border-color: #c5ddd2;
background: #e0f2fe;
}
#invoice-builder-section .crewtime-calendar-day.is-muted {
color: #94a3b8;
background: rgba(248, 250, 252, 0.7);
}
#invoice-builder-section .crewtime-calendar-day.is-today {
border-color: #93c5fd;
color: #1D4ED8;
}
#invoice-builder-section .crewtime-calendar-day.is-selected {
border-color: #1D4ED8;
background: #1D4ED8;
color: #ffffff;
}
#create-timesheet-modal .invoice-preview-modal-content {
overflow: visible !important;
}
#create-timesheet-modal .crewtime-date-field {
position: relative;
z-index: 2;
}
#create-timesheet-modal .crewtime-date-field:focus-within {
z-index: 140;
}
#create-timesheet-modal .crewtime-date-display {
width: 100%;
padding-right: 88px;
cursor: pointer;
font-weight: 600;
color: #0f172a;
}
#create-timesheet-modal .crewtime-date-toggle {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: auto;
margin: 0;
padding: 5px 10px;
border-radius: 8px;
border: 1px solid #c5ddd2;
background: #f2f7f4;
color: #1e3a8a;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
box-shadow: none;
}
#create-timesheet-modal .crewtime-date-toggle:hover {
background: #e3efe9;
}
#create-timesheet-modal .crewtime-date-native {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
}
#create-timesheet-modal .crewtime-calendar-popover {
position: absolute;
z-index: 260;
top: calc(100% + 8px);
left: 0;
width: min(320px, calc(100vw - 48px));
padding: 10px;
border-radius: 14px;
border: 1px solid rgba(191, 219, 254, 0.95);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94));
box-shadow: 0 16px 30px rgba(30, 64, 175, 0.14);
}
#create-timesheet-modal .crewtime-calendar-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
#create-timesheet-modal .crewtime-calendar-nav {
width: 30px;
height: 30px;
margin: 0;
padding: 0;
border-radius: 9px;
border: 1px solid #c7d2fe;
background: #ffffff;
color: #1e3a8a;
font-size: 18px;
line-height: 1;
font-weight: 800;
box-shadow: none;
}
#create-timesheet-modal .crewtime-calendar-title {
text-align: center;
font-size: 13px;
font-weight: 800;
color: #0f172a;
}
#create-timesheet-modal .crewtime-calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
margin-bottom: 6px;
color: #64748b;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
}
#create-timesheet-modal .crewtime-calendar-weekdays span {
text-align: center;
}
#create-timesheet-modal .crewtime-calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
}
#create-timesheet-modal .crewtime-calendar-day {
width: 100%;
min-height: 34px;
margin: 0;
padding: 0;
border-radius: 10px;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.8);
color: #0f172a;
font-size: 13px;
font-weight: 700;
box-shadow: none;
}
#create-timesheet-modal .crewtime-calendar-day:hover {
border-color: #c5ddd2;
background: #e0f2fe;
}
#create-timesheet-modal .crewtime-calendar-day.is-muted {
color: #94a3b8;
background: rgba(248, 250, 252, 0.7);
}
#create-timesheet-modal .crewtime-calendar-day.is-today {
border-color: #93c5fd;
color: #1D4ED8;
}
#create-timesheet-modal .crewtime-calendar-day.is-selected {
border-color: #1D4ED8;
background: #1D4ED8;
color: #ffffff;
}
.saved-days-table .draft-row {
background: #f2f7f4;
}
.saved-days-draft-pill {
display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
background: #e3efe9;
color: #1e3a8a;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip .calc-ot-line {
display: none;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip .calc-hours-line .label {
color: #0f172a;
font-weight: 800;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip .calc-hours-line .value {
color: #0b3b8f;
font-weight: 900;
font-size: 20px;
line-height: 1.1;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip .total {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0 10px;
border: none;
font-size: 16px;
gap: 6px;
white-space: nowrap;
color: #1e293b;
font-weight: 900;
flex-direction: row;
align-self: stretch;
justify-self: stretch;
line-height: 1.2;
}
#invoice-builder-section .calc-entry-panel .results-inline-strip .total .value {
font-size: 20px;
color: #0b3b8f;
font-weight: 900;
}
.results {
margin-top: 0;
}
.results h2 {
margin-bottom: 10px;
font-size: 16px;
}
.breakdown-item {
padding: 9px 0;
}
.total {
font-size: 16px;
}
.total .value {
font-size: 22px;
}
.form-container.minimized {
display: block;
}
.form-container.minimized .calculator-workspace {
display: none;
}
.job-header {
align-items: flex-end;
margin-bottom: 20px;
}
.job-title-wrap {
display: flex;
flex-direction: column;
gap: 6px;
}
.job-title-row {
display: flex;
align-items: center;
gap: 0;
}
.job-title-kicker {
font-size: 11px;
letter-spacing: 1.1px;
text-transform: uppercase;
color: #64748b;
font-weight: 800;
}
#current-job-name {
margin: 0;
font-size: 31px;
line-height: 1.1;
letter-spacing: -0.8px;
color: #0f172a;
font-weight: 900;
}
.job-name-editable {
cursor: pointer;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 4px;
}
.job-name-editable:hover {
color: #0b5fc0;
text-decoration-color: #93c5fd;
}
.no-saved-days-msg {
padding: 26px 18px;
color: #64748b;
font-size: 14px;
font-weight: 600;
text-align: center;
background: #ffffff;
}
.job-summary-header {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
background: linear-gradient(180deg, #f8fbff 0%, #f1f6ff 100%);
border: 1px solid #d9e6f7;
border-radius: 16px;
padding: 18px 20px;
margin-bottom: 14px;
}
.job-summary-section {
padding-top: 64px;
}
.job-summary-section .home-btn {
top: 14px;
right: 14px;
z-index: 5;
background: rgba(255, 255, 255, 0.92);
border: 1px solid #d8e1ee;
}
.job-summary-title-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
#summary-job-name {
margin: 0;
font-size: 32px;
font-weight: 900;
letter-spacing: -0.8px;
line-height: 1.1;
color: #0f172a;
}
.job-summary-subtitle {
margin: 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.1px;
color: #64748b;
font-weight: 800;
}
.job-summary-content {
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 16px;
background: rgba(255, 255, 255, 0.84);
padding: 14px;
box-shadow:
0 18px 30px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.84);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
}
.summary-section-title {
margin: 0 0 10px 0;
color: #0f172a;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.2px;
}
.job-summary-kpis {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.summary-kpi {
border: 1px solid #e2e8f0;
background: #f8fafc;
border-radius: 12px;
padding: 9px 10px;
display: flex;
flex-direction: column;
gap: 3px;
}
.summary-kpi-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.9px;
color: #64748b;
font-weight: 800;
}
.summary-kpi-value {
color: #0f172a;
font-size: 20px;
font-weight: 800;
line-height: 1.1;
}
.job-summary-total {
border: 1px solid #dbe5f2;
background: #f8fafc;
border-radius: 14px;
padding: 12px 14px;
margin: 0 0 10px 0;
}
.job-summary-total-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 13px;
color: #4f6482;
font-weight: 700;
margin-bottom: 6px;
}
.job-summary-total-row:last-child {
margin-bottom: 0;
}
.job-summary-total-row strong {
color: #0f172a;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.3px;
}
.job-summary-total .label {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.9px;
color: #4f6482;
font-weight: 800;
}
.job-summary-total .value {
color: #0b5fc0;
font-size: 32px;
font-weight: 900;
line-height: 1.1;
}
.job-days-head {
display: grid;
grid-template-columns: 1.2fr 1fr 0.7fr 0.7fr;
gap: 8px;
padding: 8px 12px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #f8fafc;
color: #64748b;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 800;
margin-bottom: 8px;
}
.summary-expenses-card {
border: 1px solid #dbe6f7;
border-radius: 12px;
background: #ffffff;
padding: 8px 10px;
margin: 6px 0 12px;
}
.summary-expenses-title {
font-size: 12px;
font-weight: 900;
color: #0f172a;
margin-bottom: 2px;
}
.summary-expenses-subtitle {
font-size: 11px;
font-weight: 600;
color: #64748b;
margin-bottom: 6px;
}
.summary-expenses-inputs {
display: grid;
grid-template-columns: 1fr 108px auto;
gap: 6px;
margin-bottom: 6px;
}
.summary-expenses-head {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
padding: 6px 8px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #f8fafc;
color: #64748b;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.7px;
font-weight: 800;
margin-bottom: 4px;
}
.summary-expenses-list {
display: grid;
gap: 4px;
}
.summary-expense-item {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
align-items: center;
padding: 7px 8px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #ffffff;
font-size: 12px;
font-weight: 700;
color: #334155;
}
.summary-expense-amount {
color: #0f172a;
font-weight: 800;
}
.summary-expense-remove {
background: transparent;
color: #64748b;
border: none;
padding: 0;
font-size: 11px;
font-weight: 700;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.summary-expense-remove:hover {
color: #ef4444;
}
.summary-expense-empty {
font-size: 12px;
color: #64748b;
font-weight: 600;
}
.job-days-list {
gap: 8px;
margin-bottom: 14px;
}
.job-day-card {
border: 1px solid #dfe8f5;
border-radius: 12px;
background: #ffffff;
overflow: hidden;
}
.job-day-card > summary {
display: grid;
grid-template-columns: 1.2fr 1fr 0.7fr 0.7fr;
gap: 8px;
padding: 12px;
cursor: pointer;
list-style: none;
align-items: center;
}
.job-day-card > summary::-webkit-details-marker {
display: none;
}
.job-day-card > summary:hover {
background: #f9fbff;
}
.job-day-card[open] > summary {
background: #f7faff;
border-bottom: 1px solid #e2e8f0;
}
.job-day-row-label {
color: #0f172a;
font-size: 14px;
font-weight: 800;
display: block;
margin-bottom: 2px;
}
.job-day-row-date {
color: #64748b;
font-size: 12px;
font-weight: 700;
display: block;
}
.job-day-row-time {
color: #334155;
font-size: 13px;
font-weight: 700;
align-self: center;
}
.job-day-row-hours {
color: #334155;
font-size: 13px;
font-weight: 700;
align-self: center;
text-align: right;
}
.job-day-row-pay {
color: #0b5fc0;
font-size: 15px;
font-weight: 900;
align-self: center;
text-align: right;
}
.job-day-row-pay-wrap {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
}
.day-row-caret {
color: #64748b;
font-size: 14px;
font-weight: 900;
transition: transform 0.2s ease;
}
.job-day-card[open] .day-row-caret {
transform: rotate(180deg);
}
.job-day-details {
padding: 10px 12px 12px;
background: #ffffff;
}
.job-day-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 8px;
}
.job-day-detail-item {
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 8px 10px;
background: #fbfdff;
}
.job-day-detail-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #64748b;
font-weight: 800;
margin-bottom: 2px;
}
.job-day-detail-value {
color: #0f172a;
font-size: 13px;
font-weight: 700;
}
.summary-breakdown {
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.summary-breakdown-row {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 8px 10px;
border-bottom: 1px solid #edf2f7;
font-size: 13px;
color: #334155;
font-weight: 600;
background: #ffffff;
}
.summary-breakdown-row:last-child {
border-bottom: none;
}
.summary-breakdown-row .amount {
color: #0f172a;
font-weight: 800;
white-space: nowrap;
}
.summary-empty {
border: 1px dashed #d6deea;
border-radius: 12px;
background: #fbfdff;
color: #64748b;
padding: 22px;
text-align: center;
font-weight: 700;
font-size: 14px;
}
.job-summary-actions {
gap: 10px;
}
.job-summary-actions button {
margin-top: 0;
padding: 12px 16px;
font-size: 14px;
min-width: 160px;
}
.job-summary-actions .back-btn,
.job-summary-actions .summary-print-btn {
background: #f9fafb;
color: #334155;
border: 1px solid #d7e0ec;
box-shadow: none;
}
#summary-toggle-paid-btn {
background: #f9fafb;
color: #334155;
border: 1px solid #d7e0ec;
box-shadow: none;
}
#summary-toggle-paid-btn:hover {
background: #eaf0f8;
transform: translateY(-1px);
box-shadow: none;
}
.job-summary-actions .back-btn:hover,
.job-summary-actions .summary-print-btn:hover {
background: #eaf0f8;
transform: translateY(-1px);
box-shadow: none;
}
.penalty-item {
background: var(--success-soft);
color: var(--success-ink);
border-color: #b7ecd1;
box-shadow: none;
}
.calc-rules-card {
margin-top: 2px;
border: 1px solid #d8e1ee;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 250, 255, 0.92) 100%);
padding: 14px 16px;
}
.rules-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 20px;
color: var(--subtle);
font-size: 13px;
line-height: 1.55;
}
.rules-grid strong {
color: #0f172a;
font-weight: 700;
}
@media (max-width: 900px) {
h1 {
font-size: 38px;
}
.header-nav {
display: none;
}
.header-search-wrap {
display: none;
}
.site-header.mobile-search-open .header-search-wrap {
display: block;
position: absolute;
left: 12px;
right: 12px;
top: calc(100% + 8px);
width: auto;
transform: none;
}
.mobile-search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
.rules-grid {
grid-template-columns: 1fr;
}
.form-row {
flex-direction: column;
}
.day-save-actions {
grid-template-columns: 1fr;
}
.saved-secondary-actions {
grid-template-columns: 1fr;
}
.calculator-workspace {
grid-template-columns: 1fr;
}
.calc-estimate-panel {
position: static;
}
.job-summary-header {
flex-direction: column;
align-items: flex-start;
}
#summary-job-name {
font-size: 26px;
}
.job-summary-kpis {
grid-template-columns: 1fr;
}
.summary-secondary-actions {
min-width: 0;
width: 100%;
}
.summary-secondary-panel {
left: 0;
right: auto;
min-width: 220px;
}
.job-days-head {
display: none;
}
.saved-days {
width: 100%;
}
.job-day-row {
grid-template-columns: 1fr;
gap: 4px;
}
.job-day-row-time,
.job-day-row-hours,
.job-day-row-pay {
text-align: left;
}
.job-day-row-pay-wrap {
justify-content: space-between;
}
.job-day-detail-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 980px) {
.header-page-indicator {
top: 64px;
}
}
@media (max-width: 768px) {
.mobile-menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
.mobile-nav-panel {
top: 112px;
}
.job-actions .job-action-btn:not(.job-view-btn) {
display: none;
}
.job-actions .job-action-btn.job-view-btn {
width: 100%;
}
.job-actions .job-actions-row {
display: flex;
flex-direction: column;
gap: 6px;
align-items: stretch;
}
.account-subnav {
margin-top: 4px;
}
.account-subnav-btn {
font-size: 11px;
padding: 7px 9px;
}
}
/* UX polish overrides */
#tools-section .quick-actions .quick-action-btn {
min-height: 112px;
padding: 18px 18px;
border-radius: 20px;
}
.jobs-list-right {
gap: 10px;
padding: 0;
border-radius: 0;
background: transparent;
border: none;
}
#jobs-list-section,
#timesheets-list-section {
max-width: 1580px;
padding-left: 2%;
padding-right: 2%;
margin-left: auto;
margin-right: auto;
}
#analytics-section {
max-width: 1580px;
padding-left: 2%;
padding-right: 2%;
margin-left: auto;
margin-right: auto;
}
#analytics-section .account-section-content {
max-width: none;
margin: 0;
}
#clients-section {
max-width: 1580px;
padding-left: 2%;
padding-right: 2%;
margin-left: auto;
margin-right: auto;
}
#clients-section .account-section-content {
max-width: none;
margin: 0;
}
#tools-section {
padding-top: clamp(10px, 1.8vh, 18px);
}
#tools-section .dashboard-shell {
padding-top: 0;
}
#account-section,
#clients-section,
#analytics-section,
#mileage-section {
padding-top: var(--space-8);
}
#account-section .account-header,
#clients-section .account-header,
#analytics-section .account-header {
margin-top: 0;
}
#clients-section .account-header {
padding: 16px 18px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(226, 232, 240, 0.84);
margin-bottom: 14px;
}
#clients-section .account-name {
margin-bottom: 8px !important;
}
.clients-page-analytics {
border: 1px solid rgba(191, 219, 254, 0.9);
background: linear-gradient(140deg, rgba(248, 250, 252, 0.96), rgba(239, 246, 255, 0.9));
border-radius: 16px;
padding: 14px;
margin-top: 10px;
}
#clients-section .clients-top-grid {
margin-bottom: 14px;
}
#clients-section .clients-analytics-card > h3 {
color: #0f172a;
}
#clients-section .multi-input-item {
align-items: center;
}
#clients-section .multi-input-remove {
width: 30px;
height: 30px;
min-width: 30px;
padding: 0;
border-radius: 8px;
font-size: 12px;
line-height: 1;
}
.clients-page-analytics .clients-analytics-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}
#account-section .account-card.account-card-compact {
min-height: 0;
height: auto;
align-self: start;
}
#account-panel-settings .account-settings-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"preferences notifications"
"preferences activity"
"password data";
gap: 12px;
align-items: start;
}
#account-panel-settings .account-card {
min-height: 0;
height: auto;
padding: 16px;
}
#account-panel-settings .account-settings-card {
min-height: 0;
}
#account-panel-settings .account-settings-card-password,
#account-panel-settings .account-settings-card-data {
min-height: 250px;
}
#account-panel-settings .account-settings-card h3 {
margin-bottom: 8px;
}
#account-panel-settings .account-settings-card .settings-panel {
margin-top: 6px;
margin-bottom: 6px;
padding: 10px;
gap: 6px;
}
#account-panel-settings .settings-note {
margin-bottom: 4px;
}
#account-panel-settings .account-settings-card-preferences { grid-area: preferences; }
#account-panel-settings .account-settings-card-notifications { grid-area: notifications; }
#account-panel-settings .account-settings-card-password { grid-area: password; }
#account-panel-settings .account-settings-card-data { grid-area: data; }
#account-panel-settings .account-settings-card-activity { grid-area: activity; }
@media (max-width: 900px) {
#account-panel-settings .account-settings-grid {
grid-template-areas: none;
grid-template-columns: 1fr;
}
}
.invoice-template-canvas.density-comfortable .invoice-template-flow {
gap: 24px;
}
.invoice-template-canvas.density-comfortable .invoice-template-items-row {
padding-top: 14px;
padding-bottom: 14px;
}
.invoice-template-canvas.density-compact .invoice-template-flow {
gap: 8px;
}
.invoice-template-canvas.density-compact .invoice-template-items-row {
padding-top: 4px;
padding-bottom: 4px;
font-size: 12px;
}
.invoice-template-canvas.density-ultra-compact .invoice-template-flow {
gap: 6px;
}
.invoice-template-canvas.density-ultra-compact .invoice-template-items-row {
padding-top: 4px;
padding-bottom: 4px;
font-size: 12px;
}
.invoice-template-canvas .invoice-head-meta-right,
.invoice-template-canvas .invoice-head-logo-left {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: start;
}
.invoice-template-canvas .invoice-head-meta-right {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.invoice-template-canvas .invoice-head-meta-right .invoice-template-meta {
order: 2;
margin-left: auto;
text-align: right;
}
.invoice-template-canvas .invoice-head-meta-right > div:not(.invoice-template-meta) {
order: 1;
}
.invoice-template-canvas .invoice-head-logo-left .invoice-template-logo {
margin: 0 0 6px 0;
}
.invoice-template-canvas .invoice-head-banded {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 6px 10px;
}
.invoice-template-canvas .invoice-head-banded .invoice-template-meta {
grid-column: 1 / -1;
}
.invoice-template-canvas .invoice-head-minimal {
border-bottom-width: 1px;
padding-bottom: 8px;
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
.invoice-template-canvas {
position: relative;
}
.invoice-template-canvas .invoice-template-banner,
.invoice-template-canvas .invoice-template-head,
.invoice-template-canvas .invoice-template-flow {
position: relative;
z-index: 2;
}
.invoice-template-items-row.production .invoice-template-item-main {
letter-spacing: 0.01em;
}
.invoice-template-items-row.service .invoice-template-item-sub {
opacity: 0.95;
}
.invoice-template-items-row.compact {
align-items: center;
}
.invoice-template-items-row.compact .invoice-template-item-sub {
display: none;
}
.invoice-template-canvas .invoice-template-meta,
.invoice-template-canvas .invoice-template-party-title,
.invoice-template-canvas .invoice-template-item-sub {
color: var(--invoice-secondary, #334155);
}
.invoice-template-canvas .invoice-template-head,
.invoice-template-canvas .invoice-template-items,
.invoice-template-canvas .invoice-template-party,
.invoice-template-canvas .invoice-template-payment,
.invoice-template-canvas .invoice-template-note {
border-color: var(--invoice-divider, #cbd5e1);
}
.invoice-template-canvas .invoice-template-note.invoice-template-credit {
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: 0 !important;
}
.invoice-template-canvas.studio-focus [data-preview-section] {
position: relative;
transition: opacity 0.16s ease, box-shadow 0.16s ease;
}
.invoice-template-canvas.studio-focus [data-preview-section]:not(.invoice-preview-section-selected) {
opacity: 0.8;
}
#invoice-editor-section .invoice-preview-section-selected {
outline: 1px solid rgba(37, 99, 235, 0.36);
outline-offset: 1px;
border-radius: 6px;
box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.028);
opacity: 1 !important;
}
#invoice-editor-section .invoice-preview-section-selected::after {
content: attr(data-preview-label);
position: absolute;
top: -10px;
right: 8px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.02em;
color: #1D4ED8;
background: rgba(239, 246, 255, 0.98);
border: 1px solid #c7dcff;
border-radius: 999px;
padding: 1px 6px;
line-height: 1.4;
pointer-events: none;
}
.invoice-template-canvas .invoice-table-head-outlined {
background: transparent !important;
border: 1px solid var(--invoice-divider, #cbd5e1);
}
.invoice-template-canvas .invoice-table-head-minimal {
background: transparent !important;
border-bottom: 1px solid var(--invoice-divider, #cbd5e1);
font-weight: 700;
opacity: 0.85;
}
.design-studio-navigator {
display: grid;
gap: 6px;
margin-bottom: 8px;
}
.design-studio-nav-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 6px;
align-items: center;
padding: 4px 6px;
border: 1px solid #e6edf5;
border-radius: 9px;
background: #f9fbfd;
}
.design-studio-nav-head .settings-btn {
min-width: 32px;
min-height: 30px;
padding: 4px 8px;
font-size: 11px;
}
.design-studio-main {
display: grid;
grid-template-columns: 140px 1fr;
gap: 8px;
align-items: start;
}
.design-studio-section-map {
display: grid;
gap: 5px;
position: sticky;
top: 8px;
}
.studio-section-map-item {
text-align: left;
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #334155;
border-radius: 7px;
padding: 5px 8px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
min-height: 28px;
}
.studio-section-map-item.active {
border-color: #2563EB;
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.20);
color: #1e3a8a;
background: #f2f7f4;
}
.design-studio-editor .settings-panel {
min-height: 270px;
padding: 12px;
border-radius: 12px;
border: 1px solid #e2e8f0;
box-shadow: none;
}
.design-studio-editor-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 8px;
}
.design-studio-editor-actions {
display: flex;
gap: 6px;
}
.design-studio-editor-actions .settings-btn {
min-width: 68px;
padding: 6px 8px;
font-size: 12px;
}
.design-studio-subpage-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.studio-subpage-chip {
border: 1px solid #dbe5f1;
background: #fff;
color: #334155;
border-radius: 999px;
padding: 5px 10px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.studio-subpage-chip.active {
border-color: #2563EB;
color: #1e3a8a;
background: #f2f7f4;
}
.design-studio-controls details {
margin-top: 8px;
}
.design-studio-controls .settings-note {
color: #7b8798;
font-size: 11px;
}
.design-studio-preview-actions {
position: sticky;
bottom: 0;
z-index: 3;
margin-top: 8px;
padding-top: 6px;
background: linear-gradient(180deg, rgba(241, 245, 249, 0), rgba(241, 245, 249, 0.95) 30%, rgba(241, 245, 249, 1));
display: flex;
gap: 6px;
align-items: center;
}
/* Design Studio layout now handled by ds-* classes below */
#invoice-preview-modal .invoice-preview-modal-body {
display: flex;
justify-content: flex-start;
align-items: flex-start;
overflow: auto;
padding: 6px 0;
scrollbar-gutter: stable both-edges;
overscroll-behavior: contain;
}
#invoice-preview-modal .invoice-preview-modal-body .invoice-template-stack {
width: max-content;
min-width: 100%;
min-height: 100%;
height: auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding-bottom: 8px;
}
.invoice-template-banner {
width: 100%;
border-radius: 8px;
margin-bottom: 8px;
}
@media (max-width: 980px) {
.design-studio-main {
grid-template-columns: 1fr;
}
.design-studio-section-map {
position: static;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.clients-page-analytics .clients-analytics-title {
font-size: 15px;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.clients-page-analytics .clients-analytics-subtitle {
margin-top: 2px;
font-size: 12px;
font-weight: 600;
color: #475569;
}
.clients-page-analytics .clients-analytics-chip {
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
color: #1D4ED8;
border: 1px solid rgba(147, 197, 253, 0.9);
background: rgba(219, 234, 254, 0.9);
border-radius: 999px;
padding: 5px 10px;
}
.clients-page-analytics .clients-analytics-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.clients-page-analytics .clients-analytics-kpi {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(203, 213, 225, 0.9);
border-radius: 12px;
padding: 10px 11px;
display: flex;
flex-direction: column;
gap: 5px;
min-height: 70px;
}
.clients-page-analytics .clients-analytics-kpi-label {
font-size: 11px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.clients-page-analytics .clients-analytics-kpi-value {
font-size: 19px;
font-weight: 800;
color: #0f172a;
line-height: 1.1;
overflow-wrap: anywhere;
}
.clients-page-analytics .clients-analytics-share-title {
margin-top: 12px;
margin-bottom: 9px;
font-size: 12px;
font-weight: 800;
color: #334155;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.clients-page-analytics .clients-analytics-share-list {
display: grid;
gap: 9px;
}
.clients-page-analytics .clients-analytics-empty {
font-size: 13px;
font-weight: 600;
color: #64748b;
padding: 8px 2px;
}
.clients-page-analytics .clients-analytics-share-row {
display: grid;
grid-template-columns: minmax(160px, 1fr) minmax(120px, 2fr) auto;
align-items: center;
gap: 10px;
padding: 8px 9px;
border-radius: 11px;
border: 1px solid rgba(219, 234, 254, 0.9);
background: rgba(255, 255, 255, 0.86);
}
.clients-page-analytics .clients-analytics-share-name-wrap {
min-width: 0;
}
.clients-page-analytics .clients-analytics-share-name {
font-size: 13px;
font-weight: 800;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.clients-page-analytics .clients-analytics-share-meta {
margin-top: 2px;
font-size: 11px;
font-weight: 700;
color: #64748b;
}
.clients-page-analytics .clients-analytics-share-track {
height: 10px;
background: #e3efe9;
border-radius: 999px;
overflow: hidden;
}
.clients-page-analytics .clients-analytics-share-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #2563EB, #60A5FA);
}
.clients-page-analytics .clients-analytics-share-val {
display: grid;
justify-items: end;
gap: 2px;
font-size: 12px;
font-weight: 800;
color: #0f172a;
white-space: nowrap;
}
.clients-page-analytics .clients-analytics-share-pct {
font-size: 11px;
font-weight: 700;
color: #1e3a8a;
}
.clients-page-analytics .clients-analytics-chart {
display: grid;
gap: 8px;
margin-top: 4px;
}
.clients-page-analytics .clients-analytics-chart-row {
display: grid;
grid-template-columns: minmax(140px, 1fr) minmax(140px, 2fr) auto;
align-items: center;
gap: 10px;
padding: 8px 9px;
border-radius: 10px;
border: 1px solid rgba(219, 234, 254, 0.9);
background: rgba(255, 255, 255, 0.86);
}
.clients-page-analytics .clients-analytics-chart-name {
min-width: 0;
font-size: 12px;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.clients-page-analytics .clients-analytics-chart-bar-wrap {
height: 10px;
border-radius: 999px;
background: #e2e8f0;
overflow: hidden;
}
.clients-page-analytics .clients-analytics-chart-bar {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #3B82F6, #2563EB);
}
.clients-page-analytics .clients-analytics-chart-val {
font-size: 12px;
font-weight: 800;
color: #0f172a;
white-space: nowrap;
}
.clients-page-analytics .clients-analytics-table-wrap {
margin-top: 4px;
border: 1px solid rgba(219, 234, 254, 0.92);
border-radius: 12px;
background: rgba(255, 255, 255, 0.88);
overflow-x: auto;
}
.clients-page-analytics .clients-analytics-table {
width: 100%;
border-collapse: collapse;
min-width: 560px;
}
.clients-page-analytics .clients-analytics-table th,
.clients-page-analytics .clients-analytics-table td {
padding: 9px 10px;
border-bottom: 1px solid rgba(226, 232, 240, 0.86);
font-size: 12px;
text-align: left;
color: #0f172a;
}
.clients-page-analytics .clients-analytics-table th {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #475569;
background: rgba(239, 246, 255, 0.82);
}
.clients-page-analytics .clients-analytics-table tbody tr:last-child td {
border-bottom: none;
}
@media (max-width: 980px) {
.clients-page-analytics .clients-analytics-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.clients-page-analytics .clients-analytics-share-row {
grid-template-columns: minmax(140px, 1fr) minmax(100px, 1.5fr);
}
.clients-page-analytics .clients-analytics-share-val {
grid-column: 1 / -1;
justify-items: start;
}
.clients-page-analytics .clients-analytics-chart-row {
grid-template-columns: minmax(130px, 1fr) minmax(100px, 1.5fr);
}
.clients-page-analytics .clients-analytics-chart-val {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.clients-page-analytics {
padding: 12px;
}
.clients-page-analytics .clients-analytics-head {
flex-direction: column;
align-items: flex-start;
margin-bottom: 10px;
}
.clients-page-analytics .clients-analytics-kpis {
grid-template-columns: 1fr;
gap: 8px;
}
.clients-page-analytics .clients-analytics-kpi {
min-height: 0;
}
.clients-page-analytics .clients-analytics-share-row {
grid-template-columns: 1fr;
gap: 7px;
}
.clients-page-analytics .clients-analytics-chart-row {
grid-template-columns: 1fr;
gap: 7px;
}
}
.settings-btn.btn-primary,
.settings-btn.btn-secondary,
.quick-action-btn.btn-primary,
.quick-action-btn.btn-secondary,
.create-job-btn,
.create-job-primary,
.create-job-secondary,
.home-inline-btn,
.activity-action-btn {
border-radius: 12px !important;
}
@media (max-width: 900px) {
.jobs-list-header {
grid-template-columns: 1fr;
justify-items: stretch;
}
.jobs-list-left,
.jobs-list-right,
.jobs-list-header h2 {
justify-self: stretch;
}
.jobs-list-header h2 {
text-align: center;
}
}
/* ---- Balance Due Box ---- */
.balance-due-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: linear-gradient(135deg, #14523d, #1D4ED8);
border-radius: 16px;
padding: 18px 20px;
margin: 0 0 16px 0;
box-shadow: 0 4px 16px rgba(30, 64, 175, 0.25);
}
.balance-due-inner {
display: flex;
flex-direction: column;
gap: 2px;
}
.balance-due-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: rgba(255, 255, 255, 0.75);
}
.balance-due-amount {
font-size: 36px;
font-weight: 900;
color: #ffffff;
line-height: 1.05;
letter-spacing: -0.5px;
}
.balance-due-payments-info {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
margin-top: 4px;
font-weight: 500;
}
.balance-due-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.balance-due-btn {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
border-radius: 10px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
.balance-due-btn:hover {
background: rgba(255, 255, 255, 0.25);
}
/* ---- Part Payment Panel ---- */
.part-payment-panel {
background: #f8fafc;
border: 1px solid #dbe5f2;
border-radius: 14px;
padding: 16px;
margin: 0 0 16px 0;
}
.part-payment-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.part-payment-panel-head h4 {
font-size: 14px;
font-weight: 700;
color: #0f172a;
margin: 0;
}
.part-payment-close {
background: none;
border: none;
font-size: 16px;
color: #64748b;
cursor: pointer;
padding: 2px 6px;
border-radius: 6px;
line-height: 1;
}
.part-payment-close:hover {
background: #e2e8f0;
color: #0f172a;
}
.part-payment-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
.part-payment-field label {
display: block;
font-size: 12px;
font-weight: 600;
color: #475569;
margin-bottom: 4px;
}
.part-payment-field input {
width: 100%;
padding: 8px 10px;
border: 1px solid #d1dbe8;
border-radius: 8px;
font-size: 14px;
background: #ffffff;
color: #0f172a;
box-sizing: border-box;
}
.part-payment-field input:focus {
outline: none;
border-color: #1D4ED8;
box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.1);
}
.part-payment-btns {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.part-payment-history {
display: flex;
flex-direction: column;
gap: 6px;
}
.part-payment-entry {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 8px 10px;
font-size: 13px;
}
.part-payment-entry-info {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
}
.part-payment-entry-amount {
font-weight: 700;
color: #0f172a;
font-size: 14px;
}
.part-payment-entry-meta {
color: #64748b;
font-size: 11px;
}
.part-payment-remove {
background: none;
border: none;
color: #94a3b8;
cursor: pointer;
font-size: 13px;
padding: 2px 6px;
border-radius: 6px;
font-weight: 600;
}
.part-payment-remove:hover {
background: #fee2e2;
color: #dc2626;
}
/* Dark mode - balance due & part payment */
body.dark-mode .balance-due-box {
background: linear-gradient(135deg, #1e3a8a, #14523d);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
body.dark-mode .part-payment-panel {
background: #1e293b;
border-color: #334155;
}
body.dark-mode .part-payment-panel-head h4 {
color: #f1f5f9;
}
body.dark-mode .part-payment-close:hover {
background: #334155;
color: #f1f5f9;
}
body.dark-mode .part-payment-field label {
color: #94a3b8;
}
body.dark-mode .part-payment-field input {
background: #0f172a;
border-color: #334155;
color: #f1f5f9;
}
body.dark-mode .part-payment-entry {
background: #0f172a;
border-color: #334155;
}
body.dark-mode .part-payment-entry-amount {
color: #f1f5f9;
}
@media (max-width: 600px) {
.part-payment-field-row {
grid-template-columns: 1fr;
}
}
/* ---- Account Settings Divider ---- */
.account-settings-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 32px 0 20px;
}
.account-settings-divider::before,
.account-settings-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(226, 232, 240, 0.9);
}
.account-settings-divider-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #64748b;
white-space: nowrap;
flex-shrink: 0;
}
body.dark-mode .account-settings-divider::before,
body.dark-mode .account-settings-divider::after {
background: rgba(255, 255, 255, 0.10);
}
body.dark-mode .account-settings-divider-label {
color: #94a3b8;
}
/* Account page tabs */
.account-page-tabs {
display: flex;
gap: 4px;
margin-bottom: 24px;
background: #f1f5f9;
border-radius: 12px;
padding: 4px;
}
.account-page-tab {
flex: 1;
padding: 10px 16px;
border: none;
border-radius: 8px;
background: transparent;
font-size: 14px;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
letter-spacing: -0.01em;
}
.account-page-tab.active {
background: #ffffff;
color: #0f172a;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}
.account-page-tab:hover:not(.active) {
color: #334155;
background: rgba(255, 255, 255, 0.5);
}
body.dark-mode .account-page-tabs {
background: #1e293b;
}
body.dark-mode .account-page-tab {
color: #94a3b8;
}
body.dark-mode .account-page-tab.active {
background: #0f172a;
color: #f1f5f9;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
body.dark-mode .account-page-tab:hover:not(.active) {
color: #cbd5e1;
background: rgba(255, 255, 255, 0.05);
}
/* ═══════════════════════════════════════════════════════════
DESIGN STUDIO WORKSPACE — clean fixed layout, no cascade conflicts
═══════════════════════════════════════════════════════════ */
/* Section uses normal document flow — no fixed/absolute positioning */
#invoice-editor-section {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
height: calc(100vh - var(--invoice-editor-top-offset, 120px)) !important;
max-height: calc(100vh - var(--invoice-editor-top-offset, 120px)) !important;
z-index: 1 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
background: #fff;
display: flex;
flex-direction: column;
}
#invoice-editor-section::before {
display: none !important;
content: none !important;
}
#invoice-editor-section > * {
z-index: auto !important;
}
/* ── Two-column workspace grid ──────────────────────── */
.ds-workspace {
display: grid;
grid-template-columns: minmax(252px, 336px) 1fr;
height: 100%;
overflow: hidden;
}
/* ── Left panel: scrollable editor ─────────────────── */
.ds-left-panel {
display: flex;
flex-direction: column;
overflow: hidden;
border-right: 1px solid #e2e8f0;
background: #fff;
}
.ds-left-head {
flex-shrink: 0;
display: flex;
align-items: center;
padding: 10px 16px 8px;
border-bottom: 1px solid #e2e8f0;
min-height: 40px;
}
.ds-title {
font-size: 14px;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.01em;
}
.ds-left-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 14px 16px 32px;
}
/* ── Right panel: fixed-height preview (never scrolls) ─ */
.ds-right-panel {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
background: transparent;
}
/* ── Preview header ─────────────────────────────────── */
.studio-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 10px;
flex-shrink: 0;
border-bottom: 1px solid #dde3ec;
background: #fff;
gap: 12px;
min-height: 34px;
box-sizing: border-box;
}
.studio-preview-header-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.studio-preview-title {
font-size: 13px;
font-weight: 700;
color: #1e293b;
white-space: nowrap;
}
.studio-preview-meta {
font-size: 11px;
color: #94a3b8;
white-space: nowrap;
}
/* ── Zoom controls ──────────────────────────────────── */
.studio-zoom-row {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.studio-zoom-btn {
border: 1px solid #dbe5f1;
background: #f8fafc;
color: #334155;
border-radius: 6px;
padding: 4px 9px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
line-height: 1.4;
min-width: 28px;
text-align: center;
}
.studio-zoom-btn:hover { background: #e8f0fb; border-color: #94a3b8; }
.studio-zoom-btn.active { background: #0f172a; border-color: #0f172a; color: #fff; }
.studio-zoom-label {
font-size: 11px;
font-weight: 600;
color: #64748b;
width: 36px;
text-align: center;
}
/* ── Preview viewport: fills all space, centers page ─── */
.studio-preview-viewport {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
align-items: flex-start;
justify-content: center;
box-sizing: border-box;
padding-top: 2px;
padding-bottom: 2px;
position: relative;
background: linear-gradient(180deg, #f4f8ff 0%, #edf4ff 50%, #f0f6ff 100%);
}
.studio-preview-viewport::before {
content: '';
position: absolute;
width: 70vmax;
height: 70vmax;
top: -30vmax;
left: -24vmax;
border-radius: 999px;
pointer-events: none;
z-index: 0;
filter: blur(2px);
background: radial-gradient(circle at 40% 40%, rgba(30, 64, 175, 0.18), rgba(30, 64, 175, 0));
animation: appHeroGlow 11s ease-in-out infinite;
}
.studio-preview-viewport::after {
content: '';
position: absolute;
right: -28vmax;
bottom: -34vmax;
width: 76vmax;
height: 76vmax;
pointer-events: none;
z-index: 0;
border-radius: 999px;
filter: blur(2px);
background: radial-gradient(circle at 52% 48%, rgba(8, 145, 178, 0.16), rgba(8, 145, 178, 0));
animation: appAmbientFloat 16s ease-in-out infinite alternate;
}
/* Preview element: JS sizes this to scaled A4 dims */
#invoice-template-preview {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
cursor: default;
max-height: none;
max-width: none;
overflow: hidden;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* The inner stack: JS removes CSS zoom and applies transform */
#invoice-editor-section .invoice-template-preview .invoice-template-stack {
margin: 0;
padding: 0;
overflow: hidden;
zoom: 1 !important;
transform-origin: top left;
width: 794px !important;
min-width: 794px !important;
height: 1123px;
min-height: unset;
}
#invoice-editor-section .invoice-template-preview .invoice-preview-page {
overflow: hidden;
}
/* A4 page — paper treatment */
#invoice-editor-section .invoice-template-canvas.a4 {
box-sizing: border-box;
width: 794px !important;
max-width: none;
height: 1123px;
position: relative;
overflow: hidden;
aspect-ratio: 210 / 297;
border: 1px solid #d9e1eb;
border-radius: 3px;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.14);
}
/* ── Action bar ─────────────────────────────────────── */
.studio-preview-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
flex-shrink: 0;
border-top: 1px solid #dde3ec;
background: #fff;
box-sizing: border-box;
}
.studio-unsaved-label {
font-size: 11px;
color: #64748b;
font-weight: 600;
flex-shrink: 0;
margin: 0;
}
/* ── Icon buttons (Undo / Redo / Reset) ─────────────── */
.studio-icon-btn {
border: 1px solid #dbe5f1;
background: #f8fafc;
color: #334155;
border-radius: 6px;
padding: 4px 7px;
font-size: 15px;
cursor: pointer;
min-width: 30px;
min-height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.12s;
line-height: 1;
}
.studio-icon-btn:hover { background: #e8f0fb; border-color: #94a3b8; }
.studio-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* ── Selection highlight pulse ──────────────────────── */
#invoice-editor-section .invoice-preview-section-selected {
animation: studioSelectPulse 0.15s ease-out;
}
#invoice-editor-section .invoice-template-canvas [data-preview-section].invoice-preview-hover-zone,
#invoice-editor-section .invoice-template-canvas .invoice-preview-hover-zone[data-preview-section] {
outline: 1px solid transparent;
outline-offset: 1px;
border-radius: 3px;
transition: outline-color 0.12s ease, box-shadow 0.12s ease;
}
#invoice-editor-section .invoice-template-canvas [data-preview-section].invoice-preview-hover-zone:hover,
#invoice-editor-section .invoice-template-canvas .invoice-preview-hover-zone[data-preview-section]:hover {
outline-color: color-mix(in srgb, var(--invoice-accent, #2563EB) 40%, transparent);
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.14);
}
@keyframes studioSelectPulse {
0% { box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.09); }
50% { box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.15); }
100% { box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.03); }
}
/* ── Dark mode ──────────────────────────────────────── */
body.dark-mode #invoice-editor-section { background: #111318; }
body.dark-mode .ds-left-panel { background: #111318; border-color: rgba(255,255,255,0.09); }
body.dark-mode .ds-left-head { border-color: rgba(255,255,255,0.09); }
body.dark-mode .ds-title { color: #f1f5f9; }
body.dark-mode .ds-right-panel { background: transparent; }
body.dark-mode .studio-preview-viewport {
background: linear-gradient(180deg, #111318 0%, #131620 50%, #111318 100%);
}
body.dark-mode .studio-preview-viewport::before {
background: radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.12), transparent);
}
body.dark-mode .studio-preview-viewport::after {
background: radial-gradient(circle at 52% 48%, rgba(6, 182, 212, 0.10), transparent);
}
body.dark-mode .studio-preview-header,
body.dark-mode .studio-preview-bar { background: #111318; border-color: rgba(255,255,255,0.09); }
body.dark-mode .studio-preview-title { color: #f1f5f9; }
body.dark-mode .studio-preview-meta { color: #64748b; }
body.dark-mode .studio-zoom-label { color: #94a3b8; }
body.dark-mode .studio-unsaved-label { color: #cbd5e1; }
body.dark-mode .studio-zoom-btn { background: #1e2534; border-color: rgba(255,255,255,0.09); color: #cbd5e1; }
body.dark-mode .studio-zoom-btn:hover { background: #253047; }
body.dark-mode .studio-zoom-btn.active { background: #f1f5f9; border-color: #f1f5f9; color: #0f172a; }
body.dark-mode .studio-icon-btn { background: #1e2534; border-color: rgba(255,255,255,0.09); color: #cbd5e1; }
body.dark-mode .studio-icon-btn:hover { background: #253047; }
/* ── Responsive (narrow) ────────────────────────────── */
@media (max-width: 900px) {
.ds-workspace {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.ds-left-panel { max-height: 50vh; }
.ds-right-panel { min-height: 0; }
.studio-preview-viewport { min-height: 300px; }
}
/* Invoice Editor v2: canvas-first with bottom tabs */
#invoice-editor-section .ds-workspace {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
#invoice-editor-section .ds-right-panel {
order: 1;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
background: #edf1f5;
}
#invoice-editor-section .studio-preview-header {
order: 1;
min-height: 42px;
padding: 6px 12px;
}
#invoice-editor-section .studio-preview-bar {
order: 3;
padding: 7px 12px;
}
#invoice-editor-section .studio-preview-viewport {
order: 2;
flex: 1 1 auto;
min-height: 0;
overflow: auto;
align-items: flex-start;
justify-content: center;
padding: 18px 18px 28px;
}
#invoice-editor-section #invoice-template-preview {
margin: 0 auto;
}
#invoice-editor-section .ds-left-panel {
order: 2;
flex: 0 0 auto;
max-height: min(44vh, 420px);
border-right: 0;
border-top: 1px solid #d9e2ee;
background: #f8fafc;
}
#invoice-editor-section .ds-left-head {
display: none;
}
#invoice-editor-section .ds-left-scroll {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px 10px 10px;
overflow: hidden;
}
#invoice-editor-section .design-studio-navigator {
margin: 0;
}
#invoice-editor-section .design-studio-nav-head {
padding: 5px 8px;
border-radius: 10px;
background: #ffffff;
}
#invoice-editor-section .design-studio-main {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
}
#invoice-editor-section .design-studio-editor {
order: 1;
min-height: 0;
}
#invoice-editor-section .design-studio-editor .settings-panel {
min-height: 0;
max-height: min(27vh, 260px);
overflow: auto;
border-radius: 12px;
background: #ffffff;
}
#invoice-editor-section .design-studio-subpage-chips {
margin-bottom: 8px;
}
#invoice-editor-section #studio-section-map {
order: 2;
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
padding: 3px 1px 1px;
position: static;
}
#invoice-editor-section .studio-section-map-item {
flex: 0 0 auto;
border-radius: 999px;
padding: 7px 12px;
min-height: 34px;
font-size: 12px;
font-weight: 700;
}
#invoice-editor-section .studio-section-map-item.active {
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.26);
}
@media (max-width: 900px) {
#invoice-editor-section .ds-left-panel {
max-height: min(56vh, 430px);
}
#invoice-editor-section .design-studio-editor .settings-panel {
max-height: min(36vh, 320px);
}
#invoice-editor-section .studio-zoom-row {
gap: 3px;
flex-wrap: wrap;
justify-content: flex-end;
}
#invoice-editor-section .studio-zoom-btn {
padding: 4px 7px;
min-width: 30px;
}
}
/* Step 1: Style dock shell (placeholder presets only) */
#invoice-editor-section {
--studio-dock-height: 250px;
}
#invoice-editor-section .ds-left-panel {
display: none !important;
}
#invoice-editor-section .ds-workspace {
flex: 1 1 auto;
min-height: 0;
padding-bottom: 0;
position: relative;
z-index: 1;
}
#invoice-editor-section .ds-right-panel {
height: 100%;
}
#invoice-editor-section .studio-preview-viewport {
overflow: auto;
padding-bottom: 18px;
}
.studio-style-dock {
position: relative;
left: 0;
right: 0;
bottom: auto;
height: var(--studio-dock-height);
border-top: 1px solid #dbe4ef;
background: #f8fafd;
z-index: 6;
display: grid;
grid-template-rows: auto 1fr;
gap: 8px;
padding: 10px 12px 12px;
box-sizing: border-box;
flex: 0 0 var(--studio-dock-height);
}
.studio-style-dock.hidden {
display: none !important;
}
.studio-style-dock-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.studio-style-tabs {
display: flex;
gap: 6px;
min-width: 0;
overflow-x: auto;
}
.studio-style-tab {
border: 1px solid #dbe5f1;
background: #ffffff;
color: #334155;
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.studio-style-tab.active {
background: #0f172a;
border-color: #0f172a;
color: #ffffff;
}
.studio-style-dock-actions {
display: flex;
align-items: center;
gap: 6px;
}
.studio-dock-carousel-shell {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px;
min-height: 0;
}
.studio-dock-arrow {
border: 1px solid #dbe5f1;
background: #ffffff;
color: #0f172a;
border-radius: 10px;
min-width: 36px;
min-height: 36px;
align-self: center;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.studio-dock-carousel-wrap {
position: relative;
min-width: 0;
min-height: 0;
}
.studio-dock-carousel {
display: none;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 2px 2px 6px;
height: 100%;
align-items: stretch;
}
.studio-dock-carousel.active {
display: flex;
}
.studio-dock-card {
flex: 0 0 180px;
min-height: 112px;
border: 1px solid #dbe5f1;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
color: #0f172a;
border-radius: 12px;
padding: 10px;
text-align: left;
font-size: 12px;
font-weight: 700;
cursor: pointer;
scroll-snap-align: start;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.studio-dock-modal {
position: absolute;
inset: 0;
z-index: 20;
background: rgba(15, 23, 42, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
.studio-dock-modal-content {
width: min(960px, 96vw);
max-height: min(76vh, 760px);
background: #ffffff;
border-radius: 16px;
border: 1px solid #dbe5f1;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
display: grid;
grid-template-rows: auto 1fr;
overflow: hidden;
}
.studio-dock-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #e2e8f0;
}
.studio-dock-modal-grid {
overflow: auto;
padding: 14px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
@media (max-width: 900px) {
#invoice-editor-section {
--studio-dock-height: 272px;
}
.studio-style-dock {
padding: 10px 10px 12px;
}
.studio-style-dock-head {
flex-direction: column;
align-items: flex-start;
}
.studio-style-dock-actions {
width: 100%;
}
.studio-style-dock-actions .edit-btn {
flex: 1 1 auto;
}
}
/* Step 2: dock stabilization (layout-only) */
body.invoice-editor-active {
overflow: hidden;
}
#invoice-editor-section {
--studio-dock-height: 240px;
}
#invoice-editor-section .invoice-editor-main-wrap {
flex: 1 1 auto;
min-height: 0;
height: 100%;
box-sizing: border-box;
padding-bottom: var(--studio-dock-height);
overflow: hidden;
}
#invoice-editor-section .ds-workspace {
height: 100%;
min-height: 0;
}
#invoice-editor-section .studio-preview-viewport {
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
#invoice-editor-section .studio-style-dock {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: var(--studio-dock-height);
z-index: 1100;
box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.14);
}
/* Step 3: large preview workspace */
#invoice-editor-section.editor-layout {
display: flex !important;
flex-direction: column;
width: 100vw !important;
height: 100vh;
overflow: hidden;
}
#invoice-editor-section.editor-layout .invoice-editor-main-wrap {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
padding-bottom: var(--studio-dock-height);
}
#invoice-editor-section.editor-layout .ds-workspace {
flex: 1 1 auto;
min-height: 0;
width: 100%;
max-width: none !important;
}
#invoice-editor-section.editor-layout .ds-right-panel {
display: grid !important;
grid-template-rows: auto minmax(0, 1fr) auto;
min-height: 0;
height: 100%;
}
#invoice-editor-section.editor-layout .studio-preview-header {
grid-row: 1;
}
#invoice-editor-section.editor-layout .preview-workspace {
grid-row: 2;
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: flex-start;
justify-content: center;
overflow: auto;
padding: 24px;
}
#invoice-editor-section.editor-layout .studio-preview-bar {
grid-row: 3;
position: relative;
z-index: 2;
}
#invoice-editor-section.editor-layout #invoice-template-preview {
max-width: none !important;
}
/* Invoice Editor hard reset: single, conflict-free layout */
#invoice-editor-section.editor-layout {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
height: calc(100vh - var(--invoice-editor-top-offset, 120px)) !important;
max-height: calc(100vh - var(--invoice-editor-top-offset, 120px)) !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
--studio-dock-height: 0px;
}
#invoice-editor-section.editor-layout .invoice-editor-main-wrap {
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
#invoice-editor-section.editor-layout .ds-workspace {
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
display: grid !important;
grid-template-columns: minmax(330px, 420px) minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) !important;
overflow: hidden !important;
max-width: none !important;
}
#invoice-editor-section.editor-layout .ds-left-panel {
display: flex !important;
flex-direction: column !important;
grid-column: 1 !important;
height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
}
#invoice-editor-section.editor-layout .ds-right-panel {
grid-column: 2 !important;
height: 100% !important;
min-height: 0 !important;
display: grid !important;
grid-template-rows: auto minmax(0, 1fr) !important;
overflow: hidden !important;
background: #e7edf3 !important;
}
#invoice-editor-section.editor-layout .studio-preview-header {
grid-row: 1 !important;
}
#invoice-editor-section.editor-layout .studio-preview-viewport {
grid-row: 2 !important;
min-height: 0 !important;
overflow: auto !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
padding: 12px !important;
}
#invoice-editor-section.editor-layout .studio-preview-bar {
grid-row: 3 !important;
position: relative !important;
z-index: 2 !important;
}
#invoice-editor-section.editor-layout .studio-style-dock {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: var(--studio-dock-height) !important;
z-index: 1100 !important;
}
/* Invoice Editor polish: compact top toolbar + maximum canvas space */
#invoice-editor-section.editor-layout .studio-preview-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
min-height: 50px !important;
padding: 6px 14px !important;
background: #ffffff !important;
border-bottom: 1px solid #dfe7f1 !important;
}
#invoice-editor-section.editor-layout .studio-preview-header-left {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
}
#invoice-editor-section.editor-layout .studio-preview-tools {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
#invoice-editor-section.editor-layout .studio-preview-actions {
display: flex;
align-items: center;
gap: 6px;
}
#invoice-editor-section.editor-layout .studio-toolbar-btn {
min-height: 34px;
padding: 7px 12px;
border-radius: 10px;
font-size: 13px;
line-height: 1.1;
}
#invoice-editor-section.editor-layout .studio-zoom-row {
display: flex;
align-items: center;
gap: 6px;
}
#invoice-editor-section.editor-layout .studio-zoom-btn {
min-width: 36px;
}
#invoice-editor-section.editor-layout .studio-toolbar-btn-primary {
min-width: 88px;
}
#invoice-editor-section.editor-layout .studio-unsaved-label {
display: inline-block;
margin-right: 2px;
font-size: 12px;
font-weight: 700;
color: #64748b;
white-space: nowrap;
}
#invoice-editor-section.editor-layout .studio-preview-bar {
display: none !important;
height: 0 !important;
min-height: 0 !important;
border: 0 !important;
padding: 0 !important;
}
#invoice-editor-section.editor-layout .studio-preview-viewport {
margin: 0 !important;
}
#invoice-editor-section.editor-layout .invoice-template-canvas.a4 {
border-radius: 4px !important;
box-shadow: 0 6px 22px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}
#invoice-editor-section.editor-layout .studio-style-dock {
border-top: 1px solid #d7e0ec !important;
box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.10) !important;
padding: 8px 12px 10px !important;
}
#invoice-editor-section.editor-layout .studio-style-dock-head {
gap: 8px;
}
#invoice-editor-section.editor-layout .studio-dock-card {
min-height: 94px;
}
@media (max-width: 1200px) {
#invoice-editor-section.editor-layout .studio-preview-header {
min-height: 58px !important;
padding: 8px 10px !important;
}
#invoice-editor-section.editor-layout .studio-preview-tools {
gap: 8px;
}
#invoice-editor-section.editor-layout .studio-toolbar-btn {
min-height: 32px;
padding: 6px 10px;
}
}
@media (max-width: 980px) {
#invoice-editor-section.editor-layout {
--studio-dock-height: 248px;
}
#invoice-editor-section.editor-layout .studio-preview-header {
flex-wrap: wrap;
row-gap: 6px;
}
#invoice-editor-section.editor-layout .studio-preview-tools {
width: 100%;
justify-content: space-between;
}
#invoice-editor-section.editor-layout .studio-preview-actions {
flex-wrap: wrap;
justify-content: flex-end;
}
}
/* Invoice Editor routing fix: normal flow (already handled above) */
#invoice-editor-section.editor-layout .studio-style-dock {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
}
/* Bottom dock: disabled in dual-panel layout */
#invoice-editor-section.editor-layout {
--studio-dock-height: 0px;
}
@media (max-height: 800px) {
#invoice-editor-section.editor-layout {
--studio-dock-height: 0px;
}
}
#invoice-editor-section.editor-layout .invoice-editor-main-wrap {
padding-bottom: 0 !important;
}
#invoice-editor-section.editor-layout .studio-preview-viewport {
padding-bottom: 12px !important;
}
#invoice-editor-section.editor-layout .studio-style-dock {
height: var(--studio-dock-height) !important;
overflow: hidden !important;
display: grid !important;
grid-template-rows: 64px minmax(132px, 1fr) !important;
gap: 10px !important;
padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
#invoice-editor-section.editor-layout .studio-style-dock-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 64px;
min-height: 64px;
padding: 0 14px;
box-sizing: border-box;
overflow: hidden;
}
#invoice-editor-section.editor-layout .studio-style-tabs {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
min-width: 0;
}
#invoice-editor-section.editor-layout .studio-style-tab {
height: 44px;
min-height: 44px;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
#invoice-editor-section.editor-layout .studio-style-dock-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
#invoice-editor-section.editor-layout .studio-style-dock-actions .edit-btn {
min-height: 38px !important;
height: 38px !important;
padding: 8px 14px !important;
border-radius: 12px !important;
font-size: 13px !important;
line-height: 1 !important;
box-shadow: none !important;
}
#invoice-editor-section.editor-layout .studio-dock-carousel-shell {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 40px;
align-items: stretch;
gap: 10px;
min-height: 132px;
}
#invoice-editor-section.editor-layout .studio-dock-arrow {
align-self: center;
justify-self: center;
width: 40px;
height: 40px;
}
#invoice-editor-section.editor-layout .studio-dock-carousel-wrap {
min-height: 132px;
overflow: visible;
}
#invoice-editor-section.editor-layout .studio-dock-carousel {
min-height: 132px;
align-items: stretch;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
padding: 2px 2px 12px;
}
#invoice-editor-section.editor-layout .studio-dock-card {
height: 120px;
min-height: 120px;
}
@media (max-width: 980px) {
#invoice-editor-section.editor-layout .studio-style-dock {
grid-template-rows: 60px minmax(126px, 1fr) !important;
padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
#invoice-editor-section.editor-layout .studio-style-dock-head {
height: 60px;
min-height: 60px;
padding: 0 10px;
}
#invoice-editor-section.editor-layout .studio-style-tab {
height: 40px;
min-height: 40px;
padding: 0 12px;
}
#invoice-editor-section.editor-layout .studio-dock-carousel-shell {
min-height: 126px;
}
#invoice-editor-section.editor-layout .studio-dock-carousel,
#invoice-editor-section.editor-layout .studio-dock-carousel-wrap {
min-height: 126px;
}
#invoice-editor-section.editor-layout .studio-dock-card {
height: 114px;
min-height: 114px;
}
}
/* Always honor section routing hide state */
#invoice-editor-section.hidden {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Account subnav: keep current layout, fix vertical centering of labels */
.account-subnav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding-top: 0;
padding-bottom: 0;
line-height: 1;
transform: translateY(-4px);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
.account-subnav-btn:hover,
.account-subnav-btn:focus-visible,
.account-subnav-btn.active {
transform: translateY(-4px) !important;
}
/* Invoice editor height-responsive compact modes for normal Mac windows */
@media (max-height: 900px) {
#invoice-editor-section.editor-layout .studio-preview-header {
min-height: 46px !important;
padding: 4px 10px !important;
}
#invoice-editor-section.editor-layout .studio-toolbar-btn {
min-height: 32px;
padding: 6px 10px;
}
#invoice-editor-section.editor-layout .studio-zoom-btn {
min-height: 30px;
padding: 4px 8px;
}
#invoice-editor-section.editor-layout .studio-preview-viewport {
padding: 8px !important;
}
}
:is(#jobs-list-section, #timesheets-list-section) .jobs-list-header {
display: block !important;
margin-bottom: 14px !important;
padding: 10px 12px 12px !important;
}
:is(#jobs-list-section, #timesheets-list-section) .invoices-title-row {
margin-bottom: 12px;
padding: 4px 6px 0 6px;
}
:is(#jobs-list-section, #timesheets-list-section) .invoices-title-row h2 {
margin: 0 !important;
line-height: 1.15 !important;
position: static !important;
transform: none !important;
width: auto !important;
text-align: left !important;
justify-self: start !important;
}
:is(#jobs-list-section, #timesheets-list-section) .invoices-action-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
flex-direction: row !important;
}
:is(#jobs-list-section, #timesheets-list-section) .invoices-action-left {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
min-width: 280px;
width: auto !important;
gap: 8px !important;
margin-left: 22px !important;
}
:is(#jobs-list-section, #timesheets-list-section) .invoices-title-row {
padding-left: 6px;
}
#jobs-list-section .invoices-action-left {
margin-left: 6px !important;
}
:is(#jobs-list-section, #timesheets-list-section) .invoices-action-left.jobs-primary-action-box {
margin-left: 6px !important;
transform: none;
}
:is(#jobs-list-section, #timesheets-list-section) .jobs-primary-action-box {
min-width: 0 !important;
max-width: none !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#jobs-list-section #invoices-new-invoice-btn,
#timesheets-list-section #timesheets-new-timesheet-btn {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
height: 28px;
min-height: 28px;
padding: 0 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
min-width: 140px !important;
width: auto !important;
margin: 0 !important;
box-sizing: border-box;
vertical-align: middle;
transform: none !important;
}
#jobs-list-section #invoices-new-invoice-btn,
#timesheets-list-section #timesheets-new-timesheet-btn {
margin-left: 14px !important;
}
#timesheets-list-section #timesheets-new-timesheet-btn {
margin-left: 0 !important;
}
:is(#jobs-list-section, #timesheets-list-section) .invoices-action-link {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
height: 30px;
min-height: 30px;
padding: 0 10px;
border: 1px solid #d3dce8;
background: #ffffff;
color: #334155;
font-size: 12px;
font-weight: 600;
border-radius: 999px;
line-height: 1;
white-space: nowrap;
margin: 0 !important;
box-sizing: border-box;
vertical-align: middle;
box-shadow: none !important;
transform: none !important;
}
:is(#jobs-list-section, #timesheets-list-section) .invoices-action-link:hover,
:is(#jobs-list-section, #timesheets-list-section) .invoices-action-link:focus-visible {
background: #f1f5f9;
color: #0f172a;
outline: none;
}
:is(#jobs-list-section, #timesheets-list-section) .invoices-action-icon {
margin-right: 5px;
flex: 0 0 auto;
opacity: 0.85;
}
:is(#jobs-list-section, #timesheets-list-section) .invoices-action-right {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 12px !important;
margin-left: auto !important;
flex-wrap: wrap !important;
width: auto !important;
}
:is(#jobs-list-section, #timesheets-list-section) .jobs-filter-select {
height: 34px;
border-radius: 10px;
padding: 0 10px;
width: auto !important;
}
/* Timesheets page premium polish */
#timesheets-list-section {
--timesheets-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 255, 0.92));
--timesheets-card-border: rgba(186, 208, 232, 0.45);
--timesheets-card-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}
#timesheets-list-section .jobs-list-header {
border: 1px solid var(--timesheets-card-border);
border-radius: 18px;
background: var(--timesheets-card-bg);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
backdrop-filter: blur(6px);
}
#timesheets-list-section #timesheets-list-container {
margin-top: 12px;
border: 1px solid var(--timesheets-card-border);
border-radius: 18px;
background: var(--timesheets-card-bg);
box-shadow: var(--timesheets-card-shadow);
overflow: hidden;
}
#timesheets-list-section .timesheets-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 16px;
}
#timesheets-list-section #timesheets-table {
background: transparent;
}
#timesheets-list-section #timesheets-table thead th {
background: linear-gradient(180deg, rgba(241, 247, 255, 0.96), rgba(233, 241, 252, 0.94));
border-bottom-color: rgba(176, 196, 220, 0.5);
color: #334155;
}
#timesheets-list-section #timesheets-table tbody tr.timesheets-table-row {
transition: transform 180ms ease, box-shadow 220ms ease, background-color 220ms ease;
animation: timesheetRowIn 320ms ease both;
animation-delay: calc(var(--timesheet-row-index, 0) * 26ms);
}
#timesheets-list-section #timesheets-table tbody tr.timesheets-table-row:hover {
transform: translateY(-1px);
box-shadow: inset 0 0 0 1px rgba(166, 188, 214, 0.4);
background: linear-gradient(90deg, rgba(246, 251, 255, 0.96), rgba(240, 248, 255, 0.95));
}
#timesheets-list-section #timesheets-table tbody tr.timesheets-table-row.job-row-selected {
background: linear-gradient(92deg, rgba(226, 242, 255, 0.92), rgba(236, 248, 255, 0.9));
box-shadow: inset 0 0 0 1px rgba(99, 149, 201, 0.42);
}
#timesheets-list-section #timesheets-table .job-actions-row {
gap: 7px;
}
#timesheets-list-section #timesheets-table .job-action-btn {
border-radius: 999px;
border: 1px solid rgba(183, 203, 225, 0.8);
background: linear-gradient(180deg, #ffffff, #f4f8fd);
color: #334155;
transition: transform 150ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
#timesheets-list-section #timesheets-table .job-action-btn:hover,
#timesheets-list-section #timesheets-table .job-action-btn:focus-visible {
transform: translateY(-1px);
border-color: rgba(120, 162, 204, 0.82);
box-shadow: 0 10px 18px rgba(59, 130, 246, 0.15);
background: linear-gradient(180deg, #ffffff, #ecf5ff);
}
#timesheets-list-section #timesheets-table .job-action-btn[data-timesheet-action="create-invoice"] {
border-color: rgba(37, 99, 235, 0.36);
color: #1e3a8a;
background: linear-gradient(180deg, #f7fbff, #eaf3ff);
}
#timesheets-list-section #timesheets-table .job-action-btn[data-timesheet-action="create-invoice"]:hover,
#timesheets-list-section #timesheets-table .job-action-btn[data-timesheet-action="create-invoice"]:focus-visible {
border-color: rgba(37, 99, 235, 0.62);
box-shadow: 0 10px 16px rgba(59, 130, 246, 0.2);
background: linear-gradient(180deg, #f1f7ff, #e2eeff);
}
#timesheets-list-section #no-timesheets-message {
margin: 20px;
border-radius: 14px;
border: 1px dashed rgba(154, 181, 210, 0.55);
background: linear-gradient(145deg, rgba(248, 252, 255, 0.95), rgba(242, 248, 255, 0.9));
}
@keyframes timesheetRowIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
#timesheets-list-section #timesheets-table tbody tr.timesheets-table-row {
animation: none;
transition: none;
}
#timesheets-list-section #timesheets-table .job-action-btn {
transition: none;
}
}
body.dark-mode #timesheets-list-section {
--timesheets-card-bg: linear-gradient(150deg, rgba(19, 30, 46, 0.95), rgba(18, 33, 53, 0.9));
--timesheets-card-border: rgba(73, 99, 130, 0.6);
--timesheets-card-shadow: 0 22px 48px rgba(2, 6, 23, 0.45);
}
body.dark-mode #timesheets-list-section #timesheets-table thead th {
background: linear-gradient(180deg, rgba(30, 50, 76, 0.95), rgba(26, 42, 66, 0.92));
border-bottom-color: rgba(76, 102, 135, 0.7);
color: #d9e8fb;
}
body.dark-mode #timesheets-list-section #timesheets-table tbody tr.timesheets-table-row:hover {
background: linear-gradient(92deg, rgba(31, 51, 79, 0.74), rgba(27, 46, 73, 0.7));
box-shadow: inset 0 0 0 1px rgba(110, 146, 186, 0.34);
}
body.dark-mode #timesheets-list-section #timesheets-table tbody tr.timesheets-table-row.job-row-selected {
background: linear-gradient(92deg, rgba(30, 72, 114, 0.58), rgba(23, 59, 95, 0.54));
box-shadow: inset 0 0 0 1px rgba(120, 176, 232, 0.36);
}
body.dark-mode #timesheets-list-section #timesheets-table .job-action-btn {
border-color: rgba(93, 128, 164, 0.68);
background: linear-gradient(180deg, rgba(29, 45, 68, 0.96), rgba(24, 39, 60, 0.94));
color: #d9e8fb;
}
body.dark-mode #timesheets-list-section #timesheets-table .job-action-btn:hover,
body.dark-mode #timesheets-list-section #timesheets-table .job-action-btn:focus-visible {
border-color: rgba(136, 183, 232, 0.86);
box-shadow: 0 10px 18px rgba(59, 130, 246, 0.3);
background: linear-gradient(180deg, rgba(36, 57, 84, 0.98), rgba(28, 45, 69, 0.96));
}
body.dark-mode #timesheets-list-section #timesheets-table .job-action-btn[data-timesheet-action="create-invoice"] {
border-color: rgba(96, 165, 250, 0.52);
color: #cfe5ff;
background: linear-gradient(180deg, rgba(24, 52, 98, 0.94), rgba(20, 43, 83, 0.94));
}
body.dark-mode #timesheets-list-section #no-timesheets-message {
border-color: rgba(87, 121, 158, 0.66);
background: linear-gradient(145deg, rgba(25, 40, 62, 0.92), rgba(20, 33, 53, 0.9));
}
@media (max-width: 760px) {
#timesheets-list-section #timesheets-list-container {
margin-top: 10px;
}
#timesheets-list-section #no-timesheets-message {
margin: 12px;
}
}
/* Invoice builder client picker: compact width + single arrow */
#invoice-builder-section .job-header-right {
display: flex;
align-items: flex-start;
gap: 10px;
}
#invoice-builder-section .invoice-builder-client-block {
width: 220px !important;
max-width: 220px !important;
margin: 0 !important;
}
#invoice-builder-section #invoice-builder-client-select {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border: 1px solid #d6dbe3;
background: rgba(255, 255, 255, 0.88);
color: #0f172a;
border-radius: 999px;
padding: 8px 12px;
font-size: 12px;
font-weight: 700;
line-height: 1;
min-height: 34px;
box-shadow: none;
}
#invoice-builder-section .create-client-select-wrap::after {
display: none;
}
@media (max-width: 980px) {
#invoice-builder-section .job-header-right {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
}
@media (max-width: 980px) {
:is(#jobs-list-section, #timesheets-list-section) .invoices-action-bar {
flex-wrap: wrap;
}
:is(#jobs-list-section, #timesheets-list-section) .invoices-action-right {
width: 100%;
justify-content: flex-end;
}
}
@media (max-width: 760px) {
:is(#jobs-list-section, #timesheets-list-section) .invoices-action-left {
width: 100% !important;
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
:is(#jobs-list-section, #timesheets-list-section) .invoices-action-right {
justify-content: flex-start !important;
width: 100% !important;
}
}
@media (max-height: 800px) {
#invoice-editor-section.editor-layout {
--studio-dock-height: 0px;
}
#invoice-editor-section.editor-layout .studio-preview-header {
min-height: 42px !important;
padding: 3px 8px !important;
gap: 8px !important;
}
#invoice-editor-section.editor-layout .studio-preview-title {
font-size: 12px;
}
#invoice-editor-section.editor-layout .studio-preview-meta {
font-size: 10px;
}
#invoice-editor-section.editor-layout .studio-toolbar-btn {
min-height: 30px;
padding: 5px 9px;
font-size: 12px;
}
#invoice-editor-section.editor-layout .studio-zoom-btn {
min-height: 28px;
padding: 3px 7px;
font-size: 12px;
}
#invoice-editor-section.editor-layout .studio-preview-viewport {
flex: 1 1 auto !important;
min-height: 0 !important;
padding: 6px !important;
}
#invoice-editor-section.editor-layout .studio-style-dock {
grid-template-rows: 56px minmax(0, 1fr) !important;
padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}
#invoice-editor-section.editor-layout .studio-style-dock-head {
height: 56px;
min-height: 56px;
padding: 0 8px;
}
#invoice-editor-section.editor-layout .studio-style-tab {
height: 38px;
min-height: 38px;
padding: 0 11px;
font-size: 12px;
}
#invoice-editor-section.editor-layout .studio-style-dock-actions .edit-btn {
min-height: 34px !important;
height: 34px !important;
padding: 6px 11px !important;
font-size: 12px !important;
}
#invoice-editor-section.editor-layout .studio-dock-carousel-shell {
min-height: 118px;
overflow-y: auto;
align-items: stretch;
}
#invoice-editor-section.editor-layout .studio-dock-carousel-wrap,
#invoice-editor-section.editor-layout .studio-dock-carousel {
min-height: 118px;
}
#invoice-editor-section.editor-layout .studio-dock-card {
height: 110px;
min-height: 110px;
}
}
@media (max-height: 700px) {
#invoice-editor-section.editor-layout {
--studio-dock-height: clamp(200px, 32vh, 270px);
}
#invoice-editor-section.editor-layout .studio-preview-header {
min-height: 38px !important;
padding: 2px 6px !important;
}
#invoice-editor-section.editor-layout .studio-preview-viewport {
padding: 4px !important;
}
#invoice-editor-section.editor-layout .studio-style-dock {
grid-template-rows: 50px minmax(0, 1fr) !important;
padding: 6px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
#invoice-editor-section.editor-layout .studio-style-dock-head {
height: 50px;
min-height: 50px;
}
#invoice-editor-section.editor-layout .studio-style-tab {
height: 34px;
min-height: 34px;
padding: 0 9px;
}
#invoice-editor-section.editor-layout .studio-dock-carousel-shell,
#invoice-editor-section.editor-layout .studio-dock-carousel-wrap,
#invoice-editor-section.editor-layout .studio-dock-carousel {
min-height: 104px;
overflow-y: auto;
}
#invoice-editor-section.editor-layout .studio-dock-card {
height: 98px;
min-height: 98px;
}
}
/* Bottom dock final fit for non-fullscreen Mac Chrome windows */
#invoice-editor-section.editor-layout {
--studio-dock-height: clamp(280px, 34vh, 360px);
}
#invoice-editor-section.editor-layout .invoice-editor-main-wrap {
padding-bottom: var(--studio-dock-height) !important;
}
#invoice-editor-section.editor-layout .studio-style-dock {
height: var(--studio-dock-height) !important;
display: grid !important;
grid-template-rows: 70px minmax(0, 1fr) !important;
gap: 12px !important;
padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
overflow: hidden !important;
}
#invoice-editor-section.editor-layout .studio-style-dock-head {
height: 70px !important;
min-height: 70px !important;
padding: 0 10px !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
#invoice-editor-section.editor-layout .studio-style-tabs {
align-items: center !important;
gap: 10px !important;
}
#invoice-editor-section.editor-layout .studio-style-dock-actions {
align-items: center !important;
gap: 8px !important;
}
#invoice-editor-section.editor-layout .studio-style-dock-actions .edit-btn {
min-height: 36px !important;
height: 36px !important;
padding: 0 12px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
#invoice-editor-section.editor-layout .studio-dock-carousel-shell {
min-height: 148px !important;
align-items: stretch !important;
overflow-y: auto !important;
padding-bottom: 6px;
}
#invoice-editor-section.editor-layout .studio-dock-carousel-wrap,
#invoice-editor-section.editor-layout .studio-dock-carousel {
min-height: 148px !important;
}
#invoice-editor-section.editor-layout .studio-dock-carousel {
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x mandatory;
}
#invoice-editor-section.editor-layout .studio-dock-card {
height: 126px !important;
min-height: 126px !important;
}
@media (max-height: 900px) {
#invoice-editor-section.editor-layout {
--studio-dock-height: clamp(270px, 36vh, 340px);
}
}
@media (max-height: 800px) {
#invoice-editor-section.editor-layout {
--studio-dock-height: clamp(250px, 38vh, 320px);
}
#invoice-editor-section.editor-layout .studio-style-dock {
grid-template-rows: 62px minmax(0, 1fr) !important;
padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
#invoice-editor-section.editor-layout .studio-style-dock-head {
height: 62px !important;
min-height: 62px !important;
padding: 0 8px !important;
}
#invoice-editor-section.editor-layout .studio-style-dock-actions .edit-btn {
min-height: 34px !important;
height: 34px !important;
padding: 0 10px !important;
font-size: 12px !important;
}
#invoice-editor-section.editor-layout .studio-dock-carousel-shell,
#invoice-editor-section.editor-layout .studio-dock-carousel-wrap,
#invoice-editor-section.editor-layout .studio-dock-carousel {
min-height: 132px !important;
}
#invoice-editor-section.editor-layout .studio-dock-card {
height: 112px !important;
min-height: 112px !important;
}
}
@media (max-height: 700px) {
#invoice-editor-section.editor-layout {
--studio-dock-height: clamp(230px, 40vh, 300px);
}
#invoice-editor-section.editor-layout .studio-style-dock {
grid-template-rows: 56px minmax(0, 1fr) !important;
}
#invoice-editor-section.editor-layout .studio-style-dock-head {
height: 56px !important;
min-height: 56px !important;
}
#invoice-editor-section.editor-layout .studio-dock-carousel-shell,
#invoice-editor-section.editor-layout .studio-dock-carousel-wrap,
#invoice-editor-section.editor-layout .studio-dock-carousel {
min-height: 118px !important;
}
#invoice-editor-section.editor-layout .studio-dock-card {
height: 102px !important;
min-height: 102px !important;
}
}
/* Invoice editor stabilization: keep header/nav above editor and restore normal page flow */
body.invoice-editor-active {
overflow-y: auto !important;
}
body.invoice-editor-active .container {
height: auto !important;
overflow: visible !important;
padding-bottom: 0 !important;
}
/* Stabilization: ensure normal flow and correct height */
#invoice-editor-section.editor-layout {
position: relative !important;
inset: auto !important;
z-index: 1 !important;
width: 100% !important;
height: calc(100vh - var(--invoice-editor-top-offset, 120px)) !important;
max-height: calc(100vh - var(--invoice-editor-top-offset, 120px)) !important;
margin-top: 0 !important;
}
/* Keep header sticky when editor is active — don't override to relative */
body.invoice-editor-active .site-header {
z-index: 2200;
}
body.invoice-editor-active #header-page-indicator {
z-index: 2200;
}
body.invoice-editor-active #account-subnav {
z-index: 2200;
}
body.invoice-editor-active .account-dropdown,
body.invoice-editor-active #header-language-selector {
z-index: 2200;
}
body.invoice-editor-active .site-footer {
display: none;
}
/* Shared support pages + global footer */
body.has-site-footer {
min-height: 100vh;
display: flex;
flex-direction: column;
}
body.has-site-footer .container {
flex: 1 0 auto;
min-height: 0;
padding-bottom: 0 !important;
margin-bottom: 0;
}
.support-content-shell {
max-width: 940px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(203, 213, 225, 0.8);
border-radius: 18px;
padding: 24px;
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}
.support-page-title {
margin: 0 0 12px;
font-size: clamp(30px, 4vw, 40px);
font-weight: 800;
color: #0f172a;
letter-spacing: -0.03em;
line-height: 1.05;
}
.support-updated {
margin: 0 0 18px;
color: #475569;
font-size: 13px;
font-weight: 700;
}
.support-page-copy {
margin: 0 0 14px;
color: #334155;
font-size: 15px;
line-height: 1.7;
}
.support-section {
margin: 0 0 20px;
}
.support-section:last-child {
margin-bottom: 0;
}
.support-section h2 {
margin: 0 0 10px;
font-size: 19px;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.02em;
}
.support-section a {
color: #3B82F6;
text-decoration: underline;
text-underline-offset: 2px;
}
.support-section a:hover {
color: #1D4ED8;
}
.support-faq-list {
display: grid;
gap: 12px;
}
.support-faq-item {
border: 1px solid rgba(203, 213, 225, 0.78);
border-radius: 14px;
background: rgba(255, 255, 255, 0.9);
padding: 14px 16px;
}
.support-faq-item h2 {
margin: 0 0 6px;
font-size: 17px;
}
.support-faq-collapsible summary {
cursor: pointer;
list-style: none;
font-size: 17px;
font-weight: 800;
color: #0f172a;
margin: 0;
padding-right: 26px;
position: relative;
}
.support-faq-collapsible summary::-webkit-details-marker {
display: none;
}
.support-faq-collapsible summary::after {
content: '+';
position: absolute;
right: 0;
top: 0;
color: #64748b;
font-weight: 700;
}
.support-faq-collapsible[open] summary::after {
content: '-';
}
.support-faq-collapsible .support-page-copy {
margin-top: 8px;
margin-bottom: 0;
}
.support-contact-email {
display: inline-flex;
align-items: center;
border: 1px solid rgba(148, 163, 184, 0.45);
border-radius: 10px;
padding: 8px 12px;
font-size: 15px;
font-weight: 700;
color: #0f172a;
text-decoration: none;
background: rgba(248, 250, 252, 0.9);
}
.site-footer {
width: 100%;
padding: 0;
border-top: 1px solid rgba(203, 213, 225, 0.74);
margin-top: auto;
flex-shrink: 0;
overflow: hidden;
}
@supports not (height: 100dvh) {
body.has-site-footer {
min-height: 100vh;
}
}
.site-footer-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
width: min(1380px, 100%);
margin: 0 auto;
padding: 0;
line-height: 1;
}
.site-footer-link {
color: #475569;
text-decoration: none;
font-size: 13px;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
}
.support-page-section {
width: min(1380px, 100%);
margin: 0 auto;
padding: 32px 3% 64px;
}
.site-footer-link:hover,
.site-footer-link:focus-visible {
color: #0f172a;
}
@media (max-width: 768px) {
.support-page-section {
padding: 20px 4% 42px;
}
.support-content-shell {
padding: 18px 14px;
border-radius: 14px;
}
.support-faq-item {
padding: 12px;
}
}
#create-invoice-launcher-modal .invoice-preview-modal-content {
max-width: 560px;
}
.dashboard-add-client-modal-content {
width: min(94vw, 560px);
max-height: 86vh;
}
.dashboard-add-client-body {
display: grid;
gap: 12px;
padding: 8px 0;
}
.dashboard-add-client-body .settings-field {
display: grid;
gap: 8px;
}
.create-invoice-launcher-body {
display: grid;
gap: 12px;
padding: 8px 0;
}
.create-invoice-launcher-option {
width: 100%;
border: 1px solid #dbe5f1;
border-radius: 12px;
background: #f8fbff;
color: #0f172a;
text-align: left;
padding: 12px 14px;
display: grid;
gap: 4px;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.create-invoice-launcher-option:hover {
border-color: #93c5fd;
background: #f0f7ff;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.create-invoice-launcher-option-title {
font-size: 15px;
font-weight: 700;
}
.create-invoice-launcher-option-copy {
font-size: 13px;
color: #475569;
line-height: 1.45;
}
.create-invoice-copy-picker {
margin-top: 2px;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #ffffff;
padding: 12px;
display: grid;
gap: 10px;
}
.invoice-copy-banner {
margin-top: 12px;
margin-bottom: 8px;
padding: 10px 12px;
border: 1px solid #c5ddd2;
background: #f2f7f4;
color: #1e3a8a;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
.floating-create-invoice-btn {
position: fixed;
right: 12px !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
z-index: 1200;
border: 1px solid #1D4ED8;
background: linear-gradient(135deg, #2563EB, #1D4ED8);
color: #ffffff;
border-radius: 999px !important;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
padding: 0 !important;
font-size: 18px;
line-height: 1;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: fixed;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
cursor: pointer;
transition: width 0.24s ease, transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.floating-create-invoice-plus {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
line-height: 1;
transition: left 0.24s ease, transform 0.24s ease;
}
.floating-create-invoice-text {
white-space: nowrap;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
margin-left: 30px;
max-width: 0;
opacity: 0;
transform: translateX(-6px);
filter: blur(1.5px);
transition: max-width 0.28s ease, opacity 0.26s ease-in-out, transform 0.28s ease, filter 0.26s ease-in-out;
}
.floating-create-invoice-btn:hover,
.floating-create-invoice-btn:focus-visible {
width: 132px;
}
.floating-create-invoice-btn:hover .floating-create-invoice-plus,
.floating-create-invoice-btn:focus-visible .floating-create-invoice-plus {
left: 14px;
transform: translate(0, -50%);
}
.floating-create-invoice-btn:hover .floating-create-invoice-text,
.floating-create-invoice-btn:focus-visible .floating-create-invoice-text {
max-width: 90px;
opacity: 1;
transform: translateX(0);
filter: blur(0);
}
.floating-create-invoice-btn:hover {
transform: translateY(-1px);
box-shadow: 0 18px 34px rgba(37, 99, 235, 0.42);
}
.floating-create-invoice-btn:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.28);
outline-offset: 2px;
}
@media (max-width: 768px) {
.floating-create-invoice-btn {
right: 10px !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
font-size: 18px;
padding: 0 !important;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
}
.floating-create-invoice-btn:hover,
.floating-create-invoice-btn:focus-visible {
width: 32px;
}
}
/* Mileage page */
#mileage-section .mileage-controls-row {
display: grid;
grid-template-columns: repeat(4, minmax(180px, 1fr));
gap: 14px;
align-items: end;
}
#mileage-section {
max-width: 1580px;
padding-left: 2%;
padding-right: 2%;
margin-left: auto;
margin-right: auto;
}
#mileage-section .account-section-content {
max-width: none;
margin: 0;
}
#mileage-section .account-header {
margin-bottom: var(--space-6);
}
#mileage-section .mileage-controls-card,
#mileage-section .mileage-table-card {
border: 1px solid rgba(226, 232, 240, 0.92);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
box-shadow: 0 16px 28px rgba(15, 23, 42, 0.06);
}
#mileage-section .mileage-controls-card {
margin-bottom: 14px;
}
#mileage-section .mileage-controls-row .settings-field {
margin-bottom: 0;
}
#mileage-section .mileage-controls-row .settings-label {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #64748b;
}
#mileage-section .mileage-controls-row .settings-select,
#mileage-section .mileage-controls-row .settings-input {
min-height: 42px;
border-radius: 12px;
border-color: #d7e2ef;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 12px rgba(15, 23, 42, 0.04);
}
#mileage-section .mileage-archived-toggle {
margin: 0 0 10px;
align-self: center;
font-weight: 700;
color: #334155;
justify-self: start;
}
#mileage-section .mileage-totals-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-areas: none;
gap: 16px;
align-items: stretch;
}
#mileage-section .mileage-total-card {
min-height: 118px;
border: 1px solid rgba(191, 219, 254, 0.9);
background: linear-gradient(155deg, rgba(248, 250, 252, 0.98), rgba(239, 246, 255, 0.94));
box-shadow: 0 12px 22px rgba(15, 23, 42, 0.05);
}
#mileage-section .mileage-total-card .analytics-kpi-value {
font-weight: 900;
font-size: 30px;
letter-spacing: -0.02em;
color: #0f172a;
}
#mileage-section .mileage-total-card .analytics-kpi-label {
font-weight: 800;
font-size: 13px;
color: #0f172a;
}
#mileage-section .mileage-total-card .analytics-kpi-note {
font-size: 11px;
font-weight: 500;
color: #64748b;
opacity: 0.92;
}
#mileage-section .mileage-stat-card {
min-height: 150px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
#mileage-section .mileage-stat-card .analytics-kpi-value {
font-size: clamp(28px, 2.5vw, 32px);
line-height: 1.08;
font-weight: 800;
margin-top: auto;
}
#mileage-section .mileage-stat-card .analytics-kpi-label {
font-size: 14px;
font-weight: 700;
opacity: 0.9;
}
#mileage-section .mileage-stat-card .analytics-kpi-note {
margin-top: 6px;
font-size: 12px;
opacity: 0.72;
}
#mileage-section .mileage-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 16px;
border: 1px solid rgba(226, 232, 240, 0.9);
background: rgba(255, 255, 255, 0.85);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
#mileage-section .mileage-table {
min-width: 1100px;
table-layout: fixed;
background: transparent;
border-radius: 0;
box-shadow: none;
border: none;
}
#mileage-section .mileage-table th,
#mileage-section .mileage-table td {
vertical-align: middle;
padding: 10px 10px;
}
#mileage-section .mileage-table th {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #64748b;
background: rgba(248, 250, 252, 0.92);
}
#mileage-section .mileage-table tbody tr:hover {
background: rgba(241, 245, 249, 0.78);
}
#mileage-section .mileage-input {
min-width: 76px;
max-width: 108px;
padding: 7px 8px;
font-size: 12px;
}
#mileage-section .mileage-job-name-cell {
min-width: 170px;
}
#mileage-section .mileage-job-name {
font-weight: 700;
color: #0f172a;
}
#mileage-section .mileage-job-subnote {
margin-top: 4px;
font-size: 11px;
font-weight: 600;
color: #475569;
}
#mileage-section .mileage-inline-toggle {
min-height: auto;
margin: 0;
}
#mileage-section .mileage-expand-btn {
width: 24px;
height: 24px;
border: none;
background: transparent;
padding: 0;
margin: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: none;
}
#mileage-section .mileage-expand-cell {
width: 40px;
text-align: center;
}
#mileage-section .mileage-table th:last-child {
width: 40px;
padding-left: 4px;
padding-right: 4px;
}
#mileage-section .mileage-expand-btn.disabled {
cursor: default;
opacity: 0.55;
}
#mileage-section .mileage-expand-cell .job-expand-caret {
margin: 0 auto;
}
#mileage-section .mileage-row-main.open {
background: #f3f8ff;
}
#mileage-section .mileage-day-row > td {
padding: 0 !important;
}
#mileage-section .mileage-day-panel {
padding: 12px 14px 14px;
border-top: 1px solid #dce7f5;
background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
}
#mileage-section .mileage-day-panel-head {
font-size: 12px;
font-weight: 700;
color: #334155;
margin-bottom: 8px;
}
#mileage-section .mileage-day-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#mileage-section .mileage-day-table {
width: 100%;
min-width: 980px;
border-collapse: collapse;
background: #fff;
border-radius: 10px;
overflow: hidden;
}
#mileage-section .mileage-day-table th,
#mileage-section .mileage-day-table td {
border-bottom: 1px solid #e2e8f0;
padding: 8px 10px;
text-align: left;
font-size: 12px;
vertical-align: middle;
}
#mileage-section .mileage-day-table th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
background: #f8fafc;
}
#mileage-section .mileage-day-table .settings-input {
min-width: 86px;
font-size: 12px;
padding: 7px 9px;
}
#mileage-section .mileage-day-table .mileage-day-note {
min-width: 160px;
}
#mileage-section .mileage-from-postcode,
#mileage-section .mileage-to-postcode {
min-width: 96px;
max-width: 118px;
}
#mileage-section .mileage-day-empty {
text-align: center;
color: #64748b;
font-weight: 600;
padding: 12px 10px;
}
#mileage-section .mileage-archived-pill {
display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid #cbd5e1;
background: #f8fafc;
font-size: 11px;
font-weight: 700;
color: #334155;
}
@media (max-width: 1024px) {
#mileage-section .mileage-controls-row {
grid-template-columns: 1fr;
gap: 10px;
}
#mileage-section .mileage-totals-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
}
@media (max-width: 640px) {
#mileage-section .mileage-totals-grid {
grid-template-columns: 1fr;
gap: 16px;
}
#mileage-section .mileage-stat-card {
min-height: 132px;
}
}
/* ── Public / shared timesheet mode ─────────────────── */
body.hours-public-active .ct-auth-only { display: none !important; }
.ct-public-banner {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px 0 12px;
}
.ct-public-banner.hidden { display: none; }
.ct-public-mode-pills {
display: flex;
gap: 8px;
align-items: center;
}
.ct-public-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.ct-public-pill::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.ct-public-pill.hidden { display: none; }
.ct-public-pill-view { background: #f1f5f9; color: #475569; }
.ct-public-pill-edit { background: var(--brand-100, #DBEAFE); color: var(--brand-700, #3B82F6); }
.ct-public-banner-title {
font-size: 22px;
font-weight: 800;
color: var(--ink, #0f172a);
margin: 0;
line-height: 1.2;
}
.ct-public-banner-sub {
font-size: 13px;
color: var(--muted, #64748b);
margin: 0;
}
.ct-public-editor-name {
display: flex;
align-items: center;
gap: 10px;
margin-top: 4px;
}
.ct-public-editor-name.hidden { display: none; }
.ct-public-editor-name label {
font-size: 13px;
font-weight: 600;
color: var(--ink, #0f172a);
white-space: nowrap;
}
.ct-public-editor-name .hours-v1-input {
max-width: 240px;
}