mirror of
https://github.com/soconnor0919/beenvoice.git
synced 2025-12-13 17:44:44 -05:00
1655 lines
41 KiB
CSS
1655 lines
41 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@theme {
|
|
--font-sans:
|
|
var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
|
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
--font-mono:
|
|
var(--font-azeret-mono), ui-monospace, SFMono-Regular, "SF Mono", Consolas,
|
|
"Liberation Mono", Menlo, monospace;
|
|
}
|
|
|
|
@theme inline {
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.625rem;
|
|
--background: oklch(0.99 0.003 164.25);
|
|
--foreground: oklch(0.145 0 0);
|
|
--card: oklch(0.995 0.002 164.25);
|
|
--card-foreground: oklch(0.145 0 0);
|
|
--popover: oklch(0.995 0.002 164.25);
|
|
--popover-foreground: oklch(0.145 0 0);
|
|
--primary: oklch(0.55 0.18 165);
|
|
--primary-foreground: oklch(0.99 0.005 165);
|
|
--secondary: oklch(0.97 0 0);
|
|
--secondary-foreground: oklch(0.205 0 0);
|
|
--muted: oklch(0.97 0 0);
|
|
--muted-foreground: oklch(0.556 0 0);
|
|
--accent: oklch(0.97 0 0);
|
|
--accent-foreground: oklch(0.205 0 0);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--destructive-foreground: oklch(0.985 0 0);
|
|
--border: oklch(0.922 0 0);
|
|
--input: oklch(0.922 0 0);
|
|
--ring: oklch(0.708 0 0);
|
|
--chart-1: oklch(0.646 0.222 41.116);
|
|
--chart-2: oklch(0.6 0.118 184.704);
|
|
--chart-3: oklch(0.398 0.07 227.392);
|
|
--chart-4: oklch(0.828 0.189 84.429);
|
|
--chart-5: oklch(0.769 0.188 70.08);
|
|
--sidebar: oklch(0.985 0 0);
|
|
--sidebar-foreground: oklch(0.145 0 0);
|
|
--sidebar-primary: oklch(0.205 0 0);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.97 0 0);
|
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
--sidebar-border: oklch(0.922 0 0);
|
|
--sidebar-ring: oklch(0.708 0 0);
|
|
|
|
/* Brand colors */
|
|
--brand-primary: oklch(0.55 0.18 165);
|
|
--brand-primary-hover: oklch(0.45 0.2 165);
|
|
--brand-secondary: oklch(0.6 0.15 185);
|
|
--brand-secondary-hover: oklch(0.5 0.17 185);
|
|
|
|
/* Status colors */
|
|
--status-success: oklch(0.646 0.222 164.25);
|
|
--status-success-foreground: oklch(0.985 0 0);
|
|
--status-success-muted: oklch(0.97 0.02 164.25);
|
|
--status-warning: oklch(0.828 0.189 84.429);
|
|
--status-warning-foreground: oklch(0.145 0 0);
|
|
--status-warning-muted: oklch(0.985 0.02 84.429);
|
|
--status-error: oklch(0.577 0.245 27.325);
|
|
--status-error-foreground: oklch(0.985 0 0);
|
|
--status-error-muted: oklch(0.985 0.02 27.325);
|
|
--status-info: oklch(0.6 0.118 184.704);
|
|
--status-info-foreground: oklch(0.985 0 0);
|
|
--status-info-muted: oklch(0.97 0.02 184.704);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: oklch(0 0 0);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.25 0.08 170);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--popover: oklch(0.25 0.08 170);
|
|
--popover-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.7 0.15 165);
|
|
--primary-foreground: oklch(0.08 0.015 165);
|
|
--secondary: oklch(0.3 0.05 170);
|
|
--secondary-foreground: oklch(0.985 0 0);
|
|
--muted: oklch(0.3 0.05 170);
|
|
--muted-foreground: oklch(0.708 0 0);
|
|
--accent: oklch(0.3 0.05 170);
|
|
--accent-foreground: oklch(0.985 0 0);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--destructive-foreground: oklch(0.985 0 0);
|
|
--border: oklch(1 0 0 / 10%);
|
|
--input: oklch(1 0 0 / 15%);
|
|
--ring: oklch(0.556 0 0);
|
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
--chart-3: oklch(0.769 0.188 70.08);
|
|
--chart-4: oklch(0.627 0.265 303.9);
|
|
--chart-5: oklch(0.645 0.246 16.439);
|
|
--sidebar: oklch(0.205 0.02 160);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.696 0.17 162.48);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.269 0.015 160);
|
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.556 0 0);
|
|
|
|
/* Brand colors - dark mode */
|
|
--brand-primary: oklch(0.7 0.15 165);
|
|
--brand-primary-hover: oklch(0.8 0.15 165);
|
|
--brand-secondary: oklch(0.75 0.12 185);
|
|
--brand-secondary-hover: oklch(0.85 0.12 185);
|
|
|
|
/* Status colors - dark mode */
|
|
--status-success: oklch(0.696 0.17 162.48);
|
|
--status-success-foreground: oklch(0.145 0 0);
|
|
--status-success-muted: oklch(0.269 0.05 162.48);
|
|
--status-warning: oklch(0.828 0.189 84.429);
|
|
--status-warning-foreground: oklch(0.145 0 0);
|
|
--status-warning-muted: oklch(0.269 0.05 84.429);
|
|
--status-error: oklch(0.704 0.191 22.216);
|
|
--status-error-foreground: oklch(0.985 0 0);
|
|
--status-error-muted: oklch(0.269 0.05 22.216);
|
|
--status-info: oklch(0.769 0.188 70.08);
|
|
--status-info-foreground: oklch(0.145 0 0);
|
|
--status-info-muted: oklch(0.269 0.05 70.08);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
body {
|
|
@apply text-foreground font-sans antialiased;
|
|
background:
|
|
radial-gradient(
|
|
circle at 20% 80%,
|
|
oklch(0.6 0.15 165 / 0.4) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
circle at 80% 20%,
|
|
oklch(0.65 0.12 185 / 0.3) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
circle at 40% 40%,
|
|
oklch(0.7 0.1 205 / 0.2) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.88 0.12 165) 0%,
|
|
oklch(0.92 0.08 175) 25%,
|
|
oklch(0.9 0.1 185) 50%,
|
|
oklch(0.88 0.12 195) 75%,
|
|
oklch(0.92 0.08 205) 100%
|
|
)
|
|
fixed;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background:
|
|
radial-gradient(
|
|
circle at 20% 80%,
|
|
oklch(0.25 0.15 165 / 0.6) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
circle at 80% 20%,
|
|
oklch(0.3 0.12 185 / 0.4) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
circle at 40% 40%,
|
|
oklch(0.35 0.1 205 / 0.3) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.15 0.12 165) 0%,
|
|
oklch(0.18 0.1 175) 25%,
|
|
oklch(0.16 0.14 185) 50%,
|
|
oklch(0.15 0.12 195) 75%,
|
|
oklch(0.18 0.1 205) 100%
|
|
)
|
|
fixed;
|
|
}
|
|
}
|
|
|
|
/* Comprehensive form elements styling - consistent across all inputs */
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="tel"],
|
|
input[type="url"],
|
|
input[type="search"],
|
|
input[type="number"],
|
|
input[type="date"],
|
|
input[type="datetime-local"],
|
|
input[type="time"],
|
|
textarea,
|
|
select {
|
|
@apply bg-background text-foreground border-input h-10 rounded-md px-3 py-2 text-sm shadow-xs transition-colors;
|
|
}
|
|
|
|
/* Textarea specific height override */
|
|
textarea {
|
|
@apply h-auto min-h-20 resize-y;
|
|
}
|
|
|
|
/* Placeholder styling */
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
@apply text-muted-foreground;
|
|
}
|
|
|
|
/* Better focus states with consistent ring */
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
@apply ring-ring/50 border-ring ring-[3px] outline-none;
|
|
}
|
|
|
|
/* Disabled state styling */
|
|
input:disabled,
|
|
textarea:disabled,
|
|
select:disabled {
|
|
@apply cursor-not-allowed opacity-50;
|
|
}
|
|
|
|
/* Form input icons - consistent positioning for left icons */
|
|
.form-input-icon-left {
|
|
@apply pl-10;
|
|
}
|
|
|
|
.form-input-icon-left + .form-icon {
|
|
@apply text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2;
|
|
}
|
|
|
|
/* Form section styling */
|
|
.form-section {
|
|
@apply space-y-6;
|
|
}
|
|
|
|
.form-section-header {
|
|
@apply flex items-center space-x-2;
|
|
}
|
|
|
|
.form-section-icon {
|
|
@apply text-primary h-5 w-5;
|
|
}
|
|
|
|
.form-section-title {
|
|
@apply text-foreground text-lg font-semibold;
|
|
}
|
|
|
|
/* Form field groups */
|
|
.form-field-group {
|
|
@apply space-y-2;
|
|
}
|
|
|
|
.form-field-label {
|
|
@apply text-foreground text-sm font-medium;
|
|
}
|
|
|
|
.form-field-help {
|
|
@apply text-muted-foreground text-xs;
|
|
}
|
|
|
|
/* Form grid layouts */
|
|
.form-grid-1 {
|
|
@apply grid grid-cols-1 gap-6;
|
|
}
|
|
|
|
.form-grid-2 {
|
|
@apply grid grid-cols-1 gap-6 md:grid-cols-2;
|
|
}
|
|
|
|
.form-grid-3 {
|
|
@apply grid grid-cols-1 gap-6 md:grid-cols-3;
|
|
}
|
|
|
|
/* Form buttons */
|
|
.form-actions {
|
|
@apply mt-8 flex justify-end gap-4;
|
|
}
|
|
|
|
/* Select elements specific styling to match inputs */
|
|
select {
|
|
@apply bg-background appearance-none;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
background-position: right 0.5rem center;
|
|
background-repeat: no-repeat;
|
|
background-size: 1.5em 1.5em;
|
|
padding-right: 2.5rem;
|
|
}
|
|
|
|
/* Dark mode select arrow */
|
|
@media (prefers-color-scheme: dark) {
|
|
select {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%9ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
}
|
|
}
|
|
|
|
/* Selection styling */
|
|
::selection {
|
|
@apply bg-primary/20 text-foreground;
|
|
}
|
|
|
|
/* Scrollbar styling for dark mode */
|
|
::-webkit-scrollbar {
|
|
@apply h-2 w-2;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-muted/20;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-muted-foreground/30 rounded-full;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-muted-foreground/50;
|
|
}
|
|
|
|
/* Firefox scrollbar */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--muted-foreground) / 0.3) hsl(var(--muted) / 0.2);
|
|
}
|
|
|
|
/* Better link styling */
|
|
a {
|
|
@apply text-primary hover:text-primary/80 transition-colors;
|
|
}
|
|
|
|
/* Code elements */
|
|
code {
|
|
@apply bg-muted/50 text-foreground rounded px-1 py-0.5 font-mono text-sm;
|
|
}
|
|
|
|
pre {
|
|
@apply bg-muted/50 text-foreground overflow-auto rounded-lg p-4;
|
|
}
|
|
|
|
/* Better table styling */
|
|
table {
|
|
@apply w-full border-collapse;
|
|
}
|
|
|
|
th {
|
|
@apply bg-muted/50 text-muted-foreground border-border border-b p-2 text-left font-medium;
|
|
}
|
|
|
|
td {
|
|
@apply border-border border-b p-2;
|
|
}
|
|
|
|
/* Modal and dialog backdrops */
|
|
.backdrop {
|
|
@apply bg-background/80 backdrop-blur-sm;
|
|
}
|
|
|
|
/* Better disabled state styling */
|
|
:disabled {
|
|
@apply cursor-not-allowed opacity-50;
|
|
}
|
|
|
|
/* Focus visible for keyboard navigation */
|
|
:focus-visible {
|
|
@apply ring-ring ring-offset-background ring-2 ring-offset-2 outline-none;
|
|
}
|
|
|
|
/* Better checkbox and radio styling */
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
@apply border-input bg-background;
|
|
}
|
|
|
|
input[type="checkbox"]:checked,
|
|
input[type="radio"]:checked {
|
|
@apply bg-primary border-primary;
|
|
}
|
|
|
|
/* Background gradient utilities that adapt to dark mode */
|
|
.bg-gradient-auth {
|
|
background: linear-gradient(
|
|
135deg,
|
|
oklch(0.88 0.12 165) 0%,
|
|
oklch(0.92 0.08 185) 100%
|
|
);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.bg-gradient-auth {
|
|
background: linear-gradient(
|
|
135deg,
|
|
oklch(0.15 0.12 165) 0%,
|
|
oklch(0.18 0.1 185) 100%
|
|
);
|
|
}
|
|
}
|
|
|
|
.bg-gradient-dashboard {
|
|
background: inherit;
|
|
}
|
|
|
|
/* Radial overlay that adapts to dark mode */
|
|
.bg-radial-overlay::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background: radial-gradient(
|
|
ellipse at 80% 0%,
|
|
oklch(0.646 0.222 164.25 / 0.1) 0%,
|
|
transparent 60%
|
|
);
|
|
}
|
|
|
|
/* Modern floating background patterns */
|
|
.bg-floating-gradient {
|
|
background:
|
|
radial-gradient(
|
|
circle at 30% 70%,
|
|
oklch(0.6 0.15 165 / 0.3) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.88 0.12 165) 0%,
|
|
oklch(0.92 0.08 175) 30%,
|
|
oklch(0.9 0.1 185) 70%,
|
|
oklch(0.88 0.12 205) 100%
|
|
);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.bg-floating-gradient {
|
|
background:
|
|
radial-gradient(
|
|
circle at 30% 70%,
|
|
oklch(0.25 0.15 165 / 0.5) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
oklch(0.15 0.12 165) 0%,
|
|
oklch(0.18 0.1 175) 30%,
|
|
oklch(0.16 0.14 185) 70%,
|
|
oklch(0.15 0.12 205) 100%
|
|
);
|
|
}
|
|
}
|
|
|
|
.bg-radial-overlay::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background: radial-gradient(
|
|
ellipse at 80% 0%,
|
|
oklch(0.646 0.222 164.25 / 0.1) 0%,
|
|
transparent 60%
|
|
);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.bg-radial-overlay::before {
|
|
background: radial-gradient(
|
|
ellipse at 80% 0%,
|
|
oklch(0.15 0.09 165 / 0.12) 0%,
|
|
oklch(0.14 0.08 185 / 0.08) 30%,
|
|
oklch(0.13 0.07 195 / 0.04) 60%,
|
|
transparent 80%
|
|
);
|
|
}
|
|
}
|
|
|
|
/* Brand utility classes */
|
|
.bg-brand-primary {
|
|
background-color: var(--brand-primary);
|
|
color: var(--status-success-foreground);
|
|
}
|
|
|
|
.bg-brand-gradient {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--brand-primary),
|
|
var(--brand-secondary)
|
|
);
|
|
color: white;
|
|
}
|
|
|
|
.hover\:bg-brand-gradient:hover {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--brand-primary-hover),
|
|
var(--brand-secondary-hover)
|
|
);
|
|
}
|
|
|
|
/* Modern floating design utilities */
|
|
.floating-card {
|
|
@apply bg-card/95 border-border/50 shadow-lg backdrop-blur-sm;
|
|
}
|
|
|
|
.glass-effect {
|
|
@apply bg-background/80 border-border/30 backdrop-blur-xl;
|
|
}
|
|
|
|
.text-brand-primary {
|
|
color: var(--brand-primary);
|
|
}
|
|
|
|
.border-brand-primary {
|
|
border-color: var(--brand-primary);
|
|
}
|
|
|
|
/* Status utility classes */
|
|
.bg-status-success-muted {
|
|
background-color: var(--status-success-muted);
|
|
}
|
|
|
|
.bg-status-warning-muted {
|
|
background-color: var(--status-warning-muted);
|
|
}
|
|
|
|
.bg-status-error-muted {
|
|
background-color: var(--status-error-muted);
|
|
}
|
|
|
|
.bg-status-info-muted {
|
|
background-color: var(--status-info-muted);
|
|
}
|
|
|
|
.text-status-success {
|
|
color: var(--status-success);
|
|
}
|
|
|
|
.text-status-warning {
|
|
color: var(--status-warning);
|
|
}
|
|
|
|
.text-status-error {
|
|
color: var(--status-error);
|
|
}
|
|
|
|
.text-status-info {
|
|
color: var(--status-info);
|
|
}
|
|
|
|
.text-status-success-foreground {
|
|
color: var(--status-success-foreground);
|
|
}
|
|
|
|
.text-status-warning-foreground {
|
|
color: var(--status-warning-foreground);
|
|
}
|
|
|
|
.text-status-error-foreground {
|
|
color: var(--status-error-foreground);
|
|
}
|
|
|
|
.text-status-info-foreground {
|
|
color: var(--status-info-foreground);
|
|
}
|
|
|
|
/* Floating background for cards and surfaces */
|
|
.floating-surface {
|
|
background: linear-gradient(
|
|
135deg,
|
|
oklch(0.92 0.08 165 / 0.95) 0%,
|
|
oklch(0.94 0.06 185 / 0.95) 100%
|
|
);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.floating-surface {
|
|
background: linear-gradient(
|
|
135deg,
|
|
oklch(0.16 0.1 165 / 0.95) 0%,
|
|
oklch(0.18 0.08 185 / 0.95) 100%
|
|
);
|
|
}
|
|
}
|
|
|
|
/* Floating orb utilities */
|
|
.floating-orbs::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(
|
|
circle at 15% 85%,
|
|
oklch(0.6 0.15 165 / 0.4) 0%,
|
|
transparent 40%
|
|
),
|
|
radial-gradient(
|
|
circle at 85% 15%,
|
|
oklch(0.65 0.12 185 / 0.3) 0%,
|
|
transparent 40%
|
|
),
|
|
radial-gradient(
|
|
circle at 70% 70%,
|
|
oklch(0.7 0.1 205 / 0.2) 0%,
|
|
transparent 30%
|
|
),
|
|
radial-gradient(
|
|
circle at 30% 30%,
|
|
oklch(0.55 0.18 175 / 0.25) 0%,
|
|
transparent 35%
|
|
);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.floating-orbs::before {
|
|
background:
|
|
radial-gradient(
|
|
circle at 15% 85%,
|
|
oklch(0.25 0.15 165 / 0.6) 0%,
|
|
transparent 40%
|
|
),
|
|
radial-gradient(
|
|
circle at 85% 15%,
|
|
oklch(0.3 0.12 185 / 0.5) 0%,
|
|
transparent 40%
|
|
),
|
|
radial-gradient(
|
|
circle at 70% 70%,
|
|
oklch(0.35 0.1 205 / 0.4) 0%,
|
|
transparent 30%
|
|
),
|
|
radial-gradient(
|
|
circle at 30% 30%,
|
|
oklch(0.2 0.18 175 / 0.45) 0%,
|
|
transparent 35%
|
|
);
|
|
}
|
|
}
|
|
|
|
/* Additional Brand Utility Classes */
|
|
.btn-brand-primary {
|
|
@apply bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-500/25 transition-all duration-300 hover:from-emerald-700 hover:to-teal-700 hover:shadow-xl hover:shadow-emerald-500/30;
|
|
}
|
|
|
|
.btn-brand-secondary {
|
|
@apply border-white/30 bg-white/10 text-white backdrop-blur-sm hover:border-white/50 hover:bg-white/20;
|
|
}
|
|
|
|
.btn-brand-outline {
|
|
@apply border-emerald-600 text-emerald-600 hover:bg-emerald-600 hover:text-white;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply bg-red-600 text-white hover:bg-red-700;
|
|
}
|
|
|
|
.text-brand-gradient {
|
|
@apply bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent;
|
|
}
|
|
|
|
.text-brand-light {
|
|
@apply text-emerald-600 dark:text-emerald-400;
|
|
}
|
|
|
|
.text-brand-muted {
|
|
@apply text-emerald-700 dark:text-emerald-300;
|
|
}
|
|
|
|
/* Background Utility Classes */
|
|
.bg-brand-muted {
|
|
@apply bg-emerald-100 dark:bg-emerald-900/20;
|
|
}
|
|
|
|
.bg-brand-muted-blue {
|
|
@apply bg-blue-100 dark:bg-blue-900/20;
|
|
}
|
|
|
|
.bg-brand-muted-teal {
|
|
@apply bg-teal-100 dark:bg-teal-900/20;
|
|
}
|
|
|
|
.bg-brand-muted-amber {
|
|
@apply bg-amber-100 dark:bg-amber-900/20;
|
|
}
|
|
|
|
.bg-hero-gradient {
|
|
@apply bg-gradient-to-br from-emerald-500 via-teal-600 to-blue-700 dark:from-emerald-500/95 dark:via-teal-600/95 dark:to-blue-700/95;
|
|
}
|
|
|
|
.bg-page-gradient {
|
|
@apply bg-gradient-to-br from-white via-emerald-50/50 to-teal-50/30 dark:from-slate-900 dark:via-emerald-900/5 dark:to-teal-900/5;
|
|
}
|
|
|
|
.bg-features-gradient {
|
|
@apply bg-gradient-to-br from-white via-emerald-50/30 to-teal-50/50 dark:from-slate-900/95 dark:via-emerald-900/10 dark:to-teal-900/10;
|
|
}
|
|
|
|
/* Card Utility Classes */
|
|
.card-floating {
|
|
@apply bg-white/70 shadow-lg backdrop-blur-sm transition-all duration-300 hover:bg-white/90 hover:shadow-xl dark:bg-slate-800/50 dark:hover:bg-slate-800/70;
|
|
}
|
|
|
|
.card-glass {
|
|
@apply bg-white/80 backdrop-blur-md dark:bg-slate-900/80;
|
|
}
|
|
|
|
.card-minimal {
|
|
@apply border-0 bg-white/50 shadow-sm dark:bg-slate-900/30;
|
|
}
|
|
|
|
.card-primary {
|
|
@apply border border-gray-200 bg-white text-gray-900 shadow-sm dark:border-gray-600/60 dark:bg-gray-700/80 dark:text-gray-50;
|
|
}
|
|
|
|
.card-secondary {
|
|
@apply border border-gray-300/60 bg-gray-100/70 text-gray-800 shadow-lg backdrop-blur-sm dark:border-gray-500/50 dark:bg-gray-600/60 dark:text-gray-50;
|
|
}
|
|
|
|
/* Modern Dark Theme Styling */
|
|
@media (prefers-color-scheme: dark) {
|
|
/* Page background - rich dark base */
|
|
.floating-orbs {
|
|
background-color: hsl(210 11% 8%) !important; /* Rich dark background */
|
|
}
|
|
|
|
/* All cards - warm neutral with subtle transparency */
|
|
[data-slot="card"] {
|
|
background-color: hsl(210 9% 13% / 0.9) !important; /* Warm dark cards */
|
|
border-color: hsl(210 9% 20%) !important; /* Subtle borders */
|
|
}
|
|
|
|
/* Secondary cards - slightly lighter for hierarchy */
|
|
[data-slot="card"].card-secondary,
|
|
.card-secondary {
|
|
background-color: hsl(
|
|
210 8% 16% / 0.85
|
|
) !important; /* Lighter secondary */
|
|
border-color: hsl(210 8% 24%) !important; /* Softer borders */
|
|
}
|
|
|
|
/* Navigation elements - cohesive with cards */
|
|
.nav-sticky,
|
|
aside.bg-background\/60,
|
|
header .bg-background\/60 {
|
|
background-color: hsl(210 10% 12% / 0.95) !important; /* Navigation bg */
|
|
border-color: hsl(210 10% 20%) !important; /* Consistent borders */
|
|
}
|
|
|
|
/* Invoice line item mobile styling */
|
|
.dark .bg-gray-200\/30 {
|
|
background-color: hsl(210 8% 18% / 0.4) !important;
|
|
}
|
|
|
|
.dark .border-gray-400\/60 {
|
|
border-color: hsl(210 8% 25% / 0.6) !important;
|
|
}
|
|
}
|
|
|
|
/* Navigation Utility Classes */
|
|
.nav-sticky {
|
|
@apply sticky top-0 z-50 border-b bg-white/80 backdrop-blur-xl dark:border-emerald-700/50 dark:bg-emerald-950/90;
|
|
}
|
|
|
|
.nav-link {
|
|
@apply text-slate-600 transition-colors hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100;
|
|
}
|
|
|
|
.nav-link-brand {
|
|
@apply font-medium text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300;
|
|
}
|
|
|
|
/* Icon Background Utility Classes */
|
|
.icon-bg-brand {
|
|
@apply inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 text-white shadow-lg;
|
|
}
|
|
|
|
.icon-bg-blue {
|
|
@apply inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-r from-blue-500 to-indigo-500 text-white shadow-lg;
|
|
}
|
|
|
|
.icon-bg-emerald {
|
|
@apply rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/20;
|
|
}
|
|
|
|
.icon-bg-purple {
|
|
@apply inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg;
|
|
}
|
|
|
|
.icon-bg-small {
|
|
@apply rounded-lg p-2;
|
|
}
|
|
|
|
/* Text Color Utility Classes */
|
|
.text-icon-emerald {
|
|
@apply text-emerald-600 dark:text-emerald-400;
|
|
}
|
|
|
|
.text-icon-blue {
|
|
@apply text-blue-600 dark:text-blue-400;
|
|
}
|
|
|
|
.text-icon-teal {
|
|
@apply text-teal-600 dark:text-teal-400;
|
|
}
|
|
|
|
.text-icon-amber {
|
|
@apply text-amber-600 dark:text-amber-400;
|
|
}
|
|
|
|
.text-icon-purple {
|
|
@apply text-purple-600 dark:text-purple-400;
|
|
}
|
|
|
|
.text-icon-red {
|
|
@apply text-red-600 dark:text-red-400;
|
|
}
|
|
|
|
.text-icon-green {
|
|
@apply text-green-600 dark:text-green-400;
|
|
}
|
|
|
|
.text-icon-yellow {
|
|
@apply text-yellow-600 dark:text-yellow-400;
|
|
}
|
|
|
|
.text-icon-indigo {
|
|
@apply text-indigo-600 dark:text-indigo-400;
|
|
}
|
|
|
|
/* Text Utility Classes */
|
|
.text-muted {
|
|
@apply text-slate-600 dark:text-slate-400;
|
|
}
|
|
|
|
.text-muted-secondary {
|
|
@apply text-slate-500 dark:text-slate-500;
|
|
}
|
|
|
|
.text-accent {
|
|
@apply text-slate-900 dark:text-slate-100;
|
|
}
|
|
|
|
.text-secondary {
|
|
@apply text-slate-700 dark:text-slate-300;
|
|
}
|
|
|
|
/* Card-specific text colors - override all text utilities */
|
|
.card-primary .text-muted,
|
|
.card-primary .text-muted-secondary {
|
|
@apply !text-gray-600 dark:!text-emerald-200;
|
|
}
|
|
|
|
.card-secondary .text-muted,
|
|
.card-secondary .text-muted-secondary {
|
|
@apply !text-gray-700 dark:!text-emerald-100;
|
|
}
|
|
|
|
.card-primary .text-secondary,
|
|
.card-primary .text-accent {
|
|
@apply !text-gray-900 dark:!text-emerald-50;
|
|
}
|
|
|
|
.card-secondary .text-secondary,
|
|
.card-secondary .text-accent {
|
|
@apply !text-gray-800 dark:!text-emerald-50;
|
|
}
|
|
|
|
.text-success {
|
|
@apply text-green-700 dark:text-green-300;
|
|
}
|
|
|
|
.text-warning {
|
|
@apply text-amber-700 dark:text-amber-300;
|
|
}
|
|
|
|
.text-error {
|
|
@apply text-red-700 dark:text-red-300;
|
|
}
|
|
|
|
.text-info {
|
|
@apply text-blue-700 dark:text-blue-300;
|
|
}
|
|
|
|
/* Background Utility Classes */
|
|
.bg-muted-subtle {
|
|
@apply bg-slate-50 dark:bg-slate-800/50;
|
|
}
|
|
|
|
.bg-accent-subtle {
|
|
@apply bg-slate-100/50 dark:bg-slate-700/30;
|
|
}
|
|
|
|
.bg-success-subtle {
|
|
@apply bg-green-50 dark:bg-green-900/20;
|
|
}
|
|
|
|
.bg-warning-subtle {
|
|
@apply bg-amber-50 dark:bg-amber-900/20;
|
|
}
|
|
|
|
.bg-error-subtle {
|
|
@apply bg-red-50 dark:bg-red-900/20;
|
|
}
|
|
|
|
.bg-info-subtle {
|
|
@apply bg-blue-50 dark:bg-blue-900/20;
|
|
}
|
|
|
|
/* Icon Background Utility Classes */
|
|
.icon-bg-success {
|
|
@apply rounded-lg bg-green-100 p-2 dark:bg-green-900/30;
|
|
}
|
|
|
|
.icon-bg-warning {
|
|
@apply rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30;
|
|
}
|
|
|
|
.icon-bg-error {
|
|
@apply rounded-lg bg-red-100 p-2 dark:bg-red-900/30;
|
|
}
|
|
|
|
.icon-bg-info {
|
|
@apply rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30;
|
|
}
|
|
|
|
.icon-bg-purple-muted {
|
|
@apply rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30;
|
|
}
|
|
|
|
.bg-green-subtle {
|
|
@apply bg-green-50 dark:bg-green-900/20;
|
|
}
|
|
|
|
.bg-red-subtle {
|
|
@apply bg-red-50 dark:bg-red-900/20;
|
|
}
|
|
|
|
.bg-blue-subtle {
|
|
@apply bg-blue-50 dark:bg-blue-900/20;
|
|
}
|
|
|
|
.bg-indigo-subtle {
|
|
@apply bg-indigo-50 dark:bg-indigo-900/20;
|
|
}
|
|
|
|
.bg-purple-subtle {
|
|
@apply bg-purple-50 dark:bg-purple-900/20;
|
|
}
|
|
|
|
.bg-emerald-subtle {
|
|
@apply bg-emerald-50/50 dark:bg-emerald-900/10;
|
|
}
|
|
|
|
.bg-upload-zone {
|
|
@apply rounded-lg border-2 border-dashed border-emerald-300 bg-emerald-50/50 p-12 text-center transition-colors hover:border-emerald-400 hover:bg-emerald-50 dark:border-emerald-700 dark:bg-emerald-900/10 dark:hover:bg-emerald-900/20;
|
|
}
|
|
|
|
.bg-progress-track {
|
|
@apply h-2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700;
|
|
}
|
|
|
|
/* Card Title Utility Classes */
|
|
.card-title-primary {
|
|
@apply flex items-center space-x-2 text-emerald-700 dark:text-emerald-400;
|
|
}
|
|
|
|
.card-title-secondary {
|
|
@apply flex items-center gap-2 text-lg;
|
|
}
|
|
|
|
.card-title-success {
|
|
@apply flex items-center space-x-2 text-green-600;
|
|
}
|
|
|
|
.card-title-info {
|
|
@apply flex items-center gap-2 text-blue-600;
|
|
}
|
|
|
|
.card-title-warning {
|
|
@apply flex items-center gap-2 text-amber-600;
|
|
}
|
|
|
|
.card-title-purple {
|
|
@apply flex items-center gap-2 text-purple-600;
|
|
}
|
|
|
|
/* Link Utility Classes */
|
|
.link-primary {
|
|
@apply text-emerald-600 hover:text-emerald-700 hover:underline dark:text-emerald-400 dark:hover:text-emerald-300;
|
|
}
|
|
|
|
.link-secondary {
|
|
@apply underline hover:text-red-700;
|
|
}
|
|
|
|
/* Status Text Utility Classes */
|
|
.status-text-success {
|
|
@apply text-green-600;
|
|
}
|
|
|
|
.status-text-error {
|
|
@apply text-red-600;
|
|
}
|
|
|
|
/* Amount Display Utility Classes */
|
|
.amount-primary {
|
|
@apply font-mono text-xs font-medium text-emerald-600;
|
|
}
|
|
|
|
.amount-display {
|
|
@apply text-right font-medium text-emerald-600;
|
|
}
|
|
|
|
/* Hero Section Utility Classes */
|
|
.hero-overlay {
|
|
@apply absolute inset-0 bg-gradient-to-br from-emerald-500/95 via-teal-600/95 to-blue-700/95;
|
|
}
|
|
|
|
.hero-orb-1 {
|
|
@apply absolute top-10 left-10 h-64 w-64 rounded-full bg-gradient-to-r from-white/20 to-emerald-300/20 blur-3xl;
|
|
}
|
|
|
|
.hero-orb-2 {
|
|
@apply absolute right-10 bottom-10 h-80 w-80 rounded-full bg-gradient-to-r from-teal-300/15 to-blue-300/15 blur-3xl;
|
|
}
|
|
|
|
.hero-orb-3 {
|
|
@apply absolute top-1/2 left-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-r from-emerald-400/10 to-teal-400/10 blur-3xl;
|
|
}
|
|
|
|
/* Floating Decoration Utility Classes */
|
|
.floating-decoration-1 {
|
|
@apply absolute top-0 right-0 h-64 w-64 rounded-full bg-gradient-to-r from-emerald-400/10 to-teal-400/10 blur-3xl;
|
|
}
|
|
|
|
.floating-decoration-2 {
|
|
@apply absolute bottom-0 left-0 h-80 w-80 rounded-full bg-gradient-to-r from-teal-400/10 to-blue-400/10 blur-3xl;
|
|
}
|
|
|
|
/* Badge Utility Classes */
|
|
.badge-brand {
|
|
@apply border-emerald-400 bg-emerald-200/80 text-emerald-900 shadow-md dark:border-emerald-600 dark:bg-emerald-800/80 dark:text-emerald-100;
|
|
}
|
|
|
|
.badge-features {
|
|
@apply border-blue-400 bg-blue-200/80 text-blue-900 shadow-md dark:border-blue-600 dark:bg-blue-800/80 dark:text-blue-100;
|
|
}
|
|
|
|
.badge-success {
|
|
@apply border-green-400 bg-green-200/80 text-green-900 shadow-md dark:border-green-600 dark:bg-green-800/80 dark:text-green-100;
|
|
}
|
|
|
|
.badge-warning {
|
|
@apply border-amber-400 bg-amber-200/80 text-amber-900 shadow-md dark:border-amber-600 dark:bg-amber-800/80 dark:text-amber-100;
|
|
}
|
|
|
|
.badge-error {
|
|
@apply border-red-400 bg-red-200/80 text-red-900 shadow-md dark:border-red-600 dark:bg-red-800/80 dark:text-red-100;
|
|
}
|
|
|
|
.badge-neutral {
|
|
@apply border-slate-400 bg-slate-200/80 text-slate-900 shadow-md dark:border-slate-600 dark:bg-slate-700/80 dark:text-slate-200;
|
|
}
|
|
|
|
.badge-outline {
|
|
@apply border-2 border-slate-400 bg-transparent text-slate-800 dark:border-slate-500 dark:text-slate-300;
|
|
}
|
|
|
|
.badge-secondary {
|
|
@apply border-slate-400 bg-slate-200/80 text-slate-800 shadow-md dark:border-slate-500 dark:bg-slate-600/80 dark:text-slate-200;
|
|
}
|
|
|
|
/* Activity Item Utility Classes */
|
|
.activity-item {
|
|
@apply hover:bg-muted/50 flex items-center justify-between rounded-lg border p-4 transition-colors;
|
|
}
|
|
|
|
.activity-icon {
|
|
@apply rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/20;
|
|
}
|
|
|
|
/* Button Group Utility Classes */
|
|
.btn-group {
|
|
@apply flex flex-col items-center gap-3 sm:flex-row sm:justify-center sm:gap-4;
|
|
}
|
|
|
|
/* Feature List Utility Classes */
|
|
.feature-list {
|
|
@apply space-y-2 text-sm text-slate-600 dark:text-slate-400;
|
|
}
|
|
|
|
.feature-item {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
|
|
.feature-check {
|
|
@apply h-4 w-4 text-emerald-500;
|
|
}
|
|
|
|
/* Stats Utility Classes */
|
|
.stats-grid {
|
|
@apply grid grid-cols-2 gap-4 md:grid-cols-4;
|
|
}
|
|
|
|
.stats-item {
|
|
@apply flex items-center space-x-3;
|
|
}
|
|
|
|
.stats-value {
|
|
@apply text-lg font-bold;
|
|
}
|
|
|
|
.stats-label {
|
|
@apply text-muted-foreground text-xs font-medium;
|
|
}
|
|
|
|
/* Form Enhancement Utility Classes */
|
|
.form-input-with-icon {
|
|
@apply pl-10;
|
|
}
|
|
|
|
.form-icon-left {
|
|
@apply text-muted-foreground pointer-events-none absolute top-3 left-3 h-4 w-4;
|
|
}
|
|
|
|
/* Quick Action Utility Classes */
|
|
.quick-action-title {
|
|
@apply flex items-center gap-2 text-lg;
|
|
}
|
|
|
|
.quick-action-icon {
|
|
@apply h-5 w-5 text-emerald-600;
|
|
}
|
|
|
|
/* Recent Activity Utility Classes */
|
|
.recent-activity-empty {
|
|
@apply py-8 text-center;
|
|
}
|
|
|
|
.recent-activity-icon {
|
|
@apply text-muted-foreground mx-auto mb-4 h-12 w-12;
|
|
}
|
|
|
|
.recent-activity-text {
|
|
@apply text-muted-foreground;
|
|
}
|
|
|
|
/* Welcome Text Utility Classes */
|
|
.welcome-feature-list {
|
|
@apply text-muted-foreground flex justify-center space-x-6 text-xs;
|
|
}
|
|
|
|
.welcome-description {
|
|
@apply text-muted-foreground text-sm;
|
|
}
|
|
|
|
/* Client Detail Page Utility Classes */
|
|
.client-info-card {
|
|
@apply border-0 shadow-xl backdrop-blur-sm;
|
|
}
|
|
|
|
.client-section-title {
|
|
@apply flex items-center space-x-2 text-green-600;
|
|
}
|
|
|
|
.client-info-item {
|
|
@apply flex items-center space-x-3;
|
|
}
|
|
|
|
.client-info-icon {
|
|
@apply rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30;
|
|
}
|
|
|
|
.client-info-icon-emerald {
|
|
@apply h-4 w-4 text-emerald-600;
|
|
}
|
|
|
|
.client-info-label {
|
|
@apply text-muted-foreground text-sm font-medium;
|
|
}
|
|
|
|
.client-info-value {
|
|
@apply text-foreground text-sm;
|
|
}
|
|
|
|
.client-address-content {
|
|
@apply text-foreground ml-11 space-y-1 text-sm;
|
|
}
|
|
|
|
.client-stats-card {
|
|
@apply border-0 bg-white/80 shadow-xl backdrop-blur-sm dark:bg-gray-800/80;
|
|
}
|
|
|
|
.client-stats-title {
|
|
@apply flex items-center space-x-2 text-emerald-700 dark:text-emerald-400;
|
|
}
|
|
|
|
.client-total-amount {
|
|
@apply text-2xl font-bold text-emerald-600;
|
|
}
|
|
|
|
.client-total-label {
|
|
@apply text-sm text-gray-500 dark:text-gray-400;
|
|
}
|
|
|
|
.client-stats-grid {
|
|
@apply grid grid-cols-2 gap-4;
|
|
}
|
|
|
|
.client-stat-value {
|
|
@apply text-lg font-semibold;
|
|
}
|
|
|
|
.client-stat-value-paid {
|
|
@apply text-lg font-semibold text-green-600;
|
|
}
|
|
|
|
.client-stat-value-pending {
|
|
@apply text-lg font-semibold text-orange-600;
|
|
}
|
|
|
|
.client-stat-label {
|
|
@apply text-xs text-gray-500 dark:text-gray-400;
|
|
}
|
|
|
|
.invoice-item {
|
|
@apply flex items-center justify-between rounded-lg bg-gray-50 p-3 dark:bg-gray-700;
|
|
}
|
|
|
|
.invoice-item-title {
|
|
@apply text-sm font-medium dark:text-white;
|
|
}
|
|
|
|
.invoice-item-date {
|
|
@apply text-xs text-gray-500 dark:text-gray-400;
|
|
}
|
|
|
|
.invoice-item-amount {
|
|
@apply text-sm font-medium dark:text-white;
|
|
}
|
|
|
|
/* Auth Page Utility Classes */
|
|
.auth-container {
|
|
@apply flex min-h-screen items-center justify-center p-4;
|
|
background: linear-gradient(
|
|
135deg,
|
|
oklch(0.88 0.12 165) 0%,
|
|
oklch(0.92 0.08 185) 100%
|
|
);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.auth-container {
|
|
background: linear-gradient(
|
|
135deg,
|
|
oklch(0.15 0.12 165) 0%,
|
|
oklch(0.18 0.1 185) 100%
|
|
);
|
|
}
|
|
}
|
|
|
|
.auth-form-container {
|
|
@apply w-full max-w-md space-y-8;
|
|
}
|
|
|
|
.auth-header {
|
|
@apply space-y-4 text-center;
|
|
}
|
|
|
|
.auth-title {
|
|
@apply text-foreground text-2xl font-bold;
|
|
}
|
|
|
|
.auth-subtitle {
|
|
@apply text-muted-foreground mt-2;
|
|
}
|
|
|
|
.auth-card {
|
|
@apply border-0 shadow-xl;
|
|
}
|
|
|
|
.auth-card-title {
|
|
@apply text-center text-xl;
|
|
}
|
|
|
|
.auth-form {
|
|
@apply space-y-4;
|
|
}
|
|
|
|
.auth-input-group {
|
|
@apply space-y-2;
|
|
}
|
|
|
|
.auth-input-grid {
|
|
@apply grid grid-cols-2 gap-4;
|
|
}
|
|
|
|
.auth-input-icon {
|
|
@apply text-muted-foreground absolute top-3 left-3 h-4 w-4;
|
|
}
|
|
|
|
.auth-password-help {
|
|
@apply text-muted-foreground text-xs;
|
|
}
|
|
|
|
.auth-submit-btn {
|
|
@apply w-full;
|
|
}
|
|
|
|
.auth-footer-text {
|
|
@apply text-muted-foreground mt-6 text-center text-sm;
|
|
}
|
|
|
|
.auth-footer-link {
|
|
@apply font-medium text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300;
|
|
}
|
|
|
|
.auth-features {
|
|
@apply space-y-4 text-center;
|
|
}
|
|
|
|
.auth-features-list {
|
|
@apply text-muted-foreground flex justify-center space-x-6 text-xs;
|
|
}
|
|
|
|
/* Floating Action Bar Utility Classes */
|
|
.floating-action-bar {
|
|
@apply border-border/40 bg-background/60 animate-in slide-in-from-bottom-4 sticky bottom-4 z-20 flex items-center justify-between rounded-2xl border p-4 shadow-lg backdrop-blur-xl backdrop-saturate-150 duration-300;
|
|
}
|
|
|
|
.floating-action-bar-content {
|
|
@apply flex-1;
|
|
}
|
|
|
|
.floating-action-bar-title {
|
|
@apply text-muted-foreground text-sm;
|
|
}
|
|
|
|
.floating-action-bar-actions {
|
|
@apply flex items-center gap-2 sm:gap-3;
|
|
}
|
|
|
|
/* Form Action Footer Utility Classes */
|
|
.form-action-footer {
|
|
@apply bg-background mt-8 border-t p-4;
|
|
}
|
|
|
|
.form-action-footer-content {
|
|
@apply flex justify-between gap-4;
|
|
}
|
|
|
|
.form-action-footer-back {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
|
|
.form-action-footer-submit {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
|
|
/* Table and Data Display Utility Classes */
|
|
.data-table-container {
|
|
@apply bg-card rounded-lg border shadow-sm;
|
|
}
|
|
|
|
.data-table-header {
|
|
@apply flex items-center justify-between p-4;
|
|
}
|
|
|
|
.data-table-search {
|
|
@apply max-w-sm;
|
|
}
|
|
|
|
.data-table-actions {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
|
|
/* Status Badge Utility Classes */
|
|
.status-badge-draft {
|
|
@apply border-slate-400 bg-slate-100/90 text-slate-800 shadow-md dark:border-slate-600 dark:bg-slate-700/90 dark:text-slate-200;
|
|
}
|
|
|
|
.status-badge-sent {
|
|
@apply border-yellow-400 bg-yellow-200/90 text-yellow-900 shadow-md dark:border-yellow-600 dark:bg-yellow-700/90 dark:text-yellow-100;
|
|
}
|
|
|
|
.status-badge-paid {
|
|
@apply border-green-400 bg-green-200/90 text-green-900 shadow-md dark:border-green-600 dark:bg-green-700/90 dark:text-green-100;
|
|
}
|
|
|
|
.status-badge-overdue {
|
|
@apply border-red-400 bg-red-200/90 text-red-900 shadow-md dark:border-red-600 dark:bg-red-700/90 dark:text-red-100;
|
|
}
|
|
|
|
/* Card Title Colors */
|
|
.card-primary h1,
|
|
.card-primary h2,
|
|
.card-primary h3,
|
|
.card-primary [data-slot="card-title"] {
|
|
@apply text-gray-900 dark:text-emerald-50;
|
|
}
|
|
|
|
.card-secondary h1,
|
|
.card-secondary h2,
|
|
.card-secondary h3,
|
|
.card-secondary [data-slot="card-title"] {
|
|
@apply text-gray-800 dark:text-emerald-100;
|
|
}
|
|
|
|
/* Card-specific icon colors for better visibility */
|
|
.card-primary .text-icon-emerald {
|
|
@apply text-emerald-600 dark:text-emerald-400;
|
|
}
|
|
|
|
.card-secondary .text-icon-emerald {
|
|
@apply text-emerald-700 dark:text-emerald-300;
|
|
}
|
|
|
|
.card-primary .text-icon-blue {
|
|
@apply text-blue-600 dark:text-blue-400;
|
|
}
|
|
|
|
.card-secondary .text-icon-blue {
|
|
@apply text-blue-700 dark:text-blue-300;
|
|
}
|
|
|
|
.card-primary .text-icon-teal {
|
|
@apply text-teal-600 dark:text-teal-400;
|
|
}
|
|
|
|
.card-secondary .text-icon-teal {
|
|
@apply text-teal-700 dark:text-teal-300;
|
|
}
|
|
|
|
.card-primary .text-icon-amber {
|
|
@apply text-amber-600 dark:text-amber-400;
|
|
}
|
|
|
|
.card-secondary .text-icon-amber {
|
|
@apply text-amber-700 dark:text-amber-300;
|
|
}
|
|
|
|
/* Business and Invoice Utility Classes */
|
|
.business-info-card {
|
|
@apply border-0 shadow-lg backdrop-blur-sm;
|
|
}
|
|
|
|
.invoice-header-card {
|
|
@apply border-0 shadow-lg backdrop-blur-sm;
|
|
}
|
|
|
|
.invoice-items-card {
|
|
@apply border-0 shadow-lg backdrop-blur-sm;
|
|
}
|
|
|
|
.invoice-summary-card {
|
|
@apply border-0 shadow-lg backdrop-blur-sm;
|
|
}
|
|
|
|
/* Number input field - override focus styles and shadow */
|
|
.number-input-field {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.number-input-field:focus {
|
|
border: 0 !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
ring: 0 !important;
|
|
}
|
|
|
|
/* Calendar styling - clean appearance */
|
|
[data-slot="calendar"] button {
|
|
border: none;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
}
|
|
|
|
[data-slot="calendar"] button:hover {
|
|
background: hsl(var(--accent));
|
|
}
|
|
|
|
[data-slot="calendar"] .rdp-today button {
|
|
font-weight: 600;
|
|
background: hsl(var(--accent));
|
|
}
|
|
|
|
[data-slot="calendar"] table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
[data-slot="calendar"] td {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
[data-slot="calendar"] th {
|
|
border: none;
|
|
font-weight: normal;
|
|
color: hsl(var(--muted-foreground));
|
|
background: transparent;
|
|
}
|
|
|
|
/* Line under day names */
|
|
[data-slot="calendar"] thead {
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
/* Remove day name backgrounds and borders */
|
|
[data-slot="calendar"] .rdp-weekday {
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Ensure weekday headers have no styling */
|
|
[data-slot="calendar"] thead th {
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Selected day with tight border */
|
|
[data-slot="calendar"] .rdp-day_selected button,
|
|
[data-slot="calendar"] .rdp-day[aria-selected="true"] button,
|
|
[data-slot="calendar"] button[data-selected="true"],
|
|
[data-slot="calendar"] button[aria-selected="true"],
|
|
[data-slot="calendar"] .rdp-day_selected .rdp-button,
|
|
[data-slot="calendar"] .rdp-day[aria-selected="true"] .rdp-button,
|
|
[data-slot="calendar"] button[data-selected-single="true"] {
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
font-weight: 600;
|
|
border: 1px solid hsl(var(--primary));
|
|
}
|
|
|
|
/* Hide default dropdowns - we'll use custom Select components */
|
|
[data-slot="calendar"] .rdp-dropdown_root,
|
|
[data-slot="calendar"] .rdp-dropdown {
|
|
display: none;
|
|
}
|
|
|
|
/* Custom calendar header styling */
|
|
[data-slot="calendar"] .rdp-month_caption {
|
|
position: relative;
|
|
}
|
|
|
|
[data-slot="calendar"] .calendar-custom-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
height: 32px;
|
|
}
|
|
|
|
/* Month/year picker borders - style small size selects */
|
|
[data-slot="calendar"]
|
|
.calendar-custom-header
|
|
[data-slot="select-trigger"][data-size="sm"] {
|
|
border: 1px solid hsl(var(--border));
|
|
height: 24px;
|
|
padding: 0 6px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
position: relative;
|
|
z-index: 50;
|
|
pointer-events: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Calendar header should not block clicks */
|
|
[data-slot="calendar"] .calendar-custom-header {
|
|
position: relative;
|
|
z-index: 40;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Make select triggers clickable within the header */
|
|
[data-slot="calendar"] .calendar-custom-header [data-slot="select-trigger"] {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Hide the chevron icon */
|
|
[data-slot="calendar"]
|
|
.calendar-custom-header
|
|
[data-slot="select-trigger"]
|
|
svg {
|
|
display: none;
|
|
}
|
|
|
|
/* Unify all calendar text sizes */
|
|
[data-slot="calendar"] button,
|
|
[data-slot="calendar"] th,
|
|
[data-slot="calendar"] [data-slot="select-trigger"] {
|
|
font-size: 14px;
|
|
}
|
|
}
|