root
d7fb7b7a7b
Build & Deploy / Build & Push Docker Image (push) Failing after 47s
Build & Deploy / Deploy to VPS (push) Has been skipped
Test / API Unit Tests (push) Failing after 5m4s
Test / Marketplace Unit Tests (push) Failing after 4m55s
Test / Admin Unit Tests (push) Successful in 9m37s
Test / Dashboard Unit Tests (push) Successful in 9m37s
Test / API Integration Tests (push) Successful in 9m54s
1103 lines
29 KiB
CSS
1103 lines
29 KiB
CSS
@import "../styles/phase16-tokens.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
html.light {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
@apply text-blue-950 antialiased transition-colors dark:text-slate-100;
|
|
background-image:
|
|
linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
|
|
}
|
|
|
|
.shell {
|
|
@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.panel {
|
|
@apply rounded-[1.75rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
|
|
border-color: rgb(231 229 228 / 0.8);
|
|
background-color: rgb(255 255 255 / 0.82);
|
|
}
|
|
|
|
html.dark body {
|
|
background-image:
|
|
linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
|
|
}
|
|
|
|
html.dark .panel {
|
|
border-color: rgb(30 60 140 / 0.40);
|
|
background-color: rgb(11 25 55 / 0.72);
|
|
}
|
|
|
|
@layer utilities {
|
|
.light body {
|
|
color: rgb(28 25 23);
|
|
}
|
|
|
|
/* ── Dark mode: zinc classes → deep navy blue ─────────────── */
|
|
.bg-zinc-950 {
|
|
background-color: rgb(6 13 30);
|
|
}
|
|
|
|
.bg-zinc-950\/90 {
|
|
background-color: rgb(6 13 30 / 0.9);
|
|
}
|
|
|
|
.bg-zinc-900 {
|
|
background-color: rgb(11 25 55);
|
|
}
|
|
|
|
.bg-zinc-800,
|
|
.bg-zinc-800\/50 {
|
|
background-color: rgb(20 42 90);
|
|
}
|
|
|
|
.border-zinc-800,
|
|
.border-zinc-700 {
|
|
border-color: rgb(30 60 130);
|
|
}
|
|
|
|
.text-zinc-100,
|
|
.text-zinc-200 {
|
|
color: rgb(241 245 249);
|
|
}
|
|
|
|
.text-zinc-500 {
|
|
color: rgb(148 163 184);
|
|
}
|
|
|
|
.text-zinc-400,
|
|
.text-zinc-300 {
|
|
color: rgb(100 116 139);
|
|
}
|
|
|
|
.hover\:bg-zinc-800:hover,
|
|
.hover\:bg-zinc-800\/50:hover {
|
|
background-color: rgb(30 55 115);
|
|
}
|
|
|
|
.hover\:text-zinc-200:hover {
|
|
color: rgb(241 245 249);
|
|
}
|
|
|
|
/* ── Primary action (emerald class → orange) ──────────────── */
|
|
.text-emerald-400 {
|
|
color: rgb(251 146 60);
|
|
}
|
|
|
|
.bg-emerald-600 {
|
|
background-color: rgb(234 88 12);
|
|
}
|
|
|
|
.hover\:bg-emerald-500:hover {
|
|
background-color: rgb(194 65 12);
|
|
}
|
|
|
|
.dark .bg-emerald-600 {
|
|
background-color: rgb(249 115 22);
|
|
}
|
|
|
|
.dark .hover\:bg-emerald-500:hover {
|
|
background-color: rgb(251 146 60);
|
|
}
|
|
|
|
.bg-emerald-900\/30,
|
|
.bg-emerald-950\/40,
|
|
.bg-emerald-950\/50 {
|
|
background-color: rgb(154 52 18 / 0.22);
|
|
}
|
|
|
|
.border-emerald-500 {
|
|
border-color: rgb(249 115 22);
|
|
}
|
|
|
|
.focus\:ring-emerald-500:focus {
|
|
--tw-ring-color: rgb(234 88 12 / 0.45);
|
|
}
|
|
|
|
.hover\:bg-emerald-900\/50:hover {
|
|
background-color: rgb(154 52 18 / 0.35);
|
|
}
|
|
|
|
/* ── Light mode: zinc classes → white / stone-light ──────── */
|
|
.light .bg-zinc-950 {
|
|
background-color: rgb(255 253 248);
|
|
}
|
|
|
|
.light .bg-zinc-950\/90 {
|
|
background-color: rgb(255 255 255 / 0.9);
|
|
}
|
|
|
|
.light .bg-zinc-900 {
|
|
background-color: rgb(255 255 255 / 0.82);
|
|
}
|
|
|
|
.light .bg-zinc-800,
|
|
.light .bg-zinc-800\/50 {
|
|
background-color: rgb(245 245 244);
|
|
}
|
|
|
|
.light .border-zinc-800,
|
|
.light .border-zinc-700 {
|
|
border-color: rgb(231 229 228);
|
|
}
|
|
|
|
.light .text-zinc-100,
|
|
.light .text-zinc-200 {
|
|
color: rgb(28 25 23);
|
|
}
|
|
|
|
.light .text-zinc-500 {
|
|
color: rgb(120 113 108);
|
|
}
|
|
|
|
.light .text-zinc-400,
|
|
.light .text-zinc-300 {
|
|
color: rgb(87 83 78);
|
|
}
|
|
|
|
.light .hover\:bg-zinc-800:hover,
|
|
.light .hover\:bg-zinc-800\/50:hover {
|
|
background-color: rgb(245 245 244);
|
|
}
|
|
|
|
.light .hover\:text-zinc-200:hover {
|
|
color: rgb(28 25 23);
|
|
}
|
|
}
|
|
|
|
/* Phase 16 operational application layer */
|
|
@layer base {
|
|
html {
|
|
min-width: 320px;
|
|
background: var(--rdg-surface-page);
|
|
color: var(--rdg-text-primary);
|
|
scroll-behavior: smooth;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
min-height: 100dvh;
|
|
background: var(--rdg-surface-page);
|
|
color: var(--rdg-text-primary);
|
|
font-family: var(--rdg-font-latin);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: var(--rdg-text-primary);
|
|
line-height: 1.18;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
p {
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
a,
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.shell {
|
|
width: min(100%, var(--rdg-container-max));
|
|
}
|
|
|
|
.panel,
|
|
.card,
|
|
.glass-card,
|
|
.site-panel {
|
|
border-color: var(--rdg-border);
|
|
border-radius: var(--rdg-radius-lg);
|
|
background: color-mix(in srgb, var(--rdg-surface-elevated) 92%, transparent);
|
|
box-shadow: var(--rdg-shadow-card);
|
|
backdrop-filter: blur(18px);
|
|
-webkit-backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.site-panel-muted {
|
|
border-color: var(--rdg-border);
|
|
border-radius: var(--rdg-radius-lg);
|
|
background: var(--rdg-surface-muted);
|
|
}
|
|
|
|
.site-panel-contrast {
|
|
border-color: color-mix(in srgb, var(--rdg-blue-700) 68%, var(--rdg-border));
|
|
border-radius: var(--rdg-radius-lg);
|
|
background:
|
|
radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--rdg-blue-500) 30%, transparent), transparent 40%),
|
|
linear-gradient(135deg, var(--rdg-navy-900), var(--rdg-blue-800));
|
|
}
|
|
|
|
.btn-primary,
|
|
.site-link-primary {
|
|
min-height: var(--rdg-touch-min);
|
|
border-radius: var(--rdg-radius-sm);
|
|
background: var(--rdg-action-conversion);
|
|
color: #ffffff;
|
|
box-shadow: var(--rdg-shadow-subtle);
|
|
}
|
|
|
|
.btn-primary:hover,
|
|
.site-link-primary:hover {
|
|
background: var(--rdg-action-conversion-hover);
|
|
}
|
|
|
|
.btn-secondary,
|
|
.site-link-secondary {
|
|
min-height: var(--rdg-touch-min);
|
|
border-color: var(--rdg-border-strong);
|
|
border-radius: var(--rdg-radius-sm);
|
|
background: var(--rdg-surface-primary);
|
|
color: var(--rdg-action-primary);
|
|
}
|
|
|
|
.btn-secondary:hover,
|
|
.site-link-secondary:hover {
|
|
border-color: var(--rdg-action-primary);
|
|
background: var(--rdg-soft-blue);
|
|
color: var(--rdg-action-primary-hover);
|
|
}
|
|
|
|
.input-field,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='range']),
|
|
select,
|
|
textarea {
|
|
min-height: var(--rdg-touch-min);
|
|
border-color: var(--rdg-border);
|
|
border-radius: var(--rdg-radius-sm);
|
|
background: var(--rdg-surface-primary);
|
|
color: var(--rdg-text-primary);
|
|
}
|
|
|
|
.input-field::placeholder,
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--rdg-text-subdued);
|
|
}
|
|
|
|
table {
|
|
border-color: var(--rdg-border);
|
|
}
|
|
|
|
thead {
|
|
background: var(--rdg-surface-muted);
|
|
color: var(--rdg-text-secondary);
|
|
}
|
|
|
|
tbody tr {
|
|
border-color: var(--rdg-border);
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.panel,
|
|
.card,
|
|
.glass-card,
|
|
.site-panel,
|
|
.site-panel-muted,
|
|
.site-panel-contrast {
|
|
border: 1px solid CanvasText;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* Phase 16 admin semantic corrections: blue actions, green status, orange focus. */
|
|
@layer utilities {
|
|
.text-emerald-400 { color: rgb(52 211 153); }
|
|
.text-emerald-300 { color: rgb(110 231 183); }
|
|
.text-emerald-500 { color: rgb(16 185 129); }
|
|
.text-emerald-600 { color: rgb(5 150 105); }
|
|
.bg-emerald-400 { background-color: rgb(52 211 153); }
|
|
.bg-emerald-500 { background-color: rgb(16 185 129); }
|
|
.bg-emerald-500\/10 { background-color: rgb(16 185 129 / 0.10); }
|
|
.bg-emerald-500\/15 { background-color: rgb(16 185 129 / 0.15); }
|
|
.bg-emerald-900\/20 { background-color: rgb(6 78 59 / 0.20); }
|
|
.bg-emerald-900\/30 { background-color: rgb(6 78 59 / 0.30); }
|
|
.bg-emerald-900\/40 { background-color: rgb(6 78 59 / 0.40); }
|
|
.bg-emerald-950\/40 { background-color: rgb(2 44 34 / 0.40); }
|
|
.bg-emerald-950\/50 { background-color: rgb(2 44 34 / 0.50); }
|
|
.border-emerald-500 { border-color: rgb(16 185 129); }
|
|
.border-emerald-500\/30 { border-color: rgb(16 185 129 / 0.30); }
|
|
.hover\:bg-emerald-900\/50:hover { background-color: rgb(6 78 59 / 0.50); }
|
|
.focus\:ring-orange-500:focus { --tw-ring-color: rgb(249 115 22 / 0.50); }
|
|
}
|
|
|
|
html.dark body,
|
|
html[data-theme='dark'] body {
|
|
background: var(--rdg-surface-page);
|
|
}
|
|
|
|
html.dark .panel,
|
|
html.dark .card,
|
|
html.dark .glass-card,
|
|
html[data-theme='dark'] .panel,
|
|
html[data-theme='dark'] .card,
|
|
html[data-theme='dark'] .glass-card {
|
|
border-color: var(--rdg-border);
|
|
background: color-mix(in srgb, var(--rdg-surface-elevated) 92%, transparent);
|
|
box-shadow: var(--rdg-shadow-card);
|
|
}
|
|
|
|
/* ==============================================================
|
|
Phase 16 operational shell
|
|
Mirrors the approved homepage system: precise blue hierarchy,
|
|
orange conversion accents, calm surfaces, 44px controls, true RTL,
|
|
and restrained depth instead of dashboard-template theatrics.
|
|
============================================================== */
|
|
|
|
.rdg-app-shell {
|
|
min-height: 100dvh;
|
|
color: var(--rdg-text-primary);
|
|
background:
|
|
radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--rdg-blue-100) 72%, transparent), transparent 30rem),
|
|
radial-gradient(circle at 100% 18%, color-mix(in srgb, var(--rdg-orange-100) 48%, transparent), transparent 25rem),
|
|
linear-gradient(180deg, var(--rdg-surface-page), color-mix(in srgb, var(--rdg-soft-blue) 52%, var(--rdg-surface-page)) 52%, var(--rdg-surface-page));
|
|
}
|
|
|
|
html.dark .rdg-app-shell,
|
|
html[data-theme='dark'] .rdg-app-shell {
|
|
background:
|
|
radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--rdg-blue-800) 22%, transparent), transparent 32rem),
|
|
radial-gradient(circle at 100% 20%, color-mix(in srgb, var(--rdg-orange-700) 10%, transparent), transparent 28rem),
|
|
linear-gradient(180deg, var(--rdg-navy-950), #09172a 54%, var(--rdg-navy-950));
|
|
}
|
|
|
|
.rdg-workspace {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.rdg-sidebar {
|
|
border-color: var(--rdg-border) !important;
|
|
background: color-mix(in srgb, var(--rdg-surface-primary) 94%, transparent) !important;
|
|
color: var(--rdg-text-primary) !important;
|
|
box-shadow: 10px 0 36px color-mix(in srgb, var(--rdg-shadow-color) 62%, transparent) !important;
|
|
backdrop-filter: blur(18px);
|
|
-webkit-backdrop-filter: blur(18px);
|
|
}
|
|
|
|
html[dir='rtl'] .rdg-sidebar {
|
|
box-shadow: -10px 0 36px color-mix(in srgb, var(--rdg-shadow-color) 62%, transparent) !important;
|
|
}
|
|
|
|
.rdg-sidebar-brand {
|
|
min-height: var(--rdg-header-size);
|
|
border-color: var(--rdg-border) !important;
|
|
}
|
|
|
|
.rdg-brand-mark {
|
|
display: inline-grid;
|
|
width: 40px;
|
|
height: 40px;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
border-radius: var(--rdg-radius-sm);
|
|
background: var(--rdg-action-primary) !important;
|
|
color: #fff;
|
|
box-shadow: var(--rdg-shadow-subtle);
|
|
}
|
|
|
|
.rdg-sidebar-nav {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: color-mix(in srgb, var(--rdg-action-primary) 25%, transparent) transparent;
|
|
}
|
|
|
|
.rdg-nav-item {
|
|
position: relative;
|
|
min-height: var(--rdg-touch-min);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--rdg-radius-sm) !important;
|
|
color: var(--rdg-text-secondary) !important;
|
|
transition:
|
|
color var(--rdg-duration-standard) var(--rdg-easing),
|
|
background var(--rdg-duration-standard) var(--rdg-easing),
|
|
border-color var(--rdg-duration-standard) var(--rdg-easing),
|
|
transform var(--rdg-duration-standard) var(--rdg-easing);
|
|
}
|
|
|
|
.rdg-nav-item:hover {
|
|
border-color: color-mix(in srgb, var(--rdg-action-primary) 18%, var(--rdg-border));
|
|
background: var(--rdg-soft-blue) !important;
|
|
color: var(--rdg-action-primary-hover) !important;
|
|
}
|
|
|
|
.rdg-nav-item[aria-current='page'],
|
|
.rdg-nav-item[data-active='true'] {
|
|
border-color: color-mix(in srgb, var(--rdg-action-primary) 35%, var(--rdg-border));
|
|
background: var(--rdg-action-primary) !important;
|
|
color: #fff !important;
|
|
box-shadow: 0 10px 24px color-mix(in srgb, var(--rdg-action-primary) 22%, transparent) !important;
|
|
}
|
|
|
|
html.dark .rdg-nav-item[aria-current='page'],
|
|
html.dark .rdg-nav-item[data-active='true'] {
|
|
color: var(--rdg-navy-950) !important;
|
|
}
|
|
|
|
.rdg-nav-item[aria-current='page'] svg,
|
|
.rdg-nav-item[data-active='true'] svg {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.rdg-sidebar-footer {
|
|
border-color: var(--rdg-border) !important;
|
|
}
|
|
|
|
.rdg-user-card {
|
|
border: 1px solid var(--rdg-border) !important;
|
|
border-radius: var(--rdg-radius-md) !important;
|
|
background: var(--rdg-surface-muted) !important;
|
|
}
|
|
|
|
.rdg-avatar {
|
|
display: inline-grid;
|
|
min-width: 38px;
|
|
height: 38px;
|
|
place-items: center;
|
|
border-radius: var(--rdg-radius-sm) !important;
|
|
background: var(--rdg-action-primary) !important;
|
|
color: #fff !important;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.rdg-topbar {
|
|
position: sticky;
|
|
z-index: 30;
|
|
top: 0;
|
|
display: flex;
|
|
min-height: var(--rdg-header-size);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--rdg-space-4);
|
|
border-bottom: 1px solid var(--rdg-border) !important;
|
|
background: color-mix(in srgb, var(--rdg-surface-primary) 94%, transparent) !important;
|
|
color: var(--rdg-text-primary) !important;
|
|
box-shadow: var(--rdg-shadow-subtle);
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
}
|
|
|
|
.rdg-topbar-title {
|
|
margin: 0;
|
|
color: var(--rdg-text-primary) !important;
|
|
font-size: clamp(1rem, 1.5vw, 1.2rem);
|
|
font-weight: 800;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
.rdg-topbar-kicker,
|
|
.rdg-page-kicker {
|
|
margin: 0;
|
|
color: var(--rdg-action-conversion) !important;
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
html[dir='rtl'] .rdg-topbar-kicker,
|
|
html[dir='rtl'] .rdg-page-kicker {
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.rdg-system-status {
|
|
display: inline-flex;
|
|
min-height: 34px;
|
|
align-items: center;
|
|
gap: var(--rdg-space-2);
|
|
border: 1px solid color-mix(in srgb, var(--rdg-green-700) 22%, var(--rdg-border));
|
|
border-radius: var(--rdg-radius-pill);
|
|
padding: 0 var(--rdg-space-3);
|
|
background: color-mix(in srgb, var(--rdg-green-100) 64%, var(--rdg-surface-primary));
|
|
color: var(--rdg-green-700);
|
|
font-size: 0.75rem;
|
|
font-weight: 750;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
html.dark .rdg-system-status {
|
|
background: color-mix(in srgb, var(--rdg-green-700) 16%, var(--rdg-surface-primary));
|
|
color: #86efac;
|
|
}
|
|
|
|
.rdg-system-status::before {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
|
|
content: '';
|
|
}
|
|
|
|
.rdg-search-field {
|
|
min-height: 42px !important;
|
|
border-color: var(--rdg-border) !important;
|
|
border-radius: var(--rdg-radius-sm) !important;
|
|
background: var(--rdg-surface-muted) !important;
|
|
color: var(--rdg-text-primary) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.rdg-search-field:focus {
|
|
border-color: var(--rdg-action-primary) !important;
|
|
background: var(--rdg-surface-primary) !important;
|
|
box-shadow: 0 0 0 4px color-mix(in srgb, var(--rdg-action-primary) 12%, transparent) !important;
|
|
}
|
|
|
|
.rdg-app-main {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
padding: clamp(20px, 3vw, 40px);
|
|
}
|
|
|
|
.rdg-app-content {
|
|
width: min(100%, var(--rdg-container-max));
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.rdg-app-content > * {
|
|
width: 100%;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.rdg-app-content h1 {
|
|
color: var(--rdg-text-primary) !important;
|
|
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
|
font-weight: 850 !important;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
.rdg-app-content h2 {
|
|
color: var(--rdg-text-primary) !important;
|
|
font-weight: 800 !important;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.rdg-app-content h3,
|
|
.rdg-app-content h4 {
|
|
color: var(--rdg-text-primary) !important;
|
|
font-weight: 750 !important;
|
|
}
|
|
|
|
.rdg-app-content p {
|
|
color: inherit;
|
|
}
|
|
|
|
.rdg-page-hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid var(--rdg-border);
|
|
border-radius: var(--rdg-radius-xl);
|
|
padding: clamp(24px, 4vw, 40px);
|
|
background:
|
|
radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--rdg-blue-500) 18%, transparent), transparent 38%),
|
|
var(--rdg-surface-elevated);
|
|
box-shadow: var(--rdg-shadow-card);
|
|
}
|
|
|
|
.rdg-page-hero::before {
|
|
position: absolute;
|
|
inset: 0 0 auto;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--rdg-action-primary), var(--rdg-action-conversion));
|
|
content: '';
|
|
}
|
|
|
|
.rdg-page-description {
|
|
max-width: 68ch;
|
|
color: var(--rdg-text-secondary) !important;
|
|
font-size: 0.98rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Core surfaces. These intentionally match homepage Card/StateShell geometry. */
|
|
.rdg-app-shell .card,
|
|
.rdg-app-shell .panel,
|
|
.rdg-app-shell .glass-card {
|
|
border: 1px solid var(--rdg-border) !important;
|
|
border-radius: var(--rdg-radius-lg) !important;
|
|
background: color-mix(in srgb, var(--rdg-surface-elevated) 96%, transparent) !important;
|
|
box-shadow: var(--rdg-shadow-card) !important;
|
|
color: var(--rdg-text-primary);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.rdg-app-shell a.card,
|
|
.rdg-app-shell a.panel,
|
|
.rdg-app-shell button.card,
|
|
.rdg-app-shell button.panel {
|
|
transition:
|
|
transform var(--rdg-duration-standard) var(--rdg-easing),
|
|
border-color var(--rdg-duration-standard) var(--rdg-easing),
|
|
box-shadow var(--rdg-duration-standard) var(--rdg-easing);
|
|
}
|
|
|
|
.rdg-app-shell a.card:hover,
|
|
.rdg-app-shell a.panel:hover,
|
|
.rdg-app-shell button.card:hover,
|
|
.rdg-app-shell button.panel:hover {
|
|
border-color: color-mix(in srgb, var(--rdg-action-primary) 34%, var(--rdg-border)) !important;
|
|
box-shadow: 0 24px 64px color-mix(in srgb, var(--rdg-shadow-color) 90%, transparent) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.rdg-app-shell .card > header,
|
|
.rdg-app-shell .panel > header {
|
|
border-color: var(--rdg-border) !important;
|
|
}
|
|
|
|
/* Operational actions are blue. Orange remains the conversion/focus accent. */
|
|
.rdg-app-shell .btn-primary {
|
|
display: inline-flex;
|
|
min-height: var(--rdg-touch-min);
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--rdg-space-2);
|
|
border: 1px solid var(--rdg-action-primary) !important;
|
|
border-radius: var(--rdg-radius-sm) !important;
|
|
padding: 0.65rem 1rem;
|
|
background: var(--rdg-action-primary) !important;
|
|
color: #fff !important;
|
|
font-weight: 750;
|
|
box-shadow: var(--rdg-shadow-subtle) !important;
|
|
transition:
|
|
background var(--rdg-duration-standard) var(--rdg-easing),
|
|
border-color var(--rdg-duration-standard) var(--rdg-easing),
|
|
transform var(--rdg-duration-standard) var(--rdg-easing);
|
|
}
|
|
|
|
html.dark .rdg-app-shell .btn-primary {
|
|
color: var(--rdg-navy-950) !important;
|
|
}
|
|
|
|
.rdg-app-shell .btn-primary:hover {
|
|
border-color: var(--rdg-action-primary-hover) !important;
|
|
background: var(--rdg-action-primary-hover) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.rdg-app-shell .btn-secondary {
|
|
display: inline-flex;
|
|
min-height: var(--rdg-touch-min);
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--rdg-space-2);
|
|
border: 1px solid var(--rdg-border-strong) !important;
|
|
border-radius: var(--rdg-radius-sm) !important;
|
|
padding: 0.65rem 1rem;
|
|
background: var(--rdg-surface-primary) !important;
|
|
color: var(--rdg-action-primary) !important;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.rdg-app-shell .btn-secondary:hover {
|
|
border-color: var(--rdg-action-primary) !important;
|
|
background: var(--rdg-soft-blue) !important;
|
|
color: var(--rdg-action-primary-hover) !important;
|
|
}
|
|
|
|
.rdg-app-shell .btn-conversion {
|
|
display: inline-flex;
|
|
min-height: var(--rdg-touch-min);
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--rdg-space-2);
|
|
border: 1px solid var(--rdg-action-conversion);
|
|
border-radius: var(--rdg-radius-sm);
|
|
padding: 0.65rem 1rem;
|
|
background: var(--rdg-action-conversion);
|
|
color: #fff;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.rdg-app-shell .btn-conversion:hover {
|
|
border-color: var(--rdg-action-conversion-hover);
|
|
background: var(--rdg-action-conversion-hover);
|
|
}
|
|
|
|
.rdg-app-shell .btn-danger {
|
|
min-height: var(--rdg-touch-min);
|
|
border-radius: var(--rdg-radius-sm) !important;
|
|
}
|
|
|
|
.rdg-app-shell input:not([type='checkbox']):not([type='radio']):not([type='range']),
|
|
.rdg-app-shell select,
|
|
.rdg-app-shell textarea,
|
|
.rdg-app-shell .input-field {
|
|
min-height: var(--rdg-touch-min);
|
|
border: 1px solid var(--rdg-border) !important;
|
|
border-radius: var(--rdg-radius-sm) !important;
|
|
background: var(--rdg-surface-primary) !important;
|
|
color: var(--rdg-text-primary) !important;
|
|
box-shadow: none;
|
|
transition:
|
|
border-color var(--rdg-duration-standard) var(--rdg-easing),
|
|
box-shadow var(--rdg-duration-standard) var(--rdg-easing),
|
|
background var(--rdg-duration-standard) var(--rdg-easing);
|
|
}
|
|
|
|
.rdg-app-shell input:not([type='checkbox']):not([type='radio']):not([type='range']):hover,
|
|
.rdg-app-shell select:hover,
|
|
.rdg-app-shell textarea:hover,
|
|
.rdg-app-shell .input-field:hover {
|
|
border-color: var(--rdg-border-strong) !important;
|
|
}
|
|
|
|
.rdg-app-shell input:not([type='checkbox']):not([type='radio']):not([type='range']):focus,
|
|
.rdg-app-shell select:focus,
|
|
.rdg-app-shell textarea:focus,
|
|
.rdg-app-shell .input-field:focus {
|
|
border-color: var(--rdg-action-primary) !important;
|
|
outline: none;
|
|
box-shadow: 0 0 0 4px color-mix(in srgb, var(--rdg-action-primary) 13%, transparent) !important;
|
|
}
|
|
|
|
.rdg-app-shell input::placeholder,
|
|
.rdg-app-shell textarea::placeholder {
|
|
color: var(--rdg-text-subdued) !important;
|
|
}
|
|
|
|
.rdg-app-shell table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
color: var(--rdg-text-primary);
|
|
}
|
|
|
|
.rdg-app-shell thead {
|
|
background: var(--rdg-surface-muted) !important;
|
|
color: var(--rdg-text-secondary) !important;
|
|
}
|
|
|
|
.rdg-app-shell th {
|
|
padding: 0.85rem 1.1rem;
|
|
font-size: 0.72rem;
|
|
font-weight: 800 !important;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
html[dir='rtl'] .rdg-app-shell th {
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.rdg-app-shell td {
|
|
padding: 0.95rem 1.1rem;
|
|
color: var(--rdg-text-secondary);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.rdg-app-shell tbody tr {
|
|
border-color: var(--rdg-border) !important;
|
|
transition: background var(--rdg-duration-fast) ease;
|
|
}
|
|
|
|
.rdg-app-shell tbody tr:hover {
|
|
background: color-mix(in srgb, var(--rdg-soft-blue) 62%, transparent) !important;
|
|
}
|
|
|
|
.rdg-app-shell .progress-bar {
|
|
overflow: hidden;
|
|
border-radius: var(--rdg-radius-pill);
|
|
background: var(--rdg-surface-strong) !important;
|
|
}
|
|
|
|
.rdg-app-shell .progress-fill.blue {
|
|
background: var(--rdg-action-primary) !important;
|
|
}
|
|
|
|
.rdg-app-shell .progress-fill.orange {
|
|
background: var(--rdg-action-conversion) !important;
|
|
}
|
|
|
|
.rdg-app-shell .badge-blue,
|
|
.rdg-app-shell .badge-green,
|
|
.rdg-app-shell .badge-amber,
|
|
.rdg-app-shell .badge-red,
|
|
.rdg-app-shell .badge-gray,
|
|
.rdg-app-shell .badge-purple,
|
|
.rdg-app-shell .badge-indigo {
|
|
min-height: 24px;
|
|
align-items: center;
|
|
border-radius: var(--rdg-radius-pill) !important;
|
|
border: 1px solid transparent;
|
|
padding-inline: 0.65rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.rdg-app-shell .badge-blue {
|
|
border-color: color-mix(in srgb, var(--rdg-blue-700) 22%, transparent);
|
|
background: color-mix(in srgb, var(--rdg-blue-100) 72%, var(--rdg-surface-primary)) !important;
|
|
color: var(--rdg-blue-700) !important;
|
|
}
|
|
|
|
.rdg-app-shell .badge-green {
|
|
border-color: color-mix(in srgb, var(--rdg-green-700) 22%, transparent);
|
|
background: color-mix(in srgb, var(--rdg-green-100) 72%, var(--rdg-surface-primary)) !important;
|
|
color: var(--rdg-green-700) !important;
|
|
}
|
|
|
|
.rdg-app-shell .badge-amber {
|
|
border-color: color-mix(in srgb, var(--rdg-amber-800) 20%, transparent);
|
|
background: color-mix(in srgb, var(--rdg-amber-100) 72%, var(--rdg-surface-primary)) !important;
|
|
color: var(--rdg-amber-800) !important;
|
|
}
|
|
|
|
.rdg-app-shell .badge-red {
|
|
border-color: color-mix(in srgb, var(--rdg-red-700) 20%, transparent);
|
|
background: color-mix(in srgb, var(--rdg-red-100) 72%, var(--rdg-surface-primary)) !important;
|
|
color: var(--rdg-red-700) !important;
|
|
}
|
|
|
|
.rdg-app-shell .badge-gray {
|
|
border-color: var(--rdg-border);
|
|
background: var(--rdg-surface-muted) !important;
|
|
color: var(--rdg-text-secondary) !important;
|
|
}
|
|
|
|
html.dark .rdg-app-shell .badge-blue { color: var(--rdg-blue-100) !important; }
|
|
html.dark .rdg-app-shell .badge-green { color: #bbf7d0 !important; }
|
|
html.dark .rdg-app-shell .badge-amber { color: #fde68a !important; }
|
|
html.dark .rdg-app-shell .badge-red { color: #fecaca !important; }
|
|
|
|
/* Semantic bridge for legacy utility classes still present in large pages. */
|
|
html.light .rdg-app-shell .bg-white,
|
|
html.light .rdg-app-shell .bg-zinc-900,
|
|
html.light .rdg-app-shell .bg-zinc-950 {
|
|
background-color: var(--rdg-surface-elevated) !important;
|
|
}
|
|
|
|
html.light .rdg-app-shell .bg-slate-50,
|
|
html.light .rdg-app-shell .bg-zinc-800 {
|
|
background-color: var(--rdg-surface-muted) !important;
|
|
}
|
|
|
|
html.light .rdg-app-shell .text-zinc-100,
|
|
html.light .rdg-app-shell .text-zinc-200,
|
|
html.light .rdg-app-shell .text-slate-900 {
|
|
color: var(--rdg-text-primary) !important;
|
|
}
|
|
|
|
html.light .rdg-app-shell .text-zinc-300,
|
|
html.light .rdg-app-shell .text-zinc-400,
|
|
html.light .rdg-app-shell .text-zinc-500,
|
|
html.light .rdg-app-shell .text-slate-700,
|
|
html.light .rdg-app-shell .text-slate-600,
|
|
html.light .rdg-app-shell .text-slate-500,
|
|
html.light .rdg-app-shell .text-stone-500 {
|
|
color: var(--rdg-text-secondary) !important;
|
|
}
|
|
|
|
.rdg-app-shell .border-zinc-800,
|
|
.rdg-app-shell .border-zinc-700,
|
|
.rdg-app-shell .border-slate-200,
|
|
.rdg-app-shell .border-stone-200 {
|
|
border-color: var(--rdg-border) !important;
|
|
}
|
|
|
|
html.dark .rdg-app-shell .bg-white,
|
|
html.dark .rdg-app-shell .bg-zinc-900,
|
|
html.dark .rdg-app-shell .bg-zinc-950 {
|
|
background-color: var(--rdg-surface-elevated) !important;
|
|
}
|
|
|
|
html.dark .rdg-app-shell .bg-slate-50,
|
|
html.dark .rdg-app-shell .bg-zinc-800 {
|
|
background-color: var(--rdg-surface-muted) !important;
|
|
}
|
|
|
|
html.dark .rdg-app-shell .text-zinc-100,
|
|
html.dark .rdg-app-shell .text-zinc-200,
|
|
html.dark .rdg-app-shell .text-slate-900 {
|
|
color: var(--rdg-text-primary) !important;
|
|
}
|
|
|
|
html.dark .rdg-app-shell .text-zinc-300,
|
|
html.dark .rdg-app-shell .text-zinc-400,
|
|
html.dark .rdg-app-shell .text-zinc-500,
|
|
html.dark .rdg-app-shell .text-slate-700,
|
|
html.dark .rdg-app-shell .text-slate-600,
|
|
html.dark .rdg-app-shell .text-slate-500,
|
|
html.dark .rdg-app-shell .text-stone-500 {
|
|
color: var(--rdg-text-secondary) !important;
|
|
}
|
|
|
|
/* Dialogs and overlays inherit the same surface system. */
|
|
.rdg-app-shell [role='dialog'],
|
|
.rdg-app-shell dialog {
|
|
border-color: var(--rdg-border) !important;
|
|
border-radius: var(--rdg-radius-lg) !important;
|
|
background: var(--rdg-surface-elevated) !important;
|
|
color: var(--rdg-text-primary) !important;
|
|
box-shadow: var(--rdg-shadow-overlay) !important;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.rdg-app-main {
|
|
padding: 20px 16px 32px;
|
|
}
|
|
|
|
.rdg-topbar {
|
|
padding-inline: 16px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
.rdg-app-main {
|
|
padding: 16px 12px 28px;
|
|
}
|
|
|
|
.rdg-app-content h1 {
|
|
font-size: 1.65rem;
|
|
}
|
|
|
|
.rdg-page-hero {
|
|
border-radius: var(--rdg-radius-lg);
|
|
padding: 24px 20px;
|
|
}
|
|
|
|
.rdg-system-status,
|
|
.rdg-topbar-search {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.rdg-sidebar,
|
|
.rdg-topbar,
|
|
.rdg-app-shell .card,
|
|
.rdg-app-shell .panel,
|
|
.rdg-app-shell .glass-card,
|
|
.rdg-page-hero {
|
|
border: 1px solid CanvasText !important;
|
|
box-shadow: none !important;
|
|
backdrop-filter: none;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.rdg-app-shell {
|
|
display: block !important;
|
|
background: #fff !important;
|
|
color: #000 !important;
|
|
}
|
|
|
|
.rdg-app-main {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.rdg-app-shell .card,
|
|
.rdg-app-shell .panel,
|
|
.rdg-app-shell .glass-card {
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
/* Legacy primary-action utilities are normalized to the homepage blue action. */
|
|
.rdg-app-shell button.bg-blue-700,
|
|
.rdg-app-shell a.bg-blue-700,
|
|
.rdg-app-shell button.bg-blue-600,
|
|
.rdg-app-shell a.bg-blue-600,
|
|
.rdg-app-shell button.bg-emerald-700,
|
|
.rdg-app-shell a.bg-emerald-700,
|
|
.rdg-app-shell button.bg-emerald-600,
|
|
.rdg-app-shell a.bg-emerald-600,
|
|
.rdg-app-shell button.bg-emerald-500,
|
|
.rdg-app-shell a.bg-emerald-500 {
|
|
border-color: var(--rdg-action-primary) !important;
|
|
background: var(--rdg-action-primary) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.rdg-app-shell button.bg-blue-700:hover,
|
|
.rdg-app-shell a.bg-blue-700:hover,
|
|
.rdg-app-shell button.bg-blue-600:hover,
|
|
.rdg-app-shell a.bg-blue-600:hover,
|
|
.rdg-app-shell button.bg-emerald-700:hover,
|
|
.rdg-app-shell a.bg-emerald-700:hover,
|
|
.rdg-app-shell button.bg-emerald-600:hover,
|
|
.rdg-app-shell a.bg-emerald-600:hover,
|
|
.rdg-app-shell button.bg-emerald-500:hover,
|
|
.rdg-app-shell a.bg-emerald-500:hover {
|
|
background: var(--rdg-action-primary-hover) !important;
|
|
}
|
|
|
|
.rdg-page-heading {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: var(--rdg-space-5);
|
|
min-height: 64px;
|
|
padding: 2px 0 var(--rdg-space-5);
|
|
border-bottom: 1px solid var(--rdg-border);
|
|
}
|
|
|
|
.rdg-page-heading::after {
|
|
position: absolute;
|
|
inset-inline-start: 0;
|
|
inset-block-end: -1px;
|
|
width: 72px;
|
|
height: 3px;
|
|
border-radius: var(--rdg-radius-pill);
|
|
background: linear-gradient(90deg, var(--rdg-action-primary), var(--rdg-action-conversion));
|
|
content: '';
|
|
}
|
|
|
|
.rdg-page-heading h1,
|
|
.rdg-page-heading h2 { margin: 0; }
|
|
.rdg-page-heading p { color: var(--rdg-text-secondary) !important; }
|
|
|
|
@media (max-width: 639px) {
|
|
.rdg-page-heading { align-items: flex-start; flex-direction: column; }
|
|
}
|
|
|
|
/* Explicit field utility for pages that compose controls dynamically. */
|
|
.rdg-app-shell .field {
|
|
width: 100%;
|
|
min-height: var(--rdg-touch-min);
|
|
border: 1px solid var(--rdg-border);
|
|
border-radius: var(--rdg-radius-sm);
|
|
background: var(--rdg-surface-primary);
|
|
color: var(--rdg-text-primary);
|
|
padding: 0.7rem 0.85rem;
|
|
transition: border-color var(--rdg-duration-fast) var(--rdg-easing), box-shadow var(--rdg-duration-fast) var(--rdg-easing), background-color var(--rdg-duration-fast) var(--rdg-easing);
|
|
}
|
|
.rdg-app-shell .field:hover { border-color: var(--rdg-border-strong); }
|
|
.rdg-app-shell .field:focus {
|
|
border-color: var(--rdg-focus);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rdg-focus) 18%, transparent);
|
|
outline: none;
|
|
}
|