adserver-dashboard 1.0.0

package/client/src/index.css

@@ -0,0 +1,694 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+@import './styles/design-tokens.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* LIGHT MODE */
+:root {
+  /* MW Brand Colors are defined in design-tokens.css (imported above) */
+
+  --button-outline: rgba(0,0,0, .10);
+  --badge-outline: rgba(0,0,0, .05);
+
+  /* Automatic computation of border around primary / danger buttons */
+  --opaque-button-border-intensity: -8; /* In terms of percentages */
+
+  /* Backgrounds applied on top of other backgrounds when hovered/active */
+  --elevate-1: rgba(0,0,0, .03);
+  --elevate-2: rgba(0,0,0, .08);
+
+  --background: 210 40% 98%;
+
+  --foreground: 222 47% 16%;
+
+  --border: 214 32% 91%;
+
+  --card: 0 0% 100%;
+
+  --card-foreground: 222 47% 16%;
+
+  --card-border: 214 20% 95%;
+
+  --sidebar: 210 20% 96%;
+
+  --sidebar-foreground: 222 47% 16%;
+
+  --sidebar-border: 214 25% 92%;
+
+  --sidebar-primary: 207 66% 47%;
+
+  --sidebar-primary-foreground: 210 40% 98%;
+
+  --sidebar-accent: 221 25% 92%;
+
+  --sidebar-accent-foreground: 222 47% 16%;
+
+  --sidebar-ring: 207 66% 47%;
+
+  --popover: 0 0% 100%;
+
+  --popover-foreground: 222 47% 16%;
+
+  --popover-border: 214 20% 95%;
+
+  --primary: 207 66% 47%;
+
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 199 85% 65%;
+
+  --secondary-foreground: 0 0% 100%;
+
+  --muted: 214 15% 94%;
+
+  --muted-foreground: 215 16% 47%;
+
+  --accent: 38 92% 50%;
+
+  --accent-foreground: 0 0% 100%;
+
+  --destructive: 0 72% 46%;
+
+  --destructive-foreground: 0 0% 98%;
+
+  --input: 214 32% 82%;
+  --ring: 207 66% 47%;
+  --chart-1: 207 66% 47%;
+  --chart-2: 199 85% 65%;
+  --chart-3: 38 92% 50%;
+  --chart-4: 0 72% 46%;
+  --chart-5: 280 65% 47%;
+
+  --success: 123 44% 34%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 96% 57%;
+  --warning-foreground: 0 0% 100%;
+  --error: 0 72% 46%;
+  --error-foreground: 0 0% 100%;
+  --info: 199 99% 41%;
+  --info-foreground: 0 0% 100%;
+
+  --font-sans: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: "JetBrains Mono", Menlo, monospace;
+  --color-grey-50: #f3f3f3;
+  --color-og-black: #000000;
+  --radius: 0.375rem; /* 6px */
+  --radius-2xs: 0.25rem;
+  --radius-xs: 0.5rem;
+  --radius-s: 0.75rem;
+  --radius-m: 1rem;
+  --radius-l: 1.25rem;
+  --radius-xl: 1.5rem;
+  --radius-2xl: 2rem;
+  --radius-3xl: 2.5rem;
+  --radius-4xl: 3rem;
+  --radius-5xl: 3.5rem;
+  --shadow-2xs: 0px 1px 2px 0px hsl(222 47% 11% / 0.05);
+  --shadow-xs: 0px 1px 2px 0px hsl(222 47% 11% / 0.06), 0px 1px 3px 0px hsl(222 47% 11% / 0.10);
+  --shadow-sm: 0px 1px 2px 0px hsl(222 47% 11% / 0.06), 0px 1px 3px 0px hsl(222 47% 11% / 0.10);
+  --shadow: 0px 2px 4px -1px hsl(222 47% 11% / 0.06), 0px 4px 6px -1px hsl(222 47% 11% / 0.10);
+  --shadow-md: 0px 4px 6px -1px hsl(222 47% 11% / 0.07), 0px 2px 4px -1px hsl(222 47% 11% / 0.06);
+  --shadow-lg: 0px 10px 15px -3px hsl(222 47% 11% / 0.10), 0px 4px 6px -2px hsl(222 47% 11% / 0.05);
+  --shadow-xl: 0px 20px 25px -5px hsl(222 47% 11% / 0.10), 0px 10px 10px -5px hsl(222 47% 11% / 0.04);
+  --shadow-2xl: 0px 25px 50px -12px hsl(222 47% 11% / 0.25);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+  --text-xs: 0.75rem;
+  --text-s: 0.875rem;
+  --text-m: 1rem;
+  --text-l: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 2rem;
+  --text-4xl: 2.5rem;
+  --leading-xs: 1rem;
+  --leading-s: 1.125rem;
+  --leading-m: 1.25rem;
+  --leading-l: 1.5rem;
+  --leading-xl: 2rem;
+  --leading-2xl: 2.5rem;
+  --leading-3xl: 3rem;
+  --leading-4xl: 3.5rem;
+
+  /* Automatically computed borders - intensity can be controlled by the user by the --opaque-button-border-intensity setting */
+
+  /* Fallback for older browsers */
+  --sidebar-primary-border: hsl(var(--sidebar-primary));
+  --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+
+  /* Fallback for older browsers */
+  --sidebar-accent-border: hsl(var(--sidebar-accent));
+  --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+
+  /* Fallback for older browsers */
+  --primary-border: hsl(var(--primary));
+  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+
+  /* Fallback for older browsers */
+  --secondary-border: hsl(var(--secondary));
+  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+
+  /* Fallback for older browsers */
+  --muted-border: hsl(var(--muted));
+  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+
+  /* Fallback for older browsers */
+  --accent-border: hsl(var(--accent));
+  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+
+  /* Fallback for older browsers */
+  --destructive-border: hsl(var(--destructive));
+  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
+}
+
+.dark {
+  /* MW Brand Colors (Dark Mode) are defined in design-tokens.css */
+
+  --button-outline: rgba(255,255,255, .10);
+  --badge-outline: rgba(255,255,255, .05);
+
+  --opaque-button-border-intensity: 9;  /* In terms of percentages */
+
+  /* Backgrounds applied on top of other backgrounds when hovered/active */
+  --elevate-1: rgba(255,255,255, .04);
+  --elevate-2: rgba(255,255,255, .09);
+
+  --background: 222 47% 8%;
+
+  --foreground: 210 40% 96%;
+
+  --border: 217 33% 17%;
+
+  --card: 222 47% 11%;
+
+  --card-foreground: 210 40% 96%;
+
+  --card-border: 217 32% 15%;
+
+  --sidebar: 222 47% 13%;
+
+  --sidebar-foreground: 210 40% 96%;
+
+  --sidebar-border: 217 33% 17%;
+
+  --sidebar-primary: 207 65% 59%;
+
+  --sidebar-primary-foreground: 222 47% 11%;
+
+  --sidebar-accent: 217 25% 18%;
+
+  --sidebar-accent-foreground: 210 40% 94%;
+
+  --sidebar-ring: 207 65% 59%;
+
+  --popover: 222 47% 11%;
+
+  --popover-foreground: 210 40% 96%;
+
+  --popover-border: 217 32% 15%;
+
+  --primary: 207 65% 59%;
+
+  --primary-foreground: 222 47% 11%;
+
+  --secondary: 199 86% 61%;
+
+  --secondary-foreground: 222 47% 11%;
+
+  --muted: 217 20% 16%;
+
+  --muted-foreground: 215 20% 65%;
+
+  --accent: 38 92% 65%;
+
+  --accent-foreground: 222 47% 11%;
+
+  --destructive: 0 75% 53%;
+
+  --destructive-foreground: 0 0% 98%;
+
+  --input: 217 33% 28%;
+  --ring: 207 65% 59%;
+  --chart-1: 207 65% 59%;
+  --chart-2: 199 86% 61%;
+  --chart-3: 38 92% 65%;
+  --chart-4: 0 75% 53%;
+  --chart-5: 280 65% 65%;
+
+  --success: 123 50% 37%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 96% 57%;
+  --warning-foreground: 0 0% 100%;
+  --error: 0 75% 53%;
+  --error-foreground: 0 0% 100%;
+  --info: 199 99% 41%;
+  --info-foreground: 0 0% 100%;
+
+  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.30);
+  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.35), 0px 1px 3px 0px hsl(0 0% 0% / 0.40);
+  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.35), 0px 1px 3px 0px hsl(0 0% 0% / 0.40);
+  --shadow: 0px 2px 4px -1px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.45);
+  --shadow-md: 0px 4px 6px -1px hsl(0 0% 0% / 0.45), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
+  --shadow-lg: 0px 10px 15px -3px hsl(0 0% 0% / 0.50), 0px 4px 6px -2px hsl(0 0% 0% / 0.35);
+  --shadow-xl: 0px 20px 25px -5px hsl(0 0% 0% / 0.55), 0px 10px 10px -5px hsl(0 0% 0% / 0.30);
+  --shadow-2xl: 0px 25px 50px -12px hsl(0 0% 0% / 0.60);
+
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply font-sans antialiased bg-background text-foreground;
+    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background-color: #F9FAFB;
+    line-height: 1.5;
+  }
+
+  h1 {
+    @apply font-semibold;
+    font-size: var(--text-4xl);
+    line-height: var(--leading-4xl);
+  }
+
+  h2 {
+    @apply font-semibold;
+    font-size: var(--text-3xl);
+    line-height: var(--leading-3xl);
+  }
+
+  h3 {
+    @apply font-semibold;
+    font-size: var(--text-2xl);
+    line-height: var(--leading-2xl);
+  }
+
+  h4 {
+    @apply font-semibold;
+    font-size: var(--text-xl);
+    line-height: var(--leading-xl);
+  }
+
+  h5 {
+    @apply font-semibold;
+    font-size: var(--text-l);
+    line-height: var(--leading-l);
+  }
+}
+
+/**
+ * Using the elevate system.
+ * Automatic contrast adjustment.
+ *
+ * <element className="hover-elevate" />
+ * <element className="active-elevate-2" />
+ *
+ * // Using the tailwind utility when a data attribute is "on"
+ * <element className="toggle-elevate data-[state=on]:toggle-elevated" />
+ * // Or manually controlling the toggle state
+ * <element className="toggle-elevate toggle-elevated" />
+ *
+ * Elevation systems have to handle many states.
+ * - not-hovered, vs. hovered vs. active  (three mutually exclusive states)
+ * - toggled or not
+ * - focused or not (this is not handled with these utilities)
+ *
+ * Even without handling focused or not, this is six possible combinations that
+ * need to be distinguished from eachother visually.
+ */
+@layer utilities {
+
+  /* Hide ugly search cancel button in Chrome until we can style it properly */
+  input[type="search"]::-webkit-search-cancel-button {
+    @apply hidden;
+  }
+
+  /* Placeholder styling for contentEditable div */
+  [contenteditable][data-placeholder]:empty::before {
+    content: attr(data-placeholder);
+    color: hsl(var(--muted-foreground));
+    pointer-events: none;
+  }
+
+  /* .no-default-hover-elevate/no-default-active-elevate is an escape hatch so consumers of
+   * buttons/badges can remove the automatic brightness adjustment on interactions
+   * and program their own. */
+  .no-default-hover-elevate {}
+
+  .no-default-active-elevate {}
+
+
+  /**
+   * Toggleable backgrounds go behind the content. Hoverable/active goes on top.
+   * This way they can stack/compound. Both will overlap the parent's borders!
+   * So borders will be automatically adjusted both on toggle, and hover/active,
+   * and they will be compounded.
+   */
+  .toggle-elevate::before,
+  .toggle-elevate-2::before {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    inset: 0px;
+    /*border-radius: inherit;   match rounded corners */
+    border-radius: inherit;
+    z-index: -1;
+    /* sits behind content but above backdrop */
+  }
+
+  .toggle-elevate.toggle-elevated::before {
+    background-color: var(--elevate-2);
+  }
+
+  /* If there's a 1px border, adjust the inset so that it covers that parent's border */
+  .border.toggle-elevate::before {
+    inset: -1px;
+  }
+
+  /* Does not work on elements with overflow:hidden! */
+  .hover-elevate:not(.no-default-hover-elevate),
+  .active-elevate:not(.no-default-active-elevate),
+  .hover-elevate-2:not(.no-default-hover-elevate),
+  .active-elevate-2:not(.no-default-active-elevate) {
+    position: relative;
+    z-index: 0;
+  }
+
+  .hover-elevate:not(.no-default-hover-elevate)::after,
+  .active-elevate:not(.no-default-active-elevate)::after,
+  .hover-elevate-2:not(.no-default-hover-elevate)::after,
+  .active-elevate-2:not(.no-default-active-elevate)::after {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    inset: 0px;
+    /*border-radius: inherit;   match rounded corners */
+    border-radius: inherit;
+    z-index: 999;
+    /* sits in front of content */
+  }
+
+  .hover-elevate:hover:not(.no-default-hover-elevate)::after,
+  .active-elevate:active:not(.no-default-active-elevate)::after {
+    background-color: var(--elevate-1);
+  }
+
+  .hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
+  .active-elevate-2:active:not(.no-default-active-elevate)::after {
+    background-color: var(--elevate-2);
+  }
+
+  /* If there's a 1px border, adjust the inset so that it covers that parent's border */
+  .border.hover-elevate:not(.no-hover-interaction-elevate)::after,
+  .border.active-elevate:not(.no-active-interaction-elevate)::after,
+  .border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
+  .border.active-elevate-2:not(.no-active-interaction-elevate)::after,
+  .border.hover-elevate:not(.no-hover-interaction-elevate)::after {
+    inset: -1px;
+  }
+
+  /* Override sidebar menu button active state to use primary color */
+  [data-sidebar="menu-button"][data-active="true"] {
+    background-color: hsl(var(--primary)) !important;
+    color: hsl(var(--primary-foreground)) !important;
+  }
+
+  [data-sidebar="menu-button"][data-active="true"]:hover {
+    background-color: hsl(var(--primary)) !important;
+    color: hsl(var(--primary-foreground)) !important;
+  }
+
+  /* Custom scrollbar utilities */
+  .scrollbar::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .scrollbar::-webkit-scrollbar-track {
+    border-radius: 0.5rem;
+    background: hsl(var(--muted));
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted-foreground));
+    border-radius: 0.5rem;
+    border: 2px solid hsl(var(--muted));
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--foreground) / 0.5);
+  }
+
+  /* Thin scrollbar variant */
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    border-radius: 0.375rem;
+    background: hsl(var(--muted));
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted-foreground));
+    border-radius: 0.375rem;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--foreground) / 0.5);
+  }
+
+  /* Primary colored scrollbar variant */
+  .scrollbar-primary::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .scrollbar-primary::-webkit-scrollbar-track {
+    border-radius: 0.5rem;
+    background: hsl(var(--primary) / 0.1);
+  }
+
+  .scrollbar-primary::-webkit-scrollbar-thumb {
+    background: hsl(var(--primary));
+    border-radius: 0.5rem;
+    border: 2px solid hsl(var(--primary) / 0.1);
+  }
+
+  .scrollbar-primary::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--primary) / 0.8);
+  }
+
+  /* Hide scrollbar while maintaining scroll functionality */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Custom inset shadow utilities */
+  .shadow-inset-bottom {
+    box-shadow: inset 0 -4px 6px -1px hsl(var(--foreground) / 0.1), inset 0 -2px 4px -2px hsl(var(--foreground) / 0.06);
+  }
+
+  .shadow-inset-top {
+    box-shadow: inset 0 4px 6px -1px hsl(var(--foreground) / 0.1), inset 0 2px 4px -2px hsl(var(--foreground) / 0.06);
+  }
+
+  .shadow-inset-all {
+    box-shadow: inset 0 2px 4px 0 hsl(var(--foreground) / 0.1);
+  }
+
+}
+
+/* ===== ACCESSIBILITY UTILITIES ===== */
+@layer utilities {
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
+  .focus-visible-ring:focus-visible {
+    outline: 2px solid var(--color-mw-primary-500);
+    outline-offset: 2px;
+  }
+
+  .focus-within-ring:focus-within {
+    outline: 2px solid var(--color-mw-primary-500);
+    outline-offset: 2px;
+  }
+}
+
+/* ===== RTL SUPPORT ===== */
+[dir="rtl"] {
+  .space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 1;
+  }
+  
+  .ml-auto {
+    margin-left: 0;
+    margin-right: auto;
+  }
+  
+  .mr-auto {
+    margin-right: 0;
+    margin-left: auto;
+  }
+  
+  .text-left {
+    text-align: right;
+  }
+  
+  .text-right {
+    text-align: left;
+  }
+}
+
+/* ===== MOBILE RESPONSIVE UTILITIES ===== */
+@layer utilities {
+  .touch-action-pan-x {
+    touch-action: pan-x;
+  }
+
+  .touch-action-pan-y {
+    touch-action: pan-y;
+  }
+
+  .touch-action-none {
+    touch-action: none;
+  }
+
+  .safe-area-inset-bottom {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .safe-area-inset-top {
+    padding-top: env(safe-area-inset-top);
+  }
+
+  /* PWA / notched device safe area padding */
+  .pb-safe {
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+  }
+
+  .pt-safe {
+    padding-top: env(safe-area-inset-top, 0px);
+  }
+
+  .pl-safe {
+    padding-left: env(safe-area-inset-left, 0px);
+  }
+
+  .pr-safe {
+    padding-right: env(safe-area-inset-right, 0px);
+  }
+}
+
+/* Mobile-first responsive fixes */
+@media (max-width: 767px) {
+  .hide-on-mobile {
+    display: none !important;
+  }
+
+  .mobile-full-width {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .mobile-stack {
+    flex-direction: column !important;
+  }
+
+  .mobile-text-center {
+    text-align: center !important;
+  }
+
+  .mobile-p-4 {
+    padding: 1rem !important;
+  }
+
+  .mobile-gap-2 {
+    gap: 0.5rem !important;
+  }
+}
+
+/* Tablet responsive */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .hide-on-tablet {
+    display: none !important;
+  }
+
+  .tablet-stack {
+    flex-direction: column !important;
+  }
+}
+
+/* Desktop only */
+@media (min-width: 1024px) {
+  .hide-on-desktop {
+    display: none !important;
+  }
+}
+
+/* Reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  :root {
+    --color-mw-primary-500: #0056b3;
+    --color-mw-neutral-500: #000000;
+  }
+  
+  button, a {
+    text-decoration: underline;
+  }
+}
+
+/* Print styles */
+@media print {
+  .no-print {
+    display: none !important;
+  }
+  
+  body {
+    font-size: 12pt;
+    line-height: 1.5;
+  }
+}