/* ============================================================ SADORA — Design System CSS Version: 1.0.0 Theme: Driven by data-primary / data-secondary on Modes: data-theme="light" | "dark" ============================================================ */ /* ─── 1. GOOGLE FONTS ─────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&display=swap'); /* ─── 2. DESIGN TOKENS (defaults, overridden by JS) ──────── */ :root { /* Brand — overwritten by sadora-theme.js from dataset */ --sd-primary: #4F6EF7; --sd-primary-rgb: 79, 110, 247; --sd-secondary: #10B981; --sd-secondary-rgb: 16, 185, 129; /* Derived brand */ --sd-primary-hover: color-mix(in srgb, var(--sd-primary) 85%, #000); --sd-primary-light: color-mix(in srgb, var(--sd-primary) 12%, transparent); --sd-primary-subtle: color-mix(in srgb, var(--sd-primary) 6%, transparent); --sd-secondary-hover: color-mix(in srgb, var(--sd-secondary) 85%, #000); --sd-secondary-light: color-mix(in srgb, var(--sd-secondary) 12%, transparent); /* Semantic status */ --sd-success: #22C55E; --sd-success-light: color-mix(in srgb, #22C55E 10%, transparent); --sd-warning: #F59E0B; --sd-warning-light: color-mix(in srgb, #F59E0B 10%, transparent); --sd-danger: #EF4444; --sd-danger-light: color-mix(in srgb, #EF4444 10%, transparent); --sd-info: #3B82F6; --sd-info-light: color-mix(in srgb, #3B82F6 10%, transparent); /* Typography */ --sd-font-sans: 'DM Sans', system-ui, sans-serif; --sd-font-display: 'Fraunces', Georgia, serif; --sd-font-mono: 'DM Mono', 'Fira Code', monospace; --sd-text-xs: 0.6875rem; /* 11px */ --sd-text-sm: 0.8125rem; /* 13px */ --sd-text-base: 0.9375rem; /* 15px */ --sd-text-md: 1.0625rem; /* 17px */ --sd-text-lg: 1.1875rem; /* 19px */ --sd-text-xl: 1.375rem; /* 22px */ --sd-text-2xl: 1.75rem; /* 28px */ --sd-text-3xl: 2.25rem; /* 36px */ --sd-text-4xl: 3rem; /* 48px */ --sd-leading-tight: 1.2; --sd-leading-snug: 1.4; --sd-leading-normal: 1.6; --sd-leading-loose: 1.8; --sd-weight-light: 300; --sd-weight-normal: 400; --sd-weight-medium: 500; --sd-weight-semibold: 600; --sd-weight-bold: 700; /* Spacing scale (4px base) */ --sd-space-1: 0.25rem; --sd-space-2: 0.5rem; --sd-space-3: 0.75rem; --sd-space-4: 1rem; --sd-space-5: 1.25rem; --sd-space-6: 1.5rem; --sd-space-8: 2rem; --sd-space-10: 2.5rem; --sd-space-12: 3rem; --sd-space-16: 4rem; --sd-space-20: 5rem; --sd-space-24: 6rem; /* Border radius */ --sd-radius-sm: 0.25rem; --sd-radius-md: 0.5rem; --sd-radius-lg: 0.75rem; --sd-radius-xl: 1rem; --sd-radius-2xl: 1.5rem; --sd-radius-full: 9999px; /* Shadows */ --sd-shadow-xs: 0 1px 2px 0 rgba(0,0,0,.05); --sd-shadow-sm: 0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.06); --sd-shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.06); --sd-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.05); --sd-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.05); --sd-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25); /* Transitions */ --sd-ease: cubic-bezier(0.4, 0, 0.2, 1); --sd-ease-in: cubic-bezier(0.4, 0, 1, 1); --sd-ease-out: cubic-bezier(0, 0, 0.2, 1); --sd-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --sd-duration-fast: 120ms; --sd-duration-base: 200ms; --sd-duration-slow: 350ms; /* Layout */ --sd-sidebar-width: 260px; --sd-sidebar-collapsed: 68px; --sd-topbar-height: 60px; --sd-content-max: 1440px; } /* ─── 3. LIGHT MODE SURFACE TOKENS ───────────────────────── */ [data-theme="light"], :root { --sd-bg: #F5F7FA; --sd-bg-alt: #ECEEF2; --sd-surface: #FFFFFF; --sd-surface-2: #F9FAFB; --sd-surface-3: #F3F4F6; --sd-border: #E5E7EB; --sd-border-strong:#D1D5DB; --sd-text-primary: #111827; --sd-text-secondary:#4B5563; --sd-text-muted: #9CA3AF; --sd-text-inverse: #FFFFFF; --sd-sidebar-bg: #FFFFFF; --sd-sidebar-text: #374151; --sd-sidebar-muted:#9CA3AF; --sd-topbar-bg: #FFFFFF; --sd-overlay: rgba(0, 0, 0, 0.4); --sd-scrollbar-track: #F3F4F6; --sd-scrollbar-thumb: #D1D5DB; --sd-code-bg: #F3F4F6; --sd-input-bg: #FFFFFF; --sd-input-border: #D1D5DB; --sd-input-focus-border: var(--sd-primary); --sd-placeholder: #9CA3AF; } /* ─── 4. DARK MODE SURFACE TOKENS ────────────────────────── */ [data-theme="dark"] { --sd-bg: #0D0F14; --sd-bg-alt: #131620; --sd-surface: #181B24; --sd-surface-2: #1E2130; --sd-surface-3: #252A3A; --sd-border: #2A2F42; --sd-border-strong:#374151; --sd-text-primary: #F1F5F9; --sd-text-secondary:#94A3B8; --sd-text-muted: #475569; --sd-text-inverse: #0D0F14; --sd-sidebar-bg: #131620; --sd-sidebar-text: #CBD5E1; --sd-sidebar-muted:#475569; --sd-topbar-bg: #181B24; --sd-overlay: rgba(0, 0, 0, 0.65); --sd-scrollbar-track: #1E2130; --sd-scrollbar-thumb: #374151; --sd-code-bg: #1E2130; --sd-input-bg: #1E2130; --sd-input-border: #2A2F42; --sd-input-focus-border: var(--sd-primary); --sd-placeholder: #475569; --sd-shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3); --sd-shadow-sm: 0 1px 3px 0 rgba(0,0,0,.4), 0 1px 2px -1px rgba(0,0,0,.3); --sd-shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3); --sd-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.3); --sd-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.45), 0 8px 10px -6px rgba(0,0,0,.3); } /* ─── 5. RESET & BASE ─────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; height: 100%; } body { font-family: var(--sd-font-sans); font-size: var(--sd-text-base); font-weight: var(--sd-weight-normal); line-height: var(--sd-leading-normal); color: var(--sd-text-primary); background-color: var(--sd-bg); min-height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--sd-duration-slow) var(--sd-ease), color var(--sd-duration-slow) var(--sd-ease); } img, svg, video { display: block; max-width: 100%; } a { color: var(--sd-primary); text-decoration: none; transition: color var(--sd-duration-fast) var(--sd-ease); } a:hover { color: var(--sd-primary-hover); } button { cursor: pointer; font-family: inherit; } ul, ol { list-style: none; } input, select, textarea, button { font-family: inherit; font-size: inherit; } hr { border: none; border-top: 1px solid var(--sd-border); margin: var(--sd-space-6) 0; } p { line-height: var(--sd-leading-normal); } /* ─── 6. SCROLLBAR ───────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--sd-scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--sd-scrollbar-thumb); border-radius: var(--sd-radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--sd-text-muted); } /* ─── 7. TYPOGRAPHY ──────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--sd-font-sans); font-weight: var(--sd-weight-semibold); line-height: var(--sd-leading-tight); color: var(--sd-text-primary); } h1 { font-size: var(--sd-text-3xl); } h2 { font-size: var(--sd-text-2xl); } h3 { font-size: var(--sd-text-xl); } h4 { font-size: var(--sd-text-lg); } h5 { font-size: var(--sd-text-md); } h6 { font-size: var(--sd-text-base); } .sd-display { font-family: var(--sd-font-display); font-weight: var(--sd-weight-light); font-style: italic; } .sd-mono { font-family: var(--sd-font-mono); } .sd-text-xs { font-size: var(--sd-text-xs); } .sd-text-sm { font-size: var(--sd-text-sm); } .sd-text-base { font-size: var(--sd-text-base); } .sd-text-md { font-size: var(--sd-text-md); } .sd-text-lg { font-size: var(--sd-text-lg); } .sd-text-xl { font-size: var(--sd-text-xl); } .sd-text-2xl { font-size: var(--sd-text-2xl); } .sd-text-3xl { font-size: var(--sd-text-3xl); } .sd-text-4xl { font-size: var(--sd-text-4xl); } .sd-weight-light { font-weight: var(--sd-weight-light); } .sd-weight-normal { font-weight: var(--sd-weight-normal); } .sd-weight-medium { font-weight: var(--sd-weight-medium); } .sd-weight-semibold { font-weight: var(--sd-weight-semibold); } .sd-weight-bold { font-weight: var(--sd-weight-bold); } .sd-text-primary { color: var(--sd-text-primary); } .sd-text-secondary { color: var(--sd-text-secondary); } .sd-text-muted { color: var(--sd-text-muted); } .sd-text-brand { color: var(--sd-primary); } .sd-text-success { color: var(--sd-success); } .sd-text-warning { color: var(--sd-warning); } .sd-text-danger { color: var(--sd-danger); } .sd-text-info { color: var(--sd-info); } .sd-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sd-text-center { text-align: center; } .sd-text-right { text-align: right; } .sd-text-left { text-align: left; } .sd-uppercase { text-transform: uppercase; letter-spacing: 0.06em; } .sd-tracking-wide { letter-spacing: 0.05em; } code, kbd, pre { font-family: var(--sd-font-mono); font-size: 0.875em; } code { background: var(--sd-code-bg); color: var(--sd-primary); padding: 0.1em 0.35em; border-radius: var(--sd-radius-sm); } pre { background: var(--sd-code-bg); padding: var(--sd-space-4); border-radius: var(--sd-radius-lg); overflow-x: auto; border: 1px solid var(--sd-border); } pre code { background: none; padding: 0; color: var(--sd-text-primary); } /* ─── 8. LAYOUT SHELL ────────────────────────────────────── */ .sd-shell { display: flex; min-height: 100vh; overflow: hidden; } .sd-main { flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: var(--sd-sidebar-width); transition: margin-left var(--sd-duration-slow) var(--sd-ease); } .sd-shell.sidebar-collapsed .sd-main { margin-left: var(--sd-sidebar-collapsed); } .sd-content { flex: 1; padding: var(--sd-space-6) var(--sd-space-8); max-width: var(--sd-content-max); width: 100%; } .sd-content--full { max-width: none; } .sd-content--narrow { max-width: 960px; margin: 0 auto; } .sd-content--centered { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } @media (max-width: 1024px) { .sd-main { margin-left: 0; } .sd-content { padding: var(--sd-space-4) var(--sd-space-5); } } /* ─── 9. SIDEBAR ─────────────────────────────────────────── */ .sd-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: var(--sd-sidebar-width); background: var(--sd-sidebar-bg); border-right: 1px solid var(--sd-border); display: flex; flex-direction: column; z-index: 100; transition: width var(--sd-duration-slow) var(--sd-ease), transform var(--sd-duration-slow) var(--sd-ease), background-color var(--sd-duration-slow) var(--sd-ease); overflow: hidden; } .sd-shell.sidebar-collapsed .sd-sidebar { width: var(--sd-sidebar-collapsed); } /* Sidebar brand */ .sd-sidebar__brand { display: flex; align-items: center; gap: var(--sd-space-3); padding: 0 var(--sd-space-5); height: var(--sd-topbar-height); border-bottom: 1px solid var(--sd-border); flex-shrink: 0; overflow: hidden; text-decoration: none; } .sd-sidebar__logo { width: 32px; height: 32px; border-radius: var(--sd-radius-md); background: var(--sd-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-weight: var(--sd-weight-bold); font-size: var(--sd-text-sm); } .sd-sidebar__brand-name { font-size: var(--sd-text-md); font-weight: var(--sd-weight-semibold); color: var(--sd-text-primary); white-space: nowrap; opacity: 1; transition: opacity var(--sd-duration-base) var(--sd-ease); } .sd-shell.sidebar-collapsed .sd-sidebar__brand-name { opacity: 0; pointer-events: none; } /* Sidebar nav */ .sd-sidebar__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--sd-space-3) 0; } .sd-nav__section { margin-bottom: var(--sd-space-1); } .sd-nav__label { font-size: var(--sd-text-xs); font-weight: var(--sd-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sd-sidebar-muted); padding: var(--sd-space-3) var(--sd-space-5) var(--sd-space-1); white-space: nowrap; overflow: hidden; opacity: 1; transition: opacity var(--sd-duration-base) var(--sd-ease); } .sd-shell.sidebar-collapsed .sd-nav__label { opacity: 0; } .sd-nav__item { position: relative; } .sd-nav__link { display: flex; align-items: center; gap: var(--sd-space-3); padding: var(--sd-space-2) var(--sd-space-5); color: var(--sd-sidebar-text); font-size: var(--sd-text-sm); font-weight: var(--sd-weight-medium); white-space: nowrap; transition: background var(--sd-duration-fast) var(--sd-ease), color var(--sd-duration-fast) var(--sd-ease); border-radius: 0; text-decoration: none; } .sd-nav__link:hover { background: var(--sd-primary-light); color: var(--sd-primary); } .sd-nav__link.active { background: var(--sd-primary-light); color: var(--sd-primary); } .sd-nav__link.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--sd-primary); border-radius: 0 var(--sd-radius-full) var(--sd-radius-full) 0; } .sd-nav__icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; opacity: 0.8; } .sd-nav__link.active .sd-nav__icon, .sd-nav__link:hover .sd-nav__icon { opacity: 1; } .sd-nav__text { flex: 1; opacity: 1; transition: opacity var(--sd-duration-base) var(--sd-ease); } .sd-shell.sidebar-collapsed .sd-nav__text { opacity: 0; pointer-events: none; } .sd-nav__badge { font-size: var(--sd-text-xs); padding: 1px var(--sd-space-2); border-radius: var(--sd-radius-full); font-weight: var(--sd-weight-semibold); transition: opacity var(--sd-duration-base) var(--sd-ease); } .sd-shell.sidebar-collapsed .sd-nav__badge { opacity: 0; } /* Submenu */ .sd-nav__sub { overflow: hidden; max-height: 0; transition: max-height var(--sd-duration-slow) var(--sd-ease); } .sd-nav__item.open > .sd-nav__sub { max-height: 300px; } .sd-nav__sub .sd-nav__link { padding-left: calc(var(--sd-space-5) + 20px + var(--sd-space-3)); font-size: var(--sd-text-xs); font-weight: var(--sd-weight-normal); } .sd-nav__chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--sd-duration-base) var(--sd-ease); opacity: 0.5; } .sd-nav__item.open .sd-nav__chevron { transform: rotate(90deg); } .sd-shell.sidebar-collapsed .sd-nav__chevron { opacity: 0; } /* Sidebar footer */ .sd-sidebar__footer { padding: var(--sd-space-4) var(--sd-space-5); border-top: 1px solid var(--sd-border); flex-shrink: 0; overflow: hidden; } .sd-sidebar__user { display: flex; align-items: center; gap: var(--sd-space-3); cursor: pointer; padding: var(--sd-space-2); border-radius: var(--sd-radius-md); transition: background var(--sd-duration-fast) var(--sd-ease); } .sd-sidebar__user:hover { background: var(--sd-surface-3); } .sd-sidebar__avatar { width: 36px; height: 36px; border-radius: var(--sd-radius-full); flex-shrink: 0; object-fit: cover; background: var(--sd-primary-light); display: flex; align-items: center; justify-content: center; color: var(--sd-primary); font-size: var(--sd-text-sm); font-weight: var(--sd-weight-semibold); } .sd-sidebar__user-info { flex: 1; min-width: 0; opacity: 1; transition: opacity var(--sd-duration-base) var(--sd-ease); } .sd-shell.sidebar-collapsed .sd-sidebar__user-info { opacity: 0; pointer-events: none; } .sd-sidebar__user-name { font-size: var(--sd-text-sm); font-weight: var(--sd-weight-medium); color: var(--sd-text-primary); } .sd-sidebar__user-role { font-size: var(--sd-text-xs); color: var(--sd-text-muted); } /* Sidebar toggle tooltip in collapsed mode */ .sd-shell.sidebar-collapsed .sd-nav__link { justify-content: center; padding-left: 0; padding-right: 0; } /* ─── 10. TOPBAR ─────────────────────────────────────────── */ .sd-topbar { position: sticky; top: 0; height: var(--sd-topbar-height); background: var(--sd-topbar-bg); border-bottom: 1px solid var(--sd-border); display: flex; align-items: center; gap: var(--sd-space-4); padding: 0 var(--sd-space-8); z-index: 50; transition: background-color var(--sd-duration-slow) var(--sd-ease); } .sd-topbar__toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--sd-radius-md); border: none; background: transparent; color: var(--sd-text-secondary); cursor: pointer; transition: background var(--sd-duration-fast) var(--sd-ease), color var(--sd-duration-fast) var(--sd-ease); flex-shrink: 0; } .sd-topbar__toggle:hover { background: var(--sd-surface-3); color: var(--sd-text-primary); } .sd-topbar__breadcrumb { display: flex; align-items: center; gap: var(--sd-space-2); flex: 1; min-width: 0; } .sd-breadcrumb__item { font-size: var(--sd-text-sm); color: var(--sd-text-muted); } .sd-breadcrumb__item:last-child { color: var(--sd-text-primary); font-weight: var(--sd-weight-medium); } .sd-breadcrumb__sep { color: var(--sd-border-strong); font-size: var(--sd-text-xs); } .sd-topbar__actions { display: flex; align-items: center; gap: var(--sd-space-2); flex-shrink: 0; } .sd-topbar__search { position: relative; } .sd-topbar__search input { height: 36px; padding: 0 var(--sd-space-4) 0 2.25rem; background: var(--sd-surface-3); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-full); font-size: var(--sd-text-sm); color: var(--sd-text-primary); width: 220px; transition: all var(--sd-duration-base) var(--sd-ease); outline: none; } .sd-topbar__search input::placeholder { color: var(--sd-placeholder); } .sd-topbar__search input:focus { background: var(--sd-input-bg); border-color: var(--sd-primary); box-shadow: 0 0 0 3px var(--sd-primary-light); width: 280px; } .sd-topbar__search-icon { position: absolute; left: var(--sd-space-3); top: 50%; transform: translateY(-50%); color: var(--sd-text-muted); pointer-events: none; } .sd-topbar__btn { width: 36px; height: 36px; border-radius: var(--sd-radius-md); border: none; background: transparent; color: var(--sd-text-secondary); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: background var(--sd-duration-fast) var(--sd-ease), color var(--sd-duration-fast) var(--sd-ease); } .sd-topbar__btn:hover { background: var(--sd-surface-3); color: var(--sd-text-primary); } .sd-topbar__avatar { width: 36px; height: 36px; border-radius: var(--sd-radius-full); cursor: pointer; object-fit: cover; background: var(--sd-primary-light); display: flex; align-items: center; justify-content: center; color: var(--sd-primary); font-size: var(--sd-text-sm); font-weight: var(--sd-weight-semibold); transition: box-shadow var(--sd-duration-fast) var(--sd-ease); } .sd-topbar__avatar:hover { box-shadow: 0 0 0 3px var(--sd-primary-light); } /* Notification dot */ .sd-badge-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: var(--sd-radius-full); background: var(--sd-danger); border: 2px solid var(--sd-topbar-bg); } /* ─── 11. GRID ───────────────────────────────────────────── */ .sd-grid { display: grid; gap: var(--sd-space-6); } .sd-grid--2 { grid-template-columns: repeat(2, 1fr); } .sd-grid--3 { grid-template-columns: repeat(3, 1fr); } .sd-grid--4 { grid-template-columns: repeat(4, 1fr); } .sd-grid--6 { grid-template-columns: repeat(6, 1fr); } .sd-grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .sd-col-span-2 { grid-column: span 2; } .sd-col-span-3 { grid-column: span 3; } .sd-col-span-4 { grid-column: span 4; } .sd-col-span-full { grid-column: 1 / -1; } @media (max-width: 1200px) { .sd-grid--4 { grid-template-columns: repeat(2, 1fr); } .sd-grid--6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .sd-grid--2, .sd-grid--3, .sd-grid--4, .sd-grid--6 { grid-template-columns: 1fr; } .sd-col-span-2, .sd-col-span-3, .sd-col-span-4 { grid-column: auto; } } /* Flex helpers */ .sd-flex { display: flex; } .sd-flex-col { display: flex; flex-direction: column; } .sd-items-center { align-items: center; } .sd-items-start { align-items: flex-start; } .sd-items-end { align-items: flex-end; } .sd-justify-between { justify-content: space-between; } .sd-justify-center { justify-content: center; } .sd-justify-end { justify-content: flex-end; } .sd-flex-wrap { flex-wrap: wrap; } .sd-flex-1 { flex: 1; } .sd-gap-1 { gap: var(--sd-space-1); } .sd-gap-2 { gap: var(--sd-space-2); } .sd-gap-3 { gap: var(--sd-space-3); } .sd-gap-4 { gap: var(--sd-space-4); } .sd-gap-5 { gap: var(--sd-space-5); } .sd-gap-6 { gap: var(--sd-space-6); } .sd-gap-8 { gap: var(--sd-space-8); } /* Spacing helpers */ .sd-p-0 { padding: 0; } .sd-p-2 { padding: var(--sd-space-2); } .sd-p-4 { padding: var(--sd-space-4); } .sd-p-6 { padding: var(--sd-space-6); } .sd-p-8 { padding: var(--sd-space-8); } .sd-mt-2 { margin-top: var(--sd-space-2); } .sd-mt-4 { margin-top: var(--sd-space-4); } .sd-mt-6 { margin-top: var(--sd-space-6); } .sd-mt-8 { margin-top: var(--sd-space-8); } .sd-mb-2 { margin-bottom: var(--sd-space-2); } .sd-mb-4 { margin-bottom: var(--sd-space-4); } .sd-mb-6 { margin-bottom: var(--sd-space-6); } .sd-mb-8 { margin-bottom: var(--sd-space-8); } /* ─── 12. CARD ───────────────────────────────────────────── */ .sd-card { background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-xl); box-shadow: var(--sd-shadow-sm); transition: background-color var(--sd-duration-slow) var(--sd-ease), border-color var(--sd-duration-slow) var(--sd-ease), box-shadow var(--sd-duration-base) var(--sd-ease); } .sd-card:hover { box-shadow: var(--sd-shadow-md); } .sd-card--flat { box-shadow: none; } .sd-card--bordered { border-width: 2px; } .sd-card--raised { box-shadow: var(--sd-shadow-lg); } .sd-card__header { padding: var(--sd-space-5) var(--sd-space-6); border-bottom: 1px solid var(--sd-border); display: flex; align-items: center; gap: var(--sd-space-3); } .sd-card__title { font-size: var(--sd-text-md); font-weight: var(--sd-weight-semibold); color: var(--sd-text-primary); flex: 1; } .sd-card__subtitle { font-size: var(--sd-text-sm); color: var(--sd-text-muted); margin-top: var(--sd-space-1); font-weight: var(--sd-weight-normal); } .sd-card__body { padding: var(--sd-space-6); } .sd-card__body--sm { padding: var(--sd-space-4); } .sd-card__body--lg { padding: var(--sd-space-8); } .sd-card__body--flush { padding: 0; } .sd-card__footer { padding: var(--sd-space-4) var(--sd-space-6); border-top: 1px solid var(--sd-border); display: flex; align-items: center; gap: var(--sd-space-3); } /* Stat card */ .sd-stat-card { background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-xl); padding: var(--sd-space-6); box-shadow: var(--sd-shadow-sm); transition: box-shadow var(--sd-duration-base) var(--sd-ease); position: relative; overflow: hidden; } .sd-stat-card:hover { box-shadow: var(--sd-shadow-md); } .sd-stat-card__icon { width: 44px; height: 44px; border-radius: var(--sd-radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sd-space-4); background: var(--sd-primary-light); color: var(--sd-primary); } .sd-stat-card__value { font-size: var(--sd-text-2xl); font-weight: var(--sd-weight-bold); color: var(--sd-text-primary); line-height: 1; margin-bottom: var(--sd-space-1); } .sd-stat-card__label { font-size: var(--sd-text-sm); color: var(--sd-text-muted); font-weight: var(--sd-weight-medium); } .sd-stat-card__delta { display: inline-flex; align-items: center; gap: var(--sd-space-1); font-size: var(--sd-text-xs); font-weight: var(--sd-weight-semibold); margin-top: var(--sd-space-2); padding: 2px var(--sd-space-2); border-radius: var(--sd-radius-full); } .sd-stat-card__delta--up { background: var(--sd-success-light); color: var(--sd-success); } .sd-stat-card__delta--down { background: var(--sd-danger-light); color: var(--sd-danger); } /* ─── 13. BUTTONS ────────────────────────────────────────── */ .sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sd-space-2); padding: 0 var(--sd-space-5); height: 40px; font-size: var(--sd-text-sm); font-weight: var(--sd-weight-semibold); border-radius: var(--sd-radius-lg); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: all var(--sd-duration-fast) var(--sd-ease); position: relative; overflow: hidden; user-select: none; } .sd-btn:focus-visible { outline: 2px solid var(--sd-primary); outline-offset: 2px; } /* Sizes */ .sd-btn--xs { height: 28px; padding: 0 var(--sd-space-3); font-size: var(--sd-text-xs); border-radius: var(--sd-radius-md); } .sd-btn--sm { height: 34px; padding: 0 var(--sd-space-4); font-size: var(--sd-text-xs); } .sd-btn--lg { height: 48px; padding: 0 var(--sd-space-8); font-size: var(--sd-text-md); } .sd-btn--xl { height: 56px; padding: 0 var(--sd-space-10); font-size: var(--sd-text-lg); } .sd-btn--full { width: 100%; } .sd-btn--icon { width: 40px; padding: 0; } .sd-btn--icon.sd-btn--sm { width: 34px; } .sd-btn--icon.sd-btn--lg { width: 48px; } /* Variants */ .sd-btn--primary { background: var(--sd-primary); color: #fff; border-color: var(--sd-primary); } .sd-btn--primary:hover { background: var(--sd-primary-hover); border-color: var(--sd-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--sd-primary-rgb), 0.35); } .sd-btn--primary:active { transform: translateY(0); box-shadow: none; } .sd-btn--secondary { background: var(--sd-secondary); color: #fff; border-color: var(--sd-secondary); } .sd-btn--secondary:hover { background: var(--sd-secondary-hover); border-color: var(--sd-secondary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--sd-secondary-rgb), 0.35); } .sd-btn--outline { background: transparent; color: var(--sd-primary); border-color: var(--sd-primary); } .sd-btn--outline:hover { background: var(--sd-primary-light); } .sd-btn--ghost { background: transparent; color: var(--sd-text-secondary); border-color: transparent; } .sd-btn--ghost:hover { background: var(--sd-surface-3); color: var(--sd-text-primary); } .sd-btn--surface { background: var(--sd-surface-3); color: var(--sd-text-primary); border-color: var(--sd-border); } .sd-btn--surface:hover { background: var(--sd-surface-2); border-color: var(--sd-border-strong); } .sd-btn--danger { background: var(--sd-danger); color: #fff; border-color: var(--sd-danger); } .sd-btn--danger:hover { filter: brightness(0.9); transform: translateY(-1px); } .sd-btn:disabled, .sd-btn--disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* Button loading spinner */ .sd-btn--loading { pointer-events: none; } .sd-btn--loading::after { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: sd-spin 0.6s linear infinite; margin-left: var(--sd-space-2); } /* Button group */ .sd-btn-group { display: inline-flex; } .sd-btn-group .sd-btn { border-radius: 0; border-right-width: 0; } .sd-btn-group .sd-btn:first-child { border-radius: var(--sd-radius-lg) 0 0 var(--sd-radius-lg); } .sd-btn-group .sd-btn:last-child { border-radius: 0 var(--sd-radius-lg) var(--sd-radius-lg) 0; border-right-width: 1px; } /* ─── 14. BADGES ─────────────────────────────────────────── */ .sd-badge { display: inline-flex; align-items: center; gap: var(--sd-space-1); padding: 2px var(--sd-space-2); border-radius: var(--sd-radius-full); font-size: var(--sd-text-xs); font-weight: var(--sd-weight-semibold); letter-spacing: 0.02em; white-space: nowrap; } .sd-badge--primary { background: var(--sd-primary-light); color: var(--sd-primary); } .sd-badge--secondary { background: var(--sd-secondary-light); color: var(--sd-secondary); } .sd-badge--success { background: var(--sd-success-light); color: var(--sd-success); } .sd-badge--warning { background: var(--sd-warning-light); color: var(--sd-warning); } .sd-badge--danger { background: var(--sd-danger-light); color: var(--sd-danger); } .sd-badge--info { background: var(--sd-info-light); color: var(--sd-info); } .sd-badge--neutral { background: var(--sd-surface-3); color: var(--sd-text-secondary); } .sd-badge--solid-primary { background: var(--sd-primary); color: #fff; } .sd-badge--solid-danger { background: var(--sd-danger); color: #fff; } .sd-badge--solid-success { background: var(--sd-success); color: #fff; } .sd-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } /* ─── 15. FORM ELEMENTS ──────────────────────────────────── */ .sd-field { display: flex; flex-direction: column; gap: var(--sd-space-1); } .sd-label { font-size: var(--sd-text-sm); font-weight: var(--sd-weight-medium); color: var(--sd-text-secondary); } .sd-label--required::after { content: ' *'; color: var(--sd-danger); } .sd-input, .sd-select, .sd-textarea { height: 42px; padding: 0 var(--sd-space-4); background: var(--sd-input-bg); border: 1px solid var(--sd-input-border); border-radius: var(--sd-radius-lg); color: var(--sd-text-primary); font-size: var(--sd-text-sm); width: 100%; outline: none; transition: border-color var(--sd-duration-fast) var(--sd-ease), box-shadow var(--sd-duration-fast) var(--sd-ease), background var(--sd-duration-fast) var(--sd-ease); } .sd-input::placeholder, .sd-textarea::placeholder { color: var(--sd-placeholder); } .sd-input:focus, .sd-select:focus, .sd-textarea:focus { border-color: var(--sd-input-focus-border); box-shadow: 0 0 0 3px var(--sd-primary-light); } .sd-input:disabled, .sd-select:disabled { opacity: 0.6; cursor: not-allowed; } .sd-input--error { border-color: var(--sd-danger); } .sd-input--error:focus { box-shadow: 0 0 0 3px var(--sd-danger-light); } .sd-input--sm { height: 34px; font-size: var(--sd-text-xs); } .sd-input--lg { height: 50px; font-size: var(--sd-text-md); } .sd-textarea { height: auto; min-height: 100px; padding: var(--sd-space-3) var(--sd-space-4); resize: vertical; line-height: var(--sd-leading-normal); } .sd-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .sd-input-group { position: relative; display: flex; align-items: center; } .sd-input-group .sd-input { padding-left: 2.75rem; } .sd-input-group .sd-input-group__icon { position: absolute; left: var(--sd-space-3); color: var(--sd-text-muted); pointer-events: none; } .sd-input-group .sd-input-group__suffix { position: absolute; right: var(--sd-space-3); color: var(--sd-text-muted); } .sd-hint { font-size: var(--sd-text-xs); color: var(--sd-text-muted); } .sd-error { font-size: var(--sd-text-xs); color: var(--sd-danger); } /* Checkbox & Radio */ .sd-check, .sd-radio { display: flex; align-items: center; gap: var(--sd-space-2); cursor: pointer; font-size: var(--sd-text-sm); color: var(--sd-text-primary); user-select: none; } .sd-check input[type="checkbox"], .sd-radio input[type="radio"] { display: none; } .sd-check__box { width: 18px; height: 18px; border: 2px solid var(--sd-input-border); border-radius: var(--sd-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--sd-duration-fast) var(--sd-ease); background: var(--sd-input-bg); } .sd-check input:checked ~ .sd-check__box { background: var(--sd-primary); border-color: var(--sd-primary); } .sd-check input:checked ~ .sd-check__box::after { content: ''; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg) translateY(-1px); } .sd-radio__dot { width: 18px; height: 18px; border: 2px solid var(--sd-input-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--sd-duration-fast) var(--sd-ease); background: var(--sd-input-bg); } .sd-radio input:checked ~ .sd-radio__dot { border-color: var(--sd-primary); } .sd-radio input:checked ~ .sd-radio__dot::after { content: ''; width: 8px; height: 8px; background: var(--sd-primary); border-radius: 50%; } /* Toggle switch */ .sd-toggle { display: flex; align-items: center; gap: var(--sd-space-3); cursor: pointer; user-select: none; } .sd-toggle input { display: none; } .sd-toggle__track { width: 44px; height: 24px; background: var(--sd-border-strong); border-radius: var(--sd-radius-full); position: relative; transition: background var(--sd-duration-base) var(--sd-ease); flex-shrink: 0; } .sd-toggle__track::after { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform var(--sd-duration-base) var(--sd-ease-spring); box-shadow: var(--sd-shadow-sm); } .sd-toggle input:checked ~ .sd-toggle__track { background: var(--sd-primary); } .sd-toggle input:checked ~ .sd-toggle__track::after { transform: translateX(20px); } .sd-toggle__label { font-size: var(--sd-text-sm); color: var(--sd-text-primary); } /* ─── 16. TABLE ──────────────────────────────────────────── */ .sd-table-wrap { overflow-x: auto; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-xl); } .sd-table { width: 100%; border-collapse: collapse; font-size: var(--sd-text-sm); } .sd-table thead th { background: var(--sd-surface-2); padding: var(--sd-space-3) var(--sd-space-5); text-align: left; font-size: var(--sd-text-xs); font-weight: var(--sd-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sd-text-muted); border-bottom: 1px solid var(--sd-border); white-space: nowrap; } .sd-table tbody td { padding: var(--sd-space-4) var(--sd-space-5); border-bottom: 1px solid var(--sd-border); color: var(--sd-text-primary); vertical-align: middle; } .sd-table tbody tr:last-child td { border-bottom: none; } .sd-table tbody tr { transition: background var(--sd-duration-fast) var(--sd-ease); } .sd-table tbody tr:hover { background: var(--sd-surface-2); } .sd-table--striped tbody tr:nth-child(even) { background: var(--sd-surface-2); } .sd-table--compact thead th, .sd-table--compact tbody td { padding: var(--sd-space-2) var(--sd-space-4); } /* ─── 17. TABS ───────────────────────────────────────────── */ .sd-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--sd-border); } .sd-tab { padding: var(--sd-space-3) var(--sd-space-5); font-size: var(--sd-text-sm); font-weight: var(--sd-weight-medium); color: var(--sd-text-muted); border: none; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: all var(--sd-duration-fast) var(--sd-ease); white-space: nowrap; } .sd-tab:hover { color: var(--sd-text-primary); } .sd-tab.active { color: var(--sd-primary); border-bottom-color: var(--sd-primary); font-weight: var(--sd-weight-semibold); } .sd-tab-content > * { display: none; } .sd-tab-content > .active { display: block; } /* Pills tabs */ .sd-tabs--pills { border-bottom: none; background: var(--sd-surface-3); padding: var(--sd-space-1); border-radius: var(--sd-radius-lg); gap: var(--sd-space-1); display: inline-flex; } .sd-tabs--pills .sd-tab { border-radius: var(--sd-radius-md); border-bottom: none; margin-bottom: 0; padding: var(--sd-space-2) var(--sd-space-4); } .sd-tabs--pills .sd-tab.active { background: var(--sd-surface); color: var(--sd-primary); box-shadow: var(--sd-shadow-sm); } /* ─── 18. ALERTS ─────────────────────────────────────────── */ .sd-alert { display: flex; gap: var(--sd-space-3); padding: var(--sd-space-4) var(--sd-space-5); border-radius: var(--sd-radius-lg); font-size: var(--sd-text-sm); border: 1px solid; } .sd-alert__icon { flex-shrink: 0; margin-top: 1px; } .sd-alert__body { flex: 1; } .sd-alert__title { font-weight: var(--sd-weight-semibold); margin-bottom: var(--sd-space-1); } .sd-alert__close { flex-shrink: 0; background: none; border: none; cursor: pointer; opacity: 0.5; transition: opacity var(--sd-duration-fast); } .sd-alert__close:hover { opacity: 1; } .sd-alert--info { background: var(--sd-info-light); color: var(--sd-info); border-color: color-mix(in srgb, var(--sd-info) 25%, transparent); } .sd-alert--success { background: var(--sd-success-light); color: var(--sd-success); border-color: color-mix(in srgb, var(--sd-success) 25%, transparent); } .sd-alert--warning { background: var(--sd-warning-light); color: var(--sd-warning); border-color: color-mix(in srgb, var(--sd-warning) 25%, transparent); } .sd-alert--danger { background: var(--sd-danger-light); color: var(--sd-danger); border-color: color-mix(in srgb, var(--sd-danger) 25%, transparent); } /* ─── 19. MODAL ──────────────────────────────────────────── */ .sd-modal-backdrop { position: fixed; inset: 0; background: var(--sd-overlay); z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--sd-space-4); opacity: 0; pointer-events: none; transition: opacity var(--sd-duration-base) var(--sd-ease); backdrop-filter: blur(4px); } .sd-modal-backdrop.open { opacity: 1; pointer-events: all; } .sd-modal { background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-2xl); width: 100%; max-width: 520px; box-shadow: var(--sd-shadow-2xl); transform: translateY(12px) scale(0.98); transition: transform var(--sd-duration-slow) var(--sd-ease-spring); max-height: 90vh; overflow-y: auto; } .sd-modal-backdrop.open .sd-modal { transform: translateY(0) scale(1); } .sd-modal--sm { max-width: 380px; } .sd-modal--lg { max-width: 720px; } .sd-modal--xl { max-width: 960px; } .sd-modal__header { padding: var(--sd-space-6); border-bottom: 1px solid var(--sd-border); display: flex; align-items: center; gap: var(--sd-space-3); } .sd-modal__title { font-size: var(--sd-text-lg); font-weight: var(--sd-weight-semibold); flex: 1; } .sd-modal__close { width: 32px; height: 32px; border-radius: var(--sd-radius-md); border: none; background: transparent; color: var(--sd-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--sd-duration-fast), color var(--sd-duration-fast); } .sd-modal__close:hover { background: var(--sd-surface-3); color: var(--sd-text-primary); } .sd-modal__body { padding: var(--sd-space-6); } .sd-modal__footer { padding: var(--sd-space-5) var(--sd-space-6); border-top: 1px solid var(--sd-border); display: flex; align-items: center; justify-content: flex-end; gap: var(--sd-space-3); } /* ─── 20. DROPDOWN ───────────────────────────────────────── */ .sd-dropdown { position: relative; display: inline-flex; } .sd-dropdown__menu { position: absolute; top: calc(100% + var(--sd-space-2)); right: 0; background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-xl); box-shadow: var(--sd-shadow-xl); min-width: 180px; z-index: 150; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity var(--sd-duration-base) var(--sd-ease), transform var(--sd-duration-base) var(--sd-ease); } .sd-dropdown.open .sd-dropdown__menu { opacity: 1; pointer-events: all; transform: translateY(0); } .sd-dropdown__item { display: flex; align-items: center; gap: var(--sd-space-3); padding: var(--sd-space-3) var(--sd-space-4); font-size: var(--sd-text-sm); color: var(--sd-text-primary); cursor: pointer; transition: background var(--sd-duration-fast) var(--sd-ease); text-decoration: none; width: 100%; border: none; background: none; text-align: left; } .sd-dropdown__item:hover { background: var(--sd-surface-2); } .sd-dropdown__item--danger { color: var(--sd-danger); } .sd-dropdown__item--danger:hover { background: var(--sd-danger-light); } .sd-dropdown__divider { height: 1px; background: var(--sd-border); margin: var(--sd-space-1) 0; } /* ─── 21. TOOLTIP ────────────────────────────────────────── */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--sd-text-primary); color: var(--sd-bg); font-size: var(--sd-text-xs); font-weight: var(--sd-weight-medium); padding: 4px var(--sd-space-2); border-radius: var(--sd-radius-md); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--sd-duration-fast) var(--sd-ease); z-index: 300; } [data-tooltip]:hover::after { opacity: 1; } /* ─── 22. PROGRESS ───────────────────────────────────────── */ .sd-progress { height: 8px; background: var(--sd-surface-3); border-radius: var(--sd-radius-full); overflow: hidden; } .sd-progress__bar { height: 100%; background: var(--sd-primary); border-radius: var(--sd-radius-full); transition: width var(--sd-duration-slow) var(--sd-ease-out); } .sd-progress--sm { height: 4px; } .sd-progress--lg { height: 12px; } /* ─── 23. AVATAR ─────────────────────────────────────────── */ .sd-avatar { width: 40px; height: 40px; border-radius: var(--sd-radius-full); object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--sd-weight-semibold); font-size: var(--sd-text-sm); flex-shrink: 0; background: var(--sd-primary-light); color: var(--sd-primary); } .sd-avatar--sm { width: 28px; height: 28px; font-size: var(--sd-text-xs); } .sd-avatar--lg { width: 52px; height: 52px; font-size: var(--sd-text-md); } .sd-avatar--xl { width: 72px; height: 72px; font-size: var(--sd-text-xl); } .sd-avatar--sq { border-radius: var(--sd-radius-lg); } .sd-avatar-group { display: flex; } .sd-avatar-group .sd-avatar { border: 2px solid var(--sd-surface); margin-left: -8px; } .sd-avatar-group .sd-avatar:first-child { margin-left: 0; } /* ─── 24. DIVIDER ─────────────────────────────────────────── */ .sd-divider { display: flex; align-items: center; gap: var(--sd-space-4); color: var(--sd-text-muted); font-size: var(--sd-text-xs); font-weight: var(--sd-weight-medium); text-transform: uppercase; letter-spacing: 0.06em; } .sd-divider::before, .sd-divider::after { content: ''; flex: 1; height: 1px; background: var(--sd-border); } /* ─── 25. PAGE HEADER ────────────────────────────────────── */ .sd-page-header { margin-bottom: var(--sd-space-6); } .sd-page-header__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sd-space-4); flex-wrap: wrap; } .sd-page-header__title { font-size: var(--sd-text-2xl); font-weight: var(--sd-weight-bold); color: var(--sd-text-primary); line-height: var(--sd-leading-tight); } .sd-page-header__subtitle { font-size: var(--sd-text-sm); color: var(--sd-text-muted); margin-top: var(--sd-space-1); } .sd-page-header__actions { display: flex; align-items: center; gap: var(--sd-space-3); flex-shrink: 0; } /* ─── 26. EMPTY STATE ────────────────────────────────────── */ .sd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sd-space-16) var(--sd-space-8); gap: var(--sd-space-4); color: var(--sd-text-muted); } .sd-empty__icon { width: 56px; height: 56px; border-radius: var(--sd-radius-2xl); background: var(--sd-surface-3); display: flex; align-items: center; justify-content: center; color: var(--sd-text-muted); } .sd-empty__title { font-size: var(--sd-text-lg); font-weight: var(--sd-weight-semibold); color: var(--sd-text-primary); } .sd-empty__desc { font-size: var(--sd-text-sm); max-width: 320px; } /* ─── 27. LOADING / SKELETON ─────────────────────────────── */ .sd-skeleton { background: linear-gradient(90deg, var(--sd-surface-3) 25%, var(--sd-surface-2) 50%, var(--sd-surface-3) 75%); background-size: 200% 100%; animation: sd-shimmer 1.4s ease infinite; border-radius: var(--sd-radius-md); } @keyframes sd-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .sd-spinner { width: 32px; height: 32px; border: 3px solid var(--sd-border); border-top-color: var(--sd-primary); border-radius: 50%; animation: sd-spin 0.7s linear infinite; } .sd-spinner--sm { width: 18px; height: 18px; border-width: 2px; } .sd-spinner--lg { width: 48px; height: 48px; border-width: 4px; } @keyframes sd-spin { to { transform: rotate(360deg); } } /* ─── 28. TOAST ──────────────────────────────────────────── */ .sd-toast-stack { position: fixed; bottom: var(--sd-space-6); right: var(--sd-space-6); z-index: 500; display: flex; flex-direction: column; gap: var(--sd-space-3); max-width: 360px; width: 100%; } .sd-toast { display: flex; align-items: flex-start; gap: var(--sd-space-3); background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-xl); padding: var(--sd-space-4) var(--sd-space-5); box-shadow: var(--sd-shadow-xl); animation: sd-toast-in var(--sd-duration-slow) var(--sd-ease-spring) forwards; } .sd-toast--success { border-left: 3px solid var(--sd-success); } .sd-toast--warning { border-left: 3px solid var(--sd-warning); } .sd-toast--danger { border-left: 3px solid var(--sd-danger); } .sd-toast--info { border-left: 3px solid var(--sd-info); } @keyframes sd-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ─── 29. PAGINATION ─────────────────────────────────────── */ .sd-pagination { display: flex; align-items: center; gap: var(--sd-space-1); } .sd-page-btn { width: 36px; height: 36px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-md); background: var(--sd-surface); color: var(--sd-text-secondary); font-size: var(--sd-text-sm); font-weight: var(--sd-weight-medium); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--sd-duration-fast) var(--sd-ease); text-decoration: none; } .sd-page-btn:hover { background: var(--sd-surface-3); color: var(--sd-text-primary); } .sd-page-btn.active { background: var(--sd-primary); color: #fff; border-color: var(--sd-primary); } .sd-page-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ─── 30. UTILITY ────────────────────────────────────────── */ .sd-hidden { display: none !important; } .sd-visible { display: block !important; } .sd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .sd-pointer { cursor: pointer; } .sd-no-select { user-select: none; } .sd-w-full { width: 100%; } .sd-h-full { height: 100%; } .sd-rounded-full { border-radius: var(--sd-radius-full); } .sd-overflow-hidden { overflow: hidden; } .sd-relative { position: relative; } .sd-absolute { position: absolute; } .sd-z-10 { z-index: 10; } /* Color utility */ .sd-bg-surface { background: var(--sd-surface); } .sd-bg-surface-2 { background: var(--sd-surface-2); } .sd-bg-surface-3 { background: var(--sd-surface-3); } .sd-bg-primary { background: var(--sd-primary); } .sd-bg-primary-light { background: var(--sd-primary-light); } .sd-bg-success-light { background: var(--sd-success-light); } .sd-bg-danger-light { background: var(--sd-danger-light); } .sd-bg-warning-light { background: var(--sd-warning-light); } .sd-border-color { border-color: var(--sd-border); } /* Opacity */ .sd-opacity-50 { opacity: 0.5; } .sd-opacity-75 { opacity: 0.75; } /* Animation utility */ .sd-fade-in { animation: sd-fade-in var(--sd-duration-slow) var(--sd-ease) both; } @keyframes sd-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .sd-slide-up { animation: sd-slide-up var(--sd-duration-slow) var(--sd-ease-spring) both; } @keyframes sd-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ─── 31. MOBILE OVERLAY SIDEBAR ────────────────────────── */ .sd-sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--sd-overlay); z-index: 99; backdrop-filter: blur(2px); } @media (max-width: 1024px) { .sd-sidebar { transform: translateX(-100%); } .sd-sidebar.mobile-open { transform: translateX(0); } .sd-sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity var(--sd-duration-base) var(--sd-ease); } .sd-sidebar.mobile-open ~ .sd-sidebar-overlay { opacity: 1; pointer-events: all; } } /* ─── BARE LAYOUT ──────────────────────────────────────────── Used when noSidebar=true (login, register, forgot password, landing pages). No shell, no margin-left, clean full viewport. ──────────────────────────────────────────────────────────── */ .sd-body--bare { overflow-x: hidden; } .sd-bare-layout { min-height: 100vh; display: flex; flex-direction: column; background: var(--sd-bg); transition: background-color var(--sd-duration-slow) var(--sd-ease); } /* Login / auth centered content */ .sd-content--login { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--sd-space-8) var(--sd-space-4); width: 100%; max-width: none; margin: 0; } /* Generic bare full-width content */ .sd-content--page { flex: 1; padding: var(--sd-space-8) var(--sd-space-4); width: 100%; max-width: none; margin: 0; } /* Generic bare narrow content (e.g. privacy policy without sidebar) */ .sd-content--page-narrow { flex: 1; padding: var(--sd-space-8) var(--sd-space-4); width: 100%; max-width: 960px; margin: 0 auto; } /* ─── 32. PRINT ──────────────────────────────────────────── */ @media print { .sd-sidebar, .sd-topbar, .sd-sidebar-overlay { display: none !important; } .sd-main { margin-left: 0 !important; } .sd-content { padding: 0 !important; } .sd-card { box-shadow: none !important; border: 1px solid #ddd !important; } }