/* ============================================================ ATLANTIS TOKENS — atlantis-tokens.css Version: 1.0.0 ⚠️ VARIABLES ONLY. No classes, no styles. Structure: 1. PALETTE (base tokens) — for defining semantics only 2. SEMANTICS (semantic) — use in components 3. SPACING — spacing values 4. TYPOGRAPHY — font sizes 5. RADIUS — border radii 6. SHADOWS — shadows 7. Z-INDEX — stacking context 8. TRANSITIONS — animations 9. BREAKPOINTS — responsive breakpoints 10. OPACITY — opacity ============================================================ */ :root { /* ---------------------------------------------------------- 1. PALETTE — BASE TOKENS Do not use directly in components. ---------------------------------------------------------- */ /* Gray */ --atl-gray-50: #fafafa; --atl-gray-100: #f0f2f5; --atl-gray-200: #e8eaed; --atl-gray-300: #c4c6cf; --atl-gray-400: #a3a5ae; --atl-gray-500: #737373; --atl-gray-600: #525252; --atl-gray-700: #404753; --atl-gray-800: #262626; --atl-gray-900: #1a1c1e; /* Blue — primary brand */ --atl-blue-50: #edf4ff; --atl-blue-100: #d6e8ff; --atl-blue-200: #b3d0fd; --atl-blue-300: #7ec0fb; --atl-blue-400: #4da3f7; --atl-blue-500: #1a73e8; --atl-blue-600: #005fb0; --atl-blue-700: #004a90; --atl-blue-800: #003870; --atl-blue-900: #002555; /* Green */ --atl-green-50: #f0fdf4; --atl-green-100: #c6f6d5; --atl-green-200: #9ae6b4; --atl-green-300: #68d391; --atl-green-400: #48bb78; --atl-green-500: #38a169; --atl-green-600: #2e7d32; --atl-green-700: #1a472a; --atl-green-800: #14532d; --atl-green-900: #0d3321; /* Red */ --atl-red-50: #fef2f2; --atl-red-100: #fee2e2; --atl-red-200: #fecaca; --atl-red-300: #fca5a5; --atl-red-400: #f87171; --atl-red-500: #ef4444; --atl-red-600: #e53935; --atl-red-700: #b91c1c; --atl-red-800: #991b1b; --atl-red-900: #7f1d1d; /* Yellow / Amber */ --atl-yellow-50: #fffbeb; --atl-yellow-100: #feebc8; --atl-yellow-200: #fde68a; --atl-yellow-300: #fcd34d; --atl-yellow-400: #fbbf24; --atl-yellow-500: #f59e0b; --atl-yellow-600: #d97706; --atl-yellow-700: #ed6c02; --atl-yellow-800: #7b341e; --atl-yellow-900: #451a03; /* Purple */ --atl-purple-100: #f3e8ff; --atl-purple-300: #d8b4fe; --atl-purple-500: #a855f7; --atl-purple-700: #7e22ce; --atl-purple-900: #581c87; /* Teal */ --atl-teal-100: #ccfbf1; --atl-teal-400: #2dd4bf; --atl-teal-500: #14b8a6; --atl-teal-700: #0f766e; /* Pink */ --atl-pink-400: #f472b6; --atl-pink-500: #ec4899; --atl-pink-700: #be185d; /* ---------------------------------------------------------- 2. SEMANTICS — SEMANTIC TOKENS Use only these in components. Edit here for white-label / branding. ---------------------------------------------------------- */ /* Primary */ --atl-color-primary: var(--atl-blue-600); --atl-color-primary-hover: var(--atl-blue-700); --atl-color-primary-active: var(--atl-blue-800); --atl-color-primary-muted: var(--atl-blue-100); --atl-color-primary-subtle: rgba(0, 95, 176, 0.06); --atl-color-primary-subtle-hover: rgba(0, 95, 176, 0.10); --atl-color-primary-glow: rgba(0, 95, 176, 0.25); --atl-color-primary-contrast-text: var(--atl-gray-50); /* Secondary */ --atl-color-secondary: var(--atl-gray-600); --atl-color-secondary-hover: var(--atl-gray-700); --atl-color-secondary-muted: var(--atl-gray-200); --atl-color-secondary-contrast-text: var(--atl-gray-50); /* Background / Surface */ --atl-color-bg: var(--atl-gray-100); --atl-color-bg-secondary: #f8f9fb; --atl-color-bg-tertiary: var(--atl-gray-200); --atl-color-surface: #ffffff; --atl-color-surface-muted: #fcfcfd; --atl-color-surface-hover: var(--atl-gray-100); /* Topbar */ --atl-color-topbar: rgba(240, 242, 245, 0.80); /* Border */ --atl-color-border: var(--atl-gray-300); --atl-color-border-strong: var(--atl-gray-400); --atl-color-border-muted: #f0f0f0; --atl-color-border-focus: var(--atl-blue-600); /* Text */ --atl-color-text: var(--atl-gray-900); --atl-color-text-secondary: var(--atl-gray-700); --atl-color-text-muted: var(--atl-gray-300); --atl-color-text-disabled: var(--atl-gray-400); --atl-color-text-inverse: var(--atl-gray-50); --atl-color-text-link: var(--atl-blue-600); --atl-color-text-link-hover: var(--atl-blue-700); /* Status: Success */ --atl-color-success: var(--atl-green-700); --atl-color-success-bg: var(--atl-green-100); --atl-color-success-border: var(--atl-green-200); --atl-color-success-text: var(--atl-green-600); /* Status: Danger */ --atl-color-danger: var(--atl-red-600); --atl-color-danger-bg: var(--atl-red-50); --atl-color-danger-border: var(--atl-red-200); --atl-color-danger-text: var(--atl-red-700); /* Status: Warning */ --atl-color-warning: var(--atl-yellow-800); --atl-color-warning-bg: var(--atl-yellow-100); --atl-color-warning-border: var(--atl-yellow-200); --atl-color-warning-text: var(--atl-yellow-700); /* Status: Info */ --atl-color-info: var(--atl-blue-800); --atl-color-info-bg: #f0f5ff; --atl-color-info-border: var(--atl-blue-200); --atl-color-info-text: var(--atl-blue-700); /* Notifications */ --atl-color-notif-unread: var(--atl-color-info-bg); --atl-color-notif-hover: #e6eeff; /* Form Controls */ --atl-control-bg: var(--atl-gray-50); --atl-control-bg-hover: var(--atl-gray-100); --atl-control-bg-disabled: var(--atl-gray-200); --atl-control-border: var(--atl-gray-300); --atl-control-border-hover: var(--atl-gray-400); --atl-control-border-active: var(--atl-blue-600); --atl-control-ring: var(--atl-blue-200); --atl-control-ring-strong: var(--atl-blue-400); /* Charts */ --atl-chart-1: var(--atl-blue-500); --atl-chart-2: var(--atl-green-500); --atl-chart-3: var(--atl-purple-500); --atl-chart-4: var(--atl-yellow-500); --atl-chart-5: var(--atl-red-500); --atl-chart-6: var(--atl-blue-300); /* ---------------------------------------------------------- 3. SPACING Use everywhere instead of hardcoded pixels ---------------------------------------------------------- */ --atl-sp-2xs: 4px; /* icons, minimal gaps */ --atl-sp-xs: 8px; /* inline gaps, small elements */ --atl-sp-s: 12px; /* compact components */ --atl-sp-m: 16px; /* standard spacing (80% of cases) */ --atl-sp-l: 20px; /* cards, sections */ --atl-sp-xl: 24px; /* large blocks */ --atl-sp-2xl: 32px; /* page sections */ --atl-sp-3xl: 48px; /* hero, large gaps */ /* ---------------------------------------------------------- 4. TYPOGRAPHY ---------------------------------------------------------- */ --atl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --atl-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; /* Sizes */ --atl-txt-2xs: 11px; /* labels, version strings */ --atl-txt-xs: 12px; /* secondary text, badges */ --atl-txt-s: 13px; /* compact UI, tables */ --atl-txt-m: 14px; /* main interface text */ --atl-txt-l: 16px; /* section subheadings */ --atl-txt-xl: 18px; /* card headings */ --atl-txt-2xl: 24px; /* page headings */ --atl-txt-3xl: 32px; /* dashboard header, hero */ /* Line heights */ --atl-lh-tight: 1.2; --atl-lh-snug: 1.35; --atl-lh-normal: 1.5; --atl-lh-relaxed: 1.65; /* ---------------------------------------------------------- 5. RADIUS ---------------------------------------------------------- */ --atl-r-xs: 4px; /* small: badge, tag, chip */ --atl-r-s: 8px; /* buttons, inputs */ --atl-r-m: 12px; /* menu items, nav items */ --atl-r-l: 16px; /* cards */ --atl-r-xl: 24px; /* modal windows */ --atl-r-pill: 100px; /* pills, toggles */ /* Semantic aliases */ --atl-r-item: var(--atl-r-m); /* list items */ --atl-r-card: var(--atl-r-l); /* cards */ /* ---------------------------------------------------------- 6. SHADOWS ---------------------------------------------------------- */ --atl-shadow-xs: 0 1px 2px rgba(0, 0, 0, .04); --atl-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08); --atl-shadow-md: 0 4px 12px rgba(0, 0, 0, .08); --atl-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12); --atl-shadow-xl: 0 16px 48px rgba(0, 0, 0, .16); /* --- White alpha (used on dark/colored backgrounds) --- */ --atl-white-50: rgba(255, 255, 255, 0.50); --atl-white-70: rgba(255, 255, 255, 0.70); --atl-white-75: rgba(255, 255, 255, 0.75); --atl-white-85: rgba(255, 255, 255, 0.85); --atl-white-full: #ffffff; /* --- Overlay & backdrop --- */ --atl-color-overlay: rgba(0, 0, 0, 0.45); --atl-color-overlay-light: rgba(255, 255, 255, 0.75); --atl-color-overlay-dark: rgba(26, 26, 26, 0.75); /* --- Status indicators --- */ --atl-color-status-online: #22c55e; --atl-color-status-busy: var(--atl-red-500); --atl-color-status-away: var(--atl-yellow-500); /* --- Read receipt (chat) --- */ --atl-color-receipt-read: var(--atl-blue-200); /* --- Chat bubble (outgoing) — overlays on primary background --- */ --atl-bubble-out-text-muted: rgba(255, 255, 255, 0.75); --atl-bubble-out-text-subtle: rgba(255, 255, 255, 0.70); --atl-bubble-out-accent: rgba(255, 255, 255, 0.85); --atl-bubble-out-divider: rgba(255, 255, 255, 0.50); --atl-bubble-out-bg-quote: rgba(255, 255, 255, 0.12); --atl-bubble-in-bg-quote: rgba(0, 95, 176, 0.07); /* --- Messenger brand colors (external, not rebrandable) --- */ --atl-channel-tg: #2CA5E0; --atl-channel-wa: #25D366; --atl-channel-vk: #4C75A3; --atl-channel-ig: #E1306C; --atl-channel-fb: #1877F2; /* --- Danger glow (button shadow) --- */ --atl-color-danger-glow: rgba(229, 57, 53, 0.30); /* --- Nav active badge on colored background --- */ --atl-nav-badge-active-bg: rgba(255, 255, 255, 0.25); --atl-nav-badge-active-text: var(--atl-white-full); /* ---------------------------------------------------------- 7. Z-INDEX Unified stacking system. Never write z-index manually. ---------------------------------------------------------- */ --atl-z-below: -1; /* background elements */ --atl-z-base: 0; /* static elements */ --atl-z-raised: 10; /* cards, elevated elements */ --atl-z-sticky: 100; /* sticky headers, columns */ --atl-z-topbar: 200; /* top navigation bar */ --atl-z-sidebar: 300; /* sidebar overlay (mobile) */ --atl-z-dropdown: 400; /* dropdown menus */ --atl-z-tooltip: 500; /* tooltips */ --atl-z-modal: 600; /* modal backdrop */ --atl-z-modal-content: 610; /* modal content */ --atl-z-toast: 700; /* notifications above everything */ /* ---------------------------------------------------------- 8. TRANSITIONS Use instead of hardcoded values in transition ---------------------------------------------------------- */ --atl-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --atl-ease-in: cubic-bezier(0.4, 0, 1, 1); --atl-ease-out: cubic-bezier(0, 0, 0.2, 1); --atl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --atl-transition-fast: 150ms var(--atl-ease-default); --atl-transition-normal: 220ms var(--atl-ease-default); --atl-transition-slow: 350ms var(--atl-ease-default); /* Semantic aliases */ --atl-transition-color: color var(--atl-transition-fast), background-color var(--atl-transition-fast), border-color var(--atl-transition-fast); --atl-transition-shadow: box-shadow var(--atl-transition-normal); --atl-transition-transform: transform var(--atl-transition-normal); /* ---------------------------------------------------------- 9. BREAKPOINTS Use in media queries: @media (min-width: var(--atl-bp-md)) Note: CSS custom properties do not work in media queries directly. Values are documented as reference. Use numbers in media queries. xs: < 480px — phone portrait sm: 480px — phone landscape md: 768px — tablet lg: 1024px — small desktop / tablet landscape xl: 1280px — desktop 2xl: 1536px — wide screen ---------------------------------------------------------- */ --atl-bp-xs: 480px; --atl-bp-sm: 480px; --atl-bp-md: 768px; --atl-bp-lg: 1024px; --atl-bp-xl: 1280px; --atl-bp-2xl: 1536px; /* ---------------------------------------------------------- 10. OPACITY ---------------------------------------------------------- */ --atl-opacity-disabled: 0.4; --atl-opacity-hover: 0.85; --atl-opacity-muted: 0.6; } /* Tells the browser which palette is active so NATIVE UI it draws itself (page scrollbar, select/date-picker popups, form control chrome) follows the theme instead of defaulting to light and flashing white in dark mode. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ---------------------------------------------------------- DARK THEME Activation: data-theme="dark" on or ---------------------------------------------------------- */ [data-theme="dark"] { --atl-gray-50: #0f0f0f; --atl-gray-100: #1a1a1a; --atl-gray-200: #262626; --atl-gray-300: #333333; --atl-gray-400: #4d4d4d; --atl-gray-500: #6b6b6b; --atl-gray-600: #8c8c8c; --atl-gray-700: #b3b3b3; --atl-gray-800: #d6d6d6; --atl-gray-900: #f0f0f0; --atl-color-bg: var(--atl-gray-100); --atl-color-bg-secondary: var(--atl-gray-200); --atl-color-bg-tertiary: var(--atl-gray-300); --atl-color-surface: var(--atl-gray-200); --atl-color-surface-muted: var(--atl-gray-100); --atl-color-surface-hover: var(--atl-gray-300); --atl-color-topbar: rgba(26, 26, 26, 0.85); --atl-color-border: var(--atl-gray-400); --atl-color-border-strong: var(--atl-gray-500); --atl-color-border-muted: var(--atl-gray-300); --atl-color-border-focus: var(--atl-blue-400); --atl-color-text: var(--atl-gray-900); --atl-color-text-secondary: var(--atl-gray-700); --atl-color-text-muted: var(--atl-gray-600); --atl-color-text-disabled: var(--atl-gray-500); --atl-color-primary: var(--atl-blue-500); --atl-color-primary-hover: var(--atl-blue-400); --atl-color-primary-muted: var(--atl-blue-800); --atl-color-primary-subtle: rgba(26, 115, 232, 0.12); --atl-color-primary-glow: rgba(26, 115, 232, 0.30); --atl-control-bg: var(--atl-gray-200); --atl-control-bg-hover: var(--atl-gray-300); --atl-control-bg-disabled: var(--atl-gray-100); --atl-control-border: var(--atl-gray-400); --atl-color-success-bg: rgba(56, 161, 105, 0.15); --atl-color-danger-bg: rgba(229, 57, 53, 0.15); --atl-color-warning-bg: rgba(237, 108, 2, 0.15); --atl-color-info-bg: rgba(0, 95, 176, 0.15); --atl-shadow-xs: 0 1px 2px rgba(0, 0, 0, .20); --atl-shadow-sm: 0 1px 3px rgba(0, 0, 0, .25); --atl-shadow-md: 0 4px 12px rgba(0, 0, 0, .30); --atl-shadow-lg: 0 8px 32px rgba(0, 0, 0, .40); --atl-shadow-xl: 0 16px 48px rgba(0, 0, 0, .50); } /* ============================================================ STACK — primitives/stack.css Vertical stack. Main primitive of the system. Use everywhere instead of margin-bottom / margin-top ============================================================ */ .atl-stack > * + * { margin-top: var(--atl-sp-m); } .atl-stack--2xs > * + * { margin-top: var(--atl-sp-2xs); } .atl-stack--xs > * + * { margin-top: var(--atl-sp-xs); } .atl-stack--s > * + * { margin-top: var(--atl-sp-s); } .atl-stack--l > * + * { margin-top: var(--atl-sp-l); } .atl-stack--xl > * + * { margin-top: var(--atl-sp-xl); } .atl-stack--2xl > * + * { margin-top: var(--atl-sp-2xl); } .atl-stack--3xl > * + * { margin-top: var(--atl-sp-3xl); } /* ============================================================ FLEX — primitives/flex.css ============================================================ */ .atl-flex { display: flex; align-items: center; } .atl-flex--col { flex-direction: column; } .atl-flex--center { justify-content: center; } .atl-flex--between { justify-content: space-between; } .atl-flex--around { justify-content: space-around; } .atl-flex--end { justify-content: flex-end; } .atl-flex--start { justify-content: flex-start; } .atl-flex--wrap { flex-wrap: wrap; } .atl-flex--grow { flex: 1; min-width: 0; } .atl-flex--shrink0 { flex-shrink: 0; } .atl-flex--align-start { align-items: flex-start; } .atl-flex--align-end { align-items: flex-end; } .atl-flex--align-stretch { align-items: stretch; } /* ============================================================ GRID — primitives/grid.css ============================================================ */ .atl-grid { display: grid; gap: var(--atl-sp-m); } .atl-grid--2 { grid-template-columns: repeat(2, 1fr); } .atl-grid--3 { grid-template-columns: repeat(3, 1fr); } .atl-grid--4 { grid-template-columns: repeat(4, 1fr); } .atl-grid--6 { grid-template-columns: repeat(6, 1fr); } /* Adaptive grids — recommended for dashboards */ .atl-grid--auto-xs { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .atl-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .atl-grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .atl-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .atl-grid--auto-xl { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } /* Gap modifiers */ .atl-grid--gap-xs { gap: var(--atl-sp-xs); } .atl-grid--gap-s { gap: var(--atl-sp-s); } .atl-grid--gap-l { gap: var(--atl-sp-l); } .atl-grid--gap-xl { gap: var(--atl-sp-xl); } /* Adaptive breakpoints (768px = md) */ @media (max-width: 768px) { .atl-grid--2, .atl-grid--3, .atl-grid--4 { grid-template-columns: 1fr; } } @media (min-width: 769px) and (max-width: 1024px) { .atl-grid--4 { grid-template-columns: repeat(2, 1fr); } .atl-grid--3 { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ CLUSTER — primitives/cluster.css Horizontal group with auto-wrap. For: chips, tags, action buttons, icons ============================================================ */ .atl-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--atl-sp-xs); } .atl-cluster--2xs { gap: var(--atl-sp-2xs); } .atl-cluster--s { gap: var(--atl-sp-s); } .atl-cluster--m { gap: var(--atl-sp-m); } .atl-cluster--l { gap: var(--atl-sp-l); } .atl-cluster--nowrap { flex-wrap: nowrap; } .atl-cluster--end { justify-content: flex-end; } .atl-cluster--center { justify-content: center; } .atl-cluster--between { justify-content: space-between; } /* ============================================================ BOX — primitives/box.css Padding container. ============================================================ */ .atl-box { padding: var(--atl-sp-m); } .atl-box--2xs { padding: var(--atl-sp-2xs); } .atl-box--xs { padding: var(--atl-sp-xs); } .atl-box--s { padding: var(--atl-sp-s); } .atl-box--l { padding: var(--atl-sp-l); } .atl-box--xl { padding: var(--atl-sp-xl); } .atl-box--2xl { padding: var(--atl-sp-2xl); } /* Horizontal / vertical */ .atl-box--x { padding-inline: var(--atl-sp-m); } .atl-box--y { padding-block: var(--atl-sp-m); } .atl-box--x-l { padding-inline: var(--atl-sp-l); } .atl-box--x-xl { padding-inline: var(--atl-sp-xl); } .atl-box--y-s { padding-block: var(--atl-sp-s); } .atl-box--y-xs { padding-block: var(--atl-sp-xs); } /* ============================================================ TEXT — primitives/text.css ============================================================ */ /* --- Sizes --- */ .atl-text--2xs { font-size: var(--atl-txt-2xs); } .atl-text--xs { font-size: var(--atl-txt-xs); } .atl-text--s { font-size: var(--atl-txt-s); } .atl-text--m { font-size: var(--atl-txt-m); } .atl-text--l { font-size: var(--atl-txt-l); } .atl-text--xl { font-size: var(--atl-txt-xl); } .atl-text--2xl { font-size: var(--atl-txt-2xl); } /* --- Color --- */ .atl-text--muted { color: var(--atl-color-text-muted); } .atl-text--secondary { color: var(--atl-color-text-secondary); } .atl-text--primary { color: var(--atl-color-primary); } .atl-text--inverse { color: var(--atl-color-text-inverse); } .atl-text--success { color: var(--atl-color-success); } .atl-text--danger { color: var(--atl-color-danger); } .atl-text--warning { color: var(--atl-color-warning); } .atl-text--info { color: var(--atl-color-info); } /* --- Weight --- */ .atl-text--bold { font-weight: 700; } .atl-text--semibold { font-weight: 600; } .atl-text--medium { font-weight: 500; } .atl-text--regular { font-weight: 400; } /* --- Behavior --- */ .atl-text--truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atl-text--nowrap { white-space: nowrap; } .atl-text--break { word-break: break-word; } .atl-text--center { text-align: center; } .atl-text--right { text-align: right; } .atl-text--upper { text-transform: uppercase; letter-spacing: 0.05em; } /* --- Monospace --- */ .atl-text--mono { font-family: var(--atl-font-mono); } /* --- Headings --- */ .atl-heading--1 { font-size: var(--atl-txt-3xl); font-weight: 700; line-height: var(--atl-lh-tight); margin: 0; } .atl-heading--2 { font-size: var(--atl-txt-2xl); font-weight: 700; line-height: var(--atl-lh-tight); margin: 0; } .atl-heading--3 { font-size: var(--atl-txt-xl); font-weight: 700; line-height: var(--atl-lh-snug); margin: 0; } .atl-heading--4 { font-size: var(--atl-txt-l); font-weight: 600; line-height: var(--atl-lh-snug); margin: 0; } .atl-heading--5 { font-size: var(--atl-txt-m); font-weight: 600; line-height: var(--atl-lh-normal); margin: 0; } /* --- Inline icon (SVG sprite) --- */ /* */ svg.atl-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; flex-shrink: 0; } svg.atl-icon--2xs { width: 12px; height: 12px; } svg.atl-icon--xs { width: 14px; height: 14px; } svg.atl-icon-sm { width: 16px; height: 16px; } svg.atl-icon-md { width: 20px; height: 20px; } svg.atl-icon-lg { width: 24px; height: 24px; } svg.atl-icon-xl { width: 32px; height: 32px; } /* ============================================================ BUTTON — components/button.css ============================================================ */ /* --- Base button --- */ .atl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--atl-sp-xs); height: 40px; padding: 0 var(--atl-sp-l); border-radius: var(--atl-r-s); font-size: var(--atl-txt-s); font-weight: 600; font-family: var(--atl-font-sans); cursor: pointer; transition: var(--atl-transition-color), var(--atl-transition-shadow); border: 1px solid transparent; text-decoration: none; white-space: nowrap; user-select: none; line-height: 1; } /* --- Variants --- */ .atl-btn--primary { background: var(--atl-color-primary); color: var(--atl-color-primary-contrast-text); border-color: var(--atl-color-primary); } .atl-btn--primary:hover { background: var(--atl-color-primary-hover); border-color: var(--atl-color-primary-hover); box-shadow: 0 4px 12px var(--atl-color-primary-glow); } .atl-btn--primary:active { background: var(--atl-color-primary-active); } .atl-btn--ghost { background: transparent; color: var(--atl-color-primary); border-color: var(--atl-color-primary); } .atl-btn--ghost:hover { background: var(--atl-color-primary-subtle); } .atl-btn--ghost:active { background: var(--atl-color-primary-subtle-hover); } .atl-btn--secondary { background: var(--atl-color-surface); color: var(--atl-color-text-secondary); border-color: var(--atl-color-border); } .atl-btn--secondary:hover { border-color: var(--atl-color-border-strong); color: var(--atl-color-text); background: var(--atl-color-surface-hover); } .atl-btn--danger { background: var(--atl-color-danger); color: var(--atl-white-full); border-color: var(--atl-color-danger); } .atl-btn--danger:hover { background: var(--atl-color-danger-text); border-color: var(--atl-color-danger-text); box-shadow: 0 4px 12px var(--atl-color-danger-glow); } .atl-btn--success { background: var(--atl-color-success); color: var(--atl-white-full); border-color: var(--atl-color-success); } .atl-btn--success:hover { opacity: var(--atl-opacity-hover); } .atl-btn--text { background: transparent; color: var(--atl-color-primary); border-color: transparent; padding-inline: var(--atl-sp-xs); } .atl-btn--text:hover { background: var(--atl-color-primary-subtle); } /* --- Sizes --- */ .atl-btn--xs { height: 26px; padding: 0 var(--atl-sp-xs); font-size: var(--atl-txt-2xs); } .atl-btn--sm { height: 32px; padding: 0 var(--atl-sp-m); font-size: var(--atl-txt-xs); } .atl-btn--lg { height: 48px; padding: 0 var(--atl-sp-2xl); font-size: var(--atl-txt-m); } .atl-btn--xl { height: 56px; padding: 0 var(--atl-sp-3xl); font-size: var(--atl-txt-l); } /* --- Modifiers --- */ .atl-btn--pill { border-radius: var(--atl-r-pill); } .atl-btn--block { width: 100%; } .atl-btn--square { padding: 0; width: 40px; } .atl-btn--square.atl-btn--sm { width: 32px; } .atl-btn--square.atl-btn--lg { width: 48px; } /* --- States --- */ .atl-btn:disabled, .atl-btn.atl-disabled { opacity: var(--atl-opacity-disabled); cursor: not-allowed; pointer-events: none; } .atl-btn.atl-loading { position: relative; color: transparent; pointer-events: none; } .atl-btn.atl-loading::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: atl-spin 0.65s linear infinite; color: inherit; } .atl-btn--primary.atl-loading::after { border-color: var(--atl-white-50); border-top-color: transparent; } /* --- Icon button --- */ .atl-icon-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--atl-color-text-muted); cursor: pointer; transition: var(--atl-transition-color); background: transparent; border: none; flex-shrink: 0; } .atl-icon-btn:hover { background: var(--atl-color-primary-subtle); color: var(--atl-color-primary); } .atl-icon-btn--sm { width: 28px; height: 28px; } .atl-icon-btn--lg { width: 44px; height: 44px; } .atl-icon-btn--square { border-radius: var(--atl-r-s); } /* --- Action button (in topbar / inline) --- */ .atl-action { display: inline-flex; align-items: center; gap: var(--atl-sp-xs); padding: var(--atl-sp-xs) var(--atl-sp-m); border-radius: var(--atl-r-pill); border: 1px solid var(--atl-color-border); font-size: var(--atl-txt-s); font-weight: 500; font-family: var(--atl-font-sans); color: var(--atl-color-text-secondary); background: var(--atl-color-surface); cursor: pointer; transition: var(--atl-transition-color); text-decoration: none; white-space: nowrap; } .atl-action:hover { border-color: var(--atl-color-primary); color: var(--atl-color-primary); } .atl-action--primary { border-color: var(--atl-color-primary); color: var(--atl-color-primary); } .atl-action--primary:hover { background: var(--atl-color-primary); color: var(--atl-color-primary-contrast-text); } /* --- Spinner keyframe (shared) --- */ @keyframes atl-spin { to { transform: rotate(360deg); } } /* ============================================================ INPUT — components/input.css Text input and wrappers. Forms (select, textarea, checkbox, radio) — in form.css ============================================================ */ .atl-input { display: block; width: 100%; height: 40px; padding: 0 var(--atl-sp-m); border: 1px solid var(--atl-control-border); border-radius: var(--atl-r-s); font-size: var(--atl-txt-s); font-family: var(--atl-font-sans); color: var(--atl-color-text); background: var(--atl-control-bg); outline: none; transition: var(--atl-transition-color), var(--atl-transition-shadow); } .atl-input:hover { border-color: var(--atl-control-border-hover); } .atl-input:focus { border-color: var(--atl-control-border-active); box-shadow: 0 0 0 3px var(--atl-control-ring); background: var(--atl-color-surface); } .atl-input::placeholder { color: var(--atl-color-text-muted); } .atl-input:disabled { background: var(--atl-control-bg-disabled); opacity: var(--atl-opacity-disabled); cursor: not-allowed; } /* --- Variants --- */ .atl-input--error { border-color: var(--atl-color-danger); } .atl-input--error:focus { box-shadow: 0 0 0 3px var(--atl-color-danger-border); } .atl-input--success { border-color: var(--atl-color-success); } .atl-input--success:focus { box-shadow: 0 0 0 3px var(--atl-color-success-border); } /* --- Sizes --- */ .atl-input--sm { height: 32px; font-size: var(--atl-txt-xs); padding: 0 var(--atl-sp-s); } .atl-input--lg { height: 48px; font-size: var(--atl-txt-m); padding: 0 var(--atl-sp-l); } /* --- Modifiers --- */ .atl-input--pill { border-radius: var(--atl-r-pill); } /* --- Wrapper with icon(s) --- */ .atl-input-wrap { position: relative; display: flex; align-items: center; } .atl-input-wrap .atl-icon { position: absolute; left: var(--atl-sp-m); color: var(--atl-color-text-muted); pointer-events: none; } .atl-input-wrap .atl-icon--right { left: auto; right: var(--atl-sp-m); pointer-events: auto; cursor: pointer; } .atl-input-wrap .atl-input { padding-left: 36px; } .atl-input-wrap .atl-input--icon-right { padding-right: 36px; } /* Icon on both sides */ .atl-input-wrap .atl-input--has-both { padding-left: 36px; padding-right: 36px; } /* --- Error message / hint --- */ .atl-field-hint { font-size: var(--atl-txt-xs); color: var(--atl-color-text-muted); margin-top: var(--atl-sp-2xs); } .atl-field-hint--error { color: var(--atl-color-danger-text); } /* --- Field label --- */ .atl-field-label { display: block; font-size: var(--atl-txt-xs); font-weight: 600; color: var(--atl-color-text-secondary); margin-bottom: var(--atl-sp-xs); } .atl-field-label--required::after { content: ' *'; color: var(--atl-color-danger); } /* --- Field group --- */ .atl-field { display: flex; flex-direction: column; } /* --- Input group (button + input) --- */ .atl-input-group { display: flex; align-items: stretch; } .atl-input-group .atl-input { border-radius: var(--atl-r-s) 0 0 var(--atl-r-s); flex: 1; border-right: none; } .atl-input-group .atl-btn { border-radius: 0 var(--atl-r-s) var(--atl-r-s) 0; flex-shrink: 0; } .atl-input-group .atl-input:focus { position: relative; z-index: 1; } /* ============================================================ FORM — components/form.css Select, Textarea, Checkbox, Radio ============================================================ */ /* --- Select --- */ .atl-select { display: block; width: 100%; height: 40px; padding: 0 var(--atl-sp-2xl) 0 var(--atl-sp-m); border: 1px solid var(--atl-control-border); border-radius: var(--atl-r-s); font-size: var(--atl-txt-s); font-family: var(--atl-font-sans); color: var(--atl-color-text); background: var(--atl-control-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a3a5ae' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; appearance: none; outline: none; cursor: pointer; transition: var(--atl-transition-color), var(--atl-transition-shadow); } .atl-select:hover { border-color: var(--atl-control-border-hover); } .atl-select:focus { border-color: var(--atl-control-border-active); box-shadow: 0 0 0 3px var(--atl-control-ring); } .atl-select:disabled { background-color: var(--atl-control-bg-disabled); opacity: var(--atl-opacity-disabled); cursor: not-allowed; } .atl-select--sm { height: 32px; font-size: var(--atl-txt-xs); } .atl-select--lg { height: 48px; font-size: var(--atl-txt-m); } /* --- Textarea --- */ .atl-textarea { display: block; width: 100%; min-height: 100px; padding: var(--atl-sp-s) var(--atl-sp-m); border: 1px solid var(--atl-control-border); border-radius: var(--atl-r-s); font-size: var(--atl-txt-s); font-family: var(--atl-font-sans); color: var(--atl-color-text); background: var(--atl-control-bg); outline: none; resize: vertical; line-height: var(--atl-lh-normal); transition: var(--atl-transition-color), var(--atl-transition-shadow); } .atl-textarea:hover { border-color: var(--atl-control-border-hover); } .atl-textarea:focus { border-color: var(--atl-control-border-active); box-shadow: 0 0 0 3px var(--atl-control-ring); background: var(--atl-color-surface); } .atl-textarea::placeholder { color: var(--atl-color-text-muted); } .atl-textarea:disabled { background: var(--atl-control-bg-disabled); opacity: var(--atl-opacity-disabled); cursor: not-allowed; resize: none; } .atl-textarea--no-resize { resize: none; } /* --- Checkbox & Radio (custom) --- */ /* Hide native element but keep it accessible */ .atl-check-input, .atl-radio-input { position: absolute; opacity: 0; width: 0; height: 0; } .atl-check-label, .atl-radio-label { display: inline-flex; align-items: flex-start; gap: var(--atl-sp-xs); font-size: var(--atl-txt-s); color: var(--atl-color-text); cursor: pointer; line-height: var(--atl-lh-normal); } /* Visual element */ .atl-check-box, .atl-radio-box { width: 18px; height: 18px; border: 2px solid var(--atl-control-border); background: var(--atl-control-bg); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: var(--atl-transition-color); } .atl-check-box { border-radius: var(--atl-r-xs); } .atl-radio-box { border-radius: 50%; } /* Hover */ .atl-check-label:hover .atl-check-box, .atl-radio-label:hover .atl-radio-box { border-color: var(--atl-color-primary); } /* Checked state */ .atl-check-input:checked + .atl-check-label .atl-check-box, .atl-check-input:checked ~ .atl-check-box { background: var(--atl-color-primary); border-color: var(--atl-color-primary); } .atl-check-input:checked + .atl-check-label .atl-check-box::after, .atl-check-box--checked::after { content: ''; width: 10px; height: 6px; border-left: 2px solid var(--atl-white-full); border-bottom: 2px solid var(--atl-white-full); transform: rotate(-45deg) translateY(-1px); } .atl-radio-input:checked + .atl-radio-label .atl-radio-box { border-color: var(--atl-color-primary); } .atl-radio-input:checked + .atl-radio-label .atl-radio-box::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--atl-color-primary); } /* Focus ring */ .atl-check-input:focus-visible + .atl-check-label .atl-check-box, .atl-radio-input:focus-visible + .atl-radio-label .atl-radio-box { box-shadow: 0 0 0 3px var(--atl-control-ring); } /* Disabled */ .atl-check-input:disabled + .atl-check-label, .atl-radio-input:disabled + .atl-radio-label { opacity: var(--atl-opacity-disabled); cursor: not-allowed; } /* --- Fieldset / field group --- */ .atl-fieldset { border: 1px solid var(--atl-color-border-muted); border-radius: var(--atl-r-m); padding: var(--atl-sp-l); margin: 0; } .atl-fieldset legend { font-size: var(--atl-txt-xs); font-weight: 700; color: var(--atl-color-text-secondary); padding: 0 var(--atl-sp-xs); } /* ============================================================ CARD — components/card.css ============================================================ */ /* --- Base card --- */ .atl-card { background: var(--atl-color-surface); border-radius: var(--atl-r-card); border: 1px solid var(--atl-color-border-muted); box-shadow: var(--atl-shadow-sm); } .atl-card--flat { box-shadow: none; } .atl-card--raised { box-shadow: var(--atl-shadow-md); } .atl-card--bordered { border-color: var(--atl-color-border); } .atl-card--hover { transition: box-shadow var(--atl-transition-normal), transform var(--atl-transition-normal); cursor: pointer; } .atl-card--hover:hover { box-shadow: var(--atl-shadow-md); transform: translateY(-2px); } /* --- Stat card --- */ .atl-stat-card { padding: var(--atl-sp-xl); } .atl-stat-card .atl-label { font-size: var(--atl-txt-s); color: var(--atl-color-text-secondary); font-weight: 500; margin-bottom: var(--atl-sp-xs); } .atl-stat-card .atl-value { font-size: var(--atl-txt-3xl); font-weight: 700; color: var(--atl-color-text); line-height: 1; } .atl-stat-trend { display: flex; align-items: center; gap: var(--atl-sp-2xs); margin-top: var(--atl-sp-xs); font-size: var(--atl-txt-xs); font-weight: 700; } .atl-stat-trend--up { color: var(--atl-color-success-text); } .atl-stat-trend--down { color: var(--atl-color-danger-text); } .atl-stat-trend--neutral { color: var(--atl-color-primary); } /* --- Data card (with header and table) --- */ .atl-data-card { overflow: hidden; } .atl-data-card-header { padding: var(--atl-sp-m) var(--atl-sp-xl); display: flex; align-items: center; justify-content: space-between; gap: var(--atl-sp-m); border-bottom: 1px solid var(--atl-color-border-muted); flex-wrap: wrap; } .atl-data-card-title { font-size: var(--atl-txt-xl); font-weight: 700; margin: 0; color: var(--atl-color-text); } .atl-data-card-footer { padding: var(--atl-sp-m) var(--atl-sp-xl); border-top: 1px solid var(--atl-color-border-muted); display: flex; align-items: center; justify-content: space-between; gap: var(--atl-sp-m); } /* --- Alert card (info block) --- */ .atl-alert { display: flex; gap: var(--atl-sp-m); padding: var(--atl-sp-m) var(--atl-sp-l); border-radius: var(--atl-r-m); border: 1px solid; font-size: var(--atl-txt-s); } .atl-alert--info { background: var(--atl-color-info-bg); border-color: var(--atl-color-info-border); color: var(--atl-color-info-text); } .atl-alert--success { background: var(--atl-color-success-bg); border-color: var(--atl-color-success-border); color: var(--atl-color-success-text); } .atl-alert--warning { background: var(--atl-color-warning-bg); border-color: var(--atl-color-warning-border); color: var(--atl-color-warning-text); } .atl-alert--danger { background: var(--atl-color-danger-bg); border-color: var(--atl-color-danger-border); color: var(--atl-color-danger-text); } .atl-alert-icon { flex-shrink: 0; margin-top: 1px; } .atl-alert-body { flex: 1; min-width: 0; } .atl-alert-title { font-weight: 700; margin-bottom: var(--atl-sp-2xs); } /* ============================================================ TABLE — components/table.css ============================================================ */ .atl-m3-table { width: 100%; border-collapse: collapse; } .atl-m3-table th { text-align: left; padding: var(--atl-sp-xs) var(--atl-sp-xl); background: var(--atl-color-bg-secondary); font-size: var(--atl-txt-xs); font-weight: 700; color: var(--atl-color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; border-bottom: 1px solid var(--atl-color-border); position: sticky; top: 0; z-index: var(--atl-z-sticky); } .atl-m3-table th.atl-sortable { cursor: pointer; user-select: none; } .atl-m3-table th.atl-sortable:hover { background: var(--atl-color-bg-tertiary); color: var(--atl-color-text); } .atl-m3-table th.atl-sort-asc::after { content: ' ↑'; } .atl-m3-table th.atl-sort-desc::after { content: ' ↓'; } .atl-m3-table td { padding: var(--atl-sp-m) var(--atl-sp-xl); border-top: 1px solid var(--atl-color-border-muted); color: var(--atl-color-text); font-size: var(--atl-txt-s); vertical-align: middle; } .atl-m3-table tr:hover td { background: var(--atl-color-surface-hover); } .atl-m3-table tr.atl-selected td { background: var(--atl-color-primary-subtle); } /* --- Compact variant --- */ .atl-m3-table--sm th, .atl-m3-table--sm td { padding: var(--atl-sp-xs) var(--atl-sp-m); } /* --- Without striping --- */ .atl-m3-table--bordered td { border: 1px solid var(--atl-color-border-muted); } /* --- Cells --- */ .atl-td-id { color: var(--atl-color-primary); font-weight: 700; } .atl-td-muted { color: var(--atl-color-text-muted); } .atl-td-nowrap { white-space: nowrap; } .atl-td-actions { width: 1px; white-space: nowrap; } .atl-td-center { text-align: center; } .atl-td-right { text-align: right; } /* --- State: no data --- */ .atl-table-empty { padding: var(--atl-sp-3xl) var(--atl-sp-xl); text-align: center; color: var(--atl-color-text-muted); font-size: var(--atl-txt-s); } /* --- Clickable row --- */ .atl-clickable { cursor: pointer; } /* ============================================================ BADGE — components/badge.css ============================================================ */ /* --- Numeric badge (for counters) --- */ .atl-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--atl-sp-2xs); border-radius: var(--atl-r-pill); font-size: var(--atl-txt-2xs); font-weight: 700; line-height: 1; background: var(--atl-color-primary); color: var(--atl-color-primary-contrast-text); flex-shrink: 0; } .atl-badge--sm { min-width: 16px; height: 16px; font-size: 10px; } .atl-badge--lg { min-width: 24px; height: 24px; font-size: var(--atl-txt-xs); } .atl-badge--muted { background: var(--atl-color-primary-muted); color: var(--atl-color-primary); } .atl-badge--danger { background: var(--atl-color-danger); color: var(--atl-white-full); } .atl-badge--success { background: var(--atl-color-success); color: var(--atl-white-full); } .atl-badge--warning { background: var(--atl-color-warning); color: var(--atl-white-full); } .atl-badge--neutral { background: var(--atl-color-bg-tertiary); color: var(--atl-color-text-secondary); } /* --- Dot indicator (without number) --- */ .atl-badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 50%; } /* --- Status pill (text) --- */ .atl-status-pill { display: inline-flex; align-items: center; gap: var(--atl-sp-2xs); padding: 3px var(--atl-sp-xs); border-radius: var(--atl-r-pill); font-size: var(--atl-txt-2xs); font-weight: 600; white-space: nowrap; line-height: 1; } .atl-status-done { background: var(--atl-color-success-bg); color: var(--atl-color-success); } .atl-status-danger { background: var(--atl-color-danger-bg); color: var(--atl-color-danger); } .atl-status-warn { background: var(--atl-color-warning-bg); color: var(--atl-color-warning); } .atl-status-info { background: var(--atl-color-info-bg); color: var(--atl-color-info); } .atl-status-muted { background: var(--atl-color-bg-secondary); color: var(--atl-color-text-secondary); } .atl-status-process { background: var(--atl-color-primary-muted); color: var(--atl-color-primary); } /* --- Tag / chip (with dot) --- */ .atl-tag { display: inline-flex; align-items: center; gap: var(--atl-sp-2xs); padding: var(--atl-sp-2xs) var(--atl-sp-xs); border-radius: var(--atl-r-xs); font-size: var(--atl-txt-xs); font-weight: 500; background: var(--atl-color-bg-tertiary); color: var(--atl-color-text-secondary); border: 1px solid var(--atl-color-border-muted); } /* ============================================================ AVATAR — components/avatar.css ============================================================ */ .atl-user-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--atl-color-primary); color: var(--atl-color-primary-contrast-text); font-weight: 700; flex-shrink: 0; letter-spacing: 0.3px; overflow: hidden; position: relative; /* Default size */ width: 38px; height: 38px; font-size: var(--atl-txt-xs); } .atl-user-avatar img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } /* --- Sizes --- */ .atl-user-avatar--xs { width: 22px; height: 22px; font-size: 9px; } .atl-user-avatar--sm { width: 28px; height: 28px; font-size: 10px; } .atl-user-avatar--md { width: 38px; height: 38px; font-size: var(--atl-txt-xs); } .atl-user-avatar--lg { width: 52px; height: 52px; font-size: var(--atl-txt-m); } .atl-user-avatar--xl { width: 72px; height: 72px; font-size: var(--atl-txt-xl); } .atl-user-avatar--2xl { width: 96px; height: 96px; font-size: var(--atl-txt-2xl); } /* --- Shape: rounded square --- */ .atl-user-avatar--square { border-radius: var(--atl-r-m); } /* --- Status indicator --- */ .atl-avatar-wrap { position: relative; display: inline-flex; } .atl-avatar-status { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--atl-color-surface); } .atl-avatar-status--online { background: var(--atl-color-status-online); } .atl-avatar-status--offline { background: var(--atl-color-text-muted); } .atl-avatar-status--busy { background: var(--atl-color-danger); } .atl-avatar-status--away { background: var(--atl-color-warning); } /* --- Avatar stack (multiple together) --- */ .atl-avatar-stack { display: flex; align-items: center; } .atl-avatar-stack .atl-user-avatar { border: 2px solid var(--atl-color-surface); margin-left: -8px; } .atl-avatar-stack .atl-user-avatar:first-child { margin-left: 0; } /* --- Colors for avatars without photo --- */ .atl-av--blue { background: var(--atl-blue-500); } .atl-av--green { background: var(--atl-green-500); } .atl-av--red { background: var(--atl-red-500); } .atl-av--purple { background: var(--atl-purple-500); } .atl-av--orange { background: var(--atl-yellow-600); } .atl-av--teal { background: var(--atl-teal-500); } .atl-av--pink { background: var(--atl-pink-500); } .atl-av--gray { background: var(--atl-gray-500); } /* ============================================================ NAV — components/nav.css ============================================================ */ /* --- Section label --- */ .atl-nav-label { padding: var(--atl-sp-xl) var(--atl-sp-m) var(--atl-sp-xs); font-size: var(--atl-txt-2xs); font-weight: 700; color: var(--atl-color-primary); letter-spacing: 1px; text-transform: uppercase; } /* --- Navigation item --- */ .atl-nav-item { height: 44px; display: flex; align-items: center; gap: var(--atl-sp-m); padding: 0 var(--atl-sp-m); margin-bottom: 2px; border-radius: var(--atl-r-item); cursor: pointer; text-decoration: none; color: var(--atl-color-text-secondary); font-size: var(--atl-txt-s); font-weight: 500; transition: var(--atl-transition-color); white-space: nowrap; overflow: hidden; } .atl-nav-item:hover { background: var(--atl-color-primary-subtle); color: var(--atl-color-primary); } .atl-nav-item.atl-active { background: var(--atl-color-primary); color: var(--atl-color-primary-contrast-text); box-shadow: 0 4px 12px var(--atl-color-primary-glow); font-weight: 600; } /* --- Compact variant --- */ .atl-nav-item--sm { height: 36px; font-size: var(--atl-txt-xs); } /* --- Counter in nav item --- */ .atl-nav-badge { margin-left: auto; min-width: 20px; height: 20px; background: var(--atl-color-primary-muted); color: var(--atl-color-primary); border-radius: var(--atl-r-pill); font-size: var(--atl-txt-2xs); font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 var(--atl-sp-2xs); flex-shrink: 0; } .atl-nav-item.atl-active .atl-nav-badge { background: var(--atl-nav-badge-active-bg); color: var(--atl-nav-badge-active-text); } /* --- Icon in nav item --- */ .atl-nav-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.7; } .atl-nav-item:hover .atl-nav-icon, .atl-nav-item.atl-active .atl-nav-icon { opacity: 1; } /* --- Nested items --- */ .atl-nav-sub { padding-left: var(--atl-sp-xl); overflow: hidden; max-height: 0; transition: max-height var(--atl-transition-slow); } .atl-nav-sub.atl-open { max-height: 500px; } .atl-nav-item--sub { height: 36px; font-size: var(--atl-txt-xs); padding-left: var(--atl-sp-m); } /* --- Divider --- */ .atl-nav-divider { height: 1px; background: var(--atl-color-border-muted); margin: var(--atl-sp-s) var(--atl-sp-m); } /* ============================================================ DROPDOWN — components/dropdown.css ============================================================ */ .atl-dropdown { position: relative; display: inline-flex; } /* --- Menu --- */ .atl-dropdown-menu { position: absolute; top: calc(100% + var(--atl-sp-xs)); left: 0; min-width: 180px; background: var(--atl-color-surface); border: 1px solid var(--atl-color-border); border-radius: var(--atl-r-m); box-shadow: var(--atl-shadow-lg); z-index: var(--atl-z-dropdown); padding: var(--atl-sp-xs) 0; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transition: opacity var(--atl-transition-fast), visibility var(--atl-transition-fast), transform var(--atl-transition-fast); transform-origin: top left; } .atl-dropdown-menu.atl-open, .atl-dropdown.atl-open > .atl-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* --- Alignment --- */ .atl-dropdown-menu--right { left: auto; right: 0; transform-origin: top right; } .atl-dropdown-menu--up { top: auto; bottom: calc(100% + var(--atl-sp-xs)); transform-origin: bottom left; } /* --- Menu item --- */ .atl-dropdown-item { display: flex; align-items: center; gap: var(--atl-sp-m); padding: var(--atl-sp-xs) var(--atl-sp-m); font-size: var(--atl-txt-s); font-weight: 500; color: var(--atl-color-text-secondary); cursor: pointer; text-decoration: none; transition: var(--atl-transition-color); white-space: nowrap; border: none; background: none; width: 100%; text-align: left; font-family: var(--atl-font-sans); } .atl-dropdown-item:hover { background: var(--atl-color-surface-hover); color: var(--atl-color-text); } .atl-dropdown-item.atl-active { background: var(--atl-color-primary-subtle); color: var(--atl-color-primary); } .atl-dropdown-item--danger { color: var(--atl-color-danger-text); } .atl-dropdown-item--danger:hover { background: var(--atl-color-danger-bg); color: var(--atl-color-danger); } .atl-dropdown-item:disabled { opacity: var(--atl-opacity-disabled); cursor: not-allowed; pointer-events: none; } /* --- Divider --- */ .atl-dropdown-divider { height: 1px; background: var(--atl-color-border-muted); margin: var(--atl-sp-xs) 0; } /* --- Group header --- */ .atl-dropdown-header { padding: var(--atl-sp-xs) var(--atl-sp-m); font-size: var(--atl-txt-2xs); font-weight: 700; color: var(--atl-color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } /* ============================================================ TOGGLE — components/toggle.css ============================================================ */ .atl-toggle-switch { width: 36px; height: 20px; background: var(--atl-color-text-muted); border-radius: var(--atl-r-pill); position: relative; transition: background var(--atl-transition-fast); flex-shrink: 0; cursor: pointer; border: none; padding: 0; outline: none; } .atl-toggle-switch::after { content: ''; position: absolute; width: 14px; height: 14px; background: var(--atl-color-surface); border-radius: 50%; top: 3px; left: 3px; transition: left var(--atl-transition-fast); box-shadow: var(--atl-shadow-xs); } /* --- On / off --- */ .atl-toggle-switch.atl-on, .atl-toggle-switch[aria-checked="true"] { background: var(--atl-color-primary); } .atl-toggle-switch.atl-on::after, .atl-toggle-switch[aria-checked="true"]::after { left: 19px; } /* --- Sizes --- */ .atl-toggle-switch--sm { width: 28px; height: 16px; } .atl-toggle-switch--sm::after { width: 10px; height: 10px; top: 2px; left: 3px; } .atl-toggle-switch--sm.atl-on::after { left: 15px; } .atl-toggle-switch--lg { width: 48px; height: 26px; } .atl-toggle-switch--lg::after { width: 18px; height: 18px; top: 4px; left: 4px; } .atl-toggle-switch--lg.atl-on::after { left: 26px; } /* --- Variants --- */ .atl-toggle-switch--success.atl-on { background: var(--atl-color-success); } .atl-toggle-switch--danger.atl-on { background: var(--atl-color-danger); } /* --- States --- */ .atl-toggle-switch:focus-visible { box-shadow: 0 0 0 3px var(--atl-control-ring); } .atl-toggle-switch:disabled { opacity: var(--atl-opacity-disabled); cursor: not-allowed; } /* --- Row with label --- */ .atl-toggle-row { display: flex; align-items: center; gap: var(--atl-sp-m); cursor: pointer; } .atl-toggle-row-label { flex: 1; font-size: var(--atl-txt-s); color: var(--atl-color-text); } .atl-toggle-row-desc { font-size: var(--atl-txt-xs); color: var(--atl-color-text-muted); margin-top: 2px; } /* ============================================================ MODAL — components/modal.css Activation: add .atl-open to .atl-modal data-theme="dark" is supported via tokens automatically ============================================================ */ /* --- Overlay backdrop --- */ .atl-modal-overlay { position: fixed; inset: 0; background: var(--atl-color-overlay); backdrop-filter: blur(2px); z-index: var(--atl-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--atl-sp-m); opacity: 0; visibility: hidden; transition: opacity var(--atl-transition-normal), visibility var(--atl-transition-normal); } .atl-modal-overlay.atl-open { opacity: 1; visibility: visible; } /* --- Modal container --- */ .atl-modal { background: var(--atl-color-surface); border-radius: var(--atl-r-xl); box-shadow: var(--atl-shadow-xl); width: 100%; max-width: 560px; max-height: calc(100vh - var(--atl-sp-2xl)); display: flex; flex-direction: column; z-index: var(--atl-z-modal-content); transform: translateY(16px) scale(0.98); transition: transform var(--atl-transition-normal); } .atl-modal-overlay.atl-open .atl-modal { transform: translateY(0) scale(1); } /* --- Sizes --- */ .atl-modal--sm { max-width: 400px; } .atl-modal--lg { max-width: 760px; } .atl-modal--xl { max-width: 1000px; } .atl-modal--full { max-width: calc(100vw - var(--atl-sp-3xl)); max-height: calc(100vh - var(--atl-sp-3xl)); } /* --- Header --- */ .atl-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--atl-sp-m); padding: var(--atl-sp-l) var(--atl-sp-xl); border-bottom: 1px solid var(--atl-color-border-muted); flex-shrink: 0; } .atl-modal-title { font-size: var(--atl-txt-xl); font-weight: 700; margin: 0; color: var(--atl-color-text); } .atl-modal-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--atl-color-text-muted); font-size: 18px; transition: var(--atl-transition-color); flex-shrink: 0; } .atl-modal-close:hover { background: var(--atl-color-surface-hover); color: var(--atl-color-text); } /* --- Body --- */ .atl-modal-body { flex: 1; padding: var(--atl-sp-xl); overflow-y: auto; } /* --- Footer --- */ .atl-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--atl-sp-xs); padding: var(--atl-sp-m) var(--atl-sp-xl); border-top: 1px solid var(--atl-color-border-muted); flex-shrink: 0; } .atl-modal-footer--start { justify-content: flex-start; } .atl-modal-footer--between { justify-content: space-between; } /* --- Mobile: drawer from bottom --- */ @media (max-width: 480px) { .atl-modal-overlay { align-items: flex-end; padding: 0; } .atl-modal { max-width: 100%; border-radius: var(--atl-r-xl) var(--atl-r-xl) 0 0; max-height: 90vh; transform: translateY(100%); } .atl-modal-overlay.atl-open .atl-modal { transform: translateY(0); } } /* ============================================================ TABS — components/tabs.css ============================================================ */ /* --- Container --- */ .atl-tabs { display: flex; flex-direction: column; } /* --- Tab bar (navigation) --- */ .atl-tab-bar { display: flex; align-items: flex-end; gap: 0; border-bottom: 2px solid var(--atl-color-border-muted); overflow-x: auto; scrollbar-width: none; } .atl-tab-bar::-webkit-scrollbar { display: none; } /* --- Tab --- */ .atl-tab { display: inline-flex; align-items: center; gap: var(--atl-sp-xs); padding: var(--atl-sp-s) var(--atl-sp-l); font-size: var(--atl-txt-s); font-weight: 500; color: var(--atl-color-text-secondary); cursor: pointer; white-space: nowrap; text-decoration: none; border: none; background: none; font-family: var(--atl-font-sans); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--atl-transition-fast), border-color var(--atl-transition-fast); } .atl-tab:hover { color: var(--atl-color-text); } .atl-tab.atl-active { color: var(--atl-color-primary); border-bottom-color: var(--atl-color-primary); font-weight: 600; } .atl-tab:disabled { opacity: var(--atl-opacity-disabled); cursor: not-allowed; pointer-events: none; } /* --- Variant: pill-tabs (buttons) --- */ .atl-tab-bar--pills { border-bottom: none; background: var(--atl-color-bg-secondary); border-radius: var(--atl-r-pill); padding: var(--atl-sp-2xs); gap: var(--atl-sp-2xs); } .atl-tab-bar--pills .atl-tab { border-radius: var(--atl-r-pill); border-bottom: none; margin-bottom: 0; padding: var(--atl-sp-xs) var(--atl-sp-m); } .atl-tab-bar--pills .atl-tab.atl-active { background: var(--atl-color-surface); color: var(--atl-color-primary); box-shadow: var(--atl-shadow-sm); border-bottom: none; } /* --- Tab content --- */ .atl-tab-panel { display: none; padding-top: var(--atl-sp-xl); } .atl-tab-panel.atl-active { display: block; } /* ============================================================ TOOLTIP — components/tooltip.css Usage: data-tooltip="tooltip text" on element Position: data-tooltip-pos="top|bottom|left|right" (default: top) ============================================================ */ [data-tooltip] { position: relative; } [data-tooltip]::before, [data-tooltip]::after { pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--atl-transition-fast), transform var(--atl-transition-fast); } /* --- Tooltip text --- */ [data-tooltip]::before { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--atl-gray-900); color: var(--atl-gray-50); font-size: var(--atl-txt-xs); font-weight: 500; font-family: var(--atl-font-sans); padding: var(--atl-sp-2xs) var(--atl-sp-xs); border-radius: var(--atl-r-xs); white-space: nowrap; max-width: 240px; white-space: normal; text-align: center; line-height: 1.4; z-index: var(--atl-z-tooltip); box-shadow: var(--atl-shadow-md); } /* --- Arrow --- */ [data-tooltip]::after { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%) translateY(2px); border: 4px solid transparent; border-top-color: var(--atl-gray-900); z-index: var(--atl-z-tooltip); } /* --- Show --- */ [data-tooltip]:hover::before, [data-tooltip]:hover::after, [data-tooltip]:focus-visible::before, [data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { transform: translateX(-50%) translateY(0); } /* --- Position: bottom --- */ [data-tooltip][data-tooltip-pos="bottom"]::before { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px); } [data-tooltip][data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: var(--atl-gray-900); transform: translateX(-50%) translateY(-2px); } [data-tooltip][data-tooltip-pos="bottom"]:hover::before, [data-tooltip][data-tooltip-pos="bottom"]:focus-visible::before { transform: translateX(-50%) translateY(0); } [data-tooltip][data-tooltip-pos="bottom"]:hover::after, [data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after { transform: translateX(-50%) translateY(0); } /* --- Position: right --- */ [data-tooltip][data-tooltip-pos="right"]::before { bottom: auto; top: 50%; left: calc(100% + 8px); transform: translateX(-4px) translateY(-50%); } [data-tooltip][data-tooltip-pos="right"]::after { bottom: auto; top: 50%; left: calc(100% + 2px); border-top-color: transparent; border-right-color: var(--atl-gray-900); transform: translateX(-2px) translateY(-50%); } [data-tooltip][data-tooltip-pos="right"]:hover::before { transform: translateX(0) translateY(-50%); } [data-tooltip][data-tooltip-pos="right"]:hover::after { transform: translateX(0) translateY(-50%); } /* --- Position: left --- */ [data-tooltip][data-tooltip-pos="left"]::before { bottom: auto; top: 50%; left: auto; right: calc(100% + 8px); transform: translateX(4px) translateY(-50%); } [data-tooltip][data-tooltip-pos="left"]::after { bottom: auto; top: 50%; left: auto; right: calc(100% + 2px); border-top-color: transparent; border-left-color: var(--atl-gray-900); transform: translateX(2px) translateY(-50%); } [data-tooltip][data-tooltip-pos="left"]:hover::before { transform: translateX(0) translateY(-50%); } [data-tooltip][data-tooltip-pos="left"]:hover::after { transform: translateX(0) translateY(-50%); } /* --- Dark theme: lighter tooltip --- */ [data-theme="dark"] [data-tooltip]::before { background: var(--atl-gray-300); color: var(--atl-gray-900); } [data-theme="dark"] [data-tooltip]::after { border-top-color: var(--atl-gray-300); } /* ============================================================ SPINNER & SKELETON — components/spinner.css Loading states ============================================================ */ /* --- Spinner --- */ .atl-spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--atl-color-border); border-top-color: var(--atl-color-primary); border-radius: 50%; animation: atl-spin 0.7s linear infinite; flex-shrink: 0; } .atl-spinner--xs { width: 14px; height: 14px; border-width: 2px; } .atl-spinner--sm { width: 18px; height: 18px; border-width: 2px; } .atl-spinner--lg { width: 36px; height: 36px; border-width: 4px; } .atl-spinner--xl { width: 48px; height: 48px; border-width: 4px; } .atl-spinner--white { border-color: rgba(255,255,255,0.3); border-top-color: var(--atl-white-full); } .atl-spinner--muted { border-color: var(--atl-color-bg-tertiary); border-top-color: var(--atl-color-text-muted); } /* --- Centered loading block --- */ .atl-loading-block { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--atl-sp-m); padding: var(--atl-sp-3xl) var(--atl-sp-xl); color: var(--atl-color-text-muted); font-size: var(--atl-txt-s); } /* --- Loading overlay on top of content --- */ .atl-loading-overlay { position: absolute; inset: 0; background: var(--atl-color-overlay-light); backdrop-filter: blur(1px); align-items: center; justify-content: center; z-index: var(--atl-z-raised); border-radius: inherit; } [data-theme="dark"] .atl-loading-overlay { background: var(--atl-color-overlay-dark); } /* --- Skeleton animation --- */ @keyframes atl-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .atl-skeleton { background: linear-gradient( 90deg, var(--atl-color-bg-tertiary) 25%, var(--atl-color-bg-secondary) 50%, var(--atl-color-bg-tertiary) 75% ); background-size: 800px 100%; animation: atl-shimmer 1.5s infinite linear; border-radius: var(--atl-r-xs); } /* Utility skeleton shapes */ .atl-skeleton--text { height: 14px; border-radius: var(--atl-r-xs); } .atl-skeleton--title { height: 20px; border-radius: var(--atl-r-xs); } .atl-skeleton--circle { border-radius: 50%; } .atl-skeleton--card { height: 120px; border-radius: var(--atl-r-card); } /* Example: table row skeleton */ .atl-skeleton-row { display: flex; align-items: center; gap: var(--atl-sp-m); padding: var(--atl-sp-m) var(--atl-sp-xl); } /* --- Keyframe for spinner (defined in button.css, duplicate as fallback) --- */ @keyframes atl-spin { to { transform: rotate(360deg); } } /* ============================================================================= Toast — popup notifications Used via JS API: Atl.toast.success('Saved') ============================================================================= */ .atl-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: var(--atl-z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 380px; width: calc(100vw - 32px); } .atl-toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--atl-r-m); background: var(--atl-color-surface); border: 1px solid var(--atl-color-border); box-shadow: var(--atl-shadow-lg); pointer-events: all; /* Initial state (hidden, at bottom) */ opacity: 0; transform: translateY(12px); transition: opacity var(--atl-transition-normal), transform var(--atl-transition-normal); } .atl-toast.atl-toast--visible { opacity: 1; transform: translateY(0); } /* Icon */ .atl-toast-icon { font-size: 15px; line-height: 1.4; flex-shrink: 0; } /* Text */ .atl-toast-message { flex: 1; font-size: var(--atl-txt-s); line-height: var(--atl-lh-normal); color: var(--atl-color-text); } /* Close button */ .atl-toast-close { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--atl-color-text-muted); padding: 0; margin-left: 4px; flex-shrink: 0; transition: color var(--atl-transition-fast); } .atl-toast-close:hover { color: var(--atl-color-text); } /* ── Variants ── */ .atl-toast--success { border-color: var(--atl-color-success); background: color-mix(in srgb, var(--atl-color-success) 8%, var(--atl-color-surface)); } .atl-toast--success .atl-toast-icon { color: var(--atl-color-success); } .atl-toast--danger { border-color: var(--atl-color-danger); background: color-mix(in srgb, var(--atl-color-danger) 8%, var(--atl-color-surface)); } .atl-toast--danger .atl-toast-icon { color: var(--atl-color-danger); } .atl-toast--warning { border-color: var(--atl-color-warning); background: color-mix(in srgb, var(--atl-color-warning) 8%, var(--atl-color-surface)); } .atl-toast--warning .atl-toast-icon { color: var(--atl-color-warning); } .atl-toast--info { border-color: var(--atl-color-info); background: color-mix(in srgb, var(--atl-color-info) 8%, var(--atl-color-surface)); } .atl-toast--info .atl-toast-icon { color: var(--atl-color-info); } /* ── Mobile ── */ @media (max-width: 480px) { .atl-toast-container { bottom: 16px; right: 16px; left: 16px; width: auto; } } /* ============================================================ FILTER BAR — components/filter-bar.css Search + filter chips + action buttons row. Used in: CRM tables, contact lists, order views. ============================================================ */ /* --- Container --- */ .atl-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--atl-sp-s); padding: var(--atl-sp-s) var(--atl-sp-m); background: var(--atl-color-surface); border: 1px solid var(--atl-color-border-muted); border-radius: var(--atl-r-m); } /* --- Search input section --- */ .atl-filter-bar__search { flex: 1 1 200px; min-width: 160px; max-width: 320px; } /* --- Active filter chips area --- */ .atl-filter-bar__chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--atl-sp-xs); flex: 1 1 auto; } /* --- Right-side actions (Add Filter button, etc.) --- */ .atl-filter-bar__actions { display: flex; align-items: center; gap: var(--atl-sp-xs); margin-left: auto; } /* --- Chip — active filter tag --- */ .atl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: var(--atl-color-primary-muted); color: var(--atl-color-primary); border: 1px solid var(--atl-color-info-border); border-radius: var(--atl-r-pill); font-size: var(--atl-txt-xs); font-weight: 500; line-height: 1.4; white-space: nowrap; user-select: none; } /* --- Chip remove button --- */ .atl-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: none; background: none; padding: 0; margin-left: 2px; color: inherit; opacity: 0.6; cursor: pointer; border-radius: var(--atl-r-pill); font-size: 14px; line-height: 1; transition: opacity var(--atl-transition-fast); } .atl-chip__remove:hover { opacity: 1; } /* --- Chip variants --- */ .atl-chip--muted { background: var(--atl-color-bg-tertiary); color: var(--atl-color-text-secondary); border-color: var(--atl-color-border); } .atl-chip--success { background: var(--atl-color-success-bg); color: var(--atl-color-success-text); border-color: var(--atl-color-success-border); } .atl-chip--danger { background: var(--atl-color-danger-bg); color: var(--atl-color-danger-text); border-color: var(--atl-color-danger-border); } .atl-chip--warning { background: var(--atl-color-warning-bg); color: var(--atl-color-warning-text); border-color: var(--atl-color-warning-border); } /* --- Empty state: no active filters --- */ .atl-filter-bar__chips:empty::before { content: 'No active filters'; font-size: var(--atl-txt-xs); color: var(--atl-color-text-muted); } /* ============================================================ CHAT ITEM — components/chat/chat-item.css Chat list row in the conversations list ============================================================ */ .atl-chat-item { display: flex; align-items: flex-start; gap: var(--atl-sp-xs); padding: var(--atl-sp-xs) var(--atl-sp-m); cursor: pointer; transition: background var(--atl-transition-fast); border-left: 3px solid transparent; position: relative; text-decoration: none; } .atl-chat-item:hover { background: var(--atl-color-surface-hover); } .atl-chat-item.atl-active { background: var(--atl-color-primary-subtle); border-left-color: var(--atl-color-primary); } .atl-chat-item.atl-unread .atl-chat-item-name { font-weight: 700; } .atl-chat-item.atl-unread .atl-chat-item-preview { color: var(--atl-color-text-secondary); font-weight: 500; } .atl-chat-item-body { flex: 1; min-width: 0; } .atl-chat-item-header { display: flex; align-items: center; justify-content: space-between; gap: var(--atl-sp-xs); margin-bottom: 2px; } .atl-chat-item-name { font-size: var(--atl-txt-s); font-weight: 600; color: var(--atl-color-text); flex: 1; min-width: 0; } .atl-chat-item-time { font-size: var(--atl-txt-2xs); color: var(--atl-color-text-muted); flex-shrink: 0; } .atl-chat-item-preview { font-size: var(--atl-txt-xs); color: var(--atl-color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .atl-chat-item-meta { display: flex; align-items: center; gap: var(--atl-sp-2xs); margin-top: 4px; font-size: var(--atl-txt-2xs); color: var(--atl-color-text-muted); } /* --- Avatar wrapper with channel dot --- */ .atl-chat-avatar-wrap { position: relative; flex-shrink: 0; } /* --- Channel dot (TG / WA / VK / IG) --- */ .atl-channel-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--atl-color-surface); position: absolute; bottom: 0; right: 0; flex-shrink: 0; } .atl-channel-dot--tg { background: var(--atl-channel-tg); } .atl-channel-dot--wa { background: var(--atl-channel-wa); } .atl-channel-dot--vk { background: var(--atl-channel-vk); } .atl-channel-dot--ig { background: var(--atl-channel-ig); } .atl-channel-dot--fb { background: var(--atl-channel-fb); } .atl-channel-dot--email { background: var(--atl-color-warning); } .atl-channel-dot--sms { background: var(--atl-gray-500); } /* ============================================================ BUBBLE — components/chat/bubble.css Message bubbles in the chat window ============================================================ */ /* --- Bubble wrapper --- */ .atl-bubble-wrap { display: flex; align-items: flex-end; gap: var(--atl-sp-xs); max-width: 72%; } .atl-bubble-wrap--in { align-self: flex-start; } .atl-bubble-wrap--out { align-self: flex-end; flex-direction: row-reverse; } /* --- Bubble --- */ .atl-bubble { padding: var(--atl-sp-xs) var(--atl-sp-m); border-radius: var(--atl-r-l); font-size: var(--atl-txt-s); line-height: var(--atl-lh-normal); word-break: break-word; } /* Incoming */ .atl-bubble-wrap--in .atl-bubble { background: var(--atl-color-surface); border: 1px solid var(--atl-color-border-muted); border-bottom-left-radius: var(--atl-r-xs); box-shadow: var(--atl-shadow-xs); color: var(--atl-color-text); } /* Outgoing */ .atl-bubble-wrap--out .atl-bubble { background: var(--atl-color-primary); color: var(--atl-color-primary-contrast-text); border-bottom-right-radius: var(--atl-r-xs); box-shadow: 0 2px 8px var(--atl-color-primary-glow); } /* --- Sender name (group chats) --- */ .atl-bubble-sender { font-size: var(--atl-txt-2xs); font-weight: 700; color: var(--atl-color-primary); margin-bottom: 4px; } .atl-bubble-wrap--out .atl-bubble-sender { color: var(--atl-bubble-out-text-muted); } /* --- Quote inside bubble --- */ .atl-bubble-quote { border-left: 3px solid var(--atl-color-primary); padding: var(--atl-sp-2xs) var(--atl-sp-xs); margin-bottom: var(--atl-sp-xs); border-radius: 0 var(--atl-r-xs) var(--atl-r-xs) 0; background: var(--atl-bubble-in-bg-quote); } .atl-bubble-wrap--out .atl-bubble-quote { border-left-color: var(--atl-bubble-out-divider); background: var(--atl-bubble-out-bg-quote); } .atl-bubble-quote-author { font-size: var(--atl-txt-2xs); font-weight: 700; color: var(--atl-color-primary); margin-bottom: 2px; } .atl-bubble-wrap--out .atl-bubble-quote-author { color: var(--atl-bubble-out-accent); } .atl-bubble-quote-text { font-size: var(--atl-txt-xs); color: var(--atl-color-text-secondary); } .atl-bubble-wrap--out .atl-bubble-quote-text { color: var(--atl-bubble-out-text-muted); } /* --- Media attachment --- */ .atl-bubble-media { border-radius: var(--atl-r-s); overflow: hidden; max-width: 280px; cursor: pointer; } .atl-bubble-media img, .atl-bubble-media video { display: block; width: 100%; height: auto; } /* --- System message --- */ .atl-sys-msg { align-self: center; background: var(--atl-color-bg-secondary); border: 1px solid var(--atl-color-border-muted); border-radius: var(--atl-r-pill); padding: var(--atl-sp-2xs) var(--atl-sp-m); font-size: var(--atl-txt-2xs); color: var(--atl-color-text-secondary); text-align: center; max-width: 80%; } /* --- Date separator --- */ .atl-date-sep { display: flex; align-items: center; gap: var(--atl-sp-m); color: var(--atl-color-text-muted); font-size: var(--atl-txt-2xs); align-self: stretch; } .atl-date-sep::before, .atl-date-sep::after { content: ''; flex: 1; height: 1px; background: var(--atl-color-border-muted); } /* --- Message feed --- */ .atl-messages-feed { display: flex; flex-direction: column; gap: var(--atl-sp-xs); padding: var(--atl-sp-m) var(--atl-sp-l); } /* ============================================================ RECEIPT — components/chat/receipt.css Timestamp and read receipts in the bubble ============================================================ */ .atl-receipt { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: var(--atl-sp-2xs); user-select: none; } .atl-receipt-time { font-size: var(--atl-txt-2xs); opacity: 0.65; } .atl-receipt-check { font-size: 11px; opacity: 0.8; } /* Incoming bubble */ .atl-bubble-wrap--in .atl-receipt-time { color: var(--atl-color-text-muted); } /* Outgoing bubble */ .atl-bubble-wrap--out .atl-receipt-time { color: var(--atl-bubble-out-text-subtle); } .atl-bubble-wrap--out .atl-receipt-check { color: var(--atl-bubble-out-accent); } /* Read: blue ticks */ .atl-receipt-check--read { color: var(--atl-blue-300); opacity: 1; } .atl-bubble-wrap--out .atl-receipt-check--read { color: var(--atl-color-receipt-read); opacity: 1; } /* Sending statuses */ .atl-receipt-check--sending { animation: atl-spin 1s linear infinite; opacity: 0.5; } .atl-receipt-check--failed { color: var(--atl-color-danger); opacity: 1; } /* Message type (channel icon) */ .atl-receipt-channel { font-size: 10px; opacity: 0.55; margin-right: 2px; } @keyframes atl-spin { to { transform: rotate(360deg); } } /* ============================================================ CHAT INPUT — components/chat/chat-input.css Message input field ============================================================ */ .atl-chat-input-wrap { display: flex; align-items: flex-end; gap: var(--atl-sp-xs); background: var(--atl-color-surface); border: 1px solid var(--atl-color-border); border-radius: var(--atl-r-l); padding: var(--atl-sp-xs) var(--atl-sp-m); transition: border-color var(--atl-transition-fast), box-shadow var(--atl-transition-fast); } .atl-chat-input-wrap:focus-within { border-color: var(--atl-color-border-focus); box-shadow: 0 0 0 3px var(--atl-control-ring); } .atl-chat-input-field { flex: 1; border: none; outline: none; background: transparent; font-family: var(--atl-font-sans); font-size: var(--atl-txt-s); color: var(--atl-color-text); resize: none; min-height: 22px; max-height: 160px; line-height: var(--atl-lh-normal); padding: 2px 0; } .atl-chat-input-field::placeholder { color: var(--atl-color-text-muted); } /* --- Toolbar buttons --- */ .atl-chat-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } /* --- Attached quote bar --- */ .atl-chat-quote-bar { display: flex; align-items: flex-start; gap: var(--atl-sp-xs); border-left: 3px solid var(--atl-color-primary); padding: var(--atl-sp-2xs) var(--atl-sp-xs); margin-bottom: var(--atl-sp-xs); border-radius: 0 var(--atl-r-xs) var(--atl-r-xs) 0; background: var(--atl-color-primary-subtle); } .atl-chat-quote-bar-body { flex: 1; min-width: 0; } .atl-chat-quote-bar-author { font-size: var(--atl-txt-2xs); font-weight: 700; color: var(--atl-color-primary); margin-bottom: 2px; } .atl-chat-quote-bar-text { font-size: var(--atl-txt-xs); color: var(--atl-color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- State: note (internal comment) --- */ .atl-chat-input-wrap--note { background: var(--atl-color-warning-bg); border-color: var(--atl-color-warning-border); } .atl-chat-input-wrap--note:focus-within { border-color: var(--atl-color-warning); box-shadow: 0 0 0 3px var(--atl-color-warning-border); } /* ============================================================ PAGE — layout/page.css Application shell + CSS Reset ============================================================ */ /* --- Minimal reset --- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--atl-font-sans); font-size: var(--atl-txt-m); color: var(--atl-color-text); background: var(--atl-color-bg); line-height: var(--atl-lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0; } p { margin: 0; } a { color: var(--atl-color-text-link); text-decoration: none; } a:hover { color: var(--atl-color-text-link-hover); text-decoration: underline; } img, svg { display: block; } button { font-family: var(--atl-font-sans); } /* --- Main wrapper --- */ .atl-page { display: flex; height: 100vh; overflow: hidden; background: var(--atl-color-bg); } /* --- Version without fixed height (for WordPress admin) --- */ .atl-page--scroll { height: auto; min-height: 100vh; overflow: visible; } /* --- Page responsiveness --- */ @media (max-width: 768px) { .atl-page { flex-direction: column; } } /* ============================================================ SIDEBAR — layout/sidebar.css ============================================================ */ .atl-sidebar { width: 280px; min-width: 280px; background: var(--atl-color-surface-muted); border-right: 1px solid var(--atl-color-border); display: flex; flex-direction: column; flex-shrink: 0; padding: 0 var(--atl-sp-s); overflow: hidden; transition: width var(--atl-transition-slow), min-width var(--atl-transition-slow); z-index: var(--atl-z-sidebar); } /* --- Width variants --- */ .atl-sidebar--narrow { width: 64px; min-width: 64px; padding: 0 var(--atl-sp-xs); align-items: center; } .atl-sidebar--wide { width: 320px; min-width: 320px; } .atl-sidebar--collapsed { width: 0; min-width: 0; padding: 0; border: none; overflow: hidden; } /* --- Right sidebar (chats, details) --- */ .atl-sidebar--right { border-right: none; border-left: 1px solid var(--atl-color-border); } /* --- Navigation scroll --- */ .atl-nav-scroll { flex: 1; overflow-y: auto; padding-bottom: var(--atl-sp-xl); scrollbar-width: thin; scrollbar-color: var(--atl-color-border) transparent; } .atl-nav-scroll::-webkit-scrollbar { width: 4px; } .atl-nav-scroll::-webkit-scrollbar-track { background: transparent; } .atl-nav-scroll::-webkit-scrollbar-thumb { background: var(--atl-color-border); border-radius: var(--atl-r-pill); } /* --- User block at the bottom of sidebar --- */ .atl-user-block { display: flex; align-items: center; gap: var(--atl-sp-m); padding: var(--atl-sp-m); border-top: 1px solid var(--atl-color-border); cursor: pointer; transition: background var(--atl-transition-fast); flex-shrink: 0; } .atl-user-block:hover { background: var(--atl-color-primary-subtle); } .atl-user-info { flex: 1; min-width: 0; } .atl-user-name { font-size: var(--atl-txt-m); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--atl-color-text); } .atl-user-role { font-size: var(--atl-txt-xs); color: var(--atl-color-text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Branding --- */ .atl-brand { display: flex; align-items: center; padding: var(--atl-sp-m); gap: var(--atl-sp-xs); color: var(--atl-color-primary); flex-shrink: 0; text-decoration: none; font-weight: 700; font-size: var(--atl-txt-l); } .atl-brand-logo { flex-shrink: 0; } .atl-brand-name { overflow: hidden; white-space: nowrap; } /* --- Mobile: sidebar as drawer --- */ @media (max-width: 768px) { .atl-sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform var(--atl-transition-normal); box-shadow: var(--atl-shadow-xl); } .atl-sidebar.atl-open { transform: translateX(0); } } /* ============================================================ TOPBAR — layout/topbar.css ============================================================ */ /* --- Main wrapper (everything to the right of sidebar) --- */ .atl-main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } /* --- Top bar --- */ .atl-top-bar { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--atl-sp-m); padding: 0 var(--atl-sp-2xl); background: var(--atl-color-topbar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--atl-color-border-muted); flex-shrink: 0; z-index: var(--atl-z-topbar); position: sticky; top: 0; } /* --- Top bar zones --- */ .atl-top-bar-left { display: flex; align-items: center; gap: var(--atl-sp-m); flex: 1; min-width: 0; } .atl-top-bar-right { display: flex; align-items: center; gap: var(--atl-sp-xs); flex-shrink: 0; } .atl-top-bar-center { display: flex; align-items: center; justify-content: center; flex: 1; } /* --- Page title in top bar --- */ .atl-top-bar-title { font-size: var(--atl-txt-xl); font-weight: 700; color: var(--atl-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .atl-top-bar-subtitle { font-size: var(--atl-txt-xs); color: var(--atl-color-text-secondary); margin-top: 1px; } /* --- Mobile menu button --- */ .atl-menu-toggle { display: none; } @media (max-width: 768px) { .atl-top-bar { padding: 0 var(--atl-sp-m); height: 56px; } .atl-menu-toggle { display: flex; } } /* ============================================================ CONTENT — layout/content.css ============================================================ */ /* --- Main content area --- */ .atl-content-body { flex: 1; overflow-y: auto; padding: var(--atl-sp-xs) var(--atl-sp-2xl) var(--atl-sp-2xl); scrollbar-width: thin; scrollbar-color: var(--atl-color-border) transparent; } .atl-content-body::-webkit-scrollbar { width: 6px; } .atl-content-body::-webkit-scrollbar-track { background: transparent; } .atl-content-body::-webkit-scrollbar-thumb { background: var(--atl-color-border); border-radius: var(--atl-r-pill); } /* --- Without inner scroll (when outer scroll is needed) --- */ .atl-content-body--noscroll { overflow: hidden; } /* --- Stats grid --- */ .atl-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--atl-sp-l); margin-bottom: var(--atl-sp-2xl); } /* --- Empty state --- */ .atl-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--atl-sp-m); padding: var(--atl-sp-3xl) var(--atl-sp-xl); text-align: center; color: var(--atl-color-text-muted); } .atl-empty-state-icon { font-size: 48px; opacity: 0.4; } .atl-empty-state-title { font-size: var(--atl-txt-l); font-weight: 600; color: var(--atl-color-text-secondary); } .atl-empty-state-desc { font-size: var(--atl-txt-s); max-width: 360px; } /* --- Page section header --- */ .atl-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--atl-sp-l); padding: var(--atl-sp-xl) 0; flex-wrap: wrap; } .atl-page-title { font-size: var(--atl-txt-2xl); font-weight: 700; margin: 0; color: var(--atl-color-text); } .atl-page-subtitle { font-size: var(--atl-txt-s); color: var(--atl-color-text-secondary); margin-top: var(--atl-sp-2xs); } /* --- Responsive --- */ @media (max-width: 768px) { .atl-content-body { padding: var(--atl-sp-m); } .atl-stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--atl-sp-m); } } /* ============================================================ CONTAINER — layout/container.css ============================================================ */ .atl-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--atl-sp-xl); } .atl-container--xs { max-width: 480px; } .atl-container--sm { max-width: 640px; } .atl-container--narrow { max-width: 800px; } .atl-container--md { max-width: 1024px; } .atl-container--wide { max-width: 1600px; } .atl-container--full { max-width: none; } @media (max-width: 768px) { .atl-container { padding-inline: var(--atl-sp-m); } }