klz-cables.com/app/(payload)/custom.scss

/* =================================================================
   KLZ Cables – Payload Admin Theme
   Strictly follows docs/STYLEGUIDE.md & tailwind.config.cjs
   
   IMPORTANT: We use `html` selector (not `:root`) because Payload's
   own CSS defines variables on `:root` and loads AFTER this file.
   `html` has higher specificity than `:root`, so our values win.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =================================================================
   COLOR OVERRIDES
   Payload internally maps:
     --theme-elevation-* → --color-base-*
     --theme-success-*   → --color-success-*
   We override the SOURCE variables on `html` to beat Payload's `:root`.
   ================================================================= */

html {
   /* ---------------------------------------------------------------
       KLZ Primary Blue (#011dff) → Buttons, links, active states
       --------------------------------------------------------------- */
   --color-success-50: #eef0ff !important;
   --color-success-100: #dfe2ff !important;
   --color-success-150: #cdd2ff !important;
   --color-success-200: #b8bfff !important;
   --color-success-250: #a0a9ff !important;
   --color-success-300: #8892ff !important;
   --color-success-350: #707bff !important;
   --color-success-400: #5564ff !important;
   --color-success-450: #3a4dff !important;
   --color-success-500: #011dff !important;
   /* KLZ Primary */
   --color-success-550: #0119e6 !important;
   --color-success-600: #0116cc !important;
   --color-success-650: #0112b3 !important;
   --color-success-700: #000e99 !important;
   --color-success-750: #000b80 !important;
   --color-success-800: #000866 !important;
   --color-success-850: #00054d !important;
   --color-success-900: #000333 !important;
   --color-success-950: #00011a !important;

   /* ---------------------------------------------------------------
       KLZ "Foundation Neutrals" → Backgrounds, cards, borders, text
       Based on tailwind.config.cjs: neutral.light=#fff,
       neutral.DEFAULT=#f8f9fa, neutral.dark=#263336, neutral.black=#0a0a0a
       text.primary=#1a1a1a, text.secondary=#6c757d, text.light=#adb5bd
       --------------------------------------------------------------- */
   --color-base-0: #ffffff !important;
   --color-base-50: #f8f9fa !important;
   --color-base-100: #f1f3f5 !important;
   --color-base-150: #e9ecef !important;
   --color-base-200: #dee2e6 !important;
   --color-base-250: #ced4da !important;
   --color-base-300: #adb5bd !important;
   --color-base-350: #9ba3ab !important;
   --color-base-400: #868e96 !important;
   --color-base-450: #6c757d !important;
   --color-base-500: #5c636a !important;
   --color-base-550: #4d5358 !important;
   --color-base-600: #3d4246 !important;
   --color-base-650: #343a40 !important;
   --color-base-700: #2b3035 !important;
   --color-base-750: #263336 !important;
   --color-base-800: #212529 !important;
   --color-base-850: #1a1a1a !important;
   --color-base-900: #121212 !important;
   --color-base-950: #0a0a0a !important;
   --color-base-1000: #000000 !important;

   /* Typography */
   --font-body: 'Inter', system-ui, -apple-system, sans-serif !important;
   --font-headings: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Base Body Application */
body {
   font-family: var(--font-body) !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* =================================================================
   Login / Setup Page
   ================================================================= */
.template-default.template-default--has-bg {
   background: radial-gradient(circle at top right, #e6ebf5 0%, #f8f9fa 60%, #f3f4f6 100%) !important;
}

.login__wrap,
.create-first-user__wrap {
   border-top: none !important;
   padding: 3rem !important;
   background: rgba(255, 255, 255, 0.85) !important;
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--theme-elevation-150) !important;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
   border-radius: 1.5rem !important;
}

/* =================================================================
   Buttons – override Payload's dark buttons with KLZ Blue
   Payload uses .btn--style-primary { --bg-color: var(--theme-elevation-800) }
   which makes all primary buttons near-black. We override to KLZ Blue.
   ================================================================= */
.btn--style-primary,
.btn--style-pill {
   --bg-color: #011dff !important;
   --color: #ffffff !important;
   --hover-bg: #0116cc !important;
   --hover-color: #ffffff !important;
}

.btn--style-primary.btn--disabled,
.btn--style-pill.btn--disabled {
   --bg-color: #b8bfff !important;
   --color: #ffffff !important;
   --hover-bg: #b8bfff !important;
}

/* Sidebar Active Items */
[class*="nav-group__link--active"],
[class*="nav__link--active"] {
   --theme-elevation-800: #011dff !important;
   color: #011dff !important;
   border-left-color: #011dff !important;
}

.btn--style-secondary {
   --box-shadow: inset 0 0 0 1px #011dff !important;
   --color: #011dff !important;
   --hover-color: #0116cc !important;
   --hover-box-shadow: inset 0 0 0 1px #0116cc !important;
}

/* =================================================================
   Logo & Icon
   ================================================================= */
.klz-admin-logo,
.klz-admin-icon {
   display: block !important;
   visibility: visible !important;
   opacity: 1 !important;
   height: 32px !important;
   width: auto !important;
   max-width: 100% !important;
   object-fit: contain !important;
}